Tek.no

Artikkel

Heldigvis ser ikke hjemmesider slik ut lenger

Mye har forandret seg siden Internetts barndom.

Anders Brattensborg Smedsrud

De to tegnene «LO» var de første som ble sendt over Internetts forløper ARPANET i 1961. På grunn av maskinkrasj kom ikke de resterende tegnene «GIN» frem til mottakermaskinen før en time senere.

Ufattelig mye har skjedd siden denne første meldingen kjempet seg frem mellom to maskiner. Datidens ARPANET ble kommersielt tilgjengelig i form av Internett, og det er ikke lenger 30 – 40 datamaskiner som er koblet sammen, men flere milliarder.

I dag brukes Internett til mye mer enn å overføre korte meldinger mellom maskiner. Fra det virkelig smalt i 1995 og til i dag, er det vidtspennende innholdet på verdensveven presentert på nesten like mange ulike måter som det finnes nettsider.

Alt var bedre før?

Vi skal ta et tilbakeblikk til Internetts barndom, og hilse på de revolusjonerende teknologiene som muliggjorde både rullende velkomsttekst, bevegelige bilder, smakløse bakgrunnsteksturer og nedtrekksmenyer lange som et vondt år.

Innhyllet i nostalgisk tåke som som man er, husker en helt sikkert ikke akkurat hvor lite attraktiv favorittsiden ens så ut for ikke så alt for mange år siden. Hovedsaken var at man gledet seg til hvert besøk, som kanskje ikke kom alt for ofte. Da det kostet å være på nett den gang, koblet man seg som regel fra akkurat tidsnok til å ikke bli sprø av alle velkomstskjermene og de blinkende GIF-filene man måtte trykke seg vei mellom.

Men med et sterkt ønske om å kunne returnere neste uke for forhåpentligvis nye oppdateringer, skjenket du noen gang teknologiene bak disse vidunderlige minnene en tanke?

HTML, CSS og Flash er tre av disse webteknologiene, som ble introdusert på 90-tallet. I tillegg må vi ikke glemme bildeformatet GIF. Felles for dem er rollen de har hatt i utformingen av Internett som vi kjenner det i dag.

«Altmuligmannen»

Slik ser koden som nettleseren din tolker ut.

Hver gang du besøker en nettside, tolker nettleseren din HTML-kode som andre personer har skrevet. HTML står for HyperText Markup Language, og er et markeringsspråk. Man markerer altså tekst med små koder som forteller hva teksten skal gjøre, og hvordan den skal struktureres. Med HTML-tagger kan man blant annet gjøre om tekst til hyperlenker som tar deg til andre nettsider, og viser bilder.

Koden i bildet til høyre må til for å skrive ut

«Her kommer sidens innhold:
Hei verden.»

Men dette er de fleste klar over. Det som derimot er interessant er hvordan HTML ble utnyttet for å både strukturere og presentere innholdet på en side. Før CSS ble tatt inn i varmen, fant web-utviklere mange oppfinnsomme måter å presentere innholdet sitt på.

Utviklere trikset med gjennomsiktige bildefiler og tabeller for å skape en spennende layout i tiden før CSS.

De aller første nettsidene så, med et par hyperlenker og kanskje et lite bilde til, mest ut som vanlige tekstdokumenter. Mange lagret faktisk for web direkte fra Word. Dette ble kjedelig i lengden, og noen kloke hoder fant raskt ut at både tabell-tagger og gjennomsiktige bildefiler kunne utnyttes for å sprite opp layouten med flere kolonner.

Tabell-taggen var egentlig ment for å presentere data, ikke strukturere en hel nettside. Når man også begynte å dele opp bilder og putte disse inn i tabellene, ble de så store og kompliserte at webutviklere ikke klarte å holde rede på dem lenger. Dette førte i mange tilfeller til at innhold endte opp på de merkeligste steder, og at utviklere måtte støtte seg til grafiske webutviklingsverktøy fordi de mistet oversikten over egen kode.

Fritt frem for HTML-tagger

Før nettleserprodusentene for alvor begynte å holde seg til samme standard for HTML-tagger, fant de like så godt opp sine egne. To av de mest irriterende og unødvendige er henholdsvis Netscape og Microsoft sine.

Kanskje øverst på listen finner vi blink-taggen. Det var en Netscape-ansatt som gav liv til denne etter en våt kveld på byen. Et par kollegaer diskuterte nemlig funksjonen i den tekstbaserte nettleseren Lynx som lot teksten slå seg av og på gjentatte ganger, og fant ut at deres Netscape manglet denne. Innen sola stod opp, og etter et par begre med drikke til, var tidenes mest irriterende tagg et faktum.

Taggen ble utrolig populær, og på tjenester som GeoCities eksploderte bruken. Blink-taggen er faktisk mer brukt enn GIF-animasjoner og strømmevideoer.

For å oppleve taggen må du i dag nøye deg med en emulert utgave – selvsagt i form av en GIF-animasjon – da de fleste nettlesere nå endelig har latt originalen dø. Firefox begraver den i versjon 23, som snart er på vei ut døra hos Mozilla.

Det høres ikke trist ut, men litt spesielt er det likevel. All tekst som er skrevet inne i en blink-tagg vil med årene forsvinne. Når vi stadig får nye nettlesere som bare støtter nye operativsystemer, og kjører på nye datamaskiner – vil informasjon fra Internett i praksis bli slettet, litt etter litt ettersom støtten for tagger avsluttes.

<blink> Men, hvor viktig kan blinkende tekst egentlig være? </blink>

Hardware.no

Om en lurer på når en nettside sist er oppdatert, men ikke ser noen dato, se om du ikke får øye på en gigantisk rullende banner øverst på siden. Bak banneret stod Marquee-taggen, og den var tilsynelatende obligatorisk på alle nettsider på slutten av 90-tallet og begynnelsen av 2000-tallet. Til tross for dårlig lesbarhet og sin generelt manglende verdi forsvinner denne taggen ingen steder foreløpig.

CSS reddet webdesignen

En enkelt CSS-fil kontrollerer bakgrunnsfarge, overskrifter og fonter for hele nettstedet. Tidligere gjorde man dette i hver eneste HTML-side.

Etter hvert som Internett-sidene ble større og mer omfattende, meldte behovet seg for en bedre måte å organisere innholdet på, og det var nordmannen Håkon Wium Lie som fant redningen, med CSS. I Cascading Style Sheets separerte man endelig innhold fra presentasjon. For mens HTML-filene inneholder tekst og struktur, tar CSS-filen seg av presentasjonen av dette innholdet.

Tekststørrelse, sidebredde, farger og oppsett kunne med introduksjonen av CSS gjøres fra én fil, som holdt orden på flere HTML-dokumenter. Man kan med CSS ha flere ulike layouter på siden sin, eller man kan som bruker slå den helt av.

Det ble mye enklere å oppdatere nettsider, og utviklerne fikk bedre oversikt over sin egen kode.

90-tallsyndlingen GIF-animasjon

GIF-formatet fikk virkelig sitt gjennombrudd med Internett. Grunnen til det er at bilder som lagres i GIF-formatet tar liten plass, kan ha gjennomsiktig bakgrunn og ikke minst kan de animeres.

Rett etter at Internett ble allemannseie var en fredfull tid. Ikke noe mas om funksjonelle, interaktive eller informative nettsider. Alt man behøvde var en hjemmeside med et par bilder, noen avsnitt om seg selv, og en dansende et eller annet – så lenge det danset var alt ok.

En annen slager var tilsynelatende tomme nettsider med «Under Construction»-animasjoner, helst flere av dem. Dette betydde som regel at eieren hadde testet ut hva en hjemmeside var for noe, for så å aldri returnere.

De virkelig kule, kunne driste seg til svart bakgrunnsfarge og flamme-animasjoner.

GIF-filer komprimeres med en tapsløs algoritme, som fører til at bildekvaliteten ikke forringes ettersom filstørrelsen reduseres. Dette gjelder dog bare for GIF-filer med relativt få farger.

Bildepunktene i en GIF-fil.

Tenk deg at fargene i bildet til høyre er følgende bokstaver. R= rød, G= Grønn og B= Blå. Da vil bildet se slik ut:

Første rad: RGGG
Andre rad: RRGB
Tredje rad: RRRG
Fjerde rad: RRRR

Slik ser bildet ut ukomprimert. GIF komprimerer ved å slå sammen lik informasjon på denne måten:

Første rad: 1:R-3G
Andre rad: 2:2R-1G-1B
Tredje rad: 3:3R-1G
Fjerde rad: 4:4R

Vi ser altså at informasjonen i bildet kan komprimeres bedre og blir mer effektiv jo flere like farger det er i nærheten av hverandre. Derfor har de fleste GIF-filer en begrensning på 256 farger.

Spill og underholdning

Denne velkomstsiden traff du på nintendo.no i 1999.

Flash kom som er farsott på begynnelsen av 2000-tallet, etter at produsenten flere ganger hadde sett seg nødt til å endre programmet på grunn av laber interesse. I 1994 var SmartSketch, som det het, et vanlig tegneprogram, før det under navnet FutureSplash fikk støtte for å lage vektor-animasjoner. I 1996 ble programmet kjøpt av Macromedia, fikk navnet Flash, og enda noen år senere kjøpt opp av Adobe.

Flash har sannsynligvis en stor del av æren for din godt utviklede tålmodighet i dag. Teknologien brukes i dag til animasjoner, nettspill og videostrømming på nett. Det gjorde den for 15 år siden også, den store forskjellen var lastetidene. Det kunne ta evigheter å laste en nettside i seg selv, men enda verre ble det da de trendy velkomstsidene slo inn over Internett.

En god velkomstside inneholdt på slutten av 90-tallet ordene «velkommen til», eventuelt selskapets logo, ofte sammen med en lengre og ganske massiv flash-animasjon som det var obligatorisk å se, hver gang.

De smarte husket etterhvert direktelenken til favorittnettsidens innhold, men mange stakkarer tenker nok fortsatt med gru tilbake til fremdriftsindikatoren som sneglet seg fremover.

Teknologien kan vi takke for at vi i dag har tjenester som YouTube, og mange har nok også slått i hjel noen timer på diverse småspill opp gjennom årene – som alle har vært basert på Flash.

Mens det i senere tid nærmest har gått sport i å mislike Flash, var teknologien sårt tiltrengt på tidlig 2000-tallet. De ellers så kjedelige og statiske nettsidene ble piffet opp ved hjelp av animasjoner og lyder. Flash var også den første teknologien som i større grad inviterte brukerne med til å interagere med innhold på siden. Resultatet av Flash, uavhengig av status i dag, er mer komplekse og interaktive nettsider.

Nå som nyeste versjon av HTML har fått innebygget støtte for både videostrømming, enkle animasjoner og spill, vil man nok se en nedgang i antall sider som baserer seg på Flash fremover – og det har kanskje allerede skjedd, på godt eller vondt.

Han gikk til kamp mot HTML-kaoset og fant opp CSS-standarden:
Les vårt portrettintervju med Håkon Wium Lie >>

Maskinene som driver verdens nettsider er utrolig kraftige:
Se hvordan et toppmoderne datasenter fungerer »

Til slutt tar vi med et utvalg spesielt interessante websider fra noen år tilbake:

Les også
Nå kan du teste ut Firefox for Windows 8-nettbrett
Les også
Nye Firefox lar deg dele direkte fra nettleseren
Les også
Dette kartet viser hele Internett – i 1977
Les også
Møt piraten bak alle moderne nettsteder
Les også
Nå skal Adobe Flash forsvinne fra Linux
Les også
Adobe dropper Flash også til TV
Les også
Adobe åpner opp for fullblods 3D-spill i nettleseren
Les også
Swiffy konverterer Flash-animasjoner til HTML5
Les også
Lek med HTML5
annonse

Les også