Les API JavaScript HTML5 que vous pouvez utiliser

Et pour aller encore plus loin dans votre développement de sites HTML5, voici une liste d’API JavaScript très intéressantes.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Les API JavaScript HTML5 que vous pouvez utiliser

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours, je voulais partager avec vous les API HTML 5 disponibles. Il faut savoir qu’il y a plusieurs API qui sont en cours de développement avec HTML 5 pour simplifier, ajouter de plus en plus d’interactivités très facilement grâce à 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), ça permet à l’utilisateur de déplacer des éléments, aujourd’hui il y a des FrameWorks, jQuery, Dojo et MooTools qui propose le drag/drop, cette API sera une alternative standardisée et implémentée en native dans les navigateurs.

Vous avez également l’API Web Workers pour les nouveaux moteurs de JavaScript il faut savoir que dans les sites Internet il y a de plus en plus de JavaScript, et ça effectue des opérations beaucoup plus complexes, plus longues à utiliser, donc l’utilisateur attend, et le déroulage d’une page Web est séquentiel, on charge, ça affiche, on charge, ça affiche, et si l’exécution du script JavaScript est très long, ça bloque le chargement de la page et donc l’affichage de la page, et l’utilisateur est frustré. Cette API permet d’exécuter des scripts en parallèle, donc on charge, on exécute plusieurs scripts, en même temps, et donc il y a toujours l’affichage de la page qui déroule, ainsi les performances des applications sont bien meilleures et l’utilisateur, son expérience est bien meilleure également, car la page continue de s’afficher tout en même temps, en chargeant des scripts JavaScript simultanément.

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, et 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, prochains mois.

Vous avez l’API Web SQL Database ça 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 vous utilisez PHP, avec des bases de données gérées par votre hébergeur via Apache, PHP MySQL, et donc grâce à cette API Web SQL Database vous pourrez 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, on ne fait pas appelle à SQL light, c’est toujours une base de données stockée par le navigateur coté internaute.

Vous avez l’attribut contentEditable, très pratique, avant l’interaction avec les utilisateurs, il fallait mettre en place des formulaires pour récupérer des informations, l’utilisateur renseignait des champs de formulaire, du texte, des checkbox radio, des grands champs de textes, 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 on ne recharge jamais la page, donc l’URL ne change jamais, et donc l’historique du navigateur n’est plus mis à jour, cet API, l’API History elle corrige cet inconvénient en permettant de modifier dynamiquement l’URL dans la barre d’adresse du navigateur et donc d’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 rechargez que des éléments d’une page, vous pouvez mettre à jour l’historique du navigateur.

Vous avez également l’API File, aujourd’hui les fonctions de fichiers sont avec un champ du formulaire, input tye = file, cette API, elle permet de sélectionner des fichiers par un simple glisser/déposer, rappelez-vous, si vous utilisez les blocs de type WordPress, pour ajouter un média vous pouvez faire glisser/déposer des médias directement dans WordPress et ça les envoie automatiquement 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, et donc l’objectif de cette API est de gérer l’upload asynchrone de fichiers.

Vous avez les WebSockets qui sont de plus en plus utilisés avec la technologie à page, c’est une page web elle 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 qui permet de développer des applications en temps réel comme par exemple le trafic automobile dans une ville, Google Maps, il peut afficher le trafic automobile, vous pouvez voir quand il y a des bouchons ou non sur l’autoroute dans une ville, et tout ça utilise les WebSockets.
Il y a bien évidemment d’autres API JavaScript qui sont disponibles et en cours de développement, comme HTML média capture, pour améliorer les formulaires audio et vidéo. File Système API pour créer des arborescences et gestion de fichiers, un peu comme vous avez dans votre Windows, dans Mac OS, dans Linux, les notifications Web, la cryptographie donc crypter les documents avec l’API Web cryptographie, 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, donc le multitouche de votre tablette ou de votre Smartphone, directement grâce à HTML 5, la vibration pour utiliser la notion de vibreur sur votre Smartphone, avoir accès à la batterie, l’état de charge de votre batterie, de votre smartphone, de votre ordinateur portable, de votre tablette grâce à cette API HTML 5.

Votre plan d’actions !

HTML 5 n’en est qu’à son début, il va y avoir énormément d’API, de possibilités qui se développent dans les prochains mois, dans les prochaines années, bien évidemment, il y aura d’autres cours sur Développement Facile consacrés à ces API en HTML 5, JavaScript et CSS 3, si vous avez des questions, posez-les directement sous ce cours vidéo, je vous encourage à me dire dans les commentaires les prochains cours HTML5, CSS 3 et JavaScript que vous souhaitez, ils seront traités en priorité, et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Quelles API JavaScript HTML5 utilisez-vous ?

Dites-moi dans les commentaires, les API HTML5 que vous avez implémentés dans vos sites web, avec leurs avantages respectifs.