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/HandsOnThe Road Ahead

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

SemanticsGraphicsMultimediaDevice AccessOfflineConnectivityPerformance/IntegrationCSS3

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

<header> <nav> <section> <article> <footer> <aside>

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

<input type=“email” placeholder=“Enter email address” required autofocus/>

<input type=“phone”/><input type=“search” placeholder=“Type

your search here”/><input type=“url” /><input type=“date” />

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.

navigator.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:

Simple 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.comMark Pilgrim : http://diveintohtml5.orgRemy Sharp : http://html5demos.com HTML5 Tech Spec : http://developers.whatwg.org

Modernizr : http://www.modernizr.com/Caniuse : http://www.caniuse.comHTML5Test : http://www.html5test.com https://github.com/Modernizr/

Modernizr/wiki/HTML5-Cross-browser-Polyfills

Q & A

romin.k.irani@

gmail.com

iRomin