SlideShare une entreprise Scribd logo
Introduction à la gestion de projet Laurence Noël [email_address]
Gestion de projet hypermédia 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...
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
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)‏
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...)‏
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 ?)‏
Les étapes 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 ?
Les étapes 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"
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
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
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
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)‏
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...
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
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
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

Contenu connexe

Tendances

Gestion de projet web
Gestion de projet webGestion de projet web
Gestion de projet web
Olivier Dommange
 
Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !
Valls y Machinant David - Auteur sur : Carrefourdesreussites.com
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
Laribi Aicha
 
Determiner son besoin et definir ses objectifs pour son projet de site web
Determiner son besoin et definir ses objectifs pour son projet de site webDeterminer son besoin et definir ses objectifs pour son projet de site web
Determiner son besoin et definir ses objectifs pour son projet de site web
Matthieu Tran-Van
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
Rodolphe Finamore
 
Alphorm.com Formation Robot Structural Analysis Professional
Alphorm.com Formation Robot Structural Analysis ProfessionalAlphorm.com Formation Robot Structural Analysis Professional
Alphorm.com Formation Robot Structural Analysis Professional
Alphorm
 
comment rédiger une expression de besoins
comment rédiger une expression de besoinscomment rédiger une expression de besoins
comment rédiger une expression de besoins
Alexandre Zermati
 
2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic
COMPETITIC
 
Domain Driven Design - Agile France 2010
Domain Driven Design - Agile France 2010Domain Driven Design - Agile France 2010
Domain Driven Design - Agile France 2010
François Wauquier
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
Olivier Dommange
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
Idean France
 
Alphorm.com Formation AutoCAD 2021 : Les fondamentaux
Alphorm.com Formation AutoCAD 2021 : Les fondamentauxAlphorm.com Formation AutoCAD 2021 : Les fondamentaux
Alphorm.com Formation AutoCAD 2021 : Les fondamentaux
Alphorm
 
Cahier des charges site internet
Cahier des charges site internetCahier des charges site internet
Cahier des charges site internet
Nebkacréa
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
laureno
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
Idean France
 
Workn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site webWorkn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site web
Net Design
 
Plan cahier-des-charges
Plan cahier-des-chargesPlan cahier-des-charges
Plan cahier-des-charges
walouziz
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !
Idean France
 
Cahier des charges web
Cahier des charges webCahier des charges web
Cahier des charges web
Michel Stawniak
 
Cahier des charges
Cahier des chargesCahier des charges
Cahier des charges
dima_zaki
 

Tendances (20)

Gestion de projet web
Gestion de projet webGestion de projet web
Gestion de projet web
 
Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 
Determiner son besoin et definir ses objectifs pour son projet de site web
Determiner son besoin et definir ses objectifs pour son projet de site webDeterminer son besoin et definir ses objectifs pour son projet de site web
Determiner son besoin et definir ses objectifs pour son projet de site web
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
 
Alphorm.com Formation Robot Structural Analysis Professional
Alphorm.com Formation Robot Structural Analysis ProfessionalAlphorm.com Formation Robot Structural Analysis Professional
Alphorm.com Formation Robot Structural Analysis Professional
 
comment rédiger une expression de besoins
comment rédiger une expression de besoinscomment rédiger une expression de besoins
comment rédiger une expression de besoins
 
2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic
 
Domain Driven Design - Agile France 2010
Domain Driven Design - Agile France 2010Domain Driven Design - Agile France 2010
Domain Driven Design - Agile France 2010
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Alphorm.com Formation AutoCAD 2021 : Les fondamentaux
Alphorm.com Formation AutoCAD 2021 : Les fondamentauxAlphorm.com Formation AutoCAD 2021 : Les fondamentaux
Alphorm.com Formation AutoCAD 2021 : Les fondamentaux
 
Cahier des charges site internet
Cahier des charges site internetCahier des charges site internet
Cahier des charges site internet
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
 
Workn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site webWorkn coffee 2015-refonte de site web
Workn coffee 2015-refonte de site web
 
Plan cahier-des-charges
Plan cahier-des-chargesPlan cahier-des-charges
Plan cahier-des-charges
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !
 
Cahier des charges web
Cahier des charges webCahier des charges web
Cahier des charges web
 
Cahier des charges
Cahier des chargesCahier des charges
Cahier des charges
 

En vedette

Introduction gestion de projet
Introduction gestion de projetIntroduction gestion de projet
Introduction gestion de projet
Mohamed Amine BOURHIL
 
Gestion de projet site web
Gestion de projet site webGestion de projet site web
Gestion de projet site web
Pierre Naegelen
 
Les différentes phases d’un projet - La phase d’initialisation
Les différentes phases d’un projet - La phase d’initialisationLes différentes phases d’un projet - La phase d’initialisation
Les différentes phases d’un projet - La phase d’initialisation
Communauté d'agglomération du Pays de Grasse
 
Les fondamentaux de la gestion de projet
Les fondamentaux de la gestion de projetLes fondamentaux de la gestion de projet
Les fondamentaux de la gestion de projet
COMPETENSIS
 
Conduite et gestion de projet
Conduite et gestion de projetConduite et gestion de projet
Conduite et gestion de projet
JCI Ariana
 
Liste d'annuaires pour référencer votre Agence de Communication
Liste d'annuaires pour référencer votre Agence de CommunicationListe d'annuaires pour référencer votre Agence de Communication
Liste d'annuaires pour référencer votre Agence de Communication
François Huynh
 
Gestion de projet sept 2016
Gestion de projet sept 2016Gestion de projet sept 2016
Gestion de projet sept 2016
Jean-Louis Gueroult
 
Microsoft business-intelligence
Microsoft business-intelligenceMicrosoft business-intelligence
Microsoft business-intelligence
BENJID Mohamed
 
Les plateformes de streaming musique en France
Les plateformes de streaming musique en FranceLes plateformes de streaming musique en France
Les plateformes de streaming musique en France
christophe Neny
 
Analyse et optimisation des performances du moteur SQL Serveur
Analyse et optimisation des performances du moteur SQL ServeurAnalyse et optimisation des performances du moteur SQL Serveur
Analyse et optimisation des performances du moteur SQL Serveur
Microsoft Technet France
 
Management de projet
Management de projetManagement de projet
Management de projet
Eric Métais
 
Le Streaming : Comment ça marche ?
Le Streaming : Comment ça marche ?Le Streaming : Comment ça marche ?
Le Streaming : Comment ça marche ?
Mountaga CISSE
 
Supervision
SupervisionSupervision
Supervision
Souhaib El
 
Introduction à la Gestion de projets
Introduction à la Gestion de projetsIntroduction à la Gestion de projets
Introduction à la Gestion de projets
Clément Dussarps
 
Fondamentaux de la gestion de projet (cours 2)
Fondamentaux de la gestion de projet (cours 2)Fondamentaux de la gestion de projet (cours 2)
Fondamentaux de la gestion de projet (cours 2)
Françoise Gouzi
 
Supervision de réseau informatique - Nagios
Supervision de réseau informatique - NagiosSupervision de réseau informatique - Nagios
Supervision de réseau informatique - Nagios
Aziz Rgd
 
Modèle en cascade
Modèle en cascadeModèle en cascade
Modèle en cascade
Ghodhbane Mohamed Amine
 
296 pages management support cours gestion projet + exercices + outils + arti...
296 pages management support cours gestion projet + exercices + outils + arti...296 pages management support cours gestion projet + exercices + outils + arti...
296 pages management support cours gestion projet + exercices + outils + arti...
Olivier Coulibaly
 

En vedette (20)

Introduction gestion de projet
Introduction gestion de projetIntroduction gestion de projet
Introduction gestion de projet
 
Gestion de projet site web
Gestion de projet site webGestion de projet site web
Gestion de projet site web
 
Les différentes phases d’un projet - La phase d’initialisation
Les différentes phases d’un projet - La phase d’initialisationLes différentes phases d’un projet - La phase d’initialisation
Les différentes phases d’un projet - La phase d’initialisation
 
Les fondamentaux de la gestion de projet
Les fondamentaux de la gestion de projetLes fondamentaux de la gestion de projet
Les fondamentaux de la gestion de projet
 
Conduite et gestion de projet
Conduite et gestion de projetConduite et gestion de projet
Conduite et gestion de projet
 
#3 etapes projet
#3 etapes projet#3 etapes projet
#3 etapes projet
 
Liste d'annuaires pour référencer votre Agence de Communication
Liste d'annuaires pour référencer votre Agence de CommunicationListe d'annuaires pour référencer votre Agence de Communication
Liste d'annuaires pour référencer votre Agence de Communication
 
Gestion de projet sept 2016
Gestion de projet sept 2016Gestion de projet sept 2016
Gestion de projet sept 2016
 
Microsoft business-intelligence
Microsoft business-intelligenceMicrosoft business-intelligence
Microsoft business-intelligence
 
Les plateformes de streaming musique en France
Les plateformes de streaming musique en FranceLes plateformes de streaming musique en France
Les plateformes de streaming musique en France
 
Analyse et optimisation des performances du moteur SQL Serveur
Analyse et optimisation des performances du moteur SQL ServeurAnalyse et optimisation des performances du moteur SQL Serveur
Analyse et optimisation des performances du moteur SQL Serveur
 
Management de projet
Management de projetManagement de projet
Management de projet
 
Le Streaming : Comment ça marche ?
Le Streaming : Comment ça marche ?Le Streaming : Comment ça marche ?
Le Streaming : Comment ça marche ?
 
Supervision
SupervisionSupervision
Supervision
 
Introduction à la Gestion de projets
Introduction à la Gestion de projetsIntroduction à la Gestion de projets
Introduction à la Gestion de projets
 
Fondamentaux de la gestion de projet (cours 2)
Fondamentaux de la gestion de projet (cours 2)Fondamentaux de la gestion de projet (cours 2)
Fondamentaux de la gestion de projet (cours 2)
 
Supervision de réseau informatique - Nagios
Supervision de réseau informatique - NagiosSupervision de réseau informatique - Nagios
Supervision de réseau informatique - Nagios
 
Modèle en cascade
Modèle en cascadeModèle en cascade
Modèle en cascade
 
Savoir rediger
Savoir redigerSavoir rediger
Savoir rediger
 
296 pages management support cours gestion projet + exercices + outils + arti...
296 pages management support cours gestion projet + exercices + outils + arti...296 pages management support cours gestion projet + exercices + outils + arti...
296 pages management support cours gestion projet + exercices + outils + arti...
 

Similaire à Introduction Gestion Projet web

Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Médiathèque de Roubaix - La Grand-Plage
 
2015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part22015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part2
Eric Giraudin
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédias
Laurent Moccozet
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Renoir Boulanger
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Idean France
 
test
testtest
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Mohammed JAITI
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
Nicolas Morin
 
MEMO Pour débuter en formation à distance (FAD)
MEMO Pour débuter en formation à distance (FAD)MEMO Pour débuter en formation à distance (FAD)
MEMO Pour débuter en formation à distance (FAD)
Cégep à distance
 
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Actency
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
Julien LE THUAUT
 
Les étapes de création d'un site web
Les étapes de création d'un site webLes étapes de création d'un site web
Les étapes de création d'un site web
Chris Gaillard
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
Adyax
 
00 gx d - introduction
00 gx d - introduction00 gx d - introduction
00 gx d - introduction
Alexandre Rivaux
 
La gestion de projets nouveaux médias
La gestion de projets nouveaux médiasLa gestion de projets nouveaux médias
La gestion de projets nouveaux médias
Benjamin Hoguet
 
Vanessa i ref_2014
Vanessa i ref_2014Vanessa i ref_2014
Vanessa i ref_2014
Vanessa Ilmany
 
Tableaux blancs 2.0
Tableaux blancs 2.0 Tableaux blancs 2.0
Tableaux blancs 2.0
Redaction SKODEN
 
DDD FOR POs.pdf
DDD FOR POs.pdfDDD FOR POs.pdf
DDD FOR POs.pdf
Guillaume Saint Etienne
 
Batir Un Site Web 2011
Batir Un Site  Web 2011Batir Un Site  Web 2011
Batir Un Site Web 2011
Alain-Marie Carron
 

Similaire à Introduction Gestion Projet web (20)

Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
 
2015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part22015 cours-projet web-infonum-part2
2015 cours-projet web-infonum-part2
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédias
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
test
testtest
test
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
MEMO Pour débuter en formation à distance (FAD)
MEMO Pour débuter en formation à distance (FAD)MEMO Pour débuter en formation à distance (FAD)
MEMO Pour débuter en formation à distance (FAD)
 
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Les étapes de création d'un site web
Les étapes de création d'un site webLes étapes de création d'un site web
Les étapes de création d'un site web
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
00 gx d - introduction
00 gx d - introduction00 gx d - introduction
00 gx d - introduction
 
La gestion de projets nouveaux médias
La gestion de projets nouveaux médiasLa gestion de projets nouveaux médias
La gestion de projets nouveaux médias
 
Vanessa i ref_2014
Vanessa i ref_2014Vanessa i ref_2014
Vanessa i ref_2014
 
Tableaux blancs 2.0
Tableaux blancs 2.0 Tableaux blancs 2.0
Tableaux blancs 2.0
 
DDD FOR POs.pdf
DDD FOR POs.pdfDDD FOR POs.pdf
DDD FOR POs.pdf
 
Batir Un Site Web 2011
Batir Un Site  Web 2011Batir Un Site  Web 2011
Batir Un Site Web 2011
 

Dernier

Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Jacques KIZA DIMANDJA
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
djelloulbra
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Maalik Jallo
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
InnovaSter-Trade Ltd.
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
Adrien Blind
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
saadbellaari
 

Dernier (7)

Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
 

Introduction Gestion Projet web

  • 1. Introduction à la gestion de projet Laurence Noël [email_address]
  • 2. Gestion de projet hypermédia Présentation des étapes des outils de quelques sites utiles
  • 3. 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...
  • 4. 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
  • 5. 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)‏
  • 6. 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...)‏
  • 7. 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 ?)‏
  • 8. Les étapes 4. Recherche documentaire / édito Dev/design Analyse fonctionnelle Spécifications techniques
  • 9. 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 ?
  • 10. Les étapes 4. (b) Dev/design dev/design : création graphique interactive, collaboration entre designer et développeur Concept graphique > pistes graphiques > charte
  • 11. 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"
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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)‏
  • 16. 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...
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. Liens utiles 2. Design http://www.yesko.com/web-design-process.htm http://www.lukew.com/ http://infosthetics.com/
  • 21. 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