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