Mini Afsluttende Projekt

Mini Afsluttende Projekt Tobias Sønderskov Hansen og Lau Lund Leadbetter Roskilde Tekniske Gymnasium Klasse 2.4 - IT 2013 Side 1 af 18

Indholdsfortegnelse Indledning... 3 Mindmap... 3 User Stories... 4 Problemformulering... 5 Beskrivelse af produkt... 5 Kravspecifikationer... 5 Testspecifikationer... 5 Planlægning... 6 Design og Teori... 7 Valg af design... 7 Anvendte teknologier... 8 Anvendte programmer og alternativer til disse... 10 Implementering... 11 Test og afprøvning... 14 Browser kompatibilitet... 14 Konklusion... 17 Forbedring af egen praksis... 17 Terminologi... 18 Side 2 af 18

Indledning Mindmap Vi startede med at vælge vores overordnede emne om sundhed og kost. Herfra gik vi videre til sport og havde her 2 muligheder vi diskuterede. Den ene ting vi overvejede var et system til at holde styr på nogle resultater. Dette kunne fx være ens personlige løbetider så man kunne se hvordan man udviklede sig over et forløb. En anden mulighed mulighed vi overvjede var noget lig fodboldtabeller, der skulle kunne vise ting som holdnavn, antal kampe og antal point. Det andet emne vi overvejede er hvad er på mindmappet er kaldt vægttab. Vi gik herfra videre til at man kunne lave noget med forbrænding kontra indtagede kalorier. Vi valgte dette emne og valgte derefter at lave produktet som en hjemmeside til denne slags udregninger. Vi diskuterede så videre om hvilke teknologier vi ville bruge og valgte HTML, CSS og JavaScript. Side 3 af 18

User Stories User story 1: Tim Tim vil gerne smide et par kilogram inden strandsæsonen begynder. Han skal derfor bruge en side til at finde ud af hvor meget han skal træne for at fobrænde flere kalorier end han indtager. User story 2: Jon Jon går i skole og er i gang med et projekt om krop og sundhed. Han skal derfor bruge nogle fakta om enegiindholdet i nogle udvalgte madvarer. Side 4 af 18

Problemformulering Beskrivelse af produkt Vores produkt er en webapplikation der skal kunne bruges til at regne forskellige krop og sundheds relaterede ting ud, som fx BMI, forbrænding og kalorieindhold i diverse madvarer. Udover dette skal siden også indeholde nogle generelle informationer om disse ting, således at siden kan fungere mere som en helhed og ikke bare en lommeregner. Kravspecifikationer Krav til produktet Skal kunne udregne BMI fra indtastet højde og vægt Skal kunne udregne forbrænding ved forskellige aktiviteter Skal kunne vise energiindhold i forskellige fødevarer Skal kunne vise relevant information om emnerne Skal kunne vises ordenligt i nyere webbrowsers Skal være overskueligt Skal være let at bruge Målgruppe Vores målgruppe er mænd og kvinder fra 14 år og opefter. Primært folk der træner eller skal til at træne, enten for styrke, kondition eller vægttab. Sekundært folk der skal bruge informationerne i sammenhæng med et projekt om sundhed eller lignende. Værktøjer Sublime Text 2 Teknologier Google Drive HTML CSS JavaScript jquery Testspecifikationer En lille testgruppe får udleveret et spørgeskema hvor de skal svare på hvilke af webapplikationens funktioner de er i stand til at bruge og om det er let at finde rundt på siden. Derudover afprøves webapplikationen i forskellige browsers hvor det tjekkes om funktionerne stadig virker og om siden ser ud på samme måde. Side 5 af 18

Planlægning Planlagte plan Gennemførte plan Side 6 af 18

Design og Teori Valg af design I designfasen startede vi med at tegne følgende 3 skitser: Skitse 1 Sktise 2 Skitse 3 Side 7 af 18

Dernæst analyserede vi skitserne ved hjælp af gestaltlovene. Skitse 1 Den første skitse opfylder lovene om lukkethed, lighed, figur og baggrund og forbundethed. Kasserne opfattes som sammenhørende, da de er rammet ind på samme måde. Kasserne på cirklen ligner hinanden mere end de ligner kassen i midten og hører mere sammen. De ydre kasser er forbundet af cirklen. Den midterste kasse er forbundet til den kasse den hører til. Sidens indhold er tydeligt adskildt fra baggrunden. Skitse 2 Den anden skitse overholder lovene om lukkethed, figur og baggrund, lighed og forbundethed. De forskellige menupunkter er afgrænset på samme måde og de ligner hinanden. Figur og baggrund er tydeligt adskildt. Skitse 3 Den sidste skitse overholder lovene om lighed, forbundethed og figur og baggrund. Kasserne ligner hinanden og opfattes som om de hører sammen. Ligeledes er de afgrænset på samme måde. Der er et klart skel mellem figur og baggrund. Alle tre skitser opfylder flere gestaltlove, men vi valgte at arbejde videre med det tredje design. En af grundene til dette er at vi ønskede det skulle være mere simpelt end skitse 1, og vi ville ikke sprede funktionerne ud på så mange forskellige sider som i design 2. Anvendte teknologier HTML HTML står for HyperText Markup Language. Det bruges til at strukturere indholdet af en hjemmeside og er hvad man kalder et opmærkningssprog, eller på engelsk markup language. HTML skrives ved hjælp af tags. De fleste tags er i par, de har et et start og et slut tag og ændrer så på hvad der er i mellem dem. Eksempelvis: <b>fed skrift her</b> I dette filfælde vil teksten mellem <b> og </b> blive vist med fed skrift. Der er også tags der ikke kræver sluttags. Et eksempel på dette er tagget for linjeskfit <br>. Det er sjældent man laver en hjemmeside udelukkened i HTML, da der er meget begrænsede muligheder for at styre udseende og placering af de forskellige elementer. Derfor bruges HTML ofte i kombination med CSS. Side 8 af 18

CSS CSS er en forkortelse for Cascading Style Sheets. Det er et sprog som bruges til at beskrive udseende og formatering af fx et HTML dokument, men kan også bruges med andre opmærkningssprog som fx XML. CSS kan eksempelvis ændre på ting som farver, placeringer og skrifttyper- og størrelser. p{ font-size: 14px; font-weight: bold; } Hvad der står før den første tuborgklamme, i dette tilfælde p, bestemmer hvad den følgende kode skal påvirke. I dette tilfælde vil tekst der står mellem <p> tags være fed skrift og have en skriftstørrelse på 14 pixels. De forskellige egenskaber mellem tuborgklammerne er adskildt med semikolon. Der er flere måder at anvende CSS sammen med HTML på. Man kan referere til et CSS dokument med et <link> tag på følgende måde: <link rel= stylesheet href= style.css type= text/css > På denne måde vil CSS en fra dokumentet style.css blive brugt i HTML dokumentet. Dette kaldes et external stylesheet. Man kan også have det direkte i HTML dokumentet ved at inkludere det i <stylet> tagget, ofte kaldet et internal stylelsheet: <style type= text/css > body{ font-family: Arial, Helvetica, Sans-Serif; font:11px arial; } </style> En tredje mulighed er at skrive CSS en efter en style attribut i de enkelte tags. Dette kaldes inline style. Et eksempel på dette kunne være: <div style= border:solid;border-width:1px > Indhold her </div> I dette tilfælde vil CSS en kun påvirke dette ene <div> tag. Fordelen ved at have CSS en i et dokument for sig selv er at man kan referere til den samme CSS fra flere forskellige HTML dokumenter. På denne måde behøver man kun at rette i en enkelt fil for at påvirke udseendet af alle siderne. Side 9 af 18

JavaScript Javascript er et programmeringssprog der hovedsageligt bruges til at gøre hjemmesider mere interaktive. JavaScript bliver afviklet client-side i brugerens egen browser, modsat et sprog som fx PHP, der bliver afviklet server-side. Dets syntax minder om C. Der er både fordele og ulemper ved JavaScript. Da det afvikles direkte på brugerens computer er det hurtigt uden at belaste webserveren. Sammenlignet med andre sprog er JavaScript rimlig simpelt og let at lære. At det er client-side betyder dog også, at koden kan afvikles forskelligt fra bruger til bruger. Et problem er også at nogle ældre browserversioner ikke, eller meget dårligt, understøtter JavaScript. jquery jquery er ikke et programmeringssprog i sig selv, men derimod et bibliotek til JavaScript. Det indeholder en masse funktioner der gør det let at manipulere med indholdet af en side. Blandt andet gør jquery det meget nemt at vælge specifikke dele af siden og kan så ændre på disse på forskellige måder, fx ændre en overskrifts farve når musen holdes over den. Med jquery kan man udføre rimlig komplicerede handlinger med meget lidt kode fordi det meste af arbejdet er gjort på forhånd. jquery er også kompitabelt på tværs af browsere, så det slipper man også for at tage højde for. At det hele er lavet på forhånd kan godt være et minus, hvis man foretrækker at lave det meste selv, men det er ikke altid man har tid til at genopfinde den dybe tallerken. En ulempe er også at hele jquery biblioteket loades, også selvom man kun bruger nogle få dele af det. Der bruges altså flere ressourcer end nødvendigt. Reelt har dette dog sjældent nogen mærkbar betydning for brugeren af siden. Anvendte programmer og alternativer til disse Sublime Text 2 Vi skrev webapplikationen i programmet Sublime Text 2. Det er ikke gratis, men har en ubegrænset evalueringsperiode. Sublime Text 2 er et program til redigering af kildekode og understøtter en del forskellige sprog. Et alternativ kunne være Aptana Studio. Aptana Studio er et IDE (integrated developer environment) og altså ikke bare et tekstredigeringsprogram. I modsætning til Sublime Text 2 er Aptana Studio open source. Grunden til vi valgte Sublime er at det generelt er hurtigere, specielt til at starte op, og vi er mere vant til at bruge det. Google Drive Til delingen af filer mellem hinanden under projektet brugte vi Google Drive. Google Drive er en service til opbevaring og synkronisering af filer. En del af Google Drive er Google Docs der gør det muligt at redigere dokumenter samtidig. Google Docs har 5 GB gratis lagerplads. Alternativer til Google Drive er bl.a. Dropbox og Microsoft SkyDrive. Side 10 af 18

Implementering I dette afsnit vil vi komme ind på hvordan nogle af delene af vores produkt er lavet. Hele produktet vil kunne findes på Tobias studieweb under tobiassh11/mini_projekt_2013/ eller sammen med denne rapport. HTML koden til den ene af kasserne er vist her, med resultatet vist til højre. Det ville dog være svært at få kassen til at se ud som ovenover uden brug af CSS. Den CSS der er vist til venstre er primært til at styre placering og baggrundsfarve på den overordnede container til de forskellige elementer. Koden til højre er med til at styre placering og udseende af de tre øverste kasser. Side 11 af 18

Når musen holdes over overskriften til kasserne ændres baggrundsfarven til denne og musen ændres til en hånd. Fra start er de forskellige ting skjult, men når der klikkes på overskritskasserne bliver indholdet til den pågældende kasse vist. Til dette bruges javascript med jquery biblioteket. Den første del af dokumentet fortæller at koden først skal køres når dokumentet er klart. De efterfølgende linjer $(.topbox ).hide(); $(.bottombox ).hide(); skjuler de elementer der har classen toppbox og/eller bottombox. Den første del $(.topbox ) er en selector der vælger elementer med denne class. Den næste del.hide() er en funktion der skjuler det/de valgte elementer. Til sidst afsluttes med et semikolon. Forskellige dele af koden køres afhængigt af hvilke handlinger brugeren laver. Holdes musen over en af titelkasserne ændres der på dennes CSS. Når musen så forlader området igen ændres det tilbage. Side 12 af 18

På billedet her er vist kildekoden til udregning af kalorieindholdet. Linjen $( enterbutton3 ).click(function() { gør at den efterfølgende kode bliver kørt når der klikkes på det element med id et enterbutton3. Herefter hentes de informationer brugeren har indtastet/valgt i den i den kasse som knappen hørte til. Der køres så igennem en masse if statements for at finde den værdi der svarer til den valgte madvare. Da vi ikke har så mange madvarer på listen mener vi at denne løsning er ok. Havde vi derimod mange, fx 20-50 stykker, ville denne metode ikke være så overskuelig. I det tilfælde ville der være andre muligheder, en af dem kunne fx være at bruge madvarernes værdi som et ID og så opbevare værdien for deres kalorieindhold i en array. Der er dog blot en af mange muligheder. Side 13 af 18

Test og afprøvning Vi viste 5 testpersoner vores webapplikation og bad dem besvare disse 5 spørgsmål: Kan du udregne din BMI? Kan du udregne din forbrænding ved 30 minutters løb? Kan du finde informationer Er hjemmesiden overskuelig? Er hjemmesiden let at bruge? Til disse spørgsmål svarede vores testpersoner alle ja. Vi gav dem dog ikke mulighed for evt. at uddybe svar og det bør også nævnes at alle 5 testpersoner brugte Google Chrome som browser. Browser kompatibilitet Mozilla Firefox Mens vi lavede produktet testede vi primært i Firefox og det er i denne browser at siden ser ud som det var tænkt den skulle. Side 14 af 18

Google Chrome Visningen i Chrome er meget lig den i Firefox. Enkelte steder er der meget små forskelle, men vi vurderer at det ikke er noget der har betydning for oplevelsen af webapplikationen. Side 15 af 18

Microsoft Internet Explorer 9 I Internet Explorer 9 er det en noget anden sag. Det er specielt de afrundede hjørner der skaber problemer her. Hvis det bare var hjørnerne ville det kun have en mindre betydning for brugeroplevelsen, men der er også problemer med højden af kasserne, i og med den midterste strækker sig ned over kassen under den. Side 16 af 18

Microsoft Internet Explorer 10 I Internet Explorer 10 ser det heldigvis meget bedre ud. Her virker de runde hjørner igen og højden af elementerne passer. Vores webapplikation klarede altså ikke fuldstændigt browserkompatibilitetstesten. Man kan så diskutere hvorvidt Internet Explorer 9 hører med under nyere browsere, men ved at vores side ikke vises ordenligt i denne version risikerer vi at tabe en del af vores målgruppe. Konklusion Det lykkedes vores produkt at opfylde de krav der var til dets funktioner, samt kravene om at det skulle være let at bruge og overskueligt. Produktet klarede dog ikke kompatibilitetstesten da det ikke blev vist ordenligt i Internet Explorer 9. Forbedring af egen praksis På trods af at produktet ikke kunne opfylde alle de krav der var stillet er vi tilredse nok med det. De forskellige ting med jquery tog ekstra tid fordi det ikke er noget nogen af os har brugt før og vi derfor var nødt til at bruge mange referencer. Efter et stykke tid fik vi dog godt styr på det og de resterende jquery dele tog således ikke så lang tid. Vi brugte også en del ekstra tid på at finde en måde at få placeret de forskellige elementer ordenligt, så de blev på deres plads, igen fordi vi først skulle lære hvordan det skulle gøres. Vi vil selv mene at prioriteringen af opgaverne var fin, men vi har ikke brugt tidsplanen til at styre selve forløbet. Vi brugte den derimod til at bagefter at kunne se hvor lang tid de forskellige dele havde taget i forhold til den afsatte tid. Side 17 af 18

Terminologi HTML CSS JavaScript jquery Library Client-side Server-side Tags Browser Står for HyperText Markup Language og er et sprog der bruges til at lave hjemmesider Står for cascading style sheets og bruges primært til at ændre udseendet af HTML sider Programmeringssprog der hovedsageligt bruges sammen med web browsers. Et library til JavaScript der forenkler mange ting i JavaScript. I programmering et bibliotek der indeholder en masse færdiglavet kode. Handlinger der udføres på brugerens computer Handlinger der udføres på en server Udseendet af en html side styres ved hjælp af tags. De fleste tags er i par og har både et start og et slut tag. Eksempelvis vil <i>tekst her </i> gøre teksten i mellem tagsne kursiv. Applikation til at hente og vise internetsider Side 18 af 18