Les nouveautés HTML5 et CSS3

Présentation

Le web a subi de nombreuses transformations au cours de ses deux décennies d'existence. De nombreuses carences se sont révélées dans les langages utilisés à l'origine. Dans le but de les combler, le W3C a mis en place les normes HTML5 et CSS3. Les avancées les plus spectaculaires sont l'intégration native des éléments multimédias mais il existe un grand nombre d'apports tout aussi importants et souvent méconnus.

Cette formation HTML5 CSS3 vous permettra d'apprendre à créer des pages et des applications Web utilisant HTML5 et CSS3. Vous découvrirez l'ensemble des avancées du HTML5 : vidéo, canvas, formulaires, ... mais aussi les nombreuses nouvelles possibilités de mise en forme offertes par les CSS3 telles que les responsive design.

L'ensemble des navigateurs n'étant pas encore prêt pour ces technologies, vous apprendrez à mettre en place des techniques permettant de gérer des comportements alternatifs destinés aux clients Web vétustes mais encore présents.

Contenu

  • Rappels sur le HTML4 et introduction au HTML5
  • Les nouvelles balises : video, audio, canvas...
  • Les nouveaux attributs des formulaires
  • Rappels sur le CSS2.1 et introduction au CSS3
  • Les nouveaux sélecteurs
  • Les nouvelles règles de mise en forme
  • La prise en compte des divers médias : smartphones, écrans, imprimantes...

Participants

Ce stage s'adresse aux concepteurs de sites Web et informaticiens désireux de connaître les avancées proposées par les technologies HTML5 et CSS3.

Les décideurs confrontés à des choix stratégiques pour des nouveaux projets Web sont également susceptibles d'être intéressés.

Formateur

Cette formation est réalisé par Marc Souviron et se déroule à Toulouse au centre de formation Entre Vous et Nous, 12 grande rue Nazareth.

Pré-requis

Bonnes connaissances du HTML4.1/xHTML1.0 et du CSS2.
Savoir utiliser un éditeur.

Travaux pratiques

  • Réalisation de nombreuses pages HTML5 comprenant de la vidéo, des canvas, des formulaires, des micros données...
  • Applications de règles de style CSS3 en utilisant l'ensemble des sélecteurs disponibles
  • Réalisation de menus déroulants fluides entièrement conçus en CSS3
  • Réalisation de pages s'adaptant au médias cible

Programme de la formation

  • Rappels
    • Rappels sur les versions HTML, XML et DOM
    • Position des navigateurs face aux technologies HTML. Impact de la normalisation
    • Outils de développement HTML5
    • Test de compatibilité, méthode de détection HTML5
  • Introduction au HTML5
    • Les objectifs de HTML5
    • Les nouveaux concepts et les nouveaux éléments
    • Le calendrier prévisionnel de HTML5
    • Quand peut-on utiliser HTML5 ? Peut-on faire encore l'impasse ?
    • Comment valider une page HTML5
  • Les nouvelles balises HTML5
    • Structure de la page
    • La sémantique HTML5
    • Nouvelles balise sémantiques : header, footer, nav, section, article, aside
    • Dessiner dans des pages avec l'élément canvas
    • L'intégration d'images vectorielles en SVG
    • Les micro-données. Leur intérêt pour le référencement. Présentation des attributs itemtype, itemprop, itemscope...
    • Les apports sur les formulaires
      • Les nouveaux types input (email, date, week,...)
      • Les nouveaux attributs : range, autofocus, placeholder, pattern...
      • La validation des données par le formulaire
    • Les formats multimédia. Codecs et API Multimédia. Gestion vidéo et audio avec les nouvelles balises HTML5
  • Nouveautés du CSS3
    • Nouveaux sélecteurs : :nth-child, :target...
    • Support des polices distantes : @font-face
    • Mode d'affichage flexible : display:flex
    • Mise en forme du texte
      • Les ombres text-shadow
      • Les débordements : text-overflow
      • Les colonnes multiples : column-count...
    • Les déclarations de couleurs. Le modèle de couleur en teinte, saturation, luminosité, alpha (hsla(60, 50%, 80%, 0.5)
    • Le contrôle de l'opacité : opacity
    • Les coins arrondis : border-radius
    • Les ombres des boîtes : box-shadow
    • La gestion des fonds
      • Les fonds multiples
      • Les fonds ajustés aux conteneurs : background-size
      • Les dégradés : linear-gradient, radial-gradient
    • Effectuer des transformations géométriques : transform
    • Réaliser des animations uniquement avec CSS3 :
      • Par application progressive de transitions : transition
      • Par exécution d'une séquence : @keyframes