Niclas Ritz Dennis René Lucas Claus Gadegaard Højlund MMD 1. semester B Emne: Pba. i Laboratorie-, fødevare- og procesteknologi Antal anslag: 20.640 Erhvervsakademiet Lillebælt, Munkebjergvej Vejledere: Mona Lyngs Kjærgaard Bjarne Slipsager Peter Storm-Henningsen
Indholdsfortegnelse Indledning... 2 Metode... 3 Effektiv feltstudie... 4 Konceptet... 5 Udviklingen af styles... 6 Standard... 6 Art... 6 Strukturering... 6 Det færdige website... 7 Sammenligning af resultater... 7 Valg af teknologi... 9 Værktøjer... 9 Teknologi... 9 Kodeeksempel... 10 Evaluering af gruppeproces... 11 Grupperoller... 11 Refleksion over gruppearbejde... 11 Hvad kunne gøres bedre... 12 Konklusion... 13 Litteraturliste... 14 Bilag 1 Gantt-chart... 15 Bilag 2 - strukturoversigt... 16 S i d e 1 af 16
Indledning Vi kommer fra designgruppen SpiderWeb, der består af Niclas Ritz, Dennis René Lucas og Claus Højlund. Vi har udarbejdet en webside med tilhørende html-, css- og billedfiler omhandlende uddannelsen Pba. i Laboratorie-, fødevare- og procesteknologi hos EAL. Vores arbejde har resulteret i en webside med informationer om uddannelsen og uddannelsesstedet. I vores research har vi erfaret, at uddannelsesstedet har nogle rigtig gode arbejdsforhold, så teksten på websiden forsøger at sætte fokus på dette. I arbejdet har vi benyttet os af diverse teknikker både rent teknisk omkring programmeringen af websiden, men også i forbindelse med ide- og konceptudviklingen. Det som vi gerne vil give svar på gennem projektet i rapporten og på websiden er blandt andet; Hvad kan uddannelsen byde på ud over det sædvanlige? Hvad går uddannelsen ud på, og hvilke krav stiller den? Hvordan kan vi bedst muligt kommunikere vores informationer ud til målgruppen? Hvilke tekniske virkemidler skal vi bruge, og hvordan? Der er naturligvis mange flere problemstillinger, som der tages hånd om igennem rapporten. S i d e 2 af 16
Metode Vi startede vores arbejdsproces med at undersøge, hvor vores tildelte studie handler om, hvilke krav der er, og ikke mindst hvor det kan studeres. Herefter besluttede vi at besøge uddannelsesstedet for at skabe os et overblik og indtryk af stedet, så vi ud fra det kunne finde det fokusområde, der bedst kunne bruges til at sælge uddannelsen på vores website. Vi planlagde at foretage fieldresearch ved at finde lokalerne, hvor uddannelsen kunne læses og evt. tale med en vejleder. Begge dele lykkedes og vi fik taget en del billeder på stedet. Kilden til meget af den grundlæggende information er derfor uddannelsesansvarlig Claus Dreier fra EAL. Planen herefter var at få lavet en skitse over websiden, som vi ønsker at lave, hvorefter programmeringen kunne starte. Programmeringsfasen skulle være centrum i projektet, og ud fra hvordan det forløb, kunne vi lave rapporten sideløbende også fordi det meste af rapporten tager udgangspunkt i websidens opbygning. De designmæssige stilarter har undervejs givet os god inspiration til websiden og ideudviklingen af sitet, men ellers har designet hovedsageligt bygget på kreativ tænkning. Fra starten af projektet har vi fokuseret på at få planlagt de ting, der skulle laves. Blandt andet har vi udarbejdet et Gantt-chart 1, så vi hele tiden har haft overblik over opgaverne. Desuden har vi afsluttet hver dag med at se dagens arbejde igennem, aftale hjemmearbejde, og få overblik over de efterfølgende dage. Websidens indhold har vi researchet os frem til på EAL s egen hjemmeside samt diverse uddannelsessider. Her der altså tale om en kvalitativ analyse, hvor vi har fundet noget information, som vi videreformidler. Udseendet på vores webside er blevet til med en slags brainstorm, hvor vi hver især lavede udkast til, hvordan siden kunne se ud, og til sidst blev enige om et design. 1 Gantt-chartet kan ses i bilag 1 S i d e 3 af 16
Effektiv feltstudie Allerede på første dag i projektet blev vi enige om, at det var bedst at besøge uddannelsesstedet som det første. Vi diskuterede, hvad vi skulle bruge af informationer, og hvad vi havde af ideer til fokusområder, hvorefter vi anskaffede et kamera og tog af sted mod Erhvervsakademiet Lillebælt på Landbrugsvej. Under besøget blev vi vist rundt af uddannelsesleder Claus Dreier. Her så vi både teoretiske og praktiske lokaler, hvor undervisningen foregik. Det hele var professionelt præget med gode faciliteter. Det der dog sprang mest i øjnene hos os, var de arbejdsforhold, de studerende havde. Der var rigtig mange steder, hvor man som gruppe kunne sætte sig og arbejde i fred og ro. Dette var både udendørs og indendørs. Vi besøgte stedet i varme og solskin, så rigtig mange havde placeret sig ved borde og bænke udendørs i en af de mange kroge, hvor arbejdsroen var bedst. Vi forsøgte at finde frem til PBA-studerende 2 til vores projekt, men der var ingen tilstede den pågældende dag. De andre studerende udviste stor tilfredshed med forholdene og så ud til at nyde området og måden at arbejde på. Det viser at omgivelserne har stor indflydelse på arbejdsprocessen, og ens arbejde påvirkes af forholdene. EAL har gjort meget ud af at skabe de gode faciliteter, hvilket er lykkedes flot. Hvis man skal sætte en finger på forholdene, så er det de praktiske lokaler, som vi besøgte. De bar præg af stor slitage og forældet udstyr, der kunne trænge til at blive opfrisket. Dog var teorilokalet meget arbejdsvenligt. Det var udstyret med smartboard, god plads til at arbejde ved borde og stole samt ikke mindst et lille cafe-hjørne, hvor der kunne laves kaffe, toast og den slags. Alt i alt så det ud til at de studerende nød at være på stedet og var glade for arbejdsforholdene. Så vores fokus i konceptet vil være at fremhæve netop arbejdsforholdene, så vi kan skabe et subsite, der overbeviser nye mulige studerende om, at de skal vælge netop dette studie. 2 Studerende ved Pba. i Laboratorie-, fødevare- og procesteknologi, som vores projekt omhandler S i d e 4 af 16
Konceptet Vores koncept indeholder et website til EAL, der beskriver uddannelsen Pba. i Laboratorie-, fødevare- og procesteknologi. Indholdet på siden er henvendt til studerende, der ønsker at vide mere om uddannelsen, og som sandsynligvis er i gang med at lede efter netop den uddannelse, de skal studere. Derfor er det vigtigt at fange læseren og skabe interesse for uddannelsen. Det gør vi med vores fokus på arbejdsforholdene, som gerne skulle overbevise læseren om, at det er den helt rigtige uddannelse at vælge. Ved at fremhæve fordelene og skrive direkte til målgruppen, håber vi at skabe den interesse, der skal til for, at valget ender på denne uddannelse. På sitet har vi også lagt vægt på at informere målgruppen omkring de krav der er for at blive optaget på uddannelsen, informere omkring de kompetencer man vil udvikle ved at gå på uddannelsen samt de muligheder man vil have på arbejdsmarkedet når man står som færdiguddannet med netop denne uddannelse. Dette er gjort for at skabe en informativ side der dækker de mest grundlæggende informationer om uddannelsen. gjort ved at bruge en basis farve mens vi havde bestemt os for udelukkende at bruge rene geometriske former, i form af firkanter. Vi har brugt horisontale og vertikale linjer og har samtidig anvendt store mængder luft på siden for at fokus lå på budskabet og ikke designet. Derudover er siden lavet i pop-art. Dette gjorde vi da vi havde i tankerne at skabe en hjemmeside der føltes positiv grundet designet. Det mente vi var nemmere i popart-stilen i forhold til f.eks. destruktivisme. Men en struktureret og forholdsvis simpel hovedside, gør vi det enkelt for alle at redigere i indholdet på siden. Med CSS gør vi det muligt at ændre i siden udseende og opsætning med få, enkle rettelser, hvor selv folk uden kendskab til kodning kan være med. Der vil være mulighed for at lave flere undersider til websiden, ligesom billeder og bannere er tilgængelige både i redigeret form og som photoshop-filer, der kan redigeres efter ønske. Vi har samtidig valgt at fokusere på at informere om faciliteterne på uddannelsen, da deres remedier er med til at sikre den optimale undervisning samtidig med at mulighederne for gruppearbejde gør at arbejdsgangen er særdeles positiv. Vores subsite er lavet i to stilarter. Standardsiden er lavet i modern art hvor det hele er meget simpelt. Dette har vi S i d e 5 af 16
Udviklingen af styles Standard Vores standard stylesheet er et meget enkelt og overskueligt design, hvilket vi har valgt, fordi websitet handler om en uddannelse og derfor er meget informativt og formelt. Dem der går ind og ser siden kigger oftest efter noget bestemt, som de gerne vil finde nemmest og hurtigst muligt. Derfor skal der være nem adgang til alle undersider og relativt klart og tydeligt være beskrevet, hvad det handler om. Når man kommunikerer informationer som her, så er det vigtigt at designet og interaktionen på siden ikke stjæler alt opmærksomheden, da det ikke er det folk klikker ind for at se. fået en farvet baggrund med lidt transparent, så man stadig kan se sidens baggrund. Til sidst er billederne på siden blevet omfarvet, så de er mere kunstneriske og passer til stilarten. Strukturering Udviklingen at websiden startede med en skitse over siden, hvorefter programmering af standardsiden gik i gang. Det resulterede i vores endelige webside. Ud fra den omkodede vi css en til popart-stilen, så læseren selv kan vælge mellem de to styles via et link. Art Vi har valgt at benytte popart som vores sekundære stilart. Stilarten kom frem i 1950 erne, og er kendetegnet ved genkendelige hverdagsobjekter, logoer og lignende. Det er ofte meget farverigt og iøjnefaldende. 3 På vores webside har vi designet en baggrund med noget let genkendeligt indenfor den uddannelse vi beskæftiger os med nemlig laboratoriekolber. Samtidig er det farverigt og mere kunstnerisk end vores standardside. Brødteksten har 3 http://www.the-artists.org/artistsbymovement/pop-art/ (informationen underbygges på flere andre sider) hentet 01-06-12 S i d e 6 af 16
På forsiden er der lavet en indledning, der skal fange læseren og skabe interesse for at læse mere om uddannelsen. Strukturoversigt over websitet kan ses i stor størrelse i bilag 2 Det færdige website Som det kan ses i bilaget har vi valgt at centrere vores side, da det ser bedst ud, og fungerer i alle browsere. Øverst på siden har vi placeret et flash-banner med billedrotation der er relevant for uddannelsen. Banneret skal give dynamik og flow til siden, så det ikke er for fastlåst og kedeligt at se på. Brødteksten på siden er indrammet af en stiplet linje, som skal indramme teksten og gøre det rart og læsevenligt. Til at bryde de faste rammer, er der et billede, der også fungerer som overskrift til tekststykket. Det fungerer som en anderledes måde at indlede afsnittene, så det ikke bare er ren tekst. Samtidig skifter billederne, så de ved nogle afsnit er i højre siden af tekstboksen. Vi har valgt at bruge disse virkemidler for at skabe nogle faste, læsevenlige rammer, men samtidig forsøge at bryde det ensartede design med billeder, der går udenfor rammerne. Fra forsiden kan man navigere videre på siden til enten en side om uddannelsen eller faciliteterne på stedet. Undersiden om uddannelsen er meget faktapræget, da det er her man kan finde informationer om, hvad det handler om, og hvad man kan forvente sig af at søge ind. Siden om faciliteter tager udgangspunkt i vores fokusområde om arbejdsforholdene, og viser nogle billeder fra studiet, så potentielle nye studerende kan se, hvad de kan forvente af stedet. Vores popart-side er bygget op på stort set samme måde, det er blot design og farver, der er ændret, så det matcher stilarten. Derfor er det stadig enkelt at navigere rundt på siden og man kan forholdsvist hurtigt finde frem til det man søger efter. Sammenligning af resultater Med vores popart-udgave af websiden har vi fokuseret mere på brugen af farver og frit design, frem for standarddesignet, der er meget formelt og overskueligt. Med popart udfordrer vi læseren mere og give en designoplevelse af siden. Fordelen ved at starte fra bunden af med designet er, at man fuldstændig selv kan bestemme, hvordan det hele skal se ud. Inspirationen kommer fra en selv, og hvad man føler kan blive godt. Ved at tage udgangspunkt i en stilart, skal man mere forholde sig til nogle rammer, der skal S i d e 7 af 16
overholdes for at fastholde stilen. Til gengæld giver det fordele ved, at man ofte sikrer sig at stilen holdes gennem hele websiden, hvor sidens design ved at starte fra bunden somme tider kan løbe løbsk. Ved at starte fra bunden giver det også fordelen ved, at man relativt nemt kan redigere i css en, og den vej tilpasse designet til en stilart. Det er sværere at gøre den anden vej rundt. Websiden inspireret af popart-stilen. Farverne er hentet fra grundfarverne rød, blå og gul. Skrifttypen er ændret, så den er mere kunstnerisk. S i d e 8 af 16
Valg af teknologi Værktøjer Netbeans er programmet der er brugt til at lave hjemmesiden. Den har sin helt egen ftp-funktion som gør det muligt at uploade til sin server mens man gemmer sit projekt, så man ikke skal tænke på det selv. gennem programmet laver man en projekt mappe på sin egen computer som også kan bruges som backup vis ens projekt på serveren er slettet eller på andenvis beskadiget. Netbeans kan arbejde med HTML, CSS, PHP og JavaScript samt et par andre kodesprog. Der bliver vejledt under vejs ved hjælp af et hav af valgmuligheder og forklaringer mens man skriver sin kode som gør det lettere at komme videre vis man har glemt hvordan den enkelte kode skal skrives. CSS: Der er blevet lavet et ekstern stylesheet der er blevet linket til fra index siden. Grunden til det er at separerer de forskellige koder og give et bedre overblik. Sitet er blevet sat til at kunne fungere i alle oplæsninger da der er blevet lavet afstande og størelser med procenter. Der er blevet brugt PHP til links på den måde at der skulle kun være en overordnet side der henter informationer, så man ikke skal loade nye sider vær gang man trykker på et link. I stedet for at linksne har en sti, har de bare en kort kode der ser således ud?menu=1. I sidens indhold bliver der sat en if-funktion ind der kalder på den information man gerne vil have ved hjælp af en include-funktion. Wamp Server er et program som laver en emulering af en server på ens computer som gør det muligt at teste ens site inden man lægger det ud på nettet. Der følger et Phpmyadmin program med så man kan arbejde med databaser ved hjælp af MySQL. Teknologi Der er blevet brugt HTML til at indsætte alle de elementer som skal opsættes i CSS. Der er blevet brugt diver (kasser) der er nemme at style da de ikke nødvendigvis hænger sammen som f.eks. tabeller. Ellers har samtlige elementer så som links, billeder og tekst fået en class der også gør det muligt at style dem. S i d e 9 af 16
Kodeeksempel Kode på links: (Link der har fået en attribut menu = 1) <a href="?menu=1" class="menu">home</a> Kode på indhold: På tekst er der brugt en nl2br-funktion (New Line To Break). Denne funktion laver automatisk linieskift og afstand mellem afsnit så man kan skrive sin tekst i word og copy/paste teksten direkte ind i sin side uden at kode yderligere. Vi har valgt dette kodeeksempel, fordi det er med til at gøre det meget nemmere for andre at redigere i websiden. Med denne kode implementeret kan man simpelt indsætte tekst direkte fra et worddokument, og så regner den selv ud, hvor den skal lave mellemrum mellem afsnit for eksempel. På den måde slipper uerfarne kodere, der skal redigere hjemmesiden, for at indsætte tags som <br />. S i d e 10 af 16
Evaluering af gruppeproces Grupperoller Grupperollerne er meget ligeligt fordelt. Vi valgte, i gruppen, Claus som gruppeleder, men var samtidigt enige om at vi alle ville bidrage med hvad vi kunne og have lige meget ansvar. Samtidig besluttede vi at, vi i tilfælde af uenigheder i forhold til beslutninger vedrørende gruppearbejdet, at flertallet ville bestemme. På denne måde er det ikke muligt at trumfe noget igennem, uden gruppen mener det er en god idé. Måden vi fordelte arbejdsopgaverne i gruppen på var at vi vurderede hvem der havde mest erfaring samt kvaliteter på et område, også tildelte vi opgaverne ud fra det. Som eksempel valgte vi at Dennis skulle programmere subsitet da han har erfaring inde for dette område, med sin uddannelse som webintegrator. Mens han programmerede subsitet, forklarede han til os andre hvad det var han gjorde. Dette gjorde vi for at være sikre på at få det optimale ud af projektet, samtidig med at vi andre også udviklede os på de områder vi ikke var så stærke i. Sådan fungerede det generelt i gruppearbejdet. Refleksion over gruppearbejde Vi mener at vi havde et godt samarbejde i gruppen. Dette skyldes bl.a. den interne kommunikation der var. Når man blev færdig med noget til enten opgaven eller subsitet, tog man det op i gruppen for at få feedback, så man sikrede sig at det vi hver især lavede opretholdte en hvis kvalitet. Dette var en hjælp til at udvikle os fagligt da vi får nye indtryk på det vi laver, samt feedback på hvordan vi kunne gøre det bedre. Set ud fra de forskellige læringsstile har vi også konkludere at vi arbejder forskelligt i gruppen. Både Dennis og Claus er aktivister, mens Niclas er Teoretiker. Dennis og Claus arbejder på den måde at de først laver det de har i tankerne, altså deres umiddelbare førsteindtryk, hvor efter de reflektere og bedømmer det arbejde de har udført, også retter ind efter det de konkludere. Niclas strukturere og konkludere det meste i hans tanker inden han laver arbejdet, dette gør han ikke retter det så mange gange da det hele er gennemtænkt inden det bliver laver. De to Aktivist Reflektor Teoretiker Pragmatiker Dennis 90 60 70 15 Claus 80 43 53 20 Niclas 50 60 70 20 Læringsstile for gruppen S i d e 11 af 16
forskellige arbejdsmetoder er vidt forskellige, det er det endelige resultat dog ikke, da det hele er gennemtænkt flere gange. Måden det har påvirket vores gruppearbejde, har mest kunne mærkes i de opgaver vi, i gruppen, har lavet sammen. Der har det været tydeligt at vi tænker forskelligt, da Claus og Dennis gerne vil lave et første udkast med det samme mens Niclas tænker mere inden han laver udkastet. Der har Niclas også lært fordelen i at lave et første udkast fra førstehåndsindtrykket da man på denne måde får et håndgribeligt produkt at arbejde videre fra. Dette er en fordel idet man godt kan glemme noget hvis man har det hele i tankerne inden man laver produktet, mens man på denne måde får det hele med. Samtidig har Dennis og Claus kunne mærke fordelen i at gennemtænke produktet en del inden man laver første udkast da de på denne måde ikke kommer til at lave så mange udkast inden det endelige produkt er færdig. Hvad kunne gøres bedre En af de positive ting i gruppen var at alle havde lige meget at sige og ingen på denne måde følte sig undermineret. En anden positiv ting var vores fordeling af de forskellige opgaver, der ikke bare sikrede os at vi fik lavet det bedste i hver enkel opgave, men også at dem der så ikke var så gode til de ting kunne følge med og udvikle sig på denne måde. Vi mener samtidigt at det var positivt at vi alle i gruppen kunne komme med inputs når man blev færdige med noget. Noget der kunne blive bedre var dog at rapporten bliver skrevet med et lidt varieret sprog da det kommer fra flere forskellige personer. Måden man kunne gøre dette bedre på kunne være at sætte man hver især laver noget, sender det til en person der omskriver det hele til ensartet sprog i hele opgaven. Det kan godt ses som en fordel at man har hver sine kompetencer i en gruppe men det kan også være en ulempe, i forhold til at der kun er en der kan det forskellige og de andre i gruppen bliver nødt til at stole på at det der er lavet er i høj kvalitet, hvilket samtidig gør det svært at give konstruktiv kritik på et område man ikke er så stærk i. Noget man kunne gøre for at forhindre at man ikke kan give konstruktiv kritik kan være at man hver især tager det område man er svag til. På denne måde er man sikker på at have en der kan give noget konstruktiv kritik på det stykke arbejde der er lavet. Det vil dog ikke hjælpe på problemet med at man bliver nødt til at stole på den eneste man har i gruppen der er stærk på det felt. Dette kunne hjælpes af ved at man opsøgte nogle undervisere eller andre personer der er stærk på det område man mangler kritik på, og dermed søger kritikken udefra. S i d e 12 af 16
Konklusion Projektet har hele vejen igennem været planlagt og tilrettelagt, og vi har forsøgt at holde os til planen for at skabe de bedste vilkår for et godt projekt. Vi har anvendt metode og teknikker til at opnå det bedste resultat. At starte projektet ud med et feltstudie, var effektivt og meget givende. Besøget gav inspiration og hjælp til at udforme både rapport og webside. Det efterfølgende arbejde resulterede i en webside om uddannelsen Pba. i Laboratorie-, fødevare- og procesteknologi, der vil kunne uploades på EAL s fællesside for uddannelser, således at alle kan gå ind og få information om uddannelse og uddannelsessted. Vi har forsøgt at lave en simpel side, som kan redigeres af alle både med og uden kendskab til kodning. På siden har vi både lavet et standard udseende og et popart-inspireret. På den måde kan man selv vælge om man vil læse den traditionelle side eller heller vil se den mere spraglede version. Det er udelukkende css en der ændres, så derfor har det ingen indflydelse på, hvordan indholdet på siden skal skrives eller programmeres. Vi har desuden anvendt simpel og let tilgængelig teknologi til at programmere siden, så den er nem at overtage for nye programmører. Rapporten som skal afleveres i PDF-format har vi valgt at lave med liggende sider opdelt i to kolonner. Dette gør vi for at gøre den mere læsevenlig, samtidig med, at det skaber gode muligheder for at indsætte billeder og lignende, der gør rapporten mere interessant. S i d e 13 af 16
Litteraturliste Hjemmesider Erhvervsakademiet Lillebælt. Hentet d. 29-05-2012 fra http://www.eal.dk/eal/site.aspx?p=411 Erhvervsakademi Aarhus. Hentet d. 29-05-2012 fra http://www.eaaa.dk/videreg%c3%a5ende+uddannelser/lab oratorieteknik/pba+i+laboratorie-,+f%c3%b8devare- +eller+procesteknologi/uddannelsen Erhvervsakademi Aarhus. Hentet d. 29-05-2012 fra http://www.eaaa.dk/videreg%c3%a5ende+uddannelser/lab oratorieteknik/pba+i+laboratorie-,+f%c3%b8devare- +eller+procesteknologi/job+og+karriere UddannelsesGuiden. Hentet d. 29-05-2012 fra http://www.ug.dk/uddannelser/professionsbacheloruddanne lser/tekniskeogteknologiskeudd/laboratorie-_foedevare- _og_procesteknologi.aspx The-artist. Hentet d. 01-06-2012 fra http://www.theartists.org/artistsbymovement/pop-art/ Personlige kilder Claus Dreier, Uddannelsesleder, Erhvervsakademiet Lillebælt, Kold college. S i d e 14 af 16
Bilag 1 Gantt-chart S i d e 15 af 16
Bilag 2 - strukturoversigt S i d e 16 af 16