Vous êtes sur la page 1sur 4

Roman Milert, Fotolia

Uso de los Microformatos para organizar la web

Microformatos • PRÁCTICO

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.

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

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 ade- lante cómo se puede usar el microfor- mato 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 compren- der el funcionamiento de los microfor- matos y cómo usarlos. Hay tres bloques principales en su construcción, que son los elementos div, span y class, herra- mientas usadas para dotar a los docu- mentos de cierta estructura. Los elementos div y span definen divi- siones o secciones dentro de un docu- mento. Mientras que div define una sec- ción al estilo de un párrafo, span se usa para etiquetar un segmento directamente en el cuerpo del texto. Usados con el atri- buto class, los elementos div y class pue- den 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

Descripción

hCalendar

Calendario e informa ción sobre eventos

hCard

Información de con tacto y otros datos descriptivos de una persona u organi zación

Rel-License

Tipo de licencia del contenido de la página; nos permite buscar contenido basándonos en el tipo de licencia

XFN

Etiquetas para repre sentar la relaciones humanas (amigo, colega, etc.)

adr

Información sobre

direcciones

geo

Datos de longitud y lat itud para la integración en utilidades de mapa

hResume

Formato para la publi cación de resúmenes y CVs

hReview

Indica que el con tenido de la página es la revisión de un pro ducto

RelPayment

Indica la presencia de un sistema de pago en línea.

40 Número 35

<span

pago en línea. 4 0 N ú m e r o 3 5 <span Figura 1:

Figura 1: La búsqueda de Yahoo! de Creative Commons se sirve del microformato Rel-License.

arlo fácilmente simplemente añadién- dole el atributo rel=“license”:

class=”fecha-

pub”>17 de Agosto de 2007</span> para indicar una fecha de publica- ció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 microfor- matos más simples, como Rel-License o Rel-Tag, hacen uso

de otro elemento llamado rel. En HTML,

el

elemento rel describe la relación entre

el

actual documento y el anclaje definido

por el atributo href. Simplificando, se puede decir que el elemento rel describe el recurso al que apunta el enlace href. Sabiendo esto, en el caso de Rel-License, el elemento rel define el enlace hacia una licencia de derechos de autor parti- cular. Rel-License y Rel-Tag son ejemplos per- fectos de lo fácil que es añadir microfor- matos a un contenido. Por ejemplo, supongamos que hemos publicado un artículo bajo la licencia Creative Com- mons Attribution-Noncommercial 3.0. En ese caso, lo más probable es que pro- porcionemos una nota sobre el copyright que apunta a la licencia en particular:

<a

creativecommons.org/U

licenses/by-nc/3.0/”>

Creative

Noncommercial

ref=”http://U

Commons

U

Attribution-U

3.0</a>

Ese enlace es estupendo para el viejo HTML, aunque podemos microformate-

<a rel=”license” href=”http://U creativecommons.org/licensesU /by-nc/3.0/”> Creative Commons U
<a
rel=”license”
href=”http://U
creativecommons.org/licensesU
/by-nc/3.0/”>
Creative
Commons
U
Attribution-Noncommercial
U
3.0</a>

Como puede apreciarse no es especial- mente difícil convertir el enlace en una nota microformateada sobre copyrights. La ventaja inmediata es que añadiendo el microformato Rel-License hacemos que la página web quede disponible para su bús- queda en términos de tipos de licencia. Tanto Yahoo! como Google están al tanto del formato Rel-License y nos permiten bus- car contenidos de ese tipo determinado. Por ejemplo, Yahoo! integra una página dedicada a la búsqueda de contenidos Cre- ative Commons [7] (Figura 1), mientras que Google nos permite definir un tipo de licencia en su sección de Búsqueda Avan- zada. El formato Rel-Tag funciona de un modo parecido. Si por ejemplo nuestro artí- culo concierne a las wikis, lo lógico es mar- carlo con la etiqueta ‘wiki’ tal que:

Listado 1: Ejemplo para el Microformato hCard

01 <div

class=”fn

org”>Linux

07 </div>

Magazine</div>

08 <div><div

02 class=”adr”>

<div

class=”country-name”>ESPAÑA</d

iv>

03 <div

class=”street-address”>Av.

 

Juan

López

Peñalver,

21</div>

09 </div>

 

04 <div>

10 <span

<div>Teléfono:

 

05 <span

class=”tel”>+34

951

235

class=”locality”>Málaga</span>

904</span></div>

 

,

11 <div>Email:

<span

 

06 <abbr=”region”

<span

class=”postal-code”>29590</spa

title=”Malaga”>MA</abbr>

class=”email”>info@linux-magaz

ine.es</span></div>

n>

12 </div>

WWW.LINUX - MAGAZINE.ES

Figura 2: Podemos usar hCalendar Creator para programar un evento y publicarlo. <a en.wikipedia.org/wiki U

Figura 2: Podemos usar hCalendar Creator para programar un

evento y publicarlo.

<a

en.wikipedia.org/wikiU

/Wiki”

href=”http://U

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 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 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

información de con- tacto entre aplica- ciones. Aunque hCard es más com- plejo que Rel- License y Rel-Tag, aún es lo suficiente- mente fácil como para que lo com- prendamos sin mayores problemas. Así se ve la direc- ción anterior forma- teada de modo hCard (Listado 1).

Todo el formato del ejemplo debería resultar obvio. Si no queremos dar for- mato manualmente a las informaciones de contacto existentes, podemos echar mano del práctico hCard Creator [9] para que lo haga por nosotros (Figura 2).

hCalendar

El microformato hCalendar maneja datos de calendario. Al igual que hCard, hCa- lendar emplea un formato auto-explica- tivo (ver el Listado 2). Si un navegador capaz de interpretar microformatos encuentra el formato hCalendar, puede incluirlo limpiamente en otro calendario o en información sobre eventos. El patrón de diseño lla- mado abbr se usa para incluir las fechas de inicio y fin de evento.

Geo

El microformato geo nos permite codifi- car los datos de latitud y longitud en el contenido de nuestra web:

de latitud y longitud en el contenido de nuestr a w eb: Figura 3: Flickr usa

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

WWW.LINUX - MAGAZINE.ES

Microformatos • PRÁCTICO

Ibm y Sun • EVALUACIÓN

<span

class=”geo”>

<span

class=”latitude”>39.00505U

</span>

<span

-95.23297</span>

</span>

class=”longitude”>U

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 rela- tando en un blog un viaje reciente a Ber- lín, nuestro mensaje del blog podría ser algo así:

<abbr

title=”52.51191;13.38519”>

Mohren

class=”geo”

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, necesi- tamos la extesión Operator de Firefox. Podemos descargar Operator desde la sección Add-ons del sitio web de Fire- fox [10]. Fue Michael Kaply quien ini- cialmente desarrolló Operator, descri- biéndolo como “una extensión de Firefox que proporciona interoperabi- lidad entre microformatos y varios servicios web”. Dicho de otro modo, la 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 class=”dtstart”

<abbr

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>

Número 35

41

PRÁCTICO • Microformatos

EVALUACIÓN • Ibm y Sun

PRÁCTICO • Microformatos EVALUACIÓN • Ibm y Sun Figur a 4: Operator es una extensión de

Figura 4: Operator es una extensión de Firefox, de obligada tenencia,

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.

de Technorati que contengan una eti- queta determinada. Figura 5: Tails es otra extensión de Firefox

Figura 5: Tails es otra extensión de Firefox que nos puede resultar útil a la hora de manejar microformatos.

Anteriormente mostramos cómo incluir geodatos en una página web. Como Opera- tor es capaz de manejar el micro- formato geo, pode- mos emplearlo para visualizar en Google Maps los geodatos especifi- cados. Eso no es todo. Por ejemplo, la página de gale-

rías de fotografías Flickr usa el microformato geo para añadir nuestras fotos al mapa (Figura 3). Pinchamos sobre la etiqueta Map dentro de Orga- nizr, y ubicamos las fotografías en el mapa. Así añade automáticamente el geocódigo a las fotografías. Ahora, cada vez que visualicemos la foto, Operator nos permitirá ubicarla en Google Maps haciendo uso del geocó- digo incluido (Figura 4). Si hemos insertado información de contacto microformateada en nuestra página web o blog, un usuario puede extraerla fácilmente. Para exportarla se pueden usar tanto Operator como Tails Export [11], que es otra exten- sión de Firefox capaz de manejar con- tenido microformateado. Tails no es tan flexible como Operator, pero es

bastante útil. Al pulsar sobre el icono de Tails en la barra de estado del navegador (el icono se torna anaran- jado siempre que detecta contenido microformateado en la página), pode- mos ver un listado bien ordenado de todos los contac-

tos y eventos dis- ponibles (Figura 5, columna izquierda). Pode- mos exportarlos y añadirlos a nues- tra agenda o calendario.

Vamos Más

Allá

Estos

ejemplos

son

sólo

una

muestra

de

las

posibilidades

de

los

microforma-

42 Número 35

WWW.LINUX - MAGAZINE.ES

tos, pero no hay porqué quedarse aquí. Otros microformatos, inclu- yendo hReview y hResume, podrían resultar convenientes para nuestros intereses particulares. Hay más herra- mientas 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]. Final- mente, el libro Microformats: Empowe- ring Your Markup for Web 2.0 [14] cubre todo lo que queramos conocer acerca de los microformatos y nos 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 Cre-

ative 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 Word-

Press: 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