Upload
manesh-lad
View
1.944
Download
3
Tags:
Embed Size (px)
DESCRIPTION
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
Citation preview
Introduction jQuery MobileManesh Lad
Object-Oriented Sharks, LLC - www.oosharks.com
Thursday, June 28, 12
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
Who am I?• 15 years of technical and leadership experience covering the full
software development lifecycle.
• jQuery Mobile, iOS, C# .Net (Web, Windows, Services, Office, 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
Contact Information• Manesh Lad
• @maneshlad (twitter)
• [email protected] (email)
• www.oosharks.com (website)
• the gadgetlad blog
• www.gadgetlad.com (website)
• @gadgetlad (twitter)
Thursday, June 28, 12
Consensus
• Who has used jQuery Mobile before?
• Who has used jQuery before?
• Who has used frameworks similar to JQM?
Thursday, June 28, 12
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
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
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 classified 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
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• Skyfire 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
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
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
• Tabs & lists controls
• Think of a list like a uitableview
• Accordions - expandable sections
Thursday, June 28, 12
• Data entry widgets
• Picker
• Pop-up menu
• Provides controls like UIKit does in cocoa touch
Thursday, June 28, 12
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
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
Basic HTML PageAdd References
• jQuery & jQuery Mobile JS & CSS
• <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
• <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
• <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
Thursday, June 28, 12
Basic HTML Pagedemo1 - iPhone/iPad
<!DOCTYPE html> <html> ! <head> ! <title>My Page</title> ! <meta name="viewport" content="width=device-width, initial-scale=1"> ! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />! <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>! <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script></head> <body> <div data-role="page">! <div data-role="header"><h1>My Page Header</h1></div>! <div data-role="content"><p>Hello world</p></div>! <div data-role="footer"><h1>© 2012 Some Company, LLC</h1></div></div></body></html>
Thursday, June 28, 12
Adding a nav bardemo 2 - iPhone/iPad<!DOCTYPE html>
<html> ! <head> ! <title>My Page</title> ! <meta name="viewport" content="width=device-width, initial-scale=1"> ! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />! <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>! <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script></head> <body> <div data-role="page">! <div data-role="header"><h1>My Page Header</h1></div>! <div data-role="content"><p>Hello world</p></div>! <div data-role="footer" data-position="fixed">! <div data-role="navbar">! ! <ul>! ! ! <li><a data-icon="home" href="#" data-transition="flow">Home</a></li>! ! ! <li><a data-icon="grid" href="#" data-transition="flow">Products</a></li>! ! ! <li><a data-icon="star" href="#" data-transition="flow" class="ui-btn-active ui-state-persist">Services</a></li>! ! ! <li><a data-icon="alert" href="#" data-transition="flow">About</a></li>! ! </ul>! </div>! </div></div></body></html>
Thursday, June 28, 12
Add list of contentdemo 3 - iPhone/iPad<!DOCTYPE html>
<html> ! <head> ! <title>My Page</title> ! <meta name="viewport" content="width=device-width, initial-scale=1"> ! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />! <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>! <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script></head> <body> <div data-role="page">! <div data-role="header"><h1>Services</h1></div>! <div data-role="content">! ! <ul data-role="listview" data-inset="false" data-theme="d" data-divider-theme="d">! ! <li data-role="list-divider">Watches</li>! ! <li><a href="http://www.citizenwatch.com/">Citizen Watches</a></li> ! ! <li><a href="http://www.midowatch.com/">Mido Watches</a></li> ! ! <li data-role="list-divider">Jewelry</li>! ! <li><a href="http://tritonjewelry.com/">Triton Jewelry</a></li> !! ! <li><a href="http://www.calvinkleininc.com/watchesandjewelry/">Calvin Klein Watches & Jewelery</a></li>! ! <li><a href="http://www.chamilia.com/">Chamilia</a></li> ! ! </ul>! </div>! <div data-role="footer" data-position="fixed">! <div data-role="navbar">! ! ! <ul>! ! ! ! <li><a data-icon="home" href="#" data-transition="flow">Home</a></li>! ! ! ! <li><a data-icon="grid" href="#" data-transition="flow">Products</a></li>! ! ! ! <li><a data-icon="star" href="#" data-transition="flow" class="ui-btn-active ui-state-persist">Services</a></li>! ! ! ! <li><a data-icon="alert" href="#" data-transition="flow">About</a></li>! ! ! </ul>! ! </div>! </div></div></body></html>
Thursday, June 28, 12
• www.oosharks.com
• www.gadgetlad.com on iPhone
• http://www.oosharks.com/demos/speechtimerz/index.html
My Sites/Apps DemoUse Simulator iPhone,iPad
Thursday, June 28, 12
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 file
• 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 files can be included in your app or run off a server
Thursday, June 28, 12
Demos
• DragonCoach Help Page
• Demo UIWebView Controller for displaying
• Demo DragonCoach My Apps
Thursday, June 28, 12
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
Hardware Features accessible via web code
• JavaScript lib that is part of the phonegap/cordova project
Thursday, June 28, 12
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
Contact Information• Manesh Lad
• @maneshlad (twitter)
• [email protected] (email)
• www.oosharks.com (website)
• the gadgetlad blog
• www.gadgetlad.com (website)
• @gadgetlad (twitter)
Thursday, June 28, 12