Fluid Grid Layout

Med Fluid Grid Layout funksjonen i Dreamweaver kan man enkelt designe en responsiv nettside som fungerer på både tablet, mobil og pc. Funksjonen lar deg se og designe på hver enhet samtidig slik at man enkelt kan gjøre små nødvendige endringer.

I arbeidskrav 10 (?) i web front-end design skulle vi følge ett skjema steg for steg for og lage en nettside en cafe og hva den tilbydde.
Her er resultatet:
https://minerva.hivolda.no/~gerdjb/fluid/Soylent%20Green%20Fluid.html

MID128 – Arbeidskrav 3 del 2

Arbeidskrav 3 går ut på og lage webside til designbyrået MID128. Oppgaven blir gjort i gruppe og består av flere deler. I den første delen av oppgaven skulle vi lage ett utkast til nettside ut ifra hvilke ønsker kunden hadde, for så og presentere utkastet vårt for kunden og få tilbakemelding på det.

fyrste utkast

 

Tilbakemelding fra kunden

Generell positivt kritikk:

  • Bra fargebruk, den appellerar til spørsmåla til kunden -> FLOTT!
  • og, vi hadde en god grunn til å bruke dei valde fargane!
  • Logo
  • Bildet med oss i arbeid
  • Vi skil oss frå konkurrentane
  • Mjuk side med godt slagord’

Konstruktiv kritikk:

  • Balanse mellom logo og slagord
  • Annan skrift på Logo`? – Kanskje en ramme rundt, og skalere logo. – Få fram logoen!
  • Jobb generelt med typografien
  • Liten meny -> Tydlegare på sosiale medier
  • kanskje forbedre undersidene, dvs. lage fleire
  • Lag en seperat side for “Om Oss”
  • Kunden vil ha med blogg?
  • Vi treng en Footer. Forslag til at den dukker opp heilt nede, som “bevegande”.

 

Tilbakemelding fra en “personas”

  • Likte veldig godt fargevalg
  • En side de kommer til å huske
  • Burde ikke ha forsidebildene til å fylle skjermen, men heller vise at det er mer under bildet.
  • Gjør noe med slagordets plassering
  • Gjør noe med tjenestesiden
  • Lage de andre sidene

 

Etter disse tilbakemeldingen startet vi med endringer på utkastet basert på de ønskene kunden og brukeren hadde.

forside portfolietjenesteom oss

 

MID128 – Arbeidskrav 2

Accessibility – Tilgjengelighet for alle

I Norge stilles det visse krav til hvordan en nettside skal være. Det er viktig att nettsider er tilgjengelig for alle, både eldre, unge, og de med forskjellige handikap.

I dette arbeidskravet skulle jeg finne ei norsk side som jeg mente hadde dårlig accessibility, noe jeg synes denne nettsiden har: www.yonas.no/

Skjermbilde

 

Yonas Pizzeria og Catering er et populært pizzeria i Tromsø som er kjent for sin populære taco-pizza. Uheldigvis får nettsiden deres dem til å virke som et svært udelikat sted uten faglige personell. Siden er heller ikke veldig tilgjengelig; med dårlig kontraster, liten skrift og forvirrende menyvalg.

Bilder og grafikk

Bildet hjelper brukeren og forstå at det er en pizzaside, men er ikke et dekorativ supplement til siden etter min mening. Bildet i seg selv synes jeg er svært dårlig og pizzaen som er avbildet ser svært udelekat ut. Plasseringen av bildet og rammen rundet det kan virke forvirrende på enkelte brukere. Den vite rammen som strekker seg veldig langt ned under bildet kan virke forvirrende og forstyrrende.

I følge forskriftene skal alle bilder i HTML ha alt-atrributt, noe dette bilde ikke har. Hjelpemidler for å lese opp ei nettside kan derfor ikke tolke dette bildet.

Bruk av farger

Denne siden bruker en sterk rødfarge på enkelte ord de mener er viktige, men bruken av denne fargen gjør det vanskelig og tyde odene ettersom bakgrunnen er svart. Disse ordene skal også være synnelig for dem som bruker hjelpemidler for og lese ei nettside noe som publiseringsverktøyet skal kode. Dette er ikke gjort på denne siden.

Navigering

Skjermbilde

Menyen befinner seg til høyre på siden, og her igjen er det svært liten skrift. Noen av alternativene som e og Kasse kan også være litt forvirrende for hva de er til.

I bunnen av siden er det også en del info, men all infoen liker bare til epost.

Vi fikk også i oppgave og lage en skisse til siden for hvordan vi ville ha laget den. I min skisse har jeg prøvd og holdt meg litt til hvordan den originale siden er satt opp, men prøver og gjøre den mer brukervennlig.

wireframe

 

Logoen kan fortsatt være til venstre i headeren, men med ett fint og delikat bilde av noe pizzarelater i bakgrunnen gjør det med en gang tydelig hva siden dreier seg om. Menyen har jeg plassert under headeren og så har jeg valgt og ikke bruke alle menvalgene som var på den originale siden teksten skal også være større og tydeligere. Videre kunne det vært bedre med et bildegalleri som går i loop som er plassert litt mer symmetrisk enn det forrige. (Det er også viktig at bildene er delikate!) Og teksten til høyre kan fortsatt være der, men skriften gjøres større slik at det er enklere og lese både for de med og uten spessielle behov.

MID128 – Arbeidskrav 1

I denne oppgaven skulle vi finne to nettsider, én med dårlig design og en med bra design.

Først ut tar jeg for meg en nettside med dårlig design:

På nettsiden www.mrbottles.com blir man møtt med en hel del rot og det er ved første øyekast vanskelig og finne noen informasjon som kan vise til hva siden handler om. Det første jeg opplevde var at alt var et fast bilde og det var ikke før jeg begynte å bevege pilen rundt at jeg begynte og finne fram til linker som kunne lede meg videre til ett annet punkt på nettstedet.

dorlignettside

 

Områdene som er merket med rød sirkel er alle stendene (som jeg fant) som man kan klikke seg videre til enn annen side på.

Målgruppen for nettsiden er flaskeinteresserte av typen gamle flasker, men jeg tviler på at denne nettsiden er veldig fungerene for dem. alt i nettsidens navn, mrbottle, missforsto jeg og trodde dette var en side om alkohol. bildene de har valgt og bruke viser flere gamle flasker, men det er så masse annet på siden som distraherer slik at det ikke er like lett og få øye på dem.

Valg av font er helt ok, men det er ikke fungerende hvis man ikke kan se det. Teksten øverst på siden er skrevet med en svak gulfarge og er nesten umulig å lese. Forsiden består av en drøss med tekst. Hva som er i tekstene har jeg ingen aning om, det er verken noe jeg har klikket meg til eller fått noe info om hva det dreier seg om. Men jeg har rullet meg nedover på siden til slutten for og prøve og få en liten oversikt over hva som fantes laaaangt der nede på siden. Det jeg fant var masse tekst, hvor jeg tror de har endret farge for hver tekst som hører sammen.  Innimellom tekstene er det også i plassert bilder av folk som holder flasker som jeg tror de har funnet.

En annen del av siden jeg reagerer veldig på er hvordan siden har så mange navigasjonsmenyer og tilleggsmenyer (jeg telte opp til 21). Med så mange navigasjonsmenyer blir det veldig vanskelig og faktisk navigere seg på siden.

 

Siden grinderscoffee.com.au har et bra webdesign.

branettside

Målgruppen for siden kommer tydelig fram; kaffe glade mennesker og treffe både den yngre og eldre generasjonen av kaffelskere. Siden er stilren og veldig behagelig og se på. Det er mye luft i designe og siden blir derfor veldig behagelig for øyet. Siden bruker en veldig svak beige farge for bakgrunnen som går igjen på hele nettstedet og skaper en veldig behagelig og koselig atmosfære som på en koselig cafe. Forsidebilde er en stor faktor for at siden virker seriøs og kunnskapsrik rundt kaffe. Bildet viser en person som heller varmt vann i et kaffefilter. Person ser ut som en barista og er omringet av veldig elegante kaffe utstyr. Siden er svært enkelt å navigere seg rundt på, og det er også spennende å se på når man beveger seg rundt på denne siden. Alle sidene består av forskjellige bilder som alle er svært elegante og se på og det er klart at disse bildene har mye og si for att dette er en veldig bra visuelt nettsted.

Når man fuller seg videre ned på sidene følger menylinjen med hele tiden uten at det virker forstyrrende. Når man skroller seg nedover kommer man til flere bilder som dekke hele lengden av siden, men er kroppet i høyden. Alikavell så er bildene veldig fine og det kan tenke seg at brukeren blir mere fristet til og se hva bilde linker til når det er gjort på denne måten.

På ett punkt på forsiden kommer man til et bilde av ett kart som zoomes innover jo lengre nedover man scroller. klikker man seg inn på kartet får man en oversikt over hvor de får kaffebønnene sine fra rundt om i verden.

Siden reklamerer også om hvordan de bruker fairtrade. I bunnen på hver side, altså i selve footeren, står det:

“Grinders® Coffee was established in 1962 in Lygon Street, the centre of Melbourne’s famous Italian quarter. Today, Grinders® is the largest roaster of Fairtrade coffee in Australia.”

Dette er et svært viktig virkemiddel for siden. Fairtrade er noe de fleste foretrekker og blir begeistret over og er svært populært hos en kjøper. Fairtrade er gir også siden stor troverdighet og brukere for mer respekt av produktet til siden.

Det er ikke stort utvalg i fonter på nettstedet. Som jeg ser så er det 3 fonter som er brukt. Til de litt mer synlige tekstene, som overskrifter og lignende, så bruker de en font som kan minne om litt old style type look. Det jeg tenker når jeg ser denne fonten er litt mot western og gir følelsen av det gamle kanskje. Til infotekst og artikler så har de en mer vanlig tekst. De har også brukt en litt mer moderne font uten seriff til blant annet menyen, som følger med hele tiden og i footeren. ved og bruke seriff, som er litt “old style” i innholdet kan være ett godt virkemiddel for og gi den rette stemningen til dem som leser innholdet. Den mer moderne fonten på menyen gjør siden veldig stilren og pen og gir følelsen av ett proft design.

Jeg liker denne siden veldig godt, både på grunn av det gode web desiget og kanskje litt fordi jeg er veldig glad i kaffe.

MID128 – Arbeidskrav 7

Denne oppgaven gikk ut på å demonstrere hvordan man kan bruke forskjellige stildefinisjoner til HTML på for og bygge opp og designe ei side på. Siden jeg har laget beskriver og demonstrerer de tre ulike måtene vi kan bruke stiler på; inline, eksternt og internt.

http://minerva.hivolda.no/~gerdjb/MID128/Arbeidskrav7/arbeidskrav7.html

  • Når vi bruker en inline stil betyr det at vi setter in stil-koden direkte inn i en attributt kode som gjør at det er kun denne attributten som får den gitte stilen.
  • Å bruke stil eksternt vil si at vi har gitte stiler som blir brukt på alle sidene som er koblet opp til ett stilark. Dette betyr da at vi kan forandre utseendet på alle dokumentene ved kun og gjøre endring i en fil.
  • Hvis vi kunn vil ha en stil som skal fungere på kun ett dokument kan vi istede for og lage et individuelt stilark, lage det i det gjeldende dokumentet. Stil koden føres da inn helt i begynnelsen mellom <head> og </head>

 

 

MID128 – Arbeidskrav 6

  1. HTML5
    Kva er formålet med HTML og kvar skil HTML5 seg frå tidligare versjonar?

HTML, Hyper Text Markup Language, er den standare kodespråket og benyttes til å strukturere informasjon på en side, for eksempel overskrifter, avsnitter, lister og så videre.

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 </head>

 <body>
 <header>
 <h1>Hello world!</h1>
 </header>
 
 <p>Hello world! Hello world! Hello world!</p>
 <p>Hello world! Hello world! Hello world!</p>
 <p>Hello world! Hello world! Hello world!</p>
 <ul>
 <li>Hello world!</li>
 <li>Hello world!</li>
 <li>Hello world!</li>
 </ul>
 
 </body>
</html>

Teksten ovenfor er tatt fra ett html ark. Dette arket leser en webside og former sidene ut ifra informasjonen den henter i i arket

Atlså vil kodingen ovenfor i html arket se slik ut på en webside:

Hello World

Formålet med html er å gjøre det enklere for brukere og skape et ønsket utseende for sin nettside.

 

I 2004 begynte WATWG (Web Hypertext Technology Working Group) og jobbe med en ny standar til html, samtidig fokuserte W3C (World Wide Web Consortium) på viderutvikle av XHTML 2.0. Men i 2009 bestemte W3C seg for å utdatere XHMLE 2.0 og ikke fornye det mer. Istedet jobber W3C og WHATWG nå sammen med å utvikle HTML5 som kommer til å ta over for HTML4.01 fra 21999, og bli den nye standaren.

Forskjellene mellom HTML 4.01 og HMTL5 er at det er spesielt designet for å levere innhiold uten behovet for ekstra plugins som Adobe Flash, Silverligh og QuickTime.I tillegg vil HTML5 ha bedre støtte for mobiltjenester som geolojasjon og lokasjonsbaserte tjenester.

 

 

  1. Lag ei side som er bygd opp med HTML5-kode og viser døme på dei ulike nye elementa som fins.

html5

Rapport av skolepraksis

I skolepraksisen ble elevene på MID delt inn i fem grupper der hver gruppe hadde en media produksjon som de skulle lære barn på forskjellige barneskoler rundt om i distriktet. Produksjonene barna kunne bli plassert i var foto, film, digital fortelling, web og lyd der hver gruppe hadde som fokus og lære barna om dette emnet og lage et ferdig produkt i løpet av tre dager. Vår produksjon var foto, og vi var plassert ut på Bratteberg Barneskole. Vi hadde som mål og lære barna om det tekniske med et kamera og hvordan diverse innstillinger kunne gi forskjellige meninger i et bilde. Barna skulle lære om blender og lukkertid og om hvordan disse gir svært forskjellige resultater i et bilde om man gjør endringer i disse innstillingene.

Etter en kort introduksjon delte vi elevene inn i grupper der hver gruppe fikk ett kamera. De fikk i oppgave og ta fire bilder; ett med lavt blendertall og ett med høyt blendertall, og ett med lav lukkertid og ett med lang lukkertid. Når de fikk se bildene de hadde tatt på slutten av dagen på storskjerm fikk de se hvordan de selv hadde klart og bruke disse innstillingene og fått et bra resultat ut av dem.

Hovedoppgaven til barna ble presentert til dem på dag to. Da delte vi dem inn i to grupper der den ene var ute og tok bilder og den andre var inne og lysmalte. De som var ute fikk i oppgave og ta tre bilder; ett “gla-bilde”, ett “trist-bilde”, og ett “gal-bilde”. Etter at de hadde tatt disse bildene fikk de redigere dem og derretter skulle de velge ut to bilder, ett følelse bilde og ett lysbilde. Disse blir senere vist fram under framvisningen på BK.

Før vi kom til skolen var jeg veldig nervøs og en smule skeptisk. Jeg var litt engstelig for at barna ikke kom til og engasjere seg og ikke kom til og ha det noe gøy, men denne engstelsen forsvant fort. Selv om vi hadde en litt røff start der vi manglet kamera og måtte ta teoretisk undervisning som de syntes var veldig kjedelig, så viste hver elev et stort engasjement når de endelig kunne gå ut og ta bilder. Etter og ha sett på bildene mange av dem tok ble jeg svært overasket av kvaliteten på noen av de. Mange av bildene viser også hvor kreative dem har vært når de selv skulle velge ut de tekniske løsningene.

Forberedelsene før proskjetet startet var ikke av ypperste klasse. Vi hadde en veldig god og utarbeidet arbeidsplan, men den var vanskelig og følge når vi i første omgang manglet utstyr og når vi endelig fikk utstyret så viste det seg at ikke alt funket. Dette er noe vi burde ha skjekket før vi kom, men heldigvis så gikk det bra for barna at flere delte på ett kamera.

Når vi startet hadde vi ikke planlagt hvem som skulle ha hvilken rolle, men dette gikk automatisk av seg selv. Jeg gikk mer inn i en passiv rolle når undervisningen foregikk i klasserommet. Når barna var ute og tok bilde hjalp jeg dem om dem trengte det og det samme gjorde jeg når de var inne og redigerte. Ettersom vi var fem lærere så funket dette veldig bra. Vi hadde god kontroll over dem og de fikk alltid hjelp når dem trengte det. Noen av barna var til tider litt vrange og hadde ikke lyst til og gjøre noe, eller ville heller styre selv og ikke gjøre det de skulle. Det vi fant ut da var og ikke gi dem lov til det dem ville slik at de ikke skulle prøve seg på noe mer. Dem som ikke ville gjøre noen ting fant vi fort ut av at vi kunne plassere dem i en annen gruppe med noen de jobbet bedre med.

Under alle dagene opplevde jeg at de ansatte ga oss mye tillitt. De ville kun ha ett kvarter med ungene om morgenen, ellers trakk de seg tilbake og lot oss holde på som vi ville. Jeg følte og ofte at lærerene tok sjanse og lærte noe de også. De spurte om masse forskjellig som tips til redigeringsider, hvordan kameraet fungerte og masse annet.

Jeg tror elevene hadde tre fine dager med oss. De var engasjerte og ivrige under hele oppholdet vårt og fikk virkelig viset seg fra sin kreative side. I ettertid tenker jeg de sitter igjen med god kunskap om hvordan de tar gode komponerte bilder og senere kanskje de får bruk for den tekniske delen om hvordan man kan stille inn ett speilreflekskamera.

Observasjons praksis plan

Observasjonspraksis Rapport Mek111Mid

I uke 14 og 15 hadde jeg observasjonspraksis i NRK Sørlandets lokaler i Kristiandsand. Lokalene er plassert i sentrum av byen og er en bedrift med 55 ansatte. NRKs distrinkts avdelinger er mye mindre en NRK på Marienlyst som har mange titalls avdelinger. NRK Sørlandet kan man dele opp i tre forskjellige avdelinger, nett, tv og radio. Fra høsten 2013 ble det gjort store endring i distriktsavdelingene i hele landet. Nett skulle bli mye mer utarbeidet ettersom befolkingen har begynt og bruke nette mye mer enn tidligere, og det ble mye viktigere og få ut saker så fort som mulig.

 

I min praksis tid har jeg vært borti omtrent alle mulige deler av sammensetningen til NRK. Den første dagen var jeg blant annet med en radiosending fra 1400 til 1700. Jeg fikk være med i studio under hele denne tiden og se hvordan det fungerte. Dette var ikke en normal produsert sending. Grunnen til det var at det er et lokale i Arendal som programmet skal sendes fra, men i Arendal har de ikke det nødvendige utstyret til å sende live over radioen. Av den grunnen er det nødt til å være en tekniker i studioet i Kristiansand som har det nødvendige utstyret til og gjøre jobben som normalt blir gjort av programmlederen. Det var derfor satt opp en webcam samtale mellom oss og programleder i studioet i Arendal under hele sendingen. Programleder og tekniker hadde da mulighet til å kommunisere ned kroppspråk når de var på lufta slik at det skulle være mest mulig flyt i sendingen mellom de forskjellige innslagene av musikk og saker.

Den andre dagen ble jeg med på redaksjonsmøtet på begynnelsen av dagen. På disse møtene går de igjennom hvilke saker som er aktuelle for dagen. Disse møtene er veldig viktig for å få en oversikt av hvordan nyhetsbildet kommer til å være den dagen slik at alle avdelingen på en måte kan flyte sammen. Nett har blant annet mange nettvideoer som de poster, disse videoene skal det også skrives sak om og det skal være mulig og bruke det i radio også. Derfor må lydsporet til klippet også klippes sammen på en måte som egner seg for radiolytterne.

I en radiosending har de også nesten alltid en utegående reporter. En av dagene ble jeg med denne reporteren til dyreparken under sending. I løpet av sendingen ble det sendt live fra dyreparken tre ganger. Jeg fikk da se hvordan man bruker en livsender som faktisk bare var en app til en iphone.

Det er også andre innslag i løpet av sendinge. Ofte er det mindre viktige nyheter som det blir laget ett innslag av. En av dagene var jeg med på og så hvordan en av disse ble laget fra start til slutt. Det var et innslag om boligpriser på rundt 2 minutter som han laget. Dette innslaget brukte vi hele dagen på å lage, vi måtte ringe rundt og spør om intervjuer og derretter måtte vi kjøre til dem og ta opptak til sendingen som tar en del tid, men etterarbeidet går veldig fort slik at det er klart til sending klokka 1400.

I distriktsendingen på kvelden kommer de viktigste sakene fra sørlandet ut. Denne sendingen blir utarbeidet gjennom hele dagen. Reportere er ute og lager innslag som de må redigere ferdig før sending. Produsenten setter opp sende planen der alle ellementene av sendingen må bli godkjent av nyhetsankeren, produsenten og vaktsjefen.

På nett så sitter det journalister på “desk” som de kaller det. De sitter og skriver saker til nett hele dagen og drar ut og intervjuer og filmer til saker som skal ut på nett. Etter at det ble satt mer resurser til nettet har NRKs nettutgave fått en bølge av nye lesere i løpet av hele dagen. Den store endringen har heller ikke gjort de andre avdelingene mindre prioritert, de er akkuratt like aktuelle og innholdsrike som før.

Det som kanskje er en viktig ting som gjør at oppsette fungerer så bra er at de ansatte ikke har en fast jobb de gjør hver dag. Omtrent alle de ansatte har kompetanse til å jobbe i alle avdelingene. En dag kan de være satt opp som produsent til radiosendingen, en annen dag sitter de og skrive saker til nett. Dette gjør at de annsatte kan gjøre masse i løpet av en arbeidsdag og dette vil jeg tro er grunnen til at nettet har fått så positivt resultat etter endringene som ble gjort på høsten.

Praksisperioden var veldig lærerrikt. Og være på et distriktslokale ga meg muligheten til å lære masse om hvordan en journalist jobber i alle avdelingene, både tv, radio og nett, noe som har gitt meg masse av kunskap på alle feltene.

 

Lyd miksing oppgave 1

Vi fikk i oppgave å mikse tre lydspor. Den første skulle være ett mikset musikkspor på rundt 40 sek, den andre skule være en innlest tekst, og den siste skulle vi sette sammen musikken og teksten.

Lyd 1_Musikkspor

 

Lyd 2_Innlest tekst

 

Lyd 3_Musikk og tekst

 

Enjoy! :)