Gestion de sites Web et intégration de contenus multimédiajean-michel.pillon.pagesperso-orange.fr/memoires/Licence_Pro.pdf · techniques de communication, en gestion de sites Web

Licence Professionnelle Activités et Techniques de Communication Gestion de sites Web et intégration de contenus multimédia

Licence Professionnelle Activités et Techniques de Communication

Gestion de sites Web et intégration de contenus multimédia

Jean-Michel Pillon [email protected]

Jean-Michel PILLON 24/10/2008 Page 1


Sommaire INTRODUCTION................................................................................................................................................. 3

1. COMPETENCES ET QUALITES REQUISES ....................................................................................... 3 1.1. PRE-REQUIS .......................................................................................................................................... 4 1.2. FORMATION EN INTERNE....................................................................................................................... 7 1.3. AUTO FORMATION ................................................................................................................................ 9 1.4. ATTITUDE COMPORTEMENTALE.......................................................................................................... 10 1.5. TABLEAU RECAPITULATIF DES COMPETENCES .................................................................................... 11

2. ACTIVITES PROFESSIONNELLES..................................................................................................... 12 2.1. LE METIER DE WEBMASTER................................................................................................................ 12

2.1.1. Définition : .................................................................................................................................... 12 2.2. MISSIONS ET ACTIVITES PRINCIPALES ................................................................................................. 12

2.2.1. Animation et dynamisation du portail Wanadoo.fr ....................................................................... 12 2.2.2. Dossiers évènementiels ................................................................................................................. 13 2.2.3. Mise en place d’un outil de publication ........................................................................................ 13 2.2.4. Tâches ponctuelles ........................................................................................................................ 13

3. GESTION DE PROJET............................................................................................................................ 14 INTRODUCTION ................................................................................................................................................. 14 3.1. MA PROPRE EXPERIENCE DE LA GESTION DE PROJET, EN MILIEU EXTRAPROFESSIONNEL CREATION DE SITE INTERNET (NET D’OR 2006)................................................................................................. 17

3.1.1. Réflexion de la faisabilité du projet .............................................................................................. 17 3.1.2. Planification des tâches à réaliser ................................................................................................ 18 3.1.3. Conception et Réalisation graphique ............................................................................................ 18 3.1.4. Intégration et développement ........................................................................................................ 19 3.1.5. Référencement ............................................................................................................................... 19 3.1.6. Phase de test et mise en ligne........................................................................................................ 19 3.1.7. Maintenance.................................................................................................................................. 21

CONCLUSION..................................................................................................................................................... 22 4. ETAT DE SITUATION PROBLEME..................................................................................................... 23

4.1. NOUVELLES TECHNIQUES DE TRAVAIL SUR LE SITE WANADOO.FR ..................................................... 23 4.1.1. Introduction................................................................................................................................... 23 4.1.2. Phase de réflexion ......................................................................................................................... 23 4.1.3. Réalisation .................................................................................................................................... 24 4.1.4. Résolution problématique ............................................................................................................. 24 4.1.5. Conclusion .................................................................................................................................... 24

CONCLUSION ................................................................................................................................................... 25

BIBLIOGRAPHIE.............................................................................................................................................. 26

ANNEXES ........................................................................................................................................................... 27

ATTESTATIONS ............................................................................................................................................... 28



Introduction Ma principale motivation à l’obtention de la licence professionnelle, activités et techniques de communication, en gestion de sites Web et intégration de contenus multimédia, est de capitaliser mes compétences au travers de mon activité professionnelle et de mon expérience extra professionnelle. En effet, issu d’une formation initiale en électrotechnique et après avoir travaillé dans le domaine du bureau d’étude, j’ai découvert le marché porteur qu’était Internet et ces opportunités en terme d’emploi. C’est donc après une formation de concepteur de sites Internet, que j’ai pu intégrer l’équipe création et production multimédia de Wanadoo du groupe France Télécom depuis 1999. En tant que Webmaster, j’avais pour mission de faire vivre le site Wanadoo, avec des compétences techniques diverses. Participant à l’animation de la rubrique Assistance du site Wanadoo en tant que Expert Délits Internet, mon expérience du Webmastering a permis la réalisation d’un Intranet au sein du Service Abuse Wanadoo ainsi que la conception et la réalisation de plusieurs sites dans différents domaines en milieu extra professionnel. Toutes ces missions, m’ont permis de postuler en tant que Webmaster sur l’Arianet, (Intranet d’intelligence économique), qui offre des ressources d’informations et des prestations de veille et d’analyse pour le Groupe France Télécom, poste que j’occupe actuellement. Aujourd’hui, ma démarche pour obtenir un diplôme reconnu par la profession, est de poursuivre une progression de carrière à des fonctions de gestion de projet et ainsi un changement de classification à la clé, le cas échéant prétendre à des postes externes du groupe France Télécom. La réalisation de ce dossier s’appuie sur mon expérience du Webmastering, de part mes compétences et qualités au travers de mon activité professionnelle et extra professionnelle dans la gestion de projet et la résolution de problématiques.



1.Compétences et qualités requises

1.1. Pré-requis La multitude des missions effectuées dans mon travail a nécessité, des compétences techniques en commençant par le HTML, langage incontournable, pour réaliser un site ou une page web. La syntaxe (code source) du langage HTML (HyperText Markup Language/ Langage de Balisage Hypertexte) permet de faire des liens entre des pages simplement en cliquant sur des mots et de mettre en forme le contenu, d’intégrer des images, des vidéos, des formulaires sur les pages, et va permettre de visionner le tout avec un navigateur (programmes de visualisation de pages Web) sur Internet. Le langage du HTML a évolué, et on écrit aujourd'hui plutôt des pages en XHTML (Extensible HyperText Markup Language/Langage de Balisage Hypertexte Extensible). La syntaxe reste la même qu'avec HTML, mais on ne met dans la page que le contenu. La mise en forme de la page (taille de police, couleur, ...) est indiqué dans un fichier externe appelé feuille de styles CSS (Cascading Style Sheet/ Feuilles de Style en Cascade). Ce qui permet par exemple en modifiant la taille du texte sur la feuille de styles, que toutes les pages y faisant référence soient modifiées, et évite ainsi d’éditer une par une toutes les pages pour modifier la syntaxe HTML. Dans ce cas le XHTML permet de faire des modifications plus rapides. Pour définir des événements sur les pages : défilement de textes, ouverture de petites fenêtres (Pop-up), manipulation des formulaires, messages d’alerte, impression des pages, etc.. Nous avons recours au Javascript. En effet le Javascript, est un langage de programmation qui permet d'apporter des améliorations au langage HTML. Son code est inséré entre des balises spécifiques du code source et indique au navigateur qu'il s'agit d'un script. Il ne faut pas confondre Javascript à Java. Ce dernier est un langage de programmation permettant de réaliser des éléments dit « applets » qui s’intègrent dans une page web pour pouvoir s’afficher dans le navigateur. Les applets Java sont souvent utilisés pour les conférences Chat (systèmes permettant de discuter en temps réel avec quelqu'un sur Internet). La mise en œuvre de ces technologies (HTML, CSS, Javascript) sur une même page, est appelée DHTML (Dynamic HyperText Markup Language/Langage dynamique de balisage hypertexte) permet de réaliser des pages HTML plus interactives.



L’interactivité est par exemple la possibilité de sélectionner un Rollover sur une page (image réactive permettant de changer une image, lorsque le curseur de la souris passe sur celle-ci) pour accéder à une autre page d’information. Une page HTML peut être réalisée dans un simple Bloc Note, où avec un des nombreux éditeurs comme par exemple Macromedia HomeSite qui a l'avantage de gérer la coloration syntaxique du code. Mais dans le cas de réalisation de pages complexes aux formats DHTML, l’utilisation d’un logiciel dit WYSIWYG : What You See Is What You Get. (Ce que vous voyez, vous l'obtenez) comme Dreamweaver et son interface graphique qui permet un travail plus rapide (sans avoir à écrire le code). Toutefois connaître la lecture du code source, permet d’apporter les corrections nécessaires ou l’implémentation de scripts spécifiques.

Néanmoins un travail de vérification est nécessaire, afin de s'assurer que les effets des comportements réalisés sur les pages aux formats DHTML, soient visibles sur la majorité des navigateurs, configurations Mac et PC.

Pour cela il faut installer sur l’ordinateur le plus grand nombre possible de navigateurs (Internet Explorer, Netscape, Mozilla, etc…), car les internautes utilisent des produits différents. Ces connaissances ainsi que les compétences artistiques (ex : Photoshop), et d’animations graphiques (ex : Flash) ont été acquises dans le cadre d’un stage de Concepteur de Sites Internet au sein d’un organisme de formation AFCI Micro Services (cf : attestation onglet n°1) En effet, le pôle graphique réalise les maquettes (Habillage Graphique), respectant les normes de la charte définie par les concepteurs. Définissant ainsi plusieurs éléments que l'on doit retrouver dans toutes les pages d’un site à savoir. - La couleur du texte et son formatage (police, taille, gras, italique...); - La couleur et le formatage des liens; - L'emplacement des textes et des images composant le corps des pages; - L'emplacement des bannières de publicité. Le travail de réalisation s’effectue avec Photoshop qui va permettre ainsi le découpage et l’optimisation des images à l’exportation et l’intégration d’éléments dans les pages avec Dreamweaver. Le but est de rendre les pages plus légères afin d’optimiser le temps d’affichage dans le navigateur de l’internaute.



Flash sert à la création d'animations vectorielles qui consiste :

- A créer un mouvement en définissant une succession de vecteurs appelée chemin ;

- De changer la taille d’une image en définissant une taille de départ, et une taille d’arrivée, par interpolation des images;

- D’effectuer des changements de forme (Morphing). Le langage de programmation de Flash est Action Script, qui permet des animations plus évolué, ou à la gestion de contenu dynamique, comme par exemple avec l’interaction d’une base de donnée.

La partie création d’une animation est réalisée dans des fichiers FLA, c'est-à-dire le type de fichier par défaut pour l'application Flash et doit donc être exporté vers format de fichier SWF pour être lue dans sur une page Web . Pour pouvoir visionner les animations Flash, on a recours au plug-in (plugiciels), qui est une petite application apportant de nouvelles fonctionnalités interactives aux navigateurs. Le plug-in entre automatiquement en action en présence de l’animation Flash (au format SWF) sans que l'utilisateur ait à intervenir. La création d’un site web ne se réduit pas à la conception de pages. Pour être efficace, lors de la création d’un site et au cours de ses évolutions, il faut définir un mode de gestion permettant la mise en place rapide des pages et des liens, les modifications et les mises à jour ultérieures. En effet, un site grandit et se transforme, de nouvelles rubriques et de nouvelles pages apparaissent ou changent d’emplacement, d’autres périmées disparaissent. Les liens changent et doivent être modifiés pour éviter l’erreur 404 (message d'erreur renvoyé par un site Web, quand la page demandée n'a pas été trouvée à l'adresse indiquée). Ce travail demande une bonne organisation sur les fichiers et répertoires ce qu’on appelle définir une arborescence (Cheminements de dossiers, et fichiers constituant un site Web). Pour créer un lien entre deux pages du site, il existe 2 façons de procéder :

- Tous les liens définis à l’intérieur du site seront en relatif. C’est-à-dire que leur chemin d’accès sera défini par rapport à l’emplacement du fichier d’origine dans l’arborescence.

- Contrairement aux liens absolus qui reprend le chemin complet depuis

l’adresse du site « le DNS » (Domain Name System/Système de Nom de Domaine).


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


1.2. Formation en interne Le passage de Wanadoo 1 à Wanadoo 2 a nécessité l’acquisition de nouvelles compétences en terme de développement de part le changement de langage. En effet, la première version du site était constituée de pages Web HTML dites statiques et nécessitait la mise à jour quotidienne des pages par la commande des contenues textes et images aux équipes éditoriales et aux graphistes puis la mise en ligne par FTP (File Transfer Protocol/Protocole de Transfert de Fichiers). Les logiciels FTP sont des programmes qui permettent de transférer manuellement les fichiers de l’ordinateur personnel vers les serveurs. Le serveur de pré production permet de tester la fonctionnalité des pages, avant la mise en ligne sur le serveur de production qui les rendra accessibles aux internautes. Ces informations sont affichées par le protocole HTTP (HyperText Transfer Protocol/Protocole de Transfert Hypertexte), en tapant l’adresse d’un site, le serveur traite la requête (la demande) et renvoie l’information au navigateur qui affiche le résultat.

Alors que le protocole HTTPS permet la consultation de comptes bancaires ou le paiements de prestations par carte bancaire, de façon sécurisée. La maintenance et l’actualisation des différentes rubriques d’un site est une charge de travail importante et récurrente. Dans le cadre du projet Wanadoo 2, la solution de développement d’éléments dynamiques (feuilles de styles XSL associés à la structure XML) a permis d’automatiser cette tâche. En effet, les données saisies directement par l’animateur (Équipe éditorial), sont stockées dans une base de donnée (MySQL) via un outil d’animation (réalisé en PHP) et génère un fichier XML. Et c’est avec l'aide d'une feuille de style XSL, que sera mis en forme le document XML et que PHP va générer le fichier HTML à la sortie. Le XSL (Extented Stylesheet Langage/Langage des Feuilles de Style XML) est une feuille de style associée aux documents XML (Extensible Markup Language/Langage de Balisage Extensible), contenant des règles de transformation, de présentation et de mise en forme des donnée. Pour vérifier si le code réalisé au format XSL est conforme aux spécifications W3C, il faut utiliser un analyseur syntaxique de code, disponible sur le site « http://validator.w3.org », qui analyse la page et assure que celle-ci sera visible par la plupart des navigateurs. Dans le cas contraire, un message indique les erreurs à corriger.



Cette vérification est faite grâce à la présence du DOCTYPE (Document Type Déclaration), indiqué dans le code source en première position de chaque page web. Le DOCTYPE est en quelque sorte la carte d’identité d’une page Web, ce qui permet de renseigner le navigateur sur le langage utilisé et les règles appliquées pour interpréter le code correctement. Le W3C, est un organisme qui homogénéise les différents langages Web tels que HTML, CSS, XML etc..de façon à éviter des problèmes de compatibilité entre les navigateurs. Il faut noter aussi, que grâce au XML la même source d'information peut être utilisée par les différents langages : PHP, HTML, EML (fichier mail), et qu’un document XML avec une feuille de style XSL seule ne suffit pas. Ce sera un de ces différents langages qui permettra le déclenchement de l’affichage des données dans le navigateur.



1.3. Auto formation Les évolutions technologiques du Web m’oblige à effectuer une veille active et permanente sur Internet et notamment du langage PHP. PHP est en Open Source, gratuit sous licence GNU-GPL (licence d'utilisation publique générique), qui permet d’avoir la liberté d'étudier le fonctionnement d’un programme et de l'adapter à nos besoins. Le PHP est un langage de programmation qui permet l'interaction avec une base de données. Ce langage est exécuté côté serveur et génère du HTML pour le navigateur. Ce langage est dit dynamique, souvent utilisé avec MySQL (Système de Gestion de Base de Données) qui permet de stocker de grosses quantités d'informations. SQL est un langage de programmation qui permet la manipulation des informations sur la base de donnée. Les requêtes SQL sont écrites dans les pages PHP, qui vont permettre d’afficher les données extraites de la base MySQL, ou de stocker des données postées par un formulaire dans la base de données. C’est à partir du langage PHP, que j’ai eu l’idée de réaliser un outil d’animation « Multi site » de type CMS (Content Management System/Systèmes de Gestion de Contenu) Un CMS est un système de publication de contenus pour les Sites Internet, et ne nécessite aucune connaissance de programmation HTML ou PHP pour l’utilisateur. Il est complètement modulable que ce soit pour l’interface graphique (skin) ou pour la gestion de contenu : livre d'or, forum, galerie photos, news, mise en place de « cadies » pour sites marchands. Il existe une multitude de CMS sur Internet, mais le fait de réaliser mon propre CMS m’a permis d’évaluer la multitude de possibilités avec PHP, ce qui fût une bonne base d’apprentissage de ce langage. Dans le cadre de mon Auto Formation, la programmation PHP a été réalisée avec les documentations : - Le programmeur PHP4 de Campus Press Pages ; - Web Dynamiques avec ASP3, PHP4 et SQL de Campus Press. et les supports média : http://www.az-php.comhttp://www.nexen.net/index.php?option=com_nexen_v2&Itemid=232


http://www.az-php.com/

http://www.nexen.net/index.php?option=com_nexen_v2&Itemid=232


1.4. Attitude comportementale Les modifications apportées tout au long de l’évolution d’un projet m’ont demandé une capacité d’adaptation et d’organisation. Donc plus de réactivité et une meilleure maîtrise de mon activité. La fonction de Webmaster étant transverse entre les différents services :

- les chefs de projets ; - les concepteurs ; - les développeurs ; - les graphistes ; - les équipes éditoriales ;

Il faut analyser de façon rationnelle les multiples informations émises par ces derniers en allant à l’essentiel. Ceci, demande une aisance relationnelle et le goût du travail en équipe. La gestion du stress et de la pression, lorsqu’un projet n’a pas été planifié : lors des attentats du 11 septembre 2001, il a fallut créer une page d’information et remonter l’article en « Une » de la page d’accueil en un minimum de temps. L’esprit de pédagogie est nécessaire de façon à donner des explications simple et clair pour tous.



1.5. Tableau récapitulatif des compétences Langages de programmations

Acquis Notions

HTML X CSS X Java Script X XML/XSL X PHP/SQL X Supports utilisés

Acquis Notions

Dreamweaver X Homesite X Flash animation graphique X Photoshop/Image Ready X mySQL X



2.Activités Professionnelles

2.1. Le métier de Webmaster

2.1.1. Définition : Personne chargée de la maintenance et de l’évolution d’un site Web. Elle est polyvalente car peut aussi bien se charger de la partie programmation, graphique, que du contenu éditorial du site

2.2. Missions et activités principales

2.2.1. Animation et dynamisation du portail Wanadoo.fr Responsable de la mise à jour du portail Wanadoo.fr*, j’ai mis en ligne les différentes informations collectées auprès des membres du groupe de travail (Chef de projet, concepteur,…). La mise à jour se faisait par l’utilisation du procédé HTML (pages statiques). Dans le cadre du projet Wanadoo 2, j’ai mis en pratique ma formation XML/XSL (pages dynamiques). Ce nouveau procédé m’a permis d’intégrer et d’administrer de nouveaux services (Haut Débit, Wanadoo Ville,…) dans le respect de la nouvelle charte graphique. Cette activité est des plus valorisante car le fruit de mon travail est visionné par les quelques 6 200 000 abonnés du groupe Wanadoo. J’ai réalisé le maquettage de la page d’accueil en optimisant le code mais aussi les images de façon à alléger au maximum les temps d’affichages. J’ai participé à la production des projets (refonte du site, évolutions, intégration de dossiers évènementiels) en travaillant en étroite collaboration avec les maîtres d’ouvrages. Concernant, les opérations publicitaires (Bannières et Colonne Maurice), j’ai réalisé les intégrations des éléments en collaboration avec le service Wanadoo Régie (maître d’ouvrages média publicitaire). (cf : annexe page 3) *Depuis le 1er Juin 2006, Wanadoo est devenu Orange Internet.



2.2.2. Dossiers évènementiels Un dossier évènementiel (cinéma, people, exposition, etc…), est un programme éditorial temporaire qui ne fait pas partie de l’arborescence du portail Wanadoo. Ma mission a été d’intégrer et d’accompagner les intégrateurs HTML à la réalisation des dossiers aux formats DHTML en collaboration avec les maîtres d’oeuvres. Concernant, les dossiers liés à l’urgence de l’actualité, notamment les attentats du 11 septembre 2001, j’ai mis en place une procédure pour organiser la réception et la validation des textes et visuels avec le responsable des maîtres d’ouvrages et le directeur artistique. (cf : annexe page 4)

2.2.3. Mise en place d’un outil de publication Le Club Abonné est un espace du site Wanadoo destiné aux abonnés, sur lequel des jeux concours sont organisés. Mon rôle a été de piloter et d’accompagner le pôle développement à la réalisation d’un outil d’animation et de publication conformément aux décisions prises par le maître d’ouvrages.

- Réflexion avec le maître d’ouvrages et le pôle développement sur les zones dynamiques des pages ;

- Réalisation d’un document technique destiné au développement ; - Validation du bon fonctionnement de l’outil sur le serveur de Pré production

(Serveur de test) et de production ; - Formation du maître d’ouvrages à l’utilisation de l’outil d’animation.

(cf : annexe page 5)

2.2.4. Tâches ponctuelles Au cours de mes différentes missions, j’ai effectué des tâches ponctuelles, notamment, la remise en forme de différents templates (Chat, Discussion, Forum, Pages-Perso) hébergés sur un outil d’animation et de publication développé en ASP spécifiques a ces thématiques. J’ai également collaboré à l’intégration de scripts Javascript, fournis par le service Marketing Audience, en charge d’analyser et de mesurer l'audience les pages vues, grâce aux « marqueurs » intégrés dans les pages, qui permet de valoriser le sponsoring lié à ces pages. (cf : attestation onglet n°2) (cf : attestation onglet n°3)



3.Gestion de projet Introduction

Le portail Wanadoo.fr, est constitué d’un ensemble de rubriques, dont les contenus sont gérés par plusieurs équipes éditoriales. Depuis la mise en place d’un outil d’animation et de publication, les équipes éditoriales s’appuient sur deux fonctions :

- L’animation des contenus côté BackOffice ; - La mise en ligne sur les serveurs de production côté Front office.

Le BackOffice réunit tous les outils de gestion nécessaires à la mise en ligne des contenus sur un site web et le Front Office désigne et organise graphiquement ces éléments visibles sur le site pour les internautes. Ma mission principale a été de développer et de mettre en place les mécanismes de publication des articles éditoriaux sur l’outil d’animation, et des nouvelles rubriques sur le portail Wanadoo.fr Mais avant ce travail de réalisation, les étapes du projet passent par une expression de besoins, établit en amont, par le maître d’ouvrage du projet (MOA), pour définir les besoins utilisateurs. A la réception de ce cahier des charges, le maître d’œuvre (MOE), va :

- Analyser la faisabilité du projet (compétence en interne, le temps…) ; - Réaliser un document de spécification détaillé en s’appuyant sur les capacités

de l’outil d’animation ; - Planifier les tâches à réaliser jusqu'à la mise en ligne du projet ; - Affiner le budget au regard du projet (appel à la sous traîtance…) ; - Constituer une équipe pour réaliser le projet en cohérence avec le budget

alloué. Le MOA et le MOE vont constituer un comité de pilotage du projet regroupant les responsables de chaque domaine (techniques, artistiques …) qui a pour vocation de décider des points structurants du projet (planning, ressources, risque…) L’équipe projet sera constituée :

- Des concepteurs qui vont définir les gabarits des pages et le choix de la navigation ;

- Des graphistes qui vont définir les visuels, validés par le MOA et les concepteurs ;

- Le Webmaster va développer, intégrer et tester les éléments côté Back Office.

Avant la mise en ligne du projet, celui-ci fera l’objet d’une validation et de test, par les MOA, MOE, et les équipes éditoriales.



Mon rôle a été plus autonome, pour la gestion, la conception et la réalisation de site web dans mes activités extraprofessionnel pour : CPI France : Agence Immobilière http://www.cpi-france.com (cf : annexe page 6 et 7) (cf : attestation onglet n°4) Impliquant la réalisation de ce site, sous le régime de la micro entreprise, en bénéfice non commerciaux (Micro BNC), conformément aux dispositions de l'article 293B du Code Général des Impôts. Créa Site Web http://www.crea-site-web.com Et dans le cadre de mes activités bénévoles pour :

- Le Rugby Féminin en France http://www.rugbyfemininfrance.fr (cf : annexe page 8)

- Fauguet Sport (Sport Automobile) http://www.fauguetsport.net (cf : annexe page 9)

- La rééducation des épaules http://www.reeducation-des-epaules.com (cf : annexe page 10)

- Association Sport Forme Intérim http://sportformeinterim.free.fr (cf : annexe page 11)

- Groupe de musique « YOREL » http://www.yorel.eu (cf : annexe page 12)

- Rugby Club Chilly-Mazarin http://www.rccweb.net (cf : annexe page 13)

- Les Mildioux http://www.mildioux.com (cf : annexe page 15)

(cf : attestation onglet n°5) Le but était de concevoir, un outil d’animation type CMS, dans différents secteurs d’activités, que peuvent représenter les sites Internet (petites annonces, articles, galerie photos, musique, vidéos…) et permettre à l’utilisateur de faire ses propres mises à jours de façon ludique.


http://www.cpi-france.com/

http://www.crea-site-web.com/

http://www.rugbyfemininfrance.fr/

http://www.fauguetsport.net/

http://www.reeducation-des-epaules.com/

http://sportformeinterim.free.fr/

http://www.yorel.eu/

http://www.rccweb.net/

http://www.mildioux.com/


J’ai repris le concept de cet outil dans un contexte professionnel pour la réalisation d’un Intranet. L’objectif de la mise en place d’un Intranet au sein des équipes Délits Internet et Sécurité et Juridique était d’homogénéiser les processus et de présenter la mission de Abuse Wanadoo au sein du Groupe France télécom. J’avais pris l’initiative en accord avec mon manager de réaliser cet Intranet, afin d’améliorer l’efficacité du Service Abuse sur la recherche de documents techniques via une interface Web plutôt que par des échanges de E-mail avec des pièces jointes. Mon rôle a été de synthétiser ces informations pour l’équipe d’animation de la rubrique Assistance en ligne du site Wanadoo, de façon à prévenir les abonnés contre de nouveaux virus et de les guider dans le nettoyage de leurs postes infectés. Ce travail a été réalisé, en collaboration avec un Ingénieur Système du service Sécurité. Son rôle a été de mettre en place un serveur Web FreeBSD (système d'exploitation de type Unix) avec les packages associés, Apache, PHP et MySQL, pour le bon fonctionnement de l’outil d’animation et de l’Intranet. (cf : annexe page 16) (cf : attestation onglet n°6)



3.1. Ma propre expérience de la gestion de projet, en milieu extraprofessionnel Création de site Internet (net d’or 2006)

Joueur et bénévole au pôle communication au sein du Rugby Club de Chilly-Mazarin, j’ai proposé de faire la refonte du site existant car les informations n’étaient plus d’actualité (cf : annexe page 14). Les membres du bureau m’ont donné leur accord pour ce projet avec comme objectif un hébergement moins coûteux, et la livraison dès le début du championnat de France. La remise à jour de ce site a permis aux membres de l’association et à la mairie de la ville (Chilly Mag : Magazine mensuel) d’être informés sur les résultats des matchs et la vie du Club.

3.1.1. Réflexion de la faisabilité du projet Le premier point à aborder avant de commencer le travail, a été de récupérer les éléments existants du site par transfert Ftp avant de fermer l’abonnement de l’hébergement. J’ai donc pris connaissance de la dernière version du site, des identifiants, du type d’abonnement et du fournisseur d’hébergement (en anglais Hosting). J’avais déjà l’idée de mettre en place un système permettant les mise à jours du site par une interface de publication directement par des membres de l’association. Ce système fonctionnerait grâce à une interface développée en PHP en relation avec une base de donnée mySQL, service proposé par la plupart des hébergeurs. J’ai comparé les offres d’hébergement et en ai sélectionné une, en fonction des services nécessaires aux futures fonctionnalités du site tout en tenant compte des frais d’abonnements. Etant joueur, j’ai pu faire une analyse, des besoins en reprenant les contenus rédactionnels existants (pages historique, contact, photos etc…) et des nouvelles rubriques à mettre en place. C’est à l’issue d’une réunion mensuel avec les membres du bureau, que j’ai proposé mon choix d’un hébergement moins coûteux et proposant un service avec une base de données, pour les différentes rubriques qui seront misent en places et la dynamisation via une interface d’animation de contenu.



La mise en place de cette réunion m’a permis de prendre en compte les avis et suggestions de chacun, notamment par le choix d’un hébergement gratuit dans un premier temps et par celui de mesurer la côte de popularité du site, afin de développer le sponsoring pour la saison suivant.

3.1.2. Planification des tâches à réaliser La mise en place d’un planning m’a permis d’analyser les tâches à effectuer pour la réalisation du projet dans le délai imposé par le début du championnat soit un mois de réalisation avant mise en ligne et ainsi faire un état d’avancement auprès des membres du bureaux. Ce planning reprenait les phases d’intégrations fonction du nombre de pages à réaliser (éléments graphiques et fonctionnalités) permettant la réalisation de l’outil l’animation.

3.1.3. Conception et Réalisation graphique Pour mener à bien cette mission, j’ai conçu les différentes phases du projet :

- Conception du système de navigation - Nombre de rubriques et leur intitulé - Positionnement des informations sur les pages - Structure de l’arborescence - Structure des tables de la base de données - Au Web design (Choix de la maquette graphique représentatif du thème

sportif, soit le Rugby) J’ai élaboré des maquettes pour l’ergonomie du site en matière de navigation, le style du graphisme et la charte graphique utilisée sur les contenus rédactionnels. La charte graphique a été établi à partir des couleurs du club et sans contrainte typographique. L’habillage des visuels a été réalisé à partir de mon expression personnel sous Photoshop, gardant le système de navigation prévus dans la phase de conception du projet. Ce n’est qu’après une seconde validation des membres du bureau que j’ai commencé la phase d’intégration. L’outil d’animation a été pensé en fonction des besoins mais aussi des connaissances informatique des animateurs du site (environnement simplifié et ludique).



3.1.4. Intégration et développement Dans le cadre de mon auto formation, j’ai pris en charge la réalisation des pages et des modules de l’outil d’animation connecté à la base de données, en m’appuyant sur de la documentation et des sites spécialisés en programmation PHP.

- L’identification par mot de passe à l’outil d’animation ; - Traitement PHP/SQL des données (Ajout, modification, extraction et

suppression) ; - Scripts de miniaturisations pour les galeries photos.

Le choix de ne pas prendre un CMS existant sur Internet (SPIP, PHP-nuke, etc…) a été de pouvoir mettre en application les connaissances acquises dans le cadre de mon auto formation, et ainsi voir les possibilités de PHP, pour la création de site Internet et d’autres possibilités d’applications web.

3.1.5. Référencement Le référencement, consiste à inscrire l'adresse (URL) d’un site Web (ex :http://www.mon-site-internet.com) dans un moteur de recherche Après vérification j’ai constaté que le site n’était présent sur aucun des moteurs de recherche (Voilà, Google, Msn...). J’ai donc organisé un brain storming au sein du bureau pour faire ressortir des mots clés naturellement associés au monde du rugby de façon à les référencer auprès des différents moteurs de recherches en utilisant des balises méta (meta tags en anglais). Ces balises sont invisibles par l'internaute et insérées dans l'entête d'une page web permettant de donner des informations sur la page (description succincte, auteur, etc.)

3.1.6. Phase de test et mise en ligne Après avoir développé et publié en ligne, l’outil d’animation et le site, j’ai organisé une réunion d’information et de présentation, du site par rubrique, de l’outil d’animation pour la saisie des contenus et leurs mises en ligne, pour les consultations des statistiques destinées aux entraîneurs et éducateurs sportifs. Cette réunion a permis de valider point par point les fonctionnalités de publication et apporter les corrections nécessaires.



Mon rôle a été de sensibiliser les responsables de la mise à jour du site d’après le code de la propriété intellectuelle afin d’éviter la rédaction d’articles insultant. Il était aussi indispensable de les informer sur les droit d’auteur, car la multitude d’informations disponible sur Internet (images, textes, sons, vidéos etc.), sont susceptibles d’être copiés sans respecter l’auteur. Il est donc recommandé d’indiquer la source des éléments récupérés et d’avoir fait la demande d’autorisation auprès de l’auteur. En effet la protection d'une œuvre originale est automatiquement acquise au jour de la création sans aucune formalité de dépôt. Il incombe à l'auteur qui réclame cette protection de rapporter la preuve de la date à laquelle l'œuvre a été créée (le contrat signé de mise en ligne du site par exemple peut constituer un moyen de preuve). L’auteur peu aussi constituer une preuve de création en déposant une Enveloppe Soleau (Enveloppe permettant de dater une création) à l’INPI (Institut National de la Propriété Intellectuel). http://www.inpi.fr/front/show_rub.php?rub_id=133. L’auteur doit conserver son enveloppe sans l’ouvrir : - elle ne pourra l’être que lors d’un litige et devant un tribunal. - en cas de contestation sur son contenu, l’exemplaire conservé par l’INPI fera foi. Concernant la diffusion des résultats essonniens (Newsletter), celle-ci n’a pas fait l’objet d’une déclaration à la CNIL, car aucune information personnelle concernant les abonnés n’est enregistrée dans la base de données du site. Source venant du site de la CNIL au lien ci-dessous : http://www.cnil.fr/index.php?id=1746 Néanmoins un lien des inscriptions est présent sur le site. « La CNIL (Commission nationale de l'informatique et des libertés), veille à ce que l’informatique soit au service du citoyen et qu’elle ne porte atteinte ni à l’identité humaine, ni aux droits de l’homme, ni à la vie privée, ni aux libertés individuelles ou publiques. » Source venant du document la CNIL en bref au lien ci-dessous : http://www.cnil.fr/fileadmin/documents/La_CNIL/publications/CNIL_EN_BREF-VFVD.pdf


http://www.inpi.fr/front/show_rub.php?rub_id=133

http://www.cnil.fr/index.php?id=1746

http://www.cnil.fr/fileadmin/documents/La_CNIL/publications/CNIL_EN_BREF-VFVD.pdf

http://www.cnil.fr/fileadmin/documents/La_CNIL/publications/CNIL_EN_BREF-VFVD.pdf


3.1.7. Maintenance La décision de prendre un hébergeur gratuit par les membres du bureau, limitait donc les possibilités de PHP, notamment dans le cadre de transfert Ftp par un formulaire d’upload. Les fichiers sont envoyés non pas par le protocole FTP, mais HTTP. La maintenance du site s’effectue donc, au niveau de la mise à jour des documents et images par un logiciel Ftp, et demande un savoir d’utilisation. Ce travail est donc réalisé par mes soins régulièrement après réception des éléments par courrier électronique. La mise à jour des résultats par les entraîneurs et éducateurs sur le site se fait par un formulaire de saisie. Ce travail étant manuel, fastidieux et donc source d’erreur au niveau des résultats, j’ai proposé d’intégrer les deux fonctionnalités ci-dessous, pour résoudre ces problèmes :

- Pour le transfert de Ftp, proposition de prendre un hébergeur payant, afin d’avoir la fonction Ftp par PHP, ce qui permettra à tous les responsables de rubriques de déposer les images et documents, tout simplement par un formulaire d’Upload ;

- La mise à jour des résultats se fera par Excel, et limitera ainsi les erreurs de saisie par les règles de calcul que propose ce logiciel. Il suffira ensuite d’enregistrer le fichier au format CSV, qui sera traité par un script PHP, et formatera sur le site le contenu en HTML ;



Conclusion Les phases d’un projet sont similaires pour la réalisation d’un site web, en milieu professionnel et en milieu extraprofessionnel :

- Sur la réflexion de la meilleur navigation possible, pour avoir une meilleure facilité à trouver l’information désirée par l’utilisateur ;

- Faire une étude de marché pour voir ce qui existe déjà, et analyser les points

positifs et négatifs, afin d’avoir le résultat d’un site attrayant et facile d’emploi.

Mais la faisabilité d’un projet, peut reposer sur des ressources externes en milieu professionnel du à un manque de compétences techniques en interne, pour atteindre les objectifs de la date de livraison. Alors que dans un contexte bénévole, les ressources techniques ont reposées sur mes acquis et de recherche personnelles avec des supports média et bibliographiques. Quoi qu’il en soit, concevoir un site demande des contenus, mais surtout d'en penser l'ergonomie et la navigation de sorte à fidéliser les internautes. Mon expérience en tant que Webmaster au sein de Wanadoo, m’a permis de mettre en place, un même système d’organisation de travail et de répartition des tâches, afin de faire revivre ce site, grâce aux contenus actualisés et la mise en place des résultats Essonniens avec le CIFR (Comité Ile de France de Rugby) Dans le cadre du jeu concours organisé par France Télécom du meilleur site de Rugby en Essonne, le club a remporté le Net d’Or 2006, et 2 Net d’Argent pour la saison 2003 - 2004 et la saison 2004 - 2005 avec à la clé des jeux de maillots et des ballons (cf : annexe page 13 et 14). Rugby Club Chilly-Mazarin http://www.rccweb.net (cf : attestation onglet n°5)


http://www.rccweb.net/


4.Etat de situation problème 4.1. Nouvelles techniques de travail sur le site

Wanadoo.fr

4.1.1. Introduction Dans le cadre du projet Wanadoo2, ma mission a consisté à effectuer le passage des pages statiques aux pages dynamiques de tout le site, de définir l’arborescence, d’intégrer dans le respect de la nouvelle charte graphique et d’administrer ce service par un outil d’animation. L’objectif pour cette mission, était d’automatiser et de faciliter la création ou la modification de blocs de page web. Selon les niveaux de permissions, dont l’utilisateur peut créer des documents, planifier et publier ses contenus. Cette méthode de travail a aussi été mise en place suite à une recrudescence des nouvelles thématiques installées sur le portail Wanadoo.fr. (cf : annexe page 17)

4.1.2. Phase de réflexion Pour réaliser ces tâches, j’ai participé aux réunions avec les Maîtres d’œuvres et Maîtres d’Ouvrages, afin de définir les besoins des projets. J’ai proposé des solutions en terme de développement sur l’outil d’animation, pour les besoins utilisateurs des différentes rubriques à animer. L’outil d’animation ne gérant pas de manière dynamique la création des pages englobantes aux formats HTML celles-ci devaient être créées et déposées manuellement par FTP, j’ai donc dû anticiper et déterminer le nombres de pages à réaliser. A l’issue de ces réunions j’ai aussi pris connaissance du planning et des moyens humains (Graphistes, Administrateurs Systèmes) avec lesquels j’allais collaborer pour intégrer les éléments graphiques et déployer le projet une fois réalisé, sur le serveur de production. Le choix de l’utilisation du procédé XSL avec la structure XML, était une décision technologique au sein du service production multimédia, afin d’alléger le travail du Webmaster et permettre aux différentes équipes éditoriales d’être autonome à la mise en place des contenus.



4.1.3. Réalisation A partir des documents fonctionnels (cf : annexe page 18), j’ai réalisé et développé les éléments sur l’outil d’animation, qui permettront aux Maîtres d’œuvres de publier sur le site leurs contenus en textes et images. Pour cette étape une connaissance du langage de programmation en XSL associé à la structure XML, acquise lors d’une formation en interne a été nécessaire pour le bon fonctionnement de l’outil d’animation et des pages dynamiques. La documentation d’utilisation de l’outil d’animation (cf : annexe page 18) m’a aussi servi de support pour intégrer les templates XSL, et pour définir le serveur de production vers lequel les blocs (fichiers de sortie) sont envoyés lors de la mise en ligne par les utilisateurs éditoriaux.

4.1.4. Résolution problématique Les formulaires de saisies sont générés grâce aux templates XSL et permettent ainsi aux utilisateurs de remplir chaque champ, et de génèrer un fichier HTML à partir du document XML après validation de l’utilisateur, pour alimenter la rubrique concernée sur le site. Concernant les articles des pages accueil Wanadoo, le MOA avait souhaité une fonction permettant de changer l’ordre d’affichage des articles, chose qui n’avait pas été prévue au démarrage du projet. Il a donc fallu refaire un développement plus technique, ce qui a nécessité plus de temps pour sa réalisation. Néanmoins, j’ai proposé au MOA de travailler avec les formulaires mis à sa disposition, au démarrage du projet, en attendant la livraison de la deuxième phase de développement.

4.1.5. Conclusion J’ai donc acquis une nouvelle compétence, grâce à cette nouvelle technique de travail avec les feuilles de styles XSL, ce qui m’a permis de voir que nous pouvions traiter un document XML en modifiant sa structure, et de générer du HTML grâce au PHP. Mais il aurait fallut une étude plus détaillée des besoins au départ du projet, pour éviter de revenir sur un travail déjà mis en ligne.



Conclusion Grâce aux formations acquises sur l’évolution constante des nouvelles technologies qui constituent le web, et mon expérience, ma démarche à l’obtention de la licence professionnelle activités et techniques de communication, en gestion de sites Web et intégration de contenus multimédia va être un véritable tremplin en terme d’évolution de carrière. En effet, mon objectif est de prétendre à des fonctions de gestions de projet, et pourquoi pas, officialiser la création d’une entreprise, soit Créa Site Web, de part mes activités extra professionnelles en gestion, et conception de sites web. Néanmoins, il faut rester curieux et effectuer une veille active sur les différents sites présents sur Internet, car c’est un milieu qui évolue très vite.



Bibliographie

Le programmeur PHP4 de Campus Press Année 2003 - 553 pages.

Pages Web Dynamiques avec ASP3, PHP4 et SQL de Campus Press. Année 2000 – 328 pages

XML de Visuel Pro pour créer des pages Web professionnelles. Année 2001 - 300 pages Conception Graphique des sites Web 3ème édition de Campus Press. Année 1999 – 440 pages

Flash Mx 2004 De Micro.Application Année 2004 – 287 pages



Licence Professionnelle Activités et Techniques de Communication

Gestion de sites Web et intégration de contenus multimédia

ANNEXES

Jean-Michel Pillon [email protected]



Sommaire 1. MEDIA PUBLICITAIRE 3 2. DOSSIERS EVENEMENTIELS 4 3. CLUB ABONNES 5 4. CPI-FRANCE : AGENCE IMMOBILIERE 6

DOCUMENT : 7 MANUEL UTILISATEUR : SITE INTERNET CPI-FRANCE

5. LE RUGBY FEMININ EN FRANCE 8 6. FAUGUET SPORT 9 7. LA REEDUCATION DES EPAULES 10 8. SPORT FORME INTERIM 11 9. GROUPE DE MUSIQUE « YOREL » 12 10. RUGBY CLUB CHILLY-MAZARIN 13 11. LES MILDIOUX 15 12. MISE EN PLACE D’UN INTRANET 16

DOCUMENTS : INTRANET DU SERVICE ABUSE EXPLOITATION DU SERVEUR UNIX POUR LE WEB INTRANET ABUSE

13. NOUVELLES TECHNIQUES DE TRAVAIL SUR WANADOO.FR 17

DOCUMENTS : 18 CONCEPTION DU PROJET « ESPACE HAUT DEBIT » DANS MAGIC MANUEL UTILISATEUR MAGIC V3.6



1. Média publicitaire Mise en œuvre Sur la Figure : 1 : apparition de l’animation flash (média publicitaire), puis transition en fin de l’animation, sur les articles à la Une en Figure : 2 Aperçu



2. Dossiers évènementiels Mise en œuvre Dossiers évènementiels (cinéma, people, exposition, etc…), réalisés au format DHTML, avec Flash, et éléments audio et vidéo Aperçu



3. Club Abonnés Mise en œuvre Le Club Abonné est un espace du site Wanadoo destiné aux abonnés. La réalisation des pages ci-dessous était réalisée aux formats HTML (pages statiques), d’où la mise en place d’un outil d’animation pour générer des pages dynamiques aux formats PHP. Aperçu



4. CPI-France : Agence Immobilière Type de projet Le site CPI France s’adresse aux particuliers cherchant à trouver une annonce immobilière. Toutes les annonces saisies sont stockées sur une base de donnée. Mise en œuvre Publication des annonces via un outil d’animation avec miniaturisation des images. PHP - MySql - Dynamic HTML - Flash. Aperçu Le site http://www.cpi-france.com L’outil d’animation




CPI-France : Agence Immobilière Document : Manuel utilisateur : Site Internet CPI-France



5. Le Rugby Féminin en France Type de projet Site d’informations sur le championnat de France, les stages, les calendriers, les matches internationnaux, et consulté par divers média comme : l’AFP, le Midi Olympique, la Fédération française de Rugby etc… Mise en œuvre Publication des articles et documents aux différents formats Word, Excel, etc... via un outil d’animation avec miniaturisation des images. PHP - MySql - Dynamic HTML - Bandeau Flash. Aperçu Le site http://www.rugbyfemininfrance.fr L’outil d’animation




6. Fauguet Sport Type de projet Site de sport automobile, présentant l’équipe « Fauguet Sport » évoluant en Coupe de France des Rallyes. Mise en œuvre Publication des articles, vidéos et documents aux différents formats Word, Excel, etc... via un outil d’animation avec miniaturisation des images pour la galerie photos. PHP - MySql - Dynamic HTML - Flash. Vidéos pour Windows media player, QuickTime et Real Player Aperçu

L’outil d’animation



7. La Rééducation des épaules Type de projet Site sur la vente d’un CD-Rom présentant la rééducation des épaules par un Kinésithérapeute. Mise en œuvre Dynamic HTML et PHP (intégration d’Include) et une vidéo de présentation aux format Quick time Aperçu Le site http://www.reeducation-des-epaules.com



8. Sport Forme Intérim Type de projet Site proposant des services de préparation physique destiné aux sportif et aux particuliers. Mise en œuvre Publication des articles et images via un outil d’animation. PHP - MySql - Dynamic HTML Aperçu Le site http://sportformeinterim.free.fr



9. Groupe de musique « YOREL » Type de projet Site sur la présentation du groupe YOREL, la promotion des concerts et la diffusion des chansons téléchargeables en ligne. Mise en œuvre Publication des articles et fichiers audio, via un outil d’animation avec miniaturisation des images pour la galerie photos. PHP - MySql - Dynamic HTML - fichiers audio pour Quick Time. Aperçu Le site http://www.yorel.eu


http://www.yorel.eu/


10. Rugby Club Chilly-Mazarin Type de projet Site d’information du Rugby Club de Chilly-mazarin,sur le championnat de France, les résultats, les agendas, la diffusion des résultats Essonniens etc… Mise en œuvre Publication des articles et documents aux différents formats Word, Excel, etc..., via un outil d’animation avec miniaturisation des images pour les galeries photos. PHP - MySql - Dynamic HTML Aperçu Le site depuis l’année 2003 http://www.rccweb.net L’outil d’animation



Version précédente du site Mise en œuvre du site pour la période de l’année 2000 à 2003, aux format HTML, nécessitait des mise à jours manuels. Aperçu

Version prévue en 2007 Le site gardera la même technologie que le site actuellement en ligne, mais fera l’objet d’un changement d’hébergement. Aperçu



11. Les Mildioux Type de projet Site d’information sur la section vétéran du Rugby Club de Chilly-Mazarin dite « Les Mildioux » Mise en œuvre Publication des articles et documents aux différents formats Word, Excel, etc..., via un outil d’animation avec miniaturisation des images pour les galeries photos. PHP - MySql - Dynamic HTML Vidéos pour Windows media player, Quick Time et Real Player Aperçu Le site http://www.mildioux.com


http://www.mildioux.com/


12. Mise en place d’un Intranet Documents : - Intranet du Service Abuse - Exploitation du serveur Unix pour le web Intranet Abuse



13. Nouvelles techniques de travail sur Wanadoo.fr Mise en œuvre Le passage de Wanadoo 1 (Figure : 1 pages statiques) à Wanadoo 2 (Figure : 2 pages dynamiques) a nécessité le changement de langage, par l’utilisation de la technologie XSL associés à la structure XML. C’est avec l'aide d'une feuille de style XSL, que la même source d’information au format XML, permet un changement de présentation du document sur la Figure : 2 Aperçu



Nouvelles techniques de travail sur Wanadoo.fr Documents : - Conception du projet « Espace haut Débit » dans Magic - Manuel utilisateur Magic v3.6



Attestations Attestations professionnelles et extra professionnelles, faisant éléments de preuves, pour confirmer l'authenticité des écrits dans ce mémoire.

- Certificat de stage « Concepteur de Sites Internet » onglet n°1

- M. Christophe Cellarier : Manager équipe Webmaster onglet n°2

- M. Jacques Thieck : Manager équipe Webmaster onglet n°3

- CPI France « Agence Immobilière » onglet n°4

- Le Rugby Féminin en France onglet n°5

- Fauguet Sport (Sport Automobile

- La rééducation des épaules

- Association Sport Forme

- Groupe de musique « YOREL

- Rugby Club Chilly-Mazarin

- Les Mildioux

- M. Philippe Benchemoul : Ingénieur Système et Sécurité onglet n°6
