Cómo incluir un cajón de búsqueda en la página web de nuestra biblioteca

Para facilitar la búsqueda de información y mejorar la experiencia de un usuario en la página web de nuestra biblioteca, es posible agregar un cajón de búsqueda que permita centralizar las necesidades de información entre las diferentes plataformas de consulta. Para esto, podemos incluir diferentes fragmentos de código HTML, CSS y JavaScript construidos con Bootstrap en la página web de la biblioteca .

A continuación, se mostrarán diferentes cajones de búsqueda que permitirá adaptarse a un Sistema Integrado de gestión bibliotecaria (SIGB) y a un Repositorio Institucional. Las búsquedas se dirigen a un servidor de demostración de KOHA y al repositorio Open Knowledge Repository del Banco Mundial (DSpace)

KOHA (Responsive)

Para incluir este cajón de búsqueda es necesario reemplazar la URL de KOHA, resaltada con color rojo, por la URL de su catálogo:

<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
  integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<
script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"></script>
<
script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
  crossorigin="anonymous"></script>
<
script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
  crossorigin="anonymous"></script>

<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" id="catalogo-tab" data-toggle="tab" href="#catalogo" role="tab"
          aria-controls="catalogo" aria-selected="true">Catálogo</a>
     </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane fade show active" id="catalogo" role="tabpanel" aria-labelledby="catalogo-tab">
      <form class="form-inline" target="_blank" action="http://koha.adminkuhn.ch/cgi-bin/koha/opac-search.pl">
        <label class="sr-only">Búsqueda</label>
          <input type="text" class="form-control mt-3 col-md-10" placeholder="Búsqueda en el catálogo" name="q">
          <button type="submit" class="btn btn-primary mt-3 col-md-2">Buscar</button>
      </form>
    </div>
  </div>
</div>

KOHA + DSPACE (Responsive)

Para incluir este cajón de búsqueda es necesario reemplazar la URL de KOHA por la URL de su catálogo y la URL del OKR por la URL de su repositorio.

<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<
script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<
script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<
script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="catalogo-tab" data-toggle="tab" href="#catalogo" role="tab" aria-controls="catalogo"
        aria-selected="true">Catálogo</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="repositorio-tab" data-toggle="tab" href="#repositorio" role="tab" aria-controls="repositorio"
        aria-selected="false">Repositorio</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="catalogo" role="tabpanel" aria-labelledby="catalogo-tab">
      <form class="form-inline" target="_blank" action="http://koha.adminkuhn.ch/cgi-bin/koha/opac-search.pl">
        <label class="sr-only" >Búsqueda</label>
        <input type="text" class="form-control mt-3 col-md-10" placeholder="Búsqueda en el catálogo" name="q">
        <button type="submit" class="btn btn-primary mt-3 col-md-2">Buscar</button>
      </form>
    </div>
    <div class="tab-pane fade" id="repositorio" role="tabpanel" aria-labelledby="repositorio-tab">
      <form class="form-inline" target="_blank" action="https://openknowledge.worldbank.org/">
        <label class="sr-only">Búsqueda</label>
        <input type="text" class="form-control mt-3 col-md-10" placeholder="Búsqueda en el repositorio" name="query">
        <button type="submit" class="btn btn-primary mt-3 col-md-2">Buscar</button>
      </form>
    </div>
  </div>
</div>

Observaciones

  • Puede ocurrir que los archivos CSS y JavaScript del cajón de búsqueda entren en conflicto con el sitio web de la biblioteca ya que utilizan versiones de Bootstrap diferentes a la 4.5.2. Esto puede ser solucionado utilizando la misma versión de Bootstrap del sitio web.
  • Pueden apoyarse del área de sistemas o tecnología de la institución si tienen restricciones de edición de la página web

Aunque los fragmentos de código expuestos no abarcan la totalidad de las plataformas, es posible realizar una sencilla modificación para que permitan una correcta redirección.

En los comentarios pueden dejar sus ideas e iremos actualizando esta entrada para crear nuevas pestañas o para dirigir a otros SIGB.

Espero sea de utilidad para todos.

AlejoPachonS

 

Visitas:221

3 comentarios en “Cómo incluir un cajón de búsqueda en la página web de nuestra biblioteca

  1. Viviana Diaz

    Hola muy bueno el post ! Consulta para un sitio hecho en WordPress ? Es la misma estructura de código ? Gracias

    Responder
    1. Alejandro Pachón Santana Autor del post

      Hola Viviana, claro que si puedes agregarlo en WordPress. Es necesario tener en cuenta que tengas los permisos necesarios para agregar los encabezados meta y script que se muestran en el ejemplo.

      Responder

Deja un comentario