Agence fictive "La Meute" - Dossier de recommandation by Sarah Mebarki

DOSSIER DE RECOMMANDATION Chef de projet : Mohamed Bouhiya

Projet de webdocumentaire «Paris’Go» réalisé par l’agence La Meute

Tuteur : M.Benchenna

Équipe : Florian Lassalle Tiago De Carvalho Hugo Hamdaoui Sarah Mebarki Chloé Demaison

DUT Métiers du Multimédia et de l’Internet.

SOMMAIRE

1. INTRODUCTION

p.1

- Présentation de l’agence - Le projet

2. ENQUÊTE CIBLE

7. SOLUTIONS TECHNIQUES p.4

- Analyse des résultats - Conclusion 3. SCÉNARIO DU PROJET - Le webdocumentaire - L’application mobile

- Offline - Stratégie de lancement

p.9

p.35

- Pré-requis - Arborescence des fichiers - Arborescence de l’application et du webdocumentaire - Sécurité - Référencement

4. APPROCHE GRAPHIQUE p.12 - Maquette du webdocumentaire - Maquette de l’application

8. PLANIFICATION ET RESPONSABILITÉS - Planning détaillé - Répartition des tâches

5. CHARTE GRAPHIQUE

9. CONCLUSION

p.47

10. ANNEXES

p.49

p.16

6.STRATÉGIE DE COMMUNICATION - Online

p.32

p.45

INTRODUCTION

INTRODUCTION PRÉSENTATION DE L’AGENCE

La Meute est une agence spécialisée dans le développement de projets multimédias pour les entreprises, les agences et les particuliers. Nous réalisons des applications mobiles et tablettes, des sites internet, et d’autre part, des vidéos de tous types (teaser, publicité, clips, courts-métrages) et de la photographie (publicité, mode, paysages, sport, urbain). Créée en 2015, La Meute a développée un savoir-faire dans les domaines du développement web et de la promotion audiovisuelle afin de permettre à nos clients de mieux communiquer et mieux vendre. L’agence est née à l’issue d’un projet réalisé en équipe en réponse à une commande d’un site internet. Nous avons alors décidé de conserver les membres de l’équipe et de créer notre propre agence créative à taille humaine composée de six personnes. À la direction, Mohamed Bouhiya supervise l’équipe pour mener à bien les projets. Au quotidien, nous accompagnons nos clients dans la mise en place de leur stratégie communicationnelle, la scénarisation des projets, l’élaboration de chartes graphiques innovantes et créatives. Notre équipe accompagne nos clients tout au long du projet, de la conception au déploiement. Pour finir, nous proposons éga-

-lement d’aider à la mise en place des e-mailings et des newsletters. La Meute revendique dynamisme, originalité et innovation. Elle est appréciée pour son aspect polyvalent. Le nom de l’agence, “La Meute”, inspire la cohésion, la collaboration et la force. Cela représente parfaitement l’état d’esprit de l’équipe, que ce soit entre les membres eux mêmes qu’entre les clients et l’agence.

LE PROJET Paris’Go est un webdocumentaire interactif intégrant son, photo, vidéo. Il offre à l’utilisateur une certaine forme de liberté. Il est en quelque sorte acteur du webdocumentaire en transgressant les normes de la narration linéaire. Il pourra choisir son propre parcours afin de choisir uniquement les informations qui l’intéressent. Paris’Go vise à faire découvrir des lieux insolites et méconnus de Paris à travers un support original grâce à notre interface principale représentée par une carte interactive en trois niveaux de hauteur. Nous cherchons à ce que l’internaute vive une belle expérience basée sur l’immersion totale qui lui donnera envie d’aller à la découverte réelle des endroits qui lui plaisent.

INTRODUCTION OBJECTIF PRINCIPAL

CIBLES

Notre objectif principal est de faire découvrir ou bien de faire redécouvrir Paris sous un nouveau jour en créant un webdocumentaire permettant à l’utilisateur d’être libre, en proposant une visite originale organisée en trois niveaux d’altitude et en utilisant des moyens visuels animés et attrayants tout en en ajoutant une dimension culturelle au projet. Le but étant de se distinguer des nombreux sites internet que l’on peut trouver sur ce sujet.

Nous visons en priorité les personnes actives en Ile de France qui sont intéressées par les activités culturelles et le numérique. D’autre part, nous visons toute personne susceptible de se rendre à Paris, que ce soit des touristes étrangers ou des touristes français venant de l’autre bout de la France, ayant l’habitude de venir de temps en temps ou bien pour une toute première visite.

ENQUÃ&#x160;TE CIBLE

ENQUÊTE CIBLE Notre volonté de se rapprocher au maximum de notre cible nous a poussée à réaliser un sondage. Celui-ci est composé de sept questions qui permettront de comprendre qui sont véritablement nos cibles (âges, professions, rapport à Paris, etc…) et quelles sont leurs besoins. Nous avons récoltés une petite centaine de réponses qui, malgré leur faible nombre, seront d’une utilité précieuse.

LE SONDAGE

ENQUÃ&#x160;TE CIBLE

ENQUÊTE CIBLE ANALYSE DU SONDAGE Après avoir récolté un bon nombre de réponses, nous avons directement constaté que notre sondage a touché une majorité de jeunes entre 18 et 25 ans. En effet, nous avons eu 67 réponses de personnes de cette tranche d’âge sur 87 réponses en tout. Nous avons ensuite 13 personnes âgées de 50 ans et plus qui ont répondu à notre sondage. Les moins de 18 ans représentent que 7 réponses, les 35-50 ont été que 3 à répondre et pour finir, les 25-35 ans représentent 2 réponses.

Concernant les CSP (catégories socio professionnels), on peut directement constater que que les étudiants sont très largement majoritaires puisqu’ils représentent plus de 60 sondés. On retrouve une dizaine de retraités, 8 employés, ainsi que quelques personnes sans emplois et des indépendants. Grâce à la troisième question, on apprend que la majorité des personnes vivent à Paris ou dans sa banlieue proche. Les autres sondés habitent en dehors de la région parisienne (une trentaine de personnes),voirmême à l’étranger. Au niveau de la fréquence des visites à Paris, les sondés se rendent principalement plusieurs fois par mois sur Paris. Cependant, on peut aussi prendre en compte qu’une vingtaine de personnes ne se rendent jamais à Paris.

S’en suit des personnes minoritaires qui ne se rendent sur Paris qu’une fois par mois ou par an. A la question “connaissez-vous des lieux peu connus dans Paris?”, presque 60 personnes sur 87 ont répondu négativement. De plus, presque 80 personnes sur 87 seraient intéressées par notre projet.

CONCLUSION Grâce aux réponses que nous avons reçues, on constate grâce aux trois premières questions que notre cible est largement constituée de jeunes étudiants, entre 18 et 25 ans, vivant à Paris ou dans la banlieue de la capitale. Cet élément reste tout de même utile, puisqu’il nous apprend que la majorité des personnes ciblés, en plus d’être de jeunes adultes actifs, vivent à côtés des lieux que nous avons sélectionnés. Cela représente un avantage non négligeable puisque les jeunes travailleurs et étudiants, souvent préoccupés par leur travail, allouent que peu de temps pour les loisirs. Leur proximité est donc plus qu’intéressante puisque les temps de trajets seront raisonnables et ne décourageront pas les personnes. De plus si on se fie aux réponses de la quatrième question, même si une vingtaine de personne disent ne jamais se rendre à Paris, les sondés se rendent assez

ENQUÊTE CIBLE régulièrement à Paris (on parle ici de plusieurs fois par mois). Nos lieux pourront donc présenter une alternative à d’éventuelle sorties en familles ou entre amis en proposant des lieux originaux et peu connus. Concernant les deux dernières questions, autant de réponses positives à ces questions fondamentales (presque 80 réponses “oui” sur 87 à la question “Seriez-vous intéressé par notre webdocumentaire”) donne toute la légitimité à notre projet.

SCÃ&#x2030;NARIO DU PROJET

SCÉNARIO DU PROJET La description de notre scénario permet de mettre en évidence toutes les fonctionnalités de notre projet. Le but est de se mettre à la place d’un utilisateur qui découvre notre webdocumentaire afin de préciser toutes les possibilités qui vont s’offrir à lui. Autrement dit, notre scénario permet d’expliquer tout ce que l’utilisateur va pouvoir faire à travers le webdocumentaire et l’application mobile.

LE WEBDOCUMENTAIRE Lorsque l’utilisateur se rendra sur notre webdocumentaire, une courte vidéo introductive en plein écran s’affichera et ensuite il découvrira l’interface interactive principale avec en fond une vidéo illustrant le thème du projet. Il y aura aussi un un onglet pour s’identifier. Cette interface proposera trois plateformes en 3D. Ces dernières représentent les trois différents niveaux de visite. Il y aura une plateforme relative aux lieux situés en hauteur, une autre en dessous qui donnera accès aux lieux situés en pleine ville, et la dernière qui représentera les lieux souterrains. Lorsque l’utilisateur sélectionnera un niveau, une animation fera disparaître les deux autres et laissera place au niveau et aux lieux insolites en rapport. Ensuite, quand l’utilisateur va choisir un lieu en particulier, une courte vidéo d’introduction présentera le lieu en grand écran afin de la rendre immersive. Ensuite, l’utilisateur

aura accès à des ressources diverses au sein d’une nouvelle interface. Il pourra accéder à des interviews de personnes fréquentant le lieu en question, des touristes ou encore des historiens. Ces interviews seront sous forme de vidéos ou transcrites en fonction des accords des intervenants quant au droit à l’image. Il y aura aussi une galerie d’images réalisées par nos soins relatives au lieu. Une autre rubrique apportera des précisions sur le lieu : il y aura une courte description, des informations sur l’accès, des contenus historiques et des informations complémentaires (entrée payante ou non, horaires d’ouverture, bon plans, accès aux personnes à mobilité réduite, etc…). Pour finir, il y aura un accès à des adresses de lieux intéressants dans les environs (cafés, musées, boutiques, événements, etc…).

L’APPLICATION MOBILE Notre application mobile aura le même type d’arborescence que le webdocumentaire. En effet, l’utilisateur aura la possibilité de s’identifier et ensuite de choisir les trois niveaux expliqués précédemment. Ces niveaux seront représentés différemment étant donné qu’on utilise ici des devises mobiles qui ne permettent pas les mêmes interactions.

SCÉNARIO DU PROJET Lorsque l’utilisateur aura choisi un niveau, il pourra choisir un lieu en particulier à partir d’une carte google maps. Il aura ainsi accès à une rubrique “Itinéraire” qui utilisera sa géolocalisation afin de proposer les différents chemins possibles pour rejoindre le lieu suivant les choix de l’utilisateur (à pieds, en voiture, en transports, le chemin le plus rapide, etc…). Une fois sur place, l’utilisateur aura la possibilité de partager un commentaire et ainsi interagir avec d’autres utilisateurs qui ont déjà visité le lieu via une rubrique “avis”. Il aura aussi la possibilité de poster des photos grâce aux réseaux sociaux associés à l’application mobile.

En bas de page, il y aura un accès à des rubriques générales : “Géolocalisation” : cette rubrique permettra de retourner à la page d’accueil avec les trois niveaux de visite. “Recherche” : cette rubrique permettra de rechercher directement un lieu. “Compte” : cette rubrique permettra de gérer son compte. “A ne pas rater” : cette rubrique annoncera les bons plans et événements à venir.

APPROCHE GRAPHIQUE

MAQUETTE WEBDOCUMETAIRE

Voici le gabarit d’écran de l’accueil du webdocumentaire. Il est composé de trois cartes superposées, sur lesquelles sont disposés des marqueurs d’emplacement correspondant aux lieux présentés. Survoler les marqueurs avec la souris permet de découvrir les lieux et d’afficher des liens vers les présentations de ces derniers.On retrouve le logo, caché aux 3/4, en bas à gauche de l’écran. Le logo, une fois survolé par la souris de l’utilisateur, fait apparaitre un menu. A droite de l’écran, on retrouve des liens vers les comptes de réseaux sociaux du webdocumentaire.

MAQUETTE WEBDOCUMETAIRE

Voici le gabarit de l’écran d’accueil une fois les marqueurs d’emplacement et le logo survolés. Le logo, une fois le curseur de la souris passé dessus, fait apparaitre un menu permettant un accés rapide et facilités aux ressources qui intéressent l’utilisateur. Les marqueurs font également apparaitre une animation déroulante qui permet d’accéder directement à la présentation d’un lieu.

MAQUETTE WEBDOCUMETAIRE

Voici un gabarit d’écran qui schématise la page qui apparaitra lorsque l’utilisateur cliquera sur l’un des lieux présentés sur la page d’accueil. Une vidéo se lancera automatiquement après le clic de l’utilisateur. Ce dernier aura accés à un lecteur vidéo lui permettant de régler le volume, et d’avancer ou de reculer dans la vidéo. Il aura également la possiblité de revenir à l’accueil via le logo présent en haut à gauche de l’écran, Un bouton «Passer» permettra à l’utilisateur de tout simplement passer la vidéo si il le souhaite, et d’accéder directement aux ressources de son choix.

MAQUETTE APPLICATION

Nous avons réalisé quelques gabarits pour l’application mobile. Durant le chargement de l’application, le logo «Paris’Go» apparaitra. L’utilisateur commencera sa navigation en choississant quel «étage» de Paris il souhaite visiter. Suite à son choix, il pourra choisir un lieu en particulier via une carte google maps, qui permet la géolocalisation. Une fois le lieu choisi, l’utilisateur accède à des informations et photos du lieu. Il aura la possibilité de se créer un compte sur l’application (connexion par FB possible), afin d’enregistrer des informations sur ses visites.

CHARTE GRAPHIQUE

Paris’Go est un webdocumentaire mettant en scène le Paris sur trois niveaux : les hauteurs, le sol et le sous-sol. Cette charte graphique a pour objectif d’aider à l’utilisation du logotype. Vous y retrouverez les éléments indispensabes à sa bonne utilisation. L’agence La Meute, responsable de ce projet, reste à votre entière disposition pour répondre à vos questions relatives à l’esthétique ou à l’utilisation du logotype de Paris’Go.

SOMMAIRE

1. Logotype 2. Couleurs 3. Typographie 4. Règles d’utilisation 5. Déclinaisons

LOGOTYPE

21 Le logotype Paris’Go est scindé en deux parties : une partie iconique et une partie scripturale. La partie iconique est la représentation du concept du webdoumentaire sous forme d’une identité visuelle c’est-à-dire un plan sur trois niveaux, représenté par trois plans rectangulaires de couleurs différentes. La partie scripturale est quant à elle beaucoup plus simple, il s’agit simplement du nom du webdocumentaire. La partie scripture et la partie iconique ont toutes d’eux un effet d’ombre porté créant un léger effet de 3D.

COULEURS

Pantone 1585C

Pantone 663C

Pantone 2925C

Pantone 200C

RVB R : 255 V : 102 B:0

RVB R : 255 V : 255 B : 255

RVB R : 25 V : 181 B : 254

RVB R : 204 V:0 B : 51

Hexa #FF6600

Hexa

Hexa #19B5FE

Hexa #CC0033

Transparence 70%

#FFFFFF

TYPOGRAPHIE

TYPOGRAPHIE Au sein du webdocumentaire, nous retrouvons trois polices : «Raleway» est employée pour les corps de textes. Cette police peut être utilisée en regular, chartée ci dessous, ainsi qu’en regular italique... Raleway Weight: 200 Style: regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)

Raleway Weight: 200 Style: italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)

TYPOGRAPHIE ... «Open Sans Condensed», elle, est utilisée pour les titres. On utilisera cette police en lettres capitales, de préférence. La troisième police est celle du logotype «Agency FB», elle est utilisée uniquement en lettres capitales pour les grands titres. Open Sans Condensed Weight: 300 Style: normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)

Agency FB Weight: 200 Style: normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890(,.;:?!$&*)

REGLES Dâ&#x20AC;&#x2122;UTILISATION

MARGES

O O

Une marge de sécurité équivalente à la taille de la lettre O du logotype Paris’Go doit être respectée lors de l’utilisation du logotype.

INTERDITS Le logotype ne doit pas être étiré. On ne peut modifier ses dimensions initiales en le déformant.

Aucune variation de couleurs n’est autorisé sur le logotype. Que ce soit pour la police ou la partie picturale.

Il est impossible de modifier la disposition du logotype.

UTILISATION Le logotype Paris’Go peut être utilisé sur plusieurs type de fond, tant que l’intégrité et les marges de sécurité du logo sont respectés. Sur un fond constitué d’une photographie, ou d’une image, il est possible d’appliquer le logo tel quel, sans modifications préalable.

Sur un fond de couleur uni, le logotype s’utilise de la même façon que sur une photographie : marge de sécurtié et intégrité respectés, pas de modifications préalables.

Grâce à son effet d’ombre porté, le logotype Paris’Go peut également être utilisé sans modifications sur un fond dont la couleur est celle d’une des valeurs chromatiques du logo.

Nous vous remercions d’avoir pris connaissance de la charte graphique du logotype pour le projet de webdocumentaire Paris’Go, réalisée par l’agence La Meute. Nous restons à votre entière disposition pour d’éventuelles questions supplémentaires.

STRATÃ&#x2030;GIE DE COMMUNICATION

STRATÉGIE DE COMMUNICATION

Notre campagne de communication a pour but de promouvoir notre projet au travers de différents supports médiatiques et non-médiatiques. Nous souhaitons éviter de tomber dans les inconvénients de la publicité qui a tendance à excéder les utilisateurs. Nous voulons avant tout communiquer avec nos potentiels utilisateurs en restant attractifs et ludiques. Nous aurons une stratégie en online et en offline. Dans le cadre de l’online, nous serons présents sur les réseaux sociaux. Dans le cadre de l’offline, nous créerons des affiches de type print. Notre stratégie de lancement sera basée sur l’événementiel.

présents sur le webdocumentaire. Nous aurons accès aussi aux avis des internautes via leurs tweets avec #PARISGO.

ONLINE

Au niveau des communications via le print, nous envisageons de créer des flyers de notre projet PARIS’GO signés par l’agence La Meute et les distribuer dans la rue, les déposer dans des musées, centres culturels, offices de tourisme, boîtes aux lettres, lycées et campus universitaires afin de promouvoir nos événements et le webdocumentaire. Ces flyers reprendront la charte graphique de notre projet. Les flyers seront concis, reprenant les informations les plus importantes : la date et le lieu de l’événement, sa nature et le moyen de nous contacter pour d’éventuelles questions. Le fait de les distribuer nous permettra d’être plus proche de notre cible et donner plus d’informations si nécessaire. Nous intégrerons dans nos flyers un QR code (Quick Response Code), qui grâce à une application mobile permettra un accès instantané au webdocumentaire.

Dans le cadre de l’online, nous utiliserons tout d’abord et principalement Facebook afin de faire la promotion de nos événements. L’outil Facebook nous offre le moyen de connaître la popularité de nos publications car il indique le nombre de vues ainsi que le nombre de clics sur notre page officielle. Cela nous permettra de cibler ce qui fonctionne le mieux et les commentaires des internautes ont une importance primordiale car ils nous permettrons d’évoluer en fonction de leurs avis. Nous serons présents aussi sur twitter pour les actualités concernant la communauté. Cet outil va nous permettre de regrouper les internautes par le biais des hashtags

Pour finir, nous allons ouvrir aussi une chaîne Youtube qui va nous permettre de publier des teasers faisant la promotion des évènements et aussi des vidéos de Paris en tout genre pour créer une continuité générale de notre projet.

OFFLINE

STRATÉGIE DE COMMUNICATION Nous serions aussi intéressés par le fait de disposer des affiches promotionnelles dans des endroits potentiellement fréquentés par notre cible dans la mesure du possible.

STRATÉGIE DE LANCEMENT Notre stratégie de lancement sera basée sur l’événementiel. Ainsi, nous utiliserons aussi le print pour déployer des flyers. Nous comptons opter pour une stratégie de lancement différée, c’est-à-dire que nous souhaitons d’abord lancer le webdocumentaire et ensuite lancer l’application quelques temps après. Pour le lancement du webdocumentaire, on participera à un salon du Numérique pour présenter notre projet fini. On mettra à disposition des personnes visitant le salon des ordinateurs afin de parcourir le webdocumentaire. Ainsi, ils pourront nous donner des avis à chaud et nous permetterons d’améliorer si nécessaire notre projet. Nous distriburons également des flyers annonçant l’arrivée de l’application ultérieurement à l’occasion d’une chasse au trésor ou un jeu de piste dans les lieux que nous présentons.

SOLUTIONS TECHNIQUES

SOLUTIONS TECHNIQUES Dans notre cahier des charges, nous avons expliqué nos intentions quant au résultat final de notre webdocumentaire. Mais il faut avant tout réfléchir à des solutions techniques afin de réussir à réaliser au mieux notre projet. Pour y parvenir, il faut se poser des questions indispensables comme sur le schéma suivant :

Nous souhaitons créer des supports ergonomiques afin de faciliter au maximum la navigation pour toucher un large public. La base de notre projet est de créer une navigation facile entre différents lieux grâce à une carte 3D de Paris sur trois niveaux d’altitude. Pour la conception, nous utiliserons différents langages de programmation pour créer notre interface : HTML5 permettra d’élaborer la mise en forme, CSS3 permettra la mise en page du code HTML, JavaScript/JQuery permettront de dynamiser le webdocumentaire, PHP permettra de mettre en forme l’interface utilisateur et enfin MYSQL pour les bases de données.

Paris’Go est un webdocumentaire ayant pour continuité une application mobile qui présente divers lieux insolites et méconnus situés à Paris. Ainsi, notre webdocumentaire devra être accessible sur tous les ordinateurs via tous les navigateurs web et les systèmes d’exploitation. Et d’autre part, l’application devra elle aussi être accessible aux différents systèmes d’exploitation pour toucher le plus de personnes possibles.

SOLUTIONS TECHNIQUES

PRÉ-REQUIS

CONTENU DES RUBRIQUES

L’accès au web documentaire se fera à travers tous les navigateurs web récents comme Google Chrome, Mozilla Firefox, Opera, Safari, IE9.

Chaque rubrique propose un contenu différent pour l’utilisateur, les rubriques seront présentés après la vidéo de présentation d’un lieux, la rubrique “photos” mettra à disposition de l’utilisateur des images concernant le lieux choisis par celui-ci.

Quant à l’application mobile, elle sera développée en JAVA car ce langage offre une grande portabilité, elle intégrera la carte google map de Paris. L’application sera accessible sous Android pour les versions supérieures à 2.0, iOS pour les versions supérieurs à 9, et sous Windows Phone en version supérieure à 8.

La rubrique “vidéos” proposera diverses vidéos concernant également le lieux choisis par l’utilisateur, il pourra ainsi découvrir le lieux avant même l’avoir vue. Puis une rubrique “histoire” qui présentera l’histoire du lieux dans son intégralité afin de faire découvrir ce qui se cache réellement derrière ce lieux. Cela permettra aussi pour l’utilisateur d’avoir une culture historique sur le lieux. Pour finir une rubrique “interview” sera mis à disposition de l’utilisateur, cette rubrique présente une vidéo d’interview d’une personne ayant côtoyé le lieux, elle pourra ainsi partager son opinion et ses impressions concernant le lieux qu’elle présente.

SOLUTIONS TECHNIQUES

CONVENTION DE NOMMAGE ET ARBORESCENCE

L’arborescence des dossiers et fichiers du site se présente de la manière suivante : Le dossier principal PARIS’GO contiendra tout d’abord les fichiers html, php, et MySQL, la page principale du webdoc se nommera index, il se composera ensuite de plusieurs sous-dossiers : Le sous-dossier images contiendra les diverses images des lieux. Le nommage sera du type : nom_lieux_id.format (la_peite_ceinture_n1.jpeg) Le sous-dossier vidéo contiendra les vidéos de chaque lieux et un autre sous-dossier Interview avec les différentes vidéos d’interview. Les nommages seront : pres_ nom_lieux_id.format, intv_nom_lieux_id.format et teaser_nom_lieux_id.format Le sous-dossier audio contenant les sons en formats mp3, mp4 de chaques lieux. Le nommage sera du type : audio_nom_lieux_id.format Le sous-dossier CSS contant les différentes feuilles de style CSS : nomfichier.css Ainsi qu’un sous-dossier JS contenant les fichiers JavaScript : nomfichier.js

SOLUTIONS TECHNIQUES

ARBORESCENCE DU WEBDOCUMENTAIRE ET DE L’APPLICATION MOBILE L’arborescence du webdocumentaire se présente de la manière suivante : Une vidéo d’introduction sera mise à disposition de l’utilisateur, il accédera ensuite à une interface présentant 3 niveau avec un lieux différents selon le niveau sélectionnée par celui-ci. Une vidéo de présentation du lieux ainsi que plusieurs rubriques (Photos,vidéos,histoire et interview) sera à sa disposition afin de lui permettre de découvrir davantage sur le lieux en question.

SOLUTIONS TECHNIQUES L’arborescence de l’application mobile se présente de la manière suivante : Le principe est le même que pour le site, mais après avoir choisis le niveau souhaitée, l’utilisateur disposera d’une map google et pourra ainsi choisir le lieux, des rubriques seront également mis à sa disposition pour consulter son profil, faire une recherche, avoir accès à un système de géolocalisation ou bien avoir des informations sur le lieux.

ACCUEIL 40 La tête dans les nuages

Le plancher des vaches

Google maps

Les 20 milles lieux sous Paris

Google maps

Géolocalisation

Proﬁl

Géolocalisation

Proﬁl

Géolocalisation

Proﬁl

Recherche

Infos

Recherche

Infos

Recherche

Infos

SOLUTIONS TECHNIQUES

Côté application mobile :

Les trois niveaux :

Toute personne qui accédera à un web documentaire depuis son téléphone sera redirigé vers l’application mobile qui sera disponible en téléchargement sur Google Play.

Il s’agit des trois niveaux d’altitude présents sur l’interface principale du webdocumentaire où seront classés les différents lieux pour une meilleure ergonomie et une bonne interactivité. => Solutions apportées :

Nous envisageons ici une interactivité basée sur le zoom d’image. Quand l’utilisateur passera la souris sur un niveau, l’image sera zoomée vers l’avant ce qui permettra de donner l’impression à l’utilisateur d’entrer dans la catégorie sans même avoir cliqué dessus. Nous ferons appel à des langages de programmation comme HTML et CSS pour cela. Le site possède plusieurs animations qui seront réalisées en CSS3 et JavaScript nous n’utilisons pas de canvas.

=> Solutions apportées : Pour cela nous utiliserons les medias queries qui sont des règles à appliquer aux différents styles css selon les multiples tailles d’écran auquel nous pouvons faire face à l’avenir. Ainsi qu’une page de redirection vers l’application mobile à télécharger si celui-ci veut accéder au webdocumentaire depuis son mobile. Afin de développer l’appli nous utiliserons java comme langage de programmation mais il est possible que ce choix change pour le langage C. Notre choix se portera sur le langage qui sera le plus en adéquation avec nos objectifs. Les lieux :

Responsive design Ordinateur/Application mobile: Côté ordinateur : Le webdocumentaire devra être en responsive design pour s’adapter à différents types d’écrans d’ordinateur,

Il seront décrits à travers des contenus visuels auditifs et textuels les uns comme les autres étant là pour informer l’utilisateur sur le lieux. -> Solutions apportées : La vidéo et l’audio seront mis en place avec le langage

SOLUTIONS TECHNIQUES HTML5 et les balises video src et audio src définissant la taille de chacun. Le texte sera émis à travers des balises Nous pouvons aussi avoir recours à l’insertion des vidéos via Youtube ou bien Dailymotion grâce à l’attribut type=»application/x-shockwave-flash» dans une balise object et en indiquant le chemin d’accès Youtube de la vidéo. Formulaire d’inscription : Un formulaire d’inscription permettra à l’utilisateur de créer un profil et de lui donner accès à des avantages comme la possibilité d’écrire des commentaire sur les différents lieux. -> Solutions apportées : Pour cela nous utiliserons du PHP, cela nous permettra de communiquer avec nos bases de données.

-> Le login : Le login permettra à l’utilisateur de se connecter suite au formulaire d’inscription qu’il à compléter précédemment. -> Solutions apportées : Ce concept se fera aussi grâce au langage de programmation PHP, afin vérifier que l’utilisateur est bien présent dans notre base de données. Une base de donnée nécessaire au stockage des données utilisateurs et lieux : Une base de données utilisateur sera nécessaire pour stocker les informations saisies par l’utilisateur lors de son inscription, pour cela nous aurons besoins de stocker son id, nom d’utilisateur, son mot de passe, son adresse mail ainsi que son âge, sa localisation et son numéro de téléphone. Nous aurons aussi besoin d’une base de données lieux qui stocke les informations concernant les différents lieux l’id lieux, le nom du lieux, sa superficie ainsi que son adresse.

SOLUTIONS TECHNIQUES SÉCURITÉ Le site nécessite aussi une sécurisation au niveau du formulaire d’inscription et du login ainsi que sur le site. Un script javascript qui va permettre d’enregistrer les données envoyée par formulaire et par login, nous crypterons les mots de passes avec du PHP ainsi que MD5 qui est une technique de cryptologie. Le parsage des données et le fait que nous développons notre application sur windows nous protège des Command injection.

La fonction TRACE sera désactivée pour rendre le site moins vulnérable aux XST. Pour une sécurisation optimale nous devons récupérer nos base de donnees grace a un script python (de préférence) qui automatise l’action puis les stockées sur une machine en local. Seulement n’ayant pas de serveur à disposition et ne possédant au sein du groupe que nos machines personnelles nous n’utiliserons pas cette solution. D’autre part nous devrions mettre en place un reverse proxy ainsi qu’un WAF dispositif mis en place contre les RFI ou CSRF notamment, et pour une entière protection de l’application web mais également pour les utilisateurs car nous récoltons et manipulons leurs données, il est donc nécessaire de leur offrir une protection

aussi importante que possible. Cependant pour le moment nous n’avons pas les capacités de fournir un tel service.

SOLUTIONS TECHNIQUES RÉFÉRENCEMENT ET VISIBILITÉ Pour le référencement nous utiliserons dans le head de notre page, les balises html5 qui existent pour cette usage, par exemple : <header>, <footer>, <main>, <article>, <nav>, <aside> : pour structurer le site. <meta name=»keywords» content=»»> : pour une rapide description des mots clés pour le navigateur. <meta name=»description» content=»»> : pour une description de notre application web. <meta name=»author» content=»»> : pour préciser le des créateurs de l’appli ou préciser le nom de l’agence. Afin de mieux référencer il y a un travail préalable sur les ancres. C’est à dire qu’il faut un mot-clé en commun pour chaque url. Ainsi l’url doit être claire et concis, c’est à dire composé de mots clés et non de chaînes de caractères incompréhensible. Le site pourrait être également référencé sur d’autres sites fréquemments visites ce qui nous permettrait d’être mieux référencé sur google. Ainsi si d’autres sites nous référence alors nous serons considéré comme des acteurs de référence.

PLANIFICATION ET RESPONSABILITÃ&#x2030;S

PLANIFICATION ET RESPONSABILITÉS DIAGRAMME DE GANTT

RÉPARTITION DES TÂCHES

Sarah MEBARKI, notre infographiste, est chargée de créer les logos, les mises en pages du cahier des charges, des chartes graphiques. En résumé, elle s’occupe de tout ce qui touche à l’esthétique visuel de notre projet. De plus, elle participera à la prise de son sur les tournages pour aider l’équipe.

Afin de mener à bien notre projet, nous avons répartis les différentes tâches aux différents membres de l’équipe suivant leurs compétences respectives. Nous veillerons durant toute la réalisation du projet à communiquer régulièrement afin de rester le plus cohérents possible et afin de parvenir à un résultat le plus ressemblant à nos espérances.

Chloé DEMAISON, la rédactrice en chef, veille à la cohérence rédactionnelle dans tous les documents fournis, que ce soit le cahier des charges, les chartes graphiques, les contenus du site de l’agence, les contenus du webdocumentaire et de l’application web. Elle participe également à l’équipe de tournage et surtout à la réalisation des photos.

Mohamed BOUHIYA, le chef de projet, est chargé de superviser l’équipe et surveiller l’avancée du projet en se renseignant régulièrement auprès de chaque membre de l’équipe pour savoir où ils en sont. Étant aussi chargé de la partie audiovisuelle, il supervise et participe aux tournages et aux réalisations de photos sur les lieux choisis pour le projet.

Hugo HAMDAOUI, le rédacteur, aide la rédactrice en chef à la rédaction de tous les contenus, veille à l’orthographe et la syntaxe. Il participe aussi aux aspects communautaires et communicationnels du projet comme la réalisation de la campagne de communication et l’entretien des réseaux sociaux.

Voir les annexes.

Tiago DE CARVALHO et Florian LASSALLE, nos développeurs, sont chargés de coder le site de l’agence, le webdocumentaire ainsi que l’application web. Ils créent les interfaces, le design des différents supports ainsi que les animations, transitions et interactions.

CONCLUSION

CONCLUSION Dans le cadre de ce dossier de recommandation, le travail de l’agence a été d’établir des objectifs qui sont les suivants : Elaborer une enquête cible afin de mieux comprendre les attentes de nos cibles et pour mieux répondre à leurs besoins futurs sur notre webdocumentaire et notre application. Elaborer une campagne de communication sur différents supports multi-supports permettant d’être mieux connus et d’attirer grâce aux réseaux sociaux, aux événements et aux affiches. Décrire un scénario précis de notre webdocumentaire afin de voir le plus précisément possible comment notre projet va se mettre en place et ensuite trouver des solutions techniques pour répondre à nos besoins.

ANNEXES

DOSSIER AUDIOVISUEL

DUT Métiers du Multimédia et de l’Internet.

SOMMAIRE

1. EN QUELQUES MOTS

p.1

2. FICHE TECHNIQUE

p.2

- Analyse des résultats - Conclusion 3. TECHNIQUES CINÉMATOGRAPHIQUES p.4 - La Butte Bergeyre - La Cité Indutrielle de Vincennes - La Vénus Noire 5. SYNOPSIS - Vidéos d’ouverture - Vidéos par lieu - Interviews

p.6

6. MONTAGE

p.9

7. EQUIPE TECHNIQUE ET INTERVENANTS

p.10

8. PLAN DE TOURNAGE

p.12

EN QUELQUES MOTS La réalisation audiovisuelle du projet PARIS’GO, est un ensemble de minis courts-métrages, d’interviews et de photographies. Cette réalisation permettra de rendre notre webdocumentaire et notre application mobile plus intéressant aux yeux du public. PARIS’GO donne la parole aux citadins pour une excursion au coeur des lieux secrets et insolites de Paris.

FICHE TECHNIQUE

VIDÉOS D’OUVERTURE La Butte Bergeyre

TITRE La Butte Bergeyre SCÉNARIO, RÉALISATION LA MEUTE GENRE court métrage LANGUE Français AUDIO Son ambiant, musique DURÉE 30 secondes - 1 minute SUPPORT Canon XA35 et stabilisateur FORMAT 26,8 mm¹, f/1,8-2,8, avec zoom 20x, COMÉDIENS figurants ÉQUIPE personnes TOURNAGE 23 novembre 2016 PREMIERE Mars 2017

La Cité Industrielle de Vincennes

TITRE La Cité Industrielle de Vincennes SCÉNARIO, RÉALISATION LA MEUTE GENRE court métrage LANGUE Français AUDIO Son ambiant, musique DURÉE 30 secondes - 1 minute SUPPORT Canon XA35 et stabilisateur FORMAT 26,8 mm¹, f/1,8-2,8, avec zoom 20x, COMÉDIENS figurants ÉQUIPE personnes TOURNAGE 30 novembre 2016 PREMIERE Mars 2017

La Vénus Noire

TITRE La Vénus Noire SCÉNARIO, RÉALISATION LA MEUTE GENRE court métrage LANGUE Français AUDIO Son ambiant, musique DURÉE 30 secondes - 1 minute SUPPORT Canon XA35 et stabilisateur FORMAT 26,8 mm¹, f/1,8-2,8, avec zoom 20x, COMÉDIENS figurants ÉQUIPE personnes TOURNAGE 7 décembre 2016 PREMIERE Mars 2017

TECHNIQUES CINÃ&#x2030;MATOGRAPHIQUES

TECHNIQUES CINÉMATOGRAPHIQUES

CADRAGE

ECHELLE DU PLAN UTLISÉ

Panorama: utilisé pour découvrir un très large panorama qui n’entre pas dans le cadre fixe de la caméra

Très gros plan Plan large Gros plan Plan moyen

Travelling (avant, arrière, sur le côté) : la caméra se déplace horizontalement dans l’espace Timelapse: succession d’image prise à une intervalle régulière Plan fixe: Le décor ne change pas, seul les déplacements des personnages à l’intérieur du cadre créeront du mouvement et détermineront la dynamique de l’image. Travelling optique ou zoom: Les objectifs zooms permettent d’ajuster graduellement la distance focale et de passer d’un plan large à un gros plan sans changer la caméra de place.

SYNOPSIS

VIDÉO D’OUVERTURE

VIDÉO PAR LIEU

Paris, “ville lumière” ou encore “cité de l’amour” selon les anglais, se hisse devant Londres, New York et Sydney dans le classement des villes les plus admirées au monde d’après le journal 20 minutes.

Butte Bergeyre

La capitale, vitrine du luxe et de la gastronomie française, continue d’attirer bien des touristes chaque année. Bien qu’étant une ville touristique, Paris ne se résume pas à la tour Eiffel, aux quais de Seine ou encore aux Champs Elysées. Elle offre aux plus curieux des recoins insolites, en hauteur, dans ses sous-sols ou encore dans ses rues, qui pourraient presque nous faire oublier que nous nous trouvons à Paris.

Située sur une colline à l’ouest du parc des Buttes Chaumont qui culmine à une centaine de mètres d’altitude, dans le 19e arrondissement, la butte Bergeyre est un micro-quartier. Peuplée de petites maisons, elle abrite ėgalement un espace vert, le jardin de la Butte Bergeyre, comprenant un jardin partagé ainsi qu’un petit vignoble, le « clos des Chaufourniers ». Une route et deux escaliers peuvent vous mener jusqu’à la butte la plus secrète de Paris. La Cité Industrielle de Vincennes La Cité Industrielle ou Cité de la Jarry, à Vincennes, est considérée comme le plus grand squat artistique d’Île-de-France. Il s’agit d’un gigantesque bâtiment industriel datant de 1930. Laissée à l’abandon, la cité a repris des couleurs au milieu des années 2000 depuis que des artistes s’y sont installés. Aujourd’hui c’est un lieu de résidence de certains artistes contemporains mais il est menacé de destruction par la ville de Paris pour son état. En effet, elle va certainement être détruite en mai 2017. Plongeons-nous au sein de ce vestige du patrimoine francilien rhabillé par le street art.

SYNOPSIS La Vénus Noire :

Interviews

La Vénus Noire (ancien Caveau de la Bolée) qui a vu s’asseoir et boire Charles Baudelaire, Paul Verlaine, Arthur Rimbaud, François Villon et bien d’autres, dont vous pouvez lire les noms sur un des murs du bar. Ce bar se cache (passer sous les arcades) à deux pas de la Fontaine St Michel, avec sa cave voûtée datant de 1290.

Pour chaque lieu on présentera une ou deux interviews de personnes qui côtoient les lieux.

Découvrez ce bar d’exception et chargé en histoire.

La Butte Bergeyre Passants / habitués du lieu Habitant du micro-quartier La Cité Industrielle: Habitant Habitant (artiste) La Vénus Noire: Gérant Habitués

MONTAGE Lors de la troisième écriture des films nous opterons pour les vidéos de présentation et d’ouverture. Ce qui consiste a écrire le film en composant le sens et le rythme de l’œuvre cinématographique avec les images, le son, les plans, les raccords, les séquences. C’est en quelque sorte une opération stylistique. Pour les interview nous choisirons une opération matérielle, autrement à un montage par des cut et fondu.

EQUIPE TECHNIQUE ET INTERVENANTS

EQUIPE TECHNIQUE Mohamed Bouhiya Sarah Mebarki Chloé Demaison

Réalisateur, cadreur Son Assistante, Photographe

INTERVENANTS Habitants Habitué du bar Gérant du bar

PLAN DE TOURNAGE