Accueil / 2 – HTML5 et CSS3 (exclusif FAFIEC) – 28133

2 – HTML5 et CSS3 (exclusif FAFIEC) – 28133

Objectifs

  • Concevoir et développer des applications Web en HTML5 et CSS3
  • 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
  • Créer des images et des animations vectorielles

Prérequis

  • Connaissances de base en HTML et CSS

Public

  • Développeurs
  • Chefs de projets
  • Concepteurs

Moyens pédagogiques

  • La flipped classroom (classe inversée) : le concept ou la méthodologie sont présentés aux stagiaires dès le début de chaque thématique, puis suivis d’une mise en pratique immédiate. Avantages : cette pédagogie par itérations favorise l’acquisition de connaissances, l a mise en confiance des apprenants et permet un gain de temps, au profit d’une meilleure prise en charge des questions/obstacles rencontrés par les participants
  • La résolution collaborative de challenge : des travaux pratiques jalonnent nos formations. Les cas d’usage sont tous inspirés de situations professionnelles réelles vécues par le formateur ou inspirées du quotidien « métier » des participants, notamment lorsqu’il s’agit de formations en intra-entreprise. L’animateur formateur est là comme facilitateur et agitateur d’idées et de réflexes
  • L’évaluation des acquis se fait à travers des Quiz en questions ouvertes et/ou fermées et par la remise d’un rapport restituant les méthodes appliquées et les résultats obtenus pendant la résolution collective de challenges

Programme

  1. Introduction :

    • Les DTD et la syntaxe XML (structuration, commentaires)
    • La structure d’un document HTML : images, feuilles de style CSS, JavaScript
    • La sémantique HTML : titres, paragraphes, liens, tableaux, formulaires…La sémantique HTML : titres, paragraphes, liens, tableaux, formulaires…
    • Le modèle de document (DOM). Le protocole HTTP
    • Optimisation du chemin critique de rendu (Critical Render Path)
    • Topographie des concepts et apports du HTML5
    • Outils de développement HTML5
    • Test de compatibilité, méthode de détection HTML5
    • Atelier : Découvertes des possibilités du HTML5 et des outils de développement
  2. Nouvelle structuration :

    • Les éléments traditionnels structurant un document HTML (doctype, html, head, body, meta…)
    • Les éléments de structure <nav>, <section>, <article>, <aside>, <header> et <footer>
    • Les catégories de contenus : Metadata, Flow, Sectioning, Heading, Phrasing, Embedded et Interactive content
    • Intérêt des balises structurantes pour le référencement
    • Imbrication et type de contenu
    • Atelier : Mise en place et validation de la structure d’un document HTML5
  3. Les nouvelles balises HTML :

    • Les balises et attributs obsolètes
    • Les balises : <mark>, <meter>, <time>, <figure>, <picture>…
    • Les extensions de balises HTML existantes
    • Les attributs : a, fieldset, iframe, area, button…
    • Les microformats. Présentation et avantages sur le référencement
    • Les nouveaux champs et attributs de formulaires : range, autofocus, placeholder, menu…
  4. La mise en forme des boîtes et des fonds :

    • Les ombres avec box-shadow
    • Les coins arrondis avec border-radius…
    • La gestion des fonds multiples
    • Les gradients de fond (-webkit-gradient)
    • Les fonds ajustés aux conteneurs
    • Les transformations : translations, rotations, homothéties
    • Les animations : les animations, les transitions
    • Les dessins : Canvas versus SVG
    • Les formats multimédias. Codecs et API Multimédia
    • Gestion vidéo et audio avec les nouvelles balises <audio> et <video> HTML5
    • Atelier : Création de templates HTML5. Positionnement d’éléments en absolu. Réalisation d’un lecteur multimédia
  5. Les sélecteurs CSS3 :

    • Rappel sur la syntaxe : les sélecteurs, les règles
    • Sélecteurs de répétition nth-child(even), de cible target, de frère antérieur ~, d’enfant unique only-child
    • Media Queries pour chargement conditionnel des CSS selon résolution ou orientation du terminal
    • Atelier : Intégration de CSS 3 aux applications Web. Sélection d’éléments d’une page HTML5
  6. 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
    • Création d’un système d’icônes
    • 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…
    • Atelier : Application de couleurs. Mise en forme de textes. Gestion multicolonne
  7. Flexbox:

    • La fin des floats
    • Répartitions des sous-blocs dans le bloc parent
    • Ordre d’affichage des blocs
    • Occupation de l’espace mis à disposition par les parents
    • Centrer un bloc en hauteur en 2 lignes de code
    • Changement de la disposition et de la taille de ces blocs en fonction de la taille de l’écran de l’internaute
    • Atelier : Mise en page modulaire et adaptée en responsive design
  8. Choisir un Framework CSS :

    • L’offre communautaire. (Bootstrap, Material Design, Foundation)
    • Critère communs et concepts partagés
    • Les Framework spécialisés composants
    • Les Framework spécialisés mobiles
    • Atelier : Initiation à différents framework CSS
  9. SVG, image vectorielle et responsive :

    • La syntaxe SVG
    • Support et intégration des images SVG dans le document
    • SVG et polices de caractères
    • Optimisation de SVG
    • Animation des graphiques SVG
    • Bibliothèque pour la création de graphiques SVG (SVG.js, Velocity, Raphael…)
    • Atelier : Travailler avec des fichiers image. Création d’une animation vectorielle
  10. Grid Layout :

    • Le principe de Grilles « Grid »
    • Réaliser une mise en page par bloc
    • Positionnement de chacun des blocs sur la page
    • Changement de la disposition et de la taille des blocs parents en fonction de la taille de l’écran de l’internaute
    • Atelier : Mise en page modulaire et adaptée en responsive design

Nombre de jours

3

Dates

Paris

Du 19 au 21 décembre 2018

Marseille / Aix / Nice

Du 19 au 21 décembre 2018

Nantes

Du 19 au 21 décembre 2018

Bordeaux

Du 19 au 21 décembre 2018

Orléans

Dijon

Tarif inter

Tarif non renseigné

Tarif sur mesure

Réf.

10ACA

Demande de renseignement

FORMATIONS ASSOCIÉES