Está en la página 1de 4

Microformatos • PRÁCTICO

Uso de los Microformatos para organizar la web

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

U
n concepto reciente denominado Los microformatos también son útiles Introducción a los
web semántica [1] está dotando en situaciones en las que un solo cliente Microformatos
de un nuevo significado al HTML web quiere compilar la información obte- Para explicar qué son los microformatos
ordinario. En números anteriores de nida de distintas fuentes. Por ejemplo, si y cómo nos pueden ayudar, comenzare-
Linux Magazine hemos hablado sobre las usamos una etiqueta que incluye las coor- mos con un ejemplo simple. Echemos un
iniciativas existentes para la web semán- denadas de latitud y longitud de un res- vistazo al siguiente texto:
tica, como el proyecto Simile [2]. Una de taurante, un navegador con las extensio-
las tecnologías más simples y maduras nes adecuadas podría localizar automáti- Linux Magazine
para la web semántica son los microfor- camente al restaurante en un mapa de Av. Juan López Peñalver, 21
matos. Google. Málaga
Los microformatos son simples etique- Al igual que otras tecnologías para la ESPAÑA
tas HTML que revelan información acerca web semántica, con los microformatos
del significado y del contexto de los datos no se requiere que el desarrollador El ojo humano lo identifica rápidamente
web. Por ejemplo, una etiqueta de micro- conozca previamente el uso que el como una dirección. Podemos ver el
formato podría aclarar que el texto forma cliente pretende dar a los datos. Una nombre de la calle, la ciudad y el país.
parte de un curriculum vitae o de una tar- especificación de microformato lo define Sabemos que España es un país y
jeta de negocios. meramente como un formato por el que Málaga una ciudad. Por desgracia, las
Cualquier navegador, diseñado para se asocia a un contexto un texto deter- máquinas (aún) no tienen la capacidad
reconocer el microformato, interpretará minado. de determinar el tipo de información con
los datos de acuerdo con la información La reciente extensión Operator, o tam- sólo verla; necesitan de una serie de
obtenida. El navegador podría mostrarlos bién la extensión Tail, dotan a Firefox de marcas que identifiquen los datos. Ahí es
de forma que recompongan una tarjeta de soporte para los microformatos. En este donde nos pueden ayudar los microfor-
negocios, o mejor aún, una aplicación del artículo les introduciremos en el mundo matos. A diferencia de otras tecnologías
lado de cliente podría extraer los datos de de los microformatos y veremos de cerca similares, los microformatos no preten-
contacto y copiarlos en una agenda. las opciones más populares, como hCard den ofrecer una solución universal para
Roman Milert, Fotolia

WWW.LINUX- MAGAZINE.ES 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


• 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
Figura 2: Podemos usar hCalendar Creator para programar un hCard (Listado 1). web mediante el elemento abbr. Por
evento y publicarlo. Todo el formato del ejemplo, imaginemos que estamos rela-
ejemplo debería tando en un blog un viaje reciente a Ber-
<a href=”http://U resultar obvio. Si no queremos dar for- lín, nuestro mensaje del blog podría ser
en.wikipedia.org/wikiU mato manualmente a las informaciones algo así:
/Wiki” rel=”tag”>wiki</a> de contacto existentes, podemos echar
mano del práctico hCard Creator [9] para <abbr class=”geo”
Este enlace microformateado consta de que lo haga por nosotros (Figura 2). title=”52.51191;13.38519”>
dos partes. Al destino del enlace lo lla- Mohren strasse</abbr>
mamos espacio de etiquetas. La parte del hCalendar
enlace de después de la barra (/), deci- El microformato hCalendar maneja datos donde se incluye una referencia a una
mos que es el valor de etiqueta. El espa- de calendario. Al igual que hCard, hCa- calle de Berlín.
cio de etiquetas es “un lugar que reco- lendar emplea un formato auto-explica-
lecta o define etiquetas” [8], lo que viene tivo (ver el Listado 2). Operator
a decir que proporciona un significado Si un navegador capaz de interpretar Para ver lo que se puede hacer con
específico de la etiqueta. En el ejemplo microformatos encuentra el formato una página web ya etiquetada, necesi-
de más arriba, el enlace al artículo de la hCalendar, puede incluirlo limpiamente tamos la extesión Operator de Firefox.
Wikipedia ofrece la mejor explicación en otro calendario o en información Podemos descargar Operator desde la
posible (desde el punto de vista del sobre eventos. El patrón de diseño lla- sección Add-ons del sitio web de Fire-
autor) de lo que es una etiqueta wiki. 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-
hCard biéndolo como “una extensión de
Podemos entender el microformato Geo Firefox que proporciona interoperabi-
hCard como la representación XHTML El microformato geo nos permite codifi- lidad entre microformatos y varios
del formato vCard, un formato común- car los datos de latitud y longitud en el servicios web”. Dicho de otro modo, la
mente aceptado para el intercambio de 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>
Figura 3: Flickr usa el microformato geo para geocodificar fotografías.

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


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

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
Figura 4: Operator es una extensión de Firefox, de obligada tenencia, la página de gale- explica cómo usarlos. ■
capaz de manipular contenido microformateado. rías de fotografías
Flickr usa el RECURSOS
que realmente da un sentido práctico microformato geo para añadir nuestras
[1] Web Semántica: http://en.wikipedia.
a los microformatos, actuando como fotos al mapa (Figura 3). Pinchamos
org/wiki/Semantic_Web
mediador entre el contenido microfor- sobre la etiqueta Map dentro de Orga-
mateado y los servicios web capaces nizr, y ubicamos las fotografías en el [2] “Las Herramientas del Mañana: Las
de procesarlo. Por ejemplo, Operator mapa. Así añade automáticamente el Herramientas del Proyecto Simile
puede procurar datos con formato geocódigo a las fotografías. Ahora, para la Web Semántica”, por Oliver
hCard al servicio de Google Maps, que cada vez que visualicemos la foto, Frommel, Linux Magazine nº32, pg.
los usa para ubicar la dirección en el Operator nos permitirá ubicarla en 47
mapa. Google Maps haciendo uso del geocó- [3] hCard: http://microformats.org/wiki/
Una vez instalado, Operator añade digo incluido (Figura 4). hcard
una barra de herramientas que con- Si hemos insertado información de [4] hCalendar: http://microformats.org/
tiene a su vez diferentes barras de contacto microformateada en nuestra wiki/hcalendar
herramientas. Con él, y apuntando página web o blog, un usuario puede [5] geo: http://microformats.org/wiki/
nuestro navegador a una página con extraerla fácilmente. Para exportarla geo
microformatos podemos realizar una se pueden usar tanto Operator como
[6] Microformatos, wiki: http://
serie de acciones sobre el contenido Tails Export [11], que es otra exten-
microformats.org/wiki/Main_Page
microformateado. Por ejemplo, si en sión de Firefox capaz de manejar con-
[7] Yahoo! Página de Búsqueda de Cre-
un blog abrimos un mensaje que con- tenido microformateado. Tails no es
ative Commons: http://search.
tiene microformatos, Operator los tan flexible como Operator, pero es
yahoo.com/cc
detecta automáticamente y activa las bastante útil. Al pulsar sobre el icono
herramientas relacionadas. Podemos de Tails en la barra de estado del [8] Rel-Tag: http://microformats.org/
usar Operator para buscar fotos de navegador (el icono se torna anaran- wiki/rel-tag
Flickr, favoritos de del.icio.us o blogs jado siempre que detecta contenido [9] hCard Creator: http://microformats.
de Technorati que contengan una eti- microformateado en la página), pode- org/code/hcard/creator
queta determinada. 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.
Figura 5: Tails es otra extensión de Firefox que nos puede resultar posibilidades de
html?isbn=1590598148
útil a la hora de manejar microformatos. los microforma-

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

También podría gustarte