Le Making Of du site Dr. SnowGood

Cette page ne va intéresser que ceux d'entre vous qui sont à la recherche d'infos sur la conception de pages Web. Je vais donc essayer d'expliquer les choix, méthodes et outils utilisés pour les pages du site Dr. SnowGood. Il n'y a rien de bien sorcier mais si je peux rendre service à certains d'entre vous...
 
Que les choses soient claires. Je ne dis pas que j'ai raison et je ne dis pas que j'ai tout compris. Je souhaite simplement partager quelques réflexions qui s'appuient sur quelques années d'expériences plus ou moins bonnes. De plus, soyez conscients que les quelques remarques ci-dessous s'appliquent essentiellement à la création de site persos. J'entends par là des sites de tailles raisonnables et en aucun cas aux gros sites. De toute façon j'imagine mal les webmasters pros de ces sites venir chercher ici la lumière...
 
Allez, c'est parti

Historique

Je maintiens un autre site qui n'a strictement rien à voir avec les Snowboard. Ce dernier a été conçu en 99, à base de HTML pur et dur. Il commence à posséder pas mal de pages et devient relativement difficile à maintenir.
 
Quelles sont les difficultés rencontrées ? En fait, je fais une fixette sur l'homogénéité des pages. Qu'il s'agisse du "layout" (l'organisation, la mise en page), de la typographie etc. Puisque toutes les pages de ce site sont en HTML, dès que je souhaite faire une modification je suis amené à faire le tour de l'ensemble des pages... Si cela était possible il y a quelques années, ce n'est plus possible aujourd'hui. J'en suis arrivé à un point où je souhaiterai faire un re-design des pages de The CVI Rebel Site mais où j'y renonce car le travail demandé est vraiment trop important par rapport au temps libre dont je dispose.
 
On pourrait imaginer que le site précédent, afin de limiter le travail de maintenance, s'appuie sur des "frames" (des cadres, au sens HTML du terme). Malheureusement, si c'est théoriquement LA solution, en pratique, cela n'est pas applicable. En effet, les moteurs de recherche ne sont toujours pas capables de référencer correctement les sites qui utilisent des "frames". Pour la petite histoire, The Rebel CVI Site était initialement conçu avec des "frames" et il a fallu que je remette l'ensemble des pages à plat pour voir enfin son indice de référencement augmenter (il est aujourd'hui, fin mars 2003, 7eme mondial sur Google lorsque l'on fait une recherche sur le mot clé "CVI").
 
Bref, on le constate, il n'est pas raisonnable de concevoir un site digne de ce nom sans penser très sérieusement à sa conception. Je vais donc par la suite aborder certains points clés (ou au moins que je considère comme tels) et expliquer à chaque fois mes choix.

Séparation du fond et de la forme

Du point de vue de la maintenance, c'est le plus important. Cela couvre non seulement les cas où vous devez en un minimum de temps modifier l'ensemble des pages (pensez pas exemple à la modification du copyright au bas de toutes les pages...) mais aussi la facilité avec laquelle vous allez pouvoir créer de nouvelles pages.
 
Vous l'avez compris, je considère que le tout HTML n'est pas viable à long terme (c'est OK pour une page perso ou un curriculum mais pas pour un site un peu conséquent). En effet, lors de l'édition des pages, vous êtes non seulement en train d'éditer du texte mais aussi, en train de le mettre en forme. C'est vraiment pas une bonne idée car le jour ou vous voulez changer la mise en page... eh bé vous êtes coincé car le contenu et la mise en forme sont trop liés. Pensez par exemple à un gros document Word... Tout est terminé, la mise en page et le contenu correspondent à ce que vous attendez. Bien, bon ben maintenant, transformez ce document de telle sorte qu'il puisse simplement être imprimé sur des feuilles au format US ou bien avec une mise en page différente. Si vous n'avez pas, dès le départ fait l'effort d'utiliser des styles (paragraphe, mise en page etc.) vous êtes coincés.
 
Une solution récente et radicale existe. Elle consiste à éditer le contenu des pages en utilisant XML (voyez ce cours en ligne pour plus d'infos). Avec une telle méthode (qui demande un peu d'investissement du point de vue de la formation) vous n'avez pas d'autre choix que de séparer le fond et la forme. Cela est très certainement envisageable pour de gros sites mais je suis intimement persuadé qu'XML n'est pas la méthode qui vient à l'esprit de ceux qui veulent simplement mettre rapidement en ligne quelques pages.
 
Attention, ne me faites pas dire ce que je n'ai pas dis. Si demain de je dois reprendre The Rebel CVI Site, c'est sûr, j'utiliserai XML.
 
Une autre solution radicale existe. Elle consiste à mettre l'ensemble des textes de pages de votre site dans une base de données. Ceci dit, si on comprend bien qu'on ne va enregistrer que des textes dans la base de données, on voit aussi qu'il y a pas mal de questions à se poser si, par exemple, des images doivent être insérées dans les articles. On en revient alors à une situation dans laquelle, on va stocker dans une base, des pages XML que l'on mettra en page au moment de l'affichage sur le browser du visiteur. Ceci dit, le tout "base de données" ne me semble pas être la solution la plus simple pour un site moyen. Notez toutefois que l'utilisation d'une base de données dans votre site quasiment incontournable si vous voulez créer un Forum ou une page de News sur votre site (c'est ce que je fais sur The Rebel CVI Site. Allez voir le Forum ou les News.
 
"Bon ben OK, qu'est ce que tu proposes alors ?" Patience, je vous expliquerai un peu plus tard la méthode que j'utilise pour Dr. SnowGood mais avant cela je dois aborder deux ou trois points supplémentaires avec vous. A ce niveau, le seul truc à retenir c'est que vous devez, dès la conception, éviter de mélanger le fond et la forme et que c'est pour cette raison, vous ne devez pas tout coder en HTML.

Référencement

Si vous faites un site (même tout petit), c'est pour qu'il soit lu. Je parle ici des sites publics et pas des sites web internes à certaines entreprises ou organisations. Quoiqu'il en soit, vous devez faire en sorte que votre site soit correctement référencé. Il existe des tonnes de sites traitant du sujet et donnant des méga tonnes d'astuces. Pour ma part, il me semble que les points suivants sont les plus importants :

• Des titres différents sur chacune des pages :
• Des descriptions correctes :
• Des titres (balise H1) corrects :

"Oui mais on m'a parlé des Meta tag, des keywords etc." C'est vrai, tout cela existe et est très longuement expliqué dans certains sites qui ont fait du référencement leur spécialité (Voir Abondance par exemple).
 
Ceci dit, le seul truc sur lequel je veux insister ici c'est que dans la conception du site, même si on veut séparer le fond de la forme, il faudra être capable de "customiser" les titres et descriptions de chaque page.
 
Au risque de passer pour un gros lourd, j'ajouterai qu'il ne sert à rien de référencer votre site via des outils gratuits qui ne servent strictement à rien. Ah si, il servent à récupérer votre adresse E-mail et à faire en sorte que vous soyez très rapidement inondé de mails traitant de la longueur de votre sexe ou de taux d'intérêt mirobolants.
 
Pour la France, focalisez votre référencement sur Google, Yahoo, DMOZ, Lycos et Voilà. Essayez de mettre en place des échanges de liens avec d'autres sites traitant de sujets similaires, laissez du temps au temps (afin que les robots des moteurs de recherche visitent vos pages) et ajoutez régulièrement du contenu à votre bébé. Ah oui, une fois que c'est fait, il ne sert à rien de refaire des référencements auprès des moteurs sous prétexte que vous venez d'ajouter une page. C'est un coup à ce que votre site ne soit plus visité.
 
N'hésitez pas, éditez le source de cette page, regardez le début de la section HEAD et inspirez-vous en si cela vous dit.

Le design des pages

Ici, je ne veux pas entrer dans une discussion à propos des goûts et des couleurs. C'est votre problème et c'est certains je suis certainement pas la personnes à qui il faut demander son avis. Si vous êtes sec, consultez peut être le site de David Siegle. Enfin, moi j'aime bien ce qu'il écrit dans ces bouquins...
 
Quoiqu'il en soit, le seul truc qui m'importe c'est que vous preniez en compte le fait que certains des lecteurs voudront peut être imprimer certaines pages de votre site. Comme à priori vous n'allez pas installer tout de suite un convertisseur HTML/PDF, le lecteur à toutes les chances de se retrouver avec des pages ayant des phrases coupées à droite.
 
Pour éviter cela notez qu'il est possible de mettre, comme sur Dr. SnowGood, les menus de navigation à droite et en s'assurant que le texte vraiment important commence à gauche de chaque page.
 
Pour le reste, lors de la phase de design de vos pages, faites en sorte qu'à la fin vous ayez une idée très claire de leur layout. Telle partie correspond à l'article proprement dit, telle autre, au header de chaque page, là, se trouve le pied de page etc. A la limite, faites des tests en utilisant des "frames" même si vous savez qu'au bout du compte, vous ne les utiliserez pas.

Choix du HTML strict (conforme et normalisé)

Je l'ai dit, de mon point de vue, HTML c'est bien mais il y a tellement d'imbrications entre le fond et la forme que pour finir... vaut mieux pas l'utiliser ou au moins en limiter l'usage au strict minimum.
 
De plus, en tant que webmaster, vous êtes tenu de savoir que les différents browsers utilisent et reconnaissent différemment certaines extensions (notez aussi qu'Explorer représente 85% du "marché"). Autrement dit, telle page vue avec tel browser sera correctement affichée alors qu'avec tel autre, elle sera carrément illisible.
 
Pour résoudre se type de problème il suffit de faire en sorte que le code HTML que vous utilisez soit strict, conforme et normalisé. Si vous ne voyez pas de quoi je parle je vous conseil la lecture du petit bouquin suivant. Voyez aussi à ce propos le validateur en ligne ainsi que le site officiel du W3C.
 
L'idée sous jacente du HTML strict c'est de dire que vous allez écrire du code HTML mais sans utiliser tous les attributs spécifiques à tel ou tel fournisseur de browser Web. De plus, en écrivant votre code, vous vous engagez (moralement j'entends) à respecter un certains nombre de règles. Le truc pour finir, c'est que dans vos pages, vous allez avoir beaucoup de texte (d'information) très peu de balises et pratiquement aucun attribut HTML.
 
En faisant du HTML 4.01 vous focalisez plus sur le fond que lorsque vous faite du HTML classique. Même si la solution n'est pas aussi bonne que celle proposée par le XML, avec le HTML 4.01 vous évitez de mélanger fond et forme. Cette dernière est en effet du ressort de feuilles de style dont on va bientôt parler.
 
Attention : utiliser le HTML 4.01 signifie plus ou moins (pour ce que j'en sais) que vous devrez faire votre deuil d'outils d'édition Web de type WYSIWYG (what you see is what you get) tels que FrontPage. J'ai rien contre ce type d'outils mais généralement le code généré n'est pas toujours optimum et dans tous les cas, très rarement compatible 4.01. En ce qui concerne l'édition de pages HTML, pour ma part j'utilise WebExpert depuis pas mal de temps. HTML Kit peut représenter une très bonne alternative gratuite.

Les feuilles de style

Elles sont pratiquement obligatoires lorsque vous faites du HTML strict à moins que vous souhaitiez avoir à l'écran des pages bien moches.
 
En pratique, une feuille de style n'est rien d'autre qu'un petit fichier qui contient la façon dont vous voulez voir s'afficher le texte contenu entre telle ou telle balise. Pour faire simple, regardez les liens contenu dans le texte de cette page. Ils sont en gras, orange et leur couleur ne change pas lorsque vous avez cliqué sur l'un d'entre eux. Du point de vue de l'édition, dans le code HTML de la page, j'écris (enfin mon éditeur de code génère pour moi...) un source du style :

<A HREF="http://www.w3.org/" TARGET="_blank">Le site officiel du W3C</A>

On le voit bien, c'est un lien tout ce qu'il y a de classique. Dans le texte je focalise donc sur le fait que je vais faire apparaître un lien et surtout pas sur la façon don il apparaître à l'écran. Maintenant, si vous éditez le source de cette page, dans la section HEAD vous verrez la ligne suivante :

<LINK rel="StyleSheet" href="fds401.css">

En français, cela indique au browser que pour l'affichage des différentes balises il faudra qu'il tienne compte des directives qui se trouvent dans le fichier fds401.ccs (Feuille de Style 4.01, Cascading Style Sheet)
 
Maintenant, si on ouvre le fichier fds401.css on y voit entre autres les ligne suivantes :

a {
  text-decoration: none;
  font-weight:     bold;
}

a:visited {color:#FF6600;}
a:link {color:#FF6600;}
a:active {color:#FF6600;}

En français dans le texte cela signifie qu'une balise A ne doit pas avoir de décoration (elle ne sera pas soulignée), qu'elle doit apparaître en gras et qu'elle ait été visitée ou non, sa couleur est orange.
 
Vous l'imaginez, ce qui vient d'être dit pour la balise A l'est aussi pour toutes les autres. A l'aide des feuilles de style, vous définissez complètement comment vont apparaître les titres (H1, H2...) les paragraphes (balise P) ainsi que pratiquement toutes les autres balises.
 
Tout ça c'est de la technique. Ce qui compte et ce qu'il faut que vous reteniez à ce niveau, c'est que l'utilisation conjointe d'HTML 4.01 et des feuilles de style permet de décorréler de manière satisfaisante le fond et la forme. C'est pas aussi élégant qu'XML mais par exemple, dans le source de la page, seules les balises P des paragraphes apparaissent. Dans votre code, vous ne vous occupez pas de la façon dont ces derniers seront affichés : ça, c'est le boulot de la feuille de style.
 
Dernière recommandation : au départ, ne perdez pas trop de temps avec la feuille de style. Travaillez votre layout. Par la suite quand vous commencez à être satisfait, petite touche par petite touche, complétez la feuille de style. Ne vous leurrez pas, à un moment donné vous devrez aborder des questions relatives à la typographie etc. Tous ces problèmes sont encore des histoire de goûts. Si vous êtes sec, allez faire un tour sur le web, prenez des bouquins à la mise en page soignée et copiez plus ou moins ce qui vous plaît.

L'utilisation du langage PHP

Jusque là tout se passe bien. On a vu comment séparer plus ou moins le fond et la forme, le design des pages et les contraintes qu'apportent les besoins en référencement. Ouai, tout ça c'est très bien mais on a toujours pas répondu au problème de la maintenance.
 
Il y aurait une solution simple si et seulement si, le langage HTML supportait les inclusions de fichiers... Prenons un exemple où vous décidez que le layout des pages de votre site est le suivant : un en tête de page, une section pour l'article et un bas de page.
 
Sur toutes les pages, la structure est la même. En haut il y a peut être des menus, de la pub mais bon la section centrale est toujours réservée aux textes des articles et la section du bas comporte peut être un simple copyright. Typiquement, afin de faciliter la maintenance le code HTML de vos pages devrait ressembler à ce qui suit :

include header.html

<!-- Début du texte de l'article -->



<!-- Fin du texte de l'article   -->

include footer.html

Dans le code ci-dessus, il faut imaginer que les fichiers header.html et footer.html sont des fichiers déjà écrits, prêt à l'emploi. On voit qu'avec une telle organisation, si jamais vous décidez de changer le haut de toutes les pages, vous avez simplement à modifier le contenu du fichier header.html. Il en serait de même pour les bas de page avec le fichier footer.html. Pour le reste, vous imaginez aisément que le texte de l'article est contenu entre les deux commentaires et que comme il se doit, il est écrit en HTML 4.01.

Elle est pas belle la vie ? Non ! Faux, tout faux car tout ceci n'est pas possible en HTML... Malheur, enfer et damnation... C'est complètement idiot car en fait c'est exactement ce qu'il nous faudrait. Pas de panique, il existe au moins une solution et celle à qui je pense s'appelle PHP.

Ce qu'il faut remarquer, c'est que écrire "include header.html", c'est bien gentil mais que cela suppose du côté du serveur Web (celui qui est chez Wanadoo, Free ou un autre) une certaine quantité de travail que l'on peut décomposer comme suit :

• Avant d'envoyer le code HTML complet de la page demandée
• Aller chercher le contenu de la page header.html
• Y ajouter le contenu de la page demandée
• Aller chercher et ajouter au reste, le code de la page footer.html

Bref, ce que l'on veut, c'est qu'une certaine quantité de travail soit faite du côté du serveur avant que la page ne soit envoyée au client (le browser du visiteur). Ah ben tiens, ça tombe bien, c'est tout l'objet de PHP. Pour faire simple, on peut dire qu'à partir du moment ou votre hébergeur possède un serveur qui supporte le langage PHP, vous avez la possibilité d'insérer dans vos pages web un certains nombre de lignes de code qui seront exécutées par le serveur lorsque telle ou telle page sera demandée.
 
"Mouai et alors ?" Mais alors c'est super car entre autres, le langage PHP supporte le mécanisme d'inclusion de fichiers dont je viens de parler (la syntaxe est d'ailleurs pratiquement la même que celle présentée). Autrement dit, tous les problèmes de maintenance qui avaient été évoqués trouvent une solution élégante. "Oui mais moi, j'y connais rien en PHP, comment je vais faire ?". Du calme, à titre d'exemple voilà à quoi ressemble une page web du site Dr. SnowGood avant qu'un article ne soit écrit.

<?php
include("./header.php");
echo "<H1>$NomPage</H1>";
?>

<!-- Begin Content -->


<!--  End Content  -->

<?php
include("./rightpart.php");
include("./footer.php");
?>

Ne me dites pas que même si vous ne comprenez pas tout, vous n'êtes pas capables de faire un copier-coller de ce code puis d'écrire les fichiers header.php, rightpart.php et footer.php qui contiennent, malgré leurs extensions .php, du code HTML 4.01 tout ce qu'il y a de classique. Pour info, sur Dr. SnowGood, rightpart.php correspond à la partie droite des pages, là où on trouve le cadre et les différents liens.

Ce qu'il y a de vraiment super avec le langage PHP, c'est que non seulement il résous élégamment notre problème d'inclusion de fichiers HTML mais qu'en plus, il apporte beaucoup (mais alors vraiment beaucoup) d'autres choses. Ceci dit, si je commence à mettre les doigts dans ce sujet, on va y passer 8H... Je préfère vous renvoyer encore une fois vers un cours PHP en ligne ou un site dédié à PHP. Ce ne sont que deux exemple arbitraires car il existe des centaines de sites français dédiés à PHP.

Attention, tous les hébergeurs ne supportent pas PHP. C'est le cas de Wanadoo. Cela fait des années que les clients demandent le support de PHP mais apparemment tous les membres du staff technique sont sourds. Après différents tests, Dr. SnowGood est chez Free. Honnêtement j'ai pas de problème.

Conclusion sous forme de recette

Il est temps de conclure et d'énumérer sous forme de recette la façon de Dr. SnowGood a été créé.

• Je rentre de Serre-Chevalier. Comme la route est longue, je cogite et je me dis qu'il serait bien de faire un site pour ceux qui débutent en snowboard.
• Je dessine sur papier le type de page que je souhaite réaliser.
• Lors de cette phase, je prends garde à bien faire apparaître l'emplacement de l'article ainsi que les différentes sections de la page (header, footer...).
• J'utilise mon éditeur HTML et commence à l'aide de tableaux (pas des "frames") à réaliser une page vide (sans article).
• Cette page est codée en HTML 4.01 et met en oeuvre un feuille de style minimale.
• Les tableaux m'aident à structurer la page en sections (header, article, footer).
• Histoire de voir à quoi cela va ressembler, je fais un copier-coller de n'importe quel texte. A ce niveau peut importe le fond. Je focalise sur la forme.
• Je m'assure que la page s'imprime correctement (au moins le texte de l'article).
• Par petites touches, j'affine la feuille de style. Je passe du temps sur la typographie des titres et sous-titres, sur l'espacement entre paragraphes, la couleur de fond du site, la couleur du texte... Je ne traite pas ce point à la légère.
• Je crée deux ou trois pages (pas plus) sur le même modèle html histoire de voir comment se passe la navigation dans le site.
• Je fais un test auprès d'un ou deux potes histoire de voir si ça leur plaît.
• Je valide régulièrement le code HTML de la page à l'aide de l'outil du W3C. J'en profite aussi pour valider le code de la feuille de style.
• Quand le code de la page HTML (avec une extension .html) est OK, je créé une nouvelle page PHP (extension .php) dans laquelle je fais apparaître les inclusions des différents fichiers.
• Pour chaque fichier PHP inclus, je vais chercher dans la page HTML initiale le partie de code correspondante.
• Je dépose chez mon hébergeur les différentes pages PHP.
• Histoire d'assurer le coup, j'utilise encore une fois le validateur du W3C.
• Il ne reste plus maintenant qu'à écrire les différentes pages du site et peut être à mettre à jour tel ou tel fichier inclus.
• Je m'occupe du référencement du site et je continue à écrire des articles.

© Tous droits réservés 2003-2010 Dr. SnowGood