jeudi 27 janvier 2011

Le nouvel HTML 5

html5_logo_128

Après toutes ses années passées à faire du développement web, il est rafraîchissant de voir une mise à jour majeure du langage HTML (et ses comparses CSS et JavaScript).
Le W3C (World Wide Web Consortium) nous offre depuis peu de temps le logo officiel du HTML5 et nous informe sur les capacités de cette technologie.

Améliorations HTML5 :

Meilleure structure sémantique (nouveau type d’éléments HTML, microformat, …)
Navigation “Hors ligne”
Base de données locale (SQLite)
“Drag and drop” natif
Accès aux fichiers/dossiers du système
Classes graphiques : Canvas, WebGL, SVG, …
Multimédia (vidéo et audio)
Géolocalisation (avec appareil mobile)
Processus JavaScript en ” background ” (Workers)
CSS3
Plusieurs autres …

Par contre, un bon nombre de gens ont exprimé leurs frustrations lorsque le W3C a mis dans le même pot le HTML, le CSS et le JavaScript et l’a nommé ensuite HTML5 (voir CSS3 is not HTML5 (anglais) ). Il s’agit en fait de 3 technologies totalement différentes, mais comme elles fonctionnent conjointement, je crois personnellement qu’il n’est pas dramatique de toutes les mettre dans le même pot.

Il est important de savoir que HTML5 n’est pas encore totalement intégré dans tous les fureteurs internet couramment utilisés à ce jour. Par contre, chacune des compagnies de fureteur s’empressent à rendre leur dernière version la plus compatible possible.

Certaines d’entre elles offrent une version BETA pour pouvoir tester les dernières mises à jour :

Google Chrome Beta : http://www.google.com/landing/chrome/beta/
Firefox 4 Beta : http://www.mozilla.com/en-US/firefox/beta/
Internet Explorer 9 Beta : http://ie.microsoft.com/testdrive/

Il y a un certain temps, Google avait créé un “plugin” nommée Google Gears, qui permettait d’avoir des bases de données locales (SQLite), de naviguer des sites “hors ligne” et d’effectuer des opérations JavaScript intensives en “background”.

Toutes ces fonctionnalités se trouvent dans HTML5. De ce fait, Google a décidé de laisser tomber cette technologie pour favoriser une nouvelle version du HTML.

Médias

Dans toutes ces améliorations, quelques-unes d’entre elles sont vraiment intéressantes. Par exemple, les éléments et servent à jouer des vidéos et de la musique sans avoir besoin de Flash et le tout peut-être contrôlé par JavaScript.

Youtube et Vimeo ont créé, depuis longtemps, des versions HTML5 de leur contenu vidéo.

Jeux

Les améliorations du côté graphique (Canvas, WebGL) rendent la création de jeux complexes (possible et facile?)Il faut s’y connaître en programmation, quand même). Le site html5games offre déjà une multitude de jeux bâtis à partir de cet ensemble de technologies.

Tank World (Jeu HTML5)

Canvas Rider (Jeu HTML5)

Anciennement, uniquement Flash nous permettait de créer des jeux de très bonne qualité (autant visuelle que diversifié). Par contre, on note qu’aujourd’hui, un jeu fait en Flash fonctionne de la même façon sur tous les browsers. Nous ne pouvons pas en dire autant de ceux faits en HTML5. Espérons que dans les versions futures des fureteurs, tout fonctionnera de la même façon.

Applications

Déjà aujourd’hui, il existe un bon nombre d’applications web qui concurrencent avec les équivalents “desktop” et qui réussissent parfois à faire mieux, et ce, gratuitement pour la plupart. Par exemple : Google Docs, Scribds et SketchPad sont trois superbes applications bâties avec les dernières fonctionnalités web : pas de Flash, Silverlight ou Java, pas de “plugin”, non non, ce n’est que du beau HTML5!

Google Docs

Scribds

SketchPad

En plus, des fonctionnalités comme le “drag-drop” à partir du “Desktop” était tout bonnement impossible avant (même avec Flash). Et bien, HTML5 nous donne la possibilité “d’uploader” un fichier en le glissant dans la fureteur.

Application Mobile

Du côté du téléphone intelligent comme l’iPhone et l’Android, le HTML5 y est déjà. En fait, plusieurs applications web mobiles peuvent nous faire croire qu’elles sont natives, mais au contraire, elles ont été bâties à l’aide de la technologie web.

N’allez pas croire par contre, que le développement d’application HTML5 remplacera complètement celui natif. Cette merveilleuse technologie web n’est tout de même pas capable d’obtenir l’information de la caméra par exemple. Donc, il n’y aura pas de sitôt d’application hipstamatic ou de 8mm Vintage Camera en HTML5.

Pour le développement d’une application web ressemblant à une native, je vous conseille Sencha Touch ou The M Project.

Références (anglaises) :
http://www.w3.org/html/logo/
http://www.html5rocks.com/features/file
http://html5demos.com/