HTML5 - en int teori

Introduksjon til HTML5

Dag Tjemsland 4. november 2010

Epinova

Demo

•  http://www.thewildernessdowntown.com/ •  http://www.tidsskriftet.no/

2 HTML5 introduksjon - Dag Tjemsland, Epinova @dagtj

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


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


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


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



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


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?


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


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


Start

<!DOCTYPE html> <html> <head> <meta charset=utf-8 />


Seksjonert innhold - semantisk struktur

http://code.google.com/webstats/ •  section •  header •  footer •  nav •  article •  aside •  hgroup



section

header

footer

nav

article

article

aside


div class=section

div class=header

div class=footer

div class=nav

div class=article

div class=article

div class=aside


section

header

footer

article

section

article

section

section

article

header

article

small

<section>

•  gruppere innhold som er relatert


<header>

•  ikkje kun ein master <head>, kan bruke flere <header> innen andre seksjoner •  <nav> tilhøyrer som regel <header>


<footer>

•  som <header> •  informasjon om forfatter


<nav>

•  navigasjon som går igjen på fleire sider, treng ikkje kun vera global meny •  men ikkje ei kvar lenkeliste


<article>

•  ein uavhengig og sjølvinkluderande innholdsdel: artikkel, forum innlegg, blogg kommentar, widget, gadget, etc

•  som passer til å syndikerast eller porterast


<aside>

•  støttande innhold, som kan fjernast utan å redusere innhaldsverdien •  “Så sa brura” •  faktafelt, relatert innhold


<hgroup>

<hgroup> <h1>Epinova</h1> <h2>Content Management Experts<h2>

</hgroup>


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


Tekst nivå semantikk (tidl. inline)

•  mark •  time •  meter •  progress •  figure

+ nokre til


<mark>

•  markører i tekst, som søkeord i treffliste


<time>

•  eit av fleire mikroformat •  <time>2010-11-04<time> •  <time datetime="2010-11-04T09:00" pubdate>kl. 9 den 11. nov. 2010<time>


<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>


<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.”


<figure>

<figure> <img… <figcaption>Bildetekst…</figcaption>

</figure>


Overflødige tagger, validerer ikkje

•  frame, frameset, noframes •  basefont, font, big, center, s, strike, tt, u •  bgcolor, cellspacing, cellpadding, valign •  applet •  acronym, dir, isindex


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


Forms

•  tidl. WebForm 2.0 •  element OG attributt •  Demo •  kan knyttast frå <output> (resultat av skript) <progress> <meter>


type=text på iPad


type=number på iPad


type=email på iPad


type=url på iPad


type=search på iPad


type=tel på iPhone


Canvas

•  bitmap manipulering •  “tomt” element uten scripting •  kan sette inn tekst, men det blir bitmap •  UU mangel


Video

•  trenger ikkje plugins •  innebygde kontroller, eller egne scriptede •  UU mangel •  Demo


Video codecs

•  MPEG4/H.264: Lisens problematikk, ÷ Firefox •  Ogg Theodora: Lisens fri?, ÷ IE9 & Apple •  WebM/VP8: Lisens fri, ÷ Apple


Audio

•  som <video> •  MP3 •  Ogg Vobis •  AAC


Anna

•  <ruby> <rt> <rp> <details> <summary> •  Interaktive elementer (<menu>, <command>, ikke implementert) •  contentEditable


IE




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


Referanser og inspirasjon


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/


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

Documents

HTML5 - en int teori