Using HTML5 features 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/

15. WebGL
The beast..

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..

19. http://devfiles.myopera.com/articles/4582/html5-forms-example.html

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

24. Multimedia
Video Player
Audio Player

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 ?