Intro to Web Apps using HTML5 and Javascript
Download as PPT, PDF0 likes380 views
The document discusses using HTML5 and JavaScript to build "web apps" for mobile devices. It provides examples of new HTML5 features like input types, geolocation, offline storage, and video. It also lists pros and cons of the web app approach compared to native mobile apps. Resources for learning more about HTML5 are included.
![Offline 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); }); BH CONSULTING #devTO August 29, 2011 Key-value pairs Cache manifest Web SQL Database (Mobile) Source: http://diveintohtml5.org/storage.html](https://image.slidesharecdn.com/devto-html5andjavascriptintrotowebappsv02-110822153600-phpapp02/85/Intro-to-Web-Apps-using-HTML5-and-Javascript-9-320.jpg)
![Resources / Contact BH CONSULTING #devTO August 29, 2011 1-877-774-4767 [email_address] @brianhogg bhconsulting.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](https://image.slidesharecdn.com/devto-html5andjavascriptintrotowebappsv02-110822153600-phpapp02/85/Intro-to-Web-Apps-using-HTML5-and-Javascript-13-320.jpg)
Intro to Web Apps using HTML5 and Javascript
- 1. #devTO Web ‘apps’ using HTML5 and JS BH CONSULTING #devTO August 29, 2011
- 2. Mobile Browser vs App - Media BH CONSULTING #devTO August 29, 2011 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
- 3. Mobile Browser vs App - Shopping BH CONSULTING #devTO August 29, 2011 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
- 4. Web ‘App’ BH CONSULTING #devTO August 29, 2011
- 5. Interface <input type=“number” ... /> <input type=“email” ... /> <input type=“tel” ... /> <input type=“range” min=“1” max=“100” step=“10” ... /> <input type=“url” ... /> BH CONSULTING #devTO August 29, 2011 Interface Type Downgrades to “text” automatically <input placeholder=“Enter name here” ... /> Placeholder Text No more javascript!
- 6. Meta and CSS Selectors <meta name=“viewport” content=“width=device-width,initial-scale=1,user-scalable=no” /> BH CONSULTING #devTO August 29, 2011 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
- 7. Rotation window.onorientationchange = function() { // Orientation is in window.orientation } BH CONSULTING #devTO August 29, 2011 Javascript
- 8. Geolocation BH CONSULTING #devTO August 29, 2011 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! }
- 9. Offline 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); }); BH CONSULTING #devTO August 29, 2011 Key-value pairs Cache manifest Web SQL Database (Mobile) Source: http://diveintohtml5.org/storage.html
- 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> BH CONSULTING #devTO August 29, 2011 Source: http://stackoverflow.com/questions/1711078/html5-video-element-on-android
- 11. Pros BH CONSULTING #devTO August 29, 2011 No need to submit updates and wait to be published or user to update Using a language you already know
- 12. Cons BH CONSULTING #devTO August 29, 2011 Access to native hardware (camera/mic, background notifications, concurrency) Offline support Waiting for standards
- 13. Resources / Contact BH CONSULTING #devTO August 29, 2011 1-877-774-4767 [email_address] @brianhogg bhconsulting.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
Editor's Notes
- #10: HEADERS – Split into a couple pages?