Gestion de projet Web
Outils, méthodes & types de projets
Olivier DommangeOlivier Dommange

OlivierDommange
Gestion de projet Web
Qu'est-ce qu'un projet ?

OlivierDommange
Définition
Concept
Vouloir matérialiser
un concept

OlivierDommange
À l'aide de compétences,
méthodes et outils adéquats
Outils
Méthodes
Compétences
Concept
Définition
Vouloir matérialiser
un concept

OlivierDommange
Outils
Méthodes
Compétences
Ressources
Concept
En fonction de
ressources financières
Vouloir matérialiser
un concept
À l'aide de compétences,
méthodes et outils adéquats
Définition

OlivierDommange
Temps
Outils
Méthodes
Compétences
Ressources
Concept
Dans un temps
défini et planifié
Vouloir matérialiser
un concept
À l'aide de compétences,
méthodes et outils adéquats
En fonction de
ressources financières
Définition

Temps
Outils
Méthodes
Compétences
Ressources
Concept
Dans un temps
défini et planifié
Vouloir matérialiser
un concept
À l'aide de compétences,
méthodes et outils adéquats
En fonction de
ressources financières
OlivierDommange
Est-ce vraiment un
projet ?
Si l'un de ces aspects
s'avère mal défini ou
inexistant, le projet
n'existe pas ou n'est pas
viable.
Définition

OlivierDommange
Délais
Qualité
Coûts
Un rapport incompressible !
3 aspects aux projets
En fonction des besoins du
projet, il est question de
trouver un équilibre entre les
coûts de réalisation, les délais
en fonction du niveau de
qualité.
Qu'est-ce qu'un projet ?

OlivierDommange
Le compte est-il bon ?
Réduire l'un des 3 aspects
implique de revoir
proportionnellement à la
baisse les autres facteurs du
projet.
Qu'est-ce qu'un projet ?
Image : http://monmacon.tumblr.com

OlivierDommange
Délais
Qualité
Coûts
Quels sont les
besoins du projet ?
La réduction des contraintes
peut se résoudre par des
solutions bon marché qui
reste de qualité.
Cela dépendra des solutions
proposés.
Qu'est-ce qu'un projet ?

Olivier DommangeOlivier Dommange
Évaluer les risques

OlivierDommange
Les risques...
La collaboration et la traitance

Les risques...
OlivierDommange
Source : Project cartoon
http://www.projectcartoon.com
Compréhension du
projet
Par leur métier, culture
professionnelle et
expérience, chaque
membre d'une équipe,
collaborateur, associé,
sous-traintant ou client
aura une conception
propre du projet.

Les risques...
Collaborations
Autant elles peuvent dynamiser
un projet, autant elles
impliquent un suivi sans faille,
les collaborations comportent
des risques multiples :
- Délais repoussés en chaîne.
- Perte de contrôle de la qualité
- Explosion des coûts
- Communication sommaire
- Duplication des tâches
- Ingérence
- ...
Image : http://monmacon.tumblr.com/
OlivierDommange
Liaisons
dangereuses
Le rôle, les responsabilités
et le processus de
validation sont à clarifier
dès le début du projet.
Client
Vous Traitant
Fournisseurs
?

OlivierDommange
Les risques...
Le client

Les risques...
Créer une entente
claire avec le client
Entre ce que le client
comprend de ce qu'implique
de la réalisation d'un projet et
ce qu'il en est véritablement
peu lui laisser l'occasion de
négocier à la baisse un projet.
Image : http://monmacon.tumblr.com
OlivierDommange
La qualité de votre
travail en dépend
Un projet mal négocié ne
donne pas satisfaction ni
au mandataire, ni au
client. Le risque est de
revoir à la baisse la qualité
au détriment du
consentement du client.

Les risques...
Le client a-t-il
conscience de ce qu'il
demande...
Donnons-lui le bénéfice du
doute. Le client n'est pas du
métier. Il peut avoir tendance à
sous-estimer la quantité de
travail que représente sa
demande. D'ailleurs, il
s'adresse à un professionnel
pour que celui-ci puisse l'aider
dans le choix de solutions
adaptées à ses besoins.
Image : http://monmacon.tumblr.com
OlivierDommange
« Éduquer » le client
Pour rendre conscient un
client de ce que représente
sa demande, il peut s'avérer
utile de lui présenter un
devis détaillé qui lui
permettra éventuellement
de miser sur d'autres
options.

Les risques...
Le syndrome de la
carte blanche
Par excès de confiance, par
difficulté à définir son projet
ou de mauvaise foi, le client
peut avoir tendance à donner
carte blanche...
Cela donne l'impression qu'il
laisse le champ libre dans la
création. Il n'en est rien.
OlivierDommange
Le client se
désengage du projet
Le client doit être
responsabilisé et guidé. S'il
prétend s'adresser à un
professionnel, il aura à
s'attendre à ce que celui-ci
lui explique comment son
projet pourra être mené
avec succès et que son
implication est
déterminante.
Carte
blanche
= ?

OlivierDommange
Les risques...
Les compétences

OlivierDommange
Les risques...
Télécharger, installer
et configurer
Installer et
administrer des
thèmes et modules
Créer un thème
graphique
Développer de
nouvelles
fonctionnalités
Temps
Degrésdecompétences
CMS et Framework
L’utilisation d’un CMS
permet d’envisager un
gain de temps qui peut
s'avérer somme toute
relative en fonction des
besoins spécifiques d’un
projet et de l'ampleur des
compétences qu'implique
leur réalisation.

Répondre aux besoins
Olivier DommangeOlivier Dommange

Identifier le besoin
Évaluer un projet
Bien que soit identifier
une intention il est
nécessaire de définir les
outils et ressources
nécessaires pour
concrétiser ce projet.
OlivierDommange
Le client sait-il ce
qu'il veut ?
Par cette question on tente
de sa savoir ce qu' a besoin
le client et quels sont les
moyens qu'il dispose pour
concrétiser son projet.
Le (futur) prestataire est une
ressource pour l'aider dans
ce processus
Intentions
(objectifs)
Utilisateurs
(besoins)
Technologies
(possibilités)

L'après-projet... à prévoir aussi avant le projet
Mise à jour et
contenus
Planifier la mise à jour du
contenu dans le workflow
(cycle de travail).
Il s'agit de travail
supplémentaire qui assure
la vie de l'outil et qui
s'imbrique dans la
stratégie de
référencement.
OlivierDommange
Maintenance et la
formation
Il s'agit de besoins inhérent
à un projet Web. Cette
assistance peut prendre la
forme d'un mandat qui ira
au-delà du projet de la
conception.
La mise en ligne d'un outil
Web est le début d'un
nouveau projet.
Formation
Mise à jour Maintenance

OlivierDommange
Les solutions...
Le client n'a pas de
budget et des besoins
très limités. Il saura
concevoir à l'aide de
quelques conseils
techniques.
Services en ligne offrant
la mise en place d'un
site en ligne tel que le
propose
wordpress.com.
Le choix de thèmes et
extensions sont limités.
Le client doit avoir
conscience de ces
limites.
Mise en fonction de
l'outil (inscription). Frais
pour services complé-
mentaires proposés par
l'outil. Éventuels frais
de formation.
1
Description Outils Risques Coûts
Do It Yourself (DIY)

OlivierDommange
Les solutions...
Solutions CMS
Un outil comme, par
exemple, Wordpress dispose
différentes solutions qui
peuvent correspondre aux
besoins.
Ce qui peut sembler
gratuit ne l'est peut-être
pas autant qu'il n'y paraît.

OlivierDommange
Les solutions...
Un outil adapté en
fonction des besoins du
projet. Utilise des
extensions de l'outil.
Peu consister à faire du
développement.
Les thèmes et
extensions de l'outil.
Identification
fastidieuse de l'outil et
des extensions
répondant aux besoins.
Planification et budget
difficile à prévoir.
Estimation en fonction
de la planification et
volume de travail.
Pourquoi pas envisager
un tarif forfaitaire.
2
Description Outils Risques Coûts
Tout inclus (CMS, thème et extensions)

Les solutions...
Les CMS ou pas
Wordpress représente
58.8% des CMS utilisés
et 25.6% de tous les
sites de la planète...
56.6% n'utilisent pas
de CMS.
Sources :
http://www.cmsmatrix.org
http://w3techs.com/technologies/overview/content_management/all
OlivierDommange
Avantages
La communauté et
l'intensité de son activité.
Outil testé et mis à jour
fréquemment.
Gratuité.
Rapide à mettre en place.
Inconvénients
La sécurité (open source).
Pas tout le temps gratuit.
L'assistance technique
personnalisée.
Autant de développeurs que
de modules.
Le développement de
nouvelles fonctionnalités
peut impliquer une courbe
d’apprentissage importante.
Répartition des CMS
(jan.16)
Wordpress (58.8%)
Joomla (6.4%)
Drupal (4.9%)
Magento (2.9%)
Blogger (2.7%)
Typo3 (1.5%)
58.8%
6.4%
4.9%
2.9%2.7%
1.5%

OlivierDommange
Les solutions...
Repenser un aspect ou
la totalité d'un outil.
Il peut s'agir d'une
adaptation graphique
ou une révision
technologique.
Déterminés en fonction
des objectifs de la
refonte.
Les coûts et compé-
tences sont déterminés
par les intentions à
l'origine de la refonte.
Analyse technique
détaillée à prévoir.
Estimation en fonction
de la planification et
volume de travail.
4
Description Outils Risques Coûts
Refonte (graphique et/ou technique)

OlivierDommange
Les solutions...
Les extensions
Des outils complémentaires
existent et permettent de
trouver des solutions rapides
dans l'exécution d'un projet
ou pour s'en inspirer.
Le client peut les consulter
en ligne et partager son avis.
Capture d'écran du site Wordpress.org

OlivierDommange
Les solutions...
Un outil devant
correspondre à un
besoin et une évolution
technique ou
technologique
spécifique.
En référence aux outils
identifiés dans la
description du projet.
Niveau de compétences
élevé.
Implique un dévelop-
pement long, itératif.
Nécessite des
méthodes adéquats.
Estimation en fonction
de la planification et
volume de travail...
Correspond à un risque
élevé.
3
Description Outils Risques Coûts
Développement sur mesure

Les solutions...
Éventail de
solutions
Tout concevoir soi-même
assure la maîtrise
complète de l'outil et
permet d'adapter un outil
au plus prêt des besoins du
projet.
OlivierDommange
Avantages
De nombreuses librairies
(framework) permettent
d’obtenir un résultat rapide
et sécurisé.
Maîtrise de l’outil par ses
auteurs.
Résultat sur mesure.
Renforce l’enthousiasme
des développeurs.
Inconvénients
Temps d’investissement
important pour la mise en
place des bases de l’outil et
des tests.
La documentation à rédiger.
Nouveaux collaborateurs à
former.

Outils
Olivier DommangeOlivier Dommange

Le cahier des charges
OlivierDommange
Ça sert à...
Rappeler le contexte et la
stratégie dans lequel
s'insère le projet.
Définir les objectifs.
Accorder le budget et les
délais des livrables.
Signifier certains aspects
juridiques (propriétés
intellectuelles).
Synthèse de 10 à 20 pages
rédigée par le client (avec
l'aide du mandataire).
Les composants
Généralités
Exposer le mandat, le contexte et les objectifs
du projet.
Matière du projet
Définir le type de contenu et comment il sera
obtenu. Présenter les fonctionnalités et
technologies.
Logistique
Délais, livrables, rôle et personnes de contact.

L'offre commercial (devis)
OlivierDommange
Ça sert à...
Exposer les coûts de
réalisation du projet.
Permettre au client de
comprendre les aspects et
phases du projet.
Offrir la possibilité au client
de revoir ces intentions dans
de bonnes conditions et en
meilleure connaissance de
cause.
Les composants
Description des phases et temps de
réalisation.
Taux horaire réaliste (en fonction de toutes les
charges) .
Inclure une marge (en fonction des risques).
Proposer un forfait ou réductions.
En réponse au cahier des
charges, l'offre est rédigée
par le mandataire.

Le contrat
OlivierDommange
Ça sert à...
Formaliser l'entente
commune de collaboration.
Établir un cadre juridique qui
protège et engage les deux
partis.
Les composants
Étendue de l'offre
Décrit la mission, la prestation fournie et les
résultats livrés.
Conditions générales
Indique les dispositions particulières relatives
à la collaboration ou au déroulement. Fixe la
durée du projet ainsi que les obligations du
client et du mandataire.
Dispositions commerciales
Indique le montant et le mode de règlement.
Le contrat est rédigé par le
mandataire. Ce document
est signé par les deux partis.

Les spécifications techniques
OlivierDommange
Ça sert à...
Rappeler les choix
techniques et
technologiques du projet.
Détailler les fonctionnalités.
Fournir une analyse
technique.
Permettre aux analystes et
techniciens d'identifier les
composants du projet.
Assurer une documentation
au projet et un relais aux
futurs projets.
Les composants
Choix techniques
Liste les langages, frameworks, CMS et/ou
extensions utilisés.
Composants fonctionnels et des interfaces
Décrit les processus d'interaction, les
formulaire. Présente les fonctionnalités et la
structure de la base de données.
Autres
Glossaire, lexique, sommaire.
Rédigé par un analyste
technique. Ce document suivra
le projet, pas le mandataire.

Le diagramme de Gantt
OlivierDommange
Ça sert à...
Détailler les étapes de
réalisation du projet pour
chaque fonction.
Estimer la répartition des
ressources humaines et
financières prévues pour le
projet.
Observer les avancées et/ou
retards tout au long du
projet.
Les composants
Étapes du projets
Liste chaque tâches allouant une ressource à
son exécution selon un délai défini.
Suivi
Mise à jour au fil des travaux effectués,
avancées et retards.
Ressources
Liste des ressources humaines allouée au
projet. Définition du coût de chaque ressource
et budget du projet.
Établit par le chef de projet. Ce
document sera mis à jour tout
au long du projet.

Le diagramme de Gantt
Gestion des délais
Découpage des tâches Avancement du projet
Niveau d'avancement des tâches. Gestion des livrables

Outils en ligne
OlivierDommange
Ça sert à...
Faciliter la collaboration avec
les intervenants externes et
autres traitants.
Impliquer le client dans les
différents processus du
projet.
Initié par le chef de projet. Ces
outils sont mis à jour par tous
les collaborateurs.
Archivage de fichiers
GitHub : syncronisation en ligne
DropBox, Google Drive, iCloud
.
Travail collaboratif
Trello.com : gestionnaire de tâches
Mural.ly : mur collaboratif
Google Docs : logiciel en ligne
.
Travail collaboratif
Trello.com : gestionnaire de tâches
Mural.ly : mur collaboratif
Google Docs : logiciel en ligne
.
Pilotage
Basecamp : gestionnaire de tâches

La charte graphique
OlivierDommange
Ça sert à...
Formaliser les choix
graphiques du projet.
Assurer une documentation
utile à tout nouveau
développement de l'outil.Rédigé par le webdesigner. Ce
document suivra le projet, pas
le mandataire.
Les composants
Choix graphiques
Liste les langages, frameworks, CMS et/ou
extensions utilisés.
Composants fonctionnels et des interfaces
Décrit les processus d'interaction, les
formulaire. Présente les fonctionnalités et la
structure de la base de données.
Autres
Glossaire, lexique, sommaire.

Versions et validation
Olivier DommangeOlivier Dommange

Les versions
Maquettes
1ère
2e
Zones de contenus organisées. Organisation du contenu.
La grille de composition.
Wireframe
Aspects graphiques des interfaces. Ergonomie, esthétique,
lisibilité.
Graphique
-
Disposition Validation

Les versions
Prototypes
1ère
2e
Simulation d'une partie, d'un outil ou
d'une séquence.
Utilisabilité, accessibilité,
navigation,
fonctionnalités.
Partiel
Simulation du produit fini dans les
conditions définitives.
Utilisabilité, accessibilité,
navigation,
fonctionnalités.
Complet
Disposition Validation

Les versions
Validations et versions
1ère
2e
3e
Fonctionnalités partielles et interfaces
graphiques complètes. Premiers essais
en condition réelle.
Utilisabilité, aspects
techniques et graphiques,
environnement.
Version alpha
Fonctionnalités, interfaces graphiques et
contenus complets.
Produit entier et
sécurisé.
Version beta
Version 1.0. Stable et finale. Nouvelle
version à chaque modification.
-
Version en
production
Disposition Validation
Interne.
Publique
ou limitée.
Consultation
Publique.

Méthodes
Olivier DommangeOlivier Dommange

La méthode classique
Séquence d'étapes
Identification du
besoins
Analyse
Conception
Développement
Tests
Livraison
OlivierDommange
Découpage
Il faut valider la séquence
précédente avant
d'engager la suivante.
Engagement fort et décisif
à chaque étape.
Le client découvre le
produit qu'au terme de
chaque étape.
Détection tardive des
anomalies (souvent au
moment des tests).
Corrections difficiles et
coûteuses.
1 2 3 4 5 6

OlivierDommange
Les méthodes
Agiles

Les méthodes Agiles
Ce que c'est...
Il s'agit d'un mode de
développement itératif de
projet.
L'objectif est de
développer raidement de
courtes séquences qui
seront présentées au
client afin que celui-ci
puisse intervenir dès que
possible dans
l'acheminement du projet.
OlivierDommange
Plusieurs méthodes
Agiles
Scrum
Probablement la plus
utilisé actuellement. Basé
sur des planifications
courtes (Sprint).
D'autres déclinaisons :
Extreme programming
Rapid Application
Development
Dynamic Software
Developement Method
Analyse
Stratégie
Développement
Retour client
Cycles

Les méthodes Agiles
OlivierDommange
Application d'Agile
Les méthodes Agiles
correspondent davantage
aux gros projets dont les
échéances et budgets de
développement sont
extensibles.
Un projet dont les attentes
sont et le budget sont
définis peut se mener
selon la méthode classique
avec des risques limités.
Limites d'application
Il est reconnu que la valeur ajoutée
au termes d'un cycle est variable.
Elle sera élevée au début et se
réduira au fil du projet.
Dans le cas de projets dont le
budget est limité les cycles de
développement peuvent excéder la
marge définie sans que le projet ne
rencontre les objectifs de départ.
La planification budgétaire avec
Agile peut s'avérer complexe car les
objectifs des cycles dépendent des
résultats du cycle précédent .
1 2 3 4 5 6 7 8 9 10 11
Cycles (temps)
Budget
Valeur ajoutée
Valeur acquise
Coût de production

Les prototypes
OlivierDommange
Confirmer l'UI par l'UX
En accédant rapidement à la
mise en situation supposée
par les wireframes et la
maquette, on expérimente et
constate que les choix de
composition et d'interaction
sont viables et satisfaisants.
Responsive
Webdesign
L'attribution de points de
rupture passe par la mise à
l'épreuve de l'interface sur les
différents formats des
supports.
Des aménagements
graphiques peuvent être
envisagés.
S'inspirer de la méthode
Agile pour le prototype
Les enjeux concernant
l'expérience utilisateur
impliquent de tester lors de la
conception le fonctionnement
des interfaces auprès
d'utilisateurs.
La méthode Agile peut s'avérer
utile. Effectuer un
développement rapide sous
forme de prototype.
Analyse
Wireframe
Développement
Testutilisateur
Cycles

Les tests
OlivierDommange
4 types de tests
Utilisateur
Apprécier l'interaction entre
l'interface et l'utilisateur.
Constater si celui-ci accomplit
les points de convergences
prévus.
Fonctionnel
Identifier les bugs se
rapportant aux fonctionnalités
Sécurité
Identifier les failles et la
vulnérabilité de l'outil
Performance
Améliorer le temps de
chargement sur les supports
et navigateurs. Outil évolutif.
S'inspirer de la
méthode Agile pour
les tests
Les tests d'un outil implique
la définition adéquate des
solutions face aux bugs
signalés.
La correction d'un bug peut
entraîner un problème
jusqu'alors insoupçonné.
Analyse / audit
Déf.fonctions
Développement
Tests
Cycles