Responsive Web Design

4 jours II Code CNCP : 2226 II Certif info : 83841

/Responsive Web Design

Responsive Web Design (RWD) enseigne aux concepteurs et aux développeurs les compétences nécessaires pour créer des applications Web et des sites qui s’adaptent à un large éventail d’appareils (ordinateurs, tablettes, téléphones, etc.…).

Les objectifs de la formation Responsive Web Design

A l’issu de la formation Responsive Web Design, les apprenants auront les capacités 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
Lien vers site CPF

Les prérequis de la formation Responsive Web Design

La formation Responsive Web Design nécessite les prérequis suivants :

  • Connaissances en développement Web (formation Cegefos : »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.

Lien vers site CPF

Le public de la formation Responsive Web Design

  • 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
Lien vers site CPF

0

Certif Info

0

Code CNCP

0

Jours

0

Heures

Contenu de la 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

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

Modalités De Formations

Responsive Web Design

La formation certifiante Responsive Web Design est disponible en 3 modalités : E-learning tutoré, Blended Learning et en présentiel.

FOAD / E-Learning tutoré

La formation certifiante Responsive Web Design est disponible en e-learning ou à distance tutoré. Vous serez accompagné par un formateur / Tuteur tout au long de la formation.

Blended-Learning

La formation Responsive Web Design est disponible en Blended learning. La partie apprentissage se déroule en e-learning, et les projets fil rouge en présentiel.

Présentiel

Le module de formation Responsive Web Design est disponible en présentiel ou en distanciel. La formation sera animé par un formateur à distance ou en classe.

Financement et Éligibilité

de la formation Responsive Web Design

CPF

CPF « Compte Personnel de Formation.

VAE

VAE: Validation des Acquis de l’Expérience.

AIF

AIF : Aide Individuelle à la Formation par Pôle Emploi.

CPF de transition

CPF de transition pour une Reconversion Professionnelle.

Contrat PRO

Contrat d’alternance ou de Professionnalisation.

POEc

Préparation Opérationnelle Emploi Collective.

PDC

Plan de Développement de Compétences de l’entreprise.

AFPR

Action de Formation Préalable à l’Embauche.

POEi

Préparation Opérationnelle Emploi Individuelle.

Besoin d'un