Oppgave 2 - Fagformidling

I dette blogginnlegget vil jeg si litt om hvordan jeg løste oppgave 6 i faget Film og digital video ved studiet Digital mediedesign ved Høgskolen i Telemark , der temaet var «lydbilde i film»

Oppgaven besto i at vi skulle filme en scene på maks 60 sekunder der kameraet var plassert enten i eller utenfor et rom og viste bilde av en dør, et vindu eller lignende. Vi skulle så ta opp og registrere lyder innenfra eller utenfra og fortelle hendelsen gjennom lydbilder. Filmen skulle ha minst tre lydspor.

Jeg valgte i denne oppgaven å filme ut av et vindu fra en hytte på fjellet i vinterferien. Jeg ønsket å formidle den følelsen jeg fikk i vinterferien og den kontakten jeg hadde med naturen i fjellet. Bildet i filmen er statisk, det er lydbildet som uttrykker handlingen i filmen.

Jeg filmet flere ulike klipp der det ene var et statisk bilde av det snødekte landskapet vi så fra vinduet. Deretter filmet jeg ulike klipp utenfor hytten der fokuset var å få fanget passende lydbilder. Filmen redigerte jeg i Adobe Premier Pro. 

Det visuelle bildet var utsikten fra vinduet uten tilhørende lydspor. Lyden i filmen ble satt sammen av ulike lydsekvenser i tre lydspor. Alle lydsporene er tatt med videokamera, med ulik avstand til lydkilden. jeg har kun beholdt lydsporene i hvert klipp. Filmen inneholder totalt tre lydspor.  Det første lydsporet forteller en handling der man hører:

- en dør som blir åpnet og lukket

- en som går ned en liten trapp og så videre på snøen

- en som går på snøen og så stopper.

- en som går på ski - to ulike klipp det ene repeteres og fades ut .

- fuglesang samme klipp repeteres to ganger.

 Det andre lydsporet er tre repeterende sekvenser av fuglene rundt hytten

Det tredje lydsporet er repeterende sekvenser av vanndråper som drypper fra takrennen.

Jeg har brukt samme klipp av en fugl som synger i lydspor 1 og 2, men i lydspor 1 har jeg gitt økt volumet på lydklippet. 

I Audio Track Mixer justerte jeg lydstyrken til de ulike lydsekvensene, ved å bruke "volumknappen" som vist i illustrasjonen nedenfor.

Deretter la jeg på effekten exponential fade på enkelte av klippene. Flere av lydklippene brukte jeg for øvrig gjentatte ganger for å få en lengere sekvens.

Det var en veldig artig oppgave, og jeg er ganske så fornøyd med resultatet :-)

Her er en link til filmen

Oppgave 6 - Appdesign

I denne oppgaven i emnet Webdesign i Digital mediedesign ved Høgskolen i Telemark skulle vi lage en app for en kulturbedrift. Jeg valgte da å lage en app for Sjømannskirken i Paris. Jeg tok utgangspunkt i deres nettside og brukte tekst og bilder fra denne. I forkant av at jeg startet arbeidet, spurte jeg de ansvarlige ved Sjømannskirken om tillatelse til dette.


Appen ble laget i programmet appshed. Dette er et svært brukervennlig program, men jeg finner det litt irriterende at gratisversjonen har forstyrrende reklame.

En viktig ting å tenke på når nan jobber i dette programnet, er at man må passe på at bildene man vil bruke har passe størrelse. Det vil si at de ikke bør overstige 300kb. Utover dette er det ikke nødvendig med mye annen forkunnskap i programmering, da det er lett å forstå hvordan man skal gå frem.. Siden har også linker til korte opplæringsvideoer, som gir en god bruksanvisning i de ulike programelementene..


Jeg syntes det var veldig artig å jobbe i dette programmet, og det er nok ikke den siste appen jeg kommer til å lage.



Her er link og QR koden til appen min:

http://apps.appshed.com/492727/

Oppgave 4 - Bloggdesign

I denne oppgaven i faget Web- og informasjonsdesign i Digital Mediedesign ved Høgskolen i Telemark, skulle vi lage et nytt design til bloggen vår.

Jeg startet med å lage en ny header i Adobe Illustrator. Jeg brukt to av yndlingsmotivene og forsøkte å lage en bakgrunnsfarge som harmonerte med disse. Bredden på headeren er 950 px og høyden er 224 px. Jeg har brukt fontene Monotype Corsiva og Verdana.



Jeg satte inn et bilde av Torneroseslottet i DIsneyland og et av Eiffeltårnet. Jeg syntes at disse bildene harmonerte fint med hverandre, og begge motivene representerer meg og mitt liv,

Jeg la et lag med en graderende blåfarge bak bildene, og brukte "Pen tool" for å lage en "path", deretter brukte jeg "type on a path tool" for å få litt liv i teksten.


Slik ble det ferdige resultatet:

Som bakgrunn valgte jeg det samme bildet av Eiffeltårnet som i headeren, men fokuserte på å få frem vannstrålene fra fontenene fremfor andre deler av bildet. Jeg "låste" bildet slik at bildet er statisk selv om man skroller nedover.

Jeg endret fargene på teksten og bakgrunnen på fanene slik at de samsvarer med resten av designet. Jeg endret også faneteksten, sideteksten og innleggsteksten til Verdana slik at jeg ikke fikk så mange ulike fonttyper.

På studiet Web- og informsjonsdeign har vi også laget våre egne nettsider. Her er link til Min nettside

Oppgave 2 - fagformidling i Web- og informasjonsdesign

Til denne oppgaven i faget Web- og informasjonsdesign i studiet  Digital Mediedesign ved Høgskolen i Telemark har jeg valgt å ta utgangspunkt i Oppgave 3 i dette faget. I denne oppgaven skulle vi lage et nettside som besto av minst fire sider. Jeg valgte da å lage en nettside om mine hjemsted.

Som verktøy har jeg brukt Adobe Dreamweaver. I dette programmet foretrekker jeg å bruke en visning der man ser bilde av nettsiden og kodene samtidig slik vist under.

Når man skal lage opp en nettside i Dreamweaver er det viktig å ha et oversiktlig mappesystem. Jeg startet derfor med å lage en mappe for oppgaven der alt innhold til denne sidenblir lagret, og lagde så 3 undermapper til Bilder, CSS-regler og Sites.

Jeg lagde først en indexside ved å høyreklikke på oppgavemappen og velge «new file» Denne kalte jeg «indexoppgave3.html». Denne siden er inngangsporten til denne nettsiden. De andre sidene lager jeg på tilsvarende måte, men da inne i undermappen "Sites"

Det er lurt ikke å bruke mellomrom mellom ordene når du gir nettsiden navn, dvs. ikke bruke «index oppgave 3.html», slik at man ikke får andre tegn med i nettadressen. 

Når en skal bygge opp en nettside er det viktig å plassere innholdet i "divers". Dette for at de ulike elementene skal holde seg på plass.

En wrapper er en "diver" som holder innholdet på plass på siden. Jeg starter derfor med å sette inn denne diveren ved å bruke funksjonen Insert -> div i panelet på høyre side. Man kan også bruke hovedmenyen. Da får jeg opp et vindu som ser slik ut.

Som dere ser velger jeg i dette vinduet under Insert: «After start of tag», deretter skriver jeg «body» i neste felt, og under feltet ID skriver jeg «wrapper».

 

Videre trykker jeg på boksen «New CSS Rule», og velger bare «ok» i vinduet som åpner seg.

Da får jeg opp et tredje vindu. Siden vi nå lager en wrapper, heter det "CSS Rule definition for #Wrapper". I dette velger jeg «box» i listen på venstre side, og setter inn de verdiene jeg ønsker for denne diveren. For wrapperen valgte jeg verdier som vist under. Til slutt trykker man ok i alle de tre vinduene.

I starten glemte jeg å sette verdiene i paddingen til auto for høyre og venstre, noe som førte til at innholdet på siden ikke ble midtstilt. Dette justerte jeg i etterkant i CSS designeren.

Deretter satte jeg med tilsvarende metode inn divere for "header", "MainContent" og "footer" som vist i bildene under. Til alle disse tre diverne valgte jeg auto i bredde og i høyde satte jeg "headeren" til 100 px, "footeren" til 60px, og "MainContent" varierende høyde på de ulike sidene alt etter innhold.

Det er også lurt å lage divere inne i de ulike elementene slik at innholdet kommer der du vil. Inne i diveren MainContent lagde jeg tre bokser. Når man setter inn bokser eller bilder i en diver, er det viktig at man på forhånd har regnet ut hvilke størrelser man må ha på de ulike elementene for at siden skal få det utseendet man ønsker. For eksempel om bredden på wrapperen er 960 px, kan ikke totalbredden på de andre diverne overstige dette tallet. 

I min oppgave satte jeg også inn fire linkebokser i headeren. I starten brukte jeg samme fremgangsmåte som beskrevet tidligere. Men i vinduet for Insert Div, skrev jeg "linker" inn i feltet Class. Dette fordi jeg ønsker å bruke CSS reglen flere ganger. Dersom man bruker feltet "ID", kan koden brukes kun en gang. Det finnes derfor på en side kun en "wrapper", "header" etc. . 

I CSS designer kan man for øvrig i etterkant endre de ulike diverne slik man ønsker. 

Etter at jeg har fått laget alle diverne i ønskede størrelser og plasseringer, endret jeg bakgrunnsbilder og farger slik at jeg fikk det utseendet på nettsiden jeg ville ha. Jeg valgte å bruke tre ulike farger som går igjen i tekst og bakgrunner. Jeg valgte jordnære farger slik at de ikke skulle ta for mye oppmerksomhet fra bildene.

Headeren til de ulike sidene lagde jeg i Adobe Illustrator. Dette fordi jeg har større muligheter til å variere type skrift og plassering av denne i Illustrator enn i Dreamweaver.

Når man setter inn bilder er det viktig at filene ikke er for store. Det er mulig å justere størrelsen på bildene under "properties", men det anbefales å tilpasse bildene på forhånd,

Det er også mulig å endre utseendet på linker under page properties, som man  finner rett under linkefeltet i properties.

På en av mine sider hoppet linkene, og selv om jeg endret kodene slik at de var nøyaktig lik de andre sidene, fortsatte de å hoppe, Jeg fjernet også linkene en gang og satte inn nye, for å se om det hjalp, men fikk det ikke til. Forhåpentligvis finner jeg ut av det underveis i læringsprosessen, Jeg har jo så vidt startet...

Her er en link til det (så langt) ferdige resultatet, Mitt hjemsted