« refonte du site internet » proposition da109013 octobre 2011

« Refonte du site internet »

Proposition DA109013

Octobre 2011

2

Proposition DA109013 – Refonte du site internet – Octobre 2011

Sommaire

Contexte

Atouts de Lp active

Stratégie et partis pris

Recommandations éditoriales

Recommandations vidéo

Recommandations fonctionnelles

Recommandations graphiques

Recommandations techniques

Méthodologie

Équipe

Planning

Budgets

Contact

3


Contexte

La société de gestion de portefeuille Rouvier Associés souhaite réaliser une refonte complète de leur site rouvierassocies.com.

Le site actuel est un site « plaquette » en 2 langues, comportant des pages de présentation, mais dont les contenus ne peuvent être gérés dynamiquement.

Graphiquement, le site ne donne pas une image assez dynamique de l’entreprise.

Les services proposés par Rouvier Associés sont destinés à tous types de clients.

Les clients institutionnels et professionnels représentent actuellement la part plus importante des fonds investis.

Seuls les plus gros clients disposent d’un suivi personnalisé, mais tous peuvent bénéficier des excellentes performances des fonds Rouvier.

Cette refonte s’inscrit sur un axe stratégique principal : redynamiser l’image de Rouvier Associés tout en offrant de nouveaux services aux clients ou prospects.

Les limites du site internet actuel doivent être dépassées.

Cela implique la revue complète du contenu et de sa présentation, la réalisation d’un nouvel habillage graphique ainsi que l’intégration de nouveaux éléments techniques.

4


Objectifs

La refonte du site Rouvier Associés doit donc répondre aux objectifs suivants :

Rajeunir et dynamiser la communication autour de la marque sur le site internet :

• Donner une nouvelle image graphique au site internet tout en conservant une cohérence avec le logo et les couleurs Rouvier Associés.

• Axer l’aspect éditorial sur un discours valorisant la société et ses services, mais aussi sur des contenus évolutifs et actualisés régulièrement.

• Adapter le site aux outils modernes, tels que les supports mobiles et les réseaux sociaux.

Elargir la clientèle vers le consommateur privé :

• Favoriser la simplicité, l’accessibilité et l’aspect didactique du discours et des contenus.

• Repenser l’ergonomie globale pour optimiser l’accès à l’information en mettant l’accent sur le profil des clients particuliers.

5


Objectifs

Promouvoir la fidélisation

• Mettre en place de nouveaux services pour améliorer l’accès aux données individualisées et paraître plus proche de la clientèle non éligible au suivi personnalisé.

S’appuyer sur un socle technique adapté et performant :

• Baser le site sur un CMS permettant de gérer facilement et dynamiquement les différents contenus.

• Protéger et sécuriser les données clients, prévoir un hébergement adapté.

• Optimiser les développements pour améliorer le référencement.

• Gérer les nouveaux supports mobiles ou tablettes en proposant une version WAP du site.

• Importer les archives d’actualités du site actuel vers le nouveau site.

6


Sommaire

Contexte

Atouts de Lp active







Méthodologie

Équipe

Planning

Budgets

Contact

7


Atouts de Lp active SL

…

…

…

…

• …

8


valeurs d'usage usabilité sites dynamiques monitoring

ConsultingConsulting InteractiveDesignInteractiveDesign

WebTechnologiesWebTechnologies

Management & Animation CRM Management & Animation CRM

Atouts de Lp active

Lp active s’inscrit dans les compétences du Groupe Lp :

Conception / création des sites Web

Gestion de projet

Ergonomie fonctionnelle

Design interactif

Intégration Flash, vidéo, son

Intégration HTML

Accessibilité

Intégrateur de solutions technologiques

Connexion/gestion bases de données

Utilitaires de recherche

Personnalisation

Affichage dynamique

(PHP5, .NET, Java, Flex, AS3)

Editeur de produits technologiques à forte valeur ajoutée

Webmastering

E-mailing

Jeux

Publicité on-line / affiliation

Suivi et analyse de trafic

Hébergement (en partenariat)

TMA

Formation

Animations des Réseaux sociaux

Gestion des blogs

Stratégie marketing en ligne

Veille concurrentielle / Benchmarking

Rédaction de cahiers des charges

9


Atouts de Lp active

Nos interventions s’inscrivent sans un processus de travail structuré et efficace :

Définition du périmètre éditorial, fonctionnel et technique Accompagnement

Tout au long des phases de conception et de développement, nos clients suivent l’avancement de leur projet sur un site sécurisé :

Notre extranet est hébergé sur nos serveurs, garantissant ainsi la sécurité des données qui y sont stockées.

Conception fonctionnelle et

chartes graphiques

Conception technique,

scénarisation et maquette

Intégration des pages HTML et

développements informatiques

Tests, optimisations et hébergement

Analyse du trafic et transfert de compétences

Conception éditoriale

10


Le détail de nos références multimédia est présenté dans un document spécifique joint à cette proposition.

Atouts de Lp active

Lp active dispose d’une équipe de spécialistes du multimédia qui ont acquis une compétence spécifique dans des secteurs très impactés par les nouvelles technologies.

Mettre à jour les logos selon le client

11


Atouts de Lp active

Le Groupe Lp est Adobe Solution Partner - niveau Silver.

Cet accord de partenariat permet d’obtenir en avant première des technologiques en exclusivité, de faire partie

du programme de beta tests des prochains logiciels.

Ce partenariat permet également l’accès à des cellules d’expertise dédiées pour obtenir des avis sur des

problématiques techniques.

12


Synthèse des références Lp active

Pour mener à bien le projet proposé, Le Groupe Lp s'appuiera sur ses compétences acquises à travers ses principales références multimédia :

Sites Internet• Agence France Trésor• Alcatel - Lucent• Allianz• Altran• BNP Paribas• Barreau des Hauts de Seine • Bongrain• Caisse des Dépôts• Conférence des évêques de France• Cetelem• Cité des Sciences et de l’Industrie• Crédit Municipal de Paris• Disneyland Paris• Euro Disney SCA• L'École de la Bourse -Euronext• Financière Océor• Groupama• INA - Institut National Audiovisuel• IRSN• La Compagnie 1818 - Banquiers Privés• Laboratoire Galderma• Laboratoire Merck• La Tribune• Le Revenu• LexisNexis• Ministère de la culture• Mondial Assistance• Natixis• Nouvel Observateur• Predica - Crédit agricole SA• Revue Fiduciaire• Sage• Santarelli • Solic• Schneider Electric• SVP• Univadis• Universcience• Veuve Clicquot• Walt Disney Studios

Sites Intranet / Extranet• Alcatel - Lucent• Bouygues Telecom• Bouygues Construction• Caisse d’épargne• Cetelem• Dassault Système• Disneyland Paris• Euronext• Groupama Banque• INA - Institut National Audiovisuel• Natixis• Predica - Crédit agricole SA• Sanef• SVP• Veuve Clicquot

CD ROM• Walt Disney Studios• Alcatel - Lucent• Euronext• Crédit Agricole SA• IRSN• Pasteur Mediavita

Animation / fidélisation• BHV• BHV - Logitech• BHV - Tefal• Bouygues Telecom• Disneyland Paris• IRSN• Gide • Le Revenu• LexisNexis• Mozaïc - Crédit Agricole SA• Nouvel Observateur• Pierre et Vacances• Somfy

13


Sommaire

Contexte

Atouts de Lp active







Méthodologie

Équipe

Planning

Budgets

Contact

14



La refonte du site internet doit répondre à différents enjeux en s’appuyant aussi bien sur le fond (contenus proposés, architecture de l’information…) que sur la forme (ergonomie, aspect graphique…).

Outil de fidélisation des clients actuels mais aussi de quête de nouveaux clients, le futur site doit s’inscrire dans une volonté de présenter de manière plus vivante la société tout en offrant de nouveaux services.

Pour s’approcher d’une cible de particuliers, souvent moins qualifiée dans les domaines de l’investissement financier et des OPCVM, le site doit mettre à disposition des internautes toutes les informations et explications nécessaires en ayant une approche didactique et d’accompagnement.

Les clients professionnels ne doivent pas non plus être mis à l’écart par un usage trop simpliste des discours et des contenus.

Les facteurs « confiance » et « crédibilité » doivent être renforcés pour susciter l’intérêt et la prise de contact directe à partir du site.

15



Quels leviers ?

Donner au site une apparence graphique plus chaleureuse et novatrice tout en conservant un aspect professionnel.

Réaliser le site sur la base d’un CMS moderne pour favoriser l’aspect pérenne et évolutif, en facilitant la création de nouveaux contenus et l’amélioration ponctuelle des fonctionnalités.

Faire vivre le site et la société à travers un espace d’actualités proposées par Rouvier associés.

Permettre l’accès à un espace client individualisé afin de consulter et de télécharger ses encours de portefeuille financier.

Mettre en place une version mobile du site pour optimiser la visibilité des contenus sur tablettes et smartphones, et pour donner aux clients un accès continu aux ressource utiles.

S’approprier les nouveaux usages du web social, notamment Twitter.

16



Mettre en place une logique de dualité des contenus, plus simples et ludiques pour les particuliers, mais sans restreindre l’accès aux données plus complète et techniques nécessitant un plus haut niveau d’expertise.

Favoriser la souscription en accompagnant intuitivement l’internaute depuis le besoin d’informations jusqu’au premier contact.

Faciliter un contact plurilatéral en donnant la possibilité à l’internaute de prendre la parole, de questionner, et en lui simplifiant l’obtention de renseignements.

Renforcer la transparence pour rassurer et paraître crédible. S’appuyer notamment sur des contenus vidéos représentatifs de la société, et mettre en avant l’équipe ou encore l’historique de la société.

17


Sommaire

Contexte

Atouts de Lp active


Recommandations éditorialesRecommandations vidéo




Méthodologie

Équipe

Planning

Budgets

Contact

18



La nouvelle stratégie éditoriale de rouvierassocies.com est en adéquation avec la stratégie globale dans laquelle s’inscrit la refonte du site. Elle prend ainsi une orientation nouvelle, cohérente avec la cible et l’image de Rouvier Associés.

La stratégie éditoriale est fondée sur 2 principes clés :

Un contenu éditorial à double lecture (professionnels et particuliers)

Un contenu éditorial intuitif et interactif

Par ailleurs, la version mobile du site, bien que plus légère en contenus, conservera une totale cohérence avec

la stratégie éditoriale du site initialement définie.

19



Un contenu éditorial à double lecture (professionnels et particuliers)

Sur le fond comme sur la forme, il s’appuie sur un vocabulaire simple et précis, basé sur l’initiation et l’expertise, afin de démontrer la forte proximité que Rouvier Associés entretient avec ses clients, qu’ils soient particuliers ou professionnels.

Le contenu éditorial s’appuie ainsi sur :

Un espace « Investir en toute connaissance » qui guidera l’internaute en trois étapes, depuis l’apprentissage du fonctionnement de l’investissement Rouvier associés jusqu’à la souscription :

• Comprendre : formation claire, précise et concise aux méthodes d’investissements, permettant aux particuliers de se sentir plus familiers avec les notions financières.

• Choisir : description des différents fonds proposés, mettant en avant les différences et les avantages de chacun.

• Investir : guide pratique de l’investisseur ayant pour but de simplifier et d’inciter à la souscription.

Un historique ainsi que la présence visuelle de l’équipe, venant ajouter un sentiment de « confiance », de « crédibilité » et de « performance ».

Un accès aux données et informations financières plus complexes, afin de satisfaire les exigences des professionnels nécessiteux d’un contenu plus approfondi.

20



Un contenu éditorial intuitif et interactif

La nouvelle version du site rouvierassocies.com disposera notamment d’un contenu éditorial à triple orientation afin de renforcer et améliorer l’interactivité :

Promouvoir la souscription :

• Les contenus intuitifs et notamment les pages « investir en toutes connaissances » favorisent une navigation logique, suscitent l’intérêt de l’internaute et permettent un accès plus naturel à l’espace de souscription aux fonds.

Un discours plurilatéral (relation client) :

• Un discours plurilatéral permet une approche plus interactive et accentue les échanges entre la société et l’internaute, instaurant ainsi un climat de confiance et une certaine crédibilité. La proximité peut être améliorée par le biais d’outils interactifs (questions fréquentes, bloc de questions/réponses, etc.).

Mise à disposition de l’information :

• La stratégie éditoriale s’appuiera également sur des contenus plus dynamiques pour valoriser l’aspect vivant de la société et de son site internet. Des vidéos de présentations ainsi qu’un espace d’actualité (articles, presses, newsletter, etc.) viendront ainsi s’intégrer aux contenus et favoriser la récurrence des visites.

21



Un travail de production et d’écriture des contenus du site sera réalisé.

Pour cela, les actions à mener sont multiformes :

Audit des contenus :

• La création de l’arborescence du site permet de définir le nombre de rubriques et de pages dont les contenus doivent être pensés et produits.

La production des contenus textes :

• Réalisée en cohérence avec la mise en place de l’architecture de l’information, elle implique l’écriture et l’illustration des contenus ainsi que leur mise en forme sur le site.

La réalisation de contenus vidéos :

• Etablissement de la mise en scène, des recommandations et réalisation technique des vidéos.

L’animation éditoriale :

• Proposée en option, elle implique la création de contenus ponctuels ou réguliers de type actualités, presse…

L’arborescence proposée pour le site Rouvier associés est disponible

sur le mémoire fonctionnel et graphique.

22



La prestation éditoriale proposée par le Groupe Lp comprend donc :

• Reprise et reformulation des contenus textes sur la base de 10 pages, principalement destinées à la présentation de la société et de ses fonds

• Production des contenus textes sur la base de 7 pages incluant notamment la home page, les pages de l’espace « didactique » et la présentation de l’espace client.

• 1 page lexique comprenant les définitions des principaux termes techniques utilisés dans le site

• La réalisation de deux vidéos de présentation et de démonstration

Options proposées :

• Animation de l’espace actualité :

- Publication d’un article, brève ou dépêche hebdomadaire (Rouvier et son secteur, analyses, vie de la société, nouveauté…).

• Publication d’une newsletter mensuelle avec possibilité d’affichage au format PDF.

• Publication d’un document presse mensuel au format PDF (type revue de presse financière)

A noter : La prestation éditoriale proposée inclut la traduction anglaise des contenus textes produits et repris, ainsi que l’intégration de sous-titres sur les deux vidéos de la version anglophone du site.

23


Sommaire

Contexte

Atouts de Lp active



Recommandations VidéoRecommandations fonctionnelles



Méthodologie

Équipe

Planning

Budgets

Contact

24



Afin de dynamiser la communication de rouvierassocies.com il convient d’intégrer au site deux vidéos qu’on pourra catégoriser l’une comme une vidéo de « présentation », et l’autre comme une vidéo de « démonstration ». Les vidéos seront partagées entre le portail et la présentation des méthodes de travail.

Vidéo de présentation « Accueil »

Contenu :

• Le but de cette vidéo est de présenter en quelques phrases la société Rouvier Associés. La vidéo devra brièvement renseigner l’historique, les points forts et les avantages compétitifs de la société.

• On pourra par exemple alterner le discours d’un gérant de la société avec un visu des locaux ou du reste de l’équipe.

Durée :

• La vidéo devra avoir une durée inférieure à une minute.

Langue :

• La vidéo sera réalisé en français et disposer de sous-titres anglophones pour la version anglaise du site.

Livrable:

• …

Aline

25



Vidéo de présentation « La Société »

Contenu :

• Le but de cette vidéo est de promouvoir l’expertise de Rouvier Associés en terme d’investissement, afin de susciter l’envie de souscrire à une société digne de confiance. Elle devra mettre en avant les méthodes d’investissements , de gestion, de contrôle des fonds proposés, ainsi que l’expertise des conseillers.

Durée :

• La vidéo devra avoir une durée inférieure à trois minutes.

Langue :

• La vidéo sera réalisé en français et disposer de sous-titres anglophones pour la version anglaise du site.

Livrable :

• …

Aline

26


Sommaire

Contexte

Atouts de Lp active



Recommandations Vidéo

Recommandations fonctionnellesRecommandations graphiques


Méthodologie

Équipe

Planning

Budgets

Contact

27


Recommandations fonctionnelles / Principes généraux…

…

… :

• …

…

… :

• …

…

… :

• …

Mise en avant de l’aspect commerciale (« contactez-nous »)

Pierre-Antoine

Gay

28


Arborescence

Homepage

Fonctions transverses (présentes sur toutes les pages)

Header : Recherche - Langues - Les sites du groupe -

Footer : Mentions légales - Contact - Plan du site - Crédit - Copyright- Newsletter - Emplois et stages - Réseaux sociaux - Aide - FAQ)

N-1N-1N-1 N-1 N-1

N-2• N-3 :

- N-4- …

• N-3

N-2• N-3• …• N-3

N-2• N-3 :

- N-4- …

• N-3

N-2• N-3• …• N-3

N-2• N-3• …• …• …• N-3

N-2• N-3 :

- N-4- …

• N-3

N-2• N-3• …• N-3

N-2• N-3• N-3

N-2• N-3 :

- N-4- …

• N-3

N-2• N-3• …• N-3

N-2• N-3• …• …• …• N-3

N-2• N-3 :

- N-4- …

• N-3

N-2• N-3• …• N-3

N-2• N-3• …• …• …• …• …• …• N-3

Templates

N-1

N-2

…

N-2

Pierre-Antoine

Gay

29

Storyboard (> Site A) > Homepage

30


Nuage de mots-clés

Accès direct aux chaines du média center

Derniers médias mis en ligneMédias les plus regardés

Contacts et abonnementà la newsletter

Pied de page

Zone de mise en avant événementiellePromotion des prochains événements

Liste des prochains événements

Navigation de niveau 1

Création du compte personnel / identification + moteur de recherche

Bandeau exceptionnel lorsqu’un événement approche

31

Storyboard (> Site A) > Homepage > Haut de page

Domaines Secteurs d’activité Enjeux métiers Médias Événements

VidéochatLe CPM, pour bien décider et décider vite

Le mardi 6 juillet de 11h à 11h45

Inscrivez-vous !

Media CenterCréer un compte Connexion Rechercher

Contacts

1 2 3 4

Prochain direct dans 3h18Comprendre et organiser sa migration vers Universe 2

Inscrivez-vous vite ! Comment accéder au direct

Partenaires

Août 2010

Lu Ma Me Je Ve Sa Di

1

2 3 4 5 6 7 8

9 10 11 12 13 14 15

16 17 18 19 20 21 22

24 25 26 27 28 28 29

30 31

Liste

< >

Mois

32


Evénements Web

Evénements en présentiel

• Remontée automatique,• 3 prochains événements maximum,• classement antéchronologique• Taille de vignette unique

• Remontée automatique,• 3 événements,• classement antéchronologique,• Marquage du logo partenaire : un élément

graphique et/ou une mention déterminera s’il s’agit d’un événement partenaire ou Sage

• Taille de vignette unique

Contribution automatique

Légende :

33


Bloc promotionnel pour inscription prochain événement

• A la création d’un événement, l’administrateur définit si l’événement est permis sur le bloc promotionnel et à quel(s) filtre(s) il s’applique,

• Le bloc promotionnel est contextuel au filtre sélectionné,

• Le bloc promotionnel présente le prochain événement autorisé,

• Un visuel spécifique pour le bandeau promotionnel peut être saisi lors de la création, une image générique est appliquée sinon.

Contribution manuelle

Légende :

34


Sommaire

Contexte

Atouts de Lp active







Méthodologie

Équipe

Planning

Budgets

Contact

Rémi Joly

35


Axes graphiques

Les pages suivantes présentent les intentions graphiques sur une sélection de quelques gabarits par axe.

36


Axes graphiques

Axe 1Nos axes graphiques seront commentés en réunion

Une démo peut être consultée à l’adresse suivante :

(url de la demo)

37

Axe 1 : Intitulé de la page

38


Axes graphiques

Axe 2Nos axes graphiques seront commentés en réunion

Une démo peut être consultée à l’adresse suivante :

(url de la demo)

39

Axe 2 : Intitulé de la page

40


Sommaire

Contexte

Atouts de Lp active







Méthodologie

Équipe

Planning

Budgets

Contact

41



…

… :

• …

…

… :

• …

…

… :

• …

Vincent

RAMOND

42


Sommaire

Contexte

Atouts de Lp active







Méthodologie

Équipe

Planning

Budgets

Contact

43


Méthodologie

Principales étapes du projet

Le projet est découpé en 2 grandes phases successives. Un découpage de chaque phase en étapes sera

effectué faisant intervenir MOA et MOE en étroite collaboration.

Les diapositives suivantes s’attachent à détailler chacune des phases.

Etape 1Lancement

Etape 1Lancement

Etape 2Conception

Etape 2Conception

Etape 4 Développement

Etape 4 Développement

Etape 5Vérificationd‘aptitude

Etape 5Vérificationd‘aptitude

Etape 7 Maintenance

Etape 7 Maintenance

Phase 1 :

Phase opérationnellePhase 2 :

Formation et maintenance

Etape 6Formation

Etape 6Formation

Etape 3Création graphique

Etape 3Création graphique

Pierre-Antoine

Gay

Rémi Joly

44


Méthodologie

Etape 1 : Lancement du projet

11 22 33 44

Lancement

Réunion de lancement Présentation des intervenants Validation de la méthodologie projet Définition du planning définitif

Mise en place de l’espace de travail collaboratif

Réunion de lancement Présentation des intervenants Validation de la méthodologie projet Définition du planning définitif

Mise en place de l’espace de travail collaboratif

ActionsActions Livrables LpLivrables Lp

Démarche méthodologique

Plan projet Planning définitif Ressources et répartition des charges

Accès à l’espace de travail collaboratif (Extranet Projet)

Démarche méthodologique

Plan projet Planning définitif Ressources et répartition des charges

Accès à l’espace de travail collaboratif (Extranet Projet)

66 7755

45


Méthodologie

Etape 1 : Lancement du projet Espace de travail collaboratif (Extranet Projet)

Dès le lancement du projet, Lp active ouvrira un espace client « Rouvier Associés » sur

son extranet. Basé sur activeCollab, l’extranet Lp active propose de nombreuses

fonctionnalités facilitant l’échange et le partage de connaissances autour du projet.

Principales fonctionnalités de l’Extranet :

Gestion multi-projets (facilite le lotissement de gros projets)

Partage de fichiers avec versioning

Suivi du développement (Tâches, Révisions, Tickets)

Suivi du planning

Discussions partagées avec intégration parfaite avec la messagerie (notifications

par mail et réponses possibles directement depuis le client mail)

Wiki

Accessible depuis les plateformes mobiles (iPhone)

Notre extranet est hébergé sur nos serveurs, garantissant ainsi la sécurité des données qui y sont stockées.

11 22 33 44

Lancement

66 7755

46


Méthodologie

Etape 2 : Conception

Storyboarding et Conception fonctionnelle

Conception technique

Définition de l’architecture finale du site

Storyboarding et Conception fonctionnelle

Conception technique

Définition de l’architecture finale du site


Arborescence détaillée du site

Spécifications Fonctionnelles Générales (SFG) Cas d’utilisation UML Story-board du front-office

Règles de Gestion (RG) Description des types de contenus Règles d’utilisation et d’interaction des types de

contenus

Spécifications Techniques (ST) Diagramme de base de données * Diagrammes de classes UML *

Arborescence détaillée du site

Spécifications Fonctionnelles Générales (SFG) Cas d’utilisation UML Story-board du front-office

Règles de Gestion (RG) Description des types de contenus Règles d’utilisation et d’interaction des types de

contenus

Spécifications Techniques (ST) Diagramme de base de données * Diagrammes de classes UML *

* pour les développements spécifiques

11 22 33 44 66 7755

Conception

47


Méthodologie

Etape 2 : Conception Arborescence détaillée / Spécifications fonctionnelles

La phase de conception de l’arborescence et du story-board fonctionnel permet de définir l’ensemble des

besoins exprimés par le client avant de rentrer dans la phase de spécifications fonctionnelles détaillées :

Aperçu ergonomique, structurel, détaillé et commenté de l’ensemble des gabarits principaux du site et de la navigation entre les différentes pages,

Principaux cas d’utilisation du site,

Base pour les spécifications fonctionnelles détaillées.

Arborescence Story-board commentéCas d’utilisation

11 22 33 44 66 7755

Conception

48


Méthodologie

Etape 2 : Conception Arborescence détaillée / Spécifications fonctionnelles

En complément au story-board, les Spécifications Fonctionnelles précisent l’ensemble des fonctionnalités

du site : Introduction, Présentation du projet, Description des acteurs, Arborescence et contenus du site, Fonctionnalités détaillées du front-office

11 22 33 44 66 7755

Conception

49


Méthodologie

Etape 2 : Conception Règles de gestion

Le storyboard et les spécifications fonctionnelles permettent l’identification de l’ensemble des types de contenu et de leur utilisation au

sein du site.

Imaginé par Lp active, ce document est devenu, depuis l’apparition des outil de gestion de contenus flexibles, un standard

indispensable. Il facilite la réalisation des spécifications techniques et permet une intégration HTML optimale.

Chaque type de contenu est identifié selon une règle de

nommage définie en introduction du document. Chaque

élément primaire constituant le type de contenu est décrit

dans un tableau :

Pour chaque zone du type de contenu pouvant recevoir des

sous-contenus, la liste des types de contenus pouvant aller

dans la zone est indiquée (grâce aux règles de nommage,

cette indication est très intuitive)

11 22 33 44 66 7755

Conception

50


Méthodologie

Phase 2 : Conception Spécifications techniques

L’ensemble des spécifications techniques est réalisé en suivant la norme UML grâce

au logiciel Visual Paradigm.

Diagramme de flux et d’interactions Diagrammes de séquencesDiagramme de bases de données

Normes de développement

11 22 33 44 66 7755

Conception

51


Méthodologie

Etape 3 : Création graphique

Mode itératif de présentation en réunion et intégration des remarques et demandes d’ajustements de Sage

Présentation(s) en comité de pilotagepour validation définitive.

Mode itératif de présentation en réunion et intégration des remarques et demandes d’ajustements de Sage

Présentation(s) en comité de pilotagepour validation définitive.


Supports des réunions

Comptes rendus des réunions

Fichiers images (JPG) des pages maquettées

Fichiers sources (PSD) avec les calques organisés et correctement nommés

Références ou fichiers haute-définition des média éventuellement sélectionnés avec toutes les données associées :

fournisseurs éléments de cession des droits éléments tarifaires

Supports des réunions

Comptes rendus des réunions

Fichiers images (JPG) des pages maquettées

Fichiers sources (PSD) avec les calques organisés et correctement nommés

Références ou fichiers haute-définition des média éventuellement sélectionnés avec toutes les données associées :

fournisseurs éléments de cession des droits éléments tarifaires

Création graphique

11 22 33 44 66 7755

52


Méthodologie

Etape 3 : Création graphique

Lp active réalisera les maquettes graphiques du site en fonction des pages qui auront été identifiées lors de la phase de conception fonctionnelle.

L’estimation du nombre de gabarits a été faite comme suit : Estimation : 20 gabarits

Ces gabarits devront contenir la majorité (voire la totalité) des grandes catégories de types de contenu que contiendra le site. Les gabarits créés appliqueront graphiquement les principes fonctionnels et ergonomiques établis dans le storyboard fonctionnel.

La phase de conception graphique est découpée comme suit : Création des gabarits principaux

• Mise en place de l’univers graphique

• Établissement des éléments de charte Déclinaison des autres gabarits

• Garanties des possibilités de déclinaison des premiers gabarits

Création graphique

11 22 33 44 66 7755

53


Méthodologie

Etape 4 : Développement

Intégration HTML

Déploiement de l’environnement de développement et de pré-production

Rédaction des cahiers de tests

Développements techniques

Rédaction des documents d’installation et de configuration des environnements de pré-production et de production

Mise en environnement de pré-production du site Internet

Intégration HTML

Déploiement de l’environnement de développement et de pré-production

Rédaction des cahiers de tests


Rédaction des documents d’installation et de configuration des environnements de pré-production et de production

Mise en environnement de pré-production du site Internet


Environnement de pré-production

Gabarits HTML statiques avec matrices de découpage PNG

Cahiers de tests

Sources PHP commentées

Document d’installation et de configuration des environnements de pré-production et de production

Site Internet déployé sur l’environnement de pré-production

Environnement de pré-production

Gabarits HTML statiques avec matrices de découpage PNG

Cahiers de tests

Sources PHP commentées

Document d’installation et de configuration des environnements de pré-production et de production

Site Internet déployé sur l’environnement de pré-production

Développement

11 22 33 44 66 7755

54


Méthodologie

Etape 4 : Développement Intégration HTML

Un package contenant l’ensemble des gabarits HTML fait l’objet d’une livraison spécifique et d’une validation par les équipes client. Ce package sert de base à la dynamisation des gabarits.

Les fichiers sont encodés en UTF-8

Les noms de fichiers sont en minuscules et peuvent contenir :

• des lettres, des chiffres, des tirets

• ex. : logo.gif

Les noms des fichiers font référence à la structure :

• Head-baseline.gif, box-corner-bottom-right.gif

Structure adoptée pour le développement des templates (ci-contre) :

• Un dossier « media » contenant les images temporaires différent du dossier « img » contenant les images utilisées en production.

• Livraison des matrices PNG de découpage pour faciliter les modifications ultérieures

Développement

11 22 33 44 66 7755

55


Méthodologie

Etape 4 : Développement Intégration HTML

Intégration selon la norme HTML 4.01 Transitional, validation auprès des services du w3c.

Les gabarits sont bâtis sur une structure partagée : séparation des contenus et des contenants permettant de

faciliter la maintenance.

Le contenu : contenu (sans mise en forme et sans comportement) mis en forme par un balisage

sémantique,

L’apparence : mise en forme graphique via les CSS,

Le comportement : fonctionnalités via JavaScript ou serveur (php…).

Développement

11 22 33 44 66 7755

56


Méthodologie

Etape 4 : Développement Méthodologie de développement

Utilisation de la méthode agile eXtreme Programming (XP) parfaitement adaptées aux projets web :

Conception simple : Plus l'application est simple, plus il sera facile de la faire évoluer,

Livraisons fréquentes : Le projet est découpé en lots, chaque cycle étant très court,

Intégration continue : Lorsqu'une tâche est terminée, les modifications sont immédiatement testées

par les développeurs sur le serveur de développement (tests unitaires), puis par nos ingénieurs QAM

sur le serveur d’intégration. Des livraisons régulières sont effectuées sur le serveur de préproduction

afin de compléter ces tests par les tests client,

Rythme durable : Adoption d’un rythme de travail raisonnable afin de produire un travail de qualité sur

une longue durée

Langage technique prohibé : Le fonctionnel et le technique utilisent des termes compréhensibles,

Refactoring : Amélioration régulière de la qualité du code sans en modifier le comportement.

Développement

11 22 33 44 66 7755

57


Méthodologie

Etape 4 : Développement Conventions d’écriture

Nous nous attachons à assurer une écriture homogène et lisible du code source pour une collaboration efficace entre les

différents intervenants techniques et pour améliorer la réversibilité.

Règles de formatage Règles de nommage

Choix de la langue : Utiliser uniquement l’anglais (pas de mélange) : pérennité, homogénéité…

Choix des mots : Ils doivent permettre de déduire facilement les fonctionnalités et les données manipulées. Ils doivent être intuitifs.

Choix de la casse : Des règles de casse spécifiques au type : BankAccount = classe $bankAccount = instance de la classe get_account() = fonction getAccount() = méthode _getAccount() = méthode privée $_account = propriété privée new BankAccount() = constructeur de la classe BANK_ACCOUNT = constante

Développement

11 22 33 44 66 7755

58


Méthodologie

Etape 4 : Développement Documentation du code

Nous avons un objectif : Faciliter la compréhension du code source.

Pour cela, nous mettons en œuvre les 10 bonnes pratiques suivantes :

1.Se limiter à l’essentiel (pas de commentaire superflu)

2.Soigner la présentation du commentaire

3.Organisation du code pour qu’il soit aussi compréhensible qu’un commentaire

4.Utilisation du format phpDoc permettant l’uniformisation des commentaires et la génération automatique de documentation

5.Les redondances sont évitées

6.Les commentaires sont maintenus à jour

7.Les commentaires font l’objet permanent d’un refactoring (au même titre que le code)

8.Toutes les classes sont commentées

9.Utilisation de l’anglais comme langue de référence

10.Utilisation de mots simples et de phrases courtes (pas de fioriture)

Seuls les développements spécifiques (réalisés par Lp) sont commentés par Lp. Cependant, le format phpDoc étant utilisé par la majorité des solutions OpenSource, il permet une

génération complète de la documentation.

Développement

11 22 33 44 66 7755

59


Méthodologie

Etape 4 : Développement Documentation du code

Voici un exemple de code commenté. Ce niveau de commentaire

est appliqué à toutes les classes métiers (modèle et action).

Des tags SVN sont utilisés en haut de classe pour permettre une

mise à jour automatique de l’auteur, de la date de dernière révision

et du numéro de commit.

Quand cela présente un intérêt, des exemples d’utilisation de la

fonction peuvent être indiqués.

Les types de paramètre et les types de retour sont toujours

détaillés, permettant ainsi de générer la documentation et de

favoriser le reverse-engineering des diagrammes UML.

Développement

11 22 33 44 66 7755

60


Méthodologie

Etape 4 : Développement Partage des bonnes pratiques et veille technologique

L’ensemble des ingénieurs d’Lp active se réunit mensuellement au cours des « Petits déj’ Lp ». Ces réunions permettent le développement du partage de connaissances et une forte cohésion des équipes. Elles sont composées de deux grandes parties :

Bonnes pratiques

Une bonne pratique est rappelée et détaillée chaque mois. Ces bonnes pratiques sont ainsi réellement mises en application au

cours des projets. Voici quelques exemples d’ordre du jour récents :

• Les normes de documentation

• Les normes de développement

• Les tests unitaires

• Les bonnes pratiques du versioning

Veille technologique

Une partie sur la veille technologique est animée par un collaborateur différent chaque mois. Elle permet aux ingénieurs d’Lp de

rester en permanence à la pointe de la technologie et développe leur esprit de « veille technologique ».

Développement

11 22 33 44 66 7755

61


Méthodologie

Phase 5 : Vérification d’aptitude

Mise en place de Mantis Bug Tracker

Exécution des tests utilisateurs par les équipes Lp et par le client

Correction des anomalies et optimisations

Mises en pré-production fréquentes

Mise en place de Mantis Bug Tracker

Exécution des tests utilisateurs par les équipes Lp et par le client

Correction des anomalies et optimisations

Mises en pré-production fréquentes


Accès à Mantis Bug Tracker

Rapport de tests utilisateurs

Accès à Mantis Bug Tracker

Rapport de tests utilisateurs

Vérification d’aptitude

11 22 33 44 66 7755

62


Méthodologie

Etape 5 : Vérification d’aptitude Bug tracking : Mantis

Afin d’assurer un suivi efficace de la recette des applications en vue de leur mises en ligne, Lp active mettra en

place le « bug tracker » Mantis.

Mantis est un outil de suivi du plan de test et de debug des développements. Ouvert à nos clients, il permet de

recenser, prioriser, attribuer et suivre les corrections apportées au logiciel en développement.

D’utilisation facile y compris pour les non techniciens, Mantis permet un dialogue et un suivi rigoureux de la

démarche qualité du projet, en amont comme au moment de la recette.

L'outil sera configuré pour séparer les trois types de recette :

Fonctionnelle

Éditoriale

Technique


11 22 33 44 66 7755

63


Méthodologie

Etape 5 : Vérification d’aptitude Cycles de corrections

Environnement de Développement

Environnement de Développement

Environnement de Recette

Environnement de Recette

Environnement de Pré-production

Environnement de Pré-production

Environnement de Production

Environnement de Production

Version validée par l’équipe de

développement

Rapport de bogues

Version stable validéepar Lp active

Version stable validée

par « Client »

Ingénieurs Qualité

Ingénieurs études et développement

« Nom du client »

Tests manuelsd’utilisation

Tests manuelsd’utilisation

Développement et tests continus

Les développeurs effectuent des tests

préliminaires puis font régulièrement des

passages en recette.

La recette est validée par les ingénieurs

Qualité de Lp active puis un passage en

pré-production est effectué pour validation

par les équipes client

Les Ingénieurs Qualité et Sage remontent

les bugs sur Mantis. Ils sont corrigés en

flux tendus par l’équipe de développement

et des livraisons fréquentes sont effectuées

pour validation.

La vérification d’aptitude s’achève quand

Sage valide une version stabilisée.


11 22 33 44 66 7755

64


Méthodologie

Etape 5 : Vérification d’aptitude Tests manuels

Après passage en recette, des tests fonctionnels sont réalisés par nos Ingénieurs Qualité.

Les tests se décomposent en deux grandes catégories : la vérification du rendu (l’affichage correspond-il à la charte graphique et

aux maquettes) et la vérification du fonctionnement (est-ce que la réalisation d’une action donne le résultat attendu).

Lp active pratique des « tests systématisés ». Pour cela, les tests sont réalisés sur un échantillon représentatif de contenu réel.

- Echantillon représentatif : Cet échantillon doit couvrir l’ensemble des cas possibles (tailles de mots variables, taille des

contenus variables, format d’images multiples, ensemble des gabarits couverts…).

- Contenu réel : Le contenu testé doit provenir de données réelles pour favoriser la diversité du contenu et donner une vision

définitive de l’arborescence.

Rédaction du cahier de tests

(étape 2)

Rédaction du cahier de tests

(étape 2)

Définition d’un jeu de données représentatives

Définition d’un jeu de données représentatives

Import des données

représentatives

Import des données

représentatives

Exécution des tests du cahier

de recette

Exécution des tests du cahier

de recette

Mise en recette

Vérification du rendu

Vérification du rendu

Vérification du fonctionnement

Vérification du fonctionnement

Création des maquettes graphiques

Création des maquettes graphiques

Vérification de conformité des

maquettes graphiques

Vérification de conformité des

maquettes graphiques

Succès de tous les tests ?

Succès de tous les tests ?

Oui

Rapport des bugs sur Mantis

Rapport des bugs sur Mantis

Non


11 22 33 44 66 7755

65


Méthodologie

Etape 6 : Formation

Formation et accompagnement des administrateurs fonctionnels du site

Formation et accompagnement des contributeurs du site

Formation et accompagnement des administrateurs fonctionnels du site

Formation et accompagnement des contributeurs du site


Support de formation des contributeurs

Support de formation des administrateurs fonctionnels

Guide détaillé de la contribution

Guide détaillé de l’administration fonctionnelle

Support de formation des contributeurs

Support de formation des administrateurs fonctionnels

Guide détaillé de la contribution

Guide détaillé de l’administration fonctionnelle

Formation

11 22 33 44 66 7755

66


Méthodologie

Etape 7 : Maintenance

Optimisation / Correction des anomalies

Maintenance évolutive

Optimisation / Correction des anomalies

Maintenance évolutive


Codes sources des nouvelles versions

Documentation mise à jour

Codes sources des nouvelles versions

Documentation mise à jour

Maintenance

11 22 33 44 66 7755

67


Méthodologie


La maintenance applicative consiste à confier la maintenance du site Internet à Lp active

La maintenance applicative proposée par Lp active intègre deux principales composantes :

Les mises à jour sécuritaires et évolutives des noyaux (au sein de la même version majeure)

Un forfait de maintenance évolutive et corrective sur les développements spécifiques réalisés par Lp active

Maintenance

Maintenance des noyaux

Cette prestation intègre les mises à jour des noyaux des applications installées par Lp active (Drupal, …) au sein de la même version majeure (Exemple : v6.1 vers v6.2).

Ces mises à jour peuvent être correctives ou concerner des évolutions mineures

Le temps de développement, augmenté de 25% pour la gestion de projet, est déduit du forfait temps de la maintenance.

Les changement de version majeure (Exemple v3 vers v4) ne sont pas intégrés dans la maintenance.

Assistance « extensions »

En cas d’anomalie sur votre site Internet, le client ouvre un ticket sur l’interface de suivi de bug Mantis.

Pour chaque ticket, Lp active indiquera le temps de développement passé à sa résolution (en minutes).

Le temps de développement, augmenté de 25% pour la gestion de projet, est déduit du forfait temps de la maintenance.

A tout moment, le forfait pourra être révisé pour s’adapter au mieux à la consommation du client

11 22 33 44 66 7755

68


Méthodologie


Délais d’intervention pour la maintenance corrective

Il est défini selon 3 niveaux d’anomalies : Niveau 1 - Anomalie bloquante : Indisponibilité totale du site Internet / Intranet Niveau 2 - Anomalie majeure : Dégradation technique ou fonctionnelle présentant un caractère répétitif fréquent

(supérieur ou égal à 1 fois par jour) et reproductible, rendant très difficile, voire impossible, l'utilisation du site Niveau 3 - Anomalie mineure : Dysfonctionnement sans impact fonctionnel majeur

Lp active s’engage à passer les anomalies de niveau 1 vers le niveau 2 dans un délai de 24h ouvrées. Puis, pour les anomalies de niveau 2 et 3, à proposer et valider avec le client un planning d’intervention dans les 24h ouvrées. Le planning est fonction des implications techniques liées à ces anomalies. Lp active résoudra les anomalies conformément au planning défini.

Délais d’intervention pour la maintenance évolutive :

Lp active s’engage à fournir une estimation du temps nécessaire pour réaliser l’évolution dans un délai de 24 h ouvrées.

Le contrat de TMA est renouvelable par tacite reconduction, par période de 1 an, sauf dénonciation formulée 3 mois avant échéance de chaque période.

Maintenance

11 22 33 44 66 7755

69


Méthodologie


Suivi des anomalies

Tout dysfonctionnement constaté fait l'objet d’une fiche d’Anomalie contenant la description du défaut rencontré. Ces anomalies sont remontées sur Mantis, outil de gestion d’anomalies. Une fois remontée, l’anomalie passe par plusieurs états :

•« Nouveau » : cet état correspond au premier état du cycle de vie d’une anomalie. L’anomalie vient d’être remontée etLp active n’en a pas encore pris connaissance ;

•« Commentaire » : cet état indique que Lp active souhaite faire un commentaire sur l’anomalie et qu’une réponse est donc requise pour son acceptation ;

•« Accepté » : cet état indique que Lp active accepte l’anomalie et qu’il prend en charge sa résolution ;

•« Affecté » : cet état indique que Lp active a affecté l’anomalie au collaborateur en charge de sa résolution ;

•« Résolu » : cet état indique que Lp active a résolu l’anomalie et qu’elle peut être testée par le client ;

•« Fermé » : cet état signifie que le client considère que les réponses et solutions apportées par Lp active permettent de considérer le problème comme résolu.

Dans le cas où le traitement est réalisé par le biais d'un palliatif, une nouvelle anomalie d’importance inférieure est créée, sauf si

le client admet expressément ce palliatif comme solution définitive.

Maintenance

11 22 33 44 66 7755

70


Méthodologie


Cette prestation intègre un forfait de 3 jours par trimestre.

En fin de trimestre, un décompte est effectué afin d’informer le client de sa consommation. Le temps non consommé est reporté

sur le trimestre suivant, dans la limite du montant du forfait (Exemple : pour un forfait de 3 jours par trimestre, il ne peut pas être

reporté plus de 3 jours sur le trimestre suivant).

Le temps consommé en dépassement du forfait est facturé au prorata du forfait, chaque journée entamée étant due.

En cas de dépassement du forfait, les engagements de délai d’intervention ne sont plus appliqués.

Maintenance

11 22 33 44 66 7755

71


Sommaire

Contexte

Atouts de Lp active







Méthodologie

Équipe

Planning

Budgets

Contact

72


Equipe projet

Le Groupe Lp propose l’équipe d’encadrement suivante sur cette mission :

Managing consultant

Directeur de projet

Directeur de création

Directeur technique.

L’équipe de conception et production est complétée comme suit :

Consultant web fonctionnel.

Directeur artistique.

Intégrateurs HTML.

Chef de projet technique.

Ingénieurs développement.

Ingénieurs RIA (Flash).

Plusieurs CV sont présentés ci-après.

73

Equipe projet

Pôle intégration / accessibilité

Pilotage du projet

Pôle développement

Sylvain LejarreDirecteur général / Managing consultant

XXXXXXXDirectrice de projet

Nicolas MathonChef de projet technique

Cédric BouillotIngénieur Etudes et Dév.

Stéphane MuretResponsable pôle HTMLconsultant accessibilité

Cyrille JaffréDirecteur de création

Pôle conception fonctionnelle

xxxxxxxxConsultant web

Partenaires

Réferencement,réseaux sociaux

Production vidéo

Hébergement vidéo

Prénom + NomPoste

Prénom + NomPoste

Michel BaptistaIngénieur Etudes et Dév.

Vincent RamondIngénieur Etudes et Dév.

Sivakanes KumarasamyIngénieur Etudes et Dév.

Pôle création graphique

Sylvain CremoneseDirecteur artistique

Sonia FernandesDirecteur artistique

Céline CastagnetDirecteur artistique

Charles RouillonDirecteur technique

Julien TrolléIntégrateur HTML

Logo du client

74


Equipe projet (pilotage)

CV de chacun des membres de l’équipe

Photo

75


Sommaire

Contexte

Atouts de Lp active







Méthodologie

Équipe

Planning

Budgets

Contact

76

Planning

Un planning de travail général a été défini sur la base des informations transmises pour l’appel d’offres . Il pourra être adapté en fonction du cahier des charges définitifs.

Charge / validation « Nom du client »Charge Groupe Lp Point projet Comité pilotage

Juillet Août Septembre Octobre Novembre Décembre

Validation des spécifications

Validation finale et mise en ligne du site Corporate &

infrastructure

Formation ettransfert de compétences

Intégration HTML

Spécifications techniques


Création / gabarits graphiques

Recette client

Saisie des contenuset mise en ligne

Tests et optimisation

Rédaction de lacharte graphique

Charte éditoriale, Référencement,

Réseaux sociaux et Vidéos

Validation des spécifications Spécifications fonctionnelles

Réunion de lancement(date à déterminer)

Suite du roadmap

2011…

Validation des maquettes (site Corporate & infrastructure

Rédaction de la charte graphique au fil de l’eau

Reprise automatiséede l'existant

Suivi au fil de l’eau, en contenu, avec nos différents partenaire (Synodiance, System TV,

Kewego)

Mise en ligne des prochains sites dès début

2011 (dates à valider)

Livraison du site

Validation finale et mise en ligne du site Corporate &

infrastructure

cf. aussi les autres modèles sur : _modele-PLANNING.ppt

77


Sommaire

Contexte

Atouts de Lp active



Recommandations Vidéo




Méthodologie

Équipe

Planning

Budgets

Contact

78


Grille tarifaire

Le budget a été calculé en fonction des tarifs suivants, en € HT par jour :

Directeur général / Managing Consultant 850 € HT

Directeur de projet fonctionnel 640 € HT

Consultant fonctionnel 640 € HT

Directeur artistique 640 € HT

Chef de projet technique 640 € HT

Ingénieur développement 570 € HT

Intégrateur HTML 570 € HT

La charge de travail et le budget ont été définis sur la base de cette proposition.Ils pourront être adaptés en fonction du cahier des charges définitif.

Les frais de transport et de séjour hors région parisienne seront facturés sur justificatifs

Les budgets sont hors achat d’art (photos…)

Les créations graphiques sont tous droits cédés

Les textes et visuels seront fournis par le client sous format numérique

Les développements informatiques sont forfaités pour tous droits d’utilisation

Période de garantie 1 mois puis application de la TMA

Nos conditions habituelles de facturation sont :50% à la commande, 30% à la moitié du projet et le solde à la livraison du projet.

Taux à valider

79

Budgets - Gabarits

Hypothèse de budget sur les N gabarits suivants :

Homepage générale

Homepage de rubrique N-1

Page-type de contenu simple (textes, visuels, …)

Page-type de contenu complexe [données/tableaux (chiffres clés, cours de bourse, …), cartes,…]

Recrutement

Page-type Formulaire (Contact, inscription Newsletter, …)

Page-type Actualités (x2) : liste + fiche

Recherche (page résultats + affichage des critères avancés)

Plan du site

…

80

Budget

81

Budget total

Total général (hors options)

Budget total : € HT

Charge de travail : jour

82


Budget - Option

Option : « Intitulé de l’option »

Budget total : € HT

Charge de travail : jour

83


Sommaire

Contexte

Atouts de Lp active


(Recommandations éditoriales)


Axes graphiques


(Création de trafic - Référencement - Réseaux sociaux)

Méthodologie

Équipe

Planning

Budgets

Contact

84


Sommaire

Contexte

Atouts de Lp active







Méthodologie

Équipe

Planning

Budgets

Contact

85


Contact

Sylvain Lejarre

Directeur géné[email protected]

12, rue du Quatre-Septembre75002 PARIS

Tél. 01 42 66 60 00

Tél. 01 42 66 69 61 (LD)

www.groupe-lp.com

« refonte du site internet » proposition da109013 octobre 2011

Documents