SlideShare a Scribd company logo

html5 an introduction

•
•
vrt-medialab
vrt-medialab

The document provides an overview of HTML5 and its new features, including sections on semantics, multimedia, 2D/3D drawing, real-time communication and CSS3. It highlights new HTML5 elements like <header>, <footer>, <video>, <audio>, input types and canvas. It also discusses JavaScript APIs, web sockets and browser support for HTML5.

1 of 101
html5 medianet vlaanderen VRT-medialab 1
html5 an introduction
html5 an introduction
html5 an introduction
no specs
html5 an introduction
html5 an introduction
“In three years time, desktops will be irrelevant” 7
html5 an introduction
html5 an introduction
html5 an introduction
html5 an introduction
html5 an introduction
no jihad
˜ html5 in 5 minutes 13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="content-language" content="nl">
<!DOCTYPE html> <html lang='nl'> <head> <meta charset='utf-8'>
!!! 5 %html{:lang => "nl"} %head %meta{:charset => "utf-8"} tutorial
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="application.js"></script> <script src="application.js"></script>
<img src="EddyVanHalen.jpg" alt="Eddie!" />
<img src="EddyVanHalen.jpg" alt="Eddie!">
• !DOCTYPE • Character encoding • type attributes • Optional solidus (/>)
<a href="/programs/ deSlimsteMens/">  <h1>De Slimste mens</h1>  <p>met Hendrik Dacquin</p> </a>
But who can read this? 24
Compatible 100% 25
http://ishtml5readyyet.com/
html5 an introduction
Incompatible Compatible Compatible 46% Incompatible 54% source 28
46% of the pie is eaten HTML5 incompatible browsers HTML5 compatible browsers FF < 3.5 7% chrome IE6 26% 16% IE8 FF 3.5+ 47% 46% IE7 Safari 3+ 29% Opera 24% 4% 29
source
<input type="email" placeholder="Jouw E- mail adres" > <input type="search" autofocus>
<input
type="search"> for search boxes <input
type="number"> for spinboxes <input
type="range"> for sliders <input
type="color"> for color pickers <input
type="tel"> for telephone numbers <input
type="url"> for web addresses <input
type="email"> for email addresses <input
type="date"> for calendar date pickers <input
type="month"> for months <input
type="week"> for weeks <input
type="time"> for timestamps <input
type="datetime"> for precise, absolute date+time stamps
html5 an introduction
<header> - <footer> - <nav>
<header> - <footer> - <nav> <section> - <article> - <aside>
<header> - <footer> - <nav> <section> - <article> - <aside> …
<header> - <footer> - <nav> <section> - <article> - <aside> … → Semantic alternatives to divs in HTML 4.01
<header> - <footer> - <nav> <section> - <article> - <aside> … → Semantic alternatives to divs in HTML 4.01
<mark>
<mark> <time>
<mark> <time> …
<mark> <time> … → Semantic alternatives to spans in HTML 4.01
<mark> <time> … → Semantic alternatives to spans in HTML 4.01
<details> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis die graag prima ballerina wil worden.</p> </details>
<details open> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis die graag prima ballerina wil worden.</p> </details>
Modernizr is a small JavaScript library that detects the availability of CSS3 and HTML5
˜ html5 ~= HTML + JS api + CSS3 39
˜ HTML 1.Semantics (New tags, Link Relations, Microdata) 2.Accessibility (ARIA roles) 3.Web Forms 2.0 (Input Fields) 4.Multimedia (Audio Tag, Video Tag) 5.2D and 3D Drawing (Canvas, WebGL, SVG) 40
˜ HTML 1.Semantics (New tags, Link Relations, Microdata) 2.Accessibility (ARIA roles) 3.Web Forms 2.0 (Input Fields) 4.Multimedia (Audio Tag, Video Tag) 5.2D and 3D Drawing (Canvas, WebGL, SVG) 41
˜ JS api 1.Client Side Storage (Web SQL Database, App Cache, Web Storage) 2.Realtime Communication (Web Sockets, Worker Workers) 3.Richer Experiences (Notifications, Drag and Drop API) 4.Geolocation 42
˜ JS api 1.Client Side Storage (Web SQL Database, App Cache, Web Storage) 2.Realtime Communication (Web Sockets, Worker Workers) 3.Richer Experiences (Notifications, Drag and Drop API) 4.Geolocation 43
˜ CSS3 1.Typography 2.Visuals 3.Transitions, transforms and animations 44
˜ CSS3 1.Typography 2.Visuals 3.Transitions, transforms and animations 45
˜ 1. multimedia 46
<audio src="lamaSounds.mp3" autoplay> </audio>
<audio src="lamaSounds.mp3" autoplay loop> </audio>
<audio src="lamaSounds.mp3" autoplay loop controls></audio>
<audio src="lamaSounds.mp3" id="player" autoplay loop > </audio> <button onclick="document.getElementById('player').pl ay()">Play</button>
<audio src="lamaSounds.mp3" autoplay loop preload="none"> </audio>
<audio controls> <source src="lamaSounds.ogg"> <source src="lamaSounds.mp3"> </audio>
<audio controls> <source src="lamaSounds.ogg" type="audio/ogg"> <source src="lamaSounds.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=lamaSounds.mp3"> <param name="movie" value="player.swf?soundFile=lamaSounds.mp3"> </object> <p>Een lama babbelt (maar u hoort dit niet)</p> </audio>
<video src="lamaTheMovie.mp4" controls width="360" height="240"> </video>
</div><div id=http://people.mozilla.com/~prouget/demos/
˜ 2. 2D and 3D Drawing 57
canvas • 2D and 3D drawing platform within the browser • Uses nothing more than JavaScript and HTML – no plugins • Created by Apple for dashboard widgets • Now part of the W3C spec
html5 an introduction
html5 an introduction
source
source
source
source: http://localhost:8080/GwtQuake.html
canvas versus SVG • Canvas is a bitmap system • Everything is drawn as a single, flat, picture • Changes require the whole picture to be redrawn • SVG is a vector system • Elements to be drawn are separate DOM objects. They can be manipulated individually • not a part of HTML5
˜ 3. real time communication 67
web sockets • Ajax - Timeout requests • Comet - long polling • Flash XMLSocket • HTML5 web sockets
possible uses • Realtime data - (charts, stocks, sports) • Presence • Collaboration • Notifications
html5 an introduction
html5 an introduction
web sockets • Part of html5 • Bi-directional communication between browser and server • Works with proxies/firewalls • low complexity, low latency
web sockets • uses its own protocol (ws://) • different headers • Language support - libraries available for Ruby, Node.js, Erlang, PHP, Java, Python, etc.
browser support • Chrome and WebKit support now • Firefox 4.0 (released yesterday) • Internet Explorer (partial support in IE 9) • Fallback to Long polling
˜ 4. CSS3 76
CSS3 • rgba / hsla • rounded corners • gradients • transitions • shadows • transforms • multiple • animation! backgrounds • text strokes • @font-face 77
div { background-color: rgb(255,0,0)} div { background-color: rgba(255,0,0,0.5);}
html5 an introduction
@font-face {         font-family: 'MyFontFamily';         src: url('Bebas.eot?') format('eot'),              url('Bebas.woff') format('woff'),              url('Bebas.ttf')  format('truetype'),              url('Bebas.svg') format('svg'); } h1 { font-family: bebas, sans-serif; }
border-radius: 5px; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3475c4), color-stop(1, #3475c4) );
Browser Prefixes Firefox: -moz-border-radius Safari: -webkit-border-radius Opera: -o-border-radius IE: -ms-border-radius
html5 an introduction
better design tools
better design tools t e x t s t r o k e s rounded corners transitions transforms
better design tools rgba / hsla t e x t s t r o k e s gradients rounded corners shadows transitions multiple backgrounds transforms @font-face
questions? • @studiomuscle • hendrik.dacquin@vrtmedialab.be 85
resources • http://apirocks.com/html5/ html5.html#slide1 • http://html5doctor.com • http://html5demos.com/ • http://diveintohtml5.org/ • http://validator.nu/?doc=http:// blog.whatwg.org/whats-next-in-html- episode- • http://html5watch.tumblr.com/ • http://dev.w3.org/html5/html-author/ • http://people.mozilla.com/~prouget/ demos/ 86
demos • http://9elements.com/io/ projects/html5/canvas/ • http://html5demos.com/drag • http://bradshawenterprises.com/ tests/formdemo.php • http://hummingbirdstats.com • http://pusherapp.com • http://speckyboy.com/ 2010/04/23/html5-video- libraries-toolkits-and-players/ 87

More Related Content

html5 an introduction

  • 1. html5 medianet vlaanderen VRT-medialab 1
  • 8. “In three years time, desktops will be irrelevant” 7
  • 15. ˜ html5 in 5 minutes 13
  • 16. <!-- HTML 4.01 / XHTML doctype and meta --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="content-language" content="nl">
  • 17. <!-- HTML5 doctype and meta --> <!DOCTYPE html> <html lang='nl'> <head> <meta charset='utf-8'>
  • 18. <!-- #haml --> !!! 5 %html{:lang => "nl"} %head %meta{:charset => "utf-8"} tutorial
  • 19. <!-- HTML 4.01 / XHTML type attributes --> <link rel="stylesheet" type="text/css" href="style.css">
  • 20. <!-- HTML5 type attributes --> <link rel="stylesheet" href="style.css">
  • 21. <!-- HTML 4.01 / XHTML --> <script type="text/javascript" src="application.js"></script> <!-- HTML5 --> <script src="application.js"></script>
  • 22. <!-- HTML 4.01 / XHTML Mandatory solidus (/>) --> <img src="EddyVanHalen.jpg" alt="Eddie!" />
  • 23. <!-- HTML5 Optional solidus (/>) --> <img src="EddyVanHalen.jpg" alt="Eddie!">
  • 24. <!-- HTML5 Simplified syntax --> • !DOCTYPE • Character encoding • type attributes • Optional solidus (/>)
  • 25. <!-- HTML5 links on steroids --> <a href="/programs/ deSlimsteMens/">  <h1>De Slimste mens</h1>  <p>met Hendrik Dacquin</p> </a>
  • 26. But who can read this? 24
  • 30. Incompatible Compatible Compatible 46% Incompatible 54% source 28
  • 31. 46% of the pie is eaten HTML5 incompatible browsers HTML5 compatible browsers FF < 3.5 7% chrome IE6 26% 16% IE8 FF 3.5+ 47% 46% IE7 Safari 3+ 29% Opera 24% 4% 29
  • 33. <!-- HTML5 input elements --> <input type="email" placeholder="Jouw E- mail adres" > <input type="search" autofocus>
  • 34. <!-- HTML5 input elements --> <input
type="search"> for search boxes <input
type="number"> for spinboxes <input
type="range"> for sliders <input
type="color"> for color pickers <input
type="tel"> for telephone numbers <input
type="url"> for web addresses <input
type="email"> for email addresses <input
type="date"> for calendar date pickers <input
type="month"> for months <input
type="week"> for weeks <input
type="time"> for timestamps <input
type="datetime"> for precise, absolute date+time stamps
  • 36. <!-- HTML5 sectioning elements -->
  • 37. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav>
  • 38. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav> <section> - <article> - <aside>
  • 39. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav> <section> - <article> - <aside> …
  • 40. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav> <section> - <article> - <aside> … → Semantic alternatives to divs in HTML 4.01
  • 41. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav> <section> - <article> - <aside> … → Semantic alternatives to divs in HTML 4.01
  • 42. <!-- HTML5 new inline elements -->
  • 43. <!-- HTML5 new inline elements --> <mark>
  • 44. <!-- HTML5 new inline elements --> <mark> <time>
  • 45. <!-- HTML5 new inline elements --> <mark> <time> …
  • 46. <!-- HTML5 new inline elements --> <mark> <time> … → Semantic alternatives to spans in HTML 4.01
  • 47. <!-- HTML5 new inline elements --> <mark> <time> … → Semantic alternatives to spans in HTML 4.01
  • 48. <!-- HTML5 interactive elements --> <details> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis die graag prima ballerina wil worden.</p> </details>
  • 49. <!-- HTML5 interactive elements --> <details open> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis die graag prima ballerina wil worden.</p> </details>
  • 50. <!-- Modernizr --> Modernizr is a small JavaScript library that detects the availability of CSS3 and HTML5
  • 51. ˜ html5 ~= HTML + JS api + CSS3 39
  • 52. ˜ HTML 1.Semantics (New tags, Link Relations, Microdata) 2.Accessibility (ARIA roles) 3.Web Forms 2.0 (Input Fields) 4.Multimedia (Audio Tag, Video Tag) 5.2D and 3D Drawing (Canvas, WebGL, SVG) 40
  • 53. ˜ HTML 1.Semantics (New tags, Link Relations, Microdata) 2.Accessibility (ARIA roles) 3.Web Forms 2.0 (Input Fields) 4.Multimedia (Audio Tag, Video Tag) 5.2D and 3D Drawing (Canvas, WebGL, SVG) 41
  • 54. ˜ JS api 1.Client Side Storage (Web SQL Database, App Cache, Web Storage) 2.Realtime Communication (Web Sockets, Worker Workers) 3.Richer Experiences (Notifications, Drag and Drop API) 4.Geolocation 42
  • 55. ˜ JS api 1.Client Side Storage (Web SQL Database, App Cache, Web Storage) 2.Realtime Communication (Web Sockets, Worker Workers) 3.Richer Experiences (Notifications, Drag and Drop API) 4.Geolocation 43
  • 56. ˜ CSS3 1.Typography 2.Visuals 3.Transitions, transforms and animations 44
  • 57. ˜ CSS3 1.Typography 2.Visuals 3.Transitions, transforms and animations 45
  • 58. ˜ 1. multimedia 46
  • 59. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" autoplay> </audio>
  • 60. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" autoplay loop> </audio>
  • 61. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" autoplay loop controls></audio>
  • 62. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" id="player" autoplay loop > </audio> <button onclick="document.getElementById('player').pl ay()">Play</button>
  • 63. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" autoplay loop preload="none"> </audio>
  • 64. <!-- HTML5 audio formats --> <audio controls> <source src="lamaSounds.ogg"> <source src="lamaSounds.mp3"> </audio>
  • 65. <!-- HTML5 audio fail back --> <audio controls> <source src="lamaSounds.ogg" type="audio/ogg"> <source src="lamaSounds.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=lamaSounds.mp3"> <param name="movie" value="player.swf?soundFile=lamaSounds.mp3"> </object> <p>Een lama babbelt (maar u hoort dit niet)</p> </audio>
  • 66. <!-- HTML5 video --> <video src="lamaTheMovie.mp4" controls width="360" height="240"> </video>
  • 67. <!-- HTML5 video to be continued---
  • 69. ˜ 2. 2D and 3D Drawing 57
  • 70. canvas • 2D and 3D drawing platform within the browser • Uses nothing more than JavaScript and HTML – no plugins • Created by Apple for dashboard widgets • Now part of the W3C spec
  • 78. canvas versus SVG • Canvas is a bitmap system • Everything is drawn as a single, flat, picture • Changes require the whole picture to be redrawn • SVG is a vector system • Elements to be drawn are separate DOM objects. They can be manipulated individually • not a part of HTML5
  • 79. ˜ 3. real time communication 67
  • 80. web sockets • Ajax - Timeout requests • Comet - long polling • Flash XMLSocket • HTML5 web sockets
  • 81. possible uses • Realtime data - (charts, stocks, sports) • Presence • Collaboration • Notifications
  • 84. web sockets • Part of html5 • Bi-directional communication between browser and server • Works with proxies/firewalls • low complexity, low latency
  • 85. web sockets • uses its own protocol (ws://) • different headers • Language support - libraries available for Ruby, Node.js, Erlang, PHP, Java, Python, etc.
  • 86. <!-- HTML5 web sockets -->
  • 87. browser support • Chrome and WebKit support now • Firefox 4.0 (released yesterday) • Internet Explorer (partial support in IE 9) • Fallback to Long polling
  • 88. ˜ 4. CSS3 76
  • 89. CSS3 • rgba / hsla • rounded corners • gradients • transitions • shadows • transforms • multiple • animation! backgrounds • text strokes • @font-face 77
  • 90. <!-- CSS3 rgba --> div { background-color: rgb(255,0,0)} div { background-color: rgba(255,0,0,0.5);}
  • 92. <!-- CSS3 fonts --> @font-face {         font-family: 'MyFontFamily';         src: url('Bebas.eot?') format('eot'),              url('Bebas.woff') format('woff'),              url('Bebas.ttf')  format('truetype'),              url('Bebas.svg') format('svg'); } h1 { font-family: bebas, sans-serif; }
  • 93. <!-- CSS3 border radius/gradient --> border-radius: 5px; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3475c4), color-stop(1, #3475c4) );
  • 94. Browser Prefixes Firefox: -moz-border-radius Safari: -webkit-border-radius Opera: -o-border-radius IE: -ms-border-radius
  • 97. better design tools t e x t s t r o k e s rounded corners transitions transforms
  • 98. better design tools rgba / hsla t e x t s t r o k e s gradients rounded corners shadows transitions multiple backgrounds transforms @font-face
  • 100. resources • http://apirocks.com/html5/ html5.html#slide1 • http://html5doctor.com • http://html5demos.com/ • http://diveintohtml5.org/ • http://validator.nu/?doc=http:// blog.whatwg.org/whats-next-in-html- episode- • http://html5watch.tumblr.com/ • http://dev.w3.org/html5/html-author/ • http://people.mozilla.com/~prouget/ demos/ 86
  • 101. demos • http://9elements.com/io/ projects/html5/canvas/ • http://html5demos.com/drag • http://bradshawenterprises.com/ tests/formdemo.php • http://hummingbirdstats.com • http://pusherapp.com • http://speckyboy.com/ 2010/04/23/html5-video- libraries-toolkits-and-players/ 87

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. t&amp;#x2019;s just not true. The 2022 date is for two complete implementations, something that has still not happened for HTML 4, XHTML 1.0 or XHTML 1.1. The dates to worry about are 2012 for a completed draft, and October 2009 for a working draftAlso as stated above, browser makers are already implementing some of the new parts of HTML 5, and the rest is backwards compatible.\n
  27. t&amp;#x2019;s just not true. The 2022 date is for two complete implementations, something that has still not happened for HTML 4, XHTML 1.0 or XHTML 1.1. The dates to worry about are 2012 for a completed draft, and October 2009 for a working draftAlso as stated above, browser makers are already implementing some of the new parts of HTML 5, and the rest is backwards compatible.\n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  35. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  36. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  37. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  38. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  39. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  40. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  41. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  42. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  43. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  44. The actual contents are hidden by default. You can use the open attribute to override this\n
  45. The actual contents are hidden by default. You can use the open attribute to override this\n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. The actual contents are hidden by default. You can use the open attribute to override this\n
  56. The actual contents are hidden by default. You can use the open attribute to override this\n
  57. The actual contents are hidden by default. You can use the open attribute to override this\n
  58. The actual contents are hidden by default. You can use the open attribute to override this\n
  59. The actual contents are hidden by default. You can use the open attribute to override this\n
  60. The actual contents are hidden by default. You can use the open attribute to override this\n
  61. The actual contents are hidden by default. You can use the open attribute to override this\n
  62. The actual contents are hidden by default. You can use the open attribute to override this\n
  63. The actual contents are hidden by default. You can use the open attribute to override this\n
  64. \n
  65. \n
  66. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  75. \n
  76. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  77. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  78. \n
  79. \n
  80. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  81. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  82. \n
  83. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. The actual contents are hidden by default. You can use the open attribute to override this\n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n