Revenir à la liste

M2I FORMATION — Les API de HTML5 et CSS3 pour les développeurs

Publié le 04/01/2021 — Produit n° 001431

: INFORMATIQUE TELECOMMUNICATIONINFORMATIQUELANGAGES - PROGRAMMATION HTML

Apprendre à utiliser les API HTML5, valider des formulaires WebForm et communiquer avec les WebWorkers pour gérer des tâches longues.

Informations générales

Profil professionnel des stagiaires


Intermittents, Auteurs, Journalistes pigistes, Salariés des entreprises adhérentes

:
AUDIOVISUEL, CINÉMA, DIVERS, ÉDITION, SPORT, GOLF, HOTELLERIE DE PLEIN AIR, PRESSE, LOISIRS, AGENCE DE MANNEQUINS, ORGANISME DE TOURISME, PUBLICITÉ, SPECTACLE, TELECOM, CASINO

:

Pratique du langage JavaScript ou avoir suivi le cours JVS-IN "JavaScript".

Identification du stage

:
Formation en présentiel

:

Connaître les API HTML5 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 CSS3
Comprendre le responsive design et les liens entre HTML5 et la mobilité.

Durée de la formation : 21 heures

Lieu de réalisation
  • 69000 LYON
  • 38000 GRENOBLE
  • 35000 RENNES
  • 29000 BREST
  • 37000 TOURS
  • 67000 STRASBOURG
  • 54000 NANCY
  • 59000 LILLE
  • 75016 PARIS 16
  • 75012 PARIS 12
  • 97420 LE PORT
  • 76000 ROUEN
  • 33000 BORDEAUX
  • 34000 MONTPELLIER
  • 31000 TOULOUSE
  • 44000 NANTES
  • 13000 AIX EN PROVENCE
  • 06250 SOPHIA ANTIPOLIS


Denis DIAZ — 01 89 20 68 84
d.diaz@m2iformation.fr

Informations pédagogiques

Programme pédagogique

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

Informations complémentaires (méthodologie, ...)

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

Supports et ressources fournis aux stagiaires

La salle de formation est équipée d'un poste informatique par apprenant accédant à Internet, d’un vidéo projecteur, d’un paper board et d’un tableau blanc. Possibilité d'utiliser 1 plateforme de quizz interactive
Les supports de cours sont fournis et disponibles en version électronique.


Supports de cours
Les supports de cours sont fournis par M2i.
Ces supports seront disponibles en version électronique.

Niveau visé après la formation

AUTRE