HTML5 for Rich User Experience

forRich User Experience phpXperts DevCon 2012

FLASHBACK..

WHAT IS ?

A FLASH KILLER ?

HTML + JS + CSSThat’s all ?

Progress Meter Web Storage Geo location Drag And Drop Semantics SPEECH INPUT Canvas 3D NotificationsFile / Hardware Access API Canvas New Events Form Controls Web Socket History API Graphics

Graphics.. Canvas WebGL

Things we can do with CanvasMake Stunning Graph / ChartsCreate 2D, 3D objectsDraw any Irregular shapeImage Processing3D modelingAnd many more…

Things we can do with CanvasGraph Example http://www.humblesoftware.com/finance/index

Things we can do with Canvas Create 2D, 3D objects http://alteredqualia.com/canvasmol/

Things we can do with Canvas Draw any Irregular shape http://hakim.se/experiments/html5/sketch/#4350e239

Things we can do with Canvas Image Processing http://people.opera.com/patrickl/experiments/canvas/image-edit/

Things we can do with Canvas 3D Modeling http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/

WebGL The beast..

World flights visualization using WebGLhttp://www.senchalabs.org/philogl/PhiloGL/examples/worldFlights2/

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

New Form FeaturesEmail FieldValidation Accomplishing all these willPlaceholder require lot of plugins (e.g jquery.validate plugin,Required Attribute overlabel etc)Number InputDate PickerRange Input & many more..

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

History APIwindow.history.statewindow.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

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

Native Drag & Drop

MultimediaVideo PlayerAudio 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 APIDrag indocument.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 ;) )

File / Hardware Access APIDrag 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 APIwindow.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 specEarlier .. 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 StoragePossible Use CasesShopping CartNotepad type Application (AutoSave Feature)TODO AppsGame Data

Web Sockets * Moved to own specAJAX LimitationsOne Direction Communication

Web Sockets * Moved to own specWith Web SocketsBidirectional Communication

Web Sockets * Moved to own specBest Use CasesChat / Live Help ApplicationLive Streaming API (e.g twitter updates)Multiplayer GamesGame DataCollaborative Apps (e.g Google Spreadsheet)Stock ticker

Geo Location API * Moved to own specIdentify User’s Location>> Serve location based content

In ShortHTML5 minimizes dependency (plugins, libraries)Makes the user experience smootherAllows 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 etchttp://html5-demos.appspot.com/Demos, presentations ..http:// modernizr.comDetect feature availability of HTML5 in browsershttp://dev.opera.com/articles/tags/html5Lot of articles related to HTML5 featureshttp://html5doctor.com/Articles about HTML5 elements and their usagehttp://caniuse.com/HTML5/CSS/SVG Compatibility in Browsers charthttp://html5readiness.com/HTML5/CSS3 Readiness for browsers in a rainbow chart

QUESTIONS ?

HTML5 for Rich User Experience

by M. Mahbubur Rahman

Accessibility

Categories

Upload Details

Usage Rights

Statistics

HTML5 for Rich User Experience Presentation Transcript