html5 for rich user experience

phpXperts DevCon 2012

forRich User Experience

HTML 5 for Rich User Experience

FLASHBACK..

WHAT IS ?

A FLASH KILLER ?

HTML+JS+

CSS

That’s all ?

Geo location

Web SocketCanvas

Canvas 3D

Drag And Drop

Form Controls

SPEECH INPUT

Web Storage

New Events

History API

Progress Meter

Semantics

File / Hardware Access API

Graphics

Notifications

Graphics..

WebGL

Canvas

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…

Things we can do with Canvas

Graph Example

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

Things we can do with CanvasCreate 2D, 3D objects

http://alteredqualia.com/canvasmol/

Draw any Irregular shape

Things we can do with Canvas

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

Image Processing

Things we can do with Canvas

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

3D Modeling

Things we can do with Canvas

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

WebGLThe beast..

World flights visualization using WebGL

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

http://www.chromeexperiments.com/

More WebGL Demos ?

New Form FeaturesEmail Field

Validation

Placeholder

Required Attribute

Number Input

Date Picker

Range Input

Accomplishing all these will require lot of plugins (e.g

jquery.validate plugin, overlabel etc)

& 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

<div id=“header”></div>

<div id=“footer”></div>

<div class=“article”></div>

NEW

<header> … </header>

<footer> … </footer>

<article> … </article>

<hggroup>,<nav>,<aside><figure>,<time>,<figcaption>

Native Drag & Drop

MultimediaVideo Player

Audio Player

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

File / Hardware Access API

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

Drag in

Example : Gmail Attachment Handler (see for yourself ;) )

File / Hardware Access API

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

Drag out ??

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

• Cookies• Flash Storage• Internet Explorer UserData• Google Gears

Earlier .. Now• Web Storage APIs: localStorage / sessionStorage• Web SQL Database • IndexedDB• Application Cache• File* APIs

Web Storage / Client Storage

Possible Use Cases

Shopping Cart

Notepad type Application (AutoSave Feature)

TODO Apps

Game Data

* Moved to own spec

Web Sockets

AJAX Limitations

One Direction Communication

Web Sockets

With Web Sockets

* Moved to own spec

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 Resourceshttp://www.html5rocks.com/Update about all the HTML features, slides etc

http://html5-demos.appspot.com/Demos, presentations ..

http:// modernizr.comDetect feature availability of HTML5 in browsers

http://dev.opera.com/articles/tags/html5Lot of articles related to HTML5 features

http://html5doctor.com/Articles about HTML5 elements and their usage

http://html5readiness.com/HTML5/CSS3 Readiness for browsers in a rainbow chart

http://caniuse.com/HTML5/CSS/SVG Compatibility in Browsers chart

QUESTIONS ?