Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

introduction à la gestion de projet

4.682 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

introduction à la gestion de projet

  1. 1. Introduction à la gestion de projet
  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 <ul><li>4. Recherche documentaire / édito </li></ul><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 <ul><li>6. Tests et débuggage </li></ul>
  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>

×