HTML5 for Rich User Experience

for
Rich User Experience

phpXperts DevCon 2012

HTML
+
JS
+
CSS

That’s all ?

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

Graphics..

Canvas
WebGL

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…

Graph Example

http://www.humblesoftware.com/finance/index

Create 2D, 3D objects

http://alteredqualia.com/canvasmol/

Draw any Irregular shape

http://hakim.se/experiments/html5/sketch/#4350e239


Image
Processing

http://people.opera.com/patrickl/experiments/canvas/image-edit/

3D Modeling

http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/

World flights visualization using WebGL

http://www.senchalabs.org/philogl/PhiloGL/examples/worldFlights2/

More WebGL Demos ?
http://www.chromeexperiments.com/

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

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

History API

window.history.state
window.history.pushState(data, title [, url])
window.history.replaceState(data, title [, url])

Best Example : Github project files browser

History API (contd.)
Use Cases:

File Browser

E-commerce Product Viewer
Single Page Mobile Application

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>

Multimedia
Video Player

Audio Player

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);
});

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 ;) )

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/

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);
}

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

Web Storage / Client Storage
Possible Use Cases

Shopping Cart

Notepad type Application (AutoSave Feature)

TODO Apps

Game Data

Web Sockets
* Moved to own spec

AJAX Limitations

One Direction Communication

Web Sockets
* Moved to own spec

With Web Sockets

Bidirectional Communication

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

Geo Location API
* Moved to own spec

Identify User’s Location

>> Serve location based content

In Short

HTML5 minimizes dependency (plugins, libraries)

Makes the user experience smoother

Allows to build more scalable apps

Aah, snap!

did we forget the Mobile Thing ??

Good News!

Both iPhone and Android have Webkit based Browser
who support HTML5

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

HTML5 for Rich User Experience

More Related Content

What's hot (20)

Similar to HTML5 for Rich User Experience (20)

Recently uploaded (20)

HTML5 for Rich User Experience