Gruppe 14 - Automationsteknolog Anmar Bibi Eman Web A Web B Erhvervsakademiet Lillebæt Design: Mona Lyngs Kjærgaard molk@eal.dk Interaktion: Bjarne Slipsager bjsl@eal.dk Kommunikation: Peter Storm-Henningsen pesh@tietgen.dk 1
Indholdsfortegnelse: Indledning side 3 Problemformulering.side 4 Kommunikation..side 5-7 Design side 8-15 Interaktion side 16-19 Konklusion.side 20 Gruppeproces evaluering side 21 Gantt Kort.side 22 Kildeliste side 23 2
Indledning: Vores andet projekt på MMD hedder EAL portalen og vi har fået til opgave, at planlægge, udarbejde og udvikle et subsite (en selvstændig hjemmeside under en fælles portal) for de forskellige uddannelser som erhvervsakademiet tilbyder, alle grupper fik en uddannelse udleveret og vi fik uddannelsen Automationsteknolog. Automationsteknolog uddannelsen er meget interessant, da der er tale om en nystartet uddannelse (2008) og dermed er både informationer og fakta på deres nuværende hjemmeside få og mangelfulde. Derudover er designet på hjemmesiden udarbejdet i HTML og meget kedeligt at se på for læserne. EAL har forsøgt at kreere en hjemmeside, der skal være enkel og overskuelig, men det er desværre mislykkedes. En enkel hjemmeside er ikke ensbetydende med en kedelig hjemmeside, men betyder at brugerne af hjemmesiden kan finde rundt på hjemmesiden. Alt dette betød, at vi har fået frie rammer til at planlægge, skitsere og udvikle uddannelsens nye hjemmeside - nye identitet, der forhåbentligt vil skabe mere interesse for uddannelsen. Vi ønsker at udvikle en hjemmeside, der tager udgangspunkt i EAL's historie og værdier i form af kendte logoer og andet varemærke som er forbundet med EAL. Vi ønsker kort sagt at lave en hjemmeside med en rød tråd fra i forvejen kendte materialer over til hjemmesiden, så brugeren af hjemmesiden føler sig tryg ved kendte omgivelser. Minimalistisk design Vores eget design 3
Problemformulering: Vi ønsker at udarbejde en mindre hjemmeside til Automationsteknolog uddannelsen, og vha. fagene kommunikation, interaktion og visualisering at dokumentere arbejdsprocessen, opbygningen og optimeringen af hjemmesiden. Hvordan kan man forbedre Automationsteknolog uddannelsens hjemmeside, så den bliver mere synlig og professionel? Vil en optimering af hjemmesiden, skabe mere interesse for den? Vil en enkel og brugervenlig hjemmeside egne sig til de kommende studerende, i stedet for en teksttung hjemmeside? 4
Kommunikation Vores primære formål er at introducere to hjemmesider for uddannelsessted indenfor Automationsteknolog uddannelsen. Og hermed har vi fået en opgave til at designe to forskellige hjemmesider. En med minimalistisk indhold det vil sige man skærer alt det overflødige og fokusere på indholdet. Hovedsagen er at kommunikere og vejlede informationstjenester for unge studerende og deres ønskende søgende uddannelser. Formålet er at brugeren skal have nem og hurtig adgang til oplysningerne som er lagt på hjemmesiderne. Metoder På første dag har vi lagt en plan over hvad vi skal nå inden anden dag og de kommende par dage før deadline. Vi startede med at indsamle nogle friske billeder til vores websitet. Derefter tog vi på biblioteket og søgte flere efter informationer om uddannelsen. Da vi havde indsamlet nok informationer om uddannelsen, begyndte vi med kodning HTML og hvordan websitet skulle strukturers og hvordan indholdet skulle se ud. Vi har brugt en enkelt platform at fremvise to af websiderne, en forside med undersider (links) og med indhold. Og det andet har samme koncept men med klassisk udkast. I alt fremgangsmåde har vi valgt at udarbejde enkelte webinformationer. At kunne illustrerer vores hjemmeside med SWOT-analyse og analysere de interne og eksterne forhold der kan giver vores hjemmesiden muligheder skal vi kigge på SWOT- analyse punkter. SWOT 1 - analyse består for de Interneforhold; S = Strengths. W = Weaknesses. Og de Eksterneforhold; O = Opportunities og T = Threats. SWOT- analyse er en struktureret analyseproces der har formål at identificere og analysere vores mål med hjemmesidens interne stærke og svage sider samt de eksterne muligheder og trusler, den står overfor. 1 International Markedsføring 4. udgave 5
Interneforhold Stærke sider Brugervenligt Simplet Klar budskab Overskueligt Mindre tidskrævende Svage sider Få informationer Den kan være kedelig for nogen Manglende Grafiske elementer (F.eks.) Flash. Ikke farverige nok Muligheder Den er let at vedligeholde Fremtids sikret ved at optimere siden Muligheder for at kunne tilføje blogge så kommende studerende kan stille spørgsmål og få indblik på uddannelsen. Trusler Forældet design 6
Ideprocessen/koncept Det hele startede med at vi satte os sammen og udelte hver vores ideer med hinanden. Hvordan vi kunne supplere ideerne sammen til det endelige resultat. Og hvad var det mest oplagte ide med der kunne sikre vores mål og vores målgruppe den ønskede projekt. Derefter brainstorming og skitsere vi en modeltegning af hjemmesiden og derfor har vi valgt en enkelt og forståelige udseende til hjemmesiden. Mindre teknisk og mere fokus på indholdet. Kommunikationsprocessen Afsenderen er uddannelsessted et EAL, for søgende studerende der ønsker en uddannelse inden for Automationteknologi. Budskabet med at lancere hjemmesiden er at formidle informationer vedrørende automationsteknolog uddannelsen på en ny og enkelt måde. Modtageren er såvel dem der ønsker en uddannelse indenfor Automationsteknologi. Motivet er at overbevise de søgende personer som ønsker en uddannelse som kunne vejlede dem nemt og sikkert på hjemmesiden. 7
Design Flowchart: Det første vi begyndte på, var at udarbejde en flowchart 2, for at få overblik over hvilke punkter, som vi skulle inddrage i vores menu. Et flowchart er utrolig godt at lave inden, man begynder opsætningen af en hjemmeside. Med et flowchart kan man hurtigt overskue, hvordan hjemmesiden skal bygges op, altså hvordan de enkelte sider skal linkes. Index-siden er siden, man kommer ind på, når man taster hjemmesidens navn ind i browseren. Fra index-siden har man 4 valgmuligheder for at komme videre, nemlig Om Uddannelsen, Job og Fremtid, Optagelse og Design. Går man fx. ind på Optagelses-siden har man derfra stadig mulighed for at gå ind på de andre undersider vha. menuen. Flowcharten illustrerer, at lige meget hvilken side, man er inde på, altid kan komme ind på de tre andre igen. Hjemmesiden er ikke så omfangsrig, hvad sider angår, men sidder man med en hjemmeside, der har mange forskellige links, der igen har mange undersider, kan det hurtigt blive meget uoverskueligt. Derfor understreger opbygningen og designet, at gøre sig den vane at lave et flowchart. Vi blev enige om en flowchart, der skulle holdes forholdsvist enkelt og ligetil. Da det jo er en uddannelsesside, skulle vores menu punkter være forståelige og afspejle præcis hvad man kan forvente når man klikker sig ind på et menupunkt. Wireframe: Et Wireframe 3 for en webside svarer til arkitekttegningen til et hus. Det er en skitse over hvilke funktioner og hvilket indhold, der skal være i løsningen. Man kan kort sige at en Wireframe er den proces, der kortlægger hjemmesiden overordnede struktur og layout. Her skaber man konsistens i sitets overordnede look og man fastlægger det endelige "billede", hvori alle elementer som billeder og tekst skal placeres. Det er meningen at man videre i studiet skal bruge Wireframe til at indlede et projekt i en simplificeret måde og dermed vise, hvordan slutproduktet 2 Flowchart beskrivelse: http://www.lucidchart.com/ (Hentet den 1-6-2012) 3 Wireframe beskrivelse: http://www.michael-ostergaard.dk/wireframing-hvad-er-det-hvorfor-skal-du-bruge-tidpaa-det (Hentet den 1-6-2012) 8
kan se ud. Derudover kan det bruges som en proces til forventningsafstemning og endeligt beslutningsgrundlag. Vi har valgt at konstruere en simpel hjemmeside. Indholdet struktureres i en menu struktur (lodret venstre menu), som er indgangen til undersiderne. Vi har prøvet på at skabe en overskuelig menu struktur for brugeren, som giver et godt overblik over det indhold, som findes på hjemmesiden. Vi har fokuseret på ikke at have for mange menupunkter i hovedmenuen. På denne hjemmeside er der 4 menupunkter, som omtalt tidligere. Design En hjemmesides udseende og design betyder meget for, hvordan brugere opfatter indholdet. Det er derfor vigtigt, at man overvejer, hvad hjemmesiden skal handle om, hvad man gerne vil signalere og hvem hjemmesiden henvender sig til. Det er vigtigt at designet passer til emnet og brugerne. Da der er tale om en uddannelseshjemmeside, er designet tilpasset EAL's visuelle identitet med logo, farver og grafiske elementer. Grunddesign Grunddesignet er det, som man typisk kalder designskabelonen og som danner rammerne for hjemmesiden. I grunddesignet defineres de gennemgåede farver på hjemmesiden, såsom baggrundsfarver, menupunkter, knapper, tekstfarver og linkfarver. Også størrelsen på teksterne og skrifttyperne (fontene) bestemmes i grunddesignet. Dette kaldes også for hjemmesidens stylesheet eller CSS. Afhængig af om siden har meget eller lidt visuelt indhold, kan man tone grunddesignet op og ned. Hvis man har mange tekster, men ikke så mange billeder eller film på hjemmesiden, vil de overordnede designrammer træde mere frem, end hvis der er mange billeder eller film på siden. Stilart Allerførst må vi definere, hvad der forstås ved ordet stil. Stil er en ganske specifik måde at lave noget på. Genre er noget der henviser til en bestemt persons håndværk. 9
Laver flere noget som ligner denne stil "i samme stil", med personlige, formmæssige tilføjelser og ændringer - bliver det en genre, baseret på hvad de har til fælles. Dvs. at stil er således noget specifikt, noget personligt, som kendetegner et værks udførelse. Og genre hvis flere efterligner disse stil-træk. Minimalisme Minimalisme 4 kendetegnes ved en streng stil, som skærer alt overflødig udsmykning væk, og søger ind mod kernen i objektets funktion. Derfor er minimalismen præget af store flader, geometriske former og rette vinkler, men også en stor sans for helheden og materialet. På nettet kan minimalistisk design kendes på, at det har sin hovedvægt på tekst og funktion, og ofte giver plads til store blanke steder, bedste eksempel på dette er Googles hjemmeside: 4 Minimalisme beskrivelse: http://www.denstoredanske.dk/kunst_og_kultur/billedkunst/billedkunst,_stilretninger_efter_1910/minimalisme (Hentet den 1-6-2012) 10
En lidt mere livlig minimalistisk hjemmeside er Diana Scherers om botanik: Ved at holde fokus på det allervigtigste og skjule al resten, øger man brugervenligheden, og sikrer at siden når sit mål. Styleudvikling Vores mål som gruppe var at bringe det vigtigste om Automationsteknolog uddannelsen i front og minimerer forstyrrelser i form af mange elementer, farver og former. Vi ville skabe en side med så få elementer, at brugeren ikke ville blive forvirret og misfornøjet over de mange elementer der kører på skærmen. Vi ville simpelthen designe en hjemmeside, der sætter fokus helt og holdent om indholdet. I overvejelserne på designer har vi lagt væk på følgende: Brugervenlighed Fleksibilitet Minimal kodning Det første skridt til at skabe et minimalistisk design, eller bare et forenklet layout er ikke bare at skære det meste af grafikken, men snarer at genoverveje indholdet og fratage det alt, hvad der er overflødigt og som brugerne alligevel ikke bruger. Først da vil de vigtigste elementer på siden nå deres tilsigtede virkning. 11
Vi har i løbet af vores research og analyse af hjemmesiden fundet en række elementer, som vi ikke synes de besøgende ville få brug for: Ikoner til sociale medier (Facebook), hvis det skal med, så må det placeres i footeren og ikke midt i siden. Sider med mere end tre hovedafsnit. Pointen er ikke at gøre hjemmesiden mindre funktionel, men tværtimod at skære unødvendige elementer og dermed fremhæve de nødvendige af dem, eller at kombinere dele til en enklere layout. Automationsteknolog uddannelsens nuværende hjemmeside ser således ud: 12
Det er en hjemmeside med mange knapper, som man mange gange ser med sider på nettet, som skal formidle noget. EAL har forsøgt at skabe en brugervenlig hjemmeside, ved brug af få farver. Der er alt for mange undersider og man taber den røde tråd som læser med det samme, da både farverne og teksten bliver for monotont efter et par "klik" med musen. Siderne indeholder fakta om uddannelsen og information om EAL. Der er ingen billeder og det bliver tungt at skulle bære sig igennem. Man kunne måske have tænkt over følgende forbedringer: Mere tydelig opdeling af afsnittene Større overskrifter Stærke farver, der fanger opmærksomheden. Mere overskuelig og moderne. Minimalistisk design af egen hjemmeside Farven hvid er næsten synonymt med minimalismen. Ligegyldigt hvor kreativ man er, så er en af grundsøjlerne i minimalistisk design, den hvide farve. Minimalistisk design uden masser af hvide rum er ikke rigtigt minimalistisk. Så man skal være sikker på at tilføje mere hvide områder omkring elementer, end man normalt ville gøre. Dette er nødvendigt for at afbalancere de få elementer, man har tænkt sig at vise. Eksempel på vores eget design af en minimalistisk hjemmeside til Automationsteknolog uddannelsen: 13
Med billeder fra feltstudiet ser den således ud: 14
Et eksempel på at en hjemmeside ikke nødvendigvis behøver at indeholde en masse animation og grafiske spidsfindigheder for at være indbydende og brugervenlige. Ovenstående hjemmeside karakteriseres ved et enkelt minimalistisk design, brugervenlighed og fleksibilitet. Lys, luft og plads mellem tekst og billeder resulterer oftest i et udtryk af stil og harmoni. Fontvalg og skrifttype Web designer er ofte begejstrede over de mange spændende skrifttyper 5 der findes. En del af dem glemmer desværre bare at en eller anden specielt valgt skrifttype, ikke kan ses af andre, medmindre disse har den pågældende font installeret på deres computer. Det forholder sig således, at ikke definerbare skrifttyper vil blive erstattet af fonten Times, og er der tale om en skrifttype der familiemæssigt befinder sig alt for langt væk fra Timesfamilien, så kan resultatet blive uforudsigeligt og afhænge af den browser man bruger. Vi har derfor valgt at bruge fonten Times for at sikre at alle besøgende kan komme ind på hjemmesiden og ikke vil miste detaljerne, da Times fonten er installeret på alle Microsoft computere. Vi har brugt de mest almindelige skrifttyper til vores hjemmeside: Times New Roman, Georgia og Serif. Alle tre skrifttyper tilhører de fonte som er sikre og dvs. at alle der har en nyere og opdateret browser vil være i stand til at indlæse hjemmesiden uden problemer. 5 Font og skrifttyper: http://æbletræet.dk/index.php?title=skrifttyper (Hentet den 1-6-2012) 15
Interaktion Analyse: Vi har kodet og bygget hjemmesiden af HTML og CSS via Zend Studio programmet. Man kan bruge mange programmer for at bygge hjemmesider, der er f.eks. Dreamweaver, Netbeans, Zend Studio, Notepad kan også bruges, for den er meget nemmere og bruge især når man er nybegynder i HTML og CSS kodning. Men jeg har valgt og bruge Zend studio for vi er vant til den. Krav til websitet: Sitet kræver en browser, for man kan ikke se hjemmesiden uden en internetbrowser, en internetbrowser er det program på din computer, som du bruger til at gå på internettet med. Den mest brugte browser på markedet er Internet Explorer, men der findes mange andre browsere, som er gratis at downloade fra internettet. F.eks. Chrome, Safari, Firefox. Vi har testet hjemmesiden med Firefox og den virkede fint nok, for Firefox er meget bedre end Internet Explorer, for Internet Explorer går ned, for jeg har prøvet det mange gang med Internet Explorer f.eks. så viser den en anden resultat i browseren, men Firefox browseren viser hjemmesiden korrekt. Sitet kræver også skærmopløsning, for skærmen skal være tydeligt for hjemmesiden kan være mere synlig. Ellers kræver sitet ikke så meget, man skal bare have internetforbindelse, for hvis man ikke har internetforbindelse så virker browseren ikke. CSS kode: body{ background-image:url('bac5.jpg');/* Baggrunds billede */ background-repeat:no-repeat;/* Det betyder at baggrunds billedet ikke gentages */ } 16
Menu skrifttype 6 :.link{ font-family:"verdana";/ *Skrifttype */ } Menu style i CSS:.link a{ float:right; /* rykke links til højre */ margin-right:100px; /* rykke til højre */ margin-top:10px;/* rykke op ad */ color:#007175; /* links farve */ font-size:20px; /* skrift størrelse */ border:2px solid white; /* hvid ramme rundt om links */ } a:hover {color:white;} /* når man peger på linket så ændre den farve til hvid*/ a:active {color:##a79e99;} /* når man klikker på linket så ændre den farve */ a:link {text-decoration:none;} /* links er uden under linje */ border:3px solid #007175; /* en ramme rundt om, den kan ændres i pixels størrelse og farve*/ 6 Head First PHP & my SQL 17
Sitemap: 18
Konklusion I løbet af projektugen har vi planlagt, udarbejdet og udviklet en hjemmeside for Automationsteknolog uddannelsen. Vi startede ugen med at planlægge, brainstorme og samle informationer om uddannelsen, derefter gik vi i gang med at gennemgå de forskellige stilarter, som vi har arbejdet med i løbet af 1. semester. Vi blev enige om at, designe en minimalistisk hjemmeside, der skulle være enkel og brugervenlig for målgruppen. Arbejdet blev delt, så gruppens medlemmer kunne kode i HTML og CSS. Der blev skabt en række skitser for hjemmesiden. Ud fra de forskellige skitser blev vi enige om, at tage to af dem i brug og arbejde videre med færdiggørelsen af hjemmesiden. Det er lykkedes os, at skabe en ny, brugervenlig og overskuelig hjemmeside, ud fra EAL s nuværende hjemmeside. Fokus har fra starten været, at optimere og forenkle en rodet hjemmeside. Resultatet er en forbedret og kompatibel hjemmeside, der har skåret de overflødige grafiske elementer fra og bibeholdt det allervigtigste budskabet om uddannelsen. 19
Gruppeproces evaluering Allerførst startede vi med at overveje hvilke stilarter vi kunne arbejde med. Vi startede så med at gå på feltstudie og søge informationer, men da det var meget begrænset hvad vi kunne indsamle af informationer, tog vi til biblioteket i stedet og startede med at søge efter informationer på nettet. Efter vi havde taget en masse billeder af stedet, lavede vi et Gantt-kort, som vi har fulgt indtil projektets ende. Efter det var klaret, lavede vi en flowchart. Designdelen, derimod, var der lidt problemer med. Vi havde en masse ideer, så derfor ændrede vi vores design et par gange, indtil vi endte ud med det der kan ses nu, som vi er fuldt ud tilfredse med og stolte af. Alt i alt var dette projekt meget spændende, da vi kom frem til rigtige flotte design. 20
Gantt Kort Task mode Task name Duration Start 1 1) Projekt introduktion. 1 dag 25-5-2012 2) Etablering af fælles ambitionsniveau. 3) Aftale af deadlines og tidsforbrug. 4) Korrekt kommunikation og overholdning af aftaler. 2 Research af 1 dag 25-5-2012 Automationsteknolog uddannelsen. 3 Flowchart og Wireframes til opbygningen af hjemmesiden. 2 dage 26-5-2012 g 27-5-2012 4 Design og kodning vha. HTML og CSS. 5 Feltstudie, Automationsteknolog uddannelsen. Munke Mose Allé 9, 5000 Odense C. Alle gruppens medlemmer deltog i billedtagning og samling af informationer om uddannelsen. 6 Udarbejdelse af sider med indhold og rettelse af fejl i kodningen af hjemmesiden. Sidst på dagen foretog vi en test, for at se om det hele virkede efter planen. 7 Opstart på skrivningen af rapporten. 3 dage 27-5-2012 og 28-5-2012 og 29-5-2012 1 dag 29-5-2012 1 dag 30-5-2012 3 dage 30-5-2012 og 31-5-2012 og 01-6-2012 1 dag 30-5-2012 8 Vejledning + status ved Mona 9 Konklusion + Formaliteter 1 dag 01-6-2012 10 Færdiggørelse + Finpudsning 1 dag 01-6-2012 21
Kildeliste Bøger: International Markedsføring 4 udgave Finn Rolighed Andersen m.fl. TROJKA Head First PHP & MySQL 1 udgave Michael Morrsion O Reilly Media, Inc Hjemmesider: http://www.lucidchart.com/ (Hentet 1-6-2012) http://www.michael-ostergaard.dk/wireframing-hvad-er-det-hvorfor-skal-du-bruge-tid-paa-det (Hentet den 1-6- 2012) http://www.denstoredanske.dk/kunst_og_kultur/billedkunst/billedkunst,_stilretninger_efter_1910/minimalisme (Hentet den 1-6-2012) http://æbletræet.dk/index.php?title=skrifttyper (Hentet den 1-6-2012) 22