huevoCucharaCuento!!! » xhtml

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.

Marcado válido no significa marcado correcto

Rafael G. Lepper — Mon, 09 Mar 2009 12:58:15 +0000

Hace tiempo que he notado en el mundillo del diseño web (básicamente a través de la lista de distribución ovillo que considero bastante representativa) una clara tendencia hacia la “validitis”. Echan un montón de tiempo en que un marcado valide y creen que el marcado que han puesto en un sitio web esta bien porque el test del w3c les dice que es valido según el DOCTYPE que han puesto.

Lo que parecen omitir es que se puede marcar “incorrectamente” y validar, porque no se trata de cumplir las normas del DOCTYPE, que también (pero en mi opinión, se debe dar por sentado), se trata de que el marcado debe ser exclusivamente para estructurar el contenido, y en ningún caso debe haber elementos cuya única función sea la de añadir aspecto.

De este modo hace poco, alguien pidió consejo sobre una maquetación y me encontré un marcado como este:


[html][/html][/html]

A priori, no parece que esté mal (aparte de por el MM_openBrWindow), el código valida perfectamente xhtml 1.0 transitional, pero fijándose un poco, en seguida te das cuenta de que hay un div vacío al principio y además todos los h# que utiliza, son h1. Después te encuentras un

etc.

Es decir, el código es incorrecto porque por ejemplo no se debe marcar un div vacío, porque si está vacío significa que no hay contenido que marcar, es decir que no es necesario, o significa que estás dejando de marcar un contenido porque lo pones como una imagen metida en el fondo del div desde css. Cualquiera de los dos supuestos es incorrecto.

También se está saltando la jerarquía lógica del documento, es decir no puedes pretender que hay varios encabezados de primer nivel, cuando la especificación deja claro que solo puede haber uno.

Así podría continuar porque hay arios errores más, sin embargo y a pesar de ser incorrecto, el documento valida, ¿como puede ser? Pues porque las normas básicas de sintaxis si las cumple, todas las etiquetas están cerradas, no hay cruces de etiquetas, las imágenes tienen alt etc.

Esto a lo que me lleva es a que no te puedes fiar, que la validación es algo que debes pasar para corregir errores de sintaxis que son algo de lo que nadie se escapa en algún momento, pero que hay que tener siempre muy presente el objetivo del marcado: Estructurar los contenidos

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.