« Refonte du site internet »

Présentation au sujet: "« Refonte du site internet »"— Transcription de la présentation:

1 « Refonte du site internet »
Proposition DA109013 Octobre 2011

2 Contexte Sommaire 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 2

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. 3

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. 4

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. 5

6 Atouts de Lp active Sommaire Contexte Stratégie et partis pris
Recommandations éditoriales Recommandations vidéo Recommandations fonctionnelles Recommandations graphiques Recommandations techniques Méthodologie Équipe Planning Budgets Contact 6

7 SL Atouts de Lp active …

8 Atouts de Lp active Lp active s’inscrit dans les compétences du Groupe Lp : Consulting Interactive Design Web Technologies Management & Animation CRM Animations des Réseaux sociaux Gestion des blogs Stratégie marketing en ligne Veille concurrentielle / Benchmarking Rédaction de cahiers des charges 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 ing Jeux Publicité on-line / affiliation Suivi et analyse de trafic Hébergement (en partenariat) TMA Formation valeurs d'usage usabilité sites dynamiques monitoring

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 Conception fonctionnelle et chartes graphiques Intégration des pages HTML et développements informatiques Analyse du trafic et transfert de compétences Conception éditoriale Conception technique, scénarisation et maquette Tests, optimisations et hébergement 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.

10 Mettre à jour les logos selon le client
Atouts de Lp active Mettre à jour les logos selon le client 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. Le détail de nos références multimédia est présenté dans un document spécifique joint à cette proposition.

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. 11

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 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 Crédit Agricole SA IRSN Pasteur Mediavita Animation / fidélisation BHV BHV - Logitech BHV - Tefal Gide Le Revenu LexisNexis Mozaïc - Crédit Agricole SA Nouvel Observateur Pierre et Vacances Somfy

13 Stratégie et partis pris
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 13

14 Stratégie et partis pris
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 Stratégie et partis pris
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. 15

16 Stratégie et partis pris
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é. 16

17 Recommandations éditoriales
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 17

18 Recommandations éditoriales
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. 18

19 Recommandations éditoriales
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. 19

20 Recommandations éditoriales
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. 20

21 Recommandations éditoriales
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. 21

22 Recommandations éditoriales
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. 22

23 Recommandations Vidéo
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 23

24 Recommandations vidéo
Aline Recommandations vidéo 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: … 24

25 Recommandations vidéo
Aline Recommandations vidéo 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 : … 25

26 Recommandations fonctionnelles
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 26

27 Recommandations fonctionnelles / Principes généraux…
Pierre-Antoine Gay Recommandations fonctionnelles / Principes généraux… … … : Mise en avant de l’aspect commerciale (« contactez-nous ») 27

28 Fonctions transverses (présentes sur toutes les pages)
Pierre-Antoine Gay Arborescence Templates 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) Homepage N-1 N-1 N-1 N-1 N-1 N-1 N-2 N-3 : N-4 … N-3 N-2 N-3 : N-4 … N-3 N-2 N-3 : N-4 … N-3 N-2 N-3 : N-4 … N-3 N-2 N-3 : N-4 … N-3 N-2 … 28

29 Storyboard (> Site A) > Homepage
29

30 30 Création du compte personnel / identification + moteur de recherche
Storyboard (> Site A) > Homepage Création du compte personnel / identification + moteur de recherche Navigation de niveau 1 Liste des prochains événements Zone de mise en avant événementielle Promotion des prochains événements Bandeau exceptionnel lorsqu’un événement approche Derniers médias mis en ligne Médias les plus regardés Accès direct aux chaines du média center Nuage de mots-clés Contacts et abonnement à la newsletter Pied de page 30

31 Comprendre et organiser sa migration vers Universe 2
Storyboard (> Site A) > Homepage > Haut de page Media Center Créer un compte Connexion Rechercher Domaines Secteurs d’activité Enjeux métiers Médias Événements Contacts Partenaires Vidéochat Le CPM, pour bien décider et décider vite Le mardi 6 juillet de 11h à 11h45 Inscrivez-vous ! 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 29 30 31 1 2 3 4 Liste Mois Prochain direct dans 3h18 Comprendre et organiser sa migration vers Universe 2 Inscrivez-vous vite ! Comment accéder au direct 31

32 Contribution automatique
Storyboard (> Site A) > Homepage Evénements Web Remontée automatique, 3 prochains événements maximum, classement antéchronologique Taille de vignette unique Evénements en présentiel 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 : 32

33 Contribution manuelle
Storyboard (> Site A) > Homepage 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 : 33

34 Recommandations graphiques
Rémi Joly 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 34

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

36 Axes graphiques Axe 1 Nos axes graphiques seront commentés en réunion Une démo peut être consultée à l’adresse suivante : (url de la demo) 36

37 Axe 1 : Intitulé de la page
37

38 Axes graphiques Axe 2 Nos axes graphiques seront commentés en réunion Une démo peut être consultée à l’adresse suivante : (url de la demo) 38

39 Axe 2 : Intitulé de la page
39

40 Recommandations techniques
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 40

41 Recommandations techniques
Vincent RAMOND Recommandations techniques … … : 41

42 Méthodologie 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 42

43 Formation et maintenance
Pierre-Antoine Gay Rémi Joly 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. Phase 1 : Phase opérationnelle Phase 2 : Formation et maintenance Etape 1 Lancement Etape 2 Conception Etape 3 Création graphique Etape 4 Développement Etape 5 Vérification d‘aptitude Etape 6 Formation Etape 7 Maintenance

44 Méthodologie Etape 1 : Lancement du projet Actions Livrables Lp
2 3 4 5 6 7 Lancement Etape 1 : Lancement du projet Actions Livrables Lp 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 Démarche méthodologique Plan projet Planning définitif Ressources et répartition des charges Accès à l’espace de travail collaboratif (Extranet Projet)

45 Méthodologie 1 2 3 4 5 6 7 Lancement 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.

46 Méthodologie Etape 2 : Conception Actions Livrables Lp
1 2 3 4 5 6 7 Conception Etape 2 : Conception Actions Livrables Lp 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 * * pour les développements spécifiques

47 Méthodologie 1 2 3 4 5 6 7 Conception 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 Cas d’utilisation Story-board commenté

48 Méthodologie 1 2 3 4 5 6 7 Conception 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

49 Méthodologie Etape 2 : Conception  Règles de gestion
1 2 3 4 5 6 7 Conception 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)

50 Méthodologie Phase 2 : Conception  Spécifications techniques
1 2 3 4 5 6 7 Conception 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. Normes de développement Diagramme de bases de données Diagramme de flux et d’interactions Diagrammes de séquences

51 Méthodologie Etape 3 : Création graphique Actions Livrables Lp
1 2 3 4 5 6 7 Création graphique Etape 3 : Création graphique Actions Livrables Lp 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 pilotage pour 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

52 Méthodologie Etape 3 : Création graphique
1 2 3 4 5 6 7 Création graphique 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

53 Méthodologie Etape 4 : Développement Actions Livrables Lp
1 2 3 4 5 6 7 Développement Etape 4 : Développement Actions Livrables Lp 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 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

54 Méthodologie Etape 4 : Développement  Intégration HTML
1 2 3 4 5 6 7 Développement 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

55 Méthodologie Etape 4 : Développement  Intégration HTML
1 2 3 4 5 6 7 Développement 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…).

56 Méthodologie Etape 4 : Développement  Méthodologie de développement
1 2 3 4 5 6 7 Développement 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.

57 Méthodologie Etape 4 : Développement  Conventions d’écriture
1 2 3 4 5 6 7 Développement 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

58 Méthodologie Etape 4 : Développement  Documentation du code
1 2 3 4 5 6 7 Développement 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 : Se limiter à l’essentiel (pas de commentaire superflu) Soigner la présentation du commentaire Organisation du code pour qu’il soit aussi compréhensible qu’un commentaire Utilisation du format phpDoc permettant l’uniformisation des commentaires et la génération automatique de documentation Les redondances sont évitées Les commentaires sont maintenus à jour Les commentaires font l’objet permanent d’un refactoring (au même titre que le code) Toutes les classes sont commentées Utilisation de l’anglais comme langue de référence 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.

59 Méthodologie Etape 4 : Développement  Documentation du code
1 2 3 4 5 6 7 Développement 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.

60 Méthodologie 1 2 3 4 5 6 7 Développement 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 ».

61 Vérification d’aptitude
Méthodologie 1 2 3 4 5 6 7 Vérification d’aptitude Phase 5 : Vérification d’aptitude Actions Livrables Lp 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

62 Vérification d’aptitude
Méthodologie 1 2 3 4 5 6 7 Vérification d’aptitude 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

63 Vérification d’aptitude Version stable validée
Méthodologie 1 2 3 4 5 6 7 Vérification d’aptitude Etape 5 : Vérification d’aptitude  Cycles de corrections 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. Développement et tests continus Environnement de Développement Ingénieurs études et développement Version validée par l’équipe de développement Environnement de Production Environnement de Recette Environnement de Pré-production Rapport de bogues Version stable validée par « Client » Version stable validée par Lp active Tests manuels d’utilisation Tests manuels d’utilisation Ingénieurs Qualité « Nom du client »

64 Vérification d’aptitude
Méthodologie 1 2 3 4 5 6 7 Vérification d’aptitude 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) Définition d’un jeu de données représentatives Import des données représentatives Exécution des tests du cahier de recette Mise en recette Vérification du rendu Vérification du fonctionnement Création des maquettes graphiques Vérification de conformité des maquettes graphiques Succès de tous les tests ? Oui Rapport des bugs sur Mantis Non

65 Méthodologie Etape 6 : Formation Actions Livrables Lp
1 2 3 4 5 6 7 Formation Etape 6 : Formation Actions Livrables Lp 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

66 Méthodologie Etape 7 : Maintenance Actions Livrables Lp
1 2 3 4 5 6 7 Maintenance Etape 7 : Maintenance Actions Livrables Lp Optimisation / Correction des anomalies Maintenance évolutive Codes sources des nouvelles versions Documentation mise à jour

67 Maintenance des noyaux Assistance « extensions »
Méthodologie 1 2 3 4 5 6 7 Maintenance Etape 7 : Maintenance 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 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

68 Méthodologie Etape 7 : Maintenance
1 2 3 4 5 6 7 Maintenance Etape 7 : Maintenance 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.

69 Méthodologie Etape 7 : Maintenance Suivi des anomalies
1 2 3 4 5 6 7 Maintenance Etape 7 : Maintenance 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 et Lp 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.

70 Méthodologie Etape 7 : Maintenance
1 2 3 4 5 6 7 Maintenance Etape 7 : Maintenance 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.

71 Équipe 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 71

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. 72

73 Equipe projet Sylvain Lejarre Cyrille Jaffré Charles Rouillon
Pilotage du projet Sylvain Lejarre Directeur général / Managing consultant Cyrille Jaffré Directeur de création Charles Rouillon Directeur technique Partenaires Réferencement,réseaux sociaux Production vidéo Hébergement vidéo Logo du client XXXXXXX Directrice de projet Prénom + Nom Poste Prénom + Nom Poste Pôle conception fonctionnelle Pôle création graphique Pôle intégration / accessibilité Pôle développement xxxxxxxx Consultant web Sylvain Cremonese Directeur artistique Stéphane Muret Responsable pôle HTML consultant accessibilité Nicolas Mathon Chef de projet technique Sonia Fernandes Directeur artistique Cédric Bouillot Ingénieur Etudes et Dév. Julien Trollé Intégrateur HTML Céline Castagnet Directeur artistique Michel Baptista Ingénieur Etudes et Dév. Vincent Ramond Ingénieur Etudes et Dév. Sivakanes Kumarasamy Ingénieur Etudes et Dév. 73

74 Equipe projet (pilotage)
Photo CV de chacun des membres de l’équipe 74

75 Planning 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 75

76 Planning cf. aussi les autres modèles sur : _modele-PLANNING.ppt 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. Réunion de lancement (date à déterminer) Juillet Août Septembre Octobre Novembre Décembre 2011… Spécifications fonctionnelles Validation des spécifications Charte éditoriale, Référencement, Réseaux sociaux et Vidéos Spécifications techniques Validation des spécifications Suivi au fil de l’eau, en contenu, avec nos différents partenaire (Synodiance, System TV, Kewego) Création / gabarits graphiques Validation des maquettes (site Corporate & infrastructure Intégration HTML Rédaction de la charte graphique Rédaction de la charte graphique au fil de l’eau Développements techniques Reprise automatisée de l'existant Tests et optimisation Livraison du site Formation et transfert de compétences Recette client Validation finale et mise en ligne du site Corporate & infrastructure Validation finale et mise en ligne du site Corporate & infrastructure Saisie des contenus et mise en ligne Suite du roadmap Mise en ligne des prochains sites dès début (dates à valider) Point projet Comité pilotage Charge Groupe Lp Charge / validation « Nom du client » 76

77 Budgets 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 77

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 € HT Consultant fonctionnel € HT Directeur artistique € HT Chef de projet technique € HT Ingénieur développement € HT Intégrateur HTML € 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 78

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 … 79

80 Budget 80

81 Budget total Total général (hors options) Budget total : € HT Charge de travail : jour 81

82 Budget - Option Option : « Intitulé de l’option » Budget total : € HT Charge de travail : jour 82

83 Contact Sommaire Contexte Atouts de Lp active Stratégie et partis pris
(Recommandations éditoriales) Recommandations fonctionnelles Axes graphiques Recommandations techniques (Création de trafic - Référencement - Réseaux sociaux) Méthodologie Équipe Planning Budgets Contact 83

84 Contact 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 84

85 Contact Sylvain Lejarre Directeur général
12, rue du Quatre-Septembre PARIS Tél Tél (LD) 85