Mobile web apps
•
2 likes•1,248 views
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.
Recommended
More Related Content
Viewers also liked
Similar to Mobile web apps
Similar to Mobile web apps (20)
Recently uploaded
Recently uploaded (20)
Mobile web apps
- 1. Patrick Crowley the.railsi.st
- 2. Mobile web apps using jQTouch
- 5. • Website (aka “give up”)
- 6. • Website (aka “give up”) • Website + mobile stylesheet
- 7. • Website (aka “give up”) • Website + mobile stylesheet • Native apps for iPhone and Android (awesome, but $$$)
- 9. • Optimize for mobile displays
- 10. • Optimize for mobile displays • Reduce page load time
- 11. • Optimize for mobile displays • Reduce page load time • Reduce network traffic
- 12. • Optimize for mobile displays • Reduce page load time • Reduce network traffic • Support gestures
- 13. Smartphone Market Share RIM iPhone Windows Android Other 9% 9% 35% 19% 28% Source: Nielsen for Q1 2010
- 14. Mobile Browser Usage iPhone Android RIM Other 6% 13% 23% 58% Source: Net Applications for May 2010
- 15. What does this mean?
- 17. • Website (aka “do nothing”)
- 18. • Website (aka “do nothing”) • Website + mobile stylesheets
- 19. • Website (aka “do nothing”) • Website + mobile stylesheets • Native apps for iPhone and Android (awesome, but $$$)
- 20. • Website (aka “do nothing”) • Website + mobile stylesheets • Native apps for iPhone and Android (awesome, but $$$) • Website + mobile web app
- 21. Mobile strategy = Webkit
- 22. Target mobile browsers people actually use.
- 24. • More than 81% of mobile browser traffic
- 25. • More than 81% of mobile browser traffic • iOS (iPhone + iPod Touch)
- 26. • More than 81% of mobile browser traffic • iOS (iPhone + iPod Touch) • Android (1.5 and up)
- 27. • More than 81% of mobile browser traffic • iOS (iPhone + iPod Touch) • Android (1.5 and up) • WebOS (Palm -> HP)
- 28. • More than 81% of mobile browser traffic • iOS (iPhone + iPod Touch) • Android (1.5 and up) • WebOS (Palm -> HP) • Blackberry (future)
- 34. S T O A T
- 35. Who cares?
- 36. Browsing already sucks on these phones
- 37. So optimize for awesome phones!
- 38. Why Webkit?
- 40. • Web standards
- 41. • Web standards • Consistent rendering
- 42. • Web standards • Consistent rendering • Support for HTML5
- 43. • Web standards • Consistent rendering • Support for HTML5 • Animation
- 44. • Web standards • Consistent rendering • Support for HTML5 • Animation • Offline caching
- 45. jQTouch
- 46. Web apps with native look and feel
- 47. jQuery + jQTouch + HTML
- 48. jQTouch 101
- 52. <script type="text/javascript" src="http://www.google.com/ jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2");</script>
- 53. <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>
- 54. <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>
- 55. <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>
- 56. $.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' ] });
- 57. 2. Basic page layout
- 58. index.html <body> <div class="current" id="home"> <div class="toolbar"> <h1>jQTouch Demo</h1> </div> <!-- CONTENT GOES HERE --> </div> </body>
- 59. #about #blog index.html #contact /video
- 60. 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>
- 61. #about #blog index.html #contact /video
- 62. video.html <div id="video"> <div class="toolbar"> <h1>Video</h1> </div> </div>
- 63. Markup-based UI
- 66. • Toolbars
- 68. • Toolbars • Lists • Buttons
- 69. • Toolbars • Lists • Buttons • Forms
- 70. • Toolbars • Lists • Buttons • Forms • Navigation
- 71. Toolbar
- 72. <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>
- 73. List
- 74. <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>
- 75. UI Demo
- 76. Sample app
- 77. Debugging
- 80. • iPhone Simulator • Android Simulator
- 81. • iPhone Simulator • Android Simulator • Actual devices!!!
- 82. Mobile detection
- 83. // Mobile clients if (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"; }
- 85. <--->
- 87. // Disable links $('.page').live('pageAnimationStart', function(){ $('p a').attr("href", ""); });
- 88. Resources
- 90. • jqtouch.com
- 92. • jqtouch.com • github.com/senchalabs/jQTouch • peepcode.com/products/jqtouch
- 93. • jqtouch.com • github.com/senchalabs/jQTouch • peepcode.com/products/jqtouch • glyphish.com
- 94. Coming soon
- 95. Sencha
- 96. Ext JS + jQTouch + Raphaël
- 97. New roadmap and maintainer for jQTouch
- 98. The End