Microformatos: qué son, para qué sirven y dónde los vamos a encontrar

Tres respuestas rápidas:

  • Son un intento de adentrarnos de una vez por todas en la web semántica.
  • Para que las máquinas entiendan mejor y tengan más información sobre unos datos, y así poder hacer herramientas automatizadas muy potentes.
  • En cualquier lado. Ejemplos: Firefox 3, el correo .Mac de Apple e Internet Explorer 8.

Y ahora, las respuestas largas...

Los Microformatos nacen como un movimiento ágil y mantenido por una comunidad despierta, ante la "pasividad" y la lentitud de organismos de _expertos_ como el W3C. Su principal objetivo es acercarse a la web semántica, y hacerlo de una forma sencilla y poco traumática. No utiliza tecnologías nuevas, se basa en el XHTML presente, y más concretamente en los atributos que pueden tener las etiquetas. A partir de ahí, juegan con formatos ya existentes e intentan traspasarlo a la web, sin hacer cambios drásticos, simplemente cambiando atributos clave.

Antes de decir nada más, veámoslo en directo con una reseña de una aplicación web, partiendo de este código:

<div>
 <h2>
  <a href="http://www.gmail.com/">Gmail</a>
 </h2>
 <h3>
  La mejor forma de gestionar tu email
 </h3>
 <img src="https://www.genbeta.com/images/gmail.jpg"
      alt="Gmail, el webmail de Google" />
 <p>
  <span>Víctor Pimentel</span>
  <span>31/10/2006</span>
  <span>★★★★★</span>
 </p>
 <div>
  <p>
   GMail es un servicio web que nos provee Google, y
   que convierte revisar nuestro email en una delicia [...]
  </p>
  <p>
   [...] Por todas estas cosas, Gmail es el mejor.
  </p>
 </div>
</div>

Esto es un código XHTML corriente, muy parecido a lo que vemos en cualquier blog. Ahora, si lo aderezamos con un poco de microformatos...

<div class="hreview">
 <h2 class="item">
  <a class="fn url" href="http://www.gmail.com/">Gmail</a>
 </h2>
 <h3 class="summary">
  La mejor forma de gestionar tu email
 </h3>
 <p class="reviewer vcard">
  <span class="fn">Víctor Pimentel</span>
  <abbr class="dtreviewed"
        title="20061031T0112++0100">31/10/2006</abbr>
  <abbr class="rating" title="5">★★★★★</abbr>
 </p>
 <img src="https://www.genbeta.com/images/gmail.jpg"
      class="photo" alt="Gmail, el webmail de Google" />
 <div class="description">
  <p>
   GMail es un servicio web que nos provee Google, y
   que convierte revisar nuestro email en una delicia [...]
  </p>
  <p>
   [...] Por todas estas cosas, Gmail es el mejor.
  </p>
 </div>
 <p class="type" style="display:none">website;</p>
 <p class="version" style="display:none">0.3;</p>
</div>

Si te pones a mirarlo detenidamente te darás cuenta de que hemos tocado muy poquito el marcado del XHTML, solamente hemos añadido atributos. Para ser sinceros, hemos cambiado los dos _span_ del nombre del autor y de la fecha para ajustarlo mejor, pero en realidad no cambia sustancialmente. También hemos añadido dos párrafos al final para explicar qué versión del microformato estamos usando y qué es lo que estamos reseñando. Pero lo importante son los atributos (principalmente los _class_), gracias a ellos hemos multiplicado el valor del contenido, ya que si seguimos las mismas convenciones podremos parsear reseñas sin problemas. Nótese que, aunque cambiemos las posiciones de las etiquetas, o incluso aunque cambiemos las etiquetas mismas (usar h1 por h2, o usar p en vez de div, etc...), si mantenemos estos mismos atributos el parseo seguirá siendo perfectamente posible.

Un vistazo a…
Firefox Multiple Picture-in-Picture

Los _atributos_ que hemos usado forman parte del microformato hreview, que todavía se encuentra en borrador. Como ves, las clases tienen mucho sentido y se relacionan con el contenido: _description_, _photo_, etc. Como este microformato ya hay un par de decenas, todos ellos promovidos por la comunidad microformats.org, y tratan de resolver problemas muy concretos. Éste es uno de los llamados "compuestos" o "complejos", en contraposición a otros mucho más simples. Por ejemplo, es muy probable que estés usando un microformato en tu blog sin saberlo:

microformats,
software

Exacto, los tags de technorati se valen del atributo rel="tag" para distinguir un enlace normal de un tag. Esto es un ejemplo de microformato simple. Otro ejemplo podría ser el XFN, que sirve para definir las conexiones entre tú y tu blogroll, y que implementa WordPress (Vete a la pestaña Enlaces y edita uno, ya lo verás).

Los posibles usos crecen de forma exponencial. ¿Te imaginas que Google _entendiera_ el significado de tus datos? Que no fuera simples bytes, sino algo que tuviera semántica: que los buscadores supieran que una misma frase tiene un significado completamente diferente en un texto que en otro. Y no hace falta crear algoritmos enrevesados y complicados de mantener, sino que con solo añadir una pequeña clase nuestro contenido cobra mucho más sentido. Un ejemplo práctico: con solo publicar una vez tu Currículum Vitae, podrías darte de alta en tantos sitios como acepten ese microformato, evitando tener que meter tus datos miles de veces. Mira hacia los tags de technorati o hacia la infinidad de usos de los feeds y multiplícalo por el número de microformatos que puede haber. ¡Y todo por rellenar algunas clases en un trozo de XHTML!

¿Qué futuro les espera? Está claro que todo es muy bonito, pero si nadie los usa, no servirán para nada. Sin embargo, por los anuncios que van saliendo, es prometedor a corto y medio plazo, ya que no se basa en reinventar la rueda, y su contenido es perfectamente válido para los navegadores actuales. Y si encima anuncian que los próximos navegadores podrán reconocerlos...

PD: La prueba de que son fáciles de tratar es que hasta IE8 lo hará, y eso que "ni siquiera es capaz":https://www.genbeta.com/2006/10/19-por-que-internet-explorer-7-no-es-el-caliz-de-oro de cumplir correctamente con la especificación CSS2...

Enlace | "microformats.org":http://microformats.org/ Enlace | "Grancomo: microformatos a fondo":http://www.grancomo.com/2006/10/12/microformatos-la-web-semantica-para-torpes/ Enlace | IE8 soportará Microformatos | torresburriel.com

Portada de Genbeta