Evolution MM

Formations à l'informatique
Découvrez la différence ENI

Lien accueil

Téléchargez le Calendrier des formations

Nantes, Rennes, Niort, Nice, Paris

Janvier à Juillet 2017

Rechercher
Rechercher une formation
 

Responsive Web Design - Créer des interfaces Web ergonomiques et adaptatives (action collective FAFIEC "Evoluer vers le développement objet" réf. 26858)

ENI Service a été retenue par le FAFIEC dans le cadre de l'action collective de formation "Evoluer vers le développement objet .NET et Java". Si vous êtes salarié d'une entreprise cotisant au FAFIEC, vous pouvez bénéficier d'une prise en charge à 100% du coût de cette formation.

Dans cette formation, vous apprendrez à concevoir des interfaces Web à l'aide des techniques standards définies en CSS et du framework Bootstrap pour adapter automatiquement l'interface utilisateur graphique et l'ergonomie en fonction de l'appareil utilisé (smartphone, tablette, PC).

Public :

  • Développeurs, analystes programmeurs, chefs de projets.

Objectifs :

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

Pré-requis :

  • Idéalement, avoir suivi la formation " T4ACF-2 - Création de contenus pour le Web en HTML5 et CSS3 ", ou posséder les connaissances et compétences équivalentes.

Contenu pédagogique

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