Rapport Imst

[GIANELLA SEBASTIEN MASTER PRO IMST]
RAPPORT DE STAGE
Application cartographique interactive
Maître de projet : Monsieur Yann de Saint Denis

Université Nice Sophia-Antipolis,
UFR Lettres Arts et Sciences humaines.
www.objectif-multimedia.com
Université Nice SSII – Création de site Web
Sophia-Antipolis -CHERBOURG-
A N N E E -1
20 0 5- - 2 0 0 6
REMERCIEMENTS
Avant de vous présenter, le contenu de mon stage, j’aimerai remercier

d’une manière générale toute l’équipe de la société Objectif. Au sein d’un
groupe de travail très polyvalent, j’ai pu apprécier une ambiance seine
alternant travail studieux, phase de concertation ou encore éclats de rire.
Je souhaiterai maintenant remercier individuellement chaque personne :
Valérie Montrieul ; gérante de l’entreprise, pour ses conseils professionnels,

notamment pour la recherche d’un futur emploi.
Stéphanie Bertault, graphiste, pour sa gentillesse et son talent de créatrice

artistique. (www.illustrateur-jeunesse.com)
Marc Seguin, spécialiste en bases de données et langages, pour sa bonne

humeur et ses nombreuses discussions sur le monde du travail.
Philippe Jean, chargé de clientèle, pour sa générosité, son dynamisme mais

surtout ses blagues quotidiennes.
Enfin, Yann de Saint Denis, spécialiste en multimédia, Internet/Intranet et

maître de stage, pour son suivi sur les phases purement techniques du
projet et la confiance qu’il m’a accordé dès les premiers contacts établis
entre la société et moi-même.
-2-
SOMMAIRE
REMERCIEMENTS ..................................................... 2
SOMMAIRE ............................................................ 3
INTRODUCTION ...................................................... 5
1. / PRESENTATION DE LA SOCIETE ET DU STAGE ........... 6
1.1/ Les activités ............................................................................. 6
1.2/ La stratégie d'Objectif ............................................................ 7

1.2.1/ L'application de gestion de contenu Compoz'it ..................... 7
1.2.2/ La cartographie interactive .................................................. 7
1.3/ Mon rôle ................................................................................... 8
2 / ETUDE DE FAISABILITE ..................................... 9
2.1/ Analyse des besoins................................................................ 9

2.1.1/ Description globale.............................................................. 9
2.1.2/ L’approche ........................................................................ 10
2.2/ Analyse de l’existant. ........................................................... 11
2.3/ Analyse conceptuelle ............................................................ 17

2.3.1/ Les médias ....................................................................... 18
2.3.2/ Le public cible ................................................................... 18
2.3.3/ Les Tâches ........................................................................ 19
2.3.4/ Les technologies ............................................................... 23
2.3.5/ Tableau récapitulatif ......................................................... 24
2.4/ Gestion des contenus ........................................................... 24
2.4.1/ Les types de contenus ....................................................... 25
2.4.2/ Les acteurs ....................................................................... 26
2.4.3/ L’administration ................................................................ 26
2.5/ Organisation du projet ......................................................... 27
2.5.1/ Le matériel ....................................................................... 28
2.5.2/ L’équipe ............................................................................ 28
2.5.3/ Le retro-planning .............................................................. 28
3 / ETUDE TECHNIQUE..........................................30
3.1/ Les diagrammes des cas d’utilisation ................................. 30
3.2/ L’optimisation du SI.............................................................. 32
-3-
3.2.1/ La recherche d’information ................................................ 32
3.2.2/ Gestion des flux d’information ........................................... 32
3.3/ Architecture de la base de données. ................................... 33
3.3.1/ Le dictionnaire de données ................................................ 33
3.3.2/ Le modèle Logique de Données ......................................... 34
3.3.3/ Le modèle Conceptuel de Données .................................... 34
4 / ETUDE CONCEPTUELLE .....................................38
4.1/ Planning réel des tâches effectuées ................................... 38
4.2/ Bilan conceptuel .................................................................... 39
4.3/ Le prototype BackOffice ....................................................... 40
4.4/ Le prototype FrontOffice ...................................................... 40
4.5/ Introduction au choix de la thématique ............................. 41
5 / CAS PRATIQUE ‘VELOROUTE DES MARAIS’ .............42
5.1/ Présentation de la thématique ............................................ 42

5.1.1/ Quelle est la zone géographique analysée ? ....................... 42
5.1.2/ Quels sont les circuits proposés sur la carte ? .................... 42
5.1.3/ Quelles sont les informations à collecter ? ......................... 43
5.2/ Etude graphique et ergonomique ........................................ 43
5.2.1/ Les gabarits et maquettes ................................................. 43
5.2.2/ Les chartes graphiques ..................................................... 49
5.2.3/ Les outils graphiques ........................................................ 50
5.2.4/ Les deux interfaces cartographiques .................................. 53
5.3/ Bilan conceptuel .................................................................... 54
CONCLUSION ........................................................55
TABLE DES ILLUSTRATIONS.......................................56
GLOSSAIRE ..........................................................57
-4-
INTRODUCTION
La formation en Master Pro IMST (Image, Multimédia et Sciences

Territoriales) est composée de deux périodes. La première s’organise autour
de cours théoriques d’octobre à mars et la seconde propose un
apprentissage pratique à partir d’avril avec un stage obligatoire. Ce stage a
la particularité d’être le dernier de mon cursus universitaire, c’est la raison
pour laquelle j’ai décidé de choisir un domaine de réflexion en fonction de
mon profil professionnel.
Ayant travaillé au cours de l’année sur un projet de web-mapping, je me

suis intéressé davantage à ce type de produit. Diverses représentations
existent désormais : GoogleEarth, les SIG mis en place par les
administrations, les cartes interactives… Cette cartographie reflète bien
l’idée directrice de ce Master à doubles compétences et reprend les notions
de multimédia et d’analyse du territoire. Mes démarches pour la recherche
d’un stage se sont logiquement orientées vers une structure ayant les
mêmes intérêts que moi sur ce domaine.
C’est ainsi que je suis entré en contact avec l’entreprise ‘Objectif’ localisée à
Cherbourg-Octeville. Cette dernière cherchait à développer un outil
cartographique pour ses clients. Ils pourraient ainsi mettre eux-mêmes leur
carte sur Internet, y ajouter leurs propres informations et la diffuser. Ce
projet correspondait parfaitement à mes attentes et nous nous sommes
rapidement mis d’accord sur les conditions de notre collaboration. Le stage
s’est déroulé du 10 avril au 28 juillet 2006.
A travers ce rapport, je présenterai tout d’abord la société Objectif et le

projet de stage. Puis, j’expliquerai les choix techniques et fonctionnels dans
l’étude de faisabilité. Je détaillerai ensuite les différentes caractéristiques
techniques à l’aide d’une étude approfondie sur la modélisation du système
d’information. Je présenterai ensuite les résultats conceptuels où nous
dévoilerons les prototypes de l’application. Enfin, le cas pratique ‘Véloroute
des Marais’ montrera les performances et la flexibilité de notre outil sur une
thématique précise.
-5-
1. / PRESENTATION DE LA SOCIETE ET DU STAGE
Objectif (www.objectif-multimedia.com) est une Société de Services en

Ingénierie Informatique (SSII) basée à Cherbourg-Octeville dans la Manche.
A sa création en 1996, l'entreprise ne composait qu'une seule personne. Elle
regroupe actuellement quatre associés et une employée. L’organigramme
de l’entreprise est le suivant :
- Valérie Montrieul exerce à la fois les fonctions de gérante et de
responsable marketing.
- Stéphanie Bertault est directrice artistique ; elle en a charge les créations
graphiques.
- Philippe Jean gère la partie commerciale liée aux activités de l’entreprise,
il est aussi responsable de l'hébergement.
- Marc Seguin est chef de projet en ingénierie informatique.
- Yann de Saint Denis est chef de projet en développement Internet /
Intranet.
Objectif est une SARL (Société A Responsabilités Limitées) dont le

capital s'élève à 10 000 Euros. En complément d'Objectif, naît en 2003 la
filiale 2ilog (www.2ilog.net). Cette société est spécialisée dans l'hébergement
de site Internet, dans l'attribution de nom de domaines et dans le
référencement.
1.1/ LES ACTIVITES
Elle se divise aujourd'hui en trois grands pôles.
Communication et développement multimédia

Le premier pôle regroupe les services de communication et développement
multimédia. Le studio graphique d'Objectif propose la création d'identités
visuelles pour support papier ou informatique : logos, illustrations, etc.
Développement informatique
Ce pôle regroupe les activités informatiques de l'entreprise. Objectif
intervient dans le développement de sites Internet, Intranet et Extranet.
-6-
Cela implique la réalisation de sites statiques et dynamiques de diverses
natures (commerce en ligne, Extranet sécurisé, etc.), d'étude et
d'intégration de bases de. Enfin, le service de développement d'Objectif
consacre une partie non négligeable de son temps (environ 25%) à des
travaux de recherche développement.
Formations liées au monde d'Internet

Enfin, Objectif propose toujours des formations liées à la communication
interactive et au monde d’internet. Elles sont avant tout destinées à des
professionnels. Ces formations s'appliquent à différents niveaux et à
différents domaines : initiation et perfectionnement à des logiciels
(Photoshop, Flash...), aux techniques de référencement, aux langages de
programmation (PHP, MySQL...) ou à l’administration de serveurs.
1.2/ LA STRATEGIE D'OBJECTIF
1.2.1/ L'application de gestion de contenu Compoz'it
C'est toujours dans un soucis de répondre aux attentes de ses clients mais
aussi d’offrir à leurs sites un niveau supplémentaire de dynamisme et
d’interactivité qu'Objectif a créé Compoz’it (www.compozit.com). Compoz’it
est une application de gestion de contenu en ligne1. Elle permet d'alimenter
et de mettre à jour du contenu à plusieurs niveaux : modification d'un
contenu existant, création de nouvelles pages et de rubriques complètes...
Compoz'it ne requiert pas de connaissances particulières en matière de
programmation ou de développement et peut être utilisé à partir de
n’importe quel poste connecté à internet. Elle offre par ailleurs des
possibilités de gestion d'utilisateurs (attribution de statuts, de droits quant à
la modification et à la publication d'informations), d'édition de newsletter,
de duplication de pages, etc.
1.2.2/ La cartographie interactive
Objectif s'est aussi illustré par la réalisation de modules de cartographie

interactive pour divers organismes comme la mairie de Cherbourg
(www.ville-cherbourg.fr) ou l'office HLM du cotentin. Ces cartes permettent
-7-
d'offrir une localisation et une représentation physique de l'information. Il
s'agit par exemple pour la municipalité de Cherbourg de proposer une carte
indiquant des données géographiques (nom de rues...) ou des informations
pratiques (bâtiments administratifs, écoles, infrastructures sportives...). Ces
cartes offrent un certain nombre de fonctionnalités et d'outils qui leur donne
une valeur ajoutée par rapport à un plan papier classique.
1.3/ MON ROLE
Le projet que l’on m’a confié s'apparente à la fois à la gestion de contenu et

à la cartographie interactive. Il consiste à l’élaboration d’une application
cartographique construite en Flash sur Internet. Celle-ci proposera à
l’usager de créer sa propre carte interactive à partir d’une interface
d’administration. Après avoir charger un fond de carte, il pourra composer
lui-même les différentes couches de sa carte. Ainsi, il gère les ajouts, les
modifications et les suppressions d’éléments. Ces éléments peuvent être
des pictogrammes contenant des informations (des photos et des textes)
et/ou des tracés (routes, circuits…).
Lorsque sa carte est terminée, il la rendra accessible via l’application

publique. Les internautes auront alors la possibilité de naviguer sur la carte
à l’aide d’outil comme le zoom, le déplacement ou encore de faire une
recherche rapide pour trouver un lieu. Toutes les informations relatives aux
pictogrammes et aux tracés seront consultables. Enfin, une impression
papier de la carte est envisageable, accompagnée d’un titre et de notes
personnelles.
Cette application s'inscrit avant tout dans le cadre du travail de recherche et

de développement réalisé par Objectif. Ce projet correspond au souhait de
l'entreprise de faire évoluer les outils de gestion de contenu qu'elle propose.
Il rentre dans une logique de dynamisme et d'interactivité supplémentaire
pour les webmasters et autres personnes en charge de la gestion d'un site.
Nous répondrons ainsi à ces demandes de plus en plus importantes.
-8-
2 / ETUDE DE FAISABILITE
Nous avons commencé par la rédaction du cahier des charges fonctionnel

afin de mieux cerner les objectifs et contraintes du projet. Ce document
d’une vingtaine de pages a été présenté à l’entreprise puis validé par M. de
Saint Denis. Nous reprendrons dans cette étude les principales parties de ce
cahier des charges. Nous traiterons d’abord de façon générale les besoins
émanant de ce projet. Nous nous intéresserons ensuite à l’analyse
concurrentielle afin de comparer et de percevoir plus facilement les limites
du produit. Puis, nous détaillerons les différentes phases de l’analyse
conceptuelle à travers les médias concernés, le public cible, les
fonctionnalités à développer et les technologies à mettre en œuvre. Nous
expliquerons ensuite le déroulement de la gestion des contenus. Enfin, nous
aborderons l’environnement dans lequel va se concevoir le projet
(organisation, planning…).
2.1/ ANALYSE DES BESOINS
2.1.1/ Description globale
Pour aborder ce projet, il nous faut brièvement expliquer les aspects de

forme et de fond :
* Le premier s’oriente plus du côté technique et donc de la forme que doit

prendre l’application. L’outil sera composé, d’une interface visible à tout
public (FrontOffice2) et d’une interface de mise à jour (BackOffice3).
L’objectif principal consiste à coupler ses deux interfaces pour qu’elles
forment un espace utilisant la même structure d’information et ergonomie.
Grâce à cela, l’utilisateur lambda pourra actualiser sa carte sans être gêné
par un changement d’environnement à l’écran.
* Le second concerne plus le contenu de l’application et définit la

thématique abordée. A partir d’un fond de carte, le visiteur pourra naviguer
sur ces cartes et consulter les informations actuelles. De plus, s’il en a les
droits ; il aura l’opportunité d’ajouter, de modifier ou de supprimer les
-9-
composants de cette carte. Notre sujet de réflexion porte sur les circuits
touristiques proposés par une agence de voyage. L’idée va être de
présenter sous forme de carte les programmes des circuits pour une
destination. Elle détaillera alors les différents lieux à partir de photos et de
textes.
2.1.2/ L’approche
A travers plusieurs mots-clés, nous allons dégager les axes directeurs du

projet :
Personnalisation
Pour obtenir une carte personnalisée, des outils spécifiques seront mis à
disposition. Ils permettront d’enrichir le fond de carte par des
commentaires, des photos, des pictogrammes…
Lisibilité
L’espace cartographique ne doit pas ‘noyer’ l’utilisateur dans la quantité
d’information fourni sur la carte. Ainsi, nous opterons pour une navigation
très intuitive prenant en compte les habitudes et les repères de navigation
des internautes. Cette facilité de navigation devra être également présente
sur la partie administration de l’application. Cette dernière devra en effet
être identique à l’interface grand public avec en supplément les palettes
d’outils indispensables pour apporter des modifications à la carte.
Impression
L’intérêt de concevoir un outil personnalisable est évidemment de pouvoir
exploiter au maximum le résultat final. Ainsi, il serait intéressant de pouvoir
réutiliser les informations créer sur support papier. Ce serait notamment le
cas en éditant un carnet de route récapitulant les caractéristiques d’un
itinéraire.
Promotion
La carte est un outil d’échange interactif mais également de promotion. Il
faut donc se placer dans une logique commerciale où l’objectif va être de
- 10 -
vendre les services de l’agence. Ainsi, il est important de bien cerner les
besoins et les attentes des visiteurs. L’espace cartographique apparaîtra
comme un support supplémentaire venant apporter une plus value au site
Internet en lui-même. C’est à travers les différentes informations
disponibles notamment les photos et la représentation géographique que
l’outil complétera la démarche commerciale du site Web.
2.2/ ANALYSE DE L’EXISTANT.
Afin de mieux cerner les besoins et contraintes que peuvent engendrer cette
application, nous listerons d’abord les sites et applications similaires au type
d’application que nous souhaitons réaliser. A travers un tableau comparatif,
nous détaillerons chacun d’entre eux à partir d’un bref descriptif, les aspects
positifs, les contraintes, le niveau d’interactivité*, le BackOffice et un
commentaire résumant l’idée directrice de l’outil. Ensuite, nous recenserons
les principales caractéristiques des sites de tours opérateurs. Ainsi, nous
présenterons les différents types de contenus en attachant une attention
particulière à la façon dont sont présentés les circuits touristiques.
- 11 -
Quark et Plug-Ins
http://www.tregorgoelo.com/Cartographie.html ?wpid=11579
Descriptif
Carte du pays touristique Trégor Goelo en Bretagne. Elle présente un large éventail
d’activités possibles dans cette localité (patrimoine culturel, nature, loisirs,
randonnées…). A partir d’un espace prédéfini (carte toujours à l’état initial, échelle
1:1), l’internaute choisi à partir de pictogramme, l’information qu’il souhaite voir
apparaître sur la carte. Il peut ensuite à partir de cela visualiser les informations
(descriptif, photo, vidéo, audio) en rapport avec une activité sur un lieu précis.
Aspects positifs Le BackOffice
• Design, ergonomie. Il n’y a pas de partie administration
• Choix des activités avec directement disponible, cependant
mémorisation des favoris (principe l’usager doit effectuer des actions sur
du ‘panier’ sur les sites de e- l’application. Il doit déplacer certains
commerce) objets pour aboutir à un résultat
• Aide contextuelle. (affichage d’une activité sur la carte,
Les contraintes stockage d’une activité dans son
• Navigation expliquée car ‘panier’). Ce type d’action est similaire

différente, pas trop intuitive à celle de mise à jour, c’est pourquoi il
(glisser/déposer) pouvait être intéressant de relever
• Lisibilité difficile sur certain survol. cette application.
Niveau d’interactivité
Simple
Commentaire :
L’originalité de cet outil est la navigation proposée aux internautes où l’utilisation
de la fonction (cliquer/déplacer) n’est pas communément utilisée. L’interface
bénéficie d’une ergonomie et d’un design très soigné ce qui n’est pas négligeable
compte tenu de la navigation proposée.
- 12 -
Eole production
Descriptif :
Carte du Morbihan indiquant les travaux en cours dans ce secteur. Plusieurs
couches sont visibles (zone urbaine, voie express, hydrologie, routes, chemin de
fer…). L’internaute a la possibilité de calculer ses propres distances avec l’outil
‘règle’ et des périmètres. Un moteur de recherche est également disponible pour
localiser rapidement une ville ou un lieu avec travaux.
• Design, ergonomie. Nous ne possédons pas
• Carte géoréférencée, faciliter d’établir une d’information particulière a
échelle à chaque niveau de zoom. propos de la mise à jour des
• Lisibilité de l’espace cartographique (boîtes données. D’après ce qui est
à outils, carte, légende, recherche…) indiqué sur le site, des
• Moteur de recherche efficace. échanges de fichiers sont
Les contraintes possibles à partir d’une
• Espace vide (blanc), sans information lors interface externe à l’application

du déplacement de la carte. Flash.
• Choix de certaines couleurs (sémiologique

cartographique).
Niveau d’interactivité
Web-mapping
Commentaire
La simplicité de cette carte interactive est démontrée par une navigation intuitive.
La fenêtre de navigation pour se localiser rapidement sur la carte une fois un zoom
effectué et le moteur de recherche sont les deux éléments facilitant la
compréhension et l’accès rapide à l’information recherchée.
- 13 -
Actigraph
http://espace.actigraph.com/cartographie/twisto/
Descriptif
Carte du réseau de transports urbains de la ville de Caen. Elle présente les
différentes lignes de bus et de tramway en semaine, le week-end et les lignes
spécifiques aux transports scolaires. Les informations affichables sont les noms des
rues, les points de vente et les lieux publics et les lignes du réseau. Il est possible
d’effectuer une recherche sur un arrêt de bus et de le localiser directement via le
résultat de celle-ci.
• Occupation de l’espace, plein La gestion de la mise à jour des
écran. informations sur la carte s’effectue par un
• Navigation intuitive sous forme module d’administration composé de Flash
de bouton. et de formulaires HTML. La console de
• Lisibilité des contenus. mise à jour propose l’ajout de
• Rapidité d’accès à l’information. pictogrammes (4 types : Arrêts, Point de
• Interface/ charte graphique vente, Travaux, Lieux publics) directement

cohérente. sur l’interface. Une palette d’outils est
Les contraintes mise à la disposition de l’administrateur.
• Niveau de zoom trop important Celle-ci regroupe entre autre la saisie du

avec recentrage sur l’endroit texte, sa mise en forme (justification,
cliqué. taille, positionnement), la mise en forme
• Transparence du fond de carte du pictogramme ‘Arrêt’ (Longueur,
inversé. rotation, positionnement) ou encore la
• Les couches affichables ne sont flèche indiquant le sens de direction de la

pas directement aperçues. ligne. L’interface sous forme de
Niveau d’interactivité formulaires HTML offre la possibilité de
Web-SIG. renseigner par exemple la nature des

travaux, leur durée, les arrêts concernés
par ceux-ci…
Commentaire
Cette application contient de nombreuses fonctionnalités. L’intérêt majeur reste le
module de mise à jour. En effet, ce dernier est directement accessible depuis
l’application. Sous forme d’une fenêtre, la personne responsable de l’actualisation
de la carte pourra très simplement ajouter des informations en glissant et déposant
des pictogrammes sur la carte.
- 14 -
Après avoir consulter plusieurs sites Internet de tours opérateurs
(SunnyDream, Nouvelles Frontières, Promo Vacances…), nous avons pu
constater que la mise en page du contenu est toujours la même.
Les rubriques de ‘Circuits’ disponibles donne accès à une liste des
destinations (par pays, par ville ou par région). Une fois, la destination
choisie, plusieurs types de circuits sont proposés. Chaque circuit est
présenté sous forme de vignettes comme le modèle ci-dessous :
Fiche du circuit
Nombre de jour – Titre du Prix – Tarifs

circuit
Services compris
PHOTO ( V o l/ C ir c u it / H ô t e l/ R e p a s )
D é p a r t : Ville A r r i v é e : Ville
Date de validité : JJ/MM/AAAA Plus d’infos
D e s c r i p t i o n b r è v e d u c ir c u it : … … … … … … … … … … … … … … … … … … … … … … … … … …
………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………….
A partir de cette représentation, l’internaute peut visualiser le programme

du circuit en détail. Quatre liens hypertextes renvoyant tous sur ce
programme sont intégrés dans chaque vignette et sur les éléments
suivant : photo, titre du circuit, prix et un bouton ‘Plus d’infos’. Par
conséquent, trois contenus différents sont utilisés pour faciliter l’accès au
détail du circuit : la photographie, l’image (bouton) et le texte.
Le programme du circuit s’affiche ensuite dans sa totalité, en reprennent en

entête les informations contenues dans la vignette précédente :
- 15 -
Programme
Jour 1 Départ de France
………………………………………………………………………………………
………………………………………………………………………………………
Jour 2 Lieu 1 (Monuments, villes, activités)
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
Jour 5 Arrivée en France
………………………………………………………………………………………
………………………………………………………………………………………
PHOTO 1 PHOTO 2 PHOTO 3 PHOTO 4
Le détail du circuit est présenté par journée. Un paragraphe décrit ensuite

brièvement le contenu de chacun d’entre eux. Pour donner un aperçu des
sites visités, des photos illustrent le texte écrit.
A noter que le programme est la plupart du temps suivi de quelques
recommandations ou informations pratiques portant sur une journée ou une
visite en particulier.
Pour permettre à l’utilisateur de garder sur une trace papier de son
programme, le site offre la possibilité d’imprimer celui-ci.
- 16 -
Remarque
Nous distinguons trois niveaux d’interactivité sur les applications

cartographiques Web :
1/ Niveau basique ou simple : La carte et ces composantes (légende, titre…)

sont quasiment les seuls éléments affichés. La carte est simplifiée,
l’utilisateur se contente de visualiser l’espace proposé. Cependant, des zones
cliquables fournissent des informations pré-définies au format HTML.
2/ Niveau intermédiaire ou Web-mapping : Tout en partant du principe de

base, des outils viennent se greffer à la carte tels que le déplacement, le
zoom (le changement d’échelle) et l’affichage de différentes couches.
3/ Niveau Web-SIG : Il s’agit de proposer des outils identiques à un logiciel

SIG (Système d’Information Géographique) comme MapInfo ou Arcview. Il
reprend donc les caractéristiques du Web-mapping. D’autres fonctionnalités
viennent s’ajouter à cela comme l’acquisition de données exporter, la
manipulation de fichier (ajout d’une donnée) ou plus globalement la gestion
des données via une console d’administration. Par exemple, la possibilité de
mettre à jour via le backOffice de l’application des informations.
2.3/ ANALYSE CONCEPTUELLE
Nous allons ici nous intéresser à la partie conceptuelle du projet, nous

définirons tout d’abord le contexte met tant en relation les futurs
utilisateurs, les fonctionnalités de l’outil et les contraintes techniques. Nous
commencerons par expliquer les supports sur lesquels l’application sera
diffusée. Nous préciserons ensuite le profil de chaque utilisateur, avant de
détailler les tâches qui leur seront proposées. Puis, nous élaborerons une
proposition des différentes technologies à utiliser pour la réalisation. Pour
finir, nous récapitulerons dans un tableau les différentes fonctions
accessibles en mode en ligne et hors ligne.
Le contexte nous permet d’analyser le projet dans son environnement. Ce

dernier devra permettre à l’usager (et selon ces droits) d’obtenir des
contenus éditables, informatifs et interactifs. La fonction d’édition concerne
essentiellement la facilité de mettre à jour de l’information. L’aspect
‘informatif’ ne nécessite pas d’actions spécifiques de la part de l’internaute,
il se contente visualiser les éléments affichés (textes, photos, images).
L’aspect ‘interactif’ demande un investissement supplémentaire de
l’utilisateur, ce sera le cas pour ajouter un nouvel objet sur la carte ou
- 17 -
encore compléter une fiche sous forme de formulaire relative à l’ajout de
cet objet. Nous tenterons alors de minimiser ses difficultés d’utilisation en
mettant en place des technologies adaptées.
2.3.1/ Les médias
L’application sera probablement développée pour deux supports. Ces

derniers permettront une diffusion en ligne et hors ligne de notre outil.
L’application doit être fonctionnelle sur Internet, son accessibilité est
maximale puisqu’elle pourra être consultée à partir de n’importe quel
ordinateur ayant une connexion Internet. Une version CD Rom est
également envisageable afin de consulter l’application sans connexion Web.
La version la plus complète et la plus complexe à mettre en œuvre est
l’application en ligne. Celle-ci nous offre davantage de possibilité pour
traiter son contenu de façon dynamique. C’est pourquoi dans la suite de
cette analyse nous privilégierons la description de cette version.
2.3.2/ Le public cible
Différents types d’usagers sont susceptibles de se rendre sur l’espace

cartographique. Nous distinguons trois profils : Visiteur,
Gestionnaire/Editeur et Administrateur.
a) Le visiteur
Ses caractéristiques : il concerne l’internaute lambda. Cependant, le profil

de celui-ci va être différent suivant la thématique traitée. Ainsi, si
l’application montre les différentes randonnées pédestres du Cotentin, elle
intéressa plutôt un public de pleine aire et sportif comme des randonneurs
mais aussi des familles (tourisme). Par contre, si la carte détaille des
circuits relatifs aux monuments de la Grèce Antique, elle motivera
davantage un public voulant découvrir le patrimoine culturel et historique
grecque. Par conséquent, le profil du ‘visiteur’ est difficile à cerner, il est
très hétérogène et dépend des intentions de l’individu.
Ses actions : il a accès à la partie dite ‘public’ (FrontOffice). Ses droits sont
donc limités, il se contente de visualiser les informations. Il peut néanmoins
imprimer, exporter certains éléments de l’application (programme des
circuits…) ou encore ajouter des notes personnelles à la carte.
- 18 -
b) Le gestionnaire (l’éditeur)
Ses caractéristiques : il fait partie des utilisateurs privilégiés avec

l’administrateur. Plusieurs personnes peuvent être considérées comme
gestionnaire. Le gestionnaire a en général participé à la création de la carte.
Il possède un compte personnel avec identification et mot de passe sur
l’application.
Ses actions : il a accès à la fois au FrontOffice et au BackOffice. Il possède
plus de droits notamment sur la mise à jour de la carte. Il peut créer,
modifier ou supprimer des éléments situés sur la carte. Une fois les
modifications apportées, elles n’apparaissent pas directement sur le
FrontOffice, elles sont en attente de validation par l’administrateur.
c) L’administrateur
Ses caractéristiques : il fait également partie des utilisateurs privilégiés.

Afin de limiter les erreurs de mise à jour, une seule personne possède
généralement ce type de profil. Il possède également un compte avec
identification et mot de passe sur l’application.
Ses actions : il a évidemment accès au FrontOffice mais aussi au
BackOffice. Il possède tous les droits sur l’application. Il a la possibilité de
créer, modifier ou supprimer des éléments situés sur la carte. De plus, il
gère la validation des modifications des gestionnaires et par conséquent la
validation finale pour la mise à jour de l’application.
2.3.3/ Les Tâches
Cette partie correspond à la description des différentes tâches disponibles

sur l’application. Le niveau d’interactivité de l’outil est maximal, il s’agira
donc d’un Web-SIG. Afin de mettre directement en relation le profil de
l’utilisateur et les actions qu’il peut réaliser, nous distinguerons les tâches
FrontOffice et BackOffice.
a) Liste non-exhaustive des fonctionnalités FrontOffice
Le zoom :
L’utilisateur a la possibilité de réduire (vue plus globale) ou d’augmenter
(vue plus précise) une zone de la carte.
- 19 -
Les flèches directionnelles :
Elles permettent de multiples solutions pour s’orienter sur la carte (Nord,
Est, Sud et Ouest).
La fenêtre de navigation :
Son objectif est d’avoir une vision globale de l’espace cartographique
analysé et de se repérer géographiquement sur le support. Il s’agit d’une
carte à échelle réduite fixant l’emplacement actuel de la carte. Un bouton
permet une remise à l’échelle (1:1) initiale de la carte.
L’échelle :
Suivant le sujet traité et l’information qui sera analysé, l’indicateur de
l’échelle aura son importance. Celle-ci variera nécessairement en fonction
du niveau de zoom qui est appliqué.
Le moteur de recherche :
Une boîte de dialogue s’affiche et demande à l’utilisateur de saisir le nom
d’une ville ou d’une localité. Lorsqu’il valide sa demande, une liste de
réponses apparaît. En choisissant l’un des résultats, la carte effectue un
recentrage sur la localité mettant alors en évidence sa sélection.
Les couches de bases :

Ce sont les informations que nous pouvons qualifier de communes quel que
soit la thématique choisie. Parmi celles-ci, se trouvent les couches de villes,
du réseau routiers ou encore des fleuves. Nous comptabilisons au maximum
six couches de base par thème.
Les couches thématiques :

Il s’agit des différentes couches en relation directe avec le sujet traité, elles
vont renseigner des données qualitatives ou quantitatives suivant la requête
exécutée. Ces données offriront notamment des informations précises sur
un objet sélectionné.
- 20 -
Les informations :
Des informations pratiques (nom de ville, de circuit, bâtiment, activité, e-
mail, adresse…) concernant un objet (ex : un pictogramme) seront
présentées sous forme de fiches descriptives. Pour enrichir le contenu
d’information, des illustrations avec des photos, des images ou
éventuellement des vidéos pourront y être ajoutées.
L’impression :
Lorsque l’utilisateur a trouvé l’information recherchée et qu’il souhaite
terminer sa visite par une impression, l’interface est quelque peu modifiée.
En effet, le mode impression doit être sélectionné. Ce mode masque les
fonctionnalités d’exploitation de la carte. Il faut privilégier la carte, sa
légende, ses indicateurs (échelle, titre…) et les informations du visiteur.
L’export :
L’un des éléments qui va intéresser le plus l’utilisateur est la composition du
programme des circuits. Afin de garder une trace de l’organisation d’un
séjour, il serait utile de pouvoir l’exporter et de pouvoir le consulter sans
nécessairement être reconnecter sur l’application. Il s’agira alors d’éditer un
véritable carnet de route de chaque circuit.
b) Liste non-exhaustive des fonctionnalités BackOffice
Le fond de carte :
Suivant la thématique choisie, l’utilisateur pourra charger son propre fond
de carte. Le chargement s’effectuera à l’aide d’une boîte de dialogue
proposant la recherche d’un fichier sur le disque dur de l’ordinateur. La taille
(longueur et largeur) du fond de carte correspondra à la zone
cartographique (emplacement prévu pour la carte dans la charte). Il faudra
alors voir si nous appliquons une redimension du fond de carte.
Les couches :
Nous distinguons deux types de couches : les couches dites ‘statiques’ et
‘dynamiques’.
Les couches ‘statiques’ sont des couches préétablies, déjà créer, il suffit
simplement de les charger (format vectoriel de préférence) sur le fond de
- 21 -
carte. Ce type de couche est amené à peu évoluer (localisation des villes,
des routes) et ne contient généralement pas d’informations supplémentaires
autres que celles qui sont affichées.
Les couches ‘dynamiques’ sont crées directement depuis l’interface. Une
couche est composée de plusieurs objets. Ces objets correspondent à un
type de données par exemple un lieu, un danger, une activité…. Il est donc
possible d’ajouter une nouvelle couche, de modifier son contenu et de la
supprimer.
Evidemment, toutes ces couches auront toutes la même taille (largeur et
hauteur) que le fond de carte chargé initialement.
Les objets :
Les objets d’un même type seront stockés sur une même couche pour
faciliter ainsi l’affichage ou le masquage de la couche. L’utilisateur peut
donc ajouter, modifier ou supprimer un objet. Grâce au système de glisser-
déposer, chaque objet pourra facilement être éditable.
Les informations :
Chaque objet possède une quantité d’information plus ou moins importante.
A l’aide d’un formulaire, divers renseignements devront être complétés (voir
précédemment le FrontOffice).
L’export :
Les utilisateurs privilégiés auront la possibilité d’exporter l’ensemble des
données de la base au format XML (voir la section suivante sur les
technologies). Le but étant de pouvoir en faire une utilisation hors ligne.
Les tracés :
L’utilisateur aura la possibilité de créer des tracés. Ses lignes pourront être
mémorisées dans la base de données à partir des points X et Y. Des
informations seront également disponibles en fonction de chaque tracé.
- 22 -
La validité des éléments :
Grâce à un système de gestion temporelle des éléments. Il sera possible de
désactiver certains éléments lorsque la date d’expiration aura dépassé.
Inversement, l’activation d’un élément pourra se faire lorsque la date de
début sera atteinte (ex : travaux sur voirie).
2.3.4/ Les technologies
La partie suivante fait état des technologies à mettre en œuvre pour réaliser
les tâches citées précédemment selon trois phases. A travers la liste ci-
dessous, nous expliquerons brièvement certains termes techniques. Ceux-ci
seront davantage détaillés lors de la rédaction de l’étude technique :
a) Développement
Pour développer l’application nous utiliserons le logiciel d’animation et de

création Web, Flash MX4 et son langage de programmation ActionScript.
Lors du lancement de l’application, l’usager aura l’opportunité de
télécharger le Plug-In Flash5 si nous détectons qu’il n’a rien d’installer sur
son poste informatique. Pour éditer une partie du code source, nous nous
servirons d’un éditeur de texte comme TextPad.
MySql6 sera le type de base de données (BDD) sur laquelle nous
travaillerons. Le langage de programmation PHP7 assurera la liaison entre la
BDD et l’application Flash et donc la transmission d’informations. L’outil
utilisé pour simuler un serveur Web8 en local est EasyPHP. Le langage XML9
sera également utilisé pour récupérer et stocker certaines données en
provenance de la BDD.
Il sera nécessaire de proposer le téléchargement du Plug-In Acrobat Reader
pour que les collecter de PDF10 s’effectuent convenablement.
b) Infographie
La charte graphique et les outils graphiques11 seront réalisés sur

Illustrator12 afin de constituer l’espace cartographique sous forme de
maquette dans un premier temps. Pour certaines retouches notamment
pour certains contenus (photos de lieux), nous utiliserons Photoshop13.
- 23 -
c) Cartographie
Le fond de carte (élément de base de la thématique) sera probablement

issu de données SIG (Système d’Information Géographique)14 via des
logiciels comme MapInfo ou ArcView. L’intérêt d’utiliser ces logiciels SIG est
de pouvoir récupérer le fond de carte sur Illustrator puis de le compiler sur
Flash par exemple afin de garder un format vectoriel15. Il est quasiment
indispensable de travailler avec du vectoriel puisque la lisibilité sera de
meilleure qualité lorsque des fonctions seront activées (zoom,
déplacement…). Néanmoins, nous laisserons probablement la possibilité de
charger une image raster. Enfin, le fond de carte peut également être créer
directement sur Illustrator. A noter que la même méthodologie est
applicable pour la création de couches ‘statiques’.
2.3.5/ Tableau récapitulatif
Application Web Application CD Rom

Fonctions
(BDD+PHP) (XML)
Outils (zoom, déplacement…)
Moteur de recherche
Couches statiques
Couches dynamiques
Informations (fiches descriptives)
Impression (carte, fiches…)
Export ( édition en PDF)
Accès à la mise à jour (BackOffice)
Fonctions accessibles pour une solution on-line et off-line
2.4/ GESTION DES CONTENUS
Après avoir analysé les différents problèmes de conception, nous allons

maintenant voir comment entreprendre la gestion des contenus. Dans un
premier temps, nous citerons les différents types de contenus figurant sur
notre application. Puis, nous reviendrons très rapidement sur les acteurs
privilégiés. Enfin, nous présenterons schématiquement l’accès à
l’administration des données.
- 24 -
2.4.1/ Les types de contenus
* le texte : Il concerne essentiellement les fiches d’informations ( nom,

description, adresse, e-mail…). Sinon, il sera plutôt rare sur l’application. Il
s’agira en effet la plupart du temps de paraphrase ou de groupe de mots et
non de paragraphes. De plus, le choix des mots et des termes est
prépondérant puisque le texte reste le moyen de communication offrant le
plus de précision sur une information.
* les photographies : elles se trouvent dans les fiches descriptives. Si

plusieurs photos concernent une même fiche, il y aura alors une véritable
galerie photos. La qualité de celles-ci aura son importance pour l’usager
puisse avoir un agrandissement.
* la carte : elle est composée du fond de carte et des couches. C’est le

contenu principal car il s’agit de l’impact visuel le plus imposant. Elle nous
offre une représentation géographique de l’information puisqu’elle permet
de nous repérer dans l’espace. Elle est conçue selon des règles
cartographiques (légende, titre, échelle) et sémiologiques (couleur, trame,
grain…) comprises par tous.
* les pictogrammes : ils ont la particularité de représenter des symboles. En

utilisant un code iconographique connu comme les panneaux de
signalisations routières, l’usager comprend le message et l’information
véhiculé à travers cette symbolique.
A propos de la gestion des erreurs
Lorsqu’une erreur survient à cause d’une mauvaise manipulation de l’usager,

un texte adapté à son problème apparaît. Ces messages spéciaux figureront
surtout sur le BackOffice où l’utilisateur est amené à faire des manipulations
plus longues et complexes.
- 25 -
2.4.2/ Les acteurs
Comme il l’a été dit précédemment, les deux acteurs privilégiés sont
l’administrateur et l’éditeur (gestionnaire) :
* L’administrateur possède tous les droits sur l’ensemble de l’application.
* L’éditeur (gestionnaire) a tous les droits sauf la validation des mises à
jour effectuées.
2.4.3/ L’administration
Le schéma ci-dessous, indique la procédure à suivre pour arriver à la mise à

jour de l’application. L’accès au BackOffice est sécurisé. A l’aide d’un
identifiant et d’un mot de passe, les utilisateurs privilégiés auront accès à
diverses tâches.
- 26 -
Figure 1 : Schéma d'accès à l'administration de l'application
2.5/ ORGANISATION DU PROJET
Nous allons expliquer dans cette partie la gestion du projet à travers le

matériel et les ressources humaines nécessaires. Enfin, nous organiserons
notre projet à l’aide d’un rétro planning.
- 27 -
2.5.1/ Le matériel
Pour développer le projet, nous aurons besoin de divers outils. Un

ordinateur relié directement à Internet sera composé des logiciels
nécessaires cités précédemment dans l’analyse conceptuelle. Le système
d’exploitation (SE) utilisé est Windows 98. Des tests seront réalisés sur
d’autres SE et plusieurs navigateurs dont Internet Explorer et Firefox.
2.5.2/ L’équipe
Yann de Saint Denis supervisera l’ensemble du projet. Il validera les

différentes phases de conception (voir retro-planning) et apportera ces
connaissances techniques.
Je suis chargé de la réalisation du projet (de la phase d’analyse à sa
conception).
2.5.3/ Le retro-planning
Le période de réalisation s’étend sur la période du 10 avril au 28 juillet

2006. Il correspond à la durée du stage. Il est fourni à titre de planification
prévisionnelle afin d’avoir un aperçu du temps de travail à mobiliser par
tâches.
Des phases de validation sont ajoutées sur le planning. Elles sont données à
titre indicatif car leurs interventions dépendent de l’avancement du projet et
des objectifs fixés à court terme.
Nous comptabilisons 6 phases dans ce projet :
Phases Nombre de jours

A Rédaction du cahier des charges 14
B Etude technique 22
C Etude graphique et ergonomique 9
D Réalisation 22
E Test, débuggage 4
F Mise en oeuvre 3
TOTAL 74
- 28 -
Le temps de travail estimé est d’environ 520 heures. (74 *7 = 518).
Retro-planning du 10 avril au 28 juillet 2006
AVRIL
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
L M Me J V S D L M Me J V S D L M Me J V S D
MAI
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
L M Me J V S D L M Me J V S D L M Me J V S D L M Me J V S D L M Me
JUIN
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
J V S D L M Me J V S D L M Me J V S D L M Me J V S D L M Me J V
JUILLET
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
S D L M Me J V S D L M Me J V S D L M Me J V S D L M Me J V
LEGENDE
Validation Réalisation
Réalisation du cahier des charges Test, débuggage
Etude technique (architecture, structure, codage…) Mise en œuvre
Etude graphique et ergonomique (interface) Jours fériés
- 29 -
3 / ETUDE TECHNIQUE
Cette étude va présenter les aspects techniques du projet. Nous

commencerons d’abord par montrer les différents cas d’utilisation à partir
du public cible vu précédemment. Nous traiterons également les méthodes
de travail à appliquer pour le codage et la gestion des flux d’information sur
l’application. Enfin, nous dévoilerons l’architecture de la base de données
nécessaire à créer.
3.1/ LES DIAGRAMMES DES CAS D’UTILISATION
A l’aide de cet outil de représentation issu d’Ivar Jacobson et repris par la

modélisation UML, nous allons analyser les différents scénarios. Ceux-ci
sont composés d’acteurs et d’actions à réaliser. Le but de cette
représentation est de mettre en avant l’interaction entre ces deux objets.
Ci-dessous se trouve le premier cas d’utilisation du profil visiteur répondant

à l’interface FrontOffice de l’application :
Figure 2 : Cas d'utilisation Visiteur
- 30 -
Le diagramme suivant, montre le profil de l’administrateur. Il faut préciser
que le profil ‘gestionnaire’ est identique à celui de l’administrateur à
quelques exceptions notamment au niveau des droits de validation. C’est la
raison pour laquelle, il n’y a pas de diagramme de cas d’utilisation pour le
gestionnaire.
Figure 3 : Cas d'utilisation Administrateur
- 31 -
3.2/ L’OPTIMISATION DU SI
3.2.1/ La recherche d’information
Les contraintes techniques (logiciels et langages de programmation)

sélectionnées pour la réalisation du projet doivent être utilisées de façon
optimales. Un véritable travail de veille technologique et de recherche est à
mettre en place. Il est important de connaître rapidement les performances
de ses techniques afin de fixer les limites du développement. De plus, cette
démarche permet un gain de temps puisque certaines informations (codes,
scripts…) ont déjà été conçues sur la Toile. Une fois ces sources trouvées, il
a fallu analyser leur fonctionnement et comprendre leur utilité dans le cadre
de notre application. Nous passons alors à la phase de traitement et de
modification pour arriver un ensemble d’information correspondant au
cahier des charges fonctionnel.
3.2.2/ Gestion des flux d’information
L’analyse de ces flux permet de situer les différentes informations à un

instant ‘T’ dans l’application. Ils reflètent également le sens de traitement
des informations.
A travers les deux schémas ci-dessous, nous dessinerons les solutions pour
les interfaces ‘Administrateur’ et ‘Visiteurs’.
Figure 4 : Schéma simplifié des flux d'information sur le BackOffice
- 32 -
Figure 5 : Schéma simplifié des flux d'informations sur le FrontOffice
3.3/ ARCHITECTURE DE LA BASE DE DONNEES.
Avant de présenter les deux modélisations (Modèle Logique de Données et

Modèle Conceptuel de Données), nous identifierons le dictionnaire de
données composé des tables, de leur clés primaire, leur champ et leur clés
étrangères.
3.3.1/ Le dictionnaire de données
CARTE (id_Ca, nom_Ca, lien_Ca, larg_Ca, haut_Ca, pourcentL_Ca, pourcentH_Ca)

COUCHE (id_Co, num_Co, nom_Co, lien_Co, statut_Co, #id_Ca)
ELEMENT (id_El, x_El, y_El, statut_El, taille_El, alpha_El, rotation_El, #id_Da,
#id_Pi, #id_Co)
PICTO (id_Pi, nom_Pi, lien_Pi)
DATE (id_Da, debut_Da, fin_Da, debutT_Da, finT_Da)
CIRCUIT (id_Tr, nom_Ci, nbrJ_Ci, depart_Ci, arrivee_Ci, service_Ci, resume_Ci,
validiter_Ci, prix_Ci)
ETAPE (id_El, num_Et, titre_Et, descriptif_Et, url_Et)
PHOTO (id_Ph, titre_Ph, lien_Ph, #id_El)
TRACE (id_Tr, coordonnees_Tr, statut_Tr, #id_Da, #id_Co)
GROUPE (id_Gr, nom_Gr)
UTILISATEUR (id_Ut, nom_Ut, prenom_Ut, login_Ut, password_Ut)
ACCEDE (#id_Gr, #id_Ca, libelle)
APPARTIENT (#id_Ut, #id_Gr)
- 33 -
3.3.2/ Le modèle Logique de Données
Figure 6 : MLD de la base de donnée' carto_net'
3.3.3/ Le modèle Conceptuel de Données
Figure 7 : MCD de la base de données 'carto_net'
- 34 -
La table ‘CARTE’ correspond à l’unique fond de carte au format vectoriel.
Le fond de carte contient une ou plusieurs couche(s) (relation avec la table
‘COUCHE’)
Cette table peut être accessible par un ou plusieurs groupe(s) suivant leur
droit (relation avec les tables ‘GROUPE’ et ‘ACCEDE’)
La table ‘COUCHE’ recense le nom de la couche et éventuellement l’endroit

où elle se trouve (s’il s’agit d’une couche préexistante). Son statut permet
d’établir si elle a été validée ou non par l’administrateur.
Une couche se trouve sur un seul fond de carte (relation avec la table
‘CARTE’).
Une couche possède un ou plusieurs élément(s) (relation avec la table
‘ELEMENT’)
Une couche possède un ou plusieurs tracé(s) (relation avec la table ‘TRACE’)
La table ‘ELEMENT’ stocke le positionnement (x et y), la taille, la

transparence et la rotation de chaque élément. Son statut permet
également d’établir s’il a été validé ou non par l’administrateur.
Un élément correspond à un seul pictogramme (relation avec la table
‘PICTO’)
Un élément se trouve sur une seule couche (relation avec la table
‘COUCHE’)
Un élément possède une période de validation. (relation avec la table
‘DATE’)
Un élément peut correspondre à une information (relation avec la table
‘ETAPE’)
La table ‘PICTO’ enregistre le nom de chaque pictogramme et l’endroit où il

est stocké.
Un pictogramme peut correspondre à un ou plusieurs élément()s (relation
avec la table ‘ELEMENT’)
La table ‘DATE’ comptabilise les dates de début et dates de fin qui

définissent une période de validation.
- 35 -
Une période peut être identique à un ou plusieurs élément(s) (relation avec
la table ‘ELEMENT’)
Une période peut être identique à un ou plusieurs tracé(s) (relation avec la
table ‘TRACE’)
La table ‘CIRCUIT’ fourni diverses informations sur le contenu du circuit (le

nom du circuit, sa durée, le lieu de départ et d’arrivée, les services compris,
son résumé, la date d’échéance des réservations et le tarif).
Un circuit correspond à un tracé puisqu’il s’agit du tracé de l’itinéraire sur la
carte (relation avec la table ‘TRACE’).
La table ‘ETAPE’ contient le numéro de l’ordre dans lequel il apparaît dans le

circuit, un titre et un descriptif.
Une étape possède une ou plusieurs illustration(s) (relation avec la table
‘PHOTO’)
La table ‘PHOTO’ contient un titre et un lien pour le chemin de celle-ci.

Une photo correspond à une étape/un lieu visité en particulier (relation avec
la table ‘ETAPE’)
La table ‘TRACE’ stocke les différentes coordonnées (x et y) du tracé. Son

statut permet également d’établir si elle a été validée ou non par
l’administrateur.
Un tracé se trouve dans une seule couche (relation avec la table ‘COUCHE’)
Un tracé possède une période de validation. (relation avec la table ‘DATE’)
Un tracé correspond à un seul circuit (relation avec la table ‘CIRCUIT’)
La table ‘GROUPE’ fourni le nom du groupe.

Un groupe possède un ou plusieurs droits sur la carte selon son profil
(relation avec les tables ‘ACCEDE’ et ‘COUCHE’)
Un groupe contient un ou plusieurs utilisateur(s) ( relation avec la table
‘UTILISATEUR’)
- 36 -
La table ‘UTILISATEUR’ renseigne le nom et prénom, ainsi que l’identifiant
et le mot de passe de chaque utilisateur.
Un utilisateur appartient à un ou plusieurs groupe(s) (relation avec la table
‘GROUPE’)
La table ‘ACCEDE’ permet de faire la liaison entre les tables ‘CARTE’ et

‘GROUPE’. Elle fixe les droits attribués à chaque groupe sur la carte. Le
libellé décrit leur droits.
La table ‘APPARTIENT’ fait la relation entre les tables ‘GROUPE’ et

‘UTILISATEUR’. Elle ne compte pas de champs supplémentaires.
- 37 -
4 / ETUDE CONCEPTUELLE
Dans cette partie nous allons faire un état des lieux du travail réalisé. A
partir d’un nouveau planning montrant le déroulement réel du stage, nous
ferons le point sur le développement de l’application (Back et FrontOffice),
sur ces fonctionnalités non-développées et sur son aspect graphique très
sommaire sous forme de prototype. Pour terminer, nous introduirons la
thématique choisie pour tester notre produit.
4.1/ PLANNING REEL DES TACHES EFFECTUEES
AVRIL
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
L M Me J V S D L M Me J V S D L M Me J V S D
MAI
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
L M Me J V S D L M Me J V S D L M Me J V S D L M Me J V S D L M Me
JUIN
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
J V S D L M Me J V S D L M Me J V S D L M Me J V S D L M Me J V
JUILLET
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
S D L M Me J V S D L M Me J V S D L M Me J V S D L M Me J V
LEGENDE
Réalisation du cahier des charges Test, débuggage

Etude technique (architecture, structure, codage…) Jours fériés
Réalisation technique Validation
Planning du 10 avril au 28 juillet 2006
- 38 -
Remarque
Certaines tâches prévues dans le cahier des charges ne figurent pas sur ce
planning. En effet, les phases d’étude graphique et de mise en œuvre du
projet ont été supprimées une fois l’étude technique achevée. Les
fonctionnalités à développer demanderaient probablement plus de temps que
prévu initialement. L’objectif du stage était comme convenu au départ de se
focaliser sur la recherche, l’expérimentation de nouvelles solutions
techniques, c’est pourquoi, ces deux tâches ont été mises temporairement de
côté.
A mon départ, un document technique récapitulant les informations créées a

été remis à M. de Saint Denis. Il a pour but de faciliter la compréhension de
la programmation sur l’application. Ce document constitue la seconde annexe
du rapport.
4.2/ BILAN CONCEPTUEL
Le tableau ci-dessous récapitule les fonctionnalités qui n’ont pas été

développées durant le stage alors qu’elle figurait sur le cahier des charges.
BackOffice FrontOffice
- compte utilisateur sécurisé - la fenêtre de navigation (carte
- validation des mises à jour miniature pour la localisation)
suivant le groupe d’appartenance - gestion de l’échelle de la carte
de l’utilisateur affichée
- l’export de données pour une
autre exploitation.
Toutes les autres fonctions évoquées dans le cahier des charges sont
opérationnelles. La conception du BackOffice a nécessité un mois et demi de
développement alors que le FrontOffice n’a bénéficié que de 15 jours de
travail. Nous constatons sur le BackOffice que l’ensemble des tâches
cartographiques ont été réalisé, seule la prise en compte des groupes et
utilisateurs manquent. Concernant le FrontOffice, il aurait fallu du temps
supplémentaire pour arriver à terminer ses trois fonctions.
Enfin, après l’étude technique, il s’est avéré important de reconsidérer le
cas des technologies employées pour la conception du FrontOffice. Afin
d’exploiter convenablement le fichier XML généré par le BackOffice, nous
avons opté pour la version 7 de Flash (Flash MX 2004 Pro). De fait,
- 39 -
l’application BackOffice fonctionne à partir du player Flash 6 et le
FrontOffice à partir du player 7.
4.3/ LE PROTOTYPE BACKOFFICE
Nous pouvons distinguer les différentes fonctions grâce à la couleur de fond

mise en place. Par exemple, les informations sur fond jaune gèrent les
couches statiques, celles du fond bleu ciel gère l’ajout du fond de carte….
De nombreuses fenêtres volantes n’apparaissent pas sur cette copie écran
puisqu’elles interviennent suivant l’action effectuée.
Figure 8 : Le prototype du BackOffice
4.4/ LE PROTOTYPE FRONTOFFICE
Le même principe de couleur met en valeur les différents composants du

FrontOffice. Nous distinguons rapidement les outils de déplacement sur fond
rose ou encore l’une des fenêtres volantes en violet affichant des
informations sur un élément sélectionné.
- 40 -
Figure 9 : Le prototype du FrontOffice
4.5/ INTRODUCTION AU CHOIX DE LA THEMATIQUE
Dans le cahier des charges, nous nous étions placés dans le cadre d’une
agence de voyage voulant référencer ces circuits touristiques. Cependant,
nous avons décidé de ne pas maintenir ce choix car nous n’avions pas dans
l’immédiat de données sur ce sujet. Nous nous sommes dirigés plus
naturellement vers des informations connues sur la région Basse-
Normandie. L’idée était toujours de rendre accessible des données
touristiques sous forme de carte. Cela nous a rapproché du Parc Naturel
Régional des Marais du Cotentin et du Bessin et de l’une des activités que
nous pouvons y pratiquer à savoir le cyclotourisme pour découvrir ses
paysages.
Ainsi, nous avons recensé les circuits vélos balisés dans le Parc et réfléchi
sur la structure des informations qui allaient figurer sur notre application.
- 41 -
5 / CAS PRATIQUE ‘VELOROUTE DES MARAIS’
Même si le BackOffice répond à des exigences n’ayant aucun rapport avec le

Véloroute des Marais. Nous allons voir en parallèle le travail effectué sur le
Back et FrontOffice. En effet, nous utiliserons une méthodologie identique
pour la présentation des deux interfaces graphiques.
5.1/ PRESENTATION DE LA THEMATIQUE
Le ‘véloroute’ représente une trentaine de circuit balisé pour découvrir les

richesses du patrimoine normand et les paysages qui caractérisent cette
région chargée d’histoire. Ces circuits s’étendent du Parc Naturel Régional
(PNR) des Marais du Cotentin et du Bessin à la Baie du Mont St Michel.
Pour trouver ses circuits, un guide des randonnées est proposé dans les
offices du tourisme de la région reprenant ainsi toutes les informations
nécessaires pour passer de bons moments à vélo. De plus, via le site
Internet www.mancherandonnee.com, il est possible de retrouver également
sous forme de fiche .PDF les mêmes informations. Une carte accompagne
chacune de ces fiches. Nous allons rendre interactive ces cartes grâce notre
outil.
5.1.1/ Quelle est la zone géographique analysée ?
Nous avons décidé de nous intéresser au PNR des marais du Cotentin et du

Bessin (www.parc-cotentin-bessin.fr). Cette zone comporte neuf circuits.
N’ayant pas de photographies des lieux visités sur trois de ces circuits, la
zone étudiée porte uniquement sur le centre du PNR proche de la Baie des
Veys.
Les fichiers sources de la carte proviennent du SIG de la région Basse
Normandie (www.basse-normandie-ecologie.gouv.fr) et de données que
possédait l’entreprise.
5.1.2/ Quels sont les circuits proposés sur la carte ?
Par conséquent, la carte sera composée de six circuits :

Circuit 1 : Les Gués entre Plain et Bocage
Circuit 2 : Le Moulinet
- 42 -
Circuit 3 : Les Fonds du Cotentin
Circuit 4 : Les Promontoires du Bauptois
Circuit 5 : La Baie des Veys
Circuit 6 : Les Rives des marais de Graignes
Ces circuits correspondent successivement dans le guide aux circuits 2, 3,
4, 5, 6 et 8. Vous trouverez en annexe le détail de chacun de ces circuits.
5.1.3/ Quelles sont les informations à collecter ?
Toutes les informations nécessaires sont disponibles sur le guide ou sur les
fiches .PDF (textes, pictogrammes, images…). Il suffit simplement d’adapter
notre outil à cela. Ainsi, les champs de renseignements du nombre de jours
se transforment en nombre de Km du circuit et les services proposées
deviennent des informations diverses sur le niveau de difficulté ou encore
les spécificités du circuit. Enfin, précisons que pour notre sujet, il n’y a
aucun objet temporaire définit par une période (date de début et date de
fin). Tous les objets (circuits ou lieux) doivent apparaître constamment
puisqu’ils sont définitifs.
5.2/ ETUDE GRAPHIQUE ET ERGONOMIQUE
Dans cette partie, nous réaliserons une analyse ergonomique de l’interface

à partir des documents d’IHM de Scapin et Bastien16. De plus, nous la
compléterons avec des connaissances sémiotiques issues des analyses de
sites Web de Peter Stockinger17. Dans un premier temps, nous expliquerons
l’organisation des deux interfaces ‘Administrateur’ et ‘Visiteur’ grâce au
scénario typographique et les différentes zones de représentation. Puis,
nous expliquerons la composition des chartes graphiques en définissant les
choix chromatiques et typographiques effectués. Enfin, nous nous
intéresserons aux outils graphiques crées notamment le logo et les
représentations iconographiques sur les boutons.
5.2.1/ Les gabarits et maquettes
Le BackOffice est l’application maître qui permet de créer la carte. Son

fonctionnement est toujours le même quelles que soient les données
traitées. Ainsi, il est important de l’identifier en tant qu’outil et d’avoir une
- 43 -
représentation englobant les termes : cartographie, interactivité,
personnalisable et Internet. Les choix graphiques seront alors orientés dans
ce sens pour refléter parfaitement son approche visuelle.
A l’inverse, le FrontOffice doit lui se fondre à la thématique qu’il analyse. Si
les choix en matière de navigation et d’ergonomie reste identique, les
graphismes seront à chaque fois différents.
Les interfaces sont organisées en plusieurs régions, elles-mêmes figurant

dans des zones de représentation. Cette façon d’organiser l’information est
similaire à tous les sites Web et plus particulièrement à tous les systèmes
d’informations en ligne. Pour comprendre cette organisation, nous
commencerons par identifier les différentes régions de cet espace comme
l’indique les figures 10 et 11 :
Figure 10 : Les principales régions du BackOffice
Comme nous pouvons le constater d’après cette figure, nous comptabilisons

six régions qui composent cette interface :
1. Région ‘logo’ qui permet l’identification de l’application
2. Région ‘outils’ qui comprend les fonctions de base de déplacement.
3. Région ‘édition’ qui introduit l’export de la carte lorsqu’elle est
terminée.
4. Région ‘infos’ qui indique les informations sur les actions de
l’utilisateur.
5. Région ‘carte’ qui précise la zone où se trouve la carte.
- 44 -
6. Région ‘onglets’ qui identifie les six modules disponibles pour réaliser
sa propre carte.
Figure 11 : Les principales régions du FrontOffice
Pour le FrontOffice, nous comptabilisons huit régions :

1. Région ‘bandeau’ qui permet l’identification du sujet traité
2. Région ‘outils & navigation’ qui comprend les fonctions de base de
déplacement et la miniature de la carte pour la localisation.
3. Région ‘c. statiques’ qui donne la possibilité d’afficher les couches
statiques de la carte (villes, fleuves, routes…).
4. Région ‘c. thématiques’ qui correspond aux couches dynamiques
créées dans le BackOffice.
5. Région ‘recherche’ qui présente le moteur de recherche interne.
6. Région ‘édition’ qui permet de passer à l’interface en format
d’impression
7. Région ‘légende’ qui comme son nom l’indique représente la légende
de la carte.
8. Région ‘carte’ qui précise la zone où se trouve la carte.
Pour permettre de mieux hiérarchiser les informations présentes sur ces

deux pages web, il faut classer ces régions par zones représentatives, c’est
ce que nous montrent les figures 12 et 13 :
- 45 -
Figure 12 : Les quatre zones de représentation du BackOffice
Nous distinguons quatre zones ou espaces de représentation, voici la

répartition des régions dans chacune de ces zones :
A. La Zone ‘d’identification’ correspond à la région 1.
B. La Zone ‘de fonctionnalités’ correspond aux régions 2 et 3.
C. La Zone ‘d’analyse d’informations’ correspond aux régions 4 et 6.
D. La Zone ‘principale’ correspond à la région 5.
Chaque zone a son propre rôle, nous pouvons par exemple dire que la zone
B offre d’une part des traitements agissant directement sur la carte (région
2) et présente d’autre part une action supplémentaire (l’export) sur l’autre
région (3).
Figure 13 : Les quatre zones de représentation du FrontOffice
Les quatre même espaces de représentation sont remarquables sur le

FrontOffice, voici la répartition des régions dans chacune de ces zones :
- 46 -
A. La Zone ‘d’identification’ correspond à la région 1.
B. La Zone ‘de fonctionnalités’ correspond aux régions 2 et 6.
C. La Zone ‘d’analyse d’informations’ correspond aux régions 3, 4, 5 et
7.
D. La Zone ‘principale’ correspond à la région 8.
Ici nous pouvons dire que la zone C constitue toutes les informations
textuelles ou iconographiques pour comprendre le contenu de la zone D.
Le scénario topographique est censé mettre en avant des éléments comme

le titre, les champs visuels, les champs textuels et l’arrière fond.
Cependant, contrairement à un site informatif comme un journal en ligne,
une administration public, la différence entre les champs textuels et visuels
n’est pas facile à distinguer. En effet, sur notre interface, ces deux champs
cohabitent en continu et sont alternatifs. Nous retrouvons ainsi des
éléments graphiques propre à la carte et d’autre propre à l’interface.
Concernant, le titre, il est facilement identifiable puisque nous l’avons vu
dans la zone de représentation ‘d’identification’. Pour finir, l’arrière fond de
la page n’a aucun intérêt mis à part celui d’être neutre pour ne pas
dénaturer et surcharger la carte se trouvant au premier plan.
Nous allons maintenant nous intéresser à quelques critères ergonomiques et

d’IHM appliqués sur ces interfaces. Ceux-ci permettent d’améliorer la
navigation et d’analyser par la suite le comportement de l’utilisateur lambda
vis à vis des informations émises par la page.
La lisibilité : La zone ‘principale’ à savoir l’espace d’affichage de la

carte est l’élément de retour d’information. Nous avons ainsi réservé
un espace très important pour celle-ci (53% de l’écran en 1024*768
pour une carte de 600*690). Pour les différentes régions gravitant
autour de la carte, nous les démarquons par des espaces blancs et
des fonds colorés. De cette façon, nous obtenons une interface aérée
et claire en évitant toutes confusions.
- 47 -
L’accès à l’information : Les interfaces sont conçues pour avoir
quasiment toutes les informations sur la même page. Il paraît évidant
que la recherche d’un lieu va nécessiter un temps de réflexion et
d’action. Cependant, grâce au moteur de recherche mis en place,
l’usager devrait arriver à l’information en trois cliques maximum.
Pour le reste, comme les couches thématiques, l’utilisateur est guidé
dans les possibilités d’affichages de l’information, la sélection sur une
liste déroulante facilite le traitement de l’information.
Le sens de lecture : Même si le sens de lecture n’a pas le même

intérêt que sur un site standard, ce critère n’est pas à négliger. Une
lecture en ‘Z’ semble la plus appropriée à nos deux interfaces.
L’utilisateur identifie dans un premier temps l’application sur laquelle
il se trouve (1), puis linéairement il distingue les fonctions mises à sa
disposition (2), son regard va logiquement se porter sur la zone de la
carte (3), et pour finir il va constater les différentes couches
affichables qui vont agrémenter sa compréhension de la carte
Figure 14 : Le sens de lecture de des pages Back et FrontOffice
La profondeur de l’information : Comme il a été dit précédemment,

l’essentiel des informations se trouve sur cette interface. Pourtant,
pour obtenir des informations plus précises sur un élément, une
nouvelle fenêtre va s’ouvrir. Nous comptabilisons deux fenêtres
volantes c’est à dire qui sont déplaçables sur l’écran et que nous
- 48 -
pouvons fermer. Le rôle de ces fenêtres est d’afficher plus
d’information soit sur un lieu pour la première soit sur un circuit pour
la seconde. Cette superposition entre l’interface au second plan et les
fenêtres volantes au premier plan est un moyen de mettre davantage
d’information mais de les faire apparaître suivant la logique
d’utilisation de chaque individu.
5.2.2/ Les chartes graphiques
La charte graphique permet d’avoir une interface homogène en terme de

couleur et lecture des éléments textes à partir de polices spécifiques. Ainsi,
dans un premier paragraphe, nous expliquerons les choix chromatiques
effectués puis dans un second nous détaillerons la typographie à travers les
différentes propriétés de l’écriture.
a) Les choix chromatiques
Dans ce type d’interface, il est important de ne pas accumuler différentes

couleurs et différentes valeurs de celles-ci. C’est pour cela que nous nous
sommes limités à 3 ou 4 couleurs pour constituer la palette des outils
graphiques :
Le BackOffice :
Nom Code HTML Couleurs
Vert sapin # 008C44
Jaune pâle #FFFFCC
Gris foncé #666666
La répartition est simple : plus la couleur est sombre et moins sa quantité

est importante sur l’interface. Pour ne pas gêner la lecture de la carte, nous
avons privilégié des tonalités claires. Enfin, il faut préciser que le blanc n’est
pas considéré comme une couleur c’est pour cela qu’elle n’est pas
répertoriée dans le tableau ci-dessus. Le blanc se trouve sur la majorité des
textes.
- 49 -
Le FrontOffice :
Nom Code HTML Couleurs
Vert sapin # 00A684
Orangé # FFCC66
Gris clair # EDEDED
Gris souris #999999
Les couleurs ont été reprise du site des randonnées de la manche

(www.mancherandonne.com). Les couleurs dominantes du site étaient les
deux gris et le vert, nous avons décidé de mettre plus en avant l’orangé qui
permettra indiscutable de clarifier les différents modules sur l’interface. Une
fois encore la couleur blanche, accompagnée cette fois du noir, compose les
fonts des textes.
b) La typographie
Une seule police est utilisée sur les deux interfaces, il s’agit de la police
Verdana. Elle est sans empattement et facilite ainsi la lecture afin d’éviter
les ambiguïtés. Pour mettre en valeur plus ou moins, les informations
textuelles sur l’interface, nous avons varié les propriétés de la police. Des
variations en terme de taille sont visibles, puisqu’elle varie de 8 à 12 mais
nous apportons également une variation de la graisse sur les titres des
différentes régions. Pour terminer, nous noterons néanmoins quatre autres
polices sur les logos et les textes graphiques (voir les outils graphiques).
5.2.3/ Les outils graphiques
Les outils graphiques correspondent à tous les éléments graphiques formant

l’interface. Nous présenterons essentiellement les logos et les boutons
utilisées pour exprimer les fonctionnalités en mettant en avant le rapport
entre le signifiant et le signifié.
a) Les logos
Le BackOffice :
L’idée principale est de symboliser les aspects de carte et de Web. Le globe
terrestre est l’icône représentant le mieux les sciences géographiques et par
déduction tout ce qui approche de la cartographie. La police présente sur le
- 50 -
logo est Bradley hand. La base-line résume ensuite l’utilisation de
l’application.
Figure 15 : Le logo du BackOffice
Le FrontOffice :
Véloroute possède déjà une icône représentative des randonnées
cyclotouristes, il s’agit d’un personnage à du vélo. Après l’avoir repris, nous
lui avons ajouté un décor sous un aspect de BD collant au style du
personnage. Le titre ‘Véloroute des Marais’ (figure 16) est écrit avec la
police Kristen. La phrase d’accroche indique clairement les intentions du
site. A noter, la présence du logo du PNR des Marais sur le bandeau (figure
17).
Figure 16 : Le Logo du FrontOffice
Figure 17 : Le bandeau du FrontOffice
b) Les boutons
Deux types de représentation graphique ont été mis en place sur les
deux interfaces :
* En rappelant à l’aide d’un symbole le logo de chacun d’entre elle et un
mot qualifiant le mieux l’action que va entraîner l’utilisateur s’il clique
dessus.
- 51 -
* En rappelant également la symbolique du logo et avec un signe venant se
superposer.
Le BackOffice :
La police des textes sur les boutons est Maiandra tout comme les intitulés
de boîtes.
Figure 18 : Les deux types de boutons sur le BackOffice
Figure 19 : Intitulés des boîtes du BackOffice
Le FrontOffice :
La police des textes sur les boutons est Verdana. La police Trebuchet est
utilisée pour les intitulés de chaque boîte.
Figure 20 : Les deux types de boutons sur le FrontOffice
Figure 21 : Intitulés des boîtes du FrontOffice
- 52 -
5.2.4/ Les deux interfaces cartographiques
Figure 22 : Interface Map'Inter@active (backOffice)
Figure 23 : Interface du Véloroute des Marais (FrontOffice)
- 53 -
5.3/ BILAN CONCEPTUEL
Faisant abstraction de l’ajout du graphisme sur chacune des interfaces,

certaines fonctionnalités ont été améliorées ou développées :
La fenêtre de navigation : elle était manquante à l’issu de la durée du
stage et a été ajoutée.
La gestion des couches statiques : Leur nombre est limité à 10,
suivant le nombre de couches, le fenêtre contenant les checkbox
s’agrandi ou se réduit.
Le replacement de la fenêtre de navigation lorsque l’utilisateur fait
une recherche.
L’onglet ‘Symboles’ : il récapitule tous les pictogrammes présents sur
la carte. Leur nombre est limité à 15. Au-delà, une évolution
graphique est à prévoir. Leur gestion est dynamique.
Des corrections sont encore à apporter au niveau du traitement du texte

puisque à l’heure actuelle, il ne gère pas les caractères spéciaux ou à
accent. De plus, il y a certainement possibilité d’optimiser davantage la
durée du traitement de l’information. Même si le fait d’avoir opter pour une
solution XML réduit considérablement le temps de chargement, ce qui
n’aurait pas été le cas avec une base de données.
Des améliorations peuvent être envisagées, je pense notamment à la
gestion d’une vidéothèque qui pourrait avoir son intérêt pour la prise de
panorama.
- 54 -
CONCLUSION
L’intérêt de ce sujet de stage était de pouvoir travailler sur le lancement de

ce projet et ainsi de porter une réflexion nécessaire à la conception. Malgré
des modifications d’ordre organisationnel en cours de projet, les consignes
de travail sont toujours allées dans le même sens.
Il est vrai que le fait de s’être focalisé sur du développement et de la

recherche pendant mon stage pouvait être un risque. En effet, le résultat
peut vite être décevant si le travail réalisé n’abouti pas. Cela n’a pas été le
cas pour m’a part. J’ai véritablement appris et approfondi mes
connaissances techniques notamment sur Flash et le traitement XML. Quant
à la gestion de projet multimédia ; ayant eu des notions avancées dans ce
domaine lors de mes études universitaires précèdentes, j’ai su m’adapter
aux résultats obtenus quotidiennement. Je suis également très satisfait des
conditions et du cadre de travail dans lequel j’étais. J’ai pu apprécier
davantage la gestion de l’entreprise en étant immergé totalement dans le
quotidien des chefs de projet, de la graphiste ou encore du commercial. De
plus, j’ai eu l’occasion de donner mon avis sur certaines maquettes et plus
précisément sur les chartes graphiques conçues par la graphiste.
Quant au travail réalisé et à son utilisation dans la société. Il devrait à partir

d’octobre et pour la fin de l’année être mis en service. Cela constituera un
nouveau produit et service à proposer aux clients. Je pense qu’une aide en
ligne sous forme de tutorial serait la bienvenue afin de rendre l’application
plus abordable. De plus, la société proposant des séances de formation pour
son application Compoz’it (gestion de contenu), il peut être envisageable
d’opter pour le même type de fonctionnement pour cette application. Il
s’agira de familiariser l’utilisateur avec l’outil. Ces nouveaux outils de
gestion de contenu ne sont pas plus compliqués que l’apprentissage d’un
logiciel quelconque. C’est plutôt la richesse de leurs fonctions qui doivent
être apprises convenablement pour obtenir ensuite des résultats efficaces.
- 55 -
TABLE DES ILLUSTRATIONS
FIGURE 1 : SCHEMA D'ACCES A L'ADMINISTRATION DE L'APPLICATION .................... 27
FIGURE 2 : CAS D'UTILISATION VISITEUR......................................................... 30
FIGURE 3 : CAS D'UTILISATION ADMINISTRATEUR .............................................. 31
FIGURE 4 : SCHEMA SIMPLIFIE DES FLUX D'INFORMATION SUR LE BACKOFFICE ......... 32
FIGURE 5 : SCHEMA SIMPLIFIE DES FLUX D'INFORMATIONS SUR LE FRONTOFFICE...... 33
FIGURE 6 : MLD DE LA BASE DE DONNEE' CARTO_NET' ....................................... 34
FIGURE 7 : MCD DE LA BASE DE DONNEES 'CARTO_NET' ..................................... 34
FIGURE 8 : LE PROTOTYPE DU BACKOFFICE ...................................................... 40
FIGURE 9 : LE PROTOTYPE DU FRONTOFFICE ..................................................... 41
FIGURE 10 : LES PRINCIPALES REGIONS DU BACKOFFICE .................................... 44
FIGURE 11 : LES PRINCIPALES REGIONS DU FRONTOFFICE ................................... 45
FIGURE 12 : LES QUATRE ZONES DE REPRESENTATION DU BACKOFFICE .................. 46
FIGURE 13 : LES QUATRE ZONES DE REPRESENTATION DU FRONTOFFICE ................ 46
FIGURE 14 : LE SENS DE LECTURE DE DES PAGES BACK ET FRONTOFFICE................ 48
FIGURE 15 : LE LOGO DU BACKOFFICE ............................................................ 51
FIGURE 16 : LE LOGO DU FRONTOFFICE .......................................................... 51
FIGURE 17 : LE BANDEAU DU FRONTOFFICE ..................................................... 51
FIGURE 18 : LES DEUX TYPES DE BOUTONS SUR LE BACKOFFICE ........................... 52
FIGURE 19 : INTITULES DES BOITES DU BACKOFFICE ......................................... 52
FIGURE 20 : LES DEUX TYPES DE BOUTONS SUR LE FRONTOFFICE.......................... 52
FIGURE 21 : INTITULES DES BOITES DU FRONTOFFICE ........................................ 52
FIGURE 22 : INTERFACE MAP'INTER@ACTIVE (BACKOFFICE) ................................ 53
FIGURE 23 : INTERFACE DU VELOROUTE DES MARAIS (FRONTOFFICE) ................... 53
- 56 -
GLOSSAIRE
1
Système de gestion de contenu ou CMS (Content Management System) :
Logiciel ou ensemble d'applications facilitant la mise à jour et la présentation des
informations contenues dans un site Web. Les CMS ou systèmes de gestion de
contenu ont pour but de simplifier la création et la gestion du contenu en ligne. Ils
permettent une meilleure fréquence des mises à jour des ressources déjà publiées
et à moindre coût.
2
FrontOffice : Partie visible pour le visiteur d'une boutique en ligne sur internet.
Elle est composée de la mise en forme du site, comprenant les catégories, sous
catégories, articles disponibles à la vente dans la boutique, ainsi que du caddie
virtuel (page où les produits sélectionnés sont gardés en mémoire).
3
BackOffice : Partie cachée pour le visiteur d’un site commerciale. Il s’agit des
pages Internet qui vont avoir un accès protégé et qui seront lisible seulement par
les personnes gestionnaires ou administratrices du site. Elles pourront notamment
modifier les informations.
4
Flash MX (Macromédia) : Flash est une technologie permettant de créer et de
diffuser des animations multimédia vectorisées et sonores. Cela peut aller de la
simple animation de formes géométriques à la réalisation de dessins animés.
Certaines animations peuvent contenir de l'interactivité ou bien ne pas en avoir. De
plus sa combinaison avec PHP permet de le lier directement avec une base de
données.
5
Plug-In Flash : Plug- in vient du mot anglais "plug" qui signifie "brancher". Un
plug- in est un complément qui permet d'enrichir les fonctionnalités d'un logiciel
(Flash par exemple). Sur Internet, certains sites nécessitent l'installation d'un plug-
in pour pouvoir être utilisés de façon optimale. Il est téléchargeable directement sur
le site de Macromedia : ‘http://www.macromedia.com/fr/software/flashplayer/’.
6
MySQL : MySQL est la base de données la plus populaire sur Internet. Couplée
généralement avec PHP, elle vous permet de stocker des données de façon
organisée. MySQL se caractérise par sa simplicité de mise en oeuvre pour les
développeurs débutants et se démarque des autres bases de données car elle est
gratuite.
7
PHP (Hypertext Preprocessor) : PHP est un langage de programmation pour le
Web. Il a été créé afin de concevoir des sites Internet dynamiques. Le code PHP
peut s'intégrer directement dans le code HTML. Associé à MySQL, le langage PHP
permet de développer des applications Web puissantes reliées si nécessaire à des
bases de données.
- 57 -
8
Serveur Web : Il permet d’analyser des requêtes issues de fichier PHP en
relation avec la base de données par exemple. Il les interprète pour les rendre
lisible sur le navigateur (Internet Explorer) de l’utilisateur final.
9
XML : Standard du consortium W3C considéré à l'origine comme un langage
facilitant la définition, la validation et le partage de différents formats de documents
sur le Web.
10
PDF (Portable Document Format) : Format de fichier créé par Adobe permet
tant de visualiser et d'imprimer un fichier sur n'importe quelle plate-forme via l'outil
Acrobat Reader.
11
Outils graphiques : ce sont les éléments composant la charte graphique (les
boutons, le logo, la typologie, les choix chromatiques, création graphique…)
12
Illustrator (Adobe) : Adobe Illustrator traite le graphisme vectoriel grâce à ses
options créatives et ses puissants outils conçus pour l'édition efficace d'illustrations
pour le Web, l'impression et tout autre support.
13
Photoshop (Adobe) : Logiciel de traitement d’images notamment pour les
photos. Il permet également la création d’images graphiques pour le Web (charte
graphique). Ses nombreux formats d’enregistrement d’images facilitent la
compression de photos.
14
SIG (Système d’Information Géographique) : système informatique de
matériels, de logiciels, et de processus conçus pour permettre la collecte, la
gestion, la manipulation, l'analyse, la modélisation et l'affichage de données à
référence spatiale afin de résoudre des problèmes complexes d'aménagement et de
gestion"
15
Format vectoriel : Une image vectorielle se présente sous forme d’un ensemble
de vecteurs. Elle est définie par des objets géométriques ayant des attributs de
forme, de couleur et de corps de trait, de couleur d'aplat, etc. Les fichiers d’images
vectorielles sont souvent peu volumineux. Autre avantage, l’image vectorielle
n’impose pas de définition fixe de l’image. Un dessin vectoriel peut donc être
agrandi et réduit à volonté sans perte de qualité (dans les limites de définition de la
carte de traitement d’image utilisée.)
16
Scapin et Bastien : Critères ergonomiques et interface homme machine (IHM) :
http://www.ergoweb.ca/criteres.html/
17
Peter Stockinger : Sémiologue en système d’information en ligne. Analyses
sémiotiques des sites Web : http://www.semionet.com/
- 58 -

Langue

Rapport Imst

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Rapport Imst

Titre original :

Transféré par

Droits d'auteur :

[GIANELLA SEBASTIEN MASTER PRO IMST]

Application cartographique interactive

Maître de projet : Monsieur Yann de Saint Denis

Avant de vous présenter, le contenu de mon stage, j’aimerai remercier

Je souhaiterai maintenant remercier individuellement chaque personne :

Valérie Montrieul ; gérante de l’entreprise, pour ses conseils professionnels,

Stéphanie Bertault, graphiste, pour sa gentillesse et son talent de créatrice

Marc Seguin, spécialiste en bases de données et langages, pour sa bonne

Philippe Jean, chargé de clientèle, pour sa générosité, son dynamisme mais

Enfin, Yann de Saint Denis, spécialiste en multimédia, Internet/Intranet et

1. / PRESENTATION DE LA SOCIETE ET DU STAGE ........... 6

1.1/ Les activités ............................................................................. 6

1.2/ La stratégie d'Objectif ............................................................ 7

2 / ETUDE DE FAISABILITE ..................................... 9

2.1/ Analyse des besoins................................................................ 9

2.3/ Analyse conceptuelle ............................................................ 17

3.1/ Les diagrammes des cas d’utilisation ................................. 30

3.2/ L’optimisation du SI.............................................................. 32

4 / ETUDE CONCEPTUELLE .....................................38

4.1/ Planning réel des tâches effectuées ................................... 38

4.2/ Bilan conceptuel .................................................................... 39

4.3/ Le prototype BackOffice ....................................................... 40

4.4/ Le prototype FrontOffice ...................................................... 40

4.5/ Introduction au choix de la thématique ............................. 41

5 / CAS PRATIQUE ‘VELOROUTE DES MARAIS’ .............42

5.1/ Présentation de la thématique ............................................ 42

TABLE DES ILLUSTRATIONS.......................................56

La formation en Master Pro IMST (Image, Multimédia et Sciences

Ayant travaillé au cours de l’année sur un projet de web-mapping, je me

A travers ce rapport, je présenterai tout d’abord la société Objectif et le

Objectif (www.objectif-multimedia.com) est une Société de Services en

Objectif est une SARL (Société A Responsabilités Limitées) dont le

1.1/ LES ACTIVITES

Elle se divise aujourd'hui en trois grands pôles.

Communication et développement multimédia

Formations liées au monde d'Internet

1.2/ LA STRATEGIE D'OBJECTIF

1.2.1/ L'application de gestion de contenu Compoz'it

1.2.2/ La cartographie interactive

Objectif s'est aussi illustré par la réalisation de modules de cartographie

1.3/ MON ROLE

Le projet que l’on m’a confié s'apparente à la fois à la gestion de contenu et

Lorsque sa carte est terminée, il la rendra accessible via l’application

Cette application s'inscrit avant tout dans le cadre du travail de recherche et

Nous avons commencé par la rédaction du cahier des charges fonctionnel

2.1/ ANALYSE DES BESOINS

2.1.1/ Description globale

Pour aborder ce projet, il nous faut brièvement expliquer les aspects de

* Le premier s’oriente plus du côté technique et donc de la forme que doit

* Le second concerne plus le contenu de l’application et définit la

A travers plusieurs mots-clés, nous allons dégager les axes directeurs du

2.2/ ANALYSE DE L’EXISTANT.

• Navigation expliquée car ‘panier’). Ce type d’action est similaire

• Lisibilité difficile sur certain survol. cette application.

• Espace vide (blanc), sans information lors interface externe à l’application

• Choix de certaines couleurs (sémiologique

• Interface/ charte graphique vente, Travaux, Lieux publics) directement

Les contraintes mise à la disposition de l’administrateur.

• Niveau de zoom trop important Celle-ci regroupe entre autre la saisie du

• Transparence du fond de carte du pictogramme ‘Arrêt’ (Longueur,

inversé. rotation, positionnement) ou encore la

• Les couches affichables ne sont flèche indiquant le sens de direction de la

Niveau d’interactivité formulaires HTML offre la possibilité de

Web-SIG. renseigner par exemple la nature des