Accueil > Fiches pratiques

Un site web pour quoi faire ?
Comprendre Internet
Principes de base
Eléments de méthode

Création d'un site Internet : éléments de méthode

Concevoir et développer un site web requiert de l’organisation. Voici les étapes incontournables de la création d’un site sur lesquelles vous pourrez vous appuyer pour réaliser votre projet.

1. Réflexion

• Définir le cahier des charges
• Déterminer la structure du site
• Elaborer la charte graphique
• Rechercher les ressources

2. Création

• Rédiger les textes
• Préparer les images
• Réaliser les pages
• Tester le site en local

3. Publication

• Transférer le site chez l’hébergeur
• Tester le site en ligne

Etape 1 : réflexion

Avant de s'aventurer dans la création d’un site Web, la première étape indispensable consiste à analyser les besoins et la pertinence de votre projet. Une phase de réflexion préliminaire permettra ainsi de définir le public cible et le contenu de votre site.

Définir le cahier des charges

Etablir le cahier des charges, c'est se poser toutes les bonnes questions sur le projet lui-même et sur les outils que l'on va être amené à utiliser.

Analyse des besoins du public-cible

Trois questions essentielles sont à poser avant d'entamer le développement de tout site : Quel public cible voulons-nous atteindre avec notre site ? À quels besoins le site que je veux développer va-t-il répondre ? Quelle est l'utilité d'Internet pour ce projet ? La réponse à ces questions vous aiguillera tout au long des phases de conception et de développement du site.

Définition du contenu du site

Deux questions à se poser à ce stade : Quel est le but du site ? (informer, former, etc. : voir la partie "Créer un site web pédagogique : pour quoi faire ?") De quoi parlera le site ? (de poésie, de théâtre, de grammaire, etc.)

Inventaire des ressources

Ressources informationnelles

Tâche : Faire l’inventaire des ressources informationnelles (textuelles et graphiques) que vous souhaitez diffuser, en fonction des objectifs fixés et de la cible visée. Identifier dans le même temps les éléments manquants afin de prévoir leur conception.

Ressources humaines

Tâche : Repérer les personnes-ressources

La conception d'un bon et beau site éducatif nécessite de multiples habiletés qu'une seule personne possède rarement. Essayez d’identifier dès le départ les personnes-ressources qui pourront vous épauler au cours de la réalisation de votre projet.

Ressources technologiques

Tâche : Faire l’inventaire des ressources technologiques de votre environnement : Avez-vous accès à certains équipements ou périphériques, tels un numériseur, un appareil photo numérique, etc. ? Votre institution ou votre organisme soutiennent-ils certains logiciels auxquels vous auriez accès ?

Ressources en temps

Tâche : Etablir un calendrier de conception et de développement

La conception et le développement d’un site Web exigent un investissement en temps très important. De nombreux projets sont ainsi abandonnés du fait que leur concepteur n’avait pas évalué l’importance de la charge temporelle exigée par ce type de projet.

Voici comment se répartissent en général les différentes phases de création d’un site :

• Analyse du besoin et de la pertinence pédagogique : 10 % du temps.
• Structuration des contenus, définition de la charte graphique et de la navigation, phase la plus importante et la plus considérable : 45 % du temps.
• Réalisation : 35 % du temps.
• Expérimentation : 10 % du temps.

NB : Il faut également prévoir du temps pour les mises à jour.

Définir la structure du site

Vous devrez ensuite définir la manière dont l'information sera répartie dans les diverses pages de votre site et de la façon dont l'internaute pourra se déplacer à l'intérieur du site.

Tâche : Dessiner le plan du site sous la forme d'un organigramme. Chaque page sera représentée sous la forme d'un rectangle et chaque lien par une flèche.
Il existe plusieurs manières de structurer un site :

Structure séquentielle ou linéaire

Elle ne reflète pas vraiment la notion d'hypertexte car elle reste dans sa conception très linéaire. Les liens sont établis pour que le lecteur avance de page en page du début jusqu'à la fin. Un retour vers le sommaire est disponible depuis chaque page. (Exemple)

Structure en étoile

Une page centrale assure la distribution de l'information à travers des allers-retours permanents. (Exemple)

Structure arborescente

L'information est organisée pour aller du plus général vers le plus spécifique. (Exemple)

Structure transversale

Ce type de structure est très lourd à mettre en place car il offre une multitude de choix tant pour le concepteur que pour l'utilisateur. C'est l'exemple du dictionnaire où chaque mot d'une définition renvoie à une autre définition. Tous les nœuds laissent la possibilité de rejoindre chacun des autres nœuds.

Combinaison de différentes structures

En fonction des sujets traités par le site, plusieurs types de structures peuvent être imbriqués à l’intérieur d’un même site.

Quelques conseils :

• L'interface de navigation doit être simple à comprendre, facile à mémoriser et offrir une orientation vers l'information cherchée.
• Une façon simple de permettre à l’utilisateur d'avoir accès à toutes les rubriques est d'insérer dans chaque page du site, une barre de navigation.
• Tout au long de la visite dans le site, on doit pouvoir en tout temps revenir à la page d'accueil.
• Sur toutes les pages, la présence d'une indication pour signaler l'appartenance du document courant à un site et plus précisément à un thème déterminé, est nécessaire : ceci permet au visiteur de se repérer.
• Les éléments de la barre de navigation : la barre de navigation peut contenir un ensemble d'icônes ou de mots-clés permettant d'accéder aux principales rubriques et aux services offerts par le site. Pour les différentes rubriques, il faut veiller à les bien nommer pour que l'intitulé de la rubrique soit cohérent avec son contenu.

Élaborer la charte graphique

Vous devrez ensuite définir l'aspect du site : mise en page, typographie, titre, texte et emplacement des éléments graphiques.

Tâche : Dessiner une page type du site.

Quelques conseils :

• L’aspect visuel du site doit être homogène.
• La couleur de fond doit être contrastée par rapport à la couleur du texte et des images : Idéalement, une typographie foncée sur un fond clair produit moins de fatigue à l'écran. Le fond d’écran ne doit pas comporter trop de relief ou de dessin pour ne pas nuire à la lecture. (cf. mauvais exemples 1 et 2). L’expérience montre que certaines associations de couleurs sont plus efficaces que d'autres pour faciliter la lisibilité du texte :

Déconseillé	Conseillé
Rouge sur fond vert (ff0000-00ff00)*	Violet sur fond blanc (330066-ffffff)
Rouge sur fond bleu (ff0000-0000ff)	brun foncé sur fond gris-vert (330000-99CC99)
Vert pâle sur fond blanc (99FF33-ffffff)	Vert foncé sur fond jaune pâle (003300-ffffcc)
Vert sur fond bleu (00ff00-0000ff)	Violet sur fond rose pâle (330066-ffcccc)
Jaune sur fond vert (ffff00-00ff00)	Blanc sur fond vert foncé (ffffff-006600)

* couleur caractères-couleur fond

• La couleur et la police des caractères du texte doivent être suffisamment contrastées pour permettre une bonne lecture.
• Le graphisme doit mettre en valeur le contenu (évitez tout ce qui peut détourner l’attention du visiteur : couleurs criardes, fonds d’écrans surchargés, titres envahissants, etc.).
• Les caractères gras, souligné et italique doivent être utilisés avec circonspection : Le gras sera préféré aux majuscules pour mettre en évidence un élément, car il est plus facile à lire et les majuscules signifient CRIER sur Internet. L'italique amoindrit la lisibilité du texte. Le souligné identifie les hyperliens sur le réseau Internet et il doit être réservé à cette fin.
• Les polices de caractère doivent faciliter la lecture : Un maximum de trois polices de caractères devrait être utilisé afin de conserver l'harmonie visuelle des pages-écrans. Les polices à privilégier sont celles sans empattement comme Helvetica, Verdana et Arial (par opposition au Times New Roman par exemple qui est une police avec empattement), d'une taille d'au moins 12 points.
• Les pages ne doivent pas être trop chargées en texte et en illustrations : la mise en page doit être aérée.
• La mise en page doit faciliter le repérage de l’information et la navigation : Il est possible de disposer un texte de plusieurs façons dans une page-écran. On peut l'afficher à la grandeur de l'écran, le disposer en tableau ou le structurer dans un environnement par cadre, mais toujours dans un objectif de lisibilité. Il est souhaitable de respecter certaines règles de base : Ne jamais faire des colonnes de type journal, éviter les textes trop larges qui nécessitent les déplacements horizontaux de la barre de défilement, éviter les mots clignotants dans un texte, etc.

Rechercher les ressources

Tâche : Réunir tous les éléments dont vous aurez besoin pour réaliser le site : textes, illustrations, boutons, fonds d'écran, etc.

NB : La plupart des ressources sont disponibles sur le web. Il convient toutefois de s'assurer qu'elles sont libres de droit en consultant le copyright du site ou en contactant l'auteur. Pour plus de détails concernant les droits d’auteur sur Internet, consultez le site Educnet.

Etape 2 : création

Rédiger les textes

Avant d’entamer la réalisation des pages, vous préparerez les fichiers contenant l'ensemble des textes du site.

Tâche : Saisir les textes avec un logiciel de traitement de texte et les corriger.

Quelques conseils :

• Les sources des documents présentés sur le site doivent être indiquées.
• Qualité de la langue : l’orthographe, la formulation et la structure des phrases sont capitales. Le niveau de langue doit être approprié au public visé.
• La rédaction des textes doit être adaptée au mode de lecture des internautes : une lecture rapide et souvent non linéaire. On facilitera la lecture en utilisant des phrases courtes. Si un texte est trop long, on le répartira sur plusieurs pages.

Préparer les images

Vous devrez également préparer les images que vous souhaitez intégrer dans votre site de manière à ce qu’elles aient un poids raisonnable et soient de bonne qualité.

Tâche : Retoucher les images : améliorer leur qualité et optimiser leur poids.

Pour plus d’informations sur ce sujet, consultez notre tutoriel sur Photofiltre.

Réaliser les pages

Tâche : Réaliser une page modèle et, à partir de cette page, créer toutes les autres en utilisant un éditeur HTML.

Pour apprendre à utiliser un éditeur de pages HTML, consultez notre fiche Dreamweaver 2.

Tester le site en local

Il vous faudra ensuite tester l'ensemble du site afin de vérifier qu'il ne contient pas d'erreur.

Tâche : Vérifier que les liens internes fonctionnent, que le système de navigation adopté est intuitif et performant, que les images s'affichent et que la mise en page est homogène. Utiliser pour cela différents navigateurs (et si possible leurs différentes versions) ainsi que différents modes d'affichage.

Etape 3 : publication

Transférer le site chez l'hébergeur

Tâche : Transférer l'ensemble du site chez l'hébergeur, en n'oubliant aucun fichier !
Pour apprendre à utiliser un logiciel de transfert FTP, consultez notre page Filezilla.

Tester le site en ligne

La dernière étape consistera à tester le site afin de vérifier qu'il fonctionne correctement.

Tâches : Vérifier que les liens internes et externes fonctionnent et que les images s'affichent. Vérifier le temps de chargement des pages.

Quelques sites pour en savoir plus…

• Réaliser un site Web avec ses élèves
  A destination des professeurs désireux de se lancer dans l'aventure, ce site vous propose de faire le point sur les différentes questions et problèmes à prévoir pour mener à bien votre projet. La démarche de réflexion, de création et de publication est divisée en 13 étapes chronologiques. Celles-ci partagent un canevas commun : objectifs de l'étape, la procédure à suivre, les activités à effectuer, les liens pour en savoir plus et les ressources (logiciels) utiles pour mener à bien les objectifs.
• Cours de développement d’un site Toile destiné aux enseignants
  Ce cours, conçu par Mejdi Ayari-Agence universitaire de la Francophonie - Campus numérique francophone de Tunis, présente les aspects techniques et méthodologiques du développement d’un site web.
• La conception d’un site web éducatif
  Denyse Gilbert, spécialiste en Applications pédagogiques des TIC à l'université Laval au Québec propose un excellent guide en ligne pour aider à la conception d'un site web éducatif.
• La création multimédia en classe
  Un dossier intéressant réalisé par Pascal Fancea du CRDP de l'académie de Grenoble.
• Publier en ligne
  Un dossier Educnet qui propose des liens intéressants.