Le 27 novembre, Core-Techs a organisé une conférence destinée à la gestion de projet digital. Au programme : les profils des chefs de projet, l'organisation des équipes projets, le choix de la méthode à suivre, le cahier des charges et des outils d'atelier.

1. La gestion de projet digitale
27 novembre 2014

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

3. Ce que disent nos clients…
3 Core-Techs

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

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

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

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

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

9. « 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

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

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

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

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

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

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

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

17. 17 Core-Techs

18. Qui est chef
de projet ?
18 Core-Techs

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

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

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

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

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

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

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

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

27. Ne donne pas le bon exemple
27 Core-Techs

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

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

30. Cycle en V ou Agile ?
30 Core-Techs

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

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

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

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

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

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

37. Mobile first or not ?
37 Core-Techs

38. Le cahier des charges
38 Core-Techs

39. Le formalisme du cahier des charges
ou
39 Core-Techs

40. A minima : QQOQCP
40 Core-Techs

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

42. Les ateliers de
conception
42 Core-Techs

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

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

45. Les stats…
45 Core-Techs

46. Etude de vos cibles
46 Core-Techs

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

48. Shadowing
48 Core-Techs

49. Personas
49 Core-Techs

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

51. Diagramme d’alignement
51 Core-Techs

52. Lean prototyping
52 Core-Techs

53. 53 Core-Techs Le prototypage

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

55. Axure or not ?
55 Core-Techs

56. 56 Core-Techs Les spécifications

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

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

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

60. Le prochain cycle
60 Core-Techs

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