html5 - en int teori
TRANSCRIPT
![Page 1: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/1.jpg)
Introduksjon til HTML5
Dag Tjemsland 4. november 2010
Epinova
![Page 2: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/2.jpg)
Demo
• http://www.thewildernessdowntown.com/ • http://www.tidsskriftet.no/
2 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 3: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/3.jpg)
Definisjon
• "HTML5 is designed to provide a comprehensive application development platform for Web pages that eliminates the need to install third-party browser plug-ins" PCMAG Encyclopedia
• For Rich Internet Applications, Web Applications (Google Apps, Wave, Facebook, Flickr, JayCut, Yammer, ProtoShare, EPiServer...)
• Bakoverkompatibel og tolerant
3 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 4: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/4.jpg)
Ikkje HTML5, men referert til av HTML5
• JavaScript • CSS3 • SVG – XML vektorgrafikk • Web Sockets - men også utviklet av WHATWG • • MathML • Web Storage • Web SQL Database • Indexed DB • Web Workers • Geolocation API
4 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 5: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/5.jpg)
Status spesifikasjon
• 2004: WHATWG • 2007: First W3C Working Draft • 2009: Last Call Working Draft fall 2009 • 2011: Call for contributions for the test suite • 2012: Candidate Recommendation • 2012: Test suite: 1st draft • 2015: Test suite: 2nd draft • 2019: Test suite: Final version • 2020: Last Call Working Draft – Reissued • 2022: Proposed Recommendation • http://blogs.techrepublic.com.com/programming-and-development/?p=718
5 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 6: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/6.jpg)
Status implementasjon 4/11-2010
http://html5test.com/ (max 300 poeng) • Chrome: 231 (nettlesermotor WebKit) • Safari: 208 OSX | 207 W7 (WebKit) • Opera: 159 (Presto) • Firefox: 139 (Gecko) • IE7 | IE8 | IE9: 12 | 27 | 96 (Trident)
Andre oversikter: • http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) • http://caniuse.com/
Ferskt fra pressa om implementering: • http://www.appleinsider.com/w3c_extremely_silly_html5_test_results_….html • http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041
6 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 7: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/7.jpg)
7 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 8: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/8.jpg)
Kort historie
• 2000: W3C XHTML 1.0, men blir mest brukt “på liksom" (egentlig drakonsk feilhåndtering med MIME type application/xhtml+xml)
• W3C XHTML 2.0 † 2006 RIP • 2004: W3C avstemming XML eller HTML? Utbrytergruppe WHATWG • 2006: Samarbeid WHATWG/W3C - men ikkje identisk spesifikasjon
8 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 9: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/9.jpg)
WHATWG
Web Hypertext Application Technolgy Working Group “Members”: • Anne van Kesteren, Opera • Brendan Eich, Mozilla • David Baron, Mozilla • David Hyatt, Apple • Dean Edwards, freelance • Håkon Wium Lie, Opera • Johnny Stenback, Mozilla • Maciej Stachowiak, Apple • Ian Hickson, Google (ex-Opera)
Hvem mangler?
9 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 10: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/10.jpg)
WHATWG prosess
• Vekt på mykje meir detaljert implementasjon og feilhåndtering • Basert på faktisk bruk av nettlesere og utviklerkode • Reversed engineering • Analyse, innspill, diskusjon • Editor-in-chief: Ian Hickson, Google tar beslutninger. Kan stoppes av
styringsgruppen
10 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 11: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/11.jpg)
Overblikk
• Semantikk (27 nye) • Skjema (13 nye) • Video og audio avspilling • 2D grafikk (canvas) • Redigering av websider • Dra og slipp • Offline bruk • Nettleser historikk håndtering • Dokument meldinger
11 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 12: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/12.jpg)
Start
<!DOCTYPE html> <html> <head> <meta charset=utf-8 />
12 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 13: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/13.jpg)
Seksjonert innhold - semantisk struktur
http://code.google.com/webstats/ • section • header • footer • nav • article • aside • hgroup
13 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 14: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/14.jpg)
14 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
section
header
footer
nav
article
article
aside
![Page 15: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/15.jpg)
15 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
div class=section
div class=header
div class=footer
div class=nav
div class=article
div class=article
div class=aside
![Page 16: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/16.jpg)
16 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
section
header
footer
article
section
article
section
section
article
header
article
small
![Page 17: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/17.jpg)
<section>
• gruppere innhold som er relatert
17 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 18: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/18.jpg)
<header>
• ikkje kun ein master <head>, kan bruke flere <header> innen andre seksjoner • <nav> tilhøyrer som regel <header>
18 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 19: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/19.jpg)
<footer>
• som <header> • informasjon om forfatter
19 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 20: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/20.jpg)
<nav>
• navigasjon som går igjen på fleire sider, treng ikkje kun vera global meny • men ikkje ei kvar lenkeliste
20 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 21: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/21.jpg)
<article>
• ein uavhengig og sjølvinkluderande innholdsdel: artikkel, forum innlegg, blogg kommentar, widget, gadget, etc
• som passer til å syndikerast eller porterast
21 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 22: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/22.jpg)
<aside>
• støttande innhold, som kan fjernast utan å redusere innhaldsverdien • “Så sa brura” • faktafelt, relatert innhold
22 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 23: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/23.jpg)
<hgroup>
<hgroup> <h1>Epinova</h1> <h2>Content Management Experts<h2>
</hgroup>
23 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 24: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/24.jpg)
Hierarki, omriss & portabilitet
• Med seksjonering fleire verktøy til å strukture HTML • Kan uttrykke kompleks struktur med mange fleire nivå enn H1-H6 • H1 kan brukast fleire gonger
24 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 25: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/25.jpg)
Tekst nivå semantikk (tidl. inline)
• mark • time • meter • progress • figure
+ nokre til
25 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 26: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/26.jpg)
<mark>
• markører i tekst, som søkeord i treffliste
26 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 27: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/27.jpg)
<time>
• eit av fleire mikroformat • <time>2010-11-04<time> • <time datetime="2010-11-04T09:00" pubdate>kl. 9 den 11. nov. 2010<time>
27 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 28: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/28.jpg)
<meter>
• “Bruk <meter>200 g</meter> sukker.” • <meter low="-273" high="100" min="6" max="30" optimum="21"
value="25">Det er ganske varmt til å vera norsk sommer</meter>
28 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 29: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/29.jpg)
<progress>
• “Fila er <progress>3/4<progress> ferdig lasta opp.” • “Fila er <progress min="0/4" max="4/4" value="3/4">3/4<progress> ferdig
lasta opp.”
29 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 30: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/30.jpg)
<figure>
<figure> <img… <figcaption>Bildetekst…</figcaption>
</figure>
30 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 31: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/31.jpg)
Overflødige tagger, validerer ikkje
• frame, frameset, noframes • basefont, font, big, center, s, strike, tt, u • bgcolor, cellspacing, cellpadding, valign • applet • acronym, dir, isindex
31 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 32: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/32.jpg)
Redifinerte tagger
• a – kan favne fleire element: <p> <img> • small – ikkje bare i bokstaveleg forstand • b – typografisk effekt (strong – ekstra viktig) • i – annleis stemme (em – ekstra trykk) • cite – nå forfatter • ol reversed
32 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 33: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/33.jpg)
Forms
• tidl. WebForm 2.0 • element OG attributt • Demo • kan knyttast frå <output> (resultat av skript) <progress> <meter>
33 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 34: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/34.jpg)
type=text på iPad
34 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 35: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/35.jpg)
type=number på iPad
35 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 36: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/36.jpg)
type=email på iPad
36 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 37: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/37.jpg)
type=url på iPad
37 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 38: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/38.jpg)
type=search på iPad
38 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 39: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/39.jpg)
type=tel på iPhone
39 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 40: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/40.jpg)
Canvas
• bitmap manipulering • “tomt” element uten scripting • kan sette inn tekst, men det blir bitmap • UU mangel
40 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 41: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/41.jpg)
Video
• trenger ikkje plugins • innebygde kontroller, eller egne scriptede • UU mangel • Demo
41 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 42: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/42.jpg)
Video codecs
• MPEG4/H.264: Lisens problematikk, ÷ Firefox • Ogg Theodora: Lisens fri?, ÷ IE9 & Apple • WebM/VP8: Lisens fri, ÷ Apple
42 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 43: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/43.jpg)
Audio
• som <video> • MP3 • Ogg Vobis • AAC
43 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 44: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/44.jpg)
Anna
• <ruby> <rt> <rp> <details> <summary> • Interaktive elementer (<menu>, <command>, ikke implementert) • contentEditable
44 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 45: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/45.jpg)
IE
<!--[if lt IE 9]> <script src= "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
45 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 46: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/46.jpg)
Vareseddel
• Hva er HTML5 og når kommer det? – Er her allerede, ingen grunn til å vente. Men husk IE 7 & 8
• Hva er det viktigste elementene i HTML5? – Semantikk, skjema, canvas, video/audio
• Vil det revolusjonere webteknologien? – Nei, men bidra til gradvis videreutvikling
• Vil Flash forsvinne pga. HTML5? – Nei, men bruk av Flash må spesialiseres enda mer, ingen grunn til å bruke den til
video avspiller lenger, f.eks. Og ikke avskriv Silverlight enda! • Kan vi begynne å bygge nettsteder på HTML5 allerede?
– Ja, og Epinova skal være med og vise hvordan! • Hvor godt støtter de ulike nettleserne HTML5?
– Veldig ulikt og uoversiktelig, men i rivende positiv utvikling alle sammen • Må vi bygge om eksisterende nettsteder pga. HTML5?
– Nei
46 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 47: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/47.jpg)
Referanser og inspirasjon
47 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 48: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/48.jpg)
Ressurser
• http://www.whatwg.org/html5 • http://www.w3.org/TR/html-markup/ (eksl. nettleser implementering) • http://validator.nu/
• Keith, Jeremy: HTML5 for Web Designers (2010), http://books.alistapart.com/product/html5-for-web-designers
• Lawson, Bruce & Remy Sharp: Introducing HTML5 (2010), http://introducinghtml5.com/
• Pilgrim, Mark: Dive Into HTML5 (2010 O'Reilley), http://diveintohtml5.org
• John Foliot, Stanford 20/8-2010: http://soap.standford.edu/presentations/postcard • http://html5doctor.com/ • http://html5demos.com/ • http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills • http://www.html5rocks.com/ • http://dev.opera.com/articles/tags/html5/ • http://thinkvitamin.com/code/getting-started-with-html5-video/
48 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj
![Page 49: HTML5 - en int teori](https://reader035.vdocuments.site/reader035/viewer/2022062300/559c714c1a28ab54708b4642/html5/thumbnails/49.jpg)
Showcases
• http://www.apple.com/html5/ • http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html • http://www.chromeexperiments.com/ • http://gmail.com • http://www.youtube.com/html5 • https://bespin.mozillalabs.com/ • http://html5gallery.com/ • http://html5-showcase.com/
OBS, ikkje alt her er “rein” HTML5
49 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj