HTML5 et CSS3, l’heure de la maturité.

Né en 1991, le language HTML n’a cessé depuis lors d’être en constante évolution. On peut le considérer comme l’élément le plus important du web moderne : sans lui, nos chères pages web auraient toujours le look d’un écran de minitel. Que de chemin parcouru depuis !
Sa dernière évolution, le HTML5, couplé a son indissociable compagnon CSS dans sa version 3, offre désormais la quasi totalité des possibilités dont on rêvait depuis 10 ans et apporte le saut qualitatif le plus important jamais réalisé depuis les débuts du web. Alors que la norme HTML5 ne sera officiellement entérinée comme standard qu’en 2014 par l’organisme de spécification W3C (!), tous les derniers navigateurs savent déjà l’interpréter de manière relativement  fiable, y compris sur les smartphones de dernière génération. Dans la mesure ou l’on conçoit généralement un site web comme un outil pour les années à venir, rares sont les bonnes raisons de faire l’impasse sur cette version majeure qui sera bénéfique pour votre site web.

Un peu d’histoire…

Pour comprendre les derniers apports du HTML5/CSS3, il peut être utile de connaitre l’histoire du HTML. Un aperçu rapide.

En France, la diffusion de l’Internet n’a commencé a se démocratiser réellement qu’a partir de 1997, lors de l’émergence des premiers fournisseurs d’accès grand public. A cette époque là, le langage HTML était déjà à sa version 3.0 et il n’a finalement évolué que très lentement depuis.

Le premier navigateur web : NCSA Mosaic

Aux commencement de l’Internet Français donc, il y avait le HTML 3 qui, en guise de grande nouveauté avait apporté les tableaux. Initialement destinés à présenter de vrais tableaux d’informations, ces éléments on rapidement été détournés par les développeurs comme premier vrai outil pour structurer la mise en page : ceux-ci permettaient enfin de maîtriser la largeur de la page, des blocs qui la composaient, et de positionner les éléments les uns par rapport aux autres.

L’usage des styles, les fameux CSS, est également présent pour personnaliser la taille et la couleur des caractères, mais les possibilités sont encore très limitées. La créations de pages en HTML 3 se traduisait alors par un code très complexe, très long, ou l’information était mélangée à une soupe de tags et de styles rendant le code très dense, difficile à lire et à maintenir. En outre, comme à l’époque chaque navigateur avait son interprétation très personnelle de la meilleur manière d’afficher le HTML, la création d’une mise en page qui s’affichait de manière identique sur tous les navigateurs était une équation difficile que beaucoup de développeurs ne parvenaient pas à résoudre.

Le HTML 3 se démarqua  des versions précédentes par la possibilité d’ajouter des objets externes, les fameux plugins : quicktime, Flash, les lecteurs VRML… Ceci a ouvert un pan immense d’applications multimédia dont les 3 éléments majeurs sont la 3D, les jeux et la vidéo ! Mais celà a aussi généré des problèmes de sécurité car les pirates ont rapidement comment tirer partie de ces plugins et de leur facheuse capacité à faire planter le navigateur web.

Dans la foulée, le HTML4 apporta quelques évolutions non négligeables comme les feuilles de styles externes permettant de mettre le code des styles dans un document séparé et d’alléger considérablement le HTML. L’emploi des calques matérialisés par les tags <div> et la nouvelle norme CSS2 permirent enfin de s’affranchir de la mise en oeuvre complexe des tableaux et de positionner les éléments dans les pages soit en leur donnant une position fixe, soit une position relative par rapport aux éléments qui les précédaient. Ainsi, si la taille de l’élément précédent augmentait, l’élément relatif se repositionnait enfin automatiquement sans que le programmeur n’aie a intervenir pour modifier le code de la mise en page. Le code tend alors à se simplifier, devenir plus lisible et plus facilement maintenable, mais il reste encore beaucoup de tags dans les pages.

La norme XHTML arrive ensuite avec l’objectif de compenser ces défauts : le nombre de tags dans les pages doit être le plus réduit possible et le code de mise en page doit être séparé à 100% dans la feuille de style CSS externe. Ceci résulte en un code très minimaliste. Celui-ci est enfin facile à lire pour les programmeurs, les moteurs de recherche et les logiciels de synthèse vocale destinés aux personnes handicapées. On peut beaucoup plus facilement retrouver le contenu texte de la page au milieu de la « soupe » des tags. Les pages sont plus légères, plus rapides à charger, et sont interprétées plus rapidement par les navigateurs web. L’expérience est donc significativement améliorée pour les développeurs, mais aussi les utilisateurs qui voient leurs pages plus efficaces et réactives. Le XHTML est l’état actuel de l’art au moment de l’arrivée du HTML5.

Quoi de neuf au pays du HTML ?

Les applications Google sont très riches et réactives. Elles sont abondamment basées sur le HTML5. Ici le service Google+.

Pour la première fois, le HTML5 n’est plus juste une norme : c’est une collections de fonctionnalités, technologies et librairies de programmation qui tendent à rapprocher les pages web de la puissance et la versatilité multimédia qu’offre le bureau d’un ordinateur personnel.

Le HTML5 inclus la cinquième révision de la norme, les feuilles de styles CSS3 et un jeu de librairies de programmation javascript. Cet ensemble apporte un nouveau jeu de fonctionnalités permettant un affichage graphique haute performance, la réalisation de calculs rapides, le travail hors ligne, le stockage d’une quantité importante de données sur le poste client, une prise en compte du sens des éléments de la page et un niveau supérieur d’interactivité et de possibilités de collaboration entre utilisateurs. Petit tour des grandes nouveautés.

 

  La sémantique

Jusqu’ici les éléments de codes présents dans les pages des sites Internet ne portaient pas de sens particuliers : ils étaient tous vus comme des blocs ou du texte. Le HTML5 introduit un nouveau jeu de tags qui va permettre aux applications, et notamment aux moteurs de recherche de comprendre le sens du bloc ou du texte. On pourra ainsi désigner tel élément comme un « article », tel autre comme une « navigation » ou une « barre latérale », tel bloc comme une « image légendée ». Ce nouveau jeu de tags va permettre à terme une meilleure pertinence pour les algorithmes des moteurs de recherche et pour les lecteurs d’écrans utilisé par le public handicapé. Des applications innovantes sont également susceptibles d’être inventées sur la base de ces nouvelles informations teintées de sens.

 

  Le multimédia et l’affichage graphique

L’apport le plus majeur du HTML5 est sans conteste le nouvel objet <canvas>. Celui-ci permet de définir une zone dans laquelle le programmeur pourra dessiner ce qu’il souhaite, ce qui était impossible jusqu’alors en HTML pur. Et ceci ouvre  un champ d’application extrêmement important car on pourra désormais dessiner dans ce canevas des vidéos, des dessins vectoriels et de la 3D temps réel tirant partie des fonctions d’accélération matérielles de la carte graphique de l’utilisateur. Ceci n’est pas nouveau dites-vous ? Il y a en vérité une véritable révolution, c’est que tout ceci est disponible en standard dans les navigateurs et qu’il n’est plus nécessaire d’installer une solution propriétaire comme Flash ou Quicktime. En outre les performances surpassent désormais ce qui se faisait jusqu’alors et ces fonctionnalités sont aussi disponibles sur les périphériques mobiles tels que les smartphones. Grace au HTML5, votre navigateur dispose enfin de la capacité technique d’afficher des jeux vidéos de qualité, de publier des vidéos plein écran qui marchent aussi bien sur PC que sur mobile, de visualiser des cartes de navigation en 3 dimensions.

Quelques applications concrètes :

Une librairie virtuelle dans votre navigateur (cliquez pour voir la démo)

Une visualisation des grands couloirs aériens (cliquez pour voir la démo)

 

  La performance

Qu’il s’agisse d’Internet explorer 9, de Chrome, de Firefox, d’Opera 10, tous les grands navigateurs sont désormais dotés d’un moteur javascript jusqu’à 10x plus rapide que par le passé. Alors que le javascript était jusqu’ici un langage de seconde catégorie, il devient maintenant un moteur puissant pour faire tourner des applications dans votre navigateur. Ce gain de performances ouvre notamment la porte aux calculs temps réel dont sont friands les jeux vidéos.

Quelques applications concrètes :

Le jeu "Gravity Cave" réalise de nombreux calculs physique en temps réel au sein du navigateur (cliquez pour jouer).

Une simulation 3D de fluide avec calcul temps réel des réflexions et des rayons caustiques (cliquez pour voir la démo)

 

  Le travail hors ligne et le stockage

Un des grands désavantages des applications HTML par rapport aux programmes natifs qui s’exécutent sur votre ordinateur, c’est le temps de latence lié à la transmission des données, et à la transmission de l’affichage de la page. Alors que votre ordinateur accède aux informations sur son disque dur en quelques millisecondes, votre navigateur échangeait jusqu’ici des informations avec le serveur dans un temps de l’ordre de plusieurs secondes. Il en résultait une pauvre expérience utilisateur, quelle que soit la puissance de son ordinateur. Le HTML5 permet désormais de stocker des informations sur l’ordinateur de l’utilisateur, et ses nouvelles performances lui permettent également de gérer beaucoup plus facilement l’affichage de la page, une tache qu’on reléguait jusqu’ici bien souvent au serveur en raison de la piètre capacité des navigateurs à s’en acquitter. Aussi une application web moderne n’aura-t-elle plus qu’a transmettre au serveur les seules données utiles au dialogue. Il en résultera des temps de latence très faibles, un affichage très réactif, et au final une expérience utilisateur significativement améliorée. C’est sur ce modèle d’ailleurs que fonctionnent la plupart des Google Apps, dont la fluidité et la facilité d’emploi est bien souvent surprenante pour de grosses applications web.

 

L’accès aux périphériques

Avec en premier lieu la nouvelle librairie de géolocalisation qui permet d’exploiter la position GPS de l’utilisateur, les applications web peuvent désormais présenter des expériences riches et basées sur les capacités du périphérique. De nouvelles possibilités sont ouvertes comme l’enregistrement audio/vidéo à partir du micro ou de la caméra, ou la détection de la modification de l’assiette du périphérique grâce à la consultation de son accéléromètre.

 

Une connectivité améliorée

Jusqu’ici la communication entre le navigateur et le serveur se faisait de manière segmentée. Désormais l’apport des web sockets en HTML5 permet d’ouvrir des canaux de communication continus et en temps réel avec une réactivité très forte. Ceci ouvre de nouvelles perspectives comme la possibilité de communiquer de créer des jeux et mondes multi-utilisateurs ou l’on voit les autres membre se déplacer en direct, des clavardages plus réactifs et plus généralement une meilleure communication.

 

Quelques exemples de boutons dynamiques avec typographie et animation en CSS3 (cliquez pour expérimenter)

Les styles CSS3

Le nouveau format de feuilles de style donne un contrôle beaucoup plus fin et poussé sur la typographie, permettant de créer enfin des présentations de texte riches et sophistiquées avec la gestion automatique des colonnes (qu’on attendait depuis 10 ans !). La gestion de halos et des ombres permet de créer des effets sur les éléments en un clin d’oeuil alors qu’il fallait auparavant employer des mosaïques d’images complexes à mettre en oeuvre et lourdes à afficher sur le navigateur de l’utilisateur.

Enfin les textes peuvent désormais êtres animés et positionnés en 3D ce qui ouvre un nouveau panel de possibilités pour la réalisation de boutons originaux.

Ainsi on le voit, le HTML5 est un véritable outil d’avenir. Il offre un grand nombre de possibilités nouvelles qu’on ne trouve pas dans le XHTML. Vous n’aurez à première vue sans doutes pas l’usage d’un bon nombre de ces fonctionnalités. Mais si vous ne réalisez pas votre nouveau site en HTML5, vous pourriez regretter de ne pas pouvoir en tirer partie dans le futur. Or, a fonctionnalités équivalentes, réaliser un site en HTML5 ne coûte pas plus cher que réaliser un site en XHTML. Alors pourquoi s’en priver ?

  1. Bravo pour ce tour d’horizon complet sur le HTML5 & CSS3 !
    Cordialement
    Thierry

Comments are now closed for this article.