Bootstrap Logo

Goals


- Master the functions of jQuery

- Build an adaptive site with Bootstrap

- Optimize the accessibility of your website pages

Program

Presentation of jQuery: objectives, alternatives … Use
cases, examples of sites
Specific principles and tips
Cohabitation with other frameworks

Workshop: Setting up jQuery (development / production) – conflict management with other frameworks ($ / jQuery)

Essential functions and chaining
Extended CSS3 selectors Browsing
, manipulation of the DOM tree and filters

Workshop: Handling web pages with jQuery: elements, styles, …

Principle
Control of the execution context of callbacks
Existing functions

Workshop: Multiple use cases for callbacks, consumption

Link behavior
Event association and triggering
Animation effects

Workshop: Panorama of events managed by jQuery, combination of effects

Asynchronous / synchronous communication
Implementation of AJAX
jQuery functions available
Interface of Deferred and Promise objects
Loading of pages and code injection
Full integration of AJAX and the UI
Compatibility with other frameworks

Workshop: AJAX requests and XML parsing with jQuery

Operating principle
Overview of existing plugins (jQuery UI, others …)
Widgets: sliders, tooltips, drag’n’drop …
Creation of a custom jQuery plugin

Workshop: Integration / use of existing plugins (slider, datePicket, …) – Creation of a plugin

Bootstrap: presentation, contributions,
Bootstrap examples and Responsive Web Design (RWD)
Cohabitation of Bootstrap with other javascript frameworks: jQuery, ExtJS, …
Bootstrap grid, basic templates and layouts
CSS components and classes
RWD mechanism (CSS classes / device)
Documentation, useful links
HTML5 / CSS reminders
jQuery basics

Workshop: Include Bootstrap in a project, a first flexible grid

Typography and links
Tables: lines, borders, rollover, RWD
Form elements, supported controls
Buttons: options, sizes, status
Images and icons: avoid overflows

Workshop: Using bootstrap classes in web pages

Navigation bars: tabs, pills, justified nav
Drop-down menus: forms, buttons, positioning
Breadcrumb (breadcrumb)
Pagination
Badges
Alerts
Progress bars: labels, animations
Media object
List group

Workshop: Multiple examples of Bootstrap component integration

Setting up transitions
Modal windows: types, sizes
Management of drop-down menus
Tabs
Sliders
Auto-completion
Customization of Bootstrap
Management of virtual keyboards
Deactivation of responsive on certain pages
Zoom management

Workshop: Integration of interactions and transitions

Presentation of Less
Use in interpreted / compiled mode
Variables: declaration and call
Variables: interpolation and lazy loading
Rules inheritance

Mixin: Basics,
Parametric
Mixin namespace Mixin as a
Guardian function : conditional and iterative structures
Inclusions of other sheets Less

Workshop: Multiple modification of Bootstrap components with Less

Issues and constraints
WCAG 2.0, RGAA and AccessiWeb 2.2 standards

Mandatory elements for a page (doctype, language, etc.)
Attributes of tags (images, links, multimedia, etc.)
Structure and present information (Title, list, citation, etc.)
Styles and colors
Forms
Facilitate navigation
Make consultative elements accessible (document for download)

Workshop: Set up a valid page for accessibility

WYSIWYG editors and accessibility
CMS tool integration and accessibility 

Workshop: Integrate a WYSIWYG and test accessibility

Understand the principle of automatic validation
Use validation tools Validation
levels

Workshop: Testing the validity of a site

Duration

5 days

Price

£ 2164

Audience

Webmasters, developers, integrators

Prerequisites

Good knowledge of HTML, CSS - Notions of JavaScript

Reference

SIT100755-F

Sessions

Contact us for more informations about session date