Archivos de la categoría ‘HTML’

Microformats

Publicado: 23/05/2011 en desarrollo, HTML, Microformats, Programación
Etiquetas:, , ,
1

Hoy vamos a hablar de los Microformats, un conjunto de «buenas costumbres» apliamente aceptadas y extendidas y que posiblemente acaben convirtiéndose en un estándar en Internet, que nos permiten remarcar datos de contacto, eventos de calendario, etc, entendible por humanos y robots de búsquedas.

¿Qué son los Microformats?

Los Microformats son un conjunto de formatos, simple y apliamente aceptados, construido sobre las normas existentes de HTML. En lugar de deshechar aquello que hoy en día funciona y está firmemente implantado, los Microformats intentan solucionar problemas nuevos utilizando las herramientas existentes.

Los Microformats NO SON un nuevo lenguaje de programación web. Simplemente añaden una nueva funcionalidad al lenguaje existente utilizando sus propiedades.

¿Para qué sirven los Microformats?

Los Microformats nos permiten remarcar o destacar dentro del contenido de nuestra web aquellos datos de contacto, eventos de calendario o descripciones de productos de forma sencilla, no intrusiva para el usuario que lee la información y muy clara para los robots de buscadores como Google, el cual lo reconoce a la perfección en incluso premia en su cálculo de PageRank a aquellos sitios que los utilizan adecuadamente.

Ejemplos de Microformats

Datos de contacto

Para los datos de contactos podemos crear un div con la clase «vcard», el cual contendrá todos los datos personales que queramos mostrar. Una tarjeta de contacto tipo hCard podría ser algo así:

<div id="hcard-Juan-López" class="vcard">
 <span class="fn">Juan López</span>
 <div class="org">Google Corp.</div>
 <a class="email" href="mailto:jlopez@server.com">jlopez@server.com</a>
 <div class="adr">
  <div class="street-address">Main St.</div>
  <span class="locality">Palo Alto</span>, 
  <span class="region">California</span>, 
  <span class="postal-code">CA1234</span>
  <span class="country-name">Estados Unidos</span>
 </div>
 <div class="tel">123456789</div>
</div>

Podemos observar que todo se basa en añadir clases a los distintos elementos del documento. Por ejemplo:

  • vcard. Para indicar que definiremos un bloque de datos personales.
  • fn (full name). Para destacar el nombre completo del contacto.
  • org. Para destacar la organización en la que trabaja.
  • Puedes encontrar más documentación sobre vcard en hCard 1.0

Eventos de calendario

Para los datos de un evento podemos crear un div con la clase «vevent», el cual contendrá todos los datos del evento de calendario que queramos mostrar. Una evento de calendario tipo hCalendar podría ser algo así:

<div id="hcalendar-Reunion-con-cliente" class="vevent">
<abbr class="dtstart" title="2011-05-24T10:00Z00">May 24, 2011  10</abbr> – 
<abbr class="dtend" title="2011-05-24T13:00Z">1pm</abbr>:  
<span class="summary">Reunion con cliente</span> at <span class="location">Sala de reuniones</span>
<div class="description">Reunión con nuestro mejor cliente</div>
</div>

En este caso, utilizamos otras clases diferentes para remarcar los datos del evento. Por ejemplo:

  • vevent. Para indicar que vamos a comenzar un bloque de datos relativos a un evento de calendario.
  • dtstart o dtend. Para indicar la fecha y hora de inicio y fin del evento.
  • Puedes encontrar más información sobre vevent en hCalendar 1.0

A tener en cuenta…

  • Los principales sitios de referencia en Internet como Facebook, Twitter o Google hacen uso de Microformats para especificar datos de contacto o eventos.
  • Los principales buscadores de Internet reconocen los microformats a la hora de indexar páginas que los contengan.
  • Para más información sobre Microformats puedes visitar microformats.org