Présentation
Le terme « Web 2.0 » a débuté en 2004 pour signifier un changement de paradigme incluant notamment l’interopérabilité des contenus internet : ceux-ci doivent être lus par différents navigateurs, équipements, logiciels divers. Depuis, de nombreuses avancées ont eu lieu. La fin de Flash et de Java au sein des navigateurs au profit d’APIs natives HTML5 en sont des exemples édifiants. De nombreuses fonctionnalités ont été adjointes aux navigateurs et sont regroupées au sein du terme « APIs navigateur ». Utilisées par JavaScript, elles enrichissent l’utilisation des sites web et l’intégration du matériel client pour améliorer l’expérience utilisateur.
Cette formation vous propose un tour d’horizon des APIs navigateur : le « drag and drop » (glisser/déposer), la variable « navigator », le « localStorage » (stockage local), les APIs liées aux capteurs mobiles, mais également les Services Workers.
Objectifs de la formation
- Savoir créer un système de glisser/déposer sur une page web
- Savoir utiliser les Services Workers et le cache navigateur
- Savoir utiliser le stockage local
- Découvrir et utiliser les APIs liées aux capteurs mobiles (Sensor APIs)
Public
- Toute personne travaillant ou souhaitant travailler dans le développement web
Prérequis
- Des connaissances en JavaScript frontend sont nécessaires
Programme
1- Le Web 2.0
Historique et philosophie du Web 2.0
Le terme valise des « APIs navigateur »
La variable navigator
Attention à la compatibilité : utilisation de caniuse.com
2- Le glisser déposer
Pourquoi le drag and drop ? Introduction et usages
Créer un système de drag and drop
Validation des données et gestion d’erreurs
3- Le stockage local
Stockage local, définition et usages
Contraintes liées aux navigateurs et fragilité de la donnée
Utilisation du localStorage
Différences avec le stockage de session (sessionStorage)
4- Service Workers
Que sont les Services Workers ? Usages
Une page web accessible hors connexion ?
Gestion du cache et des requêtes
Gestion des erreurs
Communication entre le Service Worker et la page web
5- Sensor APIs
Capteurs accessibles du navigateur : avantages
Compatibilité navigateurs
Utiliser la lumière ambiante, l’accéléromètre et le gyroscope
Date de dernière modification : 26/10/2022
Organisation
Modalités d'évaluation :
Questionnaires à choix multiples (QCM) en fin de formation. L'intervenant formulera également une appréciation sur vos acquis pour l'entièreté de la formation.
Moyens pédagogiques :
Formation alternant la théorie et la pratique, avec un intervenant présentant la formation en direct. Possibilité de réaliser cette formation en face-à-face dans nos locaux, dans vos locaux d'entreprise ou à distance via visioconférence.
Une fois terminée, vous disposerez d'une attestation de suivi de la formation, ainsi que des contenus de cours relatifs au contenu présenté.
Informations pratiques :
En cas de dispense dans nos locaux, le matériel informatique est fourni et l'ensemble des commodités sont accessibles. Nos locaux sont également accessibles aux personnes à mobilité réduite : découvrir notre centre.
Retrouvez toutes les informations pratiques pour préparer votre formation sur notre page dédiée : informations pratiques.
Ces formations pourraient vous intéresser
- En savoir plus
Développement web : Canvas, SVG et WebGL
Les technologies web ont vu leur périmètre de fonctionnalités s’étendre de manière impressionnante ces dernières années : réalisation de formes statiques vectorielles avec SVG (Scalable Vector Graphics), dessins …
- En savoir plus
JavaScript : paradigmes, programmation objet et fonctionnelle
JavaScript est un langage avec une histoire riche ayant façonné sa syntaxe. Un langage d’abord pensé pour de la manipulation de DOM (Document Object Model) et une programmation événementielle, où ses conventions se …
- En savoir plus
Web front : HTML, CSS et JavaScript niveau 2
Vous avez débuté le développement web en utilisant les langages de programmation HTML, CSS et JavaScript. Vous avez réalisé avec succès plusieurs pages ou même des sites entiers, avec des composants comme des listes, des …