Html5 advanced part2

HTML5 Advanced - Part 2

Suresh BallaPrincipal ConsultantNeudesic

Web Workers• What are Web Workers• Restrictions• Browser Support and Demos

• Web Sockets• Communication Systems, Real-time data before Web Sockets,

Advantages, and Demos• Microdata

Agenda

What Are Web Workers?

Background threads in the browser

Dedicated

Shared

Single Threaded Modelfunction init(){    takes 5 ms to be executed    mouseClickEvent occurs    takes 5 ms    setInterval(timerTask,"10");    takes 5 ms} function handleMouseClick(){      takes 8 ms to be executed} function timerTask(){      takes 2 ms to be executed}

Inti() method executes for 15 seconds

handleMouseClick for 8 sec

tim

erT

ask

for

2

sec

tim

erT

ask

for

2

sec

tim

erT

ask

for

2

sec

10 ms

20 ms

30 ms

40 ms

RestrictionsNo Access to• DOM• Window (few read-only exceptions)• Host page

Your favorite JavaScript library may not work with workers

Access To• Navigator• appName• appVersion• platform• userAgent

• Timers• XmlHttpRequest

Supported Browsers

Demo

Web Sockets

What are Web Sockets?

Bidirectional,full duplex client/server

communication

Half Duplex Communication

Half Duplex Communication

Full Duplex Communications

Real Time Data Before Web SocketsAjax and CometPolling, Long Polling & Streaming

Polling Long Polling

Polling

Server

Client

Request

Response

Request

Response

Request

Response

Request

Response

Sockets

Server

Client

Request

Response

Response

Response

Response

HTTP Header vs. Socket Header

HTTP100’s of

bytes

Sockets

2 bytes

HTTP RequestGET /PollingStock//PollingStock HTTP/1.1

Host: localhost:8080

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Keep-Alive: 300

Connection: keep-alive

Referer: http://www.example.com/PollingStock/

Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=false

HTTP Response

HTTP/1.x 200 OK

X-Powered-By: Servlet/2.5

Server: Sun Java System Application Server 9.1_02

Content-Type: text/html;charset=UTF-8

Content-Length: 21

Date: Sat, 07 Nov 2009 00:32:46 GMT

Upgrade from HTTP to Web Socket Protocol

Source: http://www.websocket.org/quantum.html

GET /text HTTP/1.1\r\n Upgrade: WebSocket\r\n Connection: Upgrade\r\n Host: www.websocket.org\r\n …\r\n

HTTP/1.1 101 WebSocket Protocol Handshake\r\n Upgrade: WebSocket\r\n Connection: Upgrade\r\n …\r\n

The WebSocket handshake (browser request and server response)

HTTP Header vs. Socket Header

http://www.websocket.org/quantum.html

Supported Browsers

Enabling Web Sockets in FireFox

Enabling Web Sockets in Opera

Server Side Implementation

Node.js• Socket.IO• WebSocket-

Node• ws

JavaJetty

RubyEventMachine

PythonpywebsocketTornado

C++libwebsockets

ErlangShirasu

.NETSuperWebSocket

Nugget

Demo

Microdata

Typical Markup

<section> Hello, my name is Suresh Balla, I am a principal consultant at the Neudesic. My friends call me Suresh. You can visit my homepage at <a href="http://www.SureshBalla.com">www.SureshBalla.com</a>. I live at 1234 White Field, Bangalore.

</section>

Markup with added Microdata<section itemscope itemtype="http://data-vocabulary.org/Person">

Hello, my name is <span itemprop="name">Suresh Balla</span>, I am a <span itemprop="title">principal consultant</span> at the <span itemprop="affiliation">Neudesic India</span>. My friends call me <span itemprop="nickname">Suresh</span>. You can visit my homepage at <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>. <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> I live at <span itemprop="street-address">1234</span> <span itemprop="locality">White field</span> <span itemprop="region">Bangalore</span>. </section></section>

Parsed Data• Item

• Type: http://data-vocabulary.org/Person • name = Suresh Balla • title = principal consultant • affiliation = Neudesic • nickname = Suresh • url = http://www.sureshballa.com/ • address = Item(1)

• Item 1 • Type: http://data-vocabulary.org/Address • street-address = 1234• locality = White field• region = Bangalore

Developers can test pages containing Microdata using Google's Rich Snippet Testing Tool

itemscope<section itemscope itemtype="http://data-vocabulary.org/Person"> Hello, my name is <span itemprop="name">Suresh Balla</span>, I am a <span itemprop="title">principal consultant</span> at the <span itemprop="affiliation">Neudesic India</span>. My friends call me <span itemprop="nickname">Suresh</span>. You can visit my homepage at <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>. <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> I live at <span itemprop="street-address">1234</span> <span itemprop="locality">White field</span> <span itemprop="region">Bangalore</span>. </section></section>

Defines a group of vocabulary

name/pair values

itemtype<section itemscope itemtype="http://data-vocabulary.org/Person"> Hello, my name is <span itemprop="name">Suresh Balla</span>, I am a <span itemprop="title">principal consultant</span> at the <span itemprop="affiliation">Neudesic India</span>. My friends call me <span itemprop="nickname">Suresh</span>. You can visit my homepage at <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>. <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> I live at <span itemprop="street-address">1234</span> <span itemprop="locality">White field</span> <span itemprop="region">Bangalore</span>. </section></section>

URL that identifies the scope

itemprop<section itemscope itemtype="http://data-vocabulary.org/Person"> Hello, my name is <span itemprop="name">Suresh Balla</span>, I am a <span itemprop="title">principal consultant</span> at the <span itemprop="affiliation">Neudesic India</span>. My friends call me <span itemprop="nickname">Suresh</span>. You can visit my homepage at <a href="http://www.SureshBalla.com" itemprop="url">www.SureshBalla.com</a>. <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> I live at <span itemprop="street-address">1234</span> <span itemprop="locality">White field</span> <span itemprop="region">Bangalore</span>. </section></section>

Adds a property to element

Microdata Property Value Origins

Element Attribute Containing Value meta content audio src embed src iframe src img src source src video src a href area href link href object data time datetime All others Text content

Demo

Q&A

Thank YouSuresh.Balla@neudesic.com