Vad är HTML5 och varför är det sjukt bra?

Vad är HTML5?

HTML är det markup-språket som används för att strukturera och visa innehåll på internet. HTML 5 är som namnet indikerar den femte versionen av HTML. Opera Software, vanligtvis kända för deras webbläsare med samma namn är initial initiativtagare för HTML5. Huvudsakligen utvecklades HTML5 för att tillhandahålla stöd för de senaste multimedia och därmed förenkla och förbättra användandet av multimedia på internet. Att använda animeringar och effektfulla övergångar var tidigare endast möjligt med hjälp av Flash och ActionScript. Vad som nästan är bäst med HTML5 är att det öppnar upp för användning av nya funktioner för mobila webbläsare. Själva standarden HTML5 inkluderar mer än bara själva HTML, mycket av funktionaliteten möjliggörs via Javascript.

Välkomna nyheter i HTML5-syntax

Video och Audio

Att använda HTML5 för presentation av ljud och video har inneburit att det blivit väsentligt lättare att streama och tillgängliggöra video och ljud på mobila enheter som inte tillåter flash. Man behöver heller inte installera en plugins och flashspelare. Webbläsare med stöd för HTML5 kan spela upp materialet förutsättningslöst.

Canvas

Med HTML5 kommer möjligheten att kontrollera varenda pixel på skärmen. Detta görs med det så kallade Canvas-elementet. Med hjälp av Javascript kan man manipulera skärmen att visa och animera precis det man vill. Det finns ett flertal spel baserade på HTML5s möjlighet att göra just detta. Med moderna webbläsare kan man nå upp till en FPS på runt 60 vilket leder till bra möjligheter att skapa snygga animationer. Vi har byggt ett litet exempel som visar vad som kan åstadkommas med ett canvas-element och några rader javascript. I detta fall ritar vi ut ett antal punkter och drar linjer emellan dem när de kommer inom ett visst avstånd från varandra. Linjernas styrka blir starkare ju närmre punkterna är varandra. Punkterna har även ”dragningskraft” mot varandra när de kommer inom ett visst avstånd. Kolla in det här.

Offlineanvändning

En dealbreaker för webbappar har ofta varit att man inte kan använda de när webbläsaren är offline. HTML5 local storage är lite som en blandning mellan en cookie och lokal klientdatabas. Eftersom det inte är en cookie behöver man inte oroa sig för att en användare tar bort något genom att rensa sina cookies. Vi använder local storage bland annat för att spara och öppna upp en webbapplikations tidigare läge(application-state), lagra gränssnitt och användarens mest använda filer. Ett exempel är Google Docs där du kan öppna upp ett nytt dokument och börja skriva utan att vara online.

Mobilvänligt

Det är ingen nyhet att mobiltelefoner används i allt större utsträckning. HTML5 har öppnat upp för en helt nya typer av webbapplikationer där man exempelvis kan komma åt mobiltelefonens inbyggda funktioner såsom: GPS, kamera, kontaktlista, orientation och mycket mer. Med CSS3 Media Queries kan vi bygga responsiva webb- platser och applikationer.

Grafiskt och mer frihet

CSS3 erbjuder en uppsjö av nya möjligheter att designa och formge element utan att behöva använda bilder och flash. För att göra relativt enkla animationer krävdes tidigare antingen många rader javascript eller ett flash-plugin. Idag kan man istället relativt enkelt animera alltifrån text till bilder på en webbplats med hjälp av CSS3. Några exempel på vad som kan animeras är storlek, skugga, vinkel, rotation osv.. För att ge webbplatser lite extra effekter kan man använda sig av transitions för att animera ett element från exempelvis en färg till en annan. En fördel med detta är att transitions tillåter hårdvaruacceleration vilket ökar prestandan betydligt jämfört med animationer gjorda med javascript, speciellt när det kommer till nya mobila enheter som exempelvis iPhone.

Skrivet den 22 augusti av

Markus Sackemark

Skriv en kommentar

  • XHTML: Du kan använda följande taggar: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>