Microformatos qué, por qué y cómo

Hay una gran cantidad de datos en la web. Como mucho Pero supongo que los datos más útiles para las masas, como la información sobre las personas con las que deben ponerse en contacto o los eventos a los que deben asistir, se almacenan en HTML, donde no se puede obtener fácilmente. Entonces, ¿a quién vas a llamar? Los microformatos están intentando tomar el trabajo.!

Qué?

Vamos a tomar esto desde la parte superior. ¿Qué son los microformatos? Fuera de la página de inicio de microformats.org viene esta definición:

Los microformatos, diseñados para los humanos primero y las máquinas en segundo lugar, son un conjunto de formatos de datos abiertos y simples basados ​​en estándares existentes y ampliamente adoptados..

Un buen comienzo, pero necesitamos un poco más para aclarar. Puede encontrar una lista completa de definiciones en el sitio, pero aquí está el resumen: Los microformatos son un conjunto de estándares para insertar datos fácilmente extraíbles en sus páginas, utilizando tecnologías con las que se sienta cómodo hoy.. La gran parte de esto es que probablemente tenga contenido en su sitio ahora mismo que se podría marcar con un microformato. Lo mejor es que solo te llevará unos minutos después de leer este tutorial..

Por qué?

Entonces, ¿por qué deberías usar microformatos? ¿Cuál es el incentivo? Bueno, si estás convencido de que HTML debe ser semántico solo porque, entonces los microformatos se conectarán contigo. De lo contrario, persuadiré: como notamos, toda la idea de los microformatos es estandarizar la forma en que los datos se marcan en una página, de modo que se puedan extraer fácilmente. Actualmente, no hay muchas herramientas que aprovechen los microformatos, pero creo que eso cambiará. El uso de microformatos en su trabajo preparará sus sitios web para el futuro, cuando los microformatos estarán mucho más extendidos. Nuevamente, el sitio web tiene una lista general de lo que puede hacer con los microformatos. Ya hay un complemento de Firefox decente para extraer microformatos; se llama operador.

Entonces, Dan Web ha creado una biblioteca de JavaScript simple llamada 'Sumo' que extrae microformatos para usar con JavaScript. También puedes probar el bookmarklet de microformatos..

Cómo?

Bueno, si has llegado hasta aquí, es obvio que tú y los microformatos estaban hechos el uno para el otro. Así que saltemos y miremos uno. Pero antes de hacerlo, aquí está la estructura general de los microformatos que veremos: en términos generales, si involucran más de un elemento en nuestro código, usan clases. Si solo están preocupados por un elemento, generalmente se usa el atributo rel..

hCalendario

hCalendar es una forma fácil de marcar eventos. Comenzaremos con un elemento que declara nuestro evento:

 

Si tiene varios eventos, debe envolverlos en un div.vcalendar; Sin embargo, no es necesario. Hay dos propiedades requeridas para un evento: la fecha de inicio (dtstart) y el resumen. Vamos a añadir estos:

 

Este año, nuestro cena de empresa de vacaciones comenzará en 2009-12-18T17: 30.

Legible para humanos, ¿eh? ¡No esa fecha! Tienes razón; Aunque las microformas están escritas para las personas primero, las fechas son un área donde es importante que las computadoras puedan leerlo. La convención común sería escribir la fecha con una etiqueta abbr, en cuyo caso el atributo de título sería el valor del valor de la propiedad:

 5:30 pm del viernes 18 de diciembre.

También hay otras propiedades opcionales que puede agregar. ¿Qué tal un tiempo de finalización, o una ubicación?

 

Nos encontraremos en el Sala de conferencias del Hotel Tower., que hemos reservado hasta 9:30 pm.

Usando la barra de herramientas del operador en Firefox, podemos ver que este evento está en nuestra página. Podemos trabajar con ello de varias maneras:

Si elijo exportarlo a Google Calendar, transfiere perfectamente los valores que hemos establecido.

Para más información sobre hCalendar, consulte la documentación de hCalendar,

hCard

Vayamos a hCard; hCard es mucho más complicado que hCalendar, pero no entraremos en detalles. Si quieres leer más más tarde, echa un vistazo a los documentos.

De nuevo, comenzamos con nuestra raíz:

 

Para hCard, solo hay dos propiedades requeridas; el nombre (n) y el nombre formateado (fn). Por lo general, hay el mismo elemento..

 

John Doe

Sin profundizar demasiado, notare que este formato implica que 'John' es el primer nombre y 'Doe' es el apellido. Si desea especificar esto, puede usar las clases de nombre de pila y de apellido:

 Juan Gama 

Por supuesto, normalmente querrá agregar algo más que su nombre. Puede agregar un apodo, una foto, una dirección de correo electrónico, un cumpleaños, una URL, un número de teléfono y una dirección, solo para nombrar algunos.

 

JayDee

  • Casa: (416) 123-4567
  • Trabajo 416-987-6543

1 de enero de 1980

Mi sitio web

123 Main Street

Toronto, Ontario M2W 4R5

Canadá

Hay algunas cosas a tener en cuenta aquí:

  • Todos los nombres de clase que he usado aquí son las propiedades hCard.
  • Algunas propiedades, como url y foto, toman sus valores de los atributos href o src, y no el texto del elemento.
  • Las propiedades como tel y email pueden tener dos propiedades secundarias: tipo y valor. Si solo se define el tipo, el valor estará implícito (como se puede ver en la segunda dirección de correo electrónico y número de teléfono).

Usando Operator, puedo exportar esto como una vcard ...

... y abrirlo en Outlook.

¿Ver? Todo lo que definimos está aquí.!

xFolk

xFolk es un microformato en desarrollo para marcadores sociales abiertos. De la documentación:

La falta de un estándar de datos abierto e interoperable es un problema importante en el uso de los servicios de marcadores sociales. Un estándar abierto permitiría recopilar fácilmente datos de marcadores sociales y mezclarlos para inventar nuevos servicios ... Un estándar abierto también permitiría escribir JavaScripts que funcionen en todos los servicios como algunos lo hacen actualmente para del.icio.us, permitiendo mejoras en la experiencia del usuario.

Para implementar xFolk, comience por darle a cada contenedor de marcadores una clase de 'xfolkentry':

  

Luego, inserte el enlace y una descripción, dándoles clases de 'taggedLink' y 'description', respectivamente.

 Nettuts, El mejor blog de desarrollo web del planeta.. 

Sí, simple; Puedo imaginar que esto sea útil en un rollo de blog o en un resumen web. Piense en una herramienta que le permita marcar todos estos enlaces a la vez.

XFN (Red de amigos XHTML)

XFN es una forma sencilla de marcar las relaciones humanas. Al usar el atributo rel (que es la abreviatura de relación) en sus enlaces, usted define su relación con el propietario de la página a la que se está vinculando. Puede tener una relación con dos partes: otras personas o usted mismo (bueno, sus otras páginas). Es fácil definir otras páginas que posees:

 Mis Posterous Mis Fotos Mis Tweets 

Bastante simple, ¿eh? rel = "yo" y listo.

Las relaciones con otras personas son un poco más detalladas, pero no más difíciles: hay seis categorías que puede elegir: amistad, física, profesional, geográfica, familiar, romántica. No los enumeraré todos aquí (una buena idea sería probar el creador del enlace), pero aquí hay algunos ejemplos:

 
  • Buen amigo
  • Querida esposa
  • Chico de al lado
  • Compañero de trabajo en Envato

En el primer enlace, puede ver por el atributo rel que conocí al propietario de la página a la que me vinculo y que soy su amigo. La siguiente es mi esposa (hipotética), que es mi esposa y mi novia, así como alguien que he conocido y que me inspira. También he conocido al chico de al lado, pero es solo un conocido y un vecino. Finalmente, aunque mi (de nuevo, hipotético) Compañero de trabajo es un amigo, note que nunca lo he conocido; Esto sería descrito como una relación virtual. Debo señalar que no debería usar XFN cuando solo se vincula a una publicación de blog o similar; úselo cuando se refiera directamente a una persona, de modo que el nombre del mensaje está en el enlace y el href va a su página de inicio.

VotarEnlaces

VoteLinks es una idea interesante: cuando se vincula a un artículo, publicación, producto, cualquier cosa, agregue el atributo rev. ¿Rdo? Rev es lo opuesto a rel; mientras que rel describe qué es la página vinculada a la página actual (como un 'amigo' o una 'hoja de estilo'), rev describe qué es la página actual con la página enlazada. Con VoteLinks, puede hacer que su página sea un 'voto a favor', 'un voto en contra' o un 'voto-abstención' a lo que esté vinculado. Así por ejemplo:

 

Revisa nuestra excelente publicación de blog de Collis en Netsetter.

Anoche recibí un servicio terrible en el Five Seasons Grill.

¿Qué pienso del rediseño de su sitio??

¿Cómo es esto útil? Bueno, imagínese si Google (y otros motores de búsqueda) tuvieron en cuenta los enlaces de votación al mostrar elementos. Actualmente, su sistema (puesto muy básicamente) es a más enlaces, más visibilidad en Google. ¿Pero qué pasaría si la mayoría de esos enlaces fueran votos contra el producto o la página? ¿O qué tal un sitio que rastrea la web en busca de VoteLinks y le muestra la popularidad general de las páginas? Todo es muy especulativo, pero podría ser interesante. El problema es que muchas personas necesitan estar usando VoteLinks para que tengan algún efecto..

Geo

Geo es muy simple; Tiene dos propiedades: latitud y longitud..

 

Manzana : (37.33171397409807 -122.03051626682281)

Envato: -37 ° 48 '45.1008 " 144 ° 58 '8.6736 ".

Como hemos visto antes, puede utilizar el elemento abbr para enmascarar los valores reales. Y por supuesto, Operator reconoce estos.

licencia de rel

Si alguna vez ha lanzado algo al público, sabe que necesita otorgarle una licencia. Puede asignar al atributo rel de un enlace el valor de 'licencia' cuando se vincula a la documentación de la licencia..

 cc por 2.0 

¿Cuál es el punto de? Ya tanto Yahoo Creative Commons Search como Google Usage Right's Search utilizan el atributo rel = "license" en sus algoritmos.

rel-tag

Este es interesante, porque cada blogger etiqueta sus publicaciones. Para este microformato, simplemente agregue rel = "etiqueta" a sus enlaces de etiquetas y listo. Ahora, al utilizar nuestro complemento Operator, podemos ver el contenido de otros sitios con las mismas etiquetas. Es importante tener en cuenta que el nombre de la etiqueta se toma del href del enlace, y no del texto del enlace. Así que en el siguiente ejemplo ...

 Scripting del lado del cliente 

… La etiqueta es 'javascript' y no 'scripting del lado del cliente'.

Nettuts ha implementado este microformato; pero ya sabías que si tienes Operador!

rel-nofollow

Otra etiqueta simple pero con suerte efectiva: agregar rel = "nofollow" a un enlace está diseñada para evitar que el enlace tenga algún efecto en el ranking de su página en los motores de búsqueda. Por supuesto, el motor de búsqueda tiene que implementar esto, y Google, Yahoo y Bing ya lo han hecho. Sería ideal agregar esto a cualquier enlace en los comentarios del blog, para que no afecten su sitio y no obtengan ningún crédito por su cuenta..

Entonces qué vas a hacer?

Hemos cubierto brevemente un buen número de microformatos; Pero la pregunta sigue siendo: ¿valen la pena su tiempo? ¡No hasta que empieces a usarlos! Los microformatos están diseñados para facilitar la búsqueda de datos en la página, pero hasta que no se utilicen ampliamente, no habrá muchas herramientas para ellos. Aunque muchos de estos pueden parecer inútiles ahora, con suerte estarán en todas partes en unos pocos años. Cuando eso suceda, las herramientas para hacer uso de ellas estarán disponibles. Los microformatos definitivamente valen su tiempo: tan fácil, tan barato, tan potencialmente poderoso.

¿Implementarás microformatos en tus sitios??

He escondido un microformato en este tutorial; puedes encontrarlo?

  • Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web..