Responsive web design

Objectifs

Savoir développer des sites web dont l'affichage s'adapte aux différentes résolutions.

Programme de la formation

INTRODUCTION

• L'histoire de l'HTML5


• L'HTML5 d'aujourd'hui


• L'HTML5 de demain


• Pourquoi faire le choix de l'HTML5


• Connaitre la compatibilité des navigateurs

LE LANGAGE HTML5

• Le Doctype


• Les nouvelles balises


• Les nouveaux attributs


• Les balises et attributs obsolètes


• Les principales balises


• La structure d'une page


• Balises Vidéo et audio


• Balises de formulaire

Le W3C et WHATWG

• Les standards du web


• Les normes W3C


• Contraintes des supports mobiles

LES APIS HTML5

• Le dessin avec la balise Canvas


• Le drag and drop


• Le stockage de données


• La gestion des évènements


• La géo-localisation

LE CSS3

• Les bordures arrondies


• La transparence


• Les ombres portées


• Mise en page


• Les animations (transitions et transformations)

INTRODUCTION AU RESPONSIVE

• Les principes du responsive web design


• Le concept du « Mobile First »


• Les différentes résolutions


• Contenant/Contenu


• Comptabilité avec les navigateurs


• Solutions techniques pour les navigateurs non compatibles

LE DESIGN FLUIDE

• % OU em


• min-width et max-width


• Les bonnes pratiques


• Portrait ou paysage

LES MEDIAS QUERIES

• Screen


• Média queries CSS2


• Média queries CSS3


• Les opérateurs logiques

GRILLE FLUIDE

• Le principe de base


• Grille et design fluide


• Images fluides et police fluide


• Web font

LES OUTILS

• Les frameworks (Bootstrap, Foundation, …)


• La suite d'outils Adobe Edge


• Utilisation de Modernizr


• HTML shiv


• Respond.js


• Outils de test


• Utilisation de Dreamweaver

OPTIMISATION

• Sprite CSS


• Polices d'icônes (icomoon, glyphicons, awesome font, …)


• « Minifier » le code


• Concept de l'Adaptative Design

MISE EN APPLICATION

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique