Oppgave 2 - Fagformidling i webdesign

I dette innlegget skal jeg etter beste evne presentere min fremgangsmåte og tankeprosess da jeg skrev websiden for oppgave 3 i Web- og informasjonsdesign. Selve nettsiden er veldig basic, så dette er ikke noe spennende for personer som allerede er godt kjent innenfor HTML og CSS. 

Oppgaven handler om å lage en nettside med 3 eller mer undersider som handler om deg og ditt hjemsted, eller deg og din hobby. Jeg valgte å skrive om meg og mitt hjemsted. Da jeg er en IT student som hadde webpublisering forrige semester, er det naturlig for meg å kode nettsider for hånd. Altså kun tekst, uten hjelp av Adobe Dreamweaver.

Selve prosessen er ganske enkel. Du begynner med å sette opp ett skjellett med <div>s med class-names. Jeg lagde ikke noe skisse, men det er heller ikke nødvendig hvis du kan godt se for deg noe veldig klart i hodet. I mitt tilfelle hadde jeg ett skjellett som ser slik ut (bildet til høyre), og som resultat av dette oppsettet, ser koden ut som dette (bildet under) Dette er altså kun boksene (divs og articles) uten noe innhold. Det er en god ide å bruke elementer som <article> der det passer, da det gir siden en mye høyere semantisk verdi. Du kan lese mer om akkuratt det HER

Når dette var gjort var det pirkejobben som stod igjen. Plassere tekst og bilder og gi alle elementene riktig CSS kode. Riktig skalering samt padding er noe som ofte gjør jobben vanskelig. Det er ofte at man må gå tilbake til koden for å endre noen verdier. Da er det veldig viktig at koden er lett og lese. Riktig indentering og kommentarer i koden er noe jeg synes er veldig viktig. Selve stylesheet.css er på nesten 400 linjer, så å lett kunne bla seg gjennom og kjapt vite hvilken kode som tilhører hva er viktig.

Uansett... Etter at alle elementene er plassert og har fått riktig CSS kode, er det ikke annet som gjenstår enn å laste det opp på Internet og dele det med verden! I mitt tilfelle brukte jeg FileZilla, som er ett FPT program, for å få en tilkoblingen med http://db-kurs.hit.no/~120400/html.

Det ferdige resultatet kan sees HER