Your SlideShare is downloading. ×
0
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
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
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
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
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
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
Html5 intro
Html5 intro
Html5 intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 intro

6,080

Published on

introduction into html5 for #cascadis

introduction into html5 for #cascadis

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

No Downloads
Views
Total Views
6,080
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • goedemiddag mensen, ik ben Wilfred Nas ik doe front end ontwikkeling. dit doe ik al zo’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’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 ‘placeholder’.\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
  • Transcript

    • 1. Wilfred NasFront end developeranwb, ing, agis, vst-pn, essent, Min. VWS..wnas.nl@wnas
    • 2. HTML5Praktisch vandaag.
    • 3. What is it all about?
    • 4. Eerst een korte geschiedenisles...
    • 5. HTML tags1991
    • 6. HTML 2.01995
    • 7. HTML 3.2januari 1997
    • 8. HTML 4.0december 1997
    • 9. XHTML 1.0januari 2000
    • 10. Mime types anyone?
    • 11. xhtml-1.0 == html-4.0
    • 12. maar dan met een xml-syntax
    • 13. XHTML 1.1march 2001
    • 14. XHTML 2.0....
    • 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. hetzelfde als HTML 4
    • 17. Maar met meer:bling
    • 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. <!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>HTML 5</title></head><body> <p>foo</p></body></html>
    • 20. <!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>HTML 5</title></head><body> <p>foo</p></body></html>
    • 21. StructuurLayout elementen
    • 22. Ouddivspanp(body)
    • 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. <header> <nav> <ul> <li><a href=foo.html>foo</a></li> ... </ul> </nav> <hgroup> <h1>header</h1> <h2>tagline</h2> </hgroup></header>
    • 25. Newarticle meteraside navaudio outputcanvas progressdetails sectionfigcaption summaryfigure timefooter videoheaderhgroupmark
    • 26. En...waarom zou ik?
    • 27. SemantiekHoe duidelijker, hoe beter je te begrijpen bent.
    • 28. <div>Betekent niets.
    • 29. <header>beter
    • 30. “seo”
    • 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. <article>“Like an article of clothing, not a newspaper article.” (@brucel)
    • 33. <article>Iets wat op zich zelf staat.
    • 34. <article>ook makkelijk voor cms makers.
    • 35. <article>ook makkelijk voor cms makers.
    • 36. Maar wat doen we metoudere browsers? ( kuch IE )
    • 37. <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    • 38. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }
    • 39. “wel of geen aanhalingstekens?”
    • 40. PragmatischGebruik wat mensen al doen.
    • 41. class=fooclass=foo barclass=”foo bar”
    • 42. UPPERCASE vs lowercase
    • 43. <INPUT type=”TEXT” Class=‘foo bar’ />
    • 44. use “quotes” and lowercase.
    • 45. Form elementenDingen die je al lang wilde...
    • 46. <input>
    • 47. <input type=”text”>
    • 48. <input type=”text” class=”search placeholder:uw_zoekterm” >
    • 49. <input type=”search” placeholder=”uw zoekopdracht”>
    • 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. searchtel timeurl datetime-email localdatetime numberdate rangemonth colorweek
    • 52. autocomplete height andnovalidate widthautofocus listform minform overrides max formaction, step formenctype, multiple formmethod, pattern (regexp)formnovalidate, placeholder formtarget required
    • 53. <input type=”email”>
    • 54. <input type=”email” required>(alle browsers)
    • 55. <input type=”email” required>(indien niet ondersteund)
    • 56. <input type=”email” required>(alle browsers, met javascript)
    • 57. <input type=”email”>
    • 58. <input type=”url”>
    • 59. <input type=”date” value=”2011-06-07”>
    • 60. <input pattern=”[1-9][0-9]{3}s?[a-zA-Z]{2}” required>(http://html5pattern.com/)
    • 61. <input type=email required>(stolen slides following)
    • 62. <input type=email title=”So you tried to skip me?” required>
    • 63. <input type="text" pattern="d{2}-d{5}" x-moz-errormessage="PLEASE, just do itright!">
    • 64. elm.setCustomValidity("No, thats wrong!");
    • 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. (End of stolen slides. Thanks to @robertnyman)
    • 67. http://wnas.nl/html5-safe-usage-2
    • 68. <video>made easy...
    • 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. Ipad, Iphone
    • 71. look ma, no flash!
    • 72. <video width="320" height="240" controls> <source src="movie.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"></video>
    • 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. http://diveintohtml5.info/video.html
    • 75. Meer
    • 76. Cookies
    • 77. Local storagesession storage
    • 78. <html manifest=”cache.manifest”>
    • 79. CACHE MANIFESTstyle.cssscript.jslogo.png
    • 80. @FontfaceTypografie op het web.
    • 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. Media queriesCSS3
    • 83. Media queriesCSS3
    • 84. Geolocation
    • 85. http://isgeolocationpartofhtml5.com/
    • 86. Maar wel leuk.
    • 87. navigator.geolocation.getCurrentPosition();
    • 88. Canvas
    • 89. geen plaatjes
    • 90. Nadelen.
    • 91. <div class="demo" id="canvaspie" width="600" height="200"></div>
    • 92. svg
    • 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. <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. http://www.drawastickman.com/
    • 96. http://html5demos.com/
    • 97. microformats
    • 98. Vragen

    ×