Pyramyd Formation

HTML5, CSS3 et le responsive Web design

Par Pyramyd Formation

Objectifs

Identifier les standards HTML5 et CSS3
Découvrir le potentiel graphique des CSS3
Composer et modifier une maquette Web responsive
Intégrer les balises HTML5 : vidéo, audio et Canvas
Créer des motifs élaborés en CSS3

Programme

HTML5, CSS3 et le responsive Web design

Découvrir l’écosystème du Web mobile actuel
- Comprendre et distinguer les notions de Web adaptatif, site responsive, application native, WebApp, progressive WebApp…
- Analyser les usages actuels
- Respecter les bonnes pratiques de la mobilité : contraintes et optimisations, amélioration progressive vs dégradation élégante
➔ Étude de cas : analyse de sites et d’applications remarquables

Comprendre le responsive Web design
- Comprendre les notions de Viewport et de variabilité de mises en pages
- Distinguer et définir les points de rupture
- Composer avec les nouveaux concepts du responsive design : surface d’affichage vs surface de rendu, pixel physique vs pixel CSS
➔ Étude de cas : analyse de sites remarquables

Maîtriser les Media Queries
- Décrypter la règle @media : les types de médias et types de requêtes (min-width, orientation, aspect-ratio…)
- Choisir ses largeurs de colonnes et les points de rupture
- Ajouter la balise meta Viewport pour iOS
- Identifier les types et techniques de gabarits : fixes, élastiques, fluides, mixte, flex, column, grid layout, grilles…
➔ Exercice : créer des gabarits et leurs points de rupture

Maîtriser les techniques de mise en pages CSS responsive
- Repositionner les fondamentaux
- identifier le rôle des reset et des pré-processeurs
- clarifier les notions d’héritage et de poids de sélecteurs
- utiliser les sélecteurs avancés
- calculer les tailles d’objet avec le modèle de boîte standard et la propriété box-sizing
- contrôler les fusions de marge
- calculer les tailles de texte, les largeurs de colonnes et points de rupture
- Utiliser les techniques avancées de mise en pages
- maîtriser les techniques et astuces de déplacement et de centrage : margin auto, displays inline, inline-block, position et %, vertical-align, line-height, table et table-cell, column
- définir ses largeurs de colonnes : min et max-width, unités em
- maîtriser les flottants : overflow, clear, clearfix
- convertir une maquette “classique” en RWD
- réaliser une maquette RWD avec Flexbox
- analyser une maquette RWD avec Grid Layout
- découvrir les systèmes de grille responsive et les frameworks actuels : Bootstrap, Foundation
➔ Exercice : composer différentes maquettes responsive

Adapter ses contenus aux capacités des écrans et bandes passantes
- Calculer les ratios pour présenter les contenus image et vidéo
- Découvrir les trucs et astuces de l’optimisation : “compression zero”, SVG inline et génération de sprites, background-images, srcset…
- Contrôler les déplacements, masquages et chargements conditionnels
- Utiliser les outils de test
- Utiliser les polyfills pour les anciens navigateurs
➔ Exercice : mettre en oeuvre ces pratiques selon les besoins des apprenants

Formations de la même catégories (5)

IB Formation
Ergonomie et UX design d'interfaces graphiques pour appareils tactilesPar IB Formation

Si le marché des ventes de PC s’essouffle, celui des tablettes et smartphones continue d’afficher de bonnes performances. C’est dire l’engouement du grand public pour ces appareils. Face à ce phénomène, les entreprises "commerciales" se doivent de réagir et de proposer, comme il y a quelques années sur Internet, des applications (Apps) ou des sites web adaptés à ces appareils. Mais la diversité des tailles d’écrans comme la nécessité de proposer une navigation "tactile" très intuitive impose une sérieuse réflexion quant au design et à l’ergonomie de ce type d’interfaces. A l’issue de cette formation, les participants disposeront des connaissances et compétences qui leur permettront de réaliser des applications web ou des sites web conviviaux pour tous les utilisateurs (web et mobiles).

Orsys
Analyse et ergonomie des IHM logiciellesPar Orsys

Cette formation vous présentera les principes de l'ergonomie des IHM et vous fera découvrir les bonnes pratiques pour concevoir et améliorer leur design.

Global Knowledge
Developing on Hyperledger Fabric BlockchainPar Global Knowledge

Découvrez les besoins en applications Blockchain, ainsi que Hyperledger Fabric, le framework open source pour le développement d'applications et de solutions Blockchain à architecture modulaire. Ce cours vous présentera l'outil Hyperledger Composer, qui vous aide à créer des applications Hyperledger Fabric grâce à des travaux pratiques complets.

Ce cours est enseigné par des experts de premier plan, qui vous guideront à travers les sujets de présentation et ceux plus approfondis, tels que les étapes pour intégrer / développer une application avec Hyperledger Fabric v1.1.

Pyramyd Formation
HTML5, CSS3 et le responsive Web designPar Pyramyd Formation

CERTIFICATION ENI

La certification valide des compétences et se présente sous la forme d’un questionnaire à choix multiple adaptatif avec plusieurs niveaux de questions.