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

1. Cycle conduite de projet web
Concevoir le site

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. Vue d’ensemble
Conception Spécifications
éditoriale détaillées
Conception
ergonomique

4. Vue d’ensemble
Conception Spécifications
éditoriale détaillées
Conception
ergonomique

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. • Rubriquage = liste organisée des contenus du site
• Propose un mode d’accès aux contenus
• Vue exhaustive, faisabilité, organiser la production

8. Vue d’ensemble
Conception Spécifications
éditoriale détaillées
Conception
ergonomique

9. Conception fonctionnelle
• Processus = ensemble des tâches réalisées par
des acteurs, transformant les données.

13. • 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 »

14. Mise en pratique
• Créez le workflow d’une actualité du site
• Réévaluez la charge de travail

16. Vue d’ensemble
Conception Spécifications
éditoriale détaillées
Conception
ergonomique

17. 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

20. • 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.

23. Vue d’ensemble
Conception Spécifications
éditoriale détaillées
Conception
ergonomique

24. Conception graphique
+ =
Cinématique Concept-board Pistes graphiques
(grands choix) (l’écran final en PSD)

28. Vue d’ensemble
Conception Spécifications
éditoriale détaillées
Conception
ergonomique

29. 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

31. 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.

33. Vue d’ensemble
Conception Spécifications
éditoriale détaillées
Conception
ergonomique

34. Conception technique
• Architecture applicative = organisation
logique du système en vue d’une grande souplesse
évolutive.

36. • 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

37. • Architecture matérielle
• Hébergement

38. Mise en pratique
• Imaginez l’architecture applicative et logicielle du site

39. • 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

41. Vue d’ensemble
Conception Spécifications
éditoriale détaillées
Conception
ergonomique

42. 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

43. 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

44. Vue d’ensemble
Conception Spécifications
éditoriale détaillées
Conception
ergonomique

45. 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.

47. Pour aller plus loin

49. • © 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.