Voici le deuxième article qui suit le précédent rapportant l'intervention de Peter Lubbers sur HTML5 en juin 2010.
HTML 5 Forms
Les WebForms 2.0 ou HTML 5 Forms, fournissent des fonctionnalités de formulaire natifs. En guise d'illustration, Peter nous montre le volume de code non négligeable nécessaire à la validation d'une simple adresse e-mail. Ces efforts répétés par les développeurs de sites ou dans les frameworks ou les toolkits se trouvent implémentés dans le browser grâce à HTML 5. Il y a aussi de nouveaux composants comme DatePicker, ColorPicker, valideurs d'adresses web, sliders, etc. D'après le présentateur, on a pas à se soucier de la compatibilité descendante de ce genre de composant car en cas de non compatibilité, les composants sont rendus avec du texte. Il y a aussi la possibilité de rendre un attribut obligatoire. Dans ce cas, la validation côté client est assurée par le navigateur avant même l'envoi au serveur. Ce fut l'occasion de voir le code associé et de constater que les guillemets deviennent accessoires en HTML5:
<input id=name name=name type=text required>
C'est en cela qu'HTML5 est un contrepied au XHTML qui prône lui une conformité rigoureuse à la syntaxe XML.
Pour résumer, cette spécification ajoute à HTML des fonctionnalités natives au navigateur en un nombre réduit d'éléments déclaratifs au lieu de devoir recoder cette partie là à chaque fois côté client.
Des tas d'API
HTML 5 innove en apportant des standards d'API tels que : Canvas, SVG, Audio & Video, Web Socket, Web Workers, Geolocation, Web Storage, etc.
Canvas & SVG
Ce sont des API de dessin pour le navigateur. Par exemple, on peut dessiner une ligne dans la page grâce à ces API. Conformément à l'esprit de HTML5, ces zones graphiques sont accessibles à Javascript et au styles CSS à l'inverse d'une zone remplie par un plug-in. Alors pourquoi deux API pour dessiner ? L'un génère des graphismes “bitmap” (canvas) tandis que l'autre génère des images vectorielles (SVG). Dans un canvas, on est au “bas niveau”, on a accès aux dessins de pixels, etc. Alors que SVG nous propose une syntaxe XML, un modèle objet pour décrire des formes, des traits, etc. Cela permet par exemple de concevoir des interfaces fines en réagissant à un clic sur une certaine zone par exemple. Peter tranche en disant qu'il n'y a pas vraiment de bonne ou mauvaise API à ce niveau. Il y a juste des usages différents.
Canvas
Lorsqu'une zone canvas est dessinée, elle l'est à une certaine résolution, elle serait pixelisée si on zoomait dessus. Il existe des canvas 2D et des canvas 3D. Le présentateur a partagé avec nous le site canvasdemo.com qui est une collection de liens vers des créations canvas, une bonne façon de découvrir des exemples de ce qu'on peut faire avec cette API. Je suis assez d'accord avec Peter, “that's cool stuff”.
A noter que les canvas 3D (Web GL) ne sont supportés que par quelques navigateurs dans leur version de développement (les canvas 3D que vous pouvez voir sont de la 3D calculée et projetée sur un canvas 3D, ndla)
Comment ça marche ? Vous définissez un élément canvas et un dans un javascript, vous accéder au contexte de ce canvas. Ensuite, vous empilez des instructions de dessin dans ce contexte (line, gradient, rectangle, etc.) et à la manière d'une transaction en base de données, vous “commitez” ces instructions ce qui a pour effet de les dessiner dans la zone. Vous avez aussi accès aux évènement sur les mouvements de la souris.
SVG
En SVG, tout ce qui est dessiné peut passer à une échelle différente, ce n'est pas dépendant de la résolution. C'est assez adapté pour représenter des graphiques de données par exemple ou une carte avec des informations cartographiques additionnelles sur laquelle on pourrait zoomer précisément. A noter que IE 9 supporterait bien SVG et ajouterait une accélération matérielle prometteuse.
Audio and video
Il y a pour ça deux nouveaux éléments audio et video. Ils permettent d'inclure nativement des sons et des vidéos
dans vos documents web. L'idée originale de HTML5 ne spécifiait à l'origine qu'un seul codec mais ce n'était pas une
offre très diversifiée. Il y a donc aujourd'hui deux conteneurs multimedia compatibles : OGG (libre) et H.264 (non
libre). Par exemple, Youtube et Dailymotion proposent déjà du contenu video en HTML5. Cela permet en particulier de se
passer de Adobe Flash pour héberger des vidéos ou de la musique. Pour illustrer son propos, Peter nous montre qu'il est
possible d'avoir accès aussi au contenu : une vidéo se joue sur une page et un script prend une capture toute les 5
secondes. On peut aussi zoomer lorsque la souris entre sur la vidéo.
Je continuerai dans la dernière partie du compte-rendu qui parelera de Web Sockets, Web Workers, Geolocation et Web Storage.