Développer des applications HTML5 Responsives avec JavaScript et CSS3

Introduction (2 heures)

• 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 (3 heures)

• Syntaxe XML
• Vue d’ensemble des balises HTML
• Attributs XML, HTML et événements
• Structure du document HTML
• Eléments d’entête.
• Travaux pratiques :
  • Structure HTML de la page
  • Ajout de contenus simples, titres, listes, images
  • Mise en place de liens de navigation entres les pages

Notions de base de la mise en forme en CSS (3 heures)

• 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
• Travaux pratiques :
  • Création d’une feuille de style
  • Application de la feuille de style aux différentes pages

Intégration et mise en forme de contenus simples (3 heures)

• 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
• Travaux pratiques :
  • Mise en forme des éléments texte
  • Mise en page et positionnement des contenus

Structure fluide et positionnement (2 heures)

• 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
• Travaux pratiques :
  • Création d’un bandeau d’en-tête

Création de tableaux (1 heure)

• Elément Table
• Eléments ligne et cellule
• Mise en forme d’un tableau
• Travaux pratiques :
  • Ajout d’un tableau de données HTML
  • Habillage du tableau avec CSS

Création de formulaire HTML5 (1 heure)

• 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
• Travaux pratiques :
  • Ajout de formulaire HTML
  • Organisation des champs
  • Mise en forme du formulaire avec CSS

Responsive Web Design (2 heures)

• 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, ...)
• Travaux pratiques :
  • Conception de pages Responsives
  • Utilisation d’une structure fixe
  • Utilisation d’une structure fluide à l’aide de “Media Queries”

Positionnement à base de « Flexbox » (2 heures)

• 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
• Travaux pratiques :
  • Utilisation d’une structure fluide à l’aide de “Flexbox”

Fondamentaux du langage JavaScript (4 heures)

• Fonctions
• Tableaux et Objets
• Fonctions anonymes et Encapsulation
• Objets
• Propriété prototype
• Nouveautés ECMAScript 6
• Travaux pratiques :
  • Création et intégration des fichiers JavaScript nécessaires dans les pages HTML

Interagir avec le DOM (4 heures)

• 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()
• Travaux pratiques :
  • Création d’objets métiers à l’aide d’un formulaire
  • Affichage des données dans un tableau HTML

Requête AJAX avec XMLHttpRequest (2 heures)

• Définition d’une API REST
• L’objet XMLHttpRequest2
• Configurer une requête AJAX
• Format d’échange JSON
• L’événement progress
• Travaux pratiques :
  • Récupération de données distantes avec XMLHttpRequest

API Fetch et objets Promise (3 heures)

• Les requêtes Fetch
• L’objet Promise
• Synchronisation des traitements et des requêtes
• Travaux pratiques :
  • Récupération de données distantes avec Fetch API

Communication temps réel (3 heures)

• API WebSocket
• Ouverture et fermeture de la connexion
• Emettre des messages
• Recevoir des messages
• Travaux pratiques :
  • Implémentation de la partie JavaScript d’une communication bidirectionnel