Accueil > Technologies WEB > Responsive Design : créer des interfaces Web adaptables
Formation #TWC153

Formation Responsive Design : créer des interfaces Web adaptables

Durée : 3 jours

Code : TWC153


Prochaines dates programmées :

Du 24 au 26 Avril 2024

Du 17 au 19 Juil. 2024

Du 23 au 25 Oct. 2024

Fin d'Inscription :
Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.
Si vous avez un besoin URGENT et que vous souhaitez une date de formation plus proche que les sessions programmées (minimum 15 à 20 jours ouvrés à date de votre demande)

Objectifs

  • Etre capable de concevoir et de développer des interfaces Web pour tous types de terminaux
  • Maîtriser le Responsive Design
Programme
1/ Les règles CSS2 et CSS3
  • Les sélecteurs html
  • Les différents types de sélecteur css : classe, id et pseudo-classe
  • Propriétés des boîtes
  • Box-sizing
  • Position...
  • Unités
  • Absolue
  • Relatives
2/ Le responsive Web design
  • Les notions de Viewport et de variabilité de mises en pages
  • Les points de rupture
  • Les nouveaux concepts du responsive design :
  • surface d’affichage vs surface de rendu
  • pixel physique vs pixel CSS
3/ Les écrans
  • Taille
  • Résolution
  • Valeur du pixel
  • CSS pixel / Device pixel
  • Pixel ratio : hdpi, xhdpi, xxhdpi...
  • HiDPI (High Dots Per Inch)
4/ Le responsive design avec HTML5 CSS 3
  • Le concept de responsive design
  • Les critères pour mobiles (width, height, device-width, device-pixel-ratio, orientation, etc.)
  • Prise en compte de l'orientation
  • Mobile First : pourquoi les petits écrans en priorité ?
  • Différence entre design Web et design Mobile
5/ Les tailles des devices mobiles
  • Des vrais et des faux pixels
  • Taille de fenêtre virtuelle : Viewport
  • Taille d'écran : screen-width
  • Taille déclarée : device-width
  • Le pixel-ratio
6/ Les Media Queries
  • Adaptation des CSS aux caractéristiques du terminal
  • Règles conditionnelles (orientation, device-width...)
  • JavaScript et les anciens navigateurs
  • Réglage complémentaire de rendu visuel (Viewport)
7/ Principe de grille flexible, fluide
  • Conception classique versus conception selon une grille
  • Importance des blocs, approche contenu/contenant
  • Unités de mesure (% em px), mode Retina
  • Eviter les débordements. Points de rupture
  • Principe des box, layout avec CSS3
8/ Composants graphiques
  • Images flexibles : images de fond, adaptation HTML5, adaptation de la qualité graphique selon le terminal
  • Contenu responsive : rupture texte, multicolonnes. Césure et découpe
  • Polices fluides : format des polices, taille
  • Marges et espaces flexibles
  • Menus adaptables, carrousel adaptatif
  • Création de layout avec flexbox (organisation des éléments en fonction d'une grille)
  • Créer des images et des vidéos adaptées
9/ Framework et librairies responsive
  • Détecter les ressources avec "Modernizr"
  • Librairies de substitution (less, css3pie...)
  • Frameworks CSS 960 grid, HTML5 BoilerPlate, Bootstrap, Foundation, Skeleton, 320...
10/ Optimisation et performance
  • Mesurer la performance de chargement, optimisation de bande passante. Répartition Client/Serveur
  • Optimisation des ressources graphiques
  • Gestion du cache
Approche Pédagogique

Approche Pédagogique

  • Pédagogie très opérationnelle fondée sur l'alternance entre théorie et pratique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
Public Cible

Personnes Visées

  • Développeurs
  • Concepteurs Web
  • Webmasters
Dates

Dates

  • Du 24 au 26 Avril 2024
  • Du 17 au 19 Juil. 2024
  • Du 23 au 25 Oct. 2024
  • Fin d'Inscription :
    Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.