ROSKILDE TEKNISKE GYMNASIUM Eksamensopgave Kommunikation/it Cecilie Maria Nielsen, Mathias Fornitz Eriksen og Martin Arnetoft klasse 1.6 07-05-2010
Vi har valgt at beskæftige os med opgave 1 fra oplæget. Kommunikationsplanlægnig: Afsender: Cecilie, Mathias og Martin Målgruppe: børn, unge (alder 10-20) Budskab: at lære vores målgruppe om at sundhed er godt, og at det er vigtig at leve sundt. Teknisk planlægning: Mathias vil lave plakaten ved hjælp af programmet GIMP. Martin A laver hjemmeside ved hjælp af notepad++. Cecilie laver vores banner ved hjælp gif i GIMP. Kravspecifikation: Visuelt: produktet skal kunne fange opmærksomheden hos vores målgruppe blandt andet ved at have i øjenfaldende, men relevante farver. Vores hjemmeside skal have nogle relevante baggrundsfarver. Information: produktet skal give information om emnet, samt have en henvisning til en hjemmeside, hvor man kan læse om sundhed. Hjemmesiden skal kort og enkelt fortælle om fedme og sundhed. Interaktion: Vores plakat skal have et link til den hjemmeside vi laver, hvor man kan få mere at vide om emnet. Testspecifikation: Når vi tester vores plakat, vil vi spørge nogle mennesker, indenfor vores målgruppe, om de synes plakaten er iøjefaldende, og om de kunne tænke sig at besøge vores hjemmeside. Når vi skal teste vores hjemmeside, vil vi fokusere på brugevenligheden, og overskueligheden. 2
Design: Vores plakat og banner skal være rød og grøn. Bogstaverne bliver røde og baggrunden skal være grøn, for på den måde at kunne fange opmærksomheden hos vores målgruppe. Implementering: Hjemmesiden: På billedet kan man se, at vi har lavet en doctype-erklæring, som er det første man skal skrive, når man skal kode sin hjemmeside. En doctype-erklæring gør, at man kan se de specielle bogstaver, som man har i sit alfabet fx æ, ø og å. Det næste er at starte på hjemmesiden, og det gør man ved at skrive html og derefter lave en body (krop), hvor man samtidig bestemmer sin baggrundsfarve. Efter body laver man hovedet. Hjemmesider skal altid slutte på </body> efterfulgt af </html>. Skråstregen betyder, at man afslutter kommandoen. 3
Nu har vi så det allermest grundlæggende, men vi vil jo også gerne have noget tekst på hjemmesiden. For at bestemme størrelsen på teksten, skriver man <h1> foran sin tekst, og </h1>bagved den. Man skal bruge <h1> hvis man gerne vil have stor skrift, men hvis man vil have mindre skrift, kan man skrive <h2> og så fremdeles. Vi vil også gerne have en knap oppe i toppen, hvor man kan komme tilbage til forside, så koden for den sætter vi lige under head. Dette er resultatet af di koder, som man kunne se på billedet før. Hvis man gerne vil have links på sin hjemmeside, skal man skrive koden på billedet. Koden <blink> er der for at få linket til at blinke, dette behøver ikke være med. Man kan lave links til alle hjemmesider, det er bare at skrive navnet på hjemmesiden der hvor der på billedet står fedme.html. Vil kan have linket til at hedde noget andet på skærmen, skal man ændre navnet der hvor der står her på billedet. 4
På hjemmesiden vil vi gerne have en BMI-beregner. BMIberegnerne har vi valgt at lave som en JAVA-script. Vi har valgt JAVA-script, fordi det er nemt at arbejde med. På billedet kan man se koden for layoutet på beregneren. 5
Beregneren skal have 2 knapper, hvor man når man trykker på den ene kan udregne sit BMI, og når man trykker på den anden, sletter den alt hvad man har skrevet. Disse koder kan man se på billedet. 6
Nu skal vi så kode BMI-beregnerens funktioner. Koden på billedet gør, at hvis værdierne man har indtastet, er 500, eller større, og mindre end 0, kan den ikke regne det ud. Har man indtastet nogle værdier som er som er udenfor dette, vil man får en besked op på sin skærm, som beder en om at indtaste nogle andre værdier. Beskedens kode, kan også ses på billedet ud fra alert. 7
Dette er koderne til at give forskellige beskeder, hvis resultatet af dine indtastede værdier ligger indenfor de passende intervaller. Vi har kodet beregneren til, at hvis dit BMI ligger i intervallet 21-24, kommer den med beskeden perfekt, og sådan gør man med alle intervallerne på BMI skalaen. Vi har haft en del problemer med at kode BMI-beregneren, fordi vi ikke på forhånd viste hvordan det skulle gøres. Derfor tog det ret lang tid at lave den, fordi vi var nødt til at læse om java-script på en del hjemmesider først. Selvom vi havde læst om det først, tog det stadig den del tid at kode den. Da vi havde kodet beregneren, var der også nogle problemer med, at vi ikke kunne få lov til at ændre på intervallerne, hvor den skulle give de forskellige beskeder. Når vi ændrede på intervallerne, så de passede med BMI-skalaen, ville beregneren ikke virke. Dette brugte vi en del tid på at ordne. Vi fandt en løsning, da vi lukkede notepad ++ samt webbrowseren, og startede det op igen. Plakaten Vi ville gerne lave en plakat, der omhandlede sundhed. Derfor lavede vi en brainstorm. Her er vores skitse til plakaten, som vi lavede under brainstormen: 8
Vi kom frem til at det, som symboliserede sundhed bedst, var et rødt æble og farven grøn. Vi valgte derfor at baggrunden på plakaten skulle være grøn. Grøn har kontrastfarven rød, og derfor var det naturligt at æblet skulle være rødt, så det stod i kontrast til den grønne baggrund på plakaten. For at undgå problemer med copyright rettighederne på billedet, med æblet, har vi selv taget billedet. Vi tog det med makrofunktionen (på dansk kaldet nærbilledfunktion) på digitalkameraet. Denne funktion gør det muligt at zoome mere ind på objekter, uden at de bliver alt for pixeleret. (Billedet er ikke fra det samme digitalkamera) 9
Da vi havde taget billedet, tog vi det ind på computeren for at redigere det, så det kunne bruges på vores plakat. Vi brugte programmet gimp til dette formål. Gimp er et billedredigeringsprogram udgivet af GNU. 10
Æblet bliver frit lagt med Magic wand værktøjet, som er det værktøj der kan vælge et område, hvor farverne havde stort set de samme. Ved at man giver magicwand et tal som den valgte farve må afvige fra, kan man frigøre det objekt på billedet man ønsker. Billedet viser magicwand funktionens placering. Da vi ville lave plakaten blev vi enige om, at der skulle være tekst på. Gimp har en funktion til at tilføje tekst. Måden man gør det på, er ved at markere det område der 11
ønskes tekst, og skrive hvad der skal stå. Udover at skrive, kan man også ændre fonten (skrifttypen), skriftstørrelsen, farven osv. For at bruge den funktion skal man klikke på det store sorte A i toolbox'en (værktøjskassen) Bemærk at vi under denne opgave har benyttet flere forskellige operativsystemer til at udvikle vores plakat. Banner Vi har valgt at lave en gif (Graphics Interchange Format) animation, som banner på vores sundhedsside. Måden vi har lavet den på, er med programmet GIMP (GNU Image Manipulation Program). Der findes en plugin til GIMP, der hedder GAP (GIMP Animation Package). GAP er beregnet til at lave animationer med. Vi havde dog problemer med at downloade og installere GAP i GIMP, og valgte derfor at lade være med at bruge det. Efter noget research fandt vi ud af, at det er muligt at lave gif animationer uden GAP. Måden man laver det på, er ved at betragte vært lag af billedet som en selvstændigt frame af animationen. 12
Vi har haft problemer med at få vores gif animation til at fungere, så hvis den ikke er på alle studiewebs er det derfor. 13
Afprøvning: Plakat Sådan så vores første plakat ud: 14
Vi testede plakaten, ved at spørge nogle personer, som var indenfor vores målgruppe, og de kom med følgende kommentere: Æblet er godt fordi det er blikfanget, men ordene på plakaten skal med stort. Det er godt at farven omkring overskriften hælder nedad med læseretningen. Derudover ville folk gerne kigge på vores hjemmeside. Efter denne test, lavede vi vores plakat om, så den passede til det respons vi fik: 15
Hjemmeside: Vi testede vores hjemmeside på nogle personer fra vores målgruppe. De var alle enige om, at den var meget nem at finde rundt på, og de synes det var nogle gode baggrundsfarver. Kilder: http://dagenssundhed.dk/index.php/vaegttab/boern-og-fedme.html http://www.w3schools.com/js/default.asp http://www.alun.dk/livsstil/# http://www.netdoktor.dk/sygdomme/fakta/fedme.htm 16