Centrer Jonathan

Traduction en cours - Un article de Mark Newhouse - Seul le lien original fait office de référence

Le Web est une plate-forme. Pour publier, pour interagir, pour puiser de l'information, pour le loisir, pour le commerce, pour s'amuser. Quel que soit le format pris par cette plate-forme que nous appelons le Web, il est étayé par des normes, les 3 pieds du tabouret. Et c'est cet entre-croisement qui préserve ses pieds de l'effondrement ou de l'envol de chacune d'elles.

(ndt : For publishing, for interaction, for information mining, for entertainment, for commerce, for fun. Whatever form it takes this platform we call the Web is underpinned with standards, the 3 legs of the stool. And those cross-supports that keep the legs from collapsing and flying away from each other.)

Ici nous jetterons un coup d'oeil à chaque pied, la raison de leur importance et quelques ressources pour vous aider à appliquer ces normes à votre conception web que ce soit pour une conception personnelle ou pour votre job.

XHTML, le premier pied

Afin de faire fonctionner un site vous devez démarrer avec un document bien structuré. XHTML fournit cette structure. Et la bonne nouvelle à propos du XHTML est qu'il peut être lu et compris par les navigateurs même ceux qui précèdent NN4.

Qu'est-ce que le XHTML ?

XHTML est une reformulation du HTML en XML. Il est beaucoup plus structuré et moins tolérant face au code invalide. En fait, si vous écrivez du XHTML valide, les navigateurs assumeront que vous savez ce que vous êtes en train de faire et rendront les choses selon leur plus stricte compréhension des standards.

Ce n'est pas aussi épouvantable qu'il ne peut le paraître. Et depuis que c'est vraiment du HTML au coeur, il n'est pas si difficile de s'adapter. Plutôt que de réchauffer les sites d'aide qui sont déjà sortis ici, je vous pointerai vers eux et vous laisserai découvrir simplement comment cela est vraiment facile.

Jeffrey Zeldman a écrit un excellent article chez A List Apart qui vous présentera comment convertir vos documents HTML (ou workflow) en XHTML. A noter également chez A List Apart, Carrie Bickner vous montre comment produire du code valide XHTML avec Dreamweaver 4. Cela vaut la peine d'y jeter un oeil même si vous utilisez Dreamweaver MX. Et pour obtenir un bon aperçu de comment le XHTML rentre dans un guide de site stylé (ndt : fits into a site's style guide), regardez New York Public Library’s Style Guide section on XHTML.

Strict vs. "Equivoque" (ndt quirks)

J'y faisais allusion plus haut, le moyen utilisé pour coder la page Web provoquera de la part des navigateurs les plus récents une interprétation vers un des deux (ou trois) modes. Si le navigateur contient un Doctype dûment qualifié, alors les navigateurs utiliseront le mode Strict ou Standards, suivant les recommandations du W3C jusqu'à la limite de leurs possibilités. Si tel n'était pas le cas, selon le navigateur, il se peut qu'il entre en mode "Equivoque". Chaque navigateur a créé son propre jeu de règles pour invoquer ces modes (et ce qu'elles signifient) et cela affectera l'interprétation de votre feuille de style que vous aviez soigneusement conçue à la main...

Feuilles de Styles en Cascades (CSS), le deuxième pied

Les "geeks" les plus durs sur la norme vont raconteront que si vos codez votre page, vous ne devriez pas vous soucier de savoir comment le XHTML est posé et stylé dans le navigateur ; une structure logique est plus importante et la feuille de style prendra soin de rendre cet ensemble harmonieux. Cela s'appelle la séparation du contenu/structure du style. Et c'est habituellement interprété pour signifier que vous ne devriez pas utiliser les tableaux pour votre mise en page.

Les "geeks" les plus durs sur la norme utilisent aussi la dernière version construite la nuit de Mozilla (ou toute autre variante fondée sur gecko) qui sait manipuler toutes les CSS requises pour mettre en page la page sans tableaux. Ou ils ne soucient pas vraiment de savoir comment la page s'affiche de toutes les façons.

Vous n'êtes probablement pas un "geek" très dur sur la norme. Même si vous l'êtes, votre patron ou votre client a peu de chance de l'être, n'est-ce pas ? En fait vous avez (eu) un brief créatif exigeant de votre site de produire le même affichage dans Netscape 4, la dernière version de Mozilla et Internet Explorer pour Windows. Vous pourriez vouloir utiliser un tableau basique pour la mise en page afin de respecter cette contrainte.

Et vous pouvez. Malgré tout ce que les geeks les plus durs sur les standards pourraient raconter, vous pouvez utiliser un tableau pour la mise en page et créer néanmoins un code valide XHTML. Mais si vous étiez plutôt contre, il existe quantité de sites ici et là pour vous  aider à utiliser uniquement les CSS pour votre mise en page. Certaines d'entre elles fonctionneront même dans Netscape 4.

CSS et NN4

Mon blogue (carnet Web) est mon terrain de jeu. Il ne fonctionne pas bien dans Opera, ou IE6 pour Windows. Il tourne plutôt bien avec IE5 Mac et les navigateurs fondés sur Gecko comme Netscape 7, Mozilla et Chimera qui font le meilleur boulot. Mais je ne me soucie pas de savoir si le contenu est accessible à tous, même ceux qui utilisent les version 4.x de Netscape.

Par contre, au travail je me dois d'approvisionner les utilisateurs de Netscape 4. Et la majorité d'entre eux l'utilisent sur une boîte Unix. Ainsi, je dispose d'un paquet de trucs que j'ai développés et aiguisés pour ces utilisateurs. Beaucoup de trucs que je partage sur Real World Style. Mais il y a des trucs que Netscape 4 ne sait tout bonnement pas gérer. Comme mon carnet Web, par exemple. Heureusement il existe des moyens de cacher la CSS pour les navigateurs comme Netscape et d'autres navigateurs.

Cacher la CSS aux navigateurs

Johannes Koch a placé une grande ressource pour  cacher la CSS aux navigateurs. Kevin Smith a aussi collationné un nombre de Filtres CSS, comme ils les appellent, qui vous permettent de cacher les CSS à problèmes pour certains navigateurs spécifiques.

Netscape 4

Maintenant que vous savez dissimuler une CSS pour NN4, vous devrez savoir quelles CSS cacher. Plus facile peut-être est de mettre en page ce qui fonctionne avec NN4. Bob Sawyer a gentiment esquissé la CSS que NN4 sait gérer. Essayer autre chose avec ces navigateurs antiques s'avère risqué. 

Et les autres navigateurs ?

Vous pourriez être aussi intéressé à jeter un oeil sur deux tableaux de compatibilité de navigateurs avec les CSS. L'un signé de  WestCiv et l'autre  de Web Review. Ces tableaux sont vraiment utiles pour décider du niveau de support à fournir aux différents navigateurs.

Les tableaux ci-dessus couvrent très bien CSS1. CSS2 est un tout autre monde. Une telle quantité d'interactions opérant désormais entre les règles de CSS rend  difficile la création de tableaux purs et harmonieux. Ainsi Big John s'y est attelé et a créé un cercle de bogues CSS - un groupe informel et organisé de concepteurs qui documentent et démontrent une diversité de bogues. Ces sites sont un bel endroit pour vérifier que vous rencontrez des comportements étranges dans un navigateur donné. Et Owen Briggs présente le  Guide de Panique CSS — quand vous ne savez plus quoi faire...

Comme vous commencez à vous sentir plus à l'aise à l'idée du XHTML pour la structure et de CSS pour le style, vous pourriez lire ce billet sur le carnet Web de Tantek Çelik, auteur de "IE5 the Tasman" rendant le moteur utilisé dans la version Mac de Internet Explorer (version 5.x). Ce billet vous montre comment lier ensemble CSS et (X)HTML (ndt : "in a meaningful and richly semantic way"). Regardez aussi Environmental Style sur Real World Style pour en savoir plus sur le sujet...

Accessibilité, le troisième pied

Nombre d'entre vous qui lisez ici seront probablement surpris à l'idée que je puisse appeler Accessibilité le troisième pied, après le XHTML et la CSS. Vous aviez probablement autre chose à l'esprit, mais j'y reviendrai plus tard.

Pas simplement une bonne idée

L'accessibilité est maintenant la loi pour un grand nombre de sites. La justice est en train de déterminer exactement comment la loi affectera les sites Web d'intérêt public, mais il est heureusement certain que si vous deviez être obligé d'avoir une accessibilité pour les chaises mobiles, votre présence internet doit être accessible tout aussi bien.

C'est une bonne chose. Si votre site est plus accessible à ces handicapés, il est vraiment plus accessible à n'importe qui. Et la vérité est que produire un site plus accessible n'est pas si difficile à travailler à l'intérieur de votre flux de conception en cours. La clé est de le bâtir d'emblée plutôt que d'essayer de faire une réadaptation plus tard.

Mais comment ?

Bonne nouvelles—il existe des ressources qui pourront vous aider. accessify.com de Ian Lloyd produit des tableaux sur l'accessibilité dans les journaux et offre d'excellents outils pour vous aider à créer des tableaux accessibles, des formulaires et bien plus encore.

Dive Into Accessibility de Mark Pilgrim est à la base un tutoriel qui court sur 30 jours pour créer un carnet Web plus accessible. Maintenant que c'est son propre domaine, c'est le tutoriel le plus compréhensible et pratique que je connaisse sur le Web.

WebAIM est plein de ressources pour le concepteur Web qui veut faire droit dans l'accessiblité. Et il y a ensuite Bobby et WAVE, des validateurs d'accessibilité qui vous aideront à trouver les problèmes potentiels pendant que vous créez vos sites.

Plus

Et ne manquez pas l' entretien Slashdot avec Joe Clark. Joe a écrit  un livre applaudi par la critique à ce propos et le présente sous forme de feuilletons sur le Web, ajoutant un chapitre par mois. Nous devrions voir apparaître le chapitre 2 en janvier...

Le DOM, pour maintenir l'ensemble 

Nombre d'entre vous pensaient probablement que ce devrait être le troisième pied du tabouret. Et il y a de bons arguments pour cela. Je préfère considérer le DOM comme la pièce transversale entre les pieds qui préserve l'atomisation de ces pieds (ndt : keep them from flying out away) et l'effondrement du tabouret.

Le Document Object Model

Plus qu'une esquisse de votre page, le DOM est un Modèle du Document utilisé pour créer la page Web. Chaque élément, ou Objet de votre page est modelé, typiquement dans un arbre qui examine les relations entre ces objets. Il identifie ces relations en termes d'ascendance, lien de parenté et "siblings" (ndt ???).
Vous pouvez avoir un sens de cela dans Mozilla en utilisant la fonctionnalité dans le DOM inspector.

C'est beaucoup plus puissant qu'une simple esquisse, comme chaque élément peut être décrit, identifié et manipulé. Le DOM travaille avec du XHTML correctement structuré et des règles valides de CSS pour produire la page. Mais vous pouvez aussi utiliser le script pour manipuler n'importe quel élément sur la page, la modifier, y ajouter ou y retirer du contenu et/ou un style, tant que l'ensemble reste valide.

Qu'en est-il de l'accessibilité ?

Le DOM permet à un programme de trouver rapidement tous les liens dans une page, ou tous les en-têtes de niveau 1. Il peut extraire toutes les listes ou même les listes classées. Il peut construire une simple esquisse de la page. A la limite de ma connaissance les outils existants d'accessibilité, comme les lecteurs d'écran, ne tirent pas profit du DOM pour utiliser ces genres d'information, mais ils le pourraient.

The DOM allows a program to quickly find all the links in a page, or all the level 1 headings. It can extract all the lists, or even all the ordered lists. It can build a simple outline of the page. As far as I know current accessibility tools, such as screen readers, do not take advantage of the DOM to get these types of information, but they could.

Beaucoup de sites font apparaître des sélecteurs de feuille de style basés sur le DOM qui vous permettent de choisir une largeur de style répondant à vos besoins en tant qu'utilisateur. Certains de ces sélecteurs permettent de changer complètement différents styles pour les appliquer sur un site et d'autres offrent simplement la possibilité de modifier la taille de la fonte.

Ainsi, vous voyez que le DOM n'est vraiment pas un pied de soutien, mais qu'il lie ensemble toutes les autres technologies.

De la bouche du cheval

J'ai décidé de patienter jusqu'à la fin de l'article pour pointer les pages du W3C sur chacun de ces sujets, comme ils peuvent être un peu "arcane" (ndt : ???) . Je n'ai pas encore complètement à l'esprit de placer le DOM au dessus de tout ce que j'ai écrit ici. Ainsi j'offre les liens suivants pour tous ceux qui voudraient les obtenir de la part des gens qui créent les spécifications :

Validez !

Je ne peux louer suffisamment l'importance des pages proprement codées et des feuilles de style, et tant que nous y sommes, correctement executées avec des crochets d'accessiblité (accessiblity hooks). Ainsi je me permets de pointer une fois de plus les validateurs :

I can’t emphasize enough the importance of properly marked up pages and style sheets, and while we’re at it, correctly implemented accessibility hooks. So I might as well link to the validators again:

• (X)HTML Validateur
• CSS Validateur
• Bobby, validateur d'accessibilité
• WAVE, validateur d'accessibilité

Listes de Diffusion

Souvent mieux que le livres, les listes de diffusion sont des trésors insoupçonnables quand vous vous retrouvez confronté à une tâche difficile. Voici les meilleures que j'ai trouvées à propos du XHTML, CSS et Accessibilité.

En général

Webdesign-L est une liste experte avec un fort trafic couvrant tous les aspects de la conception web. A n'importe quel moment il peut surgir des fils de discussion sur des sujets aussi divers que la "programmation back end" (PHP, asp, perl, java, and others), CSS et les caprices des specifications XHTML 2.0, pour ne pas mentionner une à trois requêtes de vérication de site(s). Si le sujet vous passionne, il est probable que vous soyez membre. Si vous ne pensez pouvoir gérer la réception de plus de 30 à 70 courriers électroniques par jour, optez pour le résumé...

Arbitres de Style

CSS-discuss a juste trouvé un nouvel emplacement, mais n'a pas ralenti pour autant. C'est une autre liste à forte fréquentation, mais dévouée entièrement aux usages des CSS. Modérée ni plus ni moins qu'Eric Meyer, c'est un outil très intéressant pour quiconque déciderait de sauter dans le grand bain appelé  conception libre sans tableau. A nouveau, optez pour le résumé si vous n'êtes pas habitué à recevoir 30 à 70 courriers électroniques dans votre boîte chaque jour...

Garder l'accessibilité en tête

Un groupe amical de gens qui traitent de l'accessibilité à un rythme quotidien, et qui veulent partager ce qu'ils savent. Le Web Accessibility Forum n'est pas aussi prolifique que les deux autres mentionnés, mais il n'en est pas moins utile...

Merci d'avoir lu

Je sais là qu'il y a beaucoup de mots ici ; si vous êtes descendu tout en bas, je vous en remercie. Et j'espère que vous avez été récompensé de vos efforts en trouvant quelque chose à l'intérieur de tous ces mots. Un lien, un peu d'encouragement pour faire les choses proprement ou même une nouvelle ressource ou deux.