HTML 5 - en introduksjon

2,670 views

Published on

Lær mer om historien bak HTML5. Hva er nytt, og hvordan du kan benytte HTML5 og CSS3 allerede i dag.

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,670
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

HTML 5 - en introduksjon

  1. 1. HTML 5 en introduksjon
  2. 2. Carl Mathisen
  3. 3. HTML 5 en introduksjon
  4. 4. Historie
  5. 5. 1999 - 2001 HTML 4
  6. 6. 2002 - 2006 XHTML 1.0
  7. 7. 2007 - nå HTML 5
  8. 8. WebKit
  9. 9. Alle disse støtter HTML 5
  10. 10. Hvorfor?
  11. 11. Ingen bruker XHTML 2 Hvorfor HTML 5?
  12. 12. Støtter eksisterende kode Hvorfor HTML 5?
  13. 13. Fjerner kompleksitet Hvorfor HTML 5?
  14. 14. Ny funksjonalitet Hvorfor HTML 5?
  15. 15. Markup Keep it simple, stupid.
  16. 16. HTML 4.01 doctype <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 //EN” “http://www.w3.org/TR/html4/strict.dtd”>
  17. 17. Nå <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 //EN” “http://www.w3.org/TR/html4/strict.dtd”>
  18. 18. HTML 4.01 metatags <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
  19. 19. HTML 4.01 metatags <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”> Nå <meta charset=“UTF-8”>
  20. 20. HTML 4.01 script-tag <script type=“text/javascript” src=“fil.js”></script>
  21. 21. HTML 4.01 script-tag <script type=“text/javascript” src=“fil.js”></script> Nå <script type=“text/javascript” src=“fil.js”></script>
  22. 22. HTML 4.01 link-tag <link rel=“stylesheet” type=“text/css” href=“fil.css”>
  23. 23. HTML 4.01 link-tag <link rel=“stylesheet” type=“text/css” href=“fil.css”> Nå <link rel=“stylesheet” type=“text/css” href=“fil.css”>
  24. 24. Strenge markup-regler <img src=“bilde.jpg” alt=“Mitt bilde” /> <br />
  25. 25. Strenge markup-regler <img src=“bilde.jpg” alt=“Mitt bilde” /> <br /> Nå er alt lov <img src=bilde.jpg> <br>
  26. 26. frame, frameset, noframes Ha det bra!
  27. 27. font, big, center, strike Don’t call us, we’ll call you!
  28. 28. Block-level links <a href=“/carl”> <h2>Om Carl</h2> <p>Trykk for å lese mer om meg</p> </a>
  29. 29. So far, so good
  30. 30. semantikk Flunkende ny
  31. 31. Layout-elementer
  32. 32. section? article? aside?
  33. 33. aside
  34. 34. section
  35. 35. section > article
  36. 36. article > section
  37. 37. article > section
  38. 38. Layout-elementer <div class=“header”> <h1>Tittel</h1> </div>
  39. 39. Layout-elementer <div class=“header”> <h1>Tittel</h1> </div> <header> <h1>Tittel</h1> </header>
  40. 40. Layout-elementer
  41. 41. Bruk dem allerede i dag section, article, header, footer, nav, aside { display: block; }
  42. 42. Layout-elementer
  43. 43. html5shiv <!--[if lt IE 9]> <script src=“http:// html5shiv.googlecode.svn/trunk/ html5.js”></script> <![endif]-->
  44. 44. Forms
  45. 45. Plassholder <input name=“search” placeholder=“Your name” /> http://diveintohtml5.org/forms.html
  46. 46. Autofokus <input name=“field” autofocus /> http://diveintohtml5.org/forms.html
  47. 47. Epostadresse <input name=“field” type=“email” /> http://diveintohtml5.org/forms.html
  48. 48. Nettadresse <input name=“field” type=“url” /> http://diveintohtml5.org/forms.html
  49. 49. Tall <input name=“field” type=“number” /> http://diveintohtml5.org/forms.html
  50. 50. Rekkevidde/bredde <input name=“field” type=“range” min=“1” max=“10” value=“8” /> http://diveintohtml5.org/forms.html
  51. 51. Dato <input name=“field” type=“date”/> <input name=“field” type=“datetime”/> http://diveintohtml5.org/forms.html
  52. 52. Søkefelt <input name=“field” type=“search” /> http://diveintohtml5.org/forms.html
  53. 53. Fargevelger <input name=“field” type=“color” /> http://diveintohtml5.org/forms.html
  54. 54. Forms
  55. 55. Forms
  56. 56. <video> <audio> Film og lyd
  57. 57. Native musikkavspiller jPlayer jQuery med HTML 5 eller Flash
  58. 58. Helt OK! Men sikkert lurt å ha Flash i bakhånd
  59. 59. SVG/Canvas
  60. 60. jQuery Visualize
  61. 61. 37signals Chalk
  62. 62. SVG/Canvas
  63. 63. SVG/Canvas Raphael
  64. 64. Mye mer Content editable WebSocket Web workers Drag and drop Geolocation Web storage Query selector Data-attributter WebGL
  65. 65. CSS3
  66. 66. rgb div { color: rgb(255, 0, 0); } /* #f00 */
  67. 67. rgb & opacity div { color: rgb(255, 0, 0); } /* #f00 */ div { color: rgb(255, 0, 0, 0.5); }
  68. 68. background-size div { background-position: top left }
  69. 69. background-size div { background-position: top left } div { background-size: 30px 60px }
  70. 70. Lineær gradient div { background-color: #1a82f7; background: url(bakgrunn.png); }
  71. 71. Lineær gradient div { background: -moz-gradient(100%, 100%, 90deg, #2f2727, #1a82f7); }
  72. 72. border-radius div { border-radius: 10px; }
  73. 73. box-shadow div { box-shadow: 0 0 10px 10px #000; }
  74. 74. text-shadow div { color: #fff; text-shadow: 0 2px 4px #000; }
  75. 75. Opera-logo av kun CSS
  76. 76. Google WebFonts
  77. 77. Testing av fonter
  78. 78. css3please.com
  79. 79. Prefix Firefox: -moz-box-shadow Safari: -webkit-box-shadow Opera: -o-box-shadow IE: -ms-box-shadow Standard: box-shadow http://diveintohtml5.org/forms.html
  80. 80. Eksempler
  81. 81. Eksploderende video
  82. 82. rumpetroll.com
  83. 83. Quake II for HTML 5
  84. 84. apple.com/html5
  85. 85. html5demos.com
  86. 86. Modernizr
  87. 87. Modernizr if(Modernizr.canvas) { // her kan vi tegne vektorgrafikk }
  88. 88. html5readiness.com
  89. 89. diveintohtml5.org
  90. 90. books.alistapart.com
  91. 91. Takk for meg
  92. 92. Twitter: @carlmathisen www.kamikazemedia.no Ta kontakt!

×