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
-
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
-
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
-
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…
-
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
-
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
-
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
-
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
-
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
-
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
-
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
