Formation HTML5 / CSS3

Découvrez toutes les nouveautés du HTML5 : nouvelles balises, microdonnées, meilleur référencement, vidéo et audio sans Flash
Et celles du CSS3 : sélecteurs, graphisme avancé, gestion des médias, transformations, animations, media queries, responsive design.

Durée 3 jours soit 21.00 heures de formations de 9h30 à 18h00.

Qualité 8 stagiaires par session maximum. 1 poste Mac ou Windows par stagiaire. Support de cours accessible en ligne.

Public Graphistes, webdesigners, webmasters, intégrateurs, développeurs, chefs de projet, ou toute autre personne en charge de la création de pages web.

Objectifs

  • Connaître les nouveautés HTML5 et CSS3 et leurs compatibilités
  • Savoir améliorer le référencement dans les moteurs de recherche
  • Savoir améliorer l'ergonomie et l'accessibilité
  • Etre capable d'intégrer de la vidéo, de l'audio et de réaliser des animations sans Flash ni Javascript
  • Réaliser du graphisme avancé avec peu d'images
  • Savoir adapter le positionnement aux différents médias (mobile, tablettes,...)

Formation HTML5 / CSS3

1 - Compatibilité

  • Manuels et outils de travail
  • Standards et compatibilités des navigateurs
  • DOCTYPE, charset et modes de compatibilité

2 - Référencement

  • Nouvelles balises sémantiques (header, nav, article, footer, ...)
  • Microdonnées (itemscope, itemtype, itemprop)

3 - Ergonomie et accessibilité des formulaires

  • Nouveaux type de champs (email, ...)
  • Nouveaux attributs (required, ...)

4 - Multimédia

  • Vidéo et audio (sans Flash)
  • Sous-titres
  • SVG embarqué

5 - Sélecteurs et valeurs CSS3

  • Sélecteurs d'attributs
  • Nouvelles pseudo-classes d'état
  • Valeurs dynamiques : calc()
  • Variables

6 - Positionnement CSS3

  • Inlineblock, boxsizing, clearfix
  • Flexbox

7 - Introduction au responsive design

  • Media queries CSS : s'adapter au différentes tailles d'écran et à l'orientation
  • Viewport

8 - Graphisme façon print

  • Colonnes
  • Régions et exclusions

9 - Graphisme avancé

  • Polices personnalisées
  • Couleurs, transparence et dégradés
  • Ombres
  • Bordure arrondies et en images
  • Arrière-plans multiple
  • Filtres (noir et blanc, ...)

10 - Animations (sans Flash ni Javascript)

  • Transformation 2D
  • Transitions
  • Animations autonomes
/srv/datadisk01/home/formation/site3