Intro to Web Apps using HTML5 and Javascript

#devTO Web ‘apps’ using HTML5 and JS BH CONSULTING #devTO August 29, 2011

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

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

Web ‘App’ BH CONSULTING #devTO August 29, 2011

Interface ,[object Object],[object Object],[object Object],[object Object],[object Object],BH CONSULTING #devTO August 29, 2011 Interface Type Downgrades to “text” automatically <input placeholder=“Enter name here” ... /> Placeholder Text No more javascript!

Meta and CSS Selectors ,[object Object],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

Rotation ,[object Object],[object Object],[object Object],BH CONSULTING #devTO August 29, 2011 Javascript

Geolocation BH CONSULTING #devTO August 29, 2011 Source: http://diveintohtml5.org/geolocation.html ,[object Object],// 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! }

Offline ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],BH CONSULTING #devTO August 29, 2011 ,[object Object],[object Object],[object Object],Source: http://diveintohtml5.org/storage.html

HTML5 Video ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],BH CONSULTING #devTO August 29, 2011 Source: http://stackoverflow.com/questions/1711078/html5-video-element-on-android

Pros BH CONSULTING #devTO August 29, 2011 ,[object Object],[object Object]

Cons BH CONSULTING #devTO August 29, 2011 ,[object Object],[object Object],[object Object]

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

Intro to Web Apps using HTML5 and Javascript

Recommended

Recommended

More Related Content

Similar to Intro to Web Apps using HTML5 and Javascript

Similar to Intro to Web Apps using HTML5 and Javascript (20)

More from Brian Hogg

More from Brian Hogg (12)

Recently uploaded

Recently uploaded (20)

Intro to Web Apps using HTML5 and Javascript

Editor's Notes