1 /31 Boîte à outils d'annotations de cartes et de textes dans un contexte d'application Web

ARROSSAMENA DavidMANIAVAL Romain GARGIOLO PatricePI Raphaël HERRERO Rémi Groupe de projet n°11-12 : Boîte à outils d'annotations de cartes et de textes CLAUDE Guilhaume de BUTTAFOCO Guillaume Conséquences du passage au semestre 4 2 /31

Plan : Présentation Choix technologiques Fonctionnalités Utilisation Bilan Boîte à outils d'annotations de cartes et de textes 3 /31

Annotation de documents : C'est le fait de s'approprier les documents en y ajoutant des informations, des commentaires, des avis personnels des images ou des couleurs. Boîte à outils d'annotations de cartes et de textes Présentation Bilan Choix technologiques Utilisation Annoter ?ButIllustrationFinalité Structure et Fonctionnalités 4 /31

Présentation Le but de notre projet est de réaliser une bibliothèque de fonctions, permettant à un programmeur de concevoir un logiciel, accessible à tous, permettant d’annoter des documents. Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Annoter ?ButIllustrationFinalité Structure et Fonctionnalités 5 /31

Boîte à outils d'annotations de cartes et de textes Présentation Bilan Choix technologiques Utilisation Annoter ?But Illustration Finalité Situation de notre projet par rapport aux différents acteurs Elève Je veux annoter un document. Utilise un ~~~~ ~~~~ ~~~~ Programme Programmeur Programmé par Utilise des ~~ ~~~~ Morceaux de programme Nous : Equipe de projet Programmé par Structure et Fonctionnalités 6 /31

Présentation Le but de notre projet est de réaliser une bibliothèque de fonctions, permettant à un programmeur de concevoir un logiciel, accessible à tous, permettant d’annoter des cartes et des textes. Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Annoter ?ButIllustrationFinalité Structure et Fonctionnalités 5/31

Finalité de la bibliothèque : Faciliter le travail de programmation de tout programmeur offrant la possibilité d'annoter les documents. Boîte à outils d'annotations de cartes et de textes Présentation Bilan Choix technologiques Utilisation Annoter ?ButIllustrationFinalité Structure et Fonctionnalités Les utilisateurs finaux de notre bibliothèque de fonctions, seront des internautes. 7/31

Boîte à outils d'annotations de cartes et de textes Présentation Bilan Choix technologiques Utilisation Annoter ?ButIllustrationFinalité Quel type de documents ? - Texte- Image - Carte- Son Structure et Fonctionnalités Par exemple grâce à des fonctions comme : - changerCouleurZoneTexte - changerCouleurZoneCarte 8/31

1 – Avec quel langage doit-on programmer les moyens d'annotations de cartes géographiques et de textes ? 2 – Comment sauvegarder les annotations ? 3 – Contraintes imposées : Utilisation du DOM et GoogleMaps JavaScriptXMLDOM Boîte à outils d'annotations de cartes et de textes Présentation Bilan Choix technologiques Utilisation Structure et Fonctionnalités GoogleMaps 9/31

JavaScriptXML Boîte à outils d'annotations de cartes et de textes Présentation Bilan Choix technologiques Utilisation Structure et Fonctionnalités 1 – Avec quel langage doit-on programmer les moyens d'annotations de cartes géographiques et de textes ? Javascript Langage de programmation principalement utilisé pour les pages web interactives 10/31 DOMGoogleMaps

1 – Avec quel langage doit-on programmer les moyens d'annotations de cartes géographiques et de textes ? Permet de de capturer les actions de l’Internaute dans le navigateur JavaScriptXML Boîte à outils d'annotations de cartes et de textes Présentation Bilan Choix technologiques Utilisation Structure et Fonctionnalités 11/31 DOMGoogleMaps

JavaScriptXML Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités 2 – Comment sauvegarder les annotations ? XML Langage de codage d'informations grâce à des balises (markup). Présentation 12/31 DOMGoogleMaps

2 – Comment sauvegarder les annotations ? Permet de sauvegarder les annotations dans un format structuré XML JavaScriptXML Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités Présentation 13/31 DOMGoogleMaps

JavaScriptXML Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités Présentation 3 – Contraintes imposées : Utilisation du DOM et GoogleMaps DOM DOM permet de construire une arborescence de la structure d'un document et de ses éléments et d’accéder à son contenu 14/31 DOMGoogleMaps

JavaScriptXML Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités 3 – Contraintes imposées : Utilisation du DOM et GoogleMaps GoogleMaps Bibliothèque de fonctions proposée par Google, qui offre un nombre important de moyens de manipulation de carte, programmée en Javascript. Présentation 15/31 DOMGoogleMaps

JavaScriptXML Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités Présentation Schématisation des différentes technologies utilisées dans notre projet 11/31 DOMGoogleMaps

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation ChoixStructureDéveloppéesNon-développées Structure et Fonctionnalités Nous nous sommes fixés comme objectif, à l'aide de notre commanditaire, de définir et de programmer une bibliothèque de fonctions offrant des moyens d'annotations de cartes géographiques et de textes. Exemples de fonctionnalités d'annotations : - Changer la couleur, la police d’une zone de texte - Créer une marqueur, un trajet, une zone sur une carte Présentation 17/31

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités Diagramme des classes (UML)‏ ChoixStructureDéveloppéesNon-développées Présentation 18/31

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités Organisation objet côté texte ChoixStructureDéveloppéesNon-développées Présentation 19/31

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités Organisation objet côté carte ChoixStructureDéveloppéesNon-développées Présentation 20/31

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités Exemple avec deux polylignes ChoixStructureDéveloppéesNon-développées Présentation 21/31

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités ChoixStructureDéveloppéesNon-développées Fonctionnalités d'annotations de cartes : - Créer intéractivement un marqueur, une polyligne ou un polygone sur la carte - Déplacer un marqueur sur la carte - Changer le zoom, le centre de la carte - Supprimer un marker, une polyligne ou un polygone. Présentation 22/31

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités ChoixStructureDéveloppéesNon-développées Fonctionnalités d'annotations de textes: - Créer intéractivement une zone de texte ou un marqueur sur le texte - Déplacer un marqueur sur le texte - Supprimer une zone de texte ou un marqueur. Présentation 23/31

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités ChoixStructureDéveloppéesNon-développées Fonctionnalités non-développées : - Rédifinir intéractivement une zone de texte (taille, couleur du surlignage...) - Rédifinir intéractivement un marqueur, une polyline ou un polygone. Présentation 24/31

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Utilisation Structure et Fonctionnalités ChoixStructureDéveloppéesNon-développées Ces fonctionnalités ont été mises à disposition des programmeurs à l'aide d'une page Internet. Présentation 25/31

Boîte à outils d'annotations de cartes et de textes CarteTexteDémonstration Bilan Choix technologiques Utilisation Structure et Fonctionnalités Présentation Présentation du Site web intéractif (carte)‏Site web intéractif (carte)‏ 26/31

Boîte à outils d'annotations de cartes et de textes CarteTexteDémonstration Bilan Choix technologiques Utilisation Structure et Fonctionnalités Présentation Présentation du Site web intéractif (texte)‏Site web intéractif (texte)‏ 27/31

Boîte à outils d'annotations de cartes et de textes CarteTexteDémonstration Bilan Choix technologiques Utilisation Structure et Fonctionnalités Présentation Présentation d'une application simple utilisant les fonctions mises à disposition dans notre bibliothèque Demonstration Demonstration 28/31

Boîte à outils d'annotations de cartes et de textes Bilan Choix technologiques Structure et Fonctionnalités Utilisation Présentation Bilan technique : - nouveaux langages et technologies (JavaScript, XML, DOM) - familiarisation avec la bibliothèque GoogleMaps - annotation informatique, quelque chose de nouveau Bilan humain : - Expérience du travail en équipe 29/31

REMERCIEMENTS Nous remercions : - notre tuteur-commanditaire M. Philippe Lopistéguy - notre jury : M. Philippe Aniorté et M. Pierre Cédras - nos enseignants à l'IUT de Bayonne - toutes les personnes présentes dans la salle. Boîte à outils d'annotations de cartes et de textes 30/31

Des questions ? Boîte à outils d'annotations de cartes et de textes 31/31