HTML5 / JAVASCRIPT Développer des applications Web Mixte : présentiel / à distance
Dernière mise à jour : 07/01/2025
M'inscrire à la formation
Public visé
- Toute personne souhaitant apprendre à créer des applications Web côté client.
Prérequis
- Connaître les notions fondamentales de la programmation (Algorithmie)
Objectifs de la formation
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
Contenu de la formation

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
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
Compétences acquises à l'issue de la formation
- Développer une application cliente en JavaScript utilisant les dernières fonctionnalités implémentées par les navigateurs.
Modalités pédagogiques
- Explications théoriques suivies de pratiques guidées puis de mises en autonomie.
- Exercices autonomes et réguliers pour assurer l'assimilation
Moyens et supports pédagogiques
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.
Modalités d'évaluation et de suivi
Profil du formateur
Chacun de nos formateurs a bénéficié d'une formation spécifique à l'animation de classe virtuelle et à l'utilisation des solutions de formation à distance du Groupe ARKESYS.