intro to web apps using html5 and javascript
DESCRIPTION
TRANSCRIPT
#devTOWeb ‘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
@brianhoggbhconsulting.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