Au cours du sprint numéro 5, nous avons choisi de créer un widget, composant intégrable dans une page web externe aux outils LODEX. Ceci afin de valoriser les informations présentes dans les jeux de données LODEX, pour que l’internaute bénéficie directement d’informations contextuelles affichées.

Ce widget rend les informations des jeux de données LODEX plus facilement accessibles et intelligibles à l’internaute.

Fonctionnalités

Comment ?

Ce widget permet d’afficher des informations extraites d’une instance LODEX, et liées aux éléments survolés par la souris dans une page web où il a été intégré (voir l’animation ci-dessous).

Le widget utilisé dans une documentation

En pratique, derrière chaque item, le widget ajoute un petit logo LODEX derrière l’information à développer et, au survol de la souris, affiche les informations associées, présentes dans une instance de LODEX. Dans l’animation ci-dessus, ce sont les types d’articles (article-type) listés dont on affiche les enrichissements possibles via l’instance http://article-type.lod.istex.fr.

Le logo LODEX signale les éléments de la page pour lesquels un enrichissement est disponible. Les informations s’ouvrent dans une infobulle, qu’on a la possibilité de fermer via un bouton. Par défaut, l’infobulle disparaît dès qu’on ne survole plus l’information à développer. Il est toutefois possible de préciser que l’infobulle ne doit pas disparaître, ce qui laisse l’opportunité de cliquer sur le lien “Source” emmenant à la page de la ressource concernée dans l’instance LODEX.

Les enrichissement affichés dans l’infobulle, comme cela a été précisé ci-dessus, sont tirés de l’instance (par exemple celles sur les papiers de recherche: http://article-type.lod.istex.fr/=/research-article/), mais d’une manière complètement configurable via une feuille de style JBJ (voir ci-dessous point 2).

On peut aussi activer/désactiver le widget par JavaScript.

D’où ça vient ?

  1. Le point de départ est l’URI d’une entité décrite dans un jeu de données LODEX (dans notre exemple, http://article-type.lod.istex.fr/=/research-article/)C’est sur sa version en JSON-LD que le widget se fonde pour extraire les informations à afficher. Dans l’exemple, il ajoute ?alt=jsonld à l’URI pour spécifier qu’il veut un format JSON-LD : http://article-type.lod.istex.fr/=/research-article/?alt=jsonld.
    [
      {
        "@id":"http://article-type.lod.istex.fr/=/research-article",
        "@context":{
          "_root":{"@id":"http://purl.org/dc/terms/isPartOf"},
          "_wid":{"@id":"http://purl.org/dc/elements/1.1/identifier"},
          "_description":{"@id":"http://purl.org/dc/terms/identifier","@language":null},
          "c3":{"@id":"http://purl.org/dc/terms/title","@language":null},
          "c4":{"@id":"http://www.w3.org/2008/05/skos-xl#prefLabel","@language":"fr"},
          "c5":{"@id":"http://www.w3.org/2008/05/skos-xl#prefLabel","@language":"en"},
          "c6":{"@id":"http://www.w3.org/2004/02/skos/core#definition","@language":"fr"},
          "c7":{"@id":"http://www.w3.org/2004/02/skos/core#definition","@language":"en"},
          "c8":{"@id":"http://www.w3.org/2004/02/skos/core#note","@language":null},
          "c9":{"@id":"http://www.w3.org/2004/02/skos/core#scopeNote","@language":null},
          "c10":{"@id":"http://www.w3.org/2004/02/skos/core#example","@language":null},
          "c11":{"@id":"http://purl.org/dc/terms/created","@language":null},
          "c12":{"@id":"http://purl.org/dc/terms/modified","@language":null}
        },
        "_root":"http://article-type.lod.istex.fr/",
        "_wid":"research-article",
        "_description":"research-article",
        "c3":"research-article",
        "c4":"papier de recherche",
        "c5":"research article",
        "c6":"Il s'agit d'une source primaire. L'article rapporte les résultats de travaux de recherche originaux. Un article de recherche est composé d'un titre, résumé, introduction, méhodologie, résultats, discussion and références.",
        "c7":"Primary source. Article reporting on primary research (The related value "review-article" describes a literature review, research summary, or state-of-the-art article). Source : DTD NLM 3.0 (<a href=\"http://dtd.nlm.nih.gov/archiving/tag-library/3.0/index.html?attr=article-type\">http://dtd.nlm.nih.gov/archiving/tag-library/3.0/index.html?attr=article-type</a>)",
        "c8":"Le type 'research-article' regroupe différents intitulés qui varient selon l'éditeur, la discipline, voire la revue. ",
        "c9":"Cette catégorisation émane du type d'article original fourni par l'éditeur. Attention, rien ne vaut la lecture d'un article pour en mesurer le contenu et la qualité ! ",
        "c10":"original paper, research, categtxt,",
        "c11":"26/06/2016",
        "c12":"2016-05-30T13:07:16.899Z"
      }
    ]
    
  2. Il applique à ces données une feuille de style JBJ (Json By Json), qui transforme ce JSON (car JSON-LD est un JSON particulier) en une chaîne de caractères contenant le HTML à afficher.
    Cette feuille de style peut d’ailleurs aussi sélectionner les champs à afficher, les retraiter, en fonction des besoins.
    Pour plus d’information sur JBJ, voir ce tutoriel JBJ.Widget: Transformation du JSON-LD en HTML via JBJ

Procédure d’installation

Le widget ainsi que son mode d’emploi en anglais sont disponibles sur GitHub: https://github.com/inist-cnrs/lodex-widget.

La première étape à franchir est de télécharger le script Javascript, et de l’inclure dans la page web à enrichir:

Balise d'inclusion du script du widget de lodex

 

La deuxième étape consiste à s’assurer que les informations à enrichir sont incluses dans des balises HTML avec un attribut “about” contenant l’URI de la ressource à utiliser:

HTML d'utilisation du widget, avec l'attribut about

 

De même, on doit être capable de pointer sur les éléments à enrichir via un sélecteur CSS. Dans l’exemple ci-dessus, ce serait “#types .type“.

Puis, on peut ajouter une balise de script Javascript à la fin de la page (pour être certain que toutes les informations nécessaires sont déjà chargées dans le navigateur), qui crée le widget, le configure, et l’applique dans la page.

Configuration du widget

C’est dans le premier paramètre du constructeur LodexWidget que l’on fournit le sélecteur CSS qui récupérera tous les éléments à enrichir. Le second paramètre est un objet Javascript contenant les options à utiliser. Elles sont toutes optionnelles.

  • persistent: spécifie si l’infobulle persiste quand la souris ne survole plus l’objet à expliquer.
  • jbjStylesheet: feuille de style JBJ qui prend en entrée l’objet JSON-LD correspondant à l’URI de l’attribut about d’une ressource (en ajoutant ?alt=jsonld à l’URI, par exemple http://article-type.lod.istex.fr/=/research-article/?alt=jsonld), et qui permet de générer le HTML présenté à l’utilisateur.

Intérêt

Le web sémantique recouvre souvent des concepts abstraits. Ce widget permet un apport concret à un site web, par exemple dans une documentation. On pourrait même ajouter la descriptions des facettes dans le démonstrateur ISTEX, à leur survol.

Ce MVP a pour but de fonctionner au moins sur une instance LODEX, mais il pourrait aussi fonctionner sur des ressources en lignes exprimées en JSON-LD, dans le format compris par getJsonLdField de JBJ-RDFa.

À terme, en faisant évoluer JBJ, on pourrait exploiter n’importe quelle ressource fournie en JSON-LD (en mode expandedcompactedflattened, ou framed), voir en triplets N-Quads, …