6 Conception

4,565 views
4,476 views

Published on

30 slides pour découvrir la phase de conception :
Vue d’ensemble
Conception éditoriale
Ligne éditoriale
Rubriquage
Conception fonctionnelle
Modélisation des processus
Règles de gestion
Ergonomie
Cinématiques
Tests utilisateurs
Conception graphique
Spécifications fonctionnelles
Conception technique
Architecture applicative
Architecture logicielle
Architecture matérielle
Modélisation (MCD, MOPT...)
Spécifications techniques
Spécifications détaillées

Published in: Business, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,565
On SlideShare
0
From Embeds
0
Number of Embeds
1,454
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

6 Conception

  1. 1. Cycle conduite de projet web Concevoir le site
  2. 2. • Multitude de manières de décrire la réalité • Tout est question de point de vue • Être le plus factuel possible • Mixer représentation visuelle et textuelle • Assembler en un document unique les différentes visions du projet pour qu’un inconnu puisse le comprendre
  3. 3. Vue d’ensemble Conception Spécifications éditoriale détaillées Conception ergonomique
  4. 4. Vue d’ensemble Conception Spécifications éditoriale détaillées Conception ergonomique
  5. 5. Conception éditoriale • Ligne éditoriale = raison d’être du site • Positionne le site, dimensionne le projet • Plan : ligne éditoriale, principaux gabarits Quoi A qui Pourquoi A quelle fréquence Ton Niveau grammatical Niveau vocabulaire
  6. 6. • Rubriquage = liste organisée des contenus du site • Propose un mode d’accès aux contenus • Vue exhaustive, faisabilité, organiser la production
  7. 7. Vue d’ensemble Conception Spécifications éditoriale détaillées Conception ergonomique
  8. 8. Conception fonctionnelle • Processus = ensemble des tâches réalisées par des acteurs, transformant les données.
  9. 9. • Règles de gestion = comportement de l’application selon les cas métier. • Exemple 1 – Appliquer la réduction (frais de port offerts) – CAS 1 – Si grand total est inférieur à 60 euros, réduction non applicable, afficher message d’information en FO – CAS 2 - Si grand total est égal ou supérieur à 60 euros, appliquer la réduction • Exemple 2 – Afficher les articles sur la page d’accueil – Utiliser les 10 articles les plus récents classés du plus récent au plus ancien – Ne pas afficher l’article présenté « A la une »
  10. 10. Mise en pratique • Créez le workflow d’une actualité du site • Réévaluez la charge de travail
  11. 11. Vue d’ensemble Conception Spécifications éditoriale détaillées Conception ergonomique
  12. 12. Ergonomie Cinématique Zoning Storyboard Wireframes Avec DU VRAI TEXTE et de VRAIS IMAGES ! Doit être la plus réaliste possible Illustrator / Visio / PowerPoint / Impress / AxurePro / Dreamweaver
  13. 13. • Cinématique = première occasion de tester son travail auprès des utilisateurs. • Selon la nature du projet, une démonstration et/ou des tables rondes – Proposition de variantes – Validation de processus complexes (recherche multicritères par ex.) – Découpages / post-it – Finaliser la cinématique et itérer au moins une fois • Wireframes interactifs utiles pour tester des processus complexes.
  14. 14. Vue d’ensemble Conception Spécifications éditoriale détaillées Conception ergonomique
  15. 15. Conception graphique + = Cinématique Concept-board Pistes graphiques (grands choix) (l’écran final en PSD)
  16. 16. Vue d’ensemble Conception Spécifications éditoriale détaillées Conception ergonomique
  17. 17. Spécifications fonctionnelles • Spécifications fonctionnelles = quoi détaillé avec cinématique, objets métiers, fonctions, règles de gestion. Cinématique Données Fonctions
  18. 18. Fonction Description Caractéris Règle de Spécifications Spécifications ation gestion fonctionnelles techniques 1. Afficher L’internaute Affichage RAS un renseigne un en moins formulaire formulaire pour de 2 sec d’alerte être alerté dès avec une qu’un bien corres- connexion pondant à ses ADSL 512 critères est dispo- kbps nible sur le site. 2. Vérification des Vérification Cas 1 – Les Affichage du Vérificatio données saisies côté client données sont message d’erreur en n des par l’internaute en moins valides, un entête du formulaire. données avant envoi. de 1 sec. message de + confirmation est Champs incorrects Vérification affiché. surlignés en rouge. côté serveur en Cas 2 – Les En cas de temps de moins de 2 données sont vérification sup. à 2 sec avec invalides, un sec, affichage d’un une message d’erreur message d’attente en connexion précise les surimpression avec ADSL 512 données a grisage de l’écran. kbps corriger.
  19. 19. Vue d’ensemble Conception Spécifications éditoriale détaillées Conception ergonomique
  20. 20. Conception technique • Architecture applicative = organisation logique du système en vue d’une grande souplesse évolutive.
  21. 21. • Architecture logicielle = les briques logicielles pour mettre en œuvre l’architecture applicative. • ReverseProxy • Filer • Serveur HTTP • Cache • Serveur d’applications • Serveur e-mail • Base de données • OS
  22. 22. • Architecture matérielle • Hébergement
  23. 23. Mise en pratique • Imaginez l’architecture applicative et logicielle du site
  24. 24. • Modélisation = les données et leurs relations. • Analyse des spécifications fonctionnelles et traduction en Modèle Conceptuel de Données (MCD) • Toujours valider le MCD en l’expliquant au groupe de projet fonctionnel
  25. 25. Vue d’ensemble Conception Spécifications éditoriale détaillées Conception ergonomique
  26. 26. Spécifications techniques • Expression du besoin = quoi général • Spécifications fonctionnelles = quoi détaillé • Spécifications techniques = comment • Vue d’ensemble ET réponse point par point aux spécifications fonctionnelles • Découpage en lots cohérents
  27. 27. Fonction Description Caractéris Règle de Spécifications Spécifications ation gestion fonctionnelles techniques 1. Afficher L’internaute Affichage RAS un renseigne un en moins formulaire formulaire pour de 2 sec d’alerte être alerté dès avec une qu’un bien corres- connexion pondant à ses ADSL 512 critères est dispo- kbps nible sur le site. 2. Vérification des Vérification Cas 1 – Les Affichage du Signalisation des Vérificatio données saisies côté client données sont message d’erreur en champs en CSS ( n des par l’internaute en moins valides, un entête du formulaire. http://www.bioneural.net avant envoi. de 1 sec. message de + /2006/04/01/create-a- données confirmation est Champs incorrects valid-css-alert-message) Vérification affiché. surlignés en rouge. Validation côté client côté via la librairie ECMA serveur en Cas 2 – Les En cas de temps de script « bidule » moins de 2 données sont vérification sup. à 2 + sec avec invalides, un sec, affichage d’un Validation de la une message d’erreur message d’attente en syntaxe des emails connexion précise les surimpression avec avec la classe ADSL 512 données a grisage de l’écran. MAil_RFC822 et de kbps corriger. l’existence du domaine avec la classe Net_DSN
  28. 28. Vue d’ensemble Conception Spécifications éditoriale détaillées Conception ergonomique
  29. 29. Spécifications détaillées • Préciser la solution et son implémentation dans les moindres détails pour aboutir à un référentiel de développement • Une équipe de développement doit pouvoir créer l’application sans avoir jamais entendu parlé du projet. • Maintenir les spécifications tout au long du projet puis tout au long de la vie de l’application.
  30. 30. Pour aller plus loin
  31. 31. • © Stéphane Bordage, breek.fr • La loi du 11 mars 1957 interdit les copies ou reproductions destinées à une utilisation collective. Toute représentation ou reproduction intégrale ou partielle faite par quelque procédé que ce soit, sans le consentement de l’auteur ou de ses ayant droits, est illicite et constitue une contrefaçon sanctionnée par les articles 425 et suivants du Code pénal.

×