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



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.



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.



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.



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



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.



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.



3. Carte de l’implantation de CIA



4. Les secteurs d’activités

Banques, finance

Assurance, réassurance et courtage

Protection sociale

Gouvernement, Collectivités locales

Transport et autres



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.



6. Présentation de l’organigramme



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



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.



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.



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.



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.

http://fr.wikipedia.org/wiki/Tarbes

http://fr.wikipedia.org/wiki/Pau

http://fr.wikipedia.org/wiki/Alain_Prost

http://fr.wikipedia.org/wiki/Antoine_de_Caunes

http://fr.wikipedia.org/wiki/Antoine_de_Caunes

http://fr.wikipedia.org/wiki/Christophe_Rinero

http://fr.wikipedia.org/wiki/Paris-Roubaix



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



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*.

http://www.10km.lequipe.fr/

http://www.parisroubaixchallenge.com/fr/homepage.html



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



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.



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.



Page ressources humaines/offre d’emploi du site A.S.O version anglaise.



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.



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.



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*.



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.



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 »

http://www.commentcamarche.net/systemes/format.php3

http://fr.wikipedia.org/wiki/Internet

http://fr.wikipedia.org/wiki/Intranet



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.

http://fr.wikipedia.org/wiki/Norme



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.

http://fr.wikipedia.org/wiki/Application_Web

http://fr.wikipedia.org/wiki/Syst%C3%A8me_de_gestion_de_base_de_donn%C3%A9es

http://fr.wikipedia.org/wiki/Syst%C3%A8me_de_gestion_de_base_de_donn%C3%A9es

http://fr.wikipedia.org/wiki/MySQL

http://fr.wikipedia.org/wiki/PHP:_Hypertext_Preprocessor

http://fr.wikipedia.org/wiki/Licence_publique_g%C3%A9n%C3%A9rale_GNU

http://fr.wikipedia.org/wiki/Informatique



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.



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.php.net/manual/fr/index.php

http://www.lafermeduweb.com/

http://www.alsacreation.com/

http://alexandre.alapetite.fr/doc-alex/alx_special.html

http://www.letapedutour.com/




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



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.



Semaine 9 :

- Test des nouveaux sites.

- Intégration de nouvelles pages à la demande du client.





- 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.



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.



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.



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.



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.



Page HTML

Zone footer avec des includes SSI

Include de la partie menu secondaire dans le footer





Fichier template

Exemple de fichier Template* de la navigation principale, il y a 50 fichiers Template pour le

site de l’Étape du Tour.



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.



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 »



Fichier JavaScript

Le site contient plus de 32 fichiers JavaScript pour le site de l’Étape du Tour.



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

http://www.letapedutour.com/ET1/fr/homepage.html



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.

http://www.letapedutour.com/ET2/fr/homepage.html

Documents

DEVELOPPEMENT WEB « Sites : l’Étape du Tour