Your SlideShare is downloading. ×
HTML5 vs. Native Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 vs. Native Applications

4,980

Published on

Published in: Technology
3 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,980
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
179
Comments
3
Likes
5
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. HTML vsNATIVE APPLICATIONS
  • 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. All Source Code and Slides zachleat.com/mobile/uno/
  • 4. MOBILEhttp://www.flickr.com/photos/umpcportal/3221591123/
  • 5. PLATFORMS
  • 6. HOW TO DECIDE?•Market Share / Popularity•Learning Curve
  • 7. MARKET SHAREhttp://www.flickr.com/photos/rednuht/479370088/
  • 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. * 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. * 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. 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. 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. CHANGEHAPPENS http://www.flickr.com/photos/bestrated1/3027598360/
  • 14. FRAGMENTATION HAPPENS
  • 15. LEARNING CURVEhttp://www.flickr.com/photos/riebart/4466482623/
  • 16. LANGUAGES C++ Objective C Java JavaScript Java XNA or Silverlight
  • 17. DEVELOPMENT REQUIREMENTS Cross Platform Requires MacOS X Requires Windows Requires Windows
  • 18. (THIS SUCKS)
  • 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. I WANT MY APP TO WORK WITHMULTIPLE PLATFORMS
  • 21. ?(OKAY, MORE LIKE AN “EASIER BUTTON”)
  • 22. WHAT DO ALLTHESE DEVICESHAVE INCOMMON? http://www.flickr.com/photos/paulwb/4248242126/
  • 23. THE WEB BROWSER
  • 24. CueHTMLand friends
  • 25. Crash Course
  • 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>
  • 30. Let’s Make AMulti-Platform Web App
  • 31. Laundry TimerWASH DRY45:00 START
  • 32. (DEMO)
  • 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
  • 37. Possible Features•Return directions to Laundromat(Geolocation)•Video •Graphics•2D/3D Transforms •File Access•Web Fonts
  • 38. Let’s Make AMulti-Platform Native App
  • 39. Native Options•Accelerometer •File System•Camera •Media (Record)•Compass •Network State•Contacts •Notifications
  • 40. PhoneGap
  • 41. PhoneGap
  • 42. It’s Easy to Starthttp://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
  • 45. Thanks!Zach Leatherman @zachleat http://zachleat.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

×