Opgaven. Væsentlighed. Problemstillinger. Browserkompabilitet. Layout. Kvalitetsvurdering. Format. Processer. Komposition og modulopbygning

Transkript

1 Opgaven Opgaven var fiktiv, og gik ud på at lave en side med titlen Husk Hjelmen - hvilket skulle være en underside, til rådet for sikker trafik. I sidens layout skulle vi vise at der var plads til at siden kunne udvides. Opgaven var et samarbejde imellem informationsteknologi og engelsk, og indeholdt dele der var gennemgået i fagene, op til projektet. Der var krav om udpræget dokumentation og papirarbejde. Problemstillinger Der skal være sammenhæng mellem hjemmesiden og den valgte målgruppe, og der skal kunne argumenteres for sammenhængen, og de valg der er truffet. Desuden skal siden indholde tekster på både dansk og engelsk. Layout Simpelt og overskueligt med gode mængder white space og klare farver, der virker ekstra klare, da der ikke er for mange forstyrrende elementer. Grafisk workflow Det er svært at sætte en bestemt alder på, men på det tidspunkt vil der for mange ske et skred i deres holdning til cykelhjelmen. Hjemmesiden kan bruges som højtlæsning for de små, info for de lidt større og noget at referere til, i foreksempel familiediskussioner om emnet, for alle parter. Flowchart-mæssigt er siden også nem at gå til, da navigationsbaren følger med rundt på alle siderne. Væsentlighed Det er væsentligt at oplyse om fordelene ved at bruge cykelhjelm hvis uheldet er ude, og at gøre det på en måde så det ikke virker som en sur pligt. Men når det er sagt, så fortæller hjemmesiden ikke noget, der ikke allerede er ude i det offentlige rum. Browserkompabilitet Siden er testet og konstateret brugbar i Internet Explorer, Mozilla Firefox og Google Chrome. Der er ingen forskellighed i udseendet fra browser til browser. Format I opgaven er der taget udgangspunkt i en skærmopløsning på 24*768 pixels, hvilket svarer til en typisk 17 skærm. Processer Det udprægede krav om dokumentation, mundede ud i fornemmelsen af, at forarbejde er vigtigt for at man kan arbejde effektivt, med at sætte sin hjemmeside op. Kvalitetsvurdering Hjemmesiden oplyser ikke om noget der ikke allerede er ude i det offentlige rum, og den er ikke specielt fancy på nogen måde. Men den er enkel, overskuelig og den viser hvad jeg kunne på tidspunktet hvor den blev fremstillet. Hjemmesiden er uploadet på: Komposition og modulopbygning Der er lagt stor vægt på genkendelse fra side til side, at teksten på den måde bliver rammet ind, og derfor ikke virker så tilfældig. Brugervenlighed Målgruppen var børn fra alderen hvor de lærer at cykle, til alderen hvor de bliver bevidste om forskellen, imellem hvad de selv syntes, hvad deres venner syntes og hvad mor og far syntes.

2 Tanker før fremstilling Brugerundersøgelse i min omgangskreds, angående holdningen til brug af cykelhjelm. Brugerundersøgelsen skal bruges til, at bestemme mig for en måde at angribe emnet på. Kig dig omkring online, og find ud af hvad du selv syntes ser spændende ud, og hvad du tror der er simpelt at lave. Tanker under fremstilling Brugerundersøgelsen pegede i mange forskellige retninger, og kombineret med at jeg ikke selv er cykelhjelmsbruger, angriber jeg emnet med formålet at beskrive og informere, frem for løftede pegefingre. Den tænkte baggrund bliver ikke ført igennem til det endelige produkt. Aldersgruppen er valgt, da emner som brug af cykelhjelm, har størst effekt når den bliver sat tidligt igang. Tanker efter endt fremstilling Det har været en hård omgang at komme igennem projektet. Men når det så er sagt har jeg lært en masse, og er blevet godt rustet til at komme videre med web og Adobe Dreamweaver. Jeg har fået info om- og er blevet rustet til, at komme videre med blandt andet classes, divtags, compounds, images, god kodeetik, less is more, css regler og html koder.

3

4 Index Cykelhjelmen Holiday on bike Cykelferie

5 Index Billeder: farogmor.jpeg logo.jpeg dkflag.jpeg gbflag.jpeg cykelhjelmtegning.jpeg cykelcykelhjelmtegning.jpeg index.jpeg silhouetcykelopacity.jpeg Baggrundsbillede: Skal fylde hele baggrunden uden at lave scroll hverken den ene eller den anden vej. Menu: 1px outline. Sort. (1*26 px) Den menu du er på har en 3px outline. Sort. (3*28 px) Billedmenu: Felterne er 1*1 px. 1 px outline. Rundingen er R: 17. Billederne er place into Cykelhjelmen Billeder: cykelhjelmtegning.jpeg silhouetcykelopacity.jpeg Menu: 1px outline. Sort. (1*26 px) Den menu du er på har en 3px outline. Sort. (3*28 px) Firkanter: Felterne er 1*1 px. 1 px outline. Rundingen er R: 17. Billedet er place into. Firkanterne fortsætter lige så langt som teksten.

6 Grafisk workflow Holiday on bike Billeder: gbflag.jpeg silhouetcykelopacity.jpeg Menu: 1px outline. Sort. (1*26 px) Den menu du er på har en 3px outline. Sort. (3*28 px) Firkanter: Felterne er 1*1 px. 1 px outline. Rundingen er R: 17. Billedet er place into. Firkanterne fortsætter lige så langt som teksten. Misc: Enten her og/eller under siden cykelferie indsætter jeg en animeret pil, der peger på en video der fortæller historien om Christian i billeder. Cykelferie Billeder: dkflag.jpeg silhouetcykelopacity.jpeg Menu: 1px outline. Sort. (1*26 px) Den menu du er på har en 3px outline. Sort. (3*28 px) Firkanter: Felterne er 1*1 px. 1 px outline. Rundingen er R: 17. Billedet er place into. Firkanterne fortsætter lige så langt som teksten. Misc: Enten her og/eller under siden Holiday on bike indsætter jeg en animeret pil, der peger på en video der fortæller historien om Christian i billeder.

7 Fonts Jeg har ikke skriften, så den er udelukket Geneva sglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls sglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls sglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls sglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls sglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls slrhsrlg s gerlhge kfgsglwh wl hwlrthwl hfslh wljhg lrhgwrlhgrlghrlgls px Let læselig brødtekst. Websikker font. God mængde luft til målgruppen. h1: 24 px h2: 18 px Brugte farver Ideen er at baggrunden skal være faded, og billederne skal have klare farver med hensyn til målgruppen. Disse farver er eksempler fra de valgte billeder. R: 255 G: 217 B: 188 #: ffdbc R: 180 G: 35 B: 38 #: b42326 Baggrundsfarver R: 250 G: 221 B: 17 #: faddb3 R: 217 G: 201 B: 178 #: dcb2 R: 248 G: 220 B: 180 #: f8dcb4 Forgrundsfarver. R: 66 G: 75 B: 6 #: 424b74 R: 237 G: 74 B: #: ed4ac1 R: 152 G: 247 B: 23 #: 8f7ef R: 178 G: 178 B: 178 #: b2b2b2 R: 25 G: 238 B: 24 #: 1ee18

8 Resultat