HTML5, CSS3 et le responsive web design par Pyramyd NTCV

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 #0x40#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

- 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