La gestion de projet digitale
27 novembre 2014

Slides de présentation Core-
Techs
2 Core-Techs

Ce que disent nos clients…
3 Core-Techs

« Le projet est simple, j’ai tout
dans la tête. Je vais vous
expliquer, ça va aller vite. »
4 Core-Techs

« Les maquettes graphiques
ont un effet whaouh ! C’est le
graphiste qui s’est occupé des
plaquettes qui les a faites. »
5 Core-Techs

« Et oui, les maquettes sont
déjà prêtes, le boss voulait
valider ça avant tout. »
6 Core-Techs

« J’ai pas de cahier des
charges, mais faut que ça soit
prêt dans 1 mois »
7 Core-Techs

« On verra ça plus tard,
pendant le développement. »
8 Core-Techs

« Oui, oui, oui, d’accord,
d’accord, bien sûr, pas de
souci, vous avez raison, on fera
comme ça, on va se
débrouiller, … »
9 Core-Techs

« oups, désolé, j’ai oublié de te
mettre en copie du mail… »
(3 semaines plus tard)
10 Core-Techs

« Les contenus ? On prendra un
stagiaire à la fin du projet pour
les reprendre»
11 Core-Techs

« Le référencement ? C’est une
agence qui s’en occupe
après…»
12 Core-Techs

« Le planning ? C’est un des
dév de l’équipe qui l’a fait. Ca
devrait aller vite. »
13 Core-Techs

« Pourtant, je le lui ait dit et
répété par téléphone !!! »
14 Core-Techs

« Zut, zut, zut, on est en retard,
va falloir qu’on rattrape, faut
pas que le client soit au
courant.»
15 Core-Techs

« Ouf, une fois le projet en
ligne, on va pouvoir se
reposer…»
16 Core-Techs

17 Core-Techs

Qui est chef
de projet ?
18 Core-Techs

Les profils du chef de projet
Le technicien Le communiquant
19 Core-Techs

Le chef de projet (A)MOA
Excellente
connaissance du
Web
20 Core-Techs
Excellente
connaissance du
fonctionnement de
l’organisation et de
l’organigramme
Il sait qui fait quoi
Il connaît bien tous
ses prestataires

Le chef de projet (A)MOE
Expertise
fonctionnelle
de la solution
retenue
Profil technique
21 Core-Techs
?
Soutien
technique en
interne fort
Capacité à se
recentrer sur les
besoins
utilisateurs
Capacité de
planification et
de négociation
des ressources
Bonne
connaissance
de l’équipe
technique

Les contre-exemples du chef
de projet
22 Core-Techs

Gère trop de projets
en parallèle
23 Core-Techs

Fait reposer toute la
responsabilité du projet sur la
MOA/MOE,
24 Core-Techs

Ne fait pas communiquer les différents
prestataires ou ne transmets pas les bonnes
informations
25 Core-Techs

Est en conflit avec d’autres équipes en
interne
26 Core-Techs

Ne donne pas le bon exemple
27 Core-Techs

Organisation des
équipes et choix
de la méthode
28 Core-Techs

Qui fait quoi ?
29 Core-Techs
Directeur de projet
Directeur Artistique
Lead Technique
Développeur
Intégrateur
Testeur
…
Pôles métier
Rédacteurs
Testeurs
Décisionnaires
(A)MOA (A)MOE

Cycle en V ou Agile ?
30 Core-Techs

Les grandes étapes d’un cycle en V
Avant-Projet
•Cadrage
•Cahier des charges
Réponse
externe
•Appel d’offre
•Analyse des offres
Conception
•Spécifications
fonctionnelles
•Spécifications
techniques
•Prototypage
•Conception
graphique
31 Core-Techs
Développement
•Lotissement
•Réception &
recette
Maintenance et
suivi
•Tests utilisateurs
•TMA

Avantages / Inconvénients
Une méthode efficace
•Anticipation des étapes
•Exhaustivité du besoin
Une méthode trop stricte ?
•Besoin figé au démarrage
32 Core-Techs

Les valeurs agiles
 L’équipe
 L’application
 La collaboration
 L’acceptation
du changement
33 Core-Techs

La méthode agile nécessite
 Plus d’implication et de disponibilité du product owner
(AMOA)
 Plus de souplesse de l’équipe de développement (MOE)
 Une taille réduite des équipes
34 Core-Techs

Avantages / Inconvénients
Une méthode complète
• Itérations pour coller au plus
près du besoin
Des risques de dérapage
• Planning
• Budget
35 Core-Techs

Choisir la meilleure méthode d’après :
Y a-t-il un
budget/délai
fixe
Quelle est la
taille du projet
Quelle est
l’organisation et
la personnalité
des acteurs ?
36 Core-Techs

Mobile first or not ?
37 Core-Techs

Le cahier des charges
38 Core-Techs

Le formalisme du cahier des charges
ou
39 Core-Techs

A minima : QQOQCP
40 Core-Techs

QQOQCP
 Qui : ciblage et profil des visiteurs.
 Quoi : type de site, description du contenu du site, mots
clés…
 Où : vocation locale, nationale, internationale…
 Quand : échéances pour la mise en ligne.
 Comment : en propre ou hébergé, technologies privilégiées,
budget, ressources et parties prenantes, …
 Pourquoi : Objectifs du site, rentabilité, valeur attendue…
41 Core-Techs

Les ateliers de
conception
42 Core-Techs

Quelques outils d’ateliers
 Le benchmark
 L’analyse statistique de l’existant
 Les études quantitatives / qualitatives
 Le tri des cartes
 Shadowing / one day in a life, fly on the wall
 Les personas
 La cartographie de l’expérience utilisateur
 Les diagrammes d’alignement
 Lean prototyping
43 Core-Techs

Benchmark
 Graphique
 Ergonomique
 Fonctionnel
 Technique
44 Core-Techs

Les stats…
45 Core-Techs

Etude de vos cibles
46 Core-Techs

Le jeu des post-it (tri des cartes)
47 Core-Techs

Shadowing
48 Core-Techs

Personas
49 Core-Techs

Cartographie de l’expérience utilisateur
50 Core-Techs

Diagramme d’alignement
51 Core-Techs

Lean prototyping
52 Core-Techs

53 Core-Techs Le prototypage

Les différentes formes de prototypage
 Sketch / croquis
 Zonings
 Wireframe / maquette filaire
 Prototype
54 Core-Techs

Axure or not ?
55 Core-Techs

56 Core-Techs Les spécifications

Doivent s’adapter à l’outil sous-jacent
57 Core-Techs

Cas pratique avec Drupal – les structures de
contenu
Champ Type Obligatoire Multivalué Commentaire
Titre Ligne de texte Oui Non
Date de début Date Oui Non
Date de fin Date Non Non
Corps de texte Texte riche Oui Non
Type d’événement Taxonomie « Types
d’événement »
Oui Non
Visuel Photo Oui Oui Au moins une valeur
Genre Ligne de texte Non Non Aide de remplissage
58 Core-Techs
à afficher :
Ex. : Blues, One man
show, Humour,
Diner-concert, ...
Lieu Ligne de texte Oui Non
Adresse Bloc de texte Oui Non
Code postal Ligne de texte Oui Non
Ville Taxonomie
« Communes »
Oui Non
Horaires Ligne de texte Non Non Aide de remplissage
à afficher :
Ex. : 10h et 17h, du
lundi au vendredi de
9h à 12h et de 14h
à 18h, Le 27
octobre à 20h et le
18 novembre à 17h,
…
Durée Ligne de texte Non Non Aide de remplissage
à afficher :
Ex. : 1h30, 2h avec
entracte, ...
Indications Ligne de texte Non Non Aide de remplissage
à afficher :
Ex. :Entrée libre,
Gartuit, Á partir de
12 ans, Tarif de 10
à 28 €, Réservation
obligatoire, ...
Téléphone Ligne de texte Oui Non
Email Email Oui Non
Site web URL Non Non
Partenariat CG Case à cocher Non Non
Localisation Coordonnées GPS Non Non Implémenté
automatiquement à
partir de l’adresse
postale en utilisant
le geocoding de
Google Maps

Cas pratique avec Drupal – le détail d’une page de
contenu
Actualités
2
Cette zone affiche la liste des 12 dernières actualités publiées sur le portail.
Cette liste est affichée sous la forme d’un carrousel.
La liste est triée par ordre chronologique basée sur la date de publication (de la plus récente à la plus
ancienne).
Pour chaque actualité de la liste de la partie inférieur, les éléments suivants sont affichés :
 La thématique associée
 Titre de l’actualité
 Date de publication
 Nombre de vues
 Liens de partage Facebook et Twitter (Affichage dans une zone rétractable masquée par défaut)
Lors du survol ou de la prise de focus sur le titre d’une actualité dans la partie inférieure de la zone,
l’actualité correspondante s’affiche dans la partie supérieure :
 Titre
 Visuel
 Extrait de la description limité à 150 caractères
 Lien « + » vers la vue pleine page de l’actualité
Actions disponibles :
Action Description Commentaire
Clic sur le titre ou
L’utilisateur est redirigé vers la vue pleine
l’image ou le lien
page de l’actualité sélectionnée
« + » d’une actualité
Voir annexe technique
accessibilité § 30.2 à propos des
liens mixtes.
Clic sur le lien
« Toutes les actualités
»
L’utilisateur est redirigé vers la liste des
actualités
Clic sur le lien de
partage Facebook
d’une actualité
L’internaute est redirigé vers la page
Facebook de partage de l’actualité
sélectionnée
Ouverture dans une nouvelle
fenêtre Voir annexe technique
accessibilité § 30.1 à propos des
liens images.
Clic sur le lien de
partage Twitter d’une
actualité
L’internaute est redirigé vers la page Twitter
de partage de l’actualité sélectionnée
Ouverture dans une nouvelle
fenêtre Voir annexe technique
accessibilité § 30.1 à propos des
liens images.
Clic sur l’une des
pastilles de
navigation situées
dans le coin supérieur
droit de la zone
La série d’actualités correspondantes est
affichées dans la zone (fonctionnement en
slider avec effet de fondu)
Le focus clavier doit être remis sur
le titre de la 1er actualités dans la
partie inférieure
Sans JavaScript En l’absence de JavaScript toutes les
actualités doivent être visibles,
Clic sur le titre d’une
actualité dans la
partie inférieure
Le focus est redirigé vers l’actualité
correspondant dans la partie supérieur
Le titre de l’actualité dans la
partie inférieure devra être un
élément button ou un lien avec un
rôle « button »
59 Core-Techs

Le prochain cycle
60 Core-Techs

Au programme du 27 janvier
 Organiser et suivre les développements
 Pratiquer les tests et faire une recette efficace
 Gérer l’hébergement
 Préparer le référencement
 Préparer la reprise des contenus
 Planifier la version 2
61 Core-Techs