Les API HTML5 et CSS3 offrent aux developpeurs des capacites avancees directement dans le navigateur : graphiques vectoriels, communications temps reel, stockage local et multithreading. Cette formation vous apprend a exploiter concretement Canvas, WebSocket, Web Workers et IndexedDB dans vos applications Web. Vous acquerrez les competences pour creer des interfaces riches sans dependre de plugins externes.
Public visé
Développeurs, architectes et chefs de projets techniques.
Objectifs pédagogiques
À l’issue de cette formation, vous serez capable de :
- Identifier les API HTML 5 et leurs applications
- Valider des formulaires avec Web Forms 2
- Créer des graphiques avec Canvas et SVG
- Gérer les scénarios de déconnexion
- Communiquer via WebSockets
- Gérer les tâches longues avec les Web Workers
- Implémenter des animations CSS 3
- Décrire les principes du Responsive Design
Programme
Jour 1 - Matin
Le Web version HTML 5
- Définition et limites de HTML 5
- Support des navigateurs
- Modernizr et librairies pour la compatibilité
- Impact sur les architectures Web
- HTML 5 pour les mobiles
Structure des pages HTML 5
- Simplifications
- Doctype
- Balises sémantiques
- Micro formats
Travaux pratiques
- Ecriture d’une première application, rappeler les essentiels de HTML 5
- Faciliter les développements à venir
- Gérer les balises sémantiques et leur importance
Jour 1 - Après-midi
Web Forms 2
- Nouveaux champs de saisie
- Sliders, datalist et placeholder
- Expressions régulières
- Validation automatique
- Validation dans le code
Travaux pratiques
- Traitement des zones de saisie en JavaScript
- Maîtrise des formats et validation JavaScript
- Exercices sur les expressions régulières
Jour 2 - Matin
Multimédia et graphisme
- Audio et vidéo
- Canvas
- SVG
- WebGL
Travaux pratiques
- Création d’une application utilisant le Canvas pour animer la page
- Manipulation programmatique du format SVG pour animer la page
- Ajout de vidéo et d’audio au projet
Communications
- XHR2
- CORS
- JSON
- Messaging
- WebSocket
Travaux pratiques
- Création d’un programme exploitant les façons actuelles d’échanger avec un serveur
- Projet avec XMLHttpRequest
- Projet avec WebSocket et gestion des messages non sollicités
- Traitement JSON au sein du programme
Jour 2 - Après-midi
Web Workers
- Modèle mono-thread
- Worker API
- Synchronisation
- Shared Workers
Travaux pratiques
- Création d’un programme utilisant les Web Workers afin de paralléliser des traitements de calculs scientifiques
Fichiers et ressources locales
- LocalStorage
- SessionStorage
- IndexedDB
- File API
Travaux pratiques
- Exploitation, dans un projet, des fichiers exploités localement avec l’API LocalStorage et la base de données IndexedDB
Jour 3 - Matin
Device API
- Géolocalisation
- Orientation
- Batterie
- Caméra et micro
- WebRTC
- Fullscreen API
- Notifications API
Travaux pratiques
- Reprise des projets précédents et ajout de la géolocalisation
- Affichage de cartes, gestion de la batterie et de l’orientation
CSS 3
- Sélecteurs CSS 3
- Bordures
- Couleurs et opacité
- Transitions et transformations
- Animations
Travaux pratiques
- Depuis un projet existant, animation de feuilles via la manipulation programmatique des sélecteurs CSS 3
- Animation via les transformations et transition depuis JavaScript
Jour 3 - Après-midi
Responsive Design
- Vision OneWeb
- Responsive Web Design
- Progressive Enhancement
- Media Query
Travaux pratiques
- Adaptation de l’application à la taille de l’écran grâce aux Medias Queries
Le Drag and Drop (glisser-déposer)
- Présentation de la technologie de Drag and Drop
- Les fonctions HTML 5 du Drag and Drop
- Gestion des événements
- Passage de données de type différents
Travaux pratiques
- Transfert de données d’une liste vers une autre
Les apports de l’IA dans la création de pages Web
- Présentation de l’outil IA ChatGPT
- Utiliser les bons prompts afin de concevoir une page selon ses exigences
- Génération de code HTML 5, les limites
- Génération du code CSS 3, les limites
Travaux pratiques
- Utilisation de prompts ChatGPT pour la conception de pages Web
Modalités d’évaluation des acquis
En cours de formation, par des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.
Voir aussi
Vous serez peut-être intéressés par les formations suivantes :
Formation DEV-WEB-310 — Les API de HTML et CSS. Domaine : Développement. Niveau : Avancé. Durée : 3 jours (21 heures). Mots-clés : html5, css3, api, web, responsive, javascript. Cylian Formation, Dijon.