Responsive Web Design

2 jours (14 heures)

Formation certifiante - Code CNCP : 2226 - Certif Info : 83841

  • Présentiel
  • Blended - Learning
  • FOAD / E-learning tutoré
Le programme Responsive Web Design
Allez plus loin : développez vos compétences

Objectifs

  • 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

Prérequis

Connaissances en développement Web (formation »HTML5 , CSS3″ et « JavaScript  » )

Vous n’avez pas les prérequis nécessaires pour la formation Responsive Web Design  ? Contactez nous pour étudier ensemble un parcours sur mesure et garantir ainsi la réussite de votre projet

Intervenants

Les contenus pédagogiques sont synchronisés sur les évolutions techniques grâce à notre équipe d’intervenant experts et professionnels du secteur enseigné. Les formateurs qui interviennent pour animer les formations ont une double compétence : compétence informatique et compétence métier (Banque, Assurance, Administration, Santé, Transport).

PROGRAMME DE FORMATION RESPONSIVE WEB DESIGN

Jour 1 : Comprendre les fondamentaux du Responsive Web design (RWD).

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.

Jour 2 : Mettre en place le Responsive Web Design (RWD).

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.

Jour 3 : Utiliser Bootstrap pour le Responsive Web Design (RWD).

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.

Jour 4 : Techniques avancées pour le Responsive Web Design.

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

Une attestation d’assiduité sera délivrée après la validation de toutes les compétences de ce module.

POUR TOUTE DEMANDE DE RENSEIGNEMENT OU DE DEVIS

CONTACTEZ-NOUS