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

HTML5 - en int teori

Recommended

Recommended

More Related Content

Similar to HTML5 - en int teori

Similar to HTML5 - en int teori (20)

HTML5 - en int teori