Structurer un site Web - Google Site

Comment créer un site Web
Martine Mottet
Hiver 2010
Comment procéder
Faire l’analyse des besoins
Concevoir la structure du site
Organiser les fichiers
Concevoir l’allure graphique des pages
Concevoir les textes du site
Réaliser le site
Transférer les fichiers sur le serveur Web
(selon la technologie utilisée)
8. Tester le site
1.
2.
3.
4.
5.
6.
7.
1. Faire l’analyse des besoins
• Définir la situation de communication
– Intention : information, éducation
(apprentissage, évaluation)
– Clientèle cible
• Fonction : enseignant, élève, parent
• Âge : enfant du primaire, enfant du secondaire,
adulte
• Type d’utilisateur : familier ou non avec le Web
– Interaction : monologue, dialogue, débat
– Utilisation : en classe, hors classe
– Etc.
2. Concevoir la structure du site
• Trop long à afficher
Fichier
2. Concevoir la structure du site
• Trop d’étalement
Fichier
Fichier
Fichier
Fichier
Fichier
Fichier
Fichier
Fichier
2. Concevoir la structure du site
• Trop de profondeur
Fichier
Fichier
Fichier
Fichier
• 5 clics de souris
Fichier
Fichier
2. Concevoir la structure du site
Clic
Index.htm
Clic
Clic
3 clics de souris
Page d’accueil
du site
Cours.htm
Professeur.htm
Plan.htm
Travaux.htm
PDF
Ressources.htm
2. Concevoir la structure du site
• Évitez les longues
pages
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
bla bla
• Incluez plutôt une
table des matières ou
créez un fichier PDF
1. Bla bla
2. Clo clo
3. Dit dit
1. bla bla
bla bla
bla bla
2. Clo clo
Clo clo
3. Dit dit
3. Organiser les fichiers (sauf Google Site)
• Créez un dossier appelé NomPrenom
• Placez tous les fichiers dans ce dossier
• Pour les fichiers HTML, utilisez des noms :
• Courts (pour éviter les erreurs de frappe)
• Sans accent
• Sans espace
• Pour les fichiers d’image et de son, conservez
l’extension des noms :
• .GIF .JPG .PNG
• .WAV .MP3 .AU
(etc.)
(etc.)
4. Concevoir l’allure graphique des pages
•
•
•
•
Harmonisez un maximum de trois couleurs
Choisissez des couleurs sûres pour le Web
Optez pour un bon contraste fond-texte
Attribuez un sens aux couleurs
Index.htm
Cours.htm
Professeur.htm
Plan.htm
Travaux.htm
Ressources.htm
4. Concevoir l’allure graphique des pages
• Uniformisez la présentation de l’information
4. Concevoir l’allure graphique des pages
• Préférez les polices sans serif plutôt que les
polices avec serif (maximum deux polices)
• Réservez le soulignement pour les hyperliens
• Choisissez la taille des caractères en fonction du
public cible
• Utilisez seulement des éléments audiovisuels
libres de droits
• Utilisez seulement des éléments audiovisuels
ayant une valeur ajoutée
• Évitez les éléments animés
5. Rédiger les textes du site
• Faites des phrases courtes (lisibilité)
• Regroupez les phrases en petits blocs
d’information (assimilation)
• Traitez d’un seul sujet dans un bloc
d’information (pertinence)
• Attribuez des titres significatifs (repérage)
Source : Horn, Robert (1987) Information Mapping
6. Produire le site
Index.htm
Table des matières
Cours.htm
Professeur.htm
Image
Plan.htm
• Datez chaque page
• Citez vos sources
Travaux.htm
PDF
Ressources.htm
7. Transférer les fichiers sur le serveur Web
(sauf Google Site)
• Transférez tous les fichiers sur le serveur
dans votre dossier
– Adresse
ftp.travaux.fse.ulaval.ca
– Utilisateur
– Mot de passe
ten-67363-numéro
motdepasse
• Gardez tous les fichiers dans le même
dossier
8. Tester le site (sauf Google Site)
• À l’adresse :
www.travaux.fse.ulaval.ca/H2010/
ten-7023/TEN-7023-numéro