Your SlideShare is downloading. ×
  • Like
Mobile web apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

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.

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,632
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
44
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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