forRich User Experience              phpXperts DevCon 2012
FLASHBACK..
WHAT IS   ?
A FLASH KILLER ?
HTML             +            JS             +           CSSThat’s all ?
Progress Meter                                                               Web Storage Geo location                     ...
Graphics..      Canvas      WebGL
Things we can do with CanvasMake Stunning Graph / ChartsCreate 2D, 3D objectsDraw any Irregular shapeImage Processing3D mo...
Things we can do with CanvasGraph Example                http://www.humblesoftware.com/finance/index
Things we can do with Canvas  Create 2D, 3D objects                          http://alteredqualia.com/canvasmol/
Things we can do with Canvas   Draw any Irregular shape              http://hakim.se/experiments/html5/sketch/#4350e239
Things we can do with Canvas        Image    Processing          http://people.opera.com/patrickl/experiments/canvas/image...
Things we can do with Canvas   3D Modeling        http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/
WebGL The beast..
World flights visualization using WebGLhttp://www.senchalabs.org/philogl/PhiloGL/examples/worldFlights2/
More WebGL Demos ?http://www.chromeexperiments.com/
New Form FeaturesEmail FieldValidation                     Accomplishing all these willPlaceholder           require lot o...
http://devfiles.myopera.com/articles/4582/html5-forms-example.html
History APIwindow.history.statewindow.history.pushState(data, title [, url])window.history.replaceState(data, title [, url...
History API (contd.)Use Cases:    File Browser    E-commerce Product Viewer    Single Page Mobile Application
SemanticsOLD SCHOOL              NEW<div id=“header”>       <header> … </header></div>                        <footer> … <...
Native Drag & Drop
MultimediaVideo PlayerAudio Player
File / Hardware Access APICamera & microphone access (no plugins)<video autoplay controls></video><input type="button" val...
File / Hardware Access APIDrag indocument.querySelector(#dropzone).  window.addEventListener(drop, function(e) {    var re...
File / Hardware Access APIDrag out ??var files = document.querySelectorAll(.dragout);for (var i = 0, file; file = files[i]...
Notification APIwindow.notifications = window.notifications ||    window.webkitNotifications || window.mozNotifications;fu...
Web Storage / Client Storage                                                   * Moved to own specEarlier ..              ...
Web Storage / Client StoragePossible Use CasesShopping CartNotepad type Application (AutoSave Feature)TODO AppsGame Data
Web Sockets             * Moved to own specAJAX LimitationsOne Direction Communication
Web Sockets             * Moved to own specWith Web SocketsBidirectional Communication
Web Sockets                * Moved to own specBest Use CasesChat / Live Help ApplicationLive Streaming API (e.g twitter up...
Geo Location API                   * Moved to own specIdentify User’s Location>> Serve location based content
In ShortHTML5 minimizes dependency (plugins, libraries)Makes the user experience smootherAllows to build more scalable apps
Aah, snap!          did we forget the Mobile Thing ??               Good News!Both iPhone and Android have Webkit based Br...
Some HTML5 Resourceshttp://www.html5rocks.com/Update about all the HTML features, slides etchttp://html5-demos.appspot.com...
QUESTIONS ?
HTML5 for Rich User Experience
Upcoming SlideShare
Loading in...5
×

HTML5 for Rich User Experience

4,248

Published on

Using HTML5 features for Rich User Experience

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • Thanks......Mahabur Rahaman vi.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,248
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
140
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

HTML5 for Rich User Experience

  1. 1. forRich User Experience phpXperts DevCon 2012
  2. 2. FLASHBACK..
  3. 3. WHAT IS ?
  4. 4. A FLASH KILLER ?
  5. 5. HTML + JS + CSSThat’s all ?
  6. 6. Progress Meter Web Storage Geo location Drag And Drop Semantics SPEECH INPUT Canvas 3D NotificationsFile / Hardware Access API Canvas New Events Form Controls Web Socket History API Graphics
  7. 7. Graphics.. Canvas WebGL
  8. 8. Things we can do with CanvasMake Stunning Graph / ChartsCreate 2D, 3D objectsDraw any Irregular shapeImage Processing3D modelingAnd many more…
  9. 9. Things we can do with CanvasGraph Example http://www.humblesoftware.com/finance/index
  10. 10. Things we can do with Canvas Create 2D, 3D objects http://alteredqualia.com/canvasmol/
  11. 11. Things we can do with Canvas Draw any Irregular shape http://hakim.se/experiments/html5/sketch/#4350e239
  12. 12. Things we can do with Canvas Image Processing http://people.opera.com/patrickl/experiments/canvas/image-edit/
  13. 13. Things we can do with Canvas 3D Modeling http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/
  14. 14. WebGL The beast..
  15. 15. World flights visualization using WebGLhttp://www.senchalabs.org/philogl/PhiloGL/examples/worldFlights2/
  16. 16. More WebGL Demos ?http://www.chromeexperiments.com/
  17. 17. New Form FeaturesEmail FieldValidation Accomplishing all these willPlaceholder require lot of plugins (e.g jquery.validate plugin,Required Attribute overlabel etc)Number InputDate PickerRange Input & many more..
  18. 18. http://devfiles.myopera.com/articles/4582/html5-forms-example.html
  19. 19. History APIwindow.history.statewindow.history.pushState(data, title [, url])window.history.replaceState(data, title [, url])Best Example : Github project files browser
  20. 20. History API (contd.)Use Cases: File Browser E-commerce Product Viewer Single Page Mobile Application
  21. 21. SemanticsOLD 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>
  22. 22. Native Drag & Drop
  23. 23. MultimediaVideo PlayerAudio Player
  24. 24. File / Hardware Access APICamera & 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);});
  25. 25. File / Hardware Access APIDrag indocument.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 ;) )
  26. 26. File / Hardware Access APIDrag 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/
  27. 27. Notification APIwindow.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);}
  28. 28. Web Storage / Client Storage * Moved to own specEarlier .. Now• Cookies • Web Storage APIs: localStorage / sessionStorage• Flash Storage • Web SQL Database• Internet Explorer UserData • IndexedDB• Google Gears • Application Cache • File* APIs
  29. 29. Web Storage / Client StoragePossible Use CasesShopping CartNotepad type Application (AutoSave Feature)TODO AppsGame Data
  30. 30. Web Sockets * Moved to own specAJAX LimitationsOne Direction Communication
  31. 31. Web Sockets * Moved to own specWith Web SocketsBidirectional Communication
  32. 32. Web Sockets * Moved to own specBest Use CasesChat / Live Help ApplicationLive Streaming API (e.g twitter updates)Multiplayer GamesGame DataCollaborative Apps (e.g Google Spreadsheet)Stock ticker
  33. 33. Geo Location API * Moved to own specIdentify User’s Location>> Serve location based content
  34. 34. In ShortHTML5 minimizes dependency (plugins, libraries)Makes the user experience smootherAllows to build more scalable apps
  35. 35. Aah, snap! did we forget the Mobile Thing ?? Good News!Both iPhone and Android have Webkit based Browser who support HTML5
  36. 36. Some HTML5 Resourceshttp://www.html5rocks.com/Update about all the HTML features, slides etchttp://html5-demos.appspot.com/Demos, presentations ..http:// modernizr.comDetect feature availability of HTML5 in browsershttp://dev.opera.com/articles/tags/html5Lot of articles related to HTML5 featureshttp://html5doctor.com/Articles about HTML5 elements and their usagehttp://caniuse.com/HTML5/CSS/SVG Compatibility in Browsers charthttp://html5readiness.com/HTML5/CSS3 Readiness for browsers in a rainbow chart
  37. 37. QUESTIONS ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×