Mobile web apps
Upcoming SlideShare
Loading in...5
×
 

Mobile web apps

on

  • 2,998 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.

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.

Statistics

Views

Total Views
2,998
Views on SlideShare
2,878
Embed Views
120

Actions

Likes
2
Downloads
44
Comments
0

9 Embeds 120

http://sketchmarx.blogspot.com 102
http://sketchmarx.blogspot.ca 6
http://sketchmarx.blogspot.de 4
http://sketchmarx.blogspot.com.br 2
http://sketchmarx.blogspot.in 2
http://sketchmarx.blogspot.com.au 1
http://sketchmarx.blogspot.fr 1
http://sketchmarx.blogspot.nl 1
http://sketchmarx.blogspot.co.uk 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile web apps Mobile web apps Presentation Transcript

  • Patrick Crowley the.railsi.st
  • Mobile web apps using jQTouch
  • What’s yourmobile strategy? View slide
  • • Website (aka “give up”) View slide
  • • Website (aka “give up”)• Website + mobile stylesheet
  • • Website (aka “give up”)• Website + mobile stylesheet• Native apps for iPhone and Android (awesome, but $$$)
  • • Optimize for mobile displays
  • • Optimize for mobile displays• Reduce page load time
  • • Optimize for mobile displays• Reduce page load time• Reduce network traffic
  • • Optimize for mobile displays• Reduce page load time• Reduce network traffic• Support gestures
  • Smartphone Market Share RIM iPhone Windows Android Other 9% 9% 35% 19% 28%Source: Nielsen for Q1 2010
  • Mobile Browser Usage iPhone Android RIM Other 6% 13% 23% 58%Source: Net Applications for May 2010
  • What does this mean?
  • • Website (aka “do nothing”)
  • • Website (aka “do nothing”)• Website + mobile stylesheets
  • • Website (aka “do nothing”)• Website + mobile stylesheets• Native apps for iPhone and Android (awesome, but $$$)
  • • Website (aka “do nothing”)• Website + mobile stylesheets• Native apps for iPhone and Android (awesome, but $$$)• Website + mobile web app
  • Mobile strategy = Webkit
  • Target mobile browsers people actually use.
  • • More than 81% of mobile browser traffic
  • • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)
  • • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)
  • • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)• WebOS (Palm -> HP)
  • • More than 81% of mobile browser traffic• iOS (iPhone + iPod Touch)• Android (1.5 and up)• WebOS (Palm -> HP)• Blackberry (future)
  • What about... ?!?!
  • S T O AT
  • Who cares?
  • Browsing alreadysucks on these phones
  • So optimize forawesome phones!
  • Why Webkit?
  • • Web standards
  • • Web standards• Consistent rendering
  • • Web standards• Consistent rendering• Support for HTML5
  • • Web standards• Consistent rendering• Support for HTML5• Animation
  • • Web standards• Consistent rendering• Support for HTML5• Animation• Offline caching
  • jQTouch
  • Web apps with native look and feel
  • jQuery + jQTouch + HTML
  • jQTouch 101
  • 1. Getting started
  • <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  • <script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery","1.3.2");</script>
  • <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>
  • <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>
  • <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>
  • $.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 ]});
  • 2. Basic page layout
  • index.html<body> <div class="current" id="home"> <div class="toolbar"> <h1>jQTouch Demo</h1> </div> <!-- CONTENT GOES HERE --> </div></body>
  • #about #blogindex.html #contact /video
  • 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>
  • #about #blogindex.html #contact /video
  • video.html<div id="video"> <div class="toolbar"> <h1>Video</h1> </div></div>
  • Markup-based UI
  • Classes => behavior
  • • Toolbars
  • • Toolbars• Lists
  • • Toolbars• Lists• Buttons
  • • Toolbars• Lists• Buttons• Forms
  • • Toolbars• Lists• Buttons• Forms• Navigation
  • Toolbar
  • <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>
  • List
  • <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>
  • UI Demo
  • Sample app
  • Debugging
  • • iPhone Simulator
  • • iPhone Simulator• Android Simulator
  • • iPhone Simulator• Android Simulator• Actual devices!!!
  • Mobile detection
  • // 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";}
  • Version switching
  • <--->
  • Dynamic content filters
  • // Disable links$(.page).live(pageAnimationStart,function(){ $(p a).attr("href", "");});
  • Resources
  • • jqtouch.com
  • • jqtouch.com• github.com/senchalabs/jQTouch
  • • jqtouch.com• github.com/senchalabs/jQTouch• peepcode.com/products/jqtouch
  • • jqtouch.com• github.com/senchalabs/jQTouch• peepcode.com/products/jqtouch• glyphish.com
  • Coming soon
  • Sencha
  • Ext JS + jQTouch + Raphaël
  • New roadmap andmaintainer for jQTouch
  • The End