HTML5 - Översikt

Vad är HTML5 för någonting ?

Om du missat det nya buzz-word'et HTML5 följer här nedan en kort sammanfattning.

html5 logo

HTML5 är ett antal olika områden som rör sig framåt. Vissa områden av HTML5 har i det tysta fungerat många år. T.ex. har CANVAS funnits många år i firefox. Med tiden kommer det mesta av HTML5 fungera i alla webläsare, mobiler, tvapparater eller surfplattor, är tanken.

När man pratar om en "HTML5 app" i vardagligt tal så utnyttjar den typiskt en liten del av det HTML5 erbjuder. T.ex. grafikmöjligheterna eller tillgången till hårdvaran.

Nya taggar med bl.a. semantisk innebörd

Detta innebär introduktion av nya taggar. T.ex. <nav> för sidans navigering, <header> och <footer> för sidans huvud och fot, <article> och <section> för att t.ex. beskriva en sådan text som du läser nu.

Poängen med att markera upp text med semantiska taggar är t.ex. att man sedan kan bygga verktyg som använder sig av denna kunskap. Det innebär att sökmotorer kan ge mycket bättre svar på mer komplicerade frågor.

Vissa taggar försvinner helt, som t.ex. <font>. Det finns redan en lösning för detta med hjälp av CSS.

Det dyker upp nya taggar av typen <video> och <audio> samt <canvas>, för att presentera precis vad taggarna beskriver nämligen bild och ljud samt grafik.

Lokal datalagring

Ett stort hinder för att skapa mer avancerade webbtjänster idag är att det inte finns något vettigt sätt att lagra lokal data. Det maximala storleken på en kaka är ca 4 KB.

Genom att introducera nya sätt för en webbsida att lagra stora mängder data, även strukturerat i en lokal databas, öppnar detta möjligheten för verkligt avancerade webbtjänster. Vi pratar här om t.ex. kontorsprogram, bokföringssystem, bildbehandling, osv. som kan fungera autonomt (av sig själv) utan ständig kontakt med servern. Mer som en applikation man installerar på datorn, såsom vi tidigare vant oss att det fungerar när det gäller hastighet och pålitlighet.

Tillgång till hårdvaran

Datorer och inte minst mobila telefoner huserar idag en uppsjö av teknik. Vi pratar om GPS, en kamera, en mikrofon, kanske en accelerometer. Detta skall vara möjligt läsa av.

Man kan då skapa t.ex. följande funktion. En person som surfar in på en webbsida kan med ett enkelt knapptryck ladda upp en bild till webbsida. Samtidigt laddas positionen och temperaturen över. På webbsidan finns sedan ett fint vinterkort med geografisk position och temperatur. Idag krävs många knapptryck för att göra samma sak.

Avancerad klient/server - Integration

Om du ska kommunicera med servern idag kräver det oftast att du klickar på en knapp som det står "Skicka" på. Vissa känner kanske till AJAX. Vi pratar nu istället om en mer avancerad AJAX. Möjlighet att kommunicera med sockets klient/server på riktigt.

Med en mer avancerad kommunikation i bakgrunden med olika servers kan en webbsida ta emot och skicka information i realtid. En nyhetstidning på nätet kan t.ex. ha en äkta "senaste nytt" -ticker längst upp. En bank kan presentera äkta realtids aktiekurser.

Men det går också att skapa t.ex. en video-chatt, inte minst tack vare tillgången till hårdvaran som beskrivet i punkten innan.

Men det går också att bygga mycket bättre administrativa system, fleranvändarmiljöer. Sådana som används av större organisationer, myndigheter, företag.

Grafik/Multimedia

Med t.ex. <canvas> -taggen öppnas möjligheten att skapa godtycklig grafik på en webbsida. Detta inkluderar t.ex. att dra linjer, färglägga ytor, rita polygoner, placera bilder. Idag måste du använda java eller flash eller något annat pluggin på webbläsaren för detta. I framtiden slipper du dessa pluggin och det kommer bli vanligare med spel och mer sofistikerad interaktion utan att något speciellt program måste installeras.

Exempel på en webbsida som använder CANVAS för att grafiskt illustrera lite matematik.

CSS3

CSS3 är helt enkelt en vidarutveckling av den CCS -standard som varit mycket framgångsrik på att bidraga till bättre webbsidor designmässigt. CSS3 inkluderar också möjligheten att ladda ner typsnitt som sedan används på webbsidan (WOFF). Detta har tidigare provats mindre framgångsrikt eftersom de olika webbläsartillverkarna inte kunnat enats. Med HTML5 gör en större ansträngning att äntligen skapa en sådan här funktion som fungerar.