module 1 iut bobigny : organisation et conception
DESCRIPTION
Support de cours du premier module de gestion de projet web, dans le cadre de l'IUT de Bobigny (année scolaire 2012-2013).TRANSCRIPT
ORGANISATION ET CONCEPTIONGestion de projet web – Module 1
2
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
MODULE 1: ORGANISATION ET CONCEPTION
ALM Méthodologie Agile, Scrum, Kanban Outillage : Git, Jira / Redmine, wiki Spécifications : expression de besoins,
normalisation, nomenclature, formalisation Conception web : responsive design, mobile
first, frameworks, outils
Petit rappel : dans un contexte d’entreprise… Projetez-vous !
3
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
ALM : APPLICATION LIFECYCLE MANAGEMENT
Nous allons globalement parler d’ALM : Pour créer une chaîne centralisée d’ingénierie
logicielle et de gestion de projet
MÉTHODOLOGIE AGILE
5
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
AGILE ?
6
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
LES MÉTHODES DE GESTION DE PROJET TRADITIONNELLES
Cycle en V (en cascade)
Cycles en spirale, itératif ou semi-itératif
xUP (Unified Process) : méthode définissant le cycle de vie d’un logiciel
CMMI (Capability Maturity Model Integration) : modèle de référence, un ensemble structuré de bonnes pratiques, destiné à appréhender, évaluer et améliorer les activités des entreprises d'ingénierie.
Notions de MOA (Maîtrise d’ouvrage) et MOE (Maîtrise d’œuvre)
7
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
4 FONDAMENTAUX DU MANIFESTE AGILE
1. Priorité aux personnes et aux interactions,
2. Priorité au développement des fonctionnalités,
3. Priorité à la collaboration avec le client,
4. Adaptation au changement.
8
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
LES PRÉCONISATIONS DU MANIFESTE AGILE
9
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
DÉCLINAISONS MÉTHODOLOGIQUES AGILE
Scrum Kanban XP (Extreme Programming)
RUP
Ce sont tous des outils, à choisir et adapter au contexte.
10
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
SCRUM : PRINCIPE Des petites équipes qui passent peu de
temps à construire des petites choses mais intègrent régulièrement.
Segmenter l’organisation : petites équipes Découper le produit en fonctionnalités unitaires Organiser le temps en cycles court
11
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
SCRUM : VUE D’ENSEMBLE 1 Process Model
3 roles : Product Owner, Scrum Master, Team 3 ceremonies : Sprint Planning, Daily Scrum, Sprint Review 3 tools: Product Backlog, Sprint Backlog, Burndown Chart
12
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
SCRUM : RÔLES The Product Owner
represents the interests of the customers and other key stakeholders on the project
is responsible for managing a prioritized list of requirements and other work to be done by the team
The SCRUM Master must ensure that SCRUM practices are correctly
applied is responsible for helping the team to achieve
its goals
The Team is responsible for implementing the
functionalities is self-organizing, self-managing and cross-
functional
13
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
SCRUM : 3 CÉRÉMONIES The Sprint Planning
The Product Owner presents to the Team his wish list of product items
The Team defines and estimates the tasks to perform for each item
until it reaches its maximum sustainable workload
The Team commits to deliver the planned items for that Sprint
The Daily Scrum Each day, the Team attends to a 15-minute
stand-up meeting to follow up the tasks currently undertaken to early detect and react to abnormal situations
The Sprint Review The Team demonstrates the delivered features to
the Product Owner allows the Product Owner to accept or not the
delivered items The Scrum Master conducts a retrospective with
the whole team allows the Team to enhance its working practices
14
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
SCRUM : 3 OUTILS The Product Backlog
List of items that represent the functionalities to add to the system
Defined, managed and strictly prioritized by the Product Owner
The Sprint Backlog Subset of the Product Backlog
expanded in low-level tasks estimated in hours (<16h) during the
Sprint Planning by the Team Defined and managed by the Team
during the Sprint
The Burndown Chart Chart used to measure Sprint progress
heavily relies on the definition of “done” The same chart can be used to
measure progress at therelease level
15
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
KANBAN : PRINCIPE Visualiser le flux de production Limiter le WIP (Work In Progress) Mesurer et optimiser le flux
Issu des méthodologies des chaînes industrielles de Toyota
16
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
EXEMPLE DE KANBAN BOARD
SOURCE CODE VERSIONING
18
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
SOURCE CODE VERSIONING
2 main types: Local Version Control Systems:
CVS, Subversion (SVN), Perforce
Distributed Version Control Systems: Git, Mercurial, Bazaar
Git platform
19
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
SOURCE CODE VERSIONNING BEST PRACTICES
Commit early and often. Use a common project structure and naming
convention. Define versioning best practices:
How to branch How to merge When to commit
Setup hooks and scripts to automate repetitive tasks.
PROJECT & BUG TRACKING
21
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
PROJECT TRACKING: TOOLS
Lots of different solutions with various scope: Open source solutions:
Redmine http://www.redmine.org/ Tuleap http://www.tuleap.com Chili project http://www.chiliproject.org/
Commercial solutions: Jira http://www.atlassian.com/fr/ TFS,by Microsoft Many other tools by IBM…
Bug Trackers: Mantis http://www.mantisbt.org/
Other production tools: Trello http://www.trello.com Phabricator http://phabricator.org/
22
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
PROJECT TRACKING: TIPS1. You need a Project Tracking tool. Set it up and configure it according to your
context.
2. Make sure task and bug status are up-to-date. For instance, set tasks “in progress” when you start working.
3. Log the work spent on a task daily to allow the Project Manager to track progress.
4. Report any difficulties or changes in your work as soon as possible to avoid delays and frictions in the development process.
5. After each cycle, improve the capacity planning and the estimate accuracy.
6. Automatically generate release notes.
7. Automate a monthly project report of done tasks and upcoming tasks. Link it to the general roadmap and schedule.
23
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
FOCUS ON JIRA
From Atlassian, lots of features, user-friendly, separate components (Greenhopper for Agile, Bonfire for testing, Confluence for wiki)
24
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
FOCUS ON REDMINE
Open Source and Free, lots of plugins, built-in Wiki, code viewer, Gantt & Calendar
WIKI
26
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
WIKI: WHAT FOR?
Useful to: Work as a team on documentation Quick and Easy editing Categorize and relate pieces of information
together Centralize information Share and spread the knowledge Available online
Challenges: Keep information up-to-date and relevant Structure appropriately It is only as good as what people put in it!
27
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
WIKI: TOOLS
Built-in wikis: in Jira (Confluence), Redmine, Sharepoint…
Mediawiki http://www.mediawiki.org Dokuwiki https://www.dokuwiki.org Choose your own:
http://www.wikimatrix.org
28
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
OTHER USEFUL TOOLS
Password tool: To centralize passwords for the whole team
(Teampass…) FTP server with web ftp access:
To share heavy documents internally and externally
Instant Messaging: IRC Skype / Google Talk / Lync
SPÉCIFICATIONS
30
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
WHY DO WE NEED FUNCTIONAL SPECIFICATIONS?
Good Functional Specifications are key to successful projects To clarify what we want to do To make sure we took time to think it through To give clear requirements to the developers
31
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
LIST NEEDS AND REQUIREMENTS
List the needs of all stakeholders:
What do they want? What do they need?
What is the reason for those specifications?
32
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
START FROM A TEMPLATE DOCUMENT All specifications should be based on the
same template document (wiki template, Word template…)
This will facilitate your work.This will make sure you produce consistent functional specifications and high quality documents to be shared internally and externally.
Write in English!
33
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
DREAM THE IDEAL WORLD
When writing your specifications, do not restrain
yourself based on technical or business reasons.
Design it as if you had “almost” unlimited budget and
time.
Specification scope will always be reduced, so think
big.
Your specifications should reflect your needs.
…but remain realistic
34
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
DESIGN USE CASES
A key part of the functional specifications is to
design use cases: all scenarios where the feature
will be used.
Take the tester point of view: try and translate
it in terms of acceptance criteria. How would you and a tester validate your specifications? What are all the possible cases? What are the limits and exceptions? This can be done as a list of scenarios, as a tree of possibilities. Provide examples and mockups.
35
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
REVIEW AND UPDATE
1. Review the document with all stakeholders.
2. Update.
3. Share.
36
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
IMPLEMENT To begin implementation, you do not necessarily need final specifications, but you do need enough data and you must make sure all aspects were tackled and problems anticipated (risk management).
This is only the start: functional specifications must live and be updated throughout the production process.
Once the project is over, you should have a reference document that reflects what was actually produced. It is your role to make sure this is the case.
Keep in appendix for future evolutions what was dropped from the original scope of your dream world.
37
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
TECHNICAL DOCUMENTATION“How is the software built?”
”Why is it built that way?”
Before starting work on a new feature, take some time to think about it and write down main conception details.
This is a preliminary document to formalize before coding. Typically in the Wiki.
Organize a technical review with another developer to proof read, check for consistency and compatibility within the whole project. Try and anticipate prerequisites, technical dependencies and potential pitfalls.
Go to the point. Diagrams are better than text. Details will appear in comments directly into the code.
Iterate and update the conception document while working on the project.
The conception document should be delivered along with the source code to facilitate understanding and maintenance for future developers.
CONCEPTION WEB
39
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
WEB DESIGN
3 enjeux aujourd’hui : Etre portable : Le site doit être consultable sur
tous les supports connus (et à venir). Etre visuel : Communiquer grâce à des textes
courts, des images et de la vidéo, d’autant plus que ce type de consultation est très apprécié sur mobile, tablette et télévision.
Rester simple : car la simplicité permet de véhiculer efficacement les messages.
D’où la démarche du Responsive Web Design
40
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
RESPONSIVE WEB DESIGN : UN PEU DE VOCABLE Adaptive Web Design: generic idea of the web page adapting
to the browser context (see also progressive enhancement) Responsive Web Design : take into account the display (if
screen sizes vary, the web page changes) Responsive Layout : blocks are positionned dynamically Fluid Grid: columns adapt and expand based on browser width
CSS3 & Media Queries: technical tools to implement RWD
41
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
CONCEVOIR EN RESPONSIVE Mobile first pour le fonctionnel :
définir les fonctionnalités essentielles
Déterminer les points de bascule HD first pour la créativité : enrichir
visuellement et graphiquement en partant des hautes résolutions
42
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
ITÉRER
Expérimenter Tester sur tous les devices Faire collaborer les différents métiers:
graphiste, ergonome, développeur… Trouver le meilleur compromis sur chaque
plate-forme Ayez une vraie stratégie de contenu
43
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
RESPONSIVE TOOLS
Frameworks and templates Bootstrap http://twitter.github.com/bootstrap/ Skeleton http://www.getskeleton.com/ Foundation http://foundation.zurb.com/ Less http://lessframework.com/ Adaptive images http://adaptive-images.com/
Design tools Balsamiq http://www.balsamiq.com/ 960 grid system http://960.gs/
Test toolshttp://www.responsinator.com http://dfcb.github.com/Responsivator/
…and many more available…
UN PEU DE PRATIQUE
45
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
EXERCICE 1 : AGILE
1. Dessiner un Kanban Board2. Créer les grandes User Story, les tâches
associées3. Créer un projet Jira / Redmine / Trello pour
votre projet4. Simuler le sprint en cours
46
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
EXERCICE 2 : CODE SOURCE
1. Créer un compte utilisateur sur Github2. Versionner votre code source dans Git3. Créer plusieurs branches, faites des
modifications, commiter, merger
47
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
EXERCICE 3 : SPÉCIFICATIONS
1. Rédiger la trame de vos spécifications2. A intégrer dans le wiki3. Ebaucher une section de conception
technique (par exemple sur l’architecture responsive de votre site. Voir exercice suivant)
48
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
EXERCICE 4 : RESPONSIVE WEB DESIGN
1. Concevez le prototype responsive de votre projet
2. Définissez les fonctionnalités clés en mode Mobile First
3. Déterminez les points de bascule4. Designez les différentes versions
RÉFÉRENCES
50
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
AGILE, SCRUM, KANBAN, LEAN…
http://www.crisp.se/ : voir toute la documentation de ces auteurs
http://agilemanifesto.org/ Valtech Livre Blanc Agile : http://
valtech.fr/etc/medialib/library/it_consulting/fr/Livres_Blancs.Par.50587.File.dat/VALTECH-LIVRE_BLANC_2012-WEB.pdf
Agile for Dummies
51
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
CONCEPTION WEB, RESPONSIVE DESIGN… A lire:
“Responsive Web Design” de Ethan Marcotte “Mobile First” de Luke Wroblewski
http://www.nealite.fr/blog/expertise/agence-nealite-responsive-design-2-6028.htm
http://www.clever-age.com/veille/blog/responsive-web-design-du-point-de-vue-du-chef-de-projet.html
http://www.ultranoir.com/fr/#!/blog/web_3.0/responsive_design/
Pour des transitions CSS : http://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript
-techniques/
http://beta.theexpressiveweb.com/
Website inspiration : http://www.awwwards.com/ http://www.thebestdesigns.com/ http://onepagelove.com/
52
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
ET ENCORE…
Blog Octo : http://blog.octo.com/ Livre blanc Smile ALM : http://
www.smile.fr/Livres-blancs/Systeme-et-infrastructure/ALM-open-source
Role of wiki in dev teams: http://analysis102.blogspot.fr/2007/01/role-of-wiki-in-dev-team.html
53
Gestio
n d
e p
roje
t Web
| IUT B
ob
ign
y 2
01
2-2
01
3 | Fré
déric R
IVA
IN - fre
deric.riv
ain
@g
mail.co
m
UN PETIT SITE POUR RETROUVER CE COURS
https://sites.google.com/site/iutbobignyweb/ Support de formation Liens utiles Coordonnées Formulaire d’évaluation