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 03 au 05 juin 2019

Nantes

Du 03 au 05 juin 2019

Dijon

Du 03 au 05 juin 2019

Aix-en-Provence

Du 03 au 05 juin 2019

Nice

Du 03 au 05 juin 2019

Tarif inter

Tarif non renseigné

Tarif sur mesure

Réf.

10ACA

Demande de renseignement

FORMATIONS ASSOCIÉES