By Vijay Shivakumar http://www.technicaltrainings.

com
 Requirements …
IDEs
Aptana Studio 3.0 from www.aptana.com
Visual Studio code from https://code.visualstudio.com
Atom or WebStorm
Browsers
Chrome, Firefox with firebug, Opera, IE (latest versions)
Web Servers (note : only if you are not using Aptana)
Tomcat or IIS or WAMP

By Vijay Shivakumar http://www.technicaltrainings.com

 About you…?
Designers
Developers
Content Writers
Business Analysts
Prior Knowledge on HTML or HTML5

By Vijay Shivakumar http://www.technicaltrainings.com

 Vijay Shivakumar
Designer | Developer | Trainer
Training on web and Adobe products from past 15 years

By Vijay Shivakumar http://www.technicaltrainings.com

 What I don not claim…
• To be associated with any of these technologies
• To teach you each and every thing about HTML 5
• That what ever I teach will never change
• That you wont have to learn anything on your own

By Vijay Shivakumar http://www.technicaltrainings.com

 Introduction to HTML 5
What is HTML 5 ?
New emerging web, mobile… standard
Why do we need it ?
Increasing user demands for enhanced experience.
Who is behind working for it
WHATWG | Web Hypertext Application Technology Working Group
Apple | Mozilla | Opera
Google, Adobe and many more contributing now.

By Vijay Shivakumar http://www.technicaltrainings.com

 What XHTML2.0 would be.

http://w3.org/TR/2005/WD-xhtml2-20050527/

By Vijay Shivakumar http://www.technicaltrainings.com

 What HTML5 is
http://whatwg.org
Web Hypertext Application Technology Working Group
===============================
Backward Compatible
Utility
Promote Usage of HTML5

By Vijay Shivakumar http://www.technicaltrainings.com

 General Changes
# Support for existing contents
existing html xhtml pages should get similar results as html5
deal with broken markups e.g. <li> item 1
no corresponding closing tag <li> item 2
badly nested elements e.g. <b> a <i> b </b> c </i>
# Graceful degrade
New elements to have fallback option e.g. <canvas>fallback</canvas>
# Use existing user agent specific attributes
# Supporting widespread practices e.g <br> for <br/>
# Evolution not revolution
it is better to evolve an existing design rather than throwing it away.

By Vijay Shivakumar http://www.technicaltrainings.com

 General Changes
# Utility
Address existing problems
Separation of concerns new meaningful tags
Consistent DOM
# Promote Usage of HTML5
Well defined behavior across browsers
Avoid complexity
Media independence
Accessibility

By Vijay Shivakumar http://www.technicaltrainings.com

 NEW APIs in HTML5
Giving meaning to structure, semantics and appropriateness of tags
Microdata offer structures for programs (machines).

Making apps start faster and be available without connection

Offline API, Local Storage, Indexed DB

Accessing the user device which includes. Geolocation API,

Orientation API (accelerometer), getUserMedia (access camera and mic)

Better communication via Web Sockets and Server pushing data

Cross domain communication

By Vijay Shivakumar http://www.technicaltrainings.com

 NEW APIs in HTML5
Plug-in Free Media

Captivating visuals with SVG, Canvas, WebGL, and CSS3 3D features

Performance Optimization with Web Workers and XMLHttpRequest2

By Vijay Shivakumar http://www.technicaltrainings.com

 APIs in HTML5
Header Drag and Drop
Semantics Local Storage
Media Tags Offline
Input Types / Form API CORS
2D Canvas / 3D canvas Web Sockets
Geolocation Web Workers
Form Validation Microdata
GetUserMedia API File API
History API

By Vijay Shivakumar http://www.technicaltrainings.com

 APIs in HTML5
Header Drag and Drop
Semantics Local Storage
Media Tags Offline
Input Types / Form API CORS
2D Canvas / 3D canvas Web Sockets
Geolocation Web Workers
Form Validation Microdata
GetUserMedia API File API
History API

By Vijay Shivakumar http://www.technicaltrainings.com

 APIs in HTML5
Header Drag and Drop
Semantics Local Storage
Media Tags Offline
Input Types / Form API CORS
Post Message
2D Canvas / 3D canvas Web Sockets
API
Geolocation Web Workers
Form Validation Microdata
GetUserMedia API File API
History API

By Vijay Shivakumar http://www.technicaltrainings.com

 Less Header code

By Vijay Shivakumar http://www.technicaltrainings.com

 Header Code in past
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
XHTML 1.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

By Vijay Shivakumar http://www.technicaltrainings.com

 Header Code in Future

<!DOCTYPE html>

By Vijay Shivakumar http://www.technicaltrainings.com

 Header Code in past
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<html lang=“en”> (optionally)

<meta http-equiv="Content-Type“
content="text/html; charset=utf-8" />
<meta charset=“utf-8”>

By Vijay Shivakumar http://www.technicaltrainings.com

 Header Code in past
<style type="text/css">
<style>

<script type="text/javascript">
<script>

<link type="text/css" rel="stylesheet" href="mystyle.css" />

<link rel="stylesheet" href="mystyle.css" />

By Vijay Shivakumar http://www.technicaltrainings.com

 New Semantics

By Vijay Shivakumar http://www.technicaltrainings.com

 DIV for division SPAN for
selection
div tags were used to group other tags together

By Vijay Shivakumar http://www.technicaltrainings.com

 Meaningful Tags
header figure
hgroup figcaption
nav time
main mark
section
article
aside
footer

By Vijay Shivakumar http://www.technicaltrainings.com

 New in HTML 5.1
main :
shall be used to mark the main content of a web
page, excluding footers, headers, navigation
blocks, and sidebars. There shall NOT be more
than one <main> element in a document

By Vijay Shivakumar http://www.technicaltrainings.com

 New Meaningful Tags
header :
will be on the top of page or content if required.
hgroup:
will be used to group h1 to h6 tags together.
nav:
will be used to group any navigation elements like anchors and
links.
section:
will be used to declare contents of the page that is complete and
full.
article:
will be used to contain the matter / text that is full in itself.

By Vijay Shivakumar http://www.technicaltrainings.com

 New Meaningful Tags
aside :
will be for contents that are either sides of the page that may not
be required to understand the section or the contents of the page
eg. References about the content.
footer :
will be in the bottom of the page or the content.
mark :
will be used to highlight the content
figure :
will be used to group related images together especially the one
that needs a caption.

By Vijay Shivakumar http://www.technicaltrainings.com

 HEADER

NAV

MAIN HEADER
HEADER
ASIDE
SECTION

ARTICLE

ARTICLE

ARTICLE

FOOTER
By Vijay Shivakumar http://www.technicaltrainings.com
 HTML5 Semantics not
supported in your browser ?
HTML5SHIV
https://github.com/aFarkas/html5shiv

HTML5 BOILERPLATE
http://html5boilerplate.com

Modernizr
http://modernizr.com

By Vijay Shivakumar http://www.technicaltrainings.com

 How to use HTML5SHIV
Shiv or Shim ?

<!--[if lt IE 9]>
<script src=“script/dist/html5shiv.js”><script>
<![endif]-->

By Vijay Shivakumar http://www.technicaltrainings.com

 Form Inputs API

By Vijay Shivakumar http://www.technicaltrainings.com

 New Input Types
<input type="search" /> <input type="email" />
<input type="color" /> <input type="tel" />
<input type="range" /> <input type="url" />
<input type="time" /> <progress value="0~1"/>
<input type="date" />
<meter value="0~1"/>
<input type="datetime" />
<output value=“” id=“”/>
<input type="week" />
<input type="month" />
<input type="number" />
<input type="datetime-local" />

By Vijay Shivakumar http://www.technicaltrainings.com

 Normal Keypad in IPhone

By Vijay Shivakumar http://www.technicaltrainings.com

 Modified Keypad in IPhone
<input type= "email" /> <input type= "url" />

By Vijay Shivakumar http://www.technicaltrainings.com

 Modified Keypad in IPhone
<input type=" number" /> <input type=" tel" />

By Vijay Shivakumar http://www.technicaltrainings.com

 New Attributes on Inputs
autofocus
placeholder
required
autocomplete
pattern

By Vijay Shivakumar http://www.technicaltrainings.com

 Validation API

By Vijay Shivakumar http://www.technicaltrainings.com

 Validation API

required
min
max attributes for validation
step
pattern

By Vijay Shivakumar http://www.technicaltrainings.com

 Media API

By Vijay Shivakumar http://www.technicaltrainings.com

 Before Media API
<object classid="clsid:d27cdb6e-ae6d-height="344"
codebase="http://download.flash/swflash.cab#versio
n=6,0,40,0">
<param name="allowFullScreen" value=“”/>
<param name="allowscriptaccess" value=“”/>
<param name="src" value=“”/>
<embed type="application/x-shockwave-src=“link"
allowfullscreen=“>
</embed>
</object>
By Vijay Shivakumar http://www.technicaltrainings.com
 Before Media API
Audio | Video
Flash was the most reliable way to play
video and audio on the web.
Roughly 99.97% of all desktops have Flash player.

iPhone/iPad does not.

They do support HTML5 <video>

By Vijay Shivakumar http://www.technicaltrainings.com

 HTML5 Media API
Audio | Video

H.264 : It is the most widely supported format

promoted by MPEG LA a patent pool company.
But licensing costs browser makers $5 million a year.

Support

Does Not Support

By Vijay Shivakumar http://www.technicaltrainings.com

 HTML5 Media API
Audio | Video

Ogg : Includes a number of independent open

source codec for both audio and video. is patent-free
and fully open.

Support

Does Not Support

By Vijay Shivakumar http://www.technicaltrainings.com
 The Goodnews

By Vijay Shivakumar http://www.technicaltrainings.com

 More Goodnews
VP8 : A video compression format by Google in 2010
launched webM under an irrevocable free patent
license
WebM is sponsored and supported by over 40 companies
including mozilla, opera, google, adobe etc...

By Vijay Shivakumar http://www.technicaltrainings.com

 HTML5 Media API
Audio | Video

webM

Support

Does Not Support

By Vijay Shivakumar http://www.technicaltrainings.com
 Video tag attributes (few)
autoplay controls
loop muted
played poster
preload src

By Vijay Shivakumar http://www.technicaltrainings.com

 methods on media API
video.canPlayType();
video.load();
video.pause();
video.play();

By Vijay Shivakumar http://www.technicaltrainings.com

By Vijay Shivakumar http://www.technicaltrainings.com
 Fallback Options
Flash Player | Infallible, works on all except apple devices
YouTube link | use if the content can be made public
http://videojs.com
http://projekktor.com
http://jwplayer.com
http://mediaelementjs.com
Miro video converter (offline and free)
By Vijay Shivakumar http://www.technicaltrainings.com
 Canvas API

By Vijay Shivakumar http://www.technicaltrainings.com

 Canvas | what is it for…?
• Data visualization
http://raphaeljs.com/ SVG
http://alteredqualia.com/canvasmol/
• Animated graphics
http://www.canvasdemos.com/
• Web applications
http://mugtug.com/sketchpad/ | http://mudcu.be/sketchpad/)
http://stars.chromeexperiments.com/

By Vijay Shivakumar http://www.technicaltrainings.com

 Canvas | what is it for…?
• Games
http://www.pirateslovedaisies.com/
http://www.google.com/pacman/
https://www.google.com/doodles

By Vijay Shivakumar http://www.technicaltrainings.com

 Platforms

Supported

Grrr….

By Vijay Shivakumar http://www.technicaltrainings.com

 Canvas Fundamentals
Dynamic bitmap with JavaScript
• Allow drawing into a bitmap area
• Think about it as a dynamic PNG
• Rectangles, lines, fills, arcs, bézier curve , etc.
• Use Text, Images, Videos and Shapes
Immediate mode : Fire and Forget
• It does not remember what you drew last.
• It’s up to you to maintain your objects tree
• This is a black box : content not visible into the DOM
• Beware of accessibility issues
• Simple API: 45 methods, 21 attributes
By Vijay Shivakumar http://www.technicaltrainings.com
 Few Canvas API properties
data lineJoin strokeStyle
fillStyle lineWidth textAlign
font miterLimit textBaseline
globalAlpha shadowBlur width
globalCompositeOperation shadowColor
height shadowOffsetX
lineCap shadowOffsetY

By Vijay Shivakumar http://www.technicaltrainings.com

 Few Canvas API methods
arc fill stroke
arcTo fillRect strokeRect
beginPath drawImage
bezierCurveTo lineTo
clearRect moveTo
clip quadraticCurve
closePath rect

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG API

By Vijay Shivakumar http://www.technicaltrainings.com

 What is SVG ?
• Scalable Vector Graphics
• 2d vector based image
• Independent of device and resolution
• Mathematical / Geometrical information
( dots plotted on x and y coordinates )

By Vijay Shivakumar http://www.technicaltrainings.com

 Raster v/s Vector

By Vijay Shivakumar http://www.technicaltrainings.com

 Raster v/s Vector

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG ATTRIBUTES
width
height
viewBox="0 0 256 256"
style =
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shapes | circle
<circle cx="100" cy="100" r="100" />
cx—the centre “x” coordinate.
cy—the centre “y” coordinate.
r—the radius of the circle (half its width)

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shapes | ellipse
<ellipse cx="100" cy="100" rx="100" ry="50" />
cx—the centre “x” coordinate.
cy—the centre “y” coordinate.
rx—the horizontal radius of the oval (half its width).
ry—the verical radius of the oval (half its height).

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | rectangle
<rect x="0" y="0" width="256" height="64" rx="5"
ry="5" />

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | polygon
<polygon points=‘’150,0 300,300 0,300’’ />
// triangle
<polygon points="60,20 100,40 100,80 60,100
20,80 20,40" />
// hexagon
points—defines the coordinates of each of the corners of
the shape—the format is: x,y x,y each x,y is seperated
with a space
By Vijay Shivakumar http://www.technicaltrainings.com
 SVG basic shape | line
<line x1="0" y1="0" x2="256" y2="256" />
x1—the line’s starting “x” coordinate
y1—the line’s starting “y” coordinate
x2—the line’s ending “x” coordinate
y2—the line’s ending “y” coordinate

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | polyline
<polyline points="0,256 50,150 100,100 150,50" />
points—defines the coordinates of each position of the
line—the format is: x,y x,y

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | path
Usually written with UI softwares like illustrator
<path d="M100,160 Q128,190 156,160" />
multiple anchors with handles which are quadratic curves

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | group
<g>
<circle cx="100" cy="100" r="100" />
<rect x="0" y="0" width="256" height="64" />
<polyline points="0,256 50,150 100,100 150,50" />
</g>
Use the <g> tag to group elements together.
Groups can have class or id attributes similar to css

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | symbols
<symbol id="icon-smiley" viewBox="0 0 256 256">
<circle cx="128" cy="128" r="120" />
<circle cx="100" cy="104" r="12" />
<circle cx="156" cy="104" r="12" />
<path d="M100,160 Q128,190 156,160" />
<rect x="97" y="66" width="6" height="32" rx="4" ry="4" />
<rect x="153" y="66" width="6" height="32" rx="4" ry="4" />
</symbol>
<use xlink:href="#icon-smiley" />

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | defs
<defs>
<linearGradient id="the-gradient">
<stop offset="0%" stop-color="orange" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<circle fill="url(#the-gradient)" cx="100" cy="100" r="100" />

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | fill & opacity
fill - used to set the color of a shape. Can use any colour
format: keywords, # hex, rgb(), rgba() or none
Can be put on any element including the <svg> element

opacity - is a value between 0 and 1

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | gradients
Adds a line around the outside of a shape or along a path.
stroke="orange“
stroke-width="10“
stroke-opacity=".5“
stroke-linecap="round“
stroke-linejoin="bevel“

By Vijay Shivakumar http://www.technicaltrainings.com

 SVG basic shape | strokes
<defs>
<linearGradient id="the-gradient">
<stop offset="0%" stop-color="orange" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<circle fill="url(#the-gradient)" cx="100" cy="100" r="100" />

By Vijay Shivakumar http://www.technicaltrainings.com

 Geolocation

By Vijay Shivakumar http://www.technicaltrainings.com

 Geolocation API
Works on
Firefox IE Chrome Safari Opera iPhone Android Blackberry
3.5 9.0 5 5 10.63 3.2 2.1 6.0

Sources for Geolocation

IP address / ISP – not very accurate
Wi Fi spots – will give you block and street level accuracy
GPS – will deliver accurate location of the user

By Vijay Shivakumar http://www.technicaltrainings.com

 Using Geolocation API
navigator.geolocation : will return true is supported on device

getCurrentPosition()
attempts to get the current location of the user asynchronously
watchPosition()
starts monitoring the location of a user at an interval.
clearWatch()
stops monitoring the location of a user

By Vijay Shivakumar http://www.technicaltrainings.com

 Methods of Geolocation
getCurrentPosition( successFunction, failureFunction,
{enableHighAccuracy: true, timeout:5000, maximumAge:6000} );
watchPosition( same as above );

enableHighAccuracy: Is a Boolean setting that allows you

to use accurate GPS detection (when available).
maximumAge: specifie show recently (in milliseconds)
location detection needs to have occurred.
timeout : specifies when(inmilliseconds)an attempt to get
a user location needs to timeout.

By Vijay Shivakumar http://www.technicaltrainings.com

 The Position
position Object

timestamp: returns the time when the location was detected.

coords.latitude: returns the latitude in degrees.
coords.longitude: returns the longitude in degrees.
coords.accuracy: returns how accurate the location is, in meters.
coords.altitude: returns the altitude , if available.
coords.altitudeAccuracy: gives altitude accuracy, in meters, if available.
coords.speed: returns speed (based on previous detected position),
in meters/second.
coords.heading: returns the angle, in degrees clockwise from true
north.

By Vijay Shivakumar http://www.technicaltrainings.com

 Error Object
1 : PERMISSION_DENIED
the user disallowed sharing his or her location
2 : POSITION_UNAVAILABLE
the position can’t be found, the network is down, or GPS is
unavailable.
3 : TIMEOUT
timeout occurred ,as it took too long to get the user’s
location.
By Vijay Shivakumar http://www.technicaltrainings.com
 Geolocation Fallback
geo.js
http://code.google.com/p/geo-location-javascript/

By Vijay Shivakumar http://www.technicaltrainings.com

 Offline Browsing API

By Vijay Shivakumar http://www.technicaltrainings.com

 Offline Browsing API
applicationCache
<html manifest=“myapp.manifest">
Files with extension .manifest and .appache are
common
Can also be a an absolute location of a file on the
same domain (crossdomain files wont work)
Set the mime type to support old browsers

By Vijay Shivakumar http://www.technicaltrainings.com

 Offline Browsing API
CACHE MANIFEST

Has 3 sections
CACHE:
NETWORK:
FALLBACK:

These sections can be listed in any order and each section can appear
more than once in a single manifest.

By Vijay Shivakumar http://www.technicaltrainings.com

 Offline Browsing API

CACHE MANIFEST
The only required line in the file

By Vijay Shivakumar http://www.technicaltrainings.com

 Offline Browsing API

CACHE:
The default section declares all the files that will
be stored for offline usage.
Each file needs to be mentioned in a separate line
Once cached the files will always be fetched from
browser cache not from the server.

By Vijay Shivakumar http://www.technicaltrainings.com

 Offline Browsing API

NETWORK:
Shows all the files that need network access to
work.
Can take wildcards to represent multiple files and
directories. ( * )
otherwise the network isn't used, even if the user
is online
By Vijay Shivakumar http://www.technicaltrainings.com
 Offline Browsing API

FALLBACK:
A list of files that can be used in place of requested
files
You can use wildcards ( / ) to create a fallback for
any file that you asked if now cached

By Vijay Shivakumar http://www.technicaltrainings.com

 Offline Browsing API

#Comment / version 001

Needs to be updated with there is any change in
the file

By Vijay Shivakumar http://www.technicaltrainings.com

 Storage API

By Vijay Shivakumar http://www.technicaltrainings.com

 Types of Storage API
Cookies
Window Storage
Local Storage
Session Storage
Browser Databases ( Indexed DB / Web SQL )

By Vijay Shivakumar http://www.technicaltrainings.com

 Support

Firefox IE Chrome Safari Opera iPhone Android Blackberry

3.0 8.0 3.0 4 10.5 3.0 2.0 6.0

By Vijay Shivakumar http://www.technicaltrainings.com

 Properties and Methods
length Number of stored strings
getItem() read the value of the key (name)
setItem() add / modify the value of the key (name)
removeItem() remove the name and value
clear() removes all name values of your domain
key() will return the stored name in that index

By Vijay Shivakumar http://www.technicaltrainings.com

 Storage Event
addEventListener(“storage “, callBack)
window.onstorage = function(){}
• event properties
– key : string the named key that was CUD
– oldValue : previous value (now overwritten), or null
– newValue : new value, or null if an item was removed
– url : string the page which called a method that
triggered this change

By Vijay Shivakumar http://www.technicaltrainings.com

 Storage Error
QUOTA_EXCEEDED_ERR
when the app exceeds the allowed storage

By Vijay Shivakumar http://www.technicaltrainings.com

 File API

By Vijay Shivakumar http://www.technicaltrainings.com

 File API
• Until html5 we had to use server side programs to
handle files
• HTML5 File API provides ways to access and read local
files
• Latest updates http://www.w3.org/TR/FileAPI/
• Use <input type=“file” /> or drag n drop

By Vijay Shivakumar http://www.technicaltrainings.com

 File API | Features
Has 3 major sections
file reader
file writer (not currently implemented)
file system (not currently implemented)

By Vijay Shivakumar http://www.technicaltrainings.com

 File API | File Reader
• Select files to upload on the client side
• Restrict kinds of file from being uploaded
• Generate thumbnails for uploads
• Check the modified date to match on server
• Parse and get detailed file info
• Modify and send to server

By Vijay Shivakumar http://www.technicaltrainings.com

 History API

By Vijay Shivakumar http://www.technicaltrainings.com

 History API | Why ?
The url on the browser modifies when making an
ajax call
No reference to go back in the async call
History API allows us to make changes to url text
Can not work with local files needs a web server

By Vijay Shivakumar http://www.technicaltrainings.com

 History API | How ?
Use the pushState() to create a new history
takes 3 properties
state : can be any JSON data
– It is passed back to the popstate event hander

title : can be any string

– currently unused by major browsers

url : can be any string

– that gets displayed in address bar (this wont create links)

By Vijay Shivakumar http://www.technicaltrainings.com

 Communication API

By Vijay Shivakumar http://www.technicaltrainings.com

 What is it ?
Firefox IE Chrome Safari Opera iPhone Android Blackberry
3.0 8.0 2 4 9.6 3.0 2.0 6.0

Cross Document Messaging

Applications from different domains can communicate safely
Communication between IFrames, and Windows
Communication is enabled via PostMessage API

By Vijay Shivakumar http://www.technicaltrainings.com

By Vijay Shivakumar http://www.technicaltrainings.com
By Vijay Shivakumar http://www.technicaltrainings.com
By Vijay Shivakumar http://www.technicaltrainings.com
By Vijay Shivakumar http://www.technicaltrainings.com
By Vijay Shivakumar http://www.technicaltrainings.com
By Vijay Shivakumar http://www.technicaltrainings.com
By Vijay Shivakumar http://www.technicaltrainings.com
 Socket API

By Vijay Shivakumar http://www.technicaltrainings.com

 Polling (Ajax)

Every request has a response even If it is empty.

By Vijay Shivakumar http://www.technicaltrainings.com

 Comet / Server Push (Ajax 2)

Request is held active by server until

there is an update and then responds
For every response the client will send a new request
By Vijay Shivakumar http://www.technicaltrainings.com
 Disadvantages
Large sequence of http requests, more than one a
second
Huge amount of server load as for each request
Overhead of HTTP headers
User authentication

By Vijay Shivakumar http://www.technicaltrainings.com

 Existing scenarios
HTTP a request and response protocol.
Designed to request text files
Poor for real time data on server
– (Chat, Dashboard, Games etc..)
So we adopted
– Recursive Client Request (Polling)
– Server Push

By Vijay Shivakumar http://www.technicaltrainings.com

 Socket

Request once (open a socket) , Response for every

server updates , Until you choose to close socket
By Vijay Shivakumar http://www.technicaltrainings.com
 Socket Methods
var ws = new WebSocket(“url”)
ws.send(“message”);
ws.close(); terminate the socket connection
-------------------------------------------------------
ws.onopen = openFun;
ws.onclose = closeFun;
ws.onmessage = messageFun;
ws.onerror = errorFun;

By Vijay Shivakumar http://www.technicaltrainings.com

 Web Workers API

By Vijay Shivakumar http://www.technicaltrainings.com

 Web Workers
methods and events
• postMessage()
• terminate()
• -------------------------
• onmessage
• onerror

By Vijay Shivakumar http://www.technicaltrainings.com

 Web Workers can’t access
• The navigator object
• The location object (read-only)
• XMLHttpRequest
• setTimeout()/clearTimeout() and
setInterval()/clearInterval()
• The Application Cache
• Importing external scripts using the importScripts()
method to create subworkers

By Vijay Shivakumar http://www.technicaltrainings.com

 Web Workers
• The navigator object
• The location object (read-only)
• XMLHttpRequest
• setTimeout()/clearTimeout() and
setInterval()/clearInterval()
• The Application Cache
• Importing external scripts using the importScripts()
method to create subworkers

By Vijay Shivakumar http://www.technicaltrainings.com

 Drag N Drop API

By Vijay Shivakumar http://www.technicaltrainings.com

 [email protected]

By Vijay Shivakumar http://www.technicaltrainings.com

 Offline API

By Vijay Shivakumar http://www.technicaltrainings.com

 Why do we need it ?
HTML, CSS, and JS stay fairly consistent
Native browser caching is unreliable
Caching resources creates faster apps!
Decent mobile support

By Vijay Shivakumar http://www.technicaltrainings.com

 New APIs
Battery Status API Navigation Timing API
Vibrate API Network Information API
Tab Focus API / Page Document Edit API
Visibility API File Reader / Writer File API
FullScreen API History API
getUserMedia API Contacts API
High Resolution Time API
User Timing API

By Vijay Shivakumar http://www.technicaltrainings.com

 [email protected]

By Vijay Shivakumar http://www.technicaltrainings.com