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 e a implicano che esiste una relazione tra il documento corrente e altri documenti; l'attributo @rel ci consente di fornire un valore che descriverà al meglio tale relazione.
2. Gli attributi @rel e @href non sono più confinati, nel loro uso, agli elementi a e link, ma possono essere anche usati su un elemento img per definire una relazione tra l'immagine e altri item.
3. Nel normale HTML le proprietà sono definite nella head del documento, usando l'attributo @content dell'elemento meta. Nei documenti HTML con RDFa, @content può essere usato per impostare proprietà su qualsiasi elemento.
4. Sebbene HTML usi la proprietà @name per definire il nome di nome di una proprietà su un elemento meta, non può essere usato su altri elementi, così RDFa fornisce un nuovo attributo chiamato @property.
5. Se non è presente un attributo @property, allora il valore di una proprietà sarà impostato usando il testo inline di un elemento.
6. Se è presente l'attributo @content esso sovrascrive il valore del testo inline di un elemento per definire il valore della proprietà

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 possono ora essere usate nel corpo del documento (body), sebbene si debba cambiare l'attributo @name con @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 della serie.

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" su questi elementi a, come sarebbe normale. Ma ricordate che in questo modo si implica che il documento corrente ha una licenza che è identificata dall'item nell'attributo @href; in questo caso l'altro documento è una pagina su SlideShare non una licenza.

Così, per per poter aggiungere ulteriori informazioni circa una risorsa, RDFa aggiunge un nuovo attributo, chiamato @about. Segue esattamente lo stesso modello dell'attributo @src del tag img, può avere associate ad esso informazioni come @rel e @property, ma può anche essere usato su un qualunque elemento HTML. Ecco come useremo l'attributo @about per aiutarci ad aggiungere informazioni di licenza relative alle nostre slide. Il nostro primo link:

<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 ad un link. Tuttavia, dalla prospettiva dei metadati, ogni licenza è ora applicata ad un documento esterno che contiene una presentazione piuttosto che essere applicata al documento corrente.

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 e @content per aggiungere proprietà per il documento e le immagini, possiamo aggiungerle anche alle risorse cui facciamo riferimento con @about. Per esempio, se volessimo aggiungere informazioni sull'autore ad una presentazione, potremmo fare così:

<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 o body) e su ogni tipo di elemento;
• 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 in modo che proprietà e relazioni possano essere specificate per ogni risorsa, non solo per il documento corrente o le immagini che esso contiene.