HTML5 for Rich User Experience
Download as PPTX, PDF7 likes2,925 views
Canvas and WebGL allow for rich graphics and animation on the web through APIs for 2D and 3D drawing. Forms have been enhanced with new input types like email, number and date pickers. Features like drag and drop, geolocation, notifications and the history API enable more interactive experiences. Browser capabilities have been extended through APIs for multimedia, storage, web sockets and accessing hardware. HTML5 aims to provide these features to enhance user experience without additional plugins.
![History API
window.history.state
window.history.pushState(data, title [, url])
window.history.replaceState(data, title [, url])
Best Example : Github project files browser](https://image.slidesharecdn.com/html5-rich-ux-120226083856-phpapp01/85/HTML5-for-Rich-User-Experience-20-320.jpg)
![File / Hardware Access API
Drag in
document.querySelector('#dropzone').
window.addEventListener('drop', function(e) {
var reader = new FileReader();
reader.onload = function(e) {
document.querySelector('img').src = e.target.result;
};
reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
Example : Gmail Attachment Handler (see for yourself ;) )](https://image.slidesharecdn.com/html5-rich-ux-120226083856-phpapp01/85/HTML5-for-Rich-User-Experience-26-320.jpg)
![File / Hardware Access API
Drag out ??
var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
file.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('DownloadURL',
this.dataset.downloadurl);
}, false);
}
http://www.thecssninja.com/demo/gmail_dragout/](https://image.slidesharecdn.com/html5-rich-ux-120226083856-phpapp01/85/HTML5-for-Rich-User-Experience-27-320.jpg)
HTML5 for Rich User Experience
- 1. for Rich User Experience phpXperts DevCon 2012
- 3. FLASHBACK..
- 4. WHAT IS ?
- 5. A FLASH KILLER ?
- 6. HTML + JS + CSS That’s all ?
- 7. Progress Meter Web Storage Geo location Drag And Drop Semantics SPEECH INPUT Canvas 3D Notifications File / Hardware Access API Canvas New Events Form Controls Web Socket History API Graphics
- 8. Graphics.. Canvas WebGL
- 9. Things we can do with Canvas Make Stunning Graph / Charts Create 2D, 3D objects Draw any Irregular shape Image Processing 3D modeling And many more…
- 10. Things we can do with Canvas Graph Example http://www.humblesoftware.com/finance/index
- 11. Things we can do with Canvas Create 2D, 3D objects http://alteredqualia.com/canvasmol/
- 12. Things we can do with Canvas Draw any Irregular shape http://hakim.se/experiments/html5/sketch/#4350e239
- 13. Things we can do with Canvas Image Processing http://people.opera.com/patrickl/experiments/canvas/image-edit/
- 14. Things we can do with Canvas 3D Modeling http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/
- 16. World flights visualization using WebGL http://www.senchalabs.org/philogl/PhiloGL/examples/worldFlights2/
- 17. More WebGL Demos ? http://www.chromeexperiments.com/
- 18. New Form Features Email Field Validation Accomplishing all these will Placeholder require lot of plugins (e.g jquery.validate plugin, Required Attribute overlabel etc) Number Input Date Picker Range Input & many more..
- 20. History API window.history.state window.history.pushState(data, title [, url]) window.history.replaceState(data, title [, url]) Best Example : Github project files browser
- 21. History API (contd.) Use Cases: File Browser E-commerce Product Viewer Single Page Mobile Application
- 22. Semantics OLD SCHOOL NEW <div id=“header”> <header> … </header> </div> <footer> … </footer> <article> … </article> <div id=“footer”> </div> <hggroup>,<nav>,<aside> <figure>,<time>, <figcaption> <div class=“article”> </div>
- 23. Native Drag & Drop
- 25. File / Hardware Access API Camera & microphone access (no plugins) <video autoplay controls></video> <input type="button" value="?" onclick="record(this)" id="start"> <input type="button" value="?" onclick="stop(this)" id="stop" disabled> var localMediaStream, recorder; var record = function(button) { recorder = mediaStream.recorder(); }; var stop = function(button) { mediaStream.stop(); recorder.getRecordedData(function(blob) { // Upload blob using XHR2. }); }; window.navigator.getUserMedia('video', function(stream) { document.querySelector('video').src = window.URL.createObjectURL(stream); localMediaStream = stream; }, function(e) { console.log(e); });
- 26. File / Hardware Access API Drag in document.querySelector('#dropzone'). window.addEventListener('drop', function(e) { var reader = new FileReader(); reader.onload = function(e) { document.querySelector('img').src = e.target.result; }; reader.readAsDataURL(e.dataTransfer.files[0]); }, false); Example : Gmail Attachment Handler (see for yourself ;) )
- 27. File / Hardware Access API Drag out ?? var files = document.querySelectorAll('.dragout'); for (var i = 0, file; file = files[i]; ++i) { file.addEventListener('dragstart', function(e) { e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl); }, false); } http://www.thecssninja.com/demo/gmail_dragout/
- 28. Notification API window.notifications = window.notifications || window.webkitNotifications || window.mozNotifications; function showNotifications(pic, title, text) { if (notifications.checkPermission() == 0) { return; } var note = notifications.createNotification(pic, title, text); note.show(); setTimeout(function(note) { // close note after a timeout note.cancel(); }, 6000, notification); }
- 29. Web Storage / Client Storage * Moved to own spec Earlier .. Now • Cookies • Web Storage APIs: localStorage / sessionStorage • Flash Storage • Web SQL Database • Internet Explorer UserData • IndexedDB • Google Gears • Application Cache • File* APIs
- 30. Web Storage / Client Storage Possible Use Cases Shopping Cart Notepad type Application (AutoSave Feature) TODO Apps Game Data
- 31. Web Sockets * Moved to own spec AJAX Limitations One Direction Communication
- 32. Web Sockets * Moved to own spec With Web Sockets Bidirectional Communication
- 33. Web Sockets * Moved to own spec Best Use Cases Chat / Live Help Application Live Streaming API (e.g twitter updates) Multiplayer Games Game Data Collaborative Apps (e.g Google Spreadsheet) Stock ticker
- 34. Geo Location API * Moved to own spec Identify User’s Location >> Serve location based content
- 35. In Short HTML5 minimizes dependency (plugins, libraries) Makes the user experience smoother Allows to build more scalable apps
- 36. Aah, snap! did we forget the Mobile Thing ?? Good News! Both iPhone and Android have Webkit based Browser who support HTML5
- 37. Some HTML5 Resources http://www.html5rocks.com/ Update about all the HTML features, slides etc http://html5-demos.appspot.com/ Demos, presentations .. http:// modernizr.com Detect feature availability of HTML5 in browsers http://dev.opera.com/articles/tags/html5 Lot of articles related to HTML5 features http://html5doctor.com/ Articles about HTML5 elements and their usage http://caniuse.com/ HTML5/CSS/SVG Compatibility in Browsers chart http://html5readiness.com/ HTML5/CSS3 Readiness for browsers in a rainbow chart
- 38. QUESTIONS ?