Oppgave 7 - Webdesign

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

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. 

Dokumentarfilm om Mathallen

Prosess - fra idé til ferdig produkt

Dokumentarfilmen min brukte jeg veldig mye tid på å lage, og av den grunn har jeg valgt ut å utdype prosessen rundt arbeidet med denne oppgaven.

1. Idé

Jeg brukte mye tid på å komme opp med denne idéen.  Jeg begynte faktisk å lage en annen dokumentarfilm først. Denne dokumentaren tok for seg en lokalavisnyhetssak om en man som skulle gå hele veien til Marokko. I denne dokumentarfilmen hadde jeg derimot blitt nødt til å benytte skuespillere for å avgi replikker og de faktiske personene. Av den grunn synes jeg det ble litt ”flåsete”, og jeg valgte å endre oppgave for å kunne lage noe seriøst og reelt.

Denne vinteren har i Osloområdet har omtrent utelukkende bydd på grått og trist vær. Jeg ønsket å ha litt friske og spennende bilder i dokumentarfilmen min. Med konstant gråvær og trist lys er dette derimot vanskelig å få til uten ekstern lyssetting. Av den grunn begynte jeg å tenke gjennom om det var noen lokasjoner innendørs som kunne egne seg til filming av dokumentaren. Det tok ikke lang tid før jeg kom på at Mathallen i Oslo ville være perfekt til dette.

Jeg viste at det hadde vært mye omtale i media om Mathallen og jeg begynte å undersøke dette nærmere. Jeg fant flere avisoppslag men valgte å ta utgangspunkt i denne artikkelen:

http://www.osloby.no/nyheter/Rema-1000-skal-redde-Mathallen-7363375.html

I artikkelen fokuseres det på at folk ikke legger igjen nok penger i Mathallen og at den sliter økonomisk. Det var dette jeg skulle se nærmere på i dokumentaren. Hvorfor er det slik?

2. Gjennomføring

2.1 Del 1

Jeg begynte å undersøke hvilke interessante personer jeg kunne ta med i dokumentaren. Jeg tenkte at daglig leder for mathallen måtte være et perfekt sted å begynne. Jeg sendte noen mailer og avtalte et møte med daglig leder Frode Rønne Malmo.

Dette var den første gangen jeg var ansvarlig for en intervjusituasjon med en en profesjonell aktør. Jeg hadde kun om lag 10 minutter så jeg var avhengig av å være godt forbredt før intervjuet.

Jeg møtte derfor opp i god tid for å besiktige området og finne en egnet intervjulokasjon. Intervjulokasjonen jeg fant var perfekt. Den var på en slags balkong i 2 etasje i mathallen. Jeg ønsket å filme Malmo slik at man så mathallen ”blury” i bakgrunnen.  Jeg brukte derfor stor blenderåpning. Lukkeren var selvfølgelig satt til 1/50 sekund siden jeg filmet i 25 fps. Det ideelle med denne lokasjonen var at jeg rett bak meg hadde et gigantisk vindu. Ute var det gråvær slik at jeg unngikk problematikken som sol og skygger kan by på. Det noe kalde utelyset opplyste derfor intervjuobjektet mens lyset i bakgrunnen var noe varmere. Å ha litt forskjell i lystemperaturen mellom intervjuobjektet og bakgrunnen er ideelt siden det bidrar til å skape dybde i bildet. Hvitbalansen stilte jeg inn manuelt for å få best mulig kontroll med lystemperaturen i bildet. Jeg ble veldig fornøyd med det bildemessige i dette intevjuet:

I intervjuet med Malmo ble jeg derimot fortalt at Mathallen går mye bedre nå enn da artikkelen jeg tok utgangspunkt i ble skrevet. Han mente at de så en endring i folks matvaner. Dokumentaren min skulle altså se på hvorfor mathallen går dårlig økonomisk. Nå ble jeg nødt til å endre vinkling. Jeg valgte derfor å undersøke om det har vært noen endring i Oslo folkets matvaner. Jeg undersøkte flere aktører i mathallen. Og de var samstemmige med Malmo om at det har skjedd en endring i Norske matvaner.

Jeg filmet også en rekke innklippsbilder av ulike matvarer som jeg kunne klippe inn i intervjuene.

Alt lydopptak i disse intervjuene ble tatt med en røde ekstern mikrofon.

2.2 Del 2

Etter min mening ville det ikke vært noen god dokumentarfilm om jeg kunne hadde sett situasjonen fra aktørene i Mathallen sitt synspunkt. Jeg ønsket derfor å snakke med en ekspert på området. Jeg undersøkte litt og fant kontaktinformasjon til en professor innen forbrukeratferd ved handelshøgskolen BI. Jeg avtalte et møte med han. Jeg håpet at han kunne kommentere det aktøren i mathallen hadde fortalt meg.

Nok en gang var jeg nødt til å være godt forbredt da jeg også her bare hadde kort tid til rådighet. Denne gangen bommet jeg dessverre litt på hvitbalanseinnstillingene. Dette klarte jeg heldigvis greit å rette opp i etterkant i Premiere Pro ved å bruke adjustmentlayer og ”3 way color corrector”.

(Bildet etter at fargene ble justert. I utgangspunktet var bildet altfor gult)

Etter dette intevjuet dro jeg rundt og filmet passende lokasjoner som jeg kunne benytte som innklippsbilder: Dagligvarebutikker, tilbudskilt osv..

3. Etterarbeid

Jeg hadde mye materiale så etterarbeidet var ganske omfattende. Det var nytt for meg å klippe i intervjuer. For å dekke til klippene brukte jeg aktuelle innklipsbilder. Jeg vurderte frem og tilbake om jeg skulle legge på en fortellerstemme. Jeg valgte imidlertid å benytte replikkene til intervjuobjektene til å fortelle historien.

Jeg fikk virkelig erfare at lydredigering er mye jobb. Jeg brukte mye tid på å tilpasse lydovergangene slik at de skulle bli så lite fremtredende som mulig.

4. Kommentarer til oppgaven og prosessen

Denne oppgaven var veldig lærerik og interessant å jobbe med. Det jeg definitivt lærte mest av var å filme eksterne profesjonelle aktører. De hadde gjerne dårlig tid så det var ingen mulighet for å gjøre opptakene flere ganger om noen ting skar seg. Jeg var derfor nødt til å være veldig godt forbredt, og superskjerpet under opptakene.

Videre lærte jeg også mye av redigeringsarbeidet. Spesielt lydarbeidet var i denne oppgaven veldig omfattende!