- Price £997.00
- Level Introduction
- Duration 5 day(s)
Description
In this class, you will learn how to develop client side user interface for smart phones and tablets.
Prerequisites
jQuery Mobile training is designed for UI designers and developers
Assumed Knowledge
- HTML 4 / XHTML knowledge
- JavaScript basic preferred
- jQuery basic preferred
- CSS basic preferred
Skills
By the end of jQuery Mobile training, you should be able to develop relatively complex user interfaces for mobile devices all by yourself.
Course Content
The Background
- The mobile space today
- Advantages
- Challenges
- Native vs. web, is really a question?
- What is JQM?
- What is not jQM?
- What is a webapp?
- Why jQM?
- Features
- Compatibility
- Requirements
HTML5 basics
- HTML5 in a small nutshell
- Why HTML5?
- What do we need to know about HTML5 for jQM
- Basic template
- Testing HTML5 documents
- Emulators, Simulators & more
- Viewports on mobile browsers
- Custom data-* attributes
The framework
- Architecture
- Self hosted vs. CDNs
- CDNs available
- Main template
- Support on IDEs
- Roles
- Theming
The page
- Headers and footers basics
- Mandatory items in a page
- Working with HTML in the content
- Navigation
- Internal page navigation
- External page navigation
- Understanding AJAX on mobile browsers
- Absolute external links
- Mobile Special links
- Transitions
- Dialogs
- Prefetching
- Integration with the Phone
UI Components
- Customizing toolbars
- Positioning toolbars
- Navigation Bars
- Persistent footers and navigation
- Collapsible content
- Acoordions
- Working with columns
Buttons
- Creating buttons
- Inline buttons
- Grouped buttons
- Icons
- Custom icons
Lists
- Creating lists
- Full-page vs inset-lists
- Visual separators
- Nested lists
- Interactive rows
- Split button rows
- Row icons
- Thumbnails
- Count bubbles
- Aside content
- Title and Description
- Filtering data
Forms
- AJAX vs. non-AJAX forms
- Automatic form behaviour
- Labeling
- Field containers
- Text fields
- Slider
- Slider switch
- Select menus
- UI Select menus
- Radio Buttons
- Checkboxes
- File Upload
- Validation using HTML5
The framework and JavaScript
- Using jQuery inside jQuery Mobile
- $.mobile element
- The mobileinit event
- Configuring defaults
- Touch events
- Orientation events
- Scroll events
- Page events
- Virtual mouse events
- Managing navigation through JavaScript
Dynamic data with jQuery Mobile
- HTML5 vs AJAX
- Bringing JSON data to jQuery Mobile
- Updating form controls
- Updating lists
- Implementing Infinite list pattern
Extending the framework
- Using plugins
- The top 5 plugins for jQuery Mobile
- Creating our own plugin
- Plugin architecture
- Understanding CSS architecture
- Define our own CSS patch
- Changing CSS behavior
Managing data with HTML5
- Using Web Storage and WebSQL
- Using geolocation
Packaging for installation and stores
- The offline manifest
- Full-screen webapps for iOS
- What is a hybrid
- PhoneGap vs other alternatives
- Packaging a sample application