Développement Web : PHP, Symfony, AngularJS, Node.JS module Responsive Web Design

• Développement Web : PHP, Symfony, AngularJS, Node.JS - Code CertifInfo 93841
  • Niveau de qualification : Sans équivalence de niveau

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

Programme de la formation

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.

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 www.cegefos.com

Validation et sanction

Certification

Type de formation

Certifiante

Sortie

Sans niveau spécifique