Introducción a RDFa (Parte 2)

En la primera parte de esta serie, vimos cómo las características semánticas, normalmente recluidas a la cabecera del documento HTML pueden ser utilizadas para añadir riqueza semántica a los elementos del cuerpo. Sobre la marcha, definimos 6 reglas de RDFa:

1. Los elementos link y a implican que existe una relación entre el documento actual y algún otro documento; el atributo @rel nos permite proveerle de un valor que describa mejor la relación.
2. Los atributos @rel y @href ya no son exclusivos de los elementos a y link, sino que también pueden ser utilizados con img para indicar una relación entre una imagen y algún otro elemento.
3. En HTML ordinario, las propiedades estań definidas en el elemento head del documento, utilizando @content con meta. En los documentos HTML que utilizan RDFa, @content puede ser utilizado para definir propiedades en cualquier elemento.
4. Aunque HTML utiliza la propiedad @name para definir el nombre de una propiedad en meta, no puede ser utilizado en otros elementos, por lo que RDFa brinda el nuevo atributo llamado @property.
5. Si el atributo @content no está presente, entonces el elemento de la propiedad será definido utilizando el texto en línea del elemento.
6. Si el atributo @content está presente, este sobreescribe el valor del texto en línea del elemento para definir el valor de la propiedad.

En esta segunda parte, vamos a aprender cómo añadir propiedades a una imagen, y cómo añadir metadata a cualquier elemento─y vamos a añadir unas cuántas reglas más a esa lista.

Añadiendo propiedades a una imagen#section1

En la primera parte, discutimos el hecho de que en HTML ordinario, @rel se utiliza para especificar una relación entre el documento actual, y otro documento. También dijimos que RDFa generaliza esta función, para que @rel pueda ser utilizado en un elemento img; la relación expresada es entre la imagen (en el atributo @src) y otro documento. El mismo principio aplica cuando las propiedades se encuentran en la etiqueta img: estas también aplicarán a la imagen, en vez de aplicar al documento actual.

Por ejemplo, para indicar cuándo fue creada una imagen, podemos hacer lo siguiente:

<img src="image1.png" property="dc:created" content="2009-03-22" />
<img src="image2.png" property="dc:created" content="2009-05-01" />

Regla #7:#section2

Con HTML ordinario solo podemos definir propiedades que se relacionan con la página misma, pero RDFa permite definir propiedades para una imagen también.

RDFa también permite expresar tanto una propiedad como una relación para la misma imagen:

<img src="image1.png" rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" property="dc:created" content="2009-05-01" />

Añadiendo metadata sobre cualquier elemento#section3

Generalizando, hemos logrado tres pasos importantes hasta ahora, según hemos evolucionado de HTML básico a RDFa:

• Hemos definido que cualquiera de las características de metadata que podemos utilizar en el elemento head del documento, puede ser utilizada de igual manera en el elemento body─aunque hemos tenido que cambiar el atributo @name a @property para lograrlo.
• Hemos visto cómo RDFa permite utilizar los nombres de las propiedades y relaciones definidos en vocabularios establecidos, utilizando los prefijos de mapeo.
• Hemos aprendido que RDFa nos permite expresar las propiedades y relaciones de imágenes, al igual que aquellas del documento actual.

Si no entiendes alguno de estos conceptos, probablemente vas a querer regresar y repasar lo que ya vimos, antes de continuar.

La habilidad para añadir propiedades y relaciones a las imágenes, es algo que seguramente vamos a querer generalizar a otras cosas. Si yo puedo indicar la licencia del documento actual, y la licencia de las imágenes, ¿por qué no voy a poder indicar la licencia de cualquier cosa a la que quiero hacer referencia en mi página web?

Por ejemplo, digamos que tengo unos enlaces que dirigen a un par de presentaciones en SlideShare sobre RDFa:

<a href="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1">RDFa in a nutshell</a><a href="http://www.slideshare.net/mark.birbeck/the-5-minute-guide-to-rdfain-only-6-minutes-40-seconds">The 5-minute guide to RDFa...in only 6 minutes and 40 seconds</a>

Si entras a las páginas en SlideShare, podrás ver que la información sobre la licencia siempre está claramente desplegada. Pero ¿qué pasa si yo quiero añadir la información sobre la licencia en el documento actual, para que los buscadores inteligentes puedan realizar algo con ello? (La página podría ser un conjunto de resultados de búsqueda, por ejemplo, por lo que podríamos querer mostrar la licencia al usuario que realiza la búsqueda, como una manera de apoyarlo a elegir un documento).

Podríamos pensar que únicamente utilizamos @rel="license" en estas situaciones, como normalmente. Pero recuerda que esto implicaría que el documento actual tiene una licencia identificada en el elemento con el atributo @href; en este caso el “otro documento” es una página de SlideShare, no una licencia.

Por lo tanto, para hacer posible el añadir már información sobre cualquier recurso que deseamos, RDFa añade un nuevo atributo, llamado @about. Este sigue exactamente el mismo patrón que @src en los elementos img─este puede tener información @rel y @property anexo a él─pero puede ser utilizado en cualquier elemento de HTML. Aquí vemos cómo utilizar @about para ayudarnos a añadir información sobre la licencia de nuestras diapositivas. Nuestro primer enlace:

<a href="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1">RDFa in a nutshell</a>

… adquiere su licencia de esta manera utilizando el siguiente mark-up:

<a about="http://www.sllideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1" rel="license" href="http://creativecommons.org/licenses/by/2.5/">CC BY</a>.

Nótese que en cuanto a lo que le concierne al procesador RDFa, este marcado extra puede aparecer en cualquier lugar del documento─no necesita aparecer posterior al enlace de la presentación. Por supuesto, desde el punto de vista de la legibilidad humana, usualmente iría en el siguiente enlace.

La segunda presentación:

<a href="http://www.slideshare.net/mark.birbeck/the-5-minute-guide-to-rdfain-only-6-minutes-40-seconds">The 5-minute guide to RDFA...in only 6 minutes and 40 seconds</a>

…obtiene su licencia al añadir este marcado en el documento:

<a about="http://www.slideshare.net/mark.birbeck/the-5-minute-guide-to-rdfain-only-6-minutes-40-seconds" rel="license" href="http://creativecommons.org/licenses/by-sa/2.5/">CC BY SA</a>.

Nuevamente, este marcado puede aparecer en cualquier lugar.

Algo a notar es que la referencia a cada licencia es un enlace al que se le puede dar clic, por lo que desde la perspectiva del usuario, nada cambia al añadir @about a algún elemento. Sin embargo, desde la perspectiva de la metadata, cada licencia es ahora aplicada a un documento externo que contiene una presentación, en vez de ser aplicada al documento actual.

Por supuesto, en un ejemplo real, los enlaces para dar clic probablemente contienen los íconos de Creative Commons, de esta manera:

<a about="http://www.slideshare.net/mark.birbeck/the-5-minute-guide-to-rdfain-only-6-minutes-40-seconds" rel="license" href="http://creativecommons.org/licenses/by-sa/2.5/"><img src="http://i.creativecommons.org/l/by-sa/2.5/80x15.png" /></a>

Y como probablemente ya te diste cuenta, justo como utilizamos @property y @content para añadir propiedades al documento y a las imágenes, también podemos añadirlas a los recursos referenciados por @about. Por ejemplo, si queremos añadir la información del creador a la presentación, podemos hacer esto:

<a about="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1" rel="license" href="http://creativecommons.org/licenses/by/2.5/" property="dc:creator" content="Fabien Gandon"><img src="http://i.creativecommons.org/l/by/2.5/80x15.png" /></a>

Por lo tanto, recapitulando, nuestra regla sería:

Regla #8:#section4

Las propiedades y relaciones pueden ser especificadas en cualquier recurso, no solo en el documento actual y las imágenes, utilizando el atributo @about de RDFa.

Utilizando @about para definir el contexto de múltiples propiedades y relaciones#section5

Definir el número de propiedades y relaciones del documento actual, es sencillo. En HTML ordinario, simplemente localizamos los elementos meta y link en el elemento head del documento, y probablemente unas cuantas etiquetas a con @rel en el elemento body. Ahora que podemos añadir @property y @content en el elemento body, estos también pueden ser utilizados ampliamente.

Pero, ¿cuál es la técnica equivalente para definir varias propiedades al utilizar @about? Los ejemplos que hemos visto hasta ahora, solo utilizan una propiedad y una relación por cada elemento, porque ese es el límite impuesto por la estructura del mismo HTML: cada atributo en un elemento debe tener un nombre único, para que no sea posible especificar múltiples valores de propiedades y múltiples valores de relaciones en un solo elemento.

La respuesta es, no obstante, bastante directa. En RDFa, el atributo @about en un elemento, define el contexto para cualquier RDFa que aparezca en cualquier elemento hijo. Antes de ilustrar esto, recordemos nuestro último ejemplo:

<a about="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1" rel="license" href="http://creativecommons.org/licenses/by/2.5/" property="dc:creator" content="Fabien Gandon"><img src="http://i.creativecommons.org/l/by/2.5/80x15.png" /></a>

Recuerda que este marcado, en efecto nos está diciendo dos cosas. Primero, “La presentación SlideShare en la URL especificada tiene una licencia CC BY” y segundo, “La presentación SlideShare en la URL especificada fue creada por Fabien Gandon”.

Para hacer más tangible el problema que queremos resolver, imagina que ahora queremos añadir en nuestro marcado la fecha en la que la presentación fue publicada─con el factor limitante de que no tenemos permitido añadir otro atributo @property al elemento.

Aquí la solución.

La forma más sencilla de lograr esto, es comenzando por crear un elemento que contiene el contexto en el cuál queremos que todo nuestro RDFa opere, en este caso siendo la dirección de la presentación:

<div about="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1">...</div>

Ahora que tenemos esto, podemos poner todas las propiedades que queremos añadir dentro de lo anterior:

<div about="http://www.slideshare.net/fabien_gandon/rdfa-in-a-nutshell-v1">  <h1>RDFa in a Nutshell</h1>   <ul>
    <li>Author:
      <em property="dc:creator">Fabien Gandon</em></li>    <li>Created:
      <em property="dc:created" content="2007-01-01">Jan 1st, 2007</em></li>    <li>License: 
      <a rel="license" href="http://creativecommons.org/licenses/by/2.5/"><img src="http://i.creativecommons.org/l/by/2.5/80x15.png" /></a></li>    </ul>
</div>

Si este diseño te luce familiar, eso es bueno, porque es exactamente el diseño que vimos cerca del comienzo, cuando estábamos añadiendo propiedades al “documento actual”:

<html xmlns:dc="http://purl.org/dc/terms/"> 
  <head>
    <title>RDFa: Now everyone can have an API</title> 
  </head> 
  <body>
    <h1>RDFa: Now everyone can have an API</h1>
    <ul>
      <li>Author: 
        <em property="dc:creator">Mark Birbeck</em></li>
      <li>Created:
        <em property="dc:created" content="2009-05-09">May 9th, 2009</em></li>
      <li>License: 
        <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">CCAttribution-ShareAlike</a></li>
      <li>Previous version: 
        <a rel="dc:replaces" href="rdfa.0.8.html">version 0.8</a></li>
    </ul>
  </body>
</html>

La única diferencia entre este y nuestro nuevo ejemplo─la presentación sobre RDFa por Fabien─es que el contexto para todas las propiedades y relaciones que hemos añadido, está definido por @about, mientras que en el primer ejemplo, el contexto era simplemente el documento por sí mismo. Esto nos da otra regla:

Regla #9:#section6

La propiedad @about define el contexto para todas las propiedades y relaciones contenidas. Si no hay valor @about definido, entonces todas las propiedades y relaciones harán referencia al documento actual.

Si algún aspecto del último paso no te quedó claro, entonces te insisto en que lo leas una vez más; esta técnica es probablemente la diferencia más importante entre RDFa y otros métodos para embedir información estructurada en HTML, por ejemplo Microformats y eRDF.

Resumen#section7

En las primeras dos partes de esta serie, hemos visto lo básico de RDFa, que es esencial:

• Generalizar las características existentes para metadata de HTML, para que puedan ser utilizada en cualquier parte del documento (head o body) y en cualquier otro elemento;
• añadir el mecanismo de prefijo de mapeo nos permite ser muy precisos sobre el orígen de cualquier término que estamos utilizando; y
• añadir el atributo @about para que las propiedades y relaciones puedan ser especificadas para cualquier recurso, no solamente el documento actual o las imágenes que contiene.

Si te gustaría ir posterior a lo básico, y ver aspectos más avanzados de RDFa, entonces te recomiendo echarle un vistazo al Manual de RDFa en Backplane.

*Traducido al español por Juan Pablo Yamamoto#section8