Formation Webmaster Intermédiaire : jQuery, Bootstrap, Accessibilité

Programme de Formation Webmaster Intermédiaire : jQuery, Bootstrap, Accessibilité

 Découvrir jQuery

Présentation de jQuery : objectifs, alternatives...
Cas d'utilisation, exemples de sites 
Principes spécifiques et astuces 
Cohabitation avec d'autres frameworks

Atelier : Mise en place de jQuery (développement/production) - gestion des conflits avec les autres frameworks ($ / jQuery)

Maîtriser les fonctionnalités de base

Fonctions essentielles et chaînage
Sélecteurs CSS3 étendus
Parcours, manipulation de l'arbre DOM et filtres

Atelier : Manipulation de pages web avec jQuery : éléments, styles, ...

Comprendre les callbacks

Principe
Contrôle du contexte d'exécution des callbacks
Fonctions existantes

Atelier : Multiples cas d'utilisation des callbacks, consommation

Construire des interfaces utilisateurs grâce à jQuery

Comportement des liens
Association d'évènements et déclenchement
Effets d’animations

Atelier : Panorama des évènements gérés par jQuery, association d'effets

Réaliser des requêtes AJAX avec jQuery

Communication asynchrone/synchrone
Mise en oeuvre d'AJAX
Fonctions jQuery disponibles
Interface des objets Deferred et Promise
Chargement de pages et injection de code
Intégration complète d'AJAX et de l'UI
Compatibilité avec les autres frameworks

Atelier : Requêtes AJAX et parsing XML avec jQuery

Utiliser et déveloper des plugins

Principe de fonctionnement
Panorama des plugins existants (jQuery UI, autres...)
Widgets : sliders, infobulles, drag’n’drop... 
Création d'un plugin personnalisé jQuery

Atelier : Intégration/utilisation de plugins existants (slider, datePicket, ...) - Création d'un plugin

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
 

Atelier : Inclure Bootstrap dans un projet, une première grille flexible

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

Atelier : Utilisation de classes bootstrap dans des pages web

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

Atelier : Multiples exemples d'intégration de composants Bootstrap

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 
 

Atelier : Intégration d'interractions et de transitions

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

Atelier : Modification multiple des composants Bootstrap avec Less 

Comprendre l'accessibilité

Les problématiques et contraintes 
Les normes WCAG 2.0, RGAA et AccessiWeb 2.2

Rendre des pages accessibles

Les éléments obligatoires pour une page (doctype, langue, etc)
Les attributs des balises (images, liens, multimedias, etc)
Structurer et présenter les informations (Titre, liste, citation, etc)
Les styles et les couleurs
Les formulaires
Faciliter la navigation
Rendre accessible les éléments consultatifs (document en téléchargement)

Atelier: Mettre en place une page valide pour l'accessibilité

Utiliser des éditeurs
 

Les éditeurs WYSIWYG et l’accessibilité
L’intégration d’outil CMS et l’accessibilité 

Atelier: Intégrer un WYSIWYG et tester l'accessibilité 

Valider l'accessibilité d'un site

Comprendre le principe de la validation automatique
Utiliser les outils de validation
Les niveaux de validations

Atelier: Tester la validité d'un site