Brian Hogg - Web Apps using HTML5 and JS

833 views

Published on

Web Apps vs Native Apps. Brian shares tips about creating web apps with HTML5

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
833
On SlideShare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Brian Hogg - Web Apps using HTML5 and JS

  1. 1. #devTO Web ‘apps’ using HTML5 and JSBH CONSULTING #devTO August 29, 2011
  2. 2. Mobile Browser vs App - MediaSource: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=1008010BH CONSULTING #devTO August 29, 2011 2
  3. 3. Mobile Browser vs App - ShoppingSource: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=1008010BH CONSULTING #devTO August 29, 2011 3
  4. 4. Web ‘App’BH CONSULTING #devTO August 29, 2011 4
  5. 5. Interface Interface Type <input type=“number” ... /> <input type=“email” ... /> <input type=“tel” ... /> <input type=“range” min=“1” max=“100” step=“10” ... /> <input type=“url” ... /> Downgrades to “text” automatically Placeholder Text <input placeholder=“Enter name here” ... /> No more javascript!BH CONSULTING #devTO August 29, 2011 5
  6. 6. Meta and CSS Selectors Content Width <meta name=“viewport” content=“width=device-width” /> Further Restrictions (not always a good idea) <meta name=“viewport” content=“width=device-width,initial- scale=1,user-scalable=no” /> CSS <link rel=“stylesheet” href=“small-screen.css” type=“text/css” media=“only screen and (max-device-width: 480px)” /> Source: http://www.sitepoint.com/iphone-development-12-tips/BH CONSULTING #devTO August 29, 2011 6
  7. 7. Rotation Javascript window.onorientationchange = function() { // Orientation is in window.orientation }BH CONSULTING #devTO August 29, 2011 7
  8. 8. Geolocation !  Opt-in location information // 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; // lets show a map or do something interesting! } Source: http://diveintohtml5.org/geolocation.htmlBH CONSULTING #devTO August 29, 2011 8
  9. 9. Offline !  Key-value pairs !  Cache manifest !  Web SQL Database (Mobile) var foo = localStorage["bar"]; // ... localStorage["bar"] = foo; openDatabase(documents, 1.0, Local document storage, 5*1024*1024, function (db) { db.changeVersion(, 1.0, function (t) { t.executeSql(CREATE TABLE docids (id, name)); }, error); }); Source: http://diveintohtml5.org/storage.htmlBH CONSULTING #devTO August 29, 2011 9
  10. 10. HTML5 Video <video id="video" autobuffer height="240" width="360"> <source src="BigBuck.m4v"> <source src="BigBuck.webm" type="video/webm"> <source src="BigBuck.theora.ogv" type="video/ogg"> </video> <script language="text/javascript"> var video = document.getElementById(video); video.addEventListener(click,function(){ video.play(); },false); </script> Source: http://stackoverflow.com/questions/1711078/html5-video-element-on-androidBH CONSULTING #devTO August 29, 2011 10
  11. 11. Pros !  No need to submit updates and wait to be published or user to update !  Using a language you already knowBH CONSULTING #devTO August 29, 2011 11
  12. 12. Cons !  Access to native hardware (camera/mic, background notifications, concurrency) !  Offline support !  Waiting for standardsBH CONSULTING #devTO August 29, 2011 12
  13. 13. Resources / Contact 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 1-877-774-4767 brian@bhconsulting.ca @brianhogg bhconsulting.ca / brianhogg.comBH CONSULTING #devTO August 29, 2011 13

×