Sommaire. Introduction

Transcription

1

2 2 Sommaire Introduction Concept Problématique...5 Aspect...7 Modélisation 3D...9 Scénario d utilisation...10 Partie technique...12 Evolution de la balle...13 Site internet Introduction...14 Structure du site...15 Technologie et langages utilisés...16 Logiciels utilisés...17 Optimisations...19 Partie administrateur...19 Partie visiteur...19 Résultats d analyse Web...20 Référencement...21 Compatibilité navigateur...22 Version mobile du site internet Pourquoi une version mobile?...23 L adaptation...23 Outils utilisés...24 Comptabilité...24

3 3 Sommaire Application mobile Concept et fonctionnalités...25 Outils utilisés...26 Communication Cible...27 Analyse SWOT...28 Campagne de communication...29 Charte graphique Identité visuelle...33 Charte graphique web...35 Maquettes site internet...37 Version mobile du site internet...41 Maquette Application...42 Gestion de projet Outils de travail...43 Plannings...45 Veille...49 Problèmes rencontrées...49 Annexes Détails des campagnes de communication...43 Cahier des charges fonctionnelle...43

4 4 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Introduction... Ce document a pour but d apporter des solutions techniques à la démarche initiée dans le cahier des charges fonctionnel. Il a également pour but d affiner le projet en confrontant la démarche de conception réflexive à la réalité de la conception technique. Il doit cerner tous les aspects de la réalisation de la balle, qu ils soient matériels, logiciels ou communicationnels.

5 5 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Concept... Notre démarche est de créer un objet de design génératif qui s intègre dans l environnement des concerts de musiques actuelles. L objet s inspire des technologies déjà utilisées dans cet environnement tout en essayant de proposer une approche différente et plus axée sur l interactivité qu il peut y avoir dans ces lieux. Notre but est de créer une plate-forme qui puisse permettre cela. Nous ne pouvons pas en définir l ensemble des fonctionnalités car les manières d exploiter ces données en les mettant en forme sont vastes. Le but est de créer un système suffisamment inter-opérable avec d autres pour permettre une évolution et un enrichissement des fonctionnalités au fil du temps. Problématique Notre questionnement est le suivant : comment intégrer le public à un processus créatif dans cet environnement? Nous voulons ajouter une dimension supplémentaire et complémentaire. Une dimension qui allie visuels et touché. Nous sommes convaincus que voir associer l intervention de chacun sur un objet à un visuel le sublimant sous une forme inédite, a quelque chose de magique, poétique. Le moment d attente précédent l arrivée des artistes sur scène nous parait être, dans un premier temps, un moment intéressant pour une première entrée en piste de notre balle. 1) Pourquoi une balle? : La contrainte que nous nous sommes fixés est que le public ait un contact physique avec l objet. Le concert en tant qu environnement est typiquement un lieu qui permet cette interaction, et surtout qui l accepte. Un concert, c est du son, des odeurs, des lumières pourquoi pas un contact, un touché? Pourquoi une balle? Car c est indéniablement plus agréable qu un parpaing. Plaisanterie à part, il est compréhensible que bien que son utilisation soit ciblée sur des concerts et plus particulièrement ceux de musiques électroniques ; un objet imposant comme le notre peut inquiéter. La forme sphérique facilite la circulation au dessus d une foule, et ne pose pas de problèmes en cas de choc, il est difficile de l aggripper et d enfreindre sa circulation. De plus son poids peu aisément se répartir sur plusieurs personnes. Pour rappel une personne de 80kg peut aisément être receptionnée et portée par un public de concerts, tout en se jetant de scène. Ce qui est déjà le cas avec la pratique très courante dite, de stage-diving ou slam. Pour arriver à ce résultat nous avons déterminés deux leviers qui fonctionnent au sein d un même ensemble 2) Que fait-elle? Design-génératifs à partir des données captées par la balle, vidéo-projetés sur écran Qu est ce que le design génératif? C est la capacité à créer des formes graphiques à partir d algorithmes. Le but est que la balle génère un panel de données qui sera exploitable de manière visuelle. Le symbole de cette approche est le logiciel Open-Source nommé Processing destiné aux artistes numériques. C est le logiciel que nous avons privilégié pour interpréter les données issues des mouvements de la balle. Il est un logiciel libre, donc gratuit, doté de nombreux plug-in et bibliothèques, et possède une commu-

6 6 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes nauté très importante. Enfin, il est réputé facilement assimilable et manipulable. La contrainte du design-génératif appliqué à notre balle : Les mouvements de la balle sont donc traduits de manière visuelle sur un écran. Cela impose une contrainte à laquelle il faut être particlulièrement attentif. Il faut que le lien entre l action sur la balle et l effet visuel qui en découle soit clairement compris par le public. Il est impératif de préserver ce lien de continuité entre mouvement/interaction avec la balle et design-génératif. C est à dire que les visuels vidéo-projetés soient clairement identifiés comme découlant d un rapport de causalité avec le déplacement physique de la balle. Une surface recouverte de LED animée grâce au design génératif Pourquoi une surface de LED? Le choix de tapisser la surface de la balle de nombreuses LED, répond à l impérativité énoncée ci-dessus, à savoir préserver la compréhension des enjeux de l interaction avec la balle. Loin d être une fonctionnalité gadget, c est un premier indice visuel qui met l utilisateur sur la piste de la nature de l interaction dont les visuels seront visibles à l écran. De plus il nous parait important que la balle soit le plus visible possible, pour que le public ne soit pas pris par surprise lors de son déplacement. Zoom sur la technologie LED Grâce aux avancées récentes de la technologie LED, celle-ci est utilisée de plus en plus, et dans des domaines sans cesse plus variés. A l issue de notre veille, il s est avéré que cette technologie bénéficie d importants apports ces dernières années et que la marge d innovation relative à celle-ci est encore très intéressante. Ces atouts ne sont pas passés inaperçus aux artistes et bricoleurs de tous horizons qui ont multipliés les essais et initiatives ces dernières années. Nous avons trouvé les résultats intéressants, plus ou moins concluant selon les initiatives. Mais le point commun de toutes, est qu elles ouvraient des pistes sur des territoires peu explorés, aux possibilités très étendues. Evidemment la technologie LED n est pas récente, la diode rouge date du début des années 60. Cependant la manière de l utiliser notamment grâce aux technologies du numérique et des espaces de programmation libres et participatifs, a elle beaucoup avancée. En effet il est devenu envisageable d utiliser un nombre élevé de LED tout en les animant de manière complexe. Ce qui achève de nous convaincre de garder cette fonctionnalité est que le système qui permet de générer du design-génératif sur les LED s. Il s agit d un circuit-imprimé/microprocesseur du nom d Arduino. Les plans de celuici sont librement disponibles sur internet et des versions pré-assemblées sont commercialisées. Sa particularité est que son interface de programmation est en fait constitué d un plug-in de Processing nommé Wiring. Les appareils photos Pourquoi des appareils photos? Nous nous sommes intérrogés sur l utilité de garder les appareils photos. En effet leur présence complexifie la réalisation de la balle, mais ne la rend pas irréalisable. Nous tenons à les implémenter tout de même. Nous pensons que ces photos sont utiles car permettent d introduire une chronologie au design-génératif qui est vidéo-projeté. De plus les angles de vues que ces photos proposent sont tout à fait originaux et indédits dans un contexte comme celui-ci. C est un autre point de vue. Comment exploiter ces photos? De manière brute : en les intégrant au design génératif vidéoprojeté. Le déclenchement des photos est possible soit par le bais d un contact avec la balle,

7 7 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes soit déclenchable via l application mobile. Ces photos sont intégrées aux visuels vidéo-projetés. A quel moment dans le concert? Tout cela dépend de la volonté de celui qui l utilise. Un artiste n aura pas les mêmes attentes qu un organisateur (professionnel) d une gigantesque soirée mousse en boîte de nuit. Un artiste voudra pleinement l intégrer à son show en choisissant un jeu d effets spécifique et donc interviendra dans le choix du moment. Nous voulons pouvoir répondre pleinement à l attente des deux. La balle peut être lancée aussi bien, avant le début du concert c est à dire lorsque le public attend les artistes. Mais également durant le concert même. Ou encore pendant les changements de plateaux. Partie technique sur la balle Description visuelle de l objet Afin de modéliser la balle en 3 dimensions, nous avons rédigé le pitch ci-dessous. Il décrit le rendu visuel de l objet et aide ainsi à la conception de la maquette 3D. Pitch de l objet Il s agit d une grosse balle à la surface souple qui est prévue pour être lancée dans le public et manipulée par celui-ci. Le déplacement de la balle et les contacts avec celle-ci sont analysés par différents capteurs internes à la balle. Les capteurs de mouvement analysent le comportement de la balle (changement de vitesse, orientation, contact). Ces données numériques sont exploitées pour être mises en forme graphiquement et vidéo-projetées en temps réel dans la salle de concert. Des tableaux numériques sont ainsi créés collectivement et consultables sur un site internet. Des objectifs photographiques (grand-angle) répartis à la surface de la balle, prennent des clichés qui sont ensuite exploités en direct (pour être intégrés dans la vidéo projection). Les clichés seront enfin consultables sous forme de galeries chronologiques, dans le site internet. Aspect La balle fait environ 1,20m de diamètre. Sa surface extérieure est tapissée d un maillage de LED qui forme une sorte d écran sphérique. La densité du maillage est comparable à cela : Figure 1

8 8 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Figure 2 Extérieur - Un fin film extérieur (5mm) transparent de silicone recouvrera le maillage de LED (pour protéger le matériel lors des frappes du public sur la balle). Le maillage est vraiment inspiré de la fig2. - Les LED : Le maillage de LED sera constitué de LED polychromatiques, grâce à elles il est envisageable de diffuser un flux vidéo (le maillage de la fig1 est destiné à la vidéo.) - La batterie est reliée à une prise USB 3 femelle qui est accessible depuis l extérieur, sur le maillage de LED. Prise qui permet bien entendu de la recharger. Afin de repérer la prise, celleci est intégrée au milieu du logo du projet (voir image ci-dessous): - Les objectifs photos sont disposés de manière régulière à la surface de la balle. On privilégiera des objectifs grand-angle. - Un accès devra obligatoirement être réservé pour l accès au noyau de la balle pour d éventuelles opérations de maintenance. Intérieur - La balle possède un cœur en son centre. Ce noyau regroupe les composantes de la balle (batteries, le processeur Arduino, carte wi-fi, mémoire). De ce cœur partent des «bras» (6 ou 7) qui sont reliés à l extérieur et qui maintiennent le cœur technique au centre de la sphère. Ces bras sont des sortes de tubes évasés de 4 à 5 cm de diamètre. C est par eux que passent les fils du maillage de LED. Voici dans l idée à quoi ressemblent ces bras : vimeo.com/ (voir vers 0:23 scd)

9 9 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Modélisation 3D Nous avons effectué une modélisations 3D afin d avoir une idée précise de ce à quoi ressemblait la balle :

10 10 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Exemple de scénario utilisateur Le but est de créer un jeu visuel utilisant les données issues d interactions avec la balle, pour ensuite les mettre en forme visuellement et esthétiquement, les possibilités sont très vastes, elles dépendront des algorithmes implémentés : Nous proposons ici un scénario d utilisation type avec des exemples de jeux d effets : Contexte : Attente avant un concert. Les lumières viennent de s éteindre. Un homme arrive sur scène avec une grosse balle dans les mains... 1) La balle est lancée dans le public par un membre du staff. Les LED sont allumées en bleu, de manière uniforme : 2) Elle arrive sur Nina, surprise, Nina la frappe mollement, ses mains sont en l air. Lorsque la balle entre en contact avec ses mains, une onde lumineuse verte se propage sur la surface de la balle. 3) La balle entame relativement lentement une trajectoire parabolique. 3 )Une prise photo se déclenche et apparait quasi instantanément sur l écran vidéo-projetée. 4) L écran derrière la scène s illumine, une trainée de peinture se dessine timidement dessus. La balle se dirige vers Max. 5) Qui avec la finesse d un rugbyman tape la balle très fort et l envoit à plusieurs mètres de lui. Cette frappe forte déclenche une onde lumineuse. rouge se propageant sur la surface de LED. 5 ) Une photo est déclenchée peu après la frappe. 6) Suite à cette frappe et pendant que la balle est en l air, sur l écran on observe une ample trainée de peinture rouge qui va quasiment d un bout à l autre de l écran. 7) La balle continue de circuler au sein de la salle pendant quelques mintutes. Les artistes ne vont pas tarder. Un membre du staff de l organisation du concert utilise l application mobile dans son interface administrateur pour éteindre la balle. La balle continue de circuler puis est récupérée par un technicien la réclamant sur scène. La circulation de la balle durant ces 5 minutes a généré un tableau où chaque trainée de peinture représente un mouvement de la balle dans la salle, et chaque tâche de peinture figure une donnée comme la puissance de la faire, le temps pendant laquelle la balle est restée en l air la puissance d une frappe. Pour conclure sur cette partie concernant notre concept, nous nous intéressons ci-dessous aux futures enrichissement implémentables sur notre objet. En effet, de par sa conception, la balle Iby est pensée pour pouvoir évoluer et accueillir à la fois de nouveaux matériels, et surtout de nouveaux algorithmes de design génératif. La liste ci-dessous est en petite partie constituée de fonctionnalités que nous avons décidé d écarter, pour éviter d alourdir le projet et d en faciliter sa compréhension

11 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes 11

12 12 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Partie technique Partie externe de la balle Il faudrait un boule transparente en PVC qui s ouvre facilement pour la gestion des composants. Son prix avoisine les 100 euros. - Capteur de mouvement Comme capteur de mouvement nous prenons la technologie accéléromètre. Ce capteur est capable de mesurer : L inclinaison L accélération Les vibrations Ce composant est très utile pour mesurer les chocs que subit la balle, les variations de vitesse, la pesanteur... Un capteur de ce type se trouve au prix 50 environ. - Leds Ulitilisation de led du type RVB (dites LED polychromatiques). L avantage est que les led muticolors pourront ainsi réaliser plusieurs formes, cou leurs, dessins différents sur la paroi de la balle. Pour qu elles soient moins encombrante sur la surface, il est préférable d utiliser des LEDs plates. Vu le nombre élevé des LED, nous pouvons compter 300 euros pour ce composant. - capteur photo/vidéos Il existe principalement deux types de capteur photo, soit des capteurs ccd et cmos. Deux technologies adaptées pour notre balle. Le cout est de 100 à 250 suivant la qualitée des prises de photos. - processeur Arduino est un circuit imprimé dont les plans sont publiés en licence libre. il comprend un microcontrôleur qui peut être programmé pour analyser et produire des signaux électriques, de manière à effectuer des tâches diverses. C est une plateforme basée sur une interface entrée/sortie simple et sur un environnement de développement utilisant la technique du Processing. Ce processeur est ce qu il y a de plus adapté au concept Iby. le prix de ce composant est d environ batterie En ce qui concerne l alimentation de la balle, on a opté pour une batterie de 5v rechargeable par port USB pour faciliter son utilisation. Cette batterie sera capable d alimenter le processeur et tous les composants durant la duré de la manifestation. Son prix environne les 10 euros. - composant de communication wifi : La norme g permet d obtenir un débit théorique de 54 Mbps pour des portées équivalentes à 75 m. Il est possible de diminuer le débit pour obtenir une distance plus importante. Pour garder un débit suffisant pour tranférer une photo, on descend le débit à 18Mbit/s (en suposant qu une image peise environ 2Mo) pour avoir une portée de 180m. Il faut compter dans les 20 à 30 pour avoir un composant qui gère le wifi. Au final, en terme de matériel, la ball s élèverait donc à environ 1000 euros. A cela, nous ajouterons la main d oeuvre.

13 13 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Evolution de la balle Futures évolutions de la balle déployable à court terme - Entre chaque photo, les transitions sur l écran géant, sont réalisées grâce aux messages textes que les personnes envoient avec leur smartphone. - Les dessins envoyés par l application mobile seront disponibles sur le site dans une galerie adaptée. Il y aura la possibilité de voter et classer des meilleurs dessins envoyés. - Aux moment de prendre la photo, avec la balle, celle ci sera associé a une photo panoramique. Cette évolution ne nécéssite aucun ajout de capteur, car nous pouvons utiliser les quatres appareils photo les plus à l horizontal. - La balle peut aussi très facilement, suivant la puissance de la frappe, appliquer un filtre différent à chaque photo. C est une évolution qui nécéssite un simple traitement de données. - Par le biais de l application smartphone il y aurait la possibilité de se prendre en photo. cette photo sera envoyée à la balle et diffusé sur sa paroi. c est juste une fonctionnalité en plus sur l application. - La balle pourra diffuser des logos publicitaires. - Il y aura possibilité de mettre deux balles dans la foule. Ce qui donnera la possibilité de créer de nouvelle intéraction avec l écartement des deux balles donc de nouveau effet visuel. Futur évolution de la balle déployable à long terme - La balle pourra intéragir avec les sons ambient. Cette évolution demande de rajouter un nouveau capteur sur la carte électronique interne à la balle. - Elle pourra prendre des vidéos en fonction de la hauteur à laquelle elle est lancée. Des vidéos de courte durée pour pouvoir être transmise rapidement. Pour cette nouvelle fonction, repenser le système de transfère de donné pour envoyer des données. - Un champ magnétique pourra etre créer autour du ballon, ce qui permettra une interaction entre les mouvements de foules et celui-ci. Cela demande d ajouter un nouveau composant dans la balle.

14 14 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Site internet... Introduction Aujourd hui, Internet connaît une expansion de plus en plus marquée En effet, c est une plate-forme populaire accessible au plus grand nombre d internautes. Par conséquent, la balle IBY se devait d être visible sur la toile. Le projet de la balle interactive sera donc appuyée sur deux supports multimédia, un site internet et une application mobile. Ces supports permettront d avoir un descriptif du concept IBY. Ils permettront aussi de consulter les données des concerts/soirées, de connaître les dates et lieux des prochains évènements. Le site mettra à disponibilité les différentes photos prisent durant un évènement.

15 15 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Structure du site - Architecture du site internet - Architecture de la version mobile du site internet

16 16 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes - Architecture de l application Technologie et langages utilisés Langages utilisés La programmation web peut prendre différentes formes: d une simple page statique à une page dynamique avec connexion à une base de données. Dans notre cas, c est une page statique : une page représentatif du projet. Le site sera donc réalisé à la manière d un site vitrine. Lorque la balle sera commercialisée, le site internet sera connecté à une base de données afin d afficher les différentes données (photos...) des concerts. En attendant, le site utilisera les mêmes langages que pour tout site web : - Toute page web comprend une base de langage HTML - Toute page web s accompagne du CSS (Cascading Style Sheets - Feuilles de style en cascade), un langage qui se charge de la mise en forme de la page. Aussi, le site internet utilisera du Javascript pour les différentes animation. En effet, il est reconnu par tous les navigateurs actuel. Pour le menu ou les boutons qui se situeront à gauche de l écran, le Javascript est nécessaire pour avoir un effet de mouvement au passage de la souris. Le langage PHP (PHP : Hypertext Preprocessor) est un langage de script interprété avec le serveur web. Il ne sera utilisé que pour une seule fonctionnalité, l envoi de mail. Généralement, le rechargement de la page est nécessaire à l envoi d un mail. Ici, le site utilisera une méthode

17 17 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes complémentaire au PHP pour ne pas avoir à recharger la page. On utilisera la technologie Ajax (Asynchronous JavaScript And XML) permettant de rafraichir qu une partie de la page. On utilisera aussi les fichiers.htaccess. Ce sont des fichiers de configuration des serveurs web Apache. Ici il sera configuré pour gérer les erreurs de page 404. Logiciels et outils utilisés Filezilla C est un client FTP développé sous la licence publique générale GNU. Il permet de transférer les fichiers sur les serveurs et d ouvrir directement les fichiers sur le serveur pour les éditer avec un éditeur de textes. Komodo edit Il s agit d un environnement de développement multi-plateformes relativement complet basé sur la plateforme Mozilla. Il propose une coloration du code très agréable, des suggestions automatique pour faciliter la programmation. EasyPHP Il s agit d une plateforme de développement web, permettant de faire fonctionner localement des scripts PHP sans se connecter à un serveur externe. C est un des logiciels indispensable pour un développeur afin de faire des tests en local sans modifier le vrai site qui est en ligne. Photoshop Logiciel de traitement d image. Il a été beaucoup utilisé pour des créations mais aussi pour faire des modifications d images. Internet La plus grande ressource d information au monde. C est presque l outil le plus important. Il permet d apprendre par le biais des tutoriels mais aussi de corriger nos erreurs en allant sur des forums. Navigateur web Un développeur de sites web se doit de posséder sur son ordinateur différents navigateurs web pour pouvoir s adapter suivant les différents comportement de certains navigateurs. Google Web Fonts Afin de personnaliser au maximum le site, on utilisera une police de caractère différente de celle proposée pour faire un site. C est pourquoi, on utilise google web fonts qui propose des polices web rapide et facile à utiliser pour tout le monde, y compris les concepteurs et développeurs professionnels. Il suffit simplement de mettre une ligne de code : <link href=» css?family=dosis:400,700» rel=»stylesheet» type=»text/css»> W3C Le Service Markup Validation est un validateur par le World Wide Web Consortium (W3C) qui permet aux internautes de contrôler les documents HTML et XHTML pour bien former le balisage. La validation du balisage constitue une étape importante en vue d assurer la qualité technique des pages web Jquery

18 18 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Pour tout ce qui est code Javascipt on utilise Jquery, une bibliothèque JavaScript libre. Elle porte sur l interaction entre JavaScript (comprenant Ajax) et HTML, et à pour but de simplifier des commandes communes de JavaScript. Parallax Il s agit d un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement grâce à la roulette de la souris) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Avec une même distance de scroll, l élément a aura parcouru une distance plus faible que l élément b. C est cette différence de vitesse qui crée l effet parallaxe. effet paralaxe

19 19 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Optimisations Si l on veut bien respecter les normes de langage, l optimisation d un site doit d abord passer par le validateur du W3C. L optimisation n est pas seulement l interprétation du code par les navigateurs mais aussi la possibilité de faire un code lisible par un autre développeur. D où l importance de commenter le code. Il faut aussi une bonne organisation dans les dossiers et fichiers. Il est important de penser aux erreurs de navigations des internautes. Lorsqu un visiteur arrivera sur le site avec une URL inconnue, il sera automatiquement redirigé vers une page 404. C est grâce au fichier.htacess que tout se fera. Ainsi que de la gestion d autres erreurs. Pour l amélioration du chargement de la page, nous aurons régulièrement fait des tests sur le site gtmetrix.com pour savoir si oui ou non le chargement de notre page était trop long. Afin que le site soit chargé le rapidement possible, nous avons faites en sorte que les images soit optimisées au maximum. Partie administrateur Le site actuel du projet ne comportera pas de partie administrateur. C est pour le moment un site vitrine. Il permet de présenter le projet. Si la balle Iby venait à être mise en production, il serait obligatoire d avoir un backoffice. Cette partie servirait à faire des mises à jour rapide et simple des différents contenus : mettre à jour les dates par exemple ou pour gérer simplement la galerie photo. Afin d avoir une meilleure gestion des différents éléments du site, il serait sûrement préférable de choisir une solution du type CMS (Système de gestion de contenu). On partirait sur la plateforme joomla, pour pouvoir bénéficier d une plus grande plage de mouvement en terme de développement. Même si le site présente seulement la balle IBY, on remarquera la présence d un blog. Cette partie du site sera réalisé avec un CMS. Nous choisirons Wordpress qui est le plus approprié pour un blog. De plus, le back office est très intuitif. Un compte administrateur sera créé pour les deux développeurs, ainsi qu un compte pour la partie communication pour l édition d articles. Partie visiteur Accueil - Page Mode le Quand on arrive sur le site, une lightbox s ouvre pour afficher la vidéo de présentation de la balle. Au moment de quitter la page on remarque un très fort effet de parallax. c est dû à la superposition de plusieurs images. Page concept Un slider est présent sur la totalité de la page, il explique les différentes fonctionnalités de la balle.

20 20 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Page Galerie La galerie utilise une grande image, plus grande que la hauteur de la plus part des écrans. C est pourquoi, pour éviter que toutes les bulles partent dans toutes les directions (à cause de l effet parallax quand on descend pour voir la suite de limage), on bloque l effet parallax le temps que l internaute regarde la totalité de l image. A chaque date il y a un lien qui ouvre une lightbox vers la galerie photo. Page Prochains concerts Il y a également un défilement horizontal en fonction du mouvement de la souris, ce mouvement est géré en Javascript. Au passage du pointeur de la souris sur les noms d artistes, une info bulle apparait pour laisser place à un descriptif de l évènement à cette date. Page contact La présence d un Qrcode permet d accéder directement au site par le biais d un mobile. Pour contrer les sniffers de site qui aspire les adresses mail écritent en dur dans le code, on utilise un formulaire de contact. Ceci permet à l adresse mail de rester sur le serveur du site et n est pas visible pour la partie client. Pour être vraiment sûr qu il s agisse bien d un humain qui remplit ce formulaire on rajoute un captcha (c est un test de défi-réponse). L utilisation de la technologie Ajax permet de ne pas avoir à recharger la page pour l envoi du mail, qui lui se fait en PHP. Le blog Le blog sera fait sous Wordpress. C est un CMS particulièrement optimisé pour les blogs. L interface du blog sera modifiée, elle sera simplifiée pour arriver directement à l information. Le pôle communication du groupe Iby se chargera de mettre à jour le blog. Les menu Deux menus seront présents. Le menu du haut permet une navigation classique sur le site ainsi que le choix de la langue du site (Anglais ou Français). Quand au second menu, il se situera au milieu à gauche de l écran, il sera constitué d une icône reflétant les principaux réseaux sociaux (Facebook, Twitter et Google +) et deux vidéos présentant le projet. Transition Les transitions seront mises en place pour les personnes n utilisant pas les boutons de navigation, seulement pour ceux qui utilisent la roulette de la souris. Ces transitions servent à différencier une page à l autre. Elles seront représentées par des barres obliques et un rond au milieux. Dans ce rond il y a une phrase permettant de prévenir l internaute de la prochaine page. Résultats d analyse Web Aujourd hui Internet prend une grande place dans nos démarches quotidiennes. Il y a de nombreux internautes surfant sur le net faisant circuler de plus en plus de données. Afin de pouvoir voir les impacts de notre site web sur la toile, nous avons créé un compte Google Analytics. Ce compte nous permet d analyser le