Le W3C a finalisé très récemment les spécifications de HTML5. Mais les navigateurs récents intègrent déjà un bon nombre de ces nouvelles fonctionnalités, et prennent en charge les nouvelles API.
Avec l’essor de l’internet mobile, HTML5 permet de gérer les contraintes et possibilités qui en découlent (géolocalisation, gestion de la batterie, application hors ligne, stockage local…). Mais le mobile n’est pas le seul concerné. Voici un petit tour d’horizon de quelques API qui ouvrent des perspectives intéressantes.
Le but de cet article n’est pas de vous apprendre à coder avec ces nouvelles API. Pour cela, j’ai mis quelques liens pour vous donner des premières portes d’entrée (et cela vous permettra de découvrir quelques sites ou blogs), une recherche sur le web vous donnera plus d’informations sur chacune de ces API. L’idée de cet article est plutôt de vous présenter tout ce qu’il est déjà possible de faire avec HTML5. Et vous allez voir que cela donne beaucoup d’idées d’applications concrètes. Pour les nouveautés en CSS3, je vous invite à vous rendre sur cet article.
Geolocalisation
Permet d’avoir des renseignements sur la position de l’utilisateur. Les possibilités offertes sont alors importantes, et permettent d’afficher des informations locales.
Pour de plus amples informations, voici deux liens qui vont donneront une vision très complète :
http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html
http://debray-jerome.developpez.com/articles/l-api-geolocalisation-en-html5/
Fullscreen
Permet de passer le navigateur en mode plein écran. Cela peut avoir une utilité notamment dans le cadre de jeux HTML5, des photos ou des vidéos.
Un tuto rapide ici : http://html5professor.com/tutoriels-18.html
Un bémol toutefois sur cette API et l’hameçonnage :
http://www.developpez.com/actu/48554/HTML5-l-API-FullScreen-du-pain-beni-pour-l-hameconnage-Un-expert-imagine-un-type-de-fishing-particulierement-vicieux/
getUserMedia
Permet de capturer du son ou de la vidéo via le matériel de l’internaute (webcam, micro). Ainsi, plus besoin d’application tiers ou de plugins pour y arriver. Magique non ?
Un tuto : http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Battery Status
Permet d’accéder à l’état de la batterie. Là encore, on peut d’ores et déjà imaginer un certain nombre d’applications concrètes : tester l’impact d’une portion de code sur la batterie, ne permettre une action que s’il reste suffisamment de charge, aiguiller en cas de batterie presque vide vers des pages moins consommatrices…
Un tuto ici : http://www.smartjava.org/content/html5-access-battery-status-through-javascript
Web Storage
Permet de sotcker localement des données. C’est le cookie du futur en quelque sorte, avec un accès facilité et une plus grosse capacité de stockage.
Un tuto : http://html5professor.com/tutoriels-17.html
Mise à jour du 1er mars : Attention, une faille vient d’être découverte dans cette API qui permet potentiellement de remplir le disque dur d’un internaute, les détails ici.
Offline web application
Avec l’internet mobile, le souci c’est que le signal n’est pas garanti, et on peut se retrouver par moments à n’avoir pas de connexion internet. C’est là qu’intervient cette API qui permet de gérer le fait d’être connecté ou non, et de garantir un fonctionnement de l’application même sans accès internet. Les éléments qui doivent être envoyés avec un accès sont mis en attente jusqu’au rétablissement du signal.
Un tuto : http://www.html5-css3.fr/html5/tutoriel-application-web-offline-html5-cache-manifest
Web Workers et Web Messaging
Permet de faire du mutli-threading et de gérer des tâches de fond en javascript. Ils vont pouvoir communiquer avec le programme principal via les Web Messaging.
Un tuto très complet : http://www.siteduzero.com/informatique/tutoriels/html5-web-workers-le-monde-parallele-du-javascript
Un deuxième pour la route : http://anders.janmyr.com/2013/02/web-workers.html
Notifications
Permet d’afficher des notifications de bureau à l’utilisateur (une fois qu’il a accepté d’en recevoir pour un site donné).
Deux tutos : http://www.html5rocks.com/en/tutorials/notifications/quick/
et http://www.jquery4u.com/html5-2/html5-desktop-notifications/
Canvas
Permet de définir une zone dans lequel il va être possible de dessiner, d’animer, d’interagir… Les possibilités sont infinies. Cela permet d’imaginer des jeux en HTML, ce qui n’était possible avant que via un plugin externe comme Flash.
Un tuto orienté interaction : http://inserthtml.developpez.com/tutoriels/javascript/interactivite-avec-balise-html5-canvas/
Un autre orienté dessin 2D : http://www.alsacreations.com/tuto/lire/1484-introduction.html
Et un site dédié uniquement à des exemples de réalisation : http://www.canvasdemos.com/
Web Sockets
Permet une connexion bi-directionnelle entre le client et le serveur. Cela permet de déclarer une connexion qui peut rester ouverte, et où les informations circulent sans entêtes (gain de Ko). Les Websockets vont être amenés à terme à remplacer Ajax en permettant de vraies application temps réel.
Un tuto : http://www.html5rocks.com/en/tutorials/websockets/basics/
Server-Sent Events
Permet de recevoir des informations du serveur. Contrairement au Web sockets précédemment cités, il n’y a pas de canal bi-directionnel (serveur vers client), mais cela nécessite peu de ré-écriture de code pour des applications déjà existantes, contrairement aux web sockets.
Un tuto : http://www.html5rocks.com/en/tutorials/eventsource/basics/
History
Permet de gérer et maîtriser l’historique de navigation, qui dans des sites web avec beaucoup d’Ajax peut devenir compliquée.
Un tuto : http://diveintohtml5.info/history.html
Drag & Drop
Support natif du Drag & Drop.
Un tuto : http://www.html5rocks.com/en/tutorials/dnd/basics/
Link Prefetching
Permet de précharger la page indiqué par le lien. Ainsi, quand l’internaute clique sur le lien, la page est immédiatement affichée car elle a déjà été chargée en tâche de fond. A utiliser malgré tout avec parcimonie.
Un tuto : http://davidwalsh.name/html5-prefetch
Navigation Timing
Permet de faire des mesures de performance sur les chargements de vos pages, de façon native. Quand on sait que le temps de chargement d’une page est un critère de perte potentiel d’internautes, et qu’il est aussi pris en compte par Google, cela peut être un outil intéressant pour améliorer ses développements.
Un tuto : http://www.html5rocks.com/en/tutorials/webperformance/basics/
Web Speech API
Permet d’utiliser la reconnaissance vocale sur les pages web. L’API permet de faire le lien avec un service en ligne.
Un tuto : http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API
Web Telephony
Permet de gérer les appels téléphoniques, encore pour l’instant (18 juin 2013) au statut de brouillon.
Les specs W3C : http://telephony.sysapps.org/
Voilà pour un tour d’horizon des principales API HTML5 (il en existe d’autres). J’espère que cela vous aura donné envie d’approfondir la question. Vous pouvez d’ores et déjà utiliser toutes ces nouvelles fonctionnalités, gardez juste à l’esprit qu’elles ne seront pas supportées par tous les navigateurs.
