Description

Cette formation vous apprendra à créer des pages et des applications Web en utilisant HTML5 et CSS3. Vous découvrirez les avancées proposées par le HTML5 notamment en termes d'interfaces Web riches/RIA, de multimédia et de moyens de communication permettant la mise en oeuvre d'applications client/serveur attractives.

À qui s'adresse cette formation ?

Pour qui ?

Développeurs et chefs de projets Web.

Prérequis

Les objectifs de la formation

Concevoir et développer des applications Web en HTML 5 et CSS 3 Mettre en place et valider la structure HTML 5 des pages Web Habiller des pages Web en CSS 3 afin de les rendre plus attractives Rendre responsive design les pages Web d'un site Intégrer des animations et du contenu multimédia

Programme de la formation

• Rappels
  • Rappels sur les versions HTML (HTML 4, XHTML 1.
  • x, XHTML 2).
  • Les DTD : strict, transitional, frameset.
  • Les différents composants d'un document HTML : titres, paragraphes, liens, tableaux, formulaires.
  • Les commentaires.
  • La structure composite d'un document HTML : images, feuilles de style CSS, JavaScript, Flash.
  • Le modèle de document (DOM).
  • Le protocole HTTP.
  • Interaction client/serveur HTTP.
  • Interprétation du HTML par le navigateur.
  • Position des navigateurs face aux technologies HTML.
• Introduction au HTML 5
  • Les objectifs de HTML 5.
  • Le WhatWG versus W3C.
  • Les principaux concepts et apports.
  • Les différents composants : balises, formulaires, audio, vidéo, API, etc.
  • Outils de développement HTML 5.
  • Test de compatibilité, méthode de détection HTML 5.
  • Travaux pratiques Démonstrations.
  • Découvertes des possibilités et du champ d'action.
• Nouvelle structuration
  • Les éléments traditionnels structurant un document HTML 5 (doctype, html, head, body, meta .
  • ).
  • L'élément
  • L'élément
    et la mise en place de blocs de contenus.
  • L'élément
    et la mise en place de contenus indépendants du document.
  • L'élément
  • Les éléments
    et
  • Les autres balises de structure.
  • Les nouvelles catégories de contenus : Metadata content, Flow content, Sectioning content, Heading content.
  • Les nouvelles catégories de contenus : Phrasing content, Embedded content, Interactive content.
  • La validation des pages avec le valideur officiel du W3C.
  • Intérêt de ses nouvelles balises de structure.
  • Imbrication et type de contenu.
  • Travaux pratiques Mise en place et validation de la structure d'un document HTML 5.
• Les nouvelles balises HTML
  • Les balises et attributs obsolètes.
  • Les images SVG pour le dessin vectoriel.
  • Les canevas pour le dessin "bitmap".
  • Différence Canvas vs SVG.
  • Les nouvelles balises : , , ,

    , .

  • Les extensions de balises HTML existantes.
  • Les nouveaux attributs : a, fieldset, iframe, area, button.
  • Les microformats.
  • Présentation et avantages sur le référencement.
  • Attributs itemprop='nationality'.
  • Les formulaires.
  • Les nouveaux types de la balise (email, date, week.
  • ).
  • Les nouveaux champs de formulaires : range, autofocus, placeholder, menu.
  • Le contrôle et la validation de formulaires.
  • Les formats multimédias.
  • Codecs et API Multimédia.
  • Gestion vidéo et audio avec les nouvelles balises
  • Travaux pratiques Création de templates HTML 5.
  • Positionnement d'éléments en absolu.
  • Nombreux TP sur la mise en oeuvre des balises HTML 5 (formulaires, conception.
  • ).
  • Réalisation d'un lecteur multimédia.
• Les sélecteurs CSS 3
  • Rappel sur la syntaxe : les sélecteurs, les règles.
  • Sélecteurs de répétition nth-child(even).
  • Sélecteurs de cible target.
  • Sélecteurs frère antérieur ~.
  • Sélecteurs d'enfant unique only-child.
  • Media Queries pour le chargement conditionnel des CSS selon la résolution ou l'orientation du terminal.
  • Création de layout avec flexbox (organisation des éléments en fonction d'une grille).
  • Travaux pratiques Intégration de CSS 3 aux applications Web.
  • Sélection d'éléments d'une page HTML 5.
• Les couleurs et la mise en forme du texte
  • Rappel sur les déclarations rgb et rgba.
  • Les modèles hsl et hsla.
  • La propriété opacity.
  • Support des polices distantes
  • font-face.
  • Mise en forme du texte.
  • Gestion des débordements par text-overflow.
  • Gestion des enchaînements par wrap-option, white-space-treatment.
  • Effets de couleur et d'ombre sur texte text-fill-color, text-shadow.
  • Les modes multicolonnes avec column-count, column-width.
  • Travaux pratiques Application de couleurs.
  • Mise en forme de textes.
  • Gestion multicolonne.
• La mise en forme des boîtes et des fonds
  • Les ombres avec box-shadow.
  • Les coins arrondis avec border-radius.
  • Les fonds multiples.
  • Les gradients de fond (-webkit-gradient).
  • Les fonds ajustés aux conteneurs.
  • Travaux pratiques Appliquer des ombres et des arrondis.
• Les transformations
  • Les transformations : translations, rotations, homothéties (-webkit-transform).
  • Les animations : les animations, les transitions (?webkit-transition).
  • Travaux pratiques Animations et effets de transition.