El post de los microformatos era una promesa pendiente y ahí está. Me despido entonces con una de las últimas curiosidades que me ha llamado la atención, el World Jump Day, un llamamiento que se hace a través de esta página para reunir a 600 millones de persona para que peguen un salto a la vez a una hora determinada de un dia de junio del 2006. Cuando era pequeño leí en la colección científica Quest que si todos los chinos saltaran a la vez se desviaria la órbita de la tierra. Ahora estos locos aprovechan esta teoria para querer cambiar la orbita y así, segun dicen, solucionar el problema del calentamiento de la tierra. Yo digo que nos sale rana y hacemos chiche con marte ;)

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

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

Ya de paso que google indexe estas dos palabras: maldito blogsome !!! ;)

Entre otras cosas, voy a sacar el polvo al draft del artículo de los microformatos que ya empieza a oler un poco, no sin antes recomendaros que os compreis o os descargueis (y ya de paso os leais) el libro de David Bravo, Copia este libro. Yo he hecho ambas cosas, és mas, me he gastado 30 euros en comprar tres ejemplares para que vayan rulando entre mi circulo mas cercano (y no tan cercano). Harto ya de intentar explicar la situación actual de la pirateria lo dejaré en manos de una de las personas mas locuaces que he visto

Lo dicho, de lectura obligada (sin que se me enfade nadie) más que la biblia

Tags

El futuro del desarrollo web viene lógicamente impuesto por el utilizar un formato semántico en el código de las paginas, así el salto de HTML a XHTML viene caracterizado por el potenciar el significado del contenido y no de su aspecto puramente. Un <h1></h1> no tiene porque ser grande y en negrita, ni un <em></em> tiene que ser a la fuerza itálica, sino que simplemente estas en-fatizando el termino. Esta claro entonces, que la aplicación del XHTML tiene que dejar de ser transicional (en su definición) para pasar a ser estricto. Utilizar los tags para lo que se crearon y no utilizar aquellos que no tienen un significado asociado (b, br, i). Y por supuesto, prohibido utilizar tablas a modo de capas de posicionamiento, eso ya es historia, las tablas son para la información tabular

Formato

No tenemos que olvidar q el (x)html se trata de un lenguaje, y como cualquier otro lenguaje tiene unos patrones muy bien definidos, la diferencia con otros lenguajes radica en que cuando este no esta bien formado no nos salta un warning en el navegador, ni se interrumpe su ejecución. Esto permite que la exigencia auto-impuesta por muchos desarrolladores se pase por alto dando como resultado el típico – lo suficiente y para que se vea – . Esta claro que si nuestro objetivo es hacer buenas aplicaciones y con una proyección de futuro, debemos auto-exigirnos, empezando por un servidor, un nivel estricto conforme a los estándares establecidos. No es la única manera, pero si la mas correcta para que sea posible aportar correcciones e ideas para la evolución del lenguaje.

Estas directrices no son para un escritor de bitácoras que suficiente faena tiene con actualizar su weblog periódicamente, sino para aquellos desarrolladores que crean o utilizan herramientas que generan código html de una forma u otra

Ejemplos

Ejemplos de correcta aplicación:

1- Mostrar información concreta:

Si toda la información va dentro del parágrafo, todo el texto tiene el mismo peso y significado

<p>
Please contact webmaster at example dot com
if you find any problems with this site.
</p>

Una alternativa es ubicar el texto en un div (tipo bloque) y indicar con address la dirección de contacto

<p><div>
Please contact
<address>webmaster at example dot com</address>
if you find any problems with this site.
</div><p>


Utilizaremos div y span para añadir estructura a un documento, indicando si el contenido es de tipo bloque o en linea respectivamente, el tag address no solo se limita al correo sino a toda información de contacto

2- Mostrar una frase extraída de algún sitio

En el ejemplo mencionamos un texto escrito por otra persona, indicando el autor al principio y dando nuestra opinión después

<p>Eric Meyer wrote:</p>
<p>
What's so interesting to me is that the guys who decided
to focus on the positive went out and did something;
those who want to mix in the negative seem to have
nothing to offer except complaints.
</p>
<p>An excellent contrast between those who want to
build new things and those who want to tear them down.
</p>


A diferencia de la estructura de arriba, utilizamos cite para indicar el autor o interlocutor, y blockquote para sus palabras, con el atributo cite para enlazar la url de donde proviene nuestra extracción

<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite=”http://meyerweb…/social-protocols/”>
<p>
What’s so interesting to me is that the guys who decided
to focus on the positive went out and did something;
those who want to mix in the negative seem to have
nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to
build new things and those who want to tear them down.
</p>


Nuestra opinión sera el único texto que dejaremos intacto, notar que al tratarse de varios párrafos continuamos utilizando <p>, estos lógicamente pueden estar dentro de un div

3- Mostrar código

En el ejemplo queremos mostrar una parte de código css

<p>
Le añadimos estilo al tag address:
</p>
<p>
address {
display:inline;
font-style:normal;
}
</p>


No solo utilizamos el tag code para indicar que se trata de código sino que además indicamos que queremos que el navegador respete el aspecto pre-formateado como por ejemplo el utilizar letras con el mismo ancho o respetar todos los espacios y tabulaciones

<p>
Le añadimos estilo al tag address:
</p>
<p><pre><code>
address {
display:inline;
font-style:normal;
}
</code></pre></p>


4- Mostrar una conversación

Partiendo del siguiente ejemplo:

<dl>
<dt>Costello</dt>
<dd>Well then who's on first?</dd>
<dt>Abbott</dt>
<dd>Yes.</dd>
<dt>Costello</dt>
<dd>I mean the fellow's name.</dd>
<dt>Abbott</dt>
<dd>Who.</dd>
<dt>Costello</dt>
<dd>The guy on first.</dd>
<dt>Abbott</dt>
<dd>Who.</dd>
</dl>


Esta es una forma clara de abusar de dt y dd, mas allá de querer aprovechar una tabulación automática de estos tags, estos están concebidos para términos y descripciones. Pero una conversación la componen interlocutores y frases, como hemos visto en el ejemplo 2 utilizaremos cite y blockquote

<cite>Costello</cite>
<blockquote><p>Well then who’s on first?</p></blockquote>
<cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote>
<cite>Costello</cite>
<blockquote><p>I mean the fellow’s name.</p></blockquote>
<cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>
<cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote>
<cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote>


Además la conversación no deja de ser un simple listado, con el que le agregaremos los tags para ello

<ol>
<li><cite>Costello</cite>
<blockquote><p>Well then who’s on first?</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Yes.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>I mean the fellow’s name.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
<li><cite>Costello</cite>
<blockquote><p>The guy on first.</p></blockquote></li>
<li><cite>Abbott</cite>
<blockquote><p>Who.</p></blockquote></li>
</ol>


Las ventajas de utilizar este formato de listados lo veremos en la segunda parte. No hay que olvidar que la utilización correcta del formato muchas veces da pie a que el desarrollador se encuentre limitado con tales recursos debido a que la diversidad del contenido mostrado muchas veces supera a la evolución del propio lenguaje, es por eso q siempre se anima a los desarrolladores a que tomen un papel activo con la experimentación y participación en las diferentes discusiones de desarrolladores.

En el siguiente capitulo veremos una posible solución para incrementar el potencial del XHTML: los microformatos

Enlaces recomendados:
The Elements of Meaningful XHTML / Tantek Celik
SimpleQuizzes / Dan Cederholm

Update: En respuesta al par de comentarios de este post, comparto la predileccion que se siente por bloglines, podria llamarse el lector de noticias por excelencia. Si bien mi tendencia a la experimentacion hacen que herramientas como rojo me despierten un interes mas que notable, premisas como el q sea una herramienta online y de sencillo uso son equivalentes al bloglines (si bien creo q la usabilidad de rojo es superior). Pero lo q realmente me ha despertado el interes para su utilizacion es la posibilidad, a la par q facilidad, para clasificar los posts y feeds mediante tags. El sistema de clasificacion mediante tags esta a la orden del dia, solo q googleemos un poco ya podremos encontrar debates acerca de los pros y contras de este metodo, pero cualquiera q utilize delicious, flickr, etc ya estara mas q habituado.

El sentido de aplicar dicho metodo no deja de ser otro intento de optimizacion en nuestra ingestion diaria de informacion q hacemos mediante tales feeds, tal dilema le surgio a Steve Gillmore atemorizado -ironicamente- de q su mujer le pegara la bronca por pasarse tanto tiempo al dia leyendo noticias, y esto le pasa hasta al lector mas habituado, a partir de este problema surgio attention.xml, una posible solucion basada en microformatos del q hablare en el siguiente articulo. Lo importante ahora es entender q el sistema q utilizamos para leer noticias esta en sus inicios, en el caso de rojo caracterisicas como: posibilidad de compartir posts al estilo de red social, marcar los feeds como leido solo cuando nosotros le digamos, sistema de paginacion para los posts antiguos de un feed, sistema de flags, etc, etc, hacen que sienta cierta tendencia a cambiar de lector, algunas de estas caracteristicas ya existentes en bloglines no las utilizaba con asiduidad hasta ahora, y es q siempre he creido q reinventar la tecnologia para facilitar al usuario su utilizacion es un paso vital

De momento sigo utilizando bloglines para los nuevos feeds de estados unidos agregados en estos ultimos meses, y rojo para la inmensa cantidad de feeds q ya tenia antes, el tiempo dira como acaba todo

En respuesta a oriol esta noticia se colgo un par de dias despues del lanzamiento publico de rojo, asi q la version q debias probar hace unos meses debia ser una beta

El experimento consiste en mostrar simultáneamente los resultados de ambos buscadores, para aquella gente que quira hacer comparativos en esta batalla candente

(via Boing Boing)