¿Qué son los “Microformatos”?

Los microformatos son una forma simple de añadir información semántica a las páginas web, utilizando las herramientas que ya nos proporciona los estándares definidos en XHTML.

Esta información semántica incluida en las páginas web puede ser extraída y procesada por los navegadores y los programas y así realizar ciertas acciones con ellas.

La información que se puede ofrecer con microformatos es muy diversa, por lo que hay diferentes microformatos, cada uno con su finalidad. Por ejemplo, podemos ofrecer la información de un evento para añadirlo con facilidad a tu calendario con el microformato hCalendar  o bien los datos de una persona para guardarlo en tu lista de contactos con el microformato hCard.

¿Cómo se aplican los microformatos a una página web existente?

Lo bueno de los microformatos es que utilizan atributos de XHTML estándar, por lo que es bastante sencillo aplicarlo a una página web existente. Los atributos que utilizan los microformatos son:

• class
• rel
• rev

Estos son atributos que ya existen en XHTML y que tiene utilidad por sí mismo. “class” se utiliza para dar estilos y “rel” y “rev” se utilizan para indicar relaciones entre documentos en los enlaces.

Lo que hacen los microformatos es especificar algunos valores que se añadirán en estos atributos y que interpretados correctamente es posible extraer la información semántica.

Veamos un ejemplo sencillo con el Microformato geo.

Este es un microformato  muy simple que sirve para referenciar unas coordenadas geográficas por su longitud y latitud.

<div class=”geo”>Avanzis 
<span class=”latitude”>39.476473</span>; 
<span class=”longitude”>-0.384849</span>
</div>

Es importante tener en cuenta que lo importante para que esta información sea detectado como microformato son las nombre de las clases utilizados, no las etiquetas.  El siguiente código sería interpretado igual que el anterior por un analizador que entendiera el microformato geo, aunque se vería muy diferente en un navegador

<ul class=”geo”>
<li class=”latitude”>39.476473</li>
<li class=”longitude”>-0.384849</li>
</ul>

Si no queremos que la meta-información se muestre o mostrarla de otra forma, podemos utilizar la etiqueta abbr y el atributo title, que se utilizará para indicar el valor real.

<div class=”geo”>Avanzis 
<abbr class=”latitude” title=”39.476473”>39.47º al Norte</abbr>; 
<abbr class=”longitude” title=”-0.384849”>0.38º al Oeste</abbr>
</div>

Sencillo, ¿verdad?

Una buena recomendación para utilizar los microformatos, aunque es extensible como buena práctica para el desarrollo web, es crear páginas web que:

• Pasen el validador del w3c.
• No utilicen tablas para el diseño de la página.
• No utilicen gifs para crear espacios
• No utilicen las etiquetas BR y las negritas para dar formato cuando puedes utilizar cabeceras y párrafos que son mejores para estas indicaciones.
• Separen al máximo el javascript de la página. Para eso os recomiendo jQuery.
• Utilicen nombres de clases que aporten información semántica

¿Qué microformatos existen?

Vamos a comentar algunos de los microformatos existentes, indicando la clase raíz que hay que añadir para crear el microformato, las propiedades y subpropiedades que son requeridas y  ejemplos de utilización.

Si quieres ver la lista completa de microformatos disponibles, la implementación específica de un microformato en concreto o las propiedades opcionales que admite, visita la página microformats.org.

hCalendar

Muestra información sobre eventos

Nombre de la clase raíz utilizada

Para crear un evento añadimos la clase vevent.

Propiedades y sub propiedades requeridas

• dtstart – Fecha de inicio del evento.
• summary - Nombre del evento

De forma opcional es posible indicar otros parámetros como la localización, una descripción, la categoría a la que pertenece.

Ejemplo del Microformat  hCalendar

<div class=”vevent”>
<h1 class=”summary”>Lanzamiento de Avanzis Inscribia Actividades </h1>
<p class=”description”>Presentación de nuestro producto para la gestión
de actividades, cursos, talleres y viajes”></p>
<p>Localización: <span class=”location”>Oficinas de
Avanzis</span></p>
<abbr class=”dtstart” title=”2009-03-20T10:30:00+01:00”>20 de Marzo de
2009 a las 10:30 de la mañana</p>
</div>

Más información

http://microformats.org/wiki/hcalendar

hCard

Muestra información sobre personas, compañías, organizaciones y lugares.

Nombre de la clase raíz utilizada

Para crear un evento añadimos la clase vcard.

Propiedades y sub propiedades requeridas

• fn – Nombre con formato
• n – Nombre (utilizado para identificar partes del nombre)

La propiedad n sólo se utiliza cuando queremos desglosar las partes de un nombre en las partes que lo compone (family-name, given-name, additional-name, honorific-prefix, honorific-suffix), en otro caso se infiere a partir de valor de la propiedad fn. 

Veamos un ejemplo de utilización de la propiedad “n”  que es necesaria cuando hay nombres o apellidos compuestos.

<div class=”fn”>Juan García</div>
<div class=”fn n”>
<div class=”given-name”>Gonzalo</div>
<div class=”family-name”>De los Santos</div>
</div>

De forma opcional es posible indicar otros parámetros como el email, la dirección, el teléfono o la foto.

Ejemplo del Microformat  hCard

En este ejemplo vamos a crear los datos de contacto de Avanzis.

<div class=”vcard”>
<a class=”fn org url” href=”http://www.avanzis.com”>Avanzis</a>
<div class=”adr”>
  <div class=”street-address”>Seul 88, nº 1 dcha, pta 1</div>
  <div class=”locality”>Torrent</div>
  <div class=”region”>Valencia</div>
  <div class=”postal-code”>46900</div>
<div class=”country-name”>España</div>
</div>
<div class=”tel”><abbr class=”type” title=”Work”>Tlf:</abbr>
+34-96-158-0184</div>
<div class=”tel”><abbr class=”type” title=”Work”>Tlf:</abbr>
+34-96-156-5992</div>
<div>Email: <span class=”email”>info@avanzis.com</span></div>
</div>

Más información

http://microformats.org/wiki/hcalendar

rel=”license”

Sirve para indicar el tipo de licencia del contenido.

Añadiendo este atributo a  un enlace, una página indica que el destino de ese enlace es la licencia de la página actual.

Ejemplo del microformato  rel=”license”

<a
href="http://creativecommons.org/licenses/by/2.0/"
rel="license">Creative Commons </a>

Más información

http://microformats.org/wiki/rel-license

rel=”nofollow”

Sirve para indicar que a la página destino no se le debe aportar ningún peso o ranking por parte de los buscadores.

Esto se suele utilizar, por ejemplo, para los enlaces creados por terceras partes en un blog, de esta forma se reduce en cierta medida el interés que se puede tener en crear enlaces indiscriminadamente para aumentar el posicionamiento de una página.

Ejemplo del microformato  rel=”nofollow”

<a href="http://www.soyunspamer.org"
rel="nofollow">Quiero aumentar mi posicionamiento</a>

Más información

http://microformats.org/wiki/rel-nofollow

rel=”tag”

Sirve para indicar que en un enlace que el destino de la página es una etiqueta para la página actual.

Esto se suele utilizar para enlazar desde un post de un blog a la página con todas las entradas relacionadas con la etiqueta indicada.

Ejemplo del microformato  rel=”tag”

<a href=" http://www.avanzis.com/blogs?tag=asp.net" rel="asp.net">ASP.NET</a>

Más información

http://microformats.org/wiki/rel-tag

Vote Links

Sirve para indicar que la página destino se utilizara para votar a favor, en contra o indiferencia sobre tema tratado.

Ejemplo del microformato  Vote Links

<h3>Vamos a utilizar ASP.NET MVC en nuestras aplicaciones</h3>
<ul>
<li><a rev=”vote-for” 
href=”http://example.com/aspnetmvc” >Sí, me encanta</a></li>
<li><a rev=”vote-against” 
href=” http://example.com/aspnetmvc”>No, lo odio</a></li>
<li><a rev=”vote-abstain” 
href=” http://example.com/aspnetmvc”>¿Qué es eso</a></li>
</ul>

Más información

http://microformats.org/wiki/vote-links

XFN – XHTML Friends Network

Es una forma sencilla de representar las relaciones entre personas utilizando enlaces.

Con este microformato es posible indicar las relaciones de amistad, profesionales, geográficas, familiares o románticas entre dos personas.

Ejemplo del microformato XFN

<a href="http://jane-blog.example.org/" 
rel="sweetheart date met">Jane</a>
<a href="http://dave-blog.example.org/" 
rel="friend met">Dave</a>
<a href="http://darryl-blog.example.org/" 
rel="friend met">Darryl</a>
<a href="http://www.metafilter.com/">MetaFilter</a>
<a href="http://james-blog.example.com/"
rel="met">James Expert</a>

Más información

http://microformats.org/wiki/XFN

http://gmpg.org/xfn

Geo

Sirve para indicar unas coordenadas geográficas por su longitud y latitud.

Ejemplo del microformato  Geo

<div
class=”geo”>Avanzis 
<span class=”latitude”>39.476473</span>;
<span class=”longitude”>-0.384849</span>
</div>

Más información

http://microformats.org/wiki/geo

hReview

Muestra información sobre un análisis realizado a un producto, persona, compañía o evento.

Nombre de la clase raíz utilizada

Para crear un evento añadimos la clase hreview.

Propiedades y sub propiedades requeridas

• item – Elemento analizado. Puede ser del tipo fn para una url, hCard para una persona o negocio o hCalendar para un evento

Opcionalmente es posible indicar la valoración proporcionada, la fecha en la que se realizó, la persona que realizó el análisis, etc.

Ejemplo del Microformat  hReview

En este ejemplo vamos a crear los datos de contacto de Avanzis.

<div class=”hreview”>

<h1 class=”item summary”>Avanzis Inscribia Actividades</h1>

<div>Valoración: <span class=”rating”>5</span> sobre 5</div>

<div class=”reviewer vcard”>
<span class=”fn org”>Avanzis</span>
</div>

<div class=”description”>Avanzis Inscribia Actividades es el software
online perfecto para la organización de talleres, cursos, excursiones o
cualquier otra actividad en la que se necesite 
gestionar participantes, listas
de espera y/o pagos</div>

</div>

Más información

http://microformats.org/wiki/hreview               

 

Otros microformatos

Algunos de los microformatos son aún un borrador, pero pueden resultar útiles.

• hAudio – Información sobre archivos de audio
• hProduct – Productos
• hRecipe – Recetas de cocina
• hResume – Currículos
• xFolk –  Favoritos (Bookmarks)
• hAtom
• ref=”me”
• …

 

¿Quién está utilizando los microformatos?

Muchas organizaciones y empresas están utilizando los microformatos ya que sin mucho más esfuerzo que tener en cuenta los nombres de los estilos que utilizan, ofrecen la información semántica que será aprovechada en el futuro.

Algunos ejemplos que me han llamado la atención por su importancia o por ser españoles:

• Facebook – Soporta  el microformato hCard.
• Twitter – Ha implementado múltiples microformatos, como puede ser hCard, hAtom, XFN y rel=”me”.
• Digg – Implementa el microformato hCard
• Flickr – Implementa el microformato hCard y XFN
• Yahoo – Implementa los microformatos en muchos de sus proyectos. Por ejemplo, hCalendar en Upcoming.org o hCard, hCalendar y hReview en Yahoo Local.
• 11870.com –Implementa el  microformato hReview para los análisis que realizan los usuarios sobre lugares, servicios y negocios.

¿Qué navegadores soportan los microformatos?

Mozilla Firefox

Necesita el complemento Operator para procesar los microformatos.

https://addons.mozilla.org/es-ES/firefox/addon/4106

Internet Explorer

Microsoft tiene un proyecto de código libre para crear un complemento para Internet Explorer que procesa los microformatos.

http://www.codeplex.com/Oomph/

Conclusiones

Los microformatos consiguen aportar la información semántica a la web que con las herramientas adecuadas podrán ser de gran utilidad para los usuarios.

Implementarlos en una aplicación web es bastante sencillo ya que utilizan los estándares preestablecidos de XHTML por lo que merece la pena ponerlos en práctica en cualquier proyecto que desarrolles.