HTML 5, CSS3 et les APIs JavaScript apportent beaucoup de nouveautés qui vont permettre de faire des applications de plus en plus complexes et connectées. Certaines nouveautés sont assez mise en avant et connues comme :
- la géolocalisation
- le support des fichiers vidéos et audios
- la gestion du mode déconnecté
- le stockage sur le navigateur
- Canvas et SVG
- les transformations, animations CSS3
- les médias queries CSS3
- le drag’n drop natif
- File API
- les polices webs
Voici un petit aperçu de quelques nouveautés méconnues mais très intéressantes apportées par HTML5 (Attention, certaines sont encore à l’état de brouillon).
Web workers : Multi threading Javascript
Une des problématiques de JavaScript est qu’il n’était pas possible d’effectuer des traitements sur plusieurs threads, qui plus est avec les processeurs multicœurs disponibles maintenant. Ainsi, lors d’un traitement JavaScript long, l’interface utilisateur peut se figer quelque secondes et il est même possible d’avoir un pop-up indiquant qu’un script met trop de temps à s’exécuter.
HTML5 introduit les Web Workers. Ce sont des scripts qui peuvent s’exécuter en taches de fond, sur des threads séparés ne bloquant pas votre site. Le principe consiste à des échanges de messages entre votre script principal et un (ou des) workers.
Cependant ces workers ont quelques limitations comme l’accès au DOM. Il ne vous sera donc pas possible de modifier le contenu de vos pages dans un worker.
Ressources :
- Article de présentation sur HTML5 Rocks [en]
- Introduction aux web workers d’HTML5 : le multithreading version javascript par David Rousset
- Getting started with web workers [en]
Fullscreen
L’API Fullscreen permet la gestion du plein écran. Il est ainsi possible de mettre en plein écran n’importe quel élément d’une page (une div par exemple) et non plus l’ensemble de la page comme on peut le faire via la touche F11.
Attention il pourrait être utilisé à des fins de phising !!!
Ressources :
Web sockets
Les web sockets sont des sockets (tunnels de communication) entre un serveur et un client web. Cette API permet d’ouvrir un canal de communication entre le navigateur et le serveur web et d’échanger des messages bidirectionnel (dans les 2 sens : client vers serveur mais également serveur vers client). Cela permet de mettre en place du Push. Il n’est donc plus nécessaire de faire du polling (technique d’appel régulier du serveur coté client) afin de récupérer des éventuelles mise à jour. Cela permet de facilement implémenter un chat par exemple.
Ressources :
Server-sent events
Les Server-sent events ressemblent aux web sockets sauf que ceux-ci sont unidirectionnel, du serveur vers le client. On s’abonne à une source de mise à jour générées par un serveur. Lors d »une mise à jour, une notification est envoyée au client.
Ressources :
WebRTC
WebRTC est un protocole de communication audio, vidéo en temps réel sans plugin proposé par Google. Il sera ainsi possible d’effectuer des appels téléphoniques, du partage de vidéo ou du P2P par exemple.
Ressources :
Edition en ligne
Inline editing permet de définir du contenu éditable par l’utilisateur. Il suffit d’ajouter l’attribut contenteditable=true afin de rendre l’édition possible.
Page Visibilty
L’API Page Visibility permet de savoir si votre page est en cours de visualisation et effectuer des traitements en fonction de cet état. On pourra ainsi mettre en pause une vidéo, un jeu ou un diaporama, arrêter les appels serveurs qui impactent votre serveur, … Cette API est encore jeune et les navigateurs l’implémentent avec des préfixes (-moz, -o, -webkit, -ms).
Ressources :
- Une introduction à l’API Page Visibility sur HTML5 Rocks [en]
- Présentation de Visibility.js, une librairie JavaScript permettant de s’abstraire des différentes implémentations des navigateurs
Page Visibilty : c’est le nouveau megaupload qui va être content pour nous obliger à regarder son décompte :p
Encore une, encore une :p
http://www.w3.org/TR/push-api/