jQuery mobile

By attending jQuery Mobile workshop, Participants will:

  • Learn about jQuery Mobile’s capabilities, supported devices, and support for accessibility
  • Create page transitions, dialogs, and buttons optimized for mobile
  • Incorporate phone-friendly forms, sliders, dialogs, and other widgets
  • Handle touch, phone-orientation, scrolling and other phone events
  • Learn how to use jQuery Mobile to make calls, send SMS text messages, send emails, and display video
  • Extend jQuery Mobile’s capabilities with the ThemeRoller framework
  • Create plugins and incorporate others’ plugins into your code

In jQuery Mobile training course, you will learn to use jQuery Mobile, an HTML5-based user interface system, to develop single sites for all popular smartphone, tablet, and desktop platforms.

Participants will learn to use jQuery Mobile to handle touch events, build mobile-optimized forms and widgets, incorporate HTML5 features, leverage phone capabilities such as making calls and texting, and more. Along the way, you will learn jQuery Mobile’s extensive theme framework and plugin architecture.

  • jQuery Mobile workshop is designed for web developers, mobile app developers, and UI designers.

COURSE AGENDA

  • 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 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
  • Architecture
  • Self hosted vs. CDNs
  • CDNs available
  • Main template
  • Support on IDEs
  • Roles
  • Theming
  • 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
  • Customizing toolbars
  • Positioning toolbars
  • Navigation Bars
  • Persistent footers and navigation
  • Collapsible content
  • Accordions
  • Working with columns
  • Creating buttons
  • Inline buttons
  • Grouped buttons
  • Icons
  • Custom icons
  • 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
  • AJAX vs. non-AJAX forms
  • Automatic form behavior
  • Labeling
  • Field containers
  • Text fields
  • Slider
  • Slider switch
  • Select menus
  • UI Select menus
  • Radio Buttons
  • Checkboxes
  • File Upload
  • Validation using HTML5
  • 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
  • HTML5 vs AJAX
  • Bringing JSON data to jQuery Mobile
  • Updating form controls
  • Updating lists
  • Implementing Infinite list pattern
  • 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
  • Using Web Storage and WebSQL
  • Using geolocation
  • The offline manifest
  • Full-screen webapps for iOS
  • What is a hybrid
  • PhoneGap vs other alternativeS