Rapport om gruppeprosjektet Universets fenomener I Huin 105 Webdesign og webestetikk fikk vi i oppgave å lage et større nettsted som et gruppeprosjekt. Nettstedet kunne være kulturformidlende eller en dokumentar. Jeg dannet en gruppe sammen med tre andre i klassen. Vi gikk først sammen og prøvde å finne på et tema for nettstedet. Etter ulike forslag og ideer kom vi fram til at vi skulle lage et nettsted om universet. Temaet universet er bokstavelig talt et ubegrenset tema, så derfor gikk vi inn for å avgrense oppgaveinnholdet. Jeg vil nå ta for meg de ulike valgene vi har gjort, med hensyn til innhold, målgruppe, struktur og design. Jeg vil til slutt komme med en oppsummering av hvordan prosjektet har gått og hvordan samarbeidet har fungert. Ideen bak Universets fenomener Vi ønsket å lage et nettsted for å få folk til å bli litt mer interessert i hva som foregår rundt oss i verdensrommet. Det finnes mange nettsteder som kan bli for avansert å lese for en person som ikke har mer enn gjennomsnittlig kunnskap om astronomi. Vårt formål var å lage et slags populærvitenskapelig nettsted som på en oversiktlig og enkel måte klarer opp i noen utvalgte fenomener i universet. Derfor ville vi skrive lettleste artikler som kan tenne folks interesse og gi de lyst til å tilegne seg enda mer kunnskap om de ulike temaene. Hensikt Hensikten med å lage et slikt nettsted er at det skal være enkelt å finne og forstå informasjon her. Nettstedet vårt skal kunne brukes som en plattform hvor man kan finne lettlest informasjon, og man kan gå videre fra denne plattformen for å finne mer avansert stoff om de 1
ulike fenomenene. Hensikten vår med nettstedet passer meget bra for vår målgruppe, som det står mer om under målgruppe. Målgruppe Ut fra disse målsetningene kom vi fram til en målgruppe. Vi kom fram til at nettstedets idealbruker ville være en ungdomsskoleelev som er på jakt etter informasjon, gjerne i forbindelse med en skoleoppgave. Også folk i alle aldersgrupper som har lyst å vite litt mer, men som ikke har mye kunnskap fra før, vil passe inn i målgruppen. Innhold og oppbygning av nettstedet Vi bestemte oss tidlig for at vi ville lage en del av nettstedet i Flash. Dette var fordi vi da blant annet kunne lage en animert meny som ville gjøre nettstedet mer innbydende for brukeren. Istedenfor å bare ha en vanlig statisk HTML-side, vil Flash skape litt mer liv til sidene. Dette var hensiktsmessig i forhold til målgruppen vår, ungdom, fordi de vil finne en side med mye grafikk og bevegelige menyer mer tiltrekkende enn en statisk side med bare skrift. Vi ville kombinere Flash-sider med vanlige HTML-sider. Derfor bestemte vi at vi kunne ha en intro og hovedside/førsteside i Flash og undersider med artikler i vanlig HTML med bruk av CSS stilark. Her har vi kombinert ulike modi, både statiske og dynamiske modi. Skrift og stillbilder er statiske modi.., mens [d]ynamiske modi forandrer seg over tid, slik som levende bilder.. eller for eksempel grafikk hvor brukeren kan klikke for å gjøre deler av bildet synlig eller usynlig...(fagerjord 2006, 24). Nettstedet vårt er altså multimodalt fordi vi kombinerer modi som skrift, stillbilder og animasjoner. Vi måtte også avgrense innholdet av informasjon på nettstedet. Derfor bestemte vi oss for å begrense innholdet til fem artikler om ulike fenomener. De fem fenomenene vi valgte ut var Asteroider, Galakser, Kometer, Stjerner 2
og Svarte hull. Dette er fenomener vi mener kan være uklare og kanskje lett og forveksle med andre fenomener. I tillegg til disse fem sidene ville vi lage en side, Visste du at?, med faktaopplysninger, og en side med teorier om fenomener og hendelser i universet. Altså ble dette sju undersider med HTML-koding og CSS til. Jeg tok på meg jobben med å lage koden til disse undersidene. I tillegg skulle jeg skrive en artikkel, og jeg valgte å skrive om svarte hull. Jeg har ikke jobbet med kodingen av Flash-sidene, så derfor vil jeg ikke gå nærmere inn på det området. Utforming av artikler Vi fordelte de ulike oppgavene med å lage hele nettstedet slik at det skulle bli en noenlunde jevn arbeidsfordeling. Når det gjelder innhenting av informasjon til artiklene, har vi gjort et grundig arbeid. I mitt arbeid med artikkelen om svarte hull brukte jeg flere kilder. Jeg lånte bøker på bibliotek og brukte ulike kilder fra Internett. Dette var for å få en bredest mulig dekning av emnet, og for å skille ut det mest vesentlige ved fenomenet. Det var noe av grunntanken bak nettstedet, nemlig å få fram det aller viktigste man trenger å vite om de ulike fenomenene. Jeg kan også si at de andre på gruppen har gjort et grundig arbeid med innhenting av både informasjon og bilder. Vi har oppgitt kildene vi har brukt nederst på sidene etter artiklene. Teknisk Undersidene er lagd ved bruk av HTML og CSS. Dette er gjort for å skille mellom form og innhold. Strukturen til sidene er bygd opp ved bruk av div er som er definert i HTML-filene. All plassering av elementer er definert i CSS-filen. Jeg har koblet alle undersidene til den samme CSS-filen for å få et helhetlig og konsistent design på sidene. Det er en HTML-fil for 3
hver artikkel eller underside. Mye av tiden jobbet jeg med å prøve og feile for å finne de rette plasseringene av de ulike elementene. Jeg laget en container for headeren og en for hovedteksten i artikkelen. I tillegg måtte jeg lage ulike div er for plassering av for eksempel den roterende jordkloden og boksen med de relaterte artiklene. All posisjonering og størrelse på de ulike elementene har stadig blitt evaluert innad i gruppen. Vi har i fellesskap prøvet oss fram til og forandret på disse tingene underveis. Den roterende jordkloden er et Flash-objekt som ble laget av en annen på gruppen. Hun publiserte Flash-filen hun hadde laget, slik at det ble lagd om til HTML-kode. Så sendte hun koden til meg, og jeg klippet ut den koden jeg trengte. Denne koden plasserte jeg så i HTML-filen, i en div inne i headeren. Jeg avgrenset denne div en til en passelig størrelse. Bakgrunnen på undersidene er laget i Photoshop. Denne bakgrunnen skalerte jeg til 1024x768 piksler for at den skulle fungere greit med ulike oppløsninger og skjermer. Jeg lagret bakgrunnen for web, som en jpeg-fil. I CSS-filen har jeg fastsatt bildet som et bakgrunnsbilde som repeteres. Design Vi har valgt å vektlegge at det skal være en sammenheng mellom nettstedets utseende og innhold. Nettstedet har universet som tema og vi ønsker å gi brukeren en følelse av å være i verdensrommet. Spesielt hovedsiden har vi utformet slik at brukeren selv kan på en måte utforske verdensrommet. Her må brukeren lete seg fram i menyen for å finne menyene, slik at de popper opp. På denne måten blir brukermedvirkningen avgjørende for i hvilken rekkefølge tekstene leses. Brukergrensesnittet gir altså muligheter både for å lese tekstene lineært og ikke-lineært. 4
Nettstedets struktur og navigasjon Man kommer først til en intro som er laget i Flash. Her blir det spilt av en animasjon av en jordklode som kommer utenfra og inn mot skjermen. Intro: Jordkloden stopper utenpå bakgrunnen og blir hengende og spinne der. I bakgrunnen ser man navnet på nettstedet og noen ord som svever sakte mot venstre. Ordene er stikkord til fenomenene som blir tatt for seg i nettstedet. Ved å museklikke på siden, uansett hvor man klikker, vil man komme videre til det jeg vil kalle vår hovedside. Anders Fagerjord, førsteamanuensis i medievitenskap ved Universitetet i Oslo, beskriver en hovedside eller førsteside slik : Lik førstesider i aviser og tidsskrifter inneholder gjerne førstesider på 5
nettsteder navnet på nettstedet, litt informasjon om hva slags stoff som finnes der, og smakebiter som skal friste leseren til å følge lenker til andre sider. (Fagerjord 2006, 180). Denne beskrivelsen passer bra for vår hovedside, selv om man kommer til introen aller først. På hovedsiden finner man en dynamisk, animert bakgrunn, som hele tiden lever og gir en følelse av at man er i verdensrommet. Man finner også lenker til alle undersider og til en egen side med bilder. Det finnes også informasjon her om hva nettstedet inneholder av stoff. På hovedsiden kan man føre musepekeren over siden og ved de ulike fenomenene vil det poppe opp en meny. Der kan man velge mellom å gå direkte til et avsnitt i en artikkel eller til begynnelsen av artikkelen. På bildet under ser man hovedsiden med en meny som har poppet opp når man har holdt musepekeren over emnet Kometer. Hovedsiden: 6
Når man museklikker på menyen som kommer opp vil man komme inn på en underside. Under er et bilde av siden om Stjerner. Undersidene har en fast oppbygning med en header øverst, med en overskrift og et lite bilde til høyre som illustrerer hva siden handler om. Til venstre for overskriften finnes det en roterende jordklode. Dette elementet går altså igjen fra introen, og når man museklikker på jordkloden vil man returnere til hovedsiden. Under headeren finner man en vannrett rekke med stikkord. Dette er en inndeling av artikkelen i avsnitt. Disse stikkordene er lenket videre til overskriftene nedover i artikkelen. Meningen med disse lenkene er å gjøre navigasjonen i selve artikkelen mer valgfri for brukeren. Istedenfor å måtte scrolle seg nedover i teksten, kan brukeren hoppe direkte til det avsnittet han/hun ønsker. Nederst på siden finnes det også en Til toppen -lenke, som gjør det raskere å komme seg tilbake til toppen av artikkelen. Det er også en HJEM -lenke nederst, som vil ta brukeren tilbake til hovedsiden. Etter artikkelen vil man finne en boks med relasjonslenker til relaterte artikler. Dette er lenker til artikler som kan utdype innholdet i våre artikler. Disse er der for å gi brukere en mulighet til å gå dypere inn i emnene dersom de ønsker det. Også i selve teksten i artiklene er det relasjonslenker der man kan klikke for å få relevant informasjon. Det er både interne og eksterne relasjonslenker. 7
Et eksempel på dette er at i teksten om svarte hull har emnet sammenheng med stjerner. Derfor er ordet stjerner også gjort til en lenke som tar brukeren til siden om stjerner. Her kan vi si at ordet får betydning på to plan. Fra et semiotisk perspektiv må vi innse at lenket tekst og bilde fungerer som tegn etter flere koder samtidig. (Fagerjord 2006, 78). Dette vil si at ordet både har betydning i seg selv for artikkelen, og i den betydning at noe vil skje når man klikker på lenken. Strukturen i lenker og navigasjon på nettstedet er bygget opp som en navstruktur. Fagerjord beskriver navstruktur som at (..)èn side [er] sentral [ førstesiden eller hjemmesiden ] og har lenker til alle undersidene, akkurat som i en stjernestruktur. Men i tillegg er det lenker mellom undersidene. (Fagerjord 2006, 96). 8
Vi har vært uenig innad i gruppen om utseendet til undersidene. Diskusjonen har dreid seg om at tekstene i artiklene er lange. Derfor har sidene blitt lange sider, der man må scrolle seg nedover og mister oversikten over navigasjonsmuligheter. Når man er midt i en artikkel, kan man ikke gå derfra tilbake til hovedsiden uten å måtte scrolle seg til toppen igjen. Derfor har vi til slutt blitt enige om en modell som har navigasjonsmuligheter fast på venstre side og en scrollbar på høyre side. Det har gitt muligheten til å bare bevege teksten, mens overskriften og navigasjonen hele tiden er tilgjengelig. Det er også mulighet for å gå til alle de andre sidene på nettstedet ved hjelp av navigasjonsmenyen til venstre. Det ferdige resultatet ser slik ut: Farger De fleste vil sikkert forbinde universet med mørke farger. Ser man ut mot verdensrommet om kvelden, er det mørkt. Bare stjernene lyser som noen små prikker. Derfor var valget ganske enkelt når det gjaldt farger for nettstedet. Det måtte bli mørke farger. På hovedsiden i Flash, er det svart bakgrunn. Svart vekker gjerne konnotasjoner til det mystiske og uforklarlige. Og det 9
passer bra med universets fenomener. Utenpå bakgrunnen er det ulike grafiske elementer som illustrerer de ulike fenomenene. Det er animasjoner av stjerner som beveger seg over skjermen, slik at man skal få en følelse av å være ute i verdensrommet. Vi kunne ikke bare ha brukt mørke farger. Skriften og grafiske elementer må stå i kontrast til det svarte for å kunne sees. Derfor er stjernene, kometen, galaksen og asteroiden laget i ganske lyse farger for å stå ut fra bakgrunnen. Vi ville også at det skulle være et konsistent utseende på både hovedsiden og undersidene, selv om hovedsiden er lagd i Flash og ikke de andre sidene. Derfor har vi også en svart bakgrunn på undersidene. Men her har vi laget en bakgrunn i Photoshop med noen av de samme grafiske elementene som man finner på hovedsiden, det vil si bilder av en galakse og stjerner m.m. Skriftfargen som er brukt i artiklene er en litt grå farge. Vi prøvde oss frem med ulike farger. Det endte opp med hvit skrift, og lenkene i teksten i en litt mørkere grå farge. Etter brukertesten kom det fram at den hvite teksten ble for skarp og gjorde det litt ubehagelig å lese. Derfor forandret vi fargen til en mer dempet gråtone. Lenketekstene ble da gjort enda litt mørkere. Når man snuser over lenkene med musen, vil fargen på lenketeksten bli hvit. Overskriftene til avsnittene er i en lysere gråtone enn selve teksten, for å utheves fra artikkelteksten. Typografi Den visuelle utformingen av skriften, typer, farger og måter å utforme en side (..) på forteller mye om teksten og hvordan den skal tolkes. (Fagerjord 2006, 34). Vi har forsøkt å utforme skriften slik at den skal ha en viss visuell sammenheng med temaet for nettstedet. Fonten vi har brukt er Arial. Denne fonten er enkel med rene linjer uten noe utsmykning. På grunn av at dataskjermer faktisk har veldig dårlig oppløsning må man velge en font som egner seg for skjerm. Det er (..) nødvendig med skrifter med ren, klar tegning til design der en skjerm er publiseringsmediet (Internett osv.) (Erichsen 2001, 87). En av fontene som Erichsen 10
anbefaler til skjerm er Arial. I alle overskrifter har vi satt et større mellomrom mellom bokstavene slik at det skal være et luftig preg over overskriften. Vi har med dette forsøkt å gi overskriftene et preg av å sveve i verdensrommet. Dette kan da gi konnotasjoner til for eksempel introen til Star Wars-filmene, der en tekst kommer svevende over skjermen med en forklarende innledning til filmen. Bruk av grafikk Jeg jobbet ikke selv så mye med design av grafikken. De grafiske elementene på hovedsiden som også er brukt på undersidene, ble laget i sammenheng med Flash-delen. Meningen med å bruke bilder av galakser, asteroider og stjerner i bakgrunnen er at det skal komme tydelig frem at nettstedet omhandler universet. Jeg har selv jobbet mer med å sette inn bilder i tekstene. To av de andre på gruppen har gjort grundig arbeid med å finne bilder, både til siden med bare bilder og bilder som illustrasjoner til artiklene. Jeg har tilpasset bildene slik at de passer inn i teksten og gjør teksten litt mer livlig. Størrelsen på bildene varierer litt for hva som passer best for det enkelte bilde. Jeg har definert en border for bildene i CSS-filen på 10 piksler i bredde og svart. Da får man litt luft mellom tekst og bilder. Brukertest Vi foretok en brukertest med noen medstudenter som testpersoner. Det ideelle hadde jo vært personer fra målgruppen, men vi fikk allikevel konstruktive tilbakemeldinger. På dette tidspunktet var nettstedet ferdig nok til å testes. Alle sidene var lenket sammen, men en del tekst i artiklene og detaljer manglet. Vi laget seks spørsmål til testpersonen. Det var både spørsmål der testpersonen måtte finne fram til konkret informasjon i artiklene, og spørsmål som gikk direkte på testpersonens generelle oppfatning av nettstedet. 11
Det ble blant annet avslørt at teksten i artiklene var for tettpakket og for hvit, slik at det ble vanskelig å lese den. Det ble også avslørt at en del av menyene og inndelinger av sidene var forvirrende og at det var vanskelig å vite hvor man skulle gå for å finne svarene. Et eksempel er at en testperson mente at kapittelinndelingene øverst på undersidene var forvirrende. Hun påpekte at det ikke var god nok sammenheng mellom stikkordet og avsnittet i teksten. Derfor mente denne testpersonen at disse snarveiene til avsnittene var unødvendig. Vi har allikevel valgt å beholde disse inndelingene, fordi det vår intensjon var at det skulle være lett å navigere seg raskt gjennom tekstene. Men vi har tatt til følge kritikken og gjort meningen til stikkordene tydeligere. Det kom også frem at det var en generelt for dårlig synliggjøring av bruksmulighetene til sidene. Det var for eksempel en meny som var skjult på hovedsiden. Man måtte trykke på en knapp for at menyen skulle komme sklidende ned. Denne menyen var vanskelig å oppdage for testpersonene. Derfor har vi satt til å være menyen synlig hele tiden. Noe positivt som kom frem var at nettstedet så innbydende ut og utseendet ble godt likt. De problemene som kom frem, har vi løst blant annet ved å gjøre teksten mer grå, slik at den ikke lyser imot leseren. Vi har også lagd mer luft mellom tekst og bilder. Vi har også fått tydeligere frem hvordan man kan navigere gjennom sidene, blant annet ved å skrive HJEM under den roterende jordkloden man kan klikke på for å returnere til hovedsiden. Samarbeid i gruppen Samarbeidet i gruppen har fungert rimelig greit. Vi har fordelt oppgaver, men kanskje noen har hatt litt mer å gjøre enn andre. Når det gjelder bestemmelser av farger og bilder og lignende, har vi tatt de fleste avgjørelsene i fellesskap. Allikevel har det vært noen motstridende meninger innad i gruppen. Men når man er fire ulike personer vil det alltid være fire ulike meninger. Jeg sitter med en følelse av at et par av de andre ikke er fornøyd med de samme tingene jeg selv er fornøyd med. Kommunikasjonen har fungert greit. Vi har hatt 12
kontakt via e-post, sms og telefon. I tillegg til å møtes mange ganger for å jobbe i fellesskap. Ut av samarbeidet har jeg lært at man må kanskje være enda klarere fra begynnelsen av på hva man vil oppnå med det man skal lage. Samtidig må man bli enig om ulike valg tidlig i prosessen, slik at man ikke bruker tid på å være uenig seinere. Har man først samtykket om noe, kan man da ikke plutselig bestemme seg for å gjøre noe annet enn avtalt. Selvfølgelig kan det dukke opp nye ideer etter hvert, men de kan diskuteres med samarbeidspartnerne og en felles avgjørelse kan bli tatt. Men jeg sitter igjen med en positiv erfaring. Jeg har lært mye av samarbeidet. Fire hoder tenker bedre enn ett hode. Det er lettere å være kreativ i samarbeid med andre, enn aleine. Oppsummering Det har oppstått en god del problemer under arbeidet med kodingen av HTML og CSS. Det meste av problemene har gått på at ulike nettlesere viser sidene på ulike måter. Jeg har prøvd meg fram med mange ulike metoder. Men selv om koden er riktig skrevet kan en liten detalj se bra ut i Mozilla Firefox, men ikke i Internet Explorer. Jeg har i hvert fall jobbet veldig mye med å få et bra resultat i alle nettlesere. Css-filen har blitt validert av www.w3schools.com. For å skrive koden har jeg brukt et program som heter Jedit. Dette er en avansert notisblokk, med ulike farger på skriften for å gjøre arbeidet lettere. Jeg har lært mye mer om CSS og HTML, enn det jeg kunne fra før. Når det gjelder prosjektet som helhet, synes jeg vi har klart å lage et bra produkt. Jeg mener at vi har klart å få med det mest essensielle man trenger å vite om de ulike fenomenene. Vi har også fått positive tilbakemeldinger om at nettstedet ser innbydende ut. Så derfor føler jeg at vi har klart å være litt kreativ med måten innholdet presenteres på. For framtiden kunne nettstedet blitt enda mer utviklet. Jeg ser for meg at det kunne ha blitt skrevet om flere fenomener. Det kunne ha blitt lagt til et diskusjonsforum, slik at folk som besøkte nettstedet kunne ha kommet med ønsker 13
om nye temaer. De kunne selvfølgelig også komme med kommentarer for forbedring av brukervennlighet. Vi har laget en side som heter Om siden der man kan kontakte oss som har deltatt i prosjektet, om det er ønskelig. Mulighetene er mange, så en videre drift av nettstedet er det gode muligheter for. Kilder Fagerjord, Anders, 2006. Web-medier. Introduksjon til sjangere og uttrykksformer på nettet. Oslo: Universitetsforlaget. Fagerjord, Anders. Webkommunikasjon. Oslo: Universitetet i Oslo, udatert. [sitert 10/5-2006.] Erichsen, Stein Holmboe, 2001. Mediedesign. Oslo: GAN forlag 14