El buscador AJAX de Blogger

12 de julio del 2007 / 1 de junio del 2009 ... casi dos años. Una eternidad para cualquier producto web. Es el caso del gadget con el buscador Ajax de Blogger. Casi dos años accesible sólo via Blogger Draft lo que significa que no estaba terminado, que algo debía estar fallando o que había quedado traspapelado u olvidado debajo de una pila de seguidores. Recién ahora apareció el anuncio y ese gadget se ha agregado como elemento estándard (más información).

En realidad, lo curioso no era sólo que una empresa cuyo caballito de batalla es un buscador no tuviera un buscador integrado en sus blogs; lo curioso es que siempre funcionó bien (bien en téminos de Blogger) y, por lo que se ve, nada ha cambiado; el código sigue siendo el mismo. Lo vengo usando desde entonces y si bien es cierto que a veces tardaba un poco en conectarse, es un buscador que me gustó de entrada por dos motivos: porque muestra los resultados en la misma página y porque es fácilmente configurable con CSS lo que no es poco decir. Acostumbrados a tanto iframe y tanto script predigerido, es un soplo de aire fresco.

Lo agregamos desde Diseño | Elementos de la página | Agregar gadget, seleccionando Cuadro de búsqueda:

En la ventana, podemos marcar o desmarcar las distintas opciones que nos permiten definir dónde se harán las búsquedas. Cada una de ellas, aparecerá en una solapa diferente y todas ellas mostraran resultados preliminares en la misma página:

Este blog: es el buscador interno
Acceso desde aquí: busca en las entradas visibles, enlaces dentro de esas entradas, listas de sitios o listas de enlaces
Internet: es un buscador genérico
Listas de blogs y enlaces: agrega la posibilidad de buscar en todos los sitios agregados al blogroll

Una vez que definimos esto, lo agregamos y lo ubicamos donde queremos que se muestre.

Por defecto, leerá los datos de nuestra plantilla y se adaptará a las características gráficas de nuestro sitio. Veremos el cuadro de búsqueda y nada más. De manera automática, se añadirá un DIV oculto sobre el área de posts que es donde se mostrarán los resultados:

<div id="uds-searchControl">
  .......
</div>

Eso quiere decir que tendremos dos áreas que podremos personalizar, el cuadro de búsquedas y el cuadro de resultados.

Si vamos a la plantilla y expandimos los artilugios veremos el código comenzando con algo así:

<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'>
<b:includable id='main'>
  <!-- el título igual que cualquier otro widget -->
  .......
  <!-- el código en si mismo -->
  <div class='widget-content' style='width:95%'>
    <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
      <span class='cse-status'><data:loadingMsg/></span>
    </div>
  </div>

  <!-- y aquí comienza lo interesante -->
  <!-- override gsearch.css -->
  <style type='text/css'>
    #uds-searchControl .gs-result .gs-title, #uds-searchControl .gs-result .gs-title *, #uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {color:<data:linkColor/>;}
    #uds-searchControl .gs-result .gs-title a:visited, #uds-searchControl .gs-result .gs-title a:visited * {color:<data:visitedLinkColor/>;}
    #uds-searchControl .gs-relativePublishedDate, #uds-searchControl .gs-publishedDate {color: <data:dateColor/>;}
    #uds-searchControl .gs-result a.gs-visibleUrl, #uds-searchControl .gs-result .gs-visibleUrl {color: <data:urlColor/>;}
    #uds-searchControl .gsc-results {border-color: <data:borderColor/>; background-color: <data:backgroundColor/>;}
    #uds-searchControl .gsc-tabhActive {border-color: <data:borderColor/>; border-top-color: <data:activeBorderColor/>; background-color: <data:backgroundColor/>; color: <data:textColor/>;}
    #uds-searchControl .gsc-tabhInactive {border-color: <data:borderColor/>; background-color: transparent; color: <data:linkColor/>;}
    #uds-searchClearResults {border-color: <data:borderColor/>;}
    #uds-searchClearResults:hover {border-color: <data:activeBorderColor/>;}
    #uds-searchControl .gsc-cursor-page {color: <data:linkColor/>;}
    #uds-searchControl .gsc-cursor-current-page {color: <data:textColor/>;}
  </style>

  <!-- el ícono para editar el elemento -->
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

En esa parte de STYLE, Blogger dice "override gsearch.css" y eso es lo importante y lo que lo hace distinto a tantos otros gadgets. Las características gráficas son genéricas y se cargan desde una hoja de estilo externa (gsearch.css). Para que se adapte a nuestro sitio, Blogger sobrescribe algunas propiedades y por eso lo hace allí, justo después de cargar el gadget.

Por defecto, sólo cambia algunos datos para igualar los colores de nuestra plantilla pero, nada impide agregar o modificar más definiciones.

Empecemos con el cuadro del buscador que es el más sencillo. Hay cuatro definiciones importantes:

input.gsc-input {
  /* es el cuadro donde se ingresa el texto a buscar */
}
input.gsc-search-button {
  /* es el botón "Buscar" */
}
.gsc-branding-text {
  /* es el texto inferior "con la tecnología de"  */
}
.gsc-branding-img-noclear {
  /* es la imagen con el logo de Google*/
}

Configurar el cuadro de resultados requiere paciencia, tiene muchas definiciones y es bastante confuso pero veamos si es posible encontrar cada parte o por lo menos, aquellas más importantes.

El bloque total, el rectángulo oculto donde se muestran los resultados del buscador se llama uds-searchControl así que podemos usarlo si es necesario modificar su ancho y sus márgenes:

#uds-searchControl { }

En la parte superior se muestran las solapas con las opciones que hayamos seleccionado y ese rectángulo podemos modificarlo mediante:

#uds-searchControl .gsc-tabsArea { }

Difícilmente sea necesario hacerlo, más importante son las solapas. Hay de dos tipos y en ambas podríamos establecer bordes, color y fuente de los textos, colores de fondo, etc:

#uds-searchControl .gsc-tabhInactive { /* son las solapas inactivas */ }
#uds-searchControl .gsc-tabhActive { /* es la solapa activa */ }

A la derecha de estas se muestra un botón que permite volver a ocultar los resultados y tiene dos definiciones:

#uds-searchClearResults { }
div.gsc-clear-button { }

Todo lo demás se encuentra dentro de un rectángulo que tiene un borde visible y un padding que separa el contenido de esos bordes:

#uds-searchControl .gsc-results { }

Los resultados en si mismos tienen cuatro definiciones a las que podemos agregarles fondos, cambiar colres y fuentes, etc:

#uds-searchControl .gs-result .gs-title, 
#uds-searchControl .gs-result .gs-title *, 
#uds-searchControl .gs-result .gs-title a:visited, 
#uds-searchControl .gs-result .gs-title a:visited * { /* es el título de cada una */}

#uds-searchControl .gs-relativePublishedDate, #uds-searchControl .gs-publishedDate { /* es la fecha */}

#uds-searchControl .gs-result a.gs-visibleUrl, #uds-searchControl .gs-result .gs-visibleUrl { /* es enlace inferior */}

#uds-searchControl .gs-result .gs-snippet { /* es el resumen de las entradas encontradas */}

En esta última, se resalatan las palabras buscadas, eso se hace con una etiqueta B así que podríamos agregar algo así si quisiéramos que resaltarán de otro modo:

#uds-searchControl .gs-result .gs-snippet b { }

En la parte inferior, lo que veremos es un área de paginación llamada:

.gsc-results .gsc-cursor-box { }

En ese área, las páginas se muestran como enlaces numerados definidos por:

#uds-searchControl .gsc-results .gsc-cursor-box .gsc-cursor-page { }

y la página actual está resaltada:

#uds-searchControl .gsc-results .gsc-cursor-box .gsc-cursor-current-page { }

a la derecha, el enlace "más resultados" nos abrirá el buscador de normal:

#uds-searchControl .gsc-results .gsc-cursor-box .gsc-trailing-more-results { }