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.

L'acquisition des compétences de la formation se fait à travers le suivi du formateur tout au long de la formation (séquences synchrones et asynchrones). Elle s'appuie également sur la réalisation d'exercices et de TP. Enfin, des quiz s'ajoutent aux différents outils de validation de l'acquisition des compétences visées. Une évaluation est systématiquement réalisée par chaque stagiaire, à l'issue de la formation.

Nos formateurs sont certifiés à l'issue d'un parcours organisé par nos soins. Ils bénéficient d'un suivi de maintien et d'évolution de leurs compétences aussi bien au niveau technique que pédagogique.
Chacun de nos formateurs a bénéficié d'une formation spécifique à l'animation de classe virtuelle et à l'utilisation des solutions de formation à distance du Groupe ARKESYS.

Cette formation est accessible à toute personne en situation de handicap. Notre référent handicap prendra contact avec les stagiaires concernés pour adapter l'animation à leurs besoins et rendre l'apprentissage accessible à tous. Enfin, nos centres de formation sont accessibles aux personnes à mobilité réduite.