Développer des applications HTML5 Responsives avec JavaScript et CSS3 Mixte : présentiel / à distance

• Développeurs, analystes programmeurs, chefs de projets

• Avoir une expérience de programmation, quel que soit le langage d'origine

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

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

• Construire des pages Web en HTML5
• Habiller et mettre en forme des pages Web avec CSS3
• Créer des formulaires avancé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 utilisateurs
• Intégrer à une application web des appels à des services Web REST et WebSockets en JavaScript

• 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.

L'acquisition des compétences de la formation se fait à travers le suivi du formateur tout au long de la formation (séquences synchrones et asynchrones). Elle s'appuie également sur la réalisation d'exercices et de TP. Enfin, des quiz s'ajoutent aux différents outils de validation de l'acquisition des compétences visées. Une évaluation est systématiquement réalisée par chaque stagiaire, à l'issue de la formation.

Nos formateurs sont certifiés à l'issue d'un parcours organisé par nos soins. Ils bénéficient d'un suivi de maintien et d'évolution de leurs compétences aussi bien au niveau technique que pédagogique.
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.

Cette formation est accessible à toute personne en situation de handicap. Notre référent handicap prendra contact avec les stagiaires concernés pour adapter l'animation à leurs besoins et rendre l'apprentissage accessible à tous. Enfin, nos centres de formation sont accessibles aux personnes à mobilité réduite.