cahier charges wpo - wordpress.com · pas explicatifs, ils se limiteront à un titre et...

Objectifs : Ce document formule le besoin en

ses différentes caractéristiques

du projet.

Sommaire : 1. Présentation générale du projet

2. Le produit

3. Ressources et moyens

4. Exploitation du produit

5. Chronogramme

Chloé AUST Gauthier DUBOIS Julien CAPON Stéphane SCHOORENS

Cahier des charges Cahier des charges Cahier des charges Cahier des charges

Faculté des sciences 33 Rue Saint Leu, 80000 Amiens

e le besoin en détaillant les services rendus par le produit

ses différentes caractéristiques techniques et fonctionnelles. C’est le fi

Présentation générale du projet

Ressources et moyens

produit

25/11/2013 Module Gestion de projet web

Cahier des charges Cahier des charges Cahier des charges Cahier des charges du projet WPOdu projet WPOdu projet WPOdu projet WPO

culté des sciences – IUP Miage

3 Rue Saint Leu, 80000 Amiens

détaillant les services rendus par le produit,

techniques et fonctionnelles. C’est le fil conducteur

/2013 - Version 1.0 Gestion de projet web

du projet WPOdu projet WPOdu projet WPOdu projet WPO

WPO / wpomiage.wordpress.com

2

VersionsVersionsVersionsVersions Date et nature de la mise à jourDate et nature de la mise à jourDate et nature de la mise à jourDate et nature de la mise à jour

V 1.0 25/11/2013: Première livraison, version initiale


3

1.1.1.1. Présentation générale du projetPrésentation générale du projetPrésentation générale du projetPrésentation générale du projet

1.1.1.1.1.1.1.1. Spécifications du commanditaireSpécifications du commanditaireSpécifications du commanditaireSpécifications du commanditaire

Le client, le Service Patrimoine d’Amiens, nous demande de réaliser le projet suivant : Concevoir un jeu à but pédagogique basé sur l'exploitation du portail Sud de la cathédrale d'Amiens. Ce jeu doit s'inscrire dans le programme « e-Cathédr@le », qui vise l'élaboration et l'exploitation d'une maquette numérique de la cathédrale d'Amiens.

1.2. Les acteurs du projet1.2. Les acteurs du projet1.2. Les acteurs du projet1.2. Les acteurs du projet et leurs responsabilitéset leurs responsabilitéset leurs responsabilitéset leurs responsabilités

Les principaux acteurs du projet sont les suivants :

- Dominique Leclet : Représentante client et Chef de projet sénior - Aust Chloé : Chef de projet junior - Capon Julien : Responsable du Journal de bord - Dubois Gauthier : Chargé de communication/graphisme - Schoorens Stéphane : Responsable de documentation

Le développement du jeu sera réalisé par les quatre membres du groupe WPO.

2.2.2.2. LeLeLeLe produitproduitproduitproduit

2.1.2.1.2.1.2.1. Les oLes oLes oLes objectifsbjectifsbjectifsbjectifs

Le jeu proposé doit avant tout permettre l'accès à la culture et au patrimoine de la cathédrale. Pour se faire, il devra être interactif, pédagogique et ludique permettant à ses utilisateurs de comprendre la construction du portail Sud de la cathédrale d’Amiens. Il s’agit d’offrir à ces derniers la possibilité de découvrir un sujet en conciliant le divertissement et l'apport de connaissances tout en leur permettant de les apprécier et de les mémoriser facilement.


4

2.2.2.2.2.2.2.2. Le pLe pLe pLe public cible et parallèleublic cible et parallèleublic cible et parallèleublic cible et parallèle

Le jeu à développer est destiné à un jeune public (enfants de 11 à 13 ans) mais également à un public qui ne peut accéder physiquement à l'édifice.

2.3.2.3.2.3.2.3. Son architectureSon architectureSon architectureSon architecture

Le jeu se décline en cinq passages qui comptent chacun plusieurs niveaux de difficulté. Le projet consiste à développer les passages 2 et 3 de façon autonome, le passage 1 étant déjà opérationnel. Pour chaque passage, il y aura une page d’accueil, une page « menu » permettant de se diriger vers les différents niveaux de difficulté (très facile, facile, difficile, complexe) et une page par niveau, soit 6 pages à développer par passage.

Le passage 2, « Jeu des 7 vierges », est un jeu où les utilisateurs doivent retrouver différentes erreurs dans une image représentant le portail Sud de la cathédrale d’Amiens. Au niveau très facile, la détection des 7 erreurs sur l’image fausse sera facilitée avec des zones éclairées sur l’image et l’utilisateur verra l’image correcte en continu. Au niveau facile, des indices explicatifs accompagnés d’un texte permettront de trouver les erreurs sur les 7 images (une image = une erreur) et l’utilisateur verra l’image correcte en continu. Au niveau difficile, les indices ne seront pas explicatifs, ils se limiteront à un titre et l’utilisateur verra l’image correcte en un certains nombre de secondes avant qu’elle ne disparaisse. Au niveau complexe, une image vraie se glissera parmi 6 images fausses en carrousel, le joueur devra la trouver.

Le passage 3, « A toi de colorier », est un jeu où les utilisateurs doivent

coloriser, à l’aide d’une palette de couleur, une image du portail Sud de la cathédrale d’Amiens décomposée en zones. Le joueur devra prendre en compte les couleurs interdites au Moyen-âge. Le niveau très facile est surtout explicatif : on apporte des informations à l’utilisateur sur les couleurs utilisées au Moyen-âge et celles interdites. Au niveau facile, le joueur a des informations sur les couleurs en déplaçant la souris sur l’image de la vierge. Au niveau difficile, le joueur doit choisir si une couleur est la bonne en faisant attention aux couleurs interdites. Au niveau complexe, l’utilisateur choisit parmi une palette de couleurs et recolore l’image.

Une fois qu’un niveau est terminé, un message propose au joueur de

retourner à la page « menu » et le félicite de sa réussite ;

2.4.2.4.2.4.2.4. La typologie des informations, leur nature et La typologie des informations, leur nature et La typologie des informations, leur nature et La typologie des informations, leur nature et

leur qualitéleur qualitéleur qualitéleur qualité


5

La plupart des ressources sont fournies par le client que se soit les informations pour les passages du jeu ou les éléments graphiques.

Pour le passage 2, les informations sont principalement visuelles (image correcte des 7 vierges et 21 images retouchées) et textuelles (7 indices et explications). Il sera nécessaire de créer 21 images retouchées à partir de l’image correcte des 7 vierges : une image avec 7 erreurs pour le niveau très facile, 14 images avec une seule erreur pour les niveaux facile et difficile et 6 images fausses pour le niveau complexe.

Pour le passage 3, les informations sont aussi visuelles (palettes de couleurs, image à coloriser décomposée en zones) et textuelles (explications sur les couleurs). Concernant les palettes de couleurs, il faudra déterminer les couleurs utilisées au Moyen-âge et celles qui étaient interdites.

D’un point de vue technique, le logiciel de traitement d’image utilisé pour retoucher les différentes images sera Adobe Photoshop CS6 du fait de ses nombreuses fonctionnalités.

2.5.2.5.2.5.2.5. Orientation graphiques et ergonomiquesOrientation graphiques et ergonomiquesOrientation graphiques et ergonomiquesOrientation graphiques et ergonomiques

La majorité des éléments graphiques sont fournis par le commanditaire : boutons, bannière, personnage, nuanciers, polices d’écriture… Toutefois, certaines opérations sur ces éléments vont devoir être effectuées par les membres du groupe telles que : modification du personnage en fonction du passage (ajout d’une loupe et d’un chapeau pour le passage 2, ajout d’un pinceau et d’une palette de peintre pour le passage 3, changement de la couleur de ses vêtements) ou encore réalisation des boutons supplémentaires s’il y a besoin.

D’un point de vue technique, le logiciel de traitement d’image utilisé pour

modifier ou créer les éléments graphiques cités précédemment sera Adobe Illustrator CS6 du fait de ses nombreuses possibilités graphiques.

Concernant l’ergonomie du jeu, l’interface graphique doit être similaire à celle du Passage 1 donnée par le client comme sur les images à la page suivante. L’interface est simple et épurée de façon à avoir une ergonomie qui facilite l’utilisation du jeu aux différents publics visés.

Page d’accueil d’un passage :


6

Page pour se diriger vers les différents niveaux de difficulté d’un passage :

Page correspondant au jeu pour un niveau choisi d’un passage :


2.6.2.6.2.6.2.6. Structuration du siteStructuration du siteStructuration du siteStructuration du site

Voici la structure du Passage 2


Structuration du siteStructuration du siteStructuration du siteStructuration du site et story boardet story boardet story boardet story board

Voici la structure du Passage 2 - « Jeu des 7 vierges » :

7

et story boardet story boardet story boardet story board


Voici le story board associé au Passage 2 croissant de difficulté : du niveau très facile au niveau complexe)


Voici le story board associé au Passage 2 - « Jeu des 7 viergesdu niveau très facile au niveau complexe) :

8

Jeu des 7 vierges » (par ordre



9


Voici la structure du Passage 3


Voici la structure du Passage 3 - « A toi de colorier » :

10


Voici le story board associé au Passage 3 croissant de difficulté : du niveau très facile au niveau complexe)


Voici le story board associé au Passage 3 - « Jeu des 7 viergesniveau très facile au niveau complexe) :

11

Jeu des 7 vierges » (par ordre



12


D’un point de vue technique, le logiciel utilisé pour la réalisation des différentes pages du story board est Balsamiq Mockups car il permet de réaliser des interfaces simplifiées de manière à se

2.7.2.7.2.7.2.7. Choix techniquesChoix techniquesChoix techniquesChoix techniques

Concernant les choix techniques, le jeu attendu sera développé sous la forme d’une application web multiplateforme avec les

• HTML5 : C’est un langage de balisage qui permde mettre en forme le contenu des pages webmultimédias en respectant une hiérarchisation précise. Le langage comprend également une couche application avec de nombreuses APIlangage de développement de responsive design afin d'adapter le différents terminaux (moniteur, tablette, smartphone

• CSS3 : Les feuilles de plusieurs éléments d’une page


D’un point de vue technique, le logiciel utilisé pour la réalisation des différentes pages du story board est Balsamiq Mockups car il permet de réaliser des

plifiées de manière à se représenter les différentes pages à coder

Choix techniquesChoix techniquesChoix techniquesChoix techniques

Concernant les choix techniques, le jeu attendu sera développé sous la forme d’une application web multiplateforme avec les technologies suivantes

: C’est un langage de balisage qui permet de structurer sémantiquement,de mettre en forme le contenu des pages web et d’inclure des ressources multimédias en respectant une hiérarchisation précise. Le langage comprend également une couche application avec de nombreuses API. De plus, il s’agit langage de développement web le plus utilisé de nos jours et qui intègre la notion de responsive design afin d'adapter le jeu aux différentes tailles d'écran et aux

(moniteur, tablette, smartphone...). feuilles de style permettent de définir des règles appliquées à un ou

éléments d’une page HTML. Ces règles portent sur le positionnement,

13

D’un point de vue technique, le logiciel utilisé pour la réalisation des différentes pages du story board est Balsamiq Mockups car il permet de réaliser des

représenter les différentes pages à coder.

Concernant les choix techniques, le jeu attendu sera développé sous la forme es suivantes:

de structurer sémantiquement, d’inclure des ressources

multimédias en respectant une hiérarchisation précise. Le langage comprend De plus, il s’agit du

eb le plus utilisé de nos jours et qui intègre la notion aux différentes tailles d'écran et aux

style permettent de définir des règles appliquées à un ou HTML. Ces règles portent sur le positionnement,


14

l'alignement, les polices de caractères, les couleurs, les marges et espacements, les bordures, les images de fond, etc... Le CSS3 est complémentaire du langage HTML5.

• JavaScript : C'est un langage de script principalement utilisé dans les pages HTML. A l'opposé des langages serveurs, JavaScript est exécuté sur l'ordinateur de l'utilisateur par le navigateur. Ainsi, ce langage permet une interaction avec le joueur en fonction de ses actions (lors du passage de la souris au-dessus d'un élément particulier par exemple). Si nécessaire, JQuery qui est une bibliothèque JavaScript libre simplifiée portant sur l'interaction entre JavaScript (comprenant Ajax) et HTML, pourra être utilisé en complément.

3.3.3.3. Ressources et moyensRessources et moyensRessources et moyensRessources et moyens

3.1.3.1.3.1.3.1. Ressources humaines et charges de travailRessources humaines et charges de travailRessources humaines et charges de travailRessources humaines et charges de travail

L’équipe de développement du jeu est composé des quatre membres du groupe projet WPO : Aust Chloé, Capon Julien, Dubois Gauthier, Schoorens Stéphane.

A propos de la charge de travail, elle sera équivalente pour les quatre développeurs cités précédemment. Le temps de réalisation du produit est d’approximativement 20h par personne, réparties sur les séances de TD prévues à cet effet. De plus, chaque membre du groupe devra se former individuellement et de manière autonome aux nouvelles technologies utilisées, HTML5 notamment.

3.2.3.2.3.2.3.2. Ressources matériellesRessources matériellesRessources matériellesRessources matérielles et logicielleset logicielleset logicielleset logicielles

La réalisation du produit sera effectuée sur les ordinateurs personnels des quatre membres du groupe dotés des différents outils nécessaires (logiciels de traitement d’image, outils pour le développement web, navigateurs et plugins). La mise en commun des informations se fera au moyen d’internet par échanges de mails, via le site de partage dropbox ou encore par téléphone portable ainsi que lors de nos bilans de séances et réunions inter-séances.

4.4.4.4. Exploitation du produitExploitation du produitExploitation du produitExploitation du produit


15

Concernant les droits, l’ensemble des images, des éléments graphiques ainsi que les textes et idées émises sur le site sont la propriété du client. Une notice d’utilisation ainsi qu’une présentation Power Point pourront être livrés avec le produit au moment de la dernière étape MAETIC dans le but de faciliter l’usage du jeu par les futurs joueurs. Toutefois, aucune action publicitaire n’est prévue pour le produit de la part du groupe WPO.

5.5.5.5. ChronogrammeChronogrammeChronogrammeChronogramme

5.1.5.1.5.1.5.1. Découpage du projet et livrablesDécoupage du projet et livrablesDécoupage du projet et livrablesDécoupage du projet et livrables

Le jeu se décompose en deux principaux livrables à fournir au cours de l’étape de programmation qui sont les deux passages opérationnels. Pour chaque passage, il faut développer les pages suivantes :

• une page d’accueil • une page permettant de choisir un niveau de difficulté • une page de jeu par niveau de difficulté (soit 4 pages)

Il y a donc 10 pages web à réaliser (5 pages par passage) pour rendre un produit complet et fonctionnel répondant aux exigences du client.

5.2.5.2.5.2.5.2. Planning de réalisationPlanning de réalisationPlanning de réalisationPlanning de réalisation

Se référer au macro-planning du projet ainsi qu’au micro-planning décrivant plus précisément l’étape de réalisation.

A noter qu’après chaque phase de développement, une phase d’évaluation/de tests sera effectuée afin de corriger les erreurs survenues au cours de la réalisation du livrable.

Phase Echéances approximatives

Développement mi-novembre 2013 à début janvier 2014 (séances 5 à 8)

Tests début janvier à mi-janvier 2014 (séance 9)

Livraison mi-janvier 2014 (séance 10)

cahier charges wpo - wordpress.com · pas explicatifs, ils se limiteront à un titre et...

Documents