Passer au contenu
21 h

Technologies mobiles

Design Web mobile avec CSS3

Préalables

Bonne connaissance 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

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