No necesitas ser flickr para usar microformatos

La web de mi empresa no necesita microformatos, eso es para sitios grandes. ¿Has escuchado o dicho esto alguna vez? La gran ventaja de los microformatos es que cuesta poco usarlos y no molestan.

Hoy he implementado algunos microformatos en la web de Warp. No es una web que interaccione mucho con el usuario, ni tenemos perfiles de usuarios, pero ya veréis como se pueden usar.

En concreto he usado hCard, para la dirección de la empresa en el pie de página, y hCalendar, para el listado de Cursos MySQL.

Para probar el funcionamiento de estos microformatos podéis instalar la extensión Operator para Firefox

hCard

Warp footer

En el pie de la página tenemos la dirección de la oficina. Vista en HTML era un párrafo normal.

<p>&copy; 2005-2007 Warp Networks S.L - C. Don Jaime I 33, 3º Dcha, 50003 Zaragoza, España</p>

Ahí tenemos información interesante para poner en la agenda o para ver en un mapa:

<p>&copy; 2005-2007 
  <span id="" class="vcard">
    <span class="org">Warp Networks S.L.</span>
    <span class="adr">
    <span class="street-address">Don Jaime I 33, 3º Dcha</span>
    <span class="locality">Zaragoza</span>
    , 
    <span class="postal-code">50003</span>
    <span class="country-name">España</span>
  </span>
</p>

Operator showing hCard

hCard in Google Maps

hCalendar

Buscando un poco más, uno se da cuenta de que el listado de cursos MySQL no deja de ser un “calendario” en forma de lista. Seguro que a quién se apunte a un curso le interesa añadirlo a su calendario. ¿Por qué no facilitar las cosas?

hCalendar in MySQL courses

Al igual que antes, la estructura anterior de cada curso era bastante sencilla:

<tr class="course_instance">
  <td>
    Del 03 de Diciembre al 05 de Diciembre en Zaragoza
  </td>
  <td class="price">900 €</td>
</tr>

Y tras un poco de magia hCalendar:

<tr class="course_instance">
  <td>
    <div class="vevent">
     <a class="url" href="/cursos/show/4">
       <span class="summary">MySQL 5.0 High Availability (Diciembre)</span>
      </a>
      Del 
      <abbr class="dtstart" title="2007-12-03">03 de Diciembre</abbr>
      al 
      <abbr class="dtend" title="2007-12-05">05 de Diciembre</abbr>,
      en <span class="location">Zaragoza</span>
     </div>
  </td>
  <td class="price">900 €</td>
</tr>

En este caso, el contenido hay cambiado ligeramente: he añadido de nuevo el nombre del curso junto con el mes a modo de resumen. Esto será útil a la hora de importarlo a un calendario. Como no queremos que se vuelva a mostrar en la web lo ocultamos con CSS

.course_instance .url {
  display: none;
}

Después de esto es bastante sencillo añadir el curso a un calendario.

Operator showing hCalendar

Import event

MySQL course in Google Calendar

Como se puede comprobar, no cuesta tanto implementar los microformatos y las ventajas son interesantes. Además, no necesitamos la extensión Operator (u otra tecnología nueva) para poder usar el sitio, simplemente nos ofrece una funcionalidad extra.

Así que ya sabéis, no tenéis excusa para no usar microformatos.

2 pensamientos en “No necesitas ser flickr para usar microformatos

  1. Es la primera vez que oigo esto de los microformatos y desde luego se pueden conseguir resultados brillantes con muy poquito.

    ¿Se puede aplicar a cualquier sitio? ¿Hay microformatos prediseñados para facilitar la interacción con los lectores del blog? ¿Lo entienden todos los navegadores?

    He visto el enlace de wikipedia, tendré que leerlo despacio. El otro enlace tiene pintas de ser bastante interesante, pero mi inglés es más bien justito.

    Hasta otra

Los comentarios están cerrados.