25 februar 2015

Oppgave 2 - Fagformidling

Her kan dere se hvordan jeg gikk frem når jeg skulle gjennomføre oppgave 3.

Oppgaven gikk ut på at vi enten skulle presentere vår hjemby eller vår hobby. Jeg valgte min hobby. Siden måtte bestå av minst 4 undersider (index.html inkludert)

Jeg lager meg aldri noen skisser siden jeg ikke hadde skjønt det jeg hadde skissert. Jeg ser for meg designet jeg vil ha og begynner å lage siden i Dreamweaver. Jeg tar meg ikke tid til å bruke veivisere så jeg skriver hele koden til siden for hånd. Det første jeg gjør er å begynne å lage CSS filen med noen enkle DIV'er slik som dette :



Etter det er gjort gir jeg hver div forskjellige bakgrunnsfarger og en border slik at jeg vet hvor de er på skjermen. Etterhvert som jeg har klart å sette alle divene der jeg vil ha dem begynner jeg å utforme designet. Designet ble mer eller mindre inspirert av min nettisde www.the-prototype92.com. Jeg syntes at mørke farger og ett mørk tema passet veldig godt til denne nettsiden.

De fleste sidene har samme oppsett av DIV'er men noen untak. F.eks. Galleriet er en stor div inne i Wrapperen mens Hjem siden er to mindre div inne i Wrapperen. Dette gjorde jeg for å opprette et dynamisk design. Selve headeren er laget i Photoshop.

Etter designet var ferdig tok jeg siden inn i google chrome for å sjekke om den fungerte som den skulle og det gjorde den ikke. Så alltid sjekk sidene i en nettleser ofte for å finne feil du ikke legger merke til. Etter at disse feilene var rettet opp begynte jeg å skrive innholdet på sidene. Teksten kommer alltid for nærme kantene for min smak sp jeg lagdte en klasse for <p> elemetene som hadde margin-right:5px; og margin-left:5px; Dette gjorde jeg for å få teksten vekk fra kantene.

Når det kommer til siden "Galleri" Valgte jeg å ikke opprette ett JQuery, Flash, eller Javascript galleri. Jeg følte at det ville ødelege mye av designet på nettsiden så jeg gikk for ett litt eldre manult galleri som består av en 8 diver inne i 1 større div og hver av disse 8 divene har ett bilde inni seg. Jeg valgte å ikke bruke bildene som hyperlenke og heller sette litt tekst under bildene og heller bruke det som en hyperlenke.

Etter at innholdet var på plass begynte jeg å rette feil og finjustere koden og gjøre den oversiktlig. Bruker man veiviserer i dreamweaver så ser koden veldig rotete ut. Jeg og alle som har hatt Web-Publisering på første året i informatikk har blitt lært til å alltid holde koden oversiktlig slik at man enkelt kan finne frem.

Her ser man det ferdig resultatet