HTML 5 - en introduksjon

HTML 5 en introduksjon

Carl Mathisen

HTML 5 en introduksjon

Historie

HTML 4 1999 - 2001

XHTML 1.0 2002 - 2006

HTML 5 2007 - nå

WebKit

Alle disse støtter HTML 5

Hvorfor?

Hvorfor HTML 5? Ingen bruker XHTML 2

Hvorfor HTML 5? Støtter eksisterende kode

Hvorfor HTML 5? Fjerner kompleksitet

Hvorfor HTML 5? Ny funksjonalitet

Keep it simple, stupid. Markup

HTML 4.01 doctype <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 //EN” “http://www.w3.org/TR/html4/strict.dtd”>

Nå <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 //EN” “http://www.w3.org/TR/html4/strict.dtd”>

HTML 4.01 metatags <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>

HTML 4.01 metatags <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”> Nå <meta charset=“UTF-8”>

HTML 4.01 script-tag <script type=“text/javascript” src=“fil.js”></script>

HTML 4.01 script-tag <script type=“text/javascript” src=“fil.js”></script> Nå <script type=“text/javascript” src=“fil.js”></script>

HTML 4.01 link-tag <link rel=“stylesheet” type=“text/css” href=“fil.css”>

HTML 4.01 link-tag <link rel=“stylesheet” type=“text/css” href=“fil.css”> Nå <link rel=“stylesheet” type=“text/css” href=“fil.css”>

Strenge markup-regler <img src=“bilde.jpg” alt=“Mitt bilde” /> <br />

Strenge markup-regler <img src=“bilde.jpg” alt=“Mitt bilde” /> <br /> Nå er alt lov <img src=bilde.jpg> <br>

Ha det bra! frame, frameset, noframes

Don’t call us, we’ll call you! font, big, center, strike

Block-level links <a href=“/carl”> <h2>Om Carl</h2> <p>Trykk for å lese mer om meg</p> </a>

So far, so good

Flunkende ny semantikk

Layout-elementer

section? article? aside?

section

section > article

article > section

Layout-elementer <div class=“header”> <h1>Tittel</h1> </div>

Layout-elementer <div class=“header”> <h1>Tittel</h1> </div> <header> <h1>Tittel</h1> </header>

Layout-elementer

Bruk dem allerede i dag section, article, header, footer, nav, aside { display: block; }

Layout-elementer

html5shiv

Plassholder <input name=“search” placeholder=“Your name” /> http://diveintohtml5.org/forms.html

Autofokus <input name=“field” autofocus /> http://diveintohtml5.org/forms.html

Epostadresse <input name=“field” type=“email” /> http://diveintohtml5.org/forms.html

Nettadresse <input name=“field” type=“url” /> http://diveintohtml5.org/forms.html

Tall <input name=“field” type=“number” /> http://diveintohtml5.org/forms.html

Rekkevidde/bredde <input name=“field” type=“range” min=“1” max=“10” value=“8” /> http://diveintohtml5.org/forms.html

Dato <input name=“field” type=“date”/> <input name=“field” type=“datetime”/> http://diveintohtml5.org/forms.html

Søkefelt <input name=“field” type=“search” /> http://diveintohtml5.org/forms.html

Fargevelger <input name=“field” type=“color” /> http://diveintohtml5.org/forms.html

Film og lyd <video> <audio>

Native musikkavspiller jPlayer jQuery med HTML 5 eller Flash

Helt OK! Men sikkert lurt å ha Flash i bakhånd

SVG/Canvas

jQuery Visualize

37signals Chalk

SVG/Canvas

SVG/Canvas Raphael

Web storage Content editable WebSocket Data-attributter WebGL Mye mer Geolocation Drag and drop Web workers Query selector

rgb div { color: rgb(255, 0, 0); } /* #f00 */

rgb & opacity div { color: rgb(255, 0, 0); } /* #f00 */ div { color: rgb(255, 0, 0, 0.5); }

background-size div { background-position: top left }

background-size div { background-position: top left } div { background-size: 30px 60px }

Lineær gradient div { background-color: #1a82f7; background: url(bakgrunn.png); }

Lineær gradient div { background: -moz-gradient(100%, 100%, 90deg, #2f2727, #1a82f7); }

border-radius div { border-radius: 10px; }

box-shadow div { box-shadow: 0 0 10px 10px #000; }

text-shadow div { color: #fff; text-shadow: 0 2px 4px #000; }

Opera-logo av kun CSS

Google WebFonts

Testing av fonter

css3please.com

Preﬁx Firefox: -moz-box-shadow Safari: -webkit-box-shadow Opera: -o-box-shadow IE: -ms-box-shadow Standard: box-shadow http://diveintohtml5.org/forms.html

Eksempler

Eksploderende video

rumpetroll.com

Quake II for HTML 5

apple.com/html5

html5demos.com

Modernizr

Modernizr if(Modernizr.canvas) { // her kan vi tegne vektorgrafikk }

html5readiness.com

diveintohtml5.org

books.alistapart.com

Takk for meg

Ta kontakt! Twitter: @carlmathisen www.kamikazemedia.no

HTML 5 - en introduksjon

by Kamikaze Media AS on Nov 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 12

Statistics

HTML 5 - en introduksjon — Presentation Transcript

http://kontrib.it	7
http://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com	5