HTML5 CSS3 JAVASCRIPT 6

Objectifs & compétences

Savoir construire une page Web en HTML5
Mettre en forme une page web avec CSS3
Rendre interactif une page HTML 5 en utilisant JavaScript
Créer et valider des formulaires HTML 5
Intégrer du contenu multimédia et graphique à une page web HTML 5
Améliorer l'expérience utilisateur en ajoutant des animations à une page HTML 5
Utiliser des sockets Web et les Web Worker Processes

Public visé

Développeurs, chef de projets devant intervenir dans le développement d'une application web Html5 avec JavaScript et CSS

Pré-requis

Expérience pratique du Web
1 à 3 mois d'expérience en développement

Programme

1. Présentation de HTML et CSS
-Présentation de HTML
-Présentation de CSS
-Création d’une application Web en utilisant Visual Studio 2017
Atelier pratique : Découverte de l’application fil rouge de la formation

2. Création et mise en forme de pages HTML5
-Création d'une page HTML 5
-Mise en forme avec des styles d'une page HTML 5
Atelier pratique : Création et mise en forme de page statiques

3. Introduction à JavaScript
-Présentation de JavaScript
-Introduction à DOM (Document Object Model)
-Introduction à jQuery
Atelier pratique : Affichage des données et gestion des événements en
JavaScript

4. Création de formulaires pour collecter et valider des entrées utilisateur
-Création de formulaires HTML 5
-Validation des entrées utilisateur en utilisant les attributs HTML 5
-Validation des entrées utilisateur en utilisant JavaScript
Atelier pratique : Création d'un formulaire et validation des entrées utilisateur

5. Communication avec un serveur distant
-Envoi et réception de données en utilisant l'objet XMLHTTPRequest
-Envoi et réception de données en utilisant les opérations Ajax jQuery
Atelier pratique : Sérialisation, désérialisation, pour envoyer et recevoir des
données vers/depuis un serveur distant

6. Mise en forme HTML 5 en utilisant CSS 3
-Mise en forme de textes
-Mise en forme de blocs d'éléments
-Pseudo-classes et pseudo-éléments
-Amélioration des effets graphiques en utilisant CSS 3
Atelier pratique : Application de styles à du texte et des blocs et implémentation d'effets graphiques

7. Création d'objets et de méthodes en utilisant JavaScript
-Ecriture de codes JavaScript correctement structurés
-Création d'objets personnalisés
-Extension d'objets
Atelier pratique : Améliorer le code JavaScript de l'application fil rouge afin d'améliorer sa maintenabilité et son extensibilité

8. Création de pages interactives en utilisant les APIs HTML 5
-Interaction avec les fichiers
-Incorporation du multimédia
-Réaction à la localisation du navigateur et du contexte
-Dépannage et profilage d'une application Web
Atelier pratique : Amélioration des pages en mettant en oeuvre du drag & Drop pour interagir avec des fichiers, en incorporant des éléments multimédias et en gérant le contexte de navigation

9. Ajout du support hors connexion aux applications Web
-Données hors connexion cachées en utilisant le cache d'application API
-Persistance des données utilisateurs en utilisant le stockage local API
Atelier pratique : Ajout de fonctionnalités de navigation en mode déconnecté à l'application fil rouge

10. Mise en oeuvre d'une interface utilisateur adaptable
-Support du « Multiple Form Factors »
-Création d'une interface utilisateur adaptable
Atelier pratique : Création d'une page qui adapte automatiquement son rendu en fonction des caractéristiques de l'appareil à l'origine de la requête

11. Création de graphiques avancés
-Création de graphiques interactifs en utilisant Scalable Vector Graphics
-Dessin de graphiques par programmation en utilisant un canvas
Atelier pratique : Ajout de graphiques interactifs et complexes dans l'application fil rouge

12. Animation d'une interface utilisateur
-Application de transitions CSS
-Transformation d'éléments
-Application d'animations CSS keyframe
Atelier pratique : Animation d'une page web en appliquant des transitions CSS 2D et 3D

13. Mise en oeuvre de communications en temps réel en utilisant des WebSockets
-Introduction aux WebSockets
-Utilisation del'API WebSockets
Atelier pratique : Utilisation de l'API Web Socket avec JavaScript pour se connecter à un serveur Web Socket, envoyer et recevoir des données et gérer les différents événements pouvant survenir lorsqu'un message envoyé ou reçu

14. Création d'un Process Web Worker
-Introduction à Web Worker
-Amélioration du traitement asynchrone en utilisant un Web Worker
Atelier pratique : Utilisation des API Web Worker avec du code JavaScript pour créer, exécuter et surveiller un processus Web Worker

Modalités

Méthodes