Design Web mobile avec CSS3 - Groupe 73735

Formation offerte en collaboration avec Emploi-Québec

Cours HYB19408

Plateforme Macintosh / Windows

Durée 21 heures

Lieu

3800, rue Sherbrooke Est

Local

B-1153

Numéro de groupe

73735

Frais avant taxes

(frais de matériel didactique inclus)

Emploi-Québec: 36,53 $ CAD

Grand public: 282,67 $ CAD

Date(s)

8, 9, 22 oct.

Jour(s)

Samedi, dimanche

Horaire

8 h 30 à 16 h 30

Clientèle

Emploi-Québec
Personnes en emploi

Préalables

Posséder de bonnes connaissances de HTML et CSS3

Objectifs

À la fin de l'atelier, le participant pourra utiliser CSS3 pour réaliser le design et l'intégration Web adapté aux différents supports multimédias : mobile, tablette ou ordinateur de bureau

Approche pédagogique

  • Présentation des concepts et des outils CSS
  • Démonstration des concepts à l'ordinateur
  • Exercices à l'ordinateur supervisés par le formateur
  • Aide individuelle lors des exercices

Attestation délivrée en fin de cours

Une attestation de participation est remise aux personnes ayant assisté à plus de 80 % des heures de formation

Matériel pédagogique

Matériel didactique

Autres particularités

Afin d'atteindre un bon niveau de maîtrise, le participant devrait compléter le cours par la pratique personnelle

Contenu du cours

Introduction

  • Particularités des supports multimédias
  • Conception, approches et stratégies
        Responsive Web Design RWD
        Adaptive Web design AWD
        Responsive degradation
        Mobile first
        Déclinaisons

CSS3

  • Rappel sur la codification CSS3
        Structure d’une règle
        Propriétés
        Sélecteurs
  • Sélecteurs de  CSS3
  • Nouvelles propriétés de CSS3 / HTML5

Fondements du RWD

  • Grille fluide
  • Image flexible
  • Vidéo flexible
  • Unité de grandeur relative
  • Média query

Média query

  • Syntaxe
  • Type d'intégration
  • Operateurs logiques
        and, or, not, only, virgule
  • Fonctionnalités de médias
        Préfixe min et max
        Color
        Device-with
        Device-height
        Orientation
        Device-aspect-ratio
        Resolution
        Grid
  • Valeurs, unités
  • Exemple d'utilisation    

Contrôle des images

  • Image adaptive
  • max-width
  • width, height
  • solution serveur
  • ms-interpolation-mode
  • Galerie adaptive

Adaptation d'un design existant

  • Viewport du terminal
  • Identification des points de rupture
  • Choix de navigation  
        Haut, bas
        Select
        Déroulant
        Masqué
  • Reset CSS mobile
  • Media query globaux ou feuille séparée
  • Évaluation des largeurs critiques
  • Annulation des largeurs
        width:auto
        min-width:0
  • Intégration dans le flux vertical
        float:none
        position:static
  • Gestion des débordements
  • Écran HD (rétina)

Mobile first

  • Interface mobile
  • Squelette orienté pour les petits écrans
  • Amélioration progressive
  • Suppression des pseudo-éléments
  • Conditions IE
  • Compatibilité multiplateforme
  • Outils de développement

Langages LESS et SASS

  • Description et installation
  • Mixint et  variables
  • Règles imbriquées
  • Classes avec paramètres
  • Fonctions
  • Conditions
  • Boucles

Framework front-end

  • Boilerplate
  • Bootstrap
  • Fondation
  • Cool kitten, Inuit CSS
  • Blueprint, Stitch, Grumby ...
  • Squelettes de base
  • Classes
  • Composantes
  • Exemples d'utilisation
College de Maisonneuve | Formation continue