Etikettarkiv: HTML5

HTML5 – så här börjar du

För en tid sedan började jag läsa igenom Mark Pilgrims bok om HTML5 för att sätta mig in i vilka skillnader det rent konkret innebär vid webbutveckling. Som jag tidigare konstaterat så finns det anledning att grotta ner sig i HTML5 ifall man är intresserad av webbutveckling – och det behöver inte vara så svårt. Första steget för att konvertera till 5:an är nämligen bara att byta doctype. Med denna enkla handling är du igång. Oroa dig inte för komplikationer, resten av sidan kommer fortfarande att renderas korrekt eftersom HTML5 är en förlåtande uppdatering som är bakåtkompatibel (hoppas Pilgrim har rätt). Så här ser doctypen för HTML5 ut:

<!doctype html>

Borta är de långa doctypes som var omöjliga att minnas och ständigt copy/pastades in på sidorna. Et voíla! Du är nu igång med HTML5 och har tillgång till nya element som:

<nav>, <section>, <header>, och <footer>

För dig som har kodat blockdesign med hjälp av CSS är det här egentligen inget nytt. Istället för att använda span class eller id så har du färdiga element att använda dig av. Du sparar in några tecken och förbättrar samtidigt webben. Hur kan användandet av färdiga element göra anspråk på att förbättra webben? Jo, genom tydligare struktur på våra sidor blir det lättare för olika webbläsare att hantera innehållet. Framförallt kan det underlätta tillgängligheten för grupper som av olika skäl vill kunna hoppa över delar eller lätt kunna hoppa mellan rubriker, som exempelvis användare av talsyntes.

Behovet av de nya elementen hänger samman med att vi idag ofta bygger sidor med hjälp av mallar. Ett blogginlägg kan utgöra en fullvärdig sida i ett sammanhang för att i nästa utgöra en sidkomponent. Det är därför viktigt att vår markup kan anpassa sig efter detta. Alla webbutvecklare med aktning vet t.ex. att man bara får använda en gång per sida, men detta är numera inte längre helt sant. Genom att lägga under en egen sektion som t.ex. så kommer den tolkas som en del av en sidkomponent och automatiskt skapa en korrekt outline/hierarki för läsaren. Borta är en stor del av det komplicerade nästlandet med -, där man var tvungen att försöka hålla koll på vilken nivå en rubrik skulle sättas.

Men hur är det med alla kreativa möjligheter som man har hört talas om? Jo HTML5 erbjuder också element som:

, och nya formulärelement som <input type=”search”>

Dessutom finns en rad nya funktioner som möjliggör geolocation, offline funktion och HTML5 lagring hos användaren. Funktioner som jag ser fram emot att bekanta mig med. Framförallt ser jag fram emot att sätta mig in i hur detta kan användas för att förhöja upplevelsen för användaren och på så vis underlätta vardagen för oss alla.

Vilka är dina favoritfunktioner med HTML5? Vad bör jag fördjupa mig i?

En första bekantskap med HTML5

Det är väldigt lätt att stagnera trots att man lovat sig själv dyrt och heligt att man ska följa med i alla svängar. Igår läste jag tre kapitel ur boken HTML5: Up & Running av Mark Pilgrim. Det var helt enkelt dags att konkret sätta sig in i vad HTML5 är för något istället för att slänga sig med luddiga termer.

Första gången jag provade på HTML-kodning var på gymnasiet år 2000, vi fick skriva Hello World, göra en tabell och byta färg på bakgrunden. Jag förstod ingenting. Vad ska jag med det här till? 2003 läste jag Webbredaktör, design och publicering på Högskolan i Borås. Jag tror att jag sökte utbildningen för ordet design stod i kursnamnet. Vi fick lära oss att tabelldesign var på väg ut, frames var praktiskt taget olagligt och det nya var CSS och block/lager-design. Vi jobbade i notepad med ren kod. Jacob Nilsen var vår webbguru och vi gjorde vårt bästa för att undvika onödiga bilder och grafiska element. Jag flyttade därefter till Örebro 2005 för att läsa Digital mediedesign. Nu var det XHTML som gällde. Små förändringar men ändå en känsla av att börja om. Alla pratade om Flash och vi drömde alla om att bli duktiga animatörer men fick mest sitta med Dreamweaver och bygga strukturer.

Idag är jag glad att vi fick lära oss strukturer och grunderna i kodning men jag inser också att jag sedan 2007 inte riktigt har tagit mig tid att lära mig nytt. Det har pratats om Web2.0, den sociala revolutionen och HTML5 och visst har jag hängt med på principerna. Men vad innebär då HTML5 rent konkret?

Boken jag har börjat läsa ges ut av O’Reilly, som är närmast legendariskt när det gäller böcker om informationsteknologi. Det fina är att boken går att finna i sin helhet online som Dive into HTML5 . Den har ett par år på nacken nu men för någon som är ny spelar det knappt någon roll. Jag tycker att Pilgrim gör ett fantastiskt jobb med att göra historien om Internet mer levande. Han förklarar helt enkelt varför koden vi knackar ser ut som den gör och hur HTML5 har kommit att förändrat detta. Det här är perfekt för människor som mig som inte är tillräckligt inbitna utvecklare för att hoppa rakt på godsakerna utan helst vill förstå varför vi gör något först.

Den korta varianten för trötta läsare är att ingen egentligen behöver bry sig om HTML5. Det är ingen fara på taket om du inte har hängt med. Alla våra gamla sidor kommer att fortsätta fungera som de ska eftersom 5:an är av det förlåtande slaget. 5:ans markup har förenklats för att underlätta och minimera risken för misstag men för den som är bekväm i sina gamla spår går det bra att fortsätta som förut. Naturligtvis tillkommer på det en del nya finesser som vi webbutvecklare kan och bör använda oss av. Enda parentesen är att alla funktioner ännu inte stöds av alla webbläsare. Det gäller med andra ord att som vanligt inte förlita sig på att den valda funktionen alltid fungerar.

Vilka är då finesserna? Jo, med HTML5 kommer en rad nya element som möjliggör en tydligare struktur på våra webbsidor. Borta är nästlandet med – för att skapa sidhierarkier. Istället arbetar vi med olika sektioner som , , , och där kan användas inom sektionen trots att den redan förekommer på andra håll på sidan. Detta innebär en klar förbättring för de användare som har behov av tillgänglighetsdesign och för webbutvecklaren själv. Sen finns elementen

Visst finns det anledning att lära känna HTML5 något mer. Jag kommer härnäst läsa klart boken och fördjupa mig i det jag finner intressant. Vilka är dina favoritfunktioner med HTML5?

K