1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Microformatsimagen de cindyli

Introducción a los Microformatos

Hace tiempo que quería escribir acerca de los microformatos, al final decidí hacerlo en varios posts ya que es un tema súper amplio, este es el primero de la serie.

Aquí verás una introducción a los microformatos y un ejemplo de su uso.

¿Que son los Microformatos?

Los microformatos son una manera de agregar información extra a tus páginas, usando generalmente el atributo class.

La idea de usar una clase para dar información extra es bastantes simple, se trata de darle un atributo class (con un nombre estándar) a un elemento para describir la información que contiene.

La forma más fácil de entender esto es con un ejemplo:

Digamos que tengo este párrafo en mi blog:

Parrafo sin microformatos

Lo único que ese HTML le comunica a una computadora es que se trata de un párrafo con un enlace a aprendiendoweb.com, no hay forma de decirle que soy autor de AprendiendoWeb.com ¿o si?

Para eso están los microformatos...

Empezando con los Microformatos

Es hora de hacer que una máquina entienda que soy yo quien escribe en Aprendiendo Web.

Tenemos este párrafo y ahora, para agregar los microformatos basta hacer lo siguiente:

Pasos para la creación de microformatos

Lo que hicimos aquí fue básicamente encerrar mi nombre en un <span> y darle la clase fn para marcarlo como un nombre, luego le dimos la clase url al elemento <a> indicando que esa es la dirección de mi página.

Finalmente usamos el elemento <p> que encerraba todo y le dimos la clase vcard, así relacionamos todo lo que se encuentre dentro de ese elemento.

Estoy seguro que aún tienes muchas preguntas

¿Qué es un vcard?

Un vcard es una manera de decirle a la computadora que todo lo que está dentro de ese elemento es un hCard, por lo tanto está relacionado, es así como puede saber que Aprendiendo Web es mi blog.

¿Cómo que un vcard define un hCard?

El vcard es un formato de texto, mientras que el hCard es el HTML que representa ese vcard.

Digamos que tengo un hCard (como el HTML de los ejemplos), el vcard se vería como esto:

BEGIN:VCARD

PRODID:-//kaply.com//Operator 0.8//EN

SOURCE:http://aprendiendoweb.com/

NAME:Aprendiendo Web | tips y tutoriales de (X)HTML, CSS, SEO, usabilidad y más.

VERSION:3.0

N;CHARSET=UTF-8:Martínez;Germán;;;

FN;CHARSET=UTF-8:Germán Martínez

URL:http://aprendiendoweb.com/

END:VCARD

¿Hay más microformatos?

Sí, hay muchos más microformatos, y lo que explico en este post es sólo una pequeña parte, luego explicaré más acerca de otros tipos de microformatos.

Mientras tanto, puedes visitar microformats.org

¿Qué es eso de "fn" y "url"?

Son convenciones, fn define el nombre y url define la dirección del sitio web de esa persona.

Eso es todo por ahora, en la segunda parte veremos un ejemplo del uso real de los microformatos.

¿Te parecen útiles?

Actualización: Ya está lista la segunda parte de este tutorial, Microformatos en su hábitat natural.

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Coffee Coffee

    YeS!!! Estaba esperando por este post! Muy bueno, no tenia ni idea de lo que eran! Muy buen aporte Germán. Gracias

    (en espera de los próximos)

    Coffee.

  2. Avatar de Germán Germán

    Gracias Coffee, acabo de publicar el siguiente, donde podrás darte cuenta de lo útiles que pueden ser!

    Un abrazo.

  3. Avatar de Hernan Hernan

    La verdad muy bien explicado.

    Salu2.

  4. Avatar de Germán Germán

    Gracias Hernan, es un gusto leer comentarios como el tuyo, la idea de Aprendiendo web es explicar las cosas de la manera más sencilla posible (y hablar de microformatos de esa manera puede resultar algo complicado).

    Que bueno que te haya gustado el post.

    Saludos!

  5. Avatar de David David

    Hola Germán.
    Leí tu post hace algún tiempo y casualmente hoy me encontré con una extensión de Firefox que detecta microformatos. Se llama "<a href="http://labs.mozilla.com/2006/12/introducing-operator/">Operator</a>" y hace parte de Mozilla Labs.

  6. Avatar de David David

    Germán, veo que los comentarios no soportan tags HTML :-(

    La extensión se llama "Operator", hace parte de Mozilla Labs y la encuentras en http://labs.mozilla.com/2006/12/introducing-operator/

  7. Avatar de David David

    Mmmm... no había leído la segunda parte de este post donde hablas de Operator ;-)

  8. Avatar de eduardo eduardo

    hola me pueden explicar donde colocar el código de los micro formatos ya que lo puse en mi web después de body pero me a dañado el diseño aparecen letras por favor puedes explicarme esto gracias

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910