Your SlideShare is downloading. ×
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
HTML5 for Rich User Experience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 for Rich User Experience

4,188

Published on

Using HTML5 features for Rich User Experience

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,188
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
135
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 ?

×