Det er nu over 10 år siden, World Wide Web Consortium (W3C) sidst anbefalede en ny HTML-standard. Nu er den næste generation af HTML undervejs, og den gør det blandt meget andet muligt at lave grafiske applikationer, spil i 2d og 3d, client/server-programmer, programmer, der fungerer offline, kan læse brugerens filsystem, gemme data i en lokal database, og programmer, der bruger mobile enheders gps. Alt sammen udelukkende i HTML og javascript. Alle de nævnte features er allerede implementeret i mindst én populær web-browser, nogle dog i den seneste eksperimentelle udviklerversion.
HTML 5’s historie startede i en arbejdsgruppe ved navn Web Hypertext Application Technology Working Group (WHATWG). Den blev oprettet af en række browser-udviklere, der ikke var tilfredse med den retning, W3C’s arbejde bevægede sig. De mente, der manglede en standard, som skulle afspejle, hvordan moderne web-applikationer bliver skrevet. De begyndte derfor på en specifikation, de kaldte Web Applications 1.0, som senere skulle blive videreført af W3C selv under navnet HTML 5. Man kan derfor finde to udkast til en specifikation for HTML 5: W3C’s officielle specifikation og WHATWG’s forslag, som er et supersæt af den første. Redaktøren for HTML 5, Ian Hickson fra Google, forventer, at den bliver kandidat for en W3C-anbefaling i 2012, og den tidligst får status af anbefaling i 2022. Det betyder dog ikke, at vi behøver vente så længe, for mange af de features, som HTML 5 definerer, er allerede implementeret i en eller flere browsere.
Video (næsten) uden flash
HTML 5 introducerer et nyt tag til audio og et til video. Man skulle tro, det betød, der endelig kom en uniform måde at sætte lyd og video ind i sit dokument, der fungerer ens i alle browsere. Sådan er virkeligheden desværre ikke. Audio- og video-tag’et definerer nemlig kun en syntaks for et audio- og video-element. Det siger intet om, hvilke fil-formater den enkelte browser skal understøtte. Desværre forholder det sig groft sagt sådan, at cirka halvdelen af de populære browsere understøtter det åbne format OGG, og den anden halvdel det patenterede format MP4. Til den næste generation af browsere introduceres et nyt åbent format WebM, med et forbedret video-codec. Det sker i et forsøg fra bl.a. Googles side på at skabe et format, som kan blive en samlet standard for video på nettet. Desværre er det indtil videre de samme browsere, som understøtter OGG, der bebuder at ville understøtte WebM. Internet Explorer har slet ikke noget audio- og video-tag før den næste version 9.0. Den mest kompatible løsning bliver derfor et godt stykke frem at lægge sin video som OGG, MP4 og WebM samt falde tilbage på flash, hvis browseren ikke understøtter nogen af dem. Og sørge for at serve filerne med den rigtige mime-type.
<video width=”300” height=”200”>
<source src=”filmklip.mp4” type=”video/mp4”>
<source src=”filmklip.webm” type=”video/webm”>
<source src=”filmklip.ogv” type=”video/ogg”>
<object type=”application/x-shockwave-flash” ...>
</video>
Tegn en tegning
HTML 5 introducerer to måder at tegne grafik på. Den ene er Standard Vector Graphics (SVG) inline i dokumentet, som er vektor-grafik beskrevet med XML. Den anden er Canvas, som giver en flade, man kan kalde fire-and-forget tegne-kommandoer på, fra javascript.
<canvas id=”tegning” width=”200” height=”200”></canvas>
context = document.getElementById(”tegning”).getContext(”2d”)
context.drawRect(40, 40, 80, 80)
Canvas giver en hurtig api til at tegne og manipulere billedet pixel-for-pixel. Mulighederne er derfor næsten uendelige for, hvad man kan lave af flydende interaktiv animation. Nettet indeholder da også mange fine eksempler på brug af canvas; de fleste Chrome-experiments, spil og spil-frameworks, ray-tracers mm. Canvas fungerer i de fleste moderne browsere, bortset fra Internet Explorer. Det råder javascript-biblioteket Explorercanvas dog bod på.
Når nu man skal skrive getContext(”2d”), skulle man tro, man også kunne skrive ”3d”. Det hedder i stedet getContext(”webgl”). WebGL er en api til hardware-accelereret 3d på et canvas-element. WebGL-standarden er bygget efter OpenGL’s api, mere præcist OpenGL ES 2.0, som er designet til mobile enheder og lignende. Det er endnu kun implementeret i alfa-versioner af browserne Firefox, Chrome, Safari og Opera. Som et proof-of-concept har nogle folk fra google portet det klassiske 3d-shooter spil Quake2 til javascript og WebGL.
Hvor er du?
Der er begyndt at dukke en masse applikationer op, der benytter sig af, at mobile enheder kender deres egen position. Kameraer, der tagger billederne med, hvor de er taget. Kalendere, der giver besked om møder tidsnok til, at du kan nå derhen, og kort, der kan vise den nærmeste biograf, bar, bager osv. Med HTML 5 kommer en DOM-api til geolokation. Med andre ord: Du kan få brugerens højde- og breddegrad med et kald fra javascript. Men vel og mærke kun, hvis brugeren accepterer det.
Navigator.geolocation.getCurrentPosition(success_callback, failure_callback)
function success_callback(posinfo) {
latitude = posinfo.coords.latitude
longitude = posinfo.coords.longitude
// brug latitude og longitude til at gøre et eller andet smart
}
Success callback er en funktion, du skriver, som modtager brugerens position som argument. Hvis det altså lykkes at få positionen. Måske nægter brugeren at acceptere, gps-satellitten kan ikke kontaktes, nettet er nede, eller noget andet går galt. I så fald kaldes failure callback i stedet.
Geolokation fungerer i Firefox 3.0+ og Chrome 5.0+. Ønsker man at bruge det i Internet Explorer, kan det lade sig gøre, hvis brugeren har et Google Gears-plugin installeret, ved hjælp af javascript-biblioteket geo.js. Med tiden finder en api til enheders accelerometre forhåbentlig også vej ind i standarden.
Netværksprogrammer på nettet
Med WebSockets giver HTML 5 mulighed for at lave tovejs-kommunikation mellem serveren og dokumentet. Ajax’s brug af XMLHttpRequest til at lave asynkrone kald til serveren var et stort skridt fremad for web-applikationer, men det løste ikke problemet, når det var serveren, der skulle tage initiativet. Det blev af mange løst med forskellige tricks som for eksempel polling. Nu kommer der altså en måde at få beskeder fra serveren på en renere og mindre ressource-krævende måde. Kommunikationen foregår over Web Socket Protocol (ws) eller Secure Web Socket Protocol (wss), som er bygget oven på hhv. http og https. WebSockets har desuden en api til at sende beskeder til andre vinduer – dvs andre dokumenter i samme browser – i form af funktionen postMessage().
var myWebSocket = new WebSocket(”ws://www.websocket.org”)
myWebSocket.onopen = function(evt) { alert(”Connection open ...”) }
myWebSocket.onmessage = function(evt) { alert( ”Received Message: ” + evt.data) }
myWebSocket.onclose = function(evt) { alert(”Connection closed.”) }
myWebSocket.send(”Hello Web Socket!”)
myWebSocket.close()
Web sockets er implementeret i Google Chrome 4.0.249.0+ og i browsere baseret på natlige builds af webkit, såsom udvikler-versionen af Safari. Firefox planlægger at implementere Web Sockets fra version 3.7. Der findes desuden en flash-baseret implementation af web-sockets kaldet web-sockets-js, som man kan falde tilbage på i browsere, der (endnu) ikke er med.
Og meget mere
Der er selvfølgelig også den nye File-api, som gør det let at uploade mange filer og giver mulighed for at læse brugerens lokale filer. Og api’en til en lokal sql-database. Samt muligheden for at lave applikationer, der stadig virker, når brugeren er offline. Ydermere mikro-data, som giver mulighed for at tilføje sin HTML ekstra semantik og spiller sammen med RDF og det semantiske web. Og en hel del andre ting, som interesserede læsere selv må gå på opdagelse i.
Når summen er mere end delene
Der er selvfølgelig store dele af HTML 5, som slet ikke er nævnt her. Alligevel er der få ting i standarden, som isoleret ikke i dag kan opnås ved at bruge et bestemt plugin i en bestemt browser. Styrken ved at samle dem i en HTML-specifikation er, at alle delene får lov at spille sammen, ved at være en del af den samme DOM-struktur og ved at kommunikere over en fælles protokol (http + xml + REST). Et lille, men imponerende eksempel er Paul Rouget’s demo, der bruger video-tag og canvas sammen til at lave en green-screen-effekt. Det bliver samtidig mere oplagt at lave web-apps, der arbejder sammen, når de bygger på en fælles ramme. I den forstand giver HTML 5 mulighed for at lave nye typer web-applikationer.
HTML 5 er en standard under udvikling, men den udvikling bliver bl.a. påvirket af, hvad web-browsere vælger at implementere, og hvad web-programmører vælger at bruge. Så selv om der er længe til, at HTML 5 er færdig, er der masser at gå i gang med. Uanset om du så bruger det til at designe pæne hjemmesider med SVG-grafik fra Illustrator eller fancy state-of-the-art web-applikationer.
