Superscripts :

JSBuscador 2.0
Buscador de páginas web realizado con JavaScript

Pruébalo en: ejemplo de JSBuscador
Descárgalo en: fichero .zip para JSBuscador version 2.0

1. ¿Qué es JSBuscador?

JSBuscador es un buscador para páginas web personales desarrollado íntegramente en JavaScript. A diferencia de la mayoría de buscadores, está realizado integramente con JavaScript de cliente, por lo que para su instalación y ejecución no es necesario ejecutar ningún programa o aplicación en el servidor web. Por tanto, no es un CGI, y no utiliza PHP, JSPs ni cualquier otra tecnología de servidor.

Precisamente, debido a lo anteriormente expuesto, JSBuscador tiene grandes ventajas:

  • Su instalación no requiere permisos especiales en el servidor web: se descarga al servidor como el resto de páginas.
  • Su configuración y personalización se basa en JavaScript y HTML: no hace falta conocer otros lenguajes.
  • Su base de datos de búsqueda es realmente un fichero .js de JavaScript: no hace falta saber de bases de datos.

Sin embargo, debido igualmente a su concepción, JSBuscador tiene limitaciones que hay que conocer:

  • Al cargar la página de búsqueda, el usuario se está descargando toda la base de datos de búsqueda en su navegador. Esto hace que los tiempos de descarga del formulario de búsqueda sean mayores cuanto mayor es el sitio web. También hay que considerar una posible falta de privacidad, al permitir al visitante descargar toda la base de datos.
  • La búsqueda se hace en el navegador: será más lenta si el PC del usuarios no es muy rápido.
  • La base de datos es un fichero: la búsqueda será secuencial, y por tanto, lenta para bases de datos muy grandes.

Por todo lo anterior, JSBuscador puede definirse como un buscador de páginas web realizado con JavaScript, teniendo en cuenta que es apropiado para sites de pequeño o mediano tamaño, en los que no se disponga de acceso a recursos del servidor, y se quiera sencillez y facilidad de uso.

2. Funcionalidades incluidas en la versión 2.0

La versión 2.0 incluye, además de las funcionalidades de la versión 1.0, las siguientes mejoras:

  • Los resultados se paginan, para evitar mostrar páginas de resultados muy largas. El número de resultados por página es configurable.
  • Las palabras buscadas se resaltan con fondo amarillo en la página de resultados de la búsqueda, para facilitar la selección del resultado que más se adapte a lo que se está buscando.
  • El algoritmo de ordenación de resultados se ha mejorado.
  • Los resultados de la búsqueda no se abren en una ventana nueva. Se actualiza el contenido de una capa, por lo que la página del búscador no se recarga nunca.

La versión 1.0 incluye las siguientes funcionalidades avanzadas:

  • Las palabras clave se pueden introducir con o sin acentos: el buscador realiza la búsqueda considerando todas las posibles acentuaciones de las palabras claves.
  • Se calcula un indicador de la relevancia de cada resultado de la búsqueda, que se muestra a la izquierda de forma gráfica.
  • Los resultados de la búsqueda se ordenan de mayor a menor relevancia.
  • El diseño de la página de resultados es fácilmente configurable mediante variables JavaScript. Se pueden configurar colores, tipos de letra, aspecto de los enlaces, imágenes, etc.

Para que puedas verlo en acción, hemos creado una página de ejemplo de JSBuscador para una base de datos reducida de {El Código}. Prueba a buscar por la palabra clave codigo.

3. Descarga

JSBuscador version 2: jsbuscador_v2.0.zip

4. Instalación y configuración

Instalación

La instalación es muy sencilla y se realiza en 4 pasos:

  1. Abre el fichero buscador.js con tu editor de texto favorito, y modifica los valores de las variables de la sección CONFIGURACION, para adaptar el buscador a tu página web (ver el apartado Configuración para más información sobre las opciones de configuración).
  2. El fichero buscador.html es la página HTML que muestra el formulario de búsqueda. Puedes abrirla en tu editor de texto favorito y adaptar su diseño al estilo de tu página web.
  3. La base de datos de búsqueda se guarda en el fichero dbs.js. El fichero incluido en el .zip es sólo un ejemplo. Debes crear tu propia base de datos con la información de las páginas de tu sitio web. En el apartado La base de datos se explica cómo hacerlo.
  4. Descarga los ficheros buscador.js (motor de búsqueda), dbs.js (base de datos) y buscador.html (formulario de búsqueda) a una carpeta de tu sitio web (los tres en la misma). Descarga también las imágenes punt_on.gif y punt_off.gif, para los indicadores de relevancia.

El buscador está listo para ser utilizado. Para mostrar el formulario de búsqueda, tienes que cargar la página buscador.html.

Configuracion

Las opciones de configuracion de la versión 1 son las siguientes

dominio Dominio desde el que se ejecuta el buscador
extension Extension de las paginas del site (htm o html)
pagina_buscador Ruta y nombre de la pagina de búsqueda (con barra por delante)
imagen_relevancia Ruta y prefijo del nombre de la imagen de relevancia (punt_on.gif y punt_off.gif)
tipo_fuente
grosor_fuente
color_fuente
tamano_fuente		 Opciones para las fuentes
tamano_fuente_titulo
grosor_fuente_titulo
color_fuente_titulo		 Opciones de estilo para las fuentes del título
color_fondo Color de fondo
color_fuente_clave Color para remarcar la palabra clave en el título de la página de resultados
color_enlace
grosor_enlace
color_enlace_visitado
color_enlace_activo
fondo_enlace_visitado		 Opciones de estilo para los enlaces
color_subrayado Color de fondo para remarcar la palabra clave en los resultados de la búsqueda
resXpag Número de resultados por página, para la paginación de resultados

La base de datos

La base de datos está contenida en un fichero .js, y se construye con un array, de nombre BaseDatos. Los elementos de este array son cadenas que deben contener la información necesaria para describir y localizar cada página del sitio web que queramos sea localizable por el motor de búsqueda. Cada elemento del array almacena:

  • La ruta física y el nombre de la página.
  • El título, que aparecerá en la pagina de resultados.
  • La descripción del documento, que aparecerá debajo del título, en la pagina de resultados.
  • Las palabras clave del documento.

Para que esta información sea interpretada por el script, definimos un formato para cada elemento del array. En nuestro formato, los 5 datos anteriores aparecen separados por el caracter ";". Un ejemplo de base de datos para 2 páginas sería:

var BaseDatos = new Array (
"/index;Página de inicio;Bienvenido a mi sitio web;inicio,home,homepage",
"/mis_cosas/cosas;Mis cosas;Estas son mis cosas;cosas,objetos"
)

5. Por hacer...

En mente tenemos las siguientes mejoras:

  • Eliminar la necesidad de incluir la ruta y nombre de la pagina buscador.html como parámetro de configuración.
  • Mostrar el tiempo invertido en la búsqueda en los resultados de búsqueda.
  • Ampliar el número de ocpiones de configuración para los estilos de las fuentes (tamaño, color, tipo, etc.).
  • Permitir buscar con varias palabras de búsqueda, aplicando criterios booleanos (AND, OR, etc.).
  • Herramienta de indexación del site para crear el fichero de base de datos automáticamente.

 

JSBuscador