Arkesys

Responsive Web Design - Créer des interfaces Web ergonomiques et adaptatives

Par Arkesys

Objectifs

A l’issue de cette formation, l’apprenant sera capable de :

  • Mettre en place une interface HTML5 et CSS3 ;
  • Créer un site web responsive ;
  • Utiliser l'ensemble de la bibliothèque Bootstrap 3.

Programme

Partie 1 - Responsive Web Design - fondamentaux et bonnes pratiques

Introduction

  • Principes fondamentaux
  • Approche Mobile First
  • Penser grilles fluides
  • Les différents terminaux
  • Navigateurs PC, smartphone et tablettes

Rappels sur HTML5 et CSS3

  • Structure d'une page HTML 5 et CSS 3
  • Les éléments et attributs HTML5
  • Notions fondamentales CSS
  • Nouveautés CSS3

Structure fluide et positionnement

  • Unités de mesure : % em pixel
  • Mise en page avec les colonnes
  • Propriétés CSS3 des grilles fluides : position - float - clear - width - max-width - overflow
  • Mise en page a l'aides des " Flexbox "
  • Optimisation de la taille et la résolution des images

Résolutions d'écrans et Media Queries

  • Résolutions des principaux mobiles
  • Viewport et Zoom
  • Critères (width, height, device-width, orientation, etc.)
  • Points de ruptures et grilles

Travaux pratiques

  • Conception de pages utilisant les principales techniques CSS :
  • Structure fixe
  • Structure fluide à base de " Flexbox "
  • Structure fluide à l'aide de " Media Queries "

Partie 2 - Optimiser la conception Web avec le framework Bootstrap

Présentation du framework Bootstrap 3

  • Présentation du framework Bootstrap 3
  • Télécharger et installer Bootstrap 3
  • Créer une première page HTML utilisant Bootstrap 3

Présentation du contenu dans une grille Responsive

  • Concept de grilles de Bootstrap 3
  • 4 grilles pour 4 types de supports
  • Créer une page multi-grilles
  • Manipuler les grilles
  • Afficher et cacher des zones en fonction du support
  • Changer l'ordre des zones
  • Décaler les éléments d'une grille

Composants et mise en forme prédéfinis

  • Disposition du texte
  • Mise en forme contextuelle
  • Bibliothèque Glyphicons
  • Listes simples et Listes regroupées
  • Boutons simples, à états, groupés
  • Menus déroulants
  • Alertes et Messages
  • Tableaux
  • Formulaires

Travaux pratiques

  • Construction d'une pages Web à partir du système de grille
  • Mise en place d'un menu de navigation " Responsive "
  • Mise en forme d'un formulaire
  • Mise en forme d'un tableau de données

Pédagogie

  • Explications théoriques suivies de pratiques guidées puis mises en autonomie
  • 1 vidéoprojecteur par salle
  • Stage en mode « In Class » : 2 téléviseurs et 1 caméra HD par salle
  • 1 ordinateur par stagiaire
  • Exercices de synthèse et d’évaluation
  • Evaluation de fin de stage

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.

Nous utilisons les cookies afin de fournir les services et fonctionnalités proposés sur notre site et afin d’améliorer l’expérience de nos utilisateurs. En cliquant sur ”J’ai compris”, vous acceptez l’utilisation de ces cookies.