HTML5 for Rich User Experience

  • 4,054 views
Uploaded on

Using HTML5 features for Rich User Experience

Using HTML5 features for Rich User Experience

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Thanks......Mahabur Rahaman vi.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,054
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
130
Comments
1
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. forRich User Experience phpXperts DevCon 2012
  • 2. FLASHBACK..
  • 3. WHAT IS ?
  • 4. A FLASH KILLER ?
  • 5. HTML + JS + CSSThat’s all ?
  • 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. Graphics.. Canvas WebGL
  • 8. Things we can do with CanvasMake Stunning Graph / ChartsCreate 2D, 3D objectsDraw any Irregular shapeImage Processing3D modelingAnd many more…
  • 9. Things we can do with CanvasGraph Example http://www.humblesoftware.com/finance/index
  • 10. Things we can do with Canvas Create 2D, 3D objects http://alteredqualia.com/canvasmol/
  • 11. Things we can do with Canvas Draw any Irregular shape http://hakim.se/experiments/html5/sketch/#4350e239
  • 12. Things we can do with Canvas Image Processing http://people.opera.com/patrickl/experiments/canvas/image-edit/
  • 13. Things we can do with Canvas 3D Modeling http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/
  • 14. WebGL The beast..
  • 15. World flights visualization using WebGLhttp://www.senchalabs.org/philogl/PhiloGL/examples/worldFlights2/
  • 16. More WebGL Demos ?http://www.chromeexperiments.com/
  • 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. http://devfiles.myopera.com/articles/4582/html5-forms-example.html
  • 19. History APIwindow.history.statewindow.history.pushState(data, title [, url])window.history.replaceState(data, title [, url])Best Example : Github project files browser
  • 20. History API (contd.)Use Cases: File Browser E-commerce Product Viewer Single Page Mobile Application
  • 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. Native Drag & Drop
  • 23. MultimediaVideo PlayerAudio Player
  • 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. 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. 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. 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. 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. Web Storage / Client StoragePossible Use CasesShopping CartNotepad type Application (AutoSave Feature)TODO AppsGame Data
  • 30. Web Sockets * Moved to own specAJAX LimitationsOne Direction Communication
  • 31. Web Sockets * Moved to own specWith Web SocketsBidirectional Communication
  • 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. Geo Location API * Moved to own specIdentify User’s Location>> Serve location based content
  • 34. In ShortHTML5 minimizes dependency (plugins, libraries)Makes the user experience smootherAllows to build more scalable apps
  • 35. Aah, snap! did we forget the Mobile Thing ?? Good News!Both iPhone and Android have Webkit based Browser who support HTML5
  • 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. QUESTIONS ?