Webstandarder: En introduksjon
Planen min har hele tiden vært å bruke denne bloggen til å skrive om webstandarder og “moderne” webdesign, men det har vært vanskelig å komme igang. Det har vært mye jeg har hatt lyst til å skrive om, men jeg har følt at jeg bør begynne med et innlegg der jeg skriver litt om hva webstandarder er, hvorfor det er lurt å kjenne til webstandarder og hvordan man kan lage sider i henhold til disse.
Nå er det allerede skrevet masse om dette temaet, og jeg har nok ikke så mye nytt å bidra med - annet enn at jeg kan norsk. Mange av oss leser sikkert engelsk greit, men for å spre det glade budskap til norske webdesignere har jeg hatt lyst til å blogge litt om disse tingene på norsk.
Så her altså, en introduksjon til hva webstandarder er, hvordan man koder i henhold til dem - og hvorfor du bør gjøre det.
Artikkelen er forsøkt skrevet slik at den kan gi et innblikk i hva det dreier seg om for de som ikke har særlig kjennskap til temaet fra før, og jeg satser på å komme tilbake med mer inngående informasjon til mer erfarne kodere ved en senere anledning.
Hva er webstandarder?
Webstandarder er en betegnelse på et sett med retningslinjer for hvordan man bør programmere dokumenter for nettet. Standardene er definert av en organisasjon ved navn World Wide Web Consortium, gjerne forkortet til W3C. Deres retningslinjer er ment som en oppfordring såvel til de som utvikler nettlesere som til oss hjemmesidesnekkere.
Et historisk tilbakeblikk
De som har vært på nett leeeenge husker kanskje tiden for et tiår siden da den (første) såkalte browserkrigen herjet. Internet Explorer og Netscape Navigator var de to rådende nettleserne, og de kjempet begge om å vinne flest brukere. Begge fokuserte på å legge inn ulike finesser som motparten ikke hadde i sin nettleser, noe som skapte store utfordringer for oss som skulle lage hjemmesider. For at en side skulle se mest mulig lik ut i de to nettleserne, måtte man gjerne kode en variant for hver nettleser, og bruke kronglete script for å fôre rett versjon til rett nettleser.
Omtrent samtidig ble W3C opprettet, og deres mål var (og er) å sørge for at de ulike nettleserprodusentene følger felles retningslinjer, samt å utvikle et sett med anbefalinger for hvordan HTML bør skrives av webutviklere - og leses av nettleserne. Det skulle likevel gå lang tid før både nettleser-industrien og webutviklere fikk fokus på disse webstandardene, og fortsatt har vi en lang vei å gå.
Browserkrig - og borgerkrig - i dag
Også i dag foregår det en slags nettleserkrig mellom Microsofts Internet Explorer på den ene siden og en rekke nettlesere som langt på vei er bygget på rammeverket fra Netscape Navigator (som Firefox, Safari, Camino osv.) på den andre. Også norske Opera har de siste årene kjempet til seg stadig større markedsandeler på nettet. Et av de største problemene i dag er at Internet Explorer ikke har vært oppdatert på mange år, og at den henger veldig langt etter når det gjelder støtte for standardene som er definert av W3C. Så mens de andre browserne langt på vei tolker og viser standardbasert HTML riktig, må vi ofte bruke alternative kommandoer for å få sidene til å vises riktig i Explorer. Microsoft jobber nå med versjon 7 av nettleseren, og ting tyder gudskjelov på at denne versjonen vil redusere mye av problemet - men det vil sannsynligvis ta lang, lang tid før IE6 er en utryddet fiende.
Samtidig foregår det også en slags borgerkrig mellom webutviklere - mellom de som er opptatt av å lage sider i tråd med webstandardene og de som sverger til gamle metoder. For selv om W3C sine retningslinjer har vært tilgjengelige siden webbens spede barndom, har de fleste “drevne” webutviklere tillagt seg standardstridige kodepraksiser som det føles vanskelig å kvitte seg med. Det rådet i mange år en oppfatning om at sider umulig kunne være kodet riktig og se bra ut, og mange syns fortsatt det er vanskelig å få nettsider til å se ut slik man ønsker uten å ty til gamle triks. Enkelte ser heller ingen grunn til å endre metode - det har jo liksom funket i ti år, så hvorfor skal vi gjøre ting annerledes nå?
Hjelpen er på vei!
W3C har sider fulle av informasjon og spesifikasjoner som forklarer hvordan og hvorfor man bør følge standardene, men sidene ser dessverre ikke særlig inspirerende ut i seg selv. Men gudskjelov finnes det forkjempere for webstandarder som gjør alle fordommene til skamme. Dave Shea og Molly Holzschlag startet prosjektet CSS Zen Garden for å bevise at det definitivt er mulig å lagre lekre sider med standardbasert kode og CSS, og dette fungerte som en vekker for mange (meg inkludert). Flere av “stjernene” i webdesign-miljøet er engasjert i et grasrotprosjekt ved navn The Web Standards Project (WaSP), og misjonerer overfor såvel browsermakere som oss andre webutviklere.
Og ikke minst - inspirasjonen flyter fra designer til designer og fra side til side. Mange av oss som går over til den “rette” siden ender opp som evangelister - og skriver artikler som dette for å spre det glade budskap!
Hvordan kode i henhold til webstandardene?
Jeg håper å kunne vie mye plass i denne bloggen til tips om hvordan man kan kode i tråd med standardene, men i dette innlegget nøyer jeg meg med å komme med noen generelle hovedregler.
Angi dokumenttype
Alle html-dokumenter bør innledes med en deklarasjon av dokumenttype, en såkalt DTD. Denne forteller nettleseren hvilken kodestandard du har benyttet i dokumentet, noe som igjen påvirker hvordan nettleseren forsøker å tyde- og presentere dokumentet. Slik kan man for eksempel fortelle nettleseren at man har skrevet en side i strict/streng HTML 4.1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
“http://www.w3.org/TR/html4/strict.dtd”><html>
Du kan lese mer om ulike dokumenttyper (på engelsk) hos A List Apart.
Skriv semantisk kode
Et av rådene til W3C er at man skriver kode som er semantisk. I denne sammenheng betyr det at man skal merke elementene i dokumentet basert på hvilken betydning eller funksjon de har. Dersom du skal skrive en overskrift skal du markere det som en overskrift ved å bruke <h>-tagger. De “viktigste” overskriftene markeres med <h1>, og så videre nedover i fallende viktighet til <h6>. Har du en liste med lenker (for eksempel en meny), skal den markeres som en liste (<ol> for nummererte lister, <ul> for unummererte lister). Sitater markeres enten med <cite> (for enkle sitater og referanser) eller <blockquote> (for lange gjengivelser). Og så videre…
Dette betyr også at man kun skal bruke tabeller til presentasjon av tabulære data, og ikke til å bygge opp sidens layout - slik vi alle brukte å gjøre, og mange dessverre fortsatt gjør.
Skill innhold, funksjonalitet og presentasjon
Et av de viktige hovedprinsippene er at man skal skille innhold, funksjonalitet og presentasjon. Tidligere har det vært vanlig å blande disse tre i ett og samme dokument. La oss ta et eksempel:
<table><tr><td align="center" bgcolor="#333333"><font color="#ffffff" face="Arial" size="5">Dette er en overskrift</font></td></tr><tr><td align="center">Vil du vite mer? <a onclick="window.open('kontaktskjema.html, 'Kontakt', 'width=430,height=600, scrollbars')" href="javascript:void(0)" style="font-weight:bold; color: #990000;">Kontakt meg!</a></td></tr></table>
Her leser browseren omtrent dette:
Her er en tabell. Nå kommer en ny rad. Her er en tabellcelle. Innholdet i cellen skal sentreres, og cellen skal ha en mørk grå bakgrunn. Nå kommer det tekst. Den skal være hvit, i skrifttypen Arial og den skal være stor. Der står det: Dette er en overskrift. Så gjelder ikke tekstbeskrivelsen lenger. Og så er det slutt på cellen. Og slutt på raden. Så kommer en ny rad. Så kommer en ny celle. Innholdet i cellen skal sentreres. Der står det “Vil du vite mer?”. Og så kommer det en lenke. Og når du klikker på den skal det komme opp et nytt vindu med en ny side. Og dette vinduet skal ha tittelen “Kontakt” og være så-og-så høyt og bredt og ha scrollefelt. Og teksten til linken skal være mørkerød og fet. Og så var det selve teksten, ja. Der står det “Kontakt meg”. Og så er det slutt på lenken. Og slutt på cellen. Og slutt på raden. OG slutt på tabellen.
Rotete? Javisst. Og det er det for nettleseren også! Jeg har nok gjort det ekstra knotete her for å få frem et poeng, men det er mye kode der ute som er langt verre enn dette også.
Skal vi så se hvordan vi kunne ha skrevet det samme i henhold til standardene:
<h1>Dette er en overskrift</h1><p>Vil du vite mer? <a href="kontaktskjema.html" class="popup">Kontakt meg!</a></p>
Her vil browseren lese dette:
Nå kommer en overskrift. Der står det: “Dette er en overskrift”. Så kommer en paragraf. Der står det: “Vil du vite mer?”. Så kommer en lenke til dokumentet “kontaktskjema.html”. Lenken har verdiene til klassen “popup”. Lenketeksten er “Kontakt meg!”. Så er det slutt på lenken og på paragrafen.
Men hva nå med utseende og funksjonalitet? Jo, det har vi deklarert i to separate dokumenter som vi så refererer til øverst i html-filen. Vi har én CSS-fil der vi har angitt at alle overskrifter skal ha hvit tekst på grå bakgrunn, ha Arial-font og en gitt størrelse. Vi har også angitt at lenker skal være mørkerøde. I tillegg har vi kanskje skrevet at lenker som har klassen “popup” skal ha et lite ikon før eller etter seg som illustrerer at lenken vil åpne et nytt vindu. Og for å få lenken til å gjøre dette har vi skrevet en liten kodesnutt med javascript som også hentes inn som en separat ressurs. I denne koden står det at lenker som tilhører klassen “popup” skal åpnes i et nytt vindu med angitte kvaliteter.
Du syns kanskje ikke dette virker mer ryddig enn å samle alt på ett sted. Men tenk om du så skal gjøre endringer senere. Dersom du vil endre selve innholdet, går du inn i HTML-filen, finner raskt og enkelt teksten, endrer og lagrer. Vil du endre lenkefargen, gjør du det raskt i CSS-filen. Og dersom du vil endre javascriptet finner du det ryddig og oversiktlig i en egen fil, fremfor å måtte skumme gjennom et sammensurium av kode.
Hvorfor bør vi følge webstandardene?
Mange er som sagt motvillige til å endre programmeringsmetoder. Jeg tror at man om noen år vil være sjanseløs som webutvikler dersom man ikke forholder seg til webstandarder, men enn så lenge kan man (dessverre) overleve fint i det gamle tabellkaoset. Dersom du trenger noen tupp i ræva for å snu om på vanene dine i dag (eller lurer på om det er viktig å ansette standardkompetente hjemmesidesnekkere), gir jeg deg her seks gode grunner:
Ryddigere kode
Som webutvikler er den umiddelbare gevinsten at du får en mye ryddigere kode. Du slipper å navigere deg gjennom tabeller i tabeller i tabeller, og det blir mye enklere å gå tilbake i ettertid for å gjøre endringer - eller å ta over andres kodeprosjekter. Tenk deg at du har angitt linkfarge i hver eneste link-tag i et dokument. Da er det en frustrerende jobb å gå gjennom hele dokumentet (eller hvert eneste dokument) for å endre farge på lenke etter lenke. Har du i stedet definert én farge for alle lenker i et eksternt stilark trenger du bare å gjøre én oppdatering.
Fokus på innhold
Etterhvert som man kommer inn i tankegangen og innser hvor lett det er å oppnå nesten hva som helst ved hjelp av CSS, får man et langt bedre fokus på selve innholdet på siden. Dermed vil det også bli mye enklere å bygge opp grunnstrukturen for en side: Du fokuserer på hva som er menylister, overskrifter og innhold - og plotter det inn i en logisk rekkefølge. Så svinger du tryllestaven en gang eller tre med CSS, og vips har du en side som er både logisk bygget opp og estetisk tilfredsstillende.
Tilgjengelighet
Webstandarder gjør det lettere å gjøre nettet tilgjengelig for alle. Standardbaserte sider fungerer tusen ganger bedre for de som ikke leser dem i en vanlig nettleser og for de som har funksjonshemninger som gjør at de ikke kan lese eller navigere nettsider på vanlig måte. Dersom siden er kodet riktig vil den fremstå som oversiktlig og forståelig for blinde som får lest opp siden av en tekstoppleser eller som leser den ved hjelp av et braille-tastatur. Det er lett å tenke at dette bare er et gode for blinde, for svaksynte (som lettere kan øke størrelsen på tekst i et standardbasert dokument) og for bevegelseshemmede som ikke kan navigere ved hjelp av mus (men som kan få en lettere surfeopplevelse ved at man legger inn muligheter for tastaturnavigasjon). Men som Derek Featherstone på en humoristisk måte illustrerer i sin artikkel Children and Accessibility: It matters, skal det ikke mer til enn bråkete barn før man føler behovet for godt tilgjengelige sider.
Fungerer på flere platformer
Sider som er kodet i henhold til standardene vil fungere mye bedre på mobiltelefoner og på alle de andre alternative platformene som dukker opp i våre dager. Så lenge innholdet er separert og logisk presentert i et eget dokment, kan du styre hvordan en og samme side skal vises forskjellig - avhengig av hvilket verktøy man bruker for å lese siden. Dermed sparer du deg for bryet med å lage én variant av siden til nettlesere, én til mobilbrukere, én til de som surfer med PlayStation Portable, én til utskrifter osv.
Bli oppdaget!
Webstandarder går hånd i hånd med søkemotoroptimalisering. Når en hjemmeside er riktig satt opp med definerte overskrifter og paragrafer, er det betraktelig lettere for søkemotorene å forstå hva siden handler om. Dermed øker sjansene for å rangeres høyt på søkesider som Google og Kvasir når det blir søkt på begreper som du skriver om.
Vær en kuul koder
Og selvfølgelig: Alle de kuule koder i henhold til webstandarder. For ti år siden var animerte giffer og javascripts for mouseover-effekter det virkelig hotte. For fem år siden pepret alle de tøffe webdesignerne sidene sine med 3D-krystaller. Skal du ha en sjanse til å nå opp i dag er du rett og slett nødt til å ha en pen kode under panseret. Og skal du i det hele tatt kunne leve av å lage hjemmesider om fem år er du nødt til å lære deg webstandardene. Så hvorfor vente?
