Nouvelle formation

Formation Responsive Web Design Expert

Maîtriser le Responsive Web Design

Présentation

RWDE
5 jours ( 35 heures )
Présentation
Ce stage vous permettra de découvrir toutes les techniques concrètes permettant d'adapter un design sur un terminal nomade actuel et d'optimiser les performances et temps d'affichage
Objectifs du cours
Ce cours vous permettra de maîtriser la création de sites adaptatifs, de mettre en place une sémantique web efficace pour le référencement de vos pages web, de savoir identifier les instrusions et mettre en place une stratégie de sécurité dans vos applications web.
Pré-requis
Connaissances de base en HTML et CSS.

Programme

Construire un site web adaptatif

Responsive Web Design (RWD) : définition, composantes 
Standards, le HTML5 et CSS3 
Détection de ressources avec Modernizr
Contraintes ergonomiques et fonctionnelles
Viewport : notion, meta, valeurs 
Unités relatives (%, em) vs. absolues (px)
Ressources utiles : outils, galeries de sites mobiles

Créer une grille d'affichage flexible

Tailles d'écran, résolution optimale
Modes portrait et paysage
Expression des tailles en pourcentage (%), em
Tailles minimales, maximales 
Blocs, approche contenu/contenant 
Principe des box, layout avec CSS3 
Taille des fonts : fixer une base pour les tailles, conversions em 
Eviter les débordements

Utiliser des médias flexibles

Images flexibles : images de fond, adaptation HTML5
Marges et espaces flexibles 
Vidéos adaptées 
Support des propriétés CSS par les anciens navigateurs

Ecrire des CSS3 Media Queries

Adaptation de l'affichage en fonction de la résolution 
Types de médias
Choix des règles conditionnelles : orientation, device-width 
Medias queries internes, externes 
Gestion des menus et sliders 
Polyfills pour le support des anciens navigateurs

Découvrir Bootstrap

Bootstrap : présentation, apports, exemples 
Bootstrap et le Responsive Web Design (RWD)
Cohabitation de Bootstrap avec les autres frameworks javascript : jQuery, ExtJS,...
Grille Bootstrap, templates de base et layouts
Composants et classes CSS
Mécanisme de RWD (classes CSS / device)
Documentation, liens utiles
Rappels HTML5/CSS
Bases de jQuery

Maîtriser les classes CSS de base

Typographie et liens 
Tableaux : lignes, bordures, survol, RWD 
Eléments de formulaires, contrôles supportés 
Boutons : options, tailles, état 
Images et icônes : éviter les débordements

Utiliser les composants Bootstrap

Barres de navigation : tabs, pills, justified nav 
Menus déroulants : formulaires, boutons, positionnement 
Breadcrumb (fil d'arianne)
Pagination
Badges 
Alertes 
Barres de progression : labels, animations
Media object
List group

Manipuler Bootstrap en Javascript

Mise en place de transitions 
Fenêtres modales : types, tailles 
Gestion des menus déroulants 
Tabulations 
Sliders 
Auto-complétion 
Personnalisation de Bootstrap
Gestion des claviers virtuels
Désactivation du responsive sur certaines pages
Gestion du zoom 


Manipuler Bootstrap avec Less

Présentation de Less
Utilisation en mode interprété / compilé
Variables: déclaration et appel
Variables: interpolation et lazy loading
Héritage de règles

Manipulation avancée

Mixin: principes de base, espace de nommage
Mixin paramétrique
Mixin en tant que fonction
Gardien: structures conditionnelles et itératives
Inclusions d'autres feuilles Less

Comprendre l'ergonomie des sites web

Définitions générales : ergonomie, ligne de flotaison, format, supports mobiles, etc
Loi de Gestalt et Fitts
Principes de base, règles et standards
Utilisabilité, personas
L'UX
Comprendre les systèmes de navigation
Gestion des sites volumineux

Rendre votre site accessible

Comprendre l'accessibilité
Règles pour l'accessibilité des contenus Web WCAG 1 et 2
RGAA : référentiel d'Accessibilité pour les Administrations
Accessiweb : présentation du référentiel 
Section 508, UWEM
Normes ATAG et UAAG 
Outils d'audit : WAT, WDT, extensions de navigateurs
Validation : niveaux, outils


Sécuriser votre site web

Rappel des notions de base : Couches OSI, TCP, HTTP, Codes de retour, persistance et pipelining
Méthodes HTTP : GET, POST, OPTIONS, PUT, DELETE, HEAD, TRACE
Notion de cookies, les attributs, les options associées
Le chiffrage et le hashage ; algorithmes modernes
Authentifications HTTP (basic, digest)
Systèmes de SSO (Single Sign On)
Sécurité hors attaque : les sinistres et accidents
Attaques sociales, exemples et effets
Attaques par injections SQL, mails, LDAP, XPath, code arbitraire - exemple de filtrages en entrée
URL malicieuses : faire exécuter une URL (injections HTML, HTTP response splitting...)
URL malicieuses : conséquences - Cross Site Scripting, Cross Site request Forgery
Obfuscation et information leakage (code accessible, erreurs visibles...)


Comprendre la sémantique web

Valorisation du contenu d'une page web pour améliorer le référencement 
Hypertexte sémantique et sémantique embarquée dans les pages HTML 
Nouvelles balises sémantiques HTML5 
Formats de balisage : Microdata, Microformats, RDFa 
Rich Snippets : présentation, outils de test
Compatibilité des Rich Snippets avec les types de contenu : Avis, Personnes, Produits, Événements,...



Intégrer des Microdata et utilisation de schémas

Microdata : spécifications HTML 5 
Nouveaux attributs : itemscope, itemtype, itemprop, itemref, itemid 
Microdata API support 
Schema.org : présentation, documentation
Hiérachie des types 
Mise en place, bonnes pratiques

 

 

Partager cette formation

 

Contactez-nous

contactez logware

Vous êtes intéressé par cette formation ou souhaitez simplement obtenir des informations complémentaires ?

+33 1 53 94 71 20

Écrivez-nous on vous rappelle

  1. Nom*
    Merci de saisir un nom valide
  2. Prénom*
    Merci de saisir un prénom valide
  3. E-mail*
    Merci de saisir une adresse email valide
  4. Téléphone*
    Numéro de téléphone invalide
  5. Entreprise
    Donnée invalide

Parce que nous comprenons la nécessité d'obtenir un enseignement qui permettra à votre équipe d'atteindre vos objectifs, nous restons flexibles et sommes capables d'adapter nos programmes de formation à vos besoins.

> En savoir plus