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:
<link 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 <head> de mi XHTML, añado:
<link 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"
<a href="http://www.ablognotlimited.com" 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 <link> del <head> 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":
<a href="http://www.ablognotlimited.com" 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):
<a href="http://twitter.com/emilylewis" rel="me">Twitter</a>
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 ( <a> ) 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:
<a href="http://www.ablognotlimited.com/articles/tag/ExpressionEngine/" rel="tag">ExpressionEngine</a>
Así como los enlaces de categorías (porque, en mi mente, también describen de que va un contenido):
<a href="http://www.ablognotlimited.com/articles/category/experimentos/" rel="tag">Experimentos</a>
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 ( <a> ), 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" :
<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/" title="Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported" rel="license" >copyright</a>
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.
2 Comments
El mejor tutorial que he visto hasta el momento sobre este tema. Simple y claro. Ahora comienzo a entender cómo aplicar los micro formatos.
Mucha gracias!
Muy bueno el articulo sobre este tema, muy aclarador y entretenido.
Aunque yo tenia entendido que muy aparte del tema con los rel, lo microformatos se aplicaban a mediante clases CSS, definidas por la librerias de hCard y vCard.
Quizás me equivoco o me adelanto a lo que vas a explicar, en tal caso, mis mas sinceras disculpas.
saludos!!!