Microformatos - Parte II
La web semántica y el nuevo diseño (css, xhtml, …) van cogidos de la mano, tratando los contenidos y el diseño por separado tenemos la independencia de dispositivos y medios donde se muestra dicha información, con la web semántica además, planteamos una nueva forma de especificar contenidos, presentable a la vez para el usuario final
Para hablar de los microformatos lo haremos de una forma menos filosófica y más práctica; éstos se basan en aprovechar ciertos atributos de los tags html, dándoles unos valores determinados para identificar un tipo de contenido específico. Este procedimiento se considera limpio ya que al ser utilizados los atributos rel y class para dicho propósito no existe incongruencia con sus propias definiciones de utilización definidas por los estándares w3c
Una vez que la página contiene estos nuevos atributos en su código html, queda en manos de los programadores desarrollar nuevas herramientas (la mayoría de ellos parsers) y sacarle provecho a una más fácil identificación de los contenidos en las páginas html
Como veremos en los ejemplos, una correcta edición de este nuevo código html requiere de una mayor meticulosidad, exigible sólo para aquellos profesionales del desarrollo de aplicaciones web. Muchas veces sólo basta con modificar las plantillas (php por ejemplo) que generan el código resultante para convertir la página o aplicación en un sitio compatible con microformatos.
Existen principalmente dos tipos de microformatos, los simples y los compuestos. Los simples se caracterizan por tener un XMDP definido. ¿Que es un XMDP? El XMDP, considerado un microformato en si mismo, es en realidad cuatro líneas de código (llamadas profile) en la que definimos de que manera estamos utilizando los atributos rel y class para definir un microformato, dicho de otra forma, cuales son los valores posibles de estos atributos que los harán característicos respecto a los valores que habitualmente tienen
Empecemos por el ejemplo más sencillo:
Existen muchas páginas que en su parte inferior indican el tipo de licencia de su contenido, por ejemplo creative commons, una forma común de indicarlo sería la siguiente:
<a href="http://creativecommons.org/licenses/by/2.0/">creative commons by 2.0</a>
Los “inventores” de los microformatos vieron que esta practica era muy común y por lo tanto decidieron crear un pseudo-standard para identificar esta línea mediante el atributo rel
<a href="http://creativecommons.org/licenses/by/2.0/" rel=”license”>creative commons by 2.0</a>
Para que veáis lo fácil que es inventarse un microformato ;) De hecho, no se mataron ni en buscarle un bonito acrónimo y lo denominaron relLicense
Esto permite ahora que un programa o robot que “parsee” código de las páginas html, como pueda ser el robot de google, detecte la línea especifica que indica el tipo de licencia simplemente localizando las palabras rel=”license”. Mostrar entonces un listado con las páginas que tengan licencia creative commons pasa a ser trivial
¿Cual es entonces el XMDP de relLicense?
<dl class=”profile”>
<dt id=”rel”>rel</dt>
<dd><p>
<a rel=”help” href=”http://www.w3.org/TR/html401/struct/links.html#adef-rel”>
HTML4 definition of the ‘rel’ attribute.</a>
Here is an additional value.</p>
<dl>
<dt id=”license”>license</dt>
<dd>Indicates that the referred resource is a license for the referring page.</dd>
</dl>
</dd>
</dl>
Aunque tanta letra d suelta en 4 líneas puede hacer daño a los ojos, lo que aquí se pretende es dar las definiciones de los posibles valores del tag rel de nuestro nuevo microformato relLicense. Como éste es sencillo y con un objetivo muy específico sólo tenemos un posible valor id=”license” con su definición justo debajo. Un poco más arriba también se enlaza la definición del atributo rel según la w3c por si queremos instruirnos un poco más
El resto de microformatos simples no tienen ningún misterio, el kit de la cuestión fue el propósito para el que fueron creados y puestos a la luz para ver que aceptación tendrían con el paso del tiempo. Además, van surgiendo nuevos microformatos según la evolución de la naturaleza de los contenidos de las páginas ¿se os ocurre a vosotros algún microformato nuevo?
Veamos rápidamente los microformatos ya existentes, a ver si os sirven de fuente de inspiración:
XFN: uno de los primeros en ver la luz, destinado a identificar el grado de relación humana que tenemos con los autores de los blogs de nuestro blogroll (amigos, conocidos, novios, etc). Simplemente consiste añadir rel=”friend” (y/o cualquiera de los otros ocho valores definidos) en el código de las urls de nuestro blogroll
Matt Mullenweg (autor de wordpress) cuando aun era más renacuajo de lo que es ahora ya fue uno de los impulsores de dicho microformato. De ahí que wordpress lo soporte 100%, con un generador automático incluido en el apartado de links
relLicense: Ya lo vimos en el primer ejemplo
relTag: Para aquellos que utilicen los tags de technorati en sus blogs ya estarán más que familiarizados , simplemente con añadir rel=”tag” en el enlace le servirá a technorati para detectarlo y agregar nuestro post a su base de datos
relNoFollow: Se hizo famoso en cuanto google anuncio que no indexaría los enlaces con el atributo rel=”nofollow” contenidos en los posts de las bitácoras, evitando así el spam que estaban practicando ciertos usuarios
VoteLinks: Es el mas rarillo de todos ya que además de ser utilizado únicamente para votaciones, es el único que utiliza el atributo rev en vez de rel, ya que se considera que la relación que se tiene con la url contenida en href es inversa
XOXO: Refuerza mediante atributos la definición de una estructura de árbol, este formato tiene más sentido cuando es utilizado como base para formatos derivados como veremos más adelante. El nombre parece que lo hayan inventado los mojinos escocíos
Los microformatos complejos se caracterizan por no tener un XMDP definido, sino que su formato es adquirido de otro standards ya existente, adaptando los campos a atributos html, con una relación de 1:1. Tomemos el microformato hCard como ejemplo para entenderlo, los atributos de dicho formato serán los mismos que los campos que contiene el conocido standard vCard, como se muestra a continuación:
Las siguientes líneas vCard
BEGIN:VCARD
VERSION:3.0
N:Çelik;Tantek
FN:Tantek Çelik
URL:http://tantek.com
ORG:Technorati
END:VCARD
Pasarán a ser las siguientes líneas HTML
<div class=”vcard”>
<a class=”url fn” href=”http://tantek.com/”>
Tantek Çelik
</a>
<div class=”org”>Technorati</div>
</div>
De esta manera una página html podrá contener múltiples vCard detectables fácilmente por cualquier parser que busque los atributos correspondientes
Otros microformatos complejos son:
hCal: este adopta los campos del formato iCal, ideal para páginas de calendarios de eventos
hReview: resultado de la colaboración de varias de las grandes compañías (Microsoft, Yahoo, AOL, …) para encontrar una estructura común para los reviews (analisis critico) aplicable a libros, películas, teatro, etc.
Otros drafts y formatos derivados:
rel-enclousure: el atributo rel=”enclousure” define un enlace a un formato especial como pueden ser los mp3 utilizados en los podcasts
xFolk: con un inicio muy ambicioso la evolución de las diferentes revisiones de este formato han hecho que quede encasillado para identificar el contenido de bookmarks del estilo de delicious
Attention-xml: Este draft, aun por pulir, fue propuesto por Steve Gillmor harto de dedicar un par de horas diarias a leer todos sus feeds, intentó entonces buscar algún mecanismo automático para que tuviera, según diferentes criterios y parámetros, una lista filtrada de los feeds que debería leer a diario con menos tiempo. Para ello utilizo XOXO, XFN entre otros. Al final de este articulo podreis ver varias aplicaciones prototipo como ejemplo
| rel | class | rev | ||
|---|---|---|---|---|
| XFN | ||||
| VoteLinks | ||||
| RelNoFollow | nofollow | |||
| RelTag | tag | |||
| RelLicense | license | |||
| XOXO | xoxo, blogroll | |||
| hCard | vcard | > 1:1 vCard | ||
| hCalendar | vcalendar | > 1:1 iCalendar | ||
| hReview | hreview | > esquema común | ||
| Attention.XML | > Basada en microformatos |
Experimentos y aplicaciones:
-s5 (A Simple Standards-Based Slide Show System): De la mano de Eric Meyer, esta aplicación combina la estructura de una presentación en formato de árbol (XOXO) junto con una serie de ficheros js y css, que dan como resultado presentaciones del tipo powerpoint pero con contenido totalmente standard y visible para los navegadores, si desactivamos los css veremos un html tal cual.
-Traducción al español del generador de XFN
-Visor de relaciones a partir de esquemas XFN - RubHub
-hCal, hCard y hReview creators
-X2V: Programado por Brian Suda, nos facilita un formulario que nos devuelve un archivo iCal o vCard dada una url
-hReview plugin para Wordpresss
-Conversor de listado OPML mediante Attention.xml
Articulos y referencias:
-Página oficial de los microformatos: diseñado por Dan Cederholm
-Wiki de los microformatos: Aquí podeis ver muy detalladamente las definiciones de todos ellos
-Wiki de desarrolladores de los microformatos: el primero donde se empezaron a definir los standards de la mano de Technorati
-Presentación de Tantek Celic acerca de los microformatos
-Listas de correo
-Presentaciones
-Soporte de Odeo a los microformatos
-Soporte de Google a nofollow y un site que está en contra del nofollow
-Como utilizar los tags technorati
-Articulos sobre xFolk
-Soporte de yahoo para attention.xml
-Microformatos en delicious
-Technorati tag: microformats
