De Yawas à MemoNote-Yawas

Notre premier travail développement de MemoNote-Yawas est basé sur le prototype de l’outil d’annotation Yawas, que nous avons étendu avec de nouvelles fonctionnalités que nous présentons ci-dessous.

8.1.4.1 Les nouvelles fonctionnalités de MemoNote-Yawas

L’annotation sémantique

La première fonctionnalité que nous avons ajoutée est l’annotation sémantique. En effet, l’annotation dans Yawas est structurée mais pas sémantique, vu que les propriétés ne prennent pas leurs valeurs dans un domaine de connaissance. Nous avons ainsi transformé l’objet d’annotation structurée de Yawas en un objet d’annotation structurée et «sémantique ».

Pour cela, nous avons d’abord remplacé la structure de l’objet d’annotation de Yawas par le modèle conceptuel que nous proposons (voir chapitre 1), nous avons ensuite restreint les valeurs prises par chaque propriété de l’annotation dans un domaine particulier, où chacun de ces domaines est représenté par une ontologie (voir la figure suivante). Notons que le modèle de l’annotation implanté était une version antérieure du dernier modèle présenté dans ce document.

Figure 47. L'annotation sémantique dans Yawas

Le processus d’annotation dans MemoNote-Yawas est le même que celui de Yawas, mais avec une étape en plus. Nous présentons ci-dessous ce nouveau processus.

1. l’utilisateur sélectionne un texte dans le document,

2. il utilise le menu contextuel pour activer la fonction d’annoter,

3. cette fonction ouvre une fenêtre pop-up qui contient un formulaire, où ce formulaire représente la structure de l’objet annotation,

4. lorsque l’utilisateur sélectionne une propriété pour spécifier sa valeur, une fenêtre pop-up s’ouvre contenant l’ontologie du domaine de valeurs de cette propriété (voir la figure suivante).

Figure 48. Ontologie du domaine de valeurs de la propriété sélectionnée.

Le problème de la communication entre les différentes fenêtres

Comme nous l’avons expliqué dans la description du processus d’annotation (voir ci-dessus) lorsque l’annotateur sélectionne un texte pour l’annoter, MemoNote ouvre une fenêtre de l’annotation (fenêtre 1) qui elle-même ouvre la fenêtre de l’ontologie (fenêtre 2). Mais vu que les fonctions JavaScript (voir la Figure 49) ne peuvent pas communiquer entre-elles, il se pose alors le problème de transférer la valeur sélectionnée dans l’ontologie à la fenêtre de l’annotation.

Figure 49. Code JavaScript pour ouvrir une nouvelle fenêtre

Pour résoudre ce problème, nous avons utilisé une propriété de l’interface DOM appelée Window.Opener qui permet de renvoyer une référence vers la fenêtre qui a ouvert la fenêtre courante. Grâce à ce code, nous pouvons non seulement avoir la référence de la fenêtre du formulaire mais nous pouvons accéder directement à la valeur du champ de la propriété et le

modifier, même s’il concerne une fenêtre extérieure. Cela est rendu possible grâce à l’accès à la représentation DOM de la fenêtre du formulaire par la fenêtre de l’ontologie (voir Figure 50).

Figure 50. Accès par la fenêtre ontologie à un champ d’une autre fenêtre

Les nouvelles formes d’annotations

Yawas n’offre qu’une seule forme d’annotation (un surlignage jaune). Ceci est insuffisant dans le cas de MemoNote, où un de nos objectifs est de permettre à l’enseignant d’exprimer différentes sémantique d’annotation en utilisant différentes formes graphiques. Il nous est important donc d’enrichir l’outil avec de nouvelles formes d’annotations.

Pour cela, nous avons ajouté les formes graphiques suivantes (voir la Figure 51).

o Insertion de forme graphique de base

o surlignage rouge bleu vert o soulignement o modification du style mise en gras mise en italique

o Insertion de forme graphique évoluée.

o Insertion de point d’interrogation

Figure 51. Les différentes formes d'annotation de MemoNote-Yawas

Pour ajouter les différentes formes de surlignage nous avons tout simplement réutilisé le script déjà existant [Denoue 2000] pour le surlignage jaune (voir la figure suivante), auquel nous avons remplacé la couleur jaune par les nouvelles couleurs.

Figure 52. Le code JavaScript pour le surlignage jaune.

Ce code représente le texte sélectionné par un objet textRange et il spécifie ensuite le type de traitement appliqué. Dans l’exemple ci-dessus le traitement est un surlignage (backcolor) de couleur jaune (Yellow).

Pour l’annotation de mise en gras, nous utilisons le même objet textRange auquel nous spécifions le traitement de mise en gras (Bold) (voir la figure suivante) ou un soulignement (underline).

Figure 53. Le code JavaScript pour mise en gras

Enfin, pour l’annotation d’insertion du point d’interrogation ou d’une autre image, nous surlignons d’abord avec une certaine couleur, nous insérons ensuite une image par la commande « insertimage » en précisant le chemin ou ce trouve l’icône à insérer.

8.1.4.2 La représentation des données dans MemoNote-Yawas

Dans la version d’origine les annotations sont stockées dans un fichier texte « Yawas_database ». Ce fichier est structuré par l’utilisation de balises spécifiques de la forme #__# (voir la figure suivante).

Figure 54. Le fichier Yawas_Database version texte.

Afin que les annotations puissent être utilisées et exploitées par différents outils, nous avons décidé de migrer le format des annotations vers le format XML. L’avantage de XML est la possibilité d’exploiter ce fichier des annotations par des parseurs DOM XML (par exemple MSXML [Microsoft 2006]). Ces parseurs représentent un fichier XML sous une forme arborescente de la même manière que le DOM HTML que nous avons vu antérieurement (voir 8.1.3). Le fichier résultant est illustré dans la figure suivante.

Figure 55. Le fichier Yawas _Database version XML

Les ontologies sont représentées dans le format XML pour les mêmes raisons précédentes (voir la figure suivante).

Figure 56. Représentation XML des ontologies dans MemoNote-Yawas

L’affichage de l’ontologie nécessite les fichiers suivants:

• un fichier XML pour les données,

• une feuille de style pour le rendu de l’affichage,

• une feuille de transformation XSLT pour construire l’arborescence à partir des données du fichier XML

• des fonctions JavaScript pour l’aspect dynamique de l’affichage de l’arborescence (afficher/cacher).

Il existe d’autres solutions plus simples, mais où les données de l’ontologie sont intégrées directement dans le code HTML ce qui pose des problèmes pour l’évolution de l’ontologie.