MOSAIQUE Informatique - Formations informatiques à Nancy 54 - Lorraine

Formation informatique, création de sites Internet, référencement dans les moteurs de recherche, web design, studio de créations graphiques et développements logiciels, organisme de formation

  • Augmenter la taille
  • Taille par défaut
  • Diminuer la taille
Accueil Formation Internet - Création web Formation responsive design - Niveau expert

Formation responsive design


Le responsive design - Formation à Nancy (54)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éveloppementFormation responsive design et web design - Nancy - 54

  • 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
  • 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 :

Formation PHP - Niveau 1

Formation PHP - Niveau 2

Formation Javascript

HTML5, CSS3, Javascript, jQuery - Niveau 1

HTML5, CSS3, Javascript, jQuery - Niveau 2

HTML5, CSS3, Javascript, jQuery - Niveau 3

Formation HTML 5 et CSS 3

Formation Joomla - Niveau 1

Formation Joomla - Niveau 2

Formation WordPress - Niveau 1

Formation WordPress - Niveau 2


 

Création de bannières publicitaires
Nous réalisons les bannières publicitaires de votre site Internet, fixes ou animées.

Formations éligibles au CPF

CPF

Certaines de nos formations sont désormais éligibles au CPF. Contactez-nous si vous souhaitez utiliser votre Compte Personnel de Formation dans le cadre de votre formation.
CPF - Formation - Nancy - 54 - Meurthe-et-Moselle - Nancy

A propos du CPF

Le CPF (Compte Personnel de Formation) se substitue, depuis le 01/01/15, au DIF (Droit Individuel à la Formation), sauf pour les salariés de la fonction publique, qui conservent leur droit au DIF.
Le CPF à pour objectif de fournir aux salariés et aux demandeurs d’emploi certains parcours de formation continue et professionnelle.
En cas de changement de statut (changement d'emploi et chômage notamment), le CPF est conservé par la personne qui en bénéficie, à concurrence de 150 heures.
Plus d'informations sur le site officiel du compte personnel de formation.

Inscription à la formation

Nos formations sont dispensées en nos locaux ou en entreprise.

MOSAIQUE Informatique est Organisme de Formation Professionnelle, enregistré auprès du Préfet de la Région Lorraine.

Pour effectuer le montage de votre dossier de formation ou plus d'informations concernant votre plan de formation, merci de nous contacter.

A propos du DIF

Le DIF (Droit Individuel à la Formation) est un droit attribué aux salariés afin de leur permettre de se former à raison de 20 heures cumulables par an (droit plafonné à 120 heures). Il a pour objectif l'acquisition de compétences en milieu professionnel.

Plus d'informations

Autres formations complémentaires