Dawan

Webmaster Intermédiaire : jQuery, Bootstrap, Accessibilité

Par Dawan

Objectifs

Maîtriser les fonctions de jQuery - Construire un site adaptatif avec Bootstrap - Optimiser l'acessibilité des pages de votre site web

Programme

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

Pédagogie

  • Un support et les exercices du cours pour chaque stagiaire
  • Un formateur expert ayant suivi une formation à la pédagogie
  • Boissons offertes pendant les pauses en inter-entreprises
  • Salles lumineuses et locaux facilement accessibles
  • Méthodologie basée sur l'Active Learning : 75% de pratique minimum
  • Matériel pour les formations présentielles informatiques : un PC par participant
  • Evaluation de fin de formation : Certification CPF ou mise en situation notée par le formateur
  • si vous êtes en situation de handicap, nous sommes en mesure de vous accueillir, n'hésitez pas à nous contacter à referenthandicap@dawan.fr et nous étudierons ensemble vos besoins.

Formations de la même catégories (5)

IB Formation
Ergonomie et UX design d'interfaces graphiques pour appareils tactilesPar IB Formation

Si le marché des ventes de PC s’essouffle, celui des tablettes et smartphones continue d’afficher de bonnes performances. C’est dire l’engouement du grand public pour ces appareils. Face à ce phénomène, les entreprises "commerciales" se doivent de réagir et de proposer, comme il y a quelques années sur Internet, des applications (Apps) ou des sites web adaptés à ces appareils. Mais la diversité des tailles d’écrans comme la nécessité de proposer une navigation "tactile" très intuitive impose une sérieuse réflexion quant au design et à l’ergonomie de ce type d’interfaces. A l’issue de cette formation, les participants disposeront des connaissances et compétences qui leur permettront de réaliser des applications web ou des sites web conviviaux pour tous les utilisateurs (web et mobiles).

Orsys
Analyse et ergonomie des IHM logiciellesPar Orsys

Cette formation vous présentera les principes de l'ergonomie des IHM et vous fera découvrir les bonnes pratiques pour concevoir et améliorer leur design.

Global Knowledge
Developing on Hyperledger Fabric BlockchainPar Global Knowledge

Découvrez les besoins en applications Blockchain, ainsi que Hyperledger Fabric, le framework open source pour le développement d'applications et de solutions Blockchain à architecture modulaire. Ce cours vous présentera l'outil Hyperledger Composer, qui vous aide à créer des applications Hyperledger Fabric grâce à des travaux pratiques complets.

Ce cours est enseigné par des experts de premier plan, qui vous guideront à travers les sujets de présentation et ceux plus approfondis, tels que les étapes pour intégrer / développer une application avec Hyperledger Fabric v1.1.

Pyramyd Formation
HTML5, CSS3 et le responsive Web designPar Pyramyd Formation

CERTIFICATION ENI

La certification valide des compétences et se présente sous la forme d’un questionnaire à choix multiple adaptatif avec plusieurs niveaux de questions.