Microformatos

Microformatos23 marzo de 2009 |
¿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 conellas.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 losmicroformatos 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 * revEstos 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 paraindicar 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.21Este 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 porun 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á paraindicar 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 webque: * 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 queaporten 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 propiedadesopcionales que admite, visita la página microformats.org.hCalendarMuestra información sobre eventosNombre de la clase raíz utilizadaPara crear un evento añadimos la clase vevent.Propiedades y sub propiedades requeridas * dtstart – Fecha de inicio del evento. * summary - Nombre del eventoDe forma opcional es posible indicar otros parámetros como la localización, una descripción, la categoría a...