HTML5 expliqué et démontré par Google

Quelle démo ! Mais quelle démo !

HTML5 = Next Generation Features for Modern Web Development nous explique Google par l'exemple.
Revue générale : les APIS Javascript, les nouvelles balises, les nouvelles propriétés des CSS3..., pour chaque point, une explication, pour chaque fonctionnalité, une démonstration.

Au total il y a quelques 36 slides, en 3 grands chapitres donc, sans bla-blas inutiles, voire même aucune explication. Des slides que je vais tenter ici de comprendre ou d'interpréter au prix d'un effort intellectuel surhumain pour un dimanche matin :

• • • Panorama d'HTML5 et des CSS3

Empoignez Chrome, ça commence...

HTML5 et les API JavaScript

Pour les sélecteurs CSS, l'API Selectors

Tous les frameworks JavaScript nous proposaient déjà de retrouver des éléments HTML par leurs class ou leurs id. Afin de leur appliquer des styles propres pour un état particulier (dans le cas des formulaires, par exemple).
Avec document.querySelector() et document.getElementsByClassName c'est nativement qu'un navigateur sachant lire HTML5 et les CSS3 saura exploiter ces fonctionnalités. Le bénéfice étant la rapidité d'exécution qui envoie tous les framework JS dans les cordes.

Les API Dom & Selectors [slide#6]

Le stockage local (Web Storage)

L'API Web Storage fournit 2 types de stockage de données dans le navigateur même :

  1. sessionStorage s'appuie sur JSON (JavaScript Object Notation) qui autorise le stockage d'informations relatives à la navigation par l'internaute dans toutes les pages d'un site (pourvu que la session s'effectue dans la même fenêtre), et ce, pour toute la durée de la session.
  2. localStorage permet quant à lui de conserver localement (dans le navigateur) des données d'une session à l'autre : votre navigateur conserve ainsi sur votre machine ces données qui vous sont personnelles. Vous pouvez les réutiliser à tout moment, en toute sécurité et sans aucune limite de taille.

Le Web Storage [slide#7]

SQL dans le navigateur même (Web SQL Database)

C'est SQlite qui est utilisé bien sûr :
Le principe est simple : vous disposez dans une page Web d'un outil de création et de gestion d'une base de données qui vous est propre puisqu'elle est stockée sur votre machine. Créer des tables, des champs, y entrer ensuite des données, les éditer, les supprimer... bref, la SGBD à portée de tous. Pour en savoir plus sur les bielles et pistons de la base de données Web...
et pour bien en saisir le concept, une démo :

Du Web SQL [slide#8]

Application Cache (Offline Web Application)

C'est vraiment avec cette fonctionnalité qu'on se dit qu'une révolution est en marche. Un événement aussi majeur que l'irruption du WYSYWIG au début des années 80 à mon sens.
Avec la mise en cache d'applications vous pourrez continuer à faire tourner celles-ci même si vous n'êtes pas connecté. WebStorage se chargera d'enregistrer toutes les modifications que vous apporterez aux documents que vous aurez générés avec ces applications. Vous créez une feuille de calcul destinée à être partagée avec d'autres personnes ? Hors ligne, vous apportez des modifications à ce document et dès votre connexion celles-ci seront synchronisées avec celle présente sur le(s) lieu(s) de partage. Ou, autre exemple, vous rédigez un courriel hors connexion par l'application mail de votre navigateur : celui-ci sera conservé et expédié dès que vous serez de nouveau online.
Pour en savoir sur les bielles et pistons de la base de données Web...
et la démo :

Les applications Web [slide#9]

Les Workers

Ça se traduirait comment les « workers » ? Par « collaborateurs » ? Peu importe... qu'est-ce que les « Web Workers HTML5 » ? Ce seraient de petit scripts qui tourneraient en tâches de fond des API principales. Les Workers communiquent et collaborent entre eux pour informer l'API des événements intervenus à tel endroit du site, sur telle page, ou, voire même, dans un iframe situé dans un autre domaine.
C'est un peu confus ? Difficile à concrétiser ?
La démo ne nous aide pas vraiment à comprendre l'objectif, dommage :

Les Web Workers [slide#10]

Les Web Sockets

Les Web Sockets sont là pour palier les insuffisances du protocole HTTP totalement inefficace pour transférer de petites données pourtant nécessaires aux traitements en temps réel des applications Web. On peut prendre en exemple les sites communautaires (Facebook, Twitter, etc.), ou les jeux en ligne qui utilisent ces applications.
Explications techniques par Olivier Croisier que j'avais déjà cité ici pour l'excellence de son article sur les nouvelles API HTML 5 :
Les WebSockets permettent d'établir des connexions TCP full-duplex standard directement depuis le navigateur, sans plugin additionnel. Elles pourront donc traverser les proxies et firewalls de manière transparente, et (enfin !) être établies vers des serveurs autres que le serveur d'origine de la page, à condition bien sûr qu'ils soient compatibles websocket.
Les WebSockets permettent donc d'établir une communication bidirectionnelle asynchrone entre le navigateur et le serveur. En fournissant cette API native à HTML5 il n'y a plus besoin de requêtes Ajax ou d'iframe pour transmettre des notifications depuis le serveur vers le navigateur. Celles-ci s'effectuent via des applications utilisant Comet.

Les Web Sockets [slide#11]

Les Notifications

Ces notifications affichent des alertes à l'utilisateur pour des événements donnés, à la fois passive (nouveaux courriels, arrivées de Tweets, alertes en provenance d'un agenda, etc.), tout celà en dehors de la page sur laquelle on se situe.
La démo du slide#12 vous montrera, pourvu que vous disposiez d'un compte Twitter, l'utilisation de cette API :

Démo de notification Tvitter via [slide#12]

Le Glisser/Déposer

Ou « Drag and Drop »...
L'API permet de dire qu'un élément va recevoir des objets déposés par l'utilisateur via l'événement ondrop, de suivre son chemin à travers la page puis de fixer l'endroit où cet objet aura été déposé...
Sur le slide, au-dessous de la démo, vous pourrez lire que, bientôt, ce seront des objets indépendants de la page qui pourront être déposés sur la page même. Par exemple, vous pourrez uploader un fichier de votre bureau vers un récepteur de la page en l'y faisant tout simplement glisser.
Autant vous dire que cette fonctionnalité va bouleverser nos habitudes (en les simplifiant) et changer l'ergonomie des pages Web à moyenne échéance :

Le Drag & Drop en action [slide#13]

Géolocalisation

Ou « Geolocation »...
La démo plante chez moi ce matin (!). En principe l'API permet de récupérer au travers de l'objet navigator.geolocation les coordonnées complètes de la position de la machine de l'utilisateur exprimée en longitude, latitude, et altitude. Sur la spec du W3C vous trouverez des exemples d'utilisation de la géolocalisation par l'API ainsi que des scripts pour sa mise en œuvre.

L'API de déolocalisation [slide#14]

Passons maintenant au balisage HTML5 :

La structure des pages et les balises HTML5

Le balisage sémantique

Tout simplement un exemple basique du balisage sémantique que nous propose HTML5 avec header, hgroup, nav, section, article, aside et footer, sans oublier, bien sûr le cas des balises d'en-têtes traitées d'un manière bien différente d'HTML4.
Exemple basique disais-je. Je donne sur ce blog plus d'informations et d'explications sur l'usage de ces balises :
dans « La struture d'HTML5 » ou,
pour le cas du référencement naturel, dans « HTML5 va t-il améliorer le référencement ? » et encore,
en ce qui concerne l'accessibilité, dans « De l'accessibilité dans HTML5 ? Je tente le coup ».

Les nouvelles balises sémantiques d'HTML5 [slide#17]

Les nouveaux attributs sur les liens

Ces nouveaux attributs ne sont pas tous nouveaux, dans le sens, où, certains webmestres aux tarins bien développés en ont mise en œuvre certains. Ce sont :

  • a rel="archives"
  • a rel="external"
  • a rel="license"
  • a rel="noreferrer"
  • a rel="pingback"
  • a rel="sidebar"
  • a rel="tag"

Ces nouvelles balises, comme vous vous en doutez, s'adressent aux robots. Elles participeront donc à une meilleure reconnaissance du terrain par les spiders des moteurs de recherche. Cela fait 5 mois (depuis la mise en ligne du blog) qu'elles sont mises en œuvre ici. Et les robots s'en régalent.

Les attributs HTML5 sur les liens [slide#18]

Les microdonnées

Ou « Microdata»...
C'est ce sur quoi je m'essaie depuis quelques jours, à titre expérimental : l'objectif étant de renforcer le référencement naturel en introduisant des microdonnées sur différents éléments HTML5 qui seront lues par les robots, et uniquement par les robots.
En tout cas, du point de vue du code, ce n'est pas aussi simple qu'on pourrait le croire de prime abord pour l'intégrer à des scripts existants ou dans le Core d'un CMS.
Des exemples de code ?

ici même pour la notation hReview dans le balisage HTML5

Les microdonnées dans les balises HTML5 [slide#19]

ARIA dans HTML5

Là aussi nous avons affaire à des ajouts sémantiques sur les balises. Je les ai intégrés à mon balisage HTML5 sans soucis particuliers. Si ces nouveaux éléments ne sont pas encore extraits par le validateur HTML5 du W3C, le validateur Validator.nu, soutenu par la fondation Mozilla, les reconnaît : This document is valid HTML5 + ARIA.
Dans mon billet sur l'accessibilité j'explique, code à l'appui, comment introduire WAI-ARIA dans le balisage HTML5.

Les attributs ARIA dans le balisage HTML5 [slide#20]

HTML5 et les formulaires

Fondamentalement les formulaires issus d’HTML5 ne diffèrent pas beaucoup des précédentes versions.
Il y a toutefois de nouveaux attributs qui vont nous aider à faire l'économie de morceaux de code Javascript auparavant nécessaires :

  • autofocus : cet attribut place le curseur dans le champ demandé.
  • type : pour chacun des champs du formulaire nous pouvons spécifier quelle est sa nature (url, téléphone, adresse courriel, etc.).
  • placeholder : dans chacun des champs vous pourrez faire figurer une chaîne de caractères, un texte d’information sur le champ. Ce texte disparait dès que l'utilisateur place le curseur dans le champ. Cette technique, très utilisée, s'appuyait aupravant sur Javascript. Là, c'est le navigateur qui le gère.
  • autocomplete : cet attribut permet l’autocomplétion à la manière d'AJAX. Penser à Google qui vous suggère des mots ou des syntagmes clés lorsque vous commençez à saisir votre recherche... C'est ça l'autocomplétion.

Il y a d'autres attributs encore, mais je n'en ai pas encore fait le tour.

Les formulaires HTML5 [slide#21]

HTML5 et le multimedia

Il s'agit bien évidement des balises video et audio
Quels doivent-être leurs codes ? C'est on ne peut plus simple :

Audio et vidéo en HTML5 [slide#22]

Canvas

Canvas et HTML5 ce sera pour les utilisateurs un couple indissociable. Sauf pour ceux qui utilisent d'anciennes versions d'Internet Explorer. Mais les webmestres soucieux de ne perdre aucun visiteur pourront apporter la technologie Canvas au navigateur de Microsoft avec le script ExplorerCanvas qu'ils pourront trouver ici.

Exemple de code Canvas en HTML5 [slide#23]

Exemples d'affichage du code Canvas en HTML5 [slide#24]

Exemples de code Canvas 3D en HTML5 [slide#25]

Au tour et autour des nouvelles propriétés des CSS maintenant :

La CSS3

Là vous allez en prendre plein les mirettes !
Les nouveaux sélecteurs, les fontes embarquées, la gestion de l'espace réservé au texte, les colonnes, les effets d'ombre, d'entourage sur la typo, l'opacité, la gestion de la couleur en HSL, les coins ronds, les dégradés, les reflets, la gestion multiple d'images d'arrière-plan, les effets de transition, l'inclinaison de boîtes, de textes, les animations...
Toutes ces fonctionnalités sont visibles et documentées avec le code correspondant. Un must-see pour le designer des temps modernes. Le chapitre démarre ici par :

Les nouveaux sélecteurs CSS3 [slide#28]

« HTML5 c'est un nouveau paradigme »

... disais-je ici même dans un commentaire récent. HTML5 pour le Web c'est plus de fonctionnalités, plus de performance, plus de puissance et une compatibilité transversale totale car tous les éditeurs, tous les développeurs s'appuieront sur un code unique, non propriétaire. Avec HTML5, c'est Xanadu qui renaît. Avec HTML5, c'est aussi l'avenir de l'informatique qui prend forme. Amen.




Commentaires :

mom||#1
mom
tres interessant et tres complet en tout cas sa en fait des choses a enmagaziner

sinon petite remarque sur le site d'ou viennes les exemple il auraient pu pensser a toutes les resolutions d'ecran car malgre ma resolution en 16/9 1360*768 je ne voit pas les cotes et la barre de scroll n'est pas presente
Marion||#2
Marion
Un grand merci pour ces explications pour moi qui n'avait pas compris qu'HTML5 c'était bien plus qu'un simple langage pour des pages web.
w3cvalidation||#3
w3cvalidation
Nice information, I really appreciate the way you presented.Thanks for sharing..
[EDIT]I said "no spam"
Kevin||#4
Kevin
Avec IE8 rien ne s'affiche!!!
Philippe||#5
Philippe
@ Kevin
ah ! ça ne marche pas dans IE8 ? c'est ennuyeux.
Faudrait peut-être vous plaindre @ Google alors ?
Ou à Microsoft ?
Ou bien changer de navigateur...
c'est écrit là haut : il faut naviguer avec Google Chrome sur le site pour que ça fonctionne.
Nicolas Chevallier||#6
Nicolas Chevallier
Merci pour cette analyse. On espère maintenant que le pourcentage d'internautes utilisant un navigateur supportant le HTML5 augmente rapidement!
David||#7
David
Excellent ! Merci beaucoup pour les explications.
Annick||#8
Annick
Je suis vraiment bluffée des capacités JS d'HTML5. Tu as vraiment raison de dire que c'est une véritable révolution qui va changer la face du Web.
Gilles||#9
Gilles
Excellent ! Voilà une explication sur HTML5 parfaitement simple et compréhensible.

Les commentaires pour ce billet sont fermés