HTML5 / CSS3 (2 jours)

HTML5 / CSS3

Objectifs

Le couple HTML5/CSS3 est le standard du web tant attendu : interopérabilité accentuée, formulaires enrichis, esthétisme et animations des pages, médias évolués ou encore stockage de données en local. Tout est enfin disponible pour réaliser des applications clientes riches pour tous les types de périphériques depuis les ordinateurs jusqu'aux smartphones. Un panel complet des possibilités sera présenté par le biais de modules, chaque module ayant une partie théorique pour assimiler les concepts et des TPs associés pour les mettre en pratique. A l'issue de cette formation le stagiaire aura une vue exhaustive des enjeux et des nouvelles capacités de HTML5/CSS3, et sera autonome pour initier des applications Web desktop et mobiles.

Contenu de la formation

De HTML à HTML5 en passant par XHTML
  • Evolutions du langage
  • Syntaxes et DOCTYPE
  • Prise en charge par les navigateurs
  • HTML5 pour faire quoi ?
  • Sensibilisation au cas du mobile
HTML5, nouveaux éléments et attributs
  • Recomposition d'une structure de page HTML
  • Recomposition d'une hiérarchie de page HTML
  • Les nouveaux attributs data-*
  • Les éléments obsolètes ou réaménagés
  • Les autres nouveautés
Les formulaires « Web form »
  • Nouveaux types de INPUT
  • Nouveaux attributs (placeholders, min, max...)
  • Nouveaux éléments de formulaire (progress bar...)
  • Un peu de CSS
  • Upload multiple de fichiers: exemple du "drag and drop"
HTML5 multimédia et dessin
  • Les éléments audio et vidéo
  • Les types de formats et codecs
  • Canvas
  • SVG
  • Canvas vs SVG
HTML avec CSS3
  • De CSS2 à CSS3
  • Les implémentations selon les navigateurs
  • Gestion media avec les media queries
  • Propriétés de texte
  • Les décorations (ombres, coins arrondis, arrière-plans multiples, dégradés...)
  • Les modes de positionnement
Les sélecteurs CSS3
  • Parcourir le DOM
  • Sélecteur d'attribut
  • Sélecteurs de pseudo classes
  • Combinateur d'adjence indirecte
CSS3, transformations, transitions et animations
  • Pourquoi privilégier les effets CSS3 plutôt que les effets en JS
  • Les transforamtions graphiques
  • les transitions
  • Les animations
CSS3 avec les préproceseurs
  • A la découverte des préprocesseurs CSS
  • Les principaux préprocesseurs CSS
  • Liste des fonctionnalités
HTML5 Web API
  • Présentation Web API
  • Géolocalisation
  • Web Storage
Librairie Modernizr
  • Présentation Modernizr
  • Modernizr pour CSS
  • Modernizr pour JavaScript
  • Le compagnon yepnope

Support de formation