Nouveauté sur Nextbuzz: avec l’arrivée de nouveaux langages de programmation web, nous avons décidé de créer une chronique qui aura pour but de vous présenter les dernières créations utilisants l’HTML5. Nous avons pour cela recruté Kevin “z0va” qui, toutes les semaines, va écrire sa chronique pour nous montrer les dernières nouveautés en la matière.

HTML5 - Présentation

HTML5 une bien belle promesse, mais connaissez-vous vraiment de langage ?

Tout d’abord il s’agit ni plus ni moins d’un 5ème version du langage de balisage le plus connu. Mais derrière cette (r)évolution se cache bien des atouts !

Un changement

Le premier ajout est en fait un nouveau jeu de balises (<header> <section> <article> <footer>…) qui se veulent plus correcte au niveau sémantique. Ceci permet en réalité de classifier les différents éléments plus en profondeur, afin d’avoir une vraie hiérarchie des éléments.

Bien entendu tout n’est pas si rose, de nombreuses questions se posent quand à l’interprétation que l’on peut faire de certaines balises, et reste à savoir comment les implémenter… pour cela je vous invite donc à vous documenter auprès des sites spécialisés.

Quelques nouveaux éléments pour les formulaire sont aussi prévu, mais leur implémentation n’est pour le moment que partielle, mais vous pouvez dors et déjà voir un aperçu des nouvelles possibilités ici.

Des nouveautés

Le “Saint Graal” tient surtout dans les ajouts nombreux à ce langage vieillissant, afin qu’il puisse suivre l’évolution du web actuel.
Voici une petite liste non exhaustive des nouveautés :

  • Canvas : cet élément peut s’apparenter à une zone de dessin, et dispose d’une API en JavaScript qui permet d’interagir avec. On peut donc dessiner, animer et certains voient en cet élément une concurrence avec Flash…
  • <video> : cette nouvelle balise permet de gérer nativement la lecture de vidéo sous différents format. On peut ensuite manipuler la vidéo comme bon nous semble, autant au niveau du contrôle de la lecture que de l’image elle même (à l’aide d’un Canvas).
  • <audio> : cette balise similaire à la balise <video>, permet la lecture de fichiers audio nativement.
  • Géolocalisation : je pense que ça se passe de commentaires, je ne suis pas tellement pour ce genre de choses mais ça servira bien à certains…
  • Local Storage : ceci est en fait “l’évolution” des cookies, il sera possible de gérer des données en local de la même manière qu’une base de données SQL par exemple. Je pense que cette nouveauté trouvera tout son sens dans les web apps.
  • Web Socket : voilà pour moi une des parties les plus intéressantes, en effet les Web Socket vont permettre les échanges dynamiques entre le client et le serveur (et vice versa) comme pour un serveur de Chat par exemple.
  • Content Editable : cette propriété permet d’éditer les élément qui ont activé cette propriété, imaginez par exemple un post-it composé d’un <div id=”post-it” contentEditable=”true”></div> où l’on pourrait éditer simplement le contenu. Pour plus de clarté veuillez visionner cet exemple.
  • Online/offline : en effet on pourra savoir si vous êtes connecté ou non à internet, ce qui peut servir pour le mode offline des web apps.
  • Drag & drop : un support natif du drag & drop est aussi prévu, ce qui simplifies grandement la tâche ! (voir exemple)

Bref la liste est longue et offre de nombreuses possibilités. Mais le HTML5 étant jeune, les navigateurs implémentent petit à petit ces nouveautés mais leur support n’est pas complet ! Pour savoir si votre navigateur supporte bien ces nouveautés, rendez-vous sur htmltest.com

Conclusion

Pour finir mon petit tour d’horizon je vais vous montrer un univers que j’affectionne tout particulièrement, celui de la demoscene. Et plus particulièrement en HTML5 à l’aide de l’élément Canvas, du JavaScript et un peu d’huile de coude :p

Voici une sélection de demos assez impressionnantes :

Demo 1
Pulsing 3d wires		 Demo 2
The Legend Of The Bouncing Beholder		 Demo 3
Amiga Boing Ball

C’est la raison de ma venue ici, je vous présenterai chaque semaine une demo HTML5 percutante, qui j’espère vous ravira.