Wilfred NasFront end developeranwb, ing, agis, vst-pn, essent...wnas.nl@wnas
What is it all about?
HTML tags1991
HTML 2.01995
HTML 3.2januari 1997
HTML 4.0december 1997
XHTML 1.0januari 2000
Mime types anyone?
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
<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)
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?”
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 class=”searchfieldplaceholder:searchfield?” >
<input type=search placeholder=”searchfield?”>
// 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=”date” value=”2011-07-07”>
http://wnas.nl/html5-safe-usage-2
<video>made easy...
<video width="320" height="240" controls>  <source  src="movie.mp4"  type=video/mp4; codecs="avc1.42E01E, mp4a.40.2">  <so...
http://diveintohtml5.org/video.html
Html5 nl
Html5 nl
Html5 nl
Html5 nl
Html5 nl
Html5 nl
Upcoming SlideShare
Loading in...5
×

Html5 nl

1,520

Published on

presentation about html5 for java developers

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,520
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
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
  • \n
  • \n
  • and the working group was shut down.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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
  • \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
  • De meest makkelijke manier om een input element te definieren.\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
  • opera\n
  • firefox\n
  • webkit\n
  • \n
  • \n
  • \n
  • \n
  • Html5 nl

    1. 1. Wilfred NasFront end developeranwb, ing, agis, vst-pn, essent...wnas.nl@wnas
    2. 2. What is it all about?
    3. 3. HTML tags1991
    4. 4. HTML 2.01995
    5. 5. HTML 3.2januari 1997
    6. 6. HTML 4.0december 1997
    7. 7. XHTML 1.0januari 2000
    8. 8. Mime types anyone?
    9. 9. XHTML 1.1march 2001
    10. 10. XHTML 2.0....
    11. 11. <!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>
    12. 12. hetzelfde als HTML 4
    13. 13. Maar met meer:bling
    14. 14. <!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>
    15. 15. <!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>HTML 5</title></head><body> <p>foo</p></body></html>
    16. 16. <!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>HTML 5</title></head><body> <p>foo</p></body></html>
    17. 17. StructuurLayout elementen
    18. 18. Ouddivspanp(body)
    19. 19. <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>
    20. 20. <header> <nav> <ul> <li><a href=foo.html>foo</a></li> ... </ul> </nav> <hgroup> <h1>header</h1> <h2>tagline</h2> </hgroup></header>
    21. 21. Newarticle meteraside navaudio outputcanvas progressdetails sectionfigcaption summaryfigure timefooter videoheaderhgroupmark
    22. 22. En...waarom zou ik?
    23. 23. SemantiekHoe duidelijker, hoe beter je te begrijpen bent.
    24. 24. <div>Betekent niets.
    25. 25. <header>beter
    26. 26. <header> <hgroup> <h1>header</h1> <h2>tagline</h2> </hgroup></header><section> <article> <hgroup> <h1>header</h1> <time>2011-06-08</time> </hgroup> <p>fooooo</p> <section> <h1>header</h1> <p>baaaaaar</p> <footer>copy</footer> </section> <aside> <time>22.00</time> </aside> </article></section>
    27. 27. <article>“Like an article of clothing, not a newspaper article.” (@brucel)
    28. 28. Maar wat doen we metoudere browsers? ( kuch IE )
    29. 29. <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    30. 30. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }
    31. 31. “wel of geen aanhalingstekens?”
    32. 32. class=fooclass=foo barclass=”foo bar”
    33. 33. UPPERCASE vs lowercase
    34. 34. <INPUT type=”TEXT” Class=‘foo bar’ />
    35. 35. use “quotes” and lowercase.
    36. 36. Form elementenDingen die je al lang wilde...
    37. 37. <input>
    38. 38. <input type=text class=”searchfieldplaceholder:searchfield?” >
    39. 39. <input type=search placeholder=”searchfield?”>
    40. 40. // build an input to test for html5 attr.var i = document.createElement(input);// see if placeholder is supportedif ( !(placeholder in i) ) { //provide placeholder support}
    41. 41. searchtel timeurl datetime-email localdatetime numberdate rangemonth colorweek
    42. 42. autocomplete height andnovalidate widthautofocus listform minform overrides max formaction, step formenctype, multiple formmethod, pattern (regexp)formnovalidate, placeholder formtarget required
    43. 43. <input type=email>
    44. 44. <input type=email required>(alle browsers)
    45. 45. <input type=email required>(indien niet ondersteund)
    46. 46. <input type=email required>(alle browsers, met javascript)
    47. 47. <input type=”date” value=”2011-07-07”>
    48. 48. http://wnas.nl/html5-safe-usage-2
    49. 49. <video>made easy...
    50. 50. <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>
    51. 51. http://diveintohtml5.org/video.html
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×