html5 an introduction

2,920 views

Published on

A html5 introduction for medianet vlaanderen

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,920
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • t’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
  • t’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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  • HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  • Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • \n
  • \n
  • 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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
  • \n
  • 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
  • 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
  • \n
  • \n
  • 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
  • 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
  • \n
  • 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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The actual contents are hidden by default. You can use the open attribute to override this\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • html5 an introduction

    1. 1. html5medianet vlaanderen VRT-medialab 1
    2. 2. no specs
    3. 3. “In three yearstime, desktops willbe irrelevant” 7
    4. 4. no jihad
    5. 5. ˜html5 in 5 minutes 13
    6. 6. <!-- HTML 4.01 / XHTML doctype andmeta --><!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 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">
    7. 7. <!-- HTML5 doctype and meta --><!DOCTYPE html><html lang=nl><head> <meta charset=utf-8>
    8. 8. <!-- #haml --> !!! 5 %html{:lang => "nl"} %head %meta{:charset => "utf-8"}tutorial
    9. 9. <!-- HTML 4.01 / XHTML typeattributes --><link rel="stylesheet" type="text/css"href="style.css">
    10. 10. <!-- HTML5 type attributes --><link rel="stylesheet" href="style.css">
    11. 11. <!-- HTML 4.01 / XHTML --><script type="text/javascript"src="application.js"></script><!-- HTML5 --><script src="application.js"></script>
    12. 12. <!-- HTML 4.01 / XHTML Mandatorysolidus (/>) --><img src="EddyVanHalen.jpg"alt="Eddie!" />
    13. 13. <!-- HTML5 Optional solidus (/>) --><img src="EddyVanHalen.jpg"alt="Eddie!">
    14. 14. <!-- HTML5 Simplified syntax -->• !DOCTYPE• Character encoding• type attributes• Optional solidus (/>)
    15. 15. <!-- HTML5 links on steroids --><a href="/programs/deSlimsteMens/"> <h1>De Slimste mens</h1> <p>met Hendrik Dacquin</p></a>
    16. 16. But who can read this? 24
    17. 17. Compatible 100% 25
    18. 18. http://ishtml5readyyet.com/
    19. 19. Incompatible Compatible Compatible 46% Incompatible 54%source 28
    20. 20. 46% of the pie is eatenHTML5 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
    21. 21. source
    22. 22. <!-- HTML5 input elements --><input type="email" placeholder="Jouw E-mail adres" ><input type="search" autofocus>
    23. 23. <!-- 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
    24. 24. <!-- HTML5 sectioning elements -->
    25. 25. <!-- HTML5 sectioning elements --><header> - <footer> - <nav>
    26. 26. <!-- HTML5 sectioning elements --><header> - <footer> - <nav><section> - <article> - <aside>
    27. 27. <!-- HTML5 sectioning elements --><header> - <footer> - <nav><section> - <article> - <aside>…
    28. 28. <!-- HTML5 sectioning elements --><header> - <footer> - <nav><section> - <article> - <aside>…→ Semantic alternatives to divs in HTML 4.01
    29. 29. <!-- HTML5 sectioning elements --><header> - <footer> - <nav><section> - <article> - <aside>…→ Semantic alternatives to divs in HTML 4.01
    30. 30. <!-- HTML5 new inline elements -->
    31. 31. <!-- HTML5 new inline elements --><mark>
    32. 32. <!-- HTML5 new inline elements --><mark><time>
    33. 33. <!-- HTML5 new inline elements --><mark><time>…
    34. 34. <!-- HTML5 new inline elements --><mark><time>…→ Semantic alternatives to spans in HTML 4.01
    35. 35. <!-- HTML5 new inline elements --><mark><time>…→ Semantic alternatives to spans in HTML 4.01
    36. 36. <!-- HTML5 interactive elements --><details> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis diegraag prima ballerina wil worden.</p></details>
    37. 37. <!-- HTML5 interactive elements --><details open> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis diegraag prima ballerina wil worden.</p></details>
    38. 38. <!-- Modernizr -->Modernizr is a small JavaScriptlibrary that detects theavailability of CSS3 and HTML5
    39. 39. ˜ html5 ~=HTML + JS api + CSS3 39
    40. 40. ˜ HTML1.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
    41. 41. ˜ HTML1.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
    42. 42. ˜ JS api1.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
    43. 43. ˜ JS api1.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
    44. 44. ˜ CSS31.Typography2.Visuals3.Transitions, transforms and animations 44
    45. 45. ˜ CSS31.Typography2.Visuals3.Transitions, transforms and animations 45
    46. 46. ˜ 1. multimedia46
    47. 47. <!-- HTML5 audio --><audio src="lamaSounds.mp3" autoplay></audio>
    48. 48. <!-- HTML5 audio --><audio src="lamaSounds.mp3" autoplay loop></audio>
    49. 49. <!-- HTML5 audio --><audio src="lamaSounds.mp3" autoplay loopcontrols></audio>
    50. 50. <!-- HTML5 audio --><audio src="lamaSounds.mp3" id="player"autoplay loop ></audio><buttononclick="document.getElementById(player).play()">Play</button>
    51. 51. <!-- HTML5 audio --><audio src="lamaSounds.mp3" autoplay looppreload="none"></audio>
    52. 52. <!-- HTML5 audio formats --><audio controls> <source src="lamaSounds.ogg"> <source src="lamaSounds.mp3"></audio>
    53. 53. <!-- 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>
    54. 54. <!-- HTML5 video --><video src="lamaTheMovie.mp4" controlswidth="360" height="240"></video>
    55. 55. <!-- HTML5 video to be continued---
    56. 56. http://people.mozilla.com/~prouget/demos/
    57. 57. ˜2. 2D and 3D Drawing 57
    58. 58. 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
    59. 59. <!-- HTML5 canvas -->
    60. 60. source
    61. 61. source
    62. 62. source
    63. 63. source: http://localhost:8080/GwtQuake.html
    64. 64. 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
    65. 65. ˜3. real time communication 67
    66. 66. web sockets• Ajax - Timeout requests• Comet - long polling• Flash XMLSocket• HTML5 web sockets
    67. 67. possible uses• Realtime data - (charts, stocks, sports)• Presence• Collaboration• Notifications
    68. 68. web sockets• Part of html5• Bi-directional communication between browser and server• Works with proxies/firewalls• low complexity, low latency
    69. 69. web sockets• uses its own protocol (ws://)• different headers• Language support - libraries available for Ruby, Node.js, Erlang, PHP, Java, Python, etc.
    70. 70. <!-- HTML5 web sockets -->
    71. 71. browser support• Chrome and WebKit support now• Firefox 4.0 (released yesterday)• Internet Explorer (partial support in IE 9)• Fallback to Long polling
    72. 72. ˜ 4. CSS376
    73. 73. CSS3• rgba / hsla • rounded corners• gradients • transitions• shadows • transforms• multiple • animation! backgrounds• text strokes • @font-face 77
    74. 74. <!-- CSS3 rgba -->div { background-color: rgb(255,0,0)}div { background-color:rgba(255,0,0,0.5);}
    75. 75. <!-- 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; }
    76. 76. <!-- CSS3 border radius/gradient -->border-radius: 5px;background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3475c4), color-stop(1, #3475c4) );
    77. 77. Browser PrefixesFirefox: -moz-border-radiusSafari: -webkit-border-radiusOpera: -o-border-radiusIE: -ms-border-radius
    78. 78. better design tools
    79. 79. better design tools t e x t s t r o k e s rounded corners transitions transforms
    80. 80. better design toolsrgba / hsla t e x t s t r o k e sgradients rounded cornersshadows transitionsmultiple backgrounds transforms @font-face
    81. 81. questions?• @studiomuscle• hendrik.dacquin@vrtmedialab.be 85
    82. 82. 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
    83. 83. 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

    ×