A l’heure ou les spécifications W3C du HTML5 sont en cours de rédaction, les derniers navigateurs se mettent à jour et proposent la prise en charge des premières balises du futur standard web. Si vous avez installé Firefox 3.5, Opera 10.*, Chrome 3.* ou Safari 4.* , préparez vous à redécouvrir le web. Des démos apparaissent petit à petit et les développeurs s’avèrent plus créatifs que jamais. Grâce au HTML5, l’utilisation d’éléments non-conformes comme le Flash tendra à disparaître tant les possibilités offertes sont impressionnantes. Petite présentation des premières pages HTML5 sur le web, accrochez vous

Pour résumer, les innovations du HTML 5 c’est :

• une meilleure intégration des médias (balise <video> …)
• une meilleure syntaxe plus libérée, qui se rapproche du XML (on peut créer ses blocs en définissant ses propres balises <header><contenu> etc…)
• une accessibilité améliorée, meilleure gestion des formulaires, meilleure gestion des terminaux (écran / print / mobile)
• une couche application avec une API permettant de créer des pages très dynamiques
• beaucoup d’autres avantages que l’on découvrira au fil des mois !

Pour découvrir les possibilités offertes par le HTML 5, je vous propose de visiter les liens suivants.

Canvas and audio experiment : A première vue, on dirait du Flash, ou du Silverlight, mais en réalité la page est uniquement composée de HTML5 et de quelques scripts applicatifs. Incroyable expérience reprennant les tweets qui en parlent dans un univers de bulles colorées. Un peu dur à expliquer, le mieux est de le voir !

Canvas Drawing : Une page web couplée à son script applicatif qui permettent ensemble de dessiner sur la page. La démo est simple mais les possibilités offertes par ce système sont tout bonnement énormes.

Youtube accessible video player : Une transformation de Youtube où les vidéos ne sont plus intégrées en Flash mais directement dans le code avec la balise <video>. Cet exemple révèle que, le HTML5 transformera les portails vidéos tels que Dailymotion, Google Video ou Youtube, facilitant l’accessibilité et améliorant l’utilisabilité de ces interfaces. Fini les lecteurs en Flash, les flux FLV et les vidéos à convertir ! Vous pourrez intégrer vos vidéos directement en Mpeg4 dans la page.

HTML5 Drag & Drop : Fini Jquery ou Mootols pour cliquer-glisser des éléments ! Désormais avec l’API HTML5 vous pourrez réaliser des éléments draggable en quelques secondes, comme sur cette démo.

Offline detecting : Ce petit script HTML5 vous permettera de détecter l’activité du réseau, afin de déterminer si l’utilisateur est bien connecté où s’il travaille en mode hors ligne. Pratique pour des web-apps comme Gmail, qui pourront être encore utilisables une fois déconnecté !

Canvas 3D Game Engine : Utilisation de canvas pour réaliser un petit moteur 3D isométrique à la Wolfeinstein, utilisez le clavier pour vous déplacer dans cet univers en 3D. Vous imaginez les sites que cela donnera dans quelques années ? Le nombre d’interfaces 3D va exploser et les expériences utilisateurs vont être de plus en plus folles ! Autre exemple dans le même style : MarioKart Canvas Edition, un MarioKart 100% HTML5 !

Content Editable : Etant donné que le HTML5 permet le stockage local de données, on pourra utiliser l’attribut ContentEditable pour éditer le contenu, qu’on soit connecté ou hors-ligne. Plus besoin d’Ajax pour faire des interfaces type « edit in place ». Cela ouvre une porte considérable sur les BackOffice, qui deviendront de plus en plus faciles à réaliser et de plus en plus intuitif pour les utilisateurs étant donné la simplicité d’édition qu’offre cet attribut.

Voilà pour les premières démos des fonctions plutôt surprenantes que propose le HTML5. N’oubliez pas qu’il faut un navigateur à jour pour essayer ces pages :

• Firefox 3.5 : télécharger
• Safari 4.* : télécharger
• Chrome 3.* : télécharger
• Opera 10.* : télécharger

N’hésitez pas à laisser un commentaire si vous avez d’autres exemples d’utilisation du HTML5, dans le prochain post nous nous focaliserons sur le code pour analyser le doctype et la validation de pages HTML5