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.