#devTO Web ‘apps’ using HTML5 and JS

BH CONSULTING #devTO August 29, 2011

BH CONSULTING #devTO August 29, 2011 2

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 - Media

BH CONSULTING #devTO August 29, 2011 3

Mobile Browser vs App - Shopping

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 4

Interface

BH CONSULTING #devTO August 29, 2011 5

<input type=“number” ... /> <input type=“email” ... /> <input type=“tel” ... /> <input type=“range” min=“1” max=“100”

step=“10” ... /> <input type=“url” ... />

Interface Type

Downgrades to “text” automatically

<input placeholder=“Enter name here” ... />

Placeholder Text

No more javascript!

Meta and CSS Selectors

BH CONSULTING #devTO August 29, 2011 6

<meta name=“viewport” content=“width=device-width,initial-scale=1,user-scalable=no” />

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

BH CONSULTING #devTO August 29, 2011 7

window.onorientationchange = function() { // Orientation is in window.orientation }

Javascript

Geolocation

BH CONSULTING #devTO August 29, 2011 8

Source: http://diveintohtml5.org/geolocation.html

! 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; // let's show a map or do something interesting! }

BH CONSULTING #devTO August 29, 2011 9

Offline

! Key-value pairs ! Cache manifest ! Web SQL Database (Mobile)

Source: http://diveintohtml5.org/storage.html

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); });

HTML5 Video

BH CONSULTING #devTO August 29, 2011 10

<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-android

BH CONSULTING #devTO August 29, 2011 11

Pros

! No need to submit updates and wait to be published or user to update

! Using a language you already know

BH CONSULTING #devTO August 29, 2011 12

Cons

! Access to native hardware (camera/mic, background notifications, concurrency)

! Offline support ! Waiting for standards

BH CONSULTING #devTO August 29, 2011 13

Resources / Contact

1-877-774-4767 brian@bhconsulting.ca

@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