introduction à la gestion de projet

Introduction à la gestion de projet

Gestion de projet hypermédia
Présentation
des étapes
des outils
de quelques sites utiles

Mais tout d'abord...
Penser « centralisé » et « travail collaboratif »
Des tâches réparties entre : un responsable éditorial, une équipe de dév, 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
Définir brièvement 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 intéressant ? Original ?
A qui s'adresse-t-il ?
Types de site, objectifs, caractéristiques

Les étapes
2. Réaliser un benchmark
Sites sur le même sujet, même domaine
Analyse détaillée des 3 ou 4 sites les plus intéressants (organisation du contenu, template, navigation, fonctionnalités proposées, style graphique, etc...)
Liste de tous les sites visités (del.icio.us, digg)

Les étapes
2. Réaliser un benchmark
Sites ou composants originaux, adaptables, réutilisables
Alimenter votre boîte à idées
Constituer une bibliothèque de composants
Penser à la réutilisation de contenus (flux RSS, API flickr ou google map, etc...)

Les étapes
3. Définir la ligne éditoriale
Le ton et l'ambiance du site
Le calibrage des pages
Les thèmes traités et les rubriques proposées
Les fonctionnalités principales que l'on souhaite proposer (et dans quel but ?)

Les étapes
4. Recherche documentaire / édito
Dev/design
Analyse fonctionnelle
Spécifications techniques

Les étapes
4. (a) Recherche documentaire / édito
Rassembler les sources d'information
Rédiger/structurer le contenu
Créer une banque d'images / vidéos (Source ? Légende ? Copyright ? etc...)
Une base de données est-elle nécessaire ?

Les étapes
4. (b) Dev/design
dev/design : création graphique interactive, collaboration entre designer et développeur
Concept graphique > pistes graphiques > charte

Les étapes
4. (b) Dev/design
mise en forme du ton et de l'ambiance du site définis dans la ligne éditoriale (« collages », « associations graphiques »)
Example détaillé 1 (ligne édito > concept) Example 2. "collages"

Les étapes
4. (b) Dev/design
propositions d'une home page, de templates de page avec un système de navigation (création de maquettes graphiques + prototypage de composants interactifs)
example page d'accueil

Les étapes
4. (b) Dev/design
templates définitifs, iconographie/logotype et définition du style pour chaque élément (titre, sous-titre, encarts, footer, etc...)
Exemples de templates Exemple de charte graphique (sans la partie template) Exemple de logotypes

Les étapes
4. (c) Analyse fonctionnelle
Définir l'arborescence générale du site
- navigation top-down + liens transversaux entre les pages
- utiliser une signalétique : renvoie vers une page ou simple noeud d'arborescence ? Page dynamique ou statique ?
Exemple d'arborescence (mais sans signalétique...) Mindomo : un outil pour réflechir sur l'arbo avant finalisation

Les étapes
4. (c) Analyse fonctionnelle
workflow et wireframe
- pour chaque page : quels répères (exple : breadcrumbs ) donne-t-on à l'utilisateur ? Quelles possibilités de directions ?
- réfléchir à des scénarios utilisateurs : les enchainements sont-ils logiques ?
- y-a-t-il des composants transversaux (footer, crédits, news, etc.) ? y- a-t-il des modules à scénariser (=> storyboard) ?
Schéma navigation utilisateur 1 et 2 Exemple de wireframe Design patterns (schéma de conception)

Les étapes
4. (d) Analyse technique
Définir les contraintes techniques
=> tout public ? référencement ? écran tél portable ?
Spécifier les formats de données, l'encodage, la portabilité, l'hébergement...

Les étapes
4. (d) Analyse technique
Définir l'arborescence pour les fichiers
=> quelle convention de nommage pour les dossiers, les images...?
Définir les solutions de développement

Les étapes
5. Développement d'une V1
Planifier le développement de chacun des modules et des templates de page
AceProject Gantt project Exemple d'un planning complet
6. Tests et débuggage

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

http://kesakoweb.wordpress.com	18
http://www.slideshare.net	9
http://apprentieweb.blogspot.com	6
http://webstudents.wordpress.com	1
http://bio-energies-online.blogspot.com	1
http://www.onlydoo.com	1
http://apprentieweb.blogspot.fr	1
http://apprentieweb.blogspot.ca	1
http://apprentieweb.blogspot.be	1

introduction à la gestion de projet

by laureno

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 39

Statistics

introduction à la gestion de projet Presentation Transcript