This document compares developing mobile applications using HTML vs native applications. It notes that HTML allows creating applications that work across multiple platforms using common web technologies like HTML, CSS, and JavaScript. Native applications require developing for each platform's languages like Objective C or Java. The document demonstrates a simple laundry timer application built with HTML5 features like audio, local storage, and offline access to function across devices. It recommends HTML for cross-platform apps due to fewer development requirements compared to building separately for each device.
2. Hello.
Zach Leatherman
Front End Engineer since Y2K - 1
Senior Project Engineer at Union Pacific Railroad
767,000+ page views
1,000+ RSS subscribers
Published on: Lifehacker, DailyJS, JavaScript Weekly, Ajaxian
Member of two winning Omaha Startup Weekend teams
@zachleat http://zachleat.com
9. *
Market Share (%) Units Sold (Thousands)
60 30000
45 22500
30 15000
15 7500
0 0
1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10
* Likely dissolving due to Windows Phone 7 Partnership
10. *
Market Share (%) Units Sold (Thousands)
11 5000
8.25 3750
5.5 2500
2.75 1250
0 0
1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10
* Not included in Charts, but 2M devices sold to carriers as of end of 2010
26. HTML
(Content)
<!doctype html>
<html>
<head></head>
<body>
This is the content.
It shows in the browser window.
</body>
</html>
27. CSS
(How it looks)
body {
background-color: #000;
color: #fff;
}
28. JavaScript
(How it behaves)
document.body.addEventListener(‘click’,
function()
{
alert(‘You clicked on the page.’);
}, false);
29. Combined
<!doctype html>
<html>
<head>
<style>
body {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
This is the content.
It shows in the browser window.
<script>
document.body.addEventListener(‘click’, function()
{
alert(‘You clicked on the page.’);
}, false);
</script>
</body>
</html>
33. CSS Media Queries
•Adaptable Layout for Different Screen Sizes
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<style>
label {
width: 50%;
}
@media all and (max-width: 399px) {
label { min-device-width
width: 100%; max-device-width
} min-width
} max-width
orientation: landscape;
</style> orientation: portrait;
min-device-pixel-ratio
(iPhone 4 Retina Display)
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
https://developer.mozilla.org/En/CSS/Media_queries
34. HTML5 Audio
•Plays a sound when finished
<audio id="priceiswrong" preload="auto" autobuffer>
<source src="price-is-right-fail.ogg" />
<source src="price-is-right-fail.mp3" />
</audio>
document.getElementById('priceiswrong').play();
•Make sure the file is encoded correctly.
•OGG, MP3, etc
35. HTML5 LocalStorage
•Reload the app, saves your timer
// save Date as a string on start
localStorage.setItem('laundryTimer', time.getTime());
// remove when the alarm plays
localStorage.removeItem('laundryTimer');
// retrieve the saved time on page load (if exists)
var savedTimer = localStorage.getItem('laundryTimer');
36. HTML5 Offline
•Access the app without internet
<html manifest="cache.manifest">
.htaccess file
AddType text/cache-manifest .manifest
cache.manifest file
CACHE MANIFEST
price-is-right-fail.mp3
price-is-right-fail.ogg
42. It’s Easy to Start
http://www.phonegap.com/start
43. CAVEATS
•Not all web browsers are created equal
•Blackberry OS (watch out: pre v5)
•IE Mobile (watch out: pre IE9, due 4Q2011)
•Lowest Common Denominator Development
•Not every device requires/can support the
same experience
44. RESOURCES
•Can I Use? http://caniuse.com
•Dive Into HTML5 http://diveintohtml5.org
•HTML5 Rocks http://www.html5rocks.com/
•PhoneGap http://phonegap.com
•Rethinking the Mobile Web
rethinking-the-mobile-web-by-yiibu
http://www.slideshare.net/bryanrieger/
•jQuery Mobile http://jquerymobile.com
46. SOURCES
• ADMOB has more Mobile Operating System Statistics: http://metrics.admob.com/wp-
content/uploads/2010/06/May-2010-AdMob-Mobile-Metrics-Highlights.pdf
• Great stats on different App Stores on Wikipedia: http://en.wikipedia.org/wiki/
List_of_digital_distribution_platforms_for_mobile_devices
• ADMOB App Usage Survey: http://metrics.admob.com/wp-content/uploads/2010/03/
AdMob-Mobile-Metrics-Jan-10-Survey-Supplement.pdf
• ADMOB Mobile Metrics Highlights May 2010: http://metrics.admob.com/wp-content/
uploads/2010/06/May-2010-AdMob-Mobile-Metrics-Highlights.pdf
