RESPONSIVE WEB DESIGN Créer des interfaces Web ergonomiques et adaptatives Mixte : présentiel / à distance

• Toute personne souhaitant se perfectionner dans le domaine concerné

• Avoir des bases en création de contenu pour le web en HTML5 et CSS3

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.

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 page 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

Concepteur : ENI SERVICES - Diffuseur : Groupe Arkesys

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

• Explications théoriques suivies de pratiques guidées puis de mises en autonomie.
• Exercices autonomes et réguliers pour assurer l'assimilation

Votre formation a lieu en présentiel :

• 1 vidéoprojecteur par salle
• 1 ordinateur

Votre formation se déroule à distance avec :

• 1 ordinateur
• 1 connexion Internet
• 1 adresse e-mail valide
• 1 équipement audio (micro et enceintes ou casque)
• 1 Webcam (facultatif – dans l'idéal)
• 1 deuxième écran (facultatif – dans l'idéal)

Votre formation se déroule sur notre plate-forme de formation avec :

• 1 ordinateur
• 1 connexion Internet
• 1 adresse e-mail valide
• 1 équipement audio (micro et enceintes ou casque - facultatif)

Support stagiaire :

À l'issue de la formation, les exercices et travaux pratiques réalisés, leurs corrigés ainsi qu'un support de cours dématérialisé sera fourni à chaque stagiaire par e-mail ou via la plate-forme FOAD.