innovating communication

Transkript

1 innovating communication Multimediedesigneruddannelsen, 2. semester Eksamensprojekt, maj 2010 Erhvervsakademiet København Nord, Trongårdsvej 44, Lyngby

2 Indholdsfortegnelse 1.0 Introduktion 1.1 Indledning 1.2 Virksomhedsvalg 1.3 Problemformulering 1.4 Projektplan 2.0 Analyse af virksomhed 2.1 SWOT analyse 2.2 Kommunikation analyse Målgruppe Kommunikationsmodel 2.3 Marketing analyse De 4 P er 2.4 Vision, mission og værdier 2.5 Research af nuværende visuel identitet 3.0 Usability af nuværende website 3.1 Gangstertest 4.0 Forslag til kommunikation og marketing 5.0 Visuel Identitet 5.1 Brainstorm 5.2 Designbrief 5.3 Farver 5.4 Logo 5.5 Typografi 5.6 Implementering Udvikling af prototype 6.1 Navigationsdiagram 6.2 Wireframe 6.3 Mockup 6.4 SEO 6.5 Kode eksempler HTML CSS JavaScript / jquery 6.6 Resultat 7.0 Usability af prototype website 7.1 Undersøgelsesdesign Brugertest Spørgeskema Gangstertest 7.2 Forslag til ændringer 8.0 Afsluttende 8.1 Revideret projektplan 8.2 Konklusion 8.3 Reflektion

3 A Appendiks - Referencer A.1 Referencer B Appendix - Bilag B.1 Mail fra Martin Jensen, Solutors B.2 Merchandise B.3 Brugertest B.4 Spørgeskema B.5 Gangstertest B.6 CD

4 Introduktion I dette kapitel vil vi give en kort introduktion til projektet samt problemstillingen. Ydermere vil en projektplan kunne ses som vil vise forløbet. 1.1 Indledning 1.2 Virksomhedsvalg 1.2 Problemformulering 1.3 Projektplan

5 1.1 Indledning Verden bliver mere og mere digital og det presser virksomheder ud i at få en god e-handelsløsning. Hvis virksomheder ikke kan tilpasse sig dette står de betydeligt svagere end virksomheder der kan. Dette er grunden til at flere og flere virksomheder vil have lavet et nyt website eller redesignet deres nuværende website. 1.2 Virksomhedsvalg Til denne opgave har vi valgt virksomheden Solutors. Vi har været på virksomhedsbesøg hos dem, hvor de fik givet os et indtryk af et meget professionelt, men samtidig personligt sted at være. De er meget glade for studerende der viser interesse i deres virksomhed, og har derfor tilbudt deres hjælp hvis vi har haft nogle spørgsmål mv. Det indtryk vi fik af virksomheden stemte dog ikke overens med det indtryk vi fik fra deres website. Dette gav os lyst til at skabe en ny og mere professionel visuel identitet, og herunder udvikling af et nyt website dog kun en prototype. En anden faktor for at vores valg faldt på Solutors var deres imødekommende og gæstfrie attitude. Vi håber samtidig, at det er muligt at komme ud og præsentere det endelige resultat for Solutors. Solutors website er: Problemformulering Vi har fået til opgave at lave et website med e-handelsløsning til en virksomhed. Dette website skal bygges op ud fra test og analyse af virksomhedens nuværende position på markedet samt deres værdier. På baggrund af dette har vi valgt følgende overordnede problemstilling. Hvordan skaber vi en prototype af websitet der overholder virksomhedens værdier gennem en fornyet visuel identitet, som samtidig kommunikerer og appellerer til virksomhedens målgruppe. Denne løsning skal vise Solutors ellers professionelle standard, og derved skabe en gennemført virksomhedsprofil. For at besvare denne problemstilling bedst muligt vil vi også komme ind på følgende problemstillinger: - Ny visuel identitet for Solutors - Analyse af Solutors position på markedet - Analyse af Solutors målgruppe - Analyse af Solutors værdier 5

6 1.4 Projektplan 6

7 Figur 1.1: Projektplan 7

8 Analyse af virksomhed I dette kapitel vil vi analysere virksomhedens kommunikation og marketing. Hertil vil vi også komme ind på dens vision, mission og værdier. 2.1 SWOT analyse 2.2 Kommunikation analyse Målgruppe Kommunikationsmodel 2.3 Marketing analyse De 4 P er 2.4 Vision, mission og værdier 2.5 Research af nuværende visuel identitet

9 2.1 SWOT analyse For at analysere virksomheden, har vi lavet en SWOT analyse. Den er glimrende til at bedømme de stærke og svage egenskaber hos en virksomhed, og samtidig kan man kortlægge de interne og eksterne aspekter. Denne SWOT analyse vil også hjælpe os i at lave vores kommunikation og marketing analyse og forslag. Figur 2.1: Projektplan 9

10 2.2 Kommunikation analyse For at analysere Solutors har vi benyttet os af Harold Lasswells berømte formel til at passe til Solutors: Who says what in which channel, to whom, with which effect? - Harold Lasswell Her er vores svar på denne sætning: Solutors siger vi er en videnbaseret virksomhed med fokus på skræddersyede løsninger på et website til uddannelses institutioner, større virksomheder og sundhedssektoren med effekten får lyst til at købe Solutors løsninger. Solutors budskab er fundet i form af deres navneskifteside hvor de netop skriver at de er en videnbaseret virksomhed med fokus på skræddersyede løsninger. Mediet er et website da opgaven kræver dette. Deres primære målgruppe er uddannelsesinstitutioner, større virksomheder og sundhedssektoren og effekten skulle gerne være at netop disse får lyst til at anskaffe sig Solutors løsninger Målgruppe Alle virksomheder vil naturligvis prøve at ramme så bredt som muligt, da der altid vil være kunder i segmenter man ellers ikke vil satse på. Dog er der ikke nogen målgruppe der hedder alle, og alle virksomheder har da også en mere specifik målgruppe, så snart man spørger ind til dette 1. Solutors henvender sig til uddannelses institutioner, større virksomheder og sundhedssektoren (Mail fra Solutors, se bilag B.1). De specialiserer sig i skræddersyede løsninger, og gør meget ud af at holde en god kundekontakt. Solutors tager ud til deres kunder og sætter udstyret op, og på den måde håber de på at få loyale kunder. Dette underbygger de også ved at give en god kundeservice og derved tilfredsstille kundernes behov spørgsmål af Jan Krag Jacobsen 10

11 2.2.2 Kommunikationsmodel For at illustrere kommunikations analysen bedre, har vi lavet en kommunikationsmodel baseret på Lisbeth Thorlacius kommunikationsmodel som igen er baseret på Roman Jakobsen s kommunikationsmodel. Vi har valgt kun at medbringe de instanser som vi ser relevante for vores behov. Samtidig kan man se nogle forskellige støj lag, som er en vigtig del af en kommunikationsmodel. Disse støj lag kan bøje budskabet og det kan derfor misforstås af en modtager enten den ene eller anden vej. Figur 2.2: Kommunikationsmodel Forklaring af støj STØJ forkert fremstilling Dette støj lag skal illustrere den risiko der er ved at fremlægge et budskab i et medie på en forkert måde. STØJ misforståelse Dette støj lag skal illustrere den risiko der er for at modtageren misforstår budskabet STØJ forkert effekt Dette støj lag skal illustrere at der er en risiko for at effekten ikke er som Solutors ønsker. F.eks. at modtageren ikke vil købe Solutors produkter 11

12 2.3 Marketing analyse For at analyse Solutors marketingstrategi, har vi valgt at benytte os af de 4 P er De 4 P er På baggrund af nedenstående analyse med de 4 P er kan vi bestemme Solutors marketing mix, hvilket er et udtryk for deres marketingstrategi. Det er dette mix som samlet giver værdi for kunden og salg for virksomheden. Figur 2.3: De 4 P er 12

13 Product Produktmix - SMART produkter - Video konference produkter - Audio konference produkter - Kurser - Magic Planet - Rum styring (lys, temperatur mv) - Projektorer - Infosystemer - Dokument kameraer - Lærreder - Fladskærme - Lyd udstyr Branding - Deres navn i den bordeaux farve - Innovating Communication God service - Tager gerne ud til virksomheder for at løse problemer - Vedligeholdelse - Hurtig levering - Opsætning af udstyr for kunden - Alle medarbejdere kvalificerede til at rådgive og hjælpe kunden Skræddersyede løsninger - Lægger stor vægt på skrædder syede løsninger - Både med deres produkter men også deres service (service aftale) Price Konkurrence dygtige priser - Solutors sælger deres produkter til konkurrence dygtige priser. Place Direkte distribution - Solutors sælger direkte til deres kunder uden mellemmænd. Dog er Solutors selv en retailer for udviklerne af f.eks. SMART boards. Promotion Above the line promotion - Solutors benytter sig af Above the line promotion konceptet, ved at tage til messer mv. og reklamere for deres produkter. Below the line promotion - De vil gerne ud på skoler eller få besøg fra skoler for at fortælle om deres virksomhed 13

14 2.4 Vision, mission og værdier Solutors vision: Solutors A/S skal være det naturlige valg, når danske virksomheder og organisationer søger en troværdig samarbejdspartner og leverandør af kommunikationsløsninger. Vores image skal være leverandør af højeste kvalitet, idet vi tilbyder vores kunder kvalitetsprodukter, de bedste serviceydelser og langsigtede brugbare løsninger. 2 Solutors mission er som følger: Vi skaber visuelle kommunikationsmiløer. 2 Solutors værdier er: Vi er en glad arbejdsplads, med vilje, viden og seriøst arbejde til glæder for kunder, medarbejdere og leverandører. Disse viser tydeligt, at virksomheden både skal være professionel og personlig. De gør meget ud af at alle skal have det godt, både kunder, ansatte og deres leverandører. De har dog et problem i deres vision, i og med de skriver danske virksomheder - dette stemmer ikke overens med deres signal om at være mere internationale. 2 Kilde: 14

15 2.5 Research af nuværende visuel identitet Foruden punkterne nævnt nedenfor, benytter Solutors sig af meget få visuelle virkemidler. Deres website er meget enkelt, billederne er sort/hvid og generelt fremstår sitet meget sterilt. Farver Solutors bruger den røde farve som repræsenterer viljekraft, glæde, varme, magt, værdighed og fuld fart frem. Dette er alle gode egenskaber at lægge vægt på, hos et ledende firma på et givende marked. Logo Solutors har valgt at bruge et tekstbaseret logo på en dynamisk form. Samtidig har de deres slogan repræsenteret i dette logo, det er dog meget uheldigt fremstillet på websitet, da det er meget svært at læse pga. al for lille font. I de forskellige brochurer som Solutors har liggende online, bruger de en spejlvendt logoform i det modsatte hjørne af hvor logoet sidder, som derved danner en stor S form. Det er denne form som vi refererer til, som den dynamiske form i første sætning. Typografi Deres nuværende font-family på websitet er Verdana, Arial, Helvetica, sans-serif; Dog holdes dette font valg ikke på alle undersider og som det kan ses i figur 2.5 bliver der skiftet til Times New Roman. Ydermere, som allerede nævnt, kan man heller ikke læse deres slogan i logoet grundet for lille fontstørrelse. Figur 2.4: Solutors nuværende logo Figur 2.5: Solutors font skift 15

16 Usability af nuværende website I dette kapitel vil vi teste Solutors nuværende website. 3.1 Gangstertest

17 3.1 Gangstertest For at teste navigationen på det nuværende website har vi benyttet os af en gangstertest 3. Vi valgte denne test da den er hurtig og let at lave, men samtidig klartydigt viser styrker og svagheder af navigationen. Som Steve Krug også skriver: Navigation isn t just a feature of a Web site; it is the Web site. 4 - Steve Krug Testen viser at websitets store mangel er en tydelig placerings indikator. Figur 3.1: Gangstertest 3 Usability af Ian Wisler-Poulsen og Ole Gregersen 4 Dont Make Me Think - A Common Sense Approach to Web Usability af Steve Krug 17

18 Forslag til kommunikation og marketing I dette kapitel vil vi komme med forslag til Solutors kommunikation og marketing. 4.0 Forslag til kommunikation og marketing

19 4.0 Forslag til kommunikation og marketing Kommunikation For at kunne optimere den prototype af et website vi laver har vi vurderet den nuværende kommunikation på deres website. Vi har fundet en del punkter der kræver optimering for at løfte sitet op på den samme ellers høje virksomhedsprofil som de ellers udstråler dette er også for at undgå at lave de samme fodfejl som de selv har lavet. - Slogan skal være synligt hvis det skal stå sammen med logo - Bedre opsætning af indlæg (nyheder mv.) - Nyheder skal ikke ligne Google Ads - Der skal være en engelsk version - De forskellige websites afhængig af sprog skal være ens - Ingen skift af font på forskellige sider/elementer - Mere dynamik vil gøre sitet mere interessant - Logo skal lede til forsiden (i stedet for billede med mennesker) - Skal komme videre fra navneskifte (skal ikke være et globalt menu punkt) Dette er blot nogle af de punkter som vil blive overvejet i den prototype af et nyt website vi vil levere. Yderligere problemer er blevet fundet vha. Gangstertest metoden, som bl.a. viser at der mangler en form for placerings indikator. Marketing Vi vil optimere Solutors position på markedet ved at lave en webshop. Denne webshop vil give deres kunder en ny mulighed for at anskaffe de produkter som Solutors sælger, og samtidig vil det give Solutors markedsandele i og med ingen af deres konkurrenter, i skrivende stund, har en webshop. Den webshop vi vil foreslå vil dog kun sælge tilbehør til Solutors løsninger samt mindre produkter, men en anden mulighed er, at sælge flere af Solutors produkter online f.eks. SMART boards mv.. Dette kræver dog en mere grundig analyse af markedet for at bedømme om det er en strategi man vil satse på, som vi ikke vil komme ind på i dette projekt. Vision ændring Hvis de vil være mere internationale skal de ændre deres vision til at illustrere dette. Vores forslag til en ændring er at slette danske fra sætningen og skrive den på engelsk, så den vil være følgende: Solutors A/S should be the natural choice when companies and organizations look for a credible partner and supplier of communication solutions. Our image should be a supplier of the highest quality since we offer our customers quality products, the best services and longterm useful solutions. 19

20 Visuel identitet I dette kapitel vil vi komme med forslag til en ny visuel identitet. 5.1 Brainstorm 5.2 Designbrief 5.3 Farver 5.4 Logo 5.5 Typografi 5.6 Implementering

21 5.1 Brainstorm Vi startede med at lave en brainstorm over en ny visuel identitet og prototype af et website. Denne brainstorm ledte vores tanker ind på de områder vi så vigtige at have med i det endelige produkt. I figur 5.1 ses et udsnit af idéerne. Denne process er rigtig god, da man kun kommer med en masse idéer, og ikke tænker på om de er realistiske - dette er med til at få den kreative process igang. Vi har markeret de punkter med bold, som vi har arbejdet videre med. Glade mennesker Professionel udtryk Cirkel med øje Effekter med bogstavet S Rød Professionel opsætning af tekst Symbol som kan stå alene Blå Grøn Dynamiske virkemidler Antenne for lydsignaler Figur 5.1: Brainstorm udsnit S som kendetegn 21

22 5.2 Designbrief Vi vil skabe en visuel identitet der symboliserer professionalisme og glæde. Den visuelle identitet skal kunne gengives i flere forskellige medier uden at miste sit budskab. Samtidig vil vi ikke være bundet af en specifik farve, men dermed lave en identitet der kan bruges i flere farver. Ydermere skal den visuelle identitet overholde Solutors værdier og vision. Stilen skal være moderne og enkel, og derved passe til den professionelle virksomhedsprofil. Eftersom Solutors slogan er en vigtig del af virksomhedens identitet, vil en indbringelse af denne i forbindelse med logoet være velkommen. Virksomheden skal fremstå troværdig, og kunden skal føle sig tryg ved at handle med Solutors. Den skal ydermere give en varm og glad følelse hos både medarbejdere, kunder og samarbejdspartnere. Ligesom den visuelle identitet skal kunne fungere i forskellige medier, så skal websitet også fungere i forskellige browsere, her i blandt nyere versioner af Internet Explorer og FireFox mf. 22

23 5.3 Farver Vi har valgt en mere klar rød farve end Solutors nuværende farve, og denne kom vi frem til efter at have eksperimenteret med forskellige farvetemaer. Vi var enige om at denne røde farve fungerede klart bedst med Solutors vision og værdier kort sagt deres virksomhedsprofil. Dette gør den, da den røde farve symboliserer varme, viljekraft og fuld fart de vil tænke fremad og være på forkant med udviklingen. Valget af den røde farve kom som sagt efter vi havde eksperimenteret med forskellige farver, heriblandt blå, grøn og orange. Disse farver kunne eventuelt bruges til forskellige temaer og lignende. På websitet benytter vi os, udover den røde farve, også den grønne farve - røds komplementær farve. Desuden benytter vi os af en neutral grå til at indramning. Figur 5.2: Farver 23

24 5.4 Logo Under udviklingen af vores logo var vi forskellige emner igennem. Vi prøvede både en skrift der mindede lidt mere om en almindelig persons håndskrift, for at få en mere personlig stemning, og nogle mere business orienterede logoer, for at få Solutors professionalisme med. Valget faldt på Lucida Sans Unicode da den ikke ligger alt for langt væk fra deres nuværende logoskrift dette er med til at gøre overgangen fra én visuel identitet til en anden lettere. Skriften kan ses nedenfor: INNOVATING COMMUNICATION Innovation communication solutors innovating communication solutors innovating communication Figur 5.3: Logostadier Innovation communication Innovation communication solutors solutors solutors solutors solutors solutors solutors solutors Lucida Sans Unicode Her er andre eksempler på skrifter vi prøvede: solutors eurostile Solutors Segoe Print Det skal dog nævnes, at segoe print blev modificeret i vores logo forslag, så den er ikke helt som standard versionen. innovating communication Figur 5.4: Endeligt logo 24

25 5.5 Typografi Print: Her har vi valgt at bruge to skrifttyper fra Lucida font familien. Lucida Sans Unicode vil blive brugt til rubrikker mens Lucida Bright, som er en serif skrift, vil blive brugt til brødtekst. Grunden til dette valg er, at brødtekster gerne skal være serif skrifter, mens rubrikker oftest ikke er 5. Online: Da man ikke bør bruge serif skrifter online 6, har vi til brødtekst valgt at bruge sans serif font-familien Helvetica, Geneva, Tahoma, Arial og derefter en vilkårlig sans-serif font. Til rubrikker har vi valgt at bruge Verdana, Geneva og derefter en vilkårlig sans-serif font. Lucida Sans Unicode Lucide Bright Tahoma Arial 5 Kilde: 6 Kilde: 25

26 5.6 Implementering For at vise at Solutors logo ikke kun fungerer i digitale medier, har vi implementeret det på forskellige objekter. Vi har placeret det på en hvid varevogn, både på siden og bagpå, og denne varevogn ville kunne fungere som transportmiddel for levering af varer, samt når teknikere skal ud til en kunde. Ydermere findes en rød t-shirt, som også kan benyttes af teknikerne. Logoet har vi også implementeret på forskelligt merchandise som fx en nøglering. Alle ting som Solutors kan forære deres kunder som reklame. Til sidst har vi et eksempel på et visitkort. Flere eksempler kan ses i bilag B.2. Figur 5.5: Merchandise eksempler 26

27 Udvikling af prototype I dette kapitel vil vi redegøre for udviklingen af website prototypen. 6.1 Navigationsdiagram 6.2 Wireframe 6.3 Mockup 6.4 SEO 6.5 Kode eksempler HTML CSS JavaScript / jquery 6.6 Resultat

28 6.1 Navigationsdiagram Vi har lavet et navigationsdiagram for at kortlægge navigationen på vores prototype. Diagrammet er begrænset til kun at vise det der faktisk virker i vores prototype. Figur 6.1: Navigationsdiagram 28

29 6.2 Wireframe Vi har lavet en wireframe for at vise strukturen på vores website. Figur 6.2: Wireframe 29

30 6.3 Mockup Før vi startede med at lave websitet, lavede vi et mockup som hurtigt kan vise om noget fungerer eller ikke. Samtidig kan man bruge det som en guide, under udviklingen af websitet. Figur 6.3: Mockup 30

31 6.4 SEO For at opnå en god search engine optimization, SEO, på internettet, er det vigtigt at benytte sig at flere forskellige metoder. Meta tags Vi har tilføjet Meta tags på siderne index, produkter og tilbehør. Dog har vi udeladt at tilføje meta tags på tjek ud siden, da det ikke ville give mening for en kunde at komme direkte i indkøbskurven når de har søgt på Google, når ingen varer er tilføjet. På et fuldt funktionelt website ville vi naturligvis tilføje meta tags på alle sider. Dette vil hjælpe til at få websitet højere op på listen af søgemaskineresultater. Dog har vi ikke inkluderet tag et keywords, da Google og Bing ikke benytter sig af dette tag 8. HTML For at styrke søgemaskineoptimeringen har vi været opmærksomme på, at give undersiderne forskellige titler. Samtidigt har vi sørget for, at benytte os af overskrifterne h1-3, hvor vi har nævnt søgeord som er relevante for Solutors. Søgeordsoptimering Solutors skal forsøge at bruge udtryk og vendinger på deres website, som potentielle kunder ville benytte sig af, når de går ind og bruger en søgetjeneste. Her kan man også gå ind og benytte sig af Google Trends 9, hvor man kan se hvilke ord det ofte bliver søgt efter på Google. Da vi har lavet en website prototype, har vi ikke været inde og analysere teksten, men blot taget den oprindelige tekst fra Solutors nuværende website. For at opnå et klart overblik over hvilke søgeord der er de rette, kræver en gennemgående analyse, som vi ikke vil komme ind på i denne opgave. Linkbuilding Linkbuilding 10 handler om at få indgående links fra andre websites. Hvis man ønsker at være placeret på side 1 på Google, er linkbuilding meget vigtigt. Selvom mange indgående links er godt, så handler det også om kvaliteten af disse links. Dvs. at Solutors skal forsøge, at få deres link ud på websites der har en relation til deres produkter og løsninger, men også hvor deres målgruppe kunne bevæge sig rundt. Dog er det vigtigt, at Solutors holder sig fra betalte links, da Google anser disse som væren af meget lav værdi, og vil derfor ikke have nogen effekt på søgemaskineoptimeringen. Først og fremmest ville det være en god start, hvis Solutors fik deres link ud på deres leverandørers websites, f.eks. SMART, Polycom og Creston. Dernæst kunne de henvende sig til de virksomheder og uddannelsesinstitutioner som de allerede har serviceret, og bede dem om at tilføje et link på deres website. 8 Kilde: PowerPoint SEO 2. Semester Merete Lindemann

32 Google Webmaster Tools Ved hjælp af Google Webmaster Tools, vil Solutors kunne se hvordan deres website bliver indekseret, og ville hjælpe dem med at forbedre de fejl der måtte forekomme. Ydermere vil Google Webmaster Tools kunne hjælpe dem med at tilføje et sitemap, se hvilke søgeord der gjorde at siden blev vist eller se hvordan Google robot går igennem websitet. Google Analytics Da vi kun har skabt en prototype af websitet, har vi ikke tilføjet Google Analytics. Dette ville dog være et godt redskab at tilføje, da dette vil give Solutors et overblik over trafikken på deres website. Det vil hjælpe dem fremadrettet til at analysere f.eks. søgeord og trafikkilder. 32

33 6.5 Kode eksempler Her vil vi vise nogle af de vigtigste kode udsnit, og forklare hvordan de fungerer. Det skal noteres, at vi har valgt at benytte os af JavaScript frameworket jquery. Grunden til dette er, at jquery er enklere at benytte og det understøttes i alle browsere. Samtidig er det en god måde at adskille koden fra HTMLen. En måde dette kan ses på er, at vi i de forskellige form tags ikke har nogen onsubmit, men at det styres i jquery HTML <meta name= description content= Website for Solutors A/S, det tidligere Dansk Data Display. Eneforhandler af SMART boards og ledende på markedet for kommunikations udstyr. /> <meta name= robots content= all /> Kodeeksempel 1: Meta tags Her er vores HTML meta tags. De er et vigtigt led i vores SEO og i f.eks. description attributten, kan man se at vi tager højde for, at brugere måske stadig kan finde på at søge efter deres tidligere navn Dansk Data Display. 33

34 <link rel= icon href= images/favicon.ico /> Kodeeksempel 2: Fav Icon Her linker vi til vores Fav Icon, som er det lille billede, der bliver vist i browser adresse feltet. Dette er enkelt at gøre, men et godt trick for at får websitet til at fremstå mere professionelt. <div id= logo > <a href= index.html ><img src= images/logo.png alt= Logo /></a> </div> Kodeeksempel 3: Logo Her kan man se koden der henter det billede vi bruger som logo. Som det kan ses har vi et alt tag på billedet, som det kræves af xhtml standarden. Dog er det også en god skik at bruge, da brugere som får læst siden op, vil få alt tag ets indhold læst op. Samtidig, hvis billedet ikke loader, vil alt tag ets indhold blive skrevet i stedet. 34

35 <li class= togglemenu ><a href= # >SMART produkter</a> <ul class= sublocalmenu > <li><a href= # >SMART Board</a></li> <li><a href= # >Software</a></li> <li><a href= # >SMART Slate</a></li> <li><a href= # >SMART Podium </a></li> <li><a href= # >Overlay</a></li> <li><a href= tilbehoer.html >Tilbehør</a></li> <li><a href= # >SMART Business to Business</a></li> </ul> </li>... Kodeeksempel 4: Lokal Menu Her ses vores lokale menu. Som det kan ses er vores lokale menu opbygget vha. en liste, hvilket alle vores menuer er. Det er kun Tilbehør punktet der linker til en funktionel side, resten linker til # hvilket er for at give punkterne det visuelle indtryk af at de virker. Menuen er samtidig nestet, i og med det er en liste inde i en liste. Dette betyder vi har en togglemenu, som er de øverste menpunkter, og en sublocalmenu, som er den nestede menu. 35

36 6.5.2 CSS #content #localmenu { width:180px; margin-right:5px; margin-bottom:10px; padding-left:10px; float:left; background-color:#e6e6e6; } #content #localmenu.sublocalmenu { padding-left:20px; } Kodeeksempel 5: Udsnit af Lokal Menu CSS Dette er et udsnit af CSS koden for vores lokale menu. Grunden til det er et udsnit er, at mange af reglerne er små og meget basale. En ting at lægge mærke til er, hvordan vi har opbygget koden rent visuelt. Som det kan ses bruger vi #content #localmenu for at definere reglerne for lokal menuen. Dette er både visuelt pænt at gøre, da koden bliver sat op hierarkisk, men også for at sikre, at #localmenu, som vi definerer her, kun kan bruges i #content tag et. Det samme gør sig gældende med.sublocalmenu. 36

37 body, div, ul, li, h1, h2, h3, h4, h5, h6, p, a, hr, table, td, th, tr, form { margin:0; padding:0; }... Kodeeksempel 6: Udsnit af browser reset Dette er et udsnit af vores CSS browser reset kode. Grunden til vi gøre dette er, at browsere håndterer elementer forskelligt per default. Ved hjælp af sådan en browser reset kode, forhindrer man uhensigtet skalering og opførsel af elementer mv. 37

38 6.5.3 JavaScript / jquery function hoverin () { var selfhover = $(this).parent().find( ul:first ).is( :visible ); var selfactive = $( #localmenu.active ); if (selfhover selfact) { return; } $(this).addclass( activehover ); $(this).css( color, #CD0000 ); } Kodeeksempel 7: hoverin funktion i JavaScript Dette er hoverin funktionen i JavaScript, der bruges i vores menu på produkter siden. Det denne funktion gør er, at finde det menupunkt man hoverer på, og tilføje klassen activehover samt en rød farve til skriften. Vi har stort set den samme klasse for hoverout, hvor den dog i stedet fjerner klassen activehover og sætter farvekoden tilbage til #333. $( #localmenu a ).hover(hoverin, hoverout); Kodeeksempel 8: Tilskrivning af hover funktioner Her tilskriver vi de 2 hover klasser til vores lokalmenu anchors - altså links. 38

39 $( #localmenu > ul > li ).click(clickhandler); Kodeeksempel 9: Tilskrivning af clickhandler funktion Her tilskriver vi clickhandler funktionen på de ydre list elementer i div en med localmenu ID et. Denne clickhandler funktion er den, der tilføjer og sletter aktiv stadie på menu punkter, og som en del af det, også åbner det man klikker på samtidig med det lukker det man har haft klikket på $(this).parent().find( li > a ).not(.togglemenu > a ).not(.active ).css( color, #333 ); $(this).find( ul:first ).stop(true, true).slidetoggle(); Kodeeksempel 10: Udsnit af clickhandler funktion Det først $(this) viser hvordan vi fjerner farven der illustrer et aktiv element, dog ikke det nuværende aktive element, eller undermenu punkternes markering. Det andet $(this) viser hvordan vi åbner op for sublocalmenu, når vi klikker på et menupunkt i localmenu. Samtidig sørger den for at rydde igangværende animationer hvis man sætter en ny animation igang - noget der kunne ske hvis man klikker hurtigt på menupunkterne. 39

40 var ordreoversigt = $( #ordreoversigt ); var brugeroplysninger = $( #brugeroplysninger ); $(.contentcontainershop ).hide(); ordreoversigt.show(); $( #nextuser ).click(function() { ordreoversigt.hide(); brugeroplysninger.show(); });... Kodeeksempel 11: Udsnit af visning af shopping-stadier Dette viser et udsnit af vores process i at vise og skjule de forskellige stadier når man er i gang med at købe på websitet. Vi starter ud med at skjule hele containeren, da alle de forskellige stadier ligger på samme side, og derefter viser vi det første stadie. Herefter, når der trykkes på knappen med #nextuser ID et, vil den skjule det nuværende ID, og derefter vise det næste. Der er en funktion for hvert stadie, for at skjule og vise de rigtige elementer. 40

41 var brugernavn = $( #name_user ); var name_userinfo = $( #name_userinfo ); function validatebrugernavn(){ if(brugernavn.val().length < 3){ brugernavn.addclass( error ); name_userinfo.text( Venligst indtast \u00f8nskede brugernavn! ); name_userinfo.addclass( error ); return false; }else{ brugernavn.removeclass( error ); name_userinfo.text( ); name_userinfo.removeclass( error ); return true; } } Kodeeksempel 12: Udsnit af validering 7 Dette udsnit viser valideringen af vores brugernavns felt. Funktionerne for at validere de andre felter er stort set magen til. Vi finder ud af om værdien inde i brugernavns feltet er kortere end 3 tegn. Hvis det er det, så tilføjer vi en error klasse, som vi har defineret i CSSen, og så skriver vi i #name_userinfo feltet. Hvis det er længere end 3 tegn, så skal den sætte felterne til tomme. 7 Kilde: 41