RESPONSIVE WEB DESIGN Mixte : présentiel / à distance

• Web développeurs, Web designers, graphistes.

• Posséder les connaissances et compétences en langages HTML et CSS.

A l'issue de cette formation, l'apprenant sera capable de :

• Optimiser l'affichage des sites Internet pour tous supports (Smartphones, tablettes, PC).

Jour 1 – Matin

Introduction

• Le Responsive Web design d'Ethan Marcotte
• Règles de colorimétrie adaptée aux terminaux
• Technologie Mobile First
• Penser grilles fluides
• Les différents terminaux
• Navigateurs PC, Smartphone, Tablettes

Les tailles d'écran d'un mobile

• Les résolutions des principaux mobiles
• Taille réelle ou taille en pixels CSS ?
• Screen-width ou device-width
• Comment définir les points de rupture ?
• Le Viewport d'Apple !
• Initial-scale maximum-scale
• La recommandation W3C @viewport CSS

Jour 1 – Après-midi

HTML5 - CSS3

• La nouvelle sémantique HTML5
• Compatibilité avec IE - Hack
• Compatibilité avec les anciens navigateurs
• Les nouveaux éléments
• Les nouvelles propriétés CSS3 (ombres, transitions, coins, bordures, dégradés)

Jour 2 – Matin

Grilles Fluides :

• Unités de mesure : % em pixel !
• Mise en page avec les colonnesLes propriétés
• CSS3 des grilles fluides : position - float - clear - width - max-width - overflow
• Optimiser la taille et la résolution des images

Média Queries CSS3

• Ajouter des conditions avec Media Queries
• Les critères pour mobiles (width, height, device-width, orientation, etc.)
• Compatibilité Media Queries IE - Hack
• Faire disparaître ou apparaître des éléments en fonction des points de bascule
• Gérer la taille de police
• Gérer les contrastes

Jour 2 – Après-midi

Bibliothèques JavaScript

• Modernizr :
• Dépister les éléments non pris en charge par les navigateurs (HTML5, CSS3, MQ, Tactile …)
• Responsive avec Modernizr
• JQuery :
• Les composants UI
• JQuery responsive

Concepteur : ENI SERVICE – Diffuseur : Groupe ARKESYS

• Optimiser l'affichage des sites internet pour tous supports (Smartphones, tablettes, PC)

• Explications théoriques suivies de pratiques guidées puis de mises en autonomie.
• Exercices autonomes et réguliers pour assurer l'assimilation

Votre formation a lieu en présentiel :

• 1 vidéoprojecteur par salle
• 1 ordinateur

Votre formation se déroule à distance avec :

• 1 ordinateur
• 1 connexion Internet
• 1 adresse e-mail valide
• 1 équipement audio (micro et enceintes ou casque)
• 1 Webcam (facultatif – dans l'idéal)
• 1 deuxième écran (facultatif – dans l'idéal)

Votre formation se déroule sur notre plate-forme de formation avec :

• 1 ordinateur
• 1 connexion Internet
• 1 adresse e-mail valide
• 1 équipement audio (micro et enceintes ou casque - facultatif)

Support stagiaire :

À l'issue de la formation, les exercices et travaux pratiques réalisés, leurs corrigés ainsi qu'un support de cours dématérialisé sera fourni à chaque stagiaire par e-mail ou via la plate-forme FOAD.