Introduction à la gestion de projet

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

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

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

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 ?

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)

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

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

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

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 ?

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

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

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 dev/design : création graphique interactive, collaboration entre designer et développeur Concept graphique > pistes graphiques > charte 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"

4. (b) Dev/design

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

Concept graphique > pistes graphiques > charte

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

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

4. (b) Dev/design

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

Concept graphique > pistes graphiques > charte

propositions d'une home page, de templates de page avec un système de navigation (création de maquettes graphiques + prototypage de composants interactifs)

Les étapes 4. (b) Dev/design dev/design : création graphique interactive, collaboration entre designer et développeur Concept graphique > 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 templates Exemple de charte graphique (sans la partie template) Exemple de logotypes

4. (b) Dev/design

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

Concept graphique > pistes graphiques > charte

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

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

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 ?

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)

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

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

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

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

5. Développement d'une V1

Planifier le développement de chacun des modules et des templates de page

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

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/

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

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