Sorin Lucas Ricou Sander A14 Rapport de projet SI28 1
I. Concept Application web permettant la création d une vidéo virale type «NyanCat». L utilisateur aura à sa disposition des musiques, des fonds, des personnages respectant les codes du genre. Il pourra aisément ajouter des accessoires aux différents personnages et finalement télécharger sa création. II. Public cible On cible ici les personnes habituées au visionnage de ce type de vidéo. On peut estimer l'âge à entre 10 et 20 ans. Ces personnes sont susceptibles de vouloir créer leur propre vidéo virale et c'est là qu'intervient notre logiciel. Ce public est habitué à un mode de consultation par internet, que ce soit depuis un ordinateur ou un Smartphone (ou autre dispositif mobile : tablette). III. Objectifs : Pour un outil de création, il est important de rendre le tout simple et rapide pour que la création soit agréable. Les menus devront donc être sobres, fluides et clairs. L'aspect esthétique semble également être relativement important pour le public ciblé. Surtout, le produit se doit d'être «fun», principale caractéristique d'une vidéo virale. Il faudrait pouvoir retrouver ce sentiment à travers notre logiciel. Les vidéos virales sont faites pour être partagées : notre logiciel doit permettre l'enregistrement sous format vidéo de «l œuvre» produite. IV. Ressources médias Nous allons créer deux animations, une pour introduire notre application et une dernière pour conclure. La première présentera très rapidement le «maître» des vidéos virales qui n arrive plus à faire le Buzz et qui demande alors de l aide à l utilisateur. La dernière sera un message de remerciement à l utilisateur. Nous mettons à disposition trois fonds, trois personnages et trois musiques. Fonds : Figure 1: Fond Nyancat 2
Figure 2: Fond Mexicano Figure 3: Fond Pink Fluffy Unicorn Personnages : Figure 4: Mexicano Figure 5: Nyancat 3
Figure 6: Pink Fluffy Unicorn Musiques : Les musiques correspondent aux musiques de Nyancat, Pink Fluffy Unicorn et une dernière chanson pour le personnage Mexicano. 4
V. Structure et navigation Tout le contenu sera accessible depuis une seule et même page. Celle- ci sera découpée en trois parties : La navigation devient alors très simple, rapide et efficace. L utilisateur ne peut pas se perdre, il a tout le contenu à disposition sans que pour autant l écran soit surchargé. 5
VI. Formes et degrés d interactivité a. Navigation Zones rendues interactives grâce au JavaScript, permettant la mise à jour d une partie de la page indépendamment du reste. b. Manipulation Avec notre application, l utilisateur n est plus simple spectateur, il agit directement sur le contenu. En manipulant les ressources fournies, il disposera d un véritable outil à créer. c. Introduction de données Le nom de l utilisateur sera demandé, afin de créer une interaction intéressante. Il sera demandé avant la vidéo introductive, et utilisé par le maitre des vidéos virales pour vraiment impliquer l utilisateur. Il est aussi possible d importer ses propres fonds et musiques pour la création de la vidéo. VII. Choix techniques et difficultés a. Choix techniques Notre site est en html5 avec incorporation de JavaScript. C est le choix technique le plus «simple», sachant que nous ne voulons pas travailler avec flash qui offre une portabilité du produit très restreinte. Le JavaScript permet d avoir une page web dynamique et interactive, offrant un confort optimal d utilisation. Nous pouvons grâce à celui- ci, changer seulement certaine section de notre page web en fonction du choix fait par l utilisateur. Toutes les images sont faites sur papier puis vectorisées sous Illustrator. On définit ensuite les couleurs et on ajuste les tailles grâce à Photoshop. Les vidéos ont été réalisées sous imovie. b. Difficultés Les principales difficultés viennent du fait que nous ne connaissons pas ou très peu le développement HTML5 avec du JavaScript. Il faudra commencer par nous documenter pour aborder concrètement le développement de notre site. Nous pensons aussi permettre à l utilisateur d uploader ses propres fonds ou musiques. Cependant ceci n est qu une option envisageable si nous arrivons à finaliser le site avant les vacances de Noël. En effet elle implique un développement sous PHP et la création d une base de données ce qui n est pas familier pour nous. 6
VIII. Story- board Voir les annexes représentant les story- boards de la vidéo de début et de fin. a. Chartre graphique Typographie Nous avons choisi pour le texte secondaire, la police «Shadow into light two» qui est une police sans empattement et légèrement stylisée. Les boutons ont la police «Alba Super» qui est fantaisiste. Elle permet d apporter une certaine gaieté durant la navigation. Nous avons choisi comme couleurs prédominantes, le orange et le bleu. Toujours dans le but d apporter du «fun» et de la fantaisie. Style graphique Tous les dessins présents sur le site sont en 2 dimensions. Les fonds et les personnages ont été télécharger depuis Google image puis animer pour notre site. Pour respecter l univers du dessin de notre site, les images des vidéos d introduction et de conclusion ont entièrement été réalisées sur Illustrator et Photoshop. Les couleurs sont en accord avec le site. Interface Nous voulions une interface très simple, regroupant tous les éléments nécessaires à la création en un même endroit. C est le JavaScript qui nous a réellement permis cela, il n était pas nécessaire de naviguer à travers plusieurs pages html pour arriver à un rendu final. Tout le menu se met à jour sous nos yeux au fur et à mesure que l on choisit les éléments pour composer la vidéo. Figure 7: Menu - Fond 7
Figure 8: Menu - Perso Figure 9: Menu - Musique b. Interactivité Vidéo d introduction Figure 10: Vidéo introduction Le but de la vidéo introductive est d immiscer l utilisateur au cœur même de l application. La vidéo doit sensibiliser l utilisateur à sa tâche principale, créer une vidéo virale. 8
Page principale Figure 11: Logo Il nous a paru important d associer à notre site un logo, c est ce qui permettra de le reconnaître rapidement. Nous l avons disposé au sommet de la page principale. Figure 12: Page principale La page principale est très simple, on se rend rapidement compte qu il va falloir activer le menu en cliquant sur l un des boutons. Pour ne pas perdre l utilisateur, après le clic, l icône change pour ressembler à un bouton appuyé et faire comprendre à l utilisateur qu il se trouve à ce niveau du menu. Intuitivement, l utilisateur est amené à cliquer sur les éléments déroulant du menu. Il comprend très rapidement comment cela marche et navigue alors aisément à travers le site. 9
Pages annexes Figure 13: L'aide Une page récapitulant le principe de notre application, et guidant l utilisateur si nécessaire. Figure 14: Les créateurs Cette page affiche les personnes ayant réalisées le site ViralMaker. 10
Vidéo de conclusion Figure 15: Vidéo conclusion Une fois les choix, l utilisateur doit cliquer sur le bouton finish, une nouvelle page html est alors chargée présentant une vidéo. Cette vidéo consiste à remercier l utilisateur pour avoir terminé sa mission. Lien final Figure 16: Lien final Automatiquement après la vidéo de conclusion, ou en cliquant sur le bouton «clique pour voir ta vidéo» une page html se charge avec le rendu final suivant les choix de l utilisateur. Il est alors invité à partager l URL de la page, pour en faire profiter ses amis. 11
X. Réalisation L application a été réalisée grâce aux technologies HTML5 et JavaScript, qui sont donc des langages de programmation web. Alors que le code HTML correspond à la structure du site avec les différents éléments et leur mise en page avec les feuilles de style CSS, la partie JavaScript permet une interaction avec les éléments afin de dynamiser le rendu. c. Premier éléments implémentés Après une assez longue phase d apprentissage nécessaire pour appréhender le JavaScript notamment, nous avons pu commencer la réalisation à proprement parler. Toutes les ressources ou presque (personnages, fonds, musiques) avaient déjà été créées et le premier objectif était d arriver rapidement à une page principale fonctionnelle (programmation de l interface, mises à jour grâce au code JS, ). Concernant l interface, celle- ci a été pensée plusieurs fois en conception, et la première tentative en réalisation s est révélée suffisamment instinctive et pratique pour être conservée comme version finale. A ce stade, il était donc possible de choisir les éléments désirés parmi les listes fournies pour composer son animation. La limitation à 3 éléments par catégorie correspond aux prévisions, qui prévoyaient un temps limité pour réaliser plus de contenu. d. Premiers retours et améliorations Avec les premiers tests par des utilisateurs, plusieurs points ont pu être améliorés. Premièrement, beaucoup essayaient en vain de déplacer le personnage sur le fond dans la prévisualisation pour le positionner comme ils le voulaient. Cette fonctionnalité à donc été l une des premières à être implémentées à la suite de cela. De même, nous étions arrivés au point mort en ce qui concerne le partage des créations, l exportation vidéo se révélant bien plus ardue qu imaginée. Néanmoins, les retours d utilisateur nous ont permis de trouver un moyen de coller à nos exigences initiales. C est à ce moment que la navigation en plusieurs pages a été créée, avec les vidéos d introduction et de conclusion, le partage se faisant lui à la fin par le biais de l URL. 12
XI. Conclusion Au cours de ce semestre, nous avons donc pu nous- même concevoir, puis réaliser un projet multimédia interactif. La conduite de ce dernier devait nous apprendre à gérer tant temporellement que dans le contenu la conception et la réalisation telle qu elle pourrait être en milieu professionnel. Notre groupe étant constitué d un duo d étudiant en début de branche GI, une ambition personnelle était de profiter de cette réalisation pour nous familiariser et maîtriser de nouveau langages de programmation qui sont de nos jours très courant : HTML et JavaScript. Sur ce point, le bilan est satisfaisant, le projet nous ayant montré divers aspects de ces langages. Et si notre maîtrise actuelle de ceux- ci reste loin d être parfaite, nous serons désormais en mesure de les utiliser pour de futures réalisations. Il était également intéressant de pouvoir conduire en groupe un projet s étalant sur un semestre complet là où nos précédentes expériences dans le domaine étaient principalement des travaux cours sur quelques semaines. Cela nous a donc mis en garde contre le temps, qu il est nécessaire d organiser et de garder sous contrôle afin d avoir la possibilité de réaliser dans les délais la totalité de ce qui était prévu. Sur ce point, nous avons peut être sous- estimé la phase d apprentissage durant laquelle l avancée se trouvait grandement ralentie. Toujours concernant le travail en groupe, la répartition des tâches s est révélée primordiale. Au début du semestre, un membre possédait quelques notions en programmation web, tandis que l autre était lui familier avec quelques logiciels de graphisme comme Photoshop et Illustrator. Il était donc naturel de se répartir les tâches en fonction des qualités de chacun, le travail avançant ainsi bien plus rapidement. Toutefois, nous n avons pas perdu de vue l aspect pédagogique de notre projet, et c est pourquoi nous nous sommes efforcés de travailler sur chaque aspect de la réalisation, afin d être plus tard capable de réutiliser ces compétences acquises. Enfin, si l on peut commencer à comparer la conduite de ce projet à ce qui serait le cas en milieu professionnel, il faut garder à l esprit que nous étions notre propre client. En effet, nous avons nous- même réalisé le cahier des charges après avoir imaginé librement notre produit. On ne peut donc pas réellement parler de conception sous contrainte (ce qui est le cas dans la vie professionnelle), même si les attentes initiales nous ont parfois empêché d abandonner certains aspects techniques ardus. De ce point de vue, c est la capacité à s adapter aux situations difficiles et à trouver la bonne solution qui coïncide avec le cahier des charges qui semble la plus importante. 13