Langage avancé API HTML5

Le terme HTML5 ne fait pas uniquement référence au langage HTML. En fait, HTML5 représente:

l'évolution du langage HTML
l'évolution des CSS (CSS3)
l'ajout de nouvelles API JavaScript

C'est d'ailleurs surtout cette dernière partie qui apporte à HTML5 son coté le plus intéressant, avec les notions d'interactions avancées, de stockage coté client, d'accès au système et au hardware, etc. Voici quelques APIs les plus intéressantes:

Device Orientation#

L'API Device Orientation permet de récupérer la position d'un device dans l'espace. Les trois angles Alpha (Z), Beta (X) et Gamma (Y) sont ainsi connus.

Ecoute l'évènement

window.addEventListener('deviceorientation', function(event) {
    let a = event.alpha; // autour de Z
    let b = event.beta; // autour de X
    let g = event.gamma; // autour de Y
}, false);

Un exemple complet sur HTML5Rocks

Storage#

Une des principales avancées de HTML5 et sans doute le stockage client. Il est désormais possible de stocker de manière très simple de grosses quantités de données, sans la lourdeur des cookies. Pour cela, plusieurs options:

localStorage pour un stockage persistent des données
sessionStorage pour un stockage pendant la session de l'utilisateur

Les deux stockages se font sous la forme de paire clé/valeur.

Stockage et récupération de données

localStorage.setItem('value', value);
localStorage.getItem('value');

Il n'existe pas de limite de stockage. Les navigateurs vont cependant faire en sorte de réserver au minimum 5Mo.

Exercice - Stockage#

Nous allons réaliser un compteur de click (avec persistance des données)

Pour cela, dans une page HTML :

créez deux boutons (Ajoute et Enlève)
lors du click sur chaque bouton, ajoutez ou enlevez 1 à un compteur (initialisé à 0)
affichez cette valeur dans la page
stockez cette valeur dans le stockage local persistant (cherchez où le navigateur stocke cette donnée)

Enfin, faites en sorte que le stockage local soit utilisé lorsque l'on recharge la page et/ou ferme et réouvre l'onglet

Indexed DB#

L'API IndexedDB va encore plus loin puisqu'elle offre une véritable base de données indexée au sein du navigateur. Pour en savoir plus, voir cet exemple de création d'une todolist

FileAPI#

La File API permet la manipulation de fichier coté client. Cela permet par exemple de lire une image lors du drag & drop de celle-ci depuis le système.

Upload d'images en drag & drop

<div class="drop">Déposez-ici !</div>

.drop {
    width: 200px;
    height: 200px;
    border: 5px dashed #333;
}

// element
let drop = document.querySelector('.drop');

// events
drop.addEventListener('dragover', dragover);
drop.addEventListener('drop', dropin);

// helpers
function dragover (e) {
    // event dragover doit obligatoirement empêcher l'action par défaut du navigateur
    e.preventDefault();
};
function dropin (e) {

    // empêcher l'action par défaut du navigateur (pour éviter l'affichage de l'image)
    e.preventDefault();

    // récup du fichier transferé, et nouvel objet FileReader
    let file = e.dataTransfer.files[0],
        reader = new FileReader();
    // event load sur le FileReader
    reader.addEventListener('load', function (event) {
        // met l'image en arrière-plan de l'élément (via CSS)
        drop.style.background = 'url(' + event.target.result + ') no-repeat center / 100% 100%';
    });
    // lit le fichier reçu en Data URL (base 64)
    reader.readAsDataURL(file);
};

D'autres méthodes existent, comme FileReader.readAsArrayBuffer(), FileReader.readAsText() ou encore FileReader.readAsBinaryString()

Graphiques#

De gros efforts ont été faits concernant l'environnement graphique dans le navigateur. Il est aujourd'hui possible de dessiner en 2D, en vectoriel et même en 3D.

Canvas#

L'élément HTML <canvas> crée un contexte graphique 2D/3D de dessin via JavaScript. Pour le mode 3D, on parle alors de WebGL.

Création d'un rond en 2D

<canvas id="canvas" width="200" height="100"></canvas>

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

Exercices - Art génératif#

Creéz un élément <canvas> en HTML
Récupérez cet élément et son contexte 2D en JS
Définissez la largeur et hauteur du <canvas> (320px * 320px)
Créez une fonction dessine(x, y, largeur, hauteur) qui doit dessiner une diagonale: un trait du point x/y, jusqu’au point x+largeur/y+hauteur
Testez cette fonction
Créez une fonction vraiOuFaux() qui doit renvoyer vrai ou faux de manière aléatoire
Utilisez cette fonction vraiOuFaux() dans dessine() pour aléatoirement dessiner une diagonale du haut/gauche vers le bas/droite OU depuis le haut/droite vers le bas/gauche
Enfin, définissez un quadrillage et appellez la fonction dessine() pour chaque case
- Créez une variable pas (80px par exemple, soit 4 cases * 4 cases)
- Créez une double boucle (i et j augmentant de pas)
- Appellez dessine() en lui passant les bons paramètres (x, y et pas)
- Modifiez le pas à votre convenance

Voici une démo simple et une plus complexe

Des démos WebGL: Pablo The Flamingo.

Un framework à découvrir pour une prise en main rapide de WebGL: BabylonJS

WebSockets#

Par défaut, les échanges client/serveur s’effectuent au travers d’une connexion HTTP de manière unidirectionnelle. Le client demande une info au serveur et le serveur lui répond (possiblement en arrière plan grâce à AJAX).

L’API WebSockets est basée sur les socket TCP qui permettent d’aller plus loin en établissant une connexion ouverte bi-directionelle entre le serveur et les clients connectés. Les clients peuvent alors envoyer un message au serveur et celui ci peux le renvoyer en broadcast, c’est à dire à tous les clients, sans demande de leur part. Les échanges sont simplifiés par des entêtes réduites.

Cela est notamment nécessaire dans le cadre du web temps-réel.