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.

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.

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 :

• version hébergée par AnnotateIt : http://pecccadille.alwaysdata.net/BriceExtrait.html
• version hébergée par mon serveur : http://pecccadille.alwaysdata.net/BriceSaintGervais.html

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.

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  :

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 :

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:

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 :

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!

Code source commenté :

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)