Html5 advanced part2
38
HTML5 Advanced - Part 2 Suresh Balla Principal Consultant Neudesic
-
Upload
suresh-balla -
Category
Technology
-
view
661 -
download
0
description
Transcript of 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
