Gr. 8 Børn, unge og sundhed Automatisering Kage, hvornår? Thomas Qvistorff Kanstrup og Thorbjørn Louring Koch 1.6 Kom/IT RTG 30/4 2010
Indhold Indledning... 3 Planlægning... 3 Kommunikationsplanlægning... 3 Teknisk planlægning... 3 Krav- og testspecifikation... 4 Kravspecifikation... 4 Testspecifikation... 4 Design... 4 Visuelt design... 4 Farvevalg... 4 Informations design... 5 Interaktions design... 5 Implementering... 5 Figur 2... 5 Figur 3... 6 Figur 4... 7 Figur 5... 8 Figur 6... 8 Afprøvning... 9 Konklusion:... 9 2
Indledning Vi er to drenge fra Roskilde Tekniske Gymnasium der har lavet denne rapport, som en del af vores afsluttende opgave i Kommunikation og IT på C niveau. Opgavens tema er børn, unge og sundhed i casen: oplysning om sundhed til børn og unge i region Sjælland. Vi har valgt underopgaven automatisering. Produktet er en hjemmeside hvor der er brugt JavaScript til at lave både en BMI og en kilojoule beregner. Rapporten kommer til at omhandle designet, produktudviklingen, testningen og samspillet mellem maskine og menneske. Problemstilling Der er for få børn og unge i region sjælland som er ordentligt informeret omkring sundhed, BMI og hvor meget energi mad indeholder. Løsningsforslag I. Et program kun lavet med Java som kan downloades til at udregne BMI og Energi i kost. II. Hjemmeside med de formler som bruges til at udregne BMI og energi i kost. III. En hjemmeside kun med oplysende tekst omkring sundhed og BMI IV. En hjemmeside med lidt tekst om sundhed, BMI og energi i kost, samt to beregnere af BMI og Energi i kost. Beregnere skal laves med JavaScript. Vi valgt løsningsforslag IV fordi vi vil med en hjemmeside prøve at fange målgruppen, børn og unge, for at gøre dem klogere på hvad sundhed, BMI og kost har af betydning. Grunden til at vi vil bruge en hjemmeside er at internettet er meget brugt af børn og unge, så vi ser det som en god måde at komme i kontakt med dem på. Planlægning Vi har delt vores planlægning i to dele: kommunikationsplanlægning og teknisk planlægning. Kommunikationsplanlægning er hvordan vores produkt skal kommunikere med målgruppen. Den tekniske planlægning er hvordan vi vil designe vores produkt. Kommunikationsplanlægning Vi har valgt at lave en hjemmeside med det formål at informere vores målgruppe kortfattet om BMI og energi. Desuden skulle det være muligt at beregne BMI og energimængden, i en fødevare, på siden. Teknisk planlægning Da hjemmesiden skulle kunne udregne BMI og energimængden i en fødevare, valgte vi at bruge JavaScript til at udføre de automatiske processer. BMI beregneren fungere ved at man indtaster sin vægt i kilo og sin højde i centimeter, den beregner så ens BMI. Energiberegneren er lidt mere kompliceret: Man indtaster hvor mange procent der er af henholdsvis fedt, protein og kulhydrat i fødevaren og derefter mængden af fødevaren i gram. Den giver så hvor mange kilojoule man ville få af at spise den valgte fødevare. 3
Krav- og testspecifikation Kravspecifikation Kravene til hjemmesiden er at det skal være nemt at bruge den med en medfølgende fyldestgørende vejledning og en god brugergrænseflade, som visuelt er nem at overskue og ikke afskrækker målgruppen. Ydermere skal man selvfølgelig kunne udregne BMI og energimængden i en fødevare. Der skal også være lidt fakta om energi og BMI. Testspecifikation Vi får tilfældigt udvalgte individer til at afprøve vores hjemmeside og give konstruktiv kritik, for at se om kravene er overholdt og hvad der eventuelt kunne forbedres. Design Vi har valgt at bruge en designmodel der er velegnet til interaktive medier, som en hjemmeside netop er. Den består af tre dele som tilsammen giver designet. De tre dele er visuelt design, som er hvordan den ser ud og er opbygget, informations design, som er hvad indholdet i produktet skal være og interaktions design, som er hvordan brugergrænsefladen er opbygget. Visuelt design Vi har valgt at designe vores hjemmeside som den ser ud på figur 1. Det har vi fordi det giver en god opbygning som er nem at overskue og teksten er delt op i linjer af en tilpas længde. Der skal også være fire knapper der bruges til at kontrollere JavaScripten. Farvevalg Vi har valgt at bruge orange-blå kontrast som er behagelig for øjnene at kigge på, uden det er kedeligt at se på. Baggrunden er blå og teksten er orange. Figur 1 4
Informations design Hjemmesiden skal indeholde information om hvad BMI betyder og hvad det bruges til. Der skal også være en beskrivelse om hvor mange kilojoule en person skal bruge om dagen og hvilken forskel der er på energi fra de forskellige kilder. Interaktions design Hjemmesiden skal være nem og ligetil at bruge og det skal være forklaret ordentligt hvordan man bruger de to beregnere. JavaScripten skal også være lavet så den ikke stiler unødvendige krav til computeren, resultatet skal komme med det samme man trykker beregn. Implementering Produktet er skrevet i notepad++ og kilderne er brugt som assistance til hjælp ved uoverkommelige situationer. Vi startede med at programmere JavaScripten, fordi det var vigtigst for at produktet virkede. Vi brugte w3schools som læringskilde, da vi havde gode erfaringer med siden fra tidligere projekter. Figur 2 På figur 2 ses hvordan hjemmesiden så ud uden css som er det dokument der styrer layoutet. I dette stadie er den første beregner færdig og den nødvendige information er skrevet på dens position. Tabellen er også færdig, det ses tydeligt på opstillingen som er delt i spalter. Figur 2 5
Figur 3 På figur 3 ses begyndelsen på css dokumentet. Baggrundsfarven er defineret og to tekst kommandoer er ændret så de passer bedre til vores layout krav. Figur 3 6
Figur 4 Nu er alt JavaScripten færdig, på figur 4 kan man se del som står i head sektionen af html filen. Variablerne er defineret og hvordan den skal udregne BMI ud fra højden og vægten og energimængden ud fra mængden af fedt, protein, kulhydrat og hvor meget man har af fødevaren. Figur 4 7
Figur 5 Her er produktet næsten færdigt. Formen er skrevet, det er beregneren på hjemmesiden, den bruger variablerne som blev defineret i foregående afsnit til at skabe et visuelt output. Figur 5 Figur 6 Her ses hjemmesiden hvor den er næsten færdig, der er kun ændret på teksten senere. Css og html er sat sammen og layoutet ser ud som vi har defineret det. I midten er de to beregnere. Figur 6 8
Afprøvning Da produktet skulle afprøves havde vi fundet to tilfældige testpersoner, en dreng og en pige. Begge fik besked på at se på vores produkt og afprøve det. Idéen var at finde ud af om unge udefra ville kunne bruge siden uden verbal vejledning og give kritik til ting der kunne laves om eller gøres bedre. Ingen af testpersonerne havde problemer med at bruge hjemmesiden og fandt den meget brugervenlig, både i sin informering og vejledning. Farvevalget var også godt modtaget af de to testpersoner som fandt det positivt med lidt alternative farver til en hjemmeside. Afprøvningen, som fulgte testspecifikationen, viste at vores produkt overholder de krav vi har specificeret i kravspecifikationen. Forbedringer Den første prototype kom ikke til at leve op til kravet om at kunne fortælle hvor mange kilojule en person skal bruge om dagen. Som forbedring af produktet kan vi indsætte en beregner som udregner hvor mange kilojoule en person skal bruge om dagen. Det kan vi gøre ved at få et Javascript til at udregne disse to formler for mænd og kvinder: Formel for kvinder: vægt i kg x 42 + højde i cm x 26,3 20,7 x alder i år 676,2 = energikrav i kj Formel for mænd: vægt i kg x 42 + højde i cm x 26,3 20,7 x alder i år + 21 = energikrav i kj Konklusion Denne måde at bruge automatiske processer, i henhold til temaet børn, unge og sundhed, fungere godt for den anviste målgruppe. Test og afprøvning viser at det er en fin måde at skabe kontakt til målgruppen og informere dem om sundhed. Prototypen kan forbedres ved at lave den ekstra udregning som er nævnt i Forbedring. Til beregneren vil selvfølgelig være vejledning og informerende tekst. 9
Kilder JavaScript for Dummies 4th edition, af Emily Vander Veer. - JavaScript kodnings hjælp http://w3schools.com/js/default.asp - JavaScript kodnings hjælp http://w3schools.com/html/default.asp - html kodnings hjælp http://www.sundfamilie.dk/documents/kalorier/energi/stof.htm - formel til uregning af kilojoule per dag http://www.altomkost.dk/testdigselv/maal_dit_bmital/forside.htm - baggrundsviden for sundhed og BMI fra fødevarestyrelsen 10