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