Roskildes tekniske gymnasium. Kulløse Mijlømesse. Afsluttende kom/it projekt

Transkript

1 Roskildes tekniske gymnasium Kulløse Mijlømesse Afsluttende kom/it projekt Casper Hansen og Christian Hansen

2 Indhold Indledning... 3 Planlægning... 3 Overvejelser... 3 Hvordan man kommer til mål... 3 Tidsplan... 3 Målgruppe... 4 Produkt... 5 Reklame... 6 Design... 6 Typografi... 7 Produkt udvikling... 7 Implementering Test af produkt Analyse af spørgeskemaets resultater Færdigt produkt Spørgeskema Bilag

3 Indledning Vores opgave lyder på at fremstille et produkt, hvorpå kommunen kan komme ud med informationer, til involverede i deres Miljø messe. Dette er både borgere og aktører. De skal have relevant information, før, under og efter arrangementet. Vi har valgt opgave 2, da det er en opgave, hvor vi bedst kan vise vores kundskaber. Planlægning Overvejelser Opgaven lyder på at lave et medieprodukt, der gør det muligt at videregive information før, under og efter Miljø messen i Kulløse kommune. Vi vil lave et produkt der henvender sig til besøgende på messen. Vi vil lave et medieprodukt, der gør det muligt for kommunes borgere både at få information, før og under messen. Hvordan man kommer til mål Får at gennemføre opgaven med et fornuftigt resultat skal opgaven indeholde: Tidsplan Målgruppe overvejelser Design tanker og løsninger Krav (eventuelt er krav og design slået sammen, da kravene vi sandsynligvis stiller, er krav til design) Spørgeskema udvikling for at teste om ens krav er blevet opfyldt, og få ideer til vider udvikling af produkt. Tidsplan Vi startede med at lave en arbejdsoversigt. Vi havde 18 timer at gøre godt med. Vi fordelte vores opgave således: Uge Antal timer i skolen Plan 11 4 Vælge opgave, diskutere muligheder og ulemper ved de forskellige. Ligge plan for resten af projektet. Finde målgruppe vi ønsker at fokusere på Diskutere målgruppe og 3

4 hvordan vores produkt nemmest kommer ud til denne målgruppe. Påbegynde produktudvikling 13 4 Arbejde videre med produkt. Påbegynde skrivearbejde (rapport) 14 2 Arbejde videre med rapport og færdiggøre produkt. Lave produkt analyse skema Produkt analyse gennemført. Analysere resultater, og påbegynd ændringer af produkt 17 2 Produkt og rapport færdiggjort, upload fil til studieweb. Målgruppe Der var 2 hovedmålgrupper, der var relevante at henvende sig til under miljø messen. Der var de deltagerne, altså borgerne, og det var aktørerne, altså dem der havde boder stående. Vi valgte at fokusere på borgerne. Denne målgruppe stiller specielle krav omkring design og produkt. Borgere i en kommune, er et stort udsnit af mange forskellige person typer. Hvis vi ser på Minervas livstils segmentering, henvender messen sig mest til det Grønne og Rosa segment. Dette er folk der ikke går ligeså meget op i materialisme og forbrugs goder, men tænker på miljøet og den verden vi lever i. Disse personer vil højst sandsynligt deltage i messen. Det blå segment, Kilde: kan der også være få deltagere fra. Selvom det blå segment ligger vægt på forbrugs goder, er de også veluddannede, og går op i det moderne. I disse tider, kan det anses som moderne at tænke på miljøet, og derfor kan dette segment også vise sig på messen. Det violette segment er folk der går meget op i forbrug ligesom de blå, de er dog lavt uddannede, og arbejder for at få forbrugsgoder, derfor er denne gruppe ikke tilbøjelige til 4

5 at deltage i miljø messer. Det grå segment er svært at forudsige om de vil være interesseret, de er uafklarede omkring deres holdninger, og derfor sandsynligvis også omkring miljø sager. Udfra denne analyse, kan vi konkludere at 3 forskellige grupper af mennesker sandsynligvis vil deltage i miljø messen, og hele denne gruppe skal vores produkt henvende sig til. Produkt Vi havde visse overvejelser omkring vores produkt. Kravet var, at det skulle være en god løsning til at mange mennesker, kunne få den relevante information omkring messen. Da vores målgruppe er meget bred, kræver det et produkt der henvender sig til store dele af befolkningen. Vores overvejelser gik på at vi kunne lave enten en brochure eller en webside, hver ting havde fordele og ulemper. Får at vælge stillede vi dem op i et skema får at kunne sammenligne. Produkt: Fordele Ulemper Samlet bedømmelse Hjemmeside Giver plads til mange informationer, hvor brugeren selv kan vælge, og derfor kan man lave en samlet website, til alle deltagere og aktører af messen. Giver mulighed for at alle grupper i segmenteringen kan blive tilgodeset. Kræver ingen natur resurser. For at få adgang til information kræver det net tilkobling, så det kan være problematisk at få informationer under messen. Kommer måske ikke ud til den ældre del af kommunen. Giver et solidt medie, som giver mulighed for at komme ud med mange informationer, til mange forskellige befolknings grupper. Der er dog problemer med at medbringe informationen på messen. Brochure Nemt at tage med på messen, så information altid er tilgængelig. Nemmere for den ældre del af befolkningen at forholde sig til. Kræver resurser i form af træ, og da det er en miljø messe virker det forkert. Giver ikke samme friheder som en hjemmeside. Man skal lave separate brochure for aktører, og deltagere. Skal uddeles, hvilket også kræver resurser. Giver et medie, der er nemt at have med på messen. Kræver dog natur resurser at producere (træ). Kræver flere brochure, alt efter om det er til aktører eller deltagere. 5

6 Ingen af produkterne, går direkte i modstrid med vores målgruppe. En hjemmeside stiller krav til at brugeren har en computer, men da omkring 90% af danskerne har en pc, og flere har mulighed for at bruge en, vil størstedelen af alle i segmenterings grupperne, kunne få adgang til hjemmesiden. Vi valgte at lave en hjemmeside, da der var flest fordele forbundet med dette valg. Vi havde dog et problem som vi skulle have løst. Deltagerne har svært ved at få information under selve messen. Til dette problem, fandt vi på at alt information der er relevant under selve messen skal være muligt at downloade som PDF format. På denne måde kunne brugerne downloade det, de mente de havde brug for at vide under messen, og skrive ud på printer. Igen er der tale om et resurse spild, men det er væsentligt mindre, da brugeren kun printer det ud, den enkelte har brug for. Nogle skal måse bruge kort til messen, mens andre gerne vil have et kort over messen. Reklame I faget teknologi lavede vi tidligere på året en miljøvenlig kompost beholder, som vi syntes var passende rent indholdsmæssigt godt, som supplerings emne til denne opgave. Derfor valgte vi at bruge den som reklame inde på vores hjemmeside, da det var en selvproduceret reklame, hjemmeside og idegrundlag. Reklamebanneret som er inde på vores hjemmeside er en modificeret udgave af logoet på hjemmesiden, som reklamen fører hen til. Den er lavet i grøn, hvilket passer godt med den gennemgående farve på hjemmesiden, dvs. at vores design bliver overholdt. Navnet Grønne Amalie og Verdens bedste kompostbeholder står på reklamen, så man bliver lidt nysgerrig omkring, hvad det mon er for noget. For at få lidt mere aktion på reklamen har vi ind sat et Klik her! tekst med rød skrift, hvilket fremstår rigtig godt eftersom den røde farve er farven grøns kontrastfarve. Dette får reklamen til at blive lidt mere end bare et banner, og giver derved den besøgende lysten til at trykke og læse mere omkring Grønne Amalie. Design Design af hjemmesiden tager udgangspunkt i vores målgruppe. Vores målgruppe stillede vise krav til vores hjemmeside Det er en bred målgruppe, så siden skal være nem at gå til, da man ikke kan forvente alle har lige meget computer erfaring. Skal være nemt at finde den specifikke information man har brug for, da så mange forskellige segmenter, hver især har brug for forskellige informationer, vil der være mange informationer, som nogle af de andre segmenter ikke vil finde interessante. Udover disse 2 krav som vores målgruppe valg stillede have vi selv nogle design krav, som vi syntes ville være passende. 1) Der skal være plads til reklamer, for de firmaer der deltager. 6

7 2) Designet skal holdes i grøn. Krav 1, er at på denne måde ville kommunen eventuelt kunne indtjene reklame penge. Eller at kommunen ville få mulighed får at tilbyde firmaer der deltager reklame som en ekstra ydelse, hvis de gør noget ekstra f.eks. har en professor med der holder foredrag mm. Krav 2, er pga. at den grønne farve er håbets, væksten og det levendes farve. Messens formål er at åbne borgernes øjne, så borgerne bliver mere miljø bevidste, det er i hvert fald håbet, og derfor passer denne farve rigtig godt. Samtidig forbinder man tit miljø og klima med farven, igen spiller den grønne farve godt sammen med vores overordnede tema. Derfor bliver designet hold i grønt. Typografi Når man taler om typografi er der 2 hovedgrupper. Der er antikva, disse skrift typer har fødder. At en skrift har føder, betyder at skriften tykkelse variere, denne skrift type, er et typisk eksempel på en skrift med fødder, her variere tykkelsen. PÅ tryk giver fødderne bedre læsbarhed, fødderne skaber retning i teksten og struktur i teksten. Vi har også en anden type typografi der hedder Grotesker. Det betyder tekst der ikke har fødder, Denne skrift type har ikke føder Her er alle stregerne i bogstaverne lige store, dette. Det er tradition at man på computer skærmen har en skrift type uden fødder, dette har vi også gjort til vores hjemmeside, og derfor er valget faldet på sans serif, som værende vores typografi på hjemmesiden. Produkt udvikling Inden vi gik i gang med hjemmesiden tegnede vi først to modeller. 7

8 8

9 Den første skitse var et meget traditionelt design med menu til højre og reklamer til venstre, med et banner i toppen, og tekst i midten. Skitse to var lidt mere utraditionel, og efter vores mening mere spændende at se på, da alt (Banner, menu, tekst osv.) havde meget plads omkring sig, og gav hvert felt den opmærksomhed der var nødvendig. Men for at finde ud af hvilken vi kunne gå videre med, stillede vi det op i et skema, så vi kunne sammenligne positive og negative sider ved begge: Skitse fordele ulempe Endelig vurdering 1 Det er et traditionelt design, som folk er vant til, og derfor kan forholde sig til. Vi ved hvordan sådan et design kan kodes. Det giver nogle begrænsningen til reklamerne, da de i dette design ikke kan være banner reklamer, som mange webside reklamer består af. Selve hjemmesiden Der bruges for meget plads til menuen og reklamer, da den kommunale hjemmeside ikke er tiltænkt mange reklamekroner, men nærmere indholdet, så er dette design ikke så 9

10 2 Hjemmesiden er splittet op, så hver del får den opmærksomhed der er tiltænkt, og den er delt sådan op, at man kan justere bredde godt mht. hvis eventuelle store billeder fylder mere end tiltænkt dvs. man kan justere siden efter indholdet, og ikke indholdet efter siden. Vi havde ikke så meget erfaring med at kode en hjemmeside med det design, så vi ville lære noget nyt. kan virke meget kompakt, idet det hele er samlet på et punkt, dette giver også begrænset plads til selve tekst materialet. Reklamen får ikke samme opmærksomhed, som i skitse 1, dette går ikke udover almindelig besøgende, men udover eventuelle annoncører. velegnet. Der er fokus på indholdet, som denne hjemmeside jo er lavet for. Det er et spændende overskueligt design. Efter at have lavet skemaet, blev vi enige om at skitse to, var det bedste valg til vores hjemmeside. Nu da vi havde vores overordnet design, begyndte vi så småt på hjemmesiden, og efter lidt programmering så den sådan ud (B1): 10

11 Begge designs er bygget op på næsten samme kodning, den eneste funktion på hjemmesiden, der adskiller sig lidt fra andre er, når man markere en knap på menu linjen, så lyser den op. På B1 var der ikke særlig meget harmoni mellem de grønne nuancer i henholdsvis menu og banner. Dette ændrede vi dog i B2, så hjemmesiden fik et mere roligt look. Implementering Selve hjemmesiden er bygget op af <div> bokse, hvis egenskab bliver defineret i CSS kodningen. Et eksempel på hvordan alle div boksene er samlet i en boks: #SAMLET { WIDTH:700PX; MARGIN:0 AUTO; MARGIN-TOP:5PX; } Denne CSS kode er den som samler alle div boksene, den fortæller hvor bred den skal være, og hvordan margen skal være. De andre div bokse på hjemmesiden er lavet nogenlunde på samme måde. Selve hjemmesiden er også lavet i det klassiske HTML, dog er tekst typen og størrelsen defineret i en CSS kode: p { font-family: "Trebuchet MS"; font-size:.74em; } Font-family er selve teksttypen, og font-size en er selvfølgelig størrelsen. Egentlig er der ikke så meget at forklare om selve HTML kodningen, da det bare de gængse tags som: <hr>, <br>, <p>, <a> osv. 11

12 Hjemmesidens egentlig svære kodning, er nok kodningen til menuen, som ser sådan ud: #nav{ margin: 0 auto; padding: 0; width: 700px; } Dette er selve div boksen. #nav ul { float: left; list-style: none; margin: 0; padding: 0; height: 56px; } Normalt når man bruger koden <ul> er det i det i et sammenhæng, hvor man vil liste nogle ting, men her bliver selve den oprindelige funktion til koden brudt. Der bliver kodet for synlige detaljer som højde, margin osv. #nav ul li { float: left; margin: 0; padding: 0; height: 56px; } Dette minder meget om ovenstående kode, og fortæller egentlig nogenlunde det sammen, denne gang er det bare for selve <li> tagget. 12

13 #nav ul li a { display: block; float: left; width: auto; margin: 0; padding: 028px; color: #128B1C; font: bold 16px/54px "Trebuchet MS"; text-decoration: none; letter-spacing: 1px; } Dette er den egentlige avanceret del af kodningen. Det er her meget af det grafiske sker, som fx at den skal vises som en block. #nav ul li a:hover, #nav ul li a:active { color: #fff; background: #1BCC11; } Denne del giver den grønne farve over menu punkterne, a:hover og a:active gør at når musen er over bliver teksten hvid og baggrunden grøn. Test af produkt Vi havde 4 krav til vores produkt Det er en bred målgruppe, så siden skal være nem at gå til, da man ikke kan forvente alle har lige meget computer erfaring. 13

14 Skal være nemt at finde den specifikke information man har brug for, da målgruppen er så bred, vil der være behov for forskellige information. Der skal være plads til reklamer, for de firmaer der deltager. Designet skal holdes i grøn. For at gøre det muligt at teste disse ting, skal der udarbejdes et spørgeskema. Spørgeskemaet skal udformes så de specifikke ting kan tjekkes. Dog kan krav 3, Der skal være plads til reklamer, for de firmaer der deltager, ikke tjekkes af vores brugere. Dette krav må vi selv teste om er overholdt. For at gøre det nemt at lave et spørgeskema har vi lavet en brainstorm til de forskellige krav, om hvordan de kan testes. Det er en bred målgruppe, så siden skal være nem at gå til, da man ikke kan forvente alle har lige meget computer erfaring. Får at teste sidens tilgængelighed, og teste om der er god interaktion mellem bruger og produkt kunne følgende spørgsmål blive stillet: Er du ny eller erfaren pc bruger? Føler du at det er nemt at bruge siden første gang? Er der funktioner på hjemmesiden der forvirrer dig som førstegangs bruger? Skal være nemt at finde den specifikke information man har brug for, da målgruppen er så bred, vil der være behov for forskellige information For at teste at brugeren nemt kan finde den information han har brug for, kunne følgende spørgsmål blive stillet: 1) Er det svært for dig som førstegangsbruger, at finde den information som du har behov for? 2) Er der informationer som du syntes mangler på hjemmesiden? designet skal holdes i grøn. Dette krav kan opfattes forskelligt, nogle brugere ønsker måske at alt på siden er grønt, når designet skal holdes i disse farver. Andre opfatter det måske som værende grønt, bare farven optræder på siden. Spørgsmålene skal derfor være åbne. 1) Er intentionen om at siden skal holdes i et grønt design lykkedes? 2) Hvis nej, hvad mener du så der kan forbedres? 14

15 Analyse af spørgeskemaets resultater Vi har udlevet vores spørgeskema til 3 personer, en i alderen 12 år. En i alderen 40 år, og en i alderen 60 år. Spørgeskemaerne blev udfyldt på computer, deres svar vil her blive listet op, og analyseret om der skal eventuelle ændringer på vores hjemmeside. 1) Er du ny eller erfaren pc bruger? 13 årig: Ny 40 årig: Erfaren 60 årig: Ny 2) Føler du at det er nemt at bruge siden første gang? 13 årig: Det var nemt at se hvor musen var, da linket blev grønt. 40 årig: Det voldte mig ingen problemer at benytte hjemmesiden første gang, hjemmesiden er lavet i et overskueligt design. 60 årig: Jeg er stadig lidt ny på nettet, men efter kort tid på siden, var den nogenlunde nem at bruge. 3) Er der funktioner på hjemmesiden der forvirrer dig som førstegangs bruger? 13 årig: Nej 40 årig: Nej, den er meget traditionel, 60 årig: Jeg havde problemer med at hente, tidsplanen, kunne jeg ikke. Vidste ikke man skulle bruge et specielt program til det. 4) Er det svært for dig som førstegangsbruger, at finde den information som du har behov for? 13 årig: Nej 15

16 40 årig: Nej, passende menu der nemt leder en til den information man har brug for. 60 årig: Nej 5) Er der informationer som du syntes mangler på hjemmesiden? 13 årig: Nej 40 årig: Nej 60 årig: Nej 6) Er intentionen om at siden skal holdes i et grønt design lykkedes? 13 årig: Ja, syntes siden er meget grøn. 40 årig: Jeg syntes at ideen om det grønne design er lykkedes, siden er ikke fuldstændig grøn (baggrund f.eks. er hvid), men dette ville også kunne gøre siden sværere at læse. Jeg syntes at grøn er den bærende farve. 60 årig: Jeg syntes at den grønne farve går meget igen, og derfor er intentionen overholdt. 7) Hvis nej, hvad mener du så der kan forbedres? Svarende indikere at vores side er nem for mange at finde rundt på, vi havde dog en enkelt bruger, der ikke kunne hente vores pdf filer ned, da brugeren ikke vidste hvad en pdf fil var. Derfor tilføjer vi en forklaring på hjemmesiden, hvordan man anskaffer sig adobe reader, hvis man ikke allerede har programmet, samt hvordan man downloader det. 16

17 Færdigt produkt Det færdige produkt, blev efter rettelser fra spørgeskema et, et produkt der var brugervenligt får flere aldersgrupper og forskellige erfaring indenfor computer. Vores produkt blev herved som ønsket et produkt, der henvender sig til flere målgrupper og segmenter i samfundet. Vores produkt giver relevant information til borgerne i kulløse kommune. Produktet kunne vider udvikles, så der blev lavet en samlet hjemmeside, der kunne henvende sig, til både aktører og deltagere. 17

18 Spørgeskema Bilag 8) Er du ny eller erfaren pc bruger? 9) Føler du at det er nemt at bruge siden første gang? 10) Er der funktioner på hjemmesiden der forvirrer dig som førstegangs bruger? 11) Er det svært for dig som førstegangsbruger, at finde den information som du har behov for? 12) Er der informationer som du syntes mangler på hjemmesiden? 13) Er intentionen om at siden skal holdes i et grønt design lykkedes? 14) Hvis nej, hvad mener du så der kan forbedres? 18