Wilfred NasFront end developeranwb, ing, agis, vst-pn, essent, Min. VWS..wnas.nl@wnas
HTML5Praktisch vandaag.
What is it all about?
Eerst een korte geschiedenisles...
HTML tags1991
HTML 2.01995
HTML 3.2januari 1997
HTML 4.0december 1997
XHTML 1.0januari 2000
Mime types anyone?
xhtml-1.0 == html-4.0
maar dan met een xml-syntax
XHTML 1.1march 2001
XHTML 2.0....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="h...
hetzelfde als HTML 4
Maar met meer:bling
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="h...
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>HTML 5</title></head><body> <p>foo</p></body></html>
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>HTML 5</title></head><body> <p>foo</p></body></html>
StructuurLayout elementen
Ouddivspanp(body)
<div id=header> <div id=nav>  <ul>   <li><a href=foo.html>foo</a></li>   ...  </ul> </div> <div class=headers>  <h1>header...
<header> <nav>  <ul>   <li><a href=foo.html>foo</a></li>   ...  </ul> </nav> <hgroup>  <h1>header</h1>  <h2>tagline</h2> <...
Newarticle      meteraside        navaudio        outputcanvas       progressdetails      sectionfigcaption   summaryfigur...
En...waarom zou ik?
SemantiekHoe duidelijker, hoe beter je te begrijpen bent.
<div>Betekent niets.
<header>beter
“seo”
<header> <hgroup>  <h1>header</h1>  <h2>tagline</h2> </hgroup></header><section> <article>  <hgroup>   <h1>header</h1>   <...
<article>“Like an article of clothing, not a newspaper article.” (@brucel)
<article>Iets wat op zich zelf staat.
<article>ook makkelijk voor cms makers.
<article>ook makkelijk voor cms makers.
Maar wat doen we metoudere browsers? ( kuch IE )
<!--[if lt IE 9]> <script  src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }
“wel of geen aanhalingstekens?”
PragmatischGebruik wat mensen al doen.
class=fooclass=foo barclass=”foo bar”
UPPERCASE vs lowercase
<INPUT type=”TEXT” Class=‘foo bar’ />
use “quotes” and lowercase.
Form elementenDingen die je al lang wilde...
<input>
<input  type=”text”>
<input type=”text” class=”search placeholder:uw_zoekterm” >
<input type=”search” placeholder=”uw zoekopdracht”>
// build an input to test for html5 attr.var i = document.createElement(input);// see if placeholder is supportedif ( !(pl...
searchtel        timeurl        datetime-email      localdatetime   numberdate       rangemonth      colorweek
autocomplete      height andnovalidate        widthautofocus         listform              minform overrides    max formac...
<input type=”email”>
<input type=”email” required>(alle browsers)
<input type=”email” required>(indien niet ondersteund)
<input type=”email” required>(alle browsers, met javascript)
<input  type=”email”>
<input type=”url”>
<input type=”date” value=”2011-06-07”>
<input pattern=”[1-9][0-9]{3}s?[a-zA-Z]{2}” required>(http://html5pattern.com/)
<input type=email required>(stolen slides following)
<input type=email title=”So you tried to skip me?” required>
<input type="text" pattern="d{2}-d{5}" x-moz-errormessage="PLEASE, just do itright!">
elm.setCustomValidity("No, thats wrong!");
input::-webkit-validation-bubble-message {    color: #f00;    background: #000;    border: 10px solid #f00;    -webkit-box...
(End of stolen slides. Thanks to @robertnyman)
http://wnas.nl/html5-safe-usage-2
<video>made easy...
<object width="357" height="294">  <param name="movie"   value="http://www.youtube.com/p/69D055611E14B822?hl=nl_NL&amp;fs=...
Ipad, Iphone
look ma, no flash!
<video width="320" height="240" controls>  <source  src="movie.mp4"  type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"></vid...
<video width="320" height="240" controls>  <source  src="movie.mp4"  type=video/mp4; codecs="avc1.42E01E, mp4a.40.2">  <so...
http://diveintohtml5.info/video.html
Meer
Cookies
Local storagesession storage
<html manifest=”cache.manifest”>
CACHE MANIFESTstyle.cssscript.jslogo.png
@FontfaceTypografie op het web.
@font-face {    font-family: stoppoliceRegular;    src: url(fonts/stop_police-webfont.eot);    src: url(fonts/stop_police-...
Media queriesCSS3
Media queriesCSS3
Geolocation
http://isgeolocationpartofhtml5.com/
Maar wel leuk.
navigator.geolocation.getCurrentPosition();
Canvas
geen plaatjes
Nadelen.
<div  class="demo"  id="canvaspie"  width="600"  height="200"></div>
svg
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" height="480" widt...
<rect x="0" class="key2" y="17" height="12"style="fill: #0000ff; fill-opacity: 0.7;stroke: none; stroke-width: 1px;"width=...
http://www.drawastickman.com/
http://html5demos.com/
microformats
Vragen
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Html5 intro
Upcoming SlideShare
Loading in …5
×

Html5 intro

6,213 views
6,144 views

Published on

introduction into html5 for #cascadis

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,213
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • goedemiddag mensen, ik ben Wilfred Nas ik doe front end ontwikkeling. dit doe ik al zo&amp;#x2019;n 15 jaar. eerst als ontwerper en later enkel code...\n
  • \n
  • \n
  • \n
  • sorry\n
  • \n
  • \n
  • \n
  • \n
  • and the working group was shut down.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • is het al af? maakt niet uit, css\n
  • in plaats van:\n
  • kunnen we dit doen.\n
  • het html element is overbodig, als ook het head als de body. Dit was al in html4...\n
  • \n
  • jaja, ook de body tag kun je gebruiken om je document te stylen...\n
  • een hele mooie opbouw van een navigatie element en een header in een html4 document. Toch best wel mooi, niet?\n
  • hier is hetzelfde document, alleen met html5 elementen in plaats van betekenisloze div&amp;#x2019;s...\n
  • We hebben redelijk wat leuke nieuwe elementen...\n
  • \n
  • \n
  • \n
  • \n
  • google houd van html5 en goede, semantisch correcte html. Maakt het makkelijker om zaken te indexeren.\n
  • \n
  • \n
  • En wat je op een andere plaats kunt hergebruiken.\n
  • \n
  • \n
  • \n
  • de beste vinding van IE. conditional comments. Dit stukje moet dus in de head en niet onderin de body...\n
  • css, voor (zover ik weet) oudere browsers... de laatste safari, chrome, opera en firefox doen dit al...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • De meest makkelijke manier om een input element te definieren.\n
  • dit wordt, in alle browsers.\n
  • om een zoek veld aan te geven met een &amp;#x2018;placeholder&amp;#x2019;.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • opera\n
  • firefox\n
  • webkit\n
  • postcode\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • waarom zou je dit willen?\n
  • \n
  • \n
  • \n
  • meer ruimte, werkt niet op ie6, maar wel met javascript...\n
  • \n
  • \n
  • \n
  • geen javascript, of flash nodig. werkt in ie6...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • discussie graag.\n
  • \n
  • \n
  • goed voor dynamische data. zeg de verkiezings uitslag...\n
  • \n
  • ook geen data...\n
  • \n
  • \n
  • \n
  • veel data...\n
  • niet voor mensen, wel voor zoek machines...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Html5 intro

    1. 1. Wilfred NasFront end developeranwb, ing, agis, vst-pn, essent, Min. VWS..wnas.nl@wnas
    2. 2. HTML5Praktisch vandaag.
    3. 3. What is it all about?
    4. 4. Eerst een korte geschiedenisles...
    5. 5. HTML tags1991
    6. 6. HTML 2.01995
    7. 7. HTML 3.2januari 1997
    8. 8. HTML 4.0december 1997
    9. 9. XHTML 1.0januari 2000
    10. 10. Mime types anyone?
    11. 11. xhtml-1.0 == html-4.0
    12. 12. maar dan met een xml-syntax
    13. 13. XHTML 1.1march 2001
    14. 14. XHTML 2.0....
    15. 15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"><head> <title></title> <meta http-equiv="Content-Type"content="text/html;charset=UTF-8"/></head><body></body></html>
    16. 16. hetzelfde als HTML 4
    17. 17. Maar met meer:bling
    18. 18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"><head> <title></title> <meta http-equiv="Content-Type"content="text/html;charset=UTF-8"/></head><body></body></html>
    19. 19. <!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>HTML 5</title></head><body> <p>foo</p></body></html>
    20. 20. <!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>HTML 5</title></head><body> <p>foo</p></body></html>
    21. 21. StructuurLayout elementen
    22. 22. Ouddivspanp(body)
    23. 23. <div id=header> <div id=nav> <ul> <li><a href=foo.html>foo</a></li> ... </ul> </div> <div class=headers> <h1>header</h1> <p>tagline</p> </div></div>
    24. 24. <header> <nav> <ul> <li><a href=foo.html>foo</a></li> ... </ul> </nav> <hgroup> <h1>header</h1> <h2>tagline</h2> </hgroup></header>
    25. 25. Newarticle meteraside navaudio outputcanvas progressdetails sectionfigcaption summaryfigure timefooter videoheaderhgroupmark
    26. 26. En...waarom zou ik?
    27. 27. SemantiekHoe duidelijker, hoe beter je te begrijpen bent.
    28. 28. <div>Betekent niets.
    29. 29. <header>beter
    30. 30. “seo”
    31. 31. <header> <hgroup> <h1>header</h1> <h2>tagline</h2> </hgroup></header><section> <article> <hgroup> <h1>header</h1> <h2><time>2011-06-08</time></h2> </hgroup> <p>fooooo</p> <section> <h1>header</h1> <p>baaaaaar</p> <footer>copy</footer> </section> <aside> <time>22.00</time> </aside> </article></section>
    32. 32. <article>“Like an article of clothing, not a newspaper article.” (@brucel)
    33. 33. <article>Iets wat op zich zelf staat.
    34. 34. <article>ook makkelijk voor cms makers.
    35. 35. <article>ook makkelijk voor cms makers.
    36. 36. Maar wat doen we metoudere browsers? ( kuch IE )
    37. 37. <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    38. 38. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }
    39. 39. “wel of geen aanhalingstekens?”
    40. 40. PragmatischGebruik wat mensen al doen.
    41. 41. class=fooclass=foo barclass=”foo bar”
    42. 42. UPPERCASE vs lowercase
    43. 43. <INPUT type=”TEXT” Class=‘foo bar’ />
    44. 44. use “quotes” and lowercase.
    45. 45. Form elementenDingen die je al lang wilde...
    46. 46. <input>
    47. 47. <input type=”text”>
    48. 48. <input type=”text” class=”search placeholder:uw_zoekterm” >
    49. 49. <input type=”search” placeholder=”uw zoekopdracht”>
    50. 50. // build an input to test for html5 attr.var i = document.createElement(input);// see if placeholder is supportedif ( !(placeholder in i) ) { //provide placeholder support}
    51. 51. searchtel timeurl datetime-email localdatetime numberdate rangemonth colorweek
    52. 52. autocomplete height andnovalidate widthautofocus listform minform overrides max formaction, step formenctype, multiple formmethod, pattern (regexp)formnovalidate, placeholder formtarget required
    53. 53. <input type=”email”>
    54. 54. <input type=”email” required>(alle browsers)
    55. 55. <input type=”email” required>(indien niet ondersteund)
    56. 56. <input type=”email” required>(alle browsers, met javascript)
    57. 57. <input type=”email”>
    58. 58. <input type=”url”>
    59. 59. <input type=”date” value=”2011-06-07”>
    60. 60. <input pattern=”[1-9][0-9]{3}s?[a-zA-Z]{2}” required>(http://html5pattern.com/)
    61. 61. <input type=email required>(stolen slides following)
    62. 62. <input type=email title=”So you tried to skip me?” required>
    63. 63. <input type="text" pattern="d{2}-d{5}" x-moz-errormessage="PLEASE, just do itright!">
    64. 64. elm.setCustomValidity("No, thats wrong!");
    65. 65. input::-webkit-validation-bubble-message { color: #f00; background: #000; border: 10px solid #f00; -webkit-box-shadow: 0 0 0 0;}input::-webkit-validation-bubble-arrow { background: #ff3456; border-color: orange; -webkit-box-shadow: 0 0 0 0;}
    66. 66. (End of stolen slides. Thanks to @robertnyman)
    67. 67. http://wnas.nl/html5-safe-usage-2
    68. 68. <video>made easy...
    69. 69. <object width="357" height="294"> <param name="movie" value="http://www.youtube.com/p/69D055611E14B822?hl=nl_NL&amp;fs=1"> <param name="allowFullScreen" value="true"><paramname="allowscriptaccess" value="always"> <embed src="http://www.youtube.com/p/69D055611E14B822?hl=nl_NL&amp;fs=1" type="application/x-shockwave-flash"width="357" height="294" allowscriptaccess="always"allowfullscreen="true"></object>
    70. 70. Ipad, Iphone
    71. 71. look ma, no flash!
    72. 72. <video width="320" height="240" controls> <source src="movie.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"></video>
    73. 73. <video width="320" height="240" controls> <source src="movie.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"> <source src="movie.webm" type=video/webm; codecs="vp8, vorbis"> <source src="movie.ogv" type=video/ogg; codecs="theora, vorbis"></video>
    74. 74. http://diveintohtml5.info/video.html
    75. 75. Meer
    76. 76. Cookies
    77. 77. Local storagesession storage
    78. 78. <html manifest=”cache.manifest”>
    79. 79. CACHE MANIFESTstyle.cssscript.jslogo.png
    80. 80. @FontfaceTypografie op het web.
    81. 81. @font-face { font-family: stoppoliceRegular; src: url(fonts/stop_police-webfont.eot); src: url(fonts/stop_police-webfont.eot?#iefix)format(embedded-opentype), url(fonts/stop_police-webfont.woff) format(woff), url(fonts/stop_police-webfont.ttf)format(truetype), url(fonts/stop_police-webfont.svg#stoppoliceRegular)format(svg); font-weight: normal; font-style: normal;}
    82. 82. Media queriesCSS3
    83. 83. Media queriesCSS3
    84. 84. Geolocation
    85. 85. http://isgeolocationpartofhtml5.com/
    86. 86. Maar wel leuk.
    87. 87. navigator.geolocation.getCurrentPosition();
    88. 88. Canvas
    89. 89. geen plaatjes
    90. 90. Nadelen.
    91. 91. <div class="demo" id="canvaspie" width="600" height="200"></div>
    92. 92. svg
    93. 93. <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" height="480" width="640"> <!-- --> <!-- Created with SVG::Graph --> <!-- Sean Russell --> <!-- Based on SVG::TT::Graph for Perl by Leo Lapworth & Stephan Morgan --> <!-- ////////////////////////////////////////////////////////////////// --> <defs> <filter id="dropshadow" height="1.2" width="1.2"> <feGaussianBlur result="blur" stdDeviation="4"/> </filter> </defs> <!--SVG Background --> <rect x="0" class="svgBackground" y="0" height="480" style="fill:#ffffff;" width="640"/> <text x="320" class="mainTitle" y="16" style="text-anchor: middle; fill: #000000; font-size: 16px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">Question 7</text> <g transform="translate(543.0 46)"> <rect x="0" class="key1" y="0" height="12" style="fill: #ff0000; fill-opacity: 0.7; stroke: none; stroke-width: 1px;" width="12"/> <text x="17" class="keyText" y="12" style="fill: #000000; text-anchor:start; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">Internet [3]</text> <rect x="0" class="key2" y="17" height="12" style="fill: #0000ff; fill-opacity: 0.7; stroke: none; stroke-width: 1px;" width="12"/> <text x="17" class="keyText" y="29" style="fill: #000000; text-anchor:start; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">TV [3]</text> <rect x="0" class="key3" y="34" height="12" style="fill-opacity: 0.7; fill: #00ff00; stroke: none; stroke-width: 1px;" width="12"/> <text x="17" class="keyText" y="46" style="fill: #000000; text-anchor:start; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">Newspaper [0]</text> <rect x="0" class="key4" y="51" height="12" style="fill-opacity: 0.7; fill: #ffcc00; stroke: none; stroke-width: 1px;" width="12"/> <text x="17" class="keyText" y="63" style="fill: #000000; text-anchor:start; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">Magazine [6]</text> <rect x="0" class="key5" y="68" height="12" style="fill-opacity: 0.7; fill: #00ccff; stroke: none; stroke-width: 1px;" width="12"/> <text x="17" class="keyText" y="80" style="fill: #000000; text-anchor:start; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">Radio [1]</text> </g> <g transform="translate( 112 48 )"> <g> <path transform="translate( 10 10 )" d="M207.5,207.5 L207.5,0.0 A207.5,207.5 0, 0,1, 413.487091375346 182.48863884702 Z" filter="url(#dropshadow)" style="fill: #ccc; stroke: none;"/> <path transform="translate( 10 10 )" d="M207.5,207.5 L413.487091375346,182.48863884702 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" filter="url(#dropshadow)" style="fill: #ccc; stroke: none;"/> <path transform="translate( 10 10 )" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" filter="url(#dropshadow)" style="fill: #ccc; stroke: none;"/> <path transform="translate( 0.649837573145852 13.5460488704254 )" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 111.069941800918 23.7678746769589 Z" filter="url(#dropshadow)" style="fill:#ccc; stroke: none;"/> <path transform="translate( 10 10 )" d="M207.5,207.5 L111.069941800918,23.7678746769589 A207.5,207.5 0, 0,1, 207.5 0.0 Z" filter="url(#dropshadow)" style="fill: #ccc; stroke: none;"/> </g> <g> <path d="M207.5,207.5 L207.5,0.0 A207.5,207.5 0, 0,1, 413.487091375346 182.48863884702 Z" style="fill: #fff; stroke: none;"/> <path d="M207.5,207.5 L413.487091375346,182.48863884702 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" style="fill: #fff; stroke: none;"/> <path d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" style="fill: #fff; stroke: none;"/> <path transform="translate( -9.35016242685415 3.54604887042536 )" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 111.069941800918 23.7678746769589 Z" style="fill: #fff; stroke: none;"/> <path d="M207.5,207.5 L111.069941800918,23.7678746769589 A207.5,207.5 0, 0,1, 207.5 0.0 Z" style="fill: #fff; stroke: none;"/> </g> <g> <path class="fill1" d="M207.5,207.5 L207.5,0.0 A207.5,207.5 0, 0,1, 413.487091375346 182.48863884702 Z" style="fill: #ff0000; fill-opacity: 0.7; stroke: none; stroke-width: 1px;"/> <text x="345.097951584965" class="dataPointLabel" y="52.1840197544965" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;; fill: #000000;text-anchor:middle; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;stroke: #fff; stroke-width: 2;">Internet 23%</text> <text x="345.097951584965" class="dataPointLabel" y="52.1840197544965" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;; fill: #000000;text-anchor:middle; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">Internet 23%</text> <path class="fill2" d="M207.5,207.5 L413.487091375346,182.48863884702 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" style="fill: #0000ff; fill-opacity: 0.7; stroke: none; stroke-width: 1px;"/> <text x="378.269152172934" class="dataPointLabel" y="325.373434946715" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;; fill: #000000;text-anchor:middle; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;stroke: #fff; stroke-width: 2;">TV 23%</text> <text x="378.269152172934" class="dataPointLabel" y="325.373434946715" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;; fill: #000000;text-anchor:middle; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">TV 23%</text> <path class="fill3" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 257.158000339668 408.970427115906 Z" style="fill-opacity: 0.7; fill: #00ff00; stroke: none; stroke-width: 1px;"/> <path transform="translate( -9.35016242685415 3.54604887042536 )" class="fill4" d="M207.5,207.5 L257.158000339668,408.970427115906 A207.5,207.5 0, 0,1, 111.069941800918 23.7678746769589 Z" style="fill-opacity: 0.7;fill: #ffcc00; stroke: none; stroke-width: 1px;"/> <text x="4.1339672159223" class="dataPointLabel" y="284.626562931752" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;; fill: #000000; text-anchor:middle; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;stroke: #fff; stroke-width: 2;">Magazine 46%</text> <text x="4.1339672159223" class="dataPointLabel" y="284.626562931752" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;; fill: #000000; text-anchor:middle; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">Magazine 46%</text> <path class="fill5" d="M207.5,207.5 L111.069941800918,23.7678746769589 A207.5,207.5 0, 0,1, 207.5 0.0 Z" style="fill-opacity: 0.7; fill: #00ccff; stroke: none; stroke-width: 1px;"/> <text x="157.841999660332" class="dataPointLabel" y="6.02957288409419" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;; fill: #000000;text-anchor:middle; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;stroke: #fff; stroke-width: 2;">Radio 8%</text> <text x="157.841999660332" class="dataPointLabel" y="6.02957288409419" style="fill: #000000; text-anchor:middle; font-size: 10px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;; fill: #000000;text-anchor:middle; font-size: 12px; font-family: &quot;Arial&quot;, sans-serif; font-weight: normal;">Radio 8%</text> </g> </g></svg>
    94. 94. <rect x="0" class="key2" y="17" height="12"style="fill: #0000ff; fill-opacity: 0.7;stroke: none; stroke-width: 1px;"width="12"/> <text x="17" class="keyText" y="29"style="fill: #000000; text-anchor:start;font-size: 10px; font-family:&quot;Arial&quot;, sans-serif; font-weight:normal;">TV [3]</text> <rect x="0" class="key3" y="34"height="12" style="fill-opacity: 0.7; fill:#00ff00; stroke: none; stroke-width: 1px;"width="12"/> <text x="17" class="keyText" y="46"
    95. 95. http://www.drawastickman.com/
    96. 96. http://html5demos.com/
    97. 97. microformats
    98. 98. Vragen

    ×