Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5

 HTML5

HTML5

Baae851973798a0cd027b5661e19c2e3?s=128

Gregory

May 25, 2013
Tweet

Transcript

  1. HTML5 CGC, 25 mei 2013

  2. None
  3. None
  4. Mijn naam is Gregory

  5. Webdesign en grafisch ontwerp www.desikn.be

  6. @desiknr

  7. GESCHIEDENIS RICH MEDIA WEB FORMS 2.0 SEMANTICS HTML5 VANDAAG FIREFOX

    OS
  8. GESCHIEDENIS

  9. HTML (HyperText Markup Language) is de universele taal van het

    wereldwijde web.
  10. Sir Tim Berners-Lee schreef in 1991 een document “HTML Tags”,

    waarin minder dan een dozijn elementen beschreven werd om webpagina's te maken. Tags bestonden al in SGML (Standard Generalized Markup Language).
  11. Van HTML, HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0

    tot HTML 4.01 in 1999. XHTML 1 was HTML als XML, maar Internet Explorer ondersteunde geen XHTML mime-type. XHTML 2 was de toekomst.
  12. XHTML 2 en HTML 5 (met spatie) werden ontwikkeld door

    W3C. HTML5 (zonder spatie) werd ontwikkeld door WHATWG. World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG)
  13. HTML5 “Candidate Recommendation” (CR) in 2012. HTML5 “Proposed Recommendation” (PR)

    in 2022.
  14. HTML5 is voortzetting van HTML 4.01.

  15. Vereenvoudiging

  16. HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="file.js"></script> <link

    rel="stylesheet" type="text/css" href="file.css">
  17. HTML5 <meta charset="UTF-8"> <script src="file.js"></script> <link rel="stylesheet" href="file.css">

  18. HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  19. XHTML 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  20. HTML5 <!DOCTYPE html>

  21. HTML5 Demo's HTML5 demo's en voorbeelden html5demos.com

  22. RICH MEDIA

  23. Canvas

  24. Het canvas element is een variabele om dynamische afbeeldingen te

    creeëren. <canvas id=”mijn-eerste-canvas” width=”320” height”240”></canvas> De inhoud kan op ieder moment geüpdatet worden via JavaScript. Ideaal voor tools en games die vroeger een plugin zoals bv. Flash nodig hadden. speckyboy.com/2011/12/07/20-amazing-implementations-of-html5-canvas
  25. Audio

  26. Een audio bestand in een webpagina plaatsen. <audio src=”mijn-audio-bestand.ogg” loop

    controls></audio> <audio autoplay loop controls> <source src=”mijn-audio-bestand.ogg”> <source src=”mijn-audio-bestand.mp3”> </audio>
  27. Video

  28. Een video bestand in een webpagina plaatsen. <video src=”mijn-video-bestand.webm” controls

    width=”320” height=”240”></video> <video autoplay controls width=”320” height=”240” poster=”mijn-video-poster.jpg”> <source src=”mijn-video-bestand.webm”> <source src=”mijn-video-bestand.mp4”> </video>
  29. Browser controls

  30. None
  31. WEB FORMS 2.0

  32. Momenteel beperkte ondersteuning in browsers.

  33. Placeholder Plaatst tekst in een veld. <label for=”hobbies”>Uw hobbies</label> <input

    id=”hobbies” name=”hobbies” type=”text” placeholder=”Computerclub”>
  34. Autofocus Plaatst cursor in een veld. <label for=”nieuws”>Deel uw laatste

    nieuws ...</label> <input id=”nieuws” name=”nieuws” type=”text” autofocus>
  35. Required Verplicht u om het veld in te vullen. <label

    for=”wachtwoord”>Uw wachtwoord</label> <input id=”wachtwoord” name=”wachtwoord” type=”password” required>
  36. Autocomplete Automatisch aanvullen van velden. <input name=”eenmalig-token” type=”text” autocomplete=”off”>

  37. Datalist Mengt een input met een select. <label for=”wereld”>Mijn wereld</label>

    <input id=”wereld” name=”wereld” type=”text” list=”planeten”> <datalist id=”planeten”> <option value=”Mercurius”> <option value=”Venus”> <option value=”Aarde”> <option value=”Mars”> <option value=”Jupiter”> <option value=”Saturnus”> <option value=”Uranus”> <option value=”Neptunus”> </datalist>
  38. Input types

  39. HTML 4.01 <input id=”naam” name=”naam” type=”text”> <input id=”wachtwoord” name=”wachtwoord” type=”password”>

    <input id=”keuze” name=”keuze” type=”radio”> <input id=”keuze” name=”keuze” type=”checkbox”> <input id=”annuleren” name=”annuleren” type=”reset”> <input id=”versturen” name=”versturen” type=”submit”>
  40. Het type attribuut wordt uitgebreid in HTML5.

  41. Contact informatie <input id=”e-mail” name=”e-mail” type=”email”> <input id=”website” name=”website” type=”url”>

    <input id=”telefoon” name=”telefoon” type=”tel”>
  42. Email in Opera

  43. Email op iPhone

  44. URL op iPhone

  45. Tel op iPhone en Android

  46. Zoeken <input id=”zoeken” name=”zoeken” type=”search”>

  47. Search in Safari

  48. Search op iPhone

  49. Sliders en spinners <input id=”aantal” name=”aantal” type=”range”> <input id=”aantal” name=”aantal”

    type=”number”>
  50. Number in Opera

  51. Number op iPhone en Android

  52. Range in Chrome

  53. Datum en tijd <input id=”datum” name=”datum” type=”date”> <input id=”datum” name=”datum”

    type=”datetime”> <input id=”datum” name=”datum” type=”datetime-local”> <input id=”datum” name=”datum” type=”month”> <input id=”datum” name=”datum” type=”week”> <input id=”datum” name=”datum” type=”time”>
  54. Date in Opera

  55. Datetime in Opera

  56. Datetime-local in Opera

  57. Month in Opera

  58. Week in Opera

  59. Time in Opera

  60. Kleurkiezer <input id=”kleur” name=”kleur” type=”color”> Momenteel enkel in Chrome en

    Opera.
  61. Color in Windows XP

  62. Kan je input types een eigen stijl geven? Nee. Zou

    je input types een eigen stijl moeten geven? Nee, het internet gaat niet over controle.
  63. SEMANTICS

  64. De semantiek of betekenisleer is een wetenschap die zich bezighoudt

    met de betekenis van symbolen.
  65. Enkele nieuwe elementen die geïntroduceerd worden.

  66. Nieuwe elementen

  67. Mark Markeren van een woord of zin in bv. zoekresultaten.

    <h1>Zoekresultaten voor 'CGC'</h1> <ol> <li>De computerclub voor iedereen is <mark>CGC</mark></i> </ol>
  68. Time Tijd, dagen, weken en jaar aanduiding. <time datetime=”2013-05-25”>25 mei

    2013</time>
  69. Meter Iets dat al gemeten is. <meter>9 van de 10

    katten</meter> <meter max=”10”>9 katten</meter>
  70. Progress Vooruitgang of iets dat bezig is te meten. Uw

    profiel is <progress>60 %</progress> compleet. <progress min=”0” max=”100” value=”60”></progress>
  71. Structuur

  72. Gaat over inhoud, niet over plaats!

  73. Header Bevat inleidende inhoud of navigatie. <section> <header> <h1>Een mooie

    presentatie</h1> </header> <p>De presentatie over HTML5.</p> </section>
  74. Footer Informatie over het bevattende element. <section> <header> <h1>Een mooie

    presentatie</h1> </header> <p>De presentatie over HTML5.</p> <footer> <p>Door Gregory</p> </footer> </section>
  75. Aside Inhoud dat los staat van de hoofdinhoud. <aside>Presentaties</aside>

  76. Nav Navigatie. <nav> <ul> <li><a href=”http://cgcvzw.be/”>Home</a></li> <li><a href=”presentaties”>Presentaties</a></li> <li><a href=”over-ons”>Over

    ons</a></li> <li><a href=”contact”>Contact</a></li> </ul> </nav>
  77. Section Gelijkaardig gerelateerde inhoud. <section> <header> <h1>Een mooie presentatie</h1> </header>

    <p>De presentatie over HTML5.</p> <footer> <p>Door Gregory</p> </footer> </section>
  78. Article Gelijkaardig gerelateerde vrijstaande inhoud. Verschil met section? Interpretatie! <article>

    <header> <h1>Een mooie presentatie</h1> </header> <p>De presentatie over HTML5.</p> <footer> <p>Gepubliceerd <time date=”2013-05-25” pubdate>Zaterdag, 25 mei 2013</time> Door Gregory</p> </footer> </article>
  79. HTML5 VANDAAG

  80. Styling

  81. HTML5 Shiv / HTML5 Shim <!--[if lt IE 9]> <script

    src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> code.google.com/p/html5shim
  82. Detectie

  83. Modernizr Detectie van o.a. input types, audio, video en canvas.

    Geen HTML5 Shiv script nodig. modernizr.com
  84. Validatie

  85. Validator.nu Living Validator validator.nu

  86. W3C Validator W3C Markup Validation Service (gebruikt Validator.nu parser) validator.w3.org

  87. FIREFOX OS

  88. Firefox OS Opensourcebesturingssysteem voor smartphones en tabletcomputers ontwikkeld door Mozilla.

    Het is gebaseerd op Linux en is zo ontworpen dat HTML5-applicaties direct kunnen integreren met de hardware met behulp van JavaScript.
  89. Firefox OS werd al gedemonstreerd op Android-compatibele smartphones en op

    de Raspberry Pi.
  90. Firefox OS screenshot

  91. Geeksphone

  92. Spaanse startup die smartphones produceert.

  93. Keon 1GHz Qualcomm S1 Cortex A5-SoC (singlecore-processor) RAM 512MB Capaciteit

    4GB 3,5"-touchscreen Resolutie 480x320 pixels € 91
  94. Peak 1,2GHz Qualcomm Snapdragon S4-SoC (dualcore-processor) RAM 512MB Capaciteit 4GB

    4,3"-touchscreen (IPS) Resolutie 960x540 pixels (16:9) € 149
  95. Geeksphone Keon en Peak

  96. None
  97. Dank u voor uw aandacht!

  98. Bronnen HTML5 for Web Designers (Jeremy Keith) Wikipedia (www.wikipedia.org) W3

    Schools (www.w3schools.com) HTML5 Doctor (www.html5doctor.com)