Thadomal IEEE-HTML5-Workshop

Name : Romin Irani
Official Title : Principal Architect @ Xoriant
Unofficial Title : Jack Of All Trades
Vital Stats :
Mobile Applications
Cloud
Web APIs
Writer & Reviewer for various publications from Wrox, O’Reilly & Addison Wesley
Freelance writer covering Web 2.0 APIs at ProgrammableWeb ( http://programmableweb.com )

HTML5 – A Brief History
HTML5 Browser Support
HTML5 Features/Demos/HandsOn
The Road Ahead

WHAT : Next generation HTML
WHO : WHATG, W3C, IETF
WHEN : 2004, 2008, July 2014
All vendors support it ! (Is that true?)

Semantics
Graphics
Multimedia
Device Access
Offline
Connectivity
Performance/Integration
CSS3

Keep it simple (Example doctype)
Structural meaning
Richer Set of Tags
Eliminated Several Tags too

Aims to make development and usage of forms easier.
13 New Types introduced for user input.
Additional attributes like : placeholder , required , autofocus.
Coding for validations is made easier.
Support varies across browsers but is compatible.

Input Types
email
phone
url
date, datetime, month, week, time, datetime-local)
color
search
number and range

Screenshots : Courtesy – Mark Pilgrim, http://diveintohtml5.org

Canvas API
SVG
WebGL
CSS3 3D

2D Drawing API
Functions : line, arcs, rectangle, fills
Allows styling via CSS
Allows control via Javascript
Can be used for:
Charts, Animation, Images and other complex rendering.

Audio and video are first class citizens in the HTML5 web
A plug-in free world

Simple tags : <video>, <audio>
Even Simpler usage:
<video src=“demo.mp4”></video>
<audio src=“song.mp3”></audio>
Control via APIs
Play
Pause
Stop

Different browsers support different containers and Audio/Video formats.
Containers : H264 and Ogg
Codecs:
Audio : AAC, MP3, Vorbis
Video: H264, VP8, Thedora

Need to provide more than 1 format.
Browser will play the one that it supports.
This situation is not likely to change.
<video controls> <source src="mov1.ogg" type="video/ogg" /> <source src="mov2.mp4" type="video/mp4" /> </video>

Currently - Geolocation API
Coming soon
Audio/Video input access to microphones and cameras
Local data such as contacts & events, and even tilt orientation.

Determine where the device is. Find it right in the browser.
Useful for providing location based services.
User should be allowed to opt in.
API allows for both : one time location and continuous location.

n avigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler, {enableHighAccuracy: true});
function showCurrentLocation(position){
//position.coords.latitude //position.coords.longitude;
}

Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.

Allows local storage of application data on the device.
5MB per domain.
Key component to Offline usage.
Types of Storage options:

S imple API for storing values in easily retrievable JavaScript objects which persist across page loads
window.localStorage
getItem(key)
setItem(key,value)

interface Storage { readonly attribute unsigned long length ; getter DOMString key (in unsigned long index); getter any getItem (in DOMString key); setter creator void setItem (in DOMString key, in any data); deleter void removeItem (in DOMString key); void clear (); };

Network is not available all the time.
The application must be available even if the server is done.
Application Cache to the rescue.
Stores the specified resources (HTML,CSS,JS) on the client.
Combine Application Cache with Offline Storage to provide availability.

3 Steps to implementing AppCache
Define manifest
CACHE + NETWORK + FALLBACK
Reference manifest
Specify right manifest MIME Type in Server
Demo

Performance & Integration
Web Workers , XMLHttpRequest 2
CONNECTIVITY : WEB SOCKETS
CSS3
IndexedDB

Indic Mobile Conference application
Mobile Web application
Works well with Webkit browsers
Lets go !

Drag and Drop
Content Editable
Audio / Video
CSS 3

Differing browser support & behaviour
Use sites like HTML5Test.com, CanIUse.com to understand Browser support for HTML5
Fallback behaviour is important
Great time to get started today!
Be prepared for changes
All vendors are supporting it

W3C : http://dev.w3.org/html5/spec/Overview.html
HTML5 Rocks: http://www.html5rocks.com
Mark Pilgrim : http://diveintohtml5.org
Remy Sharp : http://html5demos.com
HTML5 Tech Spec : http://developers.whatwg.org
Modernizr : http://www.modernizr.com/
Caniuse : http://www.caniuse.com
HTML5Test : http://www.html5test.com
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Q & A
romin.k.irani @ gmail.com iRomin

Thadomal IEEE-HTML5-Workshop

by Romin Irani on Mar 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 564

Statistics

Thadomal IEEE-HTML5-Workshop — Presentation Transcript

http://www.rominirani.com	563
http://localhost	1