1

Description du projetConception d’Applications pour le web et les mobiles

(en Situation de Handicap, cf. CAMASH) Jean-Paul Stromboni

MAM5,SI5, Master IFI, séance n°2, septembre 2014

Objectif : concevoir une application multimédia interactive accessible en situation de handicap et exécutable dans un

navigateur web ou les mobiles Android

2

Cahier des charges du projet CAMASH

• Concevoir et produire un jeu vidéo accessible en situation de handicap et exécutable ou téléchargeable par un navigateur web.

• Les contraintes de réalisation :– En groupes de 2 à 3 élèves

– En quatre semaines de développement

– Constitution et validation d’un dossier de conception

– Flash et ActionScript, ou Html5, ou Android … à discuter

– Exécutable dans un navigateur web (ou à la rigueur téléchargeable) ou sur une tablette ou mobile Android

• Contrainte de choix du sujet:– jeu pédagogique pour handicap intellectuel,

– Choisi sur la liste élaborée par Isabelle COLAS et al. pour la classe spécialisée de l’IME Les Hirondelles à BIOT (Croix Rouge Française)

– Ou inspiré de cette liste (à faire valider par Isabelle)

3

Semaine 2 et 3 : l’idée proposée

• Proposer un projet de jeu vidéo pédagogique précisant :– Les groupes de projet (2 à 3 élèves) sont constitués dés la semaine 2

– Le ou les jeux retenus sur la liste, ou le jeu proposé hors de la liste,

– Le public visé et l’objectif pédagogique du jeu,

– Le gameplay, les couplages entre joueur(s) et univers du jeu : • les buts poursuivis par le joueur, • les règles à respecter, • les moyens d’action du joueur

– La technologie utilisée : Flash et ActionScript, ou Html5, ou … ?

• Constituer un dossier de conception, qui devra être complété et

validé semaine 3, avant le début de la mise en œuvre

4

Semaine 3 : faire valider le dossier de conception

• Le dossier de conception précisera :– Le sujet retenu (objectifs, gameplay, précédents, langage, …)

– L’implémentation prévue :• La structure de l’application en étapes ou parties (3 à 5 étapes)• Les storyboards (un pour décrire chaque étape ou scène clé)• Les procédés utilisés pour assurer l’attrait et l’efficacité du logiciel

• Les composants nécessaires pour construire chaque étape du jeu• Le planning prévisionnel de mise en œuvre en quatre semaines

Semaines 4, 5, 6 et 7 : mise en œuvre• Début de mise en œuvre après validation du dossier de conception• Semaines 4, 5, 6 et 7 : suivi hebdomadaire de l’avancement, collaboration avec l’IME proche (Isabelle Colas:

Isabelle.Colas@croix-rouge.fr)• test semaine 6 ou 7 avec Isabelle Colas• Démonstration finale et livraison avec les élèves de l’IME semaine 8

5

Semaine 8 : démonstration et livraison du projet

• Démonstration et test de chaque projet avec les élèves de l’IME, on établira un bilan de la démonstration à rendre pour chaque projet.

• Livraison d’un dossier compressé contenant un index.html permettant :– D’exécuter le projet dans une page html, Flash Action Script, ou html5,

– les modalités de livraison restent à préciser pour les projets ‘Android’

– D’accéder au source du projet,

– D’accéder à sa notice (utilisation, explications et commentaires sur le projet, en pdf ou en html)

– D’accéder (en pdf) • Au dossier de conception livré semaine 3• À la recherche individuelle sur le thème du cours• Le bilan de la démonstration finale

6

Story board

• On en trouve dans la conception des films, des BD, des séquences de publicité, des jeux vidéos … (chercher sur la toile)

• Pour chaque scène importante du scénario, le story board indique :– Un croquis de la scène : disposition, composants, couleurs, textes,

boutons, …

– Les informations de mise en scène : scénario, évènements, navigation, fonctionnalités, évolution, …

• Une étape contient une ou plusieurs scènes-clés

Croquis

Infos mise en scène :disposition,Composants,Fonctionnalités,Évolution,Ambiance sonore,Évènements,

…

7

Liens utiles, références, à compléter

1. http://www.floc-multimedia.com/, site de jeux RIP, voir les démos ‘Logico Floc’ et ‘Bouge avec Floc’

2. http://www.ics.forth.gr/hci/ua-games, site du labo Forth, avec ses ua-games, dont Terrestrial Invaders

3. http://www.timgames.org/mudsplat, site de l’équipe Tim (Mudsplat)

4. Labo HaNT, à Polytech’Tours, cf. Thèse d’Alexis Sepchat

5. Thèse CNAM de Thomas Gaudy, juillet 2008

6. http://fa1ckg.free.fr/, site de jeux pour DV

7. http://www.igda.org/accessibility/ , site International Game Developer Association, GA-SIG, Game Accessibility Group, avec son livre blanc pour l’accessibilité

8. Le livre blanc du W3C

9. AudioGameMaker, un outil pour créer des jeux audio

10.… à vous d’en rajouter dans votre recherche personnelle

8

Structure de l’application

• Graphe des étapes du jeu (scènes clés) avec les transitions entre étapes :

accueil

jeu

aide« h »

« r »« q »

9

Modèle de story board (à personnaliser)étape ________________ scène clé ______________Apparence graphique, disposition des composants, esquisse de la scène

Informations textuelles de mise en scène: (nature et comportement des objets visibles sur la scène, effets d'animation, effets sonores, interactions offertes à l’utilisateur, navigation, apparitions et disparitions …)

10

Modèle de story board (à personnaliser)étape ________________ scène clé ______________Apparence graphique, disposition des composants, esquisse de la scène

Informations textuelles de mise en scène: (nature et comportement des objets visibles sur la scène, effets d'animation, effets sonores, interactions offertes à l’utilisateur, navigation, apparitions et disparitions …)

11

Listes de composants nécessaires pour la construction du projet

Nom de l’étape : _________________ Nom de la scène-clé : ___________

Nom composant Nature Moyen d’obtention Commentaires Au besoin, détails graphiques …

12

Planning de mise en œuvre

• Vous êtes 2 ou 3, vous avez S scènes à réaliser dans E étapes, elles nécessitent C composants, et vous disposez de 4 semaines.

• D’où le planning prévisionnel de mise en œuvre :