Formation HTML5/CSS3 Perfectionnement CPF
Responsive, animations, APIs et JavaScript
Objectifs de la formation
Cette formation vous permet d'utiliser les fonctions avancées du langage HTML5 et APIs pour le développement de documents web responsives et interactifs, à l’aide également de CSS3 et de Javascript.
Public
Intégrateurs et développeurs front-end, webmestres, concepteurs de sites web.
Durée
35 heures en présentiel sur 5 jours
Pré-requis
Avoir les bases des langages HTML/CSS.
Formateur
Formateur expérimenté, développeur de site Web, et spécialiste du Web.
Méthode pédagogique
8 participants maximum, un poste par stagiaire et un support de cours est remis en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.
Modalité de validation des acquis
Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage. Émargement quotidien d'une feuille de présence.
Programme HTML5/CSS3 Perfectionnement
Introduction
- Histoire du HTML et du Javascript
- Définition et utilité de HTML/CSS/JavaScript, les langages du web
- Diversité des terminaux d'affichage (desktop, tablette, smartphone…)
- Structure d'un document HTML5
- Séparation entre contenu, présentation et interactions
- Déclaration de type de document (DTD)
- Rappel sur les syntaxes HTML et CSS3
- Utiliser la console du navigateur
Les nouveautés de HTML5 et CSS3
- Les nouvelles balises sémantiques et les APIs
- Balises audio et Vidéo (supports et formats)
- Principe général de la Géolocalisation
- Stockage local et stockage de session
- Canvas, SVG et Javascript
- Animations, filtres et fonctions avec CSS3
Principes du Responsive Web Design (RWD)
- Différence entre résolution et taille d'affichage
- Interface utilisateur (UI) et expérience utilisateur (UX)
- Détection du navigateur, du terminal, des fonctionnalités
- Mise en page fluide et adaptative
- Principe des media queries CSS
- Différence entre viewport et screen
- Points de rupture et règles conditionnelles
- Conception en grille CSS ou utilisation de Flexboxs
- Menus adaptatifs
- Tableaux et formulaires flexibles
- Entête HTTP et chaîne User-Agent
- Exemple de la class Mobile_Detect en PHP
- Modification dynamique des contenus avec Javascript
Polices web
- Intégrer des polices Web
- Adaptation des tailles de polices
- Colonnes multiples et césure
JavaScript
- Rappels sur la syntaxe Javascript et le DOM
- Frameworks et librairies utiles (jQuery, Backbone, …)
- Les interactions utilisateur (écouteurs d’événements)
- Les manipulation du DOM (ajout, modification, suppression, modifcations)
- Les animations avec Canvas
- Piloter les animations CSS avec Javascript
- AJAX pour communiquer avec le serveur
Introduction
- Histoire du HTML et du Javascript
- Définition et utilité de HTML/CSS/JavaScript, les langages du web
- Diversité des terminaux d'affichage (desktop, tablette, smartphone…)
- Structure d'un document HTML5
- Séparation entre contenu, présentation et interactions
- Déclaration de type de document (DTD)
- Rappel sur les syntaxes HTML et CSS3
- Utiliser la console du navigateur
Les nouveautés de HTML5 et CSS3
- Les nouvelles balises sémantiques et les APIs
- Balises audio et Vidéo (supports et formats)
- Principe général de la Géolocalisation
- Stockage local et stockage de session
- Canvas, SVG et Javascript
- Animations, filtres et fonctions avec CSS3
Principes du Responsive Web Design (RWD)
- Différence entre résolution et taille d'affichage
- Interface utilisateur (UI) et expérience utilisateur (UX)
- Détection du navigateur, du terminal, des fonctionnalités
- Mise en page fluide et adaptative
- Principe des media queries CSS
- Différence entre viewport et screen
- Points de rupture et règles conditionnelles
- Conception en grille CSS ou utilisation de Flexboxs
- Menus adaptatifs
- Tableaux et formulaires flexibles
- Entête HTTP et chaîne User-Agent
- Exemple de la class Mobile_Detect en PHP
- Modification dynamique des contenus avec Javascript
Polices web
- Intégrer des polices Web
- Adaptation des tailles de polices
- Colonnes multiples et césure
JavaScript
- Rappels sur la syntaxe Javascript et le DOM
- Frameworks et librairies utiles (jQuery, Backbone, …)
- Les interactions utilisateur (écouteurs d’événements)
- Les manipulation du DOM (ajout, modification, suppression, modifcations)
- Les animations avec Canvas
- Piloter les animations CSS avec Javascript
- AJAX pour communiquer avec le serveur