33

Thadomal IEEE-HTML5-Workshop

Embed Size (px)

DESCRIPTION

Workshop on HTML5 conducted at Thadomal Shahani Engineering College, Mumbai.

Citation preview

Page 1: Thadomal IEEE-HTML5-Workshop
Page 2: 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)

Page 3: Thadomal IEEE-HTML5-Workshop

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

Page 4: Thadomal IEEE-HTML5-Workshop

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

Page 5: Thadomal IEEE-HTML5-Workshop

SemanticsGraphicsMultimediaDevice AccessOfflineConnectivityPerformance/IntegrationCSS3

Page 6: Thadomal IEEE-HTML5-Workshop

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

Page 7: Thadomal IEEE-HTML5-Workshop

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

Page 8: Thadomal IEEE-HTML5-Workshop

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.

Page 9: Thadomal IEEE-HTML5-Workshop

Input Types email phone url date, datetime, month, week, time, datetime-

local) color search number and range

Page 10: Thadomal IEEE-HTML5-Workshop

<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” />

Page 11: Thadomal IEEE-HTML5-Workshop

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

Page 12: Thadomal IEEE-HTML5-Workshop

Canvas API SVG WebGL CSS3 3D

Page 13: Thadomal IEEE-HTML5-Workshop

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.

Page 14: Thadomal IEEE-HTML5-Workshop

Audio and video are first class citizens in the HTML5 web

A plug-in free world

Page 15: Thadomal IEEE-HTML5-Workshop

Simple tags : <video>, <audio> Even Simpler usage:

<video src=“demo.mp4”></video><audio src=“song.mp3”></audio>

Control via APIs Play Pause Stop

Page 16: Thadomal IEEE-HTML5-Workshop

Different browsers support different containers and Audio/Video formats.

Containers : H264 and Ogg Codecs:

Audio : AAC, MP3, Vorbis Video: H264, VP8, Thedora

Page 17: Thadomal IEEE-HTML5-Workshop

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>

Page 18: Thadomal IEEE-HTML5-Workshop

Currently - Geolocation API Coming soon

◦ Audio/Video input access to microphones and cameras

◦ Local data such as contacts & events, and even tilt orientation.

Page 19: Thadomal IEEE-HTML5-Workshop

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.

Page 20: Thadomal IEEE-HTML5-Workshop

navigator.geolocation.getCurrentPosition (showCurrentLocation, errorHandler,{enableHighAccuracy: true});

function showCurrentLocation(position){ //position.coords.latitude

//position.coords.longitude;}

Page 21: Thadomal IEEE-HTML5-Workshop

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.

Page 22: Thadomal IEEE-HTML5-Workshop

Allows local storage of application data on the device.

5MB per domain.

Key component to Offline usage.

Types of Storage options:

Page 23: Thadomal IEEE-HTML5-Workshop

Simple API for storing values in easily retrievable JavaScript objects which persist across page loads

window.localStorage

getItem(key)

setItem(key,value)

Page 24: Thadomal IEEE-HTML5-Workshop

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();

};

Page 25: Thadomal IEEE-HTML5-Workshop

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.

Page 26: Thadomal IEEE-HTML5-Workshop

3 Steps to implementing AppCache

Define manifest

CACHE + NETWORK + FALLBACK

Reference manifest

Specify right manifest MIME Type in Server

Demo

Page 27: Thadomal IEEE-HTML5-Workshop

Performance & Integration Web Workers , XMLHttpRequest 2

CONNECTIVITY : WEB SOCKETS CSS3 IndexedDB

Page 28: Thadomal IEEE-HTML5-Workshop

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

Page 29: Thadomal IEEE-HTML5-Workshop

Drag and Drop Content Editable Audio / Video CSS 3

Page 30: Thadomal IEEE-HTML5-Workshop

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

Page 31: Thadomal IEEE-HTML5-Workshop
Page 32: Thadomal IEEE-HTML5-Workshop

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

Page 33: Thadomal IEEE-HTML5-Workshop

Q & A

romin.k.irani@

gmail.com

iRomin