Comment créer un site Web

Comment créer un site Web

Martine Mottet

Automne 2007

Comment procéder

1. Faire l’analyse des besoins

2. Concevoir la structure du site

3. Organiser les dossiers et fichiers

4. Concevoir l’allure graphique des pages

5. Concevoir les textes du site

6. Réaliser le site

7. Transférer les fichiers sur le serveur Web

8. Tester le site

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 FichierFichier

2. Concevoir la structure du site

• Trop de profondeur

• 5 clics de souris

Fichier

Fichier

Fichier

Fichier

Fichier

Fichier

2. Concevoir la structure du site

Clic

Clic

Clic

index.htm

scenario1.htm

auteurs.htm membre1.htm

exercice1.htm histoire1.htm

Page d’accueildu site

3 clics de souris

membre2.htm

theme1.htm

plan.htm

2. Concevoir la structure du site

• Évitez les longues pages

• Incluez plutôt une table des matières ou créez un fichier PDF

bla blabla blabla blabla blabla blabla blabla blabla blabla blabla bla

1. Bla bla2. Clo clo3. Dit dit

1. bla bla bla bla bla bla2. Clo clo Clo clo3. Dit dit

3. Organiser les dossiers et fichiers

• Créez un dossier appelé NomPrenom• Placez tous les sous-dossiers et fichiers dans ce

dossier• Pour tous les dossiers et fichiers, utilisez des noms :

• Courts (pour éviter les erreurs de frappe)• Sans accent• Sans espace• Sans majuscule

• Pour les fichiers d’image et de son, conservez l’extension des noms :

• .GIF .JPG .PNG (etc.)• .WAV .MP3 .AU (etc.)

• Adresse réelle de la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/index.html

• Adresse absolue de l’hyperlien vers la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/image.gif

• Adresse relative de l’hyperlien vers la page de référenceimage.gif

Adresses absolues et relativesdes hyperliens

• Adresse réelle de la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/index.html

• Adresse absolue de l’hyperlien vers la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/image.gif

• Adresse relative de l’hyperlien vers la page de référenceimage.gif

Adresses absolues et relativesdes hyperliens

• Adresse réelle de la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/index.html

• Adresse absolue de l’hyperlien vers la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/HotPotatoes/image.gif

• Adresse relative de l’hyperlien vers la page de référence../image.gif

Adresses absolues et relativesdes hyperliens

• Adresse réelle de la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/index.html

• Adresse absolue de l’hyperlien vers la page de référencewww.tuxcafe.org/~ten-20727-h07/MottetMartine/HotPotatoes/image.gif

• Adresse relative de l’hyperlien vers la page de référence../image.gif

Adresses absolues et relativesdes hyperliens

4. Concevoir l’allure graphique des pages

index.htm

scenario1.htm

auteurs.htm membre1.htm

exercice1.htm histoire1.htmtheme1.htm

plan.htm

• 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

membre2.htm

• Uniformisez la présentation de l’information

4. Concevoir l’allure graphique des pages

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)

• Datez chaque page

• Citez vos sources

Source : Horn, Robert (1987) Information Mapping

6. Produire le site

index.htm

auteurs.htm contenu.htm

exercice3.htm

exercices.htm

plan.htm

histoire.htmmediagraphie.htm

exercice2.htmexercice1.htm

6. Produire le site (équipe de 3 personnes)

index.htm

auteurs.htm contenu.htm

exercice3.htm

exercices.htm

plan.htm

histoires.htmmediagraphie.htm

exercice2.htmexercice1.htm

3 exercicespar personne

1 histoirepar personne

7. Transférer les fichiers sur le serveur Web

• Un seul ordinateur serveur mais plusieurs services– Service Wiki– Service FTP– Service Web

• Transférez tous les fichiers sur le serveur dans votre dossier public

• Gardez tous les fichiers dans le même dossier

8. Tester le site

• À l’adresse :www.tuxcafe.org/~ten-20727-h07/NomPrenom