Développer des applications HTML5 Responsives avec JavaScript et CSS3

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
• Principes fondamentaux
• Approche Mobile First
• Résolutions d'écrans et Media Queries
• Résolutions et densités des principaux smartphones et tablettes
• Viewport et Zoom
• 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

Concepteur : Eni Service - Diffuseur : Groupe Arkesys