html5 for rich user experience
DESCRIPTION
Using HTML5 features for Rich User ExperienceTRANSCRIPT
![Page 1: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/1.jpg)
phpXperts DevCon 2012
forRich User Experience
![Page 2: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/2.jpg)
![Page 3: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/3.jpg)
HTML 5 for Rich User Experience
FLASHBACK..
![Page 4: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/4.jpg)
WHAT IS ?
![Page 5: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/5.jpg)
A FLASH KILLER ?
![Page 6: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/6.jpg)
HTML+JS+
CSS
That’s all ?
![Page 7: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/7.jpg)
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
![Page 8: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/8.jpg)
Graphics..
WebGL
Canvas
![Page 9: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/9.jpg)
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…
![Page 10: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/10.jpg)
Things we can do with Canvas
Graph Example
http://www.humblesoftware.com/finance/index
![Page 11: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/11.jpg)
Things we can do with CanvasCreate 2D, 3D objects
http://alteredqualia.com/canvasmol/
![Page 12: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/12.jpg)
Draw any Irregular shape
Things we can do with Canvas
http://hakim.se/experiments/html5/sketch/#4350e239
![Page 13: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/13.jpg)
Image Processing
Things we can do with Canvas
http://people.opera.com/patrickl/experiments/canvas/image-edit/
![Page 14: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/14.jpg)
3D Modeling
Things we can do with Canvas
http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/
![Page 15: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/15.jpg)
WebGLThe beast..
![Page 16: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/16.jpg)
World flights visualization using WebGL
http://www.senchalabs.org/philogl/PhiloGL/examples/worldFlights2/
![Page 17: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/17.jpg)
http://www.chromeexperiments.com/
More WebGL Demos ?
![Page 18: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/18.jpg)
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..
![Page 19: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/19.jpg)
http://devfiles.myopera.com/articles/4582/html5-forms-example.html
![Page 20: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/20.jpg)
History API
window.history.state
window.history.pushState(data, title [, url])
window.history.replaceState(data, title [, url])
Best Example : Github project files browser
![Page 21: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/21.jpg)
History API (contd.)
Use Cases:
File Browser
E-commerce Product Viewer
Single Page Mobile Application
![Page 22: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/22.jpg)
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>
![Page 23: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/23.jpg)
Native Drag & Drop
![Page 24: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/24.jpg)
MultimediaVideo Player
Audio Player
![Page 25: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/25.jpg)
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);});
![Page 26: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/26.jpg)
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 ;) )
![Page 27: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/27.jpg)
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/
![Page 28: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/28.jpg)
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);}
![Page 29: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/29.jpg)
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
![Page 30: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/30.jpg)
Web Storage / Client Storage
Possible Use Cases
Shopping Cart
Notepad type Application (AutoSave Feature)
TODO Apps
Game Data
![Page 31: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/31.jpg)
* Moved to own spec
Web Sockets
AJAX Limitations
One Direction Communication
![Page 32: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/32.jpg)
Web Sockets
With Web Sockets
* Moved to own spec
Bidirectional Communication
![Page 33: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/33.jpg)
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
![Page 34: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/34.jpg)
Geo Location API* Moved to own spec
Identify User’s Location
>> Serve location based content
![Page 35: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/35.jpg)
In Short
HTML5 minimizes dependency (plugins, libraries)
Makes the user experience smoother
Allows to build more scalable apps
![Page 36: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/36.jpg)
Aah, snap!
did we forget the Mobile Thing ??
Good News!
Both iPhone and Android have Webkit based Browser who support HTML5
![Page 37: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/37.jpg)
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
![Page 38: HTML5 for Rich User Experience](https://reader033.vdocument.in/reader033/viewer/2022052823/5555caf9d8b42aaf158b49d3/html5/thumbnails/38.jpg)
QUESTIONS ?