View
2.944
Download
1
Category
Preview:
DESCRIPTION
Citation preview
Creating mobile apps without native code
Joakim Kemeny
Mobile today
• A lot of really great native apps
• A lot of fun native apps
Native apps
Positive • Perfect for games • Perfect for performance • Perfect for phone access
– Accelerometer – Camera – Contacts – Geolocation – Of<line – …
• Perfect for sales
Negative • Expensive to create • You are not in control • iOS is not Windows
– iOS – Android – Windows Phone – Nokia – BlackBerry – HP webOS
Alternatives • Ignore mobile
– Not really an option today
• Mobile web apps • Hybrid solution
• Some apps doesn’t have to be native
Browsers
Firefox Windows | Mac | Linux
IE Windows
Chrome Windows | Mac | Linux
Safari Windows | Mac
Opera Windows | Mac | Linux
Web development
JavaScript + frameworks
W3C Standards
CSS
XHTML 1.0
HTML 5
Mobile web development W3C Standards
JavaScript + frameworks
OMA Standards
WAP CSS
XHTML MP version: 1.0, 1.1 & 1.2
W3C Mobile
CSS MP
XHTML Basic version: 1.0 & 1.1
CSS
XHTML 1.0
HTML 5
Let’s build a mobile web app <!DOCTYPE html> <html> <head> <title>Mobile Demo</title> </head> <body> <h1>Welcome to our app</h1> <p>This is our very first mobile web app</p> </body> </html>
<!DOCTYPE html> <html> <head> <title>Mobile Demo</title> <meta name=”viewport” content=”width=device-‐width” /> <meta name=”viewport” content=”initial-‐scale=1.0” /> <meta name=”viewport” content=”user-‐scalable=no” /> <meta name=”viewport” content=”target-‐densitydpi=device-‐dpi” /> <meta name=”HandheldFriendly” content=”true” /> <meta name=”MobileOptimized” content=”width” /> </head> <body> <h1>Welcome to our app</h1> <p>This is our very first mobile web app</p> </body> </html>
<!DOCTYPE html> <html> <head> <title>Mobile Demo</title> <meta name=”viewport” content=”width=device-‐width” /> <meta name=”viewport” content=”initial-‐scale=1.0” /> <meta name=”viewport” content=”user-‐scalable=no” /> <meta name=”viewport” content=”target-‐densitydpi=device-‐dpi” /> <meta name=”HandheldFriendly” content=”true” /> <meta name=”MobileOptimized” content=”width” /> <meta name=”apple-‐mobile-‐web-‐app-‐capable” content=”yes” /> <meta name=”apple-‐mobile-‐web-‐app-‐status-‐bar-‐style” content=”black” /> <link rel=”apple-‐touch-‐icon” href=”icon.png” /> <link rel=”apple-‐touch-‐icon” href=”ipad.png” sizes=”72x72” /> <link rel=”apple-‐touch-‐icon” href=”iphone4.png” sizes=”114x114” /> <link rel=”apple-‐touch-‐startup-‐image” href=”startup.png” /> </head> <body> <h1>Welcome to our app</h1> <p>This is our very first mobile web app</p> </body> </html>
<!DOCTYPE html> <html> <head> <title>Mobile Demo</title> <meta name=”viewport” content=”width=device-‐width” /> <meta name=”viewport” content=”initial-‐scale=1.0” /> <meta name=”viewport” content=”user-‐scalable=no” /> <meta name=”viewport” content=”target-‐densitydpi=device-‐dpi” /> <meta name=”HandheldFriendly” content=”true” /> <meta name=”MobileOptimized” content=”width” /> <meta name=”apple-‐mobile-‐web-‐app-‐capable” content=”yes” /> <meta name=”apple-‐mobile-‐web-‐app-‐status-‐bar-‐style” content=”black” /> <link rel=”apple-‐touch-‐icon-‐precomposed” href=”icon.png” /> <link rel=”apple-‐touch-‐icon-‐precomposed” href=”ipad.png” sizes=”72x72” /> <link rel=”apple-‐touch-‐icon-‐precomposed” href=”iphone4.png” sizes=”114x114” /> <link rel=”apple-‐touch-‐startup-‐image” href=”startup.png” /> </head> <body> <h1>Welcome to our app</h1> <p>This is our very first mobile web app</p> </body> </html>
Creating content
• Use correct syntax and markup all your content • Make sure it works without JavaScript and CSS • Make all controls bigger • Design for different screen sizes • Avoid tables with multiple columns and forms as long as possible
• Find a framework to help you!
Styling content
• Use external CSS for styling content • Try to use CSS3 instead of images • Try to use CSS sprites if possible
• Doesn’t work for iPhone and Android!
<link type=”text/css” rel=”stylesheet” media=”handheld” href=”iphone.css” />
Media queries
<link type=”text/css” rel=”stylesheet” media=”screen and (max-‐device-‐width: 480px)” href=”iphone.css” />
@media screen and (max-‐device-‐width: 480px) { body { background-‐color: red; } }
@import url(iphone.css) screen and (max-‐device-‐width: 480px);
Media queries
<link type=”text/css” rel=”stylesheet” media=”screen and (max-‐device-‐width: 480px)” href=”iphone.css” />
@media screen and (max-‐device-‐width: 480px) { body { background-‐color: red; } } @media screen and (orientation: landscape) ... @media screen and (-‐webkit-‐min-‐device-‐pixel-‐ratio: 2) ...
@import url(iphone.css) screen and (max-‐device-‐width: 480px);
Media queries
.header { background: url(image.png); } @media screen and (-‐webkit-‐device-‐pixel-‐ratio: 0.75) { .header { background: url(image-‐lowdpi.png); } } @media screen and (-‐webkit-‐device-‐pixel-‐ratio: 1.5) { .header { background: url(image-‐hidpi.png); } } @media screen and (-‐webkit-‐device-‐pixel-‐ratio: 2) { .header { background: url(image-‐retina.png); } }
jQuery Mobile
• Version 1.0 alpha 4.1
• Easy to learn • Uses progressive enhancement • Great device support • Builds on popular jQuery • Uses CSS3 for effects • Small
<!DOCTYPE html> <html> <head> <title>Mobile Demo</title> <link rel=”stylesheet” href=”jquery.mobile-‐1.0a4.1.min.css” /> <script type=”text/javascript” src=”jquery-‐1.5.2.min.js”></script> <script type=”text/javascript” src=”jquery.mobile-‐1.0a4.1.min.js”></script> <meta name=”viewport” content=”width=device-‐width” /> <meta name=”viewport” content=”initial-‐scale=1.0” /> <meta name=”viewport” content=”user-‐scalable=no” /> <meta name=”viewport” content=”target-‐densitydpi=device-‐dpi” /> <meta name=”HandheldFriendly” content=”true” /> <meta name=”MobileOptimized” content=”width” /> <meta name=”apple-‐mobile-‐web-‐app-‐capable” content=”yes” /> <meta name=”apple-‐mobile-‐web-‐app-‐status-‐bar-‐style” content=”black” /> <link rel=”apple-‐touch-‐icon-‐precomposed” href=”icon.png” /> <link rel=”apple-‐touch-‐icon-‐precomposed” href=”ipad.png” sizes=”72x72” /> <link rel=”apple-‐touch-‐icon-‐precomposed” href=”iphone4.png” sizes=”114x114” /> <link rel=”apple-‐touch-‐startup-‐image” href=”startup.png” /> </head> ...
... <body> <div data-‐role=”page” id=”index”> <div data-‐role=”header”> <h1>Mobile Demo</h1> </div> <div data-‐role=”content”> <h2>Welcome to our app</h2> <p>This is our very first mobile web app</p> </div> </div> </body> </html>
... <div data-‐role=”header”> <h1>Mobile Demo</h1> <a href=”#about” data-‐role=”button” data-‐icon=”info” data-‐transition=”flip” class=”ui-‐btn-‐right”>About</a> </div> <div data-‐role=”header”> <div data-‐role=”controlgroup” data-‐type=”horizontal”> <a href=”#page2” data-‐role=”button” data-‐icon=”plus” data-‐transition=”slide”>Slide</a> <a href=”#page3” data-‐role=”button” data-‐icon=”delete” data-‐transition=”pop”>Pop</a> <a href=”#page4” data-‐role=”button” data-‐icon=”arrow-‐u” data-‐transition=”fade”>Fade</a> <a href=”#page5” data-‐role=”button” data-‐icon=”arrow-‐d” data-‐rel=”dialog” data-‐transition=”slideup”>Dialog</a> </div> </div> ...
... <div data-‐role=”header” data-‐theme=”b”> <h1>Mobile Demo</h1> <a href=”#about” data-‐role=”button” data-‐icon=”info” data-‐transition=”flip” class=”ui-‐btn-‐right”>Settings</a> </div> <div data-‐role=”header” data-‐theme=”d” class=”ui-‐bar”> <div data-‐role=”controlgroup” data-‐type=”horizontal”> <a href=”#page2” data-‐role=”button” data-‐icon=”plus” data-‐transition=”slide”>Slide</a> <a href=”#page3” data-‐role=”button” data-‐icon=”delete” data-‐transition=”pop”>Pop</a> <a href=”#page4” data-‐role=”button” data-‐icon=”arrow-‐u” data-‐transition=”fade”>Fade</a> <a href=”#page5” data-‐role=”button” data-‐icon=”arrow-‐d” data-‐rel=”dialog” data-‐transition=”slideup”>Dialog</a> </div> </div> ...
... <div data-‐role="content" data-‐theme="c"> <ul data-‐role="listview" data-‐theme="d" data-‐inset="true"> <li data-‐role="list-‐divider">Great cars</li> <li> Audi <ul data-‐theme="d" data-‐inset="true"> <li data-‐role="list-‐divider">Audi Prices</li> <li><a href="a1.html">Audi A1 <span class="ui-‐li-‐count">158 000 kr</span></a></li> <li><a href="a3.html">Audi A3 <span class="ui-‐li-‐count">190 700 kr</span></a></li> <li><a href="a4.html">Audi A4 <span class="ui-‐li-‐count">254 500 kr</span></a></li> </ul> </li> <li><a href="bmw.html">BMW</a></li> <li><a href="saab.html">SAAB</a></li> <li><a href="volvo.html">Volvo</a></li> </ul> </div> ...
... <div data-‐role="content" data-‐theme="c"> <ul data-‐role="listview" data-‐theme="d" data-‐inset="true"> <li data-‐role="list-‐divider">Great cars</li> <li> Audi <ul data-‐theme="d" data-‐inset="true"> <li data-‐role="list-‐divider">Audi Prices</li> <li><a href="a1.html">Audi A1 <span class="ui-‐li-‐count">158 000 kr</span></a></li> <li><a href="a3.html">Audi A3 <span class="ui-‐li-‐count">190 700 kr</span></a></li> <li><a href="a4.html">Audi A4 <span class="ui-‐li-‐count">254 500 kr</span></a></li> </ul> </li> <li><a href="bmw.html">BMW</a></li> <li><a href="saab.html">SAAB</a></li> <li><a href="volvo.html">Volvo</a></li> </ul> </div> ...
OfHline
• HTML5: Of<line Application Cache – Use a manifest <ile to de<ine the cache
CACHE MANIFEST # v = 1.0.0 jquery.mobile-‐1.0a4.1.min.css jquery-‐1.5.2.min.js jquery.mobile-‐1.0a4.1.min.js images/ajax-‐loader.png images/icon-‐search-‐black.png images/icons-‐18-‐black.png images/icons-‐18-‐white.png images/icons-‐36-‐black.png images/icons-‐36-‐white.png index.html
OfHline
• HTML5: Of<line Application Cache – Use a manifest <ile to de<ine the cache
<!DOCTYPE html> <html manifest=”my_cached_files.manifest"> <head> <title>Mobile Demo</title> <link rel=”stylesheet” href=”jquery.mobile-‐1.0a4.1.min.css” /> <script type=”text/javascript” src=”jquery-‐1.5.2.min.js”></script> <script type=”text/javascript” src=”jquery.mobile-‐1.0a4.1.min.js”></script> ...
PhoneGap
• Use HTML5 and CSS3 to create your application • Use JavaScript to implement business logic • Use PhoneGap JavaScript lib to access native features
• Deploy to multiple platforms – iOS, Android, BlackBerry, webOS, Symbian (supported) – Windows Phone, MeeGo, Bada (planned)
• Use build server to automate process
Final thoughts
• HTML5 has huge potential • It’s still dif<icult
– Browsers are still not your friend – Testing is much more dif<icult – Usability is essential
• jQuery Mobile is still in alpha mode
Thank you for listening
http://demo.kemeny.se/ javaforum2011/
Links • jQuery Mobile
http://www.jquerymobile.com
• PhoneGap http://www.phonegap.com
• PhoneGap Xcode 4 Fix http://iamcam.wordpress.com/2011/03/17/phonegap-‐xcode4
• WURFL http://wur<l.com
• DeviceAtlas http://deviceatlas.com
• Emulators http://www.mobilexweb.com/emulators
• DeviceAnywhere http://www.deviceanywhere.com
• Mobile Compatibility http://www.quirksmode.org/m/table.html
• iUI http://code.google.com/p/iui/
• jqTouch http://jqtouch.com
• Sencha Touch http://www.sencha.com/products/touch
• iWebKit http://snippetspace.com/iwebkit
• WebApp.net http://webapp-‐net.com
• Spring Mobile http://www.springsource.org/spring-‐mobile
• iUI http://code.google.com/p/iui/
Links (continued) • W3C HTML5
http://www.w3.org/TR/html5 • W3C Media Queries
http://www.w3.org/TR/css3-‐mediaqueries
• W3C XHTML Basic http://www.w3.org/TR/2010/REC-‐xhtml-‐basic-‐20101123
• W3C CSS Mobile Pro<ile http://www.w3.org/TR/2008/CR-‐css-‐mobile-‐20081210
• Open Mobile Alliance http://www.openmobilealliance.org
• Programming the mobile web http://oreilly.com/catalog/9780596807795
• Designing with progressive enhancement http://www.<ilamentgroup.com/dwpe/
• Mobile Web Best Practices http://http://www.w3.org/TR/mobile-‐bp
• Mobile Web Application Best Practices http://http://www.w3.org/TR/mwabp
Recommended