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é de l’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 les télécharger, puis les 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 « package » : soit d’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)

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=""> <strike> <strong>