Les autres nouveautés de l’HTML 5
Quand on parle de la dernière version de l’HTML introduite par le W3C, beaucoup le résument à l’élément <video>. Pourtant, le W3C a introduit de nombreux autres balises, attributs et API pour mieux coller au web d’aujourd’hui, ainsi que des innovations qui vont permettre de rattraper l’écart entre les applications natives et les WebApps tout en rendant le web plus accessible.
Allez, les balises audio et video
D’accord, on en a assez parlé, mais ça constitue une bonne introduction à cet article 😉 Parmi les nombreuses innovations de l’HTML 5 qui vont permettre au web de se séparer d’Adobe Flash Player (vous savez, cette extension qui fait planter tous les navigateurs et bouffe au moins un des cores de votre CPU), les tags <audio> et <video> sont les plus connus. Insérer une vidéo dans un article est maintenant devenu aussi simple qu’y insérer une image :
Mais quelle saloperIE, ton navigateur ne supporte pas les vidéos HTML 5 :(
</video>
Remarquez la rétro-compatibilité avec les navigateurs HTML4 : puisqu’ils ne vont pas interpréter ce tag, ils afficheront un gentil petit mot. Pensez éventuellement à y mettre un lien vers http://getFirefox.com ^_^ .
Bien sûr ces balises ont des attributs et une API qui leur sont propre, mais ce n’est pas le sujet de l’article.
La limitation du codec
La grosse limitation pour ces attributs est l’implémentation des codecs. Les principaux navigateurs libres n’implémentent que des codecs libres (Ogg Theora+Vorbis) mais par exemple Safari ou même Android n’implémentent que le h264. La W3C ne résoud pas ce problème, ce serait comme imposer le PNG dans les éléments <img> alors que le JPEG (propriétaire) est largement répandu.
Sa solution est donc de fournir les vidéos dans les deux formats, pour que tous les navigateurs compatibles HTML 5 puissent les décoder:
<source src="Bravo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="GrosVilain.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
Malheureusement la plupart des éditeurs vont privilégier un seul format, que ce soit par idéologie ou par contraintes techniques (temps de conversion, espace de stockage). Déjà aujourd’hui YouTube, dans sa beta HTML 5, ne diffuse ses vidéos que en h264, ce qui le rend incompatible avec, entre autres, Firefox.
La balise canvas
Un canvas n’est pas un dessin à proprement parler mais une zone possédant une API complète pour dessiner des formes en 2D grâce à un JavaScript. Rien de mieux qu’un petit exemple je pense :
window.addEventListener('load', function () {
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
context.fillStyle = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth = 4;
context.fillRect (0, 0, 150, 50);
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);
}, false);</script>
<canvas id="myCanvas" width="300" height="150">
Votre navigateur n'est pas compatible
</canvas>
Et si vous avez un navigateur compatible, vous devriez voir le résultat ci-contre.
L’API permet de tracer des rectangles, des ronds, des traits, des pixels et même d’insérer des images ou du texte. On peut aussi jouer avec des ombres, des flous ou des dégradés de couleurs. Très pratique pour faire des manipulations de style sur un texte par exemple :
Pour être exact c’est une image, mais elle a été générée par votre navigateur (comment ça c’est moche? xD)
Et puis comme c’est basé sur le JavaScript, l’image générée peut être entièrement dynamique comme ce plotter dynamique ou le très impressionnant 3D Walker.
Beau tour d’horizon !
Vivement que ça soit finalisé …
Article très intéressant, j’ai appris des choses.
Ah bah nickel, un beau résumé, je ne connaissais pas la moitié des nouveautés décrites ici :p
Moi j’ai salement hâte de pouvoir éditer wikipedia en “deux clics” avec le contenu éditable…
Ça sera tellement plus facile 😀
ruby, rt, rp permet d’intégrer des annotations ruby (WTF?)
“Ruby” are short runs of text alongside the base text, typically used in East Asian documents to indicate pronunciation or to provide a short annotation. This specification defines markup for ruby, in the form of an XHTML module.
Tout à fait WTF, 3 balises pour à moitié rien (ou comment réinventer les tableaux au mieux)…
Très bon article sinon 🙂
P.S.:En postant le commentaire: Catchable fatal error: Object of class stdClass could not be converted to string in /home/geekfault/www/wp-content/plugins/multi-page-toolkit/TA_multi_toolkit.php on line 309
Très bon article, en effet, vu qu’on entend parler que de la vidéo concernant le html5.
Merci.
Bon, cet article est sympa parce qu’il présente pas mal de choses intéressantes mais il est quand même approximatif et le recul manque.
Par exemple, toute la partie local storage ne fait pas (plus) partie de HTML5 mais fait l’objet d’une spéc séparée.
Pour le manque de recul, il est visible avec des affirmations comme “La plupart de ces nouveaux éléments sont liés à l’accessibilité”, et il y a des choix vraiment critiquables (bonjour microdata) et il suffit de suivre un peu l’évolution d’HTML5 et son processus de standardisation pour voir que tout n’est pas rose.
Petit commentaire personnel pour finir : contenteditable est très sympa vu comme ça mais je ne suis pas vraiment convaincu. D’une part, c’est WYSIWYG (et je ne suis pas certain que ce mode d’édition soit toujours adapté) et d’autre part, les navigateurs font encore de la merde à ne pas laisser la main à un VRAI outil dédié. Bon, c’est comme ça pour le reste aussi, je ne suis pas d’accord avec le paradigme dominant, tant pis pour moi…
Bonne continuation, malgré ce que j’ai pu dire, vos articles ne sont pas forcément mauvais.
@Xavier Merci de ces précisions. Même si j’ai passé plusieurs heures à me documenter, ce n’est pas toujours évident sur un standard encore à l’état de brouillon.
Sinon pour le WYSIWYG du ContentEditable, si tu ne veux pas que ça le soit il faudra utiliser un textarea mais ça me semble normal que ça le soit puisqu’on peut rendre éditable n’importe quelle partie d’une page qui peut déjà avoir sa mise en page. Maintenant c’est sûr que si les navigateurs ne font que de la merde avec ça, on va devoir y mettre des surcouches JavaScript.
Merci pour ces explications ! Très intéressant… j’ai lâché HTML et CSS juste avant la vague HTML 5 donc je suis à la ramasse maintenant, cet article vient combler un peu mes déficits !
Concernant l’élément ruby, vu que tu as l’air de ne pas trop comprendre de quoi il s’agit :
http://en.wikipedia.org/wiki/Ruby_character
Rien à voir avec le langage de programmation, il s’agit en fait d’un élément qui permet d’afficher, au-dessus d’un caractère asiatique (chinois, japonais) sa prononciation.
Il me semble que cet élément figure déjà dans les versions précédents de HTML mais est mal interprété par les navigateurs malheureusement… j’espère que ça sera mieux avec HTML 5 !
Oui je savaiss de quoi il s’agit mais je ne saisis pas du tout l’utilité de trois tags HTML rien que pour ça. En même temps je ne parle aucun dialecte asiatique 😉
oui c’est utile sur tous les deux balises vidéo et audio