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
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
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
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
vandaag gaan we het hebben over de &#x2018;saaie&#x2019; zaken van html5
Ik ga het niet hebben over de &#x2018;sexy&#x2019; zaken. dus geen
boring
saai en met 3 codecs nu al een pita...
welkom -moz -webkit en andere verschillen...
met onvolledige ondersteuning en verschillen
real life
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...
en dat is positief bedoelt...
een goede ontwikkelaar is een luie ontwikkelaar :)
Hier ben ik te blond voor.
al laat ik dit ook door textmate zetten :)
type en language werden toch al genegeerd door browsers...
demo pagina
wordt text in ie en firefox
en gebruik javascript om het &#x2018;date&#x2019; gedrag te bouwen...
demo pagina
safari desktop liegt over type=&#x201D;url&#x201D; voor mobile safari