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

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

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

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
BH CONSULTING #devTO August 29, 2011 3

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

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. 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. Rotation
Javascript
window.onorientationchange = function() {
// Orientation is in window.orientation
}
BH CONSULTING #devTO August 29, 2011 7

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;
// let's show a map or do something interesting!
}
Source:
http://diveintohtml5.org/geolocation.html
BH CONSULTING #devTO August 29, 2011 8

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.html
BH CONSULTING #devTO August 29, 2011 9

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-android
BH CONSULTING #devTO August 29, 2011 10

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 11

12. Cons
! Access to native hardware (camera/mic,
background notifications, concurrency)
! Offline support
! Waiting for standards
BH CONSULTING #devTO August 29, 2011 12

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.com
BH CONSULTING #devTO August 29, 2011 13