Aplicación práctica de RDFa

por Ricardo Escudé

En los dos proyectos en los que nos encontramos encauzados actualmente en Alia hemos empezado a utilizar técnicas para agregar riqueza semántica a nuestro HTML. La aparición en www.alistapart.com de un artículo resumiendo RDFa nos ha animado a escribir este artículo.

¿Y qué es RDFa?

RDFa, según wikipedia, son un conjunto de extensiones propuestas por W3C para la introducción de semántica a XHTML, concretamente dentro de la etiqueta <body> (normalmente es en head donde se utilizan la información meta).
La información meta es aquella que completa la información que visualiza el usuario en pantalla; y que aporta riqueza semántica. Esta riqueza mejora el posicionamiento, ya que le estamos dando a las máquinas o search engines más datos para categorizar e indexar la información.

Por poner el mismo ejemplo que en el artículo de alistapart.com sobre RDFa:
"en un portal de noticias, nos encontramos en una página una noticia cuyo título es: ‘El presidente español ha visitado Francia para blablabla…’ ." Un humano es capaz de entender que el presidente actual es Zapatero, pero Google no, a no ser que específicamente se mencione su nombre en la página web.

Para mejorar la semántica de nuestro código xhtml usaremos entonces las propiedades que el W3C ofrece para mejorar la riqueza semántica dentro del body de nuestras páginas.
Por lo tanto, RDFa trata de una serie de extensiones (válidas en xhtml) que tratan sobre las relaciones entre diferentes elementos y documentos. Asimismo, una página sin RDFa se visualiza exactamente igual que una con RDFa, ya que se trata de riqueza semántica, no de contenido ni de la disposición de los elementos.

En alistapart.com proponen 9 directrices, sobre las que nos basamos para la realización de este artículo (aunque hemos obviado las últimas directrices, para simplificar el proceso de aprendizaje de estas novedosas técnicas dentro de nuestra metodología de trabajo):

Partimos de la premisa que ya conocemos la estructura de la información meta dentro del tag <head>:

<html>
<head>
<title>Alia Multimedia – Diseño web</title>
<meta name="author" content="Alia Multimedia" />
<meta name="created" content="2009-05-09" />
<link rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" />
</head>

Con estas etiquetas estamos especificando mediante <meta> el autor y la fecha de creación y mediante <link> especificamos que esta web un copyright con creative commons.

Partiendo de esta base, vamos a trasladar las posibilidades de la utilización de información meta a <body> mediante 10 directrices:

1ª directriz – el uso de ‘rel=’

La etiqueta <link> de <head> es igual que la etiqueta <a> dentro de <body>, es decir, establece una relación entre dos documentos web. Por lo tanto, podemos extender las propiedades semánticas de <a> como en este ejemplo:

<a rel="license" href="http://creativecommons.org/licencias/">esta página tiene una licencia creative commons</a>

Un ejemplo de aplicación de esta técnica, podría ser citar un pasaje o un título de un libro en un texto:

<a rel="cite" href="http://ejemplo.com/libros/el_senor_de_los_anillos/">los elfos conquistarán Mordor</a>

Como véis, XHTML tiene una serie de valores de rel= predefinidos. Podéis ver la lista completa en:
http://www.w3.org/TR/rdfa-syntax/#relValues
¡Son muy útiles!

Directriz 2 – ampliar el uso de rel a <img>

Si extendemos esta relación de la primera directriz a la etiqueta <img>, podremos por ejemplo indicar la relación entre una imagen y su licencia de la siguiente manera:

<img src="imagen1.png" rel="license" href="http://creativecommons.org/licencias/" />

Directriz 3 – el uso de content= y property=

Paso a recordaros cómo se escribían las metas dentro de <head>:

<meta name="author" content="Alia Multimedia" />

Si os dais cuenta, dentro de <body> no podríamos utilizar la propiedad ‘name=’ dado que ya tiene una funcionalidad dentro de <body>, que es la de nombrar los campos input para su reconocimiento. Por tanto, en RDFa en body se cambia la propiedad name= por property= como os indico en el ejemplo:

<body>
<div class="noticia">
<h2>Título de la noticia</h2>
<p>Texto de la noticia de Alia Multimedia.</p>
<p>Autor: <span property="author" content="Alia Multimedia">Alia Multimedia</span></p>
<p>Fecha: <span property="date" content="2009-10-10">10 de octubre de 2009</span></p>
</div>
</body>

Útil, ¿verdad?, y añade riqueza semántica.
Pero ahora os preguntaréis, ¿cómo saben los buscadores que author es autor y date es fecha? Para estandarizar este tema, utilizaremos diccionarios predefinidos. Por lo que he visto por internet, el más utilizado es el Dublin Core. Para indicar en RDFa que estamos usando un diccionario, lo haremos con la siguiente sintaxis:

<body>
<div class="noticia">
<h2>Título de la noticia</h2>
<p>Texto de la noticia de Alia Multimedia.</p>
<p>Autor: <span property="dc:author" content="Alia Multimedia">Alia Multimedia</span></p>
<p>Fecha: <span property="dc:date" content="2009-10-10">10 de octubre de 2009</span></p>
</div>
</body>

En el diccionario Dublin Core vienen especificados los términos author y date. Sólo tenemos que chequear este diccionario para buscar otros términos.

Asímismo, si habéis estado atentos a este tutorial, os preguntaréis por qué rel="license" no ha necesitado ningún diccionario. Esto se debe a que HTML viene con algunos términos integrados (como license, next, prev, …). Podéis buscar en Google para encontrar más resultados.