Home

Rapport

1. CAHIER DES CHARGES TABLEAUX INTERACTIFS Rapport de Pauline CROUILLERE M lodie COQUET et C line PIETTE A2014 SI28 UTC Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 TABLE DES MATIERES OA 3 2701570 079 dej BE eat en uen OP ea a a Oa edit 3 Liste d s CAU it a As 3 Maitrise d OU E otitis 3 EE A e e o OOO E O O A 3 Cahier d s charges ita id ii ii A 4 PPP o E E A4 PA A E E R A E M 7 4 alate oL a E nan R BR RO RONA Panne nas an ann Rasa nas en user iso runs esse 4 Obj ctifs attenidUS 7 Har pt ee a et pue 4 Contente nann da RI in ar AL ne ce de 4 AU o aa 7 A0 ee a T 0 E 7 ATTE socorro EE E E E 7 Mode de consultatiohs c00290282090009289 929 39000 009000920 0 Eo A 7 StrUct ration OA A a id 8 N E E A O AA AA 8 Navigation entre les COMEN US ar A at A ou 8 Degre E EE dai eme dat RA 9 Specifications techniques ra a dou a et us 9 PUDIICATION 215 22 ar A A T 9 Choix techniques de d veloppement isseire neii e inaia ns din 9 o Lo o M e 7 E E O r 11 O O O E 11 A ren ter tn nan end ete ten is nee nn E ta E natale and 11 AA e o A A nan 11 Biographie de COME usara A A da 12 MOST OPM R A A r A Rt 13 L Le ETE Vio PR e A o EE E A A A IS 14 Navigation entre les diff rents INS Rite A 16 ANIMATION aaa 17 RISQUES iia aa iaa aa as 17 Eq utc Page 1 sur 19 Universit de Technologie Compl gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128
2. A14 SOlUtONS nacn o a A en ete E 17 STE er 2 E A E A E RA E E E AE 02V 20 00 VAR DO A T E AO EAEI 18 Bilans r UV vaus AA A EA ae te ire ea 18 Difficult s TENCON TES ata te ie ie en 18 Application CONCrEtE rr adobe DO Cl de Ne EEE ini 18 TABLE DES ILLUSTRATIONS 1 L telier du Peintre it ia ein let te men TAA e n P 5 2 Unenterrement d OMANS circa dae te dent AEE raa Eaa ana dt ten tic ada never integre 5 LE Ch ne de FOTO tenta demen N 6 4 Indicateur d animation ludique siirsin eaa paaa VS Sa Vne 7 a e O faha ar aasan a CG E aaoi aa a iiaiai hacia 9 A 2220000025220020 Re ER CDA Ae EE 11 7 Page des ere rata 12 8 Biographi d COTE e ER E De dede A 12 a Premiere page dumode d emploi nn li iii a 13 106 Deuxi me page dumode d emplois santa anses 13 11 Premi re vue de L atelier dU peintre A to ideal a amine soiree ten 14 12 Un exemple d animation pour L atelier du peintre 22 due en tdi 15 lt utc Page 2 sur 19 Universit de Technologie Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 INTRODUCTION But du projet Au c ur de l UV SI28 nous devons fournir un projet dont le support est num rique Liste des acteurs Ma trise d uvre Ce projet est r alis par une quipe de trois personnes Crouill re Pauline l ve en g nie informatique cinqui me semestre sp cialit ICSI Coquet M lodie l ve en tronc commun cinqui me semestre Piette C line
3. Crouill re Piette Cahier des charges SI28 A14 Tableau type Nous allons ici traiter le tableau L atelier du Peintre de Courbet Tous les autres tableaux ont les m mes types d animations Premi re vue L utilisateur apr s clic sur l ic ne Tableaux arrive sur cette image Cat gories Forme Lignes de Personnages Retour sociales d Art fuite 11 Premi re vue de L atelier du peintre Ici plusieurs choix s offrent lui il peut parcourir la barre inf rieure pour acc der des animations s rieuses et instructives ou parcourir le tableau pour acc der des animations plus ludiques Z utc Page 14 sur 19 Universh de Technologie Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 Animations s rieuses Les personnages de L atelier du Peintre jis F lix Husson dit Champfleury crivain Proudhon sociologue pol miste et journaliste gt d Bruyas collectionneur d art s Baudelaire e Promay r sseur de mus que e de ce tableau at gories Forme Lignes de Personnages Retour sociales d Art fuite 12 Un exemple d animation pour L atelier du peintre L image du tableau lors du survol d une ic ne de la barre inf rieure change pour laisser appara tre le tableau modifi en fonction de l animation choisie D s lors que l utilisateur enl ve son curseur de l ic ne associ e l animation le tableau original se remet en place Les animations s rieuses
4. Des Beaux Arts de Besan on Apr s des tudes consid r es comme m diocres et qu il abandonne il part pour Paris 20 ans Il y suit des tudes de droit et fr quente parall lement l atelier du peintre Charles de Steuben Courbet se rend au mus e du Louvre pour tudier les ma tres en particulier les peintres de l cole espagnole du XVII si cle Il est admiratif du clair obscur hollandais du r alisme espagnol et de la sensualit v nitienne Retour 8 Biographie de Courbet z utc Page 12 sur 19 Universit de Technologie Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 Sur cette page l utilisateur peut trouver une br ve biographie de Courbet lui permettant de le situer de mani re historique et artistique Il peut revenir l accueil en cliquant sur un bouton Mode d emploi MOD ADA ISO Animations S rieuses Pour chaque tableau retrouvez une banni re en bas du tableau Lors du survol de chaque ic ne l tableau se modifie 2 Banni re interactive Suivant Retour 9 Premi re page du mode d emploi MODE D EMPLOI Animations ludiques C est vous de chercher les animations LTs Te UGER Survolez GE tableaux lorsque la souris devient Jy cliquez et d couvrez des animations Retour 10 Deuxi me page du mode d emploi utc Page 13 sur 19 Universit de Technologie Compi gne Tableaux interactifs Coquet
5. Budg taire Il n y a pas de contraintes budg taires Acteur Public cible Public averti tudiants adultes pr alablement sensibilis s l art Certaines animations mises en place sont s rieuses et instructives et permettent de renouveler l int r t du public pour le tableau ou de cr er de nouveaux int r ts Tout public Des animations s rieuses mises en place sur le sujet principal du tableau sont entour es d animations plus divertissantes telles que des bruits gag ou des apparitions inattendues Attentes Red couvrir des tableaux de Courbet et surprendre Mode de consultation L utilisateur a acc s l application sur internet Celle ci est en effet mise sur un site web Il est possible de t l charger l application pour pouvoir la lancer en local Universit de Technologie Compi gne Z utc Page 7 sur 19 Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 Structuration du contenu M dia Images Les tableaux constituent la base de notre projet Les autres m dias que nous avons ajout s enrichissent simplement les tableaux Animations Des l ments s animent sur les diff rents tableaux Chaque tableau contient une dizaine d animations Audio Des sons peuvent tre activ s lorsqu on clique sur certaines zones du tableau Certaines animations sont galement accompagn es de sons Texte Nous avons un texte pour pr senter Courbet puis pour certains tableaux nous
6. Une faucheuse qui traverse le tableau La lumi re d une boite de nuit sortant de la tombe Un vendeur de popcorn Une dame qui se mouche Les animations ludiques pour Le Ch ne de Flagey sont Un oiseau qui passe en volant Angry Birds Une pomme qui tombe sur Newton Une animation pour No l Des gens qui font un pique nique Une demoiselle qui fait de la balan oire Une explosion de bombe Navigation entre les diff rents grains Rappel du sch ma de navigation Pr sentation sd Tableau 2 Tableau 3 EF utc Page 16 sur 19 Mode d emploi rate de Technologie Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 La navigation se fait Par clic entre les diff rents grains Par survol pour les animations s rieuses Par clic pour les animations ludiques Animations Risques Un des risques de cette navigation au niveau des animations ludiques est que l utilisateur clique sur tout le tableau la recherche d une animation Celui ci pourrait alors tre frustr s il ne trouve pas de nouvelles animations Solutions Une des solutions possibles est de modifier le curseur lors du survol des zones pouvant s animer C est la solution que nous avons mise en place lt utc Page 17 sur 19 Universit de Technologie Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 BILAN Ce semestre nous a
7. avons des textes apportant des informations sur les personnages remarquables du tableau Navigation entre les contenus Le contenu est divis en plusieurs grains La page de pr sentation La page de biographie de Courbet La page de pr sentation des membres du projet Un grain par tableau Pour chacun des tableaux nous avons les l ments suivants que l utilisateur d couvre de lui m me de mani re interactive Le tableau apparait de mani re normale sans aucune animation En passant au dessus de certains boutons disponibles en bas du tableau l utilisateur voit apparaitre diff rentes informations s rieuses par exemple les lignes de fuites du tableau I peut cliquer sur des animations divertissantes cach es dans le tableau Il peut se rendre vers un autre tableau en cliquant sur ce dernier Une pr sentation de Courbet l auteur des tableaux Les cr dits Une explication sur comment utiliser l application Il est n cessaire de voir le premier tableau pour acc der aux autres cependant l utilisateur n est pas oblig de regarder l ensemble des tableaux De m me il n est pas oblig de cliquer sur toutes les diff rentes animations pour pouvoir acc der aux diff rents grains La navigation est donc hypertexte Z utc Page 8 sur 19 Universit de Technologie Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 Accueil Pr sentation Tablea
8. cessaire pour cr er une animation mais aussi pour l int grer Pour chaque animation nous devions r aliser chaque frame pour avoir environ une image par seconde 3 pour certaines puis il fallait les int grer leur appliquer les bons scripts Trouver des images des tableaux de qualit mais aussi les sons a t aussi assez long pour trouver des sons correspondant parfaitement nos attentes Nous rendons une maquette fonctionnelle et qui nous correspond Application concr te Nous nous sommes organis es de mani re terminer notre maquette le plus rapidement possible pour pouvoir faire des tests utilisateurs Ces tests ont t concluants et ont r v l plusieurs choses notamment en fonction des tranches d ge et des raisons pour lesquelles les personnes s taient int ress es l application Les tests ont t r alis s avec deux jeunes enfants de 10 et 8 ans Ils ne connaissaient pas Courbet ne serait ce que de noms et aucun des tableaux Un des enfants est issu d une famille ais e et va r guli rement au moins une fois par trimestre au mus e voir des expositions Le deuxi me est une fille issue d une famille moyenne n allant au mus e que lorsque c est encadr par l cole Comportement commun Ils ont surtout utilis le c t ludique de l application et ont cherch appuyer partout Ils ont vu l ensemble de l application sauf la partie explication qu ils n ont pas voulu consulter Ils ont compris commen
9. l ve en tronc commun cinqui me semestre Maitrise d ouvrage Ce projet est encadr par monsieur S Bouchardon responsable de l UV SI28 Z utc Page 3 sur 19 Universit de Technologie Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 CAHIER DES CHARGES Analyse Principe L id e est de faire re d couvrir certaines uvres de Courbet L utilisateur peut interagir avec les tableaux en cliquant ou en effectuant un survol avec la souris diff rents endroits des tableaux En cliquant il peut actionner plusieurs types d animations Des animations inattendues humoristiques Acc der un autre tableau poss dant les m mes caract ristiques En survolant des boutons situ s en bas de chaque tableau il peut obtenir Des animations qui apporteront des informations vis vis du tableau Objectifs attendus L objectif est de faire red couvrir plusieurs uvres de Courbet de mani re ludique l utilisateur Le tableau sera plus finement observ par l utilisateur car ce dernier cherchera les diff rentes animations qui s offrent lui et donc aura plus tendance regarder tous les endroits des tableaux L interaction entre tableau et utilisateur permet l utilisateur de ne pas tre passif c est dire d tre seulement dans l observation L objectif est donc de susciter un int r t pour l art et de montrer que les tableaux peuvent tre vivants trav
10. pour L atelier du Peintre sont Affichage des lignes de fuite Mise en valeur des diff rentes cat gories sociales Mise en lumi re de certains personnages importants Affichage des diff rentes formes d arts pr sentes dans le tableau Les animations s rieuses pour Un enterrement Ornans sont Affichage des diff rents personnages de trois cat gories Hommes Femmes Officiants Mise en valeur de l opposition vie et mort Les animations s rieuses pour Le Ch ne de Flagey sont Quelques informations sur le tableau Br ve description du tableau Quelques informations sur la ville d Ornans Universit de Technologie Compi gne Z utc Page 15 sur 19 Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 Animations ludiques Afin de trouver les animations ludiques l utilisateur doit survoler le tableau et cliquer sur certaines zones Le curseur change de forme lorsque l utilisateur passe sur les zones pouvant s animer il sait donc quelles zones s animent Les animations ludiques pour L atelier du Peintre sont Un chien du tableau qui aboie Lafemme nue du tableau qui se rhabille avec une robe Le bruit d une porte qui grince Un fant me apparaissant au dessus de la t te de mort Des taches de peintures qui apparaissent sur le tableau Des c urs qui s chappent des amoureux Les animations ludiques pour Un enterrement Ornans sont
11. eau mais comprend pourquoi cela a t fait attirer l attention sur des d tails amuser un autre type de public Il a trouv que les informations fournies taient courtes mais bonnes et que a lui donnait envie de faire des recherches plus approfondies sur certains tableaux Ces tests nous permettent de voir que notre application ne correspond pas totalement au public averti et connaisseur mais correspond aux autres types de publics Les animations peuvent parfois choquer mais font surtout rire ou sourire L application est simple prendre en main et facilement compr hensible Z utc Page 19 sur 19 Universit de Technologie Compi gne
12. ers le divertissement un objectif annexe est de leur apprendre des grandes notions d art notamment travers les boutons apportant des informations sur les tableaux Contenu Tableaux Nous utilisons trois tableaux de Courbet L atelier du Peintre Un enterrement Ornans Le Ch ne de Flagey je Z utc Page 4 sur 19 Universit de Technoiog Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 1 L atelier du Peintre 2 Un enterrement Ornans aversi de Technalogla Compi gne Z utc Page 5 sur 19 Tableaux interactifs Coquet Crouill re Piette Cahier des charges SI28 A14 3 Le Ch ne de Flagey Informations Pour chaque tableau nous avons cherch des informations telles que les lignes de fuites les lumi res des informations sur les principales parties du tableau et ses principaux personnages par exemple Celles ci sont repr sent es directement sur le tableau m me si elles n apparaissent que lorsque l utilisateur le d cide Nous proposons galement un acc s depuis l accueil de l application une page informative sur Courbet qui est l auteur de tous ces tableaux Cette page contient une rapide biographie de l auteur Nous avons ajout une page de cr dits pour pr senter les diff rents acteurs de ce projet Enfin il y a une page de pr sentation permettant d expliquer le fonctionnement de l application pour que les utilisateurs puissent p
13. l outil de d veloppement sera Unity 3D L ensemble des scripts ont t d velopp s en C Une fois les scripts d velopp es il a t plus simple d ajouter les diff rentes animations rat de Technologie Compi gne Z utc Page 10 sur 19 Tableaux interactifs Coquet Crouill re Piette Cahier des charges SI28 A14 STORY BOARD Interface Accueil Mode d emploi Courbet Tableaux Cr dits 6 Page d accueil Sur la page d accueil l utilisateur peut choisir d aller sur les cr dits de lire la biographie de Courbet de visionner le premier tableau ou de quitter ll acc de ces diff rentes sc nes par simple clic Cr dits DA utc Page 11 sur 19 a Tableaux interactifs Coquet Crouill re Piette Cahier des charges SI28 A14 Retour 7 Page des cr dits Sur la page des cr dits l utilisateur voit une photo ainsi qu une br ve description de chaque membre ayant contribu au projet Il pourra retourner l accueil en cliquant sur un bouton Pour obtenir les informations sur les diff rents protagonistes il suffit de survoler les photos des chacun Biographie de Courbet 819 1877 58 ans Peintre suisse chef de file du courant r aliste Il est issu d une famille de propri taires terriens A 12 ans il rentre au petit s minaire d Ornans o il re oit une premi re formation artistique il rentre ensuite au Coll ge Royal de Besan on eu il suitun cours dispens par le directeur de l Ecole
14. rofiter au maximum de l application z utc Page 6 sur 19 Universit de Technologie Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 Animations Chaque tableau poss de au total une dizaine d animations qui apparaissent soit au clic de l utilisateur soit au survol d une zone du tableau Ces animations sont dessin es partir d images prises sur le web Les animations consid r es comme s rieuses sont elles aussi invisibles lorsque l utilisateur ne les actionne pas Celui ci peut survoler les cases situ es dans le bandeau inf rieur et ainsi afficher les animations s rieuses Comme c est un survol ces animations ne sont visibles que lorsque la souris de l utilisateur se trouve sur la case choisie Les animations en mouvement ou ludiques sont invisibles lorsqu elles ne sont pas actives Elles sont accompagn es de son Lorsque l utilisateur survole les animations en question son curseur change pour lui indiquer qu il peut cliquer A son clic l animation apparait et le son se met en route A la fin de l animation cette derni re repasse en invisible et le son cesse 4 Indicateur d animation ludique Contraintes Temporelle Le projet doit tre rendu pour le d but du mois de janvier Nous avons donc 2 mois et demi pour le r aliser Mat rielle Les contraintes mat rielles sont absentes Nous n avons cependant pas demand le droit d utiliser les photos des diff rents tableaux
15. t faire fonctionner l application sans notre aide Ils ont ris de certaines animations et pour en comprendre certaines ils sont all s consulter des sites concernant les tableaux par exemple pour comprendre pourquoi des c urs sortaient du couple pr sent sur l atelier Z utc Page 18 sur 19 Universit de Technologie Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 Un des deux enfants apr s avoir regard les animations a galement regard les explications puis a demand sa m re si Elle pouvait aller voir les tableaux en vrai Les tests sur les enfants r v lent bien qu ajouter de l animation sur des tableaux permet d avoir leur attention et de leur donner envie d apprendre de nouvelles choses Un second test a t effectu avec une jeune personne d environ 30 ans qui ne va jamais au mus e et ne s int resse pas aux uvres de Courbet ll a regard une grande partie des animations et l ensemble des tableaux Il a consult toutes les informations sur les tableaux Il nous a confirm que ce type d application lui plaisait plus que de s acheter un livre sur l art mais qu il n irait pas plus se renseigner sur les tableaux Enfin un dernier test a t effectu avec une personne de 50 ans tr s int ress par les tableaux de Courbet et qui s y conna t sur le sujet Elle a t choqu e par certaines animations ludiques qui d apr s elles n ont pas leur place dans un tel tabl
16. u 1 Cr dits Courbet Tableau 2 Tableau 3 Degr d interactivit 5 Sch ma de navigation i i i h l ffet c i l utili infl L interaction se trouve au niveau de c aque tab eau en effet c est sur ces derniers que l utilisateur influe Mode d emploi Les interactions sont diff rentes selon le grain sur lequel l utilisateur se trouve Lorsqu il est dans la partie accueil il peut Lire les informations sur Courbet Explorer les tableaux D couvrir les cr dits Arriver sur les explications Lorsqu il est sur un tableau il peut Passer sa souris sur des boutons se trouvant en bas de chaque tableau pour afficher des informations sur ce dernier Cliquer sur le tableau pour y trouver les animations cach es Cliquer sur un autre tableau pour y acc der Sp cifications techniques Publication L application ainsi d velopp e est accessible depuis une page web L utilisateur doit simplement installer le plug in permettant de lire les applications Unity Choix techniques de d veloppement Les images et tableaux sont trait s l aide d Art Weaver mais galement de GIMP Les animations sont dessin es la main frame par frame retouch es l aide de Photoshop et de GIMP puis anim es l aide de Unity Les sons ont t trouv s en ligne lt utc_ Page 9 sur 19 rah de T Compi gne Tableaux interactifs Coquet Crouill re Piette Cahier des charges S128 A14 Le principa
17. ura permis d appr hender de nouveaux outils interactifs tels que Unity 3D ou Gimp pour la retouche des images dans le cadre de notre projet mais aussi des logiciels comme Audacity Dreamweaver ou Flash dans le cadre de l UV Bilan sur l UV AU cours de ce semestre nous avons eu des cours de 1h suivi de td de 3h Les cours nous ont permis d appr hender le changement de notre mani re d crire suite l apparition de l ordinateur et en particulier d internet En td chaque semaine un groupe d tudiants a pr sent un logiciel type ou un langage La continuit entre le cours et le td a permis de tester sur nos projets les diff rentes th ories vu en cours dans la mesure du possible et d utiliser ces logiciels Difficult s rencontr es Notre premi re id e du projet tait de faire une navigation immersive et 3D dans un tableau de Courbet Pour des raisons techniques nous avons d abandonner cette id e et r aliser le projet actuel qui est exactement ce quoi nous pensions lorsque nous l avions imagin Une autre difficult est la disparit des l ves En effet Pauline tait la seule capable de manipuler Unity 3D les animations reposaient donc sur elle C line et M lodie auraient pu appr hender le logiciel mais cela leur aurait demand un investissement important pour un logiciel qu elles n auraient peut tre pas r utilis dans le futur Le projet a t tr s carnivore en temps car nous avions sous estim le temps n

Rapport

Contents

Download Pdf Manuals

Related Search

Related Contents