Midtvejsprojekt Udarbejdelse af portfolio 1. semester 2012 URL: http://webhotel.eamv.dk/mmd270850/portfolio/ Malene Thomsen Erhversakademi Midtvest MMD 1.A 26. oktober 2012
Indholdsfortegnelse 1. Introduktion... 1 2. Kravspecifikation... 1 2.1 Tekniske krav... 1 2.2 Brugernes forventninger... 1 3. Webkommunikation... 2 3.1 Afsender... 2 3.2 Modtageren... 3 3.3 Konteksten... 3 3.4 Kontakten... 4 3.5 Meddelelsen... 4 3.6 Koden... 4 4. Websitets design... 5 4.1 Brugervenlighed... 5 4.2 Komposition... 5 4.3 Kontraster... 6 4.4 Sites opløsning... 7 4.5 Skrifttyper... 7 5. Udarbejdelsen... 8 5.1 Galleri... 8 5.2 HTML/CSS-Compressor... 9 5.3 Tegn og symboler... 9 5.4 Fremtidige planer... 9 6. Konklusion... 10 7. Kilder... 10 8. Bilag... 11 8.1 Koncepttest/spørgeskemaundersøgelse... 11 8.2 Resultat af undersøgelse... 13 8.3 Roman Jakobsons kommunikationsmodel... 14 8.4 Besøg sitet her... 15 8.5 Skitse af hjemmesidens design Forside... 15 8.6 Skitse af hjemmesidens design Galleri... 16
8.7 Indholdskasser... 16 8.8 Størrelseskontrast Logo... 17 8.9 Styrkekontrast Indholdskasser... 17 8.10 Noscript-tag... 17 8.11 Galleri uden JavaScript... 18 8.12 Kommer snart!... 18 8.13 Logbog... 18
1. Introduktion I denne opgave udarbejdes en personlig portfolio i form af et website. Det er en tværfaglig opgave, hvor der skal opfyldes en række krav inden for de enkelte fag. I denne rapport redegøres der for, hvorfor jeg har gjort som jeg har gjort. Der skal ligeledes gøres brug af faglige begreber, og formålet er at bruge hvad vi har lært fra undervisningen. Dette projekt er både lærerigt og udfordrende, da man står på egne ben og skal prøve at lave noget på egen hånd. Den udarbejdede portfolio skal gennem tiden forbedres, og på den måde får vi rettet op på de fejl der eventuelt skulle være. Portfolioen er med til at fange fremtidige kunders opmærksomhed, og skal derfor virke interessant og troværdig. 2. Kravspecifikation I forbindelse med udarbejdelsen af websitet opstår der en række krav, som skal opfyldes. Dette ses blandt andet når man starter et samarbejde med en virksomhed, som har en række ønsker og krav til den kommende website. I denne situation er der opstillet en række krav til opgaven. 2.1 Tekniske krav Opgaven har nogle tekniske krav som skal opfyldes. Websitet skal være validerbart i XHTML 1.1 og CSS 2.X eller nyere. Derudover skal siden indeholde et galleri, en startside og minimum fire undersider. Dertil skal layoutet styres af én CSS-fil. Der må ikke anvendes Flash, og hvis JavaScript skulle forekomme, skal sitet alligevel være funktionelt hvis brugeren ikke har JavaScript installeret eller slået til. Websitet skal vises ens i de fem forskellige browsere: Internet Explorer, Mozilla Firefox, Google Chrome, Safari og Opera. Selvom statistikkerne siger, at Internet Explorer stadig er den mest anvendte, og at Opera knap bliver brugt, er dette væsentligt for websitet 1. 2.2 Brugernes forventninger Under udarbejdelsen af den personlige portfolio, har det været relevant at vide, hvad kommende brugere eller kunder forventer af siden. Derfor er der udarbejdet en koncepttest i form af et 1 Browser statistik - http://gs.statcounter.com/#browser-dk-monthly-201109-201209 24. oktober 2012 Midtvejsprojekt Udvikling af portfolio Side 1 af 21
spørgeskema, som er sendt ud til en række både store og små virksomheder 2. Spørgeskemaet er kvantitativt med en række afkrydsningsspørgsmål, men der er også mulighed for at tilknytte en kommentar til spørgsmålene. De adspurgte har blandt andet svaret på, hvad de kigger mest på, når de skal finde en webdesigner. Ca. 83 % af de adspurgte kigger mest på tidligere produktioner. Derudover er der også ønske om, at siden skal have et personligt look, og samtidig skal den være overskuelig og brugervenlig 3. På den måde har jeg en række krav fra brugerens side, som også skal opfyldes. Derigennem har jeg analyseret mig frem til, at de fleste blot tænker på sites udseende samt egne produktioner. Ting som links til Twitter, Facebook mm. er knap så relevante, så længe der findes andre kontaktoplysninger i form af e-mailadresse og telefonnummer. Desuden ønsker de fleste blot, at siden viser hvad man kan, hvem man er og hvad man beskæftiger sig mest med. 3. Webkommunikation Når man opretter et website er formålet som afsender at kommunikere noget ud til modtagerne. I den forbindelse er det relevant at kigge på de forskellige kommunikationsmodeller. Der findes blandt andet IMK-modellen, Roman Jakobsons kommunikationsmodel, Lisbeth Thorlacius kommunikationsmodel mfl. Jeg vil med udgangspunkt i Roman Jakobsons kommunikationsmodel 4 beskrive kommunikationen på mit website. 3.1 Afsender Når man laver et website er der altid en afsender. For det meste er der tale om en virksomhed eller forening, men i dette tilfælde er det mig selv der er afsenderen. Jeg vil fremstå som kvalitetsbevidst, og samtidig fortælle modtageren at jeg står inde for mit arbejde. Jeg har dermed gjort brug af den emotive funktion 5, da jeg vil overbevise modtageren om, at man kan regne med at jeg leverer kvalitet og brugbare websites. Den emotive funktion har som udgangspunkt hensigten at udtrykke holdninger, følelser mm. Med hensyn til mit design har jeg valgt at gøre brug af farven blå, da blå symboliserer kvalitet og stabilitet 6. Derigennem er der også gjort brug af 2 Koncepttest i form af spørgeskema Se bilag 8.1 3 Resultater af spørgeskemaundersøgelse Se bilag 8.2 4 Kirsten Drotner, Klaus B. Jensen mfl. Medier og Kultur Roman Jakobsons kommunikationsmodel Se bilag 8.3 5 Kirsten Drotner, Klaus B. Jensen mfl. Medier og Kultur Den emotive funktion 6 Farvesymbolik http://danskundervising.wikispaces.com/file/view/farvesymbolik.pdf 20. oktober 2012 Midtvejsprojekt Udvikling af portfolio Side 2 af 21
appelformen ethos 7, som er kort sagt drejer sig om afsenderens troværdighed. Derfor har jeg valgt at udvise klogskab i form af en faglig forklaring af, hvad jeg kan levere. Dette har en hvis effekt på modtageren, selvom man måske snakker lidt over hovedet på ham eller hende. Man kan også tænke på eksemplarisk ethos 8 i forbindelse med driften af hjemmesiden. Hvis siden sjældent bliver opdateret og henvendelser aldrig bliver besvaret, udtrykker man ikke længere kvalitet og troværdighed. Eftersom der findes så mange forskellige hjemmesider på nettet i dag, er det vigtigt at skille sig ud som afsender, ellers vil brugeren blot forlade siden igen og finde et andet alternativ. Derfor er det også vigtigt at brugeren ved hvad hjemmesidens hensigt er. Derfor har jeg valgt at smide et splashbillede på forsiden, så brugeren kan se hvad jeg blandt andet laver. Derudover står der stort i toppen at det er en portfolio, så brugeren ved hvad der er tale om. På den måde har jeg mig selv med hele vejen igennem, så jeg fremstår som jeg selv ønsker, nemlig stabil og kvalitetsbevist. 3.2 Modtageren Målgruppen til sitet er primært personer eller virksomheder, som ønsker at få lavet et website. Derfor er det vigtig for mig, at ramme lige præcis den målgruppe. Hensigten med sitet er at fange folks opmærksomhed, så der i fremtiden kunne opstå et samarbejde. Der er derfor gjort brug af den konative funktion 9 i form af, at jeg ønsker at kunden henvender sig til mig, hvis de har brug for at et nyt website. Dette ses tydeligst på siden med kontakt, da jeg sælger mig selv ved at fortælle hvad jeg kan garantere. Samtidig garanterer jeg tilbagemelding inden for én hverdag, så folk ved besked inden længe. Allerede fra start har jeg mulighed for at vise kunden, at jeg er til at stole på, hvis de modtager svar inden for den lovede tidsperiode. Jeg frister altså kunden til at kontakte mig, da jeg tilbyder og garanterer meget, men alligevel overdriver jeg ikke, så kunden i sidste ende føler sig narret. 3.3 Konteksten I selve konteksten har jeg gjort brug af den referentielle funktion 10, som refererer til den virkelige verden, og består blandt andet af faglig information. Jeg fortæller de faglige forhold i mine designs 7 Lis Holm og Birgitte Norlyk Ord der brander Appelformen Ethos Side 45 8 Elisabeth Hoff-Clausen Set gennem nettet 1. udgave, 2. oplæg 2004 Kapitel 3 9 Kirsten Drotner, Klaus B. Jensen mfl. Medier og Kultur Den konative funktion 10 Kirsten Drotner, Klaus B. Jensen mfl. Medier og Kultur Den referentielle funktion Midtvejsprojekt Udvikling af portfolio Side 3 af 21
og dermed fortæller jeg kort sagt modtageren hvad de kan forvente, uden garanti for at kunden er indforstået med, hvad dette betyder. Jeg har også anvendt appelformen logos 11, da jeg har til hensigt at informere modtageren om, hvad jeg kan tilbyde. Med logos argumenterer man objektivt og henvender sig til brugere, som har et ønske om at blive klogere på et område. Dette er også meningen med min side, da jeg skal informere om hvad jeg kan tilbyde både fagligt og kreativt. 3.4 Kontakten Kontakten mellem brugeren og brugerfladen er væsentlig for brugervenligheden. Jeg har gjort brug af den fatiske funktion 12, som sikrer en god kommunikation blandt afsender og modtager. Alle mine sider ligner hinanden, har samme design, layout, farver, fonte mm. Brugeren er ikke i tvivl om, at de stadig befinder sig på min side. Når brugeren benytter sig af linket Besøg sitet her 13 under Webdesigns, ændrer udseendet sig væsentligt, da det jo ikke er samme side brugeren befinder sig på længere. På den måde ved kunden også, at de er på vej væk fra min side, og altså kan benytte browserens tilbageknap. 3.5 Meddelelsen Mit budskab på siden er, at kunderne skal benytte sig af mig til deres kommende webdesign. Dette udtrykker jeg blandt andet ved at vise hvad jeg kan og har lavet. Tidligere har jeg beskrevet valget af farver, som er den blålige nuance. Denne har jeg gjort brug af, da det udtrykker kreativitet, og er derfor en oplagt farve til min side. 3.6 Koden For at kunden eller brugeren kan afkode mit budskab, er det væsentligt at de har kendskab til websites på den ene eller anden måde. Hvis kunden kender til problemer fra andre websitets, som er uoverskuelige og umulige at finde rundt på, er kunden opmærksom på, hvor vigtigt det er, at siden er både brugervenlig, funktionel og effektiv at bruge. På den måde kan man sige, at andre dårlige websites er med til at åbne øjnene op hos min målgruppe og mine modtagere. 11 Lis Holm og Birgitte Norlyk Ord der brander Appelformen Logos Side 45 12 Kirsten Drotner, Klaus B. Jensen mfl. Medier og Kultur Den fatiske funktion 13 Besøg sitet her Link til funktionel side af designs Se bilag 8.4 Midtvejsprojekt Udvikling af portfolio Side 4 af 21
4. Websitets design En hjemmeside danner ofte førstehåndsindtrykket hos en eventuel ny kunde. Derfor er det vigtigt at tænke meget på designets udformning. Man skal blandt andet kigge på en række regler og love, som danner baggrunden for et godt og brugervenligt design. 4.1 Brugervenlighed I forbindelse med brugervenligheden har jeg blandt andet benyttet mig af Rolf Molichs definition af brugervenlighed. Definitionen består af følgende fem punkter: Sitet skal være let at lære, let at huske, effektivt at bruge, forståeligt og tilfredsstillende at bruge 14. Hvis man kigger på mit website, er sitet let at lære, da det ikke tager brugeren lang tid at finde frem til det de ønsker. På samme måde er det også let at huske, og der skal altså ikke bruges lang tid på at genindlære sitet. Siden er også effektiv at bruge, og skulle der opstå problemer på siden, vil kunden blive gjort opmærksom på dette. Dette ses blandt andet ved gallerierne, som kræver at JavaScript er installeret og slået til. Hvis det modsatte er tilfældet, vil der vises en fejlmeddelelse samt to løsningsmuligheder. Man kan vælge at installere JavaScript, eller man kan klikke sig ind på et andet galleri, som ikke kræver JavaScript. Fejlmeddelelsen er meget iøjefaldende da den blinker, og på den måde bliver den fremhævet. Til gengæld er de to links blot helt almindelige uden blink, så det er lettere for kunden at bruge linket. 4.2 Komposition Ved udarbejdelsen af websitets design har jeg lavet en skitse med papir og blyant 15. På denne skitse er der anført størrelser i pixels, så det var hurtigt og ligetil at gå i gang med at lave det i HTML og CSS. Derudover forestiller skitsen primært forsiden, som skal indeholde et splashbillede samt en lille tekst. På skitsen ses også, at der muligvis skal være plads til en ekstra indholdskasse i bunden, hvilket først blev afgjort da jeg så siden i en browser. På den måde er skitsen altså kun et udkast til det endelige design. I toppen er der gjort plads til logo, menu og en lille tekst der indikerer hvad sitet indeholder. Der er også anført baggrundsbillede i en bestemt størrelse, som er besluttet ud fra de forskellige statistikker om skærmoplysninger. Dette vil blive beskrevet nærmere. 14 Rolf Molich Brugervenligt webdesign Nyt teknisk forlag 2. udgave 15 Skitse af hjemmesidens design Forsiden Se bilag 8.5 Midtvejsprojekt Udvikling af portfolio Side 5 af 21
Ligeledes er der lavet en skitse til et galleri, som fungerer uden JavaScript installeret eller slået til 16. Denne side skulle være enkelt og let at benytte sig af, og gennem en skitse blev siden ret funktionel. Det endte med at siden også kan bruges til de resterende brugere, som har JavaScript på deres computere, da det allerede eksisterende galleri ikke giver mulighed for at tilknytte en billedbeskrivelse. På min skitse ses en indholdskasse i bunden, hvor der er mulighed for at skrive detaljer omkring det enkelte billede. Disse skitser er også hjælpsomme senere hen, da størrelsen på billedet også er angivet derpå. Ved designet af siden har jeg haft Gestaltloven i baghovedet hele vejen igennem. De forskellige indholdskasser rundt på siden viser, at dét man ser i indeni kasserne hører sammen. Der er tale om loven om lukkethed 17, da de forskellige sammenhørende elementer er i lukket inde i kasser. Disse kasser går igen på alle sitets sider, dog tilpasset i forskellige størrelser, alt efter hvad kasserne skal indeholde. Blandt andet er den mindste kasse lavet til at vise detaljer om de forskellige billeder, og den største er lavet til beskrivelsen af mig selv 18. 4.3 Kontraster Der findes forskellige kontraster 19, som alle har betydning for måden vores website bliver set på. Vi kan blandt andet kigge på størrelseskontraster. Det er meget normalt at gøre brug af denne til overskrifter eller andre vigtige tekster. Mine overskrifter er dermed også større end den resterende tekst, da det er væsentligt at vide hvilken side man befinder sig på. Størrelseskontrasten bruges også til at fremhæve billeder eller vigtige elementer i designet. Mit logo øverst til venstre har store bogstaver, men også en cirkel som udfylder hele kassen 20. På den måde er den meget iøjefaldende uden at være for ekstrem. En anden kontrast er styrkekontrasten, som jeg har gjort brug af i mine indholdskasser. Der er forskel i forholdet mellem lys og mørke, idet den lyse kasse indikerer hele indholdsområdet på sitet, og den lidt mørkere kasse viser, at her er der noget væsentligt 21. Dette ses også ganske enkle 16 Skitse af hjemmesidens design Galleri Se bilag 8.6 17 Henrik Birkvig Sådan laver du Smukkere grafisk design Forlaget Grafisk litteratur 2. udgave, 2. oplæg 2008 18 Indholdskasser Se bilag 8.7 19 Henrik Birkvig Sådan laver du Smukkere grafisk design Forlaget Grafisk litteratur 2. udgave, 2. oplæg 2008 20 Størrelseskontrast Logo Se bilag 8.8 21 Styrkekontrast Indholdskasser Se bilag 8.9 Midtvejsprojekt Udvikling af portfolio Side 6 af 21
steder som overskrifter, hvor de er fremhævet med fed skrift. I forhold til mit design har jeg også valgt at give den en anden farve, hvilket jeg vil vende tilbage til. Formkontrasten opstår når der er gjort brug af forskellige former i designet. Mit design er primært meget firkantet, men for at give det lidt bedre balance, har jeg valgt at gøre logoet rundt. Logoet går igen på alle sider, og er derfor væsentlig at bruge til at bryde formerne lidt, så det hele ikke bliver alt for firkantet og ubehageligt for øjet. Med hensyn til farvekontrasten har jeg primært benyttet mig af mæthedskontrasten. Jeg har ikke anvendt komplementere farver, som benyttes til at fremhæve hinanden. Jeg har altså benyttet forskellige nuancer af den blålige farve, hvor nogle af dem er meget rene, mens andre er mere grålig at kigge på. Igen kan der henvises til de forskellige indholdskasser samt baggrundsbilledet. Som beskrevet ovenfor har jeg benyttet mig af den blå farve til mine overskrifter, da dette også giver en bedre effekt for sitets som helhed. 4.4 Sites opløsning Umiddelbart virker opløsningen mindre relevant, men udseende betyder mere end man lige regner med. Blandt andet er en side med mange scrollbars uoverskuelig og ser ikke særlig professionel ud. Min side er lavet i en størrelse der hedder 960 x 650 pixels, med en topmargen på 10 pixels. Denne størrelse er valgt med hensyn til dansk statistik, som viser at de fleste bruger en skærmopløsning på 1366 x 768 pixels 22. Derudover har jeg lavet et centreret baggrundsbillede i størrelsen 2000 x 2000 pixels, så jeg er ret godt dækket ind i forhold til statistikken. Billedet er dog ikke af bedste kvalitet, da dette vil gøre sitet langsomt og tungt. Til gengæld giver den dårlige kvalitet en fed effekt. Hvis der skulle være nogle få tilfælde, hvor billedet ikke er stort nok, vil den resterende baggrund blive sort, så det matcher så godt det nu kan. 4.5 Skrifttyper Valget af skrifttyper er ikke helt ligegyldigt, da kun få er websikre. Der er ganske få skrifttyper som er installeret på de fleste computere, og det skal man altså også tage hensyn til. Blandt websikre fonte findes der Arial, Verdana, Tahoma, Trebuchet og Helvetica 23. Jeg har derfor gjort brug af 22 Skærmopløsninger http://fdim.dk/statistik/teknik/skaermoploesning 10. oktober 2012 23 Websikre fonte http://www.hjemmeside.dk/brugervenlighed-er-vigtigt.html 22. oktober 2012 Midtvejsprojekt Udvikling af portfolio Side 7 af 21
Arial, Helvetica, sans-serif og serif. På den måde er jeg sikret med hvilket som helst styresystem, så min tekst vises ordentlig hos alle brugere. Skrifttyperne er tilføjet i til min body i min CSS-fil, så al indhold vil blive vist på den måde. 5. Udarbejdelsen Hjemmesiden er udarbejdet i Adobe Dreamweaver CS6 og er lavet validerbart i XHTML 1.1 og CSS3. Designet vises ens i samtlige browsere og lever derfor op til de forskellige krav. Med hensyn til udarbejdelsen af et galleri, har dette været et lidt større projekt. Derudover er der en lang række andre overvejelser, som også indgår i kodningen af hjemmesiden. 5.1 Galleri Når man skal lave et moderne og stilfuldt galleri, er Shadowbox 24 en super nem og hurtig løsning. Shadowbox bruger nogle super fede effekter, som gør det behageligt at kigge på. Billedet kan desuden vises i fuld størrelse, og man behøver derfor ikke at tage hensyn til resten af designet. Det er kun billedet der er i fokus, hvilket vil sige at resten af siden bliver nedtonet, så man ikke tænker videre over dette. Desværre kræver Shadowbox at JavaScript er installeret og slået til på din computer, hvilket ikke er alle der har dette. Derfor er det nødvendigt at have en anden løsning, så sitet fungerer optimalt for alle brugere. I dette tilfælde har jeg gjort brug af et såkaldt noscripttag 25, som går ind og fortæller hvis brugeren ikke har JavaScript på deres computer. I dette tilfælde har jeg givet et link til at installere JavaScript, men jeg har også tilføjet et link til et andet galleri. Dette galleri er ikke særlig vedligeholdelsesvenligt, og ender ud i rigtig mange undersider til hjemmesiden 26. Af bilaget er der markeret fire fotox.html filer samt fem webx.html filer. Alle disse filer kunne være undgået ved udelukkende brug af Shadowbox. Man kunne også undgå dette ved at lade billederne åbne for sig selv i browseren, men dette er ikke brugervenligt, da brugeren kan føle de kommer væk fra sitet, da designet og udseendet ændrer sig markant. 24 ShadowBox http://www.shadowbox-js.com/ 24. oktober 2012 25 Noscript-tag Se bilag 8.10 26 Galleri uden JavaScript og dets følger Se bilag 8.11 Midtvejsprojekt Udvikling af portfolio Side 8 af 21
5.2 HTML/CSS-Compressor For at websitet skal fylde så lidt som muligt, er det væsentligt at rydde lidt op i koderne. Dette kan gøres ved hjælp af en række værktøjer på nettet 27 eller via tilføjelser til f.eks. Mozilla Firefox 28. Disse værktøjer går ind og fjerner alle overflødige linjeskift og mellemrum mm. Desværre skal man være opmærksom på, at man selv skal tilføje de forskellige kommentarer rundt omkring bagefter, da værktøjerne også fjerner disse. Dette er dog ikke så besværligt når man blot kender lidt til sine koder. Kommentarerne er også gode at beholde, hvis man f.eks. arbejder i en gruppe og flere er inde over kodningen af sitet. 5.3 Tegn og symboler Når man skriver i HTML er der nogle koder man skal være opmærksom på. Blandt andet er det en god ide at droppe brugen af æ, ø og å, da ikke alle browsere kan vise disse. Derfor skal man ind og bruge en kode for disse bogstaver. Æ erstattes derfor af æ, ø af ø og å af å. Derudover har jeg gjort brug af et symbol til mit design af menuen. Symbolet ser således ud: ~ og skrives ~ i HTML. Den sidste jeg har anvendt er det usynlige mellemrum. I nogle tilfælde er det nødvendigt at benytte sig af denne, da koden ikke altid registrerer et almindeligt mellemrum. I stedet skal man da benytte sig af denne kode:   ; 29. Hvis man ikke benytter sig af disse koder fra start og dermed først skal ændre det efterfølgende, har Dreamweaver en Find og Erstat funktion. Man skal dog være lidt forsigtig med den, da koderne kan ændres uventet. 5.4 Fremtidige planer I fremtiden skal hjemmesiden fortsat forbedres og vedligeholdes. Der er dog allerede nu en række ting, som endnu ikke er helt oppe at køre. Jeg har benyttet mig af en midlertidig løsning, da jeg har gjort brug af et billede hvor der står Kommer Snart! 30. Dette skyldes at mit galleri er designet til fem billeder, men jeg har på nuværende tidspunkt kun udarbejdet fire. For at designet stadig ser godt ud, har jeg derfor gjort som jeg har gjort. Der mangler desuden også lidt mere, der viser hvem jeg er. Der er ikke noget der viser mine holdninger, min personlighed mm. Derfor skal der i fremtiden gennemtænkes en mere frisk forside, hvor mit sande jeg bliver vist. En hjemmeside er 27 HTML/CSS-Compressor http://www.textfixer.com/html/compress-html-compression.php 24. oktober 2012 28 CSS-Compressor https://addons.mozilla.org/da/firefox/addon/yslow/?src=search 24. oktober 2012 29 Tegn og symboler http://www.degraeve.com/reference/specialcharacters.php 24. oktober 2012 30 Kommer snart! Se bilag 8.12 Midtvejsprojekt Udvikling af portfolio Side 9 af 21
aldrig færdig, den skal altid holdes ved lige og viderebygges. Det er en kamp om tiden, da der hele tiden kommer nye muligheder og teknologier til at forbedre de forskellige sites 31. 6. Konklusion I forbindelse med opgaven har der været en række udfordringer. Det har dog været meget lærerigt og spændende. Under forløbet har jeg fundet ud af, at mine ønskede forventninger ikke kunne udleves, eftersom jeg ikke har kompetencerne til dette endnu. Der er også opstået vanskelige situationer, hvor jeg har skullet lave en ændring i min menu. Dette skulle ændres i alle mine HTML-filer, da vi endnu ikke har lært omkring en løsning til dette. Alt i alt har jeg lært rigtig meget af dette projekt, og selvom jeg føler at hjemmesiden kan forbedres til hver en tid, har jeg fundet ud af hvordan jeg ligger både fagligt og kreativt. 7. Kilder Internettet - 10. oktober 2012 http://fdim.dk/statistik/teknik/skaermoploesning - 20. oktober 2012 http://danskundervising.wikispaces.com/file/view/farvesymbolik.pdf - 22. oktober 2012 http://www.hjemmeside.dk/brugervenlighed-er-vigtigt.html - 24. oktober 2012 http://www.shadowbox-js.com/ - 24. oktober 2012 http://www.textfixer.com/html/compress-html-compression.php - 24. oktober 2012 https://addons.mozilla.org/da/firefox/addon/yslow/?src=search - 24. oktober 2012 http://gs.statcounter.com/#browser-dk-monthly-201109-201209 Bøger - Rolf Molich Brugervenligt webdesign Nyt teknisk forlag 2. udgave - Kirsten Drotner, Klaus B. Jensen, Ib Poulsen og Kim Schrøder Medier og Kultur - Lis Holm og Birgitte Norlyk - Ord der brander Handelshøjskolens forlag 2006 - Henrik Birkvig Sådan laver du Smukkere grafisk design Forlaget Grafisk litteratur 2. udgave, 2. oplæg 2008 - Elisabeth Hoff-Clausen Set gennem Nettet 1. udgave, 2. oplæg 2004 31 Elisabeth Hoff-Clausen Set gennem nettet 1. udgave, 2. oplæg 2004 Kamp om tiden Midtvejsprojekt Udvikling af portfolio Side 10 af 21
8. Bilag 8.1 Koncepttest/spørgeskemaundersøgelse Forventninger til en webdesigners portfolio Vi er en gruppe, der læser til Multimediedesignere på Erhvervsakademi MidtVest og arbejder med et projekt omkring en personlig portfolio. I den forbindelse har vi udarbejdet dette spørgeskema, som vi håber at du/i vil bruge et kort øjeblik på at besvare. Målgruppen er primært kommende arbejdsgivere, kunder, praktiksteder og samarbejdspartnere. Spørgeskemaet lukker ned på fredag den 12.10.12 kl. 12.00. På forhånd tak for hjælpen! 1. Hvilken virksomhed er du/i tilknyttet? (Undersøgelsen er anonym og bliver kun brugt i forbindelse med uddannelsen) 2. Din/jeres arbejdsopgave? o Virksomhedsejer o Beslutningstager vedr. websites i virksomhed o Arbejder indenfor webdesign o Andet (Angiv venligst) 3. Hvad fokuserer du/i på ved valg af webdesigner? (Marker de 3 vigtigste) Jeg/vi ser på uddannelser Jeg/vi ser på karakter Jeg/vi ser på prisen Jeg/vi ser på referencer Jeg/vi ser på tidligere produktioner (portfolio) Jeg/vi ser på geografisk nærhed Jeg/vi ser på den personlige kontakt/netværk Andet/kommentarer (Angiv venligst) Midtvejsprojekt Udvikling af portfolio Side 11 af 21
4. Hvad forventer du/i af informationer på webdesignerens portfolio/website? (Marker de 3 vigtigste) Eksempler på tidligere egne produktioner (websites mm.) Links til tidligere kunder/produktioner Uddannelser Erfaringer Link til Twitter Link til LinkedIn Link til Facebook Kontaktoplysninger Andet (Angiv venligst) 5. Som multimediedesignere kan vi specialisere os i forskellige retninger. Derfor vil vi til sidst spørge ind til behovet virksomheden forventes at have i fremtiden. Grafisk designere Programmører Tekstforfattere Andet (Angiv venligst) 6. Ansættelse af ovenstående Fastansættelse (fx 37 timer/ugen) Projektansættelse (fx 6 mdr. til et projekt) Freelance (fx 40 timer til en opgave) Firma som underleverandør Andet (Angiv venligst) Midtvejsprojekt Udvikling af portfolio Side 12 af 21
8.2 Resultat af undersøgelse Resultaterne er bygget på i alt 12 besvarelser fra forskellige virksomheder. Deriblandt er nogle tilknyttet samme virksomhed. 1. Hvilken virksomhed er du/i tilknyttet? (Undersøgelsen er anonym og bliver kun brugt i forbindelse med uddannelsen) Trendware, TINXDK, ABClean, Konceptas, Frantz Schrum Broliftudlejning, Box Nordic ApS, Music and Lyrics, Idé-sign, Hansens Service, Unimedia. 2. Din/jeres arbejdsopgave? Andet: 1. Grafiker 2. Regnskab og kørsel med brolifte 3. Salg, projekt- og produktionsstyring 3. Hvad fokuserer du/i på ved valg af webdesigner? (Marker de 3 vigtigste) Andet/Kommentar: Designeren skal lave en flot, og anderledes side, men også let at finde rundt på/i. Siden må gerne have et personligt look. Midtvejsprojekt Udvikling af portfolio Side 13 af 21
4. Hvad forventer du/i af informationer på webdesignerens portfolio/website? (Marker de 3 vigtigste) Andet/kommentarer: At det tydeligt fremgår hvad personens spidskompetance eller interesseområde er. 5. Som multimediedesignere kan vi specialisere os i forskellige retninger. Derfor vil vi til sidst spørge ind til behovet virksomheden forventes at have i fremtiden. 6. Ansættelse af ovenstående 8.3 Roman Jakobsons kommunikationsmodel Afsender Kontekst Meddelelse Kontakt Kode Modtager Emotiv Referentiel Poetisk Fatisk Metakommunikativ Konativ Midtvejsprojekt Udvikling af portfolio Side 14 af 21
8.4 Besøg sitet her 8.5 Skitse af hjemmesidens design Forside Midtvejsprojekt Udvikling af portfolio Side 15 af 21
8.6 Skitse af hjemmesidens design Galleri 8.7 Indholdskasser Midtvejsprojekt Udvikling af portfolio Side 16 af 21
8.8 Størrelseskontrast Logo 8.9 Styrkekontrast Indholdskasser 8.10 Noscript-tag <noscript> </noscript> Midtvejsprojekt Udvikling af portfolio Side 17 af 21
8.11 Galleri uden JavaScript 8.12 Kommer snart! 8.13 Logbog Mandag d. 8. oktober 2012 Ca. 6,5 timer I dag har jeg udarbejdet en skitse af websitets design med papir og blyant. På skitsen er der påskrevet størrelser i pixels, som er valgt ud fra statistikker, så designet er velegnet til de fleste brugere. Farvetemaet er på plads, og vil bestå af forskellige blålige nuancer. De fleste designelementer er designet og lavet i Adobe Photoshop i rigtige størrelser. De gemte designelementer er gemt i den oprettede CSS, som er tilknyttet til HTML-koden. På den måde kan jeg altid ændre designelementerne og erstatte de eksisterende filer. Det sparer mig for en masse tid i fremtiden. Hjemmesidens design er gjort validerbart både i CSS en og i HTML en. Siden er Midtvejsprojekt Udvikling af portfolio Side 18 af 21
testet i samtlige browsere, men Internet Explorer 9 viser ikke sitet ordentligt med hensyn til Sticky Footer. I morgen skal der findes en løsning på dette. Tirsdag d. 9. oktober 2012 Ca. 2,5 timer Dagen starter med at gennemse de forskellige koder, for at finde frem til fejlen i Internet Explorer 9. Det har dog ikke været muligt at finde frem til fejlen, og derfor har jeg sendt en mail af sted til Don. I mellemtiden har jeg været på udkig efter en anden løsning til galleri, da Shadowbox, som vi kender fra undervisningen, kræver Java installeret. Har dog heller ikke fundet nogen løsning, som kun benytter sig af HTML og CSS. Er derfor begyndt at rode med Shadowbox, som jeg skal have til at virke optimalt, og samtidig skal jeg have fundet en løsning som fungerer uden Java. Onsdag d. 10. oktober 2012 Ca. 8,5 timer Vi samledes nogle stykker på skolen, for at udarbejde et spørgeskema til forundersøgelsen. Denne er blevet sendt ud til de forskellige virksomheder. Derudover har jeg fået galleriet til at virke, der skal blot findes en løsning uden Java. Designet af websiden er forandret en del, da jeg har undladt at benytte Sticky Footer. Sitet blev faktisk bedre uden, da jeg indså at kontaktoplysninger i bunden ikke var så relevant for mit site. Der er også lavet et logo til siden. Torsdag d. 11. oktober 2012 Ca. 10 timer Lave videre på designet til de forskellige undersider. Der skal gøres brug af kasser i forskellige størrelser. Her er der tænkt på Gestaltlovene, reglen om lukkethed. Alt der hører sammen sidder i én kasse med lav opacity så man kan tyde baggrundsbilledet. Baggrundsbillede er lavet i størrelsen 2000 x 2000 pixels, dog i dårlig kvalitet, da dette ellers vil blive for tungt at hente i forhold til de andre elementer. Der er blandt andet lavet en kasse til fremvisning af de fem nyeste designs, som også skal vises på samme måde under billeder. Dog har jeg kun to designs at fremvise, men planen er at lave en Google Collection med alle fire årstider, da jeg allerede har lavet den med efterår. Da der er gjort brug af Java til dette galleri, har jeg opsat en Noscript funktion, som fortæller at galleriet fungerer bedst med Java. Denne tekst har fået blinke effekt, så brugeren hurtig ser det. Ved siden af er der links uden blink, så brugeren nemt kan trykke på de to links. Midtvejsprojekt Udvikling af portfolio Side 19 af 21