1. #2
Vendredi 16 janvier

2. Sommaire
1. Projet Web : les grandes étapes
a. Attention aux idées reçues
b. L’arborescence
c. La charte fonctionnelle
d. La création
e. Les spécificités techniques
f. Phase de tests
2. La gestion de projet
3. Au niveau de la création & de la programmation
4. Vos questions
#2

3. Comment construire un site web
Cette présentation ne prétend pas être exhaustive
mais fournir une vue d’ensemble de manière à :
⇒ Comprendre les étapes clés du process de
développement d’un site web
⇒ Le type de profils nécessaires à impliquer à
chaque étape
#3

4. Étape 1 - Ne jamais penser que c’est facile
• C’est assez courant chez certaines personnes : le web c’est
facile, pas cher…etc… Pourtant, construire un site est aussi
complexe que de fabriquer une brochure…
• Cette croyance mène à sous-estimer bon nombre de
projets : dans le temps de mise en place nécessaire, le
budget…
• Construire un site s’apparente à :
 Construire une maison
 Concevoir une voiture
 Développer un logiciel
#4

5. Étape 2 - Concevoir une arborescence
C’est le facteur clé de succès d’un site. Tout comme pour la construction
d’une maison, il faut en dessiner les plans et les fondations.
#5

6. Étape 3 - La charte fonctionnelle
• Comment s’organisent les pages du site et comment navigue-t-on
d’une page à l’autre ? Quel clic mène à quelle action ?
 De même qu’un constructeur automobile construit une voiture à partir de plans
 Le site web se construit à partir de spécifications fonctionnelles
+
Spécifications
Ecrans types, templates,
fonctionnelles
zoning…
#6

7. Étape 4 - La création
C’est l’étape de définition du design et du contenu
IMPORTANT : il faut absolument éviter de montrer à un client
une création qu’ils ne pourront pas obtenir au final, car trop
complexe ou impossible à réaliser selon les contraintes
(temps, budget, …) !
Mood Boards Page Design
#7

8. Étape 5 - La partie technique
• Les différents aspects
 La découpe, l’intégration
 Le développement du
« back office » :
• Le code de l’application
• Content Management
ion
licat
pp
System
e l’a
nt d
eme
• BDD
opp
ével
D
e)
(Cod
• Une règle de base : plus nt
geme
na
nt Ma
l’ampleur du projet est e
Cont m
e
Syst
grande, plus la technique
est complexe
BDD
#8

9. Exemples de complexité
 
LE MOINS COMPLIQUE LE PLUS COMPLIQUE
￭ Liste de prix ou bon de ￭ E-commerce
commande à imprimer
￭ Contenu statique ￭ Contenu dynamique (mises
(aucun changement) à jour du contenu du site)
￭ Le même site pour tous ￭ Site personnalisé selon le
les internautes profil des internautes
￭ Chat en direct / rappelez-
￭ “Contactez-nous”
nous
￭ Site ouvert à tous ￭ Mot de passe pour avoir
accès à certaines rubriques
#9

10. Étape 6 : Tester, tester et tester PUIS mettre
en ligne.
• Il y a parfois des gens qui pensent que tout ce qui se passe sur le Web
est en quot;temps réelquot;, y compris l'évolution du site.
• En réalité, le fait de remplir les étapes de 1-5 met seulement en position
de TESTER LE SITE.
 Les pubs sont éditées avant qu’elles ne soient diffusées à la télévision,
 “La gravure” doit être validée avant d’être imprimée,
 ET LES SITES WEB doivent être testés avant leur lancement.
• Il faut prévoir 5 jours à la fin de chaque projet afin de tester le site, ce
qui laisse JUSTE le temps de corriger les éventuels problèmes.
#10

11. En synthèse 5.Les spécificités techniques
6. Tester, tester et
tester… PUIS
4. La création lancer
1. Ne pas sous-
estimer la charge
de travail
2. L’arborescence
3. La charte
fonctionnelle
#11

12. La gestion de projet

13. Document schéma global
Conception & Spécifications
Développement Intégration
production Graphique Validation
Fonctionnelles & Mise en ligne
Techniques
Déclinaison de
identité graphique la charte
Ergonomie graphique et
éditoriale
Charte éditoriale CYCLE ITERATIF
AVEC
INTEGRATION
CONTINUE
Scénarisation
Hiérarchisation Montage
Structure du site
Lance
ment Déploiement
Intégration
Recette
de en
Recette
et tests usine
projet production
Développement
Définition des et paramétrage
fonctionnalités
Architecture Tests unitaires
technique
T0 +30j T0 +85 jours T0 + 90 jours
T0 + 65 jours
T0 +20j T0 + 40j
T0
Créaction Story Dossier de Dossier de Cahier de recette
Livrables : Site
charte board Spécifications Spécifications Dossier d’installation
graphique Fonctionnelles Techniques
#13 Un délai de 3 mois est nécessaire pour le développement du site

14. La checklist
Tout un ensemble d’informations préalables à la réalisation d’un projet Internet doivent être
connues par l’agence. Ces informations, qui peuvent prendre la forme de réponses à un
ensemble de questions, vont conditionner la bonne réalisation du projet et ne saurait être
posées en cours de réalisation.
Voici un exemple de questions qui doivent être posées pour un projet (ici un site Web) :
- Souhaitez-vous une animation Flash ?
- Souhaitez-vous un site entièrement en Flash ?
- Souhaitez-vous un site utilisant les technologies web 2.0 ?
- Aurez-vous besoin d’éditer du son ou de la vidéo sur votre site ?
- Aurez-vous besoin d’un module d’e-commerce ?
- Avez-vous déjà un compte chez un éditeur de solutions de commerce électronique ?
- Si vous avez déjà un site Internet, chez qui est-il hébergé ?
- Souhaitez-vous changer d’hébergeur ? Si oui, de combien d’adresses e-mail avez-vous
besoin ?
- Avez-vous de besoins spécifiques ?
- Quels noms de domaine avez-vous déjà enregistré ?
- Quels noms de domaine souhaitez-vous enregistrer ?
- Quelles informations de votre site vont nécessiter une mise à jour régulière ?
- Souhaitez-vous que nous assurions pour vous le webmastering du site ?
- Comment la promotion de votre site sera-t-elle effectuée ?
- Souhaitez-vous que nous prenions en charge le référencement de votre site Internet ?
#14
- Souhaitez-vous que nous assurions la promotion de votre site par d’autres moyens
(campagne de bannières, partenariats…) ?

15. Au niveau de la création & de la
programmation

16. Les petits détails qui nous diffèrent des « hot
def »
• Média
• Technologie / support
• Typographies Site
• Couleur Emailing
• Format Bannière
• Poids / optimisation Cdrom / Offline
• Ergonomie / accessibilité
• Multimédia : musique /
vidéo / animation
#16

17. Vous avez des questions ?
#17

18. Merci de votre aimable attention
#18