This document is a presentation about jQuery Mobile, a framework for building mobile web applications. It introduces jQuery Mobile and why it was chosen for building a mobile app for student registration at MIT. It provides an overview of jQuery Mobile's code structure and features like progressive enhancement and theming. It also lists the tools and skills needed to get started with jQuery Mobile, such as HTML5, CSS3, and jQuery knowledge. Finally, it promises a demo of the registration advisor workflow built with this framework.

1. jQuery Mobile
The Easy Peasy Mobile Development Framework
9.21.2011 : Laura Watts

2. Presentation Overview
• Introduction
• jQuery Mobile: what is it and why use it?
• jQuery Mobile: code view
• Tools & knowledge to get started
• Demo of Online Registration Advisor Workflow
9.21.2011: Laura Watts

3. Introduction...
• Project:
Online Registration (“desktop” & mobile apps)
• Objective:
mobile app to provide Students & Advisors the ability
to view, approve, and submit registration
• Context:
This kind of mobile app not done before at MIT;
no precedence or standards
Responsible for researching & choosing the mobile
development framework
The Designer & Front-end Developer for the
mobile & desktop apps (yikes!)
9.21.2011: Laura Watts

4. So Many Framework Choices...
9.21.2011: Laura Watts

5. Platform & Browser Support
9.21.2011: Laura Watts

6. jQuery Mobile: advantages
Built on jQuery core HTML5 mark-up
Mobile & Desktop compatibility UI Widgets
Progressive Enhancement Theming (5 provided)
Automatic Initialization Low Learning Curve
Graceful Degradation Well-documented
Accessibility WAI-ARIA Active developer community
Touch & Mouse event support Known quantity
Small File Size Write once, deploy anywhere
9.21.2011: Laura Watts

7. But Keep In Mind...
• May not meet your development or technical
requirements -- do your research!
• Will not replace Native apps -- lose some
integration/functionality present with a Native App
• Limitations with included themes and icons
• Customization to a point -- a lot of time can be
spent overriding or tweaking styles
• You really have to know CSS3 and be adept with
Firebug
• Documentation is a pain to navigate
9.21.2011: Laura Watts

8. Basic Page: boilerplate code
9.21.2011: Laura Watts

9. Basic Page: generated code
9.21.2011: Laura Watts

10. data-* attributes
<div data-role="collapsible" data-collapsed="true">
<a href="foo.html" rel="external" data-role="button"
data-iconpos="right" data-icon="arrow-r"
data-transition="slide" data-theme="c" data-rel="dialog"
class="steps"> 3. Submit Registration</a>
9.21.2011: Laura Watts

11. Tools & Knowledge
Hardware Knowledge
Computer HTML5
Smartphone CSS3
jQuery/Javascript
Software
Text Editor Other
Safari Browser or Simulator Curiosity
Photoshop or www.iconfinder.com Patience
Web Server (Mac or via FTP) Tenacity
Methodical Nature
9.21.2011: Laura Watts

12. Demo time!
Workflow:
Advisor views & approves a student’s Registration
9.21.2011: Laura Watts

13. Thank you!
LWatts@mit.edu
http://web.mit.edu/~lwatts/www/
9.21.2011: Laura Watts