Hjemmeside til Kennel Chrilika

Som sagt så er dette semesteret snart slutt, og i det andre emnet jeg tar “Web og informasjonsdesign” har vi jobbet med å lage hjemmesider i Adobe Dreamweaver. Den oppgaven jeg har synes har vært mest interessant å jobbe med var å lage en hjemme siden for Kennel Chrilika. I dette blogginlegget vil jeg beskrive prosessen i arbeidet med denne oppgaven.

Jeg har en hund fra Kennel Chrilika, og vi har god kontakt med dem. Oppdretteren til hunden min visste at jeg tidligere har lagd hjemmesider gjennom skoleoppgaver på HiOA, og lurte på om jeg kunne lage en ny hjemmeside til dem. Dette synes jeg var et spennende oppdrag og spurte læreren i faget “Web og informasjonsdesign” om jeg også kunne ha dette som en oppgave på skolen, slik at jeg også kunne få tilbakemeldinger på arbeidet jeg gjorde.

Jeg snakket med oppdretteren og hun tegnet opp siden slik hun ønsket å ha den. Hvilke kategorier hun ville ha, og hvordan hun ville at rekkefølgen skulle være. Hun ønsket å ha kategoriene: “om oss”, “våre hunder”, “nyheter”, “kull”, “planer”, “kontakt” og en egen kobling opp mot facebooksiden deres. Så satt jeg meg ned i Dreamweaver. I en tidligere oppgave hadde jeg lagd en side som hadde samme oppsett som oppdretteren ønsket, dette hadde jeg gjort bevisst for å teste det ut. Dermed kopierte jeg bare denne siden til en ny. Jeg fant ut at det var en noen ting jeg matte forandre på fra den forrige.

Noe av oppbyggingen til den første siden:

Noe av oppbyggingen til det jeg leverte:

Gjennom dette faget har vi ikke lært å kode, og jeg lærte meg ikke mange koder siste jeg hadde et fag hvor vi jobbet I dreamweaver. Dermed måtte jeg jobbe på den tungvindte måten med å lage nye css-regler manuelt og så legge inn div’ene manuelt. Der flere av samme div’er skulle legges inn kopierte jeg bare kodene. Det tok meg noen timer av en ettermiddag å sette sammen og byttet ut fra den første “testsiden” jeg lagd. Det meste gikk i å bytte ut menykategoriene, opprette alle sidene hjemmesiden skulle inneholde, og legge inn informasjonen som jeg kunne hente fra kenneles gamle sider og blogg. Så møtte jeg oppdretteren igjen og viste henne det jeg hadde hittil slik at hun kunne fortelle hva hun likte, hva hun ville forandre og hva annet hun ønsket å ha med i tillegg. I tilllegg satt vi oss ned og så på mange hjemmesider til andre oppdrettere av Tollere. Her fant vi ut at mange har skilt kullplanene fra andre planer for at akkurat dette skulle være lett for fremtidige valpekjøpere å få denne informasjonen. Vi fant også ut at mange av de kategoriene vi hadde valgt var like med det de andre oppdretterene hadde. I tillegg vise hun meg noen sider hun likte godt og det innholdet/designet på dem hun ønsket å ha på sin egen side. Hun ønsket en tabell på kull-siden over valpene i de forskjellige kullene og litt nyttig informasjon om hver enkelt valp. I tillegg ville hun ha en link til en side med informasjon om Tolleren slik at valpekjøpere kan finne ut om dette er en rase for dem. I tillegg fortalte hun meg at hun ville ha et banner som viste kennelnavnet, teksten “oppdrett av Nova Scotia Duck Tolling Retriever” og i tillegg ville hun ha illustrert noen ender og gjerne et bilde/illustrasjon av en Toller i “arbeid”. Til slutt fortalte hun meg at hun likte fargene grønn, brun og blå.

Dette var utgangspunktet mitt:

Mesteparten av arbeidet kom nå. Selv om selve siden allerede var bygd opp var det en del mer som måtte puttes inn når jeg hadde snakket med oppdretteren. Det var mange ting å forandre på fra utgangspunktet. Det første jeg gjorde var å legge alle css-reglene på en egen style sheet. Jeg måtte definere nye fonter (jeg valgte å ta utgangspunkt i fontene på den gamle hjemmesiden og bloggen til kennelen fordi jeg visste dette var fonter oppdretteren likte) og størrelser på disse. I tillegg måtte jeg endre definisjonen på noen av div’ene slik at de enten fikk en spesifikk px størrelse, eller at de skulle stå på auto. Jeg jobbet også en del med å bytte ut farger på bodyen (her bestemte jeg meg for en mørk brunfarge), finne ut hvor det burde være “border” (her testet jeg ut mye forskjellig”, før jeg endte opp med å bare ha to enkle linjer for å skille main content fra header og footer.). Her bestemte jeg meg for at jeg synes det ville vært fint med en bakgrunnsfarge på de forskjellige menykategoriene når man holdt over de og en annen farge for å vise hviken side man star på. Her testet jeg ut litt før jeg bestemte meg for grønn. Jeg måtte også legge inn 4 div’er/bokser på siden “våre hunder” for å representere hver hund de har og har hatt. Her jobbet jeg en del med å regne ut hva som var riktig størrelse på boksene for at de skulle legge seg akkurat der jeg ønsket.

Så begynte jeg å lete etter bilder å legge inn på sidene. Jeg hadde fått beskjed om å hente disse fra kennelens gamle hjemmesider, blogg og facebooksider. Deretter jobbet jeg med å få riktig størrelse på bildene på alle sidene som inneholder bilder.. Det letteste hadde nok vært å endre størrelsen på bildene i photoshop, men jeg hadde ikke noe bilderedigeringsprogram på den maskinen jeg jobbet på. Etter dette begynte jeg å lage banneret. Jeg satt inn teksten jeg allerede hadde satt i headeren. Deretter begynte jeg å tegne en and. Dette gjorde jeg ved å først finne en silhuett av en and på et googlesøk, og så tegne etter den. For at denne ikke skulle bli for lik slik at det ble “tyveri” av en annens illustrasjon tegnet jeg for det første ikke så veldig nøye etter, det var mest for å vite hvordan en and ser ut, og for det andre flyttet jeg på vingene og hvor de var plassert i tillegg til å forandre på andre punkter på anden. Jeg lagde tre versjoner av anden i forskjellige størrelser. Jeg testet så ut litt forskjellige bakgrunner: en med en “strandlinje”/skogkant og vann, en med bare hvit bakgrunn og en med blå bakgrunn. Jeg testet også ut plasseringen av teksten.

Forslag på banner:

Helt til slutt testet jeg ut hvordan siden så ut på internet (safari). Jeg bestemte meg nå for å endre på fargene på menyen da jeg ikke synes grønt ble så fint med resten av designet og fargene ellers på siden. Jeg endte til slutt opp med lyse brunfarger. Jeg endret også litt på bodyfargen for at den skulle passe med resten av designet. 

Etter leveringen testet jeg ut siden på flere nettlesere (dette burde jeg selvfølgelig ha gjort før innleveringen) og fant ut at fontene jeg hadde valgt ikke ble støttet av andre nettlesere, så dette må jeg jobbe videre med før jeg leverer siden ferdigstilt til oppdretteren. Jeg har også planer om å legge inn en nedtrekksmeny. Etterhvert fikk jeg også tilbakemeldinger på siden fra andre studenter hvor de kom med flere gode tips til hva jeg burde jobbe videre med så det kommer jeg også til å ta hensyn til i videre arbeid med hjemmesiden.

Siden slik jeg leverte den:
http://home.hit.no/~131962/oppgave_4/index.html