huevoCucharaCuento!!! » Web Semántica

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 …

Sobre el marcado estructural y semántico. Su repercusión en el Seo

Rafael G. Lepper — Thu, 29 Jan 2009 05:37:50 +0000

Los contenidos son de hecho lo importante en Internet, pero los buscadores solo son capaces de buscar similitudes entre las palabras buscadas y los textos, porque, entender, es algo que a nosotros nos parece completamente natural y que damos por sentado, pero es algo que de momento, un ordenador no puede hacer. Para conseguir que los ordenadores sean capaces de acercarse a nuestra comprensión, necesitamos estructurar los contenidos correctamente y añadirles un valor semántico.

Los contenidos y los motores de búsqueda

Dudo mucho que hoy por hoy haya alguien que no tenga clara la importancia de los contenidos en Internet. El principal motivo por el que la web es usada por millones de personas cada día es porque consiguen la información que buscan, ya sea generada por redactores, blogueros o usuarios en redes sociales. Los motores de búsqueda se afanan cada día por filtrar entre los terabytes de información diaria para acercársela a los usuarios cuando la buscan y hacen lo que pueden, pero hasta hace relativamente poco tiempo los programadores y diseñadores web no se lo han puesto fácil, porque todos se han centrado en cómo un humano (salvando a los ciegos que han sido ignorados hasta hace bien poco) entiende la información, es decir: visualmente.

Lo que un humano entiende

La gran cualidad que nos da a los seres humanos ventaja sobre los ordenadores es la capacidad de abstracción. Sólo viendo un texto sabemos comprender dónde hay un título, un subtítulo, un logo, un texto divido en párrafos, una fecha… somos capaces además de entender la información, recordar algo que nos ha interesado y volver a esos recuerdos que han quedado indexados mentalmente cuando nos hacen falta.

Los ordenadores no entienden

Entender, es algo que a nosotros nos parece completamente natural y que damos por sentado, pero es algo que de momento, un ordenador no puede hacer. Así, a grosso modo, la forma de trabajar de los motores de búsqueda es entrar en las páginas leer los textos y almacenarlos ordenándolos según las palabras que éstos contienen, dando más importancia a las que más se repiten, las que conforman un encabezado, un sub-encabezado, las que son un enlace etc. usando super algoritmos secretísimos para tratar de dar en el clavo. El problema está en que si no se estructuran los contenidos para que el ordenador pueda distinguir dónde están las palabras más importantes en los textos, aunque se vean de forma que un humano no tenga duda de lo que está leyendo, un motor de búsqueda no va a poder entender que cierto texto contiene justo la información que el usuario está buscando.

Xhtml para estructurar contenidos

Por este motivo, si queremos que los contenidos que hay en nuestro sitio web, aunque no sean entendidos por los buscadores, sí sean al menos correctamente organizados en sus bases de datos, necesitamos estructurarlos. Para esto el mejor recurso que tenemos es xhtml, que es un lenguaje de marcado basado en html y xml, que intenta tomar lo mejor de ambos. Alguno se preguntará: ¿qué tiene de malo html? Y la respuesta es que creció sin orden ni concierto, fueron los equipos de desarrollo de los diferentes navegadores los que añadieron etiquetas, cada uno las suyas, según la demanda de los diseñadores gráficos que querían llevar sus diseños a las páginas web y no pensando en cómo organizar mejor los contenidos.

Esto se corrigió limpiando html de etiquetas que no fueran enfocadas a estructurar información y además se incorporaron reglas de marcado de xml que son bastante estrictas y permiten orden, dando lugar a xhtml, y dejando todo aquello que tenga que ver con el aspecto a un nuevo lenguaje llamado css. La mayoría de los diseñadores web no entendieron la diferencia, ni los motivos para cambiar, o simplemente no se enteraron y continuaron usando lo de siempre, lo que explica la lentísima implantación del xhtml que es un estándar desde el año 2000 y que todavía no es usado por todos los diseñadores web.

En cualquier caso, el objetivo de cualquier lenguaje de marcado es organizar unos contenidos según ciertos criterios, y el problema con html es que sus criterios mezclan aspecto y estructura complicando mucho la tarea de los buscadores, no así xhtml, que bien usado permite organizar la información de modo que un ordenador entienda que tal texto es un encabezado, tal otro un sub-encabezado, o un párrafo, o un enlace etc. esta estructura organizativa para los contenidos, ayuda mucho a los motores de búsqueda, para darle importancia a un texto o unas palabras frente a otras, pero no consigue que los ordenadores puedan añadir criterios por el significado de dichos textos.

La brecha

Una vez que se consigue que los contenidos estén bien estructurados, un ordenador ve las cosas parecidas a la imagen de abajo a la izquierda, mientras un humano entendería la información como se muestra en la imagen de abajo a la derecha.

De esta forma sigue habiendo una brecha entre lo que los humanos entienden, y por tanto, piden a los motores de búsqueda, y lo que éstos pueden dar, lo que genera el nacimiento de lo que hoy en día conocemos como web semántica.

Marcado semántico para construir un puente sobre la brecha

La web semántica, no es más que una serie de iniciativas (Microformatos, RDFa, Dublin Core…) para tratar de añadir significado a las etiquetas xhtml, permitiendo que los ordenadores interpreten los contenidos del modo más parecido posible a como los humanos los entendemos. Hace relativamente poco tiempo, que empezaron y poco a poco van ganando terreno, a medida que los diseñadores web van ganando perspectiva.

Si los ordenadores entienden los contenidos

Cuando la información en la web que está dirigida a humanos, es mejorada con ayudas para que los ordenadores la sepan interpretar, se vuelve mucho más útil.

Los motores de búsqueda, lo tienen desde luego mucho más fácil si tienen formas de “entender” los contenidos para mejorar sus resultados de búsqueda, pero podría ir mucho más allá de los buscadores, permitiendo a los diferentes sitios web compartir la información entre ellos y con los usuarios, muy por encima de las posibilidades de la actual sindicación.

Por ejemplo, un evento cualquiera anunciado en el sitio web, podría ser fácilmente añadido al calendario del usuario, o los datos de contacto del autor podrían ser añadidos a la libreta de direcciones… los usuarios podrían volver a artículos previamente leídos según sus etiquetas etc. y muchas otras posibilidades que poco a poco irán llegando, ya que actualmente, los motores de búsqueda principales son capaces de interpretar marcado semántico y prácticamente a ningún especialista en la materia le cabe duda de que el futuro de la web va en este sentido.