Brian Hogg - Web Apps using HTML5 and JS
1 like664 views
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.
![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](https://image.slidesharecdn.com/devto-html5andjavascriptintrotowebappsv02-120329225838-phpapp02/85/Brian-Hogg-Web-Apps-using-HTML5-and-JS-9-320.jpg)
Brian Hogg - Web Apps using HTML5 and JS
- 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