FredCavazza.net

Voilà 20 ans que le web existe et presque 10 ans que le HTML n’a pas évolué et propose toujours la même structure et les mêmes balises. 10 ans c’est beaucoup, c’est la moitié de la “vie” du web. 10 ans c’est beaucoup, surtout lorsque l’on constate les révolutions qui ont eu lieu dans les usages du web ces 5 dernières années (partage de vidéos, réseaux sociaux, infos en temps réel…). Pas étonnant que des technologies propriétaires (Flash) se soient imposées (notamment sur la vidéo et les RIA) et que d’autres s’installent tranquillement pour combler un manque (notamment Google Gears pour l’accès hors ligne).

Bref, il était temps que le marché se réveille et c’est (presque) chose faite avec l’arrivée à maturation de HTML 5 et CSS 3. Pour faire simple, disons que nous avons franchi le point de bascule et que la route qui mène à une adoption de ces nouveaux standards n’est plus si longue. Pourquoi est-ce important de se soucier de ça ? Tout simplement parce que ces nouvelles spécifications vont changer beaucoup de choses dans la façon de concevoir et d’exploiter les interfaces web, des changements qui vont fortement impacter les différents métiers de la profession.

Autant vous prévenir tout de suite : les explications qui vont suivre sont une tentative de l’auteur de résumer et vulgariser un foutoir pas possible (qui provoquent d’innombrables querelles d’experts depuis des années : HTML 5 is a mess. Now what?) sans pour autant prendre partie car de toute façon les choses semblent visiblement s’améliorer. Je ne donne que mon interprétation, vous êtes libre de proposer la votre.

Commençons donc par nous intéresser à cette nouvelle version de HTML et pourquoi s’est-elle imposée face à XHTML (pour une explication plus détaillée c’est ici : XHTML 2 vs. HTML 5, et là : Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip).

HTML vs. XHTML

Au commencement il y avait donc le HTML 4 dont les spécifications ont été publiées en 1997. Une légère évolution a été publiée en 1999 avec le HTML 4.01. Puis le W3C a décidé de miser sur le langage XML (plus sophistiqué et surtout extensible) en proposant une reformulation du HTML avec les balises du XML, à savoir le XHTML 1.0. Tout l’intérêt de cette reformulation est de pouvoir marier la simplicité du HTML avec la puissance du XML (et ses nombreuses possibilités d’évolution).

Sur cette lancée, le W3C a alors lancé le chantier XHTML 2 pour faire une réécriture complète des spécifications et poser de nouvelles bases pour un langage plus puissant, plus robuste, plus évolutif… bref, un langage qui propulserait le web dans une autre dimension sans toutefois assurer de rétro-compatibilité. Hé oui… car il faut bien faire table rase pour pouvoir redémarrer sur des bases saines. Et c’est bien là le problème : ne pas assurer la rétro-compatibilité était inacceptable pour l’industrie (et notamment les éditeurs de navigateurs) qui ont alors décidé de lancer des travaux indépendant sous l’aile du WHATWG (Web Hypertext Application Technology Working Group). Ce groupe de travail a commencé à travailler sur les spécifications des Web Applications.

Après un bras de fer de plusieurs années (et un constat d’échec pour l’équipe de travail sur les spécifications XHTML 2), le W3C a fini par réintroduire les spécifications du WHATWG et de créer un groupe de travail officiel sur le HTML 5 tout en abandonnant l’autre chantier (RIP XHTML 2).

Par élimination il ne reste donc plus qu’un seul prétendant au titre de remplaçant du HTML 4, d’autant plus qu’il a reçu le soutien de qui vous savez (Google Bets Big on HTML 5). Nous sommes donc semble-t-il arriver à un consensus de l’industrie sur des spécifications qui ne sont pas aussi ambitieuses que celles d’XHTML 2 mais qui ont l’énorme mérite de faire avancer les choses (souvenez vous qu’il n’y a pas eu d’évolution en 12 ans).

Qu’est-ce qui va changer avec HTML 5 ?

Pour faire simple disons qu’avec HTML 5 nous allons quitter l’ère du web des documents pour enter dans celle du web des applications. L’ambition de cette nouvelle itération est donc de supprimer les balises obsolètes, d’en remplacer certaines et d’en introduire de nouvelles afin de donner une structure sémantique plus cohérente aux pages web.

De nouvelles API vont ainsi standardiser un certain nombre d’interactions :

• L’accès hors ligne et le stockage sur le disque dur (pour une exploitation en mode déconnecté) ;
• L’édition en ligne, le drag&drop ;
• L’accès à l’historique de navigation…

Bref, tout ce qui nécessitait le recours à javascript ou à des technologies propriétaires sera désormais “livré d’origine”.

La grosse nouveauté est donc de proposer un nouveau schéma de structuration des données qui va venir remplacer les éléments en bloc et en ligne (cf. HTML5 se dévoile) :

Le "content model" de HTML 5

Les spécifications manquent de précisions pour se faire une idée de ce nouveau schéma, d’autant plus que de nouvelles balises structurantes comme <template> et <datatemplate> ont été introduites.

Gros changement également avec un jeu de nouvelles balises permettant de mieux définir le contenu : <header>, <nav>, <article>, <aside> et <footer> :

Les nouvelles balises de structuration du contenu de HTML5

C’est donc une petite révolution puisque ces nouvelles balises vont permettre une structuration beaucoup plus propre des pages, surtout pour les sites avec beaucoup de contenus (blogs, portails…). Plus d’infos ici : HTML5 and The Future of the Web.

Notons enfin l’apparition de balises très intéressantes comme <audio> et <video> pour les éléments multimédias, <canvas> pour les dessins vectoriels ou encore <datagrid> pour les tableaux de données. Ces nouvelles balises permettront de réduire la dépendance à des technologies propriétaires comme Flash. Juste un dernier mot sur les formulaires qui vont avoir de nouveau types de champs <input> comme date, time, number, range, email, url, search, color…

Je pense qu’il n’est pas faux de dire qu’avec HTML 5 la séparation entre contenu, structure et présentation sera encore plus facilement gérable.

Quelles nouvelles possibilités pour CSS 3 ?

Précisions que du côté des feuilles de styles, les travaux autour des nouvelles spécifications CSS 3 sont beaucoup moins perturbés. Cela permet donc d’avancer plus vite. Quoi que… j’ai dans mes archives des articles sur le sujet datant de 2004 et 2005 : Des formulaires standardisés, CSS 3 : des templates pour structurer vos pages web et Formulaires : quand les CSS 3 vous changent la vie.

L’essentiel des travaux autour des CSS 3 a été de standardiser des propriétés pour réaliser des traitements graphiques qui nécessitaient auparavant des astuces :

• Border-radius pour les coins arrondis ;
• Text-shadow pour les ombres portées ;
• Transparency et Opacity pour la transparance ;
• Animation et Transition pour les animations (cf. Nicer Navigation with CSS Transitions, à regarder avec les dernières versions de Safari ou Chrome)…

Bref, il y a beaucoup de nouveautés à découvrir ici : 7 New Essential CSS 3 Techniques Revealed. Tout l’intérêt étant de pouvoir se passer d’images ou d’astuces pour pouvoir réaliser ce que l’on souhaite. Illustration avec ces jolis boutons :

De jolis boutons sans image avec CSS 3

Encore plus intéressant, toutes les propriétés concernant la mise en page et le positionnement : Presentation Levels, Template Layout, Multi-column Layout, Grid Positioning et Flexible Box Layout.

Le changement va être aussi spectaculaire que radical : là où il fallait tout un tas de <div> imbriqués, d’images, de tableaux… pour arriver à la mise en page et au traitement graphique souhaité (donc en alourdissant le code source), nous aurons bientôt une syntaxe bien plus lisible grâce à ces nouvelles propriétés.

Quels bénéfices et pour quand ?

Je vous propose de récapituler ce que nous venons de voir : un contenu mieux structuré et défini, une syntaxe allégée, des traitements graphiques standardisés… tout ceci va permettre d’avoir un code source beaucoup plus propre. Ceci est particulièrement important dans la mesure où les pages ne sont plus faites à la main pour des utilisateurs humains, mais générées par des systèmes de gestion de contenu et exploitées à la fois par des humains et des agents intelligents (via les balises descriptives ou microformats).

C’est donc une authentique révolution à laquelle nous allons assister… dans quelques années ! Hé oui, car même si les spécifications sont là, leur implémentation est fonction du bon vouloir des éditeurs de navigateurs et du taux de renouvellement par les utilisateurs.

Aujourd’hui le marché est encore dominé par un IE qui risque d’aggraver encore son retard avec ces nouvelles spécifications. Vient ensuite Firefox qui évolue vite (grâce à une communauté très active) mais qui est tout de même fortement ralenti par l’inertie des utilisateurs (surtout lorsque les parts de marché dépassent les 30 %).

Il est certain que les choses sont beaucoup plus simples pour Safari, Opera ou encore Chrome qui peuvent avancer à leur rythme (lire à ce sujet : Opera 10, Chrome 4, Firefox 4 : Vers des plateformes sociales et applicatives).

Donc au final, l’impact ne se fera pas ressentir avant quelques années. Sauf si un éditeur trouve le moyen de faire avancer les choses au forcing (au hasard Google avec son futur Wave qui tournera bien mieux sur Chrome).

Google Wave, une application en ligne taillée pour HTML 5 et Chrome

Par contre, une fois que le parc de navigateurs aura été renouvelé, j’anticipe un gros changement au niveau de l’industrie du web avec une montée en puissance de profils comme les architectes front office (l’équivalent des DBA ou des architectes systèmes) chargés de concevoir des interfaces web cohérentes et surtout performantes (notamment dans la gestion des styles).

De même, j’anticipe une véritable révolution pour les outils de prototypage rapide dont l’intérêt était limité du fait du format de sortie (du HTML de base que ne pouvaient pas exploiter les équipes de production) et qui vont fortement bénéficier de cette épuration du code source et de la séparation structure / contenu /présentation.

Bref, j’ai l’impression de me répéter, le web a de très beaux jours devant lui avec ces nouvelles spécifications qui vont tranquillement nous amener vers des contenus mieux structurés (sémantisés) et des applications en ligne plus performantes et simples à créer / maintenir.

C’est en substance ce que nous enseigne cette intervention de Matthieu Faure : Henry Ford, le web et l’accessibilité. Il y est question de la chaîne de production d’un site web (qui est schématiquement découpée en deux “lignes” : la création des gabarits de pages et la création des contenus), du rôle centrale de l’outil de gestion de contenu dans l’intégration de ces deux lignes et de l’intérêt de prendre en compte les critères d’accessibilités à toutes les étapes de cette chaîne de production.

Il est en effet beaucoup plus complexe de rendre accessible un site quasi-finalisé que de le “penser” accessible à l’origine. Il existe ainsi un très grand nombre de raisons de repousser à plus tard le “chantier accessibilité” : trop de contraintes, manque de temps, manque d’argent, manque de ressources, des priorités plus urgentes… Grave erreur, puisque le coût d’intégration des contraintes d’accessibilité en tout début de projet (et tout au long du processus) est quasi-négligeable. Par contre, la complexité (et donc le coût) grandit avec le temps : plus vous attendez et plus cela sera complexe de “corriger le tir”.

Mais j’espère ne rien vous apprendre… sinon je vous recommande vivement la lecture du billet précité (et même du blog en entier).

La nouvelle vient de tomber , et elle a de quoi surprendre : Adobe vient de livrer à la fondation Mozilla le code source de sa machine virtuelle ActionScript (voir le communiqué de presse ici : Adobe and Mozilla Foundation to Open Source Flash Player Scripting Engine).

Quand on y regarde de plus près, et surtout entre les lignes, on se demande si Adobe ne serait pas en train d’abandonner la maintenance de son Flash Player au profit d’une dynamique open source.

Plusieurs facteurs sont à l’origine de cette décision :

• La stratégie d’Adobe n’est pas le même que celle de feu Macromedia, comprenez par là que la gamme de produits d’Adobe est bien plus large et que ses centres de revenus (les vaches à laits) ne sont pas forcément liés à Flash ;
• Les équipes d’Adobe ont bien du mal à assurer la maintenance du Flash Player (rappelons qu’il n’existe toujours pas d’adaptation de la version 9 pour linux) ;
• Le marché des interfaces riches est en pleine croissance et l’offre d’Adobe (Flash / Flex) doit faire face à la concurrence d’autres approches technologiques comme Ajax, OpenLaszlo, Java Web Start, .Net , XUL… ;
• Adobe concentre sa R&D sur Apollo, son logiciel hybride capable de lire du Flash, du PDF et du HTML.

Toujours est-il qu’Adobe vient probablement de montrer le premier signe d’une stratégie de retrait. La suite logique serait de livrer le code source du Flash Player, tout comme l’a déjà fait Netscape à l’époque avec son navigateur.

Si l’on rapproche cette stratégie de celle faite par IBM (de baser son environnement de développement Java sur Eclipse), la question que je me pose est la suivante : Quelle va être la capacité de la communauté des développeurs à absorber cette charge de travail ? Car il faut bien appeler un chat un chat : Adobe n’est pas une organisation philanthropique et son seul souhait est de faire supporter une partie des frais de R&D et de maintenance à la communauté du libre.

Quand on y réfléchi, ça commence à faire beaucoup de boulot tout ça : Firefox, Thundberbird, PHP, MySQL, Java, Eclipse… J’en oublie certainement une grande partie, mais il ne faut pas oublier que les bénévoles ne sont pas non plus de pigeons. Pour vivre, une communauté à besoin d’une dynamique, de leaders, d’animateurs… et tout le monde n’a pas un Tristan Nitot dans sa manche !

Bref tout ça pour dire que je suis très content pour la fondation Mozilla. C’est un très bon choix de la part de MacromediaAdobe que de “confier” son bébé à une organisation qui a fait ses preuves et qui dispose déjà de l’infrastructure nécessaire.

Dans cette histoire, le seul perdant pourrait être le format SVG soutenu par le W3C. Cependant, au vu des dernières évolutions du format Flash (qui en est à sa 9ème itération), on est en droit de se demander si l’animation vectorielle est encore au cœur de ce dernier… C’est sûr que comparé à Flash 9, SVG c’est comme un playmobil dans Prison Break (hé hé hé, elle n’était pas facile à placer celle là !).

Et vous, feriez-vous confiance à la fondation Mozilla pour reprendre le travail sur le Flash Player ?

MAJ (08/11/2006) : Les explications complètes sur le blog de Tristan Nitot : Adobe et Mozilla s’allient pour lancer le projet Tamarin. Heu… pourquoi avoir choisi ce nom de Tamarin ?

Aujourd’hui est un grand jour, non pas parce que IE 7 vient de sortir en version définitive, mais plutôt parce qu’après 3 Release Candidate, Firefox 2 est également sur le point de sortir.

Pourquoi est-ce si important ? Pour plusieurs raisons :

1. ces deux nouvelles moutures intègrent de façon native l’abonnement et la gestion des flux RSS, ce qui va faire sortir de l’ombre la syndication et la faire connaitre aux yeux du grand public) ;
2. les moteurs de rendu ont évolué, ce qui veut dire une meilleur prise en charge des CSS ;
3. deux modèles d’organisation (la multi-nationale privée et la fondation) nous ont démontré leur réactivité et leur puissance de feu (l’une fondée sur la capitalisation et des milliers de salariés, l’autre basée sur la passion et des millions de bénévoles).

Bref tout ça pour dire que je serai bien allé à la soirée de lancement de Firefox 2 la semaine prochaine, mais visiblement je ne suis pas le seul comme le précise ce billet de Tristan. Comme je suis convaincu du bienfondé des standards web et un inconditionnel de Firefox, je suis prêt à laisser ma place à cette soirée. Je préfère en effet utiliser Firefox au quotidien et faire bénéficier de cet évènement quelqu’un d’autre (même si cette soirée aurait été une bonne occasion de revoir des gens que j’apprécie).

Le W3C vient d’initier une démarche de normalisation pour l’accessibilité des interfaces riches : Roadmap for Accessible Rich Internet Applications, et c’est un très bonne nouvelle.

Le W3C avait déjà initié différents chantiers autour d’AJAX et des interfaces riches (voir à ce sujet mes précédents billets : AJAX en voie d’être légitimé par le W3C ? et Le W3C et les interfaces riches) sans toutefois intégrer de contraintes relatives à l’accessibilité.

Le document est assez long et indigeste à lire, mais il est question des XForms et de XHTML 2.

Et si vous souhaitez approfondir le sujet, je vous recommande également cet article sur la rédaction d’une charte ergonomique pour les applications en ligne : A Framework for Web Application User Interface Design Guidelines.

J’ai déjà eu l’occasion de louer les mérites de Yahoo! et surtout de son équipe de concepteurs qui non seulement fait du très bon travail mais en plus partage le tout avec la communauté des développeurs.

Leur dernière publication en date concerne un ensemble de menus de navigation : Yahoo! UI Library: Menu.

Ces menus sont à priori accessibles (respect des critères d’accessibilité et des normes W3C, navigation au clavier, conformité au DOM…) mais cela mériterait un peu avis d’expert (Aurélien ? Matthieu ?).

Demain est un grand jour, c’est la première journée annuelle des naturistes du web : First Annual Naked Day.

Rassurez-vous, il est bien ici question de standards web et de qualité du code. Le principe est le suivant : demain (5 avril), les webmasteurs de la planète sont invités à désactiver leurs feuilles de styles CSS pour afficher une version brute de leur site (uniquement le HTML). L’objectif est de faire prendre conscience aux internautes de l’importance de la sémantique du balisage.

En gros, si vous utilisez une sémantique propre qui respecte les normes du W3C, alors votre site restera parfaitement consultable même sans feuille de styles. Par contre, si vous utilisez une sémantique exotique avec des balises détournées de leur fonction première et tout un tas d’astuces CSS alors vote site sera fortement pénalisé (la grosse honte !).

C’est en quelque sorte une journée porte ouverte où les visiteurs pourront juger de la qualité du code.

Bon, vous voilà prévenu : demain je désactive ma feuille de style. (via Gou Blog)

Ca y est, la course est lancée entre les previews et autres beta pour savoir qui de IE 7 ou Opera 9 sortira le premier. Je vous propose un petit comparatif pour savoir ce que ces deux previews ont dans le ventre.

Je précise que je ne me risquerais pas à évaluer la performance des moteurs de rendu CSS de ces deux navigateurs. Premièrement parce que ce sont des previews et deuxièmement parce que d’autres sont bien mieux placés que moi pour le faire. Intéressons-nous donc plutôt aux différentes améliorations du côté de l’interface.

Une interface novatrice pour IE 7

Le développement d’IE 7 est toujours en cours mais l’équipe de développement nous gratifie régulièrement de preview de la future version du navigateur de Microsoft. Dernière en date la Beta 2 Preview. Pour cette nouvelle preview, IE 7 nous propose un système d’onglets très convainquant.

Nous sommes ici dans un mode de fonctionnement très proche de ce que peut proposer Firefox. Une chose amusante : IE 7 reprend à l’identique l’ensemble des raccourcis clavier de Firefox (Ctrl+T pour un nouvel onglet, Ctrl+W pour le supprimer, Ctrl+clic pour ouvrir un lien dans un onglet, Ctrl+Tab pour basculer à un autre onglet…).

Il existe également une fonction permettant d’afficher toutes les pages web sous forme de mosaïque (un peu à l’image d’Exposé de Mac OS) :

La prise en charge des flux RSS est également simplifié avec un petit son qui est joué lors de la détection d’un flux ainsi que l’affichage simultanée d’une cartouche d’explications sur ce que sont les flux RSS et comment s’inscrire de même qu’un menu de navigation et de tri dans les catégories identifiées sur le flux :

On notera ensuite la disparition du menu traditionnel au profit de boutons qui déroulent un certain nombre d’options. L’utilisateur peut s’il le souhaite afficher de nouveau le menu mais c’est quand même agréable de n’occuper que 2 lignes.

Enfin, cette preview apporte un certain nombre d’autres nouveautés :

• un système de filtre anti-phishing ;
• un moteur de recherche intégré ;
• une fonction de zoom de page…

Du BitTorrent dans Opera 9

C’est hier qu’est sorti la technology preview 2 d’Opera 9. Toujours du très bon pour cette neuvième version :

• un système d’onglets également très au point ;
• toujours pas de publicité ;
• une interface très claire…

Au niveau des nouveautés nous allons trouver l’affichage de miniatures au survol de la souris sur les onglets :

Encore plus intéressant, la possibilité d’ajouter des widgets (à l’image de Konfabulator ou des Microsoft Gadgets) qui viennent s’afficher en surimpression de la fenêtre :

Mais la plus grosse nouveauté d’Opera 9 est sans conteste la prise en charge des fichiers BitTorrent :

Il y a fort à parier que cette fonctionnalité va beaucoup faire parler d’elle (à moins que l’extension AllPeers pour Firefox vienne également jouer les trouble-fête).

Conclusion

Nous sommes ici face à deux approches complètement différentes :

• d’un côté IE 7 qui n’hésite pas à puiser le meilleur des autres navigateurs en calquant par dessus une interface simplifiée et qui ose l’innovation (saluons-le) ;
• d’un autre côté Opera 9 qui enrichi son navigateur et le dote de fonctionnalités très alléchantes pour les utilisateur avancés.

Je me garderais bien de vous conseiller l’un ou l’autre, surtout dans la mesure où il existe d’autres navigateurs qui ont fait leurs preuves et qui bénéficient du soutien des utilisateurs (Firefox pour les utilisateurs de Windows et Safari pour les utilisateurs d’Apple). Et vous, c’est quoi vote retour d’expérience ?

Oui je sais, ça peut sembler un peu bateau, il n’empèche que l’agence anglaise Scratchmedia vient de publier une nouvelle version de son site Web Design from Scratch.

Ce guide est en fait un condensé de bonnes paroles autour des différents thèmes de la conception d’un site web : graphisme, architecture, accessibilité, utilisabilité, code HTML… Non seulement les conseils prodigués sont de très bonnes factures mais en plus c’est très bien rédigé et la mise en page est parfaite.

A mettre d’urgence dans vos favoris.

Que faites-vous les 2 et 3 février prochain ?

Si vous n’avez rien de prévu et que vous passez par Limoges alors ne ratez surtout pas le Webdesign International Festival. Comme l’édition 2006 est placée sous le signe des dernières tendances et des innovations technologiques, seront abordés des thèmes aussi variés que l’accessibilité, les standards web (XHTML, CSS…), l’utilisabilité, Flash…

Au programme de cette manifestation :

1. Le Webjam Contest où des équipes de designeurs vont s’affronter en live pour réaliser des interfaces web à partir d’un thème imposé ;
2. Les Butterfly Awards où seront récompensés les meilleurs réalisations et créateurs web de l’année ;
3. L’Université du Webdesign qui, comme son nom ne l’indique pas, est une série de conférences sur le thème du design et de la conception web.

Limoges accueillera pour cette occasion de très grand noms du web design comme Joshua Davis ou encore Molly Holzschlag ; mais également des personnalités françaises comme Tristan Nitot, Loïc Le Meur, Amélie Boucher et même notre Elie Sloïm national.

J’ai également la chance de participer à cette manifestation et animerais deux conférences sur l’ergonomie incitative et sur les interfaces riches.

Si vous souhaitez vous inscrire ou avoir plus d’informations, je vous recommande le programme officiel : WIF 2006 (fichier PDF, 1.700 Ko).