CPF
Formations courtes

HTML5, CSS3 et le responsive Web design

Perfectionnement
3 jours (21 heures)
Paris
Créer et modifier des sites Web responsive

Objectifs

Pour qui ?

Prérequis

Objectifs

Identifier les standards HTML5 et CSS3
Découvrir le potentiel graphique des CSS3
Composer et modifier une maquette Web responsive
Intégrer les balises HTML5 : vidéo, audio et Canvas
Créer des motifs élaborés en CSS3

Pour qui ?

Webdesigners, créateurs d'EPUB ou de publications digitales, intégrateurs, développeurs ou toute personne qui utilise déjà les CSS.


Code dokélio :
Code CPF : 236252

Prérequis

Pour suivre cette formation, il est nécessaire d'avoir suivi les stages “HTML5 : les fondamentaux” (page 130) et “CSS3 : les fondamentaux” (page 131) ou de maîtriser les techniques d'intégration suivantes : sélecteurs CSS2.1, propriétés du modèle de boîte CSS et les différents modèles de positionnement CSS.



Compétences acquises:
Créer des pages Web simples ou modifier des contenus HTML existants

Programme

HTML5, CSS3 et le responsive Web design

Découvrir l'écosystème du Web mobile actuel
• Comprendre et distinguer les notions de Web adaptatif, site responsive, application native, WebApp, progressive WebApp…
• Analyser les usages actuels
• Respecter les bonnes pratiques de la mobilité : contraintes et optimisations, amélioration progressive vs dégradation élégante
➔ Étude de cas : analyse de sites et d'applications remarquables

Comprendre le responsive Web design

• Comprendre les notions de Viewport et de variabilité de mises en pages
• Distinguer et définir les points de rupture
• Composer avec les nouveaux concepts du responsive design : surface d'affichage vs surface de rendu, pixel physique vs pixel CSS
➔ Étude de cas : analyse de sites remarquables

Maîtriser les Media Queries

• Décrypter la règle @media : les types de médias et types de requêtes (min-width, orientation, aspect-ratio…)
• Choisir ses largeurs de colonnes et les points de rupture
• Ajouter la balise meta Viewport pour iOS
• Identifier les types et techniques de gabarits : fixes, élastiques, fluides, mixte, flex, column, grid layout, grilles…
➔ Exercice : créer des gabarits et leurs points de rupture

Maîtriser les techniques de mise en pages CSS responsive

• Repositionner les fondamentaux
- identifier le rôle des reset et des pré-processeurs
- clarifier les notions d'héritage et de poids de sélecteurs
- utiliser les sélecteurs avancés
- calculer les tailles d'objet avec le modèle de boîte standard et la propriété box-sizing
- contrôler les fusions de marge
- calculer les tailles de texte, les largeurs de colonnes et points de rupture
• Utiliser les techniques avancées de mise en pages
- maîtriser les techniques et astuces de déplacement et de centrage : margin auto, displays inline, inline-block, position et %, vertical-align, line-height, table et table-cell, column
- définir ses largeurs de colonnes : min et max-width, unités em
- maîtriser les flottants : overflow, clear, clearfix
- convertir une maquette “classique” en RWD
- réaliser une maquette RWD avec Flexbox
- analyser une maquette RWD avec Grid Layout
- découvrir les systèmes de grille responsive et les frameworks actuels : Bootstrap, Foundation
➔ Exercice : composer différentes maquettes responsive

Adapter ses contenus aux capacités des écrans et bandes passantes

• Calculer les ratios pour présenter les contenus image et vidéo
• Découvrir les trucs et astuces de l'optimisation : “compression zero”, SVG inline et génération de sprites, background-images, srcset…
• Contrôler les déplacements, masquages et chargements conditionnels
• Utiliser les outils de test
• Utiliser les polyfills pour les anciens navigateurs
➔ Exercice : mettre en oeuvre ces pratiques selon les besoins des apprenants
HTML5, CSS3 et le responsive Web design
Ref
WM06519
Tarif
1600€ HT

Prochaines sessions

Le choix de la session vous sera demandé lors de votre inscription.

Paris
Prochaines sessions
25 au 27 sept. 2019
25-09-2019
27-09-2019
18 au 20 déc. 2019
18-12-2019
20-12-2019
01 au 03 avr. 2020
01-04-2020
03-04-2020
16 au 18 sept. 2020
16-09-2020
18-09-2020
21 au 23 déc. 2020
21-12-2020
23-12-2020
Cette formation vous intéresse ?