johanBleuzen

A chaque début d'année des petits malins s'amuse à faire des prédictions sur l'année à venir. Parmi les sujets revenants fréquemment, on annonce que le HTML5/CSS3, deux sujets qui n'ont rien à voir l'un avec l'autre mais qui sont souvent considérés comme un ensemble, à tort. On annonce que l'année 2011 sera celle du HTML5, une nouvelle évolution du web, je suis d'accord et voilà pourquoi...

Parce que le nombre de navigateurs compatibles ne cesse d'augmenter

Les navigateurs ne cessent d'être mis à jour et les capacités techniques ou fonctionnelles n'ont jamais évoluées aussi vite. Certes tous les navigateurs ne gèrent pas le HTML5 et le CSS3 aujourd'hui mais divers facteurs laissent penser que ce chiffre risque de diminuer vite en 2011, comme le montre cette capture sur les statiques des navigateurs 2010 :

En effet, aujourd'hui à part Internet Explorer jusqu'à la version 8, tous les autres navigateurs et ceux qui sortiront par le future seront compatibles HTML5. Mine de rien aujourd'hui, cela représente au moins 40% des navigateurs. L'autre bonne nouvelle de ces perspectives, c'est que Windows XP et Vista représentaient au moins 75% des systèmes d'exploitation Windows dans la nature, mais qu'ils sont dans la fin de leur cycle de vie. En utilisant les stats de 2010, je me suis amusé à projeter les courbes jusqu'au mois de juin 2010.

En théorie, je dis bien en théorie, Windows Seven devrait représenter environ 35 pourcents des machines Windows qui seront compatibles avec IE9 et donc HTML5, donc en extrapolant environ 35% des navigateurs IE seront compatibles... Ce qui est une bonne nouvelles vu que tous les autres navigateurs interprètent correctement HTML5. En conclusion, le parc des navigateur supporteront le HTML5 ne cessera d'augmenter...

Parce qu'ils apportent de nombreuses nouveautés

Le HTML5 apporte de nombreuses nouvelles fonctionnalités à la fois pour les développeurs et les utilisateurs finaux. La nouveauté la plus connue sont surement les nouvelles balises qui améliore la sémantique des pages HTML :

Mais ce n'est pas la seule nouveauté, le support des fichiers multimédia (audio et vidéo), l'amélioration des formulaires avec la validation avant soumission et de nombreuse nouvelles API en JavaScript. Une autre nouveauté fort intéressante sont les Web Sockets qui permettent de faire communiquer avec un navigateur et un serveur très facilement, ce qui facilitera le push de données l'un vers l'autre.

Mais les internautes aussi tireront partie de quelques nouveautés, le support du mode "hors-ligne" qui permet d'utiliser des webapps sans connexion au net, la géo-localisation, le support des données locales et l'amélioration de l'historique des navigateurs.

Les nouveautés apportées par CSS3 ne sont pas en reste non plus, les coins arrondis, les effets d'ombres (pour les box et le texte), les transitions, la gestion des colonnes, les nouveaux "selectors" sont autant de nouveautés qui vous permettront d'améliorer vos design sans avoir à utiliser des images, ces effets graphiques seront automatiquement générés par le navigateur.

Parce que des librairies permettent de gérer les vieux navigateurs

Les années 2009 et 2010 ont vraiment été des années d'exploration, comme d'habitude, au début il n'y avait rien pour faciliter le travail du développeur. Ce n'est plus le cas dorénavant, il y a pléthore de librairie, de documentation et de forum qui parle du HTML5. Voici ma petite sélection d'outils qui vous assisteront à la création d'un site en HTML5 et CSS3...

HTML5shiv

Les sites développés avec le HTML5 sont consultables par Internet Explorer, seulement il faut utiliser une petite librairie pour que l'affichage soit correct. La toute petite librairie html5shiv rend les nouvelles balises HTML5 accessibles à IE, il suffit d'ajouter dans le head de votre page la ligne suivante :

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Boilerplate

Boilerplate est un gros package de template qui fournit des fichiers déjà préparés pour travailler avec le HTML5. Il propose énormément de fonctionnalités et tout ne vous intéressera pas forcément, mais il peut être intéressant de regarder le package pour récupérer les bonnes idées qui sont présentes. Surtout que toute la documentation est en francaise :

Modernizr

Le template HTML5Boilerplate contient une librairie JavaScript fort intéressante et je ne pouvais pas ne pas vous en parler. Ce script c'est modernizr qui rend l'utilisation des nouveautés HTML5 et CSS3 plus facile pour les navigateurs qui le supportent. En effet, la librairie contient un ensemble de tests qui permettront au développeur d'utiliser les nouveautés du HTML5 uniquement si le navigateur client le supporte :

Less Framework

Less Framework permet de mettre en place un layout qui gère directement les media-queries pour les navigateurs compatibles, ainsi on développe un seul site qui sera consultable avec un device mobile. Ce framework propose même une solution pour les media-queries CSS3 pour IE6 :

Conclusion

Je vais répéter ce que beaucoup on déjà dit, on peut déjà utiliser HTML5 pour faire une refonte ou développer un nouveau site. Les ressources sont là, les développeurs commencent à maitriser cette évolution du Web pour en tirer le meilleur parti. Les années 2009 et 2010 avaient servies à la découverte et l'exploration, 2011 sera l'année ou HTML5 et CSS3 gagneront leurs lettres de noblesses...

Mais il faut garder quelques point à l'esprit. Le HTML5 n'est pas encore terminé, c'est à dire qu'il est toujours à l'état de brouillon selon la W3C et que ces spécifications sont susceptibles de changer dans les mois voire les années à venir. Pas de panique néanmoins, les changements seront minimes je pense dans les grandes lignes, du coup, cela ne vous empêche pas de faire votre site en HTML5. Je précise que je ne fais aucune prédiction pour les formats vidéos et audio qui seront supportés à terme par le HTML5...