Har i et stykke tid gået og barslet med en idé – brugeren skal kunne vælge mellem flere forskellige webdesign. Jeg synes at brugeren gerne må få en oplevelse af en „personlig” side som hun/han selv kan ændre designet af. Jeg synes rent personligt at det er fantastisk at man ved at skifte ”stylesheet ” og dermed ændre designet radikalt.
Målet for projektet er:
Give brugeren muligheden for at kunne ”customize” sitet ved at vælge mellem flere forud definerede design. Dog vil jeg begrænse mig til kun at lave et ekstra layout i denne opdatering og fokusere mest på at få selve koden til at virke. Det alternative design vil kun ændre header billede og farver. Men det er min mening at forberede løsningen til at man kan lave ”helt” andre webdesign.
Teknologier:
- Javascript (cookies, onload event og DOM manipulation)
- (x)html (form — dropdown menu)
- CSS (ekstra ”stylesheet ”som tilføjer ændringer af designet)
Flowcharts for applikationen:
Flowchart over onload eventen
Flowchart over onchange eventen
Workflow
Jeg fik hurtigt implementeret løsningen.
Skrev hurtigt de to funktioner.
For at give brugeren mulighed for at vælge mellem designs oprettede jeg en dropdown menu (select) og gav den en id så det var muligt at finde den via javascript.
Samtidig satte jeg onchange til setStyleCookie(). På den måde vil setStyleCookie() blive kaldt hver gang brugeren vælger en værdi.
Umiddelbart gik det nemt og smerte frit. Men desværre virkede løsningen ikke som forventet. Nogle dage efter fandt jeg ud af applikationen ikke kunne håndtere hvis brugeren ikke havde været på siden før. Det viste sig at jeg havde lavet min if struktur lidt for hård. Derfor løste jeg op for den så jeg bare checkede på Cookie(’mode’). Det tog noget tid at få det til at virke efter hensigten.
Men nu er løsningen klar så den kan nemt udvides og fin justeres.
Walking in the prseence of giants here. Cool thinking all around!