Mobile web apps

2,807
-1

Published on

Patrick Crowley dives into the world of mobile app development and shows how to use the new jQTouch framework to quickly build awesome mobile-optimized web apps.

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

No Downloads
Views
Total Views
2,807
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
45
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile web apps

  1. 1. Patrick Crowley the.railsi.st
  2. 2. Mobile web apps using jQTouch
  3. 3. What’s yourmobile strategy?
  4. 4. • Website (aka “give up”)
  5. 5. • Website (aka “give up”)• Website + mobile stylesheet
  6. 6. • Website (aka “give up”)• Website + mobile stylesheet• Native apps for iPhone and Android (awesome, but $$$)
  7. 7. • Optimize for mobile displays
  8. 8. • Optimize for mobile displays• Reduce page load time
  9. 9. • Optimize for mobile displays• Reduce page load time• Reduce network traffic
  10. 10. • Optimize for mobile displays• Reduce page load time• Reduce network traffic• Support gestures
  11. 11. Smartphone Market Share RIM iPhone Windows Android Other 9% 9% 35% 19% 28%Source: Nielsen for Q1 2010
  12. 12. Mobile Browser Usage iPhone Android RIM Other 6% 13% 23% 58%Source: Net Applications for May 2010
  13. 13. What does this mean?
  14. 14. • Website (aka “do nothing”)
  15. 15. • Website (aka “do nothing”)• Website + mobile stylesheets
  16. 16. • Website (aka “do nothing”)• Website + mobile stylesheets• Native apps for iPhone and Android (awesome, but $$$)
  17. 17. • Website (aka “do nothing”)• Website + mobile stylesheets• Native apps for iPhone and Android (awesome, but $$$)• Website + mobile web app
  18. 18. Mobile strategy = Webkit
  19. 19. Target mobile browsers people actually use.
  20. 20. • More than 81% of mobile browser traffic
  21. 21. • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)
  22. 22. • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)
  23. 23. • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)• WebOS (Palm -> HP)
  24. 24. • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)• WebOS (Palm -> HP)• Blackberry (future)
  25. 25. What about... ?!?!
  26. 26. S T O AT
  27. 27. Who cares?
  28. 28. Browsing alreadysucks on these phones
  29. 29. So optimize forawesome phones!
  30. 30. Why Webkit?
  31. 31. • Web standards
  32. 32. • Web standards• Consistent rendering
  33. 33. • Web standards• Consistent rendering• Support for HTML5
  34. 34. • Web standards• Consistent rendering• Support for HTML5• Animation
  35. 35. • Web standards• Consistent rendering• Support for HTML5• Animation• Offline caching
  36. 36. jQTouch
  37. 37. Web apps with native look and feel
  38. 38. jQuery + jQTouch + HTML
  39. 39. jQTouch 101
  40. 40. 1. Getting started
  41. 41. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  42. 42. <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery","1.3.2");</script>
  43. 43. <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery","1.3.2");</script><script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
  44. 44. <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery","1.3.2");</script><script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script><style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
  45. 45. <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery","1.3.2");</script><script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script><style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style><style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>
  46. 46. $.jQTouch({ icon: jqtouch.png, statusBar: black-translucent, preloadImages: [ themes/jqt/img/chevron_white.png, themes/jqt/img/bg_row_select.gif, themes/jqt/img/back_button_clicked.png, themes/jqt/img/button_clicked.png ]});
  47. 47. 2. Basic page layout
  48. 48. index.html<body> <div class="current" id="home"> <div class="toolbar"> <h1>jQTouch Demo</h1> </div> <!-- CONTENT GOES HERE --> </div></body>
  49. 49. #about #blogindex.html #contact /video
  50. 50. index.html<div id="about"> <div class="toolbar"> <h1>About Us</h1> </div></div><div id="blog"> <div class="toolbar"> <h1>Blog</h1> </div></div><div id="about"> <div class="toolbar"> <h1>Contact Us</h1> </div></div>
  51. 51. #about #blogindex.html #contact /video
  52. 52. video.html<div id="video"> <div class="toolbar"> <h1>Video</h1> </div></div>
  53. 53. Markup-based UI
  54. 54. Classes => behavior
  55. 55. • Toolbars
  56. 56. • Toolbars• Lists
  57. 57. • Toolbars• Lists• Buttons
  58. 58. • Toolbars• Lists• Buttons• Forms
  59. 59. • Toolbars• Lists• Buttons• Forms• Navigation
  60. 60. Toolbar
  61. 61. <div id="about"> <div class="toolbar"> <h1>About Us</h1> </div></div><div id="blog"> <div class="toolbar"> <h1>Blog</h1> </div></div><div id="about"> <div class="toolbar"> <h1>Contact Us</h1> </div></div>
  62. 62. List
  63. 63. <ul class="rounded"> <li class="arrow"><a href="#about">About Us</a></li> <li class="arrow"><a href="#blog">Blog</a></li> <li class="arrow"><a href="#contact">Contact Us</a></li> <li class="arrow"><a href="/video">Video</a></li></ul>
  64. 64. UI Demo
  65. 65. Sample app
  66. 66. Debugging
  67. 67. • iPhone Simulator
  68. 68. • iPhone Simulator• Android Simulator
  69. 69. • iPhone Simulator• Android Simulator• Actual devices!!!
  70. 70. Mobile detection
  71. 71. // Mobile clientsif (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { // Redirect to mobile app location.href = "/mobile";}
  72. 72. Version switching
  73. 73. <--->
  74. 74. Dynamic content filters
  75. 75. // Disable links$(.page).live(pageAnimationStart,function(){ $(p a).attr("href", "");});
  76. 76. Resources
  77. 77. • jqtouch.com
  78. 78. • jqtouch.com• github.com/senchalabs/jQTouch
  79. 79. • jqtouch.com• github.com/senchalabs/jQTouch• peepcode.com/products/jqtouch
  80. 80. • jqtouch.com• github.com/senchalabs/jQTouch• peepcode.com/products/jqtouch• glyphish.com
  81. 81. Coming soon
  82. 82. Sencha
  83. 83. Ext JS + jQTouch + Raphaël
  84. 84. New roadmap andmaintainer for jQTouch
  85. 85. The End
  1. A particular slide catching your eye?

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

×