Les techniques et les outils à disposition des standards du Web

Mise en pratique

Du fait que cela dépasse le scope de ce tutorial, la mise en pratique et l'utilisation des standards pour la création d'une page web est approchée dans un autre tutorial complémentaire de celui ci. Nous allons par contre continuer par l'exploration des techniques à mettre en oeuvre pour obtenir un code plus propre et controlé.

Bascule sur DOCTYPE

Que se passe t il, lorsqu'une page web a été développée à l'époque ou un navigateur ne gérait pas l'intégralité des CSS ou que les styles n'étaient pas interpréter de la même manière (par exemple IE et son modèle de boite (qui est différente entre la version 6.0 et la version 7.0). Nous allons explorer cette situation un peu plus bas dans l'animation de présentation.

Les navigateurs ont intégrés cette particularité sous la forme de divers modes de représentation. Le mode standard qui considère que la page web est complètement compatible avec les version en cours du navigateur et des standards, et le mode quirk qui lui interprète le contenu de la page comme l'aurait fait une des versions antérieures du navigateur. Todd Fahrner, co fondateur du WaSP et contributeur du W3C, proposa que les navigateurs intègrent ce basculement de mode en fonction de la présence ou non d'un DOCTYPE bien formé en entête de document.

Mode standard, quirk ou almost standard ?

Seul Firefox possède sur la partie droite de la barre Web developper une petite icone qui indique le mode dans lequel le navigateur affiche la page.

D'autres navigateurs comme Opéra, proposent un troisième mode, almost standard, ou 'à la' Internet Explorer. Quoiqu'il en soit, c'est assez intéressant de jouer avec le DOCTYPE sniffing afin de s'assurer de la bonne interprétation de nos pages et du code CSS par les navigateurs.

compatMode

Il existe également une fonction JavaScript de la classe document, compatMode qui renvoie le mode utilisé par le navigateur. Créez un nouveau document HTML et tapez les lignes de code suivantes entre les balises <body> puis testez dans un navigateur

<script>
    var mode = document.compatMode;
    alert(mode);
</script>

Vous obtiendrez une boite d'alerte indiquant CSS1Compat. Suprimmez la première ligne de la page, c'est à dire le DOCTYPE, enregistrez la page et retstez dans un navigateur. Cette fois ci vous devriez obtenir une boite de dialogue indiquant BackCompat. Essayez avec différents navigateurs, puis essayez également en modifiant le doctype en entrant par exemple une URL relative au lieu d'une URL absolu. Vous pourrez ainsi contrôler le comportement de chaque navigateur en rapport avec le DOCTYPE sniffing

Problématique de la largeur de boite

Comme nous venons de le voir, en jouant sur le DOCTYPE, Internet Explorer 7.0 peut passer d'un mode de représentation Standard à un mode de représentation Quirks. De ce fait IE ne rend plus ces modèles de boites de la même manière pour les versions antérieures du navigateurs. Durant plusieurs années, la question du modèle de boite posait la question entre développeurs et éditeurs de navigateurs, à savoir est ce que la largeur d'un bloc équivaut à la largeur hors tout, c'est à dire en comptant les marges intérieures et les bordures, ou alors la largeur d'un bloc ne tient pas compte de ces marges intérieures et bordures. Là est la question. Microsoft à changer entre deux versions.... ce qui se traduit que jusqu'à IE 6.0 la largeur englobe les marges intérieures. ce qui n'est plus le cas de IE 7.0. Pour en savoir plus sur l'utilisation des blocs en CSS, voir le tutorial prévu à cet effet.

Navigateurs anciens et navigateurs modernes

Bien souvent on développe les sites en s'assurant d'une bonne portabilité inter navigateurs comme Internet Explorer, Firefox, Opéra, Safari... mais on oublie presque tout le temps les versions anciennes de navigateurs. Il est certain que si nous nous réferrons aux diverses sources de statistiques sur l'utilisation des navigateurs, IE7, IE6 et Firefox tiennent la tête laissant les alternatives relativement basses :

Mais vos projets peuvent être des marchés de niches et ne pas être pleinement concernés par des statistiques générales et moyenne de tout types d'utilisateurs confondus. De ce fait il faut anticiper le fait qu'une partie de vos utilisateurs puissent utiliser un navigateur plus ancien qui ne prennent pas en compte certains aspects de CSS2. Le plus simple reste de prendre un des navigateurs les plus rugeux et toujours utilisé par certains groupes d'utilisateurs, Communicator, encore téléchargeable sur Netscape Browser Archive.

La question reste de maintenant déterminer si la page est lu sur un navigateur ancien ou un navigateur moderne. Il existe diverses solutions, dont certaines en JavaScript, mais là encore nous allons essayer de rester à l'utilisation des standards. En fait la solution est toute simple, il suffit d'utiliser deux feuilles de styles, non pas deux feuilles qui interpretent la même chose différemment mais au contraire deux feuilles complémentaires, l'une de l'autre.

La première contiendra toute les informations interprétables par les vieux navigateurs et la seconde définierait toutes les description complexes que les vieux navigateurs ont du mal à reproduire. La première feuille sera lié par une balise <link> et la seconde utilisera l'instruction @import url() qui n'est pas reconnu par les vieux navigateurs

<link href="/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	<!--
	@import url("styles.css");
	-->
</style>

S'assurer des compatibilités

test_browser.htm

Pour illustrer cette fonctionalité, utilisez soit le fichier test_browser.htm soit créez un nouveau document HTML et saisissez deux phrases en balises paragraphes <p> et ayant chacune respectivement une classe (ou un attribut) ancien et moderne :

<p id="ancien">Ceci est un navigateur ancien</p>
<p id="moderne">Ceci est un navigateur moderne</p>

Ensuite utilisez ou créez deux feuilles de styles moderne.css et ancien.css qui seront inverses, la première affichant l'id (ou la classe) moderne et masquant l'id (ou la classe) ancien, et la seconde faisant l'inverse :

moderne.css

#moderne {
	display:block;
}
#ancien {
	display:none;
}

ancien.css

#ancien {
	display:block;
}
#moderne {
	display:none;
}

Au niveau de la liaison des styles, prenez soin de lier la première (l'ancienne) et d'importer la seconde (la moderne). Par contre dans cette démonstration, il est important que la feuille de style moderne.css soit importée après que la la feuille ancien.css ait été liée, sinon la seconde écraserait la première pour les navigateurs modernes.

Taille et unités entre Mac et PC

Gestion des plug in et validation du code

WAI et Accessibilité

L'accéssibilité est une des préoccupation principale de la bonne utilisation des standrads du web. Mais bien au delà de la simple prise en compte de la bonne lisibilité des pages web d'un site, il faut également penser à prendre en compte les documents pluri média que comporte le site. C'est à dire qu'il faut également prendre en considération l'ensemble des documents mis à disposition sous forme de téléchargement comme les documents PDF. Il faut également intégrer les animations, interactives ou pas, réalisés sous Flash.

Parrallèlement à l'aspect consultable du site, il faut inclure et englober dans la démarche d'accéssibilité la structure et les documents de réalisation du site. C'est à dire les code sources HTML ou xHTML, les feuilles de styles CSS, l'interaction JavaScript, etc... Code source et documents de réalisation devront être commentés et rendus accessibles pour tout les membres de l'équipe de réalisation actuels et à venir.

Le livre collectif, Web Accessibility paru chez Friendsof Ed, permet d'aborder l'ensemlble de ces points et bien plus encore. Pour l'instant Puce et Média n'a pas publié de tutorial sur le sujet, n'hésitez pas à nous faire savoir si vous souhaitez plus d'informations sur l'accéssibilité. Il existe également le site du W3C qui aborde la WAI (Web Accessibility Initiative) et la Section 508 du Federal Rehabilitation Act.

accesskey

Une implémentation de l'attribut acceskey est une manière de permettre aux utilisateurs d'utiliser autre chose que la souris, pour naviguer entre les pages, remplir des formulaires, ou activer d'autres mécanismes... seulement, la recommandation de cette fonctionalité n'a pas su s'imposer comme standard, ni faire la place par rapport à tout autre famille de raccourcis claviers ou combinaison de touche déjà active sur les navigateurs ou systèmes d'exploitation... sans réinventer l'eau chaude, il existe pas mal de papier sur le sujet... donc à vos mirettes :

En conclusion, il est important de prévoir une page du site, accéssible rapidement et facilement, qui reprend l'ensemble des accesskey et donne leur liaison. Un peu comme l'initiative du site Sanejouand. Analysez leur approche, en vous rendant sur la page d'accueil, et en désactivant les CSS, ou encore utilisez la même démarche sur le site de Spazowham Design Group.

outils de création

Dreamweaver prend en charge les lecteurs d'écran JAWS pour Windows de Freedom Scientific et Window-Eyes de GW Micro.

outils de validation

Le code est il correct...a t on pensé à tout ?

Une fois les pages du site développées il est important de s'assurer du bon respect des standards. Il existe diverses possibilités de contrôles. Si vous travaillez avec Dreamweaver, il existe deux outils de contrôle situés dans la fenêtre résultat Fenêtre > Résultats, il s'agit de l'outil Validation et de l'outil Vérification de la compatibilité avec les navigateurs.

Il existe également un grand nombre d'extension Firefox qui permettent de vérifier la validité des pages en cours de consultations, comme Page Validator, ou encore le menu Tools de la barre Web Developer.

Des sites de contrôles et validation de page HTML, CSS, etc...

Une fois les pages validées

Une fois vos pages valides et conformes au bon respect des standards, il existe une série de logo que vous pouvez aposer sur votre pied de page pour informer vos internautes du bon respect des standards.

Coté technique quelques adresses de bons plans...

Enfin durant votre travail de concepteur intégrateur web, vous allez rencontrer des situations et des contextes qui vont vous paraître sans issus. Il est toujours intéressant de faire partie d'une communauté de développeurs et pouvoir participer à des mutualisations de compétences sur des domaines aussi vaste que peut être l'utilisation et le respects des standards face à la multitude et à l'hétorgénéité des navigateurs et de leurs nombreuses versions si différentes les unes des autres.

Evolutivité des styles et optimisation de la structure

Bien souvent on concentre l'ensemble du code CSS au sein d'une page unique. Cela s'avère productif dans un premier temps à court terme, mais reste assez réducteur lorsqu'il s'agit de décliner ou de modifier les propositions d'identité visuelle. En clair si l'ensemble des sélecteur et des descriptions sont concentrées sur la même feuille de style, comment optimiser la productivité et la gestion de nos styles si par exemple une balise <h2> soit affichée en Arial corps 1.8 em de couleur bleu sur une page et en Arial corps 1.8 em de couleur verte sur une autre page. Ou si des tableaux doivent avoir un aspect sur la présentation de l'entreprise et une autre représentation dans la grille des tarifs. Ou encore, lorsque l'on prévoit une mise en forme à gauche et une autre à droite.

Doit on à chaque fois modifié l'ensemble de la feuille de style au risque de devoir modifier trop en profondeur et devoir à chaque fois corriger sur chaque déclinaison de style.... Pour cela il peut être intéressant d'envisager une stratégie sur la mnière d'imbriquer et utiliser les feuilles de styles elle même. Une solution consiste à créer plusieurs feuilles de styles prenant en charge chacune un secteur différent, comme la typographie, les tableaux, la mise en page dans l'espace, les couleurs, etc... seulement le hic c'est que chacune de nos pages alors vas devoir lier dans leur balise <head> autant de feuilles que nécessaires.... de ce fait il peut être intéressant de se baser une fois encore sur l'utilisation de l'instruction @import url(). Il est certain que cette stratégie pourrait ne pas avoir à s'appliquer aux navigateurs anciens.

Puce et Média