Et si je vous disais qu'aujourd'hui, le code source de votre site pourrait être réduit des deux tiers, vous faisant économiser autant de bande passante chaque mois?
Votre site serait plus accessible aux utilisateurs non voyants et aux plateformes de navigation de rechange comme les assistants numériques (PDA), serait indexé plus efficacement par les moteurs de recherche et se chargerait des ordres de grandeur plus vite, ce qui rendrait vos clients plus heureux.
Des changements de design à l'échelle du site prendraient quelques minutes plutôt que des jours.
Tout cela est possible en concevant avec les standards et les CSS.
Partie II : comportement, présentation et structure
Encore un peu de théorie avant de commencer à coder. Soyez patient!
L'une des philosophies clés de la conception Web fondée sur les standards est de séparer le comportement de la présentation et de la structure.
Dans la plupart des pages actuelles, la présentation et la structure sont gérées par le HTML. Malheureusement, les balises FONT, les tableaux de mise en page et les images d'espacement des vénérables années 90 demeurent encore aujourd'hui le fonds de commerce.
Le Web évolue vers la séparation des composantes suivantes les unes des autres, pour plusieurs raisons :
- Accessibilité : si votre site est rédigé de façon sémantique, les plateformes de navigation de rechange qui ne peuvent pas afficher les CSS peuvent quand même l'utiliser
- Permet des changements faciles à l'échelle du site : chaque page qui fait référence à une feuille de style est touchée par les changements que vous y apportez
- Styles de rechange : vous pouvez offrir à l'utilisateur d'autres styles, pour afficher un texte plus gros ou même un look entièrement différent
- Modularité : le XHTML peut être lu comme du XML et, à son tour, par le RSS
- Réduit le code et les images redondants : pourquoi le dire plus d'une fois? Cela économise aussi de la bande passante
- Il existe d'autres raisons d'adopter une approche conforme aux standards en conception Web, mais elles sont trop nombreuses pour être abordées ici
Comportement
Le comportement, c'est plus que les liens entre documents, l'un des concepts fondamentaux de l'hypertexte imaginé d'abord par Vannevar Bush. Le comportement, contrôlé par un langage de script comme JavaScript ou par le DOM, peut servir à créer des interactions Web complexes qui rivalisent avec celles des logiciels commerciaux.
Le DHTML a aussi été utilisé pour créer des comportements complexes, avec un succès discutable.
Structure
La structure est l'épine dorsale de votre page Web. Elle est contrôlée par un langage de balisage comme le XML ou le XHTML.
Le balisage désigne le langage abrégé qu'utilisaient les rédacteurs de journaux pour indiquer aux typographes comment présenter une ligne de texte donnée. Le XHTML fonctionne à peu près de la même façon avec les CSS.
Pour nos besoins, nous utiliserons le XHTML Transitional, un sous-ensemble du XHTML qui marie les avantages avant-gardistes du XML à la familiarité du HTML.
Présentation
C'est pour ça que nous sommes ici.
La présentation, contrôlée par les CSS, n'est pas la plus importante des trois, et elle ne peut pas non plus bien fonctionner sans les deux autres. Nous parlons des CSS comme de l'application phare des concepteurs Web, un moyen d'avoir un site accessible qui a en plus fière allure!
Quoi de neuf, DOCTYPE?
Avez-vous déjà vu ceci dans le code source d'une page Web?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
C'est quoi, tout ce charabia compliqué? Le DOCTYPE est simplement une déclaration qu'une page fait au navigateur à son propre sujet. Elle dit : « Je suis ce type de page. Je peux faire ceci, mais pas cela. »
Vous constaterez peut-être que certaines techniques DOM ou CSS ne fonctionnent pas sans un DOCTYPE complet; rendez-vous donc service et incluez le code ci-dessus avant le <head> de chacune de vos pages. Vous pouvez simplement le copier-coller, ou demander à un éditeur de texte comme BBEdit de le créer pour vous.
Où avez-vous la tête?
Vous faites déjà des sites Web, alors je n'ai pas besoin de vous décrire ce qu'est le <head> d'une page.
Disons simplement que la page XHTML doit savoir où se trouve la feuille de style externe à laquelle elle fait référence. Cette référence se trouve dans le <head>.
Il existe deux façons – à ma connaissance – de lier des feuilles de style externes à votre page. Les voici :
<link rel="stylesheet" href="c/basic.css" type="text/css" media="all" />
et
<style type="text/css" media="all">@import url("c/adv.css");</style>
Le « c/ » dans les lignes ci-dessus désigne un dossier appelé « c » dans lequel se trouvent les documents CSS. Si votre ou vos feuilles de style sont à la racine de votre dossier, le « c/ » n'est pas nécessaire.
La méthode link fonctionne bien dans les anciens navigateurs (avant la version 4.0), qui offraient un soutien limité des CSS. La méthode @import n'est prise en charge que par les navigateurs modernes.
Vous pouvez tirer parti de ces deux techniques. Il est possible de servir une feuille de style de base aux anciens navigateurs avec la méthode link, et une feuille plus avancée aux navigateurs plus conformes avec la méthode @import, comme je l'ai montré ci-dessus.
Aucun script de détection de navigateur n'est nécessaire pour servir plusieurs styles à plusieurs navigateurs. Les navigateurs sont de plus en plus conformes aux standards. Bientôt, nous n'aurons plus du tout à créer plusieurs feuilles de style.
Voilà donc le ménage terminé. Dès la semaine prochaine, nous pourrons mettre nos pages en forme pour de vrai.
En résumé
Séparer la présentation de votre site de son comportement et de sa structure peut faciliter l'entretien et réduire le code.
Si votre document HTML est rédigé de façon sémantique, les plateformes de navigation de rechange comme les PDA et les navigateurs texte peuvent afficher votre contenu de façon utilisable.
Le W3C recommande d'écrire un balisage sémantique dans votre document XHTML. Cela signifie que les tableaux doivent servir à afficher des données tabulaires comme des statistiques. Les listes doivent servir à, euh, afficher des listes d'éléments. Les titres doivent servir à transmettre l'importance et le sens, plutôt qu'à simplement modifier la taille du texte.
Les DOCTYPE indiquent au navigateur comment traiter votre page.
Il est possible de servir une feuille de style de base aux anciens navigateurs avec la méthode link, et une feuille plus avancée aux navigateurs modernes avec la méthode @import.