Brian Hogg - Web Apps using HTML5 and JS

#devTO
Web ‘apps’ using HTML5 and JS

BH CONSULTING #devTO August 29, 2011

Mobile Browser vs App - Media

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

BH CONSULTING #devTO August 29, 2011 2

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’


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!


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/


Rotation

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


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

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


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.html


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


Pros

! No need to submit updates and wait to be
published or user to update
! Using a language you already know


Cons

! Access to native hardware (camera/mic,
background notifications, concurrency)
! Offline support
! Waiting for standards


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.com

Brian Hogg - Web Apps using HTML5 and JS

More Related Content

Viewers also liked

Similar to Brian Hogg - Web Apps using HTML5 and JS

Recently uploaded

Brian Hogg - Web Apps using HTML5 and JS