DEVELOPPEMENT WEB « Sites : l’Étape du Tour
Transcript of DEVELOPPEMENT WEB « Sites : l’Étape du Tour
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 1 1
UNIVERSITÉ DE NICE - SOPHIA ANTIPOLIS
IUT DE NICE - CÔTE D'AZUR
DÉPARTEMENT INFORMATIQUE
RAPPORT DE STAGE POUR L'OBTENTION DU
DIPLÔME DE LICENCE PROFESSIONNELLE
SYSTÈMES INFORMATIQUES ET LOGICIELS
SPÉCIALITÉ
Informatique Distribuée et Systèmes d'information d'entreprise
SESSION 2010 - 2011
DEVELOPPEMENT WEB
« Sites : l’Étape du Tour »
Présenté par : François COUVET
Entreprise :
Sous la direction de : M. Nhan Le THANH
Mlle Laëtitia BROUILLER
Mme Lise BRENAC
CIA 310, chemin du vallon BP 101
Bâtiment Atlas
06902 Sophia-Antipolis, Cedex
Tél 08 92 14 56 78
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 2 2
REMERCIEMENTS
Je tiens à exprimer ma sincère reconnaissance et mes remerciements à tous ceux qui ont
contribué à la réalisation de ce rapport de stage.
Mes remerciements à :
M. Michel SYSKA, Responsable coordinateur, qui assure le bon fonctionnement et le
déroulement au sein de l’université.
M. Nhan Le THANH, Responsable de la spécialité, pour son soutien durant le stage.
Mme Lise BRENAC, ma tutrice, avec ses volontés de bien m’encadrer
Mme Laëtitia BROUILLER, mon maî t re de s tage, Responsable de l’équipe
d’intégrat ion et développement Web de la société CIA, pour ses aides, ses conseils
et la formation pratique qu’elle m’a dispensée durant le stage.
Tous les Enseignants et Personnels administratifs de l’institut universitaire de technologie
NICE SOPHIA ANTIPOLIS qui nous ont formés, et ont partagé leurs connaissances pour
nous rendre compétents.
Je tiens également à adresser ma profonde gratitude à tous ceux qui ont, de près ou de loin,
participé à la réalisation de ce présent ouvrage.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 3 3
RÉSUMÉ
Pour compléter l’enseignement de la licence Professionnelle systèmes Informatiques
et Logiciels, j’ai effectué mon stage au sein de la société CIA.
Fondée en 1992, la société CIA est un groupe de Conseillers en Informatique d’Affaires
(CIA) spécialisés en conseil stratégique et développement de système d’information.
C’est à l’agence de Sophia Antipolis que j’effectue mon stage, dans le service de
Développement et d’intégration Web. Leur principal client est la société A.S.O (Amaury
Sport Organisation), qui est l’un des plus importants organisateurs d’événements
sportifs en France, notamment avec le Tour de France, Paris-Roubaix, Paris-Nice, le
rallye Dakar, le Marathon de Paris et l’Open de France.
Les projets qui m’ont été confiés, consistent à développer ou modifier des sites internet.
Mon stage a comporté trois phases.
La première consistait à découvrir WinSCP*, l’outil Unfuddle* ainsi que les différents
outils (Backoffice*, Akamai*) par le biais de la documentation interne.
La deuxième phase qui est le principal projet que l’on m’a confié, est la création des
nouveaux sites de la manifestation cycliste appelée l’Étape du Tour. Dans un premier
temps sur le serveur de test, puis après validation du client, la migration sur le serveur
de production. L’Étape du Tour est un événement permettant aux cyclistes amateurs de
courir sur le tracé d’une vraie étape du Tour de France. Ce projet a duré deux mois, il a
été réalisé en HTML*, CSS, PHP*, JAVASCRIPT*et aussi avec l’utilisation du logiciel
PHOTOSHOP.
Enfin, la troisième phase a consisté à faire différentes modifications de sites existants.
Ce stage m’a beaucoup apporté et m’a permis de me former au métier de développeur,
d’acquérir des connaissances et de l’expérience.
De plus il m’a été bénéfique, car il m’a permis d’intégrer une équipe et de comprendre
en détail comment s’organise un projet en commun dans un contexte professionnel et
de pouvoir y participer pleinement.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 4 4
SUMMARY
To complete my Professional education of Computer Systems and Software, I
accomplished a training course within the company CIA.
The CIA Company, founded in 1992, is a group of computer consulting business (CIA)
specialized in strategic advice and development of information systems.
My training course took place in the Sophia Antipolis branch in the Department of
Development and Web integration unit. Their main customer is the A.S.O company (Amaury
Sport Organization), who is one of the most important organizers of sports events in France
especially the Tour de France, the Paris-Roubaix, the Paris-Nice, the Paris-Dakar, the
Marathon of Paris and the Open of France.
The projects I was assigned to work on consisted in developing or in modifying web sites
under WinSCP.
My internship consisted of three phases.
The first was to discover WinSCP *, the tool Unfuddle* as well as the various tools such as
(Backoffice *, Akamai *) by means of the internal documentation.
The second phase, which was the main project confided to me, was the creation of new sites
in the cycling event called l’Étape du Tour, initially on the test server, then after validation
from the client, it was migrated to the production server. The Etape du Tour is an event that
allows amateur cyclists to race on the tracks of a real stage of Tour de France. The project
lasted two months, using * HTML, CSS, PHP *, * JAVASCRIPT, and also using the software
Photoshop.
Finally, the third phase was to make various modifications to existing sites.
This experience has brought me a lot and enabled me to train for the profession of a
developer, to acquire knowledge and experience.
It has been very beneficial because I have experienced integrating and fully participating in a
team project and now understand in detail how a shared project is organized in a professional
context.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 5 5
SOMMAIRE
INTRODUCTION ...................................................................................................................... 6
PRESENTATION DE L’ENTREPRISE .................................................................................... 7
1. Généralités ....................................................................................................................................... 7
2. L’entreprise CIA .............................................................................................................................. 7
3. La Carte : ......................................................................................................................................... 8
4. Les secteurs d’activités : .................................................................................................................. 9
5. Les offres de services CIA : .......................................................................................................... 10
6. Présentation de l’organigramme : .................................................................................................. 11
7. Le partenariat de la société CIA avec la société A.S.O : ............................................................... 12
PROJETS CONFIÉS .......................................................................................................................... 13
1 Présentation : .................................................................................................................................. 13
2. Présentation du projet Étape du Tour: ........................................................................................... 15
3. Analyse de l’existant : ................................................................................................................... 17
4. Environnement de développement : .............................................................................................. 19
5. Création des pages : ....................................................................................................................... 19
6. Missions confiées : ........................................................................................................................ 21
CONCLUSION ........................................................................................................................ 26
GLOSSAIRE ............................................................................................................................ 27
BIBLIOGRAPHIE ................................................................................................................... 31
ANNEXES ............................................................................................................................... 32
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 6 6
INTRODUCTION
Ce rapport présente le travail que j’ai effectué lors de mon stage de fin d’études de Licence
Professionnelle Système Informatique et logiciel option IDSE (Informatique Distribuée et
système d’information d’entreprise). Ce stage de trois mois nécessaire au terme de l’année de
formation a été effectué au sein de la société CIA, dans le service de développement et
intégration web situé à Sophia Antipolis et dont le plus important client est la société A.S.O.
La société A.S.O (Amaury Sport Organisation), s’avère être un des principaux organisateurs
d’événements sportifs en France.
Mon travail a consisté dans une première phase à moderniser et administrer de façon
autonome les sites « Étape du Tour », avec un cahier des charges et un délai précis du client
(A.S.O).
Les différentes phases du projet suivant l’attribution des tâches par le client ont été :
- l’analyse des besoins
- l’analyse de la situation en contact permanent avec la société A.S.O
- l’analyse de l’existant
- la phase de réalisation du cahier des charges
- les phases de test et de compte-rendu de rapport
Toutes ces étapes ont été réalisées de façon entièrement autonome en travaillant directement
avec le client, elles se sont avérées très enrichissantes et intéressantes pour mon expérience
professionnelle, puisque ma formation et mon engagement professionnel s’inscrivent
précisément dans ce secteur.
Dans un premier temps, je vous exposerai une présentation de l’entreprise, ensuite, je vous
décrirai les différents projets qui m’ont été confiés avec les difficultés rencontrées et les
solutions qui m’ont permis d’y remédier.
Pour finir, je vous donnerai un avis personnel sur ce stage.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 7 7
PRESENTATION DE L’ENTREPRISE
1. Généralités
2. L’entreprise CIA
Création de la société en avril 1992 au Canada
Plus de 350 salariés
3 bureaux au Canada : Québec, Montréal, Ottawa
3 bureaux en France : Paris, Aix-en-Provence, Sophia-Antipolis
3 centres de développement à distance : Montréal, Québec, Ottawa
Certification ISO 9001
Chiffre d’Affaires de 30 M€
CIA est spécialisée dans le conseil stratégique et développement de système d’information.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 8 8
3. Carte de l’implantation de CIA
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 9 9
4. Les secteurs d’activités
Banques, finance
Assurance, réassurance et courtage
Protection sociale
Gouvernement, Collectivités locales
Transport et autres
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 10 10
5. Les offres de services CIA
Trois grands défis pour le secteur des technologies de l’information :
Devenir une activité stratégique au même titre que les autres domaines d’affaires.
Trouver l’équilibre entre innover et contribuer activement à la création de valeur de
l’entreprise…
Tout en poursuivant les efforts pour réduire les coûts d’un parc technologique et
applicatif de plus en plus complexe et difficile à gérer.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 11 11
6. Présentation de l’organigramme
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 12 12
7. Le partenariat de la société CIA avec la société A.S.O
A Sophia Antipolis, le service dans lequel je me trouve est la section d’intégration et de
développement web, qui travaille notamment pour leur client le plus important dans le secteur
web sites internet, la société A.S.O.
Cette équipe est chargée :
Du développement d’applications
De la maintenance et la mise à jour d’applications
De la proposition de chartes graphiques
Du design d’applications
Des bannières animées
De la mise à jour de sites
De l’intégration de nouveaux éléments
De la création de Newsletters
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 13 13
PROJETS CONFIÉS (Les mots accompagnés d’une * sont expliqués dans le glossaire)
1. Présentation
Lors de mon arrivée au sein de l’entreprise, la responsable m’a détaillé les différents
points sur lesquels je travaillerai tout au long de mon stage. Elle m’a également montré et
exposé le rôle des différents serveurs FTP avec l’outil WinSCP* et leurs utilisations.
En effet, les diverses modifications sur les sites en production sont dans un premier temps
réalisées sur un serveur de test, puis visualisées par le client sur un site test et ce n’est
qu’après validation que les modifications sont migrées sur le serveur du site en production.
On m’a aussi expliqué l’organisation et l’utilisation de l’outil Unfuddle*, qui permet au client
d’activer un Ticket*, aussitôt que ce ticket est accepté par un membre de l’équipe CIA, il
donne la possibilité de rester en contact avec l’équipe d’A.S.O sans avoir à préciser le sujet.
Quant la tâche a été effectuée, le ticket est résolu. Ce dernier ne sera clos que par la validation
du client.
Ensuite, ma responsable m’a montré la hiérarchisation des dossiers de conception des sites sur
lesquels j’allais travailler, de même que les outils dont j’aurai besoin. Comme l’application
Akamai*, puis du fichier Exel* : time reporting*, ainsi que les fichiers de procédures liés aux
fonctionnements et modifications des sites.
La société A.S.O a des procédures très précises en ce qui concerne la construction de ses sites.
Il a fallu que je suive et respecte scrupuleusement le cahier des charges ainsi que la
hiérarchisation et les procédures des tâches. En effet, si tous leurs sites sont basés sur des
techniques communes, la société A.S.O ne donne pas accès à toutes les parties de ses sites, et
de plus ne donne pas forcément tout le site à gérer à la société CIA. Par exemple, la partie
base de données MYSQL* n’est pas accessible. J’ai eu accès à un outil pour insérer des
éléments dans la base de données, notamment pour les fichiers Template* des menus qui
gèrent aussi la redirection vers les pages. Je n’ai pas eu à gérer le contenu des homepage*,
car les contenus de ces pages sont administrées directement par A.S.O.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 14 14
Pour finir, toute modification dans le site (mise à jour, contenu erroné, etc..) n’est pas
autorisée sans l’accord et validation du responsable d’A.S.O, ce doit être associé à un Ticket.
Ce n’est qu’après création du ticket que les modifications peuvent-être exécutées.
J’ai donc dû m’adapter à leur façon de travailler en analysant les sites déjà en production.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 15 15
2. Présentation du projet Étape du Tour
La société A.S.O (Amaury Sport Organisation) est un des plus importants organisateurs
d'événements sportifs en France avec le Tour de France, Paris-Roubaix, Paris-Nice, le rallye
Dakar, le Marathon de Paris et l‘Open de France.
La société A.S.O souhaite actualiser les sites de l’Étape du Tour, ces sites devront respecter et
suivre l’évolution technique et graphique des sites déjà modernisés par la société elle-même.
« L’étape du Tour » comporte 2 épreuves : l’Acte 1 et l’Acte 2. Les sites internet l’Étape du
Tour Acte 1 et Acte 2 devront se différencier visuellement, pour que l’internaute puisse
identifier au premier coup d’œil sur quel Acte du site il se trouve.
L’Étape du Tour Mondovélo est une manifestation cyclosportive organisée chaque année
depuis 1993 par A.S.O (Amaury Sport Organisation). Il s’agit d’un des plus grands
rassemblements annuels de cyclistes au monde.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 16 16
En 1992, exactement 10 ans après l'apparition de ce type d'épreuves, le succès de ce genre de
compétition est de plus en plus fort. Devant ce constat, A.S.O à l'idée de permettre aux
cyclotouristes et cyclistes amateurs de courir sur le tracé d'une vraie étape du Tour de France.
Souvent l'étape reine du Tour. Ainsi, nait en 1993 et en seulement trois mois, l'Étape du Tour.
La première édition se déroule dans les Pyrénées entre Tarbes et Pau sur le tracé de la 17e
étape. Elle s’accomplit le jour de repos du Tour et permet ainsi de drainer environ
1 700 personnes, avec certaines célébrités qui reviendront comme Alain Prost et Antoine de
Caunes, ou de jeunes espoirs du cyclisme comme Christophe Rinero qui remporte cette
première édition.
En 2011 pour satisfaire tout le monde A.S.O décide de créer deux étapes du Tour et en plus, la
création de Paris-Roubaix cyclosportive.
Le projet qui m’a été confié est la refonte dudit site « l’Étape du Tour », car la société A.S.O
souhaite remanier et moderniser ses sites de l’Étape de Tour en intégrant des contenus
dynamiques.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 17 17
3. Analyse de l’existant
Pour commencer à mon arrivé, j’ai procédé à l’installation de l’ordinateur neuf que CIA
avait mis à ma disposition. Puis, j’ai installé et configuré les services et outils de
programmation.
Par la suite, j’ai entrepris de visionner le site existant afin de visualiser les techniques
employées.
Ci-dessus la page d’accueil du site l’Étape du Tour (Acte1) ancienne version
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 18 18
Ci-dessus la page Critères sportifs du site l’Étape du Tour (Acte1) ancienne version
Ensuite, j’ai étudié tous les sites auxquels l’Étape du Tour devait se référer ; notamment le site
du 10KM L’ÉQUIPE http://www.10km.lequipe.fr/, sur lequel l’Étape du Tour devait
s’inspirer vis à vis de la mise en page du contenu. Pour ce qui est de la charte graphique, elle
avait été au préalable créée sur la même base que celle du site PARIS-ROUBAIX
CHALLENGE http://www.parisroubaixchallenge.com/fr/homepage.html. Les trois sites se
trouvent d’ailleurs sur la même page d’accueil. Je devais donc rigoureusement respecter cette
charte.
Les sites étant hébergés sur le serveur de chez A.S.O, je n’avais pas à m’occuper de la base de
données. Pour la création d’éléments à insérer dans la base de données, A.S.O nous a mis en
place une application sur le backoffice*.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 19 19
4. Environnement de développement
L’Étape du Tour est un site développé en langage HTML*, CSS*, JAVASCRIPT* et
PHP* avec une base de données MySQL.
Pour le développement de ce site, j’ai utilisé un système d’exploitation Windows Seven-pro.
C’est avec le logiciel de développement DreamWeaver, l’éditeur de texte NOTEPAD++ et le
logiciel PHOTOSHOP, que j’ai effectué les retouches et insertion de photos, logos, etc.
Les langages de programmation ont été imposés par le client.
5. Création des pages
J’ai commencé par récupérer tous les contenus des sites existants (rubriques, images,
textes…) pour les réintégrer dans les futurs sites.
A la suite de ceci, je me suis consacré à la phase de développement. Pour cela, j’ai utilisé les
outils de développement, DreamWeaver et Notepad++. Les sites internet de chez A.S.O
utilisent des « INCLUDE *» en SSI*. Après avoir inséré tous les « INCLUDE » dans les
header* et dans les footer* pour la construction des pages, j’ai commencé à implanter le
contenu en reprenant les différentes balises des CSS. Il y a trois CSS de mise en page, un
général qui se nomme « style.css » et qui gère l’ensemble, puis les « fr.css » et « us.css » qui
sont plus spécifiques à chaque version en Français ou en Anglais. Ces trois CSS sont répartis
une fois dans l’Acte1 et une fois dans l’Acte2, les deux sites étant différents visuellement.
Après avoir réintégré tous les contenus en y adaptant la nouvelle charte graphique* et je me
suis occupé du menu principal et du menu secondaire ; le menu secondaire se trouvant
uniquement dans le footer de la homepage. J’ai pour cela modifié les fichiers Template* qui
gèrent dynamiquement les pages « menu.html » et « menu_secondaire.html ».
Cette phase m’a pris beaucoup de temps car le site comprend plus de 168 pages.
En plus de la refonte du site, la société A.S.O me demandait régulièrement l’intégration de
nouveaux textes, photos, ainsi que la création de nouvelles pages. Cela implique à chaque
fois un travail sur Photoshop pour l’insertion d’un nouveau titre, puisque les titres sont
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 20 20
générés par une image JPG*. Tous les titres sont écrits sur une image les uns en dessous des
autres à une distance précise. Il y a en fait quatre images, deux pour le site de l’Acte1, une en
français et une en anglais et la même chose pour le site de l’Acte2.
Une fois ces images installées au sein du site, c’est avec le fichier « fr.css » ou « us.css » que
l’on appelle le titre voulu. Cette technique implique de modifier toutes les images à chaque
insertion d’un nouveau titre, mais aussi de l’enregistrer quatre fois sur le serveur FTP. Enfin,
lorsque l’on a corrigé ces images, il faut rectifier les quatre CSS (l’Acte1 : « fr.css »,
« us.css », l’Acte2 : « fr.css », « us.css »), puis pour finir, modifier le fichier Template et
régénérer* le site. Il faut pour ce faire se rendre sur l’URL* du backoffice d’A.S.O.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 21 21
6. Missions confiées
Mission 1
En plus des projets qui m’ont été confiés durant ce stage, on m’a attribué diverses missions
importantes de la part d’A.S.O.
Construction du site d’A.S.O en version Anglaise. A.S.O souhaitait rendre son site disponible
aux Anglophones en construisant une version de son site en langue Anglaise.
Dans un premier temps, J’ai fait une étude de l’existant, en parcourant les fichiers présents sur
le serveur de production. Pour ce site, le fonctionnement n’est similaire à celui de l’Étape du
Tour uniquement que vis à vis des « Includes*» et des insertions des contenus dans les pages.
Cependant des changements existent, puisque ce site contient différents tableaux de
formulaires ou réponses d’offres qui sont gérés par des fichiers Template*, des fichiers
JavaScript* et PHP*.
Page ressources humaines/votre candidature du site A.S.O version anglaise.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 22 22
Page ressources humaines/offre d’emploi du site A.S.O version anglaise.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 23 23
Le formulaire a nécessité la refonte du fichier CSS*, Le fichier CSS version Française n’étant
pas adapté à la longueur des textes en Anglais.
Les offres, les labels du formulaire sont gérés par une base de données MySQL*, il faut donc
créer une offre ou un label dans la table via l’outil Backoffice* de chez A.S.O.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 24 24
A la réception de ce projet, la demande se réduisait juste à « Traduction du site A.S.O en
anglais »
Aucunes indications concernant les fichiers à trouver, où les trouver, comment les modifier. Il
a donc fallu chercher et déduire si la page est gérée par un « Template », un fichier
JAVASCRIPT* ou PHP. Ainsi que, quel CSS utilise cette partie de page ? Le plus souvent
c’est un fichier Template, des fichiers JavaScript, un ou plusieurs fichiers PHP et plusieurs
fichiers CSS sur lesquels j’ai dû travailler pour modifier la partie d’une page. Il est donc
impératif d’avoir une compréhension précise du fonctionnement de l’ensemble pour que les
modifications puissent être effectuées.
A la livraison du projet, l’équipe d’A.S.O m’a fournit les traductions des pages en anglais.
Le site en version Anglaise est dans un premier temps construit dans une version test, sur un
serveur dédié uniquement aux sites de test. Puis, après validation du client, tous les fichiers
modifiés sont transférés sur le serveur de production.
ci-dessus la page accueil du site A.S.O en version anglaise.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 25 25
Mission 2
La modification du bandeau partenaires déroulant du site PARIS-DAKAR*, a consisté à la
suppression de logos et à l’insertion de nouveaux logos. Ceci a nécessité un travail sur
PHOTOSHOP* pour l’action des logos à insérer, ainsi que la modification du fichier .tpl*.
Le changement des pages partenaires en version Française, Anglaise et Espagnole sur le site
PARIS-DAKAR, avec la refonte complète de ces pages, a requis un travail sur
PHOTOSHOP* et sur DREAMWEAVER*.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 26 26
CONCLUSION
J’ai présenté dans ce rapport l’ensemble des tâches que j’ai été amené à réaliser lors de mon
stage en entreprise chez CIA pour la licence Professionnelle dans le domaine d’Informatique
Distribuée et Système d'information d'entreprise. Le projet qui m’a été confié « Refonte du
site de l’Étape du Tour » est aujourd’hui en ligne et opérationnel.
Lors de ce stage, j’ai eu l’occasion de mettre en pratique les cours qui m’ont été prodigués au
sein de l’université de Sophia Antipolis.
De plus, ce stage en entreprise m’a permis l’élargissement et le perfectionnement de mes
compétences dans les langages web (html/css/php/javascript).
Dans l’ensemble, cela a été une source d’enseignement sur différents points. En effet, outre
l’avantage d’avoir pu me permettre d’approfondir mes connaissances en informatique, j’ai
également pu prendre conscience de l’activité d’un développeur Web. Ce stage m’a aussi
permis de comprendre en détail comment s’organise un projet en équipe dans un contexte
professionnel et de pouvoir y participer pleinement.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 27 27
GLOSSAIRE
Akamai
Application servant dans notre cas, à forcer la mise à jour lors de changement de photos,
vidéos, css, javascript.
Base de données
Lot d'informations stockées dans un dispositif informatique.
Charte graphique
La charte graphique ou normes graphiques est un document de travail qui contient l'ensemble
des règles fondamentales d'utilisation des signes graphiques qui constituent l'identité visuelle
d'un projet.
Excel
Logiciel permettant de créer, afficher et imprimer des classeurs Excel (fichiers XLS)
Footer
Bas de page d’une page web.
FTP
(File Transfer Protocol) permet, comme son nom l'indique de transférer des fichiers par
Internet ou par le biais d'un réseau informatique local (intranet).
Header
En-tête d’une page web.
Homepage
Page de présentation d’un site web « accueil »
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 28 28
HTML
HyperText Markup Language. C’est le format de données conçu pour représenter les pages web.
Il permet notamment d'implanter de l'hypertexte dans le contenu des pages et repose sur un
langage de balisage, d’où son nom.
Include
Permet d'insérer à un endroit voulu le code contenu dans un fichier.
Jpg
La norme JPEG est une norme qui définit le format d'enregistrement et le calcul de décodage
pour une représentation numérique compressée d'une image fixe.
Langage informatique
On appelle langage informatique, un langage formel utilisé lors de la conception, la mise en
œuvre, ou l'exploitation d'un système d'information. Le terme est toutefois utilisé dans
certains contextes dans le sens plus restrictif de langage de programmation.
MySQL
C’est un système de gestion de base de données (SGBD). Selon le type d'application, sa
licence est libre ou propriétaire. Il fait partie des logiciels de gestion de base de données les
plus utilisés au monde, autant par le grand public (applications web principalement) que par
des professionnels, en concurrence avec Oracle et Microsoft SQL Server.
PHP
Acronyme récursif pour : Hypertext PreProcessor. C’est un langage de scripts libres
principalement utilisé pour produire des pages web dynamiques via un serveur HTTP, mais
pouvant également fonctionner comme n'importe quel langage interprété de façon locale, en
exécutant les programmes en ligne de commande.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 29 29
PhpMyAdmin
Est une application Web de gestion pour les systèmes de gestion de base de
données (SGBD) MySQL réalisée en PHP et distribuée sous licence GNU GPL.
Régénérer
Après une mise à jour d’un document, il s’agit de rafraichir la page via un outil.
Reporting
Fichier Excel permettant de reporter le temps passé sur chaque travail effectué.
Serveur web
C’est un ordinateur connecté au web sur lequel fonctionne un logiciel serveur HTTP, qui
héberge des sites web.
SSI
Server Side Include. Code inséré dans une page Web et interprété par le serveur avant
d'envoyer le résultat au client.
Template
Est un gabarit, un patron de mise en page où l'on place images et textes. « Template » est un
terme anglais utilisé en informatique pour désigner un modèle de conception de logiciel ou de
présentation des données.
Ticket
C’est une demande, une tâche à effectuer, qui peut aller de la simple demande d’intégration à
la construction d’un site.
.tpl
Abréviation de Template.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 30 30
Unfuddle
Outil de suivi de commandes permettant de communiquer entre le client et la société CIA, on
y poste les tickets (demandes), cet outil permet : l’ouverture d’un ticket, l’assigner (coté
client), l’accepter (côté CIA), résolver (CIA) et clôturer (client).
Web
World Wild Web (Toile d'araignée) : composante de l'internet. Structure de navigation sur un
réseau de pages via des liens hypertextes, mots sur lesquels il suffit de cliquer pour accéder à un
autre document.
WinSCP
WinSCP est un client SFTP graphique pour Windows. Il utilise SSH et est open source. Le
protocole SCP est également supporté. Le but de ce programme est de permettre la copie
sécurisée de fichiers entre un ordinateur local et un ordinateur distant.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 31 31
BIBLIOGRAPHIE
Site internet : Site de la documentation en ligne de PHP
http://www.php.net/manual/fr/index.php
Site internet : site proposant plusieurs astuces et module en JQuery
http://www.lafermeduweb.com
Site internet : site communautaire dédié à la conception de site web, aux standards W3C et aux feuilles de styles CSS
http://www.alsacreation.com
Caractères spéciaux et entités HTML
http://alexandre.alapetite.fr/doc-alex/alx_special.html
Le site de l’Étape du Tour
http://www.letapedutour.com/
Le site du 10km l’Équipe
http://www.10km.lequipe.fr/
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 32 32
ANNEXES
PLANNING DES SEMAINES DU STAGE ........................................................................ 33
SOLUTIONS ET RESULTATS .......................................................................................... 35
Exporter des données sur serveur FTP via l’outil .......................................................................... 35
Echanger les informations ............................................................................................................. 36
Mise à jour des pages web ............................................................................................................. 37
Report des temps de travail ........................................................................................................... 38
Page HTML ................................................................................................................................... 39
Fichier template ............................................................................................................................. 41
Fichier CSS.................................................................................................................................... 42
Fichier JavaScript .......................................................................................................................... 44
Travail fourni ................................................................................................................................. 45
Résultat .......................................................................................................................................... 46
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 33 33
Planning des semaines du stage
Voici le planning des travaux effectués :
Semaine 1 :
- Installation complète de ma station de travail à coté de celle de la responsable de
l’équipe Intégration Web.
- Explication du fonctionnement de travail.
- Explication du projet et du fonctionnement avec A.S.O.
- Prise en main des différents outils.
- Commencement du projet, Analyse de l’existant.
Semaine 2 :
- Mise en place de la nouvelle charte graphique.
- Récupération des contenus existants.
- Recherche et mise en place des nouvelles structures des pages html.
Semaine 3-7 :
- Construction des pages html.
- Intégration des contenus existants.
- Intégration de nouveaux contenus.
- Modification de contenus.
Semaine 7-8 :
- Construction du menu principal.
- Construction du menu secondaire.
- Construction de nouvelles pages à la demande du client.
- Intégration de nouveaux contenus.
- Modification de contenus.
Semaine 9 :
- Test des nouveaux sites.
- Intégration de nouvelles pages à la demande du client.
- Intégration de nouveaux contenus.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 34 34
- Modification de contenus.
- Mise en production des sites.
Semaine 10 :
- Prise en main du projet de la construction en version Anglaise du site d’A.S.O.
- Analyse de l’existant.
- Récupération des traductions en Anglais.
- Construction des squelettes des pages html.
Semaine 11-13 :
- Construction des squelettes des pages html
- Intégration des contenus.
Semaine 14 et + :
- Construction des menus.
- Modification du carrousel.
- Construction du formulaire.
- Construction des formulaires de résultats.
- Modification sur le site Paris-Dakar du bandeau déroulant.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 35 35
Solutions et résultats
Exporter des données sur serveur FTP via l’outil
L’outil de connexion VPN-Client pour se connecter aux serveurs de qualification et de
production.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 36 36
L’outil WinSCP, l’application client permettant de se connecter aux serveur de chez ASO
Echanger les informations
L’outil Unfuddle d’A.S.O
Cette application permet de gérer les demandes d’A.S.O « Ticket » et de communiquer sur les
demandes, tout est centralisé ici.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 37 37
Mise à jour des pages web
L’outil Akamai
Akamai est une entreprise qui développe des solutions d'optimisation du trafic Internet et des
performances du Web au niveau mondial. Grâce à la plate-forme Edge d’Akamai, constituée
d’une architecture distribuée des serveurs, la surveillance d’Internet est effectuée en
permanence par l'évaluation du trafic, des incidents et de l'état général du réseau. Ces
informations sont exploitées pour optimiser les routages et dupliquer les contenus, ceci afin
d'accélérer et fiabiliser la diffusion. Cet outil permet de forcer la mise à jour des pages.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 38 38
Report des temps de travail
Le fichier EXCEL* Time reporting permet de reporter exactement le temps de travail passé
sur chaque demande, il sert ensuite à établir la facturation client.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 39 39
Page HTML
Zone footer avec des includes SSI
Include de la partie menu secondaire dans le footer
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 40 40
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 41 41
Fichier template
Exemple de fichier Template* de la navigation principale, il y a 50 fichiers Template pour le
site de l’Étape du Tour.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 42 42
Fichier CSS
Fichiers CSS* permettant de gérer les différentes galeries photos et menus déroulants.
Ils sont situés sur le serveur à la base des répertoires
Fichiers CSS* permettant de gérer l’affichage du contenu des pages.
fr.css : Mise en page des titres en français
us.css : Mise en page des titres en anglais.
Style.css : Gère le reste de la mise en page globale.
Exemple Fichier fr.css.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 43 43
Le placement des titres en Français s’exécute grâce au fichier titre.png, le fichier us.css fait
appel au fichier titre_us.png. Chaque Acte du site Acte 1 et 2 possède son fichier,
- Étape du Tour Acte1 : « titre.png », « titre_us.png »
- Étape du Tour Acte2 : « titre2.png », « titre2_us.png »
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 44 44
Fichier JavaScript
Le site contient plus de 32 fichiers JavaScript pour le site de l’Étape du Tour.
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 45 45
Travail fourni
Réalisation et mise à jour des pages des deux sites de l’Étape du Tour Acte1 et Acte2 en
version Française et Anglaise.
Modification de fichiers Template*
Création de bandeaux « partenaires » déroulants qui ont nécessité l’emploi de CSS, HTML,
JAVASCRIPT et PHOTOSHOP.
Modification des menus principaux et secondaires
Le site : Acte1 : http://www.letapedutour.com/ET1/fr/homepage.html
COUVET François- IUT Sophia Antipolis 2011
Licence Professionnelle Systèmes Informatiques et Logiciels 46 46
Le site : Acte2 : http://www.letapedutour.com/ET2/fr/homepage.html
Résultat
Réalisation de trois sites qui sont aujourd’hui en production.
Plus de 168 pages créées, à peu près 15000 lignes de codes pour les sites de l’Étape du Tour
et plus de 19 pages créées pour le site d’ASO en Anglais.