Démo de l’utilisation de RDFa & SPARQL pour enrichir une page HTML

Démo de l’utilisation de RDFa & SPARQL pour enrichir une page HTML

J’ai mis en ligne une page de démo (assez cool je crois :-)  ) pour illustrer l’utilisation des données ouvertes pour enrichir une page web ou une notice documentaire. Elle démontre :

  • Quelques cas d’usage simple des données du web pour enrichir la navigation : montrer des définitions contextuelles, les traductions d’un mot, et générer une partie du contenu de la page automatiquement à partir du linked data; on pourrait en imaginer plein d’autres.
  • Ensuite montrer que cela ne nécessite pas de traitement côté serveur : tout est dans la page web. Du RDFa, du SPARQL, du rdfquery, un peu de JSON, du JQuery et tout roule;

(Got avait fait quelque chose de similaire il y a quelque temps sous la forme d’un module Drupal, ca s’appelait la « knowledge box« ; mais la box est cassée et ne fonctionne plus).

On notera que les données de cette page de démo viennent du DBPedia francophone. Il faudrait encore enrichir cet exemple pour montrer une utilisation des données de plusieurs sources de données différentes à la fois… ce sera pour un autre dimanche ! Allez faire un tour sur la démo et dites-moi ici si vous avez des questions/commentaires, voire des idées ou projets similaires !

Next Post:
Previous Post:
There are 21 comments for this article
    • Thomas Francart Author at 12 h 34 min

      rdfquery date un peu, oui . En fait son utilisation n’était pas _absolument_ obligatoire, mais l’idée était la suivante : à partir de simples annotations RDFa dans le contenu, comme ça:

      j'ai déménagé à <span rel="dc:subject" resource="http://fr.dbpedia.org/resource/Tours">Tours</span> et (...)

      comment enrichir la navigation avec un bout de script ? L’annotation est standard et du coup est interprétable par les parsers RDFa, voir ce que donne par exemple sindice : http://inspector.sindice.com/inspect?url=http%3A%2F%2Fsparna.fr%2Flinked-data-demo.html#GRAPH
      Du coup, un petit coup de parsing avec rdfquery (qui sert essentiellement à ça dans l’exemple), et on est capable de faire quelque chose avec ces annotations, en l’occurrence d’ajouter un handler « onClick » sur la partie de texte balisée, qui déclenche l’appel SPARQL à DBpedia.
      Pour élaborer un peu là-dessus, un truc que j’aurais bien voulu faire plutôt que d’interroger en SPARQL aurait été de déréférencer l’URI et de traiter le RDF localement, mais ça pose des problèmes de sécurité. Je ne sais pas s’il est possible d’accéder au RDF de l’URI d’une balise depuis le navigateur; Pourtant l’interrogation SPARQL marche, elle… Parce que en fait ici ça oblige à coder l’adresse du endpoint SPARQL en dur, ce qui ne serait pas nécessaire si on accédait simplement à l’URI.

  1. Lise at 10 h 23 min

    Excellent ! c’est apparemment un moyen simple pour rendre des contenus interactifs ! Avec peu de connaissances techniques, j’ai quelques questions… en effet, je peux imaginer d’après ton exemple un enrichissement des pages de description de mes ressources documentaires (par exemple, afficher des informations sur l’auteur d’un article scientifique telles que sa profession, son unité de recherche, etc.). La difficulté pour une base documentaire spécialisée, c’est que Wikipedia est trop générique, je n’y trouverais pas ces infos. Mais je pourrais imaginer m’appuyer déjà sur un/plusieurs thésaurus publié en SKOS pour afficher par exemple la définition d’un concept exprimé dans le texte ou ses concepts associés. Quelles techniques ou méthodes pourraient être réutilisées de ton exemple pour interroger une autre source de données ? Faut-il qu’il existe forcément un endpoint public pour que j’utilise une autre source en ligne ?
    Merci d’avance pour les quelques éclaircissements que tu pourras m’apporter. Je reste attentive pour la prochaine étape, « une utilisation des données de plusieurs sources de données différentes à la fois »…

  2. Vincent Brouté at 16 h 08 min

    En effet, en regardant le code de plus près, rdfquery n’est pas absolument obligatoire, la vraie intelligence se situe surtout au niveau de l’interrogation d’un endpoint SPARQL en asynchrone via jQuery puis de la mise en forme & affichage des données récupérées.
    C’est très intéressant, par contre je ne pense pas que DBPedia tienne la charge si des sites à fort trafic mettent en place ce genre de techniques !

  3. Thomas Francart Author at 16 h 53 min

    @Lise : Merci pour ton commentaire :-) en fait oui, il faut forcément qu’il y ait un endpoint public avec les données qu’on veut interroger. Il y a une limitation de sécurité dans les navigateur qui interdit d’accéder depuis un script d’une page aux données d’une autre page qui est sur un autre serveur : en clair, dans une page web, impossible d’accéder aux données d’une URI directement en la déréférençant – en tous cas je n’ai pas trouvé comment, et si quelqu’un a une solution, je prends. En passant par un endpoint SPARQL c’est légèrement différent parce que les endpoints peuvent retourner un format de résultat un peu particulier : JSONP qui outrepasse cette limitation. Et encore je pense qu’il faut que le endpoint soit suffisamment gentil pour implémenter cela, ce qui n’est pas évident; une chance que DBpedia et fr.DBpedia le fasse.

    @Vincent : disons que si on n’utilisait pas rdfquery, on serait obligé de tagguer le morceau de texte avec l’URI d’une autre façon qu’en RDFa, ce qui serait quand même dommage, même si visuellement on arriverait au même résultat. Là l’idée était d’avoir à la fois un texte annoté avec des URIs, et un exemple qui en fait quelque chose. Si le contenu venait d’une autre source qu’on ne maitrise pas mais dont on sait qu’elle utilise du RDFa pour annoter son texte, on pourrait le présenter avec cette même technique d’ « infobox ». Donc rdfquery a quand même un sens.
    Et DBpedia francophone tourne quand même autour du million de requête/jour je crois, le hardware derrière n’est pas dégueu…

    • Thomas Francart Author at 9 h 06 min

      @Jean : Merci, l’encouragement a d’autant plus de poids quand on sait ton mordant pour tout ce qui comporte les mots « web » et « sémantique » côte à côte ! je ne me prive pourtant pas de parler geek, mais c’est pour mieux démontrer la faisabilité des choses.
      Mais oui, il faut continuer et pousser encore plus vers les vrais cas d’usage : notice documentaire intelligente, article de news enrichi, annonce d’offre d’emploi contextualisée, article scientifique expliqué… Je vais plancher sur une v2 de ce démonstrateur dans ce sens.

  4. Pierre Couchet at 18 h 24 min

    Bravo ! Cette démo m’a grandement intéressé :-)
    Je l’ai fait fonctionner avec succès sur un serveur local.
    Je rencontre des difficultés dès qu’un terme à chercher comporte un accent. Un exemple de code non compris ici :
    Henri_Poincaré

    J’ai bien vérifié l’encodage UTF-8 du fichier…

    • Thomas Francart Author at 10 h 36 min

      Salut Pierre – Chouette, merci.
      Effectivement aucun souci pour faire fonctionner la démo ailleurs puisqu’il n’y a besoin que de copier la page HTML.
      J’ai compris l’origine de ton problème sur les URIs qui ont des caractères accentués : avant d’envoyer la requête SPARQL, on l’encode à cette ligne avec la méthode escape :

      var queryURL = ENDPOINT + « ? » + « query= »+ escape(SPARQL) + « &format=json »;

      du coup, une URI « http://fr.dbpedia.org/resource/Henri_Poincaré » devient dans la requếte « http://fr.dbpedia.org/resource/Henri_Poincar%E9″ et DBpedia ne trouve rien correspondant à cet identifiant et la requête ne ramène plus rien.

      Je vais voir s’il y a une solution à ça, il faut peut-être envoyer la requête en mode « POST » plutôt qu’en GET. Si quelqu’un fort en JQuery a une idée, je prends !

    • Thomas Francart Author at 20 h 08 min

      Salut Stéphane, si tu as un lien vers un article de SHS qui s’y prêterait, ou si tu m’indiques ou j’ai de bonnes chances d’en trouver un bien, je peux essayer de monter quelque chose de similaire avec Isidore. Et n’hésite pas si tu as quelques guidelines (infos à afficher dans l’infobox, etc.)

  5. wofty at 22 h 59 min

    Bonjour, cela fait un moment que je cherche à faire la même chose mais avec wikipédia. Du coup cela me donne envie d’essayer avec DBpedia et le code source de la page de demo. J’aimerai faire une page avec un fenêtre de recherche et afficher le résultat dans la même page. Exactement ce que fait la demo. Mais également, que la recherche puisse se faire dans l’URL. Exemple : http://www.monsite/recherche/carotte
    Ici la recherche est « carotte ».
    J’avais un peu gratté avec l’API de Wikipédia et cela a donné ça :
    http://fr.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro=extlinks&titles=carotte
    Le but finale étant que par le biais de cette page incluant un flux RSS, je puisse lancer via mon robot une recherche en reconnaissance vocale et avoir une réponse en Text To Speech.
    Un petit coup de pouce serait le bien venu.
    Merci beaucoup

  6. wofty at 17 h 15 min

    Bonjour,
    plus simplement, comment intégrer un champ de recherche dans le code de la page de demo au lieu de cliquer sur un mot.
    Cela m’aiderai beaucoup. Merci

    • Thomas Francart Author at 9 h 57 min

      Bonjour

      Pour ça il faut que ton champ de recherche appelle le service de DBPedia lookup : https://github.com/dbpedia/lookup. Celui-ci peut être appelé en JSON en passant une entête Accept. Le service va te retourner les libellés, résumé et URI des entrées correspondantes dans DBPedia. Ensuite à partir de l’URI tu peux te brancher sur le code de la démo, comme si on avait cliqué sur une partie de texte annotée par l’URI.

  7. wofty at 22 h 12 min

    Bonjour,
    bon c’est pas trop que j’aime que l’on me mâche le boulot, mais là je galère un peu. J’ai donc téléchargé les fichiers mais je ne sais pas comment les utiliser. (Pas assez de pratique et de connaissances). Ce serait possible d’avoir quelques lignes de code ou un site qui utilise ce procédé. Je donne ma langue au chat sur ce coup là.
    Merci

    • Thomas Francart Author at 10 h 56 min

      @Stéphane, @Wofty : je note votre intérêt pour une page de démo d’un champ autocomplété par DBpedia. Je pense que ça trouvera sa place dans labs.sparna.fr, mais je n’ai pas de bande passante en ce moment pour ça et un autre projet en gestation. En 2 mots il s’agit d’utiliser JQuery avec CORS (« Cross Origin Resource Sharing ») pour appeler le service de Lookup de DBpedia. Il n’y a rien à installer ni à télécharger pour appeler ce service. On trouve un module d’autocomplete Drupal qui interroge ce service, ça peut donner une idée, même si c’est en PHP et pas en Javascript.

  8. Pingback: SKOS Play! générer des HTML, des PDF et des dataviz à partir d’un thesaurus SKOS | Thomas Francart

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>