Présentation des standards du Web

Introduction

Bien que cela ait beaucoup changer depuis la sortie du livre de Jefrey Zeldman, il existe encore aujourd'hui (2006) deux approches de construction de site qui continuent à se partager les points de vue.

D'une part les adeptes de la méthode avec mise en page en tableaux et le fameux pixel transparent, méthode utilisée jusqu'à ces dernières années. Cette méthode parfois utilise dans les meilleurs cas un mélange de CSS (pour prendre en compte ce qui est textes et couleurs) et de tableaux pour gérer tout ce qui est disposition et mise en place des éléments dans l'espace, on qualifie cette technique de design hybride. Leurs utilisateurs mettent en avant le coté rapide et pratique 'du pixel transparent' et de la robustesse de portabilité internavigateur...

D'un autre coté, on trouve les utilisateurs de la compatibilité ascendante et de la séparation du contenu / contenant. En clair les utilisateurs des standards du Web. Cela se base sur une pleine sémantique du document d'un coté et de la génération complète des CSS et CSS-P de l'autre. Cette méthode garantit la portabilité des sites dans le temps et sur les plateformes diverses. Le classique CSS Zen Garden, illustre cette séparation entre contenu structuré de tout autre élément visuel.

Une équipe composée de Jefrey Zeldman, Eric Meyer, Dave Shea... pour ne citer que eux, ont mis en place le Web Standard Project WaSP, et ont pu évangéliser l'utilisation des standards. Lors de l'écriture de Design web : utiliser les standards : CSS et XHTML en 2005 Jeffrey Zeldman, tirait un signal d'alerte, en titrant, "... 99,9% des sites web sont obsolètes... ", aujourd'hui fin 2006, il publie une réédition et titre "... 99,9 % des sites web sont encore et toujours obsolètes..."

Quelques mots sur les standards

C'est quoi ?

Recommandé depuis 1996 par le w3c, les standards du web sont un ensemble de technologies qui permettent de construire des pages web en séparant le contenu du contenant, et en se dégageant de toute solution propriétaire (se réfèrer à la guerre des navigateurs du début des années 1990) et donc de ce fait, de s'assurer de la pérénité de son travail face à l'évolution des navigateurs ou des plateformes de visualisation... (téléphone, PDA, lecteurs d'écran, TV, bornes, électro-ménager...).

Il est vrai que pour beaucoup de développeurs de site, qui découvre aujourd'hui l'utilisation des standards, cela change radicalement la manière de travailler et d'approcher la mise en forme du site. Egalement pour les plus graphistes d'entre nous, fini les exports to HTML depuis Word, Photoshop, Fireworks ou autre logiciel... ou encore les copié collé entre excel et dreamweaver... ou bien les fameuses images de survol qui s'appuient sur des javascripts interminables.... Les responsables de projets ne sont également pas en dehors de la concerne de l'utilisation des standards, car de cette manière le poid des pages réduit énormément et de ce fait baisse considérablement la bande passante, le temps de chargement est optimisé, et la difusion vers tout type de device garanti. Bref...Il est vrai qu'entre les utilisateurs des standards et les accros de la construction en l'ancienne, il existe une foultitude de méthodes plus ou moins hybrides qui démontrent qu'il existe bien mille et une manière d'arriver au même résultat... enfin en facade.

La guerre des navigateurs

Au début du web les navigateur Netsacpe et Internet Explorer se disputaient les parts de marché pour conquérir la plus grande masse d'uitlisateur. En l'intégrant à Windows 98 et en offrant des performances parfois supérieure, Microsoft a réussi à se débarrasser de Netscape. Les navigateurs restant sur le marché ne parvenaient pas à reprendre le poste de concurent, et Internet Explorer devenait LE navigateur.

Il aura fallu attendre que la fondation Mozilla propose sa soution avec Firefox 1.0 puis 2.0 pour voir les parts de marché de Internet Explorer reculer. Aujourd'hui la solution de Firefox continu de progresser et à gagner grand nombre d'utilisateurs. On ne peut pas réduire à la simple utilisation de IE et Firefox, il y a également la présence de Safari et de Opera. Opera reste présent sur le marché des solutions mobiles (PDA, Téléphonie...) et du coté de Safari, il faut regarder les tendances de ces prochains temps, car Firefox 2.0 commence à faire des adeptes sous OSX Intel. Donc Safari vs Firefox.

En faisant du HTML et des CSS, donc... on utilise les standards ?

Oui, en fait utiliser des technos comme HTML et CSS revient à dire qu'on utilise les standards du web, mais de là à simplifier à cette simple définition cela est un peu réducteur. Le tout n'est pas d'utiliser des technologies, mais surtout de bien les utiliser. Pour de plus amples informations sur les bases de chacune de ces technologies, voyez les divers tutoriaux sur HTML, CSS, DOM, Ecma... mais c'est quoi bien utiliser les technos ?

compatibilité descendante

Pour résumer et faire bref dans cette partie sur les standards du web, nous pourrions dire que comme évoqué plus haut, les standards s'assurent d'une compatibilité ascendante avec les navigateurs. Encore une fois par navigateurs entendre agents utilisateurs et non pas simplement Netscape, Internet Explorer, Firefox, Safari, Opera... pour ne citer que les plus courants. Donc ok, c'est compatible avec les navigateurs contemporains et futurs, mais que devient il de la compatibilité descendante ?

C'est à dire qu'advient il de nos sites une fois 'standardisés' si l'internaute utilise un navigateur ancien qui n'interpréte pas correctement les standards ? Encore une fois entendre par là navigateurs d'anciennes générations, de type Netscape 4.8 qui reste le fleuron redoutable de l'interprétation des standards, et ne pas simplement réduire à une portabilité inter navigateurs. En gros s'assurer que cela fonctionne aussi bien sous Safari que sous Internet Explorer etc... est une chose mais s'assurer que les internautes utilisant des navigateurs anciens auront également accès à l'information est une autre chose à prendre également en compte.

Visualisez par exemple, en utilisant Netscape 4.8, les captures comparatives de ces diverses familles de sites qui proposent une approche différentes lors de l'utilisation d'un navigateur ancien :

Avec une préservation minimum du visuel comme le site de dell petites et moyennes entreprises, ou celui de la banque popluaire, qui malgré une esthétique différente laissent libre accès à l'information

Alors qu'il est totalement impossible de voir clairement ce qu'on fait sur voyages-sncf.com. (voir image ci-contre)

Une autre approche reste celle de csszengarden qui opte carrement pour une non utilisation des CSS dès lors que le navigateur est ancien.

Vous avez dit divite ou classite ?

Bien que l'utilisation de balises <div> et <span> soit fort précieuse pour nous permettre de préciser et affiner le contenu de nos pages, il faut rester précautionneux quant à leur utilisation. Systématiquement avoir recour à les employer peut nuire à la clarté du document, à sa verbosité, à son interprétation, au poids des pages, etc...

Il n'est pas rare de rencontrer des montages structurel de la sorte :

<div>
	<p><span class="paragraphe">Un texte de contenu</span></p>
</div>

au lieu, de :

<p>Un texte de contenu</p>

bien que cela paraisse assez particulier, cela se rencontre encore, ou même des éléments de menus flottant comme celui ci :

<div id="menuFlottant">
	<ul>
    	<li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
    </ul>
<div>

au lieu de

<ul id="menuFlottant">
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
</ul>

Bref, la liste est longue, les balises <img> dans une <div>, des <label> remplacés par des <span>, etc.. etc... là aussi il faut faire attention à ne pas surcharger le code en balise <div> ou dans l'utilisation des class="". Cet emploi exagéré se traduit par une classite ou une divite, et donc on peut pas dire que bien que le contenu soit du HTML et que la mise en forme soit basée sur des CSS, l'utilisation des standards du web soit optimale.

Javascript, JScript, EcmaScript ou pas du tout ?

Quel langage de script faut il utiliser... Javascript, JScript, EcmaScript ?, en fait le seul langage standrad est le JavaScript standardisé par ECMA, donc le EcmaScritpt. Et bien que standard, encore une fois l'utilisation d'une interactivité sophistiquée peut engendrer une mauvaise utilisation des standards. C'est à dire ?

Imaginez comme cela est souvent le cas dans certaines entreprises ou pour les lecteurs d'écran que la fonctionalité du JavaScript soit désactivée. Que devient votre page qui repose principalement sur l'utilisation de ce code client ? Il faut donc penser à intégrer son JavaScript de manière discète (inobtrusive javascript) afin de permettre au personne qui n'ont pas JavaScript d'activé sur leur navigateur d'accéder de manière confortable à votre contenu.

A quoi ressemble un site qui sépare le contenu par rapport à un autre qui ne le fait pas ?

Un des meilleurs outils d'exploration des sites web et des standards du web, reste Firefox. Parmi les multiples intérêts de Firefox on trouve notamment la possibilité de le doter d'une multitude d'extensions gratuites permettant ainsi d'étendre les possibilités du nvaigateur. Notament l'extension web Developer Tools, qui ajoute une barre d'outils pleine de ressources. Le but de ce tutorial n'étant pas de décrire l'ensemble des fonctionnalités de cette barre, nous nous concentrerons sur le fait que depuis son menu CSS > Disable Styles > All Styles (Ctrl + Alt + S) il est très facile d'activer ou non les styles de la page en cours de visualisation. Parcourez ainsi divers sites et jouez de cette activation ou non pour voir le résultat.... Il existe également un autre outil indispensable FireBug qui vous permet d'explorer la structuration même du document HTML, des CSS ou encore du Javascript.

un exemple :

Deux sites à la stratégie différente, Amazon, qui joue une portabilité plus sure pour un large public en mélangeant mise en forme et html... et Next Formation qui a opté pour une pure séparation du contenu et de l'affichage. Vous pouvez le constater sur l'animation ci-dessous.

Bref feuille de style ou pas... le résultat final donne d'un point de vue extérieur, des sites qui se ressemblent visuellement... donc quel est l'intérêt de passer par une mise en forme à l'ancienne.... en design hybride .... ou respectueuse des standards ?

Pour faire bref et succins, on dira que l'utilisation des standards permet :

La séparation entre le contenu et la mise en forme
La pérénité face à tout type de navigateurs à venir
La clarté et la simplicité des pages (coté code notament)
La portabilité des contenus vis à vis des diverses plateformes (Navigateurs, Téléphonie, TV, PDA, lecteurs d'écrans...)
Facilite l'implémentation de l'accéssibilité
Optimise et accentu les mécaniques de référencement
Un meilleur rendement pour les agents (économie de bande passante)

Ce qu'en pensent les différents acteurs du Web

Voici directement les liens vers quelques sites des plus fervants évangélisateurs et gurus sur l'utilisation des standards qui nous donnent leurs points de vue sur le pourquoi du comment de l'utilisation de ces standards.

Puce et Média