jQuery Mobile Training Course
Course Summary
jQuery Mobile training is a hands-on class introducing you to developing mobile applications using jQuery Mobile framework. In this class, you will learn how to develop client side user interface for smart phones and tablets.
[top] Duration
2 days.
[top] Objectives
By the end of jQuery Mobile training, you should be able to develop relatively complex user interfaces for mobile devices all by yourself.
[top] Audience
jQuery Mobile training is designed for UI designers and developers.
[top] Prerequisites
- HTML 4 / XHTML knowledge
- JavaScript basic preferred
- jQuery basic preferred
- CSS basic preferred
[top] Instructors
Maximiliano Firtman is one of the leading experts in mobile and web 2.0 development in the Americas today. From development and private consulting work, to writing books and speaking at conferences, to training some of the most advanced software teams around the globe. Max has been a Nokia Developer Champion since 2006 and Adobe Community Champion since 2011. He is the author of the book Programming the Mobile Web and the upcoming jQuery Mobile: Up & Running, both published by O'Reilly Media. He has also written books in Spanish distributed in Latin America and Spain, such as AJAX, Web 2.0 Para Profesionales. You can follow him on twitter at @firt.
More about Max Firtman...[top] Outline
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
[top] Student Testimonials
Max did a great job and the content was excellent.