Mobile Web Development with HTML5Roy Clarkson and Josh LongSpringSource, a division of VMware@royclarkson & @starbuxman© 2...
Agenda•   Introduction•   Define the Problem•   Mobile Browsers•   Hardware Concerns•   Simulators and Emulators•   HTML5• ...
Introduction    The mobile web refers to the use of web sites or web based    applications by non-traditional devices or a...
What problem are we trying to solve?• Mobile devices have become ubiquitous in our every day  lives.• Many people are spen...
What is the solution?• Most HTML5 features are available on all modern smart  phones and tablet devices.5
Why does it matter?• More people are consuming web sites through their mobile  devices than through traditional desktop br...
Mobile Browsers7
Support across browsers•   Compatibility tables for support of HTML5, CSS3, SVG and more in desktop    and mobile browsers...
Support across browsers•   Compatibility tables for support of HTML5, CSS3, SVG and more in desktop    and mobile browsers...
Hardware Concerns•    Screen resolution•    Network connectivity•    Hardware acceleration•    Cache size•    Processor sp...
Simulators and Emulators11
Simulators and Emulators12
Simulators and Emulators13
Simulators and Emulators14
HTML5     Semantics     Offline Storage     Device Access     Connectivity     Multimedia     3D, Graphics & Effects     Pe...
Semantics• Rich set of tags• Microdata• Microformats16
Rich set of Tags       <!DOCTYPE html>       <html>       <body>       	      <header>HEADER</header>       	      <sectio...
Microformats18
Offline Storage•    Application Cache•    Local Storage•    Web SQL•    Online/Offline Events19
Application Cache20
Application Cache• Specify a cache     <html manifest="myCustomCache.appcache">      ...     </html>• List out cacheable a...
window.sessionStorage and window.localStorage • setItem(string name, string value)   add or update a value in the store • ...
Online and Offline Eventsdocument.body.addEventListener("offline", function () {            ...       }, false);  document.b...
Online and Offline Events (jQuery)$(window).bind("offline", function() { ... }); 24
Web SQL     var db = window.openDatabase(        "Spring Test", "1.0",        "HTML5 Database API example", 200000);     d...
Multimedia• Audio• Video26
Audio Tags      <audio controls preload="auto" autobuffer>       <source src="le_long_de_la_route.mp3" />       <source sr...
Video Tags      <video width="320" height="240" controls="controls">       <source src="movie.mp4" type="video/mp4" />    ...
Device Access•    Geolocation*•    Camera•    Microphone•    Contacts29
Geolocation30
Geolocation31
Geolocation navigator.geolocation.getCurrentPosition(  function(position){     var longitude = position.coords.longitude, ...
(PhoneGap) Camera API function onSuccess(imageURI) {     var image = document.getElementById(myImage);     image.src = ima...
(PhoneGap) Microphone API     // capture callback     var captureSuccess = function(mediaFiles) {        var i, path, len;...
(PhoneGap) Find Contact API function onSuccess(contacts) {    alert(Found  + contacts.length +  contacts.); }; function on...
Connectivity• Web Sockets *• Server-Sent Events (don’t bother)36
Web Sockets     if ("WebSocket" in window) {       var ws = new WebSocket("ws://localhost:9998/echo");          ws.onopen ...
3D, Graphics, & Effects•    Canvas•    CSS3 3D features•    WebGL *•    SVG *38
Canvas39
Performance & Integration• XMLHttpRequest 240
Styling•    CSS3•    2D/3D Transformations•    Transitions•    WebFonts41
CSS3 Media Queries     @media only screen and (max-device-width: 480px) {         ...     	     div#header h1 {     	     ...
CSS3 Transformations43
CSS3 Transformations     #id_of_element {     	 -webkit-transition: all 1s ease-in-out;     	 -moz-transition: all 1s ease...
JavaScript Frameworks•    jQuery Mobile•    Sencha Touch•    Jo•    jQTouch•    xui•    Lawnchair•    EmbedJS45
jQuery Mobile• Touch-optimized web framework for smart phones and  tablets• Built on jQuery• Supports iOS, Android, Blackb...
Sencha Touch•    HTML5 Mobile Web App Framework•    Supports iPhone, Android, and Blackberry•    Version 1.1.1 released Oc...
Jo• Designed for apps, not web sites.• Supports iOS, Android, webOS, Blackberry, Chrome OS• Version 0.4.148
Additional Resources• http://www.w3.org/Mobile• http://www.html5rocks.com• http://www.mobilexweb.com/emulators49
Q&A50   © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
Upcoming SlideShare
Loading in …5
×

Mobile Web Development with HTML5

819 views

Published on

Presented at SpringOne 2GX 2011

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
819
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Web Development with HTML5

  1. 1. Mobile Web Development with HTML5Roy Clarkson and Josh LongSpringSource, a division of VMware@royclarkson & @starbuxman© 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
  2. 2. Agenda• Introduction• Define the Problem• Mobile Browsers• Hardware Concerns• Simulators and Emulators• HTML5• JavaScript Frameworks2
  3. 3. Introduction The mobile web refers to the use of web sites or web based applications by non-traditional devices or appliances that may not have the same capabilities as a modern desktop browser.3
  4. 4. What problem are we trying to solve?• Mobile devices have become ubiquitous in our every day lives.• Many people are spending more time on mobile devices than on traditional computers.• How do we present our web sites in a manner that is accessible to as many of these different devices as possible?4
  5. 5. What is the solution?• Most HTML5 features are available on all modern smart phones and tablet devices.5
  6. 6. Why does it matter?• More people are consuming web sites through their mobile devices than through traditional desktop browsers6
  7. 7. Mobile Browsers7
  8. 8. Support across browsers• Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. -caniuse.com8
  9. 9. Support across browsers• Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. -caniuse.com9
  10. 10. Hardware Concerns• Screen resolution• Network connectivity• Hardware acceleration• Cache size• Processor speed• Memory10
  11. 11. Simulators and Emulators11
  12. 12. Simulators and Emulators12
  13. 13. Simulators and Emulators13
  14. 14. Simulators and Emulators14
  15. 15. HTML5 Semantics Offline Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3 Styling15
  16. 16. Semantics• Rich set of tags• Microdata• Microformats16
  17. 17. Rich set of Tags <!DOCTYPE html> <html> <body> <header>HEADER</header> <section> <hgroup> <h1>title</h1> </hgroup> <article>some text</article> </section> <footer>FOOTER</footer> </body> </html>17
  18. 18. Microformats18
  19. 19. Offline Storage• Application Cache• Local Storage• Web SQL• Online/Offline Events19
  20. 20. Application Cache20
  21. 21. Application Cache• Specify a cache <html manifest="myCustomCache.appcache"> ... </html>• List out cacheable assets CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js21
  22. 22. window.sessionStorage and window.localStorage • setItem(string name, string value) add or update a value in the store • getItem(string name) get a named value from the store • removeItem(string name) remove a named value from the store • length number of values stored • key(long index) name of the key at the index • clear() clear the store22
  23. 23. Online and Offline Eventsdocument.body.addEventListener("offline", function () {   ...       }, false);  document.body.addEventListener("online", function () {   ...       }, false);  23
  24. 24. Online and Offline Events (jQuery)$(window).bind("offline", function() { ... }); 24
  25. 25. Web SQL var db = window.openDatabase( "Spring Test", "1.0", "HTML5 Database API example", 200000); db.transaction(function (transaction) { var sql = ... ;   transaction.executeSql( sql , [], nullDataHandler, errorHandler); }) ;25
  26. 26. Multimedia• Audio• Video26
  27. 27. Audio Tags <audio controls preload="auto" autobuffer> <source src="le_long_de_la_route.mp3" /> <source src="le_long_de_la_route.ogg" /> </audio>Browser Ogg Vorbis MP3 WAVAndroid X XOpera Mobile XFirefox Mobile X XiOS Safari X X 27
  28. 28. Video Tags <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> Your browser does not support the video tag. </video>Browser MP4/H.264 3GP/MPEG4iOS XAndroid X XBlackberry X XOlder devices X 28
  29. 29. Device Access• Geolocation*• Camera• Microphone• Contacts29
  30. 30. Geolocation30
  31. 31. Geolocation31
  32. 32. Geolocation navigator.geolocation.getCurrentPosition( function(position){ var longitude = position.coords.longitude, latitude = position.coords.latitude ; ... }, errorHandler);32
  33. 33. (PhoneGap) Camera API function onSuccess(imageURI) {     var image = document.getElementById(myImage);     image.src = imageURI; } function onFail(message) {     alert(Failed because: + message); } navigator.camera.getPicture(onSuccess, onFail, { quality: 50,     destinationType: Camera.DestinationType.FILE_URI });33
  34. 34. (PhoneGap) Microphone API // capture callback var captureSuccess = function(mediaFiles) { var i, path, len; for (i = 0, len = mediaFiles.length; i < len; i += 1) { path = mediaFiles[i].fullPath; // do something interesting with the file } }; // capture error callback var captureError = function(error) { navigator.notification.alert(Error code: + error.code, null, Capture Error); }; // start audio capture navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2});34
  35. 35. (PhoneGap) Find Contact API function onSuccess(contacts) { alert(Found + contacts.length + contacts.); }; function onError(contactError) { alert(onError!); }; // find all contacts with Bob in any name field var options = new ContactFindOptions(); options.filter="Bob"; var fields = ["displayName", "name"]; navigator.contacts.find(fields, onSuccess, onError, options);35
  36. 36. Connectivity• Web Sockets *• Server-Sent Events (don’t bother)36
  37. 37. Web Sockets if ("WebSocket" in window) { var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { ws.send("Message to send"); }; ws.onmessage = function (evt) { var receivedMessage = evt.data; }; ws.onclose = function(){ alert("Connection is closed..."); }; }37
  38. 38. 3D, Graphics, & Effects• Canvas• CSS3 3D features• WebGL *• SVG *38
  39. 39. Canvas39
  40. 40. Performance & Integration• XMLHttpRequest 240
  41. 41. Styling• CSS3• 2D/3D Transformations• Transitions• WebFonts41
  42. 42. CSS3 Media Queries @media only screen and (max-device-width: 480px) { ... div#header h1 { font-size: 140%; } ... }42
  43. 43. CSS3 Transformations43
  44. 44. CSS3 Transformations #id_of_element { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }44
  45. 45. JavaScript Frameworks• jQuery Mobile• Sencha Touch• Jo• jQTouch• xui• Lawnchair• EmbedJS45
  46. 46. jQuery Mobile• Touch-optimized web framework for smart phones and tablets• Built on jQuery• Supports iOS, Android, Blackberry, Windows Phone, webOS, symbian, bada, and MeeGo• 1.0 RC1 released September 29• jquerymobile.com46
  47. 47. Sencha Touch• HTML5 Mobile Web App Framework• Supports iPhone, Android, and Blackberry• Version 1.1.1 released October 12• 2.0.0 Preview Release 1 released on October 11• sencha.com/products/touch47
  48. 48. Jo• Designed for apps, not web sites.• Supports iOS, Android, webOS, Blackberry, Chrome OS• Version 0.4.148
  49. 49. Additional Resources• http://www.w3.org/Mobile• http://www.html5rocks.com• http://www.mobilexweb.com/emulators49
  50. 50. Q&A50 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.

×