HTML    vsNATIVE APPLICATIONS
Hello.Zach LeathermanFront End Engineer since Y2K - 1Senior Project Engineer at Union Pacific Railroad767,000+ page views1,...
All Source Code and Slides zachleat.com/mobile/uno/
MOBILEhttp://www.flickr.com/photos/umpcportal/3221591123/
PLATFORMS
HOW TO DECIDE?•Market Share / Popularity•Learning Curve
MARKET SHAREhttp://www.flickr.com/photos/rednuht/479370088/
Market Share (%)                                 Units Sold (Thousands)  21                                               ...
*            Market Share (%)                                   Units Sold (Thousands)60                                  ...
*              Market Share (%)                                  Units Sold (Thousands) 11                                ...
Market Share (%)                                 Units Sold (Thousands) 18                                               1...
Market Share (%)                                   Units Sold (Thousands) 30                                              ...
CHANGEHAPPENS     http://www.flickr.com/photos/bestrated1/3027598360/
FRAGMENTATION HAPPENS
LEARNING CURVEhttp://www.flickr.com/photos/riebart/4466482623/
LANGUAGES     C++     Objective C     Java     JavaScript     Java     XNA or Silverlight
DEVELOPMENT REQUIREMENTS                    Cross Platform Requires MacOS X Requires Windows Requires Windows
(THIS SUCKS)
T HIS IS                  A SIGN                                                                        TO OM ANY OO M ANY...
I WANT MY APP TO WORK WITHMULTIPLE PLATFORMS
?(OKAY, MORE LIKE AN “EASIER BUTTON”)
WHAT DO ALLTHESE DEVICESHAVE INCOMMON?    http://www.flickr.com/photos/paulwb/4248242126/
THE WEB BROWSER
CueHTMLand friends
Crash Course
HTML             (Content)<!doctype html><html>  <head></head>  <body>    This is the content.    It shows in the browser ...
CSS     (How it looks)body {  background-color: #000;  color: #fff;}
JavaScript             (How it behaves)document.body.addEventListener(‘click’,  function()  {    alert(‘You clicked on the...
Combined<!doctype html><html>  <head>    <style>    body {       background-color: #000;       color: #fff;    }    </styl...
Let’s Make AMulti-Platform Web App
Laundry TimerWASH           DRY45:00       START
(DEMO)
CSS Media Queries•Adaptable Layout for Different Screen Sizes  <meta name="viewport"       content="width=device-width, in...
HTML5 Audio•Plays a sound when finished   <audio id="priceiswrong" preload="auto" autobuffer>     <source src="price-is-rig...
HTML5 LocalStorage•Reload the app, saves your timer   // save Date as a string on start   localStorage.setItem(laundryTime...
HTML5 Offline•Access the app without internet  <html manifest="cache.manifest">  .htaccess file  AddType text/cache-manifes...
Possible Features•Return directions to Laundromat(Geolocation)•Video                   •Graphics•2D/3D Transforms        •...
Let’s Make AMulti-Platform Native App
Native Options•Accelerometer   •File System•Camera          •Media (Record)•Compass         •Network State•Contacts       ...
PhoneGap
PhoneGap
It’s Easy to Starthttp://www.phonegap.com/start
CAVEATS•Not all web browsers are created equal •Blackberry OS     (watch out: pre v5) •IE Mobile  (watch out: pre IE9, due...
RESOURCES•Can I Use?                     http://caniuse.com•Dive Into HTML5                               http://diveintoh...
Thanks!Zach Leatherman @zachleat http://zachleat.com
SOURCES•   ADMOB has more Mobile Operating System Statistics: http://metrics.admob.com/wp-    content/uploads/2010/06/May-...
Upcoming SlideShare
Loading in …5
×

HTML5 vs. Native Applications

5,291 views

Published on

Published in: Technology
3 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
5,291
On SlideShare
0
From Embeds
0
Number of Embeds
1,959
Actions
Shares
0
Downloads
187
Comments
3
Likes
5
Embeds 0
No embeds

No notes for slide

HTML5 vs. Native Applications

  1. 1. HTML vsNATIVE APPLICATIONS
  2. 2. Hello.Zach LeathermanFront End Engineer since Y2K - 1Senior Project Engineer at Union Pacific Railroad767,000+ page views1,000+ RSS subscribersPublished on: Lifehacker, DailyJS, JavaScript Weekly, AjaxianMember of two winning Omaha Startup Weekend teams @zachleat http://zachleat.com
  3. 3. All Source Code and Slides zachleat.com/mobile/uno/
  4. 4. MOBILEhttp://www.flickr.com/photos/umpcportal/3221591123/
  5. 5. PLATFORMS
  6. 6. HOW TO DECIDE?•Market Share / Popularity•Learning Curve
  7. 7. MARKET SHAREhttp://www.flickr.com/photos/rednuht/479370088/
  8. 8. Market Share (%) Units Sold (Thousands) 21 1200015.75 9000 10.5 60005.25 3000 0 0 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10
  9. 9. * Market Share (%) Units Sold (Thousands)60 3000045 2250030 1500015 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. 10. * Market Share (%) Units Sold (Thousands) 11 50008.25 3750 5.5 25002.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
  11. 11. Market Share (%) Units Sold (Thousands) 18 1400013.5 10500 9 7000 4.5 3500 0 0 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10
  12. 12. Market Share (%) Units Sold (Thousands) 30 3000022.5 22500 15 15000 7.5 7500 0 0 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10
  13. 13. CHANGEHAPPENS http://www.flickr.com/photos/bestrated1/3027598360/
  14. 14. FRAGMENTATION HAPPENS
  15. 15. LEARNING CURVEhttp://www.flickr.com/photos/riebart/4466482623/
  16. 16. LANGUAGES C++ Objective C Java JavaScript Java XNA or Silverlight
  17. 17. DEVELOPMENT REQUIREMENTS Cross Platform Requires MacOS X Requires Windows Requires Windows
  18. 18. (THIS SUCKS)
  19. 19. T HIS IS A SIGN TO OM ANY OO M ANY REST P STO DE VI CES AP http://www.flickr.com/photos/oblongpictures/4516124048/
  20. 20. I WANT MY APP TO WORK WITHMULTIPLE PLATFORMS
  21. 21. ?(OKAY, MORE LIKE AN “EASIER BUTTON”)
  22. 22. WHAT DO ALLTHESE DEVICESHAVE INCOMMON? http://www.flickr.com/photos/paulwb/4248242126/
  23. 23. THE WEB BROWSER
  24. 24. CueHTMLand friends
  25. 25. Crash Course
  26. 26. HTML (Content)<!doctype html><html> <head></head> <body> This is the content. It shows in the browser window. </body></html>
  27. 27. CSS (How it looks)body { background-color: #000; color: #fff;}
  28. 28. JavaScript (How it behaves)document.body.addEventListener(‘click’, function() { alert(‘You clicked on the page.’); }, false);
  29. 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>
  30. 30. Let’s Make AMulti-Platform Web App
  31. 31. Laundry TimerWASH DRY45:00 START
  32. 32. (DEMO)
  33. 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. 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. 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. 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
  37. 37. Possible Features•Return directions to Laundromat(Geolocation)•Video •Graphics•2D/3D Transforms •File Access•Web Fonts
  38. 38. Let’s Make AMulti-Platform Native App
  39. 39. Native Options•Accelerometer •File System•Camera •Media (Record)•Compass •Network State•Contacts •Notifications
  40. 40. PhoneGap
  41. 41. PhoneGap
  42. 42. It’s Easy to Starthttp://www.phonegap.com/start
  43. 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. 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
  45. 45. Thanks!Zach Leatherman @zachleat http://zachleat.com
  46. 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

×