Debut mai 2003, le site debian-fr.org a été refondu. Les pages validaient, mais helas, les standards n'etaient pas entièrement respecté. En effet, respecter les standards, ce n'est pas que respecter la syntaxe du balisage, c'est aussi respecter la sémantique des balises.
pour comprendre pourquoi, je vous invite à lire l'article sur la sémantique des balises, sur OpenWeb.eu.org
Je me suis basé sur cette copie de la page d'accueil. Les css sont abondamment
utilisés, mais pas vraiment de façon optimum. Il y a 1 ou 2 balises font, et des attributs
target, ce qui doit être la raison pourquoi l'auteur de la page a utilisé une DTD HTML Transitionnal.
J'ai enlevé ces derniers vestiges du passé, et ainsi,j'ai pu utiliser une DTD HTML Strict.
J'ai bien sûr retirer tout les tableaux, mis des balises de titre pour les titres, des p pour
les paragraphes, des listes pour les menus etc..
Les observateurs pourront remarquer, en allant sur le site, que la page d'accueil est différente quand on la visualise avec lynx. On y remarquera un logo debian en ascii-art. L'auteur a donc fait une page spécifique pour lynx, ce qui est totalement inutile.
J'ai ainsi inclus
ce logo dans la page normal, et mis un style visibility:hidden; display:block;, ce qui fait
que le logo est invisible sur un navigateur classique, mais apparait sur les navigateurs textes (qui n'interpretent
pas les css).
Je précise qu'inclure un logo ascii-art dans une page, n'est vraiment pas une chose à faire car cela rend la page difficilement accessible pour les handicapés. Essayez de lire à voix un à un les caractères du logo, vous comprendrez tout de suite le supplice qu'on inflige alors aux handicapés lorsque le lecteur d'ecran vocal (ou la plage braille), lit le contenu. On pourrait rajouter alors des liens (invisible pour les navigateurs classiques, mais visible pour les lecteurs oraux), permettant de sauter le logo et ainsi aller directement à l'essentiel.
Pour la feuille de style, j'ai limité le nombre de classe et utiliser beaucoup plus les possiblités des selecteurs.
On peut remarquer que l'auteur de la page a une pratique, trés courante, mais pas franchement efficace, qui
est de spécifier un font-family identique dans tout les styles. J'ai enlevé tout ça et utilisé
le selecteur * { }, qui n'est pas trés connu, mais diaboliquement efficace.
Comme d'hab, on remarquera que le site est bien plus agréable dans un navigateur lynx, plus accessible, beaucoup plus agréable à maintenir, vu l'allégement substantiel du poid de la page (html+css):
economie : 41%
Et encore, la nouvelle version comprend le logo ascii-art qui n'y etait pas dans l'orignale. Si on l'enleve on augmente l'économie réalisée.
La page a été testée bien sûr avec un navigateur conforme (Mozilla et Konqueror), mais aussi avec des vieux navigateurs comme Internet Explorer 5 (rendu ok) et Netscape 4 (rendu trés bof mais la page reste lisible; je pourrais faire mieux mais j'ai la flemme :-)).