Artikel: Webbteknik för totala nybörjare

Denna artikel går igenom grundläggande termer och begrepp, samt förklarar vad för slags kompetenser man kan tänkas behöva träna upp om man vill jobba med webben. Innan vi börjar koda, så måste vi veta vad slags krav den moderna webben ställer på mitt kodande.

Introduktion

De grundläggande delarna i en modern webbsajt och dess kommunikation med webbläsarna kan du stega dig igenom i följande animation. I den, liksom i resten av denna artikel, finns det många tekniska termer. Låt inte dessa skrämma dig. Varje område behöver sina glosor och när du läst denna artikel kanske du inte förstått dem, men deras betydelse kommer du förhoppningsvis växa in i en förståelse av.

Några viktiga termer

Hemsida: En hemsida är ett dokument, som vanligtvis kodas i HTML och vars innehåll vanligtvis presenteras genom en webbläsare. Detta kan låta självklart, men lägg märke till orden vanligtvis. Det finns alternativ i båda fallen.
Webbserver: Ordet webbserver är inte helt precist. Vad som åsyftas är vanligtvis ett datorprogram som kan leverera hemsidor till en klient. Webbläsaren är alltså klienten och servern är i just ett speciellt program för att sända hemsidor och tillhörande data till klienterna. Den vanligaste webbservern är Apache, som görs med öppen källkod, likt Linux, och som ofta körs på just Linuxmaskiner, även om man kan köra Apache på nästan alla operativsystem. Den näst vanligaste webbservern är IIS från Microsoft. I strikt mening är det egentligen fel att tala om webbservrar, utan man bör använda den mer precisa termen http-server.
HTTP: När klienten vill ha något som finns på en server, så talar de enligt ett protokoll, som heter Hyper Text Transport Protocol. Http är ju annars mest känt som det som vanligtvis står i början på webbläsarens adressrad. Anledningen är att man skall ange vilket protokoll som man tänker koppla upp sig mot servern med. Det finns ju andra protokoll, som FTP och gopher. En server som tar emot förfrågningar via http, och som levererar resurser till klienter är alltså en http-server.
Server-side och client-side: Det som försiggår på servern kallar man är server-side. Exempelvis finns det skript som kan köras på servern, gjorda med tekniker som PHP, ASP eller PERL. Ett klientsides skript däremot körs i klienten, som ett exempelvis javaskript. Serverskript körs alltså mellan det att servern fått en begäran från webbläsaren och det att den skickar resursen. Resursen skapas av detta skript. Ett klientsidesskript däremot är en resurs som skickas i sin hlhet till webbläsaren. Först där utförs kommandona och du eller jag ser deras resultat.
Tillgänglighet: Med ordet tillgänglighet (eng: accessability) menar vi att en hemsida är möjlig att läsas och navigeras omkring i av så många som möjligt, inklusive blinda, de som har nedsatt synförmåga, döva och rörelsehindrade. En tillgänglig sida kan man navigera runt i utan att använda en mus! En tillgänglig sida passar dessutom sökmotorer och andra applikationer som behöver ta del av sidan genom att den läses in av ett datorprogram. Att optimera sin sida för sökmotorer är ofta detsamma som att anpassa den för handikappade. Det innebär numera inte heller att sidan behöver bli tråkigare eller fulare. En handikappanpassad sida är tvärtom till största delen en tekniskt bättre sida än andra. Kort sagt, här går god människosyn hand i hand med goda affärer.
URL och URI: URL och URI är två ord som för den enkle nybörjaren tycks stå för samma sak, nämligen adressen till en hemsida eller en annan resurs på en webbserver. Vill du vara lite snobbig, så skall du sluta tala om url:er och säga uri i stället. När du blir mer tekniskt erfaren ser du att det finns ett visst fog för att göra distinktioner och använda sig av uri i stället för url. Lägg dock märke till att en uri inte måste gå till en webbserver. En uri kan leda till andra slags resurser som är åtkomliga på andra sätt än via http-protokollet.

Hemsidans tre byggstenar

På klientsidan är det av extrem vikt att du lär dig hålla reda på tre skilda saker och hur de åstadkoms. Dessa är:

Innehåll (eng: content)
Utseende (eng: presentation)
Uppträdande (eng: behaviour)

Tidigare blandades dessa samman till en enda röra och det blev mycket svårt att göra hemsidor. Idag kan vi tack vare mer utvecklade tekniker hålla isär dessa, och det gör arbetet med att koda en hemsida både enklare från början och framför allt enklare då man vill ändra på en av ingredienserna.

De tekniker som svara mot respektive område är främst:

HTML
CSS
Javaskript och DOM

Till dessa basala tekniker kommer också tillägg, varav ett är så enkelt att man knappt ser det som en tilläggsteknik, nämligen bilder. Det finns två slags bilder på en hemsida:

Bilder som är en del av sidans innehåll.
Bilder som är en del av sidans design. Dessa bilder fyller alltså en dekorativ funktion.

Bilder som utgör en del av sidans innehåll skall skötas via HTML-koden. Dekorativa bilder skall ställas in via CSS.

Andra saker som finns på en hemsida är objekt, såsom Flash-animationer, video och ljud. Dessa hanteras ofta av insticksprogram (eng: plug-ins), såsom flashspelaren, Quicktime eller Windows mediaspelare.

Servertekniker

På en modern webbserver finns det fyra saker som man behöver vara orienterad om:

Http-servern och http-protokollet
Operativsystemet
Skript
Datakällor

Moderna webbsajter är nämligen inte statiska, utan dynamiska. Så här ungefär ser arbetsgången ut:

Klienten (vanligtvis en webbläsare) ber via http servern att skicka en namngiven resurs.
Http-servern lämnar över denna fråga till skriptmotorn, som kör ett eller flera skript för att skapa resursen.
Skriptmotorn i sin tur kommunicerar med olika slags datakällor. Det är ofta relationsdatabaser och då kommunicerar skriptmotorn med databashanteraren via ett språk som heter SQL. Med ett modernt webbsystem kan data hämtas i en mängd olika slags källor.
Skriptet sätter ihop all information och skapar en HTML-kod (vanligtvis). Denna skickas av http-servern till klienten.
Webbläsaren tolkar html-koden. Somliga delar av den kräver att webbläsaren skickar ytterligare förfrågningar till servern, bland annat för att fylla ut sidan med dess bilder och objekt.
När alla resurser som behövs för att visa sidan är hämtade, så bryts förbindelsen till servern. Http-protokollet är alltså förbindelselöst.

Tekniker att kunna

Med denna bakgrund kan vi nu göra en lista på vilka slags tekniker som normalt ingår i hemsideskunskapen. De står i den ordning som jag tycker man bör bekanta sig med dem. Ytterst få har tid, begåvning och ork att bli bra på alla delar. Somliga bör man därför lära sig ytligt och bara vara orienterad om, sedan koncentrerar man sig på två eller tre där man blir riktigt bra.

HTML
CSS
Bildbehandling och optimering (vanligtvis med Adobe Photoshop)
Javaskript
DOM
Objekt, exempelvis gjorda i Flash
HTTP
DNS
Ett serverskriptspråk, exemplevis PHP
Databashantering och SQL

Roller man kan ha

När man jobbar med hemsidor kan man sitta på en av tre stolar:

Informatörens: Detta är de människor som skriver texter och skapar sådana bilder som är budskapsbärande. De kan liknas vid journalister och fotografer på en tidning. De skall på ett modernt system inte behöva kunna annat än ytterst grundläggande HTML och sedan skall sajtens CMS göra jobbet. Informatörer behöver förstå att webben som medium ställer vissa krav på hur man formulerar sig och framför allt hur man disponerar sin text för att den skall fungera. Man måste till exempel snabbt säga vad en sida handlar om och kommer att förmedla för budskap. Man kan inte lägga upp en sida som en deckare där svaret kommer i sista kapitlet!
Teknikerns: Tekniker faller i två kategorier: Utvecklare och driftstekniker. Utvecklarna i sin tur har idag också specialistkompetenser. Somliga är bra på databasoptimering, andra är bättre på andra delar i kedjan. Driftsteknikerna övervakar servrarna och kontrollerar att de inte överbelastas eller utsätts för intrång. När utvecklarna levererar uppdaterade system kan dessa också vara ansvariga för att uppgradera systemet.
Designerns: Detta är de som har höga betyg i bildämnen och har kompetens att välja färgkombinationer, skapa fungerande och attraktiva layouter. Designers brukar älska Photoshop, men behöver egentligen inga andra redskap än papper och penna! Vad gäller design för webben, så måste man dock veta om att mediet i sig ställer vissa krav på vad slags design som är väl fungerande och inte. Det måste framgå vad som är en länk och inte, för att ta ett enkelt exempel. Sajten som helhet skall vara enkel att navigera runt på. Man skall inte behöva en manual för att ta del av informationen.

Nu tror jag vi är redo att börja titta på lite HTML...

Referensmaterial

Länkar kommer komma i texten till andra delar av denna kurs allteftersom den växer fram.

Externa länkar:

Webbens utveckling, fördjupningsartikel

Publicerad:	2005-05-09 14:38	Författare:	itpastorn
Uppdaterad:	2005-05-18 02:14	Ämne:	Webbteknik