Du är här: keryx/artikel/25. Hoppa till huvudinnehållet (h) Sidans menysektion:
Keryx logotype

Webbens utveckling - webbutveckling

Om denna artikel

Tro inte att en "hemsida" är detsamma idag som för tio eller ens bara för fem år sedan. Vill du lära dig göra eller vill du köpa in en "hemsida", så måste du veta hur dagens teknik ser ut.

Publicerad: 2005-02-27

Uppdaterad: 2005-02-28

 

En hemsida idag är inte längre en samling dokument man tittar på. Den är ett system där informationen skapas, flyttas och uppdateras i realtid, utifrån kopplingar till databaser och en mängd andra informationskällor.

Webben år 2005 är inte vad den var år 2000 och år 2000 var webben inte detsamma som år 1995. När man pratar om att "göra hemsidor" eller "ha en hemsida" så är det därför väldigt viktigt att man inser att begreppet hemsida inte är detsamma nu som det var för några år sedan och att den kommer att ha förändrat sig igen om några år. Jag kommer här att beskriva utvecklingen innan jag drar några slutsatser för hur man bör gå till väga när man skapar webbsajter idag. Jag riktar mig i denna artikel inte till tekniker, utan till andra som har ansvar för hemsidor eller nybörjare som funderar på att "göra en hemsida". Mitt språk kommer därför att vara relativt fritt från tekniska termer, men det innebär också att det kommer att sakna den precision som en tekniskt bevandrad läsare skulle önska.

År 1995 var det en ganska enkel sak att enas om vad det innebar att "ha en hemsida", idag är det vitt skilda saker som man kan mena med det begreppet. Den instans i samhället där insikten om webbens föränderlighet verkar ha svårast att slå rot är ironiskt nog skolan. Det sätt på vilket läroplanen är skriven i ämnet webbdesign är inte bra. Bland annat står där i betygskriterierna att "eleven fullgör sina arbetsuppgifter på ett i det närmaste professionellt sätt". Med den teknikutveckling som har skett bara de senaste tre åren är den formuleringen löjlig.

  1. Hur kan man tala om webbens historia?
  2. Webbens historia ur anv?ndningsaspekt
    1. Webben som dokumentationssystem - pionj?rernas era (90-93)
    2. Webben som text och bild - entusiasternas era (93-95)
    3. Webben som marknadsf?ring - Netscapes era (95-98)
    4. Exkurs: Browserkriget (96-99)
    5. Den interaktiva webben, webmasterns d?d (99-05)
    6. Den integrerade webben, webben som programk?rningsmilj? (2005-)
  3. Webbstandard: Multipla plattformar och handikappanpassning
    1. Tekniska konsekvenser
  4. "Jag vill ha en hemsida"
    1. Nils Ericsonsgymnasiets nya hemsidessystem
    2. System f?r politiska lokalavdelningar och distrikt
    3. System f?r kyrkor och f?reningar
  5. Appendix: Utvecklingen av HTML, CSS och skriptspr?k
    1. HTML 1.0 - taggarna uttrycker spr?klig logik
    2. Marknadsf?rings/Netscape-eran - taggarna f?r grafiska funktioner
    3. HTML 4 och CSS 2
    4. XML och XHTML
    5. Javaskript och DOM
    6. Serverbaserade skript
  6. Efterord, till mina elever (och kanske andras)

Hur kan man tala om webbens historia?

Webben som vi idag k?nner den ?r en kombination av tv? grundl?ggande tekniker, samt ett stort antal till?ggstekniker. De tv? grunderna ?r HTTP och HTML. B?da dessa utvecklades under det sena 80-talet och en bit in p? 90-talet var webben n?stan synonym med dessa tv? ord (plus DNS). Tekniskt sett har det skett mycket, som sagt, men innan vi beskriver den utvecklingen s? l?t oss titta p? de anv?ndningsomr?den hemsidor haft f?r att f?rst? vad som drivit teknikutvecklingen ?t ett visst h?ll.

Nu m?ste det dock s?gas att ibland har det varit s? att teknikf?retagen velat skapa en marknad och d?rf?r drivit p? just somliga till?mpningar. Just nu s?ker 3G-operat?rerna f? oss att tro att vi vill ha videosamtal. Man s?ker f? avs?ttning f?r sin teknik och s?ker d?rf?r skapa ett behov. Det g?r tr?gt, men det visar ?nd? att det ofta ?r s? att man sitter med en teknik f?rst och skapar till?mpningen sedan.

I princip ?r detta hela webbens historia. Ingen av dess upphovsm?n hade en aning om vad det var de h?ll p? att ?stadkomma. Internet som fenomen f?ruts?gs inte av n?gon enda person, varken man var datorkunnig, framtidsforskare, science-fictionf?rfattare eller vad man ?n var. Internet tog alla p? s?ngen, ocks? s?dana som gjort karri?r p? att vara framsynta, som Steve Jobs (Apple) och Bill Gates (Microsoft).

Webbens historia ur anv?ndningsaspekt

Webben som dokumentationssystem - pionj?rernas era (90-93)

I Januari 1991 s?tts den f?rsta webbservern utanf?r CERN upp. Webben har f?tts!

HTML och HTTP f?ddes vid CERN. D?r verkar stora m?ngder forskare. Det som skiljer forskare fr?n andra skribenter ?r att man aldrig kan p?st? n?got utan att det skall vara dokumenterat. Det klassiska ?r att man har fotnoter i sin text, men n?r texterna b?rjat hamna i datorer s? visade det sig att systemet med hyperl?nkar var ?verl?gset. Ett klick s? var man s? att s?ga i noten.

HTTP medf?rde att man kunde med l?nkar h?nvisa till dokument som ligger p? andra datorer. L?nkar i sig har funnits f?re hemsidorna, men m?jligheten att med en global standard l?nka fr?n dator till dator ?ver hela v?rlden var revolutionerande.

HTML h?mtades fr?n en annan teknik som heter SGML, som i sin tur anv?nds bl.a. av den amerikanska krigsmakten f?r att kunna datorisera manualer som kan skrivas ut vid behov i olika format.

Fr?n b?rjan var webbl?sarna textbaserade och sidorna inneh?ll bara l?pande text. Man kan faktiskt surfa p? detta s?tt ?n idag, exempelvis via webbl?saren Lynx.

Webben som text och bild - entusiasternas era (93-95)

Tekniskt intr?ffade ingen st?rre sak n?r webbl?saren Mosaic introducerades i april 1993, men det var en grafisk webbl?sare och den kunde visa bilder blandat med texten. Detta ledde till att hemsidan som media blev om?ttligt popul?r ?ver natt p? fr?mst amerikanska universitet. I Januari 1993 finns det 50 webbservrar i hela v?rlden. I oktober har antalet tiofaldigats. Mosaic sl?pptes i augusti samma ?r f?r Mac och Windows, vilket m?jligg?r vidare spridning.

HTML-kodning var ?nnu l?tt och snabbt b?rjade entusiaster skapa sidor om allt m?jligt. Sj?lv surfade jag exempelvis runt p? sajter om Monthy Python vid denna tid. Eftersom sidorna gjordes av entusiaster, s? kom man in p? dem gratis, till skillnad fr?n den information man kunde h?mta p? de andra globala informationssystemen, som Compuserve, Prodigy och America Online. Gratismentaliteten ?r anv?ndarens v?lsignelse och somliga f?retags f?rbannelse. Hur skall man kunna ta betalt f?r det som andra erbjuder gratis?

?n s? l?nge ?r alla hemsidor helt statiska, dvs. n?gon har manuellt skrivit in texten och manuellt kodat in HTML-taggarna. Under denna era s? b?rjar man komplettera denna statiska teknik med ett till?gg, CGI, som g?r att man kan skapa HTML-kod "on the fly", samt p? ett intelligent s?tt hantera exempelvis ett ifyllt formul?r.

I juli 1994 bildas "the World Wide Web Consortium" (W3C) med syftet att samordna vidareutvecklingen av webbens tekniker. Det kommer dock att dr?ja tio ?r innan W3C blir en dominant faktor i utvecklingen. F?rst kommer tv? andra epoker.

Webben som marknadsf?ring - Netscapes era (95-98)

13 oktober 1994 lanseras "Mosaic Netscape 0.9". I december 1994 lanseras "Netscape Navigator" version 1.0. Tack vare att dess grundare Jim Clark beh?ver pengar till att bygga v?rldens st?rsta segelb?t s? introduceras f?retaget p? b?rsen redan 9 augusti 1995. P? mindre ?n ett dygn har f?retaget v?rderats till ?ver en miljard dollar och det utan att man ?nnu haft n?gra egentliga int?kter.

Netscapes dramatiska succ? blir modellen f?r en m?ngd andra uppstickare och man talar nu om den "nya ekonomin". Netscape kommer under de n?rmaste ?ren att i princip p? egen hand diktera hur webben utvecklas, och det sker genom rasande snabb utveckling. Var ?ttonde m?nad skall en st?rre uppgradering av webbl?saren sl?ppas, vilket kan j?mf?ras med att relativt mogna produkter som ordbehandlare sl?pps vart tredje ?r, och fr?n 1995 till idag har det enbart r?rt sig om sm? putsningar p? ytan i deras funktionalitet.

Netscape introducerar i rasande fart tekniker som:

Utanf?r entusiasternas krets s? f?r hemsidan tj?na till marknadsf?ring. Man presenterar sitt f?retag (sin f?rening, sin skola, sin kyrka, sig sj?lv…) och de varor man tillhandah?ller.

Marknadsf?ringsinriktningen f?r tv? konsekvenser. F?r det f?rsta s? blir webben en tummelplats f?r reklamfolk och deras k?nsla f?r det nya mediet ?r inte helt lyckad. M?ls?ttningen blir vacker grafik med exakt kontroll ?ver utseendet. Man behandlar hemsidan som vore den en broschyr eller en affisch.

Den andra konsekvensen ?r naturligtvis att man snabbt t?nker tanken att n?r en vara presenterats p? n?tet s? borde man ocks? kunna genomf?ra aff?ren p? n?tet. Man beh?ver med andra ord kunna genomf?ra en ?verf?ring av pengar p? ett s?kert s?tt. Olika saker testas, men den viktigaste nya tekniken ?r HTTPS, HTTP med SSL kryptering.

Ett nytt anv?ndningsomr?de f?r webbtekniken lanseras ocks? under denna epok, ett anv?ndningsomr?de som p? s?tt och vis inneb?r en ?terg?ng till r?tterna vid CERN: Intran?tet. Rent tekniskt ?r ordet Intran?t inte exakt definierat, men som slogan kan man s?ga att det lanserades av Netscape f?r att f?rm? f?retagen att anv?nda sig av webbteknik (HTTP och HTML) f?r att hantera interna informationsbehov. Ungef?r som man i CERN ville h?lla koll p? vetenskapliga arbeten.

Exkurs: Browserkriget (96-99)

?r 1996 lanserar Microsoft Windows 95 OSR2 (en uppdatering av Windows 95). Den inkluderade webbl?saren, Internet Explorer (MSIE) version 3.0. Den ?r fortfarande underl?gsen Netscape Navigator, men avst?ndet har minskat. Fram till denna version har MSIE varit ett sk?mt, j?mf?relsevis. Av bekv?mlighet och f?r att Netscape nu b?rjar s?ka ta betalt av sina anv?ndare, s? b?rjar n?gra att anv?nda MSIE i st?llet f?r Netscape.

I oktober 1997 sl?pps version 4.0 och man har nu kommit ikapp Netscape rent tekniskt. Teknikerna f?r att skapa en hemsida med k?nslan av dynamik ?r s? pass v?lutvecklad att marknadsf?ringen av b?de MSIE 4.0 och Netscape Navigator 4.0, som kommer n?gra m?nader senare, fr?mst riktar in sig p? detta. B?da f?retagen pratar om DHTML, men detta ?r egentligen ingen ny teknik, utan bara ett samlingsnamn p? tre tekniker i samverkan (HTML, CSS och javaskript). I och med lanseringen av MSIE 4.0 s? ?r i princip Netscapes era ?ver. Under n?got ?r talar man om "browserkriget", men utg?ngen ?r given. Man betalar inte Netscape f?r att f? en likv?rdig webbl?sare i st?llet f?r den man redan har i sin dator gratis.

I september 1998 lanseras MSIE 5.0. Den ?r (totalt sett) b?ttre ?n allt Netscape kan erbjuda och browserkriget ?r definitivt avgjort. Netscape m?ste fortfarande st?djas av webbdesigners n?gra ?r till, men avfasningen sker ?nd? relativt snabbt.

Det skulle dr?ja ?nda till ?r 2004 innan Microsofts hegemoni skulle komma bli utmanad igen. I och med den succ?artade lanseringen av Mozilla Firefox, s? tappar MSIE marknadsandelar ganska snabbt. Om den trenden kommer st? sig kan bara framtiden utvisa, men p? grund av MSIE idag f?r?ldrade teknik och d?liga st?d f?r webbstandarder (se nedan) s? ?r vi m?nga som hoppas att MSIE kommer tappa ?n mer av marknaden. Eller att Microsoft g?r en rej?l uppdatering av sin webbl?sare. De i februari 2005 nya signalerna fr?n Microsoft om en ny version, 7.0, verkar dock inte lovande. Man kan helt enkelt inte skriva om de grundl?ggande delarna av sin kod f?r att ?stadkomma den uppryckning som beh?vs.

Den interaktiva webben, webmasterns d?d (99-05)

I webbens barndom var det oftast en person som stod f?r allt hemsidesarbete: Webmastern var den som valde ut och skrev informationen, han designade sidans layout och han sk?tte den teknik som beh?vdes f?r detta. Som "webmaster" kr?vdes det allts? en m?ngkunnighet.

I takt med att den informationsm?ngd man velat ha p? sina hemsidor ?kat, stod det klart att webmasterns jobb m?ste b?rja f?rdelas p? flera personer. Idag kan vi se tre skilda roller - och det ?r ytterst f? f?runnat att bem?stra dem alla - n?mligen informat?ren, teknikern och designern.

Rent tekniskt inneb?r detta att man m?ste skapa system som m?jligg?r denna uppdelning. Informat?ren skall i princip inte beh?va beh?rska mer ?n ordbehandling. Teknikern till?ts p? nytt vara "n?rd" och designern beh?ver inte bli datorexpert. Faktum ?r att designern i princip kan jobba med papper och penna.

Dagens webbsajter ?r dynamiska, i ordets egentliga mening. Informationen skapas i samma stund du fr?gar efter den. Den lagras p? olika st?llen, fr?mst i databaser och uppdateringen sker i realtid, dvs. i samma ?gonblick som Christian Olsson hoppat i de olympiska spelen skall resultatet synas p? hemsidan, i samma ?gonblick antalet varor i lagret har ?ndrats s? skall det synas p? hemsidan.

Dagens webb best?r av fem grundl?ggande tekniker:

  1. Databashanteraren, dvs. det program som hanterar databasen.
  2. Serverbaserat skriptspr?k, dvs. den programkod som kommunicerar med databasen och i realtid skapar hemsidan.
  3. HTTP, det protokoll som g?r att webbl?saren kan kommunicera med webbservern, kanalen f?r informationsutbytet.
  4. (X)HTML, som i webbl?saren blir det sammanh?llande kittet, d?r informationen integreras p? ett s?tt som blir anv?ndbart f?r anv?ndaren.
  5. CSS, Javaskript och DOM. De tekniker som styr det visuella intrycket och skapar "levande" effekter i hemsidan.

De databasdrivna webbsajterna har utvecklats gradvis. Till en b?rjan hade man statiska hemsidor som kompletterades med dynamiska inslag, s?som:

Runt ?r 2000 tog utvecklingen fart p? allvar vad g?ller s.k. "content-management systems" (CMS). Idag k?per man inte in en "hemsida" utan vad man k?per ?r en CMS! Du skall inte skaffa (eller g?ra) en upps?ttning sidor, utan ett system f?r hantering av information.

Genomslaget f?r CMS:er inneb?r att idag ?r hemsidor helt igenom dynamiska. Om man tittar p? de fem "heta" omr?dena under ?r 2004 s? ser man detta tydligt.

Wikis och communities ?r exempel p? hur uppdelningen mellan informat?r och tekniker m?jliggjort att den som l?ser hemsidan sj?lv skapar den! Informat?ren ?r anv?ndaren. Mer interaktiv ?n s? kan en webbsajt knappast bli.

N?tbanker, webbhandel och specialiserade s?ktj?nster, typ Gula Sidorna, ?r ocks? de exempel p? att webben ?r interaktiv idag. Knappast n?gon blir upphetsad av en g?stbok eller ett diskussionsforum som s?dant. Interaktiviteten b?r vara mer genomgripande f?r att r?knas.

En annan viktig anv?ndaraspekt i den interaktiva webben ?r de tj?nster som tillhandah?ller skr?ddarsydd information. Man g?r in p? sin sida och f?r det urval nyheter, ?sikter, sportnyheter, v?derleksrapporter, etc. som passar just mig. Informationen ?r s? oerh?rt riklig p? n?tet att alla uppskattar teknik som l?ter informationen komma till anv?ndaren i st?llet.

P? 90-talet talade man om "push", som skulle inneb?ra att nyheter d?k upp exempelvis direkt p? windowsskrivbordet. F?r f? hade st?ndig Internetuppkoppling, de flesta vill inte bli avbrutna med det de h?ller p? med, etc. Men den grundl?ggande id?n lever vidare p? andra s?tt. Det man f?r n?gra ?r sedan kallade portaler har ersatts av aggregatorer. System som letar reda p? den information du vill ha, sammanst?ller den och presenterar den just f?r dig.

Den integrerade webben, webben som programk?rningsmilj? (2005-)

I och med genombrottet f?r tekniker som XML och att andra tekniker som Javaskript har n?tt en st?rre mognad, s? har webbsajterna n?tt ?nnu en utvecklingsniv?. Morgondagens webbsajter har en total integrering med alla andra system. Bankerna ?r f?reg?ngare p? detta. Om du g?r till en kassa p? bankkontoret, till en uttagsautomat eller in p? hemsidan spelar ingen roll. Du kommer ?t samma konton och samma tj?nster.

CMS:en kommer s? sakteliga att fasas ?ver till det totalt integrerade systemet. Dagens CMS:er kommer i m?nga fall att leva vidare och v?xa in i denna nya roll. Andra system kommer att skapas fr?n grunden.

Hemsidan i framtiden kommer inte bara skapas dynamiskt i det ?gonblick du v?ljer att titta p? den, utan den kommer att uppdateras dynamiskt under tiden du tittar p? den. Nu pratar vi inte om dynamiska effekter typ 90-talets DHTML, allts? att det blinkar och r?r p? sig. Vi pratar inte heller om sidor som laddar om sig en g?ng varje minut eller n?got liknande. Vi pratar om sidor som beter sig som vore de datorprogram.

Fyller man i ett formul?r s? j?mf?rs det du skriver med referensinformation p? webbservern inte bara n?r du klickar p? "skicka", utan i realtid. Ett tidigt exempel p? detta ?r Google suggest.

Ett annat exempel p? denna kommande era ?r "24-timmarsmyndigheten". P? dess sajt s? f?rklaras denna utveckling, fast med andra ord och specifikt f?r myndigheternas till?mpningar.

Kort sagt: En webbsajt idag ?r inte en "hemsida", utan den ?r en applikation, en samling sammankittade program som integreras med hela verksamheten och alla andra datorsystem. Idag g?r man inte hemsidor, utan man bygger system med webbteknik.

I programmeringen talar man om "programk?rningsmilj?" (RTE, Run Time Environment). Som programmerare beh?ver jag h?lla reda p? om mitt program skall k?ras p? en Unix-maskin, med POSIX som RTE, eller om man skall k?ra den p? Windows med "Win32" som RTE, eller p? Macintosh d?r RTE:eerna har fantasifulla namn som "Carbon" och "Cocoa". Idag h?ller webben p? att bli en RTE. De system som utvecklas ?r inte "hemsidor", utan en slags program vars byggstenar ?r webbtekniker.

En nyb?rjare kan naturligtvis inte l?ra sig webbteknikerna med en g?ng f?r att ?stadkomma ett s?dant h?r system, men det s?tt p? vilket man l?r sig grunderna b?r vara anpassat s? att man kan v?xa in i detta. L?r dig inte 90-talets tillv?gag?ngss?tt!

Webbstandard: Multipla plattformar och handikappanpassning

Dagens webb m?ste vara tillg?nglig f?r alla. Den inneh?ller s? mycket speciell information, s? att den som exkluderats d?rigenom hamnar p? undantag socialt sett. Det ?r d?rf?r av ytterstavikt att en sajt ?r handikappv?nlig.

Detta ?r naturligtvis ocks? en fr?ga om m?nniskosyn. V?ldigt m?nga hemsidor som l?r ut hur man g?r hemsidor ?r f?r?ldrade, liksom m?nga b?cker i ?mnet. De skrevs f?r att passa g?rdagens webbl?sare. Man kan l?tt byta ut sin webbl?sare om man h?ndelsevis ?r dum nog att sitta p? MSIE 5.x eller (huga!) Netscape 4.x. De som tar del av webben via "text-to-speach" eller braille-terminaler har f?rre m?jligheter. Dagens hemsidor m?ste passa ocks? dessa. Allt annat ?r cyniskt.

Nu ?r denna skara inte s? stor, men de som b?rjar surfa via sina 3G-telefoner kommer snart vara desto fler. Detta ?r ytterligare en faktor som g?r att man n?r man g?r sina hemsidor b?r f?lja webbstandarder och tydligt skilja mellan layout och inneh?ll.

En och samma HTML-kod skall allts? kunna fungera optimalt f?r mediet i fr?ga, oavsett om detta ?r en vanlig datorsk?rm med h?g uppl?sning, en mobiltelefons lilla sk?rm med f?taliga pixlar, en skrivare, en "text-to-speach-terminal" eller n?got annat.

W3C, som jag ber?ttade om tidigare ?r nu ledande i utvecklingen. De fungerar som standardiseringsorgan f?r HTML, XML, CSS och m?nga andra tekniker. Till skillnad fr?n 90-talets vilda v?stern era, d? f?rst Netscape och sedan Microsoft, ofta ganska ogenomt?nkt introducerade olika tekniker p? eget bev?g, s? finns det idag ett organ som alla stora akt?rer lovat f?lja, och som finansieras av alla de stora datorf?retagen.

Tekniska konsekvenser

Begrepp kommer att f?rklaras mer i detalj i appendixet om teknikens utveckling.

"Jag vill ha en hemsida"

Som framg?tt ?r detta uttryck numera i det n?rmaste meningsl?st. Dagens "hemsidor" ?r arbetsredskap och en integrerad del av en helhetsl?sning.

?r du bara intresserad av en enkel l?sning f?r att sprida din ?sikt eller dina funderingar. Strunta i att g?ra en "hemsida", utan s?tt upp en blogg i st?llet. Be n?gon installera Movable Type eller n?got liknande ?t dig och du ?r ig?ng p? fem minuter.

Man m?ste i st?llet fr?ga s?g vad man vill g?ra via sin hemsida. H?r f?ljer m?lspecifikationen f?r de tre system jag (Lars Gunther) just nu jobbar med:

Nils Ericsonsgymnasiets nya hemsidessystem

Sidan skall:

System f?r politiska lokalavdelningar och distrikt

Systemet skall:

Eftersom politik har en tendens att locka fram oseri?sa och oftast anonyma inl?ggsskrivare b?r systemet inte ha ett forum eller en g?stbok. Eventuellt skulle man kunna bygga p? med en fr?gespalt d?r man besvarar seri?sa fr?gest?llare och inte publicerar en fr?ga innan dess att den f?tt ett svar.

En FAQ b?r finnas som en del av den f?rsta punkten ovan, speciellt f?r att hj?lpa skolelever snabbt hitta svar till sin arbeten.

System f?r kyrkor och f?reningar

En f?rstaversion av detta system finns i drift p? adressen www.jesusgudsson.se.

Externt skall systemet:

Internt skall systemet:

Appendix: Utvecklingen av HTML, CSS och skriptspr?k

En hemsidas grundl?ggande del ?r HTML. HTML i sin tur ?r ett s?tt att markera vad slags information man f?rmedlar genom att omge text med s.k. taggar. Det kan se ut s? h?r: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/HTML4/loose.dtd">
<html>
<head>
  <title>Sidans rubrik h?r</title>

  <style type="text/CSS">
    @import "stylenormal.php";
  </style>
</head>
<body>
  <h1>Rubrik h?r</h1>
  <p>Text h?r. Lorem ipsum etc.</p>

</body>
</html>

F?rst skall det komma en doctype. Den talar om vad slags HTML man anv?nder.

Sedan f?ljer taggen <html>. Den inringar hela det egentliga dokumentet och kallas d?rf?r f?r rot-element.

Taggen <head> ringar in det information som beskriver dokumentet i stort. Taggen <body> vad som skall st? i sj?lva dokumentets text- och bilddel.

Taggen <h1> inringar huvudrubriken p? sidan. Taggen <title> i head-delen inringar det som skall st? p? den (vanligtvis) bl? raden l?ngst upp i webbl?sarf?nstret.

Taggen <p> utl?ses "paragraph" och inringar ett stycke.

Taggar kan ha attribut, exempelvis s? h?r: <img src="ego.jpg" alt="Bild p? mig i bastkjol" /> Detta l?ser jag ut som att h?r skall det visas en bild (img). Bilden ifr?ga ?r "ego.jpg" som kan antas vara en bild p? f?rfattaren i jpeg-format. Detta anges med attributet "src", som utl?ses "source" (k?lla). De som inte kan se bilden skall i st?llet f? en beskrivning av den, en alternativtext, som anges med attributet "alt".

Nu vet du tillr?ckligt mycket f?r att vi skall kunna beskriva hemsidans utveckling ur kodningsperspektiv.

HTML 1.0 - taggarna uttrycker spr?klig logik

I webbens barndom var webbl?sarna som sagt inte grafiska. En rubrik p? h?gsta niv? (<h1>) blev inte st?rre ?n underrubriker eller vanlig text. I och med att Mosaic lanserades ?ndrades detta. Man valde att markera rubrikniv?er med att g?ra texten olika stor (som i detta dokument).

Marknadsf?rings/Netscape-eran - taggarna f?r grafiska funktioner (gl?m alla koder i detta stycke!)

N?r marknadsf?rarna kom in i bilden b?rjade de som sagt efterlysa grafisk kontroll. Man skulle som designer kunna styra val av typsnitt (<font family="Verdana, sans-serif">), sidans bakgrundsf?rg (<body bgcolor="#124321">, etc.

Man lade allts? till nya taggar som enbart hade grafisk funktion. Man gav befintliga taggar nya attribut, ocks? med grafisk funktion. M?ngden HTML man beh?vde kunna f?r att g?ra en hemsida sv?llde ?ver alla breddar. Av det sk?let b?rjade m?nga g?ra sina hemsidor i program som Adobe Pagemill (idag Go-Live), Macromedia Dreamweaver eller Micrososft Frontpage. Sj?lv f?redrog jag Netobjects Fusion.

Dessa program erbj?d ut?ver WYSIWYG, att man kunna anv?nda mallar som styrde alla i sajten ing?ende sidors utseende och att l?nkar i exempelvis menyer uppdaterades automatiskt p? alla sidor allteftersom man skapade nya sidor eller tog bort.

Alla sajter som gjordes under denna era gjorde ocks? n?got annat, och vida mycket v?rre ?n att anv?nda grafisk HTML-kod. Man missbrukade taggar s? att de skapade en viss effekt. Tabeller anv?ndes f?r att strukturera sidorna. Rubriker valdes utifr?n ?nskad textstorlek, inte utifr?n vilken logisk niv? man egentligen befann sig p?.

Ocks? jag "syndade" p? den h?r tiden och ocks? de som utvecklade WYSIWYG-programmen t?nkte helt grafiskt. Dessa program skapade - och skapar ?n idag - som regel ?n v?rre kod ?n vad det blir n?r man kodar f?r hand.

Generation fyra av webbl?sarna - taggarna kompletteras med CSS

HTML visade sig snabbt ha flera inbyggda begr?nsningar f?r att styra layouten. Vision?rerna hade b?rjat fundera p? ett s?tt att renodla tekniken, s? att man skulle anv?nda stilmallar, Cascading Style Sheets, f?r att styra det visuella och l?ta HTML-koden ?terg? till att markera spr?klig logik.

Till en b?rjan innebar dock lanseringen av CSS att man kom ur askan i elden. Under DHTML-?ren p? slutet av 90-talet blandade man in CSS utan tanke i sin fortfarande grafiskt orienterade gr?t av HTML-taggar. El?ndet gick under namnet HTML 3.2.

Att uppdatera en sajt f?r hand var i det n?rmaste om?jligt p? den h?r tiden. Koden var s? gr?tig, med tabeller som l?g i en annan tabell inuti en tredje tabell. Till detta kom en stor uppsj? taggar och en massa olika attribut till dem - och ovanp? detta CSS. Ville man dessutom g? Microsoft och Netscape till m?tes s? skulle man dessutom ha javaskript f?r att v?ga kalla sin kreation "DHTML".

Som om inte detta vore nog. MSIE och Netscape Navigator tolkade koderna olika och man var i princip tvungen att skriva dubbla upps?ttningar av allt. Speciellt javaskripten blev el?ndiga.

Tv? saker m?ste h?nda f?r att det skulle bli en slags ljus i ?nden p? denna m?rka tunnel. F?r det f?rsta s? m?ste v?rldens hemsidesmakare f? tillg?ng till kraftfullare verktyg ?n f?rsta generationens CSS. I maj -98 s? lanseras specifikationen f?r CSS 2.0. I och med att MSIE lanseras i version 5.0 (beta h?sten -98, skarp version -99), s? finns det ocks? en webbl?sare som kan hantera CSS 2.0 ?tminstone hj?lpligt.

Sedan Microsoft avgick med segern ?ver Netscape, s? slutade man dock i princip utveckla sin webbl?sare vidare, och idag ?r MSIE klart s?mre ?n sina konkurrenter.

HTML 4 och CSS 2

I och med att specifikationen till HTML 4 blev klar, s? finns det en tydlig rekommendation om hur man b?r skriva sin kod. Ett stort antal taggar, samt ett stort antal attribut till de kvarvarande taggarna ?r numera nerv?rderade (deprecated). De finns kvar f?r att inte skapa en mjuk ?verg?ng fr?n HTML 3.2, men b?r undvikas.

Tack vare detta ?r det p? nytt l?tt att l?ra sig HTML. Det kr?ngliga tycker de flesta i st?llet ?r att skriva CSS-kod. Och det ?r delvis r?tt. Det tar ett litet tag innan man kommer in i systemet. Systemet ?r emellertid konsekvent och logiskt uppbyggt, s? n?r man v?l kommit ?ver f?rsta inl?rningstr?skeln rullar det p? ganska enkelt.

Det kvarvarande problemet med CSS ?r just att framf?r allt MSIE inte st?djer CSS 2.0 fullt ut, samt ?r buggig i sin tolkning av den CSS man faktiskt st?djer. Det hindrar inte att man idag helt och h?llet b?r g? ?ver till CSS-baserad layout. Ur n?stan varje perspektiv ?r det en ?verl?gsen l?sning.

Det speciella med HTML 4 ?r allts? separationen mellan inneh?ll och design. HTML 4 i sin tur finns i tre versioner:

CSS 2.0 skiljer sig fr?n 1.0 fr?mst genom m?jligheten att dimensionera och positionera "boxar". Tillsammans med taggen <div>, s? inneb?r detta att vi kan s?ga adj? till tabellen som hj?lpmedel f?r att skapa sidlayout.

XML och XHTML

HTML blev en makal?s framg?ng, men ett antal viktiga saker saknades. Spr?ket skapar sidor som webbl?saren tolkar och en m?nniska kan se resultatet. Om d?remot en maskin skall tolka sidan, s? blir det sv?rare. F?r att skapa fler m?jligheter s? beh?vs det tydligare och striktare regler. XML ?r i likhet med HTML ocks? en utveckling fr?n SGML, men har en tydligare upps?ttning regler f?r hur taggar skall ordnas och hur de skall skrivas.

XHTML ?r HTML som uppfyller alla krav fr?n XML. XHTML ?r HML och XML samtidigt. Taggarna Heter detsamma som i HTML 4, men de m?ste skrivas enligt XML:s striktare regler. Detta inneb?r bland annat f?ljande:

XHTML finns i flera versioner. 1.0 strict, 1.0 transitional och 1.0 frameset, vars till?tna taggar och attribut ?r exakt desamma som f?r HTML 4. Dessutom finns det XHTML 1.1, som inneb?r att man delat upp XHTML 1.0 i moduler och har f?rb?ttrat st?d f?r bl.a. asiatiska spr?k.

XHTML 2.0 ?r en framtida standard som ?nnu inte ?r helt fastst?lld och som dessutom inte kommer att vara bak?tkompatibel med 1.x. Det ?terst?r att se ifall den kommer sl? rot. Mjuka ?verg?ngar brukar vara att f?redra.

Javaskript och DOM

Inf?randet av webbstandarder inneb?r att vi slipper utveckla alternativa javaskript f?r olika webbl?sare. Idag m?ste vi dock skilja mellan MSIE och de andra (Firefox, Opera, Safari, m.fl.) Enormt m?nga javaskript-skolor p? n?tet och i bokform l?r ut 90-talets javaskript. H?r har saker h?nt och f?r den som utvecklar en hemsida idag ?r dessa gamla artiklar snarast att betrakta som desinformation.

En god regel ?r att om den sida du l?ser om inte inkluderar en n?gorlunda moderna gecko-baserad webbl?sare i det som den ?mnar st?dja, s? ?r sidan f?r?ldrad. Netscape 6 eller 7, Mozilla eller Firefox b?r n?mnas i texten.

90-talets javaskript innebar att man hade ett s?tt att skapa dokumentinneh?ll genom kommandot "document.write". Detta kommando s? att s?ga skrev i dokumentf?nstret. Idag h?ller vi p? att g? ?ver till ett annat s?tt som bygger p? "the Document Object Model" (DOM).

Somliga tror att ?r 2005 s? kommer DOM vara den hetaste klientsidestekniken av alla.

Serverbaserade skript

Klientsidan inneb?r webbl?saren. Ett skript som k?rs p? klientsidan, oftast javaskript (med DOM-kommandon), skickas allts? i sin helhet fr?n server till webbl?sare, sedan utf?rs kommandona. Serverbaserade skript ? andra sidan utf?rs f?rst p? servern och resultatet skickas till klienten, webbl?saren.

Moderna sajter bygger helt p? denna teknik. Det ledande spr?ket f?r att att skapa dynamiska sidor ?r PHP, f?ljt av ASP-spr?ken (VB och C#) och JSP. ?ven om JSP har en liten total marknadsandel, s? ?r det vanligt hos de stora f?retagen f?r tunga aff?rskritiska uppgifter.

Serverbaserade skript b?r utformas s? att tre skikt inom desamma kan urskiljas: Lagringslogik (databasabstraktion), aff?rslogik och presentationslogik.

Det serverbaserade skriptspr?ket kan idag betraktas som ett slags kitt eller lim, som h?ller ihop sajtens alla informationsk?llor. Det kan h?mta information i textfiler och i XML-dokument. Dessa kan i sin tur ligga p? samma server eller p? en maskin n?gon annanstans i v?rlden. Med hj?lp av SQL kan man h?mta och l?mna information i relationsdatabaser. Med hj?lp av LDAP kan man g?ra det samma i katalogtj?nster, som Active Directory. Dessa skriptspr?k kan naturligtvis skicka mejl, men de kan ocks? ta emot och bearbeta mejl. Rent tekniskt ?r det fullt m?jligt att g?ra en l?sning d?r man mejlar in nya sidor (eller delar av sidor) till en webbsajt.

Efterord, till mina elever (och kanske andras)

Som f?retagare jobbar jag med dessa tekniker, som l?rare vill jag l?ra ut de absoluta grunderna p? ett s?dant s?tt att mina elever ?r f?rberedda p? ett professionellt arbetss?tt.

Jag har p? annan plats klagat p? bl.a. webbdesigsnkolan. Inte vet jag om det beror p? mna klagom?l eller inte, men helt pl?tsligt har det efter tre ?rs inaktivitet dykt upp tv? nya artiklar. En om webbstandarder och en om XML och XHTML. Ironiskt nog ?r artikeln om webbstandarder fylld av kodfel. HTML-tidy r?knar 64 stycken, varav flera ?r av typen "propriet?ra attribut". Artikeln om XHTML f?r 28 fel i HTML-tidy.

I artikeln om webbstandard f?rklarar de varf?r de anv?nder Dreamweaver f?r att g?ra sina sidor. Hela f?rklaringen tyder p? att sajtens upphovsm?n fortfarande befinner sig p? 90-talet i sitt t?nkande. Man har helt enkelt inte h?ngt med. Att systemet duger f?r deras egna behov inneb?r inte att det ?r ett f?red?mligt exempel f?r andra att ta efter.

I denna artikel har jag talat mig varm f?r webbstandarder. Det finns de som har en avvikande ?sikt, det vet jag. Min po?ng ?r att s? l?nge som man ?r nyb?rjare b?r man definitivt skriva kod som validerar och f?ljer standard. N?r du b?rjar bli duktig och vet varf?r du avviker fr?n standarderna och exakt vad det f?r f?r konsekvenser, d? kan du b?rja g?ra det. Och att bara kolla att det "fungerar" i din webbl?sare, r?knas inte som att du vet om konsekvenserna!

Artikelinfo
Publicerad:2005-02-27 10:54     Författare:itpastorn
Uppdaterad:2005-02-28 14:57     Ämne:Webbteknik
Uppdaterad: 2005-02-28 14:57    © Keryx