Site complet

Le but de cette article est de vous proposer un exemple de réalisation de site étape par étape, en partant d’un cahier des charges.

Étant donné que j’aime refaire mon site de temps en temps, pour le rendre « state-of-the-art » (ou du moins en s’y approchant étant donné que ça reste un site personnel et pas professionnel), je décris le cahier des charges qui a servi à l’élaboration de ce site même que vous êtes en train de visiter.

Ce tutoriel est réparti en plusieurs articles disponibles dans le menu de gauche.

Cahier des charges

Voici donc le cahier des charges proprement dit.

Caractéristiques

Multilingue français / anglais
XHTML 1.0 Strict
URL « search engine-friendly », donc pas de index.php?id=3
Pages en format optimisé pour l'impression gérées automatiquement par l'utilisation d'une CSS avec le type de média « printer »
« favorite icon » fonctionnant dans MS Internet Explorer et Firefox
Flux de type RSS avec les changements survenus sur le site
Fichier sitemap pour Google et les autres moteurs de recherche

Éléments de design

Barre de menu des différentes rubriques
Fil d'Ariane (breadcrumb menu)
Date de dernière modification
Boutons « 3 A » pour choisir entre 3 tailles de caractères pour le site ainsi que choix de la largeur du contenu comme sur le site http://demo.yootheme.com/. En plus avec sauvegarde de cette préférence dans un cookie

Accessibilité

Conformité AA ou AA+ (selon la labellisation suisse)
Utilisation des techniques CSS recommandées par le w3

Édition du contenu

Personnalisation des boutons de l'éditeur de textes
Ajout de styles de textes (télétype <tt>…</tt>) dans la barre d'outils et suppression des formats inutilisés (paragraphe ou texte)
Ouverture des liens externes par défaut dans la même fenêtre (parce que je n'aime pas choisir à la place de l'utilisateur et également parce que l'attribut target n'est plus supporté en XHTML 1.0 strict)

On est d’accord ? Alors commençons à créer notre site.

Modèle de site

Créer le modèle d’un site, le design, les images, … tout ça n’est pas forcément très facile. Dans le cas de ce site, j’ai fait le design complètement (en m’aidant de ressources diverses il est vrai) mais si vous préférez, voici quelques sites proposant des modèles de sites :