Les API JavaScript HTML 5

Dans cet article, nous aimerions partager avec vous les API HTML 5 disponibles.

Il y a plusieurs API qui sont en cours de développement avec HTML 5 pour simplifier et ajouter de plus en plus d’interactivité très facilement grâce aux langages HTML 5, CSS et JavaScript.

Les API JavaScript avec HTML5

Voici les API JavaScript disponibles avec HTML 5 que vous pouvez utiliser en combinant les deux langages.

L’API glisser/déposer (drag/drop), permet à l’utilisateur de déplacer des éléments, aujourd’hui il y a des frameworks, comme jQuery, Dojo et MooTools qui proposent le drag/drop, mais cette API sera une alternative standardisée et implémentée en natif dans les navigateurs.

Vous avez également l’API Web Workers pour les nouveaux moteurs de JavaScript.

Dans les sites Internet, il y a de plus en plus de JavaScript pour effectuer des opérations beaucoup plus complexes et plus longues à utiliser.

Donc l’utilisateur attend… L’affichage d’une page Web étant séquentiel: la page charge, elle s’affiche, elle charge, elle s’affiche. Si l’exécution du script JavaScript est très long, cela peut bloquer le chargement de la page et donc l’affichage de la page, et l’utilisateur reste frustré.

Cette API permet d’exécuter des scripts en parallèle, donc la page charge, elle exécute plusieurs scripts en même temps. Et, il y a toujours l’affichage de la page qui déroule.

Ainsi, les performances des applications sont bien meilleures et l’expérience utilisateur est grandement améliorée. Car la page continue de s’afficher tout en chargeant des scripts JavaScript.

Vous avez également l’API Web Messaging qui permet de transmettre des chaînes de caractères entre différentes fenêtres ou balises iframe.

L’avantage c’est que ces chaîne de caractères peuvent être situées soit sur le même domaine, soit dans des domaines différents. Vous pouvez communiquer entre des domaines différents grâce à des balises iframe, des fenêtres grâce à l’API Web Messaging. Une API qui va être très importante dans les prochaines semaines et prochains mois.

Vous avez aussi l’API Web SQL Database. Elle permet de mettre une base de données côté internaute, stockée par le navigateur; elle est gérée par SQL Light.

Aujourd’hui, les bases de données que vous utilisez, sont des bases de données gérées par votre hébergeur via Apache, PHP MySQL. Grâce à cette API Web SQL Database, vous pouvez stocker des informations organisées sous forme de base de données directement dans le navigateur de votre internaute.

Vous avez l’API Indexed Database qui est une évolution de cette base de données. C’est-à-dire qu’elle est gérée par JavaScript, SQL Light n’est plus utilisé. C’est quand même toujours une base de données stockée par le navigateur coté internaute.

Vous avez également l’attribut contentEditable, vraiment très pratique.

Avant, pour mettre en place de l’interaction avec les utilisateurs, il fallait utiliser des formulaires pour récupérer des informations. L’utilisateur renseignait des champs de formulaire, du texte, des cases à cocher, etc.

Avec cet attribut, tout élément de la page devient éditable. C’est génial!

Plus besoin des formulaires, vous utilisez l’attribut contentEditable associé avec une API de stockage. Et vous pouvez considérablement améliorer l’interactivité JavaScript avec l’utilisateur. Pensez à cet attribut contentEditable, et à l’API de stockage pour encore améliorer vos sites Internet.

Vous avez l’API History. Rappelez-vous avec Ajax vous ne rechargez jamais la page, l’URL ne change jamais et l’historique du navigateur n’est plus mis à jour. Cette API, l’API History, corrige cet inconvénient en permettant de modifier dynamiquement l’URL dans la barre d’adresse du navigateur. Ainsi vous pouvez ajouter des pages dans l’historique. Toujours avec Ajax, sans recharger la page.

L’API History est très pratique surtout si vous avez un site Internet avec Ajax, où vous ne rechargez que des éléments d’une page. Vous pouvez continuer la mise à jour l’historique du navigateur.

Vous avez également l’API File. Aujourd’hui, les fonctions de fichiers s’effectuent avec un champ du formulaire, <input type="file" />. Cette API permet de sélectionner des fichiers par un simple glisser/déposer.

Rappelez-vous, si vous utilisez les blogs de type WordPress: pour ajouter un média vous pouvez faire un glisser/déposer des médias directement dans WordPress. Ces média sont automatiquement ajoutés dans vos sites WordPress.

Grâce à cette API File, vous pouvez implémenter la même chose sur vos sites Internet. Vous pouvez récupérer des informations utiles sur chaque fichier comme son nom, sa taille et son format. L’objectif de cette API est de gérer l’upload asynchrone de fichiers.

Vous avez aussi les WebSockets qui sont de plus en plus utilisés avec la technologie SPA pour Single Page Application.

SPA c’est une page web qui communique sans cesse entre le navigateur et le serveur, avec la technologie Ajax, et via le protocole http qui est un peu vieillissant et pas très performant.

L’objectif des WebSockets est de laisser la communication ouverte pendant un temps limité entre le navigateur et le serveur. Ce système de fonctionnement permet de développer des applications en temps réel.

Par exemple le trafic automobile dans une ville dans Google Maps, où vous pouvez voir quand il y a des bouchons ou non, sur l’autoroute, dans une ville. Toutes ces fonctionnalités utilisent les WebSockets.

Il y a bien évidemment d’autres API JavaScript qui sont disponibles et en cours de développement.

Par exemple HTML média capture pour améliorer les formulaires audio et vidéo.

File Système API pour créer des arborescences et gérer les fichiers, un peu comme vous avez dans votre Windows, dans Mac OS et dans Linux.

Les notifications Web, la cryptographie pour crypter les documents avec l’API Web cryptography, les contacts pour gérer votre carnet d’adresses avec cette API.

L’API caméra pour utiliser la webcam, que ce soit sur les smartphones, les tablettes ou les ordinateurs.

Touch Events Specification pour utiliser l’API multitouches. Anisi, vous pouvez profiter du multitouche de votre tablette ou de votre Smartphone, directement depuis HTML 5.

Avec ces API HTML 5, vous pouvez accéder à la fonction vibration, la notion de vibreur sur votre Smartphone. La batterie est également accessible, ainsi que son état de charge. Cette fonctionnalité est disponible sur les smartphones, les ordinateurs portables et les tablettes, toujours grâce à ces nouvelles API HTML 5.

Conclusion

Les API sont des éléments à ajouter en quelques lignes de code sur votre site pour vous aider à ajouter des fonctionnalités et/ou pour simplifier le code. Elles permettent d’avoir un code robuste et de partager du code avec d’autres développeurs.

HTML 5 n’en est qu’à son début, il va y avoir énormément d’API, de possibilités qui se développent rapidement. Bien évidemment, il y aura d’autres cours sur Développement Facile consacrés à ces API en HTML 5, JavaScript et CSS 3.

➡️ Cours JavaScript : maîtrisez les fondamentaux du langage de programmation web

Voila, vous pouvez maintenant briller en soirée …

Formations de Develop4fun

• Parcours pour devenir un programmeur web
• Cours JavaScript : maîtrisez les fondamentaux du langage de programmation web
• Apprendre à coder en HTML et CSS : Cours Complet
• Parcours pour devenir un programmeur de jeux vidéo
• Apprenez à créer des jeux 2D facilement avec LUA et LÖVE 2D
• Apprenez à programmer en C#
• Apprenez à programmer en C++