PRESENTATION NAME
Introduction
la gestion de projet
Gestion de projet hypermdia
Prsentation
des tapes
des outils
de quelques sites utiles
Mais tout d'abord...
Penser centralis et travail collaboratif
Des tches rparties entre : un responsable ditorial, une quipe de
dv, des graphistes, etc...
Mais un espace de travail commun (contenant le planning, le
carnet de bord, maquettes, etc...)
Outils : FTP ou google docs, boxnet, etc...
Les tapes
Dfinir brivement votre projet par crit
Quel est votre objectif ?
Quel type de site/DVD/etc. (vitrine, communautaire, ludique,
institutionnel, etc...)
En quoi votre projet est-il intressant ? Original ?
A qui s'adresse-t-il ?
Types de site, objectifs, caractristiques
Les tapes
2. Raliser un benchmark
Sites sur le mme sujet, mme domaine
Analyse dtaille des 3 ou 4 sites les plus intressants
(organisation du contenu, template, navigation, fonctionnalits
proposes, style graphique, etc...)
Liste de tous les sites visits (del.icio.us, digg)
Les tapes
2. Raliser un benchmark
Sites ou composants originaux, adaptables, rutilisables
Alimenter votre bote ides
Constituer une bibliothque de composants
Penser la rutilisation de contenus (flux RSS, API flickr ou
google map, etc...)
Les tapes
3. Dfinir la ligne ditoriale
Le ton et l'ambiance du site
Le calibrage des pages
Les thmes traits et les rubriques proposes
Les fonctionnalits principales que l'on souhaite proposer (et
dans quel but ?)
Les tapes
4. Recherche documentaire / dito
Dev/design
Analyse fonctionnelle
Spcifications techniques
Les tapes
4. (a) Recherche documentaire / dito
Rassembler les sources d'information
Rdiger/structurer le contenu
Crer une banque d'images / vidos (Source ? Lgende ? Copyright ?
etc...)
Une base de donnes est-elle ncessaire ?
Les tapes
4. (b) Dev/design
dev/design : cration graphique interactive, collaboration entre
designer et dveloppeur
Concept graphique > pistes graphiques > charte
Les tapes
4. (b) Dev/design
dev/design : cration graphique interactive, collaboration entre
designer et dveloppeur
Concept graphique > pistes graphiques > charte
mise en forme du ton et de l'ambiance du site dfinis dans la
ligne ditoriale (collages, associations graphiques)
Example dtaill 1 (ligne dito > concept)Example 2.
"collages"
Les tapes
4. (b) Dev/design
dev/design : cration graphique interactive, collaboration entre
designer et dveloppeur
Concept graphique > pistes graphiques > charte
propositions d'une home page, de templates de page avec un
systme de navigation (cration de maquettes graphiques + prototypage
de composants interactifs)
example page d'accueil
Les tapes
4. (b) Dev/design
dev/design : cration graphique interactive, collaboration entre
designer et dveloppeur
Concept graphique > pistes graphiques > charte
templates dfinitifs, iconographie/logotype et dfinition du style
pour chaque lment (titre, sous-titre, encarts, footer, etc...)
Exemples de templatesExemple de charte graphique (sans la partie
template)Exemple de logotypes
Les tapes
4. (c) Analyse fonctionnelle
Dfinir l'arborescence gnrale du site
- navigation top-down + liens transversaux entre les pages
- utiliser une signaltique : renvoie vers une page ou simple
noeud d'arborescence ? Page dynamique ou statique ?
Exemple d'arborescence (mais sans signaltique...)Mindomo: un
outil pour rflechir sur l'arbo avant finalisation
Les tapes
4. (c) Analyse fonctionnelle
workflow et wireframe
- pour chaque page : quels rpres (exple:breadcrumbs ) donne-t-on
l'utilisateur ? Quelles possibilits de directions ?
- rflchir des scnarios utilisateurs : les enchainements sont-ils
logiques ?
- y-a-t-il des composants transversaux (footer, crdits, news,
etc.) ? y- a-t-il des modules scnariser (=> storyboard) ?
Schma navigation utilisateur 1 et 2Exemple de wireframeDesign
patterns (schma de conception)
Les tapes
4. (d) Analyse technique
Dfinir les contraintes techniques
=> tout public ? rfrencement ? cran tl portable ?
Spcifier les formats de donnes, l'encodage, la portabilit,
l'hbergement...
Les tapes
4. (d) Analyse technique
Dfinir l'arborescence pour les fichiers
=> quelle convention de nommage pour les dossiers, les
images...?
Dfinir les solutions de dveloppement
Les tapes
5. Dveloppement d'une V1
Planifier le dveloppement de chacun des modules et des templates
de page
AceProjectGantt projectExemple d'un planning complet
6. Tests et dbuggage
Liens utiles
1. Gestion de projet
Livre : Conduite de projet web - S. Bordage
http://universite.online.fr/supports/projet/pdf.htm
http://fr.selfhtml.org/projet/index.htm
Liens utiles
2. Design
http://www.yesko.com/web-design-process.htm
http://www.lukew.com/
http://infosthetics.com/
Liens utiles
3. Ressources web
http://mashable.com/2007/09/08/5000-resources-to-do-just-about-anything-online/
Flash: BIT-101 et levitated
Javascript : script.aculo.us/ et GWT
