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.

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

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

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

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 - Matin

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

Jour 2 - Après-midi

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 - Matin

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

Jour 3 - Après-midi

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