The document discusses using HTML5 and JavaScript to create web applications for mobile devices. It covers various HTML5 features like form input types, placeholder text, viewport settings, detecting orientation changes, geolocation, offline storage, playing HTML5 video, and the pros and cons of developing web apps versus native mobile apps. It also provides some resources for learning more about HTML5 and testing HTML5 browser support.

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