Projet Web: Cahier Des Charges

…
Projet Web
Cahier des Charges
Introduction
1 Définition du projet
• CDC préliminaire
2 Conception du site
• CDC détaillé
• CDC technique
3 Pré Production
4 Production
5 Mise en ligne et suivi
1
Gestion de projet Web – © Richard Carlier - http://www.carlier.as
===========
Introduction
Un projet de site Internet, c'est quoi ?
2
1
Projet ?
Définition ISO 10006
Processus unique qui consiste à élaborer

quelque chose avec des contraintes
• de coût
• de délais
• de qualité
3
Cycle de vie d'un projet Internet
Appel d'offre
Présentation de
l'entreprise
Étude
V
Délais et conditions A
de réponse CDC détaillé L
Grille de décision architecture détaillée I
organisation des contenus
arborescence
D
A
Étude charte fonctionnelle T R
fonctionnalités, navigation,
préalable L interactivité, ergonomie, story board… I E
A O C
charte graphique Production M Suivi
CDC N design, modèle de pages N V E
I
préliminaire C A T
T S
Equipes / Budget / client Développement L
Objectifs
E Planning (html, php, bdd) E Référencement
cibles… M I E
E D E
Grille éditoriale
N CDC technique A F
organisation contenus,
Intégration I N
périodicité mise à jour T choix hébergement Pré prod T Statistiques
contenu N
I L
Positionnement langages, SGBD collecte / création A
Existant, concurrence… ou O I
des médias L
non modélisation BDD N
…
texte, images, photos,
Déclinaison E G Mises à jour
Estimations organisation fichiers sons, vidéos, anim…
contenu
Budget / Planning graphique N
Gains / R.O.I. noms, répertoires… client + docs tech.
traduction E
Définition Conception Production Suivi
4
2
===========
Définition du projet
Étude préalable
5
Étude de faisabilité et définition
Sites Internet
référents
(concurrents…)
identifier les
bonnes / mauvaises
pratiques
Expriment
leurs besoins Utilisateurs
Décident des (services concernés)
orientations
Groupe Avis technique
Décideurs Expriment éventuels Techniciens
Projet
leurs envies
Valident Expriment
Internautes
l'étude préalable leurs attentes (si site existant)
Viabilité du projet
6
3
Expression des besoins
Check liste…
• Objectifs du projet ?
• Qui associer au projet ?
• Quels sont les publics visés ?
• Quel style de communication ?
institutionnel, proche du quotidien,
fantaisiste…
• Quel niveau d'interactivité ?
• Quel contenus proposer ?
• Quel budget accorder ?
7
Recensement des contenus
Circuit de l'information
• Quelle information ?
• Qui rédige
• Qui valide
• Qui met en ligne
• Qui diffuse (newsletter…)
• …
Périodicité
Sous
Rubriques Page Rédacteur Validation Mise en ligne Calibrage de mise à
Rubrique
jour
Accueil -- Actualité Resp. comm Le Président Resp. comm 3 news quotidienne
Expositions Resp. comm Le Président Resp. comm 4 expos semaine
L'association -- Présentation Le Président Le Président. Le Webmaster 1 page ponctuelle
Historique Le Président Le Président Le Webmaster 3 pages annuelle
Membres Le Secrétaire Le Secrétaire Le Webmaster 1 page mensuelle
8
4
Définition des cibles
9
Quel site derrière la cible ?
Exemple, cible :
• femmes
• jeunes (coeur de cible 21-34 ans)
• actives
• early-movers (à l'aise sur Internet, et acheteuse).
10
5
Quel site derrière la cible ?
Des jeunes seniors, habitant partout en France

• 78% de nos internautes ont 50 ans et + dont 73% de 50/64 ans, notre cœur de cible
• 71 % de femme vs 29 % d'hommes
• 81 % habitent en province, 19% en IDF
• 43% de nos internautes sont encore en activité
Fidèles, adeptes du web et cyber-consommateurs

• 55% viennent sur le site une fois ou plus par semaine
• 84% de nos internautes utilisent Internet au moins une fois par jour
• cyber-consommateurs : 78% de nos internautes ont acheté en ligne au moins une fois au cours
des 6 derniers mois
Avides d'information
• Nos internautes recherchent des informations pour bien préparer leur retraite, pour les aider dans
leur quotidien et dans leurs décisions ; des services pratiques et ludiques ainsi qu'une forte
interactivité.
11
Plusieurs cibles
12
6
Exemple
Exemple, les cibles de Unapei.org (sur le handicap mental - extrait)
• Grand public
• Familles, jeunes, parents
• Personnes handicapées mentales
• Bénévoles, adhérents, sympathisants
• Professionnels de l'Unapei
• Donateurs, partenaires
• Presse
13
===
Concurrence
14
7
Étudier les sites concurrents
15
Analyse de la concurrence
Comparer
• Lister les concurrents sérieux
• Impression globale (surfer) Nom du site
Url http://
• Définir une grille de critères
Capture écran xxx.png
• Benchmark (remplir la grille pour tous) Date d'analyse
• Rapport de synthèse Quelle est votre J'aime ...

première
impression J'aime pas ...
sur le site ?
Évaluation de Points forts Points faibles

divers points… Esthétisme
Ergonomie
Analyse technique Contenus
Services
• Les formulaires
Commentaires
• Les structures de BDD
• Comment fonctionne le site …
16
8
Attention
2008
2003
2004
2005
2006
http://www.neurope.eu/ 2007
17
Analyse de l'existant
S'il y a déjà un site

• Interroger sur les visites, les statistiques 2002
• Le chiffre d'affaires
• Qui traite les mails ?
• Pourquoi changer ?
• ...
2003
2005

??? 2007 ?
2009 ?
18
9
Analyse sectorielle
http://www.capitaine-commerce.com
19
Sondage sur les visiteurs…
20
10
Poll Daddy
21
Google Doc
22
11
===
Autres aspects & Synthèse
23
Autres aspects
Étude de marché
• Potentiel commercial
• R.O.I.
• Financement
Budget
Planning
24
12
Synthèse de l'Étude préalable
Doivent ressortir :
• objectifs du site,
• cibles,
• style de communication,
• niveau d’interactivité avec les internautes,
• contenus,
• rubriques
• étude de marché, budget, planning
25
Cas de l'appel d'offre
En cas d'appel d'offre

• Présentation du donneur d’ordres
• Délais et conditions de réponse
• Expliciter les critères de sélection
• Coordonnées des intervenants
• Réserve de confidentialité
• …
26
13
===
Grand Oral
27
Grand Oral
Dans certains cas

• Les projets sont présentés à l'oral
(réponse appel d'offre, réunion interne…)
• Il faut pouvoir argumenter…
28
14
Refonte du site…
29
===========
Conception du site
Cahier des charges détaillé
30
15
L'étude complète
CDC détaillé
• CDC préliminaire (complété et ajusté si besoin)
• Architecture détaillée
• recensement / organisation des contenus
• arborescence
• Charte fonctionnelle
• fonctionnalités du site,
• story board,
• navigation, ergonomie, CDC technique
• interactivité, éléments dynamiques,
• … • choix hébergement
• Charte graphique • langages, SGBD

• design, • modélisation MERISE / UML / …
• modèle de pages
• … • nomenclature, organisation
fichiers noms, répertoires…
• …
• et aussi…
• GANTT - ressources / planning (précis)
• budget (précis)
• …
31
===
Conception du site
Architecture détaillée
32
16
Architecture
Architecture de l'information
• Recenser tous les contenus
• Les organiser en rubriques / sous rubriques / pages
33
Architecture - les types
Séquentielle
Réseau / Grille / Transversale

Mixte
Hiérarchie / Arborescence
34
17
Exemple
Au quotidien
Faites le point
Rubrique
prévenir
l'alcoolisme
Les conséquences
Qui contacter ?
ACCUEIL
Liens
Plan du site
Rubrique
utilitaires
Contacts
Crédits
35
Exemple
36
18
Arborescence complexes
37
Architecture - Les problèmes
Structure trop large
Structure trop profonde
38
19
Exemple avec DIA : portfolio
http://live.gnome.org/Dia
http://elle.epfl.ch/Dia
39
Exemple avec EDraw : portfolio
http://www.edrawsoft.com/freemind.php
40
20
http://lovelycharts.com/
41
===
Conception du site
Charte fonctionnelle
42
21
Les fonctionnalités
Que va contenir le site ?
• Des pages (cf arborescence)
• Moteur de recherche
• Formulaire de collecte d'info
• Boutique
• Sondage
• Forum
• Quizz
• Gestion des abonnés
• Commentaires
• …
• Interface d'admin
• …
43
===
Conception du site
Charte fonctionnelle - Zoning
44
22
Zones & Story Board
Occupation de l'espace
• Zones : contenus + navigation + pub + illustrations + formulaires…
• Story board : Zones + interactions + commentaires…
Recenser
les
contenus
45
Exemple
46
23
Exemple
47
Outils bureautiques…
48
24
Outils pro
• Microsoft VISIO
http://www.microsoft.fr/
• GUUUI Web Prototyping

http://www.guuui.com
49
JFB
50
25
Les zones idéales ?
liens utilitaires
logo
moteur
de recherche
baseline
navigation principale
navigation
secondaire
contenu
PUB
pieds de page : coordonnées complètes
pieds de page : rappel de navigation
pieds de page : navigation "légale" + crédits

51
Déclinaisons
52
26
Arborescence & gabarits
53
Arborescence & gabarits
54
27
Zoning dynamique
logo
55
Exemple
56
28
Zoning pub
page d'accueil page article
57
Pub
Format Dimensions Poids max Notes

Bannière classique 468 x 60 35 Ko
Bandeau
Méga bannière 728 x 90 50 Ko

Pavé 300 x 250 50 Ko Ne fais pas parti
Rectangle moyen du package IAB
Skyscraper 120 x 600 50 Ko

Gratte-ciel étendu
160 x 600
Rectangle 16/9ème 320 x 180 60 Ko
http://www.iabfrance.com
58
29
Outil en ligne
http://www.gliffy.com/examples/wireframes/
59
===
Conception du site
Charte fonctionnelle - navigation
60
30
Exemple : portfolio
La navigation
Menu principal
Menus contextuels
61
3 questions…
3 grandes questions
• Où suis-je ?
• Où puis-je aller ?
• Où ais-je été ?
62
31
Navigation - Menus
Menu horizontal un niveau Menu vertical un niveau
Menu horizontal deux niveaux
Pagination
Menu déroulant
63
Questions…
Quels sont les éléments de navigation, outre les menus ?
64
32
Navigation - Plan du site
Aide à la navigation
• Plan du site
65
Moteur de recherche
Aide à la navigation
• Moteur de recherche interne
66
33
Résultat de recherche
67
Résultat de recherche
68
34
Recherche - complexe
69
Navigation - fil d'Ariane
Fil d'ariane, chemin de fer, breadcrumbs trail
• Où suis-je / Où puis-je aller
Retour > Liste > Americano
Accueil > Liste des cocktails > Recette de l'Americano
70
35
Où ais-je été ?
71
Notre temps - navigation
72
36
Navigation - Nuages de mots
73
Navigation complémentaires
74
37
Navigation
75
3 Suisses
76
38
Navigation - profils…
77
===
Conception du site
Aspects graphiques
78
39
Recherche graphique
79
Gabarits
80
40
Charte graphique Exemple
http://easi.wallonie.be/xml/charte_graphique_web.html?IDD=18738
81
Charte graphique Exemple
http://ec.europa.eu/ipg/basics/index_en.htm
82
41
Charte graphique
#FFFFFF #DAD9D8 #949391
Flèches de navigation Titres actifs Titre non actifs
Têtes de rubriques N° des vignettes
N° de la photo active
#7d7b79 #575654 #444341

Texte (awards) Filet autour page Fond de page
#BC5001
Titres (home)
Preloader
Titres en survol
Liens dans le texte (awards)
Rôle Balise Police Taille Couleur

"Times New Roman", Times, serif
Titre principal H1 16
Arial, Helvetica, sans-serif
Sous titre H2 14
Arial, Helvetica, sans-serif
Paragraphe P 12
"Courier New", Courier, monospace
Code PRE 10
83
Charte graphique
84
42
===
Conception du site
CDC Technique
85
Choix de l'hébergeur
Critères techniques
• Système disponible (Linux / Windows)
• Serveur (Apache, IIS…)
• Espace disque
• Langage de programmation (Php, Asp, …)
• Base de données (Oui, Non, laquelle ?)
• Bande passante
• Nombre d'adresse emails, de compte FTP
• Nombre de sous domaines
Autres critères
• Conditions générales de vente
• Sécurisation
• Conseil
• Souplesse dans les opérations
• Sauvegardes (et test des sauvegardes)
• …
• tarifs
86
43
Choix des langages, normes
Sémantique Html
xHtml
Mise en page Html (tableaux…)

CSS
Animation Flash
Java
Silverlight
Javascript (JQuery)
Prog. Javascript
Côté client dHtml (Html + Javascript)

Flash - Actionscript (as2 / as3…)
Java
Silverlight - .NET
Prog. .Net, Asp, C#…

Perl, Python, Ruby
Côté serveur
PHP
Java
Flash - Flex
Données Stockage, traitement, transfert : SQL (sur serveur…)

Transfert de données : Xml, Json… (entre client/serveur…)
Transfert HTTP Demande de page (Get) + formulaire Html (Get / Post)

client & serveur AJAX (Html + Javascript + Langage serveur + Transfert données)
Silverlight
AIR (Flash + Flex)
Java
87
Respects des standards
88
44
Nomenclature
Charte de nommage
• Noms des fichiers, répertoires…
• Respects des standards
• Organisation des fichiers (texte, images…)
89
Nomenclature - Fichiers, répertoires…
Généralités
• minuscules,
• lettres, chiffres, trait d'union,
• pas d'espaces, Extensions de fichier
• pas de lettres accentuées • Dépend du rôle et du contenu du fichier, de son format
• Pages statiques : .html .htm .css
• Images : .gif .jpg .jpeg .png
• Pages dynamiques : .php .asp
Ne pas oublier le référencement

OUI Page d'accueil
• liste_ordinateurs_vente.html
• imac-bleu-descriptif.html • index.html
• livres-carlier-webmaster.html • index.htm
• index.shtml
NON • index.php
• page1.html
• article14.html
• default.html
• sdfdsjfle.html
• LivresCarlierWebmaster.html • default.asp
• index.php?id=55748 • …
L'ordre peut se changer via le

.htaccess d'apache
90
45
Nomenclature - Répertoires
Tout à la racine organisé simple média rubrique rubrique étendu

/ / / / /
| index.html | index.html | index.html | index.html | index.html
| page_1.html | page_1.html | page_1.html | |
| page_2.html | page_2.html | page_2.html +--+ actualites +--+ actualites
| page_3.html | page_3.html | page_3.html | | index.html | | index.html
| image_1.jpg | | | | page_1.html | | page_1.html
| image_2.jpg +--+ datas +--+ images | | +--+ images
| image_3.jpg | | image_1.jpg | | image_1.jpg +--+ produits | | image_1.jpg
| style.css | | image_2.jpg | | image_2.jpg | | index.html | | image_2.jpg
| javascript.js | | image_3.jpg | | image_3.jpg | | page_1.html | | image_3.jpg
| flash.swf | | style.css | | | page_2.html |
| video.wmf | | javascript.js +--+ styles | +--+ produits
| … | | flash.swf | | style.css +--+ images | | index.html
| | video.flv | | | image_1.jpg | | page_1.html
| | … +--+ javascript | | image_2.jpg | | page_2.html
| | javascript.js | | image_3.jpg | +--+ images
| | | | image_1.jpg
+--+ flash +--+ styles | | image_2.jpg
| | flash.swf | | style.css | | image_3.jpg
| | |
+--+ videos +--+ javascript +--+ images
| | video.flv | | javascript.js | | image_1.jpg
| | … | | | image_2.jpg
+--+ flash | | image_3.jpg
| | flash.swf |
| +--+ styles
+--+ videos | | style.css
| | video.flv |
| | … +--+ javascript
| | javascript.js
|
+--+ flash
| | flash.swf
|
+--+ videos
| | video.flv
| | …
91
Nomenclature - Répertoires multilingue
http://www.belgium.be
http://www.gouv.qc.ca
Tout à la racine par langue (1) par langue (2)

/ / / /
| index.html | index.html | index.html | index.html
| | | |
| index_fr.html | fr_index.html +--+ fr +--+ fr
| page_1_fr.html | fr_page_1.html | | index.html | | index.html
| page_2_fr.html | fr_page_2.html | | page_1.html | | page_1.html
| page_3_fr.html | fr_page_3.html | +--+ images | +--+ images
| | | | titre_accueil.jpg | | titre_accueil.jpg
| index_nl.html | nl_index.html | | logo_citoyen.jpg | | logo_citoyen.jpg
| page_1_nl.html | nl_page_1.html | |
| page_2_nl.html | nl_page_2.html +--+ nl +--+ nl
| page_3_nl.html | nl_page_3.html | | index.html | | index.html
| … | … | | page_1.html | | page_1.html
| +--+ images | +--+ images
| | header_title.jpg | | titre_accueil.jpg
| | burgers_logo.jpg | | logo_citoyen.jpg
| |
+--+ images +--+ images
| | fond_page.jpg | | fond_page.jpg
92
46
Nomenclature - noms des images
haut_1.png +----+----------+
| id | titre |
+----+----------+
| 1 | entrées |
haut_2.png | 2 | plats |
| 3 | desserts |
| 4 | sauces |
| 5 | boissons |
haut_3.png | 6 | divers |
+----+----------+
haut_4.png
5_haut.png
haut_6.jpg
93
===
Conception du site
CDC Technique - Cas des sites dynamiques
94
47
Administration
95
Rôle d'un Back Office
96
48
Protection
www/admin/.htaccess
PerlSetVar AuthFile /users/carlier/www/admin/.htpasswd
AuthName "Acces Restreint"
AuthType Basic
require valid-user
allow from 192.192.192.192
allow from 81.57.0.1 www/admin/.htpasswd

deny from all
rcarlier:xumechi
vbechard:sdfeuosj
satisfy any
97
.htaccess - réécriture
www/.htaccess
RewriteEngine On La partie qui se trouve sur l'url
• ^ commence par
RewriteRule ^(.+).html$ $1.php • (.+) un ou plusieurs caractères
• .html contient cette chaine de caractère
• $ termine par
Donc l'utilisateur tape Il arrive sur Va devenir

• index.html index.php • $1 ce qui était entre les parenthèses
• page.html page.php • .php suivi par cette chaine de caractère...
RewriteEngine on
1. RewriteRule ^ck-(.+)\.(.+)$ ck.php?fichier=$1&ext=$2 [L]
2. RewriteRule ^cocktail-(.+)\.(.+)$ ck.php?fichier=$1&ext=$2 [L]
3. RewriteRule ârticles-([0-9]+)(.+)$ liste.php?id_page=$1&ext=$2 [L]
4. RewriteRule ârticle-([0-9]+)-(.+)\.(.+)$ article.php?id_article=$1 [L]
5. RewriteRule ^prevention.html$ /article-10-prevention.html [L]
L'utilisateur tape Il arrive sur

1. ck-americano.html ck.php?fichier=americano&ext=html
2. cocktailk-americano.html ck.php?fichier=americano&ext=html
3. articles-3.html liste.php?id_page=3&ext=html
4. article-7-ingredient.html article.php?id_article=7
5. prevention.html article-10-prevention.html (donc article.php?id_article=10)
98
49
.htaccess - protection
AddType application/x-httpd-php .html www/.htaccess

AddType application/x-httpd-php .css
<Files ~ "\.(inc|tpl)$">
Deny from all
</Files>
<Files *.class>
Deny From All
</Files>
<Files 'plan'>
ForceType application/x-httpd-php
</Files>
ErrorDocument 404 /erreur.php
# Banir les méchants ...

RewriteCond %{HTTP_REFERER} grospirate\.com [NC,OR]
RewriteCond %{HTTP_REFERER} mechantvoleur\.com [NC]
RewriteRule .* - [F]
deny from 75.40.136.222

deny from 222.136.40.75
99
===
Conception du site
CDC Technique - Cas des sites dynamiques - Fonctionnement
100
50
Se poser toutes les questions
case oui
vide
?
non
Aucune oui
réponse
?
non
1 seule oui
réponse
?
non
101
Se poser toutes les questions
(ne pas faire

Déjà
reconnu ?
apparaître le
formulaire ?)
Mot de
ERREUR 1 Envoyez moi mon
passe
oublié ? mot de passe
ID ou MDP Formulaire de
non spécifié Pas de
compte ?
création de
ERREUR 3 compte
ID
ERREUR 2 non reconnu
ID & MDP
non associé
Bonjour
Richard
102
51
Comment ça marche ?
• La possibilité de laisser un commentaire se trouvera
• à la fin de chaque article
• sous chaque photo
• sous chaque présentation d'exposition
• La saisie d'un commentaire se déroulera toujours de la même façon, quelque soit

l'endroit du site - le formulaire sera donc identique partout.
• Pour chaque commentaire, il sera demandé à l'internaute :
• son nom (ou pseudo)
• l'URL de son site
• un titre au message
• un corps de message
• un code anti spam (captcha)
• la possibilité de mémorisation de ses informations
• Seuls le PSEUDO, le TITRE et le CAPTCHA seront obligatoires
• Autres informations collectées automatiquement : l'adresse IP, la date et l'heure d'expédition.

• L'utilisateur aura la possibilité d'être reconnu automatiquement d'une fois sur l'autre s'il coche une case adhoc.
En ce cas, le PSEUDO et l'URL de son site seront conservés 30 jours - le cookie sera renouvelé à chaque visite.
• Au cours d'une même session, il n'aura pas besoin de rentrer de nouveaux ses informations, que la case soit cochée ou non.
• Chaque commentaire posté ne sera visible qu'après validation du webmaster.
• Quand l'internaute clique sur [Envoyer], les données seront stockées dans la base, et le webmaster recevra un mail.
• Le mail reprendra le contenu du message, ainsi que des liens vers les fonctions : VALIDER et EFFACER
• Le formulaire sera toujours précédés des commentaires antérieurs, validés.

• Les réponses du webmaster apparaîtront de manière visible (couleurs différentes ?)
• Seront visibles : le titre, l'url (sous forme de lien) contenu du message, pseudo,
date et heure
• Le format d'affichage de la date sera :
• aujourd'hui - 19:53 pour les messages du jour
• hier - 19:53 pour les messages du jour
• 19 mar 2008 - 19:53 pour les messages d'une date antérieure
ETC… 103
Exemple : MySpace.fr
104
52
Exemple : Over Blog
105
Merise
Graphe de flux
Modèle conceptuel de traitements
106
53
UML - Cas utilisateur
UC1
Poster un
article
UC2
Lire un
article auteur
UC3
Laisser un
internaute
commentaire
UC4
Modérer un
modérateur
commentaire
107
UML - Cas utilisateur
108
54
UMLet
http://www.umlet.com/
1) double click sur l'acteur 2) il apparaît à gauche 3) le sélectionner, et changer sa propriété
4) action : idem 5) rattacher une action à un utilisateur
Options possibles
glisser une et sur le bord de l'action…
• bg=green double click sur le lien
poignée sous
• fg=red
l'aine de l'acteur Si tout va bien, on peut glisser l'action ou
l'acteur, le lien est conservé…
109
===
Conception du site
CDC Technique - Cas des sites dynamiques - Base de données
110
55
Exemple - Portfolio d'un photographe
Les entités
• Des rubriques pour classer les photos ("exotisme et bord de
mer", "insectes macros"…)
• Des pages de contenus (home, biographie, publications…)
• Des expositions (Cologne 2008, Bruxelles 2007…)
• Collecte d'infos contacts
Les structures
• Une rubrique possède un nom
• Une photo est décrite par un titre, une date de prise de vue,
un descriptif
• Les pages de contenus sont caractérisées par un titre, un
chapo, et un texte
• Les expositions par un titre, une année et un descriptif
• Pour les contacts on demande l'email, le sujet et le contenu
du message - la date de demande étant automatique
Les relations
• Une photo sera classée dans une rubrique et une seule
• Une rubrique pourra contenir plusieurs photos
• Une exposition sera constituée de plusieurs photos choisies

• Une photo pourra être présente à plusieurs expositions
111
Base de données
Outils
• DB Designer
http://fabforce.net/dbdesigner4/
• Mysql Workbench
http://dev.mysql.com/workbench/
112
56
UML diagramme de classes
Outils
• NextObjects ?
http://nextobjects.sourceforge.net/
• ArboUML
http://argouml.tigris.org/
• IBM Rational Rose Data Modeler (2688 €ht env - gratuit 30 jours)
http://www-01.ibm.com/software/awdtools/developer/datamodeler/
113
Exemple - agence de voyage
114
57
SQL …
CREATE TABLE IF NOT EXISTS `suggestions` (

ìd_suggestions` int(10) unsigned NOT NULL auto_increment,
ìd_sites_types` char(1) default NULL,
`date` datetime NOT NULL,
`nom` varchar(255) default NULL,
ùrl` varchar(255) NOT NULL,
`description` text NOT NULL,
`pseudo` varchar(255) NOT NULL,
èmail` varchar(255) NOT NULL,
ìp` varchar(255) NOT NULL,
PRIMARY KEY (ìd_suggestions`)
) ;
115
Informations techniques
Informations techniques
• Sécuriser l'administration du site
• Recenser tous les mots de passe
Processus de sauvegarde
• quoi ?
• sauvegarde complète
• sauvegarde différentielle
• sauvegarde incrémentielle
• restauration ?
116
58
===
Conception du site
Équipes, Planning, Budget
117
GANTT / PERT
118
59
Autres outils
Entre autre…
• Microsoft Project , Microsoft Visio
http://microsoft.fr
• Gantt Project
http://ganttproject.biz/
• Open Workbench
http://www.openworkbench.org
• Planner
http://winplanner.sourceforge.net
• OpenProj
http://openproj.org/openproj
• PHP-Collab
http://www.php-collab.com
• more.groupware
http://www.moregroupware.de
• Dot Project
http://www.dotproject.net
119
Estimer les durées
Estimer les durées

• Jugement d'expert
• Statistiques
• Analogie (autres projets)
• Compétences
• Disponibilités des ressources
• …
120
60
Estimer les budgets
Ressources humaines
• coûts directs et indirects
• jour / homme
• disponibilité : temps plein, temps partiel
• sous-traitance ou non
Autres ressources
• technologie, logiciels, matériels et matériaux
• méthodes de financement : emprunt, ...
121
===========
Pré production
122
61
Pré production
Aspects textuels
Aspects graphiques
Site france24 dans ses 3 langues, 123

Gestion de projet Web – © Richard Carlier - http://www.carlier.as mardi 15 janv 9h45
===========
Production
124
62
Production
Production
• Développement (html, php, bdd)
• Intégration contenu
• Déclinaison graphique
• Remplissage bases de données…
125
Tests
Tests
• Conformité fonctionnelle
• Conformité technique
• Fiabilité
• Performance
• Facilité d'utilisation
• Test du singe
126
63
===========
Exploitation
suivi après le lancement
127
Le lancement…
Avant le lancement
• Teasing
Pré lancement
• Documentation (technique, utilisateur, admin…)
• Formation interne
Le lancement
• Mise en ligne (FTP + BDD)
• Annonce (presse, mailing liste…)
128
64
Exploitation
Après le lancement
• Statistique
• Mises à jour contenu
• Référencement
• Montée en charge
• R.O.I.
Sans oublier
• Logistique
• Mise à jour des docs internes / externes
• Aspects juridiques
129
65

Projet Web: Cahier Des Charges

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Projet Web: Cahier Des Charges

Transféré par

Droits d'auteur :

Formats disponibles

…

5 Mise en ligne et suivi

Définition ISO 10006

Processus unique qui consiste à élaborer

Cycle de vie d'un projet Internet

Définition Conception Production Suivi

Étude de faisabilité et définition

Recensement des contenus

Quel site derrière la cible ?

Des jeunes seniors, habitant partout en France

Fidèles, adeptes du web et cyber-consommateurs

• Rapport de synthèse Quelle est votre J'aime ...

Évaluation de Points forts Points faibles

S'il y a déjà un site

Gestion de projet Web – © Richard Carlier - http://www.carlier.as

Sondage sur les visiteurs…

Cas de l'appel d'offre

En cas d'appel d'offre

Dans certains cas

• Charte graphique • langages, SGBD

• Recenser tous les contenus

• Les organiser en rubriques / sous rubriques / pages

Architecture - les types

Réseau / Grille / Transversale

Architecture - Les problèmes

Structure trop large

Structure trop profonde

Exemple avec EDraw : portfolio

Que va contenir le site ?

• Des pages (cf arborescence)

• GUUUI Web Prototyping

pieds de page : coordonnées complètes

pieds de page : rappel de navigation

pieds de page : navigation "légale" + crédits

Arborescence & gabarits

page d'accueil page article

Format Dimensions Poids max Notes

Méga bannière 728 x 90 50 Ko

Skyscraper 120 x 600 50 Ko

Menu horizontal deux niveaux

Quels sont les éléments de navigation, outre les menus ?

• Moteur de recherche interne

Navigation - fil d'Ariane

Fil d'ariane, chemin de fer, breadcrumbs trail

• Où suis-je / Où puis-je aller

Retour > Liste > Americano

Accueil > Liste des cocktails > Recette de l'Americano

Notre temps - navigation

Charte graphique Exemple

#7d7b79 #575654 #444341

Rôle Balise Police Taille Couleur

Mise en page Html (tableaux…)

Côté client dHtml (Html + Javascript)

Prog. .Net, Asp, C#…

Données Stockage, traitement, transfert : SQL (sur serveur…)

Transfert HTTP Demande de page (Get) + formulaire Html (Get / Post)

Respects des standards

Nomenclature - Fichiers, répertoires…

Ne pas oublier le référencement

L'ordre peut se changer via le

Tout à la racine organisé simple média rubrique rubrique étendu

Nomenclature - Répertoires multilingue

Tout à la racine par langue (1) par langue (2)