Introduction Gestion Projet web

11 366 vues

Publié le

Introduction à la gestion de projet web

Publié dans : Technologie
3 commentaires
16 j’aime
Statistiques
Remarques
  • bien.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • mais merci bcp pour tout le reste, très bon boulot.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • pas mal de liens cassés à partir de ce document :-(
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
11 366
Sur SlideShare
0
Issues des intégrations
0
Intégrations
216
Actions
Partages
0
Téléchargements
683
Commentaires
3
J’aime
16
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction Gestion Projet web

  1. 1. Introduction à la gestion de projet Laurence Noël [email_address]
  2. 2. Gestion de projet hypermédia <ul><li>Présentation </li></ul><ul><li>des étapes </li></ul><ul><li>des outils </li></ul><ul><li>de quelques sites utiles </li></ul>
  3. 3. Mais tout d'abord... <ul><li>Penser « centralisé » et « travail collaboratif » </li></ul><ul><ul><li>Des tâches réparties entre : un responsable éditorial, une équipe de dév, des graphistes, etc... </li></ul></ul><ul><ul><li>Mais un espace de travail commun (contenant le planning, le « carnet de bord », maquettes, etc...)‏ </li></ul></ul><ul><ul><li>Outils : FTP ou google docs, boxnet, etc... </li></ul></ul>
  4. 4. Les étapes <ul><li>Définir brièvement votre projet par écrit </li></ul><ul><ul><li>Quel est votre objectif ? </li></ul></ul><ul><ul><li>Quel type de site/DVD/etc. (« vitrine », communautaire, ludique, institutionnel, etc...)‏ </li></ul></ul><ul><ul><li>En quoi votre projet est-il intéressant ? Original ? </li></ul></ul><ul><ul><li>A qui s'adresse-t-il ? </li></ul></ul>Types de site, objectifs, caractéristiques
  5. 5. Les étapes <ul><li>2. Réaliser un benchmark </li></ul><ul><ul><li>Sites sur le même sujet, même domaine </li></ul></ul><ul><ul><ul><li>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...)‏ </li></ul></ul></ul><ul><ul><ul><li>Liste de tous les sites visités (del.icio.us, digg)‏ </li></ul></ul></ul>
  6. 6. Les étapes <ul><li>2. Réaliser un benchmark </li></ul><ul><ul><li>Sites ou composants originaux, adaptables, réutilisables </li></ul></ul><ul><ul><ul><li>Alimenter votre boîte à idées </li></ul></ul></ul><ul><ul><ul><li>Constituer une bibliothèque de composants </li></ul></ul></ul><ul><ul><ul><li>Penser à la réutilisation de contenus (flux RSS, API flickr ou google map, etc...)‏ </li></ul></ul></ul>
  7. 7. Les étapes <ul><li>3. Définir la ligne éditoriale </li></ul><ul><ul><li>Le ton et l'ambiance du site </li></ul></ul><ul><ul><li>Le calibrage des pages </li></ul></ul><ul><ul><li>Les thèmes traités et les rubriques proposées </li></ul></ul><ul><ul><li>Les fonctionnalités principales que l'on souhaite proposer (et dans quel but ?)‏ </li></ul></ul>
  8. 8. Les étapes 4. Recherche documentaire / édito <ul><ul><li>Dev/design </li></ul></ul><ul><ul><li>Analyse fonctionnelle </li></ul></ul><ul><ul><li>Spécifications techniques </li></ul></ul>
  9. 9. Les étapes <ul><li>4. (a) Recherche documentaire / édito </li></ul><ul><ul><li>Rassembler les sources d'information </li></ul></ul><ul><ul><li>Rédiger/structurer le contenu </li></ul></ul><ul><ul><li>Créer une banque d'images / vidéos (Source ? Légende ? Copyright ? etc...)‏ </li></ul></ul>Une base de données est-elle nécessaire ?
  10. 10. Les étapes <ul><li>4. (b) Dev/design </li></ul><ul><ul><li>dev/design : création graphique interactive, collaboration entre designer et développeur </li></ul></ul><ul><ul><li>Concept graphique > pistes graphiques > charte </li></ul></ul>
  11. 11. Les étapes <ul><li>4. (b) Dev/design </li></ul><ul><ul><li>dev/design : création graphique interactive, collaboration entre designer et développeur </li></ul></ul><ul><ul><li>Concept graphique > pistes graphiques > charte </li></ul></ul><ul><ul><ul><ul><li>mise en forme du ton et de l'ambiance du site définis dans la ligne éditoriale (« collages », « associations graphiques »)‏ </li></ul></ul></ul></ul>Example détaillé 1 (ligne édito > concept)‏ Example 2. &quot;collages&quot;
  12. 12. Les étapes <ul><li>4. (b) Dev/design </li></ul><ul><ul><li>dev/design : création graphique interactive, collaboration entre designer et développeur </li></ul></ul><ul><ul><li>Concept graphique > pistes graphiques > charte </li></ul></ul><ul><ul><ul><ul><li>propositions d'une home page, de templates de page avec un système de navigation (création de maquettes graphiques + prototypage de composants interactifs)‏ </li></ul></ul></ul></ul>example page d'accueil
  13. 13. Les étapes <ul><li>4. (b) Dev/design </li></ul><ul><ul><li>dev/design : création graphique interactive, collaboration entre designer et développeur </li></ul></ul><ul><ul><li>Concept graphique > pistes graphiques > charte </li></ul></ul><ul><ul><ul><ul><li>templates définitifs, iconographie/logotype et définition du style pour chaque élément (titre, sous-titre, encarts, footer, etc...)‏ </li></ul></ul></ul></ul>Exemples de templates Exemple de charte graphique (sans la partie template)‏ Exemple de logotypes
  14. 14. Les étapes <ul><li>4. (c) Analyse fonctionnelle </li></ul><ul><ul><li>Définir l'arborescence générale du site </li></ul></ul><ul><ul><ul><li>- navigation top-down + liens transversaux entre les pages </li></ul></ul></ul><ul><ul><ul><li>- utiliser une signalétique : renvoie vers une page ou simple noeud d'arborescence ? Page dynamique ou statique ? </li></ul></ul></ul>Exemple d'arborescence (mais sans signalétique...)‏ Mindomo : un outil pour réflechir sur l'arbo avant finalisation
  15. 15. Les étapes <ul><li>4. (c) Analyse fonctionnelle </li></ul><ul><ul><li>workflow et wireframe </li></ul></ul><ul><ul><ul><li>- pour chaque page : quels répères (exple : breadcrumbs ) donne-t-on à l'utilisateur ? Quelles possibilités de directions ? </li></ul></ul></ul><ul><ul><ul><li>- réfléchir à des scénarios utilisateurs : les enchainements sont-ils logiques ? </li></ul></ul></ul><ul><ul><ul><li>- y-a-t-il des composants transversaux (footer, crédits, news, etc.) ? y- a-t-il des modules à scénariser (=> storyboard) ? </li></ul></ul></ul>Schéma navigation utilisateur 1 et 2 Exemple de wireframe Design patterns (schéma de conception)‏
  16. 16. Les étapes <ul><li>4. (d) Analyse technique </li></ul><ul><ul><li>Définir les contraintes techniques </li></ul></ul><ul><ul><ul><li>=> tout public ? référencement ? écran tél portable ? </li></ul></ul></ul><ul><ul><li>Spécifier les formats de données, l'encodage, la portabilité, l'hébergement... </li></ul></ul>
  17. 17. Les étapes <ul><li>4. (d) Analyse technique </li></ul><ul><ul><li>Définir l'arborescence pour les fichiers </li></ul></ul><ul><ul><ul><li>=> quelle convention de nommage pour les dossiers, les images...? </li></ul></ul></ul><ul><ul><li>Définir les solutions de développement </li></ul></ul>
  18. 18. Les étapes <ul><li>5. Développement d'une V1 </li></ul><ul><ul><li>Planifier le développement de chacun des modules et des templates de page </li></ul></ul>AceProject Gantt project Exemple d'un planning complet 6. Tests et débuggage
  19. 19. Liens utiles <ul><li>1. Gestion de projet </li></ul><ul><ul><li>Livre : Conduite de projet web - S. Bordage </li></ul></ul><ul><ul><li>http://universite.online.fr/supports/projet/pdf.htm </li></ul></ul><ul><ul><li>http://fr.selfhtml.org/projet/index.htm </li></ul></ul>
  20. 20. Liens utiles <ul><li>2. Design </li></ul><ul><ul><li>http://www.yesko.com/web-design-process.htm </li></ul></ul><ul><ul><li>http://www.lukew.com/ </li></ul></ul><ul><ul><li>http://infosthetics.com/ </li></ul></ul>
  21. 21. Liens utiles <ul><li>3. Ressources web </li></ul><ul><ul><li>http://mashable.com/2007/09/08/5000-resources-to-do-just-about-anything-online/ </li></ul></ul><ul><ul><li>Flash: BIT-101 et levitated </li></ul></ul><ul><ul><li>Javascript : script.aculo.us/ et GWT </li></ul></ul>

×