RESPONSIVE WEB DESIGN Créer des interfaces Web ergonomiques et adaptatives
Grâce à cette formation, vous saurez concevoir des interfaces Web à l'aide des techniques standards définies en CSS et du framework Bootstrap.
Proposé par
GROUPE ARKESYS
Objectifs pédagogiques
-
Mettre en place une interface HTML5 et CSS3 ;
-
Créer un site web responsive ;
-
Utiliser l'ensemble de la bibliothèque Bootstrap 3.
Programme de la formation
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
Proposé par
GROUPE ARKESYS
"La formation maintenant pour vos talents de demain"
Proposé par
GROUPE ARKESYS
