Intro to Web Apps using HTML5 and Javascript

972 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
972
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • HEADERS – Split into a couple pages?
  • Intro to Web Apps using HTML5 and Javascript

    1. 1. #devTO Web ‘apps’ using HTML5 and JS BH CONSULTING #devTO August 29, 2011
    2. 2. Mobile Browser vs App - Media BH CONSULTING #devTO August 29, 2011 Source: Adobe Systems Inc, ‘Adobe Mobile Experience Survey: What Users Want from Media, Finance, Travel and Shopping” conducted by Keynote Systems, Oct 13, 2010, http://www.emarketer.com/Article.aspx?R=1008010
    3. 3. Mobile Browser vs App - Shopping BH CONSULTING #devTO August 29, 2011 Source: Adobe Systems Inc, ‘Adobe Mobile Experience Survey: What Users Want from Media, Finance, Travel and Shopping” conducted by Keynote Systems, Oct 13, 2010, http://www.emarketer.com/Article.aspx?R=1008010
    4. 4. Web ‘App’ BH CONSULTING #devTO August 29, 2011
    5. 5. Interface <ul><li><input type=“number” ... /> </li></ul><ul><li><input type=“email” ... /> </li></ul><ul><li><input type=“tel” ... /> </li></ul><ul><li><input type=“range” min=“1” max=“100” step=“10” ... /> </li></ul><ul><li><input type=“url” ... /> </li></ul>BH CONSULTING #devTO August 29, 2011 Interface Type Downgrades to “text” automatically <input placeholder=“Enter name here” ... /> Placeholder Text No more javascript!
    6. 6. Meta and CSS Selectors <ul><li><meta name=“viewport” content=“width=device-width,initial-scale=1,user-scalable=no” /> </li></ul>BH CONSULTING #devTO August 29, 2011 Content Width <meta name=“viewport” content=“width=device-width” /> Further Restrictions (not always a good idea) Source: http://www.sitepoint.com/iphone-development-12-tips/ <link rel=“stylesheet” href=“small-screen.css” type=“text/css” media=“only screen and (max-device-width: 480px)” /> CSS
    7. 7. Rotation <ul><li>window.onorientationchange = function() { </li></ul><ul><li>// Orientation is in window.orientation </li></ul><ul><li>} </li></ul>BH CONSULTING #devTO August 29, 2011 Javascript
    8. 8. Geolocation BH CONSULTING #devTO August 29, 2011 Source: http://diveintohtml5.org/geolocation.html <ul><li>Opt-in location information </li></ul>// Get current location and pass to show_map navigator.geolocation.getCurrentPosition(show_map); function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // let's show a map or do something interesting! }
    9. 9. Offline <ul><li>var foo = localStorage[&quot;bar&quot;]; </li></ul><ul><li>// ... </li></ul><ul><li>localStorage[&quot;bar&quot;] = foo; </li></ul><ul><li>openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) { </li></ul><ul><li>db.changeVersion('', '1.0', function (t) { </li></ul><ul><li>t.executeSql('CREATE TABLE docids (id, name)'); </li></ul><ul><li>}, error); </li></ul><ul><li>}); </li></ul>BH CONSULTING #devTO August 29, 2011 <ul><li>Key-value pairs </li></ul><ul><li>Cache manifest </li></ul><ul><li>Web SQL Database (Mobile) </li></ul>Source: http://diveintohtml5.org/storage.html
    10. 10. HTML5 Video <ul><li><video id=&quot;video&quot; autobuffer height=&quot;240&quot; width=&quot;360&quot;> </li></ul><ul><li><source src=&quot;BigBuck.m4v&quot;> </li></ul><ul><li><source src=&quot;BigBuck.webm&quot; type=&quot;video/webm&quot;> </li></ul><ul><li><source src=&quot;BigBuck.theora.ogv&quot; type=&quot;video/ogg&quot;> </li></ul><ul><li></video> </li></ul><ul><li><script language=&quot;text/javascript&quot;> </li></ul><ul><li>var video = document.getElementById('video'); </li></ul><ul><li>video.addEventListener('click',function(){ </li></ul><ul><li>video.play(); </li></ul><ul><li>},false); </li></ul><ul><li></script> </li></ul>BH CONSULTING #devTO August 29, 2011 Source: http://stackoverflow.com/questions/1711078/html5-video-element-on-android
    11. 11. Pros BH CONSULTING #devTO August 29, 2011 <ul><li>No need to submit updates and wait to be published or user to update </li></ul><ul><li>Using a language you already know </li></ul>
    12. 12. Cons BH CONSULTING #devTO August 29, 2011 <ul><li>Access to native hardware (camera/mic, background notifications, concurrency) </li></ul><ul><li>Offline support </li></ul><ul><li>Waiting for standards </li></ul>
    13. 13. Resources / Contact BH CONSULTING #devTO August 29, 2011 1-877-774-4767 [email_address] @brianhogg bhconsulting.ca / brianhogg.com Clean, visual introduction to HTML5: http://diveintohtml5.org/introduction.html Full overview in all its browser-crashing glory: http://dev.w3.org/html5/spec/Overview.html Testing your browser: http://html5test.com/ HTML5 vs Android: http://www.youtube.com/watch?v=4f2Zky_YyyQ

    ×