2 jours
Perfectionnement / Avancé
Présentiel Classe à distance
AC
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 de formation
A l'issue de cette formation, vous serez capable de :
- Identifier les API HTML 5 et leur utilité
- Valider des formulaires avec Web Forms 2
- Dessiner avec Canvas et SVG
- Gérer la déconnexion
- Communiquer avec les WebSockets
- Gérer les tâches longues avec les Web Workers
- Réaliser des animations avec CSS 3
- Décrire le Responsive Design et les liens entre HTML 5 et la mobilité
- Relater l'intérêt d'utiliser les IA comme ChatGPT pour aider à la conception de pages HTML 5 / CSS 3.
Prérequis
Avoir suivi le cours JVS-IN "JavaScript - Fondamentaux" ou pratiquer le langage JavaScript.
Validez les prérequis
Afin de vérifier que vous disposez bien des prérequis nécessaires à cette formation, nous vous invitons à réaliser ce test.
Temps estimé : 4 minutes.
Passer le testLes + de la formation
Un examen M2i permettant de valider vos acquis à l'issue de la formation est disponible sur demande (coût : 120€).
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
Web Forms 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
Web Workers
- Modèle mono-thread
- Worker API
- Synchronisation
- Shared Workers
Exemples 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
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
Exemple de travaux pratiques (à titre indicatif)
- 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
Exemple de travaux pratiques (à titre indicatif)
- Utilisation de prompts ChatGPT pour le conception de pages Web
Examen M2i (en option)
- Prévoir l'achat de l'examen 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
- L'examen n'est pas éligible au CPF, mais permettra néanmoins de valider vos acquis
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
Modalités, méthodes et moyens pédagogiques
Formation délivrée en présentiel ou distanciel* (blended-learning, e-learning, classe virtuelle, présentiel à distance).
Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).
Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :
- Ordinateurs Mac ou PC (sauf pour certains cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
- Environnements de formation installés sur les postes de travail ou en ligne
- Supports de cours et exercices
En cas de formation intra sur site externe à M2i, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.
* nous consulter pour la faisabilité en distanciel
** ratio variable selon le cours suivi
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 et/ou un examen M2i
Accessibilité de la formation
Le groupe M2i s'engage pour faciliter l'accessibilité de ses formations. Les détails de l'accueil des personnes en situation de handicap sont consultables sur la page Accueil et Handicap.
Modalités et délais d’accès à la formation
Les formations M2i sont disponibles selon les modalités proposées sur la page programme. Les inscriptions sont possibles jusqu'à 48 heures ouvrées avant le début de la formation. Dans le cas d'une formation financée par le CPF, ce délai est porté à 11 jours ouvrés.
