html5 for rich user experience
DESCRIPTION
Using HTML5 features for Rich User ExperienceTRANSCRIPT
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 ?