1. Innleding
Koding kan være veldig frustrerende når man ikke får det
til. Jeg har endelig begynt å få litt kontroll på html og css koding, og
muligens noe overambisiøs bestemte jeg meg derfor å prøve meg på en løsning som
involverer koding med Java-Script i denne oppgaven. Dette viste seg å være
lettere sagt enn gjort…
Her er link til websiden
Her er link til websiden
2. Idé
Jeg bestemte meg for å lage en litt tullete designsidé. I
mangel på noen designartikler jeg virkelig brenner for, bestemte jeg meg for å
lage en side for noe så traust som en ”stolbutikk”. Jeg ønsket å ha et litt
tøysete og livlig preg på siden så jeg fant på navnet ”Stol På Oss”. Det
imaginære konseptet bak denne butikken er å selge stoler i ”knæshe”, friske
farger.
Det første jeg gjorde var å designe en enkel logo for
butikken i Illustrator.
.
3 Skissestadiet
Etter å ha laget en grovskisse med penn og papir begynte jeg å utforme en mer detaljert
skisse i Photoshop. Jeg ville at Photoshopfilen skulle være utgangspunktet for designet
av siden og at jeg skulle ”slice” opp siden slik at jeg kunne bruke elementer
derfra.
Jeg ønsket å ha en såkalt ”slider” på forsiden av siden.
Dette er med andre ord bilder som roterer i en loop. Grunnen til at jeg ønsket dette er
fordi det gir litt liv til designet, samt at det er en fin måte for en butikk å
presentere ulike nyheter på.
Jeg var nøye med å bruke korrekte proporsjoner i Photoshop.
Dette gjennomførte jeg ved å bruke linjalverktøyet slik at alt kom på akkurat
riktig plass.
4. Programmering i
Dreamweaver
Etter å ha designet layouten i Photoshop opprettet jeg en
site i Dreamweaver. Jeg satte inn ulike diver og lagde css-styler til divene
slik at oppsettet ble som i PSD-filen. Etter å ha laget alle de ulike stilene
og divene la jeg alle css-stilene som en ekstern fil. Da det var gjort
lagret jeg oppsettet mitt som et
template. Det eneste som skulle være forskjellig mellom de ulike sidene var
nemlig ”main-content”-området. Jeg gjorde derfor dette området til ”editable
region”.
Da det var gjort opprettet jeg et html dokument basert på
”template”-filen
4.1 Forside slider
Det som viste seg å bli en stor utfordring var derimot å lage en slider til forsiden. En
mulighet er å gjøre det ved hjelp av flash. Siden flash ikke støttes av Apple-produkter som Ipad og Iphone er dette imidlertid en temmelig
”forhistorisk” løsning. Dagens standard for slike interaktive bilder og
gjenstander på nettet er derimot Java-script og nærmere bestemt noe som heter
”Jquery”. Dette viste seg fort å være svært avanserte saker for en fersking
innenfor programmering. Jeg så på mange ulike instruksjonsfilmer på
nettet for å prøve å finne en løsning på dette, men jeg ble bare mer og mer
frustrert. Jeg prøvde meg på å kode slike java-script fra bunnen av, men dette var
komplett umulig å få til. Etter å ha knotet med dette i halvannen dag fikk jeg
tilslutt et gjennombrudd i saken. Jeg fant ut at det finnes tilleggsprogrammer
i Dreamweaver som kan hjelpe deg med slike vanskelige oppgaver. Det var
riktignok ikke enkelt å installere dette programmet og man måtte bruke ett
annet tilleggsprogram for å installere programmet. Etter at jeg tilslutt klarte å
innstalere dette programmet ble det imidlertid lettere å lage en slik slider.
Resultatet med slideren ble jeg veldig fornøyd med. Jeg har
gjort det slik at slideren på forsiden rullerer med bilder hvert 3 sekund. Om
man holder musepekeren over bildet stopper imidlertid bildene å rotere
automatisk.
Innholdet i slideren lagde jeg i Photoshop. Det er en grunn
til at en slik løsning ikke er optimalt og det er fordi at det gjør siden
mindre søkbar i søkemotorene. Ideelt sett skulle man derfor har skrevet inn
teksten og ikke bare hatt teksten i form av et bilde slik som jeg har gjort
her.
4.2 Produktsider
Jeg ble så fornøyd med hvordan slideren fungerte at jeg
bestemte meg for å benytte denne for å presentere butikkens produkter. Stolene
jeg har vist på siden er bilder jeg har funnet på nett. Produktinormasjonen er oppdiktet. Siden hensikten med
denne oppgaven er å få trening i webdesign og Dreamweaver ønsket jeg å minimere
tidsbuken med å finne bilder etc. Av den benyttet jeg bildet jeg fant på nettet
istedenfor å ta bildene selv.
Jeg lagde tre ulike produktpresentasjoner for hver
produkttype. Jeg lagde deretter en slider for hvert produkt på samme måte som
jeg gjorde på forsiden.
Spisestolside |
Klappstolside |
Lenestolside |
4.3 Informasjonssiden
Denne siden kunne jeg definitivt laget langt finere. Pga.
litt mangel på tid lagde jeg derimot en svært enkel løsning her. Jeg skrev ned
noen oppdiktede ord og stylet dette ved å endre header og paragraphstyles ved hjelp av css-regler.
5. Refleksjoner rundt
prosessen
Denne oppgaven viste seg å bli temmelig tidkrevende. Det
som altså tok mest tid var å lage en slider med java-script. Jeg brukte mindre
tid på å finpusse på produkt-presentasjonsbildene fra Photoshop. Om dette var
et reelt oppdrag ville jeg nok brukt mye mer tid på detaljene her. I tillegg er
også footeren ganske primitiv, så jeg ville nok lagt ned mer tid også her for å
style denne.
Det var imidlertid gøy å få teken på å bruke java-script
slider. Dette er noe jeg tror jeg kommer til å bruke mye videre, også i
prosjektoppgaven.