Opgave og rapport er udarbejdet af: Robin Staley, Christina Aagerup, og Kamilla Christiansen Den 4.Dec.2009 TR09MUL02-4. Projekt
Indholdsfortegnelse Indledning... Side 1 Tidsplan... Side 2 Designvalg... Side 3 Farvevalg... Side 4-5 Logo... Side 6 Flowchart... Side 7 Kode... Side 8 Skærmdumps... Side 9 Procesevaluering... Side 10 Litteraturliste... Side 11
Indledning. Vi har på baggrund af det fiktive jazzband Giant Steps, fået til opgave at skabe et funktionelt opbygget website, der skal præsentere bandet bedst muligt. Formålet med dette projekt er at opbygge et website i Dreamweaver samt lære at bruge html, xhtml og css. Dog er det vigtigste, at vi får lavet en struktur og navigation rundt på sitet der er hensigtsmæssigt. hvilke elementer vi associerede med Jazz, og som skulle fungere som vores udgangspunkt for websitet grafiske udtryk. Vi vil gerne skabe et website, der har en enkel struktur i udseendet, men samtidig indeholder nogle grafiske elementer som skaber lidt humor og sjov. Musik er en kreativ genre, derfor var vi enige om at websitet ikke skulle være for stramt i det grafiske udtryk, men simpelt og enkelt struktureret i navigationen. Vi valgte derfor at starte ud med en brainstorm, hvor vi fik defineret
Tidsplan. Giant Steps Den 24/11 Vi finder en font til vores navn, samt til brødtekst og faner. Vi aftaler at lave et eksempel på et layout til den 25/11. Den.19/11 Vi satte os sammen og lavede en brainstorming for at komme frem til et grafisk udtryk der ville passe til websitets udseende. Vi blev hurtigt enige om at de elementer man oftest associerer med JAZZ skulle med i layoutet. Det vil sige saxofonen, og andre musik-elementer der kendetegnes ved blandt andet jazz. Desuden blev vi enige om hvilke sider vi skulle have udover forsiden. Vi aftaler, at alle går hjem og laver et eksempel på et logo ud fra vores brainstorming, og begynder at lede efter billeder til websitet galleri. Den.25/11 Vi bliver enige om et layout og arbejder videre på det samt finpudser det logo vi er kommet frem til. Den 26/11 Vores logo er færdigt og skabelonen til websitet er færdigt. Vi ville gerne have haft en dialog med en lærer angående den fiktive tekst på hjemmesiden, da vi er i tvivl om det bare skal være mumletekst eller om der skal bruges tid på at lave en fiktiv historie. Den 27/11. Vi uddelegerer opgaver til weekenden. Blandt andet får vi aftalt, hvem der skriver hvad i rapporten til mandag. Vi forsøger så småt at få sat i nogle ting ind i Dreamweaver dog uden den store succes. Vi føler alle at vi ikke har det fornødne kendskab endnu. Den 30/11. Vi har over weekenden kigget lidt tutorials igennem og er kommet en smule i gang med Dreamweaver. Der er stadig lang vej endnu dog. Rapporten er godt i gang. Vi har fået skrevet indledning, flowchart og lidt om farvevalg. Vi mangler stadig et par afsnit. Den 2/12 Rapporten er næsten færdig. Vi mangler at få skrevet lidt om vores logo/designvalg og en procesevaluering. Vi begynder at få sat vores layout/mock up vi har lavet i Photoshop og illustrator op i Dreamweaver. Den 3/12 Vi har fået lavet websitet færdig med links og billeder. Rapporten er færdig. I morgen skal vi have puttet tekst, galleri og koncertplan(tabel) i websitet. Den 4/12 Rapporten og website færdig! Vi afleverer kl. 14.00
Designvalg. Vi har valgt at holde vores website i en kompakt form som er let overskuelig. Bredden er 800px og højden 600px for at vi med nogenlunde sikkerhed kan vide at websitet er kompatibelt med langt de fleste skærme. Alt relevant indhold er omgående tilgængeligt uden brug af en scrollfunktion, som vi har udformet websitets mål for totalt at undgå, men for at balancere websitets størrelse til de forskellige skærme det vil blive vist på, har vi tilføjet en margen til højre og venstre for indholdet; Dermed føler vi at at websitet kommer til at tage sig bedst ud, da intet vil blive overflødigt strukket, og på selv den breddeste skærm vil der ikke opstå en bred, kedelig stribe på en enkelt side at sitets indhold. Bredden er 800px og højden 600px for at vi med nogenlunde sikkerhed kan vide at websitet er kompatibelt med langt de fleste skærme. Jazz henvender sig i højere grad end mange andre musikgenrer til et ældre publikum, og vores erfaring fortæller os at dette publikum oftere er uvante til brug af internettet. Derfor har vi undladt at at tilføje krævende indhold på sitet, som f.eks. Flash filer, der kunne resultere i en downloadproces for nogle brugere, og gøre websitet langsommere. At websitet loader hurtigere har også relevans for dets generelle popularitet, da vi derved minimere chancen for at en utålmodig bruger bevæger sig væk fra sitet i den tid som det tager at uploade på skærmen. Skrifttypen har vi valgt på grundlag af hvad der er letlæseligt på internettet. Typerne er Verdana og Arial som begge er meget rene i formen, og ikke vil udtværes på en skærm med dårlig opløsning.
Farvevalg. Under vores brainstorm kom vi også hurtigt frem til hvilke farver der skulle være konsistente på vores website. Vi mente alle at en mørkeblå tone i baggrundsfarven, ville være optimal, da tankerne faldt på den mørkeblå nattehimmel, som ofte bliver associeret med jazz i det filmiske udtryk. Et andet element man ikke kan undgå, når man tænke på jazz er saxofonen. Vi valgte derfor en farve med en gul tone, der skulle repræsentere saxofonens farve i blandt andet logoet og bandets navn Giant Steps. Der udover har vi valgt sort og hvid som de sekundære farver på siden får at skabe noget balance, blandt andet til skrift, da sidens grafiske udtryk er meget mørkt.
BLÅ H: 243 S: 93 B: 23 R: 7 G: 4 B: 58 #07043a GULD H: 39 S: 74 B: 88 R: 224 G:166 B:58 #e0a63a HVID(brækket) H: 240 S: 3 B: 85 R: 212 G: 212 B: 218 # d4d4da
Logo. Vi har valgt at logoet skulle være i den valgte gule tone. Udover det, har vi valgt en blød font, GESSE- LE, da temaet er jazz og vi synes musik indikerer noget i forandring og bevægelighed. Derfor ville vi prøve at ligge vægt på jazz elementet i navnet og ikke så meget navnet i sig selv. Selve vores logo består af den traditionelle saxofon som man ikke kan undgå, at tænke på når man taler om jazz. Vi ville gerne forene logoet og navnet på en måde så det fremstod som en sammensmeltning af to dele, ergo en form for symbiose mellem bandet Giant Steps og musikken jazz. Giant Steps
Website Forside Galleri Kontakt Flowchart Da Giant Steps ønskede et overskueligt website, har vi holdt designet til at indeholde alle kategorier på websitet, så de er konstant tilgængelige og lette at navigere imellem. Brødteksten er omgivet af menuerne og brugeren af websitet kan dermed bevæge sig omgående til en ny kateogi uden at følge et kompliceret mønster. Koncertplan
Kode. </div> <!--Vi har lavet vores linieafstand div tag til en class fra en id, da vi skulle bruge den mere end én gang på samme side. På den måde kan den tilgås flere gange på samme side og andre sider.--> <div id= biografitekst2 ><div class= linieafstand ><h2> </h2>ved Copenhagen Jazzfestival 2007, fik folk med jazz i blodet endelig øjnene op for deres talent og de tog dem med storm. Dette resulterede i deres første officielle single udgivelse Believe og siden da har populariteten for deres musik været konstant stigende. </div></div> <div id= sidemenu ><div id= menu > <!--Da afstandene mellem tangentgrupperne er uproportionelle måtte vi lave kodningen i html fremfor css, for at opnå den korrekte afstand.--> <div style= padding-top: 53px; padding-left: 10px; ><a href= biografi.html >Biografi</a></div> <div style= padding-top: 63px; padding-left: 10px; ><a href= discografi.html >Discografi</a></div> <div style= padding-top: 42px; padding-left: 10px; ><a href= koncertplan.html >Koncertplan</a></div> </div> </div>
Skærmdumps. Eksempler fra vores website: Forside og discografi. Website adresse: robin.hgamedia.com
Procesevaluering. Målet for dette projekt har, med al tydelighed, hovedsagligt været at gøre os bekendte med Dreamweaver og CSS, da vi fik stillet opgaven at bygge et website. I vores gruppe på 3 mand har ingen af os tidligere beskæftiget os med kodningsarbejde o.lign., og derfor var vi på forholdsvis bar grund da projektet begyndte. Skønt vi alle har gjort os bedre bekendt med Dreamweaver og CSS i den tid projektet har varet, deler vi en fælles følelse af mangel på viden omkring værktøjerne, og har undervejs måtte hente hjælp udefra, da vores undervisning på skolen desværre ikke har været tilstrækkelig til at dække vores behov. Det har været et stressende projekt pga. fravær i gruppen, og kort tid til at få samlet alle ender. Havde vi kendt til værktøjerne vi har arbejdet med, ville tiden vi fik stillet have været tilstrækkelig, men ved siden af undervisningstimer som omhandler andre emner end de som vi har manglet hjælp til, bliver det utroligt svært at overskue alt arbejdet og udføre det optimalt, og dette kompromiserer indlæringen. Herudover har det været spændende at arbejde med netop dette projekt, og sværhedsgraden har bestemt været udfordrende. Vi er tilfredse med vores projekt og føler os tilpasse med det endelige resultat, som vi er enige om er blevet udmærket på trods af vores nuværende knapt så overvældende viden på området.
Litteraturliste. Alle billeder er venligst udlånt fra www.flickr.com