• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 vs. Native Applications
 

HTML5 vs. Native Applications

on

  • 4,958 views

 

Statistics

Views

Total Views
4,958
Views on SlideShare
3,052
Embed Views
1,906

Actions

Likes
5
Downloads
174
Comments
3

14 Embeds 1,906

http://www.zachleat.com 1849
http://theoldreader.com 28
http://zachleat.com.local 6
http://iwantaneff.in 4
http://edanhewitt.com 4
http://translate.googleusercontent.com 4
http://wiki.publiekeomroep.nl 4
http://test.wiki.publiekeomroep.nl 1
http://webcache.googleusercontent.com 1
https://twitter.com 1
http://new.kakoto.org 1
http://www.hanrss.com 1
http://dashboard.bloglines.com 1
http://inforead.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • tahnk you good share.
    Are you sure you want to
    Your message goes here
    Processing…
  • Absolutely. Read up on Progressive Enhancement for help with browser support!

    I have a presentation on SlideShare about just that topic.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thank you Zach, appreciate sharing this presentation. What do you feel on HTML5 limitations on various browsers, do you see that impacting cross platform development?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 vs. Native Applications HTML5 vs. Native Applications Presentation Transcript

    • HTML vsNATIVE APPLICATIONS
    • 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
    • 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 1200015.75 9000 10.5 60005.25 3000 0 0 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10
    • * 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
    • * 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
    • 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
    • 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
    • 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 REST P STO DE VI CES AP http://www.flickr.com/photos/oblongpictures/4516124048/
    • 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 window. </body></html>
    • CSS (How it looks)body { background-color: #000; color: #fff;}
    • JavaScript (How it behaves)document.body.addEventListener(‘click’, function() { alert(‘You clicked on the page.’); }, false);
    • 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>
    • 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, 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
    • 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
    • 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);
    • 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
    • Possible Features•Return directions to Laundromat(Geolocation)•Video •Graphics•2D/3D Transforms •File Access•Web Fonts
    • Let’s Make AMulti-Platform Native App
    • Native Options•Accelerometer •File System•Camera •Media (Record)•Compass •Network State•Contacts •Notifications
    • 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 4Q2011)•Lowest Common Denominator Development •Not every device requires/can support the same experience
    • 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
    • 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-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