Download - Html5 advanced part2
![Page 1: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/1.jpg)
HTML5 Advanced - Part 2
Suresh BallaPrincipal ConsultantNeudesic
![Page 2: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/2.jpg)
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
![Page 3: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/3.jpg)
What Are Web Workers?
Background threads in the browser
Dedicated
Shared
![Page 4: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/4.jpg)
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
![Page 5: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/5.jpg)
RestrictionsNo Access to• DOM• Window (few read-only exceptions)• Host page
Your favorite JavaScript library may not work with workers
![Page 6: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/6.jpg)
Access To• Navigator• appName• appVersion• platform• userAgent
• Timers• XmlHttpRequest
![Page 7: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/7.jpg)
Supported Browsers
![Page 8: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/8.jpg)
Demo
![Page 9: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/9.jpg)
Web Sockets
![Page 10: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/10.jpg)
What are Web Sockets?
Bidirectional,full duplex client/server
communication
![Page 11: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/11.jpg)
Half Duplex Communication
![Page 12: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/12.jpg)
Half Duplex Communication
![Page 13: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/13.jpg)
Full Duplex Communications
![Page 14: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/14.jpg)
Real Time Data Before Web SocketsAjax and CometPolling, Long Polling & Streaming
Polling Long Polling
![Page 15: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/15.jpg)
Polling
Server
Client
Request
Response
Request
Response
Request
Response
Request
Response
![Page 16: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/16.jpg)
Sockets
Server
Client
Request
Response
Response
Response
Response
![Page 17: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/17.jpg)
HTTP Header vs. Socket Header
HTTP100’s of
bytes
Sockets
2 bytes
![Page 18: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/18.jpg)
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
![Page 19: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/19.jpg)
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
![Page 20: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/20.jpg)
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)
![Page 21: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/21.jpg)
HTTP Header vs. Socket Header
http://www.websocket.org/quantum.html
![Page 22: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/22.jpg)
Supported Browsers
![Page 23: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/23.jpg)
Enabling Web Sockets in FireFox
![Page 24: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/24.jpg)
Enabling Web Sockets in Opera
![Page 25: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/25.jpg)
Server Side Implementation
Node.js• Socket.IO• WebSocket-
Node• ws
JavaJetty
RubyEventMachine
PythonpywebsocketTornado
C++libwebsockets
ErlangShirasu
.NETSuperWebSocket
![Page 26: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/26.jpg)
Nugget
![Page 27: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/27.jpg)
Demo
![Page 28: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/28.jpg)
Microdata
![Page 29: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/29.jpg)
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>
![Page 30: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/30.jpg)
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>
![Page 31: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/31.jpg)
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
![Page 32: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/32.jpg)
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
![Page 33: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/33.jpg)
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
![Page 34: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/34.jpg)
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
![Page 35: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/35.jpg)
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
![Page 36: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/36.jpg)
Demo
![Page 37: Html5 advanced part2](https://reader033.vdocuments.mx/reader033/viewer/2022061209/5488af7bb47959ec0c8b5768/html5/thumbnails/37.jpg)
Q&A