Etikettarkiv: O’Reilly

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

Kontakt.

Katarina Tikka
 
0700-357894


United States of Tikka

Döbelnsgatan 57
506 37 BORÅS

Innehar F-skattsedel