ordinateur-interfaces-riches

Des expériences visuelles toujours plus sophistiquées avec HTML5

Saviez-vous que les dernières recommandations officielles du W3C concernant le langage HTML remontent au siècle dernier ? La version 4.01 des spécifications HTML date très exactement du 24 décembre 1999. Nous sommes en 2014, cela fait donc 15 ans que les technologies de présentation de pages web évoluent, mais que l’organisme de standardisation des technologies web piétine. Heureusement l’industrie s’est organisée pour pallier le retard, notamment à travers des initiatives conjointes comme WebPlatform.org.

Au cours des 15 dernières années, nous avons pu assister au triomphe de technologies propriétaires comme Flash, et à leur disparition avec la montée en puissance des terminaux mobiles. Rétrospectivement, il est amusant de constater que le discours d’Apple était d’exploiter les standards du web, alors qu’ils ne jurent plus maintenant que par leurs technologies propriétaires pour développer des applications (notamment le nouveau langage Swift). Heureusement, certains éditeurs militent pour faire valoir les qualités de HTML, notamment Adobe. Ironie du sort, les rôles se sont inversés !

Vous seriez extrêmement surpris de découvrir tout ce qu’il est possible de faire avec les dernières versions de HTML, CSS et javascript. Je vous propose dans ce cadre de découvrir la présentation de CJ Gammon qui compile les dernières innovations en matière de présentation et d’expériences visuelles : Rich Web Experiences.

Au programme de ces expériences visuelles :

  • Le masquage de certaines zones d’image avec ClipPath ;
  • Les masques CSS (statiques et dynamiques) ;
  • Les fonctions de mélange et de filtre CSS ;
  • La manipulation d’objets SVG et Canvas 2D ;
  • Les objets et représentations 3D avec WebGL et javascript ;
  • La manipulation de vidéos (masques, effets, transitions…) ;
  • La scénarisation de contenus avec CSS ;
  • Les moteurs de jeux en ligne ;
  • La communication en temps réel avec WebRTC…

Ces expériences sont très impressionnantes, par contre il vous faudra impérativement un navigateur moderne, et encore : aucun navigateur actuellement sur le marché ne permet d’afficher correctement tout ce qui est décrit dans la présentation. En jonglant entre Chrome, Safari et Firefox, vous pourrez néanmoins voir toutes ces expériences en « live ». Si l’une ou l’autre de ces technologies vous intéresse, je vous recommande de vérifier leur compatibilité sur le site CanIUse.

Idéalement, nous devrions attendre que ces techniques soient standardisées, mais nous avons maintenant un minimum de recul sur la lenteur du processus. L’important à retenir est que HTML5 est beaucoup plus sophistiqué qu’on ne le pense, notamment grâce à javascript et CSS3 (cf. A Map of the Best Animation Libraries for JavaScript and CSS3). Comme toujours, le meilleur moyen de s’en convaincre est de regarder du côté des jeux : Play a Microsoft-made HTML5 version of Settlers of Catan in your browser right now et Current state and the future of HTML5 games.

En synthèse : HTML n’est pas qu’un langage simpliste pour afficher des pages web, c’est une plateforme de développement pour pouvoir distribuer des contenus riches et des applications en ligne. Ceci est particulièrement pertinent en cette période où les usages des internautes migrent vers des terminaux mobiles propulsés par différents systèmes d’exploitation (iOS, Android, AOSP, Windows Phone, FirefoxOS, Tizen…).

(via CMSWire)