Formation Responsive Web Design

Public visé : Cette formation est destinée aux développeurs et aux webmasters

Pré-requis : Connaître le HTML5 et le CSS3

Objectif : Maîtriser le développement de sites web dont l'affichage s'adapte aux différentes résolutions

Moyens pédagogiques, techniques et d'encadrement : Présentation sur vidéo projecteur, PC et connexion internet fournis, support de cours fourni.

Modalités de suivi de l'exécution de l'action : Feuille d'émargement et attestation de formation.

Modalité d'évaluation des acquis : Tests de contrôle des connaissances, Evaluation à chaud.

Points abordés :

PRESENTATION

• Le W3C et WHATWG
• Les standards du web
• Les normes W3C
• Contraintes des supports mobiles

HTML5/CSS3

• Les innovations HTML5 et CSS3
• Rappels HTML5
• Utilité du CSS3

INTRODUCTION

• 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
• Un design fluide limité
• 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, Boilerplate, 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)
• « Minifier » le code
• Concept de l’Adaptative Design

MISE EN APPLICATION

Public visé : Cette formation est destinée aux développeurs et aux webmasters ne connaissant pas l'HTML5 etle CSS3

Pré-requis : Connaître le HTML et le CSS

Objectif : Maîtriser le développement de sites web dont l'affichage s'adapte aux différentes résolutions

Moyens pédagogiques, techniques et d'encadrement : Présentation sur vidéo projecteur, PC et connexion internet fournis, support de cours fourni.

Modalités de suivi de l'exécution de l'action : Feuille d'émargement et attestation de formation.

Modalité d'évaluation des acquis : Tests de contrôle des connaissances, Evaluation à chaud.

Points abordés :

PRESENTATION

• Le W3C et WHATWG
• Les standards du web
• Les normes W3C
• Contraintes des supports mobiles

LE LANGAGE HTML5

• Doctype, nouvelles balises et nouveaux attributs
• Balises et attributs obsolètes
• Structurer une page
• Balises vidéo, audio et formulaire

LES APIS DE L'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 WEB DESIGN

• 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
• Un design fluide limité
• 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, Boilerplate, 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)
• « Minifier » le code
• Concept de l’Adaptative Design

MISE EN APPLICATION

Public visé : Cette formation est destinée aux graphistes et intervenants non techniciens

Pré-requis : Savoir utiliser internet

Objectif : Maîtriser les concepts et contraintes du responsive web design

Moyens pédagogiques, techniques et d'encadrement : Présentation sur vidéo projecteur, PC et connexion internet fournis, support de cours fourni.

Modalités de suivi de l'exécution de l'action : Feuille d'émargement et attestation de formation.

Modalité d'évaluation des acquis : Tests de contrôle des connaissances, Evaluation à chaud.

Points abordés :

PRESENTATION

• Le W3C et WHATWG
• Les standards du web
• Les normes W3C
• Contraintes des supports mobiles

HTML5/CSS3

• Les innovations HTML5 et CSS3

INTRODUCTION

• 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

GRILLE FLUIDE

• Le principe de base
• Grille et design fluide

LES OUTILS

• La suite d'outils Adobe Edge
• Les opérateurs logiques

GRILLE FLUIDE

• Le principe de base
• Grille et design fluide

LES OUTILS

• La suite d’outils Adobe Edge
• Outils de test

MISE EN APPLICATION