0
Introduction jQuery Mobile                                         Manesh Lad                        Object-Oriented Shark...
Outline                • Introduction                        • Who am I? My Contact Info                • jQuery Mobile   ...
IntroductionThursday, June 28, 12
Who am I?                • 15 years of technical and leadership experience covering the full                  software dev...
Contact Information                • Manesh Lad                        • @maneshlad (twitter)                        • man...
Consensus                • Who has used jQuery Mobile before?                • Who has used jQuery before?                ...
jQuery MobileThursday, June 28, 12
What?                • Client side JavaScript framework for building                  mobile web apps                • Bas...
Why?                • Mobile web browser are fast growing, with tablets and                  smartphone from a multitude o...
Supported Platforms                • Supports majority of modern desktop, mobile, tablet and e-readers                  br...
A-grade – Full enhanced experience with Ajax-                              based animated page transitions.               ...
B-grade – Enhanced experience except without                               Ajax navigation features.                • Blac...
C-grade – Basic, non-enhanced HTML experience                               that is still functional                • Blac...
JQM GalleryThursday, June 28, 12
Pre-built Components                         Unified Mobile StylingThursday, June 28, 12
Thursday, June 28, 12
• Tabs & lists controls                        • Think of a list like a                          uitableview              ...
• Data entry widgets                        • Picker                        • Pop-up menu                        • Provide...
Themeroller                • http://jquerymobile.com/themeroller/                • Allows you to create up to 26 color the...
Getting StartedThursday, June 28, 12
How?                • Basic web skills: HTML, JavaScript, CCS                • IDE, your choice of web development tool   ...
jQuery Mobile Demos                        Test Pages in both iPhone & iPad SimulatorThursday, June 28, 12
Basic HTML Page                                     Add References                • jQuery & jQuery Mobile JS & CSS       ...
Basic HTML Page                        demo1 - iPhone/iPad                   <!DOCTYPE html>                <html>        ...
Adding a nav bar                        demo 2 - iPhone/iPad                      <!DOCTYPE html>                  <html> ...
Add list of content                        demo 3 - iPhone/iPad                     <!DOCTYPE html>                <html> ...
My Sites/Apps Demo                Use Simulator iPhone,iPad                • www.oosharks.com                • www.gadgetl...
jQuery Mobile / iOSThursday, June 28, 12
What’s in it for iOS                               Developers?                • Maybe you want to integrate web content in...
Demos                • DragonCoach Help Page                • Demo UIWebView Controller for displaying                • De...
jQuery Mobile / PhoneGap                        Wrap mobile jQuery Mobile app as native appsThursday, June 28, 12
What is PhoneGap?                • http://phonegap.com/ - Open source wrapper                  for compiling mobile web ap...
Hardware Features                 accessible via web code                        • JavaScript lib that is part of         ...
Demos                • Phonegap SpeechTimerz                • PhoneGap My WebsiteThursday, June 28, 12
Conclusion                 • jQuery Mobile is a powerful and easy to use technology                 • Plays nice with othe...
Contact Information                • Manesh Lad                        • @maneshlad (twitter)                        • man...
Upcoming SlideShare
Loading in...5
×

Introduction to jQuery Mobile

2,024

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,024
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Introduction to jQuery Mobile"

    1. 1. Introduction jQuery Mobile Manesh Lad Object-Oriented Sharks, LLC - www.oosharks.comThursday, June 28, 12
    2. 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 • ConclusionThursday, June 28, 12
    3. 3. IntroductionThursday, June 28, 12
    4. 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, 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 appThursday, June 28, 12
    5. 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. 6. Consensus • Who has used jQuery Mobile before? • Who has used jQuery before? • Who has used frameworks similar to JQM?Thursday, June 28, 12
    7. 7. jQuery MobileThursday, June 28, 12
    8. 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 skillsThursday, June 28, 12
    9. 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 companiesThursday, June 28, 12
    10. 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 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 functionalThursday, June 28, 12
    11. 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 • 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 7Thursday, June 28, 12
    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. 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 experienceThursday, June 28, 12
    14. 14. JQM GalleryThursday, June 28, 12
    15. 15. Pre-built Components Unified Mobile StylingThursday, June 28, 12
    16. 16. Thursday, June 28, 12
    17. 17. • Tabs & lists controls • Think of a list like a uitableview • Accordions - expandable sectionsThursday, June 28, 12
    18. 18. • Data entry widgets • Picker • Pop-up menu • Provides controls like UIKit does in cocoa touchThursday, June 28, 12
    19. 19. Themeroller • http://jquerymobile.com/themeroller/ • Allows you to create up to 26 color themes/ swatches for the UI components • Lets you visually create CSSThursday, June 28, 12
    20. 20. Getting StartedThursday, June 28, 12
    21. 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 classesThursday, June 28, 12
    22. 22. jQuery Mobile Demos Test Pages in both iPhone & iPad SimulatorThursday, June 28, 12
    23. 23. Basic HTML Page Add 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
    24. 24. Basic HTML Page demo1 - 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>&copy; 2012 Some Company, LLC</h1></ div> </div> </body> </html>Thursday, June 28, 12
    25. 25. Adding a nav bar demo 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
    26. 26. Add list of content demo 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
    27. 27. My Sites/Apps Demo Use Simulator iPhone,iPad • www.oosharks.com • www.gadgetlad.com on iPhone • http://www.oosharks.com/demos/ speechtimerz/index.htmlThursday, June 28, 12
    28. 28. jQuery Mobile / iOSThursday, June 28, 12
    29. 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 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 serverThursday, June 28, 12
    30. 30. Demos • DragonCoach Help Page • Demo UIWebView Controller for displaying • Demo DragonCoach My AppsThursday, June 28, 12
    31. 31. jQuery Mobile / PhoneGap Wrap mobile jQuery Mobile app as native appsThursday, June 28, 12
    32. 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. 33. Hardware Features accessible via web code • JavaScript lib that is part of the phonegap/cordova projectThursday, June 28, 12
    34. 34. Demos • Phonegap SpeechTimerz • PhoneGap My WebsiteThursday, June 28, 12
    35. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×