tecnología

Añade OpenSearch a tu sitio en 5 minutos

Diría que una de las nuevas funcionalidades tanto de Firefox 2 como de Internet Explorer 7 que han pasado más inadvertidas es el soporte de OpenSearch. Y es una pena, porque aprovechar esta nueva funcionalidad desde nuestros sitios web es realmente sencillo.

OpenSearch es un estándar que creó Amazon es su día para medio estandarizar la forma en que se hacen consultas a distintos buscadores de Internet. El objetivo: integrar de forma más sencilla las consultas a buscadores por parte de cualquier aplicación. En el caso más evidente, que la aplicación sea el propio navegador, esta integración viene con la barra de búsquedas que ha aparecido en las últimas versiones de FF e IE.

Hasta aquí la introducción. Vamos con la chicha. Si echamos un vistazo a la especificación vemos que tenemos que crear un archivo xml en nuestro servidor que va a describir nuestro servicio de búsqueda (o cómo se nos va a buscar). El formato de este archivo está bastante claro, así que tomemos de ejemplo el de 11870.com:

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>11870.com</ShortName>
  <Description>Busca en 11870.com</Description>
  <Tags>11870 negocios sitios tarjetero agenda</Tags>
  <Image height="16" 
         width="16" 
         type="image/x-icon">http://11870.com/favicon.ico</Image>
  <Url type="text/html" 
       template="http://11870.com/konsulto/{searchTerms}"/>
  <Query role="example" 
         searchTerms="sushi en barcelona"/>
  <Developer>11870 dev team</Developer>
  <AdultContent>false</AdultContent>
  <Contact>maestroarmero@11870.com</Contact>
</OpenSearchDescription>

Hagamos un repaso rápido de los campos que estamos utilizando (ojito, que no es obligatorio usar todos los que estamos utilizando nosotros):

  1. ShortName: indica el nombre corto que identifica nuestro buscador, es el que mostrarán los navegadores en el desplegable de la caja de búsqueda.
  2. Description: una pequeña descripción del servicio (tampoco nos tenemos que lucir mucho, unas pocas más palabras que para el nombre corto sirve).
  3. Tags: etiquetas que podrían definir qué puedes encontrar en nuestro buscador o para qué sirve.
  4. Image: una imagen que identifique nuestro buscador, aparecerá al lado del nombre corto en la caja de búsqueda.
  5. Url: ésta es la importante. Con esta etiqueta definiremos cómo tiene que hacer la petición el navegador para obtener los resultados de búsqueda que desea el usuario. En nuestro caso: http://11870.com/konsulto/{searchTerms}, lo que significa que cuando el usuario introduzca en la caja de búsqueda la consulta sushi en Barcelona el navegador hará una petición de tipo GET a la URL http://11870.com/konsulto/sushi+en+Barcelona.
  6. Query: identifica consultas predefinidas. El estándar recomienda definir una de ejemplo (utilizando el atributo role="example"), que en nuestro caso es, cómo no, sushi en barcelona.
  7. Developer: si queremos darnos algún tipo de crédito. Nosotros, el equipo de tecnología 😉
  8. AdultContent: determinamos si existe la posibilidad de devolver resultados que apunten a contenido exclusivamente para adultos. No es nuestro caso ahora mismo.
  9. Contact: Una dirección de contacto del servicio de búsqueda.

Como ya hemos comentado antes, no es necesario definir todos estos atributos (de hecho, únicamente son obligatorios Shortname, Description y Url) y también podemos definir unos cuantos más (codificación de caracteres en entrada y salida, copyright, etc…). Para tener una idea más clara se puede consultar el documento de especificación de OpenSearch.

Bien, pues ahora llega la pregunta del millón, si creamos este archivo y lo dejamos en algún rincón de nuestro sitio y accesible desde Internet, ¿cómo sabe el navegador que estamos ofreciendo este servicio? La respuesta viene de la mano del autodiscovery, que ya lleva tiempo utilizándose para saber que una página tiene una fuente RSS o Atom asociada. Así que añadimos la siguiente cabecera a la sección <HEAD> de las plantillas de nuestro sitio:

<link rel="search" 
      href="/opensearch.xml" 
      type="application/opensearchdescription+xml" 
      title="11870.com" />

Por supuesto, sustituyendo /opensearch.xml por la ruta donde dejemos el archivo que acabamos de crear y puede que cambiando el título también 😉

Se puede dar el caso de que no tengamos un servicio de búsqueda en nuestra web, con lo que todo esto que acabamos de contar serviría de muy poco. Pero podemos utilizar otros buscadores en nuestra definición de servicio de búsqueda, con lo que el resultado es que se acabe utilizando Google o cualquier otro servicio restringiendo la consulta a nuestro propio dominio.

Un ejemplo básico de archivo de definición de la búsqueda para hacerlo utilizando Google (fijaos en el site:11870.com dentro de la URL de consulta):

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>11870.com</ShortName>
  <Description>Busca en 11870.com</Description>
  <Url type="text/html" 
       template="http://www.google.es/?q=site:11870.com {searchTerms}"/>
</OpenSearchDescription>

Si optamos por esta alternativa también tenemos que añadir las cabeceras de autodiscovery tal y como acabamos de comentar.

Con el poco caso que se ha hecho todavía al soporte de OpenSearch en los navegadores más recientes, es una oportunidad perfecta para dar un toque especial a nuestro sitio web 🙂

Actualización: Como bien ha notado Nahum, si tenemos instalada la barra de google en nuestro navegador, el buscar en 11870 es todavía más evidente.

Comentarios

8 respuestas a “Añade OpenSearch a tu sitio en 5 minutos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Pingbacks y trackbacks

  1. mcdave.net &#187; links for 2007-03-18
  2. Buscador de 11870 para Firefox • Grancomo
  3. Xnoccio - » Leyendo un feed OpenSearch con código Java