Download - Introduction Gestion Projet web
![Page 2: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/2.jpg)
Gestion de projet hypermédia
Présentation des étapes des outils de quelques sites utiles
![Page 3: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/3.jpg)
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...
![Page 4: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/4.jpg)
Les étapes
1.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
![Page 5: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/5.jpg)
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)
![Page 6: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/6.jpg)
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...)
![Page 7: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/7.jpg)
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 ?)
![Page 8: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/8.jpg)
Les étapes
4. Recherche documentaire / éditoDev/designAnalyse fonctionnelleSpécifications techniques
![Page 9: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/9.jpg)
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 ?
![Page 10: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/10.jpg)
Les étapes
4. (b) Dev/design
dev/design : création graphique interactive, collaboration entre designer et développeur
Concept graphique > pistes graphiques > charte
![Page 11: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/11.jpg)
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"
![Page 12: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/12.jpg)
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
![Page 13: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/13.jpg)
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 templatesExemple de charte graphique (sans la partie template)Exemple de logotypes
![Page 14: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/14.jpg)
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
![Page 15: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/15.jpg)
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 2Exemple de wireframeDesign patterns (schéma de conception)
![Page 16: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/16.jpg)
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...
![Page 17: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/17.jpg)
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
![Page 18: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/18.jpg)
Les étapes
5. Développement d'une V1
Planifier le développement de chacun des modules et des templates de page
AceProjectGantt projectExemple d'un planning complet
6. Tests et débuggage
![Page 19: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/19.jpg)
Liens utiles
1. Gestion de projet
Livre : Conduite de projet web - S. Bordagehttp://universite.online.fr/supports/projet/pdf.htmhttp://fr.selfhtml.org/projet/index.htm
![Page 20: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/20.jpg)
Liens utiles
2. Design
http://www.yesko.com/web-design-process.htmhttp://www.lukew.com/http://infosthetics.com/
![Page 21: Introduction Gestion Projet web](https://reader034.vdocuments.net/reader034/viewer/2022042518/548785305906b5b50c8b45e4/html5/thumbnails/21.jpg)
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