Niveau : expert - Durée : 6 jours
Pré-requis : savoir utiliser un ordinateur pour réaliser des tâches courantes et avoir des connaissances basiques en HTML 5 et CSS 3.
Objectif : acquérir un large panel de techniques dans le domaine du développement de sites web adaptatifs et connaître leurs avantages et inconvénients, pour gagner en productivité lors de la réalisation. Savoir utiliser et optimiser les différents médias disponibles pour éviter la saturation réseau et améliorer les performances d'affichage sur les appareils mobiles.
Méthode pédagogique :
Cette formation se déroule en deux phases :
- une partie théorique de deux jours, destinée à l’assimilation des points clefs et techniques du développement mobile. Chaque section ou chapitre abordé est abondamment agrémenté d’exemples concrets, réalisés dans un premier temps par le formateur, en temps réel, puis repris en autonomie par chacun des stagiaires. Après chaque exercice, une correction de groupe est réalisée, via questions/réponses, afin de permettre aux stagiaires de comprendre leurs erreurs éventuelles ;
- une partie pratique de quatre jours intégrant la réalisation de deux projets. Le premier projet consiste en la création, après réflexion et prototypage, de l’interface utilisateur fluide et adaptable d’une application de type Dashboard (choix du système de grille adéquat, calibration CSS et production technique). L'objectif est de permettre aux stagiaires de débuter en pensant mobile first, et ainsi d’être confrontés par l’expérience aux questionnements, difficultés et pièges inhérents à ce type de développement. Le second projet repose, lui, sur la reprise d’un applicatif non responsif de type site web d’entreprise en applicatif mobile. Il permettra aux stagiaires d’aborder les techniques de refactoring, exercice difficile devant être réalisé avec précaution.
Le terme responsive design désigne les techniques de conception de sites web permettant aux sites d’être affichés de manière optimale sur tous les types d’écrans et d’appareils (ordinateurs, tablettes, smartphones, …).
Programme de la formation responsive design
Rappels et mises à niveau HTML5 et CSS3
- Clarification et rappels sur toute notion de base CSS si nécessaire, lors d’une brève session de questions / réponses entre le formateur et les stagiaires
- Les types d’éléments HTML (Block, inline, …) et leur utilité dans le cadre du développement mobile
- Utiliser et optimiser le placement naturel des éléments
- Le modèle de boite, calcul de dimensions et box-sizing
- Écriture modulaire et optimisation des règles CSS
- Atelier : exercices théoriques isolés
Outils de développement
- Installation d’un environnement de travail performant avec npm et webpack
- Installation du préprocesseur SCSS et introduction à l’outil (modularisation et maintenance)
- Gestion des préfixes propriétaires avec “Can I use” et autoprefixer
- Minification et compilation des sources (HTML, CSS et JS) via Webpack
- Atelier : installation de l’environnement
Les techniques du développement responsif
- Spécificités du design mobile et prototypage
- La balise meta
- Les unités relatives (pourcentage, em, rem, vw, vh)
- Tailles de police relatives
Flexbox
- Présentation
- Alignement, dimensions élastiques
-
Contrôler l‘ordre d’affichage des éléments
- Lignes et colonnes
- Maîtriser les propriétés de placements d’éléments dans un conteneur flexible
- Comprendre les avantages et les limitations de flexbox et savoir quand l’utiliser
Les grilles fluides
- Les différentes techniques (flottants, flexbox, grid)
- Présentation du fonctionnement d’un framework de grille
- Création d’un système de grille responsive avec Flexbox
- Présentation et utilisation de la grille “Bootstrap”
- Apprendre à choisir le système de grille adéquat en fonction du cahier des charges technique
Adaptabilité
- Comprendre la notion de points de rupture pour l’écriture de CSS (technique dite du “Mobile first”)
- Les media queries de dimension, de DPR (Device Pixel Ratio) et orientation
Atelier
- Pratique de flexbox (intensive) sur différents composants (panneaux “accordéons”, navigation, listes, galerie d’images, module statistique)
- Mise en place de la grille “Mockup” d’un site web en exploitant les techniques abordées
Transitions, transformations et animations
- Introduction et exemples d’exploitation dans le cadre du développement web mobile
- Transitions, éléments et états
- Images clefs
- Les transformations (Translate, Rotate, Scale) et utilisation GPU
- Comprendre et contrôler les principes de reflux et de “layout trashing”
- Éviter les goulots de performance lors des animations
- Atelier: créer un menu dit “off-canvas” en exploitant les techniques d’animation acquises
Les médias
- Inclusion de polices de caractères avec Google fonts et @font-face
- Images : la balise <picture> et les attributs “srcset” et “sizes” pour contrôler l’affichage dynamique d’images en fonction de l’appareil
- Le SVG (de types fond, contenu et sprite)
- Brève introduction à l’animation SVG (via CSS et Javascript)
-
Font icons et glyphes
Performances et optimisation
- Le protocole de transfert HTTP et son impact sur les performances mobiles lors du chargement des ressources
- Chargement asynchrone en arrière plan des ressources
- Optimisation des images, SVG et autres ressources
- “Google Page Speed” et mesure de performances
Questions / réponses
Quelques autres stages de formations associés :
HTML5, CSS3, Javascript, jQuery - Niveau 1
HTML5, CSS3, Javascript, jQuery - Niveau 2
HTML5, CSS3, Javascript, jQuery - Niveau 3
Formation WordPress - Niveau 1
Formation WordPress - Niveau 2
| < Précédent | Suivant > |
|---|
