Introduction to jQuery Mobile, presented at the following meet ups:
Suncoast iOS Meetup (Tampa) - Tuesday at 6:30 PM
Orlando iOS Developer Group - Yesterday at 7:00 PM
Finology Group â Insurtech Innovation Award 2024
Â
Introduction to jQuery Mobile
1. Introduction jQuery Mobile
Manesh Lad
Object-Oriented Sharks, LLC - www.oosharks.com
Thursday, June 28, 12
2. Outline
⢠Introduction
⢠Who am I? My Contact Info
⢠jQuery Mobile
⢠What, Why & How to get started
⢠jQuery Mobile/iOS - Use jQuery Mobile within you iOS Project
⢠jQuery Mobile/Phone Gap - Use jQuery Mobile for native apps
⢠Conclusion
Thursday, June 28, 12
4. Who am I?
⢠15 years of technical and leadership experience covering the full
software development lifecycle.
⢠jQuery Mobile, iOS, C# .Net (Web, Windows, Services, OfďŹce,
SharePoint), Lotus Notes, Project Management - PMP
⢠Tampa based consulting/freelance business www.oosharks.com
⢠Mobile instructor for Learning Tree:
⢠Designing Websites for Mobile Devices: Hands-On - 2315
⢠iPhoneŽ and iPadŽ Programming: A Comprehensive Hands-
On Introduction - 2761
⢠Dragon boat paddler (Blue Dragons Team) - DragonCoach -
coaching app
Thursday, June 28, 12
5. Contact Information
⢠Manesh Lad
⢠@maneshlad (twitter)
⢠maneshlad@gmail.com (email)
⢠www.oosharks.com (website)
⢠the gadgetlad blog
⢠www.gadgetlad.com (website)
⢠@gadgetlad (twitter)
Thursday, June 28, 12
6. Consensus
⢠Who has used jQuery Mobile before?
⢠Who has used jQuery before?
⢠Who has used frameworks similar to JQM?
Thursday, June 28, 12
8. What?
⢠Client side JavaScript framework for building
mobile web apps
⢠Based on the popular jQuery JavaScript library
⢠Free and open source
⢠Can integrate with any server side web technology
I.e. PHP, ASP.Net, JSP
⢠Simple & easy to learn if you have basic web skills
Thursday, June 28, 12
9. Why?
⢠Mobile web browser are fast growing, with tablets and
smartphone from a multitude of vendors fueling growth.
⢠Allows you access to the mobile market without writing
native code.
⢠Build web apps that automatically scale for different
devices, desktop to mobile to tablet
⢠Range of pre-built UI components for touch
⢠Proven, used by many large companies
Thursday, June 28, 12
10. Supported Platforms
⢠Supports majority of modern desktop, mobile, tablet and e-readers
browsers. Older browser are supported via progressive enhancement
⢠Progressive enhancement where the framework will provide a more
enhanced user experience the more capabilities the browser has
⢠Browsers are classiďŹed into grades
⢠A-grade â Full enhanced experience with Ajax-based animated page
transitions.
⢠B-grade â Enhanced experience except without Ajax navigation
features.
⢠C-grade â Basic, non-enhanced HTML experience that is still functional
Thursday, June 28, 12
11. A-grade â Full enhanced experience with Ajax-
based animated page transitions.
Apple iOS 3.2-5.0
⢠Android 2.1-2.3
⢠Android 3.1 (Honeycomb) â Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
⢠Android 4.0 (ICS) â Tested on a Galaxy Nexus S. Note: transition performance can be poor on upgraded
devices
⢠Windows Phone 7-7.5 â Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia
800
⢠Blackberry 6.0 â Tested on the Torch 9800 and Style 9670
⢠Blackberry 7 â Tested on BlackBerryÂŽ Torch 9810
⢠Blackberry Playbook (1.0-2.0) â Tested on PlayBook
⢠Palm WebOS (1.4-2.0) â Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
⢠Palm WebOS 3.0 â Tested on HP TouchPad
⢠Firebox Mobile (10 Beta) â Tested on Android 2.3 device
⢠Chrome for Android (Beta) â Tested on Android 4.0 device
⢠SkyďŹre 4.1 - Tested on Android 2.3 device
⢠Opera Mobile 11.5: Tested on Android 2.3
⢠Meego 1.2 â Tested on Nokia 950 and N9
⢠Samsung bada 2.0 â Tested on a Samsung Wave 3, Dolphin browser
⢠UC Browser â Tested on Android 2.3 device
⢠Kindle 3 and Fire - Tested on the built-in WebKit browser for each
⢠Nook Color 1.4.1 â Tested on original Nook Color, not Nook Tablet
⢠Chrome Desktop 11-17 - Tested on OS X 10.7 and Windows 7
⢠Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
⢠Firefox Desktop 4-9 â Tested on OS X 10.7 and Windows 7
⢠Internet Explorer 7-9 â Tested on Windows XP, Vista and 7
⢠Opera Desktop 10-11 - Tested on OS X 10.7 and Windows 7
Thursday, June 28, 12
12. B-grade â Enhanced experience except without
Ajax navigation features.
⢠Blackberry 5.0: Tested on the Storm 2 9550,
Bold 9770
⢠Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3
and Android 2.3
⢠Nokia Symbian^3 - Tested on Nokia N8
(Symbian^3), C7 (Symbian^3), also works on
N97 (Symbian^1)
Thursday, June 28, 12
13. C-grade â Basic, non-enhanced HTML experience
that is still functional
⢠Blackberry 4.x - Tested on the Curve 8330
⢠Windows Mobile - Tested on the HTC Leo
(WinMo 5.2)
⢠All older smartphone platforms and
featurephones â Any device that doesnât
support media queries will receive the basic,
C grade experience
Thursday, June 28, 12
17. ⢠Tabs & lists controls
⢠Think of a list like a
uitableview
⢠Accordions -
expandable sections
Thursday, June 28, 12
18. ⢠Data entry widgets
⢠Picker
⢠Pop-up menu
⢠Provides controls like UIKit does
in cocoa touch
Thursday, June 28, 12
19. Themeroller
⢠http://jquerymobile.com/themeroller/
⢠Allows you to create up to 26 color themes/
swatches for the UI components
⢠Lets you visually create CSS
Thursday, June 28, 12
21. How?
⢠Basic web skills: HTML, JavaScript, CCS
⢠IDE, your choice of web development tool
⢠Download the SDK from jquerymobile.com
⢠Online tutorials, books or classes
Thursday, June 28, 12
22. jQuery Mobile Demos
Test Pages in both iPhone & iPad Simulator
Thursday, June 28, 12
27. My Sites/Apps Demo
Use Simulator iPhone,iPad
⢠www.oosharks.com
⢠www.gadgetlad.com on iPhone
⢠http://www.oosharks.com/demos/
speechtimerz/index.html
Thursday, June 28, 12
29. Whatâs in it for iOS
Developers?
⢠Maybe you want to integrate web content into you own app via
a UIWebView.
⢠Suggested uses of jQuery Mobile within your app:
⢠Help pages, organize pages into a single html ďŹle
⢠Access company info in your app
⢠Leader boards or other server side info
⢠Access a web page that links to your other apps for sale
⢠The html ďŹles can be included in your app or run off a server
Thursday, June 28, 12
30. Demos
⢠DragonCoach Help Page
⢠Demo UIWebView Controller for displaying
⢠Demo DragonCoach My Apps
Thursday, June 28, 12
31. jQuery Mobile / PhoneGap
Wrap mobile jQuery Mobile app as native apps
Thursday, June 28, 12
32. What is PhoneGap?
⢠http://phonegap.com/ - Open source wrapper
for compiling mobile web apps as native apps
⢠Access to hardware features on 7 major
mobile platforms
⢠https://build.phonegap.com - compile web
project for other platforms in the cloud!
Thursday, June 28, 12
33. Hardware Features
accessible via web code
⢠JavaScript lib that is part of
the phonegap/cordova project
Thursday, June 28, 12
34. Demos
⢠Phonegap SpeechTimerz
⢠PhoneGap My Website
Thursday, June 28, 12
35. Conclusion
⢠jQuery Mobile is a powerful and easy to use technology
⢠Plays nice with other technologies - server side/native
⢠Look at Phonegap if you want to package up web apps
as native apps for device app stores
⢠There is a place for mobile web development in your
native iOS app development.
Thursday, June 28, 12
36. Contact Information
⢠Manesh Lad
⢠@maneshlad (twitter)
⢠maneshlad@gmail.com (email)
⢠www.oosharks.com (website)
⢠the gadgetlad blog
⢠www.gadgetlad.com (website)
⢠@gadgetlad (twitter)
Thursday, June 28, 12