SlideShare a Scribd company logo
1 of 26
Refonte du site du Master INI
Compte rendu du projet RESIN
Le projet RESIN (REfonte du Site Master INI) s’inscrit dans le cadre d’une
nouvelle stratégie de communication valorisant le Master 2 INI se déroulant au
CESS d’Epinal. Il consiste à construire une nouvelle interface Web mettant en
valeur la richesse de son contenu/cursus et des profils variés des étudiants qui
y sont intégrés.
2012
Master 2 INI - CESS Epinal
Université de Lorraine
29/02/2012
2 Projet RESIN – Master INI 2011/12
Université de Lorraine CESS d’Epinal Master 2 INI 2011/ 12
Compte rendu du projet RESIN
Refonte du site du Master INI
3 Projet RESIN – Master INI 2011/12
Sommaire
page
Introduction ………………………………………………………………………………………………………………… 3
Commanditaire…………………………………………………………………………………………………………… 4
Cahier des charges…………………………………………………………………………………………………….. 4
Structure fonctionnelle……………………………………………………………………………………………… 6
Propositions …………………………………………………………………………………………………………….. 6
Planification ……………………………………………………………………………………………………………… 8
Plan de travail…………………………………………………………………………………………………………… 9
Gestion de contenu…………………………………………………………………………………………. 9
Design graphique……………………………………………………………………………………………… 10
Développement………………………………………………………………………………………………… 15
Méthodologie de travail……………………………………………………………………………………………. 16
Réalisations ………………………………………………………………………………………………………………. 21
Difficultés rencontrées……………………………………………………………………………………………… 24
Conclusion………………………………………………………………………………………………………………….. 24
4 Projet RESIN – Master INI 2011/12
Table des matières
Refonte du site du Master INI ..................................................................................................... 2
Sommaire ............................................................................................................................................ 3
1.Introduction Présentation du projet ...................................................................................... 5
2.Client Commanditaire ................................................................................................................. 6
3.Cahier des charges Commande client .................................................................................. 6
4.Structure fonctionnelle Brainstorming.................................................................................. 8
5.Propositions..................................................................................................................................... 8
5.Planification................................................................................................................................... 10
6.Plan de travail Répartition des tâches................................................................................ 11
7.Méthodologie Déroulement du travail................................................................................. 18
9.Réalisations Illustrations.......................................................................................................... 23
10.Difficultés rencontrées ........................................................................................................... 26
11.Conclusion Perspectives ........................................................................................................ 26
5 Projet RESIN – Master INI 2011/12
1.Introduction Présentation du projet
Le projet RESIN (REfonte du Site Master INI) s’inscrit dans le cadre d’une nouvelle stratégie de
communication valorisant le Master 2 INI se déroulant au CESS d’Epinal. Il consiste à construire une
nouvelle interface Web mettant en valeur la richesse de son contenu/cursus et des profils variés des
étudiants qui y sont intégrés.
Le projet RESIN se veut innovateur en termes d’interfaçage, riche en contenu, permettant de faire
connaître la spécialité auprès d’un public large (formation initiale ou continue), une vitrine
promotionnelle efficace pour un diplôme reconnu à l’échelle internationale.
Ce master a pour ambitions de :
 favoriser le transfert des compétences entre les étudiants du master
 placer les étudiants dans une situation réelle, situation de travail, notamment pour leur
permettre d'appréhender le monde de l'entreprise grâce aux divers projets de cours et
stages proposés.
Le projet RESIN a pour objectif de rapprocher les acteurs du domaine multimédia (de la région
lorraine) ouvrant la porte à la création d’un réseau de compétences et créer une dynamique de
structuration opérationnelle.
Il vise de fournir un portail permettant le rapprochement des entreprises spécialisées et d’apporter
les conditions de développement de la compétitivité dans les domaines multimédia en contribuant à
soutenir l’innovation par un encadrement directement opérationnel sur les domaines du Web, de
l’audiovisuel et de la création graphique.
6 Projet RESIN – Master INI 2011/12
2.Client Commanditaire
Client : Responsable de la formation :
M. Jean Luc NOIZETTE
Maître de conférences
ESSTIN Université de Lorraine
2, rue Jean Lamour, Vandoeuvre Les Nancy Cedex, F-54519, France
Email ESSTIN : jean-luc.noizette@esstin.uhp-nancy.fr
Email UHP : Jean-Luc.Noizette@persmail.uhp-nancy.fr
----------------------------------------------------------------------------
Work : +33 (0)3 83 68 51 32 Fax ESSTIN : +33 (0)3 83 68 50 01
Cell : +33 (0)6 16 67 75 73 Fax ISYS : +33 (0)3 83 68 50 12
Secrétariat : +33 (0)3 83 68 51 21
3.Cahier des charges Commande client
Le client a formulé sa commande via un cahier des charges, rédigé et validé suite aux différents
échanges et entretiens avec les membres de l’équipe. En voici le descriptif des points essentiels de
sa requête:
a. Objectifs : mettre l’accent sur les frais d’inscription (faibles comparés à d’autres formations du
même type)
 Mettre en avant la pluridisciplinarité des étudiants de la formation.
 Montrer la reconnaissance nationale et internationale du diplôme.
 Mettre en avant l’acceptation d’étudiants venant de diverses formations et ayant des profils
hétérogènes et leurs collaborations au sein de divers projets.
 Mettre en avant l’accessibilité des personnes en formation continue.
b. Cibles :
 Futurs étudiants
 Professionnels pour les propositions de stages et les éventuels recrutements.
7 Projet RESIN – Master INI 2011/12
c. Spécifications techniques :
1. Médias
 Corriger et adapter les ressources existantes
 Insérer de nouveaux contenus : plus récent (actualités sur la formation et autres
informations sur l’université de Lorraine).
 Etablissement de supports publicitaires pour la promotion de la formation : spot, audio, clip
mettant en pratique les compétences.
2. Charte graphique.
Seul l’ancien logo du master représente l’élément référence de la charte graphique: nous avions
reçu l’autorisation de l’améliorer ou le modifier mais en respectant la nouvelle charte graphique
définie par l’université de Lorraine.
Le client a exprimé son souhait d’ajouter de la profondeur et du relief, d’adopter une approche
dynamique et d’éviter le formatage.
Le client demande d’insérer les productions étudiantes dans le design global du nouveau site
3. Les attentes.
Une Web TV à mettre en œuvre (actualités, news, et débats réguliers).
Réaliser une page d’accueil accrocheuse et dynamique.
Classer les étudiants en fonctions de leurs domaines de compétences (3D, sites web…
Réaliser une visite virtuelle de l’établissement (CESS Epinal)
4. Référencement :
Le référencement consiste à améliorer et consolider le positionnement du site internet dans les
résultats des moteurs de recherche.
8 Projet RESIN – Master INI 2011/12
4.Structure fonctionnelle Brainstorming
Sous la direction de Monsieur Alain Gérard, une journée de brainstorming a été organisée afin de
définir les différents aspects et dimensions du projet : acteurs, cibles, contenus, accès,…..
La classification des différents éléments de réflexion a donné le diagramme fonctionnel du site,
présenté comme suit :
5.Propositions
Trois équipes de travail se sont formées afin de réfléchir sur les exigences et attentes du client. La
collaboration a fini par suggérer des croquis de site pouvant répondre au cahier des charges. Nous
n’avons retenu que 02 maquettes que nous avons soumises à l’intéressé.
Après consultation, le client a fait son choix et a souhaité garder la maquette 01 en insistant sur ses
attentes et conditions du livrable.
9 Projet RESIN – Master INI 2011/12
Maquette 01 : modèle tablette / aspect 3D / Relief Maquette 02 : modèle sobre / aspect 3D / Relief
10 Projet RESIN – Master INI 2011/12
Equipe Master 2 INI – Projet RESIN
Chef de projet :
Enseignant référent : M.Alain Gérard
Equipe Développement
Responsable : Chouissa
Equipe Design Graphique
Responsable : R.Sauter
Equipe Contenu
Responsable : P.Carle
6.Planification
Une fois la maquette validée, le projet a été scindé en tâches dont chacune fut attribuée à une
équipe spécialisée :
Voici le déroulement chronologique prévu des tâches à réaliser, schématisé dans le diagramme de
Gantt suivant (version initiale du plan de travail):
NB. Des ajustements ont été introduits dans ce diagramme afin de palier aux retards et imprévus.
11 Projet RESIN – Master INI 2011/12
7.Plan de travail Répartition des tâches
Une fois la maquette validée, le projet a été subdivisé en modules et tâches. Des équipes ont été
formées et chacune affectée à un module spécifique. Les tâches ont été réparties par équipe et
comment suit :
7.I Gestion de contenu :
Le contenu du site web comportait en majeure quantité des médias, les réalisations des étudiants de
toutes les promotions possibles. Le ton commun aux textes était important et devait cibler
principalement les futurs étudiants tout en étant significatif pour les professionnels.
Accueil :
Un texte a été écrit pour l’accueil du site, il avait été convenu par l’ensemble de l’équipe que ce
texte d’accueil ne devait être ni trop long ni trop formel afin d’entrer dans le site de manière assez
dynamique.
Etudiants, localisation :
De petits textes de présentation ont également été écrits.
Formation :
Les professeurs ont été sollicités pour cette partie, l’équipe a tenté de les relancer à plusieurs
reprises, pourtant seuls cinq nous ont fourni le contenu nécessaire.
Les informations relatives aux inscriptions ont été actualisées par rapport à l’année dernière et les
textes ont été réécris en gardant le ton commun à tout le site.
Réalisations :
Chacune des catégories de réalisations a été alimentée par les vidéos et projets de l’année en cours
ainsi que des années précédentes (dans la mesure de ce qui était disponible). La plupart de ces
projets a été mise en ligne via Vimeo, un compte Vimeo et une adresse mail ont donc été créés pour
le master INI.
Chacune des catégories est aussi introduite par un petit texte de présentation.
Web TV :
Le concept de la Web TV n’était pas un objectif principal, nous voulions seulement amorcer une idée
pour les promotions suivantes et éventuellement fournir une démo. Le contenu n’était pas clair non
plus jusqu’à l’idée de monter une télé –réalité du master INI.
La télé-réalité devait pouvoir retranscrire de manière humoristique le déroulement de la vie et du
travail d’équipe au sein du master.
12 Projet RESIN – Master INI 2011/12
Nous avons commencé le tournage très tardivement mais nous avons procédé par étapes :
 Dans un premier temps, nous avons filmé les locaux vides et fixé les noms des salles.
 Ensuite nous avons filmé des scènes de travail sur 3 jours et nous avons mis en place une
forme de confessionnal appelé le « crachoir ». Devant le fond bleu nous avons filmé chaque
étudiant afin d’y incruster un faux décor dans l’esprit télé-réalité. Les séances de travail
étaient majoritairement filmées en caméra fixe, ce qui permettait d’oublier la caméra et
d’obtenir des images réalistes.
 Le montage s’est fait rapidement au fur et à mesure que les rushes étaient tournés.
7.2.Equipe Design graphique
Le projet dans lequel nous avons collaboré s’inscrit dans le cadre d’une refonte totale du site web du
Master INI. En ce qui concerne l’équipe Design graphique, il s’agissait de créer tous les éléments
graphiques et ergonomiques qui composent le nouveau site web.
Nous avons donc répartis les tâches à chacun des membres de l’équipe « Design » suivant une
hiérarchie d’entreprise. En effet, un coordinateur établit dans un premier temps les besoins avec les
autres équipes (L’équipe « Développement » et l’équipe « Contenu ») puis transmet ces tâches aux
différentes personnes du groupe suivant son domaine de compétences. De plus, afin de
correspondre au mieux aux attentes du client, nous avons utilisé la méthode AGIL qui permet de
travailler en interaction tout au long du projet avec le client.
Composition de l’équipe :
Romain Sauter : Coordinateur
Céline Bernard : Conception des boutons du menu
Benoit Hays : Conception de maquettes
Ornella nTaloula : Conception de maquettes
Kamel Mouats : Conception d’images 2D/3D
Hernan Perez : Conception d’images 2D/3D
Objectifs :
Les contraintes initiales fournis par le client sont les suivantes :
Les tâches réalisées :
Conception de maquettes :
13 Projet RESIN – Master INI 2011/12
Pour être au plus proche des attentes du client (méthode Agile), nous avons conçu dans un premier
temps avec l’ensemble des étudiants de la promotion INI, 3 maquettes graphiques différentes. Ces
dernières nous ont permis de proposer un large choix au client avec des tons très différents. Cette
étape préalable nous a permis à l’équipe graphique par la suite de concevoir 2 nouvelles maquettes
retraçant l’ensemble des idées proposées dans les 3 premières et validées par le client.
Concernant la page d’accueil, le client désirait garder un look tablette, des boutons de menu simples
et en perspectives, ainsi qu’un slideshow proposant des images de réalisations des étudiants.
Conception des pages du site web :
Structure du site web:
Page d’accueil
Forum
Formation
Etudiants
Professionnels
Réalisations
Liste des étudiants actuels
(Curseurs sélectionnable)
Nom, Prénom,
Formation,…
Anciens Etudiants
Graphisme Réalité
augmentée
Web Design 3D Vidéos
-Contenu
-Débouchés
-CESS
Carrousel
(Photos et vidéos)
14 Projet RESIN – Master INI 2011/12
Après validation du style des premières maquettes par le client, nous avons conçu les pages en
fonction de cette organisation. Nous avons alors répartis les sections à réalisées aux membres du
groupe « Design » pour concevoir chaque sous partie du site web.
Maquette Section «Formation» :
Pour chaque page de cette section nous avons cherché les plus belles images de réalisations
étudiantes afin d’illustrer et de montrer ce qu’il est possible de faire dans notre formation.
15 Projet RESIN – Master INI 2011/12
Maquette Section «Etudiant» :
16 Projet RESIN – Master INI 2011/12
Maquette Section « Espace Professionnels» :
17 Projet RESIN – Master INI 2011/12
7.3.Equipe Développement
Outils utilisés :
Système de gestion de contenu : Joomla
Logiciel FTP : FileZilla : pour le transfert de fichiers sur un serveur web
Modules Joomla
Editeur de texte : langage PHP, HTML/CSS
FONCTIONNALITES
Nous avons expliqué précédemment les raisons qui nous ont poussées à utiliser le CMS Joomla.
Désormais, il est temps d’aborder les fonctionnalités développées.
1. Le template
Une fois Joomla installé sur un serveur web ou en local, une des premières étapes est de concevoir
un template (ou thème graphique), autrement dit de définir l’aspect visuel du site, et le
positionnement des différents blocs et autres composants. Il est possible d’utiliser des thèmes par
défaut ou en télécharger sur Internet. Cependant, afin d’être le plus fidèle possible avec la maquette
validée par le client, nous avons dû réaliser un template entier à partir d’un existant par défaut. Pour
le modifier, deux solutions s’offrent à nous. La première utilise l’administration Joomla, mais les
changements ne sont pas pratiques surtout si l’on fait des erreurs. La seconde, la meilleure, est
d’éditer les feuilles de style directement sur le logiciel FTP (tel que FileZilla).
Pour information, un logiciel FTP offre la possibilité de déposer des fichiers sur un serveur web (via le
protocole FTP : File Protocol Transfert), et donc de publier en ligne son propre site web. C’est pour
cette raison d’ailleurs que nous acheté un hébergement web pour permettre à l’équipe de projet,
mais aussi au client, d’apercevoir les changements effectués en temps réel.
D’un point de vue technique, pour créer un template reconnu par Joomla, il faut installer une archive
(compressée) contenant différents fichiers (voir annexe). On retrouve ainsi :
- index.php : fichier contenant la structure du site. Il est possible de lui rajouter de nouveaux
blocs (div ou class en css), et de leur spécifier par exemple si on veut les voir sur la page
d’accueil exclusivement ou sur également sur les autres.
- templateDetails.xml : sert à l’installation du template et à ses paramètres
- index.html : feuille vierge qui sert de support à la génération de la page
- favicon.ico : icône du site
- template_thumbnail.png : miniature de prévisualisation du site dans l’administration
- css/nomFichier.css : pilote les feuilles du style du site.
18 Projet RESIN – Master INI 2011/12
2. Les modules
La force de Joomla vient de sa force communautaire, et des nombreuses « fonctions avancées »
développées. On les appelle des modules….
3. La partie administration
Encore une fois, le choix du CMS Joomla n’a pas été pris à la légère. En effet, l’un des objectifs de la
refonte du site du Master INI est de le rendre dynamique avec des mises à jour régulières. Par
conséquent, il est nécessaire de pouvoir ajouter du nouveau contenu de façon simple et rapide.
L’administration de Joomla est faite pour ça. Malgré un temps d’adaptation à cet environnement
riche et pas toujours trivial, elle permet la gestion des droits d’utilisateurs, en leur donnant par
exemple le droit d’écrire des articles dans certaines rubriques tout en interdisant d’installer de
nouveaux modules ou de modifier le thème graphique actuel.
8.Méthodologie Déroulement du travail
Dans ce projet, nous étions ramenés à réaliser différentes tâches et missions et nous avons adapté
une méthodologie de travail spécifique pour chaque mission.
Maquettes
Au départ du projet la classe a été divisée en 3, pour essayer de trouver de bonnes idées pour la
maquette du master. Ces groupes ont été constitués au hasard et étaient par conséquent très
hétérogènes. Cet exercice avait pour but de laisser place à la créativité des étudiants.
Le client nous a donné peu de conditions pour le graphismes. Nous avions beaucoup de liberté mais il
fallait montrer que ce master est maitre en 3D. Donc essayer de mettre en place un design en relief
et dynamique.
Le nom du projet se nomme RESIN (REfonte du Site INi) donc les groupes RESIN1, 2 et 3.
Voici les 3 maquettes qui en sont ressorties :
19 Projet RESIN – Master INI 2011/12
Groupe Resin 1
Groupe Resin 2
Groupe Resin 3
20 Projet RESIN – Master INI 2011/12
Nous avons remarqué que les maquettes sont très différentes. Le groupe RESIN 3 s’est plus attardé
sur la mise en place du site au point de vue ergonomique que sur le graphisme à proprement parlé.
Les 2 autres parties se sont penchées sur un design possible pour le futur site.
Dans les 3 maquettes le client nous a donné les points positifs et négatifs.
Sur la maquette de RESIN 1 il a bien aimé le style « tablette » et le gros SlideShow en haut de la page.
Par contre n’a pas aimé les boutons du menu, le nouveau logo proposé par l’équipe et donc la
couleur qui ne correspond pas au logo actuel du master.
L’équipe RESIN 2 avait quand à elle présenté une maquette beaucoup plus complète avec différentes
pages : « accueil », « étudiantes », « formation », « réalisations »… Le client a bien aimé le style
propre, par contre il n’a pas bien réussi à voir le principe graphique du gros cube fait en 2D
simulation 3D. Il n’a pas aimé non plus le nouveau logo proposé.
L’aspect ergonomique du 3ème
groupe a beaucoup plus au client de par leurs idées. Notamment le
SlideShow avec les effets de calques. Par contre niveau graphique il n’y avait rien à en retirer.
Le résumé de cet exercice nous a apporté beaucoup. Tout d’abord le client n’a pas été emballé par
les propositions de nouvelle identité visuelle
Donc une première consigne : de garder le logo actuel du site, donc faire le site avec ses contraintes
graphiques.
Ensuite un SlideShow est intéressant pour représenter le savoir faire des étudiants du master. Ils
permettront d’avoir une manière plus interactive d’accéder au contenu du site.
La maquette de RESIN 1 est gardé principalement mais y intégrer les points positifs des autres sites.
Après la présentation des graphismes, la classe s’est divisée en 3 parties plus homogènes. Il y a
désormais la partie Développement, la partie Graphisme et la partie Contenu. Chacune des parties se
devait de faire le nécessaire pour avancer dans sa partie, mais une collaboration était nécessaire
pour le bon avancement du projet.
21 Projet RESIN – Master INI 2011/12
L’équipe Design graphique, se devait de créer tous les éléments graphiques et ergonomiques qui
composent le nouveau site web.
Nous avons donc répartis les tâches à chacun des membres de l’équipe « Design » suivant une
hiérarchie d’entreprise. En effet, un coordinateur établis dans un premier temps les besoins avec les
autres équipes (L’équipe « Développement » et l’équipe « Contenu ») puis transmet ces tâches aux
différentes personnes du groupe suivant son domaine de compétences. De plus afin de correspondre
au mieux aux attentes du client, nous avons utilisé la méthode AGIL qui permet de travailler en
interaction tout au long du projet avec le client.
La partie graphique s’est donc penchée sur l’évolution d’une maquette qui combinerait le besoin du
master et l’envi du client.
L’équipe graphique s’est alors divisée en 2. Un petit groupe a essayé d’améliorer la maquette
graphique de RESIN 1, alors que les autres ont essayé de créer rapidement une nouvelle maquette
qui reprendrait le principe de la tablette.
Maquette de RESIN 1 améliorée Maquette « tablette » proposée
A ce moment là le client a choisi clairement la maquette RESIN 1 amélioré. Le gros changement à
effectuer se trouve dans le menu. Il fallait reprendre les icônes de la maquette « tablette ».
22 Projet RESIN – Master INI 2011/12
Les icônes du menu ont beaucoup changé parce que le client ne voyait pas le rapport entre les icônes
choisies et les catégories. Voici plusieurs icônes proposés pour les menus :
Je pense que les logos ne sont pas encore parfaits. Il faudrait peut-être en faire en 3D avec une forme
plus originale. C’est une possibilité future au site.
La maquette finale du site est la suivante :
Dans ce graphisme final nous retrouvons l’aspect tablette, un SlideShow qui se veut représentatif de
la formation et un site en accord avec la charte graphique du logo INI. Il y a eu un peu de retard dans
le graphisme en vu des nombreux changements effectué à la maquette initiale, mais nous avons à la
fin une maquette plutôt design, avec du relief (la tablette) et du dynamisme (grâce au SlideShow).
23 Projet RESIN – Master INI 2011/12
9.Réalisations Illustrations
Aspect graphique
Arborescence
Le site devant se détacher des autres sites, il fallait donc trouver une arborescence un peu
« originale ». Nous avons décidé de nous appuyer sur le SlideShow pour créer un menu original. En
effet celui-ci nous permet directement d’accéder à des pages spécifiques du site.
Explication des différentes images :
Cette image nous amènera vers une page d’accueil avec un texte accrocheur. Sur cette image nous
pouvons observer en arrière plan le « N » faisant référence au logo du master. Nous y avons
également placé le logo de l’université de Lorraine. Cette image est censé simuler une image vue du
ciel au dessus des immeubles. Pour améliorer cette image il y aura la possibilité de rajouter des
fenêtres aux immeubles ou d’améliorer encore plus l’effet de relief.
Le lien vers la partie Web Design se doit d’être accrocheur puisque ce sont ces réalisations qui vont
attirer de nouveaux élèves. Pour cette image nous avons décidé d’utiliser plusieurs morceaux de CV
réalisés par les étudiants du master. Ces images n’ont pas été choisies au hasard puisque nous
pouvons apercevoir des logos et le style graphique de plusieurs CV.
24 Projet RESIN – Master INI 2011/12
La voiture a été réalisée par un étudiant. Nous pouvons, grâce à elle, constater à quel niveau de
compétences ce master peut nous amener en modélisation 3D. Cette image possède un lien qui nous
amène vers la partie Réalisation 3D du site.
Les autres images sont des créations d’étudiants qui montrent certaines de leurs créations 2D et 3D.
Il est possible de faire des montages pour en associer plusieurs sur une même image du SlideShow
(un peu de la manière de l’image pour le WebDesign par exemple)
Le site propose d’aller sur un « Forum » et sur une « WebTV ». Les boutons sont toujours affichés sur
les pages sous le menu.
Le site dispose d’un fil d’Ariane pour que l’utilisateur se retrouve plus facilement dans le site. Les
pages déjà traversés seront représentés par des lien pour une navigation plus efficace.
Le client nous a demandé un site original dans son ergonomie et son arborescence, mais nous avons
jugé qu’un menu reste indispensable. Les internautes sont habitués, et savent exactement comment
cela marche. Le site est fait pour les futurs étudiants, les professeurs et les professionnels qui
cherchent des étudiants. Il faut par conséquent que l’information puisse vite être trouvée. S’ils
commencent à se perdre dans une « nouvelle espèce » de menu, ils ne voudront peut-être pas
insister.
Les pages de contact et de plan du site sont toujours présentes en bas de page du site.
Disposition des éléments
L’objectif du site est de marquer les personnes qui viennent sur le site, il fallait donc mettre des
éléments en évidence. C’est le cas du SlideShow. Celui-ci nous propose directement des images
propres à la formation et se doit d’être un point fort de la formation. Il est donc logique de l’avoir mit
en avant. Lorsque nous arrivons sur la page, il arrive à peu près au centre de la page.
25 Projet RESIN – Master INI 2011/12
Dans l’entête ce sont les références importantes à l’école qui y sont placés, comme le logo de
l’Université de Lorraine et le logo du master. En plaçant les éléments tout en haut de la page, nous
sommes sûr que les visiteurs du site seront verront ces informations.
Le menu et le contenu du site sont placés en dessous du SlideShow dans la logique d’un site. La
particularité du contenu est qu’il sera placé dans une fausse tablette avec quelques créations
d’étudiants que l’on doit retrouver dans le site. Ceci démontre que le master connait et maitrise les
dernières technologies.
L’espace contact sera quand à lui en bas de page. L’internaute sera obligé de parcourir la page avant
d’aller voir les contacts. Au départ la partie Contact devait faire parti du « footer » (le bas de page) et
devait sortir bu bas de page mais la partie développement n’as pas eu le temps nécessaire d’étudier
la manière de le faire.
26 Projet RESIN – Master INI 2011/12
10.Difficultés rencontrées
En dépit de notre organisation et implication dans la réalisation de ce projet, nous étions confrontés
aux difficultés suivantes :
 Instabilité de la maquette pour une longue durée
 Contrainte de temps (cours/problème d’organisation)
 La technique et la Maîtrise des différents outils de développement et la sélection des médias
à insérer.
11.Conclusion Perspectives
Nous remercions M.Noizette et M.Sauter de nous avoir fait confiance en nous accordant
l’opportunité de réaliser ce projet à travers lequel nous avons exploité notre savoir faire et nos
acquis en terme de gestion de projet.
Nous avons participé à l’élaboration du plan d’actions et avons proposé plusieurs réalisations
développées dans une ambiance collaborative et selon les méthodes agiles (corrections
incrémentales tout le long des réalisations).
Nous avons exploité tout notre savoir faire et avons trouvé dans l’hétérogénéité des profils des
acteurs de ce projet une réelle richesse humaine et technique.

More Related Content

What's hot

Medical openerp
Medical openerpMedical openerp
Medical openerp
HORIYASOFT
 

What's hot (20)

Rapport de pfe format doc 2013
Rapport de pfe format doc 2013Rapport de pfe format doc 2013
Rapport de pfe format doc 2013
 
Rapport de stage de fin d'etudes du DUT
Rapport de stage de fin d'etudes du DUTRapport de stage de fin d'etudes du DUT
Rapport de stage de fin d'etudes du DUT
 
Rapport de stage PFE ( DUT) chez Synthèse Conseil - Jaiti Mohammed
Rapport de stage PFE ( DUT) chez Synthèse Conseil  - Jaiti MohammedRapport de stage PFE ( DUT) chez Synthèse Conseil  - Jaiti Mohammed
Rapport de stage PFE ( DUT) chez Synthèse Conseil - Jaiti Mohammed
 
Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...
 
Rapport De PFE
Rapport De PFERapport De PFE
Rapport De PFE
 
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
 
Rapport gestion-relation-client-grc
Rapport gestion-relation-client-grcRapport gestion-relation-client-grc
Rapport gestion-relation-client-grc
 
Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...
Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...
Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...
 
Rapport de stage du fin d'étude
Rapport de stage du fin d'étudeRapport de stage du fin d'étude
Rapport de stage du fin d'étude
 
Modele rapport pfe esprit
Modele rapport pfe  espritModele rapport pfe  esprit
Modele rapport pfe esprit
 
Medical openerp
Medical openerpMedical openerp
Medical openerp
 
Rapport Projet Fin d'Études PFE
Rapport Projet Fin d'Études PFERapport Projet Fin d'Études PFE
Rapport Projet Fin d'Études PFE
 
Projet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatiqueProjet de fin d'etude gestion informatique
Projet de fin d'etude gestion informatique
 
Rapport de stage communication visuelle, événementiel et site WordPress à ISAMM
Rapport de stage communication visuelle, événementiel  et site WordPress à ISAMMRapport de stage communication visuelle, événementiel  et site WordPress à ISAMM
Rapport de stage communication visuelle, événementiel et site WordPress à ISAMM
 
Rapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIARapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIA
 
Rapport Projet de Fin d'Etudes
Rapport Projet de Fin d'EtudesRapport Projet de Fin d'Etudes
Rapport Projet de Fin d'Etudes
 
Conception et développement d'une application de gestion de production et de ...
Conception et développement d'une application de gestion de production et de ...Conception et développement d'une application de gestion de production et de ...
Conception et développement d'une application de gestion de production et de ...
 
Rapport stage pfe
Rapport stage  pfe Rapport stage  pfe
Rapport stage pfe
 
Mémoire professionnel : La stratégie digitale dans la relation client
Mémoire professionnel : La stratégie digitale dans la relation clientMémoire professionnel : La stratégie digitale dans la relation client
Mémoire professionnel : La stratégie digitale dans la relation client
 
Mémoire communication digitale (extrait)
Mémoire communication digitale (extrait)Mémoire communication digitale (extrait)
Mémoire communication digitale (extrait)
 

Viewers also liked

Réflexions sur l'économie de la filière courrier
Réflexions sur l'économie de la filière courrierRéflexions sur l'économie de la filière courrier
Réflexions sur l'économie de la filière courrier
L'Observatoire COM MEDIA
 
targmanutyun
targmanutyuntargmanutyun
targmanutyun
dzoryan
 
Tplus present 2014-05-18
Tplus present 2014-05-18Tplus present 2014-05-18
Tplus present 2014-05-18
v_lipka
 
Tipologia topologia
Tipologia topologiaTipologia topologia
Tipologia topologia
andre_gamez
 
Article extraction de route
Article extraction de routeArticle extraction de route
Article extraction de route
Ibtissam Zaaj
 
Temps forts de la conférence du 16 décembre 2013
Temps forts de la conférence du 16 décembre 2013Temps forts de la conférence du 16 décembre 2013
Temps forts de la conférence du 16 décembre 2013
L'Observatoire COM MEDIA
 

Viewers also liked (20)

M2 anne
M2 anneM2 anne
M2 anne
 
Découverte du manga (7) - Les fondateurs du manga moderne (Tatsumi)
Découverte du manga (7) - Les fondateurs du manga moderne (Tatsumi)Découverte du manga (7) - Les fondateurs du manga moderne (Tatsumi)
Découverte du manga (7) - Les fondateurs du manga moderne (Tatsumi)
 
Présentation Emgoldex pour Goldexteam (français)
 Présentation Emgoldex pour Goldexteam (français) Présentation Emgoldex pour Goldexteam (français)
Présentation Emgoldex pour Goldexteam (français)
 
Adoption couple homo1
Adoption couple homo1Adoption couple homo1
Adoption couple homo1
 
Les 9 principes clés avant de lancer une startup
Les 9 principes clés avant de lancer une  startupLes 9 principes clés avant de lancer une  startup
Les 9 principes clés avant de lancer une startup
 
Réflexions sur l'économie de la filière courrier
Réflexions sur l'économie de la filière courrierRéflexions sur l'économie de la filière courrier
Réflexions sur l'économie de la filière courrier
 
targmanutyun
targmanutyuntargmanutyun
targmanutyun
 
SDTAN de la Haute-Saône
SDTAN de la Haute-SaôneSDTAN de la Haute-Saône
SDTAN de la Haute-Saône
 
Zouzou
Zouzou Zouzou
Zouzou
 
Tplus present 2014-05-18
Tplus present 2014-05-18Tplus present 2014-05-18
Tplus present 2014-05-18
 
Webquest
WebquestWebquest
Webquest
 
Tipologia topologia
Tipologia topologiaTipologia topologia
Tipologia topologia
 
Rapport v2
Rapport v2Rapport v2
Rapport v2
 
La alimentación
La alimentación La alimentación
La alimentación
 
Article extraction de route
Article extraction de routeArticle extraction de route
Article extraction de route
 
2015 06 15 mecanisme capacite RTE
2015 06 15 mecanisme capacite RTE2015 06 15 mecanisme capacite RTE
2015 06 15 mecanisme capacite RTE
 
Diodo ticona llaja
Diodo ticona llajaDiodo ticona llaja
Diodo ticona llaja
 
Flash snowtrip 2012
Flash snowtrip 2012Flash snowtrip 2012
Flash snowtrip 2012
 
Temps forts de la conférence du 16 décembre 2013
Temps forts de la conférence du 16 décembre 2013Temps forts de la conférence du 16 décembre 2013
Temps forts de la conférence du 16 décembre 2013
 
DOSSIER COMERCIAL
DOSSIER COMERCIALDOSSIER COMERCIAL
DOSSIER COMERCIAL
 

Similar to Refonte de site web : cas pratique - site du master INI

Rapport Projet Gestion des Etudiants avec C++
Rapport Projet Gestion des Etudiants avec C++Rapport Projet Gestion des Etudiants avec C++
Rapport Projet Gestion des Etudiants avec C++
Saâd Zerhouni
 
Catalogue formation hydraulique
Catalogue formation hydrauliqueCatalogue formation hydraulique
Catalogue formation hydraulique
rabahrabah
 
2022 CV Naziha SAKLI - Copie.docx
2022 CV Naziha SAKLI - Copie.docx2022 CV Naziha SAKLI - Copie.docx
2022 CV Naziha SAKLI - Copie.docx
sakli1
 
Mon parcours : De l'informatique à la création d'entreprises
Mon parcours : De l'informatique à la création d'entreprisesMon parcours : De l'informatique à la création d'entreprises
Mon parcours : De l'informatique à la création d'entreprises
Joseph SZCZYGIEL
 

Similar to Refonte de site web : cas pratique - site du master INI (20)

Rapport Projet Gestion des Etudiants avec C++
Rapport Projet Gestion des Etudiants avec C++Rapport Projet Gestion des Etudiants avec C++
Rapport Projet Gestion des Etudiants avec C++
 
Book projets-web
Book projets-webBook projets-web
Book projets-web
 
Catalogue formation hydraulique
Catalogue formation hydrauliqueCatalogue formation hydraulique
Catalogue formation hydraulique
 
IntenrnshipMyApp
IntenrnshipMyAppIntenrnshipMyApp
IntenrnshipMyApp
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
 
(R)évolution d'une solution web en milieu bancaire
(R)évolution d'une solution web en milieu bancaire(R)évolution d'une solution web en milieu bancaire
(R)évolution d'une solution web en milieu bancaire
 
2022 CV Naziha SAKLI - Copie.docx
2022 CV Naziha SAKLI - Copie.docx2022 CV Naziha SAKLI - Copie.docx
2022 CV Naziha SAKLI - Copie.docx
 
Mon parcours : De l'informatique à la création d'entreprises
Mon parcours : De l'informatique à la création d'entreprisesMon parcours : De l'informatique à la création d'entreprises
Mon parcours : De l'informatique à la création d'entreprises
 
Plan de mise en oeuvre du PRCG2
Plan de mise en oeuvre du PRCG2Plan de mise en oeuvre du PRCG2
Plan de mise en oeuvre du PRCG2
 
Plan de mise en oeuvre du PRCG2
Plan de mise en oeuvre du PRCG2Plan de mise en oeuvre du PRCG2
Plan de mise en oeuvre du PRCG2
 
Stages 2015
Stages 2015Stages 2015
Stages 2015
 
Tsp
TspTsp
Tsp
 
Edias - Compétences des chefs de projets - support théorique - juin 2018
Edias  -  Compétences des chefs de projets -  support théorique - juin 2018Edias  -  Compétences des chefs de projets -  support théorique - juin 2018
Edias - Compétences des chefs de projets - support théorique - juin 2018
 
RAPPORT sur le regroupement des référents TRANSFER/IFIC
RAPPORT sur le regroupement des référents TRANSFER/IFIC RAPPORT sur le regroupement des référents TRANSFER/IFIC
RAPPORT sur le regroupement des référents TRANSFER/IFIC
 
salwfrarapp137.pdf
salwfrarapp137.pdfsalwfrarapp137.pdf
salwfrarapp137.pdf
 
dut src ppp projets personnel et professionnel séance 01
dut src ppp   projets personnel et professionnel  séance 01dut src ppp   projets personnel et professionnel  séance 01
dut src ppp projets personnel et professionnel séance 01
 
Echos de la reforme de septembre 2020
Echos de la reforme de septembre 2020Echos de la reforme de septembre 2020
Echos de la reforme de septembre 2020
 
L'Abes, à la croisée des chemins, texte de l'intervention de Raymond Bérard -...
L'Abes, à la croisée des chemins, texte de l'intervention de Raymond Bérard -...L'Abes, à la croisée des chemins, texte de l'intervention de Raymond Bérard -...
L'Abes, à la croisée des chemins, texte de l'intervention de Raymond Bérard -...
 
PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...PFE::Conception et développement du Back Office d'une application mobile de g...
PFE::Conception et développement du Back Office d'une application mobile de g...
 
Rapport logiciels evenement_payombo_ly
Rapport  logiciels evenement_payombo_lyRapport  logiciels evenement_payombo_ly
Rapport logiciels evenement_payombo_ly
 

More from Cédric Mouats

Restructuration d applications Java Temps réel
Restructuration d applications Java Temps réelRestructuration d applications Java Temps réel
Restructuration d applications Java Temps réel
Cédric Mouats
 

More from Cédric Mouats (19)

PRISE EN CHARGE DES CURISTES EN POST-AVC /PLACE ET MISSION DE L’AGENT THERMAL
PRISE EN CHARGE DES CURISTES EN POST-AVC /PLACE ET MISSION DE L’AGENT THERMALPRISE EN CHARGE DES CURISTES EN POST-AVC /PLACE ET MISSION DE L’AGENT THERMAL
PRISE EN CHARGE DES CURISTES EN POST-AVC /PLACE ET MISSION DE L’AGENT THERMAL
 
Prise en charge en cure thermale de personne hémiplégiques post-AVC- présenta...
Prise en charge en cure thermale de personne hémiplégiques post-AVC- présenta...Prise en charge en cure thermale de personne hémiplégiques post-AVC- présenta...
Prise en charge en cure thermale de personne hémiplégiques post-AVC- présenta...
 
Prise en charge en cure thermale de personnes hémiplégiques post-AVC
Prise en charge en cure thermale de personnes hémiplégiques post-AVCPrise en charge en cure thermale de personnes hémiplégiques post-AVC
Prise en charge en cure thermale de personnes hémiplégiques post-AVC
 
Amélioration de la performance cardiorespiratoire auprès du public adulte
Amélioration de la performance cardiorespiratoire auprès du public adulteAmélioration de la performance cardiorespiratoire auprès du public adulte
Amélioration de la performance cardiorespiratoire auprès du public adulte
 
Projet de spectacle "La Difference" par Kamel MOUATS
Projet de spectacle "La Difference" par Kamel MOUATSProjet de spectacle "La Difference" par Kamel MOUATS
Projet de spectacle "La Difference" par Kamel MOUATS
 
Ailes Musicales : projet de création d'une boite de production de spectacles ...
Ailes Musicales : projet de création d'une boite de production de spectacles ...Ailes Musicales : projet de création d'une boite de production de spectacles ...
Ailes Musicales : projet de création d'une boite de production de spectacles ...
 
Projet de scénario original : L’Exilé malgré lui / Loin des murs du front
Projet de scénario original : L’Exilé malgré lui / Loin des murs du front Projet de scénario original : L’Exilé malgré lui / Loin des murs du front
Projet de scénario original : L’Exilé malgré lui / Loin des murs du front
 
Gestion de la production de films promotionnels - Projet en bases de données
Gestion de la production de films promotionnels - Projet en bases de donnéesGestion de la production de films promotionnels - Projet en bases de données
Gestion de la production de films promotionnels - Projet en bases de données
 
Réalisation de Documenteur : Un scandale éthique dans la campagne de vaccinat...
Réalisation de Documenteur : Un scandale éthique dans la campagne de vaccinat...Réalisation de Documenteur : Un scandale éthique dans la campagne de vaccinat...
Réalisation de Documenteur : Un scandale éthique dans la campagne de vaccinat...
 
Les fichiers vidéos
Les fichiers vidéosLes fichiers vidéos
Les fichiers vidéos
 
Approximation Linéaire - Droite d ajustement au sens des moindres carrés
Approximation Linéaire  -  Droite d ajustement au sens des moindres carrésApproximation Linéaire  -  Droite d ajustement au sens des moindres carrés
Approximation Linéaire - Droite d ajustement au sens des moindres carrés
 
Dimensions artistiques du Catch : entre une discipline sportive et un spectac...
Dimensions artistiques du Catch : entre une discipline sportive et un spectac...Dimensions artistiques du Catch : entre une discipline sportive et un spectac...
Dimensions artistiques du Catch : entre une discipline sportive et un spectac...
 
Organisation de colloque scientifique - cas pratique : TRANSCOMAS
Organisation de colloque scientifique - cas pratique : TRANSCOMASOrganisation de colloque scientifique - cas pratique : TRANSCOMAS
Organisation de colloque scientifique - cas pratique : TRANSCOMAS
 
Réponse à un appel d offre
Réponse à un appel d offreRéponse à un appel d offre
Réponse à un appel d offre
 
Analyse du clip Judas de Lady Gaga
Analyse du clip Judas de Lady GagaAnalyse du clip Judas de Lady Gaga
Analyse du clip Judas de Lady Gaga
 
Restructuration d applications Java Temps réel
Restructuration d applications Java Temps réelRestructuration d applications Java Temps réel
Restructuration d applications Java Temps réel
 
Segmentation d images de documents anciens par approche texture - Mo…
Segmentation d images de documents anciens par approche texture - Mo…Segmentation d images de documents anciens par approche texture - Mo…
Segmentation d images de documents anciens par approche texture - Mo…
 
Segmentation floue d images de documents anciens par approche textur…
Segmentation floue d images de documents anciens par approche textur…Segmentation floue d images de documents anciens par approche textur…
Segmentation floue d images de documents anciens par approche textur…
 
Modes de fusion des calques
Modes de fusion des calquesModes de fusion des calques
Modes de fusion des calques
 

Refonte de site web : cas pratique - site du master INI

  • 1. Refonte du site du Master INI Compte rendu du projet RESIN Le projet RESIN (REfonte du Site Master INI) s’inscrit dans le cadre d’une nouvelle stratégie de communication valorisant le Master 2 INI se déroulant au CESS d’Epinal. Il consiste à construire une nouvelle interface Web mettant en valeur la richesse de son contenu/cursus et des profils variés des étudiants qui y sont intégrés. 2012 Master 2 INI - CESS Epinal Université de Lorraine 29/02/2012
  • 2. 2 Projet RESIN – Master INI 2011/12 Université de Lorraine CESS d’Epinal Master 2 INI 2011/ 12 Compte rendu du projet RESIN Refonte du site du Master INI
  • 3. 3 Projet RESIN – Master INI 2011/12 Sommaire page Introduction ………………………………………………………………………………………………………………… 3 Commanditaire…………………………………………………………………………………………………………… 4 Cahier des charges…………………………………………………………………………………………………….. 4 Structure fonctionnelle……………………………………………………………………………………………… 6 Propositions …………………………………………………………………………………………………………….. 6 Planification ……………………………………………………………………………………………………………… 8 Plan de travail…………………………………………………………………………………………………………… 9 Gestion de contenu…………………………………………………………………………………………. 9 Design graphique……………………………………………………………………………………………… 10 Développement………………………………………………………………………………………………… 15 Méthodologie de travail……………………………………………………………………………………………. 16 Réalisations ………………………………………………………………………………………………………………. 21 Difficultés rencontrées……………………………………………………………………………………………… 24 Conclusion………………………………………………………………………………………………………………….. 24
  • 4. 4 Projet RESIN – Master INI 2011/12 Table des matières Refonte du site du Master INI ..................................................................................................... 2 Sommaire ............................................................................................................................................ 3 1.Introduction Présentation du projet ...................................................................................... 5 2.Client Commanditaire ................................................................................................................. 6 3.Cahier des charges Commande client .................................................................................. 6 4.Structure fonctionnelle Brainstorming.................................................................................. 8 5.Propositions..................................................................................................................................... 8 5.Planification................................................................................................................................... 10 6.Plan de travail Répartition des tâches................................................................................ 11 7.Méthodologie Déroulement du travail................................................................................. 18 9.Réalisations Illustrations.......................................................................................................... 23 10.Difficultés rencontrées ........................................................................................................... 26 11.Conclusion Perspectives ........................................................................................................ 26
  • 5. 5 Projet RESIN – Master INI 2011/12 1.Introduction Présentation du projet Le projet RESIN (REfonte du Site Master INI) s’inscrit dans le cadre d’une nouvelle stratégie de communication valorisant le Master 2 INI se déroulant au CESS d’Epinal. Il consiste à construire une nouvelle interface Web mettant en valeur la richesse de son contenu/cursus et des profils variés des étudiants qui y sont intégrés. Le projet RESIN se veut innovateur en termes d’interfaçage, riche en contenu, permettant de faire connaître la spécialité auprès d’un public large (formation initiale ou continue), une vitrine promotionnelle efficace pour un diplôme reconnu à l’échelle internationale. Ce master a pour ambitions de :  favoriser le transfert des compétences entre les étudiants du master  placer les étudiants dans une situation réelle, situation de travail, notamment pour leur permettre d'appréhender le monde de l'entreprise grâce aux divers projets de cours et stages proposés. Le projet RESIN a pour objectif de rapprocher les acteurs du domaine multimédia (de la région lorraine) ouvrant la porte à la création d’un réseau de compétences et créer une dynamique de structuration opérationnelle. Il vise de fournir un portail permettant le rapprochement des entreprises spécialisées et d’apporter les conditions de développement de la compétitivité dans les domaines multimédia en contribuant à soutenir l’innovation par un encadrement directement opérationnel sur les domaines du Web, de l’audiovisuel et de la création graphique.
  • 6. 6 Projet RESIN – Master INI 2011/12 2.Client Commanditaire Client : Responsable de la formation : M. Jean Luc NOIZETTE Maître de conférences ESSTIN Université de Lorraine 2, rue Jean Lamour, Vandoeuvre Les Nancy Cedex, F-54519, France Email ESSTIN : jean-luc.noizette@esstin.uhp-nancy.fr Email UHP : Jean-Luc.Noizette@persmail.uhp-nancy.fr ---------------------------------------------------------------------------- Work : +33 (0)3 83 68 51 32 Fax ESSTIN : +33 (0)3 83 68 50 01 Cell : +33 (0)6 16 67 75 73 Fax ISYS : +33 (0)3 83 68 50 12 Secrétariat : +33 (0)3 83 68 51 21 3.Cahier des charges Commande client Le client a formulé sa commande via un cahier des charges, rédigé et validé suite aux différents échanges et entretiens avec les membres de l’équipe. En voici le descriptif des points essentiels de sa requête: a. Objectifs : mettre l’accent sur les frais d’inscription (faibles comparés à d’autres formations du même type)  Mettre en avant la pluridisciplinarité des étudiants de la formation.  Montrer la reconnaissance nationale et internationale du diplôme.  Mettre en avant l’acceptation d’étudiants venant de diverses formations et ayant des profils hétérogènes et leurs collaborations au sein de divers projets.  Mettre en avant l’accessibilité des personnes en formation continue. b. Cibles :  Futurs étudiants  Professionnels pour les propositions de stages et les éventuels recrutements.
  • 7. 7 Projet RESIN – Master INI 2011/12 c. Spécifications techniques : 1. Médias  Corriger et adapter les ressources existantes  Insérer de nouveaux contenus : plus récent (actualités sur la formation et autres informations sur l’université de Lorraine).  Etablissement de supports publicitaires pour la promotion de la formation : spot, audio, clip mettant en pratique les compétences. 2. Charte graphique. Seul l’ancien logo du master représente l’élément référence de la charte graphique: nous avions reçu l’autorisation de l’améliorer ou le modifier mais en respectant la nouvelle charte graphique définie par l’université de Lorraine. Le client a exprimé son souhait d’ajouter de la profondeur et du relief, d’adopter une approche dynamique et d’éviter le formatage. Le client demande d’insérer les productions étudiantes dans le design global du nouveau site 3. Les attentes. Une Web TV à mettre en œuvre (actualités, news, et débats réguliers). Réaliser une page d’accueil accrocheuse et dynamique. Classer les étudiants en fonctions de leurs domaines de compétences (3D, sites web… Réaliser une visite virtuelle de l’établissement (CESS Epinal) 4. Référencement : Le référencement consiste à améliorer et consolider le positionnement du site internet dans les résultats des moteurs de recherche.
  • 8. 8 Projet RESIN – Master INI 2011/12 4.Structure fonctionnelle Brainstorming Sous la direction de Monsieur Alain Gérard, une journée de brainstorming a été organisée afin de définir les différents aspects et dimensions du projet : acteurs, cibles, contenus, accès,….. La classification des différents éléments de réflexion a donné le diagramme fonctionnel du site, présenté comme suit : 5.Propositions Trois équipes de travail se sont formées afin de réfléchir sur les exigences et attentes du client. La collaboration a fini par suggérer des croquis de site pouvant répondre au cahier des charges. Nous n’avons retenu que 02 maquettes que nous avons soumises à l’intéressé. Après consultation, le client a fait son choix et a souhaité garder la maquette 01 en insistant sur ses attentes et conditions du livrable.
  • 9. 9 Projet RESIN – Master INI 2011/12 Maquette 01 : modèle tablette / aspect 3D / Relief Maquette 02 : modèle sobre / aspect 3D / Relief
  • 10. 10 Projet RESIN – Master INI 2011/12 Equipe Master 2 INI – Projet RESIN Chef de projet : Enseignant référent : M.Alain Gérard Equipe Développement Responsable : Chouissa Equipe Design Graphique Responsable : R.Sauter Equipe Contenu Responsable : P.Carle 6.Planification Une fois la maquette validée, le projet a été scindé en tâches dont chacune fut attribuée à une équipe spécialisée : Voici le déroulement chronologique prévu des tâches à réaliser, schématisé dans le diagramme de Gantt suivant (version initiale du plan de travail): NB. Des ajustements ont été introduits dans ce diagramme afin de palier aux retards et imprévus.
  • 11. 11 Projet RESIN – Master INI 2011/12 7.Plan de travail Répartition des tâches Une fois la maquette validée, le projet a été subdivisé en modules et tâches. Des équipes ont été formées et chacune affectée à un module spécifique. Les tâches ont été réparties par équipe et comment suit : 7.I Gestion de contenu : Le contenu du site web comportait en majeure quantité des médias, les réalisations des étudiants de toutes les promotions possibles. Le ton commun aux textes était important et devait cibler principalement les futurs étudiants tout en étant significatif pour les professionnels. Accueil : Un texte a été écrit pour l’accueil du site, il avait été convenu par l’ensemble de l’équipe que ce texte d’accueil ne devait être ni trop long ni trop formel afin d’entrer dans le site de manière assez dynamique. Etudiants, localisation : De petits textes de présentation ont également été écrits. Formation : Les professeurs ont été sollicités pour cette partie, l’équipe a tenté de les relancer à plusieurs reprises, pourtant seuls cinq nous ont fourni le contenu nécessaire. Les informations relatives aux inscriptions ont été actualisées par rapport à l’année dernière et les textes ont été réécris en gardant le ton commun à tout le site. Réalisations : Chacune des catégories de réalisations a été alimentée par les vidéos et projets de l’année en cours ainsi que des années précédentes (dans la mesure de ce qui était disponible). La plupart de ces projets a été mise en ligne via Vimeo, un compte Vimeo et une adresse mail ont donc été créés pour le master INI. Chacune des catégories est aussi introduite par un petit texte de présentation. Web TV : Le concept de la Web TV n’était pas un objectif principal, nous voulions seulement amorcer une idée pour les promotions suivantes et éventuellement fournir une démo. Le contenu n’était pas clair non plus jusqu’à l’idée de monter une télé –réalité du master INI. La télé-réalité devait pouvoir retranscrire de manière humoristique le déroulement de la vie et du travail d’équipe au sein du master.
  • 12. 12 Projet RESIN – Master INI 2011/12 Nous avons commencé le tournage très tardivement mais nous avons procédé par étapes :  Dans un premier temps, nous avons filmé les locaux vides et fixé les noms des salles.  Ensuite nous avons filmé des scènes de travail sur 3 jours et nous avons mis en place une forme de confessionnal appelé le « crachoir ». Devant le fond bleu nous avons filmé chaque étudiant afin d’y incruster un faux décor dans l’esprit télé-réalité. Les séances de travail étaient majoritairement filmées en caméra fixe, ce qui permettait d’oublier la caméra et d’obtenir des images réalistes.  Le montage s’est fait rapidement au fur et à mesure que les rushes étaient tournés. 7.2.Equipe Design graphique Le projet dans lequel nous avons collaboré s’inscrit dans le cadre d’une refonte totale du site web du Master INI. En ce qui concerne l’équipe Design graphique, il s’agissait de créer tous les éléments graphiques et ergonomiques qui composent le nouveau site web. Nous avons donc répartis les tâches à chacun des membres de l’équipe « Design » suivant une hiérarchie d’entreprise. En effet, un coordinateur établit dans un premier temps les besoins avec les autres équipes (L’équipe « Développement » et l’équipe « Contenu ») puis transmet ces tâches aux différentes personnes du groupe suivant son domaine de compétences. De plus, afin de correspondre au mieux aux attentes du client, nous avons utilisé la méthode AGIL qui permet de travailler en interaction tout au long du projet avec le client. Composition de l’équipe : Romain Sauter : Coordinateur Céline Bernard : Conception des boutons du menu Benoit Hays : Conception de maquettes Ornella nTaloula : Conception de maquettes Kamel Mouats : Conception d’images 2D/3D Hernan Perez : Conception d’images 2D/3D Objectifs : Les contraintes initiales fournis par le client sont les suivantes : Les tâches réalisées : Conception de maquettes :
  • 13. 13 Projet RESIN – Master INI 2011/12 Pour être au plus proche des attentes du client (méthode Agile), nous avons conçu dans un premier temps avec l’ensemble des étudiants de la promotion INI, 3 maquettes graphiques différentes. Ces dernières nous ont permis de proposer un large choix au client avec des tons très différents. Cette étape préalable nous a permis à l’équipe graphique par la suite de concevoir 2 nouvelles maquettes retraçant l’ensemble des idées proposées dans les 3 premières et validées par le client. Concernant la page d’accueil, le client désirait garder un look tablette, des boutons de menu simples et en perspectives, ainsi qu’un slideshow proposant des images de réalisations des étudiants. Conception des pages du site web : Structure du site web: Page d’accueil Forum Formation Etudiants Professionnels Réalisations Liste des étudiants actuels (Curseurs sélectionnable) Nom, Prénom, Formation,… Anciens Etudiants Graphisme Réalité augmentée Web Design 3D Vidéos -Contenu -Débouchés -CESS Carrousel (Photos et vidéos)
  • 14. 14 Projet RESIN – Master INI 2011/12 Après validation du style des premières maquettes par le client, nous avons conçu les pages en fonction de cette organisation. Nous avons alors répartis les sections à réalisées aux membres du groupe « Design » pour concevoir chaque sous partie du site web. Maquette Section «Formation» : Pour chaque page de cette section nous avons cherché les plus belles images de réalisations étudiantes afin d’illustrer et de montrer ce qu’il est possible de faire dans notre formation.
  • 15. 15 Projet RESIN – Master INI 2011/12 Maquette Section «Etudiant» :
  • 16. 16 Projet RESIN – Master INI 2011/12 Maquette Section « Espace Professionnels» :
  • 17. 17 Projet RESIN – Master INI 2011/12 7.3.Equipe Développement Outils utilisés : Système de gestion de contenu : Joomla Logiciel FTP : FileZilla : pour le transfert de fichiers sur un serveur web Modules Joomla Editeur de texte : langage PHP, HTML/CSS FONCTIONNALITES Nous avons expliqué précédemment les raisons qui nous ont poussées à utiliser le CMS Joomla. Désormais, il est temps d’aborder les fonctionnalités développées. 1. Le template Une fois Joomla installé sur un serveur web ou en local, une des premières étapes est de concevoir un template (ou thème graphique), autrement dit de définir l’aspect visuel du site, et le positionnement des différents blocs et autres composants. Il est possible d’utiliser des thèmes par défaut ou en télécharger sur Internet. Cependant, afin d’être le plus fidèle possible avec la maquette validée par le client, nous avons dû réaliser un template entier à partir d’un existant par défaut. Pour le modifier, deux solutions s’offrent à nous. La première utilise l’administration Joomla, mais les changements ne sont pas pratiques surtout si l’on fait des erreurs. La seconde, la meilleure, est d’éditer les feuilles de style directement sur le logiciel FTP (tel que FileZilla). Pour information, un logiciel FTP offre la possibilité de déposer des fichiers sur un serveur web (via le protocole FTP : File Protocol Transfert), et donc de publier en ligne son propre site web. C’est pour cette raison d’ailleurs que nous acheté un hébergement web pour permettre à l’équipe de projet, mais aussi au client, d’apercevoir les changements effectués en temps réel. D’un point de vue technique, pour créer un template reconnu par Joomla, il faut installer une archive (compressée) contenant différents fichiers (voir annexe). On retrouve ainsi : - index.php : fichier contenant la structure du site. Il est possible de lui rajouter de nouveaux blocs (div ou class en css), et de leur spécifier par exemple si on veut les voir sur la page d’accueil exclusivement ou sur également sur les autres. - templateDetails.xml : sert à l’installation du template et à ses paramètres - index.html : feuille vierge qui sert de support à la génération de la page - favicon.ico : icône du site - template_thumbnail.png : miniature de prévisualisation du site dans l’administration - css/nomFichier.css : pilote les feuilles du style du site.
  • 18. 18 Projet RESIN – Master INI 2011/12 2. Les modules La force de Joomla vient de sa force communautaire, et des nombreuses « fonctions avancées » développées. On les appelle des modules…. 3. La partie administration Encore une fois, le choix du CMS Joomla n’a pas été pris à la légère. En effet, l’un des objectifs de la refonte du site du Master INI est de le rendre dynamique avec des mises à jour régulières. Par conséquent, il est nécessaire de pouvoir ajouter du nouveau contenu de façon simple et rapide. L’administration de Joomla est faite pour ça. Malgré un temps d’adaptation à cet environnement riche et pas toujours trivial, elle permet la gestion des droits d’utilisateurs, en leur donnant par exemple le droit d’écrire des articles dans certaines rubriques tout en interdisant d’installer de nouveaux modules ou de modifier le thème graphique actuel. 8.Méthodologie Déroulement du travail Dans ce projet, nous étions ramenés à réaliser différentes tâches et missions et nous avons adapté une méthodologie de travail spécifique pour chaque mission. Maquettes Au départ du projet la classe a été divisée en 3, pour essayer de trouver de bonnes idées pour la maquette du master. Ces groupes ont été constitués au hasard et étaient par conséquent très hétérogènes. Cet exercice avait pour but de laisser place à la créativité des étudiants. Le client nous a donné peu de conditions pour le graphismes. Nous avions beaucoup de liberté mais il fallait montrer que ce master est maitre en 3D. Donc essayer de mettre en place un design en relief et dynamique. Le nom du projet se nomme RESIN (REfonte du Site INi) donc les groupes RESIN1, 2 et 3. Voici les 3 maquettes qui en sont ressorties :
  • 19. 19 Projet RESIN – Master INI 2011/12 Groupe Resin 1 Groupe Resin 2 Groupe Resin 3
  • 20. 20 Projet RESIN – Master INI 2011/12 Nous avons remarqué que les maquettes sont très différentes. Le groupe RESIN 3 s’est plus attardé sur la mise en place du site au point de vue ergonomique que sur le graphisme à proprement parlé. Les 2 autres parties se sont penchées sur un design possible pour le futur site. Dans les 3 maquettes le client nous a donné les points positifs et négatifs. Sur la maquette de RESIN 1 il a bien aimé le style « tablette » et le gros SlideShow en haut de la page. Par contre n’a pas aimé les boutons du menu, le nouveau logo proposé par l’équipe et donc la couleur qui ne correspond pas au logo actuel du master. L’équipe RESIN 2 avait quand à elle présenté une maquette beaucoup plus complète avec différentes pages : « accueil », « étudiantes », « formation », « réalisations »… Le client a bien aimé le style propre, par contre il n’a pas bien réussi à voir le principe graphique du gros cube fait en 2D simulation 3D. Il n’a pas aimé non plus le nouveau logo proposé. L’aspect ergonomique du 3ème groupe a beaucoup plus au client de par leurs idées. Notamment le SlideShow avec les effets de calques. Par contre niveau graphique il n’y avait rien à en retirer. Le résumé de cet exercice nous a apporté beaucoup. Tout d’abord le client n’a pas été emballé par les propositions de nouvelle identité visuelle Donc une première consigne : de garder le logo actuel du site, donc faire le site avec ses contraintes graphiques. Ensuite un SlideShow est intéressant pour représenter le savoir faire des étudiants du master. Ils permettront d’avoir une manière plus interactive d’accéder au contenu du site. La maquette de RESIN 1 est gardé principalement mais y intégrer les points positifs des autres sites. Après la présentation des graphismes, la classe s’est divisée en 3 parties plus homogènes. Il y a désormais la partie Développement, la partie Graphisme et la partie Contenu. Chacune des parties se devait de faire le nécessaire pour avancer dans sa partie, mais une collaboration était nécessaire pour le bon avancement du projet.
  • 21. 21 Projet RESIN – Master INI 2011/12 L’équipe Design graphique, se devait de créer tous les éléments graphiques et ergonomiques qui composent le nouveau site web. Nous avons donc répartis les tâches à chacun des membres de l’équipe « Design » suivant une hiérarchie d’entreprise. En effet, un coordinateur établis dans un premier temps les besoins avec les autres équipes (L’équipe « Développement » et l’équipe « Contenu ») puis transmet ces tâches aux différentes personnes du groupe suivant son domaine de compétences. De plus afin de correspondre au mieux aux attentes du client, nous avons utilisé la méthode AGIL qui permet de travailler en interaction tout au long du projet avec le client. La partie graphique s’est donc penchée sur l’évolution d’une maquette qui combinerait le besoin du master et l’envi du client. L’équipe graphique s’est alors divisée en 2. Un petit groupe a essayé d’améliorer la maquette graphique de RESIN 1, alors que les autres ont essayé de créer rapidement une nouvelle maquette qui reprendrait le principe de la tablette. Maquette de RESIN 1 améliorée Maquette « tablette » proposée A ce moment là le client a choisi clairement la maquette RESIN 1 amélioré. Le gros changement à effectuer se trouve dans le menu. Il fallait reprendre les icônes de la maquette « tablette ».
  • 22. 22 Projet RESIN – Master INI 2011/12 Les icônes du menu ont beaucoup changé parce que le client ne voyait pas le rapport entre les icônes choisies et les catégories. Voici plusieurs icônes proposés pour les menus : Je pense que les logos ne sont pas encore parfaits. Il faudrait peut-être en faire en 3D avec une forme plus originale. C’est une possibilité future au site. La maquette finale du site est la suivante : Dans ce graphisme final nous retrouvons l’aspect tablette, un SlideShow qui se veut représentatif de la formation et un site en accord avec la charte graphique du logo INI. Il y a eu un peu de retard dans le graphisme en vu des nombreux changements effectué à la maquette initiale, mais nous avons à la fin une maquette plutôt design, avec du relief (la tablette) et du dynamisme (grâce au SlideShow).
  • 23. 23 Projet RESIN – Master INI 2011/12 9.Réalisations Illustrations Aspect graphique Arborescence Le site devant se détacher des autres sites, il fallait donc trouver une arborescence un peu « originale ». Nous avons décidé de nous appuyer sur le SlideShow pour créer un menu original. En effet celui-ci nous permet directement d’accéder à des pages spécifiques du site. Explication des différentes images : Cette image nous amènera vers une page d’accueil avec un texte accrocheur. Sur cette image nous pouvons observer en arrière plan le « N » faisant référence au logo du master. Nous y avons également placé le logo de l’université de Lorraine. Cette image est censé simuler une image vue du ciel au dessus des immeubles. Pour améliorer cette image il y aura la possibilité de rajouter des fenêtres aux immeubles ou d’améliorer encore plus l’effet de relief. Le lien vers la partie Web Design se doit d’être accrocheur puisque ce sont ces réalisations qui vont attirer de nouveaux élèves. Pour cette image nous avons décidé d’utiliser plusieurs morceaux de CV réalisés par les étudiants du master. Ces images n’ont pas été choisies au hasard puisque nous pouvons apercevoir des logos et le style graphique de plusieurs CV.
  • 24. 24 Projet RESIN – Master INI 2011/12 La voiture a été réalisée par un étudiant. Nous pouvons, grâce à elle, constater à quel niveau de compétences ce master peut nous amener en modélisation 3D. Cette image possède un lien qui nous amène vers la partie Réalisation 3D du site. Les autres images sont des créations d’étudiants qui montrent certaines de leurs créations 2D et 3D. Il est possible de faire des montages pour en associer plusieurs sur une même image du SlideShow (un peu de la manière de l’image pour le WebDesign par exemple) Le site propose d’aller sur un « Forum » et sur une « WebTV ». Les boutons sont toujours affichés sur les pages sous le menu. Le site dispose d’un fil d’Ariane pour que l’utilisateur se retrouve plus facilement dans le site. Les pages déjà traversés seront représentés par des lien pour une navigation plus efficace. Le client nous a demandé un site original dans son ergonomie et son arborescence, mais nous avons jugé qu’un menu reste indispensable. Les internautes sont habitués, et savent exactement comment cela marche. Le site est fait pour les futurs étudiants, les professeurs et les professionnels qui cherchent des étudiants. Il faut par conséquent que l’information puisse vite être trouvée. S’ils commencent à se perdre dans une « nouvelle espèce » de menu, ils ne voudront peut-être pas insister. Les pages de contact et de plan du site sont toujours présentes en bas de page du site. Disposition des éléments L’objectif du site est de marquer les personnes qui viennent sur le site, il fallait donc mettre des éléments en évidence. C’est le cas du SlideShow. Celui-ci nous propose directement des images propres à la formation et se doit d’être un point fort de la formation. Il est donc logique de l’avoir mit en avant. Lorsque nous arrivons sur la page, il arrive à peu près au centre de la page.
  • 25. 25 Projet RESIN – Master INI 2011/12 Dans l’entête ce sont les références importantes à l’école qui y sont placés, comme le logo de l’Université de Lorraine et le logo du master. En plaçant les éléments tout en haut de la page, nous sommes sûr que les visiteurs du site seront verront ces informations. Le menu et le contenu du site sont placés en dessous du SlideShow dans la logique d’un site. La particularité du contenu est qu’il sera placé dans une fausse tablette avec quelques créations d’étudiants que l’on doit retrouver dans le site. Ceci démontre que le master connait et maitrise les dernières technologies. L’espace contact sera quand à lui en bas de page. L’internaute sera obligé de parcourir la page avant d’aller voir les contacts. Au départ la partie Contact devait faire parti du « footer » (le bas de page) et devait sortir bu bas de page mais la partie développement n’as pas eu le temps nécessaire d’étudier la manière de le faire.
  • 26. 26 Projet RESIN – Master INI 2011/12 10.Difficultés rencontrées En dépit de notre organisation et implication dans la réalisation de ce projet, nous étions confrontés aux difficultés suivantes :  Instabilité de la maquette pour une longue durée  Contrainte de temps (cours/problème d’organisation)  La technique et la Maîtrise des différents outils de développement et la sélection des médias à insérer. 11.Conclusion Perspectives Nous remercions M.Noizette et M.Sauter de nous avoir fait confiance en nous accordant l’opportunité de réaliser ce projet à travers lequel nous avons exploité notre savoir faire et nos acquis en terme de gestion de projet. Nous avons participé à l’élaboration du plan d’actions et avons proposé plusieurs réalisations développées dans une ambiance collaborative et selon les méthodes agiles (corrections incrémentales tout le long des réalisations). Nous avons exploité tout notre savoir faire et avons trouvé dans l’hétérogénéité des profils des acteurs de ce projet une réelle richesse humaine et technique.