Navigateurs indulgents : cap danger !

Par J. David Eisenberg

Mes excuses au professeur Edsger W. Dijkstra pour la paraphrase du titre de sa célèbre lettre.

Les navigateurs actuels (NdT : début 2001) sont très indulgents : ils corrigent ou dissimulent sans mot dire de nombreuses erreurs HTML courantes. Cela permet aux gens de connaître facilement la joie de créer leurs propres pages Web avec un minimum de frustration. Si une page s'affiche correctement, c'est qu'elle est "bonne".

Malheureusement, en dissimulant le besoin de structure qu'exigera le Web lorsqu'il embrassera le XHTML et le XML, ces navigateurs indulgents ont favorisé l'émergence d'un monde d'illettrés du HTML structuré. Tant que les navigateurs continueront à lire et à afficher du HTML qui est mal formé ou non valide, nous n'apprendrons jamais les bonnes méthodes, et nous n'aurons jamais un Web structuré.

Enseigner la nouvelle génération à la nouvelle génération

J'ai récemment été invité à intervenir dans les cours de graphisme et de PAO du lycée de Santa Teresa à San José en Californie. [Note : ce lien mène à un site avec des cadres. Voici un lien direct vers la page sur la PAO.]

C'est un plaisir de faire cours dans leur superbe labo informatique muni de deux salles comptant trente iMacs chacune. Sur quatre jours, j'enseigne les bases du HTML. Le premier et le troisième jour je présente la théorie, que les élèves mettent en pratique le deuxième et le quatrième jour. Il va sans dire que faire tenir un minimum de bases du HTML dans un cours de cinquante minutes est un défi, mais c'est très amusant. Certains des élèves de la classe connaissent déjà un peu le HTML, je peux donc leur demander d'aider les autres.

Cette année, j'ai décidé de prendre de l'avance et d'enseigner le XHTML — c'est-à-dire le HTML conforme aux règles du XML — et c'est l'occasion de raconter une petite histoire.

Les mécanismes du XHTML.

Le mardi, mon premier jour de cours, j'ai appris à la classe la signification du sigle HTML (un élève avait entendu que cela voulait dire "Comment faire l'amour" [NdT : How To Make Love] et il a été terriblement déçu quand je lui ai révélé la vérité). Je leur ai dit que nous allions annoter nos documents à l'aide de commandes à l'intérieur des signes < et > au lieu d'utiliser un stylo rouge comme le font les professeurs sur les copies des étudiants.

J'ai commencé par les éléments de base : <html>, <head>, <title> et <body>. Je leur ai fait écrire plusieurs lignes de texte dans le corps d'une page et l'afficher dans le navigateur pour leur montrer que le texte est converti en une seule ligne. Ensuite, j'ai introduit des balises qui donneraient meilleure allure à leur texte.

J'en avais juste fini avec les balises <b> et <i> (les élèves tapent les balises avec moi, ce n'est pas simplement un cours magistral), et je me préparais à me lancer dans mon explication habituelle de <font> lorsqu'un grand néon "A EVITER" s'est allumé dans ma tête. Je me suis arrêté, figé, réalisant que mon train de pensée bien huilé venait de dérailler. Je devais trouver un moyen de présenter les feuilles de style dans le contexte des balises qu'ils avaient apprises, et je savais que j'en étais incapable sur le moment. [J'ai résolu le problème plus tard. Voici comment j'ai fait.] J'ai donc dit :

Changement de programme, les jeunes. J'allais vous donner plus d'explications sur la manière de rendre votre texte vraiment joli, mais je viens de m'apercevoir qu'il s'agit de la vieille méthode. Je vous donnerai tous les détails jeudi. Pour le moment, je vais vous montrer comment empêcher le navigateur de réduire votre texte à une seule longue ligne.

Je suis ainsi retombé sur mes pieds, ma dignité presque intacte, en parlant de <p> et <br />. A la fin du cours, j'avais aussi couvert l'attribut bgcolor de l'élément <body> (il est aussi à éviter, mais je ne me suis pas repris à temps), <ul>, et assez de <img> pour leur donner une bonne base. Dans la foulée, j'ai insisté sur l'imbrication correcte des éléments les uns dans les autres et sur la "nouvelle manière" d'écrire les éléments vides comme <hr /> et <img />.

Le cours s'était bien passé, et les élèves étaient enthousiasmés à l'idée d'utiliser ce qu'ils avaient appris. Le mercredi, j'ai donné le même cours à l'autre groupe de trente élèves, pendant que le premier groupe travaillait sur des pages Web dédiées à tout sujet qu'ils jugeaient intéressant. Et puis...

La réalité m'a rattrapé

Le jeudi, j'ai jeté un premier coup d'œil aux efforts du groupe du mardi. Je n'avais pas beaucoup traité de la mise en page et du design, et j'ai donc vu plusieurs exemples :

Nielsenien avoué [NdT : Jakob Nielsen est un gourou de l'ergonomie des sites Web], j'étais consterné, mais je ne pouvais pas dire grand chose. Ces pages étaient après tout des pages personnelles ; j'ai donc gardé mes opinions pour moi et je me suis concentré sur leur contenu. La plupart des garçons avaient des pages sur le sport, les voitures, ou des groupes de rock aux noms aussi fascinants que "Slipknot". La plupart des filles avaient des pages sur leur famille ou leur petit ami. Il y a un article de sociologie à écrire là-dessus.

Mais tout ça n'était rien à côté du HTML lui-même. Je me suis retrouvé avec trente ou quarante pages de code du genre :

<html>

<head><title>Ma Première Page</title>

<h2>Tout sur les Voitures</h3>

<body bgcolor=red>

<p>

J'<b>aime beaucoup les voitures.</p>

</b>

<body>

Les nouvelles Ford c'est de la bombe. 

Voici celle que je veux. <img src=ford.jpg>

Tout en répondant aux questions des élèves qui voulaient savoir comment obtenir certains effets particuliers, je leur indiquais en passant qu'il serait préférable d'avoir des balises correctement imbriquées et des guillemets autour des attributs. Ils réagirent en m'adressant un regard perplexe. Après tout, quand ils chargeaient la page dans Netscape 4 ou Internet Explorer 5, tout avait l'air très bien.

J'avais atteint un de mes objectifs principaux : faire pénétrer les gens dans les coulisses d'une page Web. Quelques élèves avaient suffisamment apprécié leur nouveau sentiment de contrôle pour songer à abandonner leur éditeur WYSIWYG favori ; les autres avaient au moins gagné un petit aperçu de choses qu'ils ne connaissaient pas avant. Mon autre objectif, enseigner le HTML bien construit pour garantir la compatibilité avec les technologies futures, avait lui été...

Saboté par le navigateur

L'indulgence des navigateurs actuels avait eu raison de mes efforts pour enseigner la nouvelle génération de HTML à la nouvelle génération de créateurs. Pour aller de l'avant, nous avons besoin d'un navigateur implacable qui adhère strictement aux règles du XHTML. Faisons un petit détour philosophique et examinons ceci plus en détail.

L'effet du Pendu

Les navigateurs indulgents fonctionnent de la même façon que le jeu du "Pendu". Dans ce jeu, vous devinez des lettres pour en déduire un mot secret. Chaque mauvaise lettre ajoute une partie du corps au dessin d'une personne. Si vous épuisez vos chances, la personne est pendue. Si vous devinez le mot, vous recevez un message de félicitations.

Bref, que vous vous trompiez ou non, vous obtenez une sorte de bénéfice visuel. Certaines versions du jeu accompagnent même la pendaison d'un grand spectacle son et lumière, qui vous récompense de vos erreurs !

Les navigateurs indulgents fonctionnent de la même manière : vous êtes récompensé même si votre HTML ne suit pas les règles. Mais alors que le Pendu récompense les mauvaises réponses différemment des bonnes réponses, les navigateurs indulgents récompensent le balisage correct et incorrect exactement de la même manière : en le comprenant. Il faut vraiment être dans l'erreur jusqu'au cou pour ne pas être récompensé.

Levez les Drapeaux

Certaines versions du Pendu ont été faites correctement ; la première bonne version que j'ai jamais vue a été créée par le Children's Television Workshop. Elle s'appelait "Levez les Drapeaux". Quand on devinait correctement une lettre, un des personnages de la Rue Sésame levait un drapeau avec cette lettre. Quand on devinait correctement le mot, tous les drapeaux commençaient à s'agiter, et on entendait de la musique. Les mauvaises réponses ne procuraient aucune récompense. Pas de drapeau, pas de son, pas d'animation.

(Une autre version correcte du Pendu, plus connue, a été créée par Merv Griffin. Le jeu s'appelle "La Roue de la Fortune", et il récompense également les gens pour avoir fait les choses correctement.)

Pour éduquer les créateurs sur les bienfaits d'une structure correcte, et pour paver la voie à un Web bien construit, les navigateurs devraient se comporter comme "Levez les Drapeaux" ou "La Roue de la Fortune" : récompenser les gens pour avoir créé du HTML valide et bien construit, et ne rien afficher du tout lorsqu'on leur donne des pages invalides.

Le moment d'être strict

La solution ultime à ce problème est un navigateur qui nécessite du XHTML à la fois bien construit et valide. Un tel navigateur serait plus frustrant pour les débutants, mais ce n'est pas un obstacle insurmontable. Mes élèves étaient frustrés quand ils s'embrouillaient dans les signes < et > ou les guillemets ouverts et fermés, mais ils se sont rendus compte que les assortir correctement faisait partie du jeu, et ils s'y sont adaptés rapidement parce qu'ils n'étaient pas récompensés pour leurs erreurs ; leurs pages ne fonctionnaient pas tant qu'ils ne suivaient pas les règles.

Insister sur du XHTML strict aurait-il ralenti le processus d'apprentissage ? Oui, absolument, étant donné que nous utilisions SimpleText comme éditeur. L'accès à un monde de XHTML structuré serait grandement facilité par ce que j'appelle un "éditeur qui reconnaît les balises".

Un éditeur qui reconnaît les balises

Les éditeurs HTML actuels entourent le texte avec <b> et </b> lorsque vous cliquez sur l'icône B ou utilisent la saisie automatique pour vous donner un </p> lorsque vous tapez le <p> initial. Mais une fois ces balises insérées, elles perdent leur identité de balise. Si vous effacez le <p>, le </p> demeure, et vice versa.

Un éditeur qui reconnaît les balises pratiquerait aussi la saisie automatique et l'insertion par icônes, mais il se souviendrait que ce sont des balises. Si on remplaçait le <b> initial par <i>, la balise de fin changerait aussi. Si on effaçait le <p> initial, la balise de fin disparaîtrait également. De même, un attribut inséré dans une balise en choisissant depuis un menu déroulant continuerait à être reconnu en tant qu'unité plutôt qu'en tant que groupe anonyme de caractères. En plus, un éditeur qui reconnaît les balises serait capable de valider les documents, à la demande ou à la volée.

Un tel éditeur servirait à tous, de l'amateur talentueux au professionnel du Web. Il devrait être abordable (ou open source), multiplateforme, et peu gourmand en ressources. Son niveau de sophistication serait à peine plus élevé que celui de Notepad ou SimpleText. Même à ce niveau, cependant, il y a un groupe de créateurs pour qui cette approche serait trop décourageante :

Tante Alice et cousin Franck

Ne vous méprenez pas ; un navigateur strict qui impose aux développeurs Web de connaître et d'utiliser la structure XHTML place la barre assez haut pour l'accès au monde de la création de pages. Que devient, dans ce cas, la page Web de votre tante Alice sur les problèmes du troisième âge ? Comment votre cousin Franck, qui sait à peine comment allumer son ordinateur, pourra-t-il créer son temple en ligne voué aux éditions limitées de canettes de bière ?

Le problème des pages Web déjà existantes doit être considéré : il y a des centaines de milliers de pages mal écrites en liberté qui, livrées à elles-mêmes, seraient vouées à une mort horrible entre les mains d'un navigateur implacable. Mais mal écrites ne veut pas dire sans utilité ; beaucoup de ces pages ont un contenu précieux et devraient continuer à être utilisables. Ces pages ont probablement été écrites de l'une de ces trois manières :

  1. en utilisant un éditeur WYSIWYG comme DreamWeaver ou GoLive ;
  2. en complétant des modèles de pages comme ceux fournis par GeoCities ; ou
  3. à la main, le créateur apprenant juste assez de balises HTML pour s'en sortir.

La solution dans les deux premiers cas est simple : une mise à jour du logiciel visuel créerait du XHTML correct, et le FAI hébergeant des modèles de pages les filtrerait en utilisant un outil comme HTML Tidy pour les nettoyer, puis mettrait le modèle à jour afin qu'il crée du XHTML correct pour toutes les pages à venir.

La troisième solution (pour les pages créées à la main) nécessite des connaissances de la part de l'utilisateur, et pourrait grandement bénéficier de programmes de formation populaires et de services de conversion de pages payants.

En ce qui concerne le cousin Franck, qui est sur le point de créer sa première page Web, je suggère un logiciel complet qui incluerait des modèles comme ceux que vous trouvez sur Earthlink, etc. Une interface Web n'est pas toujours le meilleur choix, et la création de pages Web est une tâche bien plus aisée dans un programme local rapide et réactif qu'en se servant d'une connexion à 28.8K. Le programme que je propose, c'est un CD qui contiendrait le programme, des tonnes d'images et de modèles, et un client FTP intégré pour télécharger les pages terminées. Il ne serait pas aussi sophistiqué que DreamWeaver, GoLive ou FrontPage ; ce serait juste une "peinture par numéros" pour débutants.

Aller de l'avant

L'évolution du Web passe obligatoirement par la structure du XHTML et du XML. A mon avis, il est grandement temps d'encourager les rédacteurs à développer de bonnes habitudes en combinant l'effet de navigateurs sévères et d'éditeurs de texte "conscients" des balises pour les concepteurs professionnels et aguerris, et en mettant à la disposition des débutants des outils de publication modernisés.


http://alistapart.com/articles/forgiving/

Fiche technique

À propos de l'auteur

J. David Eisenberg est programmeur, enseignant et auteur. Il vit à San Jose en Californie, avec son chat Tabitha.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

Web design

© 2001-2024 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site