Hhtp:www.m455487y2012.mmd.eal.dk

1

Hhtp:www.m455487y2012.mmd.eal.dk 2

Indholdsfortegnelse Intro 3 Problemformulering 3 Metoder 3 Fieldresearch 4 Målgruppen 4 AIDA 6 Modernismen 6 Dekonstruktivismen 7 Thumnails 8 Muk up 9 Interaktion 9 HTML 9 CSS 10 Flash 10 Sitemap 12 Wireframe 12 SWOT-analyse 13 Arbejdsproces 13 Rollefordeling 14 Konstruktiv kritik 14 Konklusion 14 Bilag 3

For alle de unge studenter kan det være svært at finde den rigtige uddannelse, som passer dem bedst. Så kunne det være rart, at have et sted hvor de kan finde alle de rigtige informationer de skal brug. Det er så oplagt at have en website, hvor alle unge nu har forbindelse til nettet, på den ene eller anden måde. Imellem alle de mange uddannelser i Danmark, og med lige så mange websites, kan det være svært at blive set. Der kan være mange måder at opstille sin website på, nogle vil have at den skal være meget blikfangene, med alle muglige blinkene sager, som flyver rundt på siden hvor det kan kom til at virke meget forstyrrende. Det kan nogle gang være bedre med en website det er meget overskuelig og godt opstillet, så det gør det nemt at læse men på samme tid giveren en god oplevelse. Problemformulering Hvordan kan vi øge kendskabet til bygningskonstruktør og byggetekniker uddannelsen ved hjælp af en forbedret og omstruktureret hjemmeside? - Hvad gør vi for at, lave en bedre hjemmeside? - Hvad stil skal vi bruge for at, tiltrække flest mulige studerene til hjemmesiden/uddannelsen? - Hvilken baggrundsviden og hvilke forudsætninger skal man have for at lave denne hjemmeside? - Hvilket design ville understrege hjemmesiden bedst muligt? Metoder Her er en liste over de metoder som vi har brugt gennem opgaven. Fieldresearch - Kvalitativ undersøgelse. Mindmap AIDA - For at organisere vores brainstorm til opgaven. - For at se om vores hjemme side rent markedskommunikationsteknisk er bæredygtig i forhold til vores opgave. SWOT - For at analysere de stærke og svage sider af vores website. Thumnails - Denne metode brugte vi til at finde ud af vores overordnede layout. Sitemap - For at se om vores hjemmeside er tilstrækkelig struktureret. 4

Gantt Chart - Har vi brugt til at administrere vores tid. (Se Bilag 22) Fieldresearch 1 Sammentale med byggekonstruktør studerende For at for en god baggrundsviden om uddannelsen som bygningskonstruktør og byggetekniker. Var vi ude på Munke mose allé 9, 5000 Odense, hvor vi fik et personligt interviewet med 5 studerende som var i gang med første semester som bygningskonstruktør. Hvor vi havde forberedt nogle enkelte spørgsmål som. - Hvad kraves der personligt af en studerende på bygningskonstruktør uddannelsen? - Hvad laver man overordnet som bygningskonstruktør studerende? - Hvilke events er der på uddannelsen? - fordele og ulemper ved at uddanne sig som bygningskonstruktør? - hvorfor læse på EAL Odense og ikke andre steder? - hvad skal en god hjemmeside indeholde til uddannelsen som bygningskonstruktør? Svar fra alle 5 studerende. - De mente vilje var meget vigtig at have hvis man studere til bygningskonstruktør, man skal have en interesse for selve erhvervet. Selve uddannelsen er en mellem ting af en arkitekt og ingeniør uddannelsen - Som studerende på uddannelsen lære man at bliver stærk til at analysere tegninger og planlægge kompliceret opgaver ind for erhvervet og tegne. - De har fredags bar, fredags løbetur og flere virksomhedsbesøg (de havde sidst nogle erhvervsfolk fra Cocio) og på 3 semester har de en studie tur i Europa på 14 dage. - Fordelene ved uddannelsen er at der er meget gruppe arbejde/ en igennem semesteret (som at have en arbejdskollega) men er meget selvstændig, der er stor alders spredning og de studerende har forskellige fagligheder. 1 Finn Rolighed Andersen, Bjarne Warming Jensen, Kurt Jepsen, Mette Risgaard Olsen, Peter Schmalz (2011) International Markedsføring, KBH, Trojka 5

Ulemper er at det kan virke meget rodet i start hvor man først skal ind i rutinen, at uddannelsen er ikke så udbredt og at de har en dyr kantine Grunden til at de valgte at studere i Odense er fordi de mener at det er en god by at studere i. Selve Arkitekturen omkring EAL munke mose allé er også en fordel da de har alt fra gammelt arkitektur til mere modereret arkitektur. Der nævnte de 5 studerende at det ville være meget vigtigt med en overskuelig hjemme side hvor man hurtigt ville få mulighed for at overskue de vigtige informationer men at der sammentidligt skulle være mulighed for hurtigt at få indblik i hvad der rent socialt forgik på uddannelsen, i den sammenhæng nævnte de også at det kunne være rart med et link til deres Facebook gruppe. Således at nye elever ville få mulighed for hurtigt at overskue de vigtige informationer, som studie start og studiets mening/retning, da der er mange der slet ikke ved hvad bygningskonstruktøren/teknikeren går ud på, men også at der blev lagt meget vægt på det sociale således at der er så mange som muligt for åbnet øjnene for at det rent faktisk er en fed uddannelse at søge ind på. Mens vi var ude og interviewe de 5 studerende har vi taget et billede af os sammen med vores selvlavede Google pointer som passer til uddannelsen. (billedet kan også findes i vores Billag 1. (Jana er bag billedet) Målgruppen Vores målgruppe som er studerende, kommende studerende og andre der interesserer sig for byggekonstruktør og teknikker uddannelsen. Denne målgruppe er meget spredt hvad deres alder angår men meget samlet i deres interesse i forhold til hjemme siden. Da der stilles de samme forventninger hvad informationer angår fra en der er 16 eller en der er 46. Delkonklusion Pga. den store aldersforskel har vi vurderet at det er vigtigt for hjemme siden at se attraktiv ud men stadig skulle holdes minimalistisk i forhold til f.eks. effekter. Men at den heller ikke skulle blive kedelig at være på. Derfor har vi valgt at lave et lækkert design med et enkelt billede slide show som bliver vist på forsiden. For at se om markedskommunikationen er i orden og for at sikre os at vi rammer den rigtige målgruppe har vi valg at bruge Aida modellen. 6

AIDA 2 Opmærksomheden fra de besøgende bliver allerede fanget på forsiden, her er der et slideshow med billeder fra uddannelsen og fra forskellige bygninger, det giver lyst til at læse om uddannelsen hvilket der med det samme er mulighed for. Dvs. At en besøgende vil blive hængende og gerne vil vide mere om uddannelsen, så det vil sige at interessen er fanget og vedkommende ville klikke sig videre til de næste sider. Da der efter vores mening er alle de informationer man skulle have brug for er der et ønske om at kunne tage kontakt til nogle der ved mere om emnet eller at tilmelde sig uddannelsen. Delkonklusion Dermed kan vi konstatere at rent markedskommunikations teknisk er vores hjemme side yderst bæredygtig i forhold til den tiltalte målgruppe. Modernismen I forhold til selve designen har vi valgt at starte ud med Stilarten modernismen. Det var forholdsvist oplagt at tage denne stilart i forhold til byggebranchen, på den ene side fordi modernismen/funktionalismen blev født da de nye byggematerialer kom frem og byggebranchen for alvor blev sat i fokus omkring 1930 erne og fordi den modernistiske stil altid bestræber sig at gå imod det moderne og nye. Det er rimelig oplagt at arbejde med den stilart. Inspiration til denne stilart og til vores hjemme side har vi fundet i en hel række billeder. Vi har håndplukket nogle enkelte som har været mest vigtig i forhold til vores projekt. Stilen i de billeder vil man også kunne genkende i den ene af vores hjemme sider. 2 Finn Rolighed Andersen, Bjarne Warming Jensen, Kurt Jepsen, Mette Risgaard Olsen, Peter Schmalz (2011) International Markedsføring (s. 592)KBH, Trojka 7

Inspiration Dette er et billede af en typisk modernistisk bygning. Her kan man specielt lække mærke til de kantede former som er meget typisk for denne stil men stadig den blå belysning og de blå firkanter som er meget moderne og bestræber sig til at være fremtidigt. Dette er også et billede af en modernistisk bygning her er det mere formerne der bestræber sig til at være meget fremtidigt. Men bygningen har stadig de kantede former og det beton look som også er meget typisk for den modernistiske stil. Da den som skrevet foroven først rigtig kom frem da disse byggematerialer kom til rådighed. Dekonstruktivismen Den anden stilart som vi har fundet meget inspiration i til vores anden hjemme side er dekonstruktivismen, som så sit første lys i 1970erne og blev i 1988 blev der slået en klar grænse mellem postmodernisme og dekonstruktion 3. Dekonstruktivismen brød linjerne da der nu blev byget fuldstændig utraditionelt med mange brudte linjer og skøre former. Da den har arkitektur i sin kunstneriske stilart som fortæller, hvor mange kreative idéer der er i verden, og at der er ingen grund til at leve i kedelige huse. Denne stilart 33 http://www.denstoredanske.dk/kunst_og_kultur/arkitektur/europa/stilretninger_og_perioder_i_kunsten/dekonstru ktivisme 1-6-2012 8

syntes vi var en fremragende inspirationskilde til vores anden hjemme side her har vi også håndplukket nogle billeder hvor man vil kunne genkende stilarten i vores hjemmeside. Inspiration Dette er det første billede vi har fundet meget inspiration I. Her kan man se at det har ekstraordinære former og en utraditionel farve. Det der fascinerede os ved dette billede er at det stadig har de firkantede former selvom denne stil er dekonstruktivisme. Her har vi også en bygning, som er dekonstruktivisme, blot er det indefra den her gang. Men her har vi igen det yderst utraditionelle design men stadig den blå farve og de firkantede former. Efter at vi havde fået en masse inspiration og en masse baggrundsviden til vores hjemme side gik vi i gang med et brainstorm for at være sikker hvad hjemme siden skulle indeholde. For at kunne give et indtryk af det har vi skannet selve brainstormen ind. Den vil i kunne finde i Bilagende 2. Efter at vi var blevet enige om hvad vores hjemme side skulle indeholde og havde ordet vores brainstorm til at blive til fire sider på vores hjemme side = Forside, Uddannelse, Event og Kontakt. Gik vi I gang med noget skitsering af wireframes til selve hjemme siden. (et større format findes i billagende 3) Thumnails 4 4 www.etymonline.com 1-6-2012 9

Efter vi havde skitseret og kigget og diskuteret om hvordan det skulle være, blev vi enige om at vi også ville lave nogle forskellige muk ups for at få et mere nøjagtigt indtryk hvordan det skulle blive og hvordan selve designet skulle se ud. (et større format findes i billagende 4-6) Muk up Efter at vi havde fremstillet en del Muk ups og kigget på dem, diskuterede vi fordelende og ulemperne ved dem i forhold til den byggekonstruktørens og teknikerens uddannelse. Her blev vi enige om at vi ville tage det første muk up som vores skabelon til vores hjemme side. (Se bilag 7-9) Nu da alle disse ting var på plads gik vi i gang med at kode hjemme siden. Interaktion VI har valgt at bruge værktøjet, Notepad++/Sublime text til at bygge vores website. Grunden til vi har valgte at bruge disse værktøjer er, at man kan downloade shotcoots/zen Coding. Dette gør det hurtigere og nemmer at kode sin website. Ved at holde en bestemt knap ned på tastaturet kan man nøjes med kun at skriv noget at den lange kode. Selvom man selvfølgelig skal have kendskab til det man laver da det ellers stadig ville resultere i en forkert kode. HTML 5 VI har valgt hovedsageligt at kode i HTML. Hvis man skal forklare hvad HTML er i et website er det nemmest at sammenligne det med et hus hvis vi siger at HTML er hele fundamentet og rå bygningen af huset. I mange tilfælde hvis man skal bygge et rigtig godt hus skal fundamentet og rå bygningen af huset være i orden det samme med en websites, hvis ikke man har selve fundamentet i orden som er HTML kan det være svært at lave en rigtig god website. Hvad er et godt fundament i en HTML kode? Altså tekst og billede skal være kodet rigtigt man skal huske at kontrollere hver eneste kode og der skal være en god struktur i HTML så man selv og andre nemt kan gennem skue ens kodning. 5 5 Head first html. Elisabeth freeman & Eric freeman Canada north Sebastopol 1-6-2012 10

CSS 6 Vi har også brugt en del CSS. Hvis vi bruger samme eksempel som før og vi siger at selve fundamentet er i orden, kan man se at der mangler nogle, bygningen virker lidt kedeligt den mangle noget personlighed det er her CSS kommer ind i billedet den er nærmest som malingen, klinkerne og alt andet der pynter på huset og gør det personligt. Flash Desuden har vi også brugt flash til at give websitet et ekstra pift, som gør at hjemmesiden er lidt mere spændende at se på. Man kan bruge Flash på mange måder, f.eks. hvor man har nogle elementer der f.eks. kan komme flyve ind fra siden eller andre elementer der står og blinker og mange andre funktioner som kan give en hjemmeside en bedre oplevelse. For at bruge samme eksempel som før er Flash vores luksusvare i huset som f.eks. en Playstation 3 og en fladskærm. delkonklusion For lige at ridse det hele op er det HTML vi har brugt som fundament til vores hjemme side, CSS for at give den noget farve og et personligt præg og Flash til at gøre den mere spændende og mere interaktiv. For at tydeliggøre det vi har foretaget os, har vi håndplukket to kode eksempler. De to kode eksempler vi har valgt har været forbundet med en masse arbejde før resultatet kunne ses. Hertil skal der siges at vi alle sammen ikke havde det store kendskab til hverken HTML eller CCS. #tekstbox{ float:left; background-color: white; margin-left: 0px; margin-right: 0px; border: 2px solid gray; padding: 10px 10px 10px 10px; font-family: sans-serif; width:500px; height:500px; } 6 Head first html. Elisabeth freeman & Eric freeman Canada north Sebastopol 1-6-2012 11

#tekstbox{ position: absolute; top: 88px; width: 500px; } Dette er den kode vi har skrevet til vores ene tekstboks på vores hjemme side. Koden fortæller hvilken farve boksen skal have hvor den skal være placeret hende, hvordan kanten skal se ud, med hvilken font familie der skal arbejdes inden for boksen, hvor stor boksen er og hvor meget afstand der skal være fra teksten til kanten af boksen. Dette er en komposition af tre forskellige koder vi har flettet sammen til en og fået til at fungere. <div id="linksbox"> <nav> <ul> <button><li><a href="#">forside</a></li></button> <button><li><a href="#">uddannelse</a></li></button> <button><li><a href="#">events</a></li></button> <button><li><a href="#">kontakt</a></li></button> </div> </nav> </ul> Det andet kodeeksempel vi har valgt den vi har brugt vores navigation. Denne kode fortæller browseren at der er en knap der f.eks. heder Uddannelse og at så snart man klikker på den skal gå til den side der heder uddannelse. Således at det er muligt at navigere rundt på vores hjemme side. Vi har under hele kodningen sørget for at bruge tydlige reference navne og at kommentere koden hele vejen igennem. Således at efterfølgende kan arbejde videre med koden og det er muligt at vedligeholde hjemmesiden uden at der er en af os der skal være til stede. 12

For at man kan se hvordan vi har struktureret vores hjemme side har vi lavet et sitemap som viser hvordan vores hjemme side er struktureret. Sitemap 7 Vi havde allerede besluttet ret tideligt at, man skulle nemt kunne komme rundt. Hvilket betød, man skulle kunne komme til alle sider, ligegyldig hvilken side man er på. (Et større format findes i billag 10) For at vise hvordan vores indhold på de enkelte sider er struktureret har vi lavet nogle Wireframes. Wireframes 8 Vi har valgt på det ene af vores websites at, bruge et meget stilrent design, hvor vi har brugt et baggrunds billede af en bygning, hvor selve designet er designet efter modernisme som forklaret tidligere i opgaven. Samtidig med vi vil give en fornemmelse af at det er en uddannelse inde for byggebranchen. Stilen her passer godt med hele vores koncept, for det giver et signal af det stilrene design. Hvor det hele mere eller mindre står, på en lige linje eller i bokse så hele website kan være meget overskuelig, på den måde gør det også at læseren, nemt kan finde rundt på selv siden, og fin de informationer som læseren skal bruge. Som man kan se er vores tekst og billede gennemsigtig, det har vi gjort for at give vores website lidt dybde, For hvis ikke vi havde gjort det ville siden virke en smule tam. Vi har valgt at have meget af de vigtige informationer på forsiden, så læseren hurtigt for interesse for siden, og samtidig har vi en flash banner der kørende. Med nogle billeder af de studerende og nogle billede af bygninger som de studerende på bygningskonstruktør & byggetekniker selv har taget. Hvor det kan give en god fornemmelse af selv uddannelsen. Vi har valgt at have 3 underside uddannelse, events og kontakter hvor stilen fra for siden går igen på alle 3 sider. Med enkelte ændringer hvor selve placeringen er lidt ændret. Vi har prøvet så vidt vi kan give de rigtige informationer under hele websitet. I vores anden website har vi valgt at bruge en anden stilart, som er dekonstruktivismen som også er forklaret tidligere, og man kan bare se en stor forskel med bare sådan en lille justering. Hvor vi valgte at skifte baggrunden, til en bygning med et design af dekonstruktivismen hvor nu baggrunden er let mere blikfangene, og kan gøre at læseren blive mere fokuseret på billedet. Selve bryder også lidt vores websites opbygning hvor alt er meget kantede hvor billede så har lidt mere bløde former. (Se wireframes i bilag 11-21) 7 Site Map Usability Jakob Nielsen's Alertbox, August 12, 2008 1-6-2012 8 Brown, Dan M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders. 1-6-2012 13

SWOT-analyse Vi har også valgt at lave en SWOT 9 analyse på vores hjemmeside, fordi vi så kan få et overblik over de stærke og svage side i forhold til de interne og eksterne side. Det er måske ikke så klassisk at lave en SWOT analyse på en hjemme side men vi ville simpelthen få et overblik over hvor bæredygtig vores koncept i forhold til hjemmesiden er. - Tiltrækker studerende - Enkelt - Overskueligt - Let tilgængeligt - Nem navigation - attraktiv - mange informationer - tiltalende design - link til sociale medier SWOT-analyse for B&B hjemmeside Interne Forhold Stærke sider (S) Svage sider (W) - Slideshowet kan for nogen være en irritation - For enkelt - Evt. for lidt information - Er ikke testet på alle browsere - Designen falder evt. ikke i alles smag Eksterne Forhold Muligheder (O) Trusler (T) - Kan sammenkobles med andre informations - Manglende vedligeholdelse sider over denne uddannelse - Kan være svært at finde på nettet - Kan sammenkobles med en uddannelses - Informationerne kunne forælde database - Kan være inkompatibel med nogle browsere - Kan opgraderes. Feks. i form af en opslagstavle de studerende selv vedligeholder Delkonklusion Ud fra SWOT analysen kan vi konkludere at vores hjemmeside i forhold til målgruppen er tilstrækkelig bæredygtig. Da vi konkluderer at de stærke sider opvejer de svage sider og at der er bedre muligheder end da der er trusler. Vi kan også konkludere at vi har evnet at få alle de ting ind som de studerende nævnte ville være vigtig i forhold til deres mening, i hvert fald hvad hjemmesiden angår. Arbejdsproces Selve sammenarbejdet i gruppen fungerede rigtig godt, vi var alle sammen hele tiden i arbejde og var heller ikke sky for at arbejde på noget derhjemme. Men man kunne tydeligt mærke forskellen på måden vi arbejde på. Kim og Daniel f.eks. arbejde meget sammen i forbindelse med kodningen. Mens Daniel som hovedsageligt er teoretiker i sin læringsstil sad og overvejede før han gjorde noget tog Kim bare initiativet 9 Finn Rolighed Andersen, Bjarne Warming Jensen, Kurt Jepsen, Mette Risgaard Olsen, Peter Schmalz (2011) International Markedsføring, KBH, Trojka 14

og prøvede sig frem. Her kan man se at Kims hovedsagelige læringsstil er aktivisten. Daniels andre læringsstile er meget lige fordelt, mens Kim mest teoretiker i forhold til pragmatiker og reflektor. Astrid og Jana arbejde hovedsageligt med rapporten her var det også meget tydeligt at begge to hovedsageligt var aktivister, de tog bare et område og gik i gang, selvom Astrid lige reflekterede over hvordan hun skulle gribe det an. Janas øvrige læringsstile er ligeligt fordelt mens Astrid er mere reflektor end pragmatiker og teoretiker. Delkonklusion Så her kan man tydeligt se at læringsstilene har haft en tydelig indflydelse på hvordan de enkelte medlemmer af gruppen arbejde. Men i det at vi er forholdsvis forskellige i vores læringsstile har det givet et positivt udslag på vores rapport og på selve hjemmesiden. Rollefordeling I forhold til vores rolle fordelingen i gruppen har det været sådan at Jana var vores Projektleder. Hun havde overblikket igennem forløbet og sørgede for at aftalerne vi havde lavet blev overholdt, og hvis f.eks. tidsplanen ikke kunne overholdes at der så blev stillet en ny deadline op. Desuden havde hun ansvaret for et par elementer i selve rapporten. Astrid havde ansvaret for alt det visuelle, det vil sige kompositionen af opgave layoutet og alle tegningerne der blev lavet. Desuden har hun haft ansvaret for en del afsnit i opgaven. Kim og Daniel havde ansvar vor hjemme siden både i forhold til layoutet blev overholdt og for hele kodningen. Selvom vi alle sammen havde vores fast rolle fordelinger og arbejdsopgaver var alligevel gode til at kommunikere tværs over områderne og implementerede hinanden i de forskellige ting der foregik. Konstruktiv Kritik Selvom vi var gode til at komplimentere hinanden under arbejdsforløbet og vi alle sammen gav en stor indsats for projektet er vi løbet ind i en del problemer. F.eks. havde vi svært ved at overholde vores tidsplaner en af grundene til dette var at ingen af os havde erfaring med kodning og dette gjorde at vi blev kastet bagud hele tiden og at selve projektet ikke er så vellykken som vi havde ønsket. Det vil sige at selvom vi komplimenterede hinanden godt blev vi nød til at gå ud over vores grænser hele tiden og være opfindsom og tage nogle smutveje som vi egentlig ville ha undgået. En af de genveje var f.eks. at vi brugte Dreamweaver til at putte vores Flash animation ind i vores website hvor den oprindelige plan var at kode den ind med HTML. Delkonklusion Til vores næste projekt bliver vi nød til at have mere fokus på vores tidsfordeling. Desuden har vi fortaget os at tilegne os mere viden i løbet af den næste tid hvad kodning og det teoretiske angår, således at tingende går os nemmere fra hånden til næste projekt og vi måske kan undgå at støde ind i så mange problemer. Konklusion På baggrund af vores fieldresearch, har vi fået en omfattende viden om selve uddannelsen, hvor vi har fået nogle gode rammer. Med de rammer har vi fået oprettet to fornuftige forslag med lidt forskellige design med stilarterne modernisme og dekonstruktivisme. Modernismen, da stilarten nærmest blev født igennem 15

byggebranchen og dekonstruktivismen, da denne stilarts arkitektoniske, kan lege med former på en hel anden måde. Med inspirationen og den information vi havde fået fra de studerende blev, har vi fået nogle design som er meget overskueligt, og med et simplet navigation system, både inde i selv siden, og ud til de eksterne side i forbindelse med uddannelsen, som gør at efter vores, holdning kan øge kendskabet til uddannelsen til bygningskonstruktør. 16

Bilag 1 17

Bilag 2 18

Bilag 3 19

Bilag4 20

Bilag 5 21

Bilag 6 22

Bilag 7 23

Bilag 8 24

Bilag 9 25

Bilag 10 26

Bilag 11 27

Bilag 12 28

Bilag 13 29

Bilag 14 30

Bilag 15 31

Bilag 16 32

Bilag 17 33

Bilag 18 34

Bilag 19 35

Bilag 20 36

Bilag 21 37

Bilag 22 38

39