SlideShare ist ein Scribd-Unternehmen logo
1 von 84
fronteers - iprofs


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Hallo
ik ben Wilfred
@wnas
wnas.nl




    HTML 5 - The not quite so sexy bits.
Freelance fronteer.
ANWB
Essent
ING
Agis
Politie
....




    HTML 5 - The not quite so sexy bits.
Sinds...
1996




   HTML 5 - The not quite so sexy bits.
HTML5
         The not quite so sexy bits



Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Canvas


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
SVG


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Video


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
CSS 3


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Javascript api’s


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Geolocation


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
websockets


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
ook niet over:


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
ninja’s


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
rockstars


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Nu


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
HTML5


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
voor luie mensen


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">




    Wilfred Nas - HTML 5 - The not quite so sexy bits.
    wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<!DOCTYPE HTML>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<script src=”script.js”></script>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Semantiek


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
wat betekent:


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<div></div>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<span></span>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Niets


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
terwijl


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<article></article>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
The article element represents a self-contained composition in a document, page, application, or site and that is,
in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or
newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other
independent item of content.




         Wilfred Nas - HTML 5 - The not quite so sexy bits.
         wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<section></section>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered
sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and
contact information.




    Wilfred Nas - HTML 5 - The not quite so sexy bits.
    wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<header></header>
<article>
  <time></time>
</article>
<nav></nav>
<aside></aside>
<footer></footer>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<hgroup></hgroup>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<hgroup>
  <h1>heading 1</h1>
  <h2>heading 2</h1>
</hgroup>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
niet in IE


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<!--[if IE]>
<script
  src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->




         Wilfred Nas - HTML 5 - The not quite so sexy bits.
         wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<div class=”article”></div>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
wel in IE


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
form elementen


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input
  type=”text”
  placeholder=”foo”>



  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
webkit


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Javascript


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
var i = document.createElement('input');




      Wilfred Nas - HTML 5 - The not quite so sexy bits.
      wnas.nl | twitter.com/wnas | wilfred@wnas.nl
// Check if "placeholder" attribute
if ( !('placeholder' in i) ) {
  $.getScript('js/placeholder.js');
}




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
http://www.gethifi.com/blog/nmcformhelper




Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input
  required>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<!-- Only accept US zip codes -->
<input
  pattern="(^d{5}$)|(^d{5}-d{4}$)"
  placeholder="US zip codes only" />




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Meer
input




    HTML 5 - The not quite so sexy bits.
<input type=”date”>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input type=”text”>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
dus:


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input
  type=”date”
  class=”input-date”>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input
  type="date"
  min="2010-01-01">




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input type=”email”>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input type=”url”>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input type=”range”>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input type=”number”>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Niet consistent


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Presentatie


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input type=”range”>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
safari
   HTML 5 - The not quite so sexy bits.
opera
  HTML 5 - The not quite so sexy bits.
firefox
  HTML 5 - The not quite so sexy bits.
Leuk?


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
grote verschillen


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
niet volledig


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
leugens


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
Toekomst


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
overdraagbaarheid


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
maar een verzoek


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input>




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
<input type=”text” />




  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl
meer semantiek


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
logischer


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
vragen?


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
bedankt


Wilfred Nas - HTML 5 - The not quite so sexy bits.
wnas.nl | twitter.com/wnas | wilfred@wnas.nl
http://www.slideshare.net/wnas



  Wilfred Nas - HTML 5 - The not quite so sexy bits.
  wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Weitere ähnliche Inhalte

Andere mochten auch

Bestpractices nl
Bestpractices nlBestpractices nl
Bestpractices nlWilfred Nas
 
Javascript is evil - fronteers 2013 jam sessions
Javascript is evil - fronteers 2013 jam sessionsJavascript is evil - fronteers 2013 jam sessions
Javascript is evil - fronteers 2013 jam sessionsWilfred Nas
 
front end workshop v3
front end workshop v3front end workshop v3
front end workshop v3Wilfred Nas
 
What has responsive web design done for us, so far.
What has responsive web design done for us, so far.What has responsive web design done for us, so far.
What has responsive web design done for us, so far.Wilfred Nas
 
CSS naming | ceci n'est pas un pipe
CSS naming | ceci n'est pas un pipeCSS naming | ceci n'est pas un pipe
CSS naming | ceci n'est pas un pipeWilfred Nas
 

Andere mochten auch (7)

Bestpractices nl
Bestpractices nlBestpractices nl
Bestpractices nl
 
Javascript is evil - fronteers 2013 jam sessions
Javascript is evil - fronteers 2013 jam sessionsJavascript is evil - fronteers 2013 jam sessions
Javascript is evil - fronteers 2013 jam sessions
 
front end workshop v3
front end workshop v3front end workshop v3
front end workshop v3
 
Html5 nl
Html5 nlHtml5 nl
Html5 nl
 
What has responsive web design done for us, so far.
What has responsive web design done for us, so far.What has responsive web design done for us, so far.
What has responsive web design done for us, so far.
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
CSS naming | ceci n'est pas un pipe
CSS naming | ceci n'est pas un pipeCSS naming | ceci n'est pas un pipe
CSS naming | ceci n'est pas un pipe
 

Fronteers iprofs

  • 1. fronteers - iprofs Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 2. Hallo ik ben Wilfred @wnas wnas.nl HTML 5 - The not quite so sexy bits.
  • 3. Freelance fronteer. ANWB Essent ING Agis Politie .... HTML 5 - The not quite so sexy bits.
  • 4. Sinds... 1996 HTML 5 - The not quite so sexy bits.
  • 5. HTML5 The not quite so sexy bits Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 6. Canvas Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 7. SVG Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 8. Video Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 9. CSS 3 Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 10. Javascript api’s Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 11. Geolocation Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 12. websockets Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 13. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 14. ook niet over: Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 15. ninja’s Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 16. rockstars Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 17. Nu Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 18. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 19. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 20. HTML5 Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 21. voor luie mensen Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 22. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 23. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 24. <!DOCTYPE HTML> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 25. <script src=”script.js”></script> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 26. Semantiek Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 27. wat betekent: Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 28. <div></div> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 29. <span></span> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 30. Niets Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 31. terwijl Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 32. <article></article> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 33. The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 34. <section></section> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 35. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 36. <header></header> <article> <time></time> </article> <nav></nav> <aside></aside> <footer></footer> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 37. <hgroup></hgroup> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 38. <hgroup> <h1>heading 1</h1> <h2>heading 2</h1> </hgroup> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 39. niet in IE Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 40. <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 41. <div class=”article”></div> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 42. wel in IE Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 43. form elementen Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 44. <input> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 45. <input type=”text” placeholder=”foo”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 46. webkit Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 47. Javascript Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 48. var i = document.createElement('input'); Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 49. // Check if "placeholder" attribute if ( !('placeholder' in i) ) { $.getScript('js/placeholder.js'); } Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 50. http://www.gethifi.com/blog/nmcformhelper Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 51. <input required> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 52. <!-- Only accept US zip codes --> <input pattern="(^d{5}$)|(^d{5}-d{4}$)" placeholder="US zip codes only" /> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 53. Meer input HTML 5 - The not quite so sexy bits.
  • 54. <input type=”date”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 55. <input type=”text”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 56. dus: Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 57. <input type=”date” class=”input-date”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 58. <input type="date" min="2010-01-01"> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 59. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 60. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 61. <input type=”email”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 62. <input type=”url”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 63. <input type=”range”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 64. <input type=”number”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 65. Niet consistent Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 66. Presentatie Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 67. <input type=”range”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 68. safari HTML 5 - The not quite so sexy bits.
  • 69. opera HTML 5 - The not quite so sexy bits.
  • 70. firefox HTML 5 - The not quite so sexy bits.
  • 71. Leuk? Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 72. grote verschillen Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 73. niet volledig Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 74. leugens Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 75. Toekomst Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 76. overdraagbaarheid Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 77. maar een verzoek Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 78. <input> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 79. <input type=”text” /> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 80. meer semantiek Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 81. logischer Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 82. vragen? Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 83. bedankt Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
  • 84. http://www.slideshare.net/wnas Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl

Hinweis der Redaktion

  1. vandaag gaan we het hebben over de &amp;#x2018;saaie&amp;#x2019; zaken van html5
  2. Ik ga het niet hebben over de &amp;#x2018;sexy&amp;#x2019; zaken. dus geen
  3. boring
  4. saai en met 3 codecs nu al een pita...
  5. welkom -moz -webkit en andere verschillen...
  6. met onvolledige ondersteuning en verschillen
  7. real life
  8. Ik wil het hebben over de zaken die je nu aan je baas kunt verkopen. Niet waar je ons mee kunt impressen. Het gaat namelijk over websites voor echte mensen en echte bedrijven die ervoor betalen...
  9. en dat is positief bedoelt...
  10. een goede ontwikkelaar is een luie ontwikkelaar :)
  11. Hier ben ik te blond voor.
  12. al laat ik dit ook door textmate zetten :)
  13. type en language werden toch al genegeerd door browsers...
  14. demo pagina
  15. wordt text in ie en firefox
  16. en gebruik javascript om het &amp;#x2018;date&amp;#x2019; gedrag te bouwen...
  17. demo pagina
  18. safari desktop liegt over type=&amp;#x201D;url&amp;#x201D; voor mobile safari
  19. denk aan je opvolger, doe het consistent.