HTML5 / JAVASCRIPT Développer des applications Web Mixte : présentiel / à distance

• Toute personne souhaitant apprendre à créer des applications Web côté client.

• Connaître les notions fondamentales de la programmation (Algorithmie)

A l'issue de cette formation, l'apprenant sera capable de :

• 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 des appels à des Services Web REST et WebSockets en JavaScript

Jour 1 – Matin

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

Jour 1 – Après-midi

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

Jour 2 – Matin

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

Jour 2 – Après-midi

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

Jour 3 – Matin

CRÉATION DE TABLEAUX

• Elément Table
• Eléments ligne et cellule
• Mise en forme d'un tableau

Jour 3 – Après-midi

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

Jour 4 – Matin

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, ...)

Jour 4 – Après-midi

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

Jour 5 – Matin

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

Jour 5 – Après-midi

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
• Structure HTML de la page
• Ajout de contenus simples, titres, listes, images
• Mise en place de liens de navigation entres les pages
• Ajout d'un tableau de données HTML
• Création d'un formulaire HTML
• Mise en forme du site Web en CSS
• Mise en forme des éléments texte
• Mise en page et positionnement des contenus
• Mise en forme du menu de navigation
• Habillage du tableau de données
• Mise en forme du formulaire
• Conception de pages Responsives en utilisant les principales techniques CSS : structure fixe, structure fluide à base de « Flexbox », structure fluide à l'aide de « Media Queries »
• Création de classes métiers en JavaScript
• Création d'objets métiers à l'aide d'un formulaire
• Affichage des données dans un tableau HTML
• Appeler des Services Web
• Charger les données de la page aves les différentes sortes de Services Web : XMLHTTPRequest, Fetch API, WebSocket

• Développer une application cliente en JavaScript utilisant les dernières fonctionnalités implémentées par les navigateurs.

• Explications théoriques suivies de pratiques guidées puis de mises en autonomie.
• Exercices autonomes et réguliers pour assurer l'assimilation

Votre formation a lieu en présentiel :

• 1 vidéoprojecteur par salle
• 1 ordinateur

Votre formation se déroule à distance avec :

• 1 ordinateur
• 1 connexion Internet
• 1 adresse e-mail valide
• 1 équipement audio (micro et enceintes ou casque)
• 1 Webcam (facultatif – dans l'idéal)
• 1 deuxième écran (facultatif – dans l'idéal)

Votre formation se déroule sur notre plate-forme de formation avec :

• 1 ordinateur
• 1 connexion Internet
• 1 adresse e-mail valide
• 1 équipement audio (micro et enceintes ou casque - facultatif)

Support stagiaire :

À l'issue de la formation, les exercices et travaux pratiques réalisés, leurs corrigés ainsi qu'un support de cours dématérialisé sera fourni à chaque stagiaire par e-mail ou via la plate-forme FOAD.