1. Introduktion Afgrænsning Metodeafsnit Problemformulering Vores ansvarsfordeling Arbejdsprocessen...

Transkript

1 Indhold 1. Introduktion Afgrænsning Metodeafsnit Problemformulering Vores ansvarsfordeling Arbejdsprocessen Ideprocessen GANTT-kort Diskussion om godt og skidt Research Analyse af input Målgruppe Segmentering Målgruppevalg Design Thumbnails, Wireframes og Sitemaps Endeligt webdesign Google pointer Interaktion Software Tekniske krav Koden Konklusion... 14

2 1. Introduktion Vi har fået til opgave at udvikle et subsite til uddannelsen for Pba. I hospitality management 1. I forbindelse med denne opgave skal vi lave en Google Pointer 2. Opgaven lyder på at når man klikker på de forskellige uddannelser, ved hjælp af Google Pointeren, bliver man videresendt til vores site. Uddannelserne har muligvis problemer med manglende interesse, så derfor har de bedt os om hjælp. Meningen med opgaven er at folk søger på skolen på Google Maps, og så er hver uddannelse markeret med en pointer. 2. Problemformulering Vi har en fordom om at EAL s Hospitality Management-linie har en lav optagelsesprocent, i forhold til de andre linier på samme uddannelsesinstitution, finans-, markedsførings-, og service-økonomerne pba-overbygning. Vi søger at finde beviser for denne påstand, samt en forbedring eller udbedring af dette formåede problem. Dette forsøges gjort igennem forbedret kommunikation og awareness om uddannelsen på en god visuel og målrettet subsite af Hospitality Management-linien. Herunder ses spørgsmål vi har stillet os selv og ser frem til at løse, for ultimativt at opnå et overordnet svar af vores overstående problemstilling. Hvem er målgruppen for Hospitality Management-linien? Hvad er det optimale design af subsitet for at skabe den ønskede reaktion for målgruppen? Hvordan burde hjemmesiden kodes for at være overskuelig for andre webdesignere at arbejde videre på i fremtiden? Hvordan skal vi bedst arbejde sammen for at opnå et godt produkt i enden inden deadlinen er nået? Hvordan skal opgaven struktureres og ideerne til udvikling under processen skabes? 1 Hjemmeside Hjemmeside -

3 3. Afgrænsning I dette afsnit nævnes områder og potentielle retninger vi kunne have taget med vores opgave eller processen der stod foran denne. Vi valgte tidligt i forløbet at begrænse vores opgave, ved at holde os til delvist modernisme og postmodernisme i forhold til vores hjemmesides design. Derudover har vi, grundet mangel på tid, ikke optimeret vores hjemmeside til andre operativsystemer end Windows 7. Vi har ikke begrænset vores opgave på andre punkter, andet end hvad skolens opgaveformulering forlanger af os. 4. Metodeafsnit I dette afsnit beskriver vi kort hvilke metoder vi har i sinde at benytte igennem vores opgave. Til vores kreative ide-genereringsproces brugte vi ud over en improviseret form for brainstorming, convergent og divergent thinking, til at nedskære vores ideer til de bedste og mest relevante til brug på vores hjemmesides design. Et GANTT-kort benyttes til at vise vores ansvarsfordeling imellem vores forskellige arbejdsopgaver, samt den planlagte tidsplan til disse. Vores læringsstile, samt vores generelle kernekompetencer, har mundet ud i hvilke opgaver vi hver især har fået tildelt over ugen. Vi har lavet en simpel segmentering af markedet efter den optimale målgruppe af studerende for Pba en i international hospitality management 5. Vores ansvarsfordeling Vi har valgt at fordele opgaverne efter hvor vores erfaringer ligger. Hvis man ser på gruppens læringsstile, så er vi mest aktivister og derefter teoretikere. Som aktivist er man meget kreativ og lærer bedst når man sidder med produktet i hånden, samtidig gør teoretikeren at det skal kunne bruges i teorien, før man synes noget giver mening. Vi diskuterede vores styrker og svagheder i forhold til alle arbejdsopgaverne, og kom frem til følgende løsninger. Som gruppeleder har vi valgt Andreas, pga. hans uddannelsesbaggrund (Pba. Indenfor international markedsføring). Han fungerer samtidig også som den endelige godkender af

4 rapporten og renskriver. Andreas svage sider er kodning så til generering af hjemmesiden har vi valgt Rasmus, pga. hans længere erfaring med hjemmesider. Han er god til at koncentrere sig om enkelte opgaver af gangen og få arbejdet hurtigt gjort. Hans svage sider er design delen, så dette laves i samarbejde med Thomas. Thomas har en HTX uddannelse og derfor har han haft stor interesse for Photoshop. Pia har jobbet som rapportskriver og assisterende designer. Til sidst ser hun produktet igennem for de sidste fejl og forbedringer. 6. Arbejdsprocessen Under arbejdsprocessen, vil vi gøre rede for vores kreative ide proces, samt fortælle og illustrere hvordan vi har struktureret vores tid over arbejdsugen. Til sidst vil vi kort diskutere hvilke ting vi kunne have gjort bedre og hvilke beslutninger vi har været tilfredse med under udarbejdningen af vores Style and Experience opgave Ideprocessen Vi valgte at tage ud på uddannelsesstedet første arbejdsdag (fredag d. 25/5) af vores projekt, for at se tingene an og få en bedre forståelse af hvad skolen stod for og hvilken fornemmelse vi fik fra de studerende og underviserne. Vi fik i samme ombæring aftalt et interview med skolens studievejleder Lars Høst Madsen til den følgende tirsdag d. 29/5. Vi lavede Google pointeren til projektet før vi tog ned til skolen, idet at vi ville tage det nødvendige billede der på samme dag. For bedst at komme op med nye og spændende ideer til hvordan vi skulle designe vores subsite til EAL s hospitality management-uddannelse, brugte vi en form for Brainstorming, hvor vi på skift og siddende i en ring kom med et ord vi følte ville repræsentere hospitality management på en eller anden måde. Hvert ord blev skrevet ned og først efter omkring 5 runder satte vi i gang med at skære ned i ideerne i form af en slags Convergent og Divergent thinking, hvor vi var realistiske om hvad der kunne implementeres og hvad der bedst ville kunne passe sammen GANTT-kort Vi har brugt et praktisk værktøj som GANTT-kortet, til at skematisere tiden til vores forskellige arbejdsopgaver igennem ugen. Herunder ses det fuldt udarbejdede GANTT-kort.

5 GANNT-kortet 6.3. Diskussion om godt og skidt Vi har igennem vores projektarbejde stødt på et par forhindringer, i form af forvirring omkring opgavens udformning og pointe. Vi havde haft i tanken at hjemmesiden vi skulle skabe, ville ende op som en forbedret version af EAL s nuværende af deres subsite til den givne uddannelse. Det gik op for os at siden skulle være anderledes end vi først havde troet om tirsdagen, d. 30/5. I stedet for at gå i panik, valgte vi dog konstruktivt at tage vores tidligere arbejde i perspektiv, og bruge det på en fornuftig vis i det endelige produkt og undgå dobbeltarbejde. Vores tidligere meget stilrene design, blev hermed et eksempel på hvordan vores nye design var anderledes fra normen. Rent tidsmæssigt var vi godt med under projektets forløb, på trods af mindre bump i vejen. Vores samarbejde fungerede godt og vi respekterede hinandens holdninger og roller, samtidig med at være åbne for input udenfor hinandens fagområder. Mere tid ville selvfølgelig altid have været at foretrække, men da dette ikke var en mulighed, mener vi at vores produkt har opnået et acceptabelt professionelt niveau. Én ting fra designervinklen som vi kom på for sent i forløbet til at kunne implementere det i opgaven, var en ide omkring at bruge guden Hermes i vores Google pointer design, som vi også har brugt i vores art.css side, som nævnes senere i Design-afsnittet.

6 7. Research Vi har valgt at benytte os af kvalitativ field research, i form af et dybdegående interview med Lars Høst Madsen, studievejleder af samtlige pba-uddannelses-linier ved Erhvervsakademiet Lillebælt, på Nonnebakken i Odense C. Vi havde 20 spørgsmål omkring Hospitality Management-linien og uddannelses-institutionen generelt, som vi har vedlagt under denne rapports bilag Analyse af input Vi vil i dette afsnit analysere svarene af vores forskellige spørgsmål fra vores interview, med fokus på de bedste svar vi har fået skaffet. Først og fremmest spurgte vi Lars Høst Madsen om hvilke jobmuligheder Hospitality Management-linien åbner op for, efter at de studerende har fuldført PBA en. Han henviste os til deres site, men fortalte at der er mange potentielle positioner på arbejdsmarkedet at en professionsbachelor indenfor Hospitality Management kan dække, primært indenfor den brede kategori af hotel- og turismebranchen. Her kan disse indtage alt lige fra økonomi- til markedsførings- eller ledelsesstillinger. Denne omfangende fokus kan give de færdiguddannede en bred vifte af muligheder, som må siges at være rart i en periode af finanskrise og manglende arbejdspladser. Dog mener vi at dette også kan være en svaghed, i form af forvirring hos potentielle arbejdsgivere eller en risiko for en mening om useriøsitet fra den ansøgende og tro om mangel på egentlig ekspertise, grundet den brede fokus. Imod vores forventning, har Hospitality Management-linien en stigende tilslutning af studerende over årene. Dette er naturligvis positivt, men uddannelsen får dog stadig først en international klasse i 2013, jævnfør Lars Høst Madsen. Der har været en stigning af ca. 5 studerende fra sidste års studerende til i år. Vi spurgte Lars om han kendte tallene for hvor mange af skolens studerende der får et job kort tid efter at have afsluttet uddannelsen. Desværre var der ingen statistik over dette, men han kunne fortælle at et par stykker i hvert fald læste videre til en mastergrad. Frafaldet af studerende på EAL s hospitality-linie er på kun 15 %, hvilket Lars Høst Madsen også selv mener, er relativt lavt i forhold til så mange andre uddannelser. Derudover havde Lars ikke nogen statistik over gennemsnittet af de studerendes afgangseksaminer. Det må siges at den lave fraværsprocent til dels viser en interesse for de studerende, enten for selve uddannelsen, eller ønsket om at fuldføre et springbræt til en senere karrierevej.

7 Uddannelsen er international, og har en ligevægt af mænd og kvinder, hvoraf de flest er i slutningen af 20 erne. De har ligeledes i ligevægt imellem individuelle og gruppeopgaver. Det eneste vi ville kunne kritisere, ville være en mangel af samarbejde imellem uddannelsesstedets linier, såsom markedsførings- eller finans-linien, specielt fordi alle disse befinder sig i samme bygninger på daglig basis, omkring 10x90 minutter om ugen. 8. Målgruppe Hvis EAL ønsker at skaffe nye studerende til deres hospitality management-uddannelse, er det ikke først at tænke på at markedsføre, men hvem der er ideelle at markedsføre til. Med andre ord: Hvem er målgruppen?. Dette vil vi indsnævre i dette afsnit Segmentering Vi har igennem vores tidligere nævnte interview med studievejleder Lars Høst Madsen, fået nogle facts som har hjulpet os med at segmentere markedets relevante parametre og finde frem til de allermest væsentligste. Vi fandt ud af at køn ikke var en relevant parameter, idet at sammensætningen af piger og drenge i klasserne var nogenlunde ligeligt delt. Dog virkede alder til at være relevant, specielt pga. adgangskravene påkrævet for at starte på uddannelsen. Geografien er også relevant, men pga. gode transportmuligheder og skolens meget centrale placering i hjertet af Odense, kan dem der ønsker at pendle også sagtens overveje mulighederne, med kun ca. 15 minutters gang fra Odense banegård til skolen Målgruppevalg Den optimale målgruppe er hermed, som følge af ovenstående segmentering, unge årige der bor enten i Odense eller omegn. Med denne viden kan valget af design også bedre træffes i det følgende afsnit. 9. Design Med design, forstås i denne opgave webdesign. Ønsket om et design, der bedst muligt appellerer til sidens målgruppe. Målgruppen der i dette tilfælde er blevet defineret som årige fra Odense eller omegn ovenfor. Så hvordan skaber man bedst interesse hos den optimale målgruppe igennem designet på hjemmesiden? I dette afsnit vil dette blive diskuteret og skabelsesprocessen af selve hjemmesiderne vil blive vist.

8 9.1. Thumbnails, Wireframes og Sitemaps Startende med vores primære hjemmeside med vores standart.css, har vi valgt at inkludere følgende elementer, som set herunder i thumbnail-format: Hoved-navigation Dette vandrette element skal stå i toppen af hjemmesiden og fungere som hovednavigation for brugeren, til at finde rundt imellem de forskellige undermenuer vi har fundet mest relevante. Sekundær navigation Denne lodrette navigationsbar skal være placeret i venstre side af hjemmesiden og fungere som en sekundær navigation for brugeren, indeholdende de mindre relevante punkter, eller mindst søgte efter. Vi har selektivt valgt at undgå dropdown-menuer, idet vi har ønsket at samle al information på siden blot ét klik væk for brugeren. Alt skal være nemt, overskueligt og hurtigt at finde og navigere rundt imellem. Mini billede Blot placeret i højre side af hjemmesiden, for at skabe balance i designet og gøre det mere visuelt. hjemmesiden. Logo Sidens logo, med en modernistisk version af EAL s logo, målrettet efter den internationale pba indenfor hospitality management. Logoet skal placeres oppe i venstre hjørne af

9 Slider Et slideshow, centreret under den tidligere nævnte hoved-navigation. Sliderens formål er at give et godt visuelt flow og design til hjemmesiden, samtidig med at forklare besøgende om relevante facts omkring uddannelsen i nemme og hurtigere punktformer. Der kommer til at være 7 sekunder imellem hvert skift imellem de forskellige slides. Infoboks Infoboksen er et fast element, der blot er interaktivt igennem de links der er at finde i den. Elementet indeholder generelle kontakt og praktiske oplysninger omkring uddannelsen, som set til venstre. Footer Footeren ses ovenfor i et komprimeret format, pga. bedre opstilling af rapporten. Denne er naturligvis placeret i bunden af hjemmesiden og indeholder links omkring forskellige EAL-relaterede begivenheder, uddannelser og lignende.

10 Content Content er hjemmesidens hjerte. Der hvor alt det hovedsagelige tekst omkring diverse faneblades fokus og indhold. Content er placeret i midten af hjemmesiden. Pba. International Hospitality Management Optagelse Job/Fremtid Videreuddannelse Økonomi Kvalitet Kontakt Inhold Nyheder Skolen For Ledige Her ses en oversigt over hjemmesidens struktur, svarende til oversigten over en harddisk med rod, overmapper og undermapper. Dette giver et større overblik, og sitet virker ikke så uoverskueligt som det ellers kunne have gjort for den enkelte bruger. Som man kan se er der taget udgangspunkt i PBA. i international hospitality management

11 Wireframe

12 Et wireframe er en anden måde at få et overblik på. Her ses hvilken class eller ID som er brugt til at style/animere sitet. Ved brug af et wireframe er det lettere for en anden webudvikler at viderearbejde på projektet. Hvis man har et større site er et wireframe også rigtig vigtigt, da det også giver et overblik til en selv Endeligt webdesign 9.3. Google pointer Formålet med Google pointeren er at man får vist stedet for uddannelsen, og derved lettere kan se de mange forskellige muligheder på skolen. Vi har lavet en fysisk Google Pointer som vi tog med ned på skolen og tog et billede i gården. Pointen ved Google Pointeren i projektet er at den skal fungere som en praktisk Google Pointer, så man kan se hvor uddannelsen ligger og hvilket andre muligheder skolen tilbyder. Dette kan muligvis gøre det lettere for nye studerende at finde nye uddannelser, som måske ikke tiltrækker så meget som de større uddannelser. 10. Interaktion Interaktionsafsnittet omhandler koden, tekniske krav og den benyttede software, brugt til at skabe vores subsite, til den international pba indenfor hospitality management Teknologi og Software Til udarbejdelse af vores EAL hjemmeside, har vi benyttet teknologier som HTML, XHTML, HTML5, CSS, CSS3, PHP, Javascript samt JQuery. CSS3 er fx blevet brugt for at lave runde hjørne og skygge på diverse kasser på hjemmesiden. Grunden til at disse effekter ikke er lavet i fx Flash, er at vi personligt mener at Flash ikke er fremtidssikret, samtidig med at det er knap så dynamisk i forhold til CSS3. De benyttede programmer, til skabelsen af opgavens subsite nævnes, i en rækkefølge efter den kreative og konstruktive proces. Først og fremmest, blev WinSCP brugt til at downloade og uploade filer som det FTP-program det er. Dernæst blev selve skrivningen af koden til hjemmesiden påbegyndt i Sublime Text, alt sammen kodet fra bunden. Flash er også kort blevet brugt til at skabe små animerede elementer og effekter på hjemmesiden, såsom bevægelse i logoet. Disse tre overnævnte programmer, med speciel fokus på de to førstnævnte, er de eneste programmer benyttet til interaktionsdelen af vores opgave.

13 10.2. Tekniske krav Ud fra forskellige standarder, såsom skærmopløsningsoptimering og browseroptimering, er vores hjemmeside optimal. Dvs. at den ikke bliver forvasket eller grim i andre browsers eller skærmopløsninger. Fx er vores hjemmeside 960 pixels bred. Denne bredde er vi kommet frem til efter at have vurderet den mest brugte skærmstørrelse Koden Herunder ses og fortælles om to separate kodeeksempler fra vores EAL subsite. Code Snippet 1 Dette stykke er taget fra vores header.php, det er det stykke som definerer og former vores horisontale menu i toppen af siden. Vi har brugt en ul med li for at gøre det nemt og overskueligt at lave en menu. Vi har brugt forskellige class for at give hver af dem enten en farve eller en runding til en side. Vores lnav gør at den er rund på venstre side, også når man kører musen over knappen. topbla, topred og topyel definerer en bestemt farve når man kører musen over, så de er forskellige, i forhold til EAL s farver. Derefter har vi lavet et link for at man kan trykke på menu-knapperne. Vi har også valgt at lave en span for at kunne skabe en såkaldt undertitel. Til sidst har vi brugt en div uden noget der hedder clear, den gør at det er muligt for nogle browsere at registrere hele vores topnav div s højde. Grunden til at vi, som nævnt i starten, har brugt.php er for at gøre hele vores kode mere overskueligt og meget nemmere at rette, uden at man ved et uheld kommer til at ændre andet. Dette er gjort med en php funktion som hedder require. Den kan hente alt fra et andet dokument ind i det dokument man har skrevet den i. Så i vores tilfælde har vi en index.php med alt vores content tekst, så kun <h2> og <p>, herefter bruger vi så require til at hente header.php som inkluderer alt fra css, javascript og menuer. Det samme som header.php gælder for footer.php. 3

14 Code Snippet 2 Vi har her valgt dette stykke fordi det er tilhørende det ovenstående stykke. De er blevet valgt da det er noget som vi alle har været glade for og synes er pænt på siden, udover det har det også været en lille smule udfordrende, da det skulle være perfekt. Vi har på vores menu noget mellemrum rundt om teksten i hver menu blok, dette grundes vores padding. Meget af koden er meget almindeligt, men en som afviger lidt fra det man normalt ser på hjemmesider er, transition. Denne kode gør at når man kører musen hen over menuen og den skifter farve (ses i bunden af billedet), tager det den et halvt sekund om at gøre, dette gør at den kommer til at fade ud og ind af farverne. Her kan man også se de tidligere nævnte class som topbla og topred, de får her en anden farve end resten når man kører musen over knappen. 11. Konklusion