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.







 

Duration [top]

2 days.

Objectives [top]

By the end of jQuery Mobile training, you should be able to develop relatively complex user interfaces for mobile devices all by yourself.

Audience [top]

jQuery Mobile training is designed for UI designers and developers.

Prerequisites [top]

  • HTML 4 / XHTML knowledge
  • JavaScript basic preferred
  • jQuery basic preferred
  • CSS basic preferred

Instructors [top]

Photo

Jeremy never expected nor planned on becoming a hardcore programmer, much less a computer language polyglot, but that is where his varied career has taken him. Much more interested in the technical side of things, he's worked on projects from MUDs to mapping APIs to a browser front end for corporate file sharing. Jeremy likes to learn new technology by diving in, writing a lot of bugs, and then debugging everything to get a thorough understanding of how things work. There's nothing better than finding out just what a platform is capable of, and where the boundaries still exist. Jeremy's current favorite languages are JavaScript, Python, and Lua.

When he's not teaching, he's probably rock climbing with his son, writing code for that game that maybe-someday will be published, or reading yet another classic novel that he should have read in school but didn't.

More about Jeremy Osborne...
Photo

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.

Today Max focuses on HTML5, CSS3, mobile web, multiplatform hybrid development and WPO (Web Performance Optimization). His Mobile Web Programming Blog discusses mobile web development with quite good success finding new things on devices (such as the accelerometer API in iOS) and creating the most complete mobile emulator guide up to now. He has also launched the free service Mobile Tiny URL for easy URL typing on mobile devices. In September 2011 Max has also created a new project Mobile HTML5, a compatibility tableof every mobile platform and its HTML5 support.

Max is the founder of two user groups: ARFUG -official Adobe User Group- and Mobile Argentina; and has organized lot of events in the last years, including MobileCamp and Adobe en Vivo Argentina. Max has presented at many conferences across the US, Europe and South America like Velocity, OSCON, Breaking Development, Nokia Talk, goto conference;, Campus Party, Adobe Lite Days, Adobe en Vivo, MobileCamp, and BarCamp.

More about Max Firtman...
Photo

Rick has been a freelance software engineer since he graduated in the early 2000's. He has worked in the UK and America both as a freelance consultant and as a freelance developer. He is a very passionate and seasoned full stack developer, specializing in advanced front end user interface(UI) and user experience(UX).

Having worked as lead CSS3/HTML5 developer for a start up in the Bay area, Rick has bleeding edge experience in ensuring extremely complex systems have simple to use and intuitive interfaces.

Having worked with nearly all web technologies over the last decade he believes that there is no one size fits all technology. However, he is an advocate for using open source wherever possible and admittedly has an affinity for curly brackets.

Rick has a passion for CSS and UX. You will also often find him talking about JavaScript being a 'real' language, or that JavaScript on the server is “what the world has been missing”.

Between hitting up Las Vegas on the weekends and playing Magic the Gathering with his other coder friends, Rick is currently developing amongst other apps; a real-time unified social network for the trade show industry based in Las Vegas and a bidding platform for a crowdfunding app based in San Francisco.

More about Rick Hurst...

Outline [top]

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


Student Testimonials [top]

Max did a great job and the content was excellent.

Mitch - ARCOS, Inc.