Librairie à Lyon
(Auteur: Frachet, Source : Wikimédia )
La librairie Javascript rdf-lib.js permet d’exploiter des marquers RDFa introduits dans des pages. Dans cet article, nous allons présenter comment l’utiliser.
rdf-lib.js permet de retrouver tous les attributs rdfa présents dans une page web.
Exemples basé sur une page HTML simple (disons person.html)
<!DOCTYPE html> <html prefix="dc: http://purl.org/dc/terms/ schema: http://schema.org/"> <head> <meta charset="UTF-8" /> <link property="profile" href="http://www.w3.org/1999/xhtml/vocab" /> <title>Nxhoaf's Home Page</title> <base href="http://example.org/nxhoaf/" /> <meta property="dc:creator" content="Hoa Nguyen" /> <link rel="foaf:primaryTopic" href="#me" /> </head> <body about="http://example.org/nxhoaf/#me" prefix="foaf: http://xmlns.com/foaf/0.1/"> <h1>Nxhoaf's Home Page</h1> <p>My name is <span property="foaf:nick">nxhoaf</span> and I like <a href="http://www.amazon.com/" property="foaf:interest" lang="en">Amazon</a>. </p> <p> My <span property="foaf:interest" resource="urn:ISBN:978-0321356680"> favorite <br> <span resource="urn:ISBN:978-0321356680"> book is the inspiring <br> <cite property="dc:title">Effective Java</cite> by <span property="dc:creator">Joshua Bloch</span> </span> </span> </p> </body> </html>
En premier lieu, rdf-lib.js dépend de la librairie jQuery, aussi nous devons inclure jQuery par exemple avec ces lignes:
<head> <meta charset="UTF-8" /> <title>Nxhoaf's Home Page</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="./rdf-lib.js"></script> </head>
Maintenant, nous avons intégré jQuery, nous pouvons l’utiliser pour attendre l’évènement « ready ». Lorsque la page est prête, nous pouvons réaliser les actions suivantes:
-
Retrouver les préfixes rdfa utilisés dans la page.
-
Retrouver les attributs rdfa.
-
Obtenir les triplets associés à un élément HTML cliqué.
Pour cela, nous créons a nouvel objet rdf:
var rdfLib = new RdfLib();
Retrouver les préfixes rdfa
Tous les préfixes rdfa peuvent être retrouvés avec l’appel:
var prefixes = rdfLib.getAllPrefixes(html);
Le résultat est la table prefeixes contenant tous les préfixes rdfa contenus dans la page. Dans notre exemple, nous aurons:
prefixes[dc] = "http://purl.org/dc/terms/"; prefixes[schema] = "http://schema.org/"; prefixes[foaf] = "http://xmlns.com/foaf/0.1/";
Pour boucler sur tous les préfixes, nous pouvons utiliser le code suivant:
for (var prefix in prefixes) {
console.log(prefix + ": " + prefixes[prefix]);
}
Retrouver les attributs rdfa
Maintenant, nous pouvons obtenir tous les attributs rdfa contenus dans la page avec le code suivant:
var triples = rdfLib.getAllTriples(html);
triples est une table de triplets. Chaque triplet est une structure composée de trois champs:
triple.subject triple.predicate triple.object
dans lequel chacun des champs {subject, predicate, object} associe deux valeurs {key, value} où key est le nom associé à une valeur représentés par value:
subject.key subject.value predicate.key predicate.value object.key object.value
Ici, nous avons un exemple d’une façon de parcourir la structure rdfa pour afficher tous les triplets. Supposez que dans notre page, nous avons un élément ‘div’ avec l’id « log »:
html = document.getElementsByTagName("html")[0];
var triples = rdfLib.getAllTriples(html);
output += "<b>All attributes: </b><br>";
for (var i = 0; i < triples.length; i++) {
triple = triples[i];
if (triple.subject != null) {
output += "subject: " + triple.subject.key + ":" + triple.subject.value;
output += "<br>";
}
if (triple.predicate != null) {
output += "predicate: " + triple.predicate.key + ":" + triple.predicate.value;
output += "<br>";
} else {
output += "predicate: null";
output += "<br>";
}
if (triple.object != null) {
output += "object: " + triple.object.key + ":" + triple.object.value;
output += "<br>";
}
output += "------------------------------<br>";
}
var log = document.createElement("div");
log.id = "log";
$('body').append(log);
$("#log").html(output);
Ci-dessous figure un extrait du résultat obtenu sur notre exemple example html:
subject: about:http://localhost:8888/OwlProject/rdfa/person.html predicate: property:profile object: href:http://www.w3.org/1999/xhtml/vocab ------------------------------ subject: about:http://localhost:8888/OwlProject/rdfa/person.html predicate: property:dc:creator object: content:Hoa Nguyen ------------------------------ subject: about:http://localhost:8888/OwlProject/rdfa/person.html predicate: rel:foaf:primaryTopic object: undefined:#me ------------------------------ subject: about:http://example.org/nxhoaf/#me predicate: property:foaf:nick object: literal:nxhoaf ------------------------------ subject: about:http://example.org/nxhoaf/#me predicate: property:foaf:interest object: href:http://www.amazon.com/ ------------------------------
Obtenir les triplets associés à un élément HTML cliqué
La librairie rdfalib fournit un moyen d’obtenir les triplets rdfa associés à un élément HTML cliqué. Nous avons deux possibilités:
-
L’élément cliqué n’a pas de sujet explicite; par exemple <span property= »dc:creator »>Joshua Bloch</span>
-
L’élément cliqué a un sujet; par exemple <span resource= »urn:ISBN:978-0321356680″>
Dans les deux cas, nous essayons d’obtenir un triplet dans la zone cliquée:
var triple = rdfLib.getTriple(event.target);
Si la zone cliquée ne contient aucun triplet, rien ne se passe:
if (triple == null ||
((triple.predicate == null) && (triple.subject == null))) {
return;
}
Sinon, nous poursuivons…
* si l’élément cliqué n’a pas de sujet explicite:
Dans ce cas, nous obtenons le sujet de la façon suivante:
var subjectTriple = rdfLib.getSubjectTriple(event.target); triple.subject = subjectTriple.subject;
rdfLib.getSubjectTriple() est une fonction récursive, qui parcours l’arbre DOM de bas en haut pou retrouver un sujet. Si elle remonte jusqu’à la racine de l’arbre sans trouver de sujet, c’est l’url de la page courante qui constitue le sujet par défaut.
C’est ce qui fait que certains triplets de notre exemple ont le sujet suivant:
subject: about:http://shadok.enst.fr/ilot/OwlProject/rdfa/person.html
Une fois obtenu le sujet, nous afficons le triplet. Le code pour afficher le résultat est le même que précédemment.
Consider an example, when you click on <span property= »dc:creator »>Joshua Bloch</span>, rdfLib.getSubjectTriple() will go up and then find out that <span resource= »urn:ISBN:978-0321356680″> is the subject of the current triple:
<span resource="urn:ISBN:978-0321356680"> book is the inspiring <br> <cite property="dc:title">Effective Java</cite> by <span property="dc:creator">Joshua Bloch</span> </span>
As a result, we have:
subject: resource:urn:ISBN:978-0321356681 predicate: property:dc:creator object: literal:Joshua Bloch
* si l’élément cliqué a un sujet
Lorsque l’élément cliqué a un sujet, il est la base d’un triplet.
Nous parcourons alors l’arbre DOM vers le bas pour trouver tous les fils de cet élément qui permettent de compléter des triplets.
en utilisant l’appel
rdfLib.getAllTriples(event.target);
Supposez que nous cliquons sur l’élément <span resource= »urn:ISBN:978-0321356680″>, l’affichage des triplets pourra être obtenu ainsi:
var triples = RdfLib.getAllTriples(event.target);
for (var i = 0; i < triples.length; i++) {
triple = triples[i];
if (triple.subject != null) {
output += "subject: " + triple.subject.key + ":" + triple.subject.value;
output += "<br>";
}
if (triple.predicate != null) {
output += "predicate: " + triple.predicate.key + ":" +
triple.predicate.value;
output += "<br>";
}
if (triple.object != null) {
output += "object: " + triple.object.key + ":" + triple.object.value;
output += "<br>";
}
output += "------------------------------<br>";
}
alors le résultat sera:
----------------------- subject: resource:urn:ISBN:978-0321356681 predicate: property:dc:title object: literal:Effective Java ------------------------------ subject: resource:urn:ISBN:978-0321356681 predicate: property:dc:creator object: literal:Joshua Bloch ------------------------------
Noter que lorsque utilisé sur la racine de l’arbre DOM, l’appel RdfLib.getAllTriples(event.target) listera tous les triplets définis dans la page.
Ignorer certains triplets
La spécification RDFa prime specification indique que lorsque nous avons un élément contenant les attributs ‘rel’ et ‘href’ simultanément,
le contenu de l’attribut ‘rel’ doit être considéré comme prédicat (predicate) et l’attribut ‘href’ doit être considéré comme object.
Malheureusement, il y a des execptions. Pae exemple, la déclaration d’un css externe répond à ces règles:
<link rel="stylesheet" type="text/css" href="http://link/to/file.css">
Evidemment, cela n’est pas ce que nous voulons. La librairie fournit une manière d’éviter ces résultats inappropriés.
Tout ce dont nous avons besoin est de déclarer une table contenant les éléments que nous souhaitons ignorer:
var ignoreArray = [ "stylesheet", "an element with space", "other-element", "yetAnotherElement", ];
où « stylesheet », « an element with space » sont les valeurs de prédicat qui doivent être ignorés. Nous passons la table ignoreArray à la fonction addToIgnoreArray
rdfLib.addToIgnoreArray(ignoreArray);
Cette fonction doit être appelée avant d’utiliser d’autres fonctions de la librairie.
Voir person.html pour plus de détails sur l’exemple.
(Source d’image : http://commons.wikimedia.org/wiki/File:Lyon_librairie_083.JPG )
