HTML5 for Rich User Experience

4,358
-1

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,358
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
141
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.

×