Gruppe 16: Allan, Jeppe og Janne Odense, den 26.novemver KULTURMASKINEN. Style & Experience Projekt 2. Institution MMD

Transkript

1 KULTURMASKINEN Style & Experience Projekt 2 Institution MMD Vejledere: Mette Agerbæk, Kent Karlsson, Hans Peter Kjær, Karen Malene Andreasen og Merete Østergaard - 1 -

2 Indholdsfortegnelse Introduktion Problemformuleringen Kommunikation Målgruppe Idékatalog Brugerprofil Brugerscenarie: Mission statement Design Pop art Modernisme Eksempel på website Udformning af vores website Forside Undersiderne Designprincipperne Brugerens behov og ønsker Virksomhed Observationsbaseret research & konceptudviklingsmetode Tidsplan Projektleder/ansvarsfordeling Projektforløbet Læringsstile Positivt/negativt Interaktion Kode Kommentarer Konklusion Litteraturliste Appendix

3 Introduktion Denne rapport tager udgangspunkt i hjemmesiden lavet til Kulturmaskinen. Kulturmaskinen er hele Odenses kulturelle legeplads. Der er mulighed for at tage til koncerter både indendørs i Magasinet eller udendørs i Farvergården. Desuden er der også mulighed for at besøge en af alle værkstederne i hovedbygningen eller snuppe et stykke kage i caféen. Og er man ikke den bedste med en symaskine, så er der professionel hjælp at hente i alle værkstederne. Alt dette og meget mere kan ses på hjemmesiden, hvor det at sidde foran computeren bliver mere levende og inspirerende. Derfor er formålet for os ikke bare at skabe en hjemmeside, men derimod et medie, hvor der kan hentes informationer omkring Kulturmaskinen i alle henseende. Målet er desuden at skabe en legeplads for de nysgerrige, og et bibliotek fyldt med oplysninger, der giver indsigt i Kulturmaskinen daglige gang. Om det er koncerter, stand op eller værksteder der er brug for, så er dækker hjemmesiden alle informationer eller spekulationer der skulle være. Problemformuleringen I dette projekt har vi fået til opgave at skulle gøre kulturmaskinens hjemmeside mere indbydende, samt komme med forslag til nye aktiviteter, som skal tiltrække et større publikum. For at opnå et sådan resultat er vi nødt til, at stille os selv nogle spørgsmål. Spørgsmål der tager udgangspunkt i vores research og analyse. Hvem bruger Kulturmaskinen og, hvilke interesser har disse. På den måde kan vi opstille en målgruppe og dertil undersøge mulighederne for fange deres opmærksomhed. Men, hvad kræver målgruppen, hvad forventes der, og hvad kan vi tilbyde med vores evner og idéer? Kreativitet er nøgleordet og for at opbygge en ny og spændende hjemmeside, som både er inspirerende, informerende og sansepirrende kræver det, at vi levere det bedste fra alle vores sider. Et kompromis mellem det utraditionelle og modernismen, der giver os mulighed for at skubbe vores grænser og udvide vores horisont

4 Kommunikation 1.Udforskende research og analyse Målgruppe Til dette projekt har vi valgt at fokusere os på de unge, som vi definerede fra år. Vi vil opnå med dette projekt at kulturmaskinen for et større publikum. Vi ser potentiale i de unge. Vi vil forbedre deres sociale kommunikation og kræve det kreative ud af personerne baseret på vores oberservationer og research ( se s. 12 observationsbaseret research) Vi har prøvet at lave en visuel collage af nutidens unge. Det er vedlagt nedenfor som bilag nr. 3. Det er lavet i pop art-stilen. Idékatalog Vi har vedlagt et idékatalog med det formål, at præsentere vores ideer til hvordan besøget og oplevelsen af Kulturmaskinen kan optimeres hos vores målgruppe. Vores valg var at tage udgangspunkt i segmentgruppen de unge. Vores fokuspunkt var, at de unge bliver mere interesseret i kulturmaskinen og for lyst til at være med i de forskellige aktiviteter rundt omkring. Så vi vil lave et nyt website til kulturmaskinen. Det vi håber der forbedres med det, er at kulturmaskinen får mere opmærksomhed og dermed et større publikum i hverdagen. Vi har tænkt på, at give kulturmaskinens nye website en interessant forside, som indbyder til at besøge websitet og selve institutionen. Vi bruger kulturmaskinens logo, som de i forvejen allerede anvender, og sætter det ind i vores sidelayout. Derudover sætter vi nogle spændende flahelementer ind bag en bysilhuette, som gør det spændende. Dermed vil vi opnå, at unge for lyst til at se sidet og blive ledt hen til tekst og informationer om kulturmaskinen. Måske finder de kann af, at de godt kunne lave en julegave til mor, far eller kærsten på kulturmaskinen. Det ville i hvert fald være en julegave, der så hurtig ikke ville blive glemt. Vi prøver på, at lave det nye website til kulturmaskinen innovativt og spændende for alle forbrugere og interesserede. Vi reflekterede i gruppen over trappo ville være smart, hvis man skabte nye værksteder og aktiviteter kulturmaskinen kunne tilbyde. Det skulle gerne være noget for enhver smag. Det ville være super, hvis man opretter et malerværksted, pyjamapartys, kor-arrangementer m.m

5 Vi har valgt i denne opgave, at anvende følgende teoretiske metoder til at analysere produktets/konceptets parametre. Vi har brugt mindmap for at vores ideerne kom klar til udtryk. Mindmappen illustrerer fint hvilke tanker man har tænkt. Hvilke der var brugbare og hvilke ikke. Vi har lavet mindmappen ved hjælp af et program som hedder mindnode 1. Det er frit tilgængelig. For at få styr på ideer har vi brugt mindmap. (bilag 10) Brugerprofil Anne- Sofie Lillesø 22 år Studerende negot Single Ingen børn Bor i en lejlighed i Odense C Interesser: Musik, dans Sven Jørgensen 30 år Ingeniør Gift med Henriette Jørgensen, ingeniør 2 børn Bor i en villa i Odense M Interesser: Musik, sport og familien 1 Mindnote: Et program der hjælper med at lave mindmaps

6 Brugerscenarie: Anne- Sofie Lillesø gik ind på vores website og blev helt begejstret af websitets forside og dens animationer. Hun skulle se flere minuter på forsiden inden hun gik videre til undersiderne. Hvad hun måske undrede sig lidt over var at musikken spillede igen og igen, så hun kunne næste ikke koncentrere sig på selve indholdet. Undersiderne er lavet i modernistisk stil, så det hver enkelt objekt har sind plads og står klart og overskuelig på siden. Anne- Sofie havde ikke nogen problemer med at finde rundt på siden. Så websitets navigation fungere fint efter hendes mening. Efter hun havde set det spændende website gik hun til kulturmaskinen og deltog i flere workshops. Sven Jørgensen besøgte websitet og så slet ikke ved første blik, at der skete noget på forsiden. Han gik hurtig til undersiderne for at få viden om åbningstider og andre informationer han gerne vil vide noget om. Først bagefter da han landede på forsiden igen, log han mærke til effekterne. Han blev fastineret. Så han hentede sine børn og viste dem hvad der sker hvor noget på siden. Efter en tid lavede familien en udfulgt til kulturmaskinen. Mission statement Vores mission med websitet er, at få Kulturmaskinen til at nå kann til et større publikum. Målet er at ramme målgruppen, og få dem overbevist om at Kulturmaskinen tilbyder masser af sjove og hyggelige aktiviteter i hele Odense. Vi vil med denne hjemmeside ramme målgruppen på alle sanser. På den måde vil vi skabe en oplevelse, der er bemærkelsesværdig og underholdene. Samtidigt skal sitet bestå af tekst og informationer, der gør det muligt for brugeren at følge med i, hvad der rører sig på stedet. Sitet skal altså være en oplevelse for sanserne, der rammer målgruppen specifikt. Derudover skal sitet være overskueligt og nemt at navigere rundt på. Desuden skal det være nemt at tilegne sig viden omkring Kulturmaskinen

7 Design Research og analyse af den givne stil Vi har valgt at arbejde med pop art stilen på websitet til kulturmaskinen. Derudover har vi valgt at arbejde med modernistiske træk iforhold til vores undersider. Det har vi gjort, fordi vi opfattede det som mere struktureret og klar for forbrugerne. Der er en nemmere tilgængelighed for unge og lidt ældre personer på grund af den klare opbygning/ vejledning af siden. Så det har vi valgt helt bevidst på grund af de fordele vi lige har nævnt. Pop art Pop art-stilens karakteristika er, at der bliver brugt abstrakte elementer og former. Man bruger ofte tegninger frem for billeder. Billederne i pop art giver ofte anledning til at stoppe op og se hvad der er og hvad der sker på selve billedet. Man kann ofte ikke se på første blik hvad der befinder sig i hele billedet 2. Modernisme Modernismen er en gammel stilart, der i begyndelsen af 1900-tallet adskilte sig fra kunsten. Overgangen til et samfund med masseproduktioner og stor industri stillede store krav til kunstarten. Modernismens karakteristika er, at det hele har en mening i hvordan det står. Der må kun bruges rene farve. Man kan specialisere det idet man går ud fra grundfarverne, som er gul, cyan og magenta. Figurene i modernismen er bygget op efter firkanter eller cirkler. Firkanter bør ikke roteres andeledes end 90 og 45 grader. Det vil desuden være gennemgående på hele billedet. Set i website henseende, så skal sitet være det man kalder stilrent. Det betyder at information skal være let tilgængeligt uden der sker for meget på siden. Det betyder også at fonte skal skrives i Sans Sherif og holdes på et minimum af skriftstørrelsen. Man kigger også efter opstillingen af menu, billeder og tekst i forhold til hinanden. Her kræves der en klar margin mellem disse, for ikke , Pop art, hentet d ,

8 at blande indhold. Derudover ser man på om der er nogle monotome rum på siden. Det vil sige steder, hvor øjnene kan hvile 3. Eksempel på website Websitet bombastisk.dk 4 bruger en gennemgående modernistisk stil og er sat op efter traditionelle dyder. Øverst er der en enkel menu bar, der guider dig gennem siden. Hele sitet er bygget op omkring en hvid baggrund med sort skrift, som skaber ro og orden på sitet. Det giver desuden mulighed for, at brugeren hurtigt kann få et overblik over siden, som det kann ses på bilag 1. Derudover er alt skrift på sitet venstre stillet, bortset fra headeren på siden, der står i venstre side. Det gør at ens øje fange menuen før overskriften, og at man hurtigt kann komme i gang med det man vil. Modernistisk set er sitet velfungerende. Sitet er, som sagt, bygget op omkring to farver sort og hvid, hvor den hvide baggrundsfarve giver masser af luft og monotont rum uden tekst. Derudover er alt holdt i vertikale linjer, der klart adskiller teksterne. Skriftstørrelsen er holdt i få forskellige størrelser, og er kun til formål at formidle 5. På forsiden bliver der brugt en abstrakt figur, der medvirker til at fange brugerens opmærksomhed. Den er ikke særlig præget af modernistiske træk, men derimod er der en gennemtrængende popart karakteristika. Herunder abstrakte elementer og grafiske tegninger, som skaber det genkendelige en cirkel, som kann ses i bilag 2 6. Cirklen kann man lege med og rulle frem og tilbage. Mens indholdet skifter farve og udseende, alt efter, hvor man placere musen. Cirklen indeholder billedet af en mand, samt forskellige andre billeder, som skildrer en gennemgående farvestruktur ulig modernistiske træk , Modernism, hentet d , , Modernism, hentet d , , Pop art, hentet d ,

9 Udformning af vores website Udformningen af vores hjemmeside tager udgangspunkt i den research vi har foretaget os. På baggrund af researchen har vi udviklet en visuel collage (bilag 3), der viser, hvilke tanker og idéer vi havde omkring den målgruppe vi arbejder med. På denne måde kunne vi skabe os nogle tanker over, hvilke elementer vi skulle have med på hjemmesiden. Udformningen og valget af virkemidlerne på siden er derfor et resultat af den research vi har udformet på målgruppen. Den overordnede stil for hjemmesiden er modernisme. Vi tager udgangspunkt i at Kulturmaskinen har brug for at formidle vigtige informationer på visuel og sansepirrende måde. For at opnå det bedst designmæssige resultat, har vi benyttet os af både flash, java og html. På denne måde kunne vi opnå det bedst mulige kompromis mellem visuelle effekter og tekstbaseret information. Matcher stilartens karakteristika Forside Indledningsvist har vi forsøgt os med en forside, der ikke er kendetegnet modernisme. Grunden til at vi afviger fra stilarten er, at vi blev kann om at lave en forside, der skulle være levende og iøjefaldende. Dette fremkommer både af lyde og af visuelle effekter lavet i flash, samt skitser af forskellige figurer/bygninger. Dette gør hele oplevelsen levende, og at man fornemmer et univers. Endvidere har vi valgt at genbruge Kulturmaskinens design (Bilag 4), hvilket ikke er kendetegnet modernisme. Det har vi gjort af hensyn til brugergenkendeligheden, hvilket gør det muligt for tidligere brugere at genkende Kulturmaskinens design. Yderligere giver det hjemmesiden en visuel afvigelse af kontrasterne sort og hvid. Vi benytter os primært af hårde kontraster mellem byen, i bunden af billedet, den hvide baggrund og designfarverne/elementerne fra Kulturmaskinen (bilag 5). Farverne på designet af Kulturmaskinen, finder vi igen på vores hjemmeside, og er de eneste farver, som skærer igennem de sorte og hvide kontraster. Det skaber et godt helhedsindtryk, og en fornemmelse af orden. Farverne bliver brugt som en ordensfaktor, der gør det muligt for brugeren at beholde både overblik og fokus. Kompositionsmæssigt har vi, indledningsvist, valgt at centrere teksten for at give brugeren en anderledes indgangsvinkel på hjemmesiden. Den centrerede tekst og menu afviger fra den modernistiske stil vi har pålagt resten af designet. Grunden til vi har valgt dette er, at forsiden skal virke som en oplevelse, i lige så høj grad som den skal give overblik

10 Overskrifter KULTURMASKINEN hænger over byen som et symbol på at Kulturmaskinen ikke blot er en institution, men også et samlested for hele Odense, som er symboliseret i byen som overskriften hænger over. Undersiderne Det generelle design for hjemmesiden er modernistisk opsat. Der bliver brugt den samme font hele vejen gennem designet, hvor antal skriftstørrelse er blevet holdt på et minimum. Desuden er linjerne mellem tekst og menu klart adskilt, så det er let og nemt tilgængeligt. Siden er overordnet sat op af firkanter og cirkler. Firkanterne bruges til at skabe en orden, mens cirklerne bliver brugt design- og navigationsmæssigt. Derudover er undersiderne ventre stillet, som man følger læseretningen. Dette giver en struktur, som brugeren kann genkende. Designprincipperne Farvemæssigt ar hjemmesiden holdt i 6 farver: mørkeblå, lyseblå, pink, grøn, sort og hvid. Farverne vi valgte forholder sig til det analoge farveskema. Farverne er dog mindre lig hinanden end det man vil se normalt. Det gjorde vi, fordi vi gerne ville bruge farverne fra Kulturmaskinens design. Tekst på undersiderne er stillet korrekt op i forhold til overskriften. Det samme gælder billederne, der enten står på samme linje med teksten eller i en boks for sig selv i højre side af vinduet (bilag 6). Alt på hjemmesiden er sat op efter det gyldne snit, da det giver en naturlig ro hos brugeren. Øjet fanger derfor hurtigt de væsentlige elementer på hjemmesiden 7. Hjemmesiden følger altså både kompositions- og farvemæssige principper omkring design af hjemmesider. 7 Robin Williams & John Tollett, , The non-designer s web book Third edition, 336 sider, Peachpit Press, 1249 Eighth Street, Berkeley

11 Brugerens behov og ønsker Hjemmesiden imødekommer brugerens ønsker på flere forskellige måder. Brugerens ønske om at opnå en viden på hjemmesiden gøres især tilgængeligt på undersiderne, som er indrettet efter brugervenlighed og med øjemål at give brugeren alt den information der ønskes. Dette er gjort ved hjælp af en modernistisk stilart. Brugergruppens behov for sansepirrende effekter realiseres allerede på forsiden, hvor både høre- og synssansen bliver udsat for lidt af hvert. Brugeren får en oplevelse af at være en del af en hjemmeside, hvor der ikke kun er nemt tilgængelige oplysninger, men også effekter og visualiseringer, der giver en fornemmelse af kontrol over sitet. Virksomhed Observationsbaseret research & konceptudviklingsmetode og gruppeproces Observationsbaseret research & konceptudviklingsmetode Vores gruppe fik en god oplevelse af besøget på kulturmaskinen. Det gav os inspiration til vores projekt. Institutionen giver enhver chancen for at udleve sig kreativ i den ene eller den anden retning. Man skal bare beslutte sig inden for de 4 værksteder de har: Lerværksted og Smykkeværksted, Tekstilværksted og Mediegrafisk værksted. Man kann vælge helt frit, om man vil lave nogen smykker eller om man vil arbejde med noget andet. Det er helt op til en selv. Man har ikke brug for speciel kendskab til et program eller en teknik, for man for nemt og venlig hjælp af medarbejderne på stedet, der står én tilrådighed og hjælper hvor de kann. Vi har tænkt os, at bruge et citat af en person som besøgte kulturmaskinen fornyligt og fik et første indtryk af kulturmaskinen. Det har hun fortalt os; Jeg har været på Kulturmaskinen sammen med mit multimediedesigner studie og er blevet overvældet af alle de inspirerende indtryk og den mangfoldighed der hersker på stedet. Ikke uden grund kaldes Kulturmaskinen også for byens kulturelle legeplads eftersom der er mulighed for personlig og kreativ udfoldelse i de mange værksteder samt store fælles arrangementer såsom koncerter eller intime stunder i caféen

12 Den gode stemning er også med til at gøre stedet til et specielt sted, som takket være de ansatte er med til at skabe det dejlige og behagelige miljø. Alt i alt kann jeg ikke sige mere end, at jeg virkelig har nydt et par dejlige timer fyldt med oplevelser og inspiration til egne projekter og kann med varmt hjerte anbefale alle at tage og snuse til Kulturmaskinens spændende tilbud! Janne, multimediedesign studerende ved SDE, 1. Semester Vi kann konkludere, at hun har nydt besøget på kulturmaskinen og vil vende tilbage for at deltage i en eller anden form for aktivitet. Derudover har vi lavet en fotodokumentation af vores besøg på i kulturmaskinen. Vi har været igennem alle værksteder og kunne samle inspirende indtryk til projektet. På grund af det har vi lavet en fotodokumentation om de kulturmaskinens rum og steder, som man kann se nøje på i bilag nr. 8. Der hersker en positiv energi på billedet og dokumentationen. Projektstyringsforløbet/Evaluering af gruppeproces Tidsplan Vi har opstilt på mandag en tidsplan (bilag 9) over projektforløbet. På tidsplanen kann der ses hvordan vi har planlagt at begynde med emnet og på hvilken deadline noget skal være færdig. Projektleder/ansvarsfordeling Vi har valgt Janne som vores projektleder. Hun holder styr på tingene, så vi ved til hvornår de enkelte dele skal være færdige og, at vi for alle væsentlige ting med ind i rapporten som det kræves. Så projektlederen har ansvaret for at alle disse punkter. Endvidere fordeler projektlederen opgaver til hver enkelt, som skal ordnes. Projektlederen holder alle tråde i hånden og sørger for at de sidder til sidst på det rigtige sted. De andre gruppemedlemmer søger for, at opgaverne bliver lavet som det blev planlagt af projektlederen. De har selvfølgelig næsten samme stemmeret som projektlederen har

13 Jeppe står for designet af hjemmesiden og de øvrige elementer. Han laver en mock-up af hjemmesiden, så vi er klar over, hvordan det skal se ud. Da det er ham der står for designet, er det også ham der skriver design afsnittet i rapporten. Programmering af hjemmesiden og flash-videoen tager Allan sig af. Jeppe er dog også med til en del af programmeringen, så vi kan være sikker på, at det kommer til at se ud som designet. Interaktions afsnittet i rapporten skrives naturligvis af Allan, da han tager sig af det meste af programmeringen. Projektforløbet I ugens forløb har vi (gruppe 16: Janne, Allan og Jeppe) arbejdet sammen om at lave en hjemmeside til Kulturmaskinen. Gruppen har fungeret udmærket på trods af vores forskelligheder. Arbejdet har fungeret til alles tilfredsstillelse og der er blevet knoklet fra alle sider. Under researchen lærte vi hinanden at kende, og vi fik hurtigt peget trap på, hvilke styrker hinanden besad. Netop vores styrker passer godt sammen, da vi dækker alle inden for multimediedesign. Det gjorde os i stand til trapport tage beslutninger, og komme videre med arbejdet. I idégenererings fasen kom alle med gode bud og der blev diskuteret, kritiseret og accepteret. Vi havde alle sammen masser af gode idéer, men vi blev hurtigt kann omkring vores projekts fremtid. De første par dage i udviklingsfasen delte vi os op i 2 grupper, hvor Allan, alene, for det meste tog sig af programmeringen. Det gav Janne og Jeppe mulighed for at tage udgangspunkt i designet, som Allan undervejs fik programmeret i Flash eller HTML. Det gav en løbende udvikling på tværs af fagene, hvilket gav os en godt overblik over processen. Sidst på ugen delte vi os op hver for sig for at få skrevet på rapporten. Vi delte os kann flere gange i løbet af dagene, hvorefter vi samledes for at gennemlæse og diskutere hinandens arbejde. Læringsstile Under beslutningstagningerne har alle haft indflydelse, dog på hver sin måde. Jeppe har gerne haft nogle tanker, som han har brændt inde med, hvilket ofte resulterer i en hel masse både gode og dårlige idéer. Jeppes aktivistiske tilgang er nogle gange lidt hastig og mindre klar. Det gør at idéer nogle gange bliver sat i værk inden de er gennemtænkt og diskuteret. Desuden gjorde Jeppes

14 pragmatiske tilgang af og til, at arbejdet blev mere ensporet, da han har tendens til at insistere på egne idéer. Janne er en mere blandet type, som kommer med rigtig mange gode idéer, og er dygtig til at komme med respons på andres arbejde. Det gjorde blandt andet at arbejdet blev mere gennemtænkt under idégenereringen. Jannes teoretiske og reflektoriske tilgang til processen fik desuden holdt Jeppe i snor. Det gav også gruppen en mulighed for at få overblik over arbejdet. Denne evne til at holde struktur på arbejdet gjorde også at Janne blev udnævnt til projektleder. Allan har haft en ren reflektorisk tilgang til udviklingsprocessen. Allan har været rigtig god til at forklare idéers betydning og muligheder, fremfor bare at gå i gang. Det har betydet at arbejdet er blevet mere gennemtænkt og teoretisk. Den reflektoriske læringsstil har dog gjort at mange af Allans egne idéer ikke er blevet sat i værk, men derimod snakket væk af Jeppe og Janne. Derimod er han utrolig effektiv mht. Arbejde. Han er god til at koncentrere sig lange perioder af gangen, hvilket betyder at der bliver lagt meget arbejde bag. Positivt/negativt Hele projektforløbet taget i betragtning, så har gruppeprocessen fungeret godt. Vores evner matcher hinandens rigtig godt, og alle har været ambitiøse omkring projektet. Derfor er der blevet lagt et stort stykke arbejde bag. Og takket være en struktureret projektleder har man ikke mistet overblikket, og arbejdet er blevet gjort efter tidsplanen, uden at det er gået kann over arbejdsmoralen. Det er helt sikkert nogle ting, som er værd at videreføre til andre projekter. Arbejdet blev delt kann de sidste par dage, og det har haft sine ulemper. Blandt andet har det været svært at følge med i hinandens arbejde, og det har måske gjort trapporten er blevet mindre sammenhængende. Nogle gange er arbejdet gået i stå, i forsøg på at gå i dybden med specifikke elemeter. Det har kostet en del tid, og har medvirket til at nogle emner er mindre fyldestgørende end andre. Fremover kann det have store konsekvenser for det færdige projekt. Det vil være punkter, der burde arbejdes på til et kommende projekt

15 Interaktion Kode Et kodeeksempel som vi er stolte af: <center><img id="logo" src="images/navn.png" /> <br /> <p class="menu"> </p> </center> <a href="aabningstider.html">åbningstider</a> <a href="nyheder.html">nyheder</a> <a href="kalender.html">kalender</a> <a href="cafe.html">café</a> <a href="vaerksteder.html">værksteder</a> <a href="rum.html">rum OG STEDER</a> <a href="om.html">om KULTURMASKINEN</a> <a href="links.html">links</a> <a href="kontakt.html">kontakt</a> Grunden til at vi er stolte af denne kode, er at vi på denne simple måde fik lavet menuen på vores forside. Man sætter normalt teksten op i punktopstilling med <ul> og <il>, men vi havde problemer med at få menuen centreret på siden, hvis det stod I punktform. Ingen af de instrukser vi fandt på internettet virkede. I dag ved vi, at det ville have ladet sig gøre at centrere menuen ved at sætte den i en <div> som vi sætter i midten af siden. Et andet kodeeksempel som vi er stolte af: <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>magasinet</title>

16 <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <link rel="stylesheet" type="text/css" href="ibox/skins/lightbox/lightbox.css"/> <script type="text/javascript" src="ibox/ibox.js"></script> <script type="text/javascript" src="scripts/undermenu.js"></script> </head> Dette er vores <head> sektion på vores undersider. Vi stillede fra starten høje krav til, hvordan hjemmesiden skulle se ud. Vi fandt hurtigt ud af, at det blev nødvendigt at bruge javascript, som vi endnu aldrig har fået undervisning i. Vi fandt forskellige guides på internettet som vi læste. Vi forsøgte at forstå, hvordan javascript elementerne virkede og hvordan vi kunne tilpasse dem, så de så ud som vi ønskede. Vi havde oprindeligt flere javascript elementer på hjemmesiden, som vi har slettet igen. Vi fandt ud af vi kunne løse problemet med æ, ø og å ved at tilføje charset=iso i <head>. Kommentarer I løbet af ugen opstod der mange problemer under programmeringen. Det skete ofte at siden så anderledes ud end ønsket, så der blev brugt en masse tid på at rette koden til. Oprindeligt brugte vi ibox (javascript boks) til at vise vores undersider. Men torsdag fandt vi desværre ud af, at dette ikke var en god ide. Når man trykker på et link inde i iboxen blev siden selvfølgelig åbnet på en ny side, og ikke inde i selve iboxen. Og vi fandt ud af at andre javascript er ikke virkede, når siden var åbnet i en ibox. På forsiden (index.html) har vi nederst koden for vores flash video. Denne kode: <PARAM NAME="SCALE" VALUE="default"> indsatte vi for at flash videoen beholdt det samme størrelsesforhold (aspect-ratio) på forskellige skærmstørrelser. På undersiden om Magasinet indsatte vi et link til at vise en video med Alphabeat fra Youtube i en ibox. Her er koden: <a href=" rel="ibox" >Alphabeat</a> rel="ibox" gør så videoen (eller billedet, teksten, html-dokumentet osv.) åbner i en ibox. Det kræver javasript filen til ibox, som vi har et linkt til i head-sektionen: <script type="text/javascript" src="ibox/ibox.js"></script> iboxen kan styles med en css-fil som vi også havde et link til i head-sektionen:

17 <link rel="stylesheet" type="text/css" href="ibox/skins/lightbox/lightbox.css"/> På vores undersider lavede vi en vertikal dropdown menu vha. javascript og CSS. CSS-koden for menuen kan ses i stylesheet.css under /*DROPDOWN MENU*/. I vores undersider har vi brugt en masse div-bokse, for at kunne styre hvordan siden ser ud. Konklusion Vi har i løbet af dette projekt fået lavet en ny og flot hjemmesiden til kulturmaskinen som holder sig i pop arts og modernismens stil. Siden henvender sig til en målgruppe bestående af unge og voksne. Vi har forsøgt at tiltrække et større publikum ved hjælp af animationer og innovativt design til det nye website. Vi mener at denne hjemmeside stimulerer nysgerrighed og lyst til at tage til kulturmaskinen. Derudover er vi kommet med forslag til nye og spændende workshops

18 Litteraturliste Internet sider: Find sounds: Kulturmaskinen: / Hjemmesiden: Søgt efter billeder på: Research: Bøger: Finn Rolighed Andersen, Bjarne Warming Jensenm Kurt Jepsen, Peter Schmalz, Jens Kjær Sørensen, International markedsføring, 3. Udgave, Trojka Elisabeth Freeman, Eric Freeman, Head First HTML with CSS & XHTML, 2006, O Reilly Robin Williams & John Tollett, , The non-designer s web book Third edition, 336 sider, Peachpit Press, 1249 Eighth Street, Berkeley

19 Appendix Bilag

20 Bilag

21 Bilag

22 Bilag

23 Bilag

24 Bilag

25 Bilag

26 Bilag

27 Bilag

28 Bilag 10 Hjemmeside Kulturmaskinen Stilart Modernisme Design Sort/hvid Farveindtryk Farvet menu Sort by/hvid baggrund Centreret forside Kulturmaskinens Design Interaktion Virksomhed Flash Html Java Implementer research Hårde kontraster Kulturmaskinens farver Transparent baggrund Genbrug på undersider Blinkende lys i by Cyklister Kørende bus "Tree-menu" Flyvende fugl Baggrundsmusik Lydeffekter Fotos på website Tekst Baggrundsbillede menubar i box til billeder Kommunikation Målgruppes behov Collage med interesser