Friday Web 16 01 2009

Vendredi 16 janvier

#2

#2

Sommaire

1. Projet Web : les grandes étapesa. Attention aux idées reçuesb. L’arborescencec. La charte fonctionnelled. La créatione. Les spécificités techniquesf. Phase de tests

2. La gestion de projet

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

4. Vos questions

#3

Comment construire un site web

Cette présentation ne prétend pas être exhaustivemais fournir une vue d’ensemble de manière à :

⇒ Comprendre les étapes clés du process dedéveloppement d’un site web

⇒ Le type de profils nécessaires à impliquer àchaque étape

#4

Étape 1 - Ne jamais penser que c’est facile

• C’est assez courant chez certaines personnes : le web c’estfacile, pas cher…etc… Pourtant, construire un site est aussicomplexe que de fabriquer une brochure…

• Cette croyance mène à sous-estimer bon nombre deprojets : dans le temps de mise en place nécessaire, lebudget…

• Construire un site s’apparente à : Construire une maison Concevoir une voiture Développer un logiciel

#5

Étape 2 - Concevoir une arborescence

C’est le facteur clé de succès d’un site. Tout comme pour la constructiond’une maison, il faut en dessiner les plans et les fondations.

#6

Spécificationsfonctionnelles

+

Ecrans types, templates,zoning…

Étape 3 - La charte fonctionnelle

• Comment s’organisent les pages du site et comment navigue-t-ond’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

#7 Mood Boards Page Design

É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 clientune création qu’ils ne pourront pas obtenir au final, car tropcomplexe ou impossible à réaliser selon les contraintes(temps, budget, …) !

#8

Content Management

System

Développement de l’application

(Code)

BDD

É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

System• BDD

• Une règle de base : plusl’ampleur du projet estgrande, plus la techniqueest complexe

#9

￭ Contenu statique(aucun changement)

￭ Contenu dynamique (misesà jour du contenu du site)

￭ Le même site pour tousles internautes

￭ Site personnalisé selon leprofil des internautes

￭ “Contactez-nous” ￭ Chat en direct / rappelez-nous

￭ Site ouvert à tous ￭ Mot de passe pour avoiraccès à certaines rubriques

￭ Liste de prix ou bon decommande à imprimer

￭ E-commerce

Exemples de complexité

LE MOINS COMPLIQUE LE PLUS COMPLIQUE

#10

Étape 6 : Tester, tester et tester PUIS mettreen ligne.• Il y a parfois des gens qui pensent que tout ce qui se passe sur le Web

est en "temps réel", y compris l'évolution du site.

• En réalité, le fait de remplir les étapes de 1-5 met seulement en positionde 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, cequi laisse JUSTE le temps de corriger les éventuels problèmes.

#11

En synthèse

1. Ne pas sous-estimer la chargede travail

2. L’arborescence3. La chartefonctionnelle

4. La création

5.Les spécificités techniques

6. Tester, tester ettester… PUISlancer

La gestion de projet

#13

Document schéma global

Lancement

deprojet

identité graphiqueErgonomie

Charte éditoriale

Déclinaison dela charte

graphique etéditoriale

Montage

Développementet paramétrage

Tests unitaires

Intégration et tests

Déploiementen

production

CYCLE ITERATIFAVEC

INTEGRATIONCONTINUE

Définition desfonctionnalités

ScénarisationHiérarchisation

Structure du site

Architecturetechnique

Cahier de recetteDossier d’installation

Dossier deSpécificationsFonctionnelles

Créactionchartegraphique

Storyboard

Dossier deSpécificationsTechniques

Mise en ligneDéveloppement IntégrationConception &production Graphique

SpécificationsFonctionnelles &Techniques

Validation

RecetteRecetteusine

T0 T0 + 40j T0 + 65 joursT0 +20j T0 +85 jours

Livrables :

T0 + 90 jours

Site

T0 +30j

Un délai de 3 mois est nécessaire pour le développement du site

#14

La checklistTout un ensemble d’informations préalables à la réalisation d’un projet Internet doivent êtreconnues par l’agence. Ces informations, qui peuvent prendre la forme de réponses à unensemble de questions, vont conditionner la bonne réalisation du projet et ne saurait êtreposé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-vousbesoin ?- 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 ?- Souhaitez-vous que nous assurions la promotion de votre site par d’autres moyens(campagne de bannières, partenariats…) ?

Au niveau de la création & de laprogrammation

#16

Les petits détails qui nous diffèrent des « hotdef »• Média• Technologie / support• Typographies• Couleur• Format• Poids / optimisation• Ergonomie / accessibilité• Multimédia : musique /

vidéo / animation

SiteEmailingBannièreCdrom / Offline

#17

Vous avez des questions ?

#18

Merci de votre aimable attention