Voici quelques réponses aux
curieuses et aux curieux qui aimeraient tout savoir sur la création
de ce site.
Depuis une bonne trentaine d'années (c'est d'ailleurs l'âge
de la sympathique Méthanie !), Gaz de France entretient un
partenariat avec le monde enseignant. En effet, très souvent,
des enseignants, des élèves s'adressent à l'entreprise
pour obtenir des informations. Les propositions de Gaz de France dans
le domaine pédagogique s'inscrivent dans cette logique.
Daniel
Boyer Chef
de Projet
1.
Consulter les futurs utilisateurs du site Jeunes.gazdefrance.com.
Avant même d'écrire le 1er mot du projet, nous avons
consulté les utilisateurs potentiels du site.
Pour ce faire, deux réunions ont été organisées
:
- L'une rassemblait des enseignants de collèges publics et
privés qui avaient comme dénominateur commun un intérêt
et une pratique de l'informatique et du net dans le cadre de leurs
activités pédagogiques.
- L'autre réunissait des collégiennes et des collégiens
de la 6ème à la 3ème, amoureux des nouvelles
techniques de communications.
Tous leurs propos, questions, réflexions, suggestions ont été
soigneusement recueillies et analysées par une équipe
d'experts.
C'est à partir de tout ce matériau récolté
qu'a été élaborée la trame du projet :
- les thèmes des fiches d'informations;
- le type des activités;
- le principe des quiz;
- le concept des fiches-métiers.
2.
Rédiger le cahier des charges et sélectionner les agences
Pour réaliser les différents supports présents
sur le site, il faut faire appel à des professionnels spécialisés
dans de nombreux domaines : consultants pédagogiques, rédacteurs,
illustrateurs, graphistes, agences de jeux Internet, concepteurs de
site, programmateurs… qui travaillent ensemble autour du projet.
Le site Jeunes.gazdefrance.com. a nécessité la mise
en place d'une équipe de 30 personnes.
Chaque membre de l'équipe reçoit un cahier des charges
définissant les tâches à réaliser dans
son domaine d'activités et notifiant les contraintes à
prendre en compte (délais, charte graphique, etc)
Un chef de projet est nommé pour coordonner le travail de tous
les membres de l'équipe : Qui travaille avec qui ? Quand ?
Comment ?
3.
Planifier
C'est également le rôle du chef de projet. Il s'agit
de prévoir toutes les étapes de la réalisation
du site et d'évaluer le temps nécessaire à consacrer.
Le planning a pour objectif :
- de bien comprendre la mission de chacun
- de fixer des échéances de remise des travaux
Le chef de projet organise mensuellement des réunions d'avancement
du projet pour contrôler le suivi du planning par les différents
membres de l'équipe.
Comme pour une dissertation, une fois
que le plan est fait, il faut ECRIRE !
Les rédacteurs ont bien sûr sollicité Gaz de France
pour tous les documents, revues, magazines, articles, photos, vidéos
existant dans l'entreprise sur le gaz naturel… et il y en a énormément
!!! Tout a été compilé, lu, trié pour
sélectionner les informations à transmettre sur le site.
Chaque fiche a été conçue avec une grande attention
pour qu'elle soit facile à comprendre mais qu'en même
temps elle apporte de nouvelles connaissances sur le gaz naturel.
Il fallait aussi qu'elle donne envie de lire et qu'elle ait un "look"
sympa avec des photos, des schémas, des illustrations…nos
jeunes collégiens avaient insisté sur ces deux points-là
et nous avons suivi leurs conseils !
1.
Les premières recherches
Avant de se lancer dans la réalisation graphique du site, il
y a eu une étape de recherche qui a porté essentielement
sur les menus de navigation et sur le style graphique des illustrations
présentes sur le site.
Le but était de trouver un graphisme ludique et attractif (souhait
exprimé par les collégiens lors des réunions
préalables) facilement déclinable sur le grand nombre
de pages que comporte le site.
Il fallait aussi respecter le style général des sites
Gaz de France, bien sûr !
2.
La réalisation
Une fois les croquis validés, il afallu passer par la mise
en couleur, mais aussi le choix des polices de caractère, et
bien sûr décliner tous les éléments, boutons,
pictogrammes, cadres qui sont présents sur toutes les pages.
Justine
Plessier Chef
de Projet
L’équipe a dû créer
une Méthanie en 3D, en respectant la Méthanie existant
déjà en 2D.
1. Design 2D
Un designer a tout d’abord réalisé plusieurs
roughs représentant Méthanie dans plusieurs poses,
avec des expressions représentatives de son caractère.
2.
Modélisation en 3D
Une fois cette Méthanie validée par Gaz de France, la
phase de modélisation en 3D a pu débuter.
Méthanie a été construite par un animateur sur
un logiciel d’animation 3D à partir de formes géométriques
en « fil de fer ».
C’est le maillage 3D. On applique ensuite des couleurs sur le
modèle filaire et on lui ajoute un squelette qui permettra
de faire bouger Méthanie.
3.
Animations et expressions
Vient ensuite l’étape de création des animations
et des morphs de base, qui donneront vie et expressivité à
Méthanie.
Chaque animation est une posture, un geste, une attitude précise
et plus ou moins complexe. Les morphs sont réalisés
en déplaçant les points du visage.
Ils permettront de faire parler Méthanie et de lui attribuer
des expressions.
Guillaume
Douillet Développeur Scénariste
4.
Edition en Living Actor
La phase d’édition de Méthanie permet de créer
un personnage Living Actor : on monte ses animations en définissant
les mouvements d’aller et de retour pour chaque posture, on lui
attribue des expressions créées à partir de plusieurs
morphs, on la fait respirer et cligner des yeux, etc.
Au final, Méthanie possède 92 animations et 11 expressions
combinables les unes avec les autres.
5.
Scénarisation
Une fois Méthanie éditée en format Living Actor,
la scénarisation peut commencer.
On devient alors « metteur en scène » de la comédienne
Méthanie.
On lui indique où elle devra se placer, quelle expressions
elle devra prendre, quelles animations jouer et le texte qu’elle
devras dire !
6.
Enregistrement et Intégration
Il ne reste plus qu’à enregistrer la voix d’une vraie
comédienne (en mp3), puis à intégrer les script
réalisés dans le site web !
Frédéric
Diaz Chef
de projet
1 Le graphisme L'élément graphique principal
qui ressort durant le quiz est la mongolfière.
Mais avant d'avoir son aspect définitif, elle a subi quelques
transformations.
La première version était blanche mais le problème
du logo Gaz de France qui n'était pas assez lisible se
posait.
Nous avons donc fait une mongolfière aux couleurs du logo.
Puis nous avons remplacé les personnages et la flamme par
Méthanie.
2
L'animation
A la fin du quiz la mongolfière est animée et traverse
l'écran. Pour réaliser une animation de ce genre il
suffit de créer un guide qui détermine la trajectoire
de l'objet à déplacer dans l'écran.
Afin de rendre la plus réaliste possible cette trajectoire,
le guide ne doit pas être complètement rectiligne mais
il doit légèrement osciller comme pour simuler les effets
du vent sur la mongolfière.
Ci-dessous, le fil rouge appelé "guide". Le cadre
vert représente la partie qui apparaît à l'écran.
3
La programmation
Les nombreuses questions et réponses des quiz ont d'abord été
rédigées sur le papier. Le fait de saisir ces questions-réponses
et de les intégrer dans le quiz ne se fait pas de manière
automatique, il faut créer un programme permettant de faire
le lien entre le papier et l'ordinateur. C'est ce qu'on appelle une
interface d'administration.
Celle-ci n'est pas visible par l'internaute, seules quelques personnes
y ont accès pour écrire et enregistrer l'ensemble des
questions et des réponses qui seront lues par le programme.
Une fois que ces personnes ont enregistré leurs textes, le
quiz final pourra exister et sera visible pour l'internaute.
Le résultat final, un quiz visible par l'internaute !
David
Torondel
Graphiste
1.
Première étape, "écrire" les activités
Le but des activités est de permettre aux visiteurs de tester
de manière ludique les connaissances acquises pendant la consultation
du site. Ce sont donc les rédacteurs qui ont réfléchit
et écrit les activités.
2.
Deuxième étape, la programmation
Ensuite, il a fallu programmer les activités, c'est à
dire traduire en langage informatique toutes les fonctions des différentes
activités, faire en sorte qu'il reconnaisse les bonnes réponses,
calcule les scores, etc.
Chaque activité a fait l'objet d'une programmation différente
et spécifique, qu'il à fallu tester et modifier plusieurs
fois avant d'arriver au résultat que vous voyez sur ce site.
Thierry
Hallier Développeur
Un site conçu pour vous,
et pour l'équipe de rédaction Les textes, images, vidéos qui
composent ce site ont été définis par une équipe
de rédacteurs.
Pour leur permettre, sans connaissance informatique particulière,
de créer, modifier et mettre à jour les éléments
des pages, nous avons développé et mis à leur
disposition un atelier de composition...
côté
pile...
Prenons l'exemple de la fiche sécurité, telle que vous
la visualisez >>Pour la composer, l'équipe de rédaction
a défini des textes et sélectionné des illustrations
pour agrémenter ce texte et vous présenter un contenu
agréable et vivant. Ces blocs ont été définis
au départ du projet avec l'équipe chargée du
graphisme et les rédacteurs. L'objectif de cette collaboration
a été d'assurer la cohérence graphique des pages,
tout en laissant les rédacteurs libres d'agencer les blocs
de la manière la plus adaptée au message à délivrer.
côté
face...
La fiche sécurité, maintenant, telle qu'elle apparaît
aux rédacteurs >>Ils l'ont composé en ajoutant
des blocs de texte, d'image entourée de texte, des vidéos,
des titres...
multimédia
?
Les images, les vidéos et les animations sont regroupées
dans une base de données, dans laquelle les rédacteurs
vont chercher celles qu'ils souhaitent intégrer dans la page.
Une
fois les modifications faites, et après avoir visualisé
l'effet de ces modifications sur le site tel que vous le verrez, la
version modifiée est mise en ligne et devient celle que vous
consultez.
C'est ainsi que l'équipe a pu alimenter toutes les fiches présentes
sur le site, et que les rédacteurs pourront les mettre à
jour ou en créer de nouvelles au fur et à mesure de
l'évolution du site.
