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.…).
Responsive Web Design
4 jours II Code CNCP : 2226 II Certif info : 83841
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
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.
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
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.