Your SlideShare is downloading. ×
0
Intro to jQuery Mobile                          South Bay Mobile User Group - 26 February 2013Monday, February 25, 13
IntroductionMonday, February 25, 13
Who Am I?                    • Troy Miles                    • Senior Software Engineer w/ 30+ years of                   ...
Monday, February 25, 13
Intermediate PhoneGap                    • Learn by doing                    • JS best practices, iScroll, Maps, Ajax + mo...
You May Get Mad At                                  Me                    • Sorry, in advance if I insult your favorite:  ...
Our Agenda                    • The Mobile Space Today                    • Getting Started with jQuery Mobile            ...
Our Agenda                    • Version 1.3.0                    • Packaging for DistributionMonday, February 25, 13
The Mobile Space TodayMonday, February 25, 13
85% of all US adults                          now own a mobile                                phoneMonday, February 25, 13
56% of all mobile                    phone owners in the                   US access the internet.Monday, February 25, 13
Did you know 80% of customers                 abandon a mobile site if they                  have a bad user experience?Mo...
Web Apps               Native Apps                Can migrate web skills       Longer learning curve                      ...
What is a Web App?                    • A web app is more than just a website                    • It incorporates app-lik...
A unified, HTML5-based user interface system for all    popular mobile device platforms, built on the rock-solid    jQuery ...
From Web to Mobile                    • Your HTML/CSS skills are still valuable                    • Good design is more i...
JQM & HTML5                    • JQM doesn’t require you know HTML5                    • JQM uses HTML5 when available    ...
Getting Started with                            jQuery MobileMonday, February 25, 13
Downloading JQM                    • jquerymobile.com/download                    • Use the uncompressed version while    ...
Loading JQM  <!DOCTYPE html>  <html>  <head>    <title>Page Title</title>    <meta name="viewport"      content="width=dev...
Self-hosting vs. CDN                    • CDN = Content Delivery Network                    • Can speed up app load two wa...
CDN Fallback Code  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">  </script>  <script>  window....
Understanding Page                            ArchitectureMonday, February 25, 13
Best Practices                    • Downloading is slow so,                     • Download as few files as possible        ...
JQM Pages                    • A single HTML page can contain many JQM                          Pages                    •...
JQM Pages                    • Pages are denoted with data-role=”page”                    • Multiple JQM pages can be on a...
Page Transitions                    • Animate from one page to next                    • Only work on platforms that suppo...
Page Transitions                    • fade                    • pop                    • flip                    • turn    ...
Toolbars                    • Supports HTML5 header/footer tags                    • Or via div tag with data-role        ...
Positioning Toolbars                    • Toolbars will normally flow with the page                    • data-position=”fixe...
Navbars                    • Denoted by data-role=”navbar”                    • When a link is clicked, it gets the active...
Navbars                    • Can appear in headers                    • Or footers                    • Can be persisted  ...
Creating jQuery Mobile                        FormsMonday, February 25, 13
Form Basics                    • Buttons                    • Sliders                    • Range Slider                   ...
Selects                    • Select                    • Mini select                    • Custom select                   ...
Text                    • Text input                    • Textarea                    • Number, date, tel, search         ...
Getting Data to the                                ServerMonday, February 25, 13
Working with ListsMonday, February 25, 13
Listviews                    • Unordered (ul)                    • Ordered (ol)                    • Linked               ...
Listviews                    • Autodividers                    • Count bubbles                    • Icons                 ...
Nested listviews have been                deprecated in version 1.3 - they                will be removed in version 1.4.M...
jQuery Mobile EventsMonday, February 25, 13
Events                    • Touch events                    • Orientation events                    • Scroll events       ...
Touch Events                    • swipe                    • swipeleft                    • swiperight                    ...
Orientation Change                    • orientationchange                    • Not supported natively universallyMonday, F...
Scroll Events                    • scrollstart                    • scrollstopMonday, February 25, 13
Page Events                    • pageinit - use this instead of DOM ready()                    • pagehide                 ...
Version 1.3.0Monday, February 25, 13
New Features                    • Panels                    • Responsive tables                    • Range sliders        ...
Packaging for                          DistributionMonday, February 25, 13
Hybrid Apps                    • HTML5 web app                    • Wrapped in a native app                    • Usually a...
Hybrid Apps                                Can migrate web skills                                   One source base       ...
Ways to Hybridize                    • PhoneGap                    • Icenium                    • OthersMonday, February 2...
PhoneGap                    • Created by Nitobi, acquired by Adobe                    • Open sourced as Apache Cordova    ...
Icenium                    • Also based on Apache Cordova                    • Built by Telerik                    • Phone...
Others                    • Appcelerator Titanium                    • Trigger.io                    • CodeName One       ...
Links                    • jquerymobile.com                    • jquerymobile.com/themeroller/                    • phoneg...
My Links                    • @therockncoder                    • rockncoder@gmail.com                    • http://therock...
Questions?Monday, February 25, 13
Upcoming SlideShare
Loading in...5
×

Introduction to jQuery Mobile

1,541

Published on

jQuery Mobile is the easiest way to go from web to mobile. It can be used for internet application or serve as the UI for PhoneGap applications. Here is a fast pace introduction to jQuery Mobile.

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

No Downloads
Views
Total Views
1,541
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to jQuery Mobile"

  1. 1. Intro to jQuery Mobile South Bay Mobile User Group - 26 February 2013Monday, February 25, 13
  2. 2. IntroductionMonday, February 25, 13
  3. 3. Who Am I? • Troy Miles • Senior Software Engineer w/ 30+ years of experience • Mobile/Mobile Web • iOS, Android, & Windows Phone 7Monday, February 25, 13
  4. 4. Monday, February 25, 13
  5. 5. Intermediate PhoneGap • Learn by doing • JS best practices, iScroll, Maps, Ajax + more • Saturday, May 18th - 9 AM to 6 PM • $99 - lunch & materials included • http://bit.ly/XlxzYp • CraveLab - Los AngelesMonday, February 25, 13
  6. 6. You May Get Mad At Me • Sorry, in advance if I insult your favorite: company, device, or personality • I have nothing against any of these companies • I will gladly do a project for any of them, for the right priceMonday, February 25, 13
  7. 7. Our Agenda • The Mobile Space Today • Getting Started with jQuery Mobile • Understanding Page Architecture • Creating jQuery Mobile Forms • Working with Lists • jQuery Mobile EventsMonday, February 25, 13
  8. 8. Our Agenda • Version 1.3.0 • Packaging for DistributionMonday, February 25, 13
  9. 9. The Mobile Space TodayMonday, February 25, 13
  10. 10. 85% of all US adults now own a mobile phoneMonday, February 25, 13
  11. 11. 56% of all mobile phone owners in the US access the internet.Monday, February 25, 13
  12. 12. Did you know 80% of customers abandon a mobile site if they have a bad user experience?Monday, February 25, 13
  13. 13. Web Apps Native Apps Can migrate web skills Longer learning curve One source base Many source bases Deploy when you want Deployment needs approval You choose when to update User chooses when to update No device memory used Uses device memory Difficult to monetize Monetization is built-in Restricted device access Full access to device hardware Slower FasterMonday, February 25, 13
  14. 14. What is a Web App? • A web app is more than just a website • It incorporates app-like behavior • Think GMail or Google MapsMonday, February 25, 13
  15. 15. A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design.  Requires jQuery.Monday, February 25, 13
  16. 16. From Web to Mobile • Your HTML/CSS skills are still valuable • Good design is more important than everMonday, February 25, 13
  17. 17. JQM & HTML5 • JQM doesn’t require you know HTML5 • JQM uses HTML5 when available • Prefers semantic markup: header, footer, sectionMonday, February 25, 13
  18. 18. Getting Started with jQuery MobileMonday, February 25, 13
  19. 19. Downloading JQM • jquerymobile.com/download • Use the uncompressed version while developing • Use the minimized version for deployment • Get the correct version of jQueryMonday, February 25, 13
  20. 20. Loading JQM <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/ jquery.mobile-1.3.0.min.css"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script> </head>Monday, February 25, 13
  21. 21. Self-hosting vs. CDN • CDN = Content Delivery Network • Can speed up app load two ways: • CDN’s use edge servers • May be cached by other appsMonday, February 25, 13
  22. 22. CDN Fallback Code <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script> <script> window.jQuery || document.write(<script src="js/vendor/jquery-1.9.0.min.js"></ script>); </script>Monday, February 25, 13
  23. 23. Understanding Page ArchitectureMonday, February 25, 13
  24. 24. Best Practices • Downloading is slow so, • Download as few files as possible • Download as little data as possible • Use a JS minifierMonday, February 25, 13
  25. 25. JQM Pages • A single HTML page can contain many JQM Pages • This allows page transitions without server contactMonday, February 25, 13
  26. 26. JQM Pages • Pages are denoted with data-role=”page” • Multiple JQM pages can be on an HTML page • Only one page is active at a time • $.mobile.activePage is the currently active pageMonday, February 25, 13
  27. 27. Page Transitions • Animate from one page to next • Only work on platforms that support CSS 3D transforms • Others will see only “fade” • Android below version 4Monday, February 25, 13
  28. 28. Page Transitions • fade • pop • flip • turn • flow • and moreMonday, February 25, 13
  29. 29. Toolbars • Supports HTML5 header/footer tags • Or via div tag with data-role • data-role=”header” • data-role=”footer”Monday, February 25, 13
  30. 30. Positioning Toolbars • Toolbars will normally flow with the page • data-position=”fixed” • data-fullscreen=”true”Monday, February 25, 13
  31. 31. Navbars • Denoted by data-role=”navbar” • When a link is clicked, it gets the active state (ui-btn-active) • JQM automatically sizes button • 5 or less buttons, single line • More than 5, two acrossMonday, February 25, 13
  32. 32. Navbars • Can appear in headers • Or footers • Can be persisted • Can have iconsMonday, February 25, 13
  33. 33. Creating jQuery Mobile FormsMonday, February 25, 13
  34. 34. Form Basics • Buttons • Sliders • Range Slider • Flip Switch • CheckboxesMonday, February 25, 13
  35. 35. Selects • Select • Mini select • Custom select • Multi-slect with optgroups+Monday, February 25, 13
  36. 36. Text • Text input • Textarea • Number, date, tel, search • File • PasswordMonday, February 25, 13
  37. 37. Getting Data to the ServerMonday, February 25, 13
  38. 38. Working with ListsMonday, February 25, 13
  39. 39. Listviews • Unordered (ul) • Ordered (ol) • Linked • Inset • Filter • List dividersMonday, February 25, 13
  40. 40. Listviews • Autodividers • Count bubbles • Icons • Thumbnails • Formatted contentMonday, February 25, 13
  41. 41. Nested listviews have been deprecated in version 1.3 - they will be removed in version 1.4.Monday, February 25, 13
  42. 42. jQuery Mobile EventsMonday, February 25, 13
  43. 43. Events • Touch events • Orientation events • Scroll events • Page eventsMonday, February 25, 13
  44. 44. Touch Events • swipe • swipeleft • swiperight • tap • tapholdMonday, February 25, 13
  45. 45. Orientation Change • orientationchange • Not supported natively universallyMonday, February 25, 13
  46. 46. Scroll Events • scrollstart • scrollstopMonday, February 25, 13
  47. 47. Page Events • pageinit - use this instead of DOM ready() • pagehide • pageshowMonday, February 25, 13
  48. 48. Version 1.3.0Monday, February 25, 13
  49. 49. New Features • Panels • Responsive tables • Range sliders • Responsive grids • Deprecated: nested listsMonday, February 25, 13
  50. 50. Packaging for DistributionMonday, February 25, 13
  51. 51. Hybrid Apps • HTML5 web app • Wrapped in a native app • Usually adds a way to access native features • Distributable in most app storesMonday, February 25, 13
  52. 52. Hybrid Apps Can migrate web skills One source base Deployment needs approval User chooses when to update Uses device memory Monetization is possible Access to some device hardware Faster than web, slower than deviceMonday, February 25, 13
  53. 53. Ways to Hybridize • PhoneGap • Icenium • OthersMonday, February 25, 13
  54. 54. PhoneGap • Created by Nitobi, acquired by Adobe • Open sourced as Apache Cordova • PhoneGap is a trademark of AdobeMonday, February 25, 13
  55. 55. Icenium • Also based on Apache Cordova • Built by Telerik • PhoneGap code runs unmodified • Deploy directly to device • Includes Kendo UI Mobile • Free until May 1stMonday, February 25, 13
  56. 56. Others • Appcelerator Titanium • Trigger.io • CodeName One • (and still more)Monday, February 25, 13
  57. 57. Links • jquerymobile.com • jquerymobile.com/themeroller/ • phonegap.com • www.icenium.comMonday, February 25, 13
  58. 58. My Links • @therockncoder • rockncoder@gmail.com • http://therockncoder.blogspot.com/ • http://www.youtube.com/user/rockncoder • https://github.com/RockncoderMonday, February 25, 13
  59. 59. Questions?Monday, February 25, 13
  1. A particular slide catching your eye?

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

×