Microformatos • PRÁCTICO
Uso de los Microformatos para organizar la web
MENSAJE SECRETO
Los microformatos son simples etiquetas HTML que revelan informa-
ción sobre los datos web. Les mostramos cómo aprovechar esta tec-
nología tan práctica. POR DMITRI POPOV
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án-
tica, como el proyecto Simile [2]. Una de
las tecnologías más simples y maduras
para la web semántica son los microfor-
matos.
Los microformatos son simples etique-
tas HTML que revelan información acerca
del significado y del contexto de los datos
web. Por ejemplo, una etiqueta de micro-
formato podría aclarar que el texto forma
parte de un curriculum vitae o de una tar-
jeta 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.
Roman Milert, Fotolia
Los microformatos también son útiles
en situaciones en las que un solo cliente
web quiere compilar la información obte-
nida de distintas fuentes. Por ejemplo, si
usamos una etiqueta que incluye las coor-
denadas de latitud y longitud de un res-
taurante, un navegador con las extensio-
nes adecuadas podría localizar automáti-
camente 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 deter-
minado.
La reciente extensión Operator, o tam-
bié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
WWW.LINUX- MAGAZINE.ES
[3], hCalendar [4] o geo [5]. Se mues-
tran otras alternativas en la Tabla 1.
Para una descripción completa de
todas las especificaciones, podemos visi-
tar la wiki sobre microformatos [6].
Introducción a los
Microformatos
Para explicar qué son los microformatos
y cómo nos pueden ayudar, comenzare-
mos 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 microfor-
matos. A diferencia de otras tecnologías
similares, los microformatos no preten-
den ofrecer una solución universal para
Número 35 39
EVALUACIÓN
PRÁCTICO • Microformatos
• Ibm y Sun

la identificación y etiquetado de todo <span

tipo de datos. Cada microformato está class=”fecha-
diseñado para una situación específica. pub”>17 de Agosto
Como ejemplo, explicaremos más ade- de 2007</span>
lante cómo se puede usar el microfor- para indicar una
mato hCard para definir información de fecha de publica-
contacto como la dirección anterior. ción. Ambos, div y
Si ya se tiene experiencia con HTML y span son útiles
CSS, no habrá problema para compren- como etiquetas
der el funcionamiento de los microfor- semánticas para
matos y cómo usarlos. Hay tres bloques marcar una sección
principales en su construcción, que son o un trozo de texto
los elementos div, span y class, herra- de un documento.
mientas usadas para dotar a los docu- Otros microfor-
mentos de cierta estructura. matos más simples, Figura 1: La búsqueda de Yahoo! de Creative Commons se sirve del
Los elementos div y span definen divi- como Rel-License o microformato Rel-License.
siones o secciones dentro de un docu- Rel-Tag, hacen uso
mento. Mientras que div define una sec- de otro elemento llamado rel. En HTML, arlo fácilmente simplemente añadién-
ción al estilo de un párrafo, span se usa el elemento rel describe la relación entre dole el atributo rel=“license”:
para etiquetar un segmento directamente el actual documento y el anclaje definido
en el cuerpo del texto. Usados con el atri- por el atributo href. Simplificando, se <a rel=”license” href=”http://U
buto class, los elementos div y class pue- puede decir que el elemento rel describe creativecommons.org/licensesU
den definir tipos de información que el recurso al que apunta el enlace href. /by-nc/3.0/”> Creative Commons U
HTML no puede describir. Por ejemplo, Sabiendo esto, en el caso de Rel-License, Attribution-Noncommercial U
en un artículo podemos usar <div el elemento rel define el enlace hacia 3.0</a>
class=”autor”>Dmitri Popov</div> una licencia de derechos de autor parti-
para indicar el nombre del autor y cular. Como puede apreciarse no es especial-
Rel-License y Rel-Tag son ejemplos per- mente difícil convertir el enlace en una
Tabla 1: Microformatos fectos de lo fácil que es añadir microfor- nota microformateada sobre copyrights. La
Formato Descripción matos a un contenido. Por ejemplo, ventaja inmediata es que añadiendo el
hCalendar Calendario e informa supongamos que hemos publicado un microformato Rel-License hacemos que la
ción sobre eventos artículo bajo la licencia Creative Com- página web quede disponible para su bús-
hCard Información de con mons Attribution-Noncommercial 3.0. queda en términos de tipos de licencia.
tacto y otros datos En ese caso, lo más probable es que pro- Tanto Yahoo! como Google están al tanto
descriptivos de una porcionemos una nota sobre el copyright del formato Rel-License y nos permiten bus-
persona u organi
que apunta a la licencia en particular: car contenidos de ese tipo determinado.
zación
Por ejemplo, Yahoo! integra una página
Rel-License Tipo de licencia del
contenido de la <a ref=”http://U dedicada a la búsqueda de contenidos Cre-
página; nos permite creativecommons.org/U ative Commons [7] (Figura 1), mientras
buscar contenido licenses/by-nc/3.0/”> U que Google nos permite definir un tipo de
basándonos en el tipo Creative Commons Attribution-U licencia en su sección de Búsqueda Avan-
de licencia
Noncommercial 3.0</a> zada. El formato Rel-Tag funciona de un
XFN Etiquetas para repre
modo parecido. Si por ejemplo nuestro artí-
sentar la relaciones
humanas (amigo, Ese enlace es estupendo para el viejo culo concierne a las wikis, lo lógico es mar-
colega, etc.) HTML, aunque podemos microformate- carlo con la etiqueta ‘wiki’ tal que:
adr Información sobre
direcciones Listado 1: Ejemplo para el Microformato hCard
geo Datos de longitud y lat
01 <div class=”fn org”>Linux 07 </div>
itud para la integración Magazine</div>
en utilidades de mapa 08 <div><div
02 <div class=”adr”> class=”country-name”>ESPAÑA</d
hResume Formato para la publi 03 <div iv>
cación de resúmenes y class=”street-address”>Av.
CVs Juan López Peñalver, 21</div> 09 </div>
hReview Indica que el con 04 <div> 10 <div>Teléfono: <span
tenido de la página es 05 <span class=”tel”>+34 951 235
la revisión de un pro class=”locality”>Málaga</span> 904</span></div>
, 11 <div>Email: <span
ducto
06 <abbr=”region” class=”email”>info@linux-magaz
RelPayment Indica la presencia de title=”Malaga”>MA</abbr> <span ine.es</span></div>
un sistema de pago en class=”postal-code”>29590</spa
línea. n> 12 </div>

40 Número 35 WWW.LINUX- MAGAZINE.ES


Figura 2: Podemos usar hCalendar Creator para programar un hCard (Listado 1).
evento y publicarlo.
<a href=”http://U
en.wikipedia.org/wikiU
/Wiki” rel=”tag”>wiki</a>
Este enlace microformateado consta de
dos partes. Al destino del enlace lo lla-
mamos espacio de etiquetas. La parte del
enlace de después de la barra (/), deci-
mos que es el valor de etiqueta. El espa-
cio de etiquetas es “un lugar que reco-
lecta o define etiquetas” [8], lo que viene tivo (ver el Listado 2).
a decir que proporciona un significado
específico de la etiqueta. En el ejemplo
de más arriba, el enlace al artículo de la hCalendar, puede incluirlo limpiamente
Wikipedia ofrece la mejor explicación
posible (desde el punto de vista del
autor) de lo que es una etiqueta wiki.
hCard
Podemos entender el microformato
hCard como la representación XHTML
del formato vCard, un formato común-
mente aceptado para el intercambio de
Figura 3: Flickr usa el microformato geo para geocodificar fotografías.
• PRÁCTICO
Ibm y Sun • EVALUACIÓN
Microformatos
información de con- <span class=”geo”>
tacto entre aplica- <span class=”latitude”>39.00505U
ciones. Aunque </span>
hCard es más com- <span class=”longitude”>U
plejo que Rel- -95.23297</span>
License y Rel-Tag, </span>
aún es lo suficiente-
mente fácil como Al añadir estos datos a una página web,
para que lo com- la extensión Operator de Firefox, descrita
prendamos sin posteriormente en este mismo artículo,
mayores problemas. localiza su ubicación en Google Maps.
Así se ve la direc- Otro modo de usar el microformato geo
ción anterior forma- es incluyendo datos geográficos
teada de modo (geodata) directamente en el contenido
web mediante el elemento abbr. Por
Todo el formato del ejemplo, imaginemos que estamos rela-
ejemplo debería tando en un blog un viaje reciente a Ber-
resultar obvio. Si no queremos dar for- lín, nuestro mensaje del blog podría ser
mato manualmente a las informaciones algo así:
de contacto existentes, podemos echar
mano del práctico hCard Creator [9] para <abbr class=”geo”
que lo haga por nosotros (Figura 2). title=”52.51191;13.38519”>
Mohren strasse</abbr>
hCalendar
El microformato hCalendar maneja datos donde se incluye una referencia a una
de calendario. Al igual que hCard, hCa- calle de Berlín.
lendar emplea un formato auto-explica-
Operator
Si un navegador capaz de interpretar Para ver lo que se puede hacer con
microformatos encuentra el formato una página web ya etiquetada, necesi-
tamos la extesión Operator de Firefox.
en otro calendario o en información Podemos descargar Operator desde la
sobre eventos. El patrón de diseño lla- sección Add-ons del sitio web de Fire-
mado abbr se usa para incluir las fechas fox [10]. Fue Michael Kaply quien ini-
de inicio y fin de evento. cialmente desarrolló Operator, descri-
biéndolo como “una extensión de
Geo Firefox que proporciona interoperabi-
El microformato geo nos permite codifi- lidad entre microformatos y varios
car los datos de latitud y longitud en el servicios web”. Dicho de otro modo, la
contenido de nuestra web: extensión Operator es la herramienta
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>
WWW.LINUX- MAGAZINE.ES Número 35 41
EVALUACIÓN
PRÁCTICO • Microformatos
• Ibm y Sun
Figura 4: Operator es una extensión de Firefox, de obligada tenencia, la página de gale-
capaz de manipular contenido microformateado.
que realmente da un sentido práctico
a los microformatos, actuando como
mediador entre el contenido microfor-
mateado y los servicios web capaces
de procesarlo. Por ejemplo, Operator
puede procurar datos con formato
hCard al servicio de Google Maps, que
los usa para ubicar la dirección en el
mapa.
Una vez instalado, Operator añade
una barra de herramientas que con-
tiene a su vez diferentes barras de
herramientas. Con él, y apuntando
nuestro navegador a una página con
microformatos podemos realizar una
serie de acciones sobre el contenido
microformateado. Por ejemplo, si en
un blog abrimos un mensaje que con-
tiene microformatos, Operator los
detecta automáticamente y activa las
herramientas relacionadas. Podemos
usar Operator para buscar fotos de
Flickr, favoritos de del.icio.us o blogs
de Technorati que contengan una eti-
queta determinada.
Figura 5: Tails es otra extensión de Firefox que nos puede resultar posibilidades de
útil a la hora de manejar microformatos.
42 Número 35
Anteriormente tos, pero no hay porqué quedarse
mostramos cómo aquí. Otros microformatos, inclu-
incluir geodatos yendo hReview y hResume, podrían
en una página resultar convenientes para nuestros
web. Como Opera- intereses particulares. Hay más herra-
tor es capaz de mientas para el manejo de contenidos
manejar el micro- microformateados. Por ejemplo, existe
formato geo, pode- una extensión de Wordpress, llamada
mos emplearlo hReview [12] y unos pocos scripts de
para visualizar en usuario aún más útiles [13]. Final-
Google Maps los mente, el libro Microformats: Empowe-
geodatos especifi- ring Your Markup for Web 2.0 [14]
cados. Eso no es cubre todo lo que queramos conocer
todo. Por ejemplo, acerca de los microformatos y nos
explica cómo usarlos. ■
rías de fotografías
Flickr usa el RECURSOS
microformato geo para añadir nuestras
[1] Web Semántica: http://en.wikipedia.
fotos al mapa (Figura 3). Pinchamos
org/wiki/Semantic_Web
sobre la etiqueta Map dentro de Orga-
nizr, y ubicamos las fotografías en el [2] “Las Herramientas del Mañana: Las
mapa. Así añade automáticamente el Herramientas del Proyecto Simile
geocódigo a las fotografías. Ahora, para la Web Semántica”, por Oliver
cada vez que visualicemos la foto, Frommel, Linux Magazine nº32, pg.
Operator nos permitirá ubicarla en 47
Google Maps haciendo uso del geocó- [3] hCard: http://microformats.org/wiki/
digo incluido (Figura 4). hcard
Si hemos insertado información de [4] hCalendar: http://microformats.org/
contacto microformateada en nuestra wiki/hcalendar
página web o blog, un usuario puede [5] geo: http://microformats.org/wiki/
extraerla fácilmente. Para exportarla geo
se pueden usar tanto Operator como
[6] Microformatos, wiki: http://
Tails Export [11], que es otra exten-
microformats.org/wiki/Main_Page
sión de Firefox capaz de manejar con-
[7] Yahoo! Página de Búsqueda de Cre-
tenido microformateado. Tails no es
ative Commons: http://search.
tan flexible como Operator, pero es
yahoo.com/cc
bastante útil. Al pulsar sobre el icono
de Tails en la barra de estado del [8] Rel-Tag: http://microformats.org/
navegador (el icono se torna anaran- wiki/rel-tag
jado siempre que detecta contenido [9] hCard Creator: http://microformats.
microformateado en la página), pode- org/code/hcard/creator
mos ver un listado bien ordenado de [10] Extensión Operator para Firefox:
todos los contac- https://addons.mozilla.org/en-US/
tos y eventos dis- firefox/addon/4106
ponibles (Figura 5, [11] Extensión Tails Export para Firefox:
columna https://addons.mozilla.org/en-US/
izquierda). Pode- firefox/addon/2240
mos exportarlos y
[12] Extensión hReview para Word-
añadirlos a nues- Press: http://www.aes.id.au/
tra agenda o ?page_id=28
calendario.
[13] Scripts de usuario para Operator:
http://www.kaply.com/weblog/
Vamos Más
operator-user-scripts/
Allá
Estos ejemplos [14] Allsopp, John. Microformats:
Empowering Your Markup for Web
son sólo una
2.0. Friendsof, 2007: http://www.
muestra de las
friendsofed.com/book.
html?isbn=1590598148
los microforma-
WWW.LINUX- MAGAZINE.ES