kjetilbm.net kjøpte jeg i 2003 etter å ha hatt en rekke websider på ymse gratistjenester som home.online.no (Telenor sitt hjemmeområde) og home.no.net (Start.no). Jeg begynte med å ha dette hos fasthost.no, men byttet etter ca et år til starthotel.dk, som jeg har hatt siden.

Websiden i sin helhet har eksistert i mangfoldige former og fasonger. Fra den første versjonen av har jeg eksperimentert med å kombinere design og foto, og samtidig sørge for å ha et innhold på selve siden. Mye inspirasjon og vink har blitt hentet fra storedyret.com (før krasjen i 2004).Å kunne ta i bruk et mal-konsept under utforming av websider istedetfor statiske sider, var hele motivasjonen for å begynne med serverside-programmering som PHP. På denne måten kan man altså flette tekstinnhold og menyer inn i ett enkelt sideoppsett, og man unngår å måtte oppdatere en rekke andre tilstøtende sider ved designendringer.

På disse websidene bruker jeg en rimelig enkel struktur; menyen er definert i en array() øverst i index-filen, og tekstfiler hentes inn fra en mappe med bruk av require(). Tekstfilene i seg selv er lagret som .php-filer og ikke .txt, da sistnevnte vil vise alle godsakene hvis man skulle få tilgang til å åpne dem. Det vil altså ikke en php-fil.Layouten kladder jeg alltid i Adobe Photoshop. Jeg kjøpte en studentlisens av denne da Creative Suite var i versjon 2, og greier meg fremdeles med denne pakken. Jeg har alltid likt å bruke fotografier på nettsider, og har denne gang valgt å bruke en heldekkende bakgrunn. Ja – jeg blir oppriktig trist inni meg når jeg ser nettsider med virkelig upersonlige bilder – åpenbare stockphoto-bilder av glisende mennesker på hvit bakgrunn er faktisk noe av det verste som finnes. Bakgrunnsbildet i seg selv er tatt på hotellet Kauai Sands på Kauai, Hawaii, og fargene bearbeidet i to lag (øverste satt til luminosity). Takk til Håvard og Simen som er modeller

Utover dette er designet enkelt. En hovedboks midt på med fast bredde, et område nederst som alltid blir liggende øverst, samt en meny som befinner seg til venstre og kan ekspanderes vertikalt i praktisk talt det uendelige. Fargene til menyene hentes inn fra en felles fargefil, slik at fargene kan settes korrekt i PHP-delen og i bildet som skrives (som lager selve menyteksten).

Menyene til høyre lages altså alle av samme filen, meny.php. Dette er en PHP-fil som gir ut et GIF-bilde, og tar inn parametre som menytekst og nivå. Basert på en intern fil for fargekoding settes så bakgrunnsfargen til transparent (antialiasingområdene blir annerledes og ikke gjennomsiktig) basert på nivået, og gjør at fargene tar seg bedre ut på skjermer med lavere oppløsninger. Skriften i menyen hentes inn fra en ttf truetype-fil.For å lage grafiske effekter bruker jeg også for første gang mootools. Dette er en Javascript-pakke som tilbys for å lage effekter, og som kan vises i alle nettlesere. På denne måten har jeg kunne lage flash-lignende effekter uten faktisk å bruke Flash og korter ned lastetiden og øker kompatibiliteten.

Jeg brukte også en oversikt på 8bitmagazine og smashingmagazine for å finne en passende bildefremviser. For med begrenset bredde kan bilder plutselig ta opp veldig mye plass når de vises i stort format. Jeg gjorde noen passende justeringer på standardoppsettet (blant annet ikke å dimme bakgrunnen til svart), og satt de små forhåndsvisningsbildene til å bli 62 px kvadrater. Dette har vist seg som en god løsning – det blir 7 i bredden, og 7 er et tall jeg liker Slimbox er javascriptet som viser bildene, og baserer seg på mootools. Jeg valgte altså bildeviser basert på kravet at det måtte være mootools-bygget.

Alle bildeendringer i etterkant av kladden gjort i Photoshop, har jeg gjort i GIMP. Som så mange andre har jeg den siste tiden (blitt nødt) til å ta i bruk en Linux-variant for å gjøre webarbeid effektivt nok. Det er nytteløst å gjøre sånt i Windows. Mer om dette her.

I tillegg har jeg for første tatt i bruk en annerledes teknikk for å vise bilder som skal vises i full bredde. Det er å benytte en boks med fast høyde og bredde, og heller sette bakgrunnen til å være det aktuelle bildet. Hvis da bakgrunnsbildet er noe større enn boksen, har jeg tre fordeler:

1. kan justere plasseringen av bildet etter at det er beskjært
2. den fysiske plasseringen er definert før bildet er lastet og gjør at det ikke blir noen ekle hopp i teksten under lasting
3. ... og man kan ha copyright-tekst på bildet uten at det vises på websiden ved å la boksen beskjære tilstrekkelig mengde av bildet (slik vil de som lagrer bildet vite om copyrighten, men den vil ikke skjemme selve nettsiden).

Bakgrunnbildet kan vises i sin helhet ved å velge «Vis bakgrunn», nederst. Det var en stund tanken å ha en nesten heldekkende hvit bakgrunn hvor denne kunne dimmes vekk og avdekke designet slik det er nå. Men av flere grunner ble dette valgt bort (hovedsaklig fordi jeg ikke fant en løsning som fungerte). Når jeg tenker meg om nå – i skrivende stund – ville dette kunne løses med å bruke fx.tween() i mootools, og bare gjøre bakgrunnsfargen gjennomsiktig.

Fargevalget baserte seg mye på bakgrunnen. Denne er sterkt kontrastert – den er rød, svart og hvit i all hovedsak, med noen innslag av blått. Hvitt er en selvsagt bakgrunnsfarge, og menyfarger og linker har forsøkt å blitt lagt slik at de ikke skjemmer designet, men likevel fremstår tydelig nok.

For første gang har jeg også tatt i bruk forenklede URL'er, slik at det ikke blir kjetilbm.net/index.php?side=forside, men heller kjetilbm.net/forside. Dette gjøres i .htaccess-filen – gitt at du kjører Apache-server (som de fleste jo gjør) – og tillatter en masse annet snacks i tillegg til dette, som å vise fil-tre, endre index-fil-rekkefølgen osv.

Det settes også inn smiley's automatisk. Dette var en idé jeg fikk for å gjøre dette til en litt mer «menneskelig» nettside – kanskje inspirert av nettopp det man finner i mange blogger rundtomkring. Måten smileys'ene blir satt inn på er gjennom bruk av output buffering i PHP. Ved å bruke en callback-funksjon vil siden – når den er klar til å sendes til nettleseren – en funksjon bli kjørt på dette innholdet. Dette kjøres via ob_start(). Jeg valgte å lage en funksjon som bytter ut « : ) » etc med en html-kode til et bilde, hvor en array() inneholder alle oppføringene som kvalifiserer til smileys. Dette gjelder også «&», som for å få validert XHTML må skrives om til &. Dette sparer meg for en del bryderi når det gjelder å skrive URL'er.

Jeg har også lagt inn kommentarfunksjonalitet på enkelte av sidene – spesielt de med mye fakta eller tips. Dette er en generell funksjon som hentes inn, og hvor kun én enkelt variabel byttes for å få denne til å fungere fra en side til en annen. Dette sparer også en del koding. Gravatar brukes for å hente inn bilder til kommentarene og krever ingen implementering som helst. Også 62px brukes som bildestørrelse. Øverst vises også en indikasjon på hvor mange kommentarer som eksisterer, delvis også for å antyde at kommentarer er aktivert for den aktuelle siden.

ReCAPTCHA brukes for å godkjenne selve kommentarene. Dette implementeres veldig enkelt i PHP.Alle overskrifter lages som et bilde. Dette er egentlig en ulempe, for det gjør websider «mindre søkbare» enn hvis man hadde brukt vanlige tekst-overskrifter. På den annen side så kan man ved å bruke et bilde bestemme hvilken skrifttype som skal brukes – dvs at den ikke behøver å være installert på brukerens datamaskin. Så i denne omgang vant design over tilgjengelighet – selv om forskjellen skal være minimal når overskriftsteksten legges inn i «alt» tag'en i html'en.

Basert på URL'en til PHP-filen kan man velge nivå på overskriften, og teksten som skal skrives ut er også bare en del av denne, dog gjort «lovlig» med urlencode().