Introductionà la gestion de projet

Planning semaine

Lundi : outils gestion, édito Mardi : dev/design Mercredi : bilan par équipe Jeudi: analyse technique, point com Vendredi : projet client, point mémoire

« Méthodes agiles »

Penser « itératif / incrémental »

Avoir une vision de la direction globale du projet Mais penser en terme de mini-projets (V0, V1, V2....)

=> fixer des priorités dans la réalisation => concevoir chaque version en fonction des adaptations

futures

« Méthodes agiles »

Le principe du développement itératif consiste à découper le projet en plusieurs étapes d’une durée de quelques semaines ; ce sont les itérations. Au cours d’une itération, une version minimale du produit attendu est développée puis soumise, dans sa version intermédiaire, au client pour validation.

Véronique Messager Rota « Gestion de projet – Vers les méthodes agiles »

« Méthodes agiles »

Chaque itération est un mini-projet en soi qui comporte toutes les activités de développement, menées en parallèle : analyse, conception, codage et test, sans oublier les activités de gestion de projet.

Véronique Messager Rota « Gestion de projet – Vers les méthodes agiles »

Fixer la direction globale du projet

Définition DT0 de votre projet

Quel est votre objectif ? Quel type de site/DVD/etc. (« vitrine »,

communautaire, ludique, institutionnel, etc...) En quoi votre projet est-il intéressant ? Original ? Public cible : profil général

Types de site, objectifs, caractéristiques

Fixer la direction globale du projet

Planning, répartition, centralisation

Des tâches réparties entre différentes personnes ressources

Mais un espace de travail commun Outils : serveur/FTP, FilXoom, Yahoo Briefcase, ...

Fixer la direction globale du projet

Réaliser un benchmark (puis veille continue...)

Sites concurrents (même sujet, même domaine) Analyse détaillée des 3 ou 4 sites (organisation du

contenu, fonctionnalités proposées / non-proposées) Liste de tous les sites visités (del.icio.us)

Fixer la direction globale du projet

Réaliser un benchmark (puis veille continue...)

Sites de référence (graphisme, navigation), composants originaux/adaptables Alimenter votre boîte à idées Constituer une bibliothèque de composants Penser à la réutilisation de contenus (flux RSS, API...)

Fixer la direction globale du projet

Personae et scénario d'usage (« use case »)

Qualifier des comportements utilisateurs Mieux cerner leurs attentes

=> pour proposer des interfaces adaptées

Personas / personae

Fixer la direction globale du projet

(Re) Définir la ligne éditoriale (DT1)

Les objectifs et l'intérêt du site Le ton et l'ambiance Le calibrage des pages Les thèmes traités et les rubriques proposées Les fonctionnalités proposées (dans quel but ?)

Fixer la direction globale du site

Définir les bases du dev /design

dev/design : création graphique interactive, collaboration entre designer et développeur

Concept board > pistes graphiques > charte

Fixer la direction globale du site

Définir les bases du dev /design

Concept board > pistes graphiques > charte

« mise en forme » du ton et de l'ambiance du site définis dans la ligne éditoriale (« collages », « associations graphiques »)

prise en compte de l'aspect dynamique, interactif

Example détaillé 1 (ligne édito > concept)Example 2. "collages"

Fixer la direction globale du site

Définir les bases du dev /design

Concept board > pistes graphiques > charte

propositions d'une home page, de templates de page avec un système de navigation, + définition de composants interactifs)

example page d'accueil

Fixer la direction globale du site

Définir les bases du dev /design

Concept board > pistes graphiques > charte

templates définitifs, iconographie/logotype et définition du style pour chaque élément (titre, sous-titre, encarts, footer, etc...)

Exemples de templatesExemple de charte graphique (sans la partie template)Exemple de logotypes

Analyse fonctionnelle générale

Définir l'arborescence générale du site (« blueprint »)

- 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 ?

Fixer la direction globale du site

Exemple d'arborescence (mais sans signalétique...)Mindomo: un outil pour réflechir sur l'arbo avant finalisation

Fixer la direction globale du site

Analyse fonctionnelle générale

workflow et wireframe (chemin de fer)- pour chaque page : quels répères (exple:breadcrumbs ) donne-t-

on à l'utilisateur ? Quelles possibilités de directions ?

- y-a-t-il des composants transversaux (footer, crédits, news, etc.) ? Quels modules doivent-être scénarisés (=> storyboard)

- enrichissement progressifs des wireframes

Schéma navigation utilisateur 1 et 2Exemple de wireframeDesign patterns (schéma de conception)

Fixer la direction globale du site

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

Fixer la direction globale du site

Analyse technique

Définir l'arborescence pour les fichiers=> quelle convention de nommage pour les dossiers, les images...?

Définir la plateforme de développement et les « briques » utilisées

Fixer la direction globale du site

Penser com et conception

Le bouche à oreille version web, comment ça marche ?

Organiser la com « hors web »

Fixer les étapes de développement

Développement d'une V1

Planifier le développement des premiers modules du site

AceProjectGantt projectBasecamp

Développement d'une V2

En pensant au tâches transversales

Recherche documentaire / création contenu

Rassembler les sources d'information Rédiger/structurer le contenu Créer une banque d'images / vidéos (Source ?

Légende ? Copyright ? etc...)

En pensant au tâches transversales

Rédaction du mémoire

Conserver tous les docs pour montrer l'évolution de votre projet

Réfléchir à une adaption de la charte graphique version print

etc...

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