1

((BBaallaaddee nnooccttuurrnnee aavveecc)) RRaaddiioohheeaadd

Cyril MACÉ GI01 Olivier SASBURG GI05 Synopsis _______________________________________________________________________ 2

Concept_______________________________________________________________________ 2 Public ________________________________________________________________________ 2 Objectifs ______________________________________________________________________ 2

Cahier des charges _________________________________________________________ 3 Budget________________________________________________________________________ 3 Ressources média :______________________________________________________________ 3

Texte _______________________________________________________________________ 3 Images______________________________________________________________________ 3 Icônes ______________________________________________________________________ 3 Musique ____________________________________________________________________ 4

Structure et navigation___________________________________________________________ 4 Formes et degrés d’interactivité ___________________________________________________ 5 Choix techniques _______________________________________________________________ 6

Scénario __________________________________________________________________ 6 Arrivée sur le site _______________________________________________________________ 7 Live (ou experience) ____________________________________________________________ 8 Learn________________________________________________________________________ 10 Share ________________________________________________________________________ 10

Storyboard _______________________________________________________________ 11 Arrivée sur le site ______________________________________________________________ 11 Live (ou experience) ___________________________________________________________ 15 Learn________________________________________________________________________ 16 Share ________________________________________________________________________ 17

Bilan ____________________________________________________________________ 18

2

Synopsis

Concept Le projet consiste en une présentation de l’univers musical du groupe Radiohead à l’aide

d’un site interactif. Dès l’introduction, l’utilisateur est plongé en vue subjective dans un univers minimaliste

et lugubre. Il se retrouve dans une chambre où il peut interagir sur plusieurs objets. En fonction de ses choix, il sera amené à prolonger la découverte sous différents aspects : « vivre », « savoir », « partager ».

Public Public visé : public ne connaissant pas le groupe ou souhaitant le redécouvrir à travers un univers original. Attentes : faire découvrir l’ambiance musicale du groupe, et non sa discographie complète. Le projet ne cherche pas l’exhaustivité et n’est pas un site de « fan », contrairement à de nombreux autres. Modes de consultation : Internet. Prendre en compte plusieurs types de public : non.

Objectifs Apport au sujet traité : rendre compte d’une atmosphère originale ajoutant à la dimension sonore de la musique de Radiohead la dimension visuelle et interactive. Leur musique sera donc utilisée, mais uniquement en tant que fond sonore. Le projet n’aura donc pas pour but d’expliquer le véritable message que les auteurs ou compositeurs ont souhaité faire passer, mais plutôt de laisser place à l’imagination personnelle de l’internaute au gré de ses propres émotions. Emotions, questionnements provoqués : l’internaute sera amené à effectuer son propre parcours au sein d’un univers interactif, tard dans la nuit. En ajoutant à la bande son une dimension visuelle et interactive, il sera plus facile pour le « promeneur » de rentrer dans l’univers du groupe. La musique et la désertion des lieux aidant, il pourra se laisser aller à une rêverie, à des questionnements personnels… Connaissances, compétences apportées : faire connaître et aimer la musique de Radiohead à l’internaute (réticent à leur style ou ne les connaissant pas) en l’aidant à ressentir des émotions qu’il prendra plaisir à retrouvera plus tard. Il pourra alors approfondir sa découverte, à l’aide notamment d’une présentation du groupe et de ses différents albums, et grâce à des liens vers des sites officiels ou de fans. En résumé, l’objectif du projet est principalement d’introduire l’internaute à l’univers du groupe pour lui donner envie d’écouter leur œuvre par la suite.

3

Cahier des charges

Budget Ce projet étant réalisé dans le cadre de l'UV SI28, le projet ne possède pas de budget

spécifique. Les ressources se résument à nos propres moyens personnels ou éventuellement à celles de membres d’associations (e.g. : le Club Photo pour les prises de vue).

Au-delà du budget financier, le temps disponible pour réaliser ce projet est de trois mois environ.

Ressources média : Il faudra approximativement une cinquantaine de photos par balade virtuelle et nous

prévoyons d’en réaliser quatre.

Texte Menu intro : « Savoir », « Partager », « Vivre » Menu « partager » (livre d’or) : « Si avez aimé ce site, merci de faire partager vos émotions aux autres visiteurs » Menu « vivre » : pas de texte interface de navigation intuitive (système de flèches) Menu « savoir » (groupe et albums) : description des albums (titres et court commentaire) et des membres du groupe (leur rôle et leur nom) ; liens vers des sites officiels et de fans (www.radiohead.com, www.nepasavaler.net, www.greenplastic.com).

Images Menu intro : photo de chambre avec une fenêtre donnant sur l’extérieur, coupures de journaux et poster de Radiohead sur un mur, et un bureau avec cahier et stylo éclairé par une lampe. Menu « partager » : vraie feuille de papier scannée Menu « savoir » : photos des membres du groupe et des albums Menu « vivre » : ensemble de photos prises dans les rues de Compiègne, à proximité du pont Solférino. Éventuellement photos d’intérieur prises sur Internet (libres de droits) ou d’objets particuliers (articles de presse, chambre, etc.).

Icônes Ensemble de flèches (éventuellement créées à l’aide Flash) afin de permettre de naviguer intuitivement ; croix de fermeture pour revenir au menu d’introduction.

4

Musique Menu intro : Radiohead - Street spirit / bruit « électrique » (chanson de Tool : (-) ions)

Menu « vivre » : Balades :

Intro. du pont : Sit up. Stand down. Sail to the moon Where I End and you Begin Climbing Up the Walls Idioteque Et s’il reste du temps pour d’autres balades : Pyramid song, A wolf at the door, Paranoid Android.

Interactions :

Let down, I will, Packt like sardines in a crushd tin box, Backdrifts, How to disappear completely, Nice dream, …

Menu « savoir » : Radiohead - No surprises

Pas de musique pour le menu « partager ».

Structure et navigation

Dans le menu « vivre », suivant les choix du visiteur, la balade sera presque toujours vécue différemment (possibilité d’interactions nombreuses au sein de chaque balade).

A tout moment, il sera possible de revenir dans le menu d’introduction afin d’accéder aux autres rubriques.

La navigation générale du site est très simple (structuré en trois parties), cependant la

navigation au sein du menu « vivre » (balade virtuelle) est relativement originale. Elle s’inscrit dans la catégorie « immersive » : l’utilisateur fera l’expérience d’une balade interactive à l’aide d’une succession de photos, tout en ayant la possibilité de faire des choix, proposés au long de

Menu introduction

Menu « vivre » Menu « savoir » Menu « partager »

Introduction de la balade

Balade 2 Balade 1 …

5

son parcours. De plus, elle aura pour particularité de ne pas chercher à permettre à l’utilisateur de se repérer aisément dans l’espace, mais plutôt d’essayer de le perdre.

Formes et degrés d’interactivité

Dans le menu principal, l’utilisateur est projeté en vue subjective dans une chambre (à travers une photo) et a la possibilité d’accéder aux différents sous-menus en cliquant sur les zones réactives de la photo. Trois rubriques sont ainsi accessibles :

« vivre » : une imposante fenêtre sur l’extérieur, vu de nuit, nous invite à vivre l’ambiance du groupe au travers d’une balade virtuelle. Celle-ci situerait l’utilisateur dans un monde mêlant réel et irréel (à l’aide de photos), lui permettant de faire son propre voyage au sein de la musique de Radiohead.

« partager » : des feuilles et un stylo sur une table permettent d’ouvrir le livre d’or. « savoir » : des posters, photos, coupures de journaux accrochés au mur permettent d’en

savoir plus sur le groupe. Sur la photo finale, les trois zones réactives seront plus visibles et l’environnement plus simple, pour permettre à l’utilisateur d’accéder aux sous-menus intuitivement, avec comme seule indication les trois mots qui apparaissent sur la zone réactive au survol de la souris.

PARTAGER

VIVRE

SAVOIR

6

Dans le sous-menu « vivre », l’utilisateur se retrouve encore en vue subjective dans une rue de Compiègne (à travers une photo). En cliquant sur différentes zones réactives, on va accéder à une autre photo qui correspond à la suite de notre balade. On peut alors choisir le chemin que l’on va parcourir suivant la zone réactive choisie. Une musique de Radiohead sera jouée en fond et changera suivant la balade parcourue.

Choix techniques Le site sera réalisé à l’aide des technologies HTML, Flash et PHP. Pour cela, les outils

Macromedia Dreamweaver et Flash MX seront utilisés. La partie HTML concernera les menus d’introduction et « savoir » (biographie du groupe,

albums). La partie Flash sera spécifique de la partie balade virtuelle (« vivre »), avec la musique de

Radiohead en fond. Le livre d’or (« partager ») sera programmé en PHP à l’aide d’une bibliothèque

appropriée, librement disponible.

Scénario

7

Arrivée sur le site Contenu de la page

A l’ouverture du site Web, la page principale est constituée d’une photo de chambre en vue subjective. En effet, la photo est prise afin que l’utilisateur se sente dans sa chambre, et plus précisément assis sur une chaise devant son bureau.

En face de lui, le mur est tapissé de posters et coupures de journaux, et il peut entrevoir l’extérieur par la fenêtre. Sur le bureau, sont posés une feuille et un crayon, ainsi qu’une lampe.

L’univers constitué par la photo en vue subjective est donc constitué de peu d’éléments, et chacun des éléments cités dans le deuxième paragraphe marqueront un lien vers une page suivante.

Donc, au survol d’un des éléments par la souris, l’objet s’éclairera signalant ainsi qu’une action sera effectuée si l’on clique dessus :

si l’on clique sur les posters, on accède à la rubrique « learn » du site, qui permet d’avoir des informations sur Radiohead ;

si l’on clique sur la feuille, on accède à la rubrique « share » du site, constituée par un livre d’or ;

si l’on clique sur la fenêtre, on accède à la rubrique « live » du site, constituée par la balade nocturne dans Compiègne.

Scénario de l’entrée sur le site

Lorsque l’utilisateur arrive sur le site, il se retrouve donc dans l’univers décrit précédemment, plongé dans l’obscurité, et distinguant mal les différents objets de l’environnement.

Il peut alors seulement cliquer sur la lampe, qui l’amènera à la même photo, mais avec la lumière allumée, les autres objets devenant ainsi visibles et les interactions avec eux devenant possibles.

Aucun texte ne sera présenté pendant cette page principale, se voulant avant tout une page de mise en condition « psychologique » (légère perte de repères, interrogation, surprise), si ce n’est de simples étiquettes « live », « learn », « share ».

En effet, l’ensemble du site sera rédigé en anglais afin d’être à la fois accessible au plus grand nombre d’internautes et de respecter la langue originale du groupe Radiohead.

8

Live (ou experience) Parcours

Contenu de la balade

Les parcours sont au nombre de cinq, représentés par cinq différentes couleurs sur la carte ci-dessus.

Un parcours est constitué par un ensemble de photos. Une musique de Radiohead est jouée en boucle, tant que l’utilisateur navigue entre les photos d’un même parcours.

Carrefour Départ

9

Pour naviguer entre les photos, l’utilisateur doit cliquer sur une zone de la photo. Cette zone est :

soit toute la photo dans le cas où il n’y a pas de choix de parcours pour l’utilisateur : il faut obligatoirement continuer le même chemin ; cependant, un temps maximal par photo pourra être fixé afin de continuer le chemin sans s’éterniser sur une vue en attendant le clic de la part de l’utilisateur ;

soit choisie parmi plusieurs zones réactives, représentant les différents chemins que l’on peut emprunter ; ces zones sont éclairées de manière plus importante lorsque l’utilisateur les survole à la souris, sauf en ce qui concerne le chemin que l’on est déjà en train de suivre ; celui-ci reste éclairé tout le temps afin que l’utilisateur puisse choisir de continuer le parcours et donc la chanson en cours s’il le désire.

Déroulement de la balade

Au début de la balade, l’utilisateur part de l’endroit marqué par le point noir. Il parcourt donc obligatoirement le parcours « noir » (avec la musique correspondante, voir plus bas), pour se retrouver au carrefour situé après le pont Solférino. Il va pouvoir choisir entre trois chemins : « rouge », « orange » et « vert ».

En choisissant un de ces trois chemins, une nouvelle musique de Radiohead se lance (et se jouera en boucle), jusqu’à ce que l’utilisateur choisisse de changer de chemin. Il pourra le faire à chaque endroit de la carte marquée par un cercle. Dans ce cas une nouvelle musique de Radiohead se lance, et se jouera donc jusqu’à nouvelle « bifurcation » de la part de l’utilisateur. A tout moment de la balade, l’utilisateur aura la possibilité de revenir à la page d’accueil en cliquant sur un bouton « exit » situé sur un des bords de l’écran.

Interactions contextuelles

A différents endroits du parcours, l’utilisateur aura la possibilité d’interagir avec des éléments du décor. Comme pour le choix d’une bifurcation, il cliquera sur la zone réactive correspondante qui s’éclairera plus fortement lors du survol par la souris.

Lorsque l’utilisateur décide d’interagir avec un élément du décor, une photo relative au contexte sera montrée, et une autre musique de Radiohead lancée. A la suite de l’interaction, l’utilisateur se retrouve à l’endroit de la dernière photo précédant l’interaction.

Quelles musiques pour quels parcours ?

Parcours noir : « Sit down, stand up. » Parcours orange : « Sail to the Moon » Parcours vert : « Idioteque » Parcours rose : « Climbing up the Walls » Parcours rouge : « Where I End and You Begin »

10

Learn La page Learn, destinée à renseigner l’internaute sur la composition du groupe et sur les

albums critiqués par la presse et autres rock-critics, se présente sous la forme d’une image composée :

chaque membre du groupe pourra être survolé à la souris individuellement afin d’en présenter une courte description (nom, rôle de compositeur, instruments joués, …) ;

chaque album (depuis Pablo Honey en 1993 jusqu’à leur nouvel album prévu pour 2007) pourra également être sélectionné ;

des liens seront proposés à l’introduction de la page (c’est-à-dire avant de cliquer sur un des éléments réactifs).

Share Dans le livre d’or, l’écran sera divisé en deux. La plus grande partie de l’écran sera

constitué par une page où l’utilisateur pourra taper le message qu’il désire (critique, encouragement, question,…).

En haut de la page, trois boutons seront présents permettant les actions suivantes :

envoyer son message, et donc le faire partager : « share » ;

consulter les messages déjà écrits « observe » ;

retourner à la page d’accueil « exit ».

11

Storyboard

Arrivée sur le site

A l’arrivée sur le site, la lumière est « éteinte ».

seule zone réactive de la page

12

Au survol de la lampe par la souris, un halo lumineux indique à l’utilisateur qu’une interaction est possible

Une fois la lumière allumée, les trois zones peuvent être survolées : un effet de halo lumineux lors du survol de la souris indiquera à l’utilisateur qu’il peut cliquer, une étiquette texte lui indiquera ce à quoi il peut s’attendre.

Live (Experience)

Share

Learn

13

Voici ce que l’utilisateur aperçoit lorsqu’il survole la zone du poster avec sa souris.

Voici ce que l’utilisateur aperçoit lorsqu’il survole la zone de la fenêtre avec sa souris.

14

Voici ce que l’utilisateur aperçoit lorsqu’il survole la zone de la feuille de papier avec sa souris.

15

Live (ou experience)

Les flèches de changement de direction seront remplacées par des « boutons » transparents plus ou moins lumineux (suivant le survol de la souris, avec le chemin en cours mis plus en avant à l’aide d’une luminosité plus forte). Les couleurs identifient les différents parcours (uniques repères au sein de la balade).

16

Learn

Exemple de navigation au sein de la page « Learn » : une introduction est présentée (qui sera complétée à terme par des liens vers des d’autres sites intéressants).

L’utilisateur peut alors cliquer sur un album, ici Pablo Honey, qui sera présenté à l’aide de citations d’articles de presse (plus ou moins) spécialisée, et dont les références seront bien évidemment indiquées.

17

Share

Ceci est le livre d’or : les boutons « share » et « observe » permettent respectivement d’envoyer un message ou de lire ceux des autres internautes. Les messages à lire apparaissent dans la zone constituée par la feuille, qui constitue également la zone d’écriture. La simplicité de l’interface a été privilégiée par rapport au nombre d’action possibles.

18

Bilan

Le site étant sur le point d’être achevé, nous faisons le bilan du travail effectué.

Nous avons réussi à atteindre les objectifs fixés (site conforme au cahier des charges) dans les contraintes de temps imposées par le cadre de l’UV SI28.

Une des difficultés rencontrées a été au niveau de l’agencement de la rubrique « experience », constituant la balade virtuelle dans Compiègne.

En effet, nous avions dès le début l’intention de réaliser une expérience pour le visiteur visant à ce qu’il soit plongé dans l’univers de Radiohead, Pour cela, nous avions beaucoup d’idées. Il a cependant été difficile de structurer le déroulement de cette rubrique, en organisant les différents scénarios possibles (combien de chemins, quelles transitions entre les chemins, quelle longueur pour chaque chemin,…), et le degré d’interactivité qu’aurait le visiteur (présence ou non d’interactions contextuelles, …).

Cette expérience nous aura appris un certain nombre de choses sur les logiciels Photoshop, Dreamweaver, Flash et le langage PHP.

Cependant, l’apport principal aura été au niveau de la structuration des idées. En effet, nous avons pris conscience grâce à la difficulté énoncée, de l’importance de la structuration et de l’organisation des idées lors de la conception d’un site web, même si il s’agit d’ un site à connotation artistique comme le nôtre.

La conception de ce site nous laisse de bons souvenirs, et nous a permis de progresser tant au niveau technique qu’au niveau de l’organisation. Ne nous connaissant pas avant l’UV , l’apport humain de ce projet est également une des satisfactions que nous tirons à la fin de cette aventure SI28. Nous la recommandons vivement à tout individu désireux de s’enrichir sur le plan technique, social et personnel.