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

 

Deja un comentario