Les API HTML5

Dans ce premier article, nous détaillerons les différentes APIs (Application Programmation Interface) introduites en HTML5.

HTML5 a introduit ces nouvelles APIs pour aider notamment à la création d’applications web en dépendant le moins possible de technologies extérieures comme les librairies du langage Javascript.

Toute ces APIs ne sont pas validés par les spécifications WHATWG et W3C comme le précise l’image ci-dessous. Nous tenterons quand même de donner dans l’ensemble, les nouvelles possiblités offertes par ces APIs.

HTML5_APIs_and_related_technologies_taxonomy_and_status.svg

Les APIs en HTML5 ainsi que les technologies associées (Octobre 2014)

Nous allons ici donner quelques exemples d’APIs, leurs objectifs et des exemples d’utilisations.

Drag and Drop

Cette API permet de gérer le Drag and Drop d’éléments sans passer par l’utilisation de librairie externes en Javascript comme Jquery ou Dojo.

Elle utilise pour cela le nouvel attribut <draggable> : en le mettant à <true> comme valeur, l’utilisateur pourra déplacer l’élement concerné comme un texte, une image …

Il existe ensuite un premier événement <dragstart> qui se déclenche lorsqu’un objet commence à être déplacé. L’événement <dragend> quand à lui se déclenche lorsque le déplacement de l’élément est terminé.

En plus de ces événements de « Drag », il existe aussi des événements spécifiques au « Drop » :

  • <dragenter>, se déclenche quand l’élément entre dans une zone de drop.
  • <dragover>, se déclenche quand l’élement de déplace dans une zone de drop.
  • <dragleave>, se déclenche quand l’élément quitte la zone de drop.
  • <drop>, se déclenche lorsque l’élément est déposé dans une zone de drop.

Les navigateurs interdisent par défaut de déplacer et déposer des éléments n’importe ou dans une page web, voilà pourquoi il est nécessaire de passer par le Javascript pour ajouter les différents événements par la méthode addEventListener et lancer les fonctions voulues.

On utilise l’objet <dataTransfert> et ses méthodes comme <setData()> ou <setDragImage()> pour gérer la sauvegarde de chaine de caractères ou une image utilisée lors du déplacement de l’objet.

Le drag and drop permet de rendre les applications web plus dynamiques en proposant à l’utilisateur de choisir les éléments qu’ils souhaitent, en déplacant un produit dans son panier sur un site e-commerce mais aussi d’importer des fichiers sur une application comme l’importation de médias sous le CMS WordPress.

Canvas

L’élément sous le nom de <canvas> désigne un espace de pixels dans la page web ou de nombreuses fonctions graphiques deviennent disponibles par l’intermédiaire de Javascript. On peut tracer des courbes, lancer des animations, réaliser des jeux-vidéos …

Cet espace se désigne grâce aux balises éponymes <canvas> et </canvas>.

Les différents avantages de canvas sont sa bonne gestion sous mobile, sa performance, sa validation comme standard par le W3C et le WHATWG et ses nombreuses possibilités. Ce dernier est aussi un défaut pour certains car pour les développement de jeux-vidéos par exemple, on fait appel à d’autres modules pour compléter Canvas.

canvas-titre

Quelques exemples de ce que l’on peut faire en Canvas

On utilise ensuite en Javascript les méthodes <getElementById()> et <getContext()> pour utiliser les fonctions de dessins 2D.

Toutes ces fonctions utilisent un système de coordonnées (x,y) dont l’origine (0,0) se trouve en haut à gauche de l’élément <canvas>.

Canvas est souvent considéré comme le remplacant de Flash, cependant ces deux technologies ont leurs propres avantages et inconvénients. Mais le débat récent sur les failles de sécurité à répétition de Flash pourrait renforcer l’utilisation de Canvas et des balises multimédias <video> et <audio>.

Les balises médias

Ces deux balises <video> et <audio> permettent comme leurs noms l’indiquent de jouer des vidéos et des sons dans les pages web.

On précise ensuite à l’aide de la balise <source> ou l’attribut <src> l’objet vidéo ou audio à lancer. On peut proposer plusieurs sources sous différents formats et indiquer des codecs nécessaires afin de rendre le média accessible au plus grand nombre d’utilisateur.

Les balises <video> et <audio> possèdent une liste d’attribut comme <width> et <height> gérant la taille de l’élement vidéo ou <autoplay> permettant de lancer le média automatiquement une fois téléchargé par le navigateur.

Une fois le média indiqué, on accède à un grand nombre de fonctionnalités permettant le gérer les événements de lecture du média.

Quelques exemples :

  • <loadstart>, se déclenche lorsque le chargement du média débute.
  • <pause>,se déclenche lorsque la lecture du média est interrompue.
  • <play>, se déclenche lorsque le média débute ou reprend.
  • <progress>, se déclenche pour informer sur la progression du téléchargement du média.

Offline

Cette API permet de continuer d’utiliser certaines fonctions des applications web même lorsque la connexion est coupée. Pour cela l’API utilise l’application cache du navigateur afin de réduire les échanges clients/serveurs.

On déclare ensuite un fichier manifest dans la balise html comme ceci :

<html manifest="site.manifest">

Il nous reste qu’à créer le fichier site.manifest qui commence par la ligne « CACHE MANIFEST » et nous permet de définir un certain nombre d’options que sauvegardera le navigateur sur la page web. On peut également y ajouter des commentaires.

CACHE permet par exemple permet de lister les fichiers à enregistrer comme les feuilles de styles ou le logo.

FALLBACK permet de permet de donner des fichiers en local si ceux ci ne sont plus disponibles en lignes.

NETWORK liste les fichiers qui requiert une connexion internet.

On doit ensuite déclarer le MIME-type du fichier manifest en configurant un fichier.htaccess et ajouter la ligne :

AddType text/cache-manifest manifest

Bien sur il faut faire attention car le cache sera prioritaire sur les pages affichées.

L’objet de l’API HTML5 Javascript appelé window.applicationCache permettra de développer des fonctionnalités plus avancés en déclarant des fonctions à éxécuter pour par exemple sauvegarder la saisie d’un utilisateur si sa connexion coupe.

Web Sockets

L’API permet d’établir des connexions par le biais de sockets entre le navigateur web et le serveur.

On peut utiliser le constructeur <WebSocket()>  pour créer le socket de connexion et commencer la communication.

Par le biais de cette communication, on peut alors envoyer des messages comme une simple chaîne de caractère <send('Coucou')>, des images en les convertissant préalablement en binaires ou des fichiers.

L’API Web Sockets est encore jeune et pas totalement implanté sur les navigateurs, il y a encore un certain nombre de problèmes dus par exemple à l’utilisation des proxy et les nouvelles technologies côté serveur sont plus adaptés pour des communication longues et nombreuses comme Socket.IO en Node.js ou pywebsocket en Python.

Geolocalisation

L’API permet de connaître la position de l’utilisateur afin d’adapter les services de l’application à sa localisation comme par exemple la météo.

Le navigateur utilise pour cela 4 moyens :

  • Le satellite GPAS (mobiles)
  • La triangulation GSM/3G (mobiles)
  • La triangulation WiFi (mobiles et bases de données adresses MAC)
  • L’adresse IP (correspondance avec bases de données)

Cette API repose sur l’objet <geolocation> qui une fois déclaré lancera la demande sur navigateur confirmant que l’on peut récupérer ses données de positions.

geolocalisation-popup

Confirmation du navigateur

On peut ensuite utiliser deux méthodes : <getCurrentsPosition()> pour un ciblage ponctuel et <watchPosition()> pour un suivi continu

Ces méthodes vont récupérer les coordonnées de latitude et de longitude et même la vitesse de l’objet. On peut ensuite utiliser ces données avec l’API de Google Maps pour faire correspondre les données recueillies sur une carte.

La Batterie

On peut accéder à l’objet <battery> donnant l’état actuel du chargement du périphérique. Cela permet notamment par exemple de télécharger moins d’éléments graphiques si l’utilisateur possède très peu de charge comme c’est souvent le cas sur mobile.

Une fois l’objet récupéré, on peut utiliser 4 méthodes :

  • <charging> sert à signaler si le périphérique est en charge ou non.
  • <chargingTime> indique le temps restant pour recharger la batterie.
  • <dischargingTime> indique le temps restant pour décharger la batterie.
  • <level> indique le niveau de batterie actual.

Windows 7 - Ultimate [Running]

Exemple d’application indiquant l’état de la batterie

Sources :

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s