Reconfiguration du site Internet du groupe FAROS Année ... · CQPM « Correspondant pour les technologies de l’information et de la communication » Eric Voisin 1, rue des chapeliers

CQPM « Correspondant pour les technologies de l’information et de la communication »

Eric Voisin 1, rue des chapeliers 22300 Lannion tél : 02 96 37 94 62 e-mail : [email protected]

1

CCI de MORLAIX

Reconfiguration du site Internet

du groupe FAROS Année 2001/2002 (du 14 mai 2001 au 10 juin 2002) Contrat de qualification

Eric Voisin



2

Remerciements Je tiens à remercier Monsieur Christian Le Coadou, Président du Directoire du groupe Faros, pour m’avoir accueilli au sein de sa société. Je tiens à remercier également Monsieur Pierre Kerbourc’h , Directeur du service formations, Aurélie Mercier , responsable de la formation, Cécile Anchisi, intervenante (conduite de projet) et toutes les personnes de la Chambre de Commerce et d’Industrie de Morlaix, pour leurs précieux conseils. Je remercie particulièrement mes maîtres de stage durant ces 12 mois, Philippe Printant , directeur technique adjoint, et Claude Wicky, ingénieur recherche et développement, pour le suivi et la mise au point des différentes étapes du parcours. Je remercie aussi Lucile Jestin, responsable de la communication, ainsi que Frédéric Pierre, directeur technologie, et Paul Rault, chargé de mission, pour leur conseils dans l’analyse du projet Faros group. Je remercie également Gwenael Henry, directeur de Behring et concepteur des cd-rom Croisières-Cotières, pour m’avoir conseillé et aidé dès que j’en avais besoin. Je remercie enfin toute l’équipe Faros pour m’avoir fait confiance.



3

Sommaire

1. PROJET FAROS GROUP..................................................................................................................................... 4

2. DESCRIPTION ...................................................................................................................................................... 5

a) Situation initiale :.................................................................................................................................................... 5

b) Objectif à atteindre : ............................................................................................................................................... 5

3. RAISON DE L’ÉTUDE .........................................................................................................................................6

a) Détail du budget envisagé par l’entreprise.............................................................................................................. 6

b) Prévision de rentabilité escomptée ......................................................................................................................... 6

c) Autre ....................................................................................................................................................................... 6

4. RÉPARTITION DES TRAVAUX ......................................................................................................................... 7

a) Travaux réalisés par le service................................................................................................................................ 7

b) Travaux réalisé par le candidat suivant un échéancier prévisionnel fixé par l’entreprise et défini ci-après :......... 7

5. MOYENS EXTERNES ET INTERNES (MATÉRIEL, TEMPS, HUMAIN) MIS À LA DISPOSITION DU CANDIDAT................................................................................................................................................................ 8

a) Matériel :................................................................................................................................................................. 8

b) Temps : ................................................................................................................................................................... 8

c) Humain : ................................................................................................................................................................. 8

6.NOMBRE DE CANDIDAT CONCERNÉ PAR L’ÉTUDE : ................................................................................. 8

7.NOMBRE DE PERSONNES AFFECTÉES À L’ÉTUDE :.................................................................................... 8

8. ENUMÉRATION DES « ÊTRE CAPABLES DE » CONCERNÉS PAR L’ÉTUDE.......................................... 9

a) Analyser le projet :.................................................................................................................................................. 9

b) Elaborer le cahier des charges : ............................................................................................................................ 10

c) Produire : .............................................................................................................................................................. 22

d) Réaliser le prototype............................................................................................................................................. 22

e) Tester et corriger................................................................................................................................................... 22

f) Définir l’hébergement et mettre en ligne............................................................................................................... 22



4

1. Projet Faros group Reconfiguration du site Internet du groupe FAROS, leader mondial de la simulation pour les transports aéronautiques, automobiles et maritimes. Ce projet sera développé en version anglaise (française par la suite) afin de le soumettre à l’ensemble du groupe.

Faros group : Un site Web compact



5

2. Description

a) Situation initiale : Actuellement présence sur Internet d’un site d’une centaine de pages, très détaillé, réservé aux clients et aux spécialistes.

Seule les rubrique « Simulateurs Automobiles » et « Actionnaires » sont développées, les autres rubriques "Simulateurs Aéronautiques", "Simulateurs Maritimes" et "CBT/e-training " renvoient directement sur les sites des différentes filiales concernées, à savoir wicat.com, elan-training.com, sindel.it, croisieres-cotieres.com et sinapse.com.

Ce site est développé en deux versions, anglaise et française.

Page index version française du site initial faros.com

b) Objectif à atteindre : Présenter de façon succincte et dynamique les activités de la société, et surtout faire évoluer le site actuel vers un grand site fédérateur intégrant les sites des filiales dans des rubriques respectives. L’aspect visuel devant suivre avec une charte graphique unifiée.



6

3. Raison de l’étude

a) Détail du budget envisagé par l’entreprise Travail effectué en interne par le webmaster. Evaluer le temps (nombre d’heures) de développement des rubriques, animations Flash et des scripts et multiplier par le taux horaire, soit 46 euros hors-taxe. Exemple : 132 heures par 46 = 6072 euros

b) Prévision de rentabilité escomptée Ce site doit apporter un gain de notoriété sur le tissus national (communication institutionnelle, actionnaires…), international (clients…) et sur le produit grand public "Croisières-Cotières", le site croisieres-cotieres.com y étant intégré. Il doit aussi être un outil créant des contacts commerciaux "avant vente" et pour la vente, un outil de fidélisation des clients existants (support, annonces privilégiées, news...) mais aussi un outil aidant les commerciaux à renforcer leurs argumentaires.

c) Autre Le faible coût, le style et la compacité du site, apportent une nouvelle dimension à la communication de l’entreprise. Il est en relation directe avec les campagnes de publicité et les communiqués de presse.



7

4. Répartition des travaux

a) Travaux réalisés par le service Coordination et validation par le tuteur, Philippe Printant, directeur technique adjoint. Rédaction des communiqués de presse par Lucile Jestin, responsable de la communication du groupe Faros.

b) Travaux réalisé par le candidat suivant un échéancier prévisionnel fixé par l’entreprise et défini ci-après : Conception et réalisation du site étalé sur trois mois calendaires 1. Analyse de projet : Février 2. Avant projet sommaire : Fin février début mars 3. Avant projet détaillé : Fin mars et avril 4. Transmission du mémoire : 15 mai 5. Site définitif : Courant mai 6. Présentation du site devant le jury : le mardi 11 juin



8

5. Moyens externes et internes (matériel, temps, humain) mis à la disposition du candidat

a) Matériel Bureau, PC, scanner, imprimante, logiciels ( Dreamweaver, Fireworks, Flash…).

b) Temps Développement sur un mois à temps plein (travaux pratiques en formation et à la maison).

c) Humain Appui des intervenants de la Chambre de Commerce et d’Industrie de Morlaix. Interlocuteurs dans l’entreprise : mes tuteurs, Messieurs Philippe Printant et Claude Wicky.

6.Nombre de candidat concerné par l’étude : 1 : Eric Voisin

7.Nombre de personnes affectées à l’étude : 2 (avec le tuteur) : Eric Voisin et Philippe Printant



9

8. Énumération des « être capables de » concernés par l’étude

a) Analyser le projet Définition de la cible :

Elle se décline principalement en trois catégories, les clients potentiels désireux de se renseigner sur les produits, dont ceux intéressés par les cd-roms Croisières Côtières, le milieu professionnel et les actionnaires. les professionnels de la formation aéronautique, maritime et automobile. Les actionnaires les professionnels de la plaisance. les plaisanciers. les plaisanciers désireux de passer le permis bateau les boutiques d'accastillage. les distributeurs de produits multimédia…

le milieu professionnel

Le contenu : un site Web évolutif et fédérateur, présentation des activités du groupe Faros en intégrant les différents sites des filiales dans une charte graphique unifiée. La forme (graphisme, style, ergonomie…) : Un site attrayant, compact et dynamique (présence d'animations Flash) avec un graphisme soft mais novateur.

Page index version anglaise



10

b) Élaborer le cahier des charges : Organisation du contenu, LE CONTENU : 34 pages sur 5 niveaux (voir l'arborescence ci-après)

1. Index (Home) 2. Version Flash 3. Accueil en français 4. Accueil en anglais 5. Les clients dans le monde (planisphère) 6. Les news 7. Communiqués de presse 8. Recrutement 9. Le groupe Faros et ses filiales (menu contextuel vers les pages des filiales) 10. Faros 11. Wicat 12. Sindel 13. E.t.e 14. Sinapse 15. Behring 16. S.s.i 17. Quinze ans de recherche et développement 18. Les simulateurs aéronautiques 19. Computer Based Training 20. Part Task Training 21. Flight Training Devices 22. Répartition de la gamme par type de personnel 23. Les simulateurs automobiles 24. La gamme 25. Véhicules légers 26. Personnes à mobilité réduite 27. Poids lourds 28. Les simulateurs maritimes 29. La gamme des simulateurs professionnels 30. Le simulateur de pêche 31. Le produit grand public "Croisières Côtières" 32. Sinapse (le multimédia de formation) 33. Espace « actionnaires » (à développer) 34. Contact.

Ce contenu est bien sûr évolutif et l’espace « actionnaires » par exemple, sera développé par la suite.



11

L' arborescence :

Arborescence du site " faros group"

niveau 1 niveau 2 niveau 3 niveau 4 niveau 5



12

Le story board : ou comment naviguer dans le site… > Page d'Accueil (Home) Lien 1 : version française, vers la page indexfr.htm Lien 2 : version anglaise, vers la page indexgb.htm Lien 3 : intro flash (à développer) Au chargement de la page (on load), ouverture d’une fenêtre (pop-up) contenant une animation Flash de présentation du groupe, se déroulant en deux scènes, avec liens sonores vers les rubriques concernées et boucle musicale de ma composition.

Logo Faros

Intro Flash

Version française

Version anglaise

1

2

3



13

> page « type » index version anglaise Lien 1 : logo Faros, retour à la page d’Accueil Lien 2 : clients.htm Lien 3 : indexfr.htm Lien 4 : news.htm Lien 5: index_group.htm Lien 6 : index_avia.htm Lien 7 : index_mar.htm Lien 8 : index_auto.htm Lien 9 : index_cbt.htm Lien 10 : index_acti.htm Lien 11 : contact.htm

Image titre : elle change en fonction des rubriques Arrière plan : il change en fonction des rubriques Barre de navigation : elle est constituée de huit boutons avec effet de survol, dont un qui déclenche un menu contextuel.. On la retrouve sur toutes les pages du site. Animation Flash : elle est de style radar et présente un tour d’horizon des filiales du groupe Bouton de lien vers la version française Planisphère : elle dirige vers une carte des clients de Faros dans le monde

4

5

6

7

8

9

10

11

1

3 2

Image titre

Animation Flash

Version française

Logo Faros

Planisphère

Barre de navigation

Arrière plan



14

> page « type » rubriques version anglaise Elles se déclinent comme la page index avec en plus le développement d’une sous-rubrique par simulateur différent (Aviation, Marine et Automobil e) qui permettra par la suite de descendre d’un niveau ou de créer un « sous-site ». Elles possèdent également en bas de page sur la droite, une barre de navigation secondaire qui permet de se rendre sur la page index, la page group, contact et news de la version visitée.

une barre de navigation secondaire

Définition des contenus et nomenclature des écrans des pages types :

4

5

6

7

8

9

10

11

1

2 Version française

Logo Faros

Planisphère

Barre de navigation

Image titre

Texte

Arrière plan

Sous rubrique

Barre de navigation secondaire

3



15

La nomenclature des écrans ou gestion des contenus, permet à votre client ou au webmaster d’en assurer la maintenance. > Page d'Accueil (Home) Nom Liens poids faros3 / index.html 71k (tableau de 15 cellules) logo logfar.gif 3k fond 1stpage.gif 64k (divisée en 10 cellules) image 1 flagfr.gif indexfr.htm 1k image 2 flaggb.gif indexgb.htm 1k Image 3 flash.gif anim.htm 2k

faros3 / index.html

> page index version anglaise (voir la capture d’écran page 9 ou 19) Nom Liens poids faros3 / english / indexgb.htm 164k (tableau de 30 cellules) logo logfar.gif index.html 3k image haut oeil.gif 36k (divisée en 3 cellules) texte haut By training pilots… animation flash groupe04.swf 61k image 1 planis.gif clients.htm 3k image 2 flagfr.gif indexfr.htm 2k Image 3 bout_news.gif news.htm 2k image 4 bout_group.gif index_group.htm 3k image 5 bout_aviation.gif index_avia.htm 3k image 6 bout_marine.gif index_mar.htm 3k image 7 bout_automobile.gif index_auto.htm 3k image 8 bout_cbt.gif index_cbt.htm 3k image 9 bout_action.gif index_acti.htm 3k image 10 bout_contact.gif contact.htm 3k Texte bas Adress… Image bas faroscom.gif 3k > Page news version anglaise



16

Nom Liens poids faros3 / english / news.htm 106k (tableau de 30 cellules) logo logfar.gif index.html 3k Image haut oeil.gif 36k (divisée en 3 cellules) Titre news Texte haut By training pilots… Titre centre Faros news… Image titre centre bandogrp.gif 1k Texte centre News… image 1 planis.gif clients.htm 3k image 2 flagfr.gif indexfr.htm 2k Image 3 bout_news.gif news.htm 2k image 4 bout_group.gif index_group.htm 3k image 5 bout_aviation.gif index_avia.htm 3k image 6 bout_marine.gif index_mar.htm 3k image 7 bout_automobile.gif index_auto.htm 3k image 8 bout_cbt.gif index_cbt.htm 3k image 9 bout_action.gif index_acti.htm 3k image 10 bout_contact.gif contact.htm 3k Texte bas Adress… Image bas faroscom.gif 3k

Page news.htm

> Page aviation version anglaise



17

Nom Liens poids faros3 / english / index_avia.htm 171k (tableau de 30 cellules) logo logfar.gif index.html 3k Image haut cockpit.gif 36k (divisée en 3 cellules) Titre Message… Titre centre Message… Image titre centre bandogrp.gif Texte centre The aviation… image 1 planis.gif clients.htm 3k image 2 flagfr.gif indexfr.htm 2k Image 3 bout_news.gif news.htm 2k image 4 bout_group.gif index_group.htm 3k image 5 bout_aviation.gif index_avia.htm 3k image 6 bout_marine.gif index_mar.htm 3k image 7 bout_automobile.gif index_auto.htm 3k image 8 bout_cbt.gif index_cbt.htm 3k image 9 bout_action.gif index_acti.htm 3k image 10 bout_contact.gif contact.htm 3k Image de fond backaer2.jpg 51k

Page index_avia.htm La charte graphique :



18

l'identité visuelle de l'entreprise est liée à son histoire et à ses spécificités. La charte graphique identifie et consigne les lignes de force de l'entreprise. Cette charte devient l'outil de référence à toute production graphique. > Code couleurs : Fond blanc Autres couleurs :

> Typogaphie : police de caractère du texte : verdana, taille 2, couleur gris #999999 police de caractère du titre : verdana, taille 3, couleur gris #999999 police de caractère des mots liens: verdana, taille 2, couleur bleu #006699 Script de la feuille de style pour les liens : <style> </style>

…….lien (bleu) …….lien visité (mauve) …….lien survolé (orange) …….lien clické (bleu)



19

> Les arrières plans (backgrounds) Il y a un arrière plan différent par rubrique. Simulateur Aéronautique :

D’après une carte Jeppesen Simulateur Maritime :

D’après une carte Shom



20

Simulateur Automobile :

D’après une carte Ign



21

> Les boutons : Couleur : bleu #3399CC Police de caractère du texte intérieur : Arial, taille 12 (dans fireworks) couleur blanc #FFFFFF Police de caractère du texte intérieur italique : Arial, taille 10 (dans fireworks) couleur blanc #FFFFFF

couleur taille position alignement format Logo faros #336699 105/122 pixels haut gauche centré jpeg Boutons #3399CC 147/32 pixels centre gauche centré jpeg Barre de navigation # 6699CC 500/150 pixels gauche centré jpeg Image titre #3399CC 730/126 pixels haut droite centré jpeg Planisphère #3399CC 98/51 pixels haut gauche centré jpeg Les autre pages se déclines sur ce modèles.

Logo Faros

Boutons

Barre de navigation

Animation Flash

Image titre

cadre orange

Planisphère



22

c) Produire : La conception des logos est réalisée dans Illustrator , logiciel de dessin vectoriel.

L'acquisition, la retouches d’images et la création des barres de navigation sont réalisées sous Fireworks, logiciel de mise en page Web. Le montage des pages est réalisé sous Dreamweaver (éditeur html) ou Flash (animation pour le Web). Les scripts JavaScript sont réalisés et intégrés dans les différentes pages, sous Dreamweaver.

d) Réaliser le prototype : La réalisation du prototype se déroule durant le mois de mai.

e) Tester et corriger : Les tests et corrections se font en accord avec la responsable de la communication, Lucile Jestin. Le projet Faros group est intégré au site faros.com à l'adresse suivante (confidentielle) http://www.faros.com/faros3 , afin que les personnes concernées par le projet dans la société puissent en suivre l'évolution .

f) Définir l’hébergement et mettre en ligne : Une fois finalisé et accepté, le projet prendra le nom de domaine faros.com.

Documents

Reconfiguration du site Internet du groupe FAROS Année ... · CQPM « Correspondant pour les technologies de l’information et de la communication » Eric Voisin 1, rue des chapeliers