• Like
  • Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

HTML 5 - en introduksjon

  • 2,313 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,313
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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