Glossaire_auto NPM

Glossaire eau, milieu marin et biodiversité

npm.io

Cliquez ici pour voir la démonstration

Le Glossaire eau, milieu marin et biodiversité diffuse, en libre accès, les définitions de plus de 2000 termes sur l'eau, le milieu marin et la biodiversité, en français, anglais et espagnol, pour faciliter la compréhension de ces termes par le plus grand nombre.

Il est :

consultable en ligne et téléchargeable sous différents formats (HTML, PDF, ASCII, JSON, RDF-XML, OWL) ;
collaboratif car tout internaute peut soumettre une demande de modification ou d’ajout de termes ;
partagé car son contenu est mis à disposition de tous, et paramétré pour pouvoir alimenter automatiquement d’autres sites web ;
construit selon les standards du web sémantique (RDF, SKOS, SPARQL, …) permettant ainsi de diffuser des informations structurées et optimisées pour des utilisations plus efficaces et des réutilisations automatisées par des moteurs de recherche et des sites Internet ;
lié à d’autres bases de connaissances (telles que le thésaurus eau & biodiversité, le thésaurus GEMET, …) afin de réaliser des agrégations de contenus provenant de différentes sources.
réutilisable sur le web via l'intégration du script Glosssaire eau, milieu marin et biodiversité

npm.io

Comment ça marche

Vous souhaitez intégrer le Glossaire eau, milieu marin et biodiversité dans votre site web ? Rien de plus simple !

Copiez le code suivant et insérez le dans le header ou footer de votre site web :

<script type="text/javascript" id="_geaujs" data-target="" data-exclude="" src="https://cdn.jsdelivr.net/npm/glossaire_auto/dist/glossaire_eau.js"></script>

Par défaut, le traitement des mots et l'affichage des définitions s'effectuera sur la totalité de la page web.

Pour cibler une ou plusieurs parties de la page, vous pouvez remplir l'attribut data-target présent dans le code à intégrer. De la même façon, vous pouvez exclure des parties de la page où vous ne voulez pas voir apparaître de définitions, en remplissant l'attribut data-exclude.

Les paramètres à passer dans ces deux attributs sont des sélecteurs CSS. Plusieurs valeurs sont possibles en les séparant par des barres verticales.

Exemple

Prenons en exemple le HTML suivant :

<div class='main-content'>
  Le SAGE (Schéma d'aménagement et de gestion des eaux), outil de planification locale...
  <div class='buttons'><a href="#">Modifier</a> / <a href="#">Supprimer</a></div>
</div>

Si nous voulons cibler le contenu principal mais exclure les boutons/menus présents dans la page, il faudra que data-target contienne .main-content et que data-exclude contienne .buttons :

<script type="text/javascript" id="_geaujs" data-target=".main-content" data-exclude=".boutons" src="https://cdn.jsdelivr.net/npm/glossaire_auto/dist/glossaire_eau.js"></script>

Vous pouvez cibler/exclure plusieurs parties de la page en séparant les valeurs par des barres verticales, par exemple :

<script type="text/javascript" id="_geaujs" data-target=".main-content|#front" data-exclude=".boutons|.menu .entry" src="https://cdn.jsdelivr.net/npm/glossaire_auto/dist/glossaire_eau.js"></script>

Vous pouvez également exclure des mots grâce à l'attribut data-blacklist et en les séparant par des barres verticales :

<script type="text/javascript" id="_geaujs" data-target=".main-content|#front" data-blacklist="port|laisse|pression" src="https://cdn.jsdelivr.net/npm/glossaire_auto/dist/glossaire_eau.js"></script>

Procédure compilation (build)

Le plugin peut être compilé grâce à deux outils : Browserify et UglifyJS (package uglify-es), tous deux fonctionnant grâce à NPM. Si vous ne l'avez pas déjà fait, il va donc falloir installer ce dernier, vous trouverez les instructions sur cette page : https://www.npmjs.com/get-npm

Une fois NPM installé, vous pouvez installer Browserify et UglifyJS grâce aux commandes suivantes :

npm install browserify -g 
npm install uglify-es -g

Tout est prêt pour pouvoir compiler le plugin. Placez vous dans le répertoire du plugin et exécutez la commande suivante :

browserify src/glossaire.js | uglifyjs > dist/glossaire_eau.js

Cette commande permet de compiler tout le projet dans un seul fichier Javascript (glossaire_eau.js), qui est appelé par le navigateur client pour afficher les définitions.