Issuu on Google+

S E T T U B S LE T N O M U A CH CHARLINE BOURGEAIS

JEREMY LALLOZ

MARCEAU BODEZ

LAURE RABELLE

Le 21.09.2010 - ECOLE MULTIMEDIA

3


01. PRESENTATION GENERALE 02. DESCRIPTION EDITORIALE 03. DESCRIPTION FONCTIONNELLE 04. DESCRIPTION GRAPHIQUE 05. DESCRIPTION TECHNIQUE 06. PROMOTION ET ANIMATION 07. VIE DU PROJET ANNEXE. APPEL D’OFFRE

3


01 PRESENTATION GENERALE A. SYNOPSIS Le présent cahier des charges formalise et donne réponse à l’appel d’Offre lancé par le Département Culture et Animation de la Mairie du 19ème arrondissement de Paris, pour la création du site internet du parc des Buttes Chaumont. [Appel d’offre en annexe] Le site internet se positionnera comme un outil de communication et d’information interactif, en complémentarité des supports dits « traditionnels ». Il informera la population locale et étrangère sur les actions évènementielles et culturelles mises en œuvre, les services proposés, et valorisera enfin l’histoire, les valeurs écologiques et les atouts paysagers du parc.

B. CONTEXTE Né sur les vestiges d’anciennes carrières de gypse sous le régime de Napoléon III, le parc des Buttes Chaumont est devenu la promenade vivifiante du 19ème arrondissement. Il présente de nombreuses particularités (vallons, grottes, cascades, pelouses en libre accès, passerelles et ponts suspendus, temple gréco-romain...) qui favorisent aujourd’hui l’émergence de nouvelles activités culturelles et sportives : gym douce et courses organisées, cours de dessin, lecture publique, jardins partagés, projections cinématographiques… Ce sont aussi des festivals musicaux, expositions et activités plein air pour les enfants, de la maternelle au primaire.

Un site internet aux multiples objectifs Il répondra à une problématique réelle qu’est le manque d’information et de communication autour des activités présentes au sein du parc, et plus largement, sur le parc lui-même : Histoire, valeurs, identité visuelle.

4


01 PRESENTATION GENERALE Il permettra également : - de rassembler la population en leur permettant de participer à la vie des Buttes Chaumont - d’accompagner musicalement les visiteurs dans leurs activités (course, yoga, détente, etc.) en proposant la diffusion et le téléchargement de musiques libres sous licence « Creative Commons »

C. CIBLE Fréquentation du parc (étude portée sur une soixantaine de personnes) La population locale, habitants du quartier (54%) ou employés, constitue la majeure partie des visiteurs du parc. Cependant, par son patrimoine historique, le parc des Buttes Chaumont attire de nombreux touristes curieux de contempler son aménagement « factice » et sauvage. La fréquentation du lieu et du site internet sera amenée à varier selon l’horaire et la saisonnalité.

Motivations - Les familles avec enfant(s) et les « parisiens habitués », pour la détente, les loisirs, et les activités culturelles (type exposition plein air) l’après-midi et le week-end - Les employés/cadres travaillant à Paris, pour déjeuner à la pause du midi, ou en soirée après le travail - Les sportifs, dans le cadre de leur entraînement

Tranches d’âge

 

5


01 PRESENTATION GENERALE Habitudes de consommation Souvent de sexe féminin, entre 25 et 50 ans, notre cœur de cible est plutôt de profession intermédiaire (CSP type : employé de bureau). Il aime découvrir de nouveaux produits, et dans l’immense majorité, aime flâner sur le WEB à la recherche de nouveaux sites. Il privilégie les sites d’annonces, voyages, les guides d’achats, les sites à destination des parents, des enfants ou des femmes, les sites de santé / bien-être, de cuisine ou de décoration. Exemples de site : www.elle.fr, www.voyages-sncf.com, www.kijiji.fr, www.disneylandparis.fr

Localisation géographique Zone 1 (Cœur de cible) : quartiers de Belleville, La Villette, Gare de l’Est et Gare du Nord ; 10ème, 11ème, 18ème, 19ème et 20ème arrondissements Zone 2 : Paris Zone 3 : Ile-de-France Zone 4 (Cible étendue) : France et pays étrangers

6


01 PRESENTATION GENERALE D. ANALYSE DE L’EXISTANT L’espace concurrentiel du parc se définit par une approche thématique intégrant les centres d’intérêt du visiteur. Nom du site

Le Jardin des plantes

Adresse url

http://www.jardindesplantes.net

Public cible

Locaux + touristes : Jardiniers amateurs, amoureux de la nature...

Typologie du site

Site informatif jumelé à un espace participatif (BLOG)

Contexte Le Jardin des plantes est un jardin botanique, situé dans le 5ème arrondissement de Paris. Il appartient au Muséum national d’Histoire naturelle. Le site internet est accessible depuis mars 2010. Informatif et participatif, il est ouvert à tous les internautes qui veulent échanger leurs connaissances et expériences de la Nature.

Atouts / Forces - Graphisme et ambiance générale Une palette de couleurs harmonieuses et l’utilisation d’animations Flash contribuent à la mise en valeur du parc. Les visuels sont grands et de qualité (optimisés pour un affichage web), ils permettent une immersion rapide dans un univers floral, naturel, et serein.

7


01 PRESENTATION GENERALE Le contenu éditorial est judicieusement segmenté, structuré par

un titre, un chapeau et/ou complémenté par un élément visuel (pictogramme, photographie, illustration). L’utilisation d’une police de type sans-serif et d’un contraste positif avec l’arrière-plan renforce la qualité de navigation.

- Ergonomie et navigation La navigation horizontale est intuitive. Au sein des rubriques, l’onglet préalablement sélectionné change d’état. Un fil d’ariane/chemin de fer apparaît.

Le site propose également un moteur de recherche, un plan du site et un « nuage » de mots-clés.


 - Contenu éditorial Le périmètre d’information s’étend bien au-delà des onze jardins qui composent le Jardin des Plantes : Enrichi par des spécialistes, le site propose des conseils aux jardiniers, de nombreuses sélections de végétaux, des fiches explicatives ainsi que des dossiers thématiques.

8


01 PRESENTATION GENERALE


 - Fonctionnalités et interactivité Le module de commentaires, inséré en bas de chaque article, offre un espace d’expression à chaque visiteur préalablement enregistré.


 


Une entité participative est désormais accessible en version BETA. Cette dernière est autonome et dispose d’une URL propre (sous-domaine du site officiel - www.jardindesplantes.net) : http://www.monjardin.jardindesplantes.net


 9


01 PRESENTATION GENERALE  

Le Jardin des plantes dispose d’une « Page Fan » Facebook et propose un accès direct depuis son site mère (bouton « Devenir Fan »).

Le site semble favoriser l’échange et la diffusion de ses informations sur les réseaux sociaux (bon moyen de multiplier les contacts avec ses adhérents). Un bouton « partager » permet aux internautes de choisir la plateforme de leur choix : facebook, twitter, MySpace et Del.icio.us.

Un agenda du Jardin est également disponible. Multicritères, il permet l’affichage rapide des évènements à venir.

10


01 PRESENTATION GENERALE Faiblesses De manière non homogène sur l’ensemble des pages, le fil d’ariane propose une navigation verticale à son survol. Cette fonctionnalité, au demeurant utile, devrait être mise en avant. On découvre ce sous-menu de manière involontaire.


 
 La zone supérieure, donnant accès au site officiel du Muséum national d’Histoire naturelle et au module de connexion, n’est pas judicieusement mis en valeur. Ils gagneraient à être dissociés par la couleur ou la forme.

11


01 PRESENTATION GENERALE Nom du site

Le parc de la Villette

Adresse url

http://www.villette.com/fr

Public cible

Locaux + touristes : passionnés des plantes et des fleurs, groupes d’étudiants en biologie spécialisé ; architectes paysagistes.

Typologie du site

Site informatif - 2 niveaux d’accès : Spectacles et Jardin

Contexte A la lisière de la ville et de la banlieue, mêlant nature et architecture, aires et espaces de loisirs, le parc de la Villette constitue un des « poumons » de Paris. Le site internet a pour principal objectif de présenter aux internautes les différents univers que l’on retrouve à la Villette, ainsi que les évènements (spectacles, concerts, ateliers).

Atouts / Forces - Graphisme et ambiance générale Le site utilise des couleurs vives contrastant avec le fond noir. Ces couleurs orientent la lecture vers les informations les plus importantes. De nombreux visuels illustrent les pages : photographies, créations graphiques…etc. Ils sont positionnés et découpés de manière à correspondre à la charte graphique.


 12


01 PRESENTATION GENERALE


- Ergonomie et navigation La navigation horizontale est intuitive. Elle se scinde en deux parties. La première étant l’accès selon l’individu (profiling : famille, entreprise, enfants, professionnels) et la seconde un accès selon l’univers désiré (jardin, parc, agenda,…etc.). Un fil d’ariane apparaît au cœur de chaque page. L’une des grandes particularités du site est sa version allégée qui offre aux malvoyants un accès plus adapté. On retrouve également un moteur de recherche, élément de navigation essentiel sur un site de contenu important.

- Contenu éditorial Le site ne se contente pas de présenter des photos et des informations pratiques sur les jardins. Le contenu passe également par l’utilisation de médias comme des vidéos, et une plateforme de téléchargements (plaquettes, PDF) concernant les jardins. Différentes

visites

sont

envisageables.

Le

site

propose des tours organisés ou l’accès au plan (support imprimable) pour une découverte autonome des jardins. Le contenu s’affiche au fur et à mesure des clics, présentant les ateliers, partenariats,…

13


01 PRESENTATION GENERALE - Fonctionnalités et interactivité La partie BLOG est entièrement gérée par le parc de la Villette. Les internautes peuvent partager leurs opinions par le biais de commentaires. Les médias photos et vidéos sont très utilisés sur l’ensemble des pages et invitent à la lecture.

A tout moment, le visiteur peut accéder à la billetterie et envoyer la page en cours de consultation à un ami.

Faiblesses - Ergonomie et navigation L’abondance des menus gêne la navigation. Les codes colorimétriques perturbent au sens où une même couleur se retrouve sur différentes rubriques. Il est difficile de comprendre quelle est la cohérence d’utilisation.


 On ne retrouve aucune « ancre » permettant de remonter la page une fois que tous les menus sont développés. De plus, la partie Header est trop grande ce qui oblige l’utilisateur à scroller. 


14


01 PRESENTATION GENERALE Nom du site

Puy du Fou

Adresse url

http://www.puydufou.com

Public cible

Locaux français + tourisme étranger

Typologie du site

Découverte du parc et informations pratiques / réservations

Contexte Le Puy du Fou est un parc d’aventures ciblé sur le Moyen Âge. Créé après la découverte du château en 1977, il est aujourd’hui mondialement reconnu pour son esprit divertissant, culturel et ludique. Le nouveau site a été développé en 2010. Il a pour objectif de présenter et d’informer les internautes sur les spectacles et propose des informations pratiques relatives au parc (ouvertures, tarifs, plans interactifs).

Atouts / Forces - Graphisme et ambiance générale Les visuels présentés illustrent l’époque moyen-âgeuse, ils sont de bonne qualité et se distinguent par leur originalité. Ils permettent une immersion instantanée dans le village. La particularité majeure se retrouve dans les animations qui remplacent le contenu textuel au cœur de la page (chaque animation illustre illustre une activité particulière).


 15


01 PRESENTATION GENERALE - Ergonomie et navigation

Le menu principal horizontal est situé en bas de page. Les éléments constituant ce-dernier sont judicieusement illustrés ce qui facilite la navigation. - Contenu éditorial Le contenu éditorial est très axé sur la découverte du parc et les informations pratiques qui se rapportent à celuici. Une partie « goodies » permet d’accéder à des vidéos et photos. Une partie réservation de séjour permet de préparer sa venue. Le contenu de chaque rubrique est représenté par des

animations cliquables. Les zones « sensibles » sont représentées par des cercles.

- Fonctionnalités et interactivité Le plan interactif se distingue par son filtre de recherche détaillé : Villages, spectacles, restaurants, etc.

16


01 PRESENTATION GENERALE Les zones « clés » sont mappées d’un chiffre cliquable. Elles donnent accès à un bref descriptif illustré (en transparence sur le bas de la carte). Le bouton « Plus d’infos » redirige vers la page explicative du lieu sélectionné.

Faiblesses - Ergonomie et navigation Le plan interactif est un élément fort du site. Son accès n’est pas judicieusement mis en valeur, la partie centrale attirant immédiatement le regard par ses couleurs, vidéos et animations. Les informations situées dans la zone supérieure ne sont pas lues. Par ailleurs, « l’envoi à un ami » ou la « publication Facebook » ne sont pas utilisés.

17


01 PRESENTATION GENERALE Nom du site

Château de Versailles

Adresse url

http://www.chateauversailles.fr

Public cible

Touristes français ou étrangers, familles, écoles…

Typologie du site

Site vitrine (présentation du patrimoine, des actualités, des projets) et informatif (préparer sa visite, accès, acheter son billet)

Contexte Avec plus de 10 millions de visiteurs par an (dont 70% d’étrangers), le Château de Versailles, imaginé par l’architecte Le Notre, est l’un des monuments les plus visités en France. Son site internet est riche, accessible et immersif.

Atouts / Forces 


- Graphisme et ambiance générale Le site est très équilibré dans sa structure. Chaque page est centrée et les blocs parfaitement symétriques. Cette mise en page évoque clairement l’aspect architectural du lieu. Les couleurs (or, blanc, nuances de gris) et les typographies retranscrivent son élégance. - Ergonomie et navigation 3 barres de navigation structurent le site : un menu principal horizontal et deux menus verticaux respectivement nommés « Pratique » et « Découvrir ». Ces deux derniers offrent un accès rapide aux principales fonctionnalités et outils : plan interactif, calendrier, etc.

18


01 PRESENTATION GENERALE


 Le site possède de nombreux modules Flash animés
 : module de push et ‘’cover flow’’ pour la présentation de fiches descriptives sur la homepage des rubriques. Ces modules dynamisent la navigation, offre un aspect moderne et ludique à l’ensemble. La gestion du « multi-langues » est facilement repérable, présent dans le coin supérieur droit. Il en est de même pour l’accès à la version mobile du site et du moteur de recherche.


 Un fil d’ariane est présent sur l’ensemble des pages.

19


01 PRESENTATION GENERALE - Fonctionnalités et interactivité Un plan interactif est accessible depuis le menu ‘’Pratique’’ en colonne droite. Des filtres permettent la mise en avant d’éléments particuliers.

Les zones importantes sont signalées par un rond de couleur rouge numéroté. Au clic, chaque signalétique permet l’affichage d’un texte explicatif. Les informations pratiques et les services sont signalés par des pictogrammes adéquats. Ce plan interactif est graphiquement très réussi. Son fonctionnement est intuitif grâce aux nombreuses possibilités de filtrage.

- Mobilité et réseaux sociaux Le Château de Versailles est présent sur les supports mobiles, les réseaux sociaux (Facebook, Twitter, YouTube et FlickR) et les plateformes de partage. A disposition : une application iPhone payante (1,59€), de nombreux contenus éducatifs et informatifs (vidéos, podcast) partagés sur les plateformes e-learning (iTunes-U).

20


01 PRESENTATION GENERALE Faiblesses - Ergonomie et navigation La densité des système de navigation (la rubrique « Préparer votre visite » en comporte 5), et leur proximité désorientent l’internaute.

- Fonctionnalités et interactivité Bien que présent sur de nombreux réseaux sociaux, l’internaute ne peut participer à la vie du site en y laissant son empreinte (commentaires, notations/appréciations,etc.).

21


01 PRESENTATION GENERALE Nom du site

Central Park

Adresse url

http://www.centralpark.com

Public cible

Locaux américains + Toursites à la recherche d’informations sur l’histoire, les évènements et les activités du parc

Typologie du site

Site portail et informatif

Contexte

Le site centralpark.com existe depuis 2004. Véritable guide, il diffuse de

nombreuses informations sur la vie du parc de New York (activités/animations,

zoo, circuits etc.), son patrimoine historique et enfin, ses atouts paysagers

(faune et flore).

Atouts / Forces - Contenu éditorial Très complet, le site traite de toute l’activité du parc, son organisation, son histoire et ses événements. Les contenus sont organisés judicieusement par un rubriquage précis. De nombreuses informations pratiques sont disponibles : les accès au parc, comment trouver un logement à proximité de ce dernier ou comment préparer sa visite.

22


01 PRESENTATION GENERALE - Fonctionnalités et interactivité Les internautes peuvent participer à divers concours photos saisonniers, s’investir directement dans la vie du parc en aidant ou en suivant la plantation d’arbres et de fleurs. Des newsletters hebdomadaires, mensuelles ou évènementielles sont transmises aux utilisateurs préalablement enregistrés et « optin ». Le site dispose d’une carte interactive à deux vues : « Mode aérien » ou « Plan ». Les lieux les plus attrayants du parc sont symbolisés par des pointeurs rouges qui, au clic, affiche une brève description du lieu ou de l’événement. Chaque description comporte un lien redirigeant vers l’article détaillé. Ce module offre à l’internaute une autre possibilité de naviguer à travers les contenus.

Tous les événements et activités de Central Park sont accessibles au travers d’un agenda. Ce module permet de rendre compte de l’activité du parc et de naviguer en fonction des dates de chaque événement. Ces derniers peuvent être localisés sur la carte et « partagés » sur différents réseaux sociaux.


 23


01 PRESENTATION GENERALE Enfin, une boutique propose de nombreux articles pour rendre la visite du parc plus agréable. Sa présence n’est pas indispensable, mais les produits en vente sont originaux et correspondent à l’image et à l’ambiance du lieu.

Faiblesses - Graphisme et ambiance générale Le design apparaît obsolète, et le site comporte trop peu de visuels. Il n’y a pas d’iconographie pour aider à la navigation, ni de code couleur différenciant les rubriques. La hiérarchisation de l’information n’est pas optimale, l’internaute a du mal à se repérer. - Ergonomie et navigation Le coeur de page, enfermé par deux colonnes riches en visuels ou en informations, ne rend pas la lecture aisée. Le manque de place oblige au scroll vertical. Le menu contextuel sous forme de menu déroulant, rappelé sur la colonne de gauche, apparaît trop complet car mal agencé. La navigation est fastidieuse.

24


01 PRESENTATION GENERALE E. POSITIONNEMENT Objectif informatif Véritable outil de communication, le futur site des Buttes Chaumont informera la population locale et étrangère sur les actions évènementielles et culturelles mises en œuvre, les services proposés, et présentera le patrimoine historique du Parc.

Objectif social L’outil internet offrira une dimension communautaire et fédératrice. Parisiens et acteurs locaux (associations, artistes,…etc.) disposeront d’un espace participatif personnel permettant, si validation préalable du modérateur, la publication ouverte d’activités et/ou invitations : concours photo, expositions, cours de sport ou détente, jardin partagé … Tous contribueront à l’animation du site internet, et a fortiori, à la vie du parc des Buttes Chaumont.

Objectif ergonomique et graphique Le site plongera l’internaute dans un univers riche et varié à l’image de ses aménagements (rochers, cascades, grottes, passerelles, pelouses, etc). Les actions, services et lieux majeurs du Parc seront accessibles sur un plan interactif et accompagnés d’une iconographie qui renforcera le confort d’utilisation.

25


02 DESCRIPTION EDITORIALE A. LIGNE ÉDITORIALE Les contenus éditoriaux seront adaptés au support Web : termes compréhensibles, mots importants en exergue, des contenus illustrés, titrés et aérés. Nous privilégierons l’utilisation d’un langage courant au style institutionnel plus distant. Les internautes enrichiront le site progressivement par leurs commentaires, propositions, votes, et contributions photographiques. Toutes ces contributions, à l’exeption des commentaires, seront modérées avant d’être publiées (modération a priori). Un modérateur vérifiera les points suivants : - la légalité des informations (pas de discrimination raciale, pas d’atteinte à l’ordre public, pas de pédophilie...) - l’adéquation de l’information avec la ligne éditoriale du site. Les commentaires, d’importance moindre, seront modérés à postériori par le Webmaster. Note : La modération des évènements et activités sera gérée par deux entités différentes, selon la nature des propositions et des intervenants mobilisés (professionnels ou particuliers).

B. MEDIAS UTILISÉS Différents médias seront présents sur le site (en marge du contenu rédactionnel) :

Images et Photographies Les internautes sont attirés par les visuels. Nous proposerons des images de qualité qui contribueront à l’immersion et à la satisfaction des utilisateurs.

26


02 DESCRIPTION EDITORIALE Téléchargement de documents PDF La rubrique « Guide pratique » proposera le téléchargement de documents PDF de type « plan du parc » et « parcours thématiques ».

Téléchargement et Ecoute de musiques « libres » La rubrique « Multimédia » proposera quant à elle, le téléchargement de musiques « libres » et gratuites (sous licences Creative Commons). Pour les artistes, le site offrira un moyen simple et efficace de publier, partager et promouvoir leur musique. Les internautes quant à eux, y trouveront des musiques originales qui pourront les accompagner dans leur activité : musiques douces pour le yoga, rythmées pour le jogging (…).

C. MISE À JOUR Les « rédacteurs » identifiés (Mairie du 19ème) pourront apporter des mises à jour aux articles, indépendamment de toute connaissance technique, via la plateforme d’administration : Gestion des actualités, documents, liens, (…). Le nombre de « rédacteurs » n’est pas limité. A terme, les évolutions se feront également par la communauté, chaque internaute ayant la possibilité de créer un espace personnel sécurisé.

D. LANGUES / LOCALISATION Au regard de la cible, le site proposera un module multilingue Français / Anglais.

27


03 DESCRIPTION FONCTIONNELLE A. LES RUBRIQUES 5 rubriques agenceront le site :

Les Buttes Chaumont Division purement informative qui présentera le parc, son histoire souvent méconnue, ses atouts paysagers et architecturaux ainsi que ses valeurs écologiques.

Guide pratique Cet espace permettra à l’internaute de préparer au mieux sa future visite. Il trouvera toutes les informations pratiques : accès, horaires, conditions d’entrée, restauration (…) et différentes fiches (guides, parcours thématiques) téléchargeables en version PDF.

Multimédia Des playlists gratuites seront téléchargeables afin de répondre aux objectifs de chacun : rythmiques adaptées à la foulée des joggeurs, sons relaxant idéals pour la pratique du Tai Chi Chuan ou du Yoga. Les internautes pourront également découvrir le parc au travers de photos et vidéos officielles, le retrouver sur différents réseaux sociaux, ou encore, télécharger l’application Mobile TAG pour déchiffrer les différents flashcodes (QR-codes) positionnés au parc des Buttes Chaumont.

Activités et Evènements Véritable agenda thématique, chaque internaute pourra planifier sa visite ou simplement visionner l’ensemble des manifestations se déroulant au parc : ateliers, animations, cours, festivals (…). Un module « boîte à idées » renforcera l’implication des internautes, offrant la possibilité à chacun de publier des suggestions d’animation. 28


03 DESCRIPTION FONCTIONNELLE Ma vision du parc Cet espace évoluera avec la communauté. Chacun pourra partager sa vision des Buttes Chaumont en publiant photos, témoignages, poèmes ou citations.

B. OUTILS À DISPOSITION DE L’INTERNAUTE

(front office)

Fonctionnalités transverses - Un moteur de recherche par mots-clés sera présent en permanence sur le site, quel que soit le niveau de navigation. Il permettra à l’utilisateur d’effectuer une recherche sur l’ensemble des données et documents disponibles - Un module météo, « SPIP-METEO » récupèrera les prévisions météo via un flux XML en provenance de Weather.com - Une carte interactive développée par nos équipes techniques, offrira un système de navigation secondaire. Il permettra de localiser géographiquement les centres d’intérêts des internautes sur le territoire du Parc. Différents thèmes / filtres seront proposés à la sélection. - Un pictogramme cliquable illustrant l’application MobileTAG, lecteur de « flashcode » accessible sur IPHONE, ANDROID, BACKBERRY (…), permettra son téléchargement et en expliquera son fonctionnement - Des formulaires prédéfinis seront intégrés au site afin d’améliorer ou d’augmenter l’interactivité avec les utilisateurs en fonction de leurs besoins : Formulaire de contact, formulaire d’enregistrement de compte, soumission d’événement(s) ou d’idée(s) au sein de l’agenda, et inscription à la newsletter

29


03 DESCRIPTION FONCTIONNELLE Fonctionnalités communautaires - Des modules d’évalution « J’aime », vote et commentaire permettront d’évaluer les contributions éditoriales et visuelles : articles, photographies, idées, activités et évènements. - Une fonctionnalité de notifications individuelle permettra d’alerter l’internaute dès lors qu’une contribution (note, commentaire ou vote) sera diffusée sur l’une de ses publications. - Le module « AddThis » permettra d’ajouter des icônes de partage de liens sur les sites de réseaux sociaux (Facebook, Twitter, MySpace) ainsi qu’un partage email.

30


03 DESCRIPTION FONCTIONNELLE Organigramme

31


03 DESCRIPTION FONCTIONNELLE Masques fonctionnels Page d’accueil

32


03 DESCRIPTION FONCTIONNELLE Page d’accueil rubrique principale

33


03 DESCRIPTION FONCTIONNELLE Page article « type »

34


03 DESCRIPTION FONCTIONNELLE Rubrique « Actualités et Evènements »

35


03 DESCRIPTION FONCTIONNELLE Rubrique « Actualités et Evènements » / Sélection thématique

36


03 DESCRIPTION FONCTIONNELLE Rubrique « Actualités et Evènements » / Sélection Activité

37


03 DESCRIPTION FONCTIONNELLE Rubrique « Multimédia » / Téléchargement ou Ecoute de musiques en ligne

38


03 DESCRIPTION FONCTIONNELLE Rubrique « Multimédia » / Fiche descriptive Artiste (et album)

39


03 DESCRIPTION FONCTIONNELLE Rubrique « Votre vision du parc »

40


03 DESCRIPTION FONCTIONNELLE Espace personnel / Gestion du compte

41


03 DESCRIPTION FONCTIONNELLE Accessibilité et affichage L’interface sera adaptée pour une définition d’affichage en 1024 x 768 pixels. Les développements veilleront à respecter les standards actuels du web : - Compatibilité avec les navigateurs les plus utilisés des systèmes d’exploitation Microsoft et MacOs, - Utilisation de modules de téléchargement pour les plugins de type standard - Temps d’affichage correct pour les liaisons bas débit - Accessibilité conforme aux normes W3C.

42


04 DESCRIPTION GRAPHIQUE A. OBJECTIFS GRAPHIQUES L’identité visuelle a pour but de plonger l’internaute dans l’ambiance des Buttes Chaumont et lui donner envie de de s’y rendre. Le graphisme repose sur notre perception du parc, à la fois dynamique et appaisante. Ses couleurs, ses formes et ses matières favoriseront l’immertion. Les paysages font partie intégrante du site grâce à de nombreuses photographies. Les couleurs utilisées (vert et nuances de marron) évoquent les élements naturels : végétation, minéraux et terre.

B. PLANCHE TENDANCE

43


04 DESCRIPTION GRAPHIQUE

44


04 DESCRIPTION GRAPHIQUE C. CHARTE GRAPHIQUE Les couleurs L’arrière-plan du site étant de couleur foncée, nous utiliserons majoritairement le vert comme couleur de contraste. Le orange permettra la mise en avant des informations les plus importantes. Le contenu éditorial sera rédigé en noir sur fond blanc pour une lisibilité optimale.

Couleurs principales

Couleurs de fond

R:172 V:174 B:13 # ACAE0D

R:131 V:117 B:96 # 837560

R:151 V:153 B:1

R:97 V:85 B:67

# 615543

R:73 V:63 B:47

# 493F2F

R:0 V:0 B:0

# 000000

# 979901

Couleur secondaire R:234 V:151 B:32 # EA9720

Justifications symboliques et socioculturelles Chaque couleur véhicule une image et une symbolique : - le vert évoque la nature, l’ouverture, le divertissement et les loisirs - le orange symbolise le dynamisme, la sensation, le mouvement - le marron appel la douceur et l’harmonie

45


04 DESCRIPTION GRAPHIQUE Typographies La typographie d’usage est l’Arial notamment pour le corps du texte. L’Arial bold est utilisé pour les titres, les mises en valeur et les boutons ; ContextSSK pour le menu et les élements graphiques. Arial

Arial bold

46

ContextSSK thin

ContextSSK condensed bold


04 DESCRIPTION GRAPHIQUE

Arial 10px #ffffff

Header

17px # 979901

ContextSSK thin

Arial bold Arial

Arial

15px #ffffff

11px #ffffff

Arial

11px #ffffff

10px #ffffff

Footer

Arial 11px #ffffff

47


04 DESCRIPTION GRAPHIQUE ContextSSK condensed bold 16px #ffffff

Arial bold 12px #ffffff

Arial

12px #979901

Arial bold 19px #EA9720

Arial bold 13px #ffffff

Arial

Arial

12px #979901

12px #000000

Arial bold 12px #000000

Arial

10px #979901

Arial

12px #000000

Arial bold 13px #979901

Arial bold 11px #979901

Arial

12px #000000

48

Arial bold 13px #ffffff

Arial bold 10px #ffffff

Arial

10px #979901

Arial bold 16px #000000


04 DESCRIPTION GRAPHIQUE Logo À l’image de l’histoire du parc des Buttes Chaumont, le logo constitue un assemblage artificiel d’éléments naturels. Ce rassemblement d’éléments basiques (pierre, herbe, terre, eau ...) produit un ensemble plus fort que chacune de ses parties, à l’image de la communauté qui sera développée autour su site. Une photographie sépia à l’image du Temple de Sibylle coiffe la butte du Belvédère. Ce point culminant symbolise l’histoire et l’image du parc.

Taille d’affichage minimale : 180 px Typo : ContextCondSSk R:172 V:174 B:13 # ACAE0D R:0 V:0 B:0 # 000000 Le logo s’utilise de préférence sur un fond marron. Les fonds de couleurs vives sont à proscrire. R:97 V:85 B:67 # 615543 49


04 DESCRIPTION GRAPHIQUE Gabarits

240 px

500 px 690 px

Chaque page est

25 px

optimisée pour une

80 px

définition d’affichage en

30 px 25 px 25 px

1024x768 px. La hauteur de bloc et de page est variable.

100 px

30 px 25 px

50 660 px

250 px


04 DESCRIPTION GRAPHIQUE Écrans Page d’accueil

51


04 DESCRIPTION GRAPHIQUE Rubrique « Les Buttes Chaumont » > Histoire

52


04 DESCRIPTION GRAPHIQUE Rubrique « Activités et Évènements »

53


04 DESCRIPTION GRAPHIQUE Rubrique « Actualités et Evènements » / Sélection Activité

54


04 DESCRIPTION GRAPHIQUE Rubrique « Votre vision du parc »

55


04 DESCRIPTION GRAPHIQUE Plan intéractif

56


04 DESCRIPTION GRAPHIQUE Version Mobile Page d’accueil

57


04 DESCRIPTION GRAPHIQUE Version Mobile Rubrique « Les Buttes Chaumont » > Histoire

58


05 DESCRIPTION TECHNIQUE A. CONTRAINTES INITIALES Le site internet doit être dynamique. Les informations seront stockées dans une base de données de type MySQL. Le choix de la solution est libre. Elle doit néanmoins répondre aux besoins fonctionnels définis en Appel d’ Offre (voir Annexe). Afin de valoriser le confort d’utilisation, une attention particulière sera portée sur l’adaptation du Template Web aux plateformes mobiles (iPhone, Android, Nokia/Symbian, BlackBerry, etc.).

B. SOLUTION TECHNIQUE PROPOSÉE Dans le but de faciliter la maintenance du site et d’en réduire les coûts de production, nos équipes préconisent l’utilisation de l’outil de publication web Open Source SPIP 2.0, logiciel distribué sous Licence Publique Générale (GNU/GPL). L’interactivité du site relèvera de développements JavaScript et Flash(AS3). La mise en page quant a elle, sur la complémentarité HTML/CSS.

Pré-requis techniques SPIP fonctionne avec PHP (4 ou 5) et MySQL en environnement Linux/Apache ou Windows/IIS.

L’installation et le paramétrage de SPIP se feront depuis une interface web.

Modèle de conception La solution dispose d’un modèle de conception basé sur des rubriques, sous rubriques, articles, brèves et motsclés. - Rubrique : Titre, descriptif rapide, texte explicatif - Mot-clé : Nom (ou titre), descriptif rapide, texte explicatif, le logo - Article : Titre, date de création, auteurs, contenu, documents joints 59


05 DESCRIPTION TECHNIQUE - Auteur : Signature, courriel, biographie, site web (et URL) Note : Le statut d’un article pourra être « en cours de rédaction », « proposé à l’évaluation », « publié en ligne » et « refusé ».

Administration du site (back-office) L’interface d’administration/création/modification du site se présente sous la forme d’une page web avec un ensemble d’outils : - Authentification sécurisée - Création des contenus éditoriaux (via un éditeur de texte), rubriques et sous-rubriques - Librairie d’images communes exploitable sur l’ensemble du site - Gestion de plusieurs niveaux d’accès : « Administrateur », en charge de la structure du site et de la validation des articles, et « Rédacteur » - Sauvegarde et exportation de la base de donnée directement intégrée dans l’interface privée - Statistiques des visites et des liens pointant vers le site

Gestion du multiplateforme Les pages du site sont générées « à la volée » : les contenus, stockés dans la base de données, sont mis en forme au moyen de « squelettes » de présentation (Template / Gabarit) qui allient le HTML et un langage de balises propres au moteur SPIP. Ce dernier identifiera automatiquement la plateforme utilisée par les visiteurs : La détection d’un Smartphone modifiera le squelette de mise en forme.

60


05 DESCRIPTION TECHNIQUE C. CONFIGURATION MINIMALE REQUISE (CÔTÉ UTILISATEUR) Plateformes cibles : PC, MAC Configuration matérielle - Pentium IV (ou équivalent) et supérieur - 512 Mo de mémoire RAM - Carte graphique 32 Mo - Ecran 256 couleurs - 15 pouces, Résolution 1024x768 - Microsoft XP - MacOS9, MacOSX

Smartphones Configuration matérielle - 128 Mo de mémoire RAM - Connexion GSM, Wifi ou 3G

Navigateurs cibles (mentionnés et supérieurs) - Microsoft Internet Explorer 7 - Mozilla Firefox 3 - Google Chrome - Apple Safari 4, Opéra 9

Connexion Internet - Modem ADSL 1Mbps (125 Ko/s) 61


05 DESCRIPTION TECHNIQUE D. HÉBERGEMENT Afin de choisir une solution d’hébergement adaptée, il convient d’évaluer de manière précise le taux de visite mensuel et la consommation de bande passante moyenne/visite. Par ailleurs, la Mairie ne disposant pas de personnels qualifiés pour l’infogérance d’un serveur, nous préconisons l’emploi d’un hébergement dédié dits « managé » ou « infogéré » (Techniciens présents dans le Datacenter 24H / 24 - 7j/7).

Solutions choisies - Serveur dédié Dual-Core S Processeur : Athlon 3800 (2 x 2,0 GHz), Mémoire vive : 1 Go de RAM Disques durs : 2 x 160 Go (RAID 1 Software) Location mensuelle : 39,99€ - Pack Hébergement Premium Trafic/mois illimité, 4 noms de domaine inclus, Espace disque 500 Go Location mensuel : 9,99€

62


06 PROMOTION ET ANIMATION A. POLITIQUE DE RÉFÉRENCEMENT L’optimisation du référencement sur les moteurs de recherche se basera sur la complémentarité des canaux suivants : - le référencement naturel - le référencement commercial (payant)

Le référencement naturel Le référencement naturel permettra le positionnement du site dans les meilleurs résultats des moteurs de recherche (hors liens commerciaux). 1. Optimisation des mots-clés au sein du contenu éditorial

L’étude sémantique des parcs et jardins parisiens via l’outils Google Adwords, nous permet de lister judicieusement les termes les plus largement utilisés sur les moteurs de recherche (tendances et volumes de recherche mensuelles et annuelles). 2. Optimisation des balises HTML et URLs Balise TITLE Chaque balise TITLE sera unique et représentative de la page sur laquelle elle apparaît. Nous limiterons le nombre de mots à 10, les plus explicites et les plus stratégiques seront insérés en début de titre sur chacune des pages.

63


06 PROMOTION ET ANIMATION Balises META Description Chaque balise META sera, elle aussi, unique et significative afin d’être utilisée par Google dans l’affichage des résultats (snippet). Nous limiterons le nombre de caractères à 200. 


Contenu éditorial Les mots importants seront mis en avant par leur positionnement sur la page, leur fréquence d’utilisation, leur typologie (balises de titre h1 - h6, liens hypertextes internes/externes et ancres) et enfin, leur aspérité (gras ou italique). Les contenus devront être mis à jour régulièrement. Les espaces communautaires contribueront fortement à l’animation du site et par conséquent, à son bon positionnement.

URLs Les URLs du site seront réécrites (URL rewriting) de manière à ne comporter aucun caractère spécial. Elles comprendront des mots-clés pertinents, en relation avec leur page de destination ce qui favorisera leur indexation. Note : Nous réserverons les noms de domaine suivants : - http://parc-buttes-chaumont.fr

- http://parc-buttes-chaumont.com

- http://buttes-chaumont.fr

- http://buttes-chaumont.com

3. La soumission du site sur les moteurs et annuaires Le site sera inscrit sur différents annuaires touristiques de la ville de Paris et autres sites concernant les espaces verts et la biodiversité. Ces sites permettront d’accroître la visibilité du parc sur Internet en augmentant le nombre de liens « entrants » (liens redirigeant sur le site des Buttes Chaumont). 64


06 PROMOTION ET ANIMATION 4. Echange de liens (Netlinking) L’échange de liens augmentera la popularité du site et permettra l’obtention d’un trafic qualifié en provenance des sites partenaires. Ces derniers devront être choisis selon leur notoriété, qualité du contenu, affluence et positionnement dans les outils de recherche. Note : La construction d’un maillage complet permet, à terme, de générer jusqu’à 40 % de l’audience d’un site Internet. 5. Utilisation de Google maps

Largement utilisé, l’outil Google Maps permettra aux visiteurs de géolocaliser rapidement le parc et augmentera la visibilité du site (brève description + URL). 6. Utilisation des réseaux sociaux Chaque article pourra être partagé sur les réseaux Facebook, Twitter et MySpace (viralisation de l’information). Par ailleurs, le parc des Buttes Chaumont disposera d’une « fan page » Facebook. Les contenus étant publiques, ils seront facilement indexés par les moteurs de recherche.

Le référencement payant De manière ponctuelle, le parc des Buttes Chaumont augmentera son positionnement par l’investissement de liens payants (gestion par mots clés). Ces actions permettront l’acquisition d’un trafic qualifié plus important. Le champ sémantique de base sera semblable à celui utilisé pour le référencement naturel. Pour des raisons de rentabilité, nous limiterons les coûts par clic à un maximum de 0,55€ (moyenne observée sur l’ensemble des mots-clés sélectionné). Note : Cette stratégie pourra être affinée en fonction des taux de performance. 65


06 PROMOTION ET ANIMATION B. PROGRAMME D’AFFILIATION Une campagne permettra au site d’être présent sur de nombreuses plateformes affiliées au programme. Sur le principe de l’échange de services rémunérés, les adhérents seront gratifiés en fonction des résultats qu’il génèreront conformément à une action : création de trafic, leads (…). Nous limiterons nos actions à de l’affichage publicitaires (bannières GIF/Flash) et emailing.

C. NEWSLETTER ET EMAILING Nous distinguerons les messages purement informatifs (contenu essentiellement rédactionnel), des emailings de fidélisation et recrutement.

Newsletter L’inscription à la newsletter se fera de manière volontaire. Sa fréquence variera en fonction des saisonnalités (moyenne : 1/mois) et du paramétrage de l’internaute (Compte personnel > Gestion des newsletters). Elle informera les contacts de l’actualité et de la vie du parc. Modèles de conception

66


06 PROMOTION ET ANIMATION Emailing L’emailing sera utilisé pour les opérations de fidélisation (action couplée aux newsletters) et de recrutement (prospection sur de nouvelles bases de données). Il mettra en avant des évènements majeurs, ponctuels et sponsorisés. En l’absence de contacts qualifiés, nous vous accompagnerons dans le choix du meilleur fichier d’adresses mails (location sur critères de sélection : âge, géolocalisation, CSP). Modèle de conception 


Format Les courriers seront au format standard HTML, comportant des images, des liens et du texte mis en forme. Nous respecterons les normes standards avec une largeur de 530 pixels / hauteur libre.

Routage Nos équipes recommandent l’utilisation du logiciel Sarbacane 3, dans sa version professionnelle. Il accompagne depuis son lancement plusieurs dizaines de milliers d’entreprises pour la réalisation de leurs opérations e-mailing. Solutions apportées - Editeur graphique WYSIWYG / Importation document HTML - Suivi ROI : détection des ouvertures, clics, et désabonnements - Geotracking et ciblage des destinataires

67


06 PROMOTION ET ANIMATION D. JEUX CONCOURS Différents types de jeux concours (avec ou sans intervention du hasard) pourront être mis en place afin d’animer le site et recruter de nouveaux visiteurs : Jeu avec quizz, concours photos, concours d’idées (…).

E. FLASHCODE / QR-CODE Des QR-Codes, déchiffrables sur téléphone mobile, seront positionnés dans les zones stratégiques (à forte valeur historique ou évènementielle) du parc des Buttes Chaumont. Source de trafic important, ils offriront aux touristes un accès rapide aux différentes fiches descriptives du site internet. L’affichage sera adapté au support mobile. Note : La lecture du Flashcode nécessitera le téléchargement préalable de l’application Mobile Tag. Le téléchargement pourra se faire sur le site Internet, en amont ou sur place, via la connexion WIFI / 3G.

F. COÛT DES OPÉRATIONS PAR LEVIER DE RECRUTEMENT Objectif opérationnel sur la 1ère année : 18 000 visiteurs uniques

Coût du clic (€)

Taux de clics annuels

Emailing base externe

0,160

0,050

4 000

640

Affiliation

0,090

0,002

8 500

765

Liens sponsorisés

0,550

0,020

5 500

3 025

18 000

4 430

Leviers de recrutement

68

Nombre de clics annuels

Coût global des clics (€)


07 VIE DE PROJET A. DEVIS Budget prévisionnel post-production et production (par poste) Prix / jour (€ HT)

Jours de production

Tarification totale opérationnelle (€ HT)

Gestion de projet / Direction Conseils

650

13

8 450

Direction Artistique

650

3

1 950

Graphisme

450

4

1 800

Intégration / Webmastoring

450

14

6 300

Développement

600

7

4 200

Administration du serveur

400

0,5

225 22 925,

Webmarketing (SEO)

Détails de la prestation

Audit et stratégie de référencement

Aide au choix de mots-clés, stratégie globale de référencement et échanges de liens.

Optimisation des pages

Optimisation des pages, écriture des métas, titres et ancres.

Soumissions sur les moteurs et annuaires

Inscriptions manuelles : annuaires et moteurs spécialisés Contrôle, suivi et réinscriptions

Positionnement et mesures d’audience

Rapports mensuels de positionnement Installation d’une solution de mesure d’audience (google Analytics) 2 000

Hébergement et noms de domaine Noms de domaines

23,96

Gestion des noms de domaine

100,00

Solution d’hébergement

479,88

Budget global (€ HT)

503,84

25 428,84

69


07 VIE DE PROJET RÉTROPLANNING

70


07 VIE DE PROJET

71


ANNEXE APPEL D’OFFRE Dans le cadre du GPRU (Grand Projet de Renouvellement Urbain) Paris est voué à évoluer dans son rapport à la nature et à placer ses espaces verts aux cœur de la vie des quartiers. Afin de valoriser ces derniers, le Département Culture et Animation, de la Mairie du 19ème arrondissement de Paris, désire promouvoir le parc des Buttes Chaumont et développer sa présence sur Internet. Le projet comprendra : - La création d’une identité visuelle déclinable sur l’ensemble du site et sur tous supports imprimables - La conception et le développement du site Internet (français / anglais) déclinable sur support mobile - Le suivi du lancement

OBJECTIFS ET ORIENTATIONS STRATÉGIQUES - Informer, communiquer sur les actions évènementielles et les services rendus - Optimiser la navigation et l’orientation sur le parc - Promouvoir et valoriser les atouts du lieu dans toutes ses composantes : cadre de vie, sports, environnement, préservation de la biodiversité et culture Ce dernier point se traduira notamment par la promotion de jeunes artistes musicaux sous licence « Creative Commons » (écoute en ligne et libre téléchargement) - Fidéliser et fédérer les internautes en développant une véritable dynamique sociale autour du parc

CIBLE Le site s’adressera aux parisiens, mais aussi aux acteurs locaux (associations, artistes, partenaires...) et à tout internaute désireux de découvrir le parc. Propice au tourisme, le site attirera également une population étrangère.

72


ANNEXE APPEL D’OFFRE CALENDRIER PRÉVISIONNEL Le prestataire doit proposer un planning détaillé de réalisation du projet. Le Département Culture et Animation désire une mise en production le lundi 11 février 2011.

CONTRAINTES TECHNIQUES Le prestataire pourra proposer deux types de solution technique pour le développement du site : - CMS open source développé en « code ouvert » par une communauté active de développeurs - Solution adaptée sur mesure Note : Pour valoriser les contenus éditoriaux et étendre leur utilisation, la Mairie souhaite mettre à disposition les fonctionnalités suivantes : - Impression des articles et partage « email » / réseaux sociaux - Visualisation adaptée pour terminal mobile

FORMATION À L’ADMINISTRATION DU SITE Le prestataire assurera la formation de l’équipe en charge du site afin qu’elle soit en mesure de mettre en ligne l’ensemble du contenu et d’utiliser toutes les fonctions retenues dans le cadre de la plate-forme technique. Les personnes à former ont une bonne connaissance des outils bureautiques et ont l’habitude d’utiliser Internet, mais n’ont pas de compétence particulière en matière de gestion de sites.

73


Portefolio