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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile web apps

2,640
views

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.

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,640
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
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