RDFa, gli elementi

Questa è la traduzione dell'articolo Introduction to RDFa II di Mark Birbek, pubblicato originariamente su A List Apart il 7 Luglio 2009. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

Nella prima parte di questa serie dedicata a RDFa abbiamo visto come funzionalità semantiche normalmente confinate alla sezione head del documento possano essere usate per aggiungere ricchezza semantica agli elementi contenuti nel body del documento. Abbiamo anche definito 6 regole:

1. Gli elementi link a @rel
2. Gli attributi @rel @href a link img
3. Nel normale HTML le proprietà sono definite nella head @content meta @content
4. Sebbene HTML usi la proprietà @name meta @property
5. Se non è presente un attributo @property
6. Se è presente l'attributo @content

In questa seconda parte impareremo ad aggiungere proprietà ad un'immagine e ad aggiungere metadati a qualunque item; aggiungeremo anche alcune nuove regole alla lista che abbiamo appena visto.

Aggiungere proprietà ad un'immagine

Nella prima parte abbiamo discusso del fatto che in HTML @rel è usato per specificare una relazione tra il documento corrente e qualche altro documento. Abbiamo anche notato che RDFa generalizza questa funzione, cosicché @rel può essere usato su un elemento img; la relazione espressa è tra l'immagine (nell'attributo src) e l'altro documento. Lo stesso principio si applica quando delle proprietà sono aggiunte sul tag img: si applicheranno anche all'immagine piuttosto che al documento corrente.

Per esempio, per indicare quando un'immagine è stata creata, potremmo fare così:

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

Regola 7

Nel normale HTML possono essere definite solo proprietà che sono relative alla pagina stessa, ma RDFa consente che le proprietà siano impostate anche per gli URL delle immagini.

RDFa consente di esprimere su un'immagine sia una proprietà sia una relazione:

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

Aggiungere metadati a tutti gli elementi

Parlando in generale, abbiamo fatto tre passi in avanti seguendo l'evoluzione dall'HTML di base a RDFa:

• Abbiamo osservato che tutte le funzionalità relative ai metadati che possono essere usate nella sezione head body @name @property
• Abbiamo visto come RDFa consente che i nomi delle proprietà e delle relazioni provengano da vocabolari ben definiti, attraverso l'uso di specifici prefissi.
• Abbiamo imparato che RDFa consente la definizione di proprietà e relazioni per le immagini, così come rispetto al documento corrente.

Se non siete ben sicuri rispetto a questi passi, potete consultare la prima parte

La possibilità di aggiungere proprietà e relazioni alle immagini è qualcosa che vorremmo poter certamente estendere ad altre cose. Se io posso indicare il tipo di licenza per il documento corrente e la licenza per le immagini, perché non potrei indicare il tipo di licenza per qualsiasi altra cosa a cui faccio riferimento nella mia pagina web?

Per esempio, supponiamo di avere alcuni link che puntano ad un paio di presentazioni su SlideShare relative al linguaggio 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>

Se guardate entrambe le pagine su SlideShare, vedrete che le informazioni sulla licenza sono chiaramente visibili. Ma se volessimo aggiungere informazioni sulla licenza al documento corrente in modo che un browser intelligente possa farci qualcosa? (La pagina, ad esempio, potrebbe essere una pagina di risultati di ricerca, così potremmo mostrare le informazioni sulla licenza all'utente che ha fatto una ricerca come un modo per aiutarlo a selezionare i documenti).

Potremmo pensare che basta usare @rel="license" a @href l'altro documento

Così, per per poter aggiungere ulteriori informazioni circa una risorsa, RDFa aggiunge un nuovo attributo, chiamato @about @src img @rel @property @about

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

...conterrà informazioni sulla licenza in questo modo:

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

Notate che fin quando si ha a che fare con un processore RDFa, questo markup extra può comparire in qualunque punto del documento, non deve necessariamente apparire vicino al link che punta alla presentazione. Certo, dal punto di vista della leggibilità da parte di un essere umano, sarebbe opportuno che appaia vicino al link.

La seconda presentazione:

<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>

...conterrà informazioni sulla licenza in questo modo:

<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>.

Anche questo codice può apparire in qualunque posizione nel contesto del documento.

Notate che il riferimento ad ogni licenza è ancora un link cliccabile: dal punto di vista dell'utente non cambia nulla quando aggiungiamo @about

Certo, in un esempio reale i link cliccabili conterrebbero probabilmente le icone di Creative Commons, più o meno così:

<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>

Come forse avete capito, proprio come usiamo @property @content @about

<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>

Dunque, ricapitolando, la nostra regola sarà così:

Regola 8

Proprietà e relazioni possono essere specificate per ogni risorsa, non solo per il documento corrente e per le immagini, usando l'attributo @about di RDFa.

Fine prima parte.

Usare @about per definire il contesto di più proprietà e relazioni

Impostare un numero di proprietà e relazioni per il documento corrente è facile. Nel normale HTML ci limitiamo a inserire un certo numero di elementi meta e link nella sezione head del documento, e forse un po' di elementi a con l'attributo @rel nel corpo del documento. Ora possiamo aggiungere @property e @content nel body, anch'essi possono essere sparsi un po' dovunque.

Ma qual è la tecnica equivalente per impostare più proprietà usando @about? Gli esempi che abbiamo visto in precedenza usavano solo una proprietà e una relazione per ciascun elemento, dal momento che che quello è il limite imposto dalla struttura stessa di HTML: ogni attributo su un elemento deve avere un nome unico, così non è possibile specificare più valori per le proprietà e valori multipli per le relazioni su un singolo elemento.

La risposta è tuttavia semplice. In RDFa l'attributo @about su un elemento imposta di fatto il contesto per ciascun frammento RDFa che appare sugli elementi figli. Prima di illustrare ciò ricapitoliamo il nostro ultimo esempio:

<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>

Ricordate che questo markup ci dice in effetti due cose. Primo: "La presentazione su SlideShare all'URL specificato ha una licenza CC BY". Secondo: "La presentazione su SlideShare all'URL specificato è stata creata da Fabien Gandon".

Per rendere un po' più tangibile il problema che stiamo cercando di risolvere, immaginate che ora vogliamo anche aggiungere la data in cui la presentazione è stata pubblicata al nostro markup, con l'unica limitazione che non ci è consentito di aggiungere un altro attributo @property al link.

Ecco la soluzione.

Il modo più semplice per ottenere quanto desideriamo è iniziare a creare un elemento che contenga il contesto in cui vogliamo che operi il nostro RDFa, che in questo caso è l'indirizzo della presentazione:

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

Una volta che abbiamo questa struttura di base, possiamo inserire tutte le proprietà al suo interno:

<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>

Se questo schema vi sembra familiare è perché è esattamente lo stesso layout che abbiamo visto all'inizio, quando abbiamo aggiunto le proprietà relative al documento corrente:

<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>

L'unica differenza tra questo e il nostro nuovo esempio (la presentazione su RDFa di Fabien), è che il contesto per tutte le proprietà e le relazioni che abbiamo aggiunto è definito con @about, mentre nel primo esempio era semplicemente il documento stesso. Arriviamo così ad una regola.

Regola 9

La proprietà @about imposta il contesto per tutte le proprietà e le relazioni che contiene. Se non c'è un valore @about impostato, allora tutte le proprietà e le relazioni fanno riferimento al documento corrente.

Se un qualche aspetto di quest'ultimo passo non è chiaro, allora vi invito a rileggere il tutto con calma; questa tecnica è forse la più importante differenza tra RDFa e altri metodi per incorporare dati strutturati in HTML, come i microformati e eRDF.

Conclusioni

Nelle due parti della serie abbiamo preso in considerazione le basi di RDFa, che in essenza sono:

• generalizzare le funzionalità sui metadati di HTML in modo che possano essere usate in ogni parte del documento (head body
• aggiungere un meccanismo basato su prefissi che ci consente di essere molto precisi rispetto all'origine dei termini che stiamo usando;
• aggiungere l'attributo @about