Download as PDF, PPTX
![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](https://image.slidesharecdn.com/mobilewebdevelopmentwithhtml5-130202221552-phpapp01/75/Mobile-Web-Development-with-HTML5-25-2048.jpg)
![(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](https://image.slidesharecdn.com/mobilewebdevelopmentwithhtml5-130202221552-phpapp01/75/Mobile-Web-Development-with-HTML5-34-2048.jpg)
![(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](https://image.slidesharecdn.com/mobilewebdevelopmentwithhtml5-130202221552-phpapp01/75/Mobile-Web-Development-with-HTML5-35-2048.jpg)
![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](https://crownmelresort.com/image.slidesharecdn.com/mobilewebdevelopmentwithhtml5-130202221552-phpapp01/75/Mobile-Web-Development-with-HTML5-25-2048.jpg)
![(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](https://crownmelresort.com/image.slidesharecdn.com/mobilewebdevelopmentwithhtml5-130202221552-phpapp01/75/Mobile-Web-Development-with-HTML5-34-2048.jpg)
![(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](https://crownmelresort.com/image.slidesharecdn.com/mobilewebdevelopmentwithhtml5-130202221552-phpapp01/75/Mobile-Web-Development-with-HTML5-35-2048.jpg)
Uploaded byRoy Clarkson
Mobile Web Development with HTML5
Mobile Web Development with HTML5 provides an overview of developing mobile web applications using HTML5. It discusses using HTML5 features like semantics, offline storage, device access and multimedia that are supported across mobile browsers. It also covers concerns for mobile development like screen resolution and memory constraints. JavaScript frameworks like jQuery Mobile and Sencha Touch are presented as solutions for touch-optimized interfaces. The document recommends HTML5 features and modern web standards for building accessible mobile web sites.
More Related Content
Similar to Mobile Web Development with HTML5
Mobile Web Development with HTML5
- 1. Mobile Web Developmentwith HTML5 Roy Clarkson and Josh Long SpringSource, a division of VMware @royclarkson & @starbuxman © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.
- 2. Agenda • Introduction • Define the Problem • Mobile Browsers • Hardware Concerns • Simulators and Emulators • HTML5 • JavaScript Frameworks 2
- 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. What problem arewe 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. What is thesolution? • Most HTML5 features are available on all modern smart phones and tablet devices. 5
- 6. Why does itmatter? • More people are consuming web sites through their mobile devices than through traditional desktop browsers 6
- 7.
- 8. Support across browsers • Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. -caniuse.com 8
- 9. Support across browsers • Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. -caniuse.com 9
- 10. Hardware Concerns • Screen resolution • Network connectivity • Hardware acceleration • Cache size • Processor speed • Memory 10
- 11.
- 12.
- 13.
- 14.
- 15. HTML5 Semantics Offline Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3 Styling 15
- 16. Semantics • Rich setof tags • Microdata • Microformats 16
- 17. Rich set ofTags <!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.
- 19. Offline Storage • Application Cache • Local Storage • Web SQL • Online/Offline Events 19
- 20.
- 21. Application Cache • Specifya cache <html manifest="myCustomCache.appcache"> ... </html> • List out cacheable assets CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js 21
- 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 store 22
- 23. Online and OfflineEvents document.body.addEventListener("offline", function () { ... }, false); document.body.addEventListener("online", function () { ... }, false); 23
- 24. Online and OfflineEvents (jQuery) $(window).bind("offline", function() { ... }); 24
- 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.
- 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 WAV Android X X Opera Mobile X Firefox Mobile X X iOS Safari X X 27
- 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/MPEG4 iOS X Android X X Blackberry X X Older devices X 28
- 29. Device Access • Geolocation* • Camera • Microphone • Contacts 29
- 30.
- 31.
- 32. Geolocation navigator.geolocation.getCurrentPosition( function(position){ var longitude = position.coords.longitude, latitude = position.coords.latitude ; ... }, errorHandler); 32
- 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. (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. (PhoneGap) Find ContactAPI 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. Connectivity • Web Sockets* • Server-Sent Events (don’t bother) 36
- 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. 3D, Graphics, &Effects • Canvas • CSS3 3D features • WebGL * • SVG * 38
- 39.
- 40. Performance & Integration •XMLHttpRequest 2 40
- 41. Styling • CSS3 • 2D/3D Transformations • Transitions • WebFonts 41
- 42. CSS3 Media Queries @media only screen and (max-device-width: 480px) { ... div#header h1 { font-size: 140%; } ... } 42
- 43.
- 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. JavaScript Frameworks • jQuery Mobile • Sencha Touch • Jo • jQTouch • xui • Lawnchair • EmbedJS 45
- 46. jQuery Mobile • Touch-optimizedweb 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.com 46
- 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/touch 47
- 48. Jo • Designed forapps, not web sites. • Supports iOS, Android, webOS, Blackberry, Chrome OS • Version 0.4.1 48
- 49. Additional Resources • http://www.w3.org/Mobile •http://www.html5rocks.com • http://www.mobilexweb.com/emulators 49
- 50. Q&A 50 © 2011 SpringOne 2GX 2011. All rights reserved. Do not distribute without permission.