RESPONSIVE WEB DESIGN

Formation certifiante - Code CPF 83 841 - 4 jours (28 heures)

Formations en présentiel

Formations Blended - Learning

Formations E-learning Tutoré

Présentiel

Blended - Learning

E-learning tutoré

Accueil  >  Les métiers du numérique  >  Développement Web  >  Responsive Web Design

A l'issue de la formation, les stagiaires seront capables de :

  • Créer des designs Web ergonomiques pour Mobile
  • Travailler en tenant compte du Responsive Web Design
  • Améliorer l’expérience utilisateur
  • Comprendre et justifier les décisions techniques

La formation Responsive Web Design est accessible à toute personne ayant des connaissances en développement Web, HTML5 , CSS3 et JavaScript.

Des exercices, des études de cas, des QCM et des tours de table permettent au formateur d’évaluer l’atteinte des objectifs ainsi que la progression du stagiaire à différents moments de la formation.
La validation de toutes les compétences requises est obligatoire pour l’obtention d’un BADGE ou d’un Certificat. L'obtention du Certificat est validé par la réalisation et la présentation d'un projet devant un jury.

  • Toute personne ayant des connaissances basiques en WEB et souhaitant maîtriser le développement d’application WEB pour mobile
  • Intégrateur WEB, designer, Webmaster ou référenceur WEB souhaitant avoir une double compétence et évoluer dans le développement Web
  • Informaticiens et concepteurs souhaitant maîtriser les techniques pour développer des sites Web Cross Plateforme
  • Toute personne souhaitant élargir ses compétences sur les missions liées à la fonction de développement WEB Hybide

PROGRAMME DE FORMATION

RESPONSIVE WEB DESIGN

Introduction au Responsive Web Design

  • Qu’est-ce que le Responsive Web Design ?
  • Les navigateurs mobiles
  • Autres considérations sur le web mobile
  • Techniques de conception adaptée
  • Éléments de Responsive Design
  • Exemple de conception adaptée
  • Alternatives à Responsive Design

CSS 3 et Responsive Web Design

  • Amélioration progressive
  • Mise en œuvre de l’amélioration progressive
  • Types de support
  • Style CSS « Reset »
  • Styles conditionnels pour Internet Explorer
  • Qu’est-ce que la fenêtre d’affichage ?
  • Adaptation du Viewport
  • Spécification du Viewport
  • Les médias Queries
  • Caractéristiques des médias utilisés dans les médias Queries
  • La combinaison des techniques de conception adaptée
  • Test Responsive Design

Atelier et cas pratique

Mise en page Responsive Web

  • Les types de mise en page
  • Les Layouts Responsive
  • Les patterns les plus courant
  • Le pattern de layout « Mostly Fluid »
  • Le pattern de layout « Column Drop »
  • Le pattern « Layout Shifter »
  • D’autres techniques de layout
  • La propriété CSS Float
  • La combinaison de styles CSS
  • Exemple de la mise en page fluide
  • La technique de mise en page fluide
  • Unités Taille de la police
  • Pixel-Sized vs Em-Sized
  • Les relations de l’unité Taille de la police
  • Pixels à Em Formule de Conversion
  • Autres considérations
  • Regard sur l’avenir

Images réactives

  • Images réactives
  • Considérations sur les performances
  • Images Shrinking
  • Techniques traditionnelles de traitement des images
  • Médias Queries ne pas toujours aider à améliorer les performances
  • Avoir un pixel « fluide »
  • Les fenêtres de l’appareil
  • Pixels CSS
  • La puissance de la simplicité
  • Sencha.io Src Images Service Cloud
  • Sencha.io Src Schéma
  • Comment ça marche
  • API Sencha.io Src
  • Sencha.io Src Détails API
  • Sencha.io Src API Détails suite
  • Des exemples de l’API Sencha.io Src
  • Savoir utiliser un service de manipulation d’image en cloud
  • L’élément d’image
  • L’attribut srcset
  • Plus d’informations sur l’attribut srcset
  • Des exemples de l’attribut srcset
  • Qu’est-ce que le Picturefill?
  • L’utilisation du Picturefill

Atelier et cas pratique

Boostrap, vue d’ensemble

  • Qu’est-ce que Bootstrap
  • Mots-clés de bower.js
  • L’Histoire de Bootstrap
  • Le Développement Web Responsive
  • Mise en page d’une Grille Responsive
  • Composants GUI réutilisables
  • JavaScript
  • La Philosophie Mobile
  • Pourquoi le RWD
  • Une vue Responsive
  • Obtenir Bootstrap
  • Bootstrap Content Delivery Network
  • Autres options de configuration
  • Bootstrap fichiers Core

Utilisation de Bootstrap

  • Les fichiers CSS Bootstrap
  • Les fichiers JavaScript Bootstrap
  • Viewport Meta Tags
  • Exemples
  • Layouts
  • La grille Bootstrap
  • Explication de la grille
  • La navigation
  • Navigation (bureau)
  • Navigation (Mobile)
  • Source de navigation
  • Éléments de navigation et Styles

Bootstrap, sujets divers

  • Composants bootstrap
  • Composants Bootstrap pour les Pages Web
  • L’intégration de composants Bootstrap avec jQuery
  • Identification de la version requise de jQuery
  • Télécharger le Bootstrap Minimifié
  • Utilisation de Customizer
  • Le Customizer page Fragment
  • Compilation et chargement personnalisé Bootstrap
  • Personnalisation des composants Bootstrap

Atelier et cas pratique

Autres techniques

  • Sprites
  • Police d’icônes
  • Code Emoji
  • Graphiques vectoriels évolutifs (SVG)
  • CSS3

Solutions côté serveur

  • Images adaptatives
  • Images réactives
  • Solutions serveur tiers

Atelier Cas pratique

Allez plus loin

Développez vos compétences

Financement avec le CPF via

le site MonCompteFormation

POUR TOUTE DEMANDE DE RENSEIGNEMENT OU DE DEVIS