Conception d un navigateur web spécifique pour la bio-informatique

Transcription

1 Conception d un navigateur web spécifique pour la bio-informatique Rapport de Stage Parcours professionnel Intelligence Artificielle et Décision Institut Pasteur Tuteur de stage : Catherine Letondal Tuteur de stage : Nicolas Roussel Université Pierre et Marie Curie, Paris 6 Responsable de formation : Monique Baron Aurélien Tabard 5 septembre 2005

2 ii

3 Remerciements Je tiens à remercier en préambule tout le personnel du pôle informatique de l Institut Pasteur ainsi que les membres du projet In-Situ du LRI, pour leur accueil et leur convivialité. Tout particulièrement, les personnes qui m ont soutenu, guidé, conseillé et encadré tout le long de mon stage : Catherine Letondal. Nicolas Roussel. Samira Laribi et Bertrand Néron qui m ont patiemment expliqué les notions de biologie. Je tiens aussi à dire un grand merci à l ensemble des professeurs du Master pour la qualité de leur enseignement, ainsi qu à la communauté XUL francophone pour son dynamisme et sa disponibilité. iii

4 Table des matières Remerciements iii 1 Le stage Conception d un navigateur Web spécifique pour la bio-informatique Le travail annexe Le cadre du stage L Institut Pasteur L unité logiciels et banques de données (Pôle informatique) In Situ Plan Étude de l environnement : Les biologistes La recherche en biologie De l utilité du web pour les biologistes Le projet Mobyle La conception coopérative Entretiens Brainstorming Scénarios Prototypage Design walkthrough Le navigation et le web Bibliographie Revisite de pages web Automatisation Interface utilisateur Les navigateurs Internet Explorer Opera Mozilla Mozilla-Firefox État de l art des extensions Les extensions destinées à la bio-informatique Les extensions améliorant la gestion du presse papier Les extensions facilitant la gestion des formulaires Les extensions modifiant la visualisation des pages Les extensions fluidifiant la navigation iv

5 3.3.6 Les bookmarklets Techniques et outils utilisés Le développement d extensions Firefox Le mécanisme des extensions Les langages utilisés XUL JavaScript RDF Outils de développement Eclipse CVS Les systèmes d exploitations RabidFox Définition des fonctionnalités Structure de l extension Modélisation des liens entre les pages Le modèle Le graphe La vue Les contrôleurs Les entrées La gestion des données Les sorties Retour utilisateur Perspectives Les extensions facilitant la gestion de formulaire Drag drop upload La contribution apportée Le travail collaboratif Annotation de formulaire Définition des fonctionnalités Structure de l extension Conclusion 49 Apport au projet Apport personnel Annexes 52 A Données RDF 52 A.1 Rabidfox A.2 AnnotateForm B Résultats du brainstorming 56 C Scénarios d utilisation 58 v

6 Chapitre 1 Le stage J ai réalisé mon stage entre le 15 avril et le 16 septembre 2005 sur la conception d un navigateur Web spécifique pour la bio-informatique. Il a eu lieu principalement à l Institut Pasteur, mais je me suis rendu régulièrement au LRI. J ai ainsi pu m intégrer dans deux équipes et deux cadres de travail différents et rester en contact avec mes deux encadrants : Catherine Letondal de l Institut Pasteur et Nicolas Roussel du LRI. 1.1 Conception d un navigateur Web spécifique pour la bio-informatique L objectif du stage a été de concevoir et d évaluer les possibilités d amélioration de la plate-forme mozilla pour l utilisation du web en bioinformatique. Les outils standards de navigation sur le web sont en général assez mal adaptés à une utilisation intensive par des biologistes pour effectuer leurs analyses de données. En effet, une partie importante des données collectées et des analyses réalisées sont faites grâce à des applications web, ce qui entraine un usage régulier et indispensable d internet. Les techniques de signets (bookmarks), d historique de navigation, d annotation, de copier-coller et de chargement de données sont trop rudimentaires pour cet usage. Une première partie du stage a donc consisté a comprendre les problèmes de la navigation web et les besoins des biologistes en analysant l existant, aussi bien d un point de vue pratique, technique que théorique. Pour l aspect pratique j ai pu réaliser des études utilisateurs tout en m appuyant sur des travaux préalables effectués au sein de l Institut Pasteur[1] (comme des entretiens avec les biologistes). Pour le côté technique, je me suis intéressé aux navigateurs existants et à la meilleure manière de les améliorer. Enfin la réalisation d une bibliographie d articles analysant la navigation web et présentant des alternatives à l utilisation actuelle a apporté un fondement théorique à mon travail. Une fois cette phase d analyse effectuée, j ai pu réaliser des extensions répondant à certains besoins spécifiques des biologistes afin d ébaucher le développement d un navigateur Web spécialisé pour la bioinformatique. En l occurrence le travail a porté sur la gestion des formulaires et la création de raccourcis entre pages. 1

7 1.2 Le travail annexe Durant toute la durée du stage (et même en amont), je me suis investi dans la vie des équipes dans lesquelles j ai travaillé. Ainsi avant le début de mon stage je me suis rendu au LRI pour participer à un prototypage vidéo organisé par In Situ pour le projet Micromégas 1 autour de la visualisation du temps. Durant le reste du stage j ai aussi pris part à certains travaux de groupes du projet In Situ : Réflexion et brainstorming sur comment mener les expériences utilisateurs de Y. Riche et de J.B. Labrune. Utilisateur témoin d une étude sur la gestion de fenêtres. J ai installé wmtrace d O. Chapuis qui enregistre les actions que l utilisateur effectue dans l utilisation quotidienne de ses fenêtres ainsi que de son clavier et de sa souris. J ai aussi assisté à des exposés de différentes personnes de l équipe ou d intervenants extérieurs et j ai pu présenter mon travail à l équipe. À l Institut Pasteur, j ai participé, en partie, à la conception du nouveau portail d applications web : Mobyle, avec S. Laribi, C. Letondal et B. Néron. Cette participation s est faite au travers de programming walktrough, d entretiens, de brainstormings et de prototypages vidéos. Et comme nous le verrons par la suite, j ai dû me familiariser avec le travail les biologistes pour pouvoir comprendre leurs besoins. J ai donc suivi des présentations de biologie et de bio-informatique. 1.3 Le cadre du stage J ai réalisé mon stage au sein de l équipe logiciel et banque de données du pôle informatique de l Institut Pasteur sous la direction de Catherine Letondal. Étant co-encadré par Nicolas Roussel du LRI, il m est arrivé de passer une journée par semaine à Orsay dans les locaux du LRI L Institut Pasteur L Institut Pasteur est une une fondation privée à but non lucratif créée en Il a pour objet : L étude des maladies infectieuses, parasitaires et immunitaires, ainsi que les moyens propres à les prévenir et à les combattre ; La poursuite et le développement des travaux de recherche sur les microorganismes, sur leur rôle dans les processus naturels, normaux ou pathologiques et sur les réactions qu ils provoquent ; L étude et l enseignement de la microbiologie dans toutes ses branches, ainsi que la formation de personnel scientifique et technique, en vue de la promotion de la recherche en microbiologie fondamentale et appliquée ; L étude de tous les phénomènes théoriques ou pratiques liés à la microbiologie, à l immunologie ou, d une manière générale, à la biologie fondamentale ou appliquée, et les recherches en ces domaines. 1 Voir partie

8 L Institut dispose d un budget de 200 millions d Euros, il couvre 130 unités de recherche, réparties dans 12 Départements de recherche, et 24 Instituts Pasteur membres du Réseau International. Trois domaines d activités se distinguent : Recherche en biologie, avec une priorité dans la lutte contre les maladies infectieuses (microbiologie) : Maladies virales (hépatites, grippe, Sida, rage, poliomyélite, fièvres hémorragiques..), maladies bactériennes (tuberculose, coqueluche, méningites, choléra, maladies diarrhéiques...), et parasitaires (paludisme...). Enseignement : Chaque année, environ 250 jeunes scientifiques du monde entier suivent des cours en microbiologie et immunologie dans le cadre de l enseignement de l Institut. Le Pôle informatique offre aussi des formations de bio-informatique et d informatique. Et plus de 800 stagiaires de 60 nationalités viennent se perfectionner dans les laboratoires de l Institut. Applications à la santé publique : En France, un centre médical propose au public des vaccinations conseils aux voyageurs (grippe, tétanos, hépatites, diphtérie,...), un centre de dépistage(sida, hépatite C) et un laboratoire d analyses. Les Instituts du Réseau International proposent des services analogues, spécifiques des pays où ils sont implantés L unité logiciels et banques de données (Pôle informatique) Le groupe Logiciels et Banques de données du Pôle informatique (au sein duquel j ai fait mon stage) a pour mission de fournir aux chercheurs des outils modernes de calcul, des logiciels et des bases de données biologiques. Une part importante est consacrée à la veille technologique, afin d assurer aux chercheurs de l Institut un service de qualité utilisant les dernières technologies sur des matériels en constante évolution. C est dans ce cadre que je me suis intéressé aux navigateurs web, et aux améliorations possibles. Il participe à l évolution d outils logiciels en collaboration avec des centres de recherche et des universités aussi bien en France qu à l étranger. L unité intervient régulièrement dans les cours du centre des enseignements et organise un Cours d Informatique en Biologie. Enfin, l unité est responsable à la fois de l installation, du développement des logiciels de biologie et le développement d interfaces donnant accès aux logiciels de biologie In Situ Le projet In Situ (LRI & INRIA Futurs) vise à développer de nouvelles techniques d interaction, de nouveaux outils pour mettre en oeuvre ces techniques, et de nouvelles méthodologies pour maîtriser le processus de conception. Il s agit de créer des interfaces situées, c est-à-dire adaptées (ou adaptables) à leurs contextes d usage, ici la navigation des biologistes, en exploitant au mieux la complémentarité entre systèmes informatiques et utilisateurs humains. Je suis intervenu plus précisément dans le cadre du projet Micromégas, commun à l Institut Pasteur et au LRI. L objectif du projet Micromégas est de développer de nouvelles interfaces pour naviguer et visualiser des données 3

9 de grande taille (à l échelle humaine) en explorant des approches dites multiéchelles. Il s intéresse à des données qualifiées de familières, c est-à-dire des données qui ont été créées ou au moins organisées par leurs utilisateurs, mais dont la masse est, de fait, telle que leur exploitation est de plus en plus fastidieuse. L enjeu du projet est lié à la diversité de ces données - elle concernent aussi bien les activités professionnelles que personnelles - et leur taille croissante. A l heure où la société de l information recouvre de plus en plus d aspects de notre vie, la capacité à naviguer efficacement dans ces données revêt une importance cruciale afin de permettre à chacun de constituer et de gérer efficacement sa parcelle de cyberespace. Une des approches adoptées pour répondre à ce problème consiste à enrichir les méthodes courantes de visualisation d information et de navigation. 1.4 Plan Nous venons de voir que le stage à porté sur la conception d un navigateur Web spécifique pour la bio-informatique, à l Institut Pasteur, et au LRI. Par la suite je présente le travail préliminaire réalisé pendant la première moitié du stage, l apprentissage et l étude de l environnement : la recherche en biologie, ainsi que la navigation sur le web. Nous continuons par une présentation des extensions réalisées : rabidfox, drag n drop upload, et annotate form, pour finir sur un bilan professionnel et personnel du stage. 4

10 Chapitre 2 Étude de l environnement : Les biologistes La première partie du stage a consisté à m immerger dans la problématique de la navigation sur le web des biologistes. Je me suis donc penché sur le travail, les outils et les besoins des biologistes. J ai pour cela visualisé des entretiens menés les années précédentes puis réalisé des entretiens en rapport plus direct avec mes objectifs. Pour avoir une meilleure compréhension des serveurs d applications web utilisés par les biologistes, j ai participé à différentes étapes de la conception du nouveau portail d application web de l Institut Pasteur : Mobyle. J ai aussi assisté à des séminaires et lu des articles. 2.1 La recherche en biologie L Institut Pasteur étant un établissement de recherche en biologie, pour pouvoir apporter des solutions aux problèmes des utilisateurs, en l occurence les biologistes, j ai dû me familiariser avec leur travail. Cet apprentissage s est fait progressivement, en assistant à un séminaire de bio-informatique destiné aux biologistes, ainsi qu à des conférences de biologie et de bio-informatique, et en posant des questions aux personnes du pôle de logiciels et bases de données avec lesquelles je travaillais. Toutefois les deux activités qui m ont permis d apprendre le plus ont été ma participation au projet Mobyle, ainsi que le visionnage et la réalisation d entretiens avec des biologistes De l utilité du web pour les biologistes Le web offre aux biologistes à la fois un moyen d accès à des ressources et à leur analyse. Avec la mise en place de portails d applications par les universités, le web est devenu un moyen de travail indispensable des biologistes, dans la mesure où leurs outils de recherche s y trouvent. Le travail d un biologiste voulant analyser une molécule (ADN ou protéine) est principalement composé des activités suivantes : découverte de séquences, cela se fait en laboratoire, recherche de molécules semblables à celle analysée. Cette recherche de similitude permet de savoir à quelle famille appartient la molécule étudiée, 5

11 elle s effectue par alignement de séquences grâce à des logiciels. Ainsi les biologistes peuvent avoir une idée de la fonction de leur molécule et donc de son rôle. la topologie (analyse de la forme de la molécule) se fait en laboratoire et en utilisant des logiciels, elle permet de mieux connaître les fonctions de la molécule. Définitions : Une protéine est séquence (un assemblage) d acides aminés liés par des liaisons peptidiques. On parle de protéine lorsque plus de 100 acides aminés sont liés au sein d une chaîne d acides aminés. Les propriétés des acides aminés (charge, hydrophobicité...) gouvernent la structure de la protéine. l ADN (acide désoxyribonucléique) est une longue molécule que l on retrouve dans le noyau des cellules de tous les organismes. C est le support de l hérédité car cette molécule a la faculté de se reproduire et d être transmise aux descendants lors des processus de reproduction des organismes vivants. Il est à la base de processus biologiques importants aboutissant à la production des protéines. La phylogénie est l étude de la formation et de l évolution des organismes en vue d établir leur parenté. On représente couramment une phylogénie par un arbre phylogénétique. Il décrit les connexions entre les objets et leur distance génétique, c est-à-dire le nombre d évolutions et de mutations dans le matériel génétique qui les sépare. Un alignement est le processus par lequel deux séquences sont comparées afin d obtenir le plus de correspondances (identités ou substitutions conservatives) possibles entre les lettres qui les composent Le projet Mobyle Le portail actuel de l Institut Pasteur Bioweb permet aux biologistes d avoir accès : à des logiciels qui leurs sont utiles (logiciels d alignement de séquences, de phylogénie, de topologie), à des banques de données moléculaires. à de la documentation. Les logiciels en question sont des programmes de bioinformatique, ils permettent par exemple, d aligner des séquences, de comparer la séquence étudiée avec d autres stockées dans des banques de données. De son côté Pise la version précédente de Mobyle permet déjà : le chargement et le formatage des données, l enchaînement d analyses (pipelines), Et à terme il permettra : la navigation et la recherche dans le portail Bioweb (moteur de navigation), l historique des analyses. l intégration de services web le wrapping 6

12 2.2 La conception coopérative Durant le stage, pour pouvoir comprendre le travail et les besoins des biologistes, et surtout pour créer une application correspondant aux attentes des biologistes, j ai utilisé des méthodes de conception coopérative. Ce processus de conception est constitué des étapes suivantes : entretiens, brainstorming, scénario, prototypage, design walkthrough. Comme le stage n a duré que cinq mois, et que je devais offrir un produit fini à terme, je n ai pas respecté strictement toutes ces étapes. De plus, les fonctionnalités à implémenter étant assez simple c est dans le cadre de Mobyle qu ont été réalisées les différentes étapes. Donc seule une partie des résultats concerne mon travail, l autre étant consacrée au portail d applications. Enfin, la période estivale n est pas la plus propice pour effectuer un travail d équipe et rencontrer des utilisateurs Entretiens J ai visionné et réalisé des entretiens en situation (i.e. dans l environnement des biologistes et dans le cadre de leur travail) à l Institut Pasteur à propos de Mobyle. Ils m ont permis d identifier les gros problèmes de navigation, d obtenir l avis des utilisateurs sur les applications web qu ils utilisent et d identifier les besoins et les tâches des utilisateurs. Une première série d entretiens a eu lieu entre 2003 et 2004, la raison de ces entretiens était la conception du nouveau portail d applications de l Institut Pasteur : Mobyle. Même si ces entretiens portaient sur les usages du web, l analyse des besoins et des habitudes des biologistes, ils n étaient pas centrés sur la navigation. Dans les entretiens réalisés en 2005 avec S. Laribi et C. Letondal. Les objectifs correspondaient aux sujets de stage : amélioration de la documentation du portail pour S. Laribi et amélioration de la navigation web pour moi-même. Ces deux objectifs se sont révélés complémentaires. En effet il est assez difficile de demander à une personne comment elle navigue sur internet. Une question telle que celle là n obtiendrait qu une réponse éloignée de la réalité, idéalisée. Aussi la possibilité d étudier la navigation en situation, à partir du remplissage de formulaires ou de recherche de documentation m a permis d observer dans leurs tâches quotidiennes les biologistes, tout en ayant la possibilité de les arrêter ou de leur demander des explications ou des précisions sur leurs comportement. L incident critique Toutefois, les opinions sont subjectives et les interviewés ont tendance à rationaliser les évènements. Une technique utile dans les entretiens formels ou informels, est celle de l incident critique. Elle permet de générer des descriptions spécifiques, plutôt que des généralisations vagues à propos du travail du sujet. Il est donc préférable de ne pas poser de questions du type parlez-moi de votre travail, mais plutôt de demander au sujet de se remémorer un incident 7

13 particulier ayant eu lieu la semaine précédente qui est surprenant, amusant ou du moins mémorable. Si l on demande à la personne de décrire l incident, incluant ce qui s est passé et pourquoi il est mémorable, habituellement le sujet donne à la fois une description claire de comment le travail doit être effectué et un exemple intéressant du type de difficulté qui a dû avoir lieu. Dans ce cadre il faut demander le maximum de détails spécifiques et aider le sujet à rester spécifique. On peut également leur demander de penser à d autres incidents critiques, particulièrement si on est au courant d autres événements qui ont eu lieu qui nous ont été décrits par d autres. Une autre variante est de demander au sujet de décrire les événements ayant eu lieu à une date et un moment spécifiques, par exemple, mardi dernier, à 11 heures. Même si rien de mémorable ne s est passé ce jour là, le sujet aura tendance à l expliquer comme étant un jour typique, incluant un certain nombre de difficultés typiques. Souvent, les sujets continuent de décrire d autres exemples intéressants et parlent d autres types de difficultés qui peuvent survenir pendant leur travail. En général, les gens répondent à la question dans un style similaire à celui utilisé dans la question : si les questions sont vagues, les réponses le seront aussi. Si les questions conduisent les sujets à fournir des exemples spécifiques, les chance de trouver des informations utiles augmentent. Cette technique est utilisée pendant les entretiens, mais aussi quand l utilisateur essaye un logiciel (ou un prototype). Le but est de trouver les problèmes spécifiques. Les entretiens réalisés Cette partie synthétise les quinze entretiens réalisés en 2003 et 2004 dont nous avons visionné les enregistrements vidéo ainsi que les six entretiens effectués en Ici, seuls les résultats en lien avec le stage sont présentés. Lors de ces entretiens des biologistes et de différents domaines ont étés interviewés. Le premier problème apparut lors des entretiens est le manque d intégration des différents outils à la disposition des biologistes. Les enchaînements de programmes sont fréquents dans le travail des biologistes. Si les enchainements se font au moyen d un logiciel, il y a une perte de contrôle sur les données intermédiaires et une difficulté à contrôler le processus. Si les enchainements se font manuellement, à cause du manque d intégration et de standardisation entre les logiciels, les biologistes passent par une étape de reformatage des résultats. Soit ils utilisent un logiciel, soit la transformation se fait à la main. Dans tous les cas les copier-collers sont utilisés pour passer d un résultat au formulaire de l analyse suivante. La totalités des interviewés utilise des copier-collers pour remplir les formulaires. Ils peuvent être directs : copie de texte sur une page et collage dans un formulaire, ou indirects : copie de texte depuis une page web, reformatage dans un logiciel ou à la main grâce à un éditeur de texte. Les copier-collers se font en utilisant soit les raccourcis clavier, soit les menus. Chaque personne se tient à une méthode ou à l autre. Si une page de résultat ne leur convient pas dans sa présentation des 8

14 données, ils ne l utiliseront pas. Ils ont besoin de pouvoir interpréter facilement les résultats. Il est à noter que les données présentées de façon tabulaire paraissent plus claires aux biologistes. La plupart des utilisateurs interrogés impriment les résultats, soit parce que c est le seul moyen qu il ont trouvé de conserver les données (ne sachant pas comment enregistrer un formulaire et son résultat), soit parce qu il peuvent manipuler plus facilement le papier que la page web contenant les résultats. Les biologistes gardent une arborescence de fichiers organisée leur permettant de s y retrouver entre toutes leurs données. Les signets sont très utilisés pour se rendre sur des portails ou des formulaires. Le nombre important de signets les obligent à avoir une organisation claire. Cependant quand la quantité devient trop importante au lieu de parcourir l arborescence des sites marqués, Google est utilisé pour retrouver rapidement un site connu. On nous a fait remarquer que les chemins d accès aux différents logiciels demandent de passer par trois ou quatre pages pour accéder à un formulaire. Le souhait de pouvoir conserver des paramètres de formulaires, dans le but de refaire les analyses, a été émit par plusieurs personnes. Un des bioinformaticiens rencontrés utilise déjà un cahier de laboratoire sous forme de page web dans lequel il inclut des scripts permettant de refaire ses analyses. Cette fonctionnalité est aussi voulue pour pouvoir rejouer une analyse en ne changeant que quelques paramètres. Pour faciliter la prise en main des formulaires sur sont pré-remplis avec des données exemplaires sur le portail PlasmoDB. Cela semble pratique au début car cela permet de savoir comment remplir le formulaire ou d avoir un aperçu rapide du résultat en testant avec les données par défaut. Cependant lors d une utilisation régulière, cela oblige à systématiquement effacer les champs pour y mettre ses valeurs. Un autre problème venant des formulaires sont les champs HTML de chargement de type input file qui sont pénibles à remplir. Si on veut charger plusieurs fichers, il faut répéter la manipulation pour chaque. Parfois certains sites (tel que Infobiogen dans sa version de 2003) gèrent mal le chargement de fichiers. La plupart des biologistes utilisaient seulement les fonctionnalités simples des logiciels, ne personnalisant pas leur utilisation. En plus des remarques faites, on a constaté que plusieurs plate-formes sont utilisées : différentes versions de Windows (de 98 à Xp), plusieurs versions de MacOS (9 et X). Pour les navigateurs, Firefox est majoritairement utilisé sous Windows, sous MacOS 9 Internet Explorer ou Mozilla sont utilisés et sous MacOSX les navigateurs se répartissent entre Firefox et Safari. Bilan des entretiens Ces entretiens ont servi de point de départ au stage. Ils ont permis de discerner les problèmes et les besoins des biologistes. Et ils ont facilité la conception des solutions. 9

15 Les problèmes auquels nous avons choisi de répondre sont les suivants : 1. L enchainement des formulaires, les biologistes utilisent souvent plusieurs logiciels à la suite mais ils ont des problèmes pour passer de l un à l autre s il n y a pas d automatisation ou pour accéder aux résultats intermédiaires s il y en a. Les données des formulaires sont fournies par copier-coller ou par chargement de fichier. Les problèmes de format obligent à opérer à une étape de reformatage des données entre deux logiciels. Cela implique des copiercollers indirects entre les données et le formulaire d analyse. 2. Le remplissage des formulaires constitue une partie importante du temps passé sur Internet par les biologistes. Le faciliter est un besoin pour biologistes. Un problème est le chargement de fichiers. Un autre est la possibilité de refaire des analyses ou des les rejouer avec quelques paramètres différents. Pouvoir conserver ses paramètres d analyse et les partager serait une avancée appréciée. J ai aussi gardé en mémoire que les utilisateurs lisent rarement la documentation des logiciels et qu ils n utilisent que les fonctions basiques des logiciels. Ils ont d autres préocupations que la technique informatique Brainstorming Lors du mois de juin, un brainstorming a eu lieu pour générer des idées sur Mobyle. J ai profité de cette réunion pour recueillir aussi des idées et des orientations utiles pour mes développements. Déroulement Le brainstorming est utilisé pour générer des idées nouvelles. On donne aux participants un sujet et une période de temps limitée. Une personne écrit chaque idée générée, une autre dirige la discussion, évite que les idées générées ne soient jugées, et s assure que la séance est terminée dans les délais. Dans un premier temps, tout le monde suggère des idées, même si elles semblent idiotes. La règle la plus importante est de ne pas juger les idées. Ce qui rend les sessions de brainstorming intéressantes est la manière dont les idées entraînent d autres idées. C est pourquoi il est si important de ne pas évaluer les idées. Pour aider les gens à se sentir à l aise, il faut insister pour que chacun inscrive au moins une idée stupide parmi les autres mais sans dire laquelle c est. Dans un second temps, tout le monde commence à évaluer les idées. Un certain nombre de stratégies peuvent fonctionner, selon le but de la session. S il est important d étudier en détail toutes les possibilités, alors chaque idée peut être discutée tour à tour. S il est important de choisir un petit ensemble d idées qui servira de base pour un travail futur, le groupe peut voter, chaque personne choisissant les trois meilleures idées. Après que chacun ait voté, on discute des idées qui ont obtenu le meilleur score. Étant donné que tout le monde a été influencé par toutes les idées présentées, même les idées les plus mineures peuvent être incorporées dans la discussion finale, comme partie d une idée différente. 10

16 Les idées La liste totale des idées générées est disponible en annexe. Parmi toutes les idées émises certaines ont retenu mon attention. Mon travail étant déjà défini et le développement commencé, ces idées ont servi à orienter mon travail dans une telle ou telle direction plutôt qu à me donner des idées d applications à créer. 01. Quand on obtient des résultats, on peut retrouver les mêmes paramètres et les modifier ou relancer le programme. 02. Je veux un tableau éditable de tous ce que j ai lancé et pouvoir changer les paramètres dedans, changer la source de données et relancer. 06. Si on réutilise un champ, on veut pouvoir remplir les autres champs en restreignant les possibilités. 12. Quand on arrive sur la page d un formulaire, on a des jeux de paramètres qui s affichent et quand on clique sur un cela remplit le formulaire. 14. Je veux pouvoir rentrer mes données et retrouver les analyses que j ai fait dessus. 24. Se souvenir des liens utilisés (et donc utiles) dans les résultats d une recherche. 25. Demander à l utilisateur s il veut mettre ce lien en favori Les idées 1, 2, 12 ont été reprises dans Annotate Form (voir la section 6.2). Comme nous le verrons plus précisément par la suite, AnnotateForm permet d enregistrer, de charger et d annoter des formulaires. L idée 14 en une amélioration possible où l on permettrait la recherche dans les paramètres des formulaires enregistrés. Toutes les formulaires contenant la valeur du paramètre recherché serait proposé. Les idées 24 et 25 sont liées à Rabidfox (voir le chapitre 5) qui permet de lier des pages entre elles Scénarios À la suite du brainstorming, nous avons réalisé des scénarios décrivant des exemples d utilisation de Mobyle. Des trois prototypes et scénarios, seul un m a été utile. Il concerne la présentation des formulaires utilisés dans un tableau récapitulatif. Les autres scénarios sont disponibles en annexe. La méthode d écriture Un scénario de travail est la description d une séquence d événements qui illustre les activités d une ou plusieurs personnes engagées dans une tâche. Le but est d être aussi réaliste que possible et détaillé que possible, tout en restant concis. Ici, on ne cherche pas à produire une version idéalisée du travail décrit, ni à séparer les activités en fonctions avec l idée que la technologie leur servira de support. Le but est au contraire de fournir une description très spécifique de ce qui se passe, en incluant les moments où des difficultés ont lieu. Les scénarios de travail sont la base des scénarios de conception qui servent à développer un nouveau système. Chaque scénario doit identifier qui est l acteur et où les activités ont lieu. Il faut inclure non seulement ce qui marche bien, mais aussi les difficultés, les 11

17 incompréhensions, etc. décrire comment les utilisateurs réagissent. Il faut donc prendre en considération la différence entre les activités planifiées et l action en situation, c est-à-dire la réaction aux événements imprévus et aux interruptions. Après avoir écrit le scénario de travail, on l enrichit en un scénario de conception. On ajoute une proposition de nouveau système pour assister le travail. Le scénario de conception doit clairement décrire comment les utilisateurs interagiront avec le nouveau système pendant leur travail et comment il modifiera leurs activités. Les scénarios de conception peuvent être écrits comme un storyboard qui contient des dessins de ce que font les utilisateurs. Le scénario de conception couvre les mêmes événements que le scénario de travail, en imaginant comment ils seraient modifiés par l usage du nouveau système. Le scénario de conception sert de base à un prototype du nouveau système, ce qui permet aux utilisateurs comme aux concepteurs d imaginer le futur système et de faire des commentaires et des suggestions. Le tableau récapitulatif Ce scénario m a permis de me faire une idée de la facçon dont serait utilisé AnnotateForm. Nom : Camille Ré Date : Thésarde dans le laboratoire de microbiologie cellulaire. Contexte : Elle utilise souvent Toppred, elle veut retrouver le dernier jeu de paramètres qu elle a utilisé parce qu elle veut obtenir la topologie de certaines protéines membranaires. Elle regarde dans son cahier les paramètres qu elle avait utilisé avec ces données là. Ce scénario met en scène les difficultés actuelles. Il n existe pas de moyen facile permettant refaire une analyse déjà réalisée Prototypage Trois des quatres scénarios ont été prototypés, c est à dire qu on à écrit un storyboard mettant en scène une solution au scénario. Puis on a réalisé un prototype papier pour représenter la scène avant de filmer les interactions. La méthode Comme le développement de logiciel est long et coûteux, il est souvent judicieux de créer un prototype pour déterminer si l approche retenue est satisfaisante et pour évaluer des alternatives éventuelles. Il s agit d utiliser n importe quel outil (prototypes sur papier, logiciel, effets spéciaux ) pour créer l illusion d une interaction réelle entre les utilisateurs et le futur système. Le prototype doit être détaillé et être fondé sur une scénario suffisamment réaliste pour que les utilisateurs puissent juger ce que serait le système réel. On commence par un prototype papier en essayant plusieurs approches, puis dans le cas d interactions complexes on peut utiliser la vidéo ou une interaction simulée. Parfois, le but du prototype est de donner aux utilisateurs la sensation d interagir réellement avec le système, ce qui est impossible puisqu il n existe pas encore. On peut cependant utiliser la technique dite du Magicien d Oz : les utilisateurs interagissent avec une version du système dans laquelle certaines 12

18 fonctions sont en réalité réalisées par des compères jouant le rôle de l ordinateur. Il est également possible de combiner vidéo et système informatique, selon ce que l on souhaite simuler. Le prototype Le prototype a été conçu pour permettre de refaire une analyse déjà réalisée ou une variante. Il a été fait pour Mobyle mais correspond tout autant à la fonctionnalité de navigateur. Le scénario se décompose en trois étapes : Fig. 2.1 liste des derniers formulaires utilisés Elle recherche parmi la liste des logiciels à sa disposition Toppred pour refaire une analyse déjà faite. Fig. 2.2 lancement de l historique Comme elle ne trouve pas Toppred dans la liste, elle clique sur son historique. Les formulaires dernièrement utilisés apparaissent. Puis, elle sélectionne Toppred dans la liste d historique puis sélectionne le jeu de données qui l intéresse. Lorsqu elle sélectionne le jeu de données, celui se place dans le formulaire, prêt à être modifié et/ou relancé. Ce prototypage a permis de de mettre en lumière les différentes étapes d une recherche de paramètres de formulaires. 13

19 Fig. 2.3 Sélection d un jeu de données En utilisant la liste complète des logiciels, qui est très longue, on a du mal à trouver celui qui nous intéresse. Un accès à l historique par nom des logiciels ne semble pas être une bonne solution sans l implémentation d une fonction de recherche efficace. Grâce à un historique, on peut obtenir plus facilement ses dernières analyses. Cependant se pose alors un problème de représentation : Soit les analyses sont groupées par logiciels. Cela entraine une difficulté pour trouver quelle est l analyse qu on veut réutiliser, à cause de l espace réduit utilisé pour représenter les paramètres. Soit les analyses sont classées par ordre chronologique, auquel cas seules les toutes dernières analyses sont faciles d accès. Nous avons ainsi pu prendre conscience des problèmes de présentation des données. Pour y répondre nous avons testé plusieurs versions sur le papier avant d en choisir une. C est un dérivé de la version où les analyses sont regroupées par logiciels, à l aide d un menu déroulant on peut de visualiser rapidement les différents jeux de paramètres. En plus de mettre en lumière les problèmes et d apporter des débuts de solutions, le prototypage des autres scénarios m a influencé en me faisant prendre conscience de la façon précise dont sont fait les formulaires actuels Design walkthrough Un walkthrough est un examen d un produit par des pairs. Les participants se réunissent pour examiner et discuter d une partie du logiciel. Ici, nous nous intéressons à la conception du logiciel du point de vue de l utilisateur. Les Structured Walkthrough (Yourdon, 1979) ont prouvé qu ils étaient l une des méthodes les plus efficaces pour obtenir du feed-back et améliorer la qualité des logiciels. Les règles sont simples : les groupes doivent être de petite taille (3 à 7 personnes), les membres du groupe doivent être du même niveau, le présentateur doit préparer le travail à l avance, la session doit être limitée à une heure au maximum. Le but du walkthrough est d identifier le plus de problèmes possibles, pas de discuter des solutions possibles. Les critiques doivent être aussi positives que possible et doivent être limitées à la partie examinée. Il n y a pas eu de design walkthrough à proprement parler durant le stage, j ai cependant bénéficié des conseils de membres de l équipe, ayant des forma- 14

20 tions de biologiste ou d informaticien. Ensuite j ai bénéficié des réflexions et des remarques des biologistes à qui j ai distribué l extension. Cependant, pour connaître le travail des autres membres de l équipe et avoir une vision critique du code produit, j ai participé à plusieurs programming walkthroughs. Le principe est le même sauf qu on présente du code produit au lieu de l interface. On apporte une ou deux classes importantes et qu on ne trouve pas parfaites. Les remarques des autres membres de l équipe permettent d améliorer son code et de tenir les autres au courant de l avancée de son travail. 15

21 Chapitre 3 Le navigation et le web En même temps que je m intéressais au travail des biologistes, j ai étudié les différents aspects de la navigation avec d une part les navigateurs existants et les manières de les améliorer, d autre part les habitudes de navigation et à la manière dont elles peuvent être liées aux navigateurs, notamment comment les automatiser. L utilisation d internet est conditionnée par plusieurs paramètres que nous allons nous efforcer de découvrir. J ai étudié dans un premier temps la littérature concernant la navigation web, que j ai essayé de relier aux habitudes et aux besoins des biologistes. Je me suis ensuite intéressé aux outils de navigation : selon la plate-forme utilisée, plusieurs navigateurs sont disponibles ayant chacun leurs spécificités, et des améliorations possibles. 3.1 Bibliographie Les articles sur la navigation web mis en perspective avec les entretiens des biologistes permettent de dégager des lignes directrices utiles pour la suite du travail et de faire émerger des formes de navigation connues. Comme nous allons le voir, on peut distinguer plusieurs problématiques qui s intégrent au stage, telle que le caractère répétitif de la navigation sur le web à travers la visite fréquente de pages ou l utilisation de chemins connus pour accéder périodiquement à certaines pages. Une solution à ces problèmes est l automatisation de la navigation, tout en ayant à l esprit certaines idées sur l interaction telle que le l importance du retour utilisateur, la non modalité, la consistance Revisite de pages web Les biologistes font régulièrement des analyses de données (adn, protéines...) qu ils soumettent à des serveurs d applications publiques d universités ou d instituts. Ce faisant, ils reviennent souvent sur les mêmes pages de formulaire pour faire des analyses ou des recherches. D après les analyses de Cockburn[2] sur des journaux de proxy de l université de Canterbury en Nouvelle Zélande, et sur les données personnelles (signets, historique...) d une vingtaine de membres de l université : Environ 81% des pages vues ont déjà été visitées. 16

22 Certaines sont vues pendant un laps de temps très court, c est notamment le cas pour les pages de transition, lorsque l utilisateur parcourt un chemin connu, il sait où se trouve le lien suivant et clique dessus dès qu il le peut. Enfin les utilisateurs gèrent une grande quantité de signets, mais environ un quart ne sont plus valides. De plus on remarque que l ajout de signet est linéaire alors que la suppression est rare, cela entraine une constante augmentation. On peut en retirer les orientations suivantes : Tendre vers une plus grande clarté des comportements du bouton Back (historique à court terme), de l historique (historique à moyen terme) et des bookmarks (historique marqué) [3]. En effet, la navigation n est pas unidirectionelle. Sur le web, on passe son temps à aller et venir, on essaye un chemin et s il n est pas satisfaisant on revient en arrière pour en prendre un autre. Or les outils actuels ne prennent pas en compte le caractère bidimensionnel de la navigation (l historique, par exemple, est linéaire alors que ce devrait être un graphe). Offrir la possibilité d anticiper la navigation ( Look-Ahead Navigation ) par exemple de proposer des raccourcis sur des chemins régulièrement utilisés. La fonction fast forward de Opera, elle, tente de deviner les liens sur lequel on aurait cliqué et entraine l utilisateur sur cette page Automatisation Les biologistes ont a leur disposition assez peu d outils permettant l enchainement automatique d analyses et la création de modèles d enchainement. Une limitation des enchainements existants vient du fait que les applications web ne sont pas forcément compatibles entre elles et chainables, car cela demande un important travail de description des interfaces des programmes. Aussi chaque système d automatisation propose un certain nombre d applications chainables, mais n est pas compatible avec son voisin. De plus, selon le serveur web auquel on se connecte, s il existe un système d automatisation, il sera différent, chaque université ou institut travaillant seul ou en petit comité. Le caractère hétérogène des systèmes d automatisation selon les différents serveurs ne facilite pas l apprentissage et la prise en main de ces outils. Enfin l équilibre entre automatisation et contrôle des traitements et des résultats est difficile à atteindre. Certains systèmes ne correspondent pas exactement aux besoins ou sont trop complexes pour les utilisateurs irréguliers [4] [5] [6] [7]. Lors des entretiens plusieurs biologistes se sont ainsi plaints de ne pas savoir comment retrouver les données intermédiaires ayant servis lors d un enchainement. Une alternative pourrait être que l utilisateur utilise un outil personnel, indépendant des logiciels de biologie, lui permettant d automatiser sa navigation tel que SPHINX[8], WebVCR [9] ou Chickenfoot[10]. SPHINX est un environnement permettant la création de robots (crawlers) personnalisés, propres à des sites donnés et est utilisable par des non programmeurs. L inconvénient de robots tels que ceux créés par SPHINX est qu ils ont des difficultés avec le remplissage des formulaires et les pages dynamiques. 17

23 WebVCR est une autre solution qui permet d enregistrer des sessions de navigation. On peut ainsi les rejouer plus tard, tout en ayant la possibilité de les suspendre ou de les arrêter. Un système tel que celui-ci offre donc un contrôle assez poussé des enchaînements puisqu on peut arrêter pour tenter une analyse différente au moment ou on le souhait dans le déroulement du processus. Enfin Chickenfoot est une extension Firefox permettant l écriture de scripts de haut niveau (de type remplit le champ recherche de telle page avec tel mot). Bien que cette extension soit intéressante, elle ne s adresse principalement aux informaticiens car même si le code à écrire est simple, il demande quelques notions de programmation. Par ailleurs Chickenfoot permet aussi de modifier la façon dont est présenté le contenu d une page web. Toutefois un outil tel que GreaseMonkey couplé à Platypus permet de le faire de manière plus efficace et plus facile. Greasemonkey est une extension Firefox (maintenant disponible sur Opera et Internet Explorer) permettant d écrire des scripts modifiant les pages visitées. En elle même l extension ne fait rien sans ces scripts. C est seulement une fois des scripts spécifiques appelés user scripts installés qu il devient utile. Il permet alors de rendre les sites plus lisibles ou plus facilement utilisables, de corriger des bugs d affichage ou encore d interconnecter des sites entre eux. Platypus permet de ne pas avoir à écrire les scripts mais de les créer en utilisant sa souris, en déplaçant ou supprimant des élements de pages web, comme on édite un texte. Cette personnalisation du rendu est ressortie des entretiens à travers l importance que revêt pour les biologistes la présentation des données de sorties des logiciels. Cela explique en partie leur attachement aux sorties papiers qu il sont libres de manipuler comme ils l entendent. Gâce à ces outils les biologistes peuvent enfin obtenir une présentation personnelle et qui leur soit parlante. Grâce à ces scripts, les biologistes pourraient remplir un formulaire une seule fois et le soumettre en un clic à plusieurs applications. Quant à la modification du contenu, elle pourrait permettre d effacer d une page des paramètres de formulaire que l on utilise jamais, ou encore ajouter sous chaque champ du formulaire la documentation correspondante. Les biologistes pourraient aussi modifier de façon définitive les pages de résultat des applications pour qu elles répondent à leurs attentes. Il pourraient mettre en haut de la page et en gras la partie des résultats qui les intéresse, ou changer la couleur de fond d une page en fonction de la valeur d un résultat pour avoir une réponse visuelle immédiate. On peut aussi offrir aux biologistes des méthodes permettant de manipuler quand ils le souhaitent les pages sur lesquelles ils se trouvent à l aide de commandes de type unix prédéfinies et interprétées par le navigateur [11]. Ils pourraient ainsi obtenir facilement le pourcentage de tel ou tel élément dans une séquence ou trouver toutes les occurrences d un acide aminé dans une séquence Interface utilisateur Plusieurs améliorations sont possibles sur les navigateurs actuels notamment pour rendre la navigation plus confortable et efficace. Elles peuvent, par exemple, porter sur le retour utilisateur ou la fluidification de la navigation. Une technique telle que la navigation par mouvements de souris [12] permet d accélérer la navigation et d en faire quelque chose d inconscient. En effet en 18

24 navigant par geste, c est la mémoire motrice qui entre en jeu, elle est plus efficace et permet au cerveau de continuer à lire ou à analyser un problème, en évitant de devoir porter son attention sur le clavier ou sur un bouton de l interface. Elle réduit le temps moyen pour les tâches de navigation de l ordre de 10 à 20%. Le retour utilisateur Le retour utilisateur (feedback) fait souvent défaut dans les applications web et est un point à retenir pour la conception d interface, notamment dans celles des pipelines. Si on n indique pas ce qui se passe : quelles sont les données traitées, l avancement de l analyse... l utilisateur ressent une perte de contrôle et de confiance en l application [13]. Par contre, si l on prévient l utilisateur de ce qui risque de lui arriver dans le futur, notamment avec des aperçus de pages [14] ou en proposant des exemples de résultats d analyse, il peut se faire une idée rapide de la pertinence des pages et modifier sa navigation en conséquence. La possibilité d évaluer rapidement des sites (en l occurence des pages de résultat) est un besoin qui est ressorti de plusieurs entretiens. La fluidité La non modalité est un autre paradigme important qui consiste à rendre les interfaces aussi peu intrusives et bloquantes que possible. Définition : une fenêtre modale est une fenêtre qui prend le contrôle total du clavier et de l écran. Elle est en général associée à une question à laquelle il est impératif de répondre avant de poursuivre, ou de modifier, quoi que ce soit. La raison est que les boîtes de dialogue créent des interruptions courtes et anti-ergonomiques durant l exécution normale des programmes. Ces boîtes poussent l utilisateur à répondre le plus rapidement possible pour pouvoir exécuter la commande voulue. Il est plutôt souhaitable de modifier la façon dont sont récupérés les paramètres nécessaires au bon déroulement du programme et ainsi fluidifier son exécution. Une méthode possible est celle des user continuations [15]. Cette méthode consiste à forcer les développeurs de l application à spécifier l ensemble des paramètres dont ils ont besoin, ainsi qu une façon de gérer les données collectées, quelque soit le moment ou elle sont entrées. Un exemple simple est la fonction de recherche à l intéreur des pages de Firefox. En lançant la recherche, une barre horizontale contenant un champ de texte apparaît en bas du navigateur. Tant que l utilisateur ne rentre pas de texte dans ce champ, il peut continuer à naviguer sans incommodation. Dès qu il va commencer à entrer une requête, Firefox va réagir en surlignant les réponses possibles, si les résultats ne conviennent pas, on peut continuer à naviguer pour reprendre la recherche sur une autre page. 19

25 3.2 Les navigateurs Le choix du navigateur pour lequel développer était déjà défini dans le sujet, cependant la fondation mozilla développait au début du stage plusieurs navigateurs en parallèle. Et il était intéressant de voir les différentes fonctionnalités offertes par les navigateurs existants, pour avoir une vue globale des outils de navigation actuels Internet Explorer C est le navigateur par défaut de Microsoft Windows. Il supporte la création d extensions ainsi que l utilisation de fonctionnalités de la plate-forme Windows (win32). Cependant suite à l intégration de internet explorer dans Windows l équipe de développement à été dissoute jusqu en 2005 et aucune innovation n a été intégrée en trois ans. De plus il ne supporte pas les standards et n est pas portable Opera Opera est un navigateur payant existant sur de nombreuses plate-formes (Windows, Unix, pocket PC...). Il est destiné aux utilisateurs avancés. C est un navigateur innovant intégrant rapidement de nouvelles idées (il a été un des premiers à intégrer les onglets, à gérer les mouse gestures, à respecter les standards). Il est intéressant à étudier car il préfigure les évolutions des autres navigateurs. Il est ainsi à noter qu il intègre une fonction fast forward (avance rapide) censée deviner en fonction de la page où l on se trouve quelle sera la prochaine page à visiter. Il permet aussi le scripting de page : on peut associer des scripts à des pages ce qui permet de modifier leur rendu Mozilla Le projet mozilla a démarré lors de l ouverture du code de Netscape en Depuis, ce navigateur s est développé et a gagné son indépendance. En 2005 la Fondation Mozilla a décidé d arrêter le développement de Mozilla pour se consacrer, entre autre, à celui de Firefox Mozilla-Firefox Mozilla-Firefox est un navigateur utilisant le moteur de rendu de Mozilla : Gecko. Il est plus rapide et plus léger, multi-plate-forme et facilement personnalisable, il dispose d un base très importante de développeurs salariés ou bénévoles. 20

26 C est ce navigateur qui a été choisi pour être amélioré dans le cadre du stage, pour plusieurs raisons : Son dynamisme : ce navigateur est de plus en plus adopté. Sa pérennité : le code est libre et le projet est soutenu par des centaines de développeurs. Son extensibilité : il possède un système d extensions populaire et facile à installer (un simple clic sur un lien suffit). 3.3 État de l art des extensions Définition : Les extensions sont des petits programmes qui se présentent sous forme d un fichier.xpi et s installent dans les logiciels de la famille Mozilla, permettant d apporter de nouvelles fonctionnalités à l interface. Les extensions sont disséminées sur internet. Bien que quelques sites aient vocation à les regrouper, aucun n est complet. Voici les quatre plus importants : Mozilla Update : géré par la Mozilla Foundation, Extension Room : géré par MozDev, Mirror Extension : fondé par Round Two, une start-up distribuant à la vente une version améliorée de Firefox, Geckozone : le site francophone distribuant des extensions. J ai distingué différentes catégories d extensions ayant des objectifs différents : destinées à la bio-informatiques, améliorant la gestion du presse papier, facilitant la gestion des formulaires, modifiant la visualisation des pages, fluidifiant la navigation Les extensions destinées à la bio-informatique BioFox 1 propose des outils utiles aux biologistes : Transformation de séquences de nucléotides Recherche des séquences protéiques dans différentes bases de données. Analyses de type BLAST (Basic Local Alignment Search Tool) offrant des méthodes de recherche rapide dans des bases de nucléotides et de protéines. BioBar 2 : Permet d interroger de multiple bases de données (38) Propose des liens vers des sites de bioinformatique Possibilité d ajouter sa propre base en modifiant un fichier xml 1 http ://schematron.unl.edu/biofox/ 2 http ://biobar.mozdev.org/index.html 21

27 3.3.2 Les extensions améliorant la gestion du presse papier Copy Plain text : copie dans le presse papier le texte en ignorant la forme (souligné, couleur...) Autocopy 3 : copie directement dans le presse papier ce qu on sélectionne avec la souris. Copy ulr+ 4 : copie l adresse et/ou le titre de la page et/ou le texte sélectionné Les extensions facilitant la gestion des formulaires AutoFill 5 permet d automatiser le remplissage de formulaires de type nom, prénom, adresse... Scribe 6 permet d enregistrer au format html des pages de formulaires et de les recharger plus tard. Autoform 7 se présente sous la forme d une barre horizontale, il permet d enregistrer et de charger des formulaires, et offre la possibilité de sauvegarder automatiquement les formulaires de certains sites Les extensions modifiant la visualisation des pages ContentHolder 8 permet de partager en deux la fenêtre du navigateur. Context highlight 9 permet de surligner dans toute une page un morceau de texte (la recherche permet aussi de le faire). GreaseMonkey 10 permet de modifier le code d une page lors de son chargement donc son aspect et son comportement Les extensions fluidifiant la navigation Fill Files Upload Form 11 permet d uploader plusieurs fichiers à la fois quand plusieurs champs d upload sont disponibles. On peut ainsi quand c est possible charger en une fois plusieurs fichiers à analyser. All in one gesture permet de naviguer en faisant des mouvements avec la souris (retour, onglet suivant, ouvrir dans un nouvel onglet...) d accélérerant ainsi la navigation Les bookmarklets Définition : Un bookmarklet (ou favelet) est un petit programme javascript pouvant être stocké comme une url dans un signet. Il permet d automatiser une tâche que l on exécute souvent. 3 http ://autocopy.mozdev.org/ 4 http ://copyurlplus.mozdev.org/ 5 http ://autofill.mozdev.org/ 6 http ://prismicspiral.com/scribe/ 7 http ://autoform.mozdev.org/index.html 8 http ://piro.sakura.ne.jp/xul/ contentholder.html.en 9 http :// 10 http ://greasemonkey.mozdev.org/ 11 http ://home.scarlet.be/ mgius/fillfilesuploadform/fillfilesuploadform.html 22

28 Les bookmarklets peuvent être utilisés comme des signets normaux. Ils sont donc faciles à utiliser, un clic suffit à déclencher le programme. De plus ils se conforment à un des principes d IHM : le pardon, il faut que l utilisateur puisse revenir en arrière, s il est en confiance, il n hésitera pas à essayer de nouvelles fonctionnalités car il sait qu elles sont réversibles. Dans le cas des bookmarklets, en rechargeant la page on en annule l effet. Ils permettent par exemple : de modifier le rendu 12 d une page : la taille des caractères, des couleurs. d extraire des données d une page web : liens, images, textes, etc. de lancer directement une recherche sur un mot sélectionné. de soumettre une page à un service de validation. Bien que les bookmarklets ne présentent pas autant de possibilités que les extensions, ils ont l avantage d être portables et de marcher avec la plupart des navigateurs quelque soit la plate-forme. Greasemonkey offre des foncionnalités semblables aux bookmarklets mais avec une avancée significative, les actions sont réalisées lorsqu une page donnée est chargée. Cela entraine une automatisation encore plus importante de la personnalisation de la navigation. 12 La façon dont les données sont affichées 23

29 Chapitre 4 Techniques et outils utilisés 4.1 Le développement d extensions Firefox Nous avons vu dans la partie 3.2 quelles sont les raisons qui m ont amené à développer des extensions pour Firefox : la portabilité, la popularité grandissante du navigateur, l architecture de Firefox qui se prête bien aux personnalisations. Nous allons maintenant voir comment fonctionnent les extensions Le mécanisme des extensions Une extension Firefox se présente sous la forme d un fichier.xpi. Il s agit en fait d une archive compréssée au format zip contenant des fichiers de programme, certains décrivant la structure de l extension, d autres modifiant l interface, ou traitant les données et les interactions avec l interface. Ces fichiers sont interprétés et chargés au démarrage de l application. Une extension est construite de la façon suivante : extension.xpi : +- install.rdf +- chrome.manifest +- chrome/ +- extension.jar Le fichier install.rdf permet de décrire l extension dans son ensemble, on indique entre autres : son identificateur (unique), sa version, quelles versions de Firefox sont supportées et où se situe l archive contenant le programme. Les spécifications définissant la composition d une extension changeant régulièrement, plusieurs fichiers de description peuvent avoir des fonctionnalités proches voire redondantes dans une même extension. Ainsi, avant la version 1.0 de Firefox il fallait écrire un fichier install.js, puis entre la 1.0 et 1.1 utiliser un fichier install.rdf, par la suite il faudra utiliser en plus un fichier chrome.manifest. Ce genre de choses est assez symptomatique de Mozilla et Firefox, les spécifications changent régulièrement, et il faut donc se tenir au courant, même quand le développement de l extension est achevé, savoir s adapter et mettre à jour ses programmes. Entrons maintenant dans l extension en elle même : 24

30 extension.jar : +- content/ +- extension/ +- contents.rdf +- fichiers.js +- fichiers.xul +- locale/ +- extension/ +- en-us/ +- contents.rdf +- nom_des_elements_d_interface_anglais.dtd +- fr-fr/ +- contents.rdf +- nom_des_elements_d_interface_francais.dtd +- skin +- extension/ +- contents.rdf +- styles.css +- images.jpeg Elle se compose généralement de trois parties, le contenu de chacune de ces parties est décrit dans contents.rdf. On indique entre autres dans ce fichier les zones et les actions de Firefox modifiées par l extension. Ce sont ces descripteurs qui vont permettre lors du lancement de Firefox de savoir quels sont les fichiers de l extension à charger et quelles sont les parties à modifier. Voyons plus en détails le reste de l extension : content : la partie indispensable à toute extension. On y place les fichiers XUL et Javascript qui vont respectivement ajouter ou modifier l interface utilisateur et gérer les actions de l utilisateur et les données. locale : la partie facilitant l internationalisation des extensions. Il suffit de créer des répertoires aux noms données : en-us pour l anglais américain, fr- FR pour le français métropolitain... Il suffit alors dans les fichiers XUL de l interface d utiliser un mot clé au lieu de coder en dur les noms des éléments d interface et Firefox se charge d afficher dans la bonne langue. skin : la partie rendant possible la personnalisation de l interface grâce à des feuilles de styles. C est aussi ici que sont stockées les images et les icones utilisées par l extension. 25

31 4.2 Les langages utilisés Mozilla et ses dérivés (Firefox, Thunderbird...) sont basés sur le moteur Gecko. C est lui qui interprète les différents langages utilisables avec Mozilla/Firefox et qui peuvent être utilisées par des applications XUL : HTML 4.0 and XHTML SVG, pour Scalable Vector Graphics, est un langage XML pour faire des dessins vectoriels en 2D. L implémentation de SVG dans Gecko sera disponible dans Firefox 1.5. XFORMS est le langage XML du W3C dont l optique est de remplacer à terme les formulaires HTML. XForms comble les limitations des formulaires HTML : séparation des données et des contrôles dans les formulaires, validation coté client, validation des types des données, interdépendance entre les contrôles de saisie, prise en charge d évènements, envoi des données sous forme xml etc. CSS2 et des parties de CSS3 : les Cascading Style Sheets définissent comment afficher des éléments HTML ou XUL, et permettent de séparer la forme du contenu. DOM2 et des parties de DOM3 : le DOM est une interface indépendante de plate-formes et de langages qui permet aux programmes et aux scripts l accès et la mise à jour dynamique du contenu et de la structure des documents. XML est un standard du World Wide Web Consortium qui sert de base pour créer des langages balisés spécialisés ; c est un «méta langage». MathML est un langage de représentation des mathématiques. Plus précisément, il permet de coder une forme sémantique et/ou typographique d un objet mathématique. RDF : voir la partie XSLT est un langage permettant de transformer des documents XML en d autres documents XML. XPath est une syntaxe (non XML) pour désigner une portion d un document XML. Initialement créé pour fournir une syntaxe et une sémantique aux fonctions communes à XPointer et XSL, XPath a rapidement été adopté par les développeurs comme un petit langage d interrogation. Simple XLinks : XLinks est conçu pour préserver la simplicité du mécanisme de liaison de HTML, mais il fournit davantage de puissance et d extensibilité si nécessaire. Les liens simples sont unidirectionnels et associent exactement deux ressources, une origine et une cible. XPointer : il fournit un moyen simple d adresser la structure interne d un document XML. Grâce à XPointer, on peut créer un lien vers n importe quel endroit d une page, sans avoir besoin d ancre comme pour le HTML, et donc sans avoir besoin de modifier la page cible. FIXPtr définit un sous ensemble des fonctionnalités de XPointer. XML Base propose d affecter à un document XML, une adresse URI (Uniform resource Identifier) utilisée comme base pour l ensemble des URI relatifs présents dans les atributs xlink :href des éléments liants. XML-RPC est une spécification et un ensemble de codes qui permettent à des processus s exécutant dans des environnements différents de faire des appels de méthodes à travers d un réseau. SOAP (Simple Object Access Protocol) est un protocole d échange per- 26

32 mettant d invoquer des applications sur des réseaux distribués et décentralisés. WSDL (Web Services Description Language) est le langage de description de web services, permettant aux applications les utilisant d auto-configurer les échanges entre eux. ECMAScript/Javascript voir partie XBL (extensible Bindings Language) : Il répond au besoin d avoir des composants ayant des comportements spécifique, ou regroupant divers composants de bases en un seul, et que l on veut pouvoir ré-utiliser sans réinventer la roue. XBL est un langage XML permettant de réaliser de tels composants. E4X est une api qui a le même but que simplexml pour PHP : apporter une alternative à DOM pour manipuler facilement les fichiers XML. E4X est normalisé par l ECMA et étend la syntaxe de javascript pour accéder naturellement aux éléments d un fichier XML. SQL : La plateforme Mozilla propose une API générique pour accéder à une base de donnée. Elle est livrée sous forme d extensions et supporte pour le moment PostgreSQL, MySql, SQLlite et quelques autres... GIF, JPG, PNG, BMP, ICO sont des formats d images. HTTP 1.1 est un protocole de communication client-serveur. Il est utilisé pour transférer les documents entre le serveur HTTP et le navigateur Web lorsqu un visiteur consulte un site Web. Nous allons maintenant étudier les langages utilisés dans les extensions développées durant le stage XUL Le XUL, pour XML User interface Language, est un langage de balisage permettant de créer des interfaces graphiques riches et dynamiques : On peut facilement construire des onglets, des arbres, des tableaux ou des éditeurs de texte. Les interfaces sont réactives et peuvent être modifiées en partie seulement (pas de rechargement de page). Ce langage a été développé au départ pour créer l interface utilisateur de Mozilla, il à été conçu pour être portable et disponible sur toutes les versions de Windows, Macintosh, ainsi que sur Linux et autres Unix. Le XUL peut être utilisé pour faire des applications comme Mozilla/Firefox, des extensions, mais aussi des application indépendantes. Cependant, il peut aussi être utilisé comme on le ferait d une application web, quand on a besoin de données disponibles sur le réseau et d une interface riche. On peut aussi avoir accès à des interfaces de programmation pour lire et écrire du contenu distant sur le réseau ou pour appeler des services web. Ces interfaces sont accessibles en JavaScript mais sont en fait des objets C++ inclu dans le moteur de Mozilla : Gecko et permettant d accéder à des biblioth`que ce qui évite d avoir à réinventér la roue. Les éléments clés du XUL et ses principaux avantages sont les suivants : Un langage de balisage efficace basé sur des widgets : Le but du XUL est de construire des applications portables. Il est orienté vers des éléments d interface tels que les fenêtres, les étiquettes et les boutons, au lieu de pages, d entêtes en de liens comme pour application web. 27

33 Un langage basé sur des standards : Le XUL est un langage XML basé sur les recommendations du W3C de XML 1.0. Les applications écrites en XUL sont de plus basées sur des technologies définies par le W3C comme HTML, les CSS, DOM, ECMAscript... De plus, Mozilla.org a cherché à faire valider le XBL comme un standard par le W3C. La portabilité : Comme le HTML, le XUL est conçu pour avoir le même comportement sur toutes les plateformes. Rendant ainsi les applications facilement portable d un système sur lequel Mozilla fonctionne à un autre. Si l on considère le nombre de plate-formes sur lesquelles fonctionne Mozilla, c est un avantage important. Comme XUL fournit une couche d abstraction pour les composants d interface, il offre le write-once, run-anywhere (écrit une fois, fonctionne partout). Les interfaces utilisateurs des projets Mozilla sont ainsi écrits une seule pour toutes les plate-formes. Séparation du fond de la forme : Un des problèmes des applications web est le mélange entre les éléments d interface et la logique applicative. XUL fournit une séparation nette entre : la présentation ( skin correspondant aux feuilles de styles et aux images), le contenu applicatif ( content composé du XUL, du XBL et de JavaScript), Le texte propre à la langue du pays ( locale contenant des DTD), Ce degré de séparation produit des applications plus faciles à maintenir par les programmeurs et plus faciles à personnaliser par les designers et les traducteurs. Il existe aussi plusieurs logiciels ou packages permettant de générer une interface graphique à partir de fichiers XUL, notamment des composants Java offrant une surcouche à swing. Toutefois, la pratique est peu répandue et le XUL est surtout utilisé dans des applications liées à Mozilla et ses dérivés JavaScript Le langage Le JavaScript est un langage de programmation interprété ayant une syntaxe ressemblant au C, conçu pour être accessible et facile à utiliser, c est un élément essentiel de la plateforme Mozilla. Les programmes JavaScript ou les fragments de programme sont appelés scripts. En ajoutant des scripts au XUL, on peut rendre les interfaces réactives aux évènements déclenchés par l utilisateur, et ainsi créer des applications interactives. Le moteur Gecko supporte la version 1 édition 3 de ECMAScript, c est la version normalisée du javascript. L implémentation de cette version est appelée JS 1.5 ou encore SpiderMonkey. L interpréteur est codé en C. Les objets Le javascript permet de manipuler des objets, mais il n est pas totalement orienté objet. Voici un tableau tiré de Rapid Application Development with Mozilla [16] présentant le support du concept d objet en Javascript. 28

34 Object system concept Syntax support Ease of use Aggregation High Easy Containment High Easy Delegation High Medium Encapsulation Low Medium Inheritance Medium Difficult Information hiding Low Medium Interfaces None Difficult Late-binding High Easy Object-based High Easy Object-oriented None Difficult Multiple inheritance None Difficult Run-time type reflection High Easy Templates None Difficult Tab. 4.1 Support de l objet en Javascript Écrire de manière totalement orientée objet en JavaScript est techniquement difficile. Le langage est conçu pour la manipulation simple d objets, pas pour la création de classes complexes hiérarchisées. La plupart des objets utilisés dans les scripts JavaScript viennent d un logiciel hôte (ici Firefox) et sont implémentés dans un autre langage. Il n y a pas de définition de classes en JavaScript 1.5. Au lieu de permettre la création d objets en utilisant une spécification abstraite comme une classe, le JavaScript utilise un système de prototype permettant de créer des objets. Plutôt que de créer un modèle qui sera personnalisé on part d un objet pour en créer un autre. Cette méthode est plus flexible qu une méthode basée sur des classes, mais elle complique la syntaxe dès que l on écrire du code un peu complexe. // approche explicite var obj = new Object; obj.foreground = "red"; obj.background = "blue"; // approche lit\ rale var obj = { foreground:"red", background:"blue" } Tab. 4.2 Exemple de création d un objet en Javascript Un autre aspect du JavaScript est qu il ne permet pas le masquage, d informations : si l on compare au C++ ou au Java, il n existe que des propriétés publiques. Les interfaces de Mozilla/Firefox Par ailleurs, des objets hôtes (Host Objects) existent hors du Javascript dans le logiciel hébergeur dans lequel l interpréteur est embarqué. Dans Firefox 29

35 ces objets sont implémentés en C++. Ces objets sont accessibles au travers de simples interfaces internes qui ressemblent à des objets JavaScript, créés par l interpréteur quand on y fait appel. Ils forment un concept propre au JavaScript. Les fonctionnalités scriptables fournies par la plate-forme consistent en un jeu d interfaces. Beaucoup de ces interfaces sont indifférenciables d objets, et sont implémentées comme des objets C++, mais elles peuvent l être en pur JavaScript. Ces Objets fournissent par exemple des fonctionalités d entrée/sortie. On peut ainsi, en théorie, construire des programmes conséquents. En JavaScript on attend donc que beaucoup de fonctionnalités soient implémentées par des objets hôtes. On les appelle interfaces pour faire comprendre qu ils exposent les fonctionnalités de la plate-forme. Ce concept d interface dans Mozilla suit celui de Java ou le concept d interface COM de Microsoft. Du point de vue des script tous les objet hôtes sont similaires, mais ils proviennent de différentes technologies : Des standards du W3C, comme DOM qui décrit une interface de programmation étendue pour les documents XML. Ces interfaces permettent un contrôle complet du contenu des documents. XPConnect and XPCOM. C est un système propre à la plate-forme Mozilla offrant un accès à tous les composants constituant la plate-forme. Ces composants font la plupart des calculs de l application. Et ils représentent une bibliothèque d outils utiles pour la programmation, comme l accès aux sockets. les bindings XBL, le langage de balisage XBL, combine un document XML, JavaScript et des règles de style ajoutant des interfaces scriptables à un document XML. Toutes ces interfaces sont combinées dans l environnement de Mozilla. Firefox offre aussi un support du JavaScript a une plus petite échelle. Certains aspects de la plate-forme comme le système de préférence ou le système d installation ont leur propre environnement JavaScript indépendant. Cela inclut un petit nombre d objets hôtes dédiés à des tâches spécifiques. Les scripts utilisant qui les utilisent sont coupés du reste de la plate-forme et de ses services pour des raisons de sécurité RDF Définition Le Resource Description Framework ou RDF est un modèle, associé à une syntaxe, conçu initialement par le W3C pour permettre de structurer l information accessible sur le web (comme les pages web et les s) et de l indexer efficacement. Le but premier était de permettre à une communauté d utilisateurs de partager les mêmes méta-données pour des ressources partagées. Un des gros avantages de RDF est son extensibilité, à travers l utilisation des schémas RDF qui peuvent s intégrer et ne s excluent pas mutuellement grâce à l utilisation du concept d espace de nom («namespace»). 30

36 On peut donc décomposer le RDF en trois choses : un modèle de description de ressources Web : métadonnées. un langage de repreésentation d ontologies (RDFS). une syntaxe XML pour l échange de métadonnées et d ontologies. Mozilla s est appuyé sur cette structure de données pour stocker ses informations, aussi bien en mémoire que de façon persistante, sous forme de fichiers. Ainsi, l historique ou les signets sont représentés sous forme de graphe RDF. Propriété, ressource et valeur La construction de base en RDF est le triplet {propriété, ressource, valeur}. Le langage de balisage XML est utilisé pour le spécifier. On parle parfois de RDF/XML car d autres formalismes existent. Tout ce qui est exprimé avec RDF est appelé une ressource. La ressource est toute entité d information pouvant être référencée en un bloc, par un nom symbolique (littéral) ou un identificateur. L identificateur est obligatoirement un URI. Une propriété est un aspect spécifique, une caractéristique, un attribut ou une relation utilisé pour décrire une ressource. Chaque propriété a une signification spécifique, des valeurs autorisées, des types de ressources qu elle peut décrire et des relations avec d autres propriétés. Une ressource spécifique associée à une propriété et sa valeur correspondante est une expression ou déclaration («statement») RDF. Ces trois parties : ressource, propriété, valeur, sont appelées respectivement sujet, prédicat et objet. L objet d une déclaration (i.e. la valeur de la propriété associée à une ressource) peut être une autre déclaration RDF (réification) ou un littéral, c est à dire ou une ressource (spécifiée par un URI), ou une chaîne de caractères simple. Observons plus en détail un exemple en utilisant les données de rabidfox : 1: <?xml version="1.0"?> 2: <RDF:RDF xmlns:ns1=" 3: xmlns:rdf=" 4: <RDF:Description RDF:about="urn:copylinker:itemhttp:// 5: NS1:id=" 6: NS1:title="Le Monde.fr : A la Une" 7: NS1:comment="" /> 8: </RDF:RDF> Voici le graphe correspondant à ces données : Le graphe correspond ici à une forme condensée de trois triplets : 31

37 ( urn:copylinker:itemhttp:// " ) ( urn:copylinker:itemhttp:// "Le Monde.fr : A la Une" ) ( urn:copylinker:itemhttp:// "" ) L élément racine RDF :RDF permet à un processeur RDF de repérer le début d un bloc de déclaration RDF. L utilisation des domaines nominaux (déclarations «xmlns») permet d utiliser plusieurs schémas RDF différents. Ici, deux sont utilisés : celui rabidfox copylinker, et celui de RDF qui est obligatoire. La notion d espace de noms est une notion fondamentale puisque c est grâce à lui que l on peut étendre les schémas de méta données sans avoir à en recréer un nouveau, reprenant l ancien. De plus, la déclaration des espaces de noms permet ensuite d utiliser le préfixe abrégé de substitution pour référencer les propriétés décrites. Ici NS1 :id au lieu de http ://gita.club.fr/mozilla/copylinker-rdf id Maintenant, considérons la déclaration <rdf :Description about= urn :copylinker :itemhttp :// >. Il s agit de la déclaration type en RDF des propriétés (c est à dire des méta données) de la ressource dans laquelle nous placerons les valeurs. La ressource est mentionnée dans l attribut rdf :about de l élément <description>. Enfin la propriété et sa valeur sont déclarées ici comme attribut XML, soit NS1 :title= Le Monde.fr : A la Une pour le titre de la ressource. Il est à noter que l élément <description> peut contenir plusieurs attributs. Différentes formes de valeurs peuvent être données à une propriété : une chaîne de caractères littérale, une URI qui fait référence à une ressource, De plus RDF permet aussi l utilisation de containers de ressource : collection (<rdf :bag>), séquence (<rdf :seq>) ou alternative (<rdf :alt>). L utilisation de l attribut rdf :abouteach dans l élément <description> permet ensuite d affecter des propriétés avec la même valeur à un ensemble de ressources. L utilisation de l attribut bagid dans un élément <description> permet lui de réifier les propriétés contenues dans la déclaration RDF. Le langage RDF, grâce à la réification, a la puissance nécessaire pour décrire un système de connaissance. 4.3 Outils de développement Pour ce stage, l effort d apprentissage a plus porté les techniques et l environnement que sur les outils. En effet, aussi bien l environnement de développement Eclipse que le système de gestion de version CVS ou le développement multiplateforme m était familier grâce à mes stages précédents Eclipse Eclipse est une plateforme universelle de développement qui permet l intégration d outils libres. La plateforme à été initialement développée pour la gestion de projets Java par IBM et d autres éditeurs tels que Borland, Red-Hat ou QNX. 32

38 Le code est libre, il suit les règles de la Common Public Licence : CPL. De manière pratique cela se traduit par l existence en plus des fonctionnalités de debogage ou de gestion de version, de plug-ins permettant la gestion de l UML, du XML ou du javascript CVS Le Cooperative Versionning System est le système de gestion de version le plus utilisé. CVS permet de conserver les anciennes versions de fichiers, de savoir quand et pourquoi (sous réserve qu on le dise) des changements on eu lieu. Bien qu aujourd hui des systèmes tels que SVN soient plus performants, CVS bénéficie d une forte base d installation et se commande assez simplement. Il opère sur des dossiers hiérachisés qui correspondent bien aux conceptions objets des programmes actuels. Il permet de gérer les différentes versions d un même fichier ainsi que les versions concurrentes provennant de différents auteurs. De plus, ce système de versionning est très bien intégré à Eclipse, on peut donc facilement faire des sauvegardes et mettre à jour les changements, ou encore extraire une certaine version des sources Les systèmes d exploitations Comme nous l avons vu les biologistes évoluent dans un environnement informatique hétérogène : Mac, Windows, Linux. C est d ailleurs une des raisons qui explique le développement pour Firefox. En effet Firefox est disponible sur toutes les plate-formes et sur des versions anciennes (comme Windows 95). Cependant même si le système d extensions a été créé pour que le développeur n ai pas à se soucier de la machine sur laquelle Firefox est utilisé, il existe des problèmes. Certains ont pu être repéré avant le développement comme par exemple les systèmes de fichiers différents pour l extension drag drop upload. Mais d autres ont été oubliés comme le raccourci de copier différent entre un PC et un Mac, et ont été seulement corrigé après un rapport de bug. 33

39 Chapitre 5 RabidFox Rabidfox est une des extensions Firefox que j ai développé pendant le stage. Elle vise àe faciliter la navigation des biologistes. Plus précisément, elle a pour objectif de créer des raccourcis entre les pages web, apportant par là des améliorations à la navigation : une accélération par un accès plus rapide aux pages désirées, une fluidification puisqu on évite les pages intermédiaires inutiles, une fonction de mémorisation contextuelle, c est à dire des associations de pages entre elles. Suite aux entretiens, les raccourcis à créer entre les pages devaient viser à faciliter l enchainement de formulaires. Deux méthodes permettant de construire ces enchainements ont été envisagées : la méthode explicite : l utilisateur marque lui même les pages qui s enchainent à l aide d un ou deux boutons dans l interface du navigateur. Typiquement, en cliquant sur un bouton de la toolbar, on indique que la page sur laquelle on se trouve est à marquer, quand on appuiera sur le second bouton la page affichée sera associée à la première. Cette méthode n est pas automatique et oblige le biologiste à dire ces choix, mais elle a l avantage du contrôle et de la transparence. la méthode implicite : le biologiste ne change rien à ses habitudes. Il lui suffit d aller d une page à une autre et automatiquement, en fonction de critères définis par la suite les pages sont liées entre elles. Cette méthode demande plus de travail de développement et ses résultats sont moins sûrs, mais elle ne demande pas de surplus de travail aux biologistes Devant le peu d attrait pour les préférences et les personalisations découvert lors des entretiens en début de stage, l attitude implicite a été choisie. De plus face au travail déjà complexe que les analyses demandent il n est pas parut souhaitable de rajouter une nouvelle tâche. Alors qu en début de stage ces deux approches paraissaient antinomiques : si l enregistrement est automatique rien ne sert d avoir un moyen explicite de lier pages, après les entretiens avec les biologistes sur l utilisation des extensions, 34

40 Fig. 5.1 Le menu de raccourcis elles se sont plutôt révélées complémentaires. On peut vouloir lier des pages ne contenant pas de formulaires. Une des améliorations de Rabidfox sera l ajout de la possibilité de lier des pages à la main et d en supprimer. 5.1 Définition des fonctionnalités L extension crée des raccourcis entre les pages de formulaires. Ces pages sont intéressantes car elles correspondent aux analyses (souvent chaînées) que font les biologistes. De plus, les analyses se faisant souvent sur des fichiers de taille moyenne, ou de courtes séquences, le copier-coller est utilisé très souvent pour introduire les données dans les formulaires. Par exemple, si l on veut étudier une protéine, on copie sa séquence d acides aminés puis on la colle dans le formulaire correspondant à l analyse souhaitée. En capturant les pages de copier et de coller, il est possible de les associer entre elles. 5.2 Structure de l extension L organisation de l extension suit le modèle MVC. Il sépare la modélisation du domaine, la représentation et les actions reposant sur l entrée utilisateur. Le modèle MVC est un type de conception bien adapté à la création d extension, leur structure se calcant sur ce modèle : le modèle gère le comportement et les données du domaine d application, répond aux demandes d information sur son état (souvent issues de la vue) ainsi qu aux instructions de changement d état (souvent issues du contrôleur). Il correspond aux fichiers rdf stockant les liens entre les pages de manière persistante et dynamique. la vue gère l affichage des informations, elle correspond au fichiers XUL gérant l affichage les contrôleurs interprètent les entrées clavier et souris de l utilisateur et informent le modèle et/ou la vue des changements nécessaires. Ils sont implémentés en JavaScript et gèrent les changements de l interface qui ont lieu lors de la modification du modèle ou lors d un clic sur un menu. Cette approche pousse à réellement penser l architecture de l application et présente l avantage de permettre une meilleure évolutivité du code produit. Ainsi, on peut réutiliser le modèle si on change la vue, ou utiliser plusieurs vues avec un même modèle grâce à des contrôleurs différents. 35

41 Or comme d une part ce modèle s applique bien aux extensions et que d autre part le code des extensions est ouvert et la documentation rare et éparse, il est courant d aller voir comment certaines fonctionnalités d extensions sont réalisées pour le refaire dans la sienne. Les développeurs d extension tirent ainsi vraiment parti du choix du modèle d organisation du code. 5.3 Modélisation des liens entre les pages Le modèle On distingue deux variantes du modèle MVC : modèle actif et un modèle passif : Le modèle passif est utilisé quand le contrôleur est le seul à manipuler le modèle. Le contrôleur modifie le modèle puis informe la vue qu il l a changée et doit être actualisée. Le modèle actif est utilisé lorsque le modèle change d état sans impliquer le contrôleur. Comme le modèle est le seul à détecter les modifications de son état interne lorsqu elles se produisent il doit indiquer aux vues d actualiser l affichage. Dans notre cas, le modèle est modifié par le contrôleur lors d un copier ou d un coller, nous sommes donc dans le cas d un modèle passif. Les données ont été conçues de façon à ce que le modèle puisse évoluer avec l extension. La structure n est donc pas la plus efficace en terme de mémoire mais assez robuste aux changements de tel ou tel élément. Comme le rdf est un langage assez lourd et demande des métadonnées sur les informations qu il gère (comme le type des données : entier, date...), il est bien adapté à l utilisation qu on en fait. Il permet une meilleure robustesse grâce à un contrôle des données. J ai ainsi pu modifier le modèle lors des différentes versions de l extension tout en conservant une compatibilité avec les versions précédentes et sans que les utilisateurs s en aperçoivent Le graphe Voyons plus précisément le schéma de données utilisé. Un fichier rdf simple, ainsi qu un schéma sont disponibles en Annexe A. À la racine du graphe rdf, on trouve la liste de pointeurs vers chacun des descripteurs de sites référencés dans le graphe. Ces descripteurs de type urn :copylinker :itemurl indiquent : le titre de la page, son url, un commentaire sur la page (facultatif). On utilise un descripteur par url car ainsi on garanti l unicité des données pour chaque url et on évite les redondances. La partie indispensable de l extension : les liens entre les pages, se décrit à l aide d un graphe à trois liens. La page à l origine d un copier crée un noeud de type urn :copylinker :copyurl listant toutes les pages de type urn :copylinker :pasteitemurl décrivant les pages vers où on a collé le texte. Ces noeuds urn :copylinker :pasteitemurl pointent vers les noeuds décrivant la page et la date du dernier copier-coller ainsi que le nombre de copier-coller entre les 36

42 pages. Ces données permettent d améliorer les règles d affichage des liens dans les menus, en n affichant pas les liens les plus récents en premier. De plus il existe des noeuds urn :copylinker :pasteurl pointant vers des noeuds urn :copylinker :copyitemurl décrivant les pages où a eu lieu le copier. Grâce à ces liens allant des pages de copier vers les pages de coller et réciproquement, on est capable de reconstruire les copiers et les collers qui ont eu lieu et de proposer des liens dans les deux sens, alors même que les graphes rdf sont simplement orientés. 5.4 La vue Dans MVC, la vue décrit la partie de l application visible pour l utilisateur. Dans une extension on peut distinguer trois éléments constituant la vue : 1. L interface en tant que telle : les boutons, les menus... Cette partie est décrite dans les fichiers XUL. Dans le cas de Rabidfox, plusieurs modifications sont faites à l interface par défaut de Firefox : l ajout des menus de raccourcis et d une page d information sur l extension. 2. La présentation de l interface : la couleur de fond, les arrondis des boutons... Dans Firefox on utilise des feuilles de styles CSS pour détailler le design. Par défaut, comme c est le cas ici, le thème de Firefox est utilisé pour garder une consistance graphique entre l extension et le reste du navigateur. 3. Les langues, Firefox est un logiciel existant dans plus de 80 langues. Les extensions s intégrant à l application, il est souhaitable qu elles soient dans la même langue que celle du Firefox installé. Pour l instant deux langues sont disponibles : l anglais est par défaut, sauf si Firefox est en français, alors le français sera utilisé. Toutefois comme l extension est libre tout un chacun peut rajouter une langue. L ajout des menus de raccourcis (de liens vers les autres pages) prend quelques lignes XUL mais est assez complexe. Il repose sur un mécanisme de gabarits (templates en anglais) permettant de modeler l interface à partir d un fichier rdf. Les gabarits XUL sont un moyen de produire du contenu pour chaque résultat de requête. Une bonne analogie est celle de résultats d une requête de base de données. 5.5 Les contrôleurs On distingue trois types de contrôleurs dans l extension : ceux redéfinissant les copier-collers, ceux manipulant le modèle et ceux gérant l affichage. D un côté les entrées, de l autre les sorties, entre : la gestion des données. En voici un diagramme 5.2 : Les entrées La capture des copier-coller à été un des problèmes techniques les plus compliqué de l extension avec la définition de la structure de données. Comme Firefox n offre pas d interface d observation des évènements utilisateurs (copier, clic 37

43 Fig. 5.2 Schéma global des contrôleurs sur un onglet...), il a fallut redéfinir le copier-coller (voir handlecopy, dans la figure 5.3). Dans un premier temps, les évènements de copier depuis les différents menus ont pu être capturés, au moyen de la redéfinition d une commande à laquelle fait appel la majorité des copiers, coupers et collers de Firefox : cmd copy, cmd cut, cmd paste. Cependant, tous les raccourcis claviers n ont pas pu être capturés de la même manière. Un raccourci tel qu un copier sur une simple page web utilise bien la commande cmd copy, cependant ce n est plus le cas lorsqu un copier à lieu dans 38

44 Fig. 5.3 Contrôleur des entrées un champ textuel. Les champs textuels sont définis en C++ dans le code de Firefox et il leur est associé directement les raccourcis de copier et de coller. Comme ils sont codés dans le coeur de Firefox, les commandes ne sont pas utilisées mais directement des instructions de copier-coller. Pour résoudre ce problème sans avoir à modifier le code de Firefox, ce qui aurait obligé à délivrer non plus une simple extension mais un navigateur recompilé et modifié, la solution a consisté à capturer les évènements claviers et à filtrer les raccourcis ctrl-c, ctrl-x et ctrl-v pour leur associer un traitement spécifique semblable à celui des commandes correspondantes. Un des premier rapports de bugs est venu d utilisateurs de MacOSX, je n avais pas alors pris en compte la différence entre les raccourcis de chaque plate-forme La gestion des données Une fois les copier-coller capturés, il faut ajouter les liens entre les pages dans la base de données rdf. Firefox offre plusieurs interfaces permettant de manipuler des données rdf, ainsi on n a pas à se soucier de la gestion de la mémoire et des fichiers. Une fois le fichier rdf de sauvegarde chargé en mémoire, Firefox s occupe de répercuter les modifications dans le fichier. Les interfaces permettent aussi de manipuler la source de données rdf avec des instructions de haut niveau disant de rajouter un noeud ou un lien entre deux noeuds. On se dispense ainsi de devoir décrire explicitement les lignes rdf à ajouter ou modifier. Pour pouvoir manipuler les données il aurait été agréable d hériter d une classe gérant déjà le rdf et d implémenter les méthodes propres à l extension. Comme l héritage est difficile en JavaScript, j ai utilisé une méthode plus répandue d agrégation (figure 5.4) ou de composition. Au lieu d hériter, on déclare une nouvelle classe (ici CLRDF) qui implémente dans une variable une classe dont on veut hériter. Définition : Une composition est une manière de combiner des objets simples dans des structures plus complexes. Les compositions permettent de construire des objets évolués à base de briques simples. 39

45 5.5.3 Les sorties Fig. 5.4 Contrôleur des données Fig. 5.5 Contrôleur des sorties Quand on clique sur le menu de raccourcis, il faut que s affichent les liens correspondant à la page sur laquelle on se trouve. Pour ce faire, le contrôleur (figure 5.5) va indiquer au template la source à afficher : le modèle rdf, et quelle partie du modèle considérer : la référence. En XUL, la source de données RDF est spécifiée en plaçant l attribut datasources sur un élément. Ici un url spécial est utilisé rdf :null car la source de données étant stocké sur la machine de l utilisauteur, elle est indiquée dynamiquement au lancement de l extension. La référence sert de base au template pour savoir sur quelle partie de la source il doit faire sa requête. Dans notre extension la référence change en fonction de la page où l on se trouve puisque les liens à afficher dépendent de l url. Pour cette raison la référence est modifiée dynamiquement quand on 40

46 change de page. Une fois la source de donnée spécifiée et la référence du gabarit définie, il faut construire la requête. Dans un gabarit, la requête se situe entre les balises <conditions>. Dans notre cas nous voulons afficher en fonction de l url de la page sur laquelle on se trouve, le titre des pages ou des collers ont été fait depuis des copiers de la page source. Les requêtes permettent de parcourir le graphe rdf à la recherche des informations désirées, il est donc plus facile de construire les requêtes quand on connait la structure de données. Voici une requête extraite de Rabidfox : <menu id="shortcutsmainmenu" label="&copylinker.label;" accesskey="s" datasources="rdf:null" oncommand="launch(event.target.value);"> <template> <rule> <conditions> <content uri="?list"/> <member container="?list" child="?page"/> <triple subject="?page" predicate=" object="?x"/> <triple subject="?x" predicate=" object="?title"/> <triple subject="?x" predicate=" object="?url"/> </conditions> <action> <menupopup> <menuitem uri="?page" label="?title" value="?url"/> </menupopup> </action> </rule> </template> </menu> Voyons comment cette requête à été construite : La référence est un noeud urn :copylinker :copyurl, ce noeud pointe vers zéro, un ou plusieurs noeuds de type urn :copylinker :pasteitemurl, les différents liens sont parcourus grâce à la contrainte <member container=?list child=?page >. Ces noeuds pointent eux même vers les noeuds urn :copylinker :itemurl qui nous intéressent car ce sont eux qui contient les données sur les pages à ajouter dans le menu : le titre à afficher et l url pour qu un clic permette de se rendre sur la page. L affichage est géré dans la partie action du template, on indique là que pour chaque noeud correspondant à la requête, il faut afficher son titre dans un menu déroulant. 41

47 5.6 Retour utilisateur L extension a été distribuée à une dizaine d utilisateurs biologistes ou bioinformaticiens de l Institut Pasteur. Dans un premier temps une démonstration a eu lieu pour expliquer le fonctionnement de l extension et comment l installer avant d être distribuée à des volontaires. Les utilisateurs ont fait dès la présentation quelques suggestions d améliorations comme par exemple avoir la possibilité de gérer ses liens (de pouvoir en supprimer). Il est à noter que la version de l extension distribuée contenait en plus quelques éléments d enregistrement sur la manière dont l extension était utilisée. Après avoir obtenu l accord des utilisateurs, j ai rajouté des compteurs dénombrant l utilisation des menus, pour avoir une idée de l utilité réelle de l extension. Une étude vraiment stricte aurait impliqué la distribution de plusieurs extensions aux comportement légèrement différents, menus placés à différents endroits pour savoir quel est le meilleur emplacement (le plus accessible mais le moins intrusif), contrôle plus où moins poussé de l ajout et de la suppression des liens... Dans un second temps, une fois l extension installée, les premières réactions ont été des retours de bugs que je n avais pas vus. Après quelques jours d utilisation, des entretiens ont eu lieu avec les personnes ayant utilisé l extension de manière active. Il en est ressorti que selon le type d utilisation qui était fait des extensions les satisfactions et les critiques n étaient pas les mêmes : Si l extension est utilisée pour chaîner les analyses, l impression globale de l extension est positive, le nombre de liens inadéquats dans les menus faible et le fait de n avoir rien de spécifique à faire pour ajouter de nouveaux liens est apprécié. Mais si l extension est utilisée pour créer des bookmarks contextuels (des signets propres à une page), alors les menus contiennent quelques mauvais liens ajouté par inadvertance mais l extension est plus largement utilisée. Elle sert par exemple à créer des liens depuis la page de revue de presse de l Institut Pasteur vers les journaux auquels la revue de presse se réfère. Cette dernière utilisation est intéressante car elle n avait pas été prévue lors de la conception de l extension. Des liens entre les pages sont crées en faisant des copier-collers entre des pages sans formulaires. C est un phénomème coadaptatif, nous avons développé une application répondant à un besoin et les biologistes l utilisent pour répondre à une autre nécessité. 5.7 Perspectives Comme nous venons de le voir selon l utilisation faite de l extension les appréciations sont différentes. De la même manière, les souhaits quant aux améliorations possibles dépendent de l idée que les biologistes se font de l utilité de l extension. Dans le cas d une utilisation chainant les analyses, la possibilité de lier plus fortement deux pages serait un plus : à chaque fois qu une page de données est 42

48 modifiée lancer une nouvelle analyse comme celle faîte lors du dernier copiercoller entre les pages. Si l extension sert plutôt à créer des liens contextuels, c est le manque de contrôle qui est à corriger pour permettre de supprimer de liens non pertinents, ou de créer à la main des liens (sans avoir à faire de copier-coller). 43

49 Chapitre 6 Les extensions facilitant la gestion de formulaire 6.1 Drag drop upload Quand les biologistes ne font pas des copier coller de fichiers pour leurs analyses, ils doivent les charger sur le serveur (les uploader). Cependant, dans Firefox, le glisser déposer (drag n drop) marche mal dans les champs HTML de type input file. Selon les discussions de cette fonctionnalité sur Bugzilla, elle doit être implémentée depuis longtemps. Mais certains participant bloquent pour des raisons de sécurité, des scripts malicieux sur des pages web pourraient permettre d envoyer des fichiers sans que l on s en aperçoive. Ces explications sont tout à fait discutables car on peut déjà remplir le champs d upload depuis une page web à l aide d un script, et de plus le glisser déposer fonctionne déjà mais seulement sur le bouton Parcourir (Browse) et pas sur le champs textuel adjacent. Il a donc semblé que l amélioration apportée au navigateur pour les utilisateurs était supérieure à la prévention d un risque déjà existant. Une autre des raisons au manque de cette fonctionnalité est sa dépendance à d autres bugs qui sont en cours de correction. Devant ce problème, un italien, Emanuele Ruffaldi, avait commencé à développer une extension implémentant le déposer dans les champs textuels de type file. Bien que publique, cette extension souffrait de problèmes, elle ne fonctionnait pas correctement : avec les pages contenant des frames quand le navigateur avait plusieurs onglets ouverts avec les pages modifiant le DOM pour rajouter de manière dynamique (sans rechargement de la page) des champs de chargement. Par exemple le site de messagerie gmail.com ajoute des champs de chargements directement dans la page à chaque fois que l on clique sur un bouton. Aussi lorsque la page est parsée lors de son chargement, on ne peut pas savoir qu elle contient des champs de chargement. Par ailleurs, cette extension obligeait à toujours avoir un navigateur de fichiers (Explorer, Finder, Konqueror...) ouvert à côté de Firefox. Or à cause de 44

50 la taille finie des écran, il est peu pratique d avoir côte à côte deux navigateurs (de fichiers et web). Suite à des discussions informelles avec des biologistes, il s est avéré qu un navigateur de fichier intégré dans le navigateur web leur serait justement très utile pour les chargement de fichiers. Aussi après avoir contacté le développeur principal, j ai développé un navigateur de fichier très simple dans Firefox. L extension répondant à un réel besoin des biologiste, elle a été rapidement adoptée par les différents testeurs. Étant déjà rodée, elle n a pas rencontré de bugs et a satisfait les utilisateurs. Bien que l extension telle qu elle existe n ai suscité ni critique, ni souhait d amélioration de la part des biologistes, on peut imaginer la possibilité de rajouter dynamiquement dans la page des champs de chargement dès qu on en a rempli un et ainsi permettre de lance une même analyse différents fichiers La contribution apportée Pour réaliser ce navigateur de fichier, je me suis appuyé sur un modèle de données de Mozilla rdf :http ://home.netscape.com/nc-rdf permettant une construction de l arborescence des fichiers en s appuyant sur des templates. Une fois l arborescence de fichier construite, la barre latérale ajoutée à Firefox, il a fallut gérer le glisser déposer de fichiers depuis la barre dans les formulaires. Le glisser déposer demande l implémentation d une interface décrivant : les données manipulées, l url des données, si on peut déplacer plusieurs objets à la fois. Dans drag drop upload nous manipulons des fichiers. Ces fichiers ont des url différentes selon les plateformes, de plus pour que l utilisateur soit déjà dans une partie utile de son système de fichiers on se place dans son répertoire personnel. Ainsi on démarre dans $HOME sous Unix et dans MyDocument sous Windows. Ma contribution a aussi consisté en un travail de tests dans le but de détecter des bugs existant sur telle ou telle plate-forme à cause de problèmes systèmes de fichiers, et à envoyer des rapports détaillés avec des cas de test sur les bugs n étant pas de mon ressort mais de celui d Emanuele Ruffaldi Le travail collaboratif Ce travail a pu être possible grâce à l ouverture du développeur mais aussi parce que le code de drag drop upload est libre, comme celui de presque toutes 45

51 les extensions. J ai ainsi pu le lire et le modifier sans me soucier de problèmes de droits, à condition que je redistribue aussi mon code. 6.2 Annotation de formulaire Les applications web qu utilisent les biologistes demandent le remplissage de formulaires. Nous avons vu dans les entretiens qu il manque des moyens d enregistrer les analyses réalisées, de les partager avec ses collègues, de pourvoir simplement refaire une analyse avec ou sans modification des paramètres Définition des fonctionnalités AnnotateForm répond à cette demande, c est une extension encore en cours de développement qui permet : 1. d enregistrer les formulaires remplis partiellement ou totalement, 2. d annoter ces enregistrement, 3. de les partager via des fichiers, 4. de charger un formulaire avec des données sauvegardées ou envoyées par un pair Structure de l extension Cette extension suit aussi un modèle MVC dont nous allons maintenant voir les différents éléments. La vue La vue est composée de quatre éléments distincts : 1. Le panneau latéral affichant soit les formulaires correspondant à la page soit tous les formulaires. Ce panneau est accompagné d une boite de texte affichant la note du formulaire sélectionné. 2. Le menu d enregistrement de formulaire et le menu permettant d afficher le panneau latéral. 3. La fenêtre d enregistrement. 4. La fenêtre de présentation et d explication de l extension. Modélisation des formulaires Les formulaires sont stockés dans un fichier RDF. Le noeud racine du fichier ( urn :annotateform :root ) pointe vers des noeuds contenant chacun l url d un formulaires enregistré ( urn :annotateform :item :url ). Ce noeud pointe lui même vers le ou les formulaires enregistré correspondant à l url donné. Un formulaire est définit par : son nom, donné par l utilisateur lors de la sauvegarde. Le nom doit être unique, il sert d identifiant du formulaire enregistré à la fois pour l utilisateur et pour le programme. 46

52 Fig. 6.1 Barre latérale de gestion des formulaires Fig. 6.2 Menu d AnnotateForm sa note, un texte précisé par l utilisateur lors de l enregistrement ou ultérieurement. Ce texte permettra à l utilisateur de s y retrouver entre ses enregistrement ou d ajouter un note explicative s il partage cet enregistrement. Ce champs de note doit aussi permettre d annoter des pages sans formulaire. sa date d enregistrement, elle permet de trier les différents formulaires d une même page pour retrouver facilement, par exemple, le dernier utilisé. 47