huevoCucharaCuento!!! » Microformatos

Añadiendo semanticismo con los Microformatos – Parte 1: rel

Rafael G. Lepper — Mon, 06 Jul 2009 02:12:41 +0000

Artículo escrito por Emily Lewis en su blog para la serie de articulos sobre microformatos que estoy traduciendo “Getting Semantic With Microformats”

Como he mencionado en la introducción a esta serie, soy un bicho raro para microformatos.

Me encanta la semántica, su estructura, su simplicidad y su potencial. Decidí que debía compartir este amor con el mundo (o, al menos, con mis cuatro lectores) al detallar la forma en que he usado los diferentes microformatos A Blog No Limited.

Esta primera entrega de la serie se centra en los microformatos para las relaciones basadas en enlaces mediante el atributo rel. Vamos a empezar, ¿de acuerdo?

Relaciones basadas en enlaces

El atributo rel se utiliza para describir la relación de un vínculo en términos de lo que el destino (href) es a la fuente. La mayoría estareis probablemente muy familiarizados con este atributo, tal como se utiliza en los css vinculados:

rel="stylesheet" type="text/css" media="screen" href="/styles/main.css" />

Además, se pueden poner varios rel en una etiqueta, igual que con el atributo class.

Enseñame el camino a casa: rel-home

El microformato rel-home indica que el destino de un enlace es la página principal del sitio. Se utilizan principalmente para la navegación por el sitio, pero también para proporcionar la descripción de la estructura del sitio a las páginas individuales.

Nota: rel-home es un borrador, que esencialmente significa que está sujeto a cambios. Pero, ya que el cambio es la naturaleza de las tecnologías web, no es algo que me preocupa especialmente.

Ahora, volviendo a la programación… yo uso el microformato rel-home de dos maneras. En el de mi XHTML, añado:

rel="home" href="http://www.ablognotlimited.com/" title="Página de inicio" />

También, cualquier enlace (en el menú de navegación, y en el contenido) a la página de inicio de A Blog No Limited lleva rel = "home"

rel="home" >A Blog Not Limited< /a>

Los Beneficios

Aparte de la semántica y el significado (que es más que suficiente para mí), Opera reconoce el microformato rel-home cuando se utiliza en el del de un documento XHTML. El navegador cuenta con una barra de herramientas de navegación que, cuando está activada, permite a los usuarios navegar a la página de inicio:

también, segun el artículo de Mark Pilgrim Dive Into Accessibility, rel-home mejora la accesibilidad con las ayudas a la navegación de los navegadores en modo texto, tales como Links y Lynx.

Por último, rel-home es reconocido por la extensión de Firefox cmSiteNavigation Toolbar, que muestra las páginas relacionadas con la página actual en una barra de herramientas de ayuda a la navegación. En la actualidad, esta extensión sólo está disponible para FF 1.5-2.0. Y como estoy usando FF 3.0, no puedo ofrecer una captura de pantalla de esta herramienta.

Me, myself & I (Yo, yo mismo & yo)

Además, como este blog es mi blog y se pueden utilizar varios valores, los enlaces a la pagina de inicio incluyen también rel="me":

rel="home me" >A Blog Not Limited< /a>

Según las especificaciones, rel="me" se utiliza en los hipervínculos de una página sobre una persona a otras páginas sobre la misma persona.

Con esto en mente, he añadido también rel="me" a los vínculos que enlazan a mis páginas en redes sociales (por ejemplo, Flickr, Facebook, Twitter, etc):

rel="me">Twitter

Los Beneficios

Una vez más, la semántica es más que suficiente para mí, pero hay cada vez más beneficios por utilizar rel-me, principalmente en relación con el microformato XFN .

XFN es un microformato que representa las relaciones sociales (es decir, amigos, familiares, compañeros de trabajo, etc.) Usando XFN, Google está desarrollando Social Graph API para ayudar a hacer la web más social y que sea más fácil encontrar amigos en nuevos lugares en la web.

Además, hay un puñado de servicios de “consolidación de la identidad en línea” que utilizan XFN, incluyendo claimID y Plaxo’s Open Social Graph.

Además, muchas “redes sociales” están añadiendo rel="me" a los enlaces de sus páginas de perfil, incluidas las de Flickr, Twitter, LinkedIn y muchas más. Esto apoya el esfuerzo de consolidación de la identidad: Cuando una página se refiere a otra, la identidad dividida se consolida.

El microformato XFN lo veremos con mucho mayor detalle en la Parte 2 de esta serie.

Categorías y etiquetas = Una gozada de organización

Habida cuenta de mi predilección por la organización (y porque toda la gente guay lo esta haciendo), estoy usando las etiquetas en para complementar las categorías. Y para mi gran alegría, hay un microformato para esto: rel-tag.

Añadir rel="tag" a un enlace ( ) en una página, sirve para indicar de que trata la página, o parte de la página a la que te lleva el enlace. rel-tag se utiliza mucho en los blogs donde los autores etiquetan sus posts para ayudar a la organización/clasificación del contenido.

La especificación requiere que el vínculo de destino (href) incluya el valor real de la “etiqueta” como el segmento final del la URL. Esto es conocido como el “tagspace”.

En A Blog No Limited, he aplicado este microformato a todos mis vínculos de etiquetas:

rel="tag">ExpressionEngine

Así como los enlaces de categorías (porque, en mi mente, también describen de que va un contenido):

rel="tag">Experimentos

Según estos ejemplos, una página que contiene estos enlaces incluye información sobre ExpressionEngine y / o experimentos. Además, los ejemplos muestran que los tagspaces para ambos experimentos y ExpressionEngine se encuentran en la URL proporcionada.

Los Beneficios

¿Hace falta que lo diga otra vez? Sí, por supuesto, sólo porque me encanta: la semántica es el principal beneficio para mí. Sin embargo, como con los otros microformatos que he detallado en este artículo, hay algunos beneficios adicionales.

La extensión para Firefox Operator, por ejemplo, reconoce rel-tag y proporciona una búsqueda por contexto en otros sitios web, incluyendo Amazon, YouTube y Flickr. Así es como Operator trata los enlaces rel-tag en mi blog:

Technorati tiene una función de búsqueda de etiquetas que indexa los posts etiquetados en blogs y otro contenido maracado con rel-tag. Esto es útil para ayudar a aumentar la difusión de un sitio o blog, ya que se puede acceder al contenido indexado a través de las Etiquetas de Technorati.

Del mismo modo, el motor de búsqueda en blogs IceRocket apoya la busqueda basada en etiquetas.

Licencia para Matar (Con Semántica)

Sí, lo sé, un encabezado realmente flojo… continuo…

El ultimo microformato basado en la relación de enlaces que estoy usando es rel-license. Como es posible que ya hayas adivinado, este microformato indica una licencia de contenido y, cuando se utiliza en un enlace ( ), indica donde acceder a esa licencia (a través del valor href).

Cuando empecé A Blog No Limited, una de las primeras cosas que hice fue obtener una licencia de Creative Commons para la protección del derecho de autor. Después modifiqué la declaración de derechos de autor en el pie de página de mi blog para incluir un enlace a la licencia. Y es a este enlace al que he añadido rel="license" :

rel="license" >copyright

Los Beneficios

Sí, la semantica otra vez. aunque también hay un una extensión de Firefox que reconoce rel-license: Tails Export. Así es como Tails muestra la información rel-license de A blog Non Limited:

Además, Creative Commons utiliza rel-license cuando genera las etiquetas de licencia.

Y tanto Google como Yahoo! ofrecen búsquedas que filtran contenido basandose en rel-license:

Un beneficio global

Si bien he detallado algunas de las ventajas de cada uno de los microformatos descritos en este artículo, hay un beneficio global que debe ser considerado también (aunque yo he de aprovecharlo todavía): selectores de atributo CSS.

Mediante el uso de selectores de atributo, CSS puede definir los estilos a los vínculos específicos que incluyen los atributos rel. Por ejemplo, añadir un icono para el comienzo de un vínculo asignado rel="license":

a[rel~="license"]:before {content: url(copyright.png);}

Por supuesto, IE6 no reconoce los seectores de atributo, pero que le den. De todas formas odio IE6. Yo digo, incorpora mejoras progresivas y diseña para los navegadores que cumplen estandares y que reconocen los selectores de atributo.

Emily Lewis: Añadiendo semánticismo con los Microformatos. Introducción

Rafael G. Lepper — Mon, 11 May 2009 17:24:00 +0000

Prefacio

A continuación, he traducido un artículo escrito por Emily Lewis, el 5 de septiembre de 2008 en A Blog Not Limited, su blog personal. Lo he traducido porque me parece realmente interesante y porque es sin duda lo mejor que he encontrado sobre como aplicar microformatos (incluido el wiki oficial), y porque además estoy completamente de acuerdo en casi todo lo que dice, incluso en algunas de las cosas personales que comenta.

También me ha motivado a escribirlo el hecho de que al buscar la forma de aplicar ciertos microformatos “complejos” como hAtom al desarrollar el front-end del sitio web motociclismo.es, el trabajo fue desolador, no encontré prácticamente nada en español, y lo que encontré en inglés, hablaba siempre de los microformatos más usados como hCard o rel-tag. El Wiki oficial, me pareció un tremendo lío, y no por estar en inglés, si no por como esta todo (des)ordenado. Encontrar estas explicaciones de Emily Lewis fué para mi un oasis.

Pretendo con esto agradecer a Emily su trabajo y difundir los microformatos un poco.

Son una serie de articulos y voy a intentar traducirlos todos. Esta es la introducción:

Añadiendo semanticismo con los Microformatos: Introducción

Soy una organizadora con una, a veces frustrante, necesidad de prestar atención a los detalles más pequeños.

Se manifiesta en mi casa: mi colección de más de 500 DVD, está organizada por orden alfabético, así como lo que queda de mi colección de CDs.

Paso horas en la asignación de los géneros de iTunes (debido a que los valores predeterminados no son lo suficientemente buenos para mí) y creando listas de reproducción de más de 10.000 canciones.

Mis libros están organizados por género. Mis cajones y armarios son prístinas. Yo soy así.

Esta personalidad “rarita” también se manifiesta en mi trabajo de diseño web, que es válido, semántico y bien comentado (la mayor parte del tiempo). Y es una de las razones por las que me encanta lo que hago para vivir.

Codificar a mano XHTML y CSS requiere mucha organización y planificación, sobre todo para hacerlo bien. Más aún, al codificar siguiendo estándares web, es necesario un nivel aún mayor de atención al detalle, en particular respecto a la semántica.

Y esta es la razón por la que me vuelvo gagá por los microformatos.

¿Qué son los microformatos?

En resumen, los microformatos son formatos de datos simples y abiertos que se basan en los estándares existentes de marcado y datos. Diseñadores y desarrolladores utilizan microformatos para añadir significado y estructura a la publicación web mediante la adición de metadatos y otros atributos a los elementos (X)HTML.

¿Cómo son?

Un simple ejemplo de un microformato (aunque todos ellos son, por naturaleza, sencillos) es el atributo rel para enlaces ( ):

A Blog Not Limited

El enlace anterior incluye rel="home", lo cual indica que la página del enlace es la página principal del sitio. Esto añade un poco más de estructura y significado al enlace.

Pero este artículo no es una explicación sobre microformatos. Si necesita más información, vaya a la autoridad, Microformatos, o la Wikipedia.

Entonces, ¿De que trata este artículo?

Desde que empecé el desarrollo de A Blog Not Limited, he identificado una serie de microformatos que quería usar en mi marcado:

En aras de compartir, quería dar ejemplos de estas implementaciones personales. Sin embargo, al escribir este artículo, me di cuenta de que era mucho más tiempo del que yo había inicialmente previsto. Aunque realmente no quería deshacerme de nada.

Así que, he decidido dividirla en una breve serie de artículos acerca de cómo he aplicado microformatos en este blog. Este artículo introductorio es sólo eso: una introducción a la serie con algunos antecedentes sobre microformatos.

Qué Esperar

Cada artículo de la serie “Añadiendo semánticismo con los Microformatos” cubrirá uno de los microformatos que opté por usar en A Blog Not Limited.

Voy a incluir ejemplos de marcado, las explicaciones de los elementos y atributos utilizados y, los beneficios de la utilización de cada microformato.

No tengo un calendario previsto para los artículos, pero espero publicar al menos uno a la semana.

Así que, ¿Qué viene después?

“Añadiendo Semánticismo Con Microformatos, parte 1″ explica en detalle los microformatos de relaciones a base de enlaces, incluidos rel-home, rel-me, rel-tag y rel-license.

La Parte 1 ya está completa al 95%, así que voy a publicarla pronto. Hasta entonces …