L’arrivée de l’HTML5 et de ses très nombreuses fonctionnalités va causer un grand bouleversements dans le développement de sites web et d’applications riches. Cette technologie apporte son lot de nouveautés sur la sémantique HTML, avec de nombreuses nouvelles balises, et se synchronise avec la démocratisation du CSS3. Elle bouscule également le support multimédia sur le web, actuellement dominé par le Flash, en permettant aux développeurs d’insérer des contenus multimédias nativement utilisables par le navigateur.
Cet article va quant à lui aborder un tout autre thème que sont les nombreuses nouvelles fonctionnalités “non-multimédia” telles que les websockets, la géolocalisation ou le stockage de données côté client. L’API Javascript s’est en effet énormément enrichie avec l’HTML5, et nous allons voir ensemble ces nouveautés avec quelques exemples.
LocalStorage (stockage de données côté client)
Le LocalStorage permet de stocker des informations dans le navigateur de l’utilisateur. Ces informations sont extrêmement faciles à manipuler, et contrairement aux cookies, elles ne sont jamais envoyées au serveur. Il est également important de noter que chaque navigateur a son propre espace de stockage. Par conséquent, sauvegarder une information dans Firefox ne permettra pas de l’utiliser sous Chrome par exemple.
Une telle fonctionnalité peut par exemple s’utiliser dans le cadre d’une application hors-ligne, telle qu’une page web servant de “Liste des tâches” ou tout simplement pour sauvegarder un identifiant de connexion.
Son utilisation est on ne peut plus simple.
Sauvegarder une valeur dans le navigateur se fait via la fonction setItem :
window.localStorage.setItem("Nom", "Valeur");
Récupérer une valeur se fait via la fonction getItem :
window.localStorage.getItem("Nom");
Base de données SQL locale
Lorsque vous développez une application web, et que vous souhaitez stocker des données en grande quantité, et les organiser correctement, vous pouvez utiliser la nouvelle base de données SQL locale plutôt que le LocalStorage qui est assez limité.
Voici comment exécuter une requête SQL locale en Javascript :
var db = window.openDatabase("Nom", "Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM Table", [], successCallback, errorCallback);
});
On peut notamment voir par cet exemple qu’il contient une ouverture de connexion à la base de données, la requête sous forme de string au format SQL standard, ainsi qu’une fonction de CallBack, qui sera appelée avec le résultat de la requête SQL qui pourrait par exemple être la fonction suivante :
function successCallback(transaction, results)
{
var message = "";
for (var i=0; i<results.rows.length; i++) {
var row = results.rows.item(i);
message += row["name"] + ",";
}
alert(message);
}
Cette fonction affiche une suite de noms récupérés dans la base SQL, grâce à l’objet "results" automatiquement généré lors de l’exécution de la requête SQL.
Applications Web Offline
Une application web offline au sens de l’HTML5 offre une grande flexibilité au moment du changement Online - Offline. C’est une notion particulièrement importante du fait que nous sommes dans l’ère de l’avènement de la téléphonie smartphone, lesquels peuvent voir leur connexion fréquemment coupée.
La plupart des applications de gestion d'e-mails ou de messagerie instantanée possèdent des fonctionnalités comme “l’envoi lorsque la connexion sera récupérée”, et c’est exactement ce qui nous intéresse dans les applications web offline en HTML5.
L’essentiel de cette technique passe par la mise en cache de fichiers, qui se déclare dans un fichier MANIFEST.
Il se déclare en attribut de la balise html comme ceci :
<!DOCTYPE HTML>
<html manifest="test.manifest">
Dans ce fichier MANIFEST on liste les éléments à mettre en cache :
- CACHE MANIFEST
- index.html
- style/default.css
- images/logo.png
- images/backgound.png
D’autres sections peuvent être ajoutées comme par exemple les fichiers à ne pas mettre en cache, ou encore des fichiers alternatifs au cas où les premiers ne soient pas atteignables.
L’API Javascript fournit un objet ApplicationCache qui permet de mettre à jour le cache très simplement :
window.applicationCache.update();Ou encore d’invalider le précédent cache lorsque le nouveau est prêt :
window.applicationCache.swapCache();
L'objet window est maintenant doté d'une propriété booléenne online, accompagnée des évènements online et offline, afin d’adapter le traitement Javascript et utiliser par exemple le stockage local en attendant de retrouver la connexion.
La géolocalisation
Cette nouveauté apportée par l’HTML5 est l'une des plus attendues. Il était déjà possible de tracer une IP pour savoir à peu près où était situé l’utilisateur. C’est maintenant beaucoup plus simple grâce à l’intégration native de la géolocalisation dans le navigateur et dans l’API Javascript.
L’API permet de très nombreuses choses comme le suivi de la position dans le temps ou encore le calcul de la vitesse. Pour cet exemple, nous nous intéresserons uniquement à l’obtention des coordonnées de l’utilisateur en Javascript.
La récupération des données de géolocalisation fonctionne également par CallBack, comme montré ci-dessous :
navigator.geolocation.getCurrentPosition(showPosition, onError);
function showPosition(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
// Traitement
}
La fonction getCurrentPosition prend en paramètre deux fonctions. Elle va injecter en paramètres de la première les coordonnées récupérées afin qu’elles soient traitées. Cet exemple montre à quel point il est facile d’utiliser la géolocalisation et les nombreuses possibilités qu’elle offre en très peu de lignes de code. Ceux qui souhaitent aller un peu plus loin pourront suivre un tutoriel de géolocalisation en HTML5 et exploiter les coordonnées grâce à l'API Google Maps.
Web Forms Avancés
La vérification des données de formulaire envoyées par un client est une préoccupation présente dans 100% des projets web. Que ce soit côté client en Javascript ou côté serveur, il est extrêmement important de s’assurer de la validité de ces informations. Les formulaires avancés HTML5 sont là pour ajouter une couche de sécurité dans les informations envoyées par les clients.
En pratique, il suffit d’ajouter un attribut aux balises input des formulaires afin d’en spécifier le typage. Ensuite, le CSS se charge de la mise en forme avec le pseudo-format :invalid.
<!--
:invalid { background-color: red; }
-->
<input type="range" value="0" />
<input type="search" />
<input type="text" />
<input type="color" value="blue" />
<input type="number" value="123" />
<input type="email" value="[email protected]" />
<input type="tel" value="1234" />
De très nombreux attributs existent, comme l’illustre cet exemple.
Une liste plus complète se trouve sur le site du W3C.
Il est cependant important de noter que pour le moment, seul le navigateur Opera les implémente totalement.
Le Drag and Drop
Il est déjà possible d’effectuer des Drag and Drop en Javascript en utilisant des bibliothèques Javascript (jQuery UI par exemple). HTML5 veut rendre le “Glisser-déposer” natif aux navigateurs. Pour ce faire, il faut d’abord comprendre le fonctionnement du Drag And Drop. En HTML5, le but n’est pas de déplacer visuellement des éléments sur l’écran, mais d’avoir une réelle interactivité avec les éléments HTML.
Pour illustrer ceci avec un exemple nous avons besoin d’un élément à déplacer("dragMe", ainsi qu’une zone dans laquelle déposer l’élément ("dropHelloHere").
L’élément est rendu "draggable" comme ceci :
<h1 id="dragMe" draggable="true" ondragstart="drag(this, event)">Hello</h1>Ensuite, on crée la zone de destination :
<div id="putHelloHere" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"></div>Enfin, on a besoin d’un peu de Javascript pour lier le déplacement aux actions :
function drag(target, e) {
e.dataTransfer.setData("Test", target.id);
}
function drop(target, e) {
var id = e.dataTransfer.getData("Test");
// Traitement
}
Un évènement est déclenché au début du drag, qui stocke l’id de l’élément en cours de drag. Une fois l’élément “droppé”, la fonction drop() récupère l’id en question et peut effectuer un traitement sur celui-ci.
On notera que des évènements peuvent également être placés lors du survol de la souris (ou du doigt) de la zone dans laquelle on veut déposer l’élément.
Les Web Workers
Les Web Workers ont pour mission d’exécuter des traitements lourds et gourmands en ressources processeur. Habituellement, lorsque du code Javascript effectue d’importants traitements, le navigateur est paralysé (comme dans le cas d’un bug avec une boucle infinie).
Un navigateur est donc totalement monotâche et il fallait ruser avec des timers pour ne pas faire crasher le traitement.
Avec les Web Workers, on peut placer un traitement en tâche de fond et communiquer avec lui pendant qu’il est exécuté.
Voici un exemple concret d’utilisation :
appel-worker.js
var worker = new Worker('worker.js');
worker.onmessage = function(event) { alert(event.data); };
On crée un worker (qui est toujours situé dans un fichier séparé), puis on lui lie une fonction “onmessage” qui va afficher un popup avec la réponse du worker.
worker.js
self.onmessage = function(event) {
// Traitement
self.postMessage("Réponse");
}
Un Worker communique toujours par envoi de String. Ici il exécute un traitement puis renvoie “Réponse” dès qu’il a terminé.
Les Websockets
Elles sont l’une des nouvelles fonctionnalités HTML5 les plus puissantes. La communication entre un client et un serveur s’effectue toujours lorsque le client le demande, elle est mono-directionnelle. L’arrivée de l’AJAX n’a fait que contourner cette faiblesse en envoyant des requêtes régulièrement afin d’actualiser l’information affichée à l’utilisateur. L’arrivée des Web Sockets révolutionne cette communication en autorisant le navigateur du client à réagir lorsque le serveur demande à interagir avec lui.
Encore une fois, l’utilisation de cette fonctionnalité HTML5 se veut extrêmement simple.
Tout d’abord on initialise la connexion au serveur de socket :
var socket = new WebSocket("ws://test.example.com");
Ensuite on peut envoyer un message au serveur de socket afin de lui confirmer la connexion :
socket.onopen = function(event) {
socket.postMessage("Hello, WebSocket");
}
Puis on peut faire réagir le navigateur lorsque l’on reçoit une réponse du serveur :
socket.onmessage = function(event) { alert(event.data); }Enfin, on affiche un message lorsque la connexion est fermée :
socket.onclose = function(event) { alert("closed"); }
On obtient ainsi une interactivité avec le serveur parfaitement synchronisée, contrairement aux méthodes AJAX qui ont toujours un temps de latence, qui sert à ne pas surcharger le serveur d’appels de vérifications.
Conclusion
L’HTML5 devient de plus en plus concret et les navigateurs s’attèlent à intégrer le plus de fonctionnalités possibles. Pour le moment Chrome, Opera et Safari sont les plus avancés dans le domaine. Firefox sort très bientôt en version 4, ainsi qu’Internet Explorer 9, qui sont de loin les navigateurs les plus utilisés, et qui vont réellement être le coup d’envoi de l’HTML5.
En attendant il est bien entendu possible de se familiariser avec toutes ces fonctionnalités en les testant sur les navigateurs compatibles.
Pour terminer, voici un template extrêmement complet de site HTML5, il s’agit d’un projet de qualité réalisé par un ingénieur Google, grand acteur de l’HTML5. C’est un excellent point de départ pour tout développeur qui souhaite se plonger dans un site nouvelle génération.
Source : Blog MTI
