Le Web de demain, selon les réalités d'aujourd'hui.
Démontrer l'intérêt d'une méthodologie de conception basée sur des normes ouvertes et libres, comme celles proposées par le Consortium W3. Avantages concrets d'un tel virage, problématique de la situation actuelle en matière de développement Web et solutions pérennes pour évoluer vers la conception du vingt-et-unième siècle se voulant portable et interopérable.
- Zeldman : 99.9% des sites Web sont obsolètes.
- Avantages concrets du respect des standards Web.
- Structure, présentation et comportement : trinité des standards.
- Le couple technologique de l'heure, XHTML et CSS.
- Ressources de qualité pour une transition en douceur.
1. Zeldman : 99.9% des sites Web sont obsolètes
Mise en situation
"Designing with Web Standards" par Zeldman.- Analogie avec les automobilistes des années '80.
- Transition vers les standards doit être progressive.
- Il ne faut pas tenter de tout réussir du premier coup.
- Rejoindre un auditoire plus vaste, à moindre coût.
- Les normes ne sont pas un ensemble de règles rigides.
- C'est plutôt un continuum sur lequel le médium peut évoluer.
- Il y a autant de points de départ que de développeurs qui l'essaieront.
- L'important c'est de se conscientiser et de faire le saut.
Qui peut bénéficier des standards Web ?
- Développeurs, designers, propriétaires et gestionnaires.
- Les utilisateurs de sites Web, sans compter le Web lui-même.
- Quiconque souhaite produire un site à moindre coût, plus fonctionnel.
- Les différents agents utilisateurs existants, et les autres aussi.
- Une refonte n'a plus besoin de signifier une reconstruction complète.
- Il serait mieux d'investir nos budgets dans l'amélioration de nos sites.
- Et non dans la course au support du dernier navigateur en vogue.
- Les standards permettent de redonner au Web sa véritable vocation.
- Soit la mise en lumière du contenu, du message. Pas des technologies.
Le Web des années '90, un malaise frappe sans préférences
- Selon Zeldman, un malaise affecte l'ensemble des sites Web.
- Insidieux, parce que basé sur les "normes" de l'industrie.
- La presque totalité des sites Web sont condamnés à s'écrouler.
- Faux de croire qu'il y aura toujours des budgets pour réparer.
- Ne sont pas en mesure de réagir correctement dans les alternatives.
- Une déterioration inexcusable dans ces excellents navigateurs.
- La situation est pire encore dans les plateformes alternatives.
- Par exemple, les lecteurs d'écrans, les plages Braille et le sans-fil.
- Plus ces technologies évoluent, pire deviennent les sites.
Le jeu du chat et de la souris
- Ces sites sont achetés à fort prix, mais condamnés à l'obsolescence.
- La plupart d'entre eux n'ont jamais été conçus pour être portables.
- Faute de moyens, ces alternatives sont détectées par JavaScript.
- Servent une version appauvrie, quand ils n'en bloquent pas l'accès.
- Nous en avons tous été coupables à un moment ou un autre.
- Ces pratiques coûtent très cher en temps et en argent.
- Deux composantes faisant cruellement défaut aux projets.
- Les budgets n'ont pas à être consommés de la sorte. Il y a mieux.
La nature du problème
- Jetez un œil à la source d'un site. C'est un miracle s'il s'affiche bien.
- Certains n'utilisent pas encore CSS, une technologie datant de '96 !
- Trop grande permissivité permet d'afficher dans vieux navigateurs.
- On pourrait croire à tort que c'est une bonne chose.
- Supporter plusieurs versions de site signifie un code plus lourd.
- Plus dispendieux à maintenir, tout en étant moins performant.
- Plus le site attire de visiteurs, plus il fait perdre d'argent.
- La volonté d'offrir une produit rétro-compatible à tout prix.
- Se fait au détriment du bon sens, de la rentabilité et de la pérennité.
Un cas concret, Yahoo.com
- Prenons Yahoo, qui attire des millions de visiteurs quotidiennement.
- Chaque octet en trop = un surplus astronomique en bande passante.
- Remplacer ces
fontpar CSS diminuerait la charge sur leurs serveurs. - Cette simple action augmenterait directement leurs profits.
- Pourquoi alors ? Offrir une expérience pour *tous* les navigateurs ?
- Mais qui s'en soucie vraiment à part le Conseil de Yahoo lui-même ?
- Le succès du site repose sur ses fonctionnalités, pas son design !
- Placer la rétro-compatibilité devant la rentabilité est troublant.
- Une seule explication, ils ne paient pas leur hébergement à l'externe.
Que doit-on entendre vraiment par rétro-compatibilité ?
- Utiliser du code propriétaire pour assurer une expérience unique.
- Souhaitable en théorie. En pratique, trop coûteux et mensonger.
- La vraie rétro-compatibilité n'existe pas. Toujours un point de chute.
- Par exemple, les premiers navigateurs et les tableaux ou JavaScript.
- Ceux-ci ne peuvent pas avoir la même expérience que la majorité.
- Il y a toujours un niveau minimal de support de navigateurs.
- Passer ce niveau, plus aucun effort n'est fait. C'est normal.
- Pourquoi s'entêter à fournir une expérience unique ?
- Après tout, le Web ne se démarque t-il pas par sa flexibilité ?
Pire que la rétro-compatibilité, la vision réductrice
- Choix pire encore, ne développer que pour un seul navigateur.
- Guidé à raison par l'impression que la grande majorité utilise MSIE.
- C'est peut-être vrai pour le moment, mais le vent tourne lentement.
- % significatif d'internautes n'ont pas MSIE. 10% ? 15 % ? Demain ?
- En 2002, 540 millions de personnes utilisaient le Web régulièrement.
- Avec seulement 5 %, ça fait énormément de monde quand même.
- Qui est prêt à parier que MSIE préservera toujours son monopole ?
- Qui aurait cru en la baisse éventuelle de Netscape en 1997 ?
- Qu'on se le dise, la seule constance en Web, c'est le changement.
La nécéssité d'un changement
- À ce rythme, seules les corporations pourront se payer un site.
- Microsoft a gagné la guerre, nous avons perdu la promesse du Web.
- Quand ont a commencé à déjouer le système pour arriver à nos fins.
- Les nouveaux navigateurs font rupture avec cette permissivité.
- Imposent une rigueur du code. On peut enfin sauver les meubles.
- Il est possible de coder un site Web pleinement consultable partout.
- Suffit simplement de changer un peu nos vieilles habitudes.
- Les standards Web permettent enfin d'assainir le médium.
- Comment refuser cette opportunité d'être de meilleurs webmestres ?
2. Avantages concrets du respect des standards Web
Les principaux avantages induits d'un codage selon les normes
- Garantie de pérennité des documents pour des années à venir.
- Séparation nette entre présentation et contenu.
- Économie substantielle de la bande passante.
- Réduction des coûts de maintenance et d'exploitation.
- Portabilité et interopérabilité de l'information.
- Meilleure indexation dans les moteurs de recherche.
- Compatibilité ascendante et descendante.
- Niveau d'accessibilité de base appréciable.
Garantie de pérennité des documents pour des années à venir.
- Garantie que les documents survivront au passage du temps.
- Les documents demeureront interprétables par les agents futurs.
- Peut-on en dire autant des documents du paradigme actuel ?
- Permet de se détacher de l'éternelle angoisse de la mise à jour.
- Les normes sont basées sur un développement évolutif.
- Un gage de longévité et de promotion d'une vision à long terme.
- Enfin briser le cycle d'obsolescence des formats propriétaires.
- Préserver de précieuses informations pour les générations à venir.
- Garantir la conservation de notre histoire que l'on numérise.
Séparation nette entre présentation et contenu
- XHMTL et CSS permettent de vraiment sémantiser les documents.
- Rend au document sa nature structurelle, libère (X)HTML.
- L'aspect cosmétique est relégué au CSS, pour en conserver l'intégrité.
- Permet par le fait même de maintenir en parallèle design et structure.
- Le visuel d'un site Web devient comme un vêtement jetable.
- Le code devient plus signifiant pour les cibles non-traditionnelles.
- Permet à chaque technologie d'exploiter pleinement ses forces.
- Incite à enfin respecter la flexibilité du Web dans l'approche design.
Économie substantielle de la bande passante
- Nielsen dit qu'une page ne devait pas dépasser les 30 ou 40 octets.
- Peut presque rien pour les images, mais on peut assainir le code.
- Documents trop lourds, au grand dam des utilisateurs peu patients.
- Les sites Web actuels sont des blocs indissociables de code spaghetti.
- Cette séparation rend les documents jusqu'à 50% moins volumineux.
- Réduction du volume signifie un impact direct sur la bande passante.
- Peut se traduire par une économie de plusieurs millions de dollars.
- Exemple du site sportif ESPN, que nous verrons un peu plus loin.
Réduction des coûts de maintenance et d'exploitation
- Temps et ressources sont consacrés aux bogues inter-navigateurs.
- Ne plus coder pour un navigateur permet du coup de coder pour tous.
- Permet une élimination de la redondance dans le code des documents.
- Simplifie d'office le travail de maintenance des webmestres.
- Permet au développeur et au designer de travailler en parallèle.
- Contrôle qualité optimisé du travail fourni par les prestataires.
- Recours aux validateurs et à une méthodologie étendue.
- Garantit un travail mieux fait, plus rapidement.
- Le temps investi l'est sur le développement, pas le débogage.
Portabilité et interopérabilité de l'information
- L'époque d'un Web exclusivement sur ordinateur est révolu.
- L'accès sans-fil gagne en popularité mensuellement.
- Dans certains coins du monde, l'usage du Web par cellulaire prime.
- Pas qu'une poignée de navigateurs sur une plateforme unique.
- Qui a encore les moyens de coder plusieurs versions d'un même site ?
- Qui peut s'aliéner une partie importante de sa clientèle potentielle ?
- Rejoindre tout le monde, peu importe les outils ou la plateforme.
- Facilite grandement l'échange de données entre environnements.
Meilleure indexation dans les moteurs de recherche
- On raconte que Google est le plus grand utilisateur aveugle qui soit.
- Il est incapable d'interprétation intelligente ou de réel jugement.
- Garantit de meilleurs résultats d'indexation et une visibilité accrue.
- Les documents conformes sont indexés plus précisément.
- Possible grâce à leur structure informationnelle plus sémantique.
- Plus susceptibles de répondre aux attentes des engins de recherche.
- Favorise l'accessibilité et l'évaluation au moment de la classification.
- La qualité supérieure du code l'emporte sur les montants déboursés.
- Coder conforme, c'est s'assurer un retour sur investissement.
Compatibilité ascendante et descendante
- Un site s'affichant partout pareil demande un effort énorme.
- Pose également de sérieux problèmes conceptuels et techniques.
- Les anciens et les nouveaux navigateurs parlent un langage différent.
- Particulièrement vrai quand on fait co-habiter NS 4.x et MSIE 6.0.
- La nature inclusive des normes garanti une accomodation des besoins.
- Garantissent qu'un document sera correctement interprétable.
- Autant sur un vieux navigateur que sur un autre n'existant pas.
- Permet de faire un site utilisable dans MSIE 2 et NS 7.
Niveau d'accessibilité de base appréciable
- La validation des normes, garanti le respect des règles syntaxiques.
- Rend automatiquement possible un niveau d'accessiblité de base.
- Renforcement de principes comme l'intégration de
altpour toutimg. - Sans WCAG, les documents deviennent minimalement accessibles.
- Les principes d'accessibilité, ne concernent pas que les handicapés.
- Amènent une accessibilité de l'information par une structure logique.
- A pour visée d'étendre l'information à un maximum d'auditoires.
- A des retombées sur l'interface, favorisant ainsi un meilleur accès.
3. Structure, présentation et comportement : trinité des standards
La force des standards repose sur cette fracture
- Document type composé de structure, de présentation, d'algorithmie.
- On retrouve du JavaScript, du HTML, des CSS, des scripts serveurs...
- On ne peut nettement séparer ces composantes les unes des autres.
- Cause un niveau important d'inaccessibilité pour certains utilisateurs.
- Séparer ces trois composantes pour optimiser le rendement global.
- C'est ce que Zeldman appele la Trinité du développement Web.
- Chaque composante doit est utilisée pour remplir un rôle précis.
- De cette manière, le résultat du travail est nettement supérieur.
Structure du document Web
- L'aspect structure est pris en charge par le balisage, soit (x)HTML.
- HTML ou XHTML, ça n'a aucune importance. Pour tous les goûts.
- Représente des données organisées en sémantique structurelle :
- Paragraphes, entêtes, titres ordonnés, listes numérotées, etc.
- Une utilisation propre, sémantique et validée, garanti portabilité.
- Assure un affichage correct sous tous les agents utilisateurs.
- La couche cosmétique n'entrave plus le rendu de l'information.
- Le balisage concerne ce qui est physiquement intégré dans la page.
- Un site peut dès lors demeurer consultable sans le moindre visuel.
Présentation du document Web
- L'aspect présentation est pris en charge par une autre norme, CSS.
- "Contrôler" relativement disposition, typographie, couleurs, etc.
- Remplacer les éléments dépréciés au fil des ans, redorer (x)HTML.
- Réduire la quantité de code utilisé et obtenir un meilleur résultat.
- Le design devient alors comme un vêtement que l'on enfile sur un site.
- Permet également d'offrir simultanément plusieurs designs différents.
- Paramétrisation supérieure, laisser à l'utilisateur le soin de choisir.
- Les meilleurs exemples de ceci étant les "StyleSwitchers".
Comportement du document Web
- Le DHTML propriétaire fait déboder le vase à la fin des années '90.
- Pourtant, avec un peu de bonne volonté, ça aurait pu être autrement.
- Le DOM W3C permet de travailler avec CSS, XHTML, ECMAscript 262.
- DHTML peut être tout à fait interopérable lorsque bien utilisé.
- Potentiellement portable vers des plateformes évoluées (en théorie).
- Bien terminée donc, l'époque du DHTML propriétaire !
- Une vraie interactivité sophistiquée pour des effets multi-navigateurs.
- Promesse d'une plus grande percée fonctionnelle.
- Avec une fraction du code nécessaire à son bon déploiement.
- Tout est en place pour adopter cette nouvelle approche conceptuelle.
La trinité en action : les bénéfices pour un site Web
- Permettent de focusser sur les contenus, la véritable raison d'être.
- Un gabarit XHTML pourvoit la structure du site, un fichier CSS l'habille.
- ECMAscript / DOM permet d'ajouter au besoin de l'interactivité.
- Dans les navigateurs récents, peut offrir une interface évoluée.
- Possible de servir un second niveau de CSS adapté aux besoins.
- Prévoir une interface graphique pour l'écran et une pour l'impression.
- Mise en place de dispositifs d'interactivité excitants et non-intrusifs.
- Ne pas nuire à la consultation pour qui ne supporte pas JavaScript.
La trinité en action : les bénéfices pour un site Web, suite
- Les normes = mettre la technologie au service du message.
- Beaucoup plus de temps pour développer son image de marque.
- Moins de temps a consacrer aux redondances associées au code.
- Faire collaborer les technologies, tirer avantages des forces du Web.
- D'où mon leitmotiv, "Coder moins, coder mieux !"
- Mais quels sont ces standards dont on parle tant ?
- Principalement, ce sont XHTML, HTML, XML, CSS, DOM et ECMAscript.
ESPN, un success story comme on les aime
- ESPN est un des sites de sport les plus populaires sur le Web.
- Leur récente conversion aux standards du Web se traduit ainsi :
- Une réduction approximative de 50 octets par page.
- Environ 40,000,000 de pages consultées quotidiennement.
- Économie en bande passante sidérante:
- 2 terabytes / jour, 61 par mois, 730 par année.
- À 8$ le gigaoctet suplémentaire, ça fait 5,480,000$ par année.
- Sans compter les économies en maintenance et développement.
- Imaginez ce que cela pourrait représenter pour Yahoo.com...
4. Le couple technologique de l'heure, XHTML et CSS
XHTML, eXtensible HyperText Markup Language
- Reformulation de HTML en application (selon la syntaxe) XML.
- La plus récente norme en la matière, datant du 26 janvier 2000.
- Dernière révision au premier août 2002, donc très récente.
- Complètement compatible avec HTML 4.01 et moins.
- Produite par HTML Working Group, l'équipe de dévelopement W3C.
- Conçu afin de fonctionner avec les agents utilisateurs XML.
- Créer un pont, une forme de transition entre HTML et XML.
- Ouvre la porte au prochain niveau de Web, plus intelligent.
- Diffère du HTML par quelques petites règles syntaxiques très simples.
- Simplifié, pour faciliter le développement et l'interprétation.
Désavantages répertoriés de XHTML
- Aucun, sinon l'interprétation du media type par certains navigateurs.
- Courbe d'apprentissage, réapprendre une nouvelle saveur de HTML.
- Faire l'effort de changer ses habitudes de codage.
- Autrement, c'est tout. Je suis vraiment désolé.
Principales règles syntaxiques de XHTML
- Chaque balise nécessite une fermeture
- <h1>Lorem ipsum dolor sit amet</h1>
- Même celles qui n'en ont pas
- <br />
- Imbriquer correctement les éléments
- <p>Lorem ipsum dolor <strong>sit amet</strong> comen.</p>
- Utiliser des minuscules dans les balises et leurs attributs
- <textarea id="ValeurAttribut"></textarea>
- Chaque valeur d'attribut doit être entre guillemets
- <div id="monMenu"></div>
Principales règles syntaxiques de XHTML, suite
- Les formes abrégées d'attributs sont interdites
- <option value="page.html" selected="selected">...</option>
- L'attribut name est remplacé par l'attribut id
- <h2 name="titre" id="titre">...</h2>
- Gestion des caractères spéciaux avec CDATA
- <![CDATA[ ... ]]>
- Gestion des caractères spéciaux dans les URL
- <a href="index.php" title="Articles & Didacticiels">
- Doctype et élément de racine obligatoire, prologue facultatif
Pour en savoir plus sur XHTML
- Ressources W3C :
- Ressources en ligne :
CSS, Cascading Style Sheets
- Contrôle l'aspect présentation d'un document Web.
- Utilisé de quatre façons : inline, style, link ou @import.
- Permet de filtrer naturellement et constructivement les navigateurs
- Intérêt est de gérer à l'externe un nombre important de pages.
- Permet de modifier un site rapidement sans alterer les fichiers.
- Phénomène de cascades, d'héritance très important et très puissant.
- Langage de traitement de l'interface très simple et très intuitif.
- Redéfinit le notion même de design Web, relation à l'imprimé
- Rend au designer une certaine liberté de création, perdue avec HTML.
Support CSS dans les navigateurs d'aujourd'hui
- CSS-1, support généralement très respectable
- Couleurs et polices de caractères.
- CSS-2, support acceptable, mais inégal
- Feuilles de style médias, positionnement, polices téléchargeables, mise en page liquide, etc.
- CSS-3, non supporté, en développement
- Promesses de modularité, avancements significatifs en terme de contrôle de l'interface, etc.
Désavantages répertoriés de CSS
- Aucun, sinon l'interprétation du media type par certains navigateurs.
- Courbe d'apprentissage, réapprendre le concept de design Web.
- Faire l'effort de changer ses habitudes de codage.
- Autrement, c'est tout. Je suis vraiment désolé.
- Vous sentez la ligne directrice ?
Pour en savoir plus sur CSS
- Ressources W3C :
- Ressources en ligne :
5. Ressources de qualité pour une transition en douceur
Ressources de qualité pour une transition en douceur
- La transition doit être progressive, mais néanmoins structurée.
- Il existe une série de ressources pertinentes pour nous y aider.
- La très grande majorité sont mises à jour régulièrement.
- La blogosphère est particulièrement dynamique et ouverte.
- On y retrouve un support technique appréciable aux néophytes.
- Il existe également des sites à structure sociale plus organisée.
- Tous ces sites font une promotion active et éclairée des normes.
- De nombreuses listes de discussion sont également disponibles.
Quelques ressources Web en français
Collectif OpenWeb Group, 2003- Promotion des normes du Web dans la francophonie, avec production de contenus originaux dans la langue de Molière.
- Technologies, enjeux et problématiques reliées au Web conforme, adressées à plusieurs niveaux d'intervenants.
- Articles, didacticiels, vulgarisation, démystification.
- http://www.openweb.eu.org/
Quelques ressources Web en français
Collectif Pompage, 2001- Traduire en français certains articles importants des revues faisant autorité dans la communauté du design anglo-saxonne.
- Technologies, enjeux et problématiques reliées au design Web, couplée d'une liste de discussion pour en débattre.
- Articles.
- http://www.pompage.net/
Quelques ressources Web en français
Standblog, carnet Web de Tristan Nitot, 2002- Carnet sur la normalisation du Web, les actualités du logiciel libre, les plus récentes technologies du développement Web.
- Maintenu par Tristan Nitot, évangéliste, ancien de Netscape et contributeur Mozilla.
- Articles, billets, humeurs, actualités.
- http://www.standblog.com/
Quelques ressources Web en français
C², carnet Web de Denis Boudreau, 2002- Carnet Web sur la normalisation du Web, les actualités du design Web standardisé, de l'accessibilité, des plus récentes technologies en matière de développement Web.
- Maintenu par Denis Boudreau, évangéliste, fondateur de W3Québec et analyste fonctionnel pour CGI.
- Articles, billets, humeurs, actualités.
- http://www.cybercodeur.net/
Quelques ressources Web en français
W3C - Passer aux standards Web, 2003- Article de fond portant sur un modèle de transition pour amener son site à progressivement embrasser les normes Web.
- Rédigé par Karl Dubost pour le compte du W3C et traduit par Denis Boudreau.
- Article.
- http://www.w3.org/QA/2003/03/web-kit.html.fr
Quelques ressources Web en français
Pompage - Liste de discussion, 2001- Regroupement de développeurs Web dans une communauté visant à s'entraider les uns les autres et à partager les connaissances.
- Pour s'inscrire, il sufit d'envoyer un message à pompeurs-subscribe@yahoogroupes.fr
- Liste de discussion.
- http://fr.groups.yahoo.com/group/pompeurs/
Quelques ressources Web en français
W3Québec - Collectif de promotion des normes, 2003- Promotion de normes ouvertes et libres pour hausser la qualité de la production de l'industrie québécoise du multimédia.
- Accessibilité des contenus pour les personnes handicapées, les populations vieillissantes, les laissés-pour-compte technologiques, etc.
- Rencontres mensuelles, initiatives promotionnelles, conscientisation, sensibilisation, liste de discussion.
- http://w3qc.cybercodeur.net/ (temporaire)