HTML5 & CSS3

H i s t o i r e  et  c o n t e x t e
Rappel sur les évolutions de HTML et CSS depuis 15 ans
Le processus de normalisation : le W3C et le WHATWG
HTML5 : une nouvelle vision du langage
CSS3 : la maturation de CSS2

H T M L 5 : C r é e r u n d o c u m e n t
Généralité sur la syntaxe HTML
Le nouveau Doctype
Langage et encodage de caractère
Le support navigateur

H T M L 5 : S t r u c t u r e r u n d o c u m e n t
Évolution de l’imbrication des balises : disparition des notions de “inline” et “block”
Les nouvelles balises : header, footer, structure, aside, nav, hgroup, etc.
Les balises obsolètes : center, font, frame, acronym, etc.
Exercice : Structurer une page avec les nouvelles balises

H T M L 5 / C S S 3 : L e s f o r m u l a i r e s
Les nouveaux champs de formulaire
Structurer un formulaire
Les nouvelles pseudo-class CSS pour les formulaires : :valid, :invalid, :checked,
Etc.
Exercice : Créer un formulaire de contact et le mettre en forme

H T M L 5 : L e m u l t i m e d i a
La balise video
La balise audio
Les balises object, embed et svg
Les fichiers multimedia : conteneur (MP4, OGG, WEBM) et codec (.h264, Vorbis,
Theora, VP8, etc.)
Exercice : Inclure une video dans une page et créer une interface de contrôle personnalisée

H T M L 5 : D e s s i n e r
La balise canvas
SVG
Différence et cas d’usage de ces 2 technologies
Les filtres SVG
WebGL
Exercice : Créer un graphique avec Raphaël JS, les données étant dans une table
HTML

H T M L 5 : L e s n o u v e l l e s A P I J a v a s c r i p t !
Extension du DOM : getElementByClassName, querySelector, contenteditable
Les WebWorkers
Drag n’ Drop
Gestion des fichiers
Gestion de l’historique
Communication bi directionnelle asynchrone avec WebSocket
Stockage de données côté client : Web Storage (sessionStorage et localStorage)
et IndexedDB
Fonctionnement déconnecté avec appcache
Géolocalisation
Device API et Web API
Exercice : Créer une “todo list” avec IndexedDB, fonctionnant sans connexion

L ' a p p o r t  d e H T M L 5  à  v o s  d é v e l o p p e m e n t s  p o u r  m o b i l e
Bases de données côté client
Stockage permanent et stockage dans la session
Utilisation d'une base de données en HTML5
Cartes Google Maps
Utiliser le GPS en HTML5
Intégrer une carte Google Maps dans l’application
Utiliser le multitouch dans les applications

R e s p o n s i v e w e b d e s i g n
Introduction
Les bonnes pratiques du responsive web design
Adaptabilité des pages et web application
Frameworks et librairies : iUi, Less, FitVids, Modernizr, Angular, etc
Adaptabilité du contenu et du contenant

C S S 3 : I n t r o d u c t i o n
Avancement du travail de spécification
Les préfixes vendeurs
Cascade et compatibilité navigateur

C S S 3 : L e s s é l e c t e u r s
Rappel sur les selecteurs CSS2
Les nouveaux selecteurs CSS3
Les nouvelles pseudo-class CSS3 : :last-child, :nth-child, :nth-of-type, :not
Exercice : Mettre en évidence les liens ouvrant une autre page, en indiquant aussi
la langue du lien

L e s  n o u v e a u x  m o d e s  d e  p o s i t i o n n e m e n t
La fonction calc() et la propriété box-sizing
Mise en forme tabulaire
Mise en page multi-colonnes
Le modèle de boite flexible
Les gabarits de mise en page CSS
La mise en page en grille CSS
Exercice : Mettre en forme un gabarit de blog

C S S 3 : M e d i a Q u e r i e s
Reconnaître les capacités d’un ordinateur
Différence entre media queries et viewport
Exercice : Créer une page dont la mise en page s’adapte aux navigateurs mobiles

C S S 3 : S e p a s s e r d ’ i m a g e s
Les couleurs
Les polices de caractères
Coins arrondis
Ombres portés
Dégradé de couleurs
Bordures en images
Fonds multiples
Transformations 2D
Transformations 3D
Génération de contenu
Exercice : Mettre en forme un système de “tooltip”

C S S 3 : A n i m a t i o n
Les transitions
Les animations
Exercice : Créer un menu de navigation animé