Fronteers iprofs

1,407 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,407
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide




  • vandaag gaan we het hebben over de ‘saaie’ zaken van html5
  • Ik ga het niet hebben over de ‘sexy’ 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 ‘date’ gedrag te bouwen...








  • demo pagina







  • safari desktop liegt over type=”url” voor mobile safari




  • denk aan je opvolger, doe het consistent.





  • Fronteers iprofs

    1. 1. fronteers - iprofs Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    2. 2. Hallo ik ben Wilfred @wnas wnas.nl HTML 5 - The not quite so sexy bits.
    3. 3. Freelance fronteer. ANWB Essent ING Agis Politie .... HTML 5 - The not quite so sexy bits.
    4. 4. Sinds... 1996 HTML 5 - The not quite so sexy bits.
    5. 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. 6. Canvas Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    7. 7. SVG Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    8. 8. Video Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    9. 9. CSS 3 Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    10. 10. Javascript api’s Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    11. 11. Geolocation Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    12. 12. websockets Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    13. 13. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    14. 14. ook niet over: Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    15. 15. ninja’s Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    16. 16. rockstars Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    17. 17. Nu Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    18. 18. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    19. 19. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    20. 20. HTML5 Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    21. 21. voor luie mensen Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    22. 22. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    23. 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. 24. <!DOCTYPE HTML> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    25. 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. 26. Semantiek Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    27. 27. wat betekent: Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    28. 28. <div></div> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    29. 29. <span></span> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    30. 30. Niets Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    31. 31. terwijl Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    32. 32. <article></article> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    33. 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. 34. <section></section> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    35. 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. 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. 37. <hgroup></hgroup> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    38. 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. 39. niet in IE Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    40. 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. 41. <div class=”article”></div> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    42. 42. wel in IE Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    43. 43. form elementen Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    44. 44. <input> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    45. 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. 46. webkit Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    47. 47. Javascript Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    48. 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. 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. 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. 51. <input required> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    52. 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. 53. Meer input HTML 5 - The not quite so sexy bits.
    54. 54. <input type=”date”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    55. 55. <input type=”text”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    56. 56. dus: Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    57. 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. 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. 59. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    60. 60. Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    61. 61. <input type=”email”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    62. 62. <input type=”url”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    63. 63. <input type=”range”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    64. 64. <input type=”number”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    65. 65. Niet consistent Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    66. 66. Presentatie Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    67. 67. <input type=”range”> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    68. 68. safari HTML 5 - The not quite so sexy bits.
    69. 69. opera HTML 5 - The not quite so sexy bits.
    70. 70. firefox HTML 5 - The not quite so sexy bits.
    71. 71. Leuk? Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    72. 72. grote verschillen Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    73. 73. niet volledig Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    74. 74. leugens Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    75. 75. Toekomst Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    76. 76. overdraagbaarheid Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    77. 77. maar een verzoek Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    78. 78. <input> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    79. 79. <input type=”text” /> Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    80. 80. meer semantiek Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    81. 81. logischer Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    82. 82. vragen? Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    83. 83. bedankt Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl
    84. 84. http://www.slideshare.net/wnas Wilfred Nas - HTML 5 - The not quite so sexy bits. wnas.nl | twitter.com/wnas | wilfred@wnas.nl

    ×