Accueil › Formations › Informatique › Langages et développement › Développeur Web HTML 5, CSS 3 et JavaScript › Les API de HTML 5 et CSS 3 - Pour les développeurs
Objectifs pédagogiques / Compétences visées
- Identifier les API HTML 5 et leur utilité
- Valider des formulaires avec WebForms 2
- Dessiner avec Canvas et SVG
- Gérer la déconnexion
- Communiquer avec les WebSockets
- Gérer les tâches longues avec les WebWorkers
- Réaliser des animations avec CSS 3
- Décrire le Responsive Design et les liens entre HTML 5 et la mobilité.
Niveau requis
Avoir suivi le cours JVS-IN "JavaScript" ou pratiquer le langage JavaScript.
Public concerné
Développeurs, architectes, chefs de projets techniques.
Programme
Jour 1
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
Exemples de travaux pratiques (à titre indicatif)
- 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
WebForms 2
- Nouveaux champs de saisie
- Sliders, datalist et placeholder
- Expressions régulières
- Validation automatique
- Validation dans le code
Exemples de travaux pratiques (à titre indicatif)
- Traitement des zones de saisie en JavaScript
- Maîtrise des formats et validation JavaScript
- Exercices sur les expressions régulières
Jour 2
Multimédia et graphisme
- Audio et vidéo
- Canvas
- SVG
- WebGL
Exemples de travaux pratiques (à titre indicatif)
- 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
Exemples de travaux pratiques (à titre indicatif)
- 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
Webworkers
- Modèle mono-thread
- Worker API
- Synchronisation
- Shared Workers
Exemple de travaux pratiques (à titre indicatif)
- 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
Exemple de travaux pratiques (à titre indicatif)
- Exploitation, dans un projet, des fichiers exploités localement avec l'API LocalStorage et la base de données IndexedDB
Jour 3
Device API
- Géolocalisation
- Orientation
- Batterie
- Caméra et micro
- WebRTC
Exemples de travaux pratiques (à titre indicatif)
- 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
- Fonts
- Sélecteurs CSS 3
- Bordures
- Couleurs et opacité
- Transitions et transformations
- Animations
Exemples de travaux pratiques (à titre indicatif)
- Depuis un projet existant, animation de feuilles via la manipulation programmatique des sélecteurs CSS 3
- Animation via les transformations et transition depuis JavaScript
Responsive Design
- Vision OneWeb
- Responsive Web Design
- Progressive Enhancement
- Media Query
Exemple de travaux pratiques (à titre indicatif)
- Adaptation de l'application à la taille de l'écran grâce aux Medias Queries
Certification (en option)
- Prévoir l'achat de la certification en supplément
- L'examen (en français) sera passé le dernier jour, à l'issue de la formation et s'effectuera en ligne
- Il s'agit d'un QCM dont la durée moyenne est d'1h30 et dont le score obtenu attestera d'un niveau de compétence
- La certification n'est plus éligible au CPF depuis le 31/12/2021, mais permettra néanmoins de valider vos acquis
Modalités d’évaluation des acquis
- En cours de formation, par des études de cas ou des travaux pratiques
- Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)
