Installer le client Annotator – tutoriel

note : ce billet a été publié avant que je découvre la fonction « code » dans wordpress. Toutes mes excuses pour les captures d’écran d’une piètre qualité. [NB : voir ma présentation d’Annotator, publiée depuis]

Qu’est-ce qu’Annotator?

Annotator est un outil d’annotation, développé par l’Open Knowledge Foundation. Coté client, il se présente comme une librairie javascript. Les annotations produites sont stockées en Json soit sur les serveurs du web service AnnotateIt soit sur des serveurs indépendants.
Annotator-logo
Pour mes premiers tests, j’ai décidé d’implémenter Annotator sur une page web toute simple en confiant à AnnotateIt le soin de stocker mes annotations.

Installer le client Annotator

Ma page de base

Au début, j’ai testé de suivre le tutoriel proposé sur la doc d’annotator, sans succès. J’ai donc pris le code source d’une page qui fonctionnait (la démo) et l’ai bidouillée jusqu’à bien comprendre le mécanisme.
Page_Texte_Brice
Appeler et lier la librairie d’Annotator.
La première chose à faire est d’appeler la librairie d’Annotator : il est possible d’appeler la bibliothèque hébergée sur les serveurs d’annotateIt ou de l’installer sur ses propres serveurs (il faut d’abord la télécharger, puis la placer sur le serveur).
Deux exemples :

Il vaut mieux héberger soit même la librairie afin de se prémunir d’un lien mort ou d’une panne de service.
Voici structure de mon répertoire :

La structure de mon répertoire www. Les deux fichiers HTML le test (en bas) + le dossier javascript dans lequel j'ai stocké les fichiers téléchargés : la bibliothèque annotator et sa css et la bibliothèque showdown.

La structure de mon répertoire www. Les deux fichiers HTML le test (en bas) + le dossier javascript dans lequel j’ai stocké les fichiers téléchargés : la bibliothèque annotator et sa css et la bibliothèque showdown.

Dans tous les cas, il est proposé plusieurs « packages » : soit installer tout l’outil (noyau + plugin -> fonctionnalités optionnelles), soit le noyau seulement (et d’ajouter les plugins à la main). Ici, nous allons utiliser la version complète (annotator-full.min.js).
Pour appeler la librairie annotator, il faut ajouter la ligne de code suivante à la fin de body  :
Brice_appel
Mais pour fonctionner, la librairie annotator a besoin de la librairie JQuery (1.6 ou sup) ; j’ajoute donc juste avant la ligne de code suivante :
Brice_JQuery
Il faut aussi que j’ajoute la feuille des style propre à la librairie Annotator. Cette ligne de code là doit être placée dans le header:
Brice_Header

Faire fonctionner annotator.

A ce stade, je n’ai fait qu’appeler les librairies, elles ne sont pas opérationnelles. Pour les faire fonctionner, je dois ajouter la ligne de code suivante entre l’appel des librairies et la balise fermante de body :
Brice_Script
Par cette commande, Annotator va pouvoir annoter le contenu situé dans des balises <div id= »content »> -> je les ajoute autour de mon corps de texte
Magique ça, fonctionne!
Annotator_demo
Code source commenté :
Page_Brice
Vous pouvez vous même tester ici: http://pecccadille.alwaysdata.net/BriceSaintGervais.html (mais il faut d’abord vous créer un compte sur AnnotateIt – gratuit)


Johanna Daniel

Doctorante au LARHRA (Lyon 2) et chargée d'études et de recherche à l'Institut national d'Histoire de l'Art (Paris), rattachée au Service numérique de la recherche. Historienne de l'estampe, consacrant sa thèse aux vues d'optique dans la seconde moitié du XVIIIe siècle.

Vous aimerez aussi...

1 réponse

  1. 13/05/2015

    […] Annotator est un outil simple d’utilisation et d’installation, que ce soit en tant que Bookmarklet dans le navigateur ou en tant que bibliothèque d’annotation implémentée sur un site web (voir mon tutoriel). […]

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.