Rapport de stage Développement d un composant additionnel d annotation pour Internet Explorer

Transcription

1 IUT Informatique Romain PARAMELLE Université Paul Sabatier 14 avril 20 juin 2008 Toulouse Rapport de stage Développement d un composant additionnel d annotation pour Internet Explorer Encadrants : Guillaume CABANAC Max CHEVALIER Institut de Recherche en Informatique de Toulouse 118, route de Narbonne Toulouse Cedex 9

2 2

3 Remerciements Je remercie Monsieur Claude CHRISMENT, Professeur à l université Toulouse III et Monsieur Gilles ZURFLUH, Professeur à l université Toulouse I de m avoir accueilli au sein de leur équipe. Je tiens aussi à remercier très sincèrement Monsieur Guillaume CABANAC et Monsieur Max CHEVALIER pour avoir accepté de m encadrer, mais aussi pour les précieux conseils qu ils m ont apportés tout au long de mon stage et pour la disponibilité qu ils ont eue à mon égard. Je remercie aussi mes camarades de l IUT et les personnes présentent dans la salle machine où je me trouvais tous les jours. Enfin, je souhaite remercier tous les membres de l équipe SIG pour l aide et la bonne humeur qu ils ont apportées tout au long de mon stage. 3

4 4

5 Sommaire Introduction... 7 A. Contexte de travail... 8 I. L institut de Recherche en Informatique de Toulouse... 8 II. L équipe SIG... 9 B. L annotation de ressources électroniques sur le web... 9 I. Présentation et intérêt... 9 II. Problématique... 9 III. Définition des besoins et des contraintes IV. Planification prévisionnelle C. Recherche de solutions techniques et expérimentations I. Barre d outils et technologies Microsoft II. Accès au DOM III. Utilisation de la syntaxe XPOINTER IV. Communication avec des objets Java V. Solution retenue D. Analyse I. Présentation des acteurs II. Présentation des cas d utilisation III. Description des scénarios Voir annotations document Consulter contenu annotation Annoter document IV. Visualisation de la fenêtre de consultation du contenu des annotations E. Conception I. Architecture du composant II. Affinage des scénarios Affinage du scénario «Voir annotation document» Affinage du scénario «Consulter contenu annotation» Affinage du scénario «Annoter document» III. Diagramme de classes IV. Modélisation de la base de données V. Réalisation de l interface homme-machine F. Résultat I. Création d une annotation II. Restitution d une annotation III. Visualisation et modification du contenu d une annotation G. Limites et perspectives I. Annotations orphelines et trompeuses II. Gestion et recherche d annotations III. Gestion des utilisateurs H. Bilan technique et personnel Conclusion

6 6

7 Introduction Dans le cadre de ma formation à l IUT Informatique et pour terminer celle-ci, il me fallait effectuer un stage de dix semaines en milieu professionnel. Suite à une proposition de Monsieur Max CHEVALIER, j ai eu l opportunité de réaliser mon stage à l IRIT 1. Ce stage s est déroulé au sein de l équipe SIG 2 /D2S2u. Son objet était le développement d un composant additionnel d annotation pour le navigateur Internet Explorer. Ce composant est une barre d outils intégrée à Internet Explorer permettant d annoter des documents HTML. Dans une première partie, nous évoquerons le contexte de travail à l IRIT, puis nous présenterons dans une deuxième partie le projet qui nous a été confié. La troisième partie mettra en exergue les recherches effectuées pour parvenir à sa réalisation. Dans la quatrième partie nous détaillerons l analyse qui a été menée ainsi que la conception que nous retrouverons dans la cinquième partie. Nous consacrerons ensuite la sixième partie à la présentation des résultats obtenus. Enfin, les limites et perspectives de ce projet seront exposées en septième partie. Pour clôturer ce rapport, nous établirons, dans la huitième partie, un bilan technique et personnel. 1 Institut de Recherche en Informatique de Toulouse 2 Systèmes d Informations Généralisés 7

8 A. Contexte de travail I. L institut de Recherche en Informatique de Toulouse L'Institut de Recherche en Informatique de Toulouse (IRIT) est une Unité Mixte de Recherche dirigée par Luis FARIÑAS DEL CERRO, qui est commune au Centre National de la Recherche Scientifique (CNRS), à l'institut National Polytechnique de Toulouse (INPT), à l'université Paul Sabatier (UPS), à l'université des Sciences Sociales Toulouse 1 (UT1) et à l Université Toulouse le Mirail (UTM). L IRIT emploie 593 personnes regroupant des enseignants-chercheurs, des chercheurs, ITA ITAOS (personnel non chercheurs), doctorants, post-doctorants, invités et contractuels, comme le souligne la Figure 1. Figure 1 - Répartition du personnel à l'irit L institut est composé de 19 équipes de recherche organisées en sept thèmes de recherche, couvrant l ensemble des problématiques de recherche de l informatique actuelle : Analyse et la synthèse d information Indexation et recherche d informations Interaction, autonomie, dialogue et coopération Raisonnement et décision Modélisation, algorithmes et calcul haute performance Architecture, systèmes et réseaux Sûreté de développement du logiciel 8

9 II. L équipe SIG Cette équipe est rattachée au thème 2 intitulé «Indexation et recherche d informations». Elle est conjointement dirigée par Messieurs les Professeurs Claude CHRISMENT, directeur adjoint de l institut, et Gilles ZURFLUH. Elle se compose de 57 membres dont 23 permanents (maîtres de conférences et professeurs) et de 34 non-permanents (doctorants, attachés temporaire d enseignement et de recherche, étudiants en master 2 recherche et chercheurs invités). Ses recherches s articulent autour du concept de système d informations, dont les travaux se focalisent sur les modèles de représentation abstraite de collections d informations complexes, sur les modèles d interrogation de collections, ainsi que sur les modèles destinés à la manipulation et à l exploration visuelle de grandes collections. L équipe est organisée en 4 composantes qui sont intitulées : Document, données semi-structurées et usages Conception de systèmes d informations décisionnels Exploration et visualisation d information Modèles adaptifs pour la recherche d information Mon stage s est déroulé au sein de la composante Document, données semi-structurées et usages dirigée par Florence Sèdes et Chantal Soulé-Dupuy. L encadrement de mon stage a été réalisé par Guillaume CABANAC (doctorant) et par Max CHEVALIER (maître de conférences). B. Contexte : l annotation de ressources électroniques sur le Web I. Présentation et intérêt De nos jours, les annotations électroniques ou manuscrites sont utilisées quotidiennement, dans différents contextes afin de répondre à de multiples besoins. Deux types de finalité se dégagent : l annotation est utile à des fins personnelles (pour faire de la lecture critique) ainsi que dans le cadre d une utilisation collective (lorsque plusieurs lecteurs contribuent à des modifications sous forme d annotations visant à améliorer le texte annoté). Les outils d annotation de ressources électroniques sur le Web étant peu développés, les personnes sont réduites, le plus souvent, à imprimer les documents avant de les lire et de les annoter. Cela entraine une perte d efficacité notamment pour le partage des annotations qui peuvent représenter une plus-value importante pour les lecteurs (ex : code de droit annotés). II. Problématique La problématique à laquelle j ai été confronté est donc la conception et le développement d un outil d annotation de ressources électroniques sur le Web, devant être intégré dans le navigateur Internet Explorer. Cet outil d annotation sera développé sous la forme d un composant additionnel, offrant ses fonctionnalités au travers d une barre d outils. Il permettra d annoter des documents HTML. Il constitue une nouvelle brique logicielle qui servira à l élaboration de nouveaux prototypes 9

10 de recherches dans la composante D2S2u et il s inspirera du prototype TafAnnote 3 déjà existant pour le navigateur Firefox. III. Définition des besoins et des contraintes L outil d annotation que j ai dû développer devra permettre : la récupération des évènements provenant du navigateur, la définition d un point d ancrage 4 associé à du texte sélectionné. Ce dernier devra être exprimé en XPointer (XML Pointer Language). la création d une annotation à partir du point d ancrage. Dans ce stage, nous limiterons l annotation aux seuls documents au format HTML. le stockage des annotations s effectuera dans une base de données relationnelle Oracle. la restitution d annotations dans les documents visités, à partir de leur point d ancrage. la consultation et la modification du contenu d une annotation existante. Bien entendu, le développement du composant additionnel est soumis à de nombreuses contraintes qu il a été indispensable de respecter. Par exemple, la conception du composant additionnel d annotation devra être orientée objet et effectuée à l aide de la notation UML. Dans le cadre du développement du composant additionnel, l interfaçage avec le navigateur Internet Explorer devra être réalisé à l aide des technologies Microsoft prévues à cet effet. La fenêtre, permettant la consultation et la modification du contenu d une annotation, ainsi que l accès à la base de données sur laquelle les annotations seront stockées, seront développés en Java, en particulier avec la version 6 et l utilisation de l API Swing pour l interface graphique, le tout à l aide de l IDE Eclipse. En effet, l idée est, à terme, de pouvoir porter le code implanté sur n importe quel navigateur, évitant ainsi un développement spécifique pour chaque navigateur. La gestion des différentes versions de développement du composant additionnel sera faite avec CVS 5 situé sur un serveur de l IRIT, tout comme la base de données Oracle pour le stockage des annotations. IV. Planification prévisionnelle Le diagramme de Gantt ci-dessous (Figure 2), expose la planification prévisionnelle définie afin de répondre à la problématique posée. Une fois le sujet bien approprié, une phase de recherche et d expérimentation sera essentielle, afin de trouver les solutions pouvant répondre au problème 3 cf. 4 Position de l annotation dans tout ou partir du document

11 posé. Ces recherches portaient essentiellement sur les différentes technologies permettant le développement des barres d outils pour le navigateur Internet Explorer. Une fois celles-ci identifiées et comparées afin de les positionner par rapport aux contraintes liées à mon projet, il faudra effectuer une phase d analyse et de conception avant d implanter le composant additionnel à proprement parler. La rédaction du rapport de stage ainsi que la préparation de la préparation de la présentation se feront en parallèle avec la programmation. Figure 2 - Planification prévisionnelle 11

12 C. Recherche de solutions techniques et expérimentations Pour réaliser le projet qui nous a été confié, nous avons rencontré plusieurs problèmes : le premier était de trouver comment développer une barre d outils pour le navigateur Internet Explorer. Ensuite la barre d outils devait aussi offrir la possibilité d accéder au DOM 6 au travers d Internet Explorer afin de pouvoir obtenir le texte sélectionné, pour calculer le point d ancrage de l annotation, mais aussi pour replacer les annotations dans les documents. Enfin la barre d outils devait être capable de communiquer avec des objets Java, comme cela est spécifié dans les contraintes du projet. I. Barre d outils et technologies Microsoft Dans le monde Microsoft, une barre d outils est un composant COM (Component Object Model). COM peut être défini comme un composant logiciel crée par Microsoft permettant le dialogue inter-programmes. La barre d outils est un composant logiciel intégrable à l explorateur Windows (Explorer) ou au navigateur Internet Explorer, la différence étant faite au moment de l enregistrement de la barre dans la base de registre de Windows. Ainsi, la barre d outils étant un composant COM elle pourra dialoguer directement avec Internet Explorer. La barre d outils peut-être implantée au travers de plusieurs langages de programmation, permettant de développer des composants COM. Parmi ces langages, nous avons dénombré C#, C++, J# et Visual Basic. Lors des recherches effectuées, nous avons trouvé plusieurs barres d outils développées dans les différents langages cités ci-dessus. Après plusieurs expérimentations de ces barres d outils trouvées sur Internet, une seule barre, implantée en C#, fonctionnait avec la dernière version d Internet Explorer (la version 7). Nous avons donc choisi d utiliser cette barre d outils pour réaliser nos expérimentations. II. Accès au DOM Le DOM (Document Object Model) est une recommandation du W3C 7 décrivant une interface indépendante de tout langage de programmation (Java, C#, J#, JavaScript, C++, Visual Basic, etc.) et de toute plate-forme qui permet à des programmes informatiques d accéder ou de mettre à jour le contenu, la structure ou le style associés à un document (notamment ceux affichés dans un navigateur Web). L accès au DOM, indispensable pour le fonctionnement du composant additionnel d annotation, est fourni par l API d Internet Explorer qui peut être exploité par tous les langages de programmation permettant de développer la barre d outils. Ainsi, le choix de la technologie pour le développement de notre projet ne posera pas de problème majeur quant à l accès DOM. Le DOM nous permettra, dans le cadre de notre composant additionnel avec l assistance de la notation XPointer de définir le point d ancrage d une annotation. Ceci est nécessaire lors de sa création ou de son replacement dans un document. 6 Document Object Model : structure de données représentant la structure logique d un document

13 III. Utilisation de la syntaxe XPointer D après les besoins du projet, l outil d annotation doit permettre la définition d un point d ancrage, associé au texte sélectionné, exprimé en XPointer. Suite à de nombreuses recherches, nous avons constaté que l API d Internet Explorer n offrait pas de support pour la spécification XPointer. Pour remédier à ce problème, nous avons étudié la syntaxe des chaînes XPointer, permettant de définir le point d ancrage d une annotation : xpointer(string-range(/html[1]/body[1]/p[14]/u[1], "", 8, 30)) Chemin XPath Texte sélectionné Position Longueur Le chemin XPath 8 représente la position de l élément contenant le texte annoté dans la structure logique du document, par rapport à son élément racine. La position définit quand à elle la position (en nombre de caractères) du texte annoté depuis le début de l élément. La longueur représente la longueur du texte annoté (en nombre de caractères). En ce qui concerne la partie texte sélectionné, elle pourra contenir le texte sélectionné. En ne le spécifiant pas, comme dans l exemple ci-dessus, seules la position et la longueur du texte sélectionné ne devront être utilisées pour replacer l annotation par exemple, alors que dans le cas inverse on cherchera le texte dans l élément, sans tenir compte de sa position et de sa longueur. IV. Communication avec des objets Java D après les contraintes du projet, une des caractéristiques principales de la barre d outils est qu elle puisse communiquer avec du Java, afin de limiter les différences entre Internet Explorer et Firefox (pour éviter d implanter une application spécifique pour chaque navigateur). Pour ce faire, l accès à la base de données ainsi que la fenêtre permettant la consultation et la modification du contenu d une annotation, c est-à-dire le cœur de l application, seront développés en Java. Seule l enveloppe autour de cette application et permettant son intégration dans tel ou tel navigateur sera différent. Le tableau suivant présente les différentes technologies existantes (cf. détail en annexe 1), qui permettent d établir un pont entre un composant COM (ici la barre d outils) et Java

14 Méthode Description Caractéristique(s) LiveConnect (par Applet) LiveConnect Java ActiveX bridge J# Communication par sockets Appel de méthodes Java depuis JavaScript via une applet Technologie LiveConnect faisant le lien direct entre JavaScript et Java Encapsulation d un composant JavaBean dans un ActiveX 9 sous la forme d une DLL 10 Développement de la barre d outils en J# Communication entre la barre d outils et le code Java (contenu dans un jar) par sockets. - Sécurisée : Problème pour l appel des classes hors du JDK (pour accéder aux jar, la solution est soit de les placer dans jre/lib/ext, soit de créer un certificat) - Temps d exécution côté Java augmenté - Insertion de l applet dans chaque page HTML pour pouvoir y accéder - L extension de la technologie LiveConnect (existante pour Netscape et ses descendants) à tous les navigateurs est en prévision dans le développement du JRE 6 update 10 - Restrictions de sécurité identiques à celles appliquées pour la méthode LiveConnect par Applet - Possibilité de gérer les évènements sur le composant depuis Java - JavaBean encapsulé dans une DLL (ActiveX) - Appel de bibliothèques externes au JDK si elles sont placées dans le répertoire jre/lib/ext ou si elles se trouvent dans le jar du JavaBean - Exécution simultanée sur deux machines virtuelles (La JVM de Sun et celle de.net) - Prise en charge limitée au JDK de Sun et de certaines classes de la version J# gère les composants COM - Application de type client-serveur, le client et le serveur se trouvant sur la même machine - Obligation de définir un protocole de communication réseau ou bien d utiliser une architecture logicielle spécifique (ex : CORBA) Tableau 1 - Technologies permettant le dialogue COM - Java

15 V. Solution retenue Pour développer notre barre d outils permettant d annoter des documents au format HTML, nous avons décidé de reprendre une barre d outils déjà existante et de la modifier afin d y implanter notre code, dans le but de gagner du temps et de nous focaliser sur le reste du composant additionnel. Notre choix s est porté sur la barre d outils développée en C# trouvée sur Internet (cf. et testée durant nos expérimentations car c est la seule qui fonctionnait avec la dernière version d Internet Explorer (cf. C.I). Dans le cadre des méthodes de communication entre la barre d outils et les objets Java, nous avons établi un tableau de synthèse (Tableau 2) afin de souligner la méthode la plus adaptée pour la réalisation de notre projet. Pour dresser ce tableau, nous avons mis en place plusieurs critères de comparaison. En effet, méthode de communication devra être intégrable ou compatible (selon les cas) avec un composant COM. Il est indispensable que la méthode puisse appeler des bibliothèques Java externes (au JDK) notamment pour l accès à la base de données avec JDBC. Enfin la méthode de communication devra être compatible avec la dernière version de Java (la version 6 update 5). Critères Solution Intégrable ou compatible avec un composant COM Appel de librairies Java externes (pour l accès à la base de données) Compatibilité avec la version 6 (update 5) de Java LiveConnect (par Applet) LiveConnect Java ActiveX Bridge J# Communication par socket Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ Tableau 2 - Synthèse des recherches Nous pouvons constater que les méthodes «LiveConnect (par Applet)», «Communication par socket» et «Java ActiveX Bridge» répondent à tous les critères. La première étant très lourde à l exécution à cause de l obligation d insérer l Applet dans chaque page HTML, et la seconde ayant de lourdes contraintes notamment pour la définition d un protocole réseau ou du choix d une architecture spécifique, nous retiendrons la troisième méthode : Java ActiveX Bridge. Pour se servir de cette méthode, on devra encapsuler un composant JavaBean dans un composant ActiveX sous la forme d une DLL (cf. technique de génération d une DLL encapsulant un JavaBean en annexe 2). Son utilisation correspond très bien au choix de développement de la barre d outils car le langage C# permet d utiliser des composants ActiveX très simplement et donc de communiquer avec des objets Java avec une grande facilité (les objets Java étant encapsulés dans un ActiveX). 15

16 D. Analyse Après avoir sélectionné la technologie, nous nous sommes lancés dans l analyse du problème. Les sections suivantes présentent les différentes étapes qui ont été suivies pendant cette phase d analyse, réalisée à l aide de la notation UML. Nous présenterons successivement le système ainsi que les acteurs qui vont interagir avec lui, ainsi que les cas d utilisation. Ensuite, nous détaillerons les scénarios liés aux cas d utilisation, enfin nous présenterons la maquette de la fenêtre de consultation du contenu des annotations. I. Présentation des acteurs Dans la phase d analyse et notamment dans les scénarios présentés dans les sections suivantes, le «système» représente l intégralité du composant additionnel, en d autres termes la barre d outils et le JavaBean encapsulé dans un ActiveX (sous la forme d une DLL). Deux acteurs peuvent être définis dans le cadre du fonctionnement de notre système, tout d abord l acteur «utilisateur» est comme son nom l indique celui qui se servira du système. Un autre acteur entre également en jeu, c est le «navigateur Internet Explorer» qui peut être défini en tant qu autre système, étant donné que notre système communiquera avec lui. II. Présentation des cas d utilisation Le diagramme de cas d utilisation présenté dans la Figure 3, expose les différentes utilisations possibles du composant additionnel d annotation, qui seront détaillées dans la partie suivante. Figure 3 - Cas d'utilisation III. Description des scénarios Comme nous avons pu le voir dans le diagramme de cas d utilisation, l utilisateur peut se servir du composant additionnel de différentes manières. Pour décrire les cas d utilisation, nous avons établi des scénarios représentatifs pour chaque cas. Nous présenterons successivement les scénarios pour les cas «Voir annotations document», «Consulter contenu annotation» et «Annoter document». 16

17 1. Voir annotations document Rôle : Permet à l utilisateur de voir les annotations présentes sur un document HTML Début : Lorsque l utilisateur change d URL sous Internet Explorer Fin : Lorsque l utilisateur change d URL sous Internet Explorer Pré-condition : -- Post-condition : Annotations replacées sur le document Données entrées : -- Données sorties : -- Exceptions : -- Scénario alternatif : Il n y a pas de d annotation présente dans la base de données pour l url saisie, par conséquent la tâche «replacer annotation» ne sera pas effectuée. Diagramme de séquence : Commentaires : Figure 4 - Scénario 1 : Voir annotations document - L évènement «saisie de l URL par l utilisateur dans Internet Explorer» est exploité par le système qui est à l écoute des évènements se produisant sur le navigateur. Ainsi, le composant pourra réagir aux différents évènements tels que charger et replacer les annotations pour un document venant d être chargé. - L opération «rechercher annotations()» représente un accès au système de stockage pour charger les annotations présentes sur le document. - L opération «modifier document()» consiste à parcourir le document à partir de la chaîne XPointer définissant le point d ancrage de l annotation pour le modifier et rajouter la mise en forme permettant de délimiter une annotation (icônes, soulignement ). 17

18 2. Consulter contenu annotation Rôle : Permet à l utilisateur de consulter et de modifier le contenu d une annotation Début : Lorsque l utilisateur sélectionne une annotation Fin : Lorsqu il ferme la fenêtre affichant le contenu de l annotation Pré-condition : Annotations présentes sur le document HTML Post-condition : -- Données entrées : -- Données sorties : -- Exceptions : -- Scénario alternatif : L utilisateur ne modifie pas le contenu de l annotation Diagramme de séquence : Commentaires : Figure 5 - Scénario 2 : Consulter contenu annotation - L opération «afficher contenu annotation()» inclut la recherche de l annotation dans l espace de stockage et permet à l utilisateur de voir le contenu de l annotation qu il vient de sélectionner. - La «modification du contenu de l annotation» effectuée par l utilisateur, exécute l opération «mise à jour contenu annotation()», qui met à proprement parler à jour l annotation dans le système de stockage, après validation de la modification. 18

19 3. Annoter document Rôle : Permet à l utilisateur d annoter un document Début : Lorsque l utilisateur clique sur le bouton «Annoter» Fin : Lorsque l utilisateur enregistre son annotation Pré-condition : L utilisateur doit avoir sélectionné du texte Post-condition : Annotation replacée sur le document Données entrées : -- Données sorties : -- Exceptions : -- Scénario alternatif : L utilisateur annule la création de l annotation, les tâches «enregistrer annotation» et «modifier document» ne seront pas effectuées. Diagramme de séquence : Commentaires : Figure 6 - Scénario 3 : Annoter document - L opération «créer annotation()» initiée par l utilisateur consiste en la sélection d une partie d un document HTML et l événement «action» sur le bouton «annoter» de la barre d outils. - La «demande saisie contenu annotation» et la «saisie contenu annotation» sont réalisées au travers de la fenêtre de consultation et de modification du contenu des annotations, présentée dans la section suivante. - Une fois le document modifié (lors de l opération 7), l utilisateur visualise l annotation directement dans le document HTML affiché dans Internet Explorer. 19

20 IV. Visualisation de la fenêtre de consultation du contenu des annotations La maquette ci-dessous représente la fenêtre permettant de consulter et de modifier le contenu des annotations. Nous pouvons constater que l utilisateur aura la possibilité de saisir un titre et un commentaire pour son annotation. La partie «texte annoté» ne sera pas modifiable, elle servira juste à rappeler à l utilisateur le texte annoté du document HTML. La date n est présente que pour indiquer à l utilisateur la date de la dernière modification de l annotation. Les boutons «Enregistrer» et «Annuler» permettront quand à eux d enregistrer ou non, la création ou la modification d une annotation. Titre : Commentaire Texte annoté Date : 01/06/2008 Enregistrer Annuler Figure 7 - Maquette de la fênetre de consultation du contenu des annotations 20

21 E. Conception Suite à la phase d analyse, nous avons effectué la conception du projet en utilisant toujours la notation UML. Nous présenterons tout d abord l architecture du composant, puis nous exposerons les étapes consécutives de la conception, allant de l affinage des scénarios à la modélisation de la base de données et à la réalisation de l interface homme-machine, en passant par le diagramme de classes. Ayant pris la décision de modifier une barre d outils existante, à la suite de la phase de recherche, toutes les étapes suivantes n ont été menées que pour le développement de la partie JavaBean (en y incluant le dialogue avec la barre d outils). À la différence de la phase d analyse, le «Système» ne représentera plus l intégralité du composant additionnel, mais seulement la barre d outils comme cela est spécifié par «Toolbar : Système». Le fonctionnement du JavaBean sera quand à lui détaillé afin de montrer les interactions avec la barre d outils. I. Architecture du composant Dans le cadre de la conception du composant additionnel d annotation, nous pouvons identifier deux couches logicielles. La première, intégrée à Internet Explorer et modélisée par une barre d outils, permet d accéder au DOM et de générer les chaînes Xpointer correspondant aux points d ancrage. La seconde représentée par le JavaBean encapsulé, que l on nommera couche «Java», est quant à elle exécutée par la barre d outils et qui permet l enregistrement des annotations dans un système de stockage mais aussi d interagir avec l utilisateur, pour tout ce qui concerne la consultation et la modification du contenu d une annotation. Pour le développement de cette couche, nous avons opté pour une architecture Model-View-Controller 11 car elle impose la séparation entre les données, la présentation et les traitements. II. Affinage des scénarios Afin d identifier les différentes classes que nous devrons utiliser, nous avons affiné les scénarios présentés dans la partie D.III. Les traitements de la barre d outils ne seront pas détaillés comme nous l avons précisé plus haut. 1. Affinage du scénario «Voir annotation document» Le diagramme suivant présente les traitements effectués par le composant additionnel pour afficher les annotations sur une page HTML, lorsque l utilisateur saisit une url dans Internet Explorer

22 Figure 8 - Affinage scénario 1 Dans le diagramme ci-dessus, nous pouvons souligner que, suite à la saisie d une URL dans Internet Explorer, la barre d outils intercepte l évènement de chargement d une nouvelle page et initie alors la recherche des annotations associées à l URL correspondante au travers du JavaBean. Suite à un appel à la base de données, le composant récupère les informations des annotations et du document au travers d instances des classes Annotation et Document. Le composant retourne alors une chaîne de caractères contenant toutes les informations relatives aux annotations à la barre d outils qui accède au DOM et modifie dynamiquement le document afin de les afficher. 22

23 2. Affinage du scénario «Consulter contenu annotation» Le diagramme de séquence ci-dessous présente les traitements du composant additionnel lorsque l utilisateur souhaite consulter le contenu d une annotation et éventuellement la modifier. Figure 9 - Affinage scénario 2 Nous pouvons souligner dans cette figure, que lorsque l utilisateur clique sur une annotation de la page HTML, la barre d outils récupère l évènement par le biais d Internet Explorer. Elle fait alors appel au composant dans la couche «Java» pour afficher le contenu de l annotation. Ayant déjà 23

24 stocké en mémoire les annotations, le composant ne fait donc pas appel au serveur d annotation. Une fois le contenu affiché, l utilisateur peut le modifier comme nous l avons représenté ici. Une fois qu il valide la modification, l annotation est mise à jour sur le serveur et le composant redonne la main à Internet Explorer. 3. Affinage du scénario «Annoter document» L affinage du scénario «Annoter document» représenté ci-dessous par un diagramme de séquence, souligne les traitements effectués lors de la création d une annotation. Figure 10 - Affinage scénario 3 24

25 Après avoir sélectionné une portion de texte sur la page HTML, l utilisateur clique sur le bouton «Annoter» de la barre d outils pour créer l annotation. Cet évènement engendre la création de la chaîne XPointer associée par la barre d outils qui l utilise lors de l exécution d un service du composant de la couche «Java». Ce service affiche la fenêtre permettant de saisir le contenu de l annotation. Une fois que l utilisateur à rempli le titre et le commentaire, l annotation est enregistrée sur le serveur. Suite de cela, le composant retourne l identifiant de l annotation (sur le serveur) à la barre d outils, afin de placer l annotation dans le document (cf. partie E-IV). La barre d outils modifie alors le document par le biais d Internet Explorer afin que l utilisateur puisse la visualiser. Grâce à ces trois affinages de scénarios, nous avons pu identifier les classes qui allaient être utilisées dans la couche «Java» du composant additionnel. III. Diagramme de classes Le diagramme de classes suivant (cf. détail en annexe 3), présente les différentes classes issues des affinages des scénarios. Figure 11 - Diagramme de classes Comme nous pouvons le remarquer, nous avons décomposé le diagramme de classes en quatre paquetages. Le premier d entres eux, «Vue» contient les classes FenetreAnnotation et PanneauAnnotation utiles à l interface graphique développée dans la partie JavaBean. Le paquetage «AccèsDonnées» permet de faire appel à un serveur d annotation (modélisé par la classe abstraite ServeurAnnotation) implanté dans notre cas sous la forme d une base de données (modélisée par la classe BaseDeDonnées héritant de la classe abstraite ServeurAnnotation). Le paquetage «Métier» contenant les classes Annotation et Document permet de garder en mémoire les annotations et les documents qui sont issus de la base de données. Le paquetage «Contrôleur» contient la classe Composant qui permet d établir la liaison entre les données en mémoire de l application, la base de données et l interface graphique. Cette classe sera définie en tant que JavaBean et servira à faire le pont entre la couche «Java» dans laquelle nous nous trouvons et la barre d outils. 25

26 IV. Modélisation de la base de données Le diagramme de classes UML suivant présente les relations entre les différents éléments de la base de données. Figure 12 - Diagramme de classes modélisant la base de données Pour le bon fonctionnement du composant additionnel, il est essentiel de stocker les annotations et les documents auxquels elles sont rattachées. Nous utiliserons pour cela deux classes, Annotation et Document. L identifiant de l annotation apparaît dans ce diagramme UML car il sera utilisé par la barre d outils pour le placer en tant qu identifiant de la balise span qui permettra de visualiser l annotation dans la page HTML. Cette balise sera de la forme suivante : <span id= "idannot" > </span> Grâce à ce diagramme de classes nous avons établi le schéma relationnel de la base de données suivant : Annotation = {id_annotation, ancre, commentaire, date_annot, texte_selection, titre, #id_document} Document = {id_document, url, derniere_modif} D un point de vue conceptuel, l URL peut servir d identifiant pour Document. Cette solution implique que lors de la jointure entre la relation annotation et la relation document, la comparaison des identifiants va se faire sur l URL, ce qui va prendre du temps (vu que la comparaison de chaines s effectue caractère par caractère). L URL sera également stockée dans la table annotation en tant que clé étangère ce qui implique une perte de mémoire par rapport à l ajout d un id_document en tant que clé primaire dans la table document (l id_document étant de type number, l on prendra moins d espace mémoire qu une chaine de caractère). Pour accélérer le temps d exécution de la jointure, la création d un index sur la clé étrangère id_document dans la table annotation est nécessaire. Pour l identifiant de la table annotation, une autre solution consistait à prendre l URL, le chemin, la position et la longueur comme clé primaire. Ceci n était pas très adapté au problème car on ne pouvait pas avoir deux annotations au même endroit sur le même document. L identifiant 26

27 id_annotation sera également utilisé dans l identifiant des balises span qui serviront à entourer le texte annoté. Nous avons donc choisi de représenter l IdDocument par un entier. L ajout d une contrainte unique sur URL dans la table DOCUMENT, qui implique la création d un index sur cet attribut, permettra d accélérer les recherches lors du chargement d une page HTML pour restituer les annotations. La base de données sera donc accédée par les classes Java afin de donner accès aux divers services. Pour cela nous avons développé un ensemble de requêtes SQL figurant en annexe 4. V. Génération du XPointer Nous avons précédemment indiqué que C# ne possédait pas de moyen direct d accéder à un chemin XPointer du document présent dans Internet Explorer. Pour résoudre ce problème nous avons développé l algorithme suivant (cf. détail en annexe 5). Accéder au DOM; Récupérer la sélection; Récupérer l'élément parent de la sélection; Calculer la position de la sélection dans l'élément parent; Calculer la longueur de la sélection; Tantque l'élément parent est différent de la racine faire Récupérer l'élément parent de l'élément courant; Calculer la position de l'élément courant dans l'élément parent; Si la position est égale à zéro alors Lever une exception (élément non trouvé dans l'élément parent); Sinon Concaténer le nom de la chaine et la position au début chemin XPath; Fin si ; Fin tantque; Concaténer le nom de la balise racine au début du chemin xpath; Création de la chaîne XPointer à partir du chemin XPath, de la position et de la longueur de la sélection; Algorithme 1 Générer XPointer Pour générer la chaîne XPointer nous utilisons les méthodes de l interface du DOM qui sont fournies par l API C# associée à Internet Explorer. Ainsi, nous pouvons parcourir l arbre du document afin de déterminer la position et la longueur de l annotation. L outil d annotation étant capable de générer une chaîne XPointer, il doit aussi être capable de s en servir afin de restituer les annotations, c est pour cela que nous avons aussi écrit l algorithme suivant de restitution d annotation à partir d une chaîne XPointer (cf. détail en annexe 6). 27

28 Extraire le chemin XPath de l'annotation depuis la chaîne XPointer; Extraire la position de l'annotation depuis la chaîne XPointer; Extraire la longueur de l'annotation depuis la chaîne XPointer; Accéder au DOM; Récupérer la liste de tous les éléments du document; Tantque le chemin XPath n'a pas été parcouru en entier faire Extraire le nom et la position de l'élément courant dans le chemin XPath; Effacer le nom de l'élément courant du chemin XPath; Trouver l'élément courant dans la liste des élements; Récupérer la liste des éléments enfants de l'élément courant; Fin tantque; Restituer l'annotation dans l'élément courant en fonction de sa position et de sa longueur; Algorithme 2 - Restituer annotation VI. Réalisation de l interface homme-machine Pour la réalisation de l interface homme-machine, nous avons étudié la façon dont l utilisateur se servira de notre application. Le diagramme d état-transition suivant illustre les interactions possibles de l utilisateur avec le composant additionnel. Figure 13 - Diagramme d'état-transition Nous pouvons remarquer que dès l ouverture d Internet Explorer, notre application rentre dans l état Attente. À chaque chargement de page, la barre d outils fera appel au JavaBean afin de récupérer les annotations présentes sur la page. Lors d un clic sur une annotation ou sur le bouton permettant d annoter (btannoter) après la sélection d un texte, le système passe dans l état Consulter contenu annotation qui se traduira par l ouverture de la fenêtre de consultation des annotations. Lorsque l utilisateur appuie sur le bouton enregistrer (btenregistrer) de la fenêtre de consultation, le composant enregistrera l annotation dans la base de données et la transmettra à la barre d outils, avant de repasser dans l état Attente. L appui sur le bouton annuler (btannuler) entraînera juste un retour à l état Attente sans exécuter aucune action. 28

29 F. Résultat Nous présentons dans cette section les résultats obtenus avec le composant additionnel d annotation intégré dans Internet Explorer. I. Création d une annotation Comme nous pouvons le voir sur la capture d écran ci-dessous, l utilisateur peut sélectionner un texte afin de l annoter. Ensuite, il lui suffit cliquer sur le bouton «Annoter» présent dans la barre d outils du prototype d annotation. Lors de l appui sur ce bouton, une fenêtre s ouvre afin qu il puisse saisir un titre et un commentaire. Il pourra néanmoins cliquer sur le bouton «Annuler», s il ne souhaite pas annoter le texte qu il a sélectionné. Sinon, une fois le titre et le commentaire saisis, il peut valider l annotation en cliquant sur le bouton «Enregistrer». Figure 14 - Création d'une annotation II. Restitution d une annotation La capture d écran suivante représente Internet Explorer affichant une page contenant des annotations. Le composant additionnel a été capable de restituer des annotations qui étaient enregistrées dans la base de données, comme nous pouvons le remarquer. 29

30 Figure 15 - Restitution des annotations III. Visualisation et modification du contenu d une annotation La capture d écran suivante met en évidence la fenêtre de consultation et de modification du contenu d une annotation qui est affichée suite au clic de l utilisateur sur une annotation dans la page HTML. L utilisateur peut ainsi modifier le titre et le commentaire de l annotation ou bien juste consulter son contenu. Figure 16 - Visualisation et modification du contenu d'une annotation 30

31 G. Limites et perspectives Nous sommes parvenus à développer un composant additionnel d annotation pour le navigateur Internet Explorer, mais celui-ci comporte des limites à cause des annotations orphelines et trompeuses. Le prototype étant au début de son cycle de vie, nous pouvons aussi envisager des évolutions comme la gestion et la recherche d annotations, afin d améliorer la facilité de son utilisation. I. Annotations orphelines et trompeuses Le composant additionnel que nous avons développé ne permet pas de gérer les annotations que l on peut qualifier d orphelines, c'est-à-dire lorsque le texte annoté a été supprimé du document HTML. Ne pouvant les replacer dans leurs contextes nous les affichons en bas de la page HTML pour qu il reste une trace de celles-ci. Il existe un autre type d annotation que nous n avons eu le temps de gérer, ce sont les annotations trompeuses. Elles apparaissent aussi lorsque le document HTML est modifié sans que le texte annoté ne soit supprimé. Ce type d annotation ne peut être replacé dans le document HTML, c est la raison pour laquelle nous l affichons de la même manière que les annotations orphelines (en spécifiant leur type). Un autre type d annotation qui peut être qualifié d annotation de chevauchement, n a pu être géré. En d autres termes elles concernent le texte annoté contenant des balises ouvrantes qui sont fermées après la fin de celui-ci, comme dans l exemple qui suit : Voici un exemple de texte <u> sélectionné dont une balise est ouverte à l intérieur mais pas refermée Figure 17 - Annotation de chevauchement À long terme il serait bon d introduire une meilleure gestion de ces deux types d annotation qui peuvent être très gênant dans l utilisation de notre composant additionnel. II. Gestion et recherche d annotations Une amélioration possible pour le composant additionnel serait d y inclure une fonctionnalité de gestion et de recherche d annotations, afin de permettre une meilleure utilisation de celles-ci. III. Gestion des utilisateurs Une autre évolution serait d ajouter une gestion des utilisateurs. En effet, les annotations étant anonymes, on ne peut en connaître les auteurs. 31

32 H. Bilan technique et personnel Tout au long de mon stage j ai dû faire preuve d autonomie, aussi bien dans mes recherches et mes expérimentations, que pendant le développement du composant additionnel. La phase de recherche m a permis d acquérir de nouvelles connaissances, notamment dans les technologies Microsoft et dans l utilisation de celles-ci. Cette phase m a aussi permis d approfondir ma connaissance de l anglais technique lors de lectures d articles, de documents et de forum en anglais. Lors de l analyse et de la conception de mon projet, j ai pu améliorer mes acquis et mon savoir faire dans ces deux domaines. Durant mon stage j ai dû fournir des documents à mes encadrants, ce qui m a obligé à m organiser afin de respecter les dates limites qu ils avaient fixé, chose qui n a pas toujours été aisée. Certaines phases de mon stage ont duré plus longtemps que ce qui avait été prévu dans la planification initiale. Ainsi, le diagramme de Gantt suivant montre que la phase de recherche et d expérimentation s est révélée être beaucoup plus longue que prévue. Partant de ce fait là, j ai dû faire l analyse, la conception et la programmation dans un temps beaucoup plus court que prévu initialement, ce qui a constitué un défi pour moi. Au final, j ai réussi, dans le temps imparti, à tenir les objectifs fixés. Figure 18 - Planification finale D un point de vue relationnel, j ai beaucoup appris sur le monde de la recherche tout au long de ce stage et sur l équipe SIG. Cette expérience fut aussi très enrichissante pour moi car j ai eu l occasion d apprendre beaucoup sur les rapports hiérarchiques dans une entreprise, mais aussi lors des discussions et des échanges que j ai pu avoir avec d autres personnes travaillant avec moi. En tant que première expérience professionnelle dans le domaine de l informatique, ce stage m a permis d effectuer entièrement le cycle de développement d une application mais aussi d apprendre à chercher des solutions lorsqu un problème survient. En conclusion, ce stage a été une bonne expérience et me motive à persévérer dans mes études en Licence Informatique. 32

33 Conclusion Ce stage à l Institut de Recherche en Informatique de Toulouse m a permis d acquérir des notions dans le domaine des Systèmes d Informations Généralisés et plus particulièrement dans le cadre de l annotation de ressources électroniques. Les recherches et les expérimentations que j ai effectuées pour trouver des solutions techniques pour réaliser ce composant additionnel d annotation, m ont permis de découvrir de nombreuses technologies et d apprendre un nouveau langage de programmation (le C#), mais aussi d approfondir certaines de mes connaissances. Le développement de cet outil d annotation m a encore une fois démontré la nécessité d analyser et de concevoir une solution avant de l implanter, comme j avais déjà pu le remarquer lors de la réalisation de mon projet tuteuré à l IUT. Ces deux phases m ont ainsi permis de développer plus facilement et plus rapidement le composant additionnel. Ce fut certes un stage de recherche, d analyse, de conception et de programmation, mais cette expérience m a aussi permis de découvrir le monde de la recherche et m a donné l occasion d avoir une vision plus précise sur celui-ci. 33