Microformatos • PRÁCTICO

MENSAJE SECRETO
Los microformatos son simples etiquetas HTML que revelan información sobre los datos web. Les mostramos cómo aprovechar esta tecnología tan práctica. POR DMITRI POPOV
[3], hCalendar [4] o geo [5]. Se muestran otras alternativas en la Tabla 1. Para una descripción completa de todas las especificaciones, podemos visitar la wiki sobre microformatos [6].

Uso de los Microformatos para organizar la web

U

n concepto reciente denominado web semántica [1] está dotando de un nuevo significado al HTML ordinario. En números anteriores de Linux Magazine hemos hablado sobre las iniciativas existentes para la web semántica, como el proyecto Simile [2]. Una de las tecnologías más simples y maduras para la web semántica son los microformatos. Los microformatos son simples etiquetas HTML que revelan información acerca del significado y del contexto de los datos web. Por ejemplo, una etiqueta de microformato podría aclarar que el texto forma parte de un curriculum vitae o de una tarjeta de negocios. Cualquier navegador, diseñado para reconocer el microformato, interpretará los datos de acuerdo con la información obtenida. El navegador podría mostrarlos de forma que recompongan una tarjeta de negocios, o mejor aún, una aplicación del lado de cliente podría extraer los datos de contacto y copiarlos en una agenda.

Los microformatos también son útiles en situaciones en las que un solo cliente web quiere compilar la información obtenida de distintas fuentes. Por ejemplo, si usamos una etiqueta que incluye las coordenadas de latitud y longitud de un restaurante, un navegador con las extensiones adecuadas podría localizar automáticamente al restaurante en un mapa de Google. Al igual que otras tecnologías para la web semántica, con los microformatos no se requiere que el desarrollador conozca previamente el uso que el cliente pretende dar a los datos. Una especificación de microformato lo define meramente como un formato por el que se asocia a un contexto un texto determinado. La reciente extensión Operator, o también la extensión Tail, dotan a Firefox de soporte para los microformatos. En este artículo les introduciremos en el mundo de los microformatos y veremos de cerca las opciones más populares, como hCard

Introducción a los Microformatos
Para explicar qué son los microformatos y cómo nos pueden ayudar, comenzaremos con un ejemplo simple. Echemos un vistazo al siguiente texto:
Linux Magazine Av. Juan López Peñalver, 21 Málaga ESPAÑA

El ojo humano lo identifica rápidamente como una dirección. Podemos ver el nombre de la calle, la ciudad y el país. Sabemos que España es un país y Málaga una ciudad. Por desgracia, las máquinas (aún) no tienen la capacidad de determinar el tipo de información con sólo verla; necesitan de una serie de marcas que identifiquen los datos. Ahí es donde nos pueden ayudar los microformatos. A diferencia de otras tecnologías similares, los microformatos no pretenden ofrecer una solución universal para

Roman Milert, Fotolia

WWW.LINUX- MAGAZINE.ES

Número 35

39

PRÁCTICO • Microformatos EVALUACIÓN • Ibm y Sun

la identificación y etiquetado de todo tipo de datos. Cada microformato está diseñado para una situación específica. Como ejemplo, explicaremos más adelante cómo se puede usar el microformato hCard para definir información de contacto como la dirección anterior. Si ya se tiene experiencia con HTML y CSS, no habrá problema para comprender el funcionamiento de los microformatos y cómo usarlos. Hay tres bloques principales en su construcción, que son los elementos div, span y class, herramientas usadas para dotar a los documentos de cierta estructura. Los elementos div y span definen divisiones o secciones dentro de un documento. Mientras que div define una sección al estilo de un párrafo, span se usa para etiquetar un segmento directamente en el cuerpo del texto. Usados con el atributo class, los elementos div y class pueden definir tipos de información que HTML no puede describir. Por ejemplo, en un artículo podemos usar <div class=”autor”>Dmitri Popov</div> para indicar el nombre del autor y

Tabla 1: Microformatos
Formato hCalendar hCard Descripción Calendario e informa ción sobre eventos Información de con tacto y otros datos descriptivos de una persona u organi zación Tipo de licencia del contenido de la página; nos permite buscar contenido basándonos en el tipo de licencia Etiquetas para repre sentar la relaciones humanas (amigo, colega, etc.) Información sobre direcciones Datos de longitud y lat itud para la integración en utilidades de mapa Formato para la publi cación de resúmenes y CVs Indica que el con tenido de la página es la revisión de un pro ducto Indica la presencia de un sistema de pago en línea.

Rel-License

XFN

<span class=”fechapub”>17 de Agosto de 2007</span> para indicar una fecha de publicación. Ambos, div y span son útiles como etiquetas semánticas para marcar una sección o un trozo de texto de un documento. Otros microformatos más simples, Figura 1: La búsqueda de Yahoo! de Creative Commons se sirve del como Rel-License o microformato Rel-License. Rel-Tag, hacen uso de otro elemento llamado rel. En HTML, arlo fácilmente simplemente añadiénel elemento rel describe la relación entre dole el atributo rel=“license”: el actual documento y el anclaje definido por el atributo href. Simplificando, se <a rel=”license” href=”http://U puede decir que el elemento rel describe creativecommons.org/licensesU el recurso al que apunta el enlace href. /by-nc/3.0/”> Creative Commons U Sabiendo esto, en el caso de Rel-License, Attribution-Noncommercial U el elemento rel define el enlace hacia 3.0</a> una licencia de derechos de autor particular. Como puede apreciarse no es especialRel-License y Rel-Tag son ejemplos permente difícil convertir el enlace en una fectos de lo fácil que es añadir microfornota microformateada sobre copyrights. La matos a un contenido. Por ejemplo, ventaja inmediata es que añadiendo el supongamos que hemos publicado un microformato Rel-License hacemos que la artículo bajo la licencia Creative Compágina web quede disponible para su búsmons Attribution-Noncommercial 3.0. queda en términos de tipos de licencia. En ese caso, lo más probable es que proTanto Yahoo! como Google están al tanto porcionemos una nota sobre el copyright del formato Rel-License y nos permiten busque apunta a la licencia en particular: car contenidos de ese tipo determinado. Por ejemplo, Yahoo! integra una página <a ref=”http://U dedicada a la búsqueda de contenidos Crecreativecommons.org/U ative Commons [7] (Figura 1), mientras licenses/by-nc/3.0/”> U que Google nos permite definir un tipo de Creative Commons Attribution-U licencia en su sección de Búsqueda AvanNoncommercial 3.0</a> zada. El formato Rel-Tag funciona de un modo parecido. Si por ejemplo nuestro artíEse enlace es estupendo para el viejo culo concierne a las wikis, lo lógico es marHTML, aunque podemos microformatecarlo con la etiqueta ‘wiki’ tal que:

adr geo

Listado 1: Ejemplo para el Microformato hCard
01 <div class=”fn org”>Linux Magazine</div> 02 <div class=”adr”> 03 <div class=”street-address”>Av. Juan López Peñalver, 21</div> 04 <div> 05 <span class=”locality”>Málaga</span> , 06 <abbr=”region” title=”Malaga”>MA</abbr> <span class=”postal-code”>29590</spa n> 07 </div> 08 <div><div class=”country-name”>ESPAÑA</d iv> 09 </div> 10 <div>Teléfono: <span class=”tel”>+34 951 235 904</span></div> 11 <div>Email: <span class=”email”>info@linux-magaz ine.es</span></div> 12 </div>

hResume

hReview

RelPayment

40

Número 35

WWW.LINUX- MAGAZINE.ES

Microformatos • PRÁCTICO Ibm y Sun • EVALUACIÓN

información de contacto entre aplicaciones. Aunque hCard es más complejo que RelLicense y Rel-Tag, aún es lo suficientemente fácil como para que lo comprendamos sin mayores problemas. Así se ve la dirección anterior formateada de modo Figura 2: Podemos usar hCalendar Creator para programar un hCard (Listado 1). evento y publicarlo. Todo el formato del ejemplo debería <a href=”http://U resultar obvio. Si no queremos dar foren.wikipedia.org/wikiU mato manualmente a las informaciones /Wiki” rel=”tag”>wiki</a> de contacto existentes, podemos echar mano del práctico hCard Creator [9] para Este enlace microformateado consta de que lo haga por nosotros (Figura 2). dos partes. Al destino del enlace lo llahCalendar mamos espacio de etiquetas. La parte del enlace de después de la barra (/), deciEl microformato hCalendar maneja datos mos que es el valor de etiqueta. El espade calendario. Al igual que hCard, hCacio de etiquetas es “un lugar que recolendar emplea un formato auto-explicalecta o define etiquetas” [8], lo que viene tivo (ver el Listado 2). a decir que proporciona un significado Si un navegador capaz de interpretar específico de la etiqueta. En el ejemplo microformatos encuentra el formato de más arriba, el enlace al artículo de la hCalendar, puede incluirlo limpiamente Wikipedia ofrece la mejor explicación en otro calendario o en información posible (desde el punto de vista del sobre eventos. El patrón de diseño llaautor) de lo que es una etiqueta wiki. mado abbr se usa para incluir las fechas de inicio y fin de evento.

<span class=”geo”> <span class=”latitude”>39.00505U </span> <span class=”longitude”>U -95.23297</span> </span>

Al añadir estos datos a una página web, la extensión Operator de Firefox, descrita posteriormente en este mismo artículo, localiza su ubicación en Google Maps. Otro modo de usar el microformato geo es incluyendo datos geográficos (geodata) directamente en el contenido web mediante el elemento abbr. Por ejemplo, imaginemos que estamos relatando en un blog un viaje reciente a Berlín, nuestro mensaje del blog podría ser algo así:
<abbr class=”geo” title=”52.51191;13.38519”> Mohren strasse</abbr>

donde se incluye una referencia a una calle de Berlín.

Operator
Para ver lo que se puede hacer con una página web ya etiquetada, necesitamos la extesión Operator de Firefox. Podemos descargar Operator desde la sección Add-ons del sitio web de Firefox [10]. Fue Michael Kaply quien inicialmente desarrolló Operator, describiéndolo como “una extensión de Firefox que proporciona interoperabilidad entre microformatos y varios servicios web”. Dicho de otro modo, la extensión Operator es la herramienta

hCard

Podemos entender el microformato hCard como la representación XHTML del formato vCard, un formato comúnmente aceptado para el intercambio de

Geo
El microformato geo nos permite codificar los datos de latitud y longitud en el contenido de nuestra web:

Listado 2: Ejemplo para el Microformato hCalendar
01 <div class=”vevent” id=”hcalendar-LinuxTAG”> 02 <a class=”url” href=”http://www.linuxtag.org /”> 03 <abbr class=”dtstart” title=”20070530”>30 de Mayo</abbr>&mdash; <abbr class=”dtend” title=”20070603”>3 de Junio de 2007</abbr> 04 <span class=”summary”>LinuxTAG</spa n>, <span class=”location”>Berlin</span > </a> 05 <div class=”description”>Exposició n y Conferencia sobre Linux</div></div>

Figura 3: Flickr usa el microformato geo para geocodificar fotografías.

WWW.LINUX- MAGAZINE.ES

Número 35

41

PRÁCTICO • Microformatos EVALUACIÓN • Ibm y Sun

Anteriormente mostramos cómo incluir geodatos en una página web. Como Operator es capaz de manejar el microformato geo, podemos emplearlo para visualizar en Google Maps los geodatos especificados. Eso no es todo. Por ejemplo, Figura 4: Operator es una extensión de Firefox, de obligada tenencia, la página de galecapaz de manipular contenido microformateado. rías de fotografías Flickr usa el que realmente da un sentido práctico microformato geo para añadir nuestras a los microformatos, actuando como fotos al mapa (Figura 3). Pinchamos mediador entre el contenido microforsobre la etiqueta Map dentro de Orgamateado y los servicios web capaces nizr, y ubicamos las fotografías en el de procesarlo. Por ejemplo, Operator mapa. Así añade automáticamente el puede procurar datos con formato geocódigo a las fotografías. Ahora, hCard al servicio de Google Maps, que cada vez que visualicemos la foto, los usa para ubicar la dirección en el Operator nos permitirá ubicarla en mapa. Google Maps haciendo uso del geocóUna vez instalado, Operator añade digo incluido (Figura 4). una barra de herramientas que conSi hemos insertado información de tiene a su vez diferentes barras de contacto microformateada en nuestra herramientas. Con él, y apuntando página web o blog, un usuario puede nuestro navegador a una página con extraerla fácilmente. Para exportarla microformatos podemos realizar una se pueden usar tanto Operator como serie de acciones sobre el contenido Tails Export [11], que es otra extenmicroformateado. Por ejemplo, si en sión de Firefox capaz de manejar conun blog abrimos un mensaje que contenido microformateado. Tails no es tiene microformatos, Operator los tan flexible como Operator, pero es detecta automáticamente y activa las bastante útil. Al pulsar sobre el icono herramientas relacionadas. Podemos de Tails en la barra de estado del usar Operator para buscar fotos de navegador (el icono se torna anaranFlickr, favoritos de del.icio.us o blogs jado siempre que detecta contenido de Technorati que contengan una etimicroformateado en la página), podequeta determinada. mos ver un listado bien ordenado de todos los contactos y eventos disponibles (Figura 5, columna izquierda). Podemos exportarlos y añadirlos a nuestra agenda o calendario.

tos, pero no hay porqué quedarse aquí. Otros microformatos, incluyendo hReview y hResume, podrían resultar convenientes para nuestros intereses particulares. Hay más herramientas para el manejo de contenidos microformateados. Por ejemplo, existe una extensión de Wordpress, llamada hReview [12] y unos pocos scripts de usuario aún más útiles [13]. Finalmente, el libro Microformats: Empowering Your Markup for Web 2.0 [14] cubre todo lo que queramos conocer acerca de los microformatos y nos I explica cómo usarlos.

RECURSOS
[1] Web Semántica: http://en.wikipedia. org/wiki/Semantic_Web [2] “Las Herramientas del Mañana: Las Herramientas del Proyecto Simile para la Web Semántica”, por Oliver Frommel, Linux Magazine nº32, pg. 47 [3] hCard: http://microformats.org/wiki/ hcard [4] hCalendar: http://microformats.org/ wiki/hcalendar [5] geo: http://microformats.org/wiki/ geo [6] Microformatos, wiki: http:// microformats.org/wiki/Main_Page [7] Yahoo! Página de Búsqueda de Creative Commons: http://search. yahoo.com/cc [8] Rel-Tag: http://microformats.org/ wiki/rel-tag [9] hCard Creator: http://microformats. org/code/hcard/creator [10] Extensión Operator para Firefox: https://addons.mozilla.org/en-US/ firefox/addon/4106 [11] Extensión Tails Export para Firefox: https://addons.mozilla.org/en-US/ firefox/addon/2240 [12] Extensión hReview para WordPress: http://www.aes.id.au/ ?page_id=28 [13] Scripts de usuario para Operator: http://www.kaply.com/weblog/ operator-user-scripts/ [14] Allsopp, John. Microformats: Empowering Your Markup for Web 2.0. Friendsof, 2007: http://www. friendsofed.com/book. html?isbn=1590598148

Vamos Más Allá
Estos ejemplos son sólo una muestra de las Figura 5: Tails es otra extensión de Firefox que nos puede resultar posibilidades de útil a la hora de manejar microformatos. los microforma-

42

Número 35

WWW.LINUX- MAGAZINE.ES

Sign up to vote on this title
UsefulNot useful