Développer des applications HTML5 Responsives avec JavaScript et CSS3 par ENI SERVICE

Introduction
- Vue d'ensemble de la création de contenus pour le Web
- Langages HTML, CSS et JavaScript
- Organisation d'un site Web
- Principaux navigateurs et niveau de compatibilité aux nouveautés HTML5 et CSS3
- Outils de création de contenus pour le Web
Notions fondamentales du langage HTML5
- Syntaxe XML
- Vue d'ensemble des balises HTML
- Attributs XML, HTML et événements
- Structure du document HTML
- Eléments d'entête
Notions de base de la mise en forme en CSS
- Création et intégration d'une feuille de style CSS
- Sélecteurs CSS simple
- Héritage et cascades
- Couleurs et Unités de mesures : px, in, %, em
- Sélecteurs CSS3
Intégration et mise en forme de contenus simples
- Gestion du texte, des paragraphes et des listes
- Gérer les espaces et les sauts de lignes
- Affichage en ligne ou en bloc
- Dimensions et marges
- Bordures et Fonds
Structure fluide et positionnement
- Eléments conteneurs : nav, section, main, header, footer
- Unités avancées : %, vh, vw, calc()
- Dimensionnement fluide et marges
- Positionnements relatifs et absolus
- Habillage et débordements
Création de tableaux
- Elément Table
- Eléments ligne et cellule
- Mise en forme d'un tableau
Création de formulaire HTML5
- Structurer le formulaire avec les éléments Form, FieldSet et Label
- Ajouter des éléments Input
- Créer des listes de valeurs pour les éléments Input
- Afficher des informations avec les éléments Output, Progress et Meter
- Mettre en forme et valider un formulaire
- Ajouter des boutons de contrôle
Responsive Web Design
- Introduction
1- Principes fondamentaux
1- Approche Mobile First
- Résolutions d'écrans et Media Queries
1- Résolutions et densités des principaux smartphones et tablettes
1- Viewport et Zoom
1- Critères d'adaptation (width, height, device
- width, orientation, ...)
Positionnement à base de " Flexbox "
- Affichage " Flexbox "
- Axe principal et axe transversal
- Répartition et alignement des éléments
- Dimensions de base, agrandissements et réductions
- Ordonnancement des éléments
Fondamentaux du langage JavaScript
- Fonctions
- Tableaux et Objets
- Fonctions anonymes et Encapsulation
- Objets
- Propriété prototype
- Nouveautés ECMAScript 6
Interagir avec le DOM
- Rechercher les éléments avec les fonctions querySelector() et querySelectorAll()
- Parcourir le DOM
- Modifier la présentation et le contenu du DOM
- Modifier la structure du document
- Intercepter les événements avec la fonction addEventListener()
Requête AJAX avec XMLHttpRequest
- Définition d'une API REST
- L'objet XMLHttpRequest2
- Configurer une requête AJAX
- Format d'échange JSON
- L'événement progress
API Fetch et objets Promise
- Les requêtes Fetch
- L'objet Promise
- Synchronisation des traitements et des requêtes
Communication temps réel
- API WebSocket
- Ouverture et fermeture de la connexion
- Emettre des messages
- Recevoir des messages
Travaux pratiques
- Création d'un site Web par étapes en respectant l'enchainement des modules théoriques
1- Structure

Construire des pages Web en HTML5 ;
Habiller et mettre en forme des pages Web avec CSS3 ;
Créer des formulaires avancés ;
Créer des tableaux de données ;
Créer des menus de navigation ;
Utiliser les différentes techniques CSS de positionnement et dimensionnement pour adapter la présentation aux différents appareils (smartphone, tablette, PC) ;
Parcourir et modifier la structure d'une page en JavaScript ;
Gérer des événements utilisateur ;
Intégrer à une application Web des appels à des Services Web REST et WebSockets en JavaScript.