Carlsberg Green Line - School exam project

Eksamensopgave, 2. semester Af Steffen Marschall, Martin Ungermann StĂŚhr, Patrick Bomann Tofteng og Erik Andreas MĂźnter

FAKTAARK

Titel: Projekt 4 - Vedvarende energi

_______________________________________

Steffen Marschall

Carlsberg - Green line

Mail: kontakt@steffenmarschall.com

Hold: CLmul-b13e

http://steffenmarschall.com/2sem-projekt4.html

2. semester Gruppe:

Mulb13e, gruppe B3

Antal anslag:

44.249

Antal normalsider:

18.4

___________________________________ Martin Ungermann Stæhr Mail: martinstaaehr@gmail.com

Kampagneside URL:

http://www.martinstaehr.dk/projects-2nd-semester.php

http://www.patricktofteng.dk/cph/2.semester/carlsberg/gatekeeper.php

Link til website koden (komprimeret i .zip fil):

www.patricktofteng.dk/cph/2.semester/carlsberg/dl/website.zip

Vejledere: Frederik David Tang fdta@cphbusiness.dk

Thomas Hartmann tha@cphbusiness.dk

Jesper Hinchely jhi@cphbusiness.dk

Merete Geldermann Lützen mli@cphbusiness.dk

Ditlev Skanderby Ian Wisler-Poulsen dsk@cphbusiness.dk iwp@cphbusiness.dk Morten Rold moro@cphbusiness.dk

_______________________________________ Patrick Bomann Tofteng Mail: kontakt@patricktofteng.dk http://patricktofteng.dk/cph/1.semester/portfolio/education.php

_______________________________________ Erik Andreas Münter Mail: kontakt@designduck.dk http://designduck.dk/portfolio/project-8-carlsberg-green-line/

2

INDHOLDSFORTEGNELSE 1/2

Indholdsfortegnelse

3 indholdsfortegnelse

19 offline 19 usability 20 Konkurrencen

Introduktion til projektet

Dokumentation af koden

2 Faktaark

5 Hvorfor Carlsberg?

5 Problemformulering 6 Projektplan

Metode, teori og analyse

8 SWOT 8 TOWS 9 SWOT analyse af Carlsberg 10 TOWS analyse af Carlsberg 12 Carlsbergs nuværende kommunikationsplatform 12 Carlsbergs nuværende coporate identity 13 Carlsbergs nuværende corporate image 14 Carlsbergs nuværende visuelle identitet 15 AIDA 17 Carlbergs fremtidige kommunikation

Design brief

18 Produkt/idé 18 Unique selling point (USP) 18 Farveskala 18 Grafik 18 Foto/Farvekalibreing 18 Skrifttype 18 Sprogbrug 18 Medievalg

22 .htaccess 23 menu_highlight.js 23 mobile_menu.js 24 pagination.js 25 platoo.js 26 platoo.php 26 about.php 27 nyhedsscript.js 28 nyhedsreg.php 28 contact.php 28 kontaktreg.php 29 successful.php 30 competition.php 31 header.php 32 index.php 33 menu.php 34 upload.php 34 video.php 34 save.php 35 meter.php 38 gatekeeper.php

Usability

40 Brugertest OG EKSPERTVURDERING 41 SEO 3

INDHOLDSFORTEGNELSE 2/2

Indholdsfortegnelse

Designlinien

44 Typografi 45 Farve valg 46 Logo 47 Grundelementer

Offline, print og merchandise 49 50 51 52

Green Line - øl serie Offline materialer og merchandise Eksempler på Print Eksempler på Merchandise

Konklusion og refleksion 54

Green Line konklusion

Kildeliste

56 Litteratur 57 Links

Bilag 59 60 61

Carlsberg business model Carlsberg Strategy Wheel Carlsberg sustainable packaging

4

INTRODUKTION TIL PROJEKTET

BAGGRUND FOR PROJEKTET HVORFOR CARLSBERG?

PROBLEMFORMULERING

Vi har valgt at arbejde med Carlsberg A/S, da det er et

• Hvordan kan Carlsberg promovere sit brand, og på

internationalt dansk firma, som er kendt for at være

samme tid skabe opmærksomhed om deres

forgængere indenfor deres industri.

vedvarende energi, og dermed få folk til at vælge deres produkt som det miljøvenlige valg?

Det er et firma som altid arbejder på at være de bedste indenfor deres felt.

Derfor er det oplagt at vælge dem som igangsættende firma for opstarten af en grønnere tilgang til brygning af øl på verdensplan.

5

PROJEKTPLAN

Gantt kort

Til denne opgave har vi i vores gruppe arbejder ud fra et

Vi har mødes de første to uger næsten hver dag, og snakket

princip der godt kunne ligne SCRUM lidt, dog ikke helt er

om hvad der skulle laves i løbet af dagen og hvem der skulle

det.

gøre det. Vi har holdt konferencemøder via programmet Mumble (alternativ til Skype), hvor vi har snakket og vist

Vi startede fra dag et med at lave et Google præsentations

hinanden (via join.me, skærmdeling) hvad vi havde lavet i

dokument til at skabe os et overblik over opgaven og ikke

løbet af dagen, og givet feedback til hinanden på den måde.

mindst få styr på hvad der skulle laves. Vi har brugt dette dokument/præsentation i alle vores projekter som en

Vi startede dog projektet med at udvikle et Gantt kort for

simpel, dog effektiv, måde at konstant holde hinanden

at holde styr og overblik over hvornår de enkelte afsnit af

opdateret om ændringer og færdige afsnit af projektet.

projektet skulle være estimeret færdigt.

Se Gantt kort nedenfor

Id

Opgavenavn

Startdato

Slut

Varighed

1

Produkt – Rapport og website

05-05-2014

02-06-2014

21d

2

Foraflevering til torsdag 8. maj

05-05-2014

08-05-2014

3d

3

Problemformulering

05-05-2014

05-05-2014

1d

4

Opgavebeskrivelse

05-05-2014

07-05-2014

2d

5

Opgaveplan

05-05-2014

05-05-2014

1d

6

Samling af foraflevering

07-05-2014

08-05-2014

1d

06-05-2014

09-05-2014

4d

7

Kommunikation

8

WBS

06-05-2014

06-05-2014

1d

9

PBS

06-05-2014

06-05-2014

1d

10

Virksomheds analyse

07-05-2014

07-05-2014

1d

11

SWOT

07-05-2014

07-05-2014

1d

12

TOWS

07-05-2014

07-05-2014

1d

08-05-2014

09-05-2014

2d

13

Virksomhedens målgruppe

14

AIDA

08-05-2014

08-05-2014

1d

15

Virksomhedens budskab

09-05-2014

09-05-2014

1d

08-05-2014

08-05-2014

1d

12-05-2014

02-06-2014

15d

16 17

Virksomhedens kommunikationsbehov Website

18

Kodning

12-05-2014

02-06-2014

15d

19

Indhold

12-05-2014

02-06-2014

15d

20

Dynamiske elementer

12-05-2014

16-05-2014

5d

21

Galleri

12-05-2014

16-05-2014

5d

22

Kontakt form

14-05-2014

15-05-2014

2d

23

SEO

14-05-2014

02-06-2014

13d

24

Nyhedsbrev

15-05-2014

16-05-2014

2d

25

Validerings test

26-05-2014

29-05-2014

4d

26

Supplerende materiale

16-05-2014

19-05-2014

2d

27

Online annoncering

16-05-2014

19-05-2014

2d

28

Sociale medier

16-05-2014

19-05-2014

2d

29

Outdoor

16-05-2014

19-05-2014

2d

30

Metode

28-05-2014

29-05-2014

2d

31

Teori

28-05-2014

29-05-2014

2d

32

Tjek af rapport

30-05-2014

30-05-2014

1d

33

Korrekturlæsning

30-05-2014

30-05-2014

1d

34

Bilag

30-05-2014

30-05-2014

1d

35

Kilder / literatur

30-05-2014

30-05-2014

1d

22-05-2014

22-05-2014

1d

22-05-2014

22-05-2014

1d

09-05-2014

16-05-2014

6d

36 37 38

Usability Forebyggende brugertest Design brief

39

Typografi

09-05-2014

12-05-2014

1d

40

Grafiske elementer

09-05-2014

12-05-2014

1d

41

Design linie

09-05-2014

16-05-2014

6d

maj 2014 5

6

7

8

9

10

11

12

13

14

15

16

17

18

jun 2014 19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

6

Analyse

Metode, teori og analyse I dette afsnit

• • • • • • •

SWOT TOWS Carlsbergs nuværende kommunikationsplatform Carlsbergs nuværende coporate identity Carlsbergs nuværende corporate image Carlsbergs nuværende visuelle identitet AIDA

7

SWOT

TOWS

Vi valgte at benytte os af en SWOT-analyse for at give os et

Som en videreudvikling af vores SWOT-analyse valgte vi

godt indtryk af hvordan Carlsberg står som virksomhed lige

også at lave en TOWS-analyse.

Analyse

nu og på den måde give os et godt grundlag for hvordan man bør gribe en kampagne fra Carlsberg an, samt hvordan

Det er nemlig interessant for os at have nogle konkrete ek-

vi bedst muligt kunne skabe et autentisk indtryk af vores

sempler og tanker omkring hvad Carlsberg som virksomhed

afsender og de produkter vi har lavet.

kunne gøre og hvad de i hvert fald ikke kunne gøre i forhold til elementerne fra SWOT-analysen.

Analysen gjorde os i stand til bedre at kunne vurdere om vores idéer og koncepter var noget som Carlsberg selv ville

Dette hjalp os yderligere til at have et bedre grundlag for

kunne finde på og have mulighed for at lave, samt hvilken

vores kampagne, men også en bedre forståelse af vores

stil de kunne tænkes at stå inde for.

afsender generelt.

Vores tilgang til produkterne blev altså allerede fra start af

Ved at have eksempler på hvilke strategier Carlsberg kunne

mere troværdige/korrekte og resulterede i, at vi ikke behø-

finde på at benytte sig af og hvad Carlsberg skulle passe på

vede at rette og ændre så meget i løbet af arbejdsproces-

med, gjorde det nemmere at visualisere den bedste måde at

sen.

behandle kampagnen ”Green Line”.

se SWOT analysen på side 8

Se TOWS analysen på side 9

8

SWOT ANALYSE AF CARLSBERG

Analyse

Internt Styrker (Strength)

Internt Svagheder (Weaknesses)

• • • • • •

Winning behavior! (Vindende attitude) Godt etableret brand Godt arbejdsmiljø Klar strategi God økonomi og fremgang Nye teknologiske produkter og fremgangsmåder.

• Klar målsætning • Produktion på verdensplan

• • • • •

Eksternt Muligheder (Opportunities)

Eksternt Trusler (Threats)

• • • • •

• • • • • •

Ny produkter Positiv omtale i pressen Stigende ølforbrug i Asien Opkøbe flere konkurrenter Stigende forbrug af cider og andre læskedrikke • Bedre CSR muligheder for miljø

Tilbagegang i ansatte Arbejdspartnere kan gå konkurs Høje salgspriser Stigende råvarepriser Manglende repræsentation af produkt i Afrika og Sydamerika

Stigende sundhedsbevidsthed SKAT Stigende ølafgift på det globale marked 3 større virksomheder Kan have dårligt ry pga. dansk politisk omtale Substituerende produkter

9

TOWS ANALYSE AF CARLSBERG

Styrker (strength) S1 - Winning behavior! (Vindende attitude) S2 - Godt etableret brand S3 - Godt arbejdsmiljø S4 - Klar strategi S5 - God økonomi og fremgang S6 - Nye teknologiske produkter og fremgangsmåder S7 - Klar målsætning S8 - Produktion på verdensplan

Svagheder (Weaknesses) W1 - Tilbagegang i ansatte W2 - Arbejdspartnere kan gå konkurs W3 - Høje salgspriser W4 - Stigende råvarepriser W5 - Manglende repræsentation af produkt i Afrika og Sydamerika

Muligheder (opportunities) O1 - Ny produkter O2 - Positiv omtale i pressen O3 - Stigende ølforbrug i Asien O4 - Opkøbe flere konkurrenter O5 - Stigende forbrug af cider og andre læskedrikke O6 - Bedre CSR muligheder for miljø

SO maxi-maxi • God økonomi og strategi kan medføre fremgang af ølforbrug i Asien. (S4, S5, O3) • Det er nemt at brande nye produkter (S2, S8, O1) • Klar strategi giver positiv omtale i pressen. (S3, S4, O2) • Teknologisk viden giver mulighed for produktion af nye produkter og forbedring af gamle. (S1, S5, S6, O1, O5) • Bedre CSR muligheder pga. økonomi, som f.eks. udvikling af miljøvenlige produktionslinjer. (S5, S6, S7, O2, O6) • Opkøbe nye produktionssteder og konkurrenter for at maksimere produktionen af brandet Carlsberg. (S1, S4, S5, S7, S8, O4)

WO mini-maxi • Holde øje med arbejdsparternes årsrapporter for at holde sig opdateret om eventuelle ændringer. (W2, O1, O4) • Få produktionsudgifter i bund. (W3, W4, O1, O5) • Få Carlsberg repræsenteret på det Afrikanske og Sydamerikanske marked ved eventuel opkøb af konkurrent. (W1, W5, O4) • Skabe ny vækst ved nye produktionslinjer og kampagner. (W1, O1, O2, O5)

Trusler (Threats) T1 – Stigende sundhedsbevidsthed T2 - SKAT T3 - Stigende ølafgift på det globale marked T4 - 3 større virksomheder T5 - Kan have dårligt ry pga. dansk politisk omtale T6 - Substituerende produkter

ST maxi-mini WT mini-mini • Carlsberg er et solid brand. Via kampagner • Ved ikke at skabe billigere produktionslinskabe bedre ry (S2, S3, S4, S5, S7, T1, T5) jer, kan Carlsberg være nødsaget til at fyre ansatte pga. høje salgspriser i forhold til • Forbedre produktionslinjen via teknologisk produktionspriser. (W1, W3, W4, T1, T2, viden, og derved nedsættes produktionsprisen T3) per produkt (S6, T2, T3) • Blive ved med at udvikle nye produkter og gøre • Ved politiskkrise kan Danske firmaer som Carlsberg se tilbagegang pga. boykotning. opmærksomhed på gamle. (S1, S2, S4, S6, T4, (W1, W2, T5) T6) • Pga. eventuelle stigninger af afgifter kan der ses tilbagegang, som kan resultere i at opkøbe af konkurrenter eller potentielle firmaer ikke sker (W5, T3, T4, T6) 10

VIDSTE DU AT CARLSBERG HAR EL-LASTBILER DER KØRER 300KM PÅ EN OPTANKNING?

CARLSBERGS NUVÆRENDE KOMMUNIKATIONSPLATFORM

CARLSBERGS NUVÆRENDE COPORATE IDENTITY

For at danne os et bedre billede af hvor vi kan sætte ind

MISSION

henne, for at skabe mere

Carlsberg stræber efter at være:

opmærksomhed om Carlsbergs grønne energi tiltag.

Har vi udarbejdet en liste over deres nuværende kommunikationsplatform.

• • • • • • • • • • •

Carlsberggroup.com Carlsberg.com Carlsbergdanmark.dk osv.

Facebook Twitter Google+ Instagram YouTube Outdoor Online reklame Sportshold

M.fl.

Carlsberg er et verdens fjerde største bryggeri.

Derfor kan det vidst med sikkerhed konstateres at deres kommunikationsplatform spænder over alt fra offline, online og print

• • • •

Analyse

Ambitiøse Innovative Ærlige Ansvarlige

Carlsberg Danmarks mission er at skabe værdifulde oplevelser for kunder og forbrugere.

VISION Carlsberg er et firma som brænder for det de laver og ønsker at være de bedste idenfor deres fag. De har en klar strategi for hvordan de ønsker dette opfyldt og hvordan de ønskes set udadtil.

Se Carlsbergs business model (bilag 1)

STRATEGI Carlsberg har lavet en meget tydelig illustration af deres firmas strategi.

Se Carlsbergs strategy wheel (bilag 2) 12

CARLSBERGS NUVÆRENDE CORPORATE IMAGE Carlsberg A/S er et firma som bygger på deres

Analyse

CARLSBERGS STAND / MOTTO

nuværende “Winning behavior”. Det er et firma som ønsker at udvide sig og være de bedste til det de laver.

Thirst for great Great people. Great brands. Great moments.

Det er et dansk firma som ønsker at støtte op om at bekæmpe alkoholisme og har startet flere kampagner til

Founded on the motto, Semper Ardens – Always Burning –

forebyggelse af alkoholmisbrug.

we never settle, but always thirst for better.

Carlsberg arbejder aktivt på at leve op til en reduktion af

We are stronger together because we share best practices,

CO2 på verdensplan. De har flere fremtidsplaner om at

ideas, and successes. We brand as many, but stand as one.

nedsætte CO2 udslippet fra deres egne fabrikker på verdensplan.

With the courage to dare, to try, to take risks, we constantly raise the bar. We don’t stop at brewing great beer. We

Der arbejdes også på at reducere det affald der måtte

brew a greater future – for our consumers and customers,

forekomme efter produktion af deres produkter. Her arbej-

our communities, and our people.

der Carlsberg A/S sammen med en række firmaer i forsøg på at reducere affaldsmængden.

This passion will continue to burn and forever keep us thirsty.

Se Carlsbergs sustainable packaging plan (bilag 3)

13

CARLSBERGS NUVÆRENDE VISUELLE IDENTITET

Analyse

Carlsberg står i dag med en stærk visuel identitet. De fleste genkender det markante logo som henleder tankerne til øl, læskedrik eller andet Carlsberg produkt.

Carlsberg lavede i 2011 en ny visuel identitet der var rettet imod unge mennesker over 18.

Derfor har Carlsberg stortset også kun unge mennesker i alderen 25-28 på deres billeder.

Det nye visuelle udtryk beskrives fra Carlsbergs side Bold,

Authentic,

modern and approachable

14

AIDA

Analyse

Vi har valgt at arbejde med AIDA modellen for at få et bedre bud på hvordan, vi kan vække forbrugerens interesse i vores produkts kampagne.

Vores præmiepulje er voksende efter antal indslag til

ATTENTION

Baseret ud fra vores konkurrence strategi “Desto flere

Vores kampagne, Carlsberg Green Line, kommer til at skabe

deltagere i konkurrencen, desto bedre præmier.” Vil et klart

opmærksomhed omkring sig selv ved hjælp af et limited

ønske om flere deltagere, fra allerede deltagende melde sig

edition øl print, indpakning, plakater, reklamefilm,

hurtigt.

hjemmeside og ikke mindst videokonkurrence.

Carlsbergs handlinger indenfor vedvarende energi kan have

Ved hjælp af vores konkurrence opsætning bliver

interesse for mange miljøbevidste danskere, og det kan

hjemmesiden delt til venner og bekendte via sociale medier,

også være spændende og interessant at høre hvad andre

da alle gerne vil have flere deltagere og større præmier.

gør for at holde Jorden grøn.

INTEREST

ACTION

Vores serie af offline medier og produkter skal have en

Deltagelse i konkurrencen og erhvervelse af Carlsbergs

lokkende effekt, ved hjælp af konkurrencen, der helst skulle

limited edition og besøge hjemmesiden skulle gerne give en

resulterer i et højt besøgende antal.

fornemmelse af at Carlsberg gør noget for at holde Jorden

Konkurrencen er en videokonkurrence hvor man skal

ren.

forklare “Hvad du gør for at gøre verden lidt grønnere”. Alle

Hvilket gerne skulle resulterer i at man vælger Carlsberg,

videoerne kommer til at ligge i et galleri, som gør at alle

frem for andre produkter, da det er det “grønne” valg.

konkurrencen og det burde medvirke at folk har interesse i at så mange som muligt deltager i denne konkurrence og besøger siden.

DESIRE

besøgende kan se dem og kan blive interesseret i hvad andre har at sige, og dermed blive hængende på siden.

15

VIDSTE DU AT CARLSBERG BYEN KOMMER TIL AT VÆRE DREVET AF 100% VEDVARENDE ENERGI?

CARLBERGS FREMTIDIGE KOMMUNIKATION

Green line kommunikation

Carlsberg er en virksomhed i konstant udvikling. Dette

Grunden til at Carlsbergs visuelle identitet, målgruppe og

bliver ikke kun tilkendegjort ved deres konstante udvikling

budskab nok vil se anderledes ud i fremtiden, skyldes at

af nye produkter, moderne marketing og solide branding,

deres planer om en grønnere fremtid fortsætter i

men derudover måden hvorpå Carlsberg hele tiden aktivt

allerhøjeste tempo. Det må så også siges at der skal tages

deltager i at involvere sig i alt der har en relevans til deres

en moderat tilgang til at blive et grønnere brand.

produkt. Carlsberg har en forholdsvis bred målgruppe, der efter deres omdannede visuelle identitet i 2011 er rettet

Miljøvenlige biler har nu været fremme i et godt stykke tid,

imod henholdshvis unge mennesker over 18. Dette gør det

men langt de fleste foretrækker stadig benzin- og diesel-

svært at få en positiv reaktion frem hos alle der er udsøgt,

drevne biler, da det er de vant til. Det er svært at sælge en

det kan dog også i nogle tilfælde have et positivit aspekt,

idé til folk når det de er vant til noget andet. Det samme

idet at en kampagne eller reklame kan have et breddere og

princip kan andvendes her – hvis folk allerede har dannet

mere løst budskab, der næsten kun kan falde i god jord hos

sig det indtryk at Carlsberg er et konservativt, solidt og

de fleste i målgruppen.

velsmagende brand, kan det være muligt at en del af målgruppen står af, hvis den grønne politik tager overhånd

Med Greenline kampagnen i fokus er Carlsbergs oprindelige

og tingene ændres for hurtigt, til at det til sidst ikke er

målgruppe blevet en smule modificeret, i forhold til hvordan

muligt at genkende brandet.

den oprindeligt så ud, den er blevet en smule breddere eftersom at det er et breddere emne der er i fokus. Den

Greenline kampagnens endegyldige formål er at Carlsberg

breddere målgruppe vi har fastsat os at arbejde udfra, lyder

produktet skal vælges frem for konkurrenternes, idet at det

på alle i alderen fra 20 til 35 år.

er det ”grønne” valg. Dette mål kan lade sig gøre ved at sætte miljøet i fokus mere end nogensinde. Hvis det bliver

Carlsbergs visuelle identitet kan kort beskrives som ”bold,

formidlet på en korrekt måde, vil idéen om at forbrugeren

authentic, modern and approachable”, og i sammenhæng

kan hjælpe miljøet blot ved at vælge Carlsberg frem for

med denne kampagne bør der indføres et ”caring”.

andre produkter blive en succes.

17

DESIGN BRIEF 1/2

Design brief

PRODUKT/IDÉ

FOTO/FARVEKALIBREING

Produktet vil være en kampagne med udgangspunkt i at

Billederne og farverne skal leve op til Carlsbergs allerede

Carlsberg arbejder for en grønnere verden. Dette kommer

stillede krav om personer i alderen 25-28 år med et grønt

ud til forbrugeren indpakningen på øl, printede offline pro-

skær.

dukter og sidst men ikke mindst en hjemmeside med tilhørende konkurrence om store præmier.

UNIQUE SELLING POINT (USP) Vores unikke salgspunkt vil være at lysten til at vinde præmierne i kampagnen, og ikke mindst lysten til at dele sit budskab om en grønnere hverdag med Danmarks voksen befolkning.

FARVESKALA Vi har valgt taget udgangspunkt i Carlsbergs original fraver, dog gjort dem lettere lyse for at tydeliggøre Carlsbergs valg om at gøre verden til et bedre sted.

GRAFIK De grafiske elementer skal opholde forbrugerens interesse og sørge for at altid holde deres opmærksomhed. Vi bruger bobler til information og linien til at skabe opmærksomhed

SKRIFTTYPE Fonten skal være moderne, markant og let læselig.

SPROGBRUG Sproget skal være interessant og nemt for alle at tilgå. Helst ingen “store” ord i brug på frontsiden og offline produkter.

VIDEO Hjemmesiden skal have en video der skal fungerer som nysgerrighedsfaktor. Videoen bliver klippet sammen af gamle Carlsberg reklamer og optagede klip med solceller.

MEDIEVALG Det er planen at siden hjemmesiden er 100 procent responsiv er der ikke behov for at udvikle en app til kampagnen, da hjemmesiden i sig selv kan det ønskede på mobile enheder.

om Carlsbergs grønne valg.

18

DESIGN BRIEF 2/2

Design brief

OFFLINE Vores offline produkter vil være:

• En serie af Carlsberg øl med Green Line indpakning, som selvfølgelig kommer i alle kasser, sixpacks og andre indpakninger.

• En række af plakater og bannere der kommer til at være hængt op på busstopsteder, bygninger og magasiner.

• En række merchandise som kan deles ud ved diverse events og festivaller.

Det er planen at disse offline medier skal være med til at synliggøre Carlsbergs Green Line kampagne, men også vise at Carlsberg gør endnu mere grøn.

USABILITY Der skal laves et foreløbende brugertest af sitet helst før afleveringen for at få testet eventuelle små fejl.

Herefter kommer selve usability testen i juni måned, hvor der skal testes for hele hjemmesidens funktionalitet.

Herunder upload af video og deltagermeterets funktion.

19

KONKURRENCEN

Dokumentation

Konkurrencen går ud på at alle over 18 år kan uploade en

Vi valgte ikke at begrænse konkurrencen til udelukkende at

video, hvor de viser hvordan de gør verden grønnere eller

have noget med vedvarende energi at gøre, men en mere

har idéer til hvordan firmaer kan gøre en indsats, for at gøre

generel tilgang til det at være miljøbevidst. På den måde

Jorden et bedre sted at leve.

kan kampagnen nemlig ramme mere bredt og det vil være langt nemmere for folk at deltage i konkurrencen.

Dernæst opfordrer konkurrencen i sig selv til at man deler videoen og kampagnens hjemmeside for præmierne bliver nemlig bedre og bedre for hvor mange der deltager i konkurrencen. Vinderen bliver fundet, af Carlsberg, blandt de top tyve mest delte videoer.

Målet med videokonkurrencen er at gøre det nemmere og mere spændende for konkurrencens deltagere at sprede kampagnens og ikke mindst deres eget budskab. Det burde gerne resultere i at langt flere mennesker besøger kampagnens hjemmeside og interessen for kampagnen vil altså være langt større. Desuden har mange af præmierne noget med miljøet at gøre for at forbedre forståelsen af konceptet ”GREEN LINE” – CARLSBERG, samt give et godt og meningsfyldt indtryk på det overordnede billede.

20

session_start(); if($_SERVER[‘REQUEST_METHOD’]==’POST’) { if(isset($_POST[‘YES’])) {

Dokumentation

$redirect=isset($_GET[‘return’])?urldecode($_GET[‘return’]):’./’; $expire=isset($_GET[‘x’]) && is_numeric($_GET[‘x’])?intval($_GET[‘x’]):-1;

Dokumentation af koden

if($expire==-1) {

$_SESSION[‘gatekeeper’]=”yes”; header(“location: “.$redirect); exit(0); }

I dette afsnit

if($expire==0)

• menu.php • .htaccess • upload.php • menu_highlight.js setcookie(“gatekeeper”, “yes”,mktime(0,0,0,01,01,date(“Y”)+30)); • video.php $_SESSION[‘gatekeeper’]=”yes”; • mobile_menu.js header(“location: “.$redirect); • save.php • pagination.js exit(0);• platoo.js • meter.php } • gatekeeper.php • platoo.php setcookie(“gatekeeper”, “yes”,(time()+$expire)); • about.php $_SESSION[‘gatekeeper’]=”yes”; • nyhedsscript.js header(“location: “.$redirect); • nyhedsreg.php exit(0); }else{ • contact.php • kontaktreg.php header(“location: http://www.youtube.com/watch?v=0ytPgei1tQs”); exit(0);• successful.php } • competition.php } • header.php • index.php {

?>

21

DOKUMENTATION AF KODEN (1 AF 17)

Dokumentation

KODE

.HTACCESS

Forklaring af hvordan koden er sat op:

Vi bruger .htaccess til at forbyde tilgang til vores connect.php

Hver gang en bold overskrift præsentere sig begynder et nyt

fil, som bruges til at oprette forbindelse til databasen. .htaccess

afsnit.

bliver også brugt til at fortælle hvilken fil vi vil bruge til vores 404

Fx .htaccess står med bold: .htaccess. Hvert afsnit vil starte med

error page.

en kort beskrivelse af hvad dokumentet gør.

Så hvis en besøgende skriver forkert eller rammer et dødt link

De grå bokse er kode taget direkte fra dokumentet, i toppen af

bliver brugeren redirected til en error page.

de grå bokse vil der stå hvor følgende linje kode vil kunne blive fundet.

White-space samt kommentarer kan være fjernet i de grå bokse

.htaccess - Linje 1 ErrorDocument 404 /cph/2.semester/carlsberg/error-page.php

for at hjælpe med til et bedre overblik over koden, det er derfor ikke sikkert at antallet af linjer er ens i dokumentet og i de grå

Fortæller serveren hvilken fil der skal bruges til 404 error page.

bokse.

.htaccess - Linje 3 - 7

Hver afsnit kode vil blive beskrevet kort og præcist.

# protect connect.php

Valgte dokumenter vil blive vist i fuldt i bilag afsnittet.

<files connect.php>

Ønskes filerne, kan de blive hentet på følgende link:

order allow,deny

www.patricktofteng.dk/cph/2.semester/carlsberg/dl/website.zip

deny from all </files>

Beskytter connect.php fra uønskede gæster.

22

DOKUMENTATION AF KODEN (2 AF 17)

Dokumentation

MENU_HIGHLIGHT.JS

MOBILE_MENU.JS

menu_highlight.js highlighter det menu punkt som man er på.

Dette script tilføjer klassen “visible“ til “#mobile_menu” når man

Altså hvis man er på kontakt siden får kontakt linket en klasse

trykker på “menu knappen” i den mobile version af websitet.

“highlight” som ændre på linkets farve så man tydeligt kan se

Den viser dermed vores sidemenu så snart man trykker på

hvilken side man befinder sig på.

knappen. Menuen bliver skjult igen når man trykker på knappen igen, eller på det link der i side menuen hedder “Luk denne

menu_highlight.js - Linje 2 - 8

menu” som også har klassen “.slide” lig som “menu” knappen.

var str=location.href.toLowerCase();

mobile_menu.js - Linje 2 - 9

$(‘#navigation li a’).each(function() { if (str.indexOf(this.href.toLowerCase()) > -1) {

$(‘.slide’).click(function(){

$(“a.highlight”).removeClass(“highlight”);

var hidden = $(‘#mobile_menu’);

$(this).addClass(“highlight”);

if (hidden.hasClass(‘visible’)){

} });

hidden.animate({“left”:”-300px”}, “slow”).removeClass(‘visible’); } else { hidden.animate({“left”:”0px”}, “slow”).addClass(‘visible’);

Her vælger vi “#navigation li a” som de links vi vil highlighte.

}

Hvis det som linket har i sin ‘href’ stemmer overens med den

});

nuværende url, bliver linket tilgivet klassen “highlight”. Klassen “highlight” bliver først fjernet fra alle links, så der kun er et link der har klassen.

Hvis sidemenuen har klassen “visible” og man trykker på knappen med klassen “.slide” bliver menuen skjult, med en slide effekt.

Har menuen ikke klassen “visible” på sig når man trykker på knappen, bliver klassen tilføjet og en slide effekt sætter menuen på sin rette plads.

23

DOKUMENTATION AF KODEN (3 AF 17)

Dokumentation

PAGINATION.JS

Eksempel 1 - Linje 6 - for Video 1 på side 1:

Dette script laver en pagination menu til vores video galleri der

if (1 >= 9 * (1-1) && 1 < 9 * 1)

viser 9 videoer per side.

Udregnet:

Der er blevet farvet på følgende kode for et nemmere overblik.

Så hvis ‘1’ er større end ‘0’ og at ‘1’ er mindre end ‘9’.

pagination.js - Linje 1 - 9 pageSize = 9; showPage = function(page) { $(“.video_col”).hide(); $(“.video_col”).each(function(n) { if (n >= pageSize * (page - 1) && n < pageSize * page) $(this).show(); }); }

Antallet af videoer per side bliver gemt i “pageSize” og i vores tilfælde er det 9.

Alle “.video_col” er blevet skjult, til at starte med. “page” er side tallet og “n” er video tallet.

Hvis ‘if statement’ er ‘true’ bliver videoen vist.

Et beskrevet eksempel for video 1 og video 10 på henholdsvis side 1 og på side 2.

Grunden til dette er at, alle videoer fra 1-9 bliver vist på side 1 og

if (1 >= 0 && 1 < 9)

Hvilket det er, så denne ‘statement’ er ‘true’.

Video 1 bliver derfor vist på side 1 ved hjælp af “$(this).show();”.

Eksempel 2 - Linje 6 - for Video 10 på side 1: if (10 >= 9 * (1-1) && 10 < 9 * 1) Udregnet:

if (10 >= 0 && 10 < 9)

Så hvis ‘10’ er større end ‘0’ og at ‘10’ er mindre end ‘9’.

Hvilket det IKKE er, så denne ‘statement’ er ‘false’.

Video 10 bliver derfor IKKE vist på side 1.

Eksempel 3 - Linje 6 - for Video 1 på side 2: if (1 >= 9 * (2-1) && 1 < 9 * 2) Udregnet:

if (1 >= 9 && 1 < 18)

Så hvis ‘1’ er større end ‘9’ og at ‘1’ er mindre end ‘18’.

Hvilket det IKKE er, så denne ‘statement’ er ‘false’.

Video 1 bliver derfor IKKE vist på side 2.

Forsættes på næste side

alle videoer fra 10-18 bliver vist på side 2.

Vi kan derfor vise at video 1 bliver vist på side 1 og at video 10 bliver vist på side 2. “pageSize” er først i dokumentet sat til 9.

24

DOKUMENTATION AF KODEN (4 AF 17)

Dokumentation

Eksempel 4 - Linje 6 - for Video 10 på side 2:

PLATOO.JS

if (10 >= 9 * (2-1) && 10 < 9 * 2)

platoo.js er et script der fremhæver det “step” man ‘hover’ over.

Udregnet:

Samtidig bliver skriften foroven ændret så der står hvad præmien

if (10 >= 9 && 10 < 18)

Så hvis ‘10’ er større end ‘9’ og at ‘10’ er mindre end ‘18’.

er på det “step” man ‘hover’ over.

Hvilket det er, så denne ‘statement’ er ‘true’.

Video 10 bliver derfor vist på side 2 ved hjælp af “$(this).show();”.

platoo.js - Linje 2 - 13 $(function () {

pagination.js - Linje 10 - 17

$(‘.plat1, .car’).mouseenter(function () {

showPage(1);

$(‘.plat1’).addClass(‘platoo-scale’); $(‘.car’).addClass(‘price-scale’);

$(“#pagination li a”).click(function() {

storedtext = $(‘.currentPrice’).html();

$(“#pagination li a”).removeClass(“current”);

$(‘.currentPrice’).html(‘Tesla Model S’);

$(this).addClass(“current”);

}).mouseleave(function () {

showPage(parseInt($(this).text()))

$(‘.plat1’).removeClass(‘platoo-scale’);

});

$(‘.car’).removeClass(‘price-scale’); $(‘.currentPrice’).html(storedtext);

Tilføjer klassen “current” til et ‘pagination linket’ når man trykker

});

på det og fjerner “current” fra de andre links.

});

“showPage(1);” fortæller at vi skal starte på side “1”. “showPage(parseInt($(this).text()))” siger at at showPage skal

Når man holder musen over bilen, eller det plateau bilen står på,

ændres når man trykker på et link, siden den skal skifte til skal

bliver der tilføjet en klasse på både bilen og plateauet bilen står

være det tal der står i linket.

på.

Den tager teksten med klassen “currentPrice” og ændre den til en beskrivelse af hvad præmine er, ‘Tesla Model S’ i bilens tilfælde.

25

DOKUMENTATION AF KODEN (5 AF 17)

Dokumentation

Når man flytter musen væk fra plateauet eller bilen bliver alt

Hvis antallet af deltagere er større end eller i lig med “$step1”

resat så alt bliver sat tilbage til hvad det var før man holdte

som er “0 deltagere” er den nuværende præmie en solar charger.

musen over.

Hvis deltager tallet er større end eller i lig med “$step2” bliver

platoo.js - Linje 74 - 78 $(function () { if ($(‘#step4’).hasClass(“current_step”)) { $(‘.plat5’).css(‘background’, ‘url(“images/platoo/5-y.png”)’); }

teksten udskiftet. Dette sker for hver gang at deltager tallet bliver større end et ‘step’.

ABOUT.PHP På “about.php” er det muligt at indtaste sit navn og e-mail-adresse og tilmelde sig til nyhedsbrevet.

});

Det indtastet data bliver gemt i vores database.

Hvis “#step4” har klassen “current_step” skal “.plat5” skifte

about.php - Linje 63 - 72

background. Den skifter et grønt plateau ud med et orange plateau.

<form name=”newsletter_form” action=”nyhedsreg.php”

Man kan derfor tydeligt se hvilken præmie man er nået til i

method=”POST” id=”newsletter_form”>

forhold til antallet af deltagere i konkurrencen. <input type=”text” name=”newsletter_name” id=”newsletter_

PLATOO.PHP I php filen for plateau er den nuværende præmie beskrevet over plateauet, det er denne tekst bliver udskiftet hvis man hover over et plateau step.

platoo.php - Linje 31 - 32 if ($deltagere>=$step1){ $currentPrize = “Nuværende præmie: Solar Charger”; } if ($deltagere>=$step2){ $currentPrize = “Nuværende præmie: Carlsberg Green Line Racercykel”; }

name” class=’input_style’ placeholder=’Navn’/> <input type=”text” name=”newsletter_email” id=”newsletter_email” class=’input_style’ placeholder=’Email’/> <input type=”submit” id=”newsletter_btn” name=”newsletter_btn” value=”Send” /> <p id=”newsletter_errormessage”></p> </form>

26

DOKUMENTATION AF KODEN (6 AF 17)

Dokumentation

Formen for nyhedsbrevet bliver valideret af “nyhedsscript.js” for

Hvis de fire resultater er true bliver dataen godkendt og sendt

den forsætter til “nyhedsreg.php” som der gemmer dataen i

videre i systemet. Hvis en eller flere af resultaterne ikke er true

databasen. Herover ses html koden til vores nyhedsform.

modtager brugeren en besked, indtil alle resultater er true bliver

NYHEDSSCRIPT.JS

intet data sendt videre i systemet.

nyhedsscript.js - Linje 50 - 59

Før at man kan tilmelde sig nyhedsbrevet skal ens informationer være i orden. Vi har derfor udarbejdet et script der for eksempel

var newsletter_emailValidate = function(element) {

tjekker om navnet er bogstaver og længere end to karakterer.

if(!element.value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\ w+)*(\.\w{2,3})+$/)){

nyhedsscript.js - Linje 14 - 29

msg = “- Undlad venligst at benytte ugyldige tegn ved indtastning af

newsletter_form.onsubmit = function(){

email.”;

error=””;

error = error + msg + “<br><br>”;

var newsletter_result1 = newsletter_checknavnLength(newsletter_name,

} else {

“fornavn felter skal indeholder mindst 2 karakterer.”);

return true;

var newsletter_result2 = newsletter_checkmailLength(newsletter_email,

}

“fornavn felter skal indeholder mindst 2 karakterer.”);

}

var newsletter_result3 = newsletter_nameValidate(newsletter_name, “Undlad venligst at benytte ugyldige tegn ved indtastning af dit fulde navn.”); var newsletter_result4 = newsletter_emailValidate(newsletter_email, “Undlad venligst at benytte ugyldige tegn ved indtastning af email.”); newsletter_errorMsg.innerHTML = error;

Hvis det som er indtastet i email feltet ikke har et @ og et top-level-domain på mindst 2 og højest 3 karakter og et punktum foran.

if(newsletter_result1 && newsletter_result2 && newsletter_result3 && newsletter_result4) { return true; } else { return false; } };

27

DOKUMENTATION AF KODEN (7 AF 17)

Dokumentation

NYHEDSREG.PHP

CONTACT.PHP

Når informationen er blevet valideret bliver dataen gemt i

Hvis man ønsker at kontakte Carlsberg Green Line kan man på

databasen ved hjælp af “nyhedsreg.php”.

kontakt siden sende os en besked.

nyhedsreg.php - Linje 6 - 13

contact.php - Linje 15

$newsletter_email = $_POST[‘newsletter_email’];

<form name=”contact_form” action=”kontaktreg.php”

$newsletter_name = $_POST[‘newsletter_name’];

method=”POST” id=”contact_form”>

$sql = “INSERT INTO `patricktofteng_`.`carlsberg_nyhedsbrev` (`name`, `email`) VALUES (‘”.$newsletter_name.”’, ‘”.$newsletter_email.”’)”;

Kontaktformen vil også blive valideret før den køre videre til kontaktreg.php

KONTAKTREG.PHP Efter dataen fra kontaktformen er blevet valideret bliver dataen

$stmt = $mysqli->prepare($sql);

samlet og så sender den en mail til os. Hvis man har valgt at

$stmt->execute();

tilmelde sig vores nyhedsbrev bliver emailen og navnet også gemt i vores nyhedsbrev database.

Dataen fra formen bliver gemt i “$newsletter_email” og “$newsletter_name”. Dataen bliver gemt i carlsberg_nyhedsbrev så snart den kommer til execute.

kontaktreg.php - Linje 11 - 13 $from = ‘From: GreenLine.Carlsberg.dk’; $to = ‘mulbstud@gmail.com’; $body = “From: $contact_name\n\nE-mail: $contact_email\n\nSubject: $contact_emne\n\nMessage:\n$contact_besked”;

“From” er hvad der vil stå som afsender på den email vi modtager.

“To” er den e-mail-adresse beskeden bliver sent til.

“Body” er opsætningen af det data der skal være i mailen.

28

DOKUMENTATION AF KODEN (8 AF 17) kontaktreg.php - Linje 31 - 43

Dokumentation

SUCCESSFUL.PHP

if (!empty($_POST[“contact_checkbox”]))

successfull.php er en landing page til når man tilføjer sig til

{

nyhedsbrevet eller kontakter os via vores kontakt form. Man

$sql = “INSERT INTO `patricktofteng_`.`carlsberg_nyhedsbrev`

modtager en besked og efter ‘10’ sekunder bliver man redirected

(`name`, `email`) VALUES (‘”.$contact_name.”’, ‘”.$contact_

til forsiden.

email.”’)”; $stmt = $mysqli->prepare($sql); $stmt->execute();

header( ‘Location: http://www.patricktofteng.dk/cph/2.semester/ carlsberg/successful.php?mail=2’ ) ; } else { header( ‘Location: http://www.patricktofteng.dk/cph/2.semester/

successful.php - Linje 21 - 26 if(isset($_GET[‘mail’]) && $_GET[‘mail’] == “1”) { echo “<p class=’successful_message’>Hej <span class=’successful_message_highlight’>”.$contact_name.”</span> tak for din besked.<br>”; echo “Vi vil vende tilbage til dig hurtigst muligt.<br>”; echo “Du vil blive besvaret via mail på: <span class=’successful_ message_highlight’>”.$contact_email.”</span></p>”; }

carlsberg/successful.php?mail=1’ ) ;

Hvis der i url’en står /successful.php?mail=1 får brugeren en

}

besked om at beskeden blev sendt.

Der er fem skræddersyet beskeder til forskellige udkomme af

Hvis man har valgt at tilmelde sig nyhedsbrevet bliver email og

kontakt formen eller tilmelding af nyhedsbrevet.

navn gemt i databasen og derefter bliver man redirected til en landing page, “successful.php”, hvor der står at beskeden er sendt og at man er blevet tilmeldt nyhedsbrevet.

Hvis man ikke har valgt at tilmelde sig nyhedsbrevet kommer der blot en besked om at beskeden er sendt.

29

DOKUMENTATION AF KODEN (9 AF 17) successful.php - Linje 58 - 68 <p class=’successful_message’>Du vil blive omdirigeret til forsiden om <span id=”counter”>10</span> sekunder</p> <script type=”text/javascript”> function countdown() { var i = document.getElementById(‘counter’); if (parseInt(i.innerHTML)<=1) { location.href = ‘index.php’;

Dokumentation brugt “poster” til at give videoerne et mere imødekommende look. Det er ikke muligt for brugeren der uploader en video at tilføje et billede.

Der er derfor et default billede som vil blive vis hvis der ikke findes et billede til den bestemte video. Normalt ville man auto generere billeder for videoerne, men da dette kun er en prototype har vi valgt ikke at forsøge os på dette da vores tid kunne blive brugt mere fornuftig på andre ting.

} i.innerHTML = parseInt(i.innerHTML)-1; } setInterval(function(){ countdown(); },1000); </script>

competition.php - Linje 39 - 47 $videoPoster =’videos/images/’.$result[‘video’].’.jpg’; $defaultPoster =’videos/images/default.jpg’; $poster = (file_exists($videoPoster)) ? $videoPoster : $defaultPost-

Scriptet tager tallet som står i den ‘span’ hvor id’et er “counter”.

er;

For hvert sekund bliver tallet minusset med ‘1’ og når tallet er

mindre end eller i lig med ‘1’ bliver man redirected til forsiden.

echo “<a href=’video.php?watch=”.$result[‘video’].”’><video class=’player small’ poster=’”.$poster.”’ preload=’none’>”;

COMPETITION.PHP

echo “<source src=’videos/”.$result[‘filename’].”’ type=’video/

På konkurrencesiden har vi udarbejdet et galleri af de videoer der

mp4’>”;

er blevet uploadet.

echo “Your browser does not support the video tag.”;

Vi har brugt “preload” attributten med en værdi på “none” for

echo “</video></a>”;

at stoppe alle videoerne for at preloade når man loader siden.

Grunden til vi har valgt at gøre dette er at siden ellers ville tage lang tid at loade siden. Når “preload” er sat til “none” bliver der ikke vist det første frame af videoen som normalt, vi har derfor

30

DOKUMENTATION AF KODEN (10 AF 17)

Dokumentation

Her ‘poster’ vi alle videoerne ud fra databasen, hvis videoen også

HEADER.PHP

har et billede bliver dette billede tilføjet som “poster” hvis ikke

header.php er includet på alle sider, header har links til

den har et billede bliver default billedet brugt.

stylesheetene samt andre koder, såsom Google Analytics, der skal

competition.php - Linje 54 - 69

bruges på alle sider.

$pagesize = 9; $antal = mysqli_num_rows($sql); $pages = ceil($antal/$pagesize); $x=1; $startclass = “current”; echo “<ul id=’pagination’>”; while($pages>0) { echo “<li><a class=’”.$startclass.”’ href=’#list’>”.$x.”</a></li>”; $startclass = “”;

header.php - Linje 5 - 7 <meta property=’og:title’ content=’Carlsberg | Green Line | Schoolproject’> <meta property=’og:description’ content=’Deltag og vind en elbil | Disclaimer THIS IS A SCHOOLPROJECT’> <meta property=’og:image’ content=’http://www.patricktofteng.dk/ cph/2.semester/carlsberg/images/content-image.jpg’>

$x = $x+1;

Her bestemmer vi en ‘title’ en ‘description’ og et ‘image’ som

$pages = $pages-1;

bliver brugt når man deler linket på et social medie.

}

‘property’ “og:” er en Open Graph protocol der bliver brugt til at

Denne kode laver pagination menuen der er tilknyttet pagination.

fortælle facebook og andre sociale medier at de skal bruge det

js.

data som er blevet givet, som eksempelvis, data til et facebook

Antallet af videoer bliver gemt i “$antal” og antallet af sider bliver

opslag.

gemt i “$pages” = (Antallet af videoer divideret med 9).

Læs mere om Open Graph protocol på www.ogp.me

“$x” Er side tallet, som starter på ‘1’ og bliver forhøjet med ‘1’ for hver gang koden bliver kørt.

forsættes på næste side

Koden bliver kørt indtil at “$pages” ikke længere er større end ‘0’. “$pages” bliver minusset med ‘1’ for hver gang koden bliver kørt.

Det første tal der bliver posted har klassen “current”.

31

DOKUMENTATION AF KODEN (11 AF 17) header.php - Linje 14 - 17 $currenturl = $_SERVER[‘REQUEST_URI’]; $carlsberg_location = ‘/cph/2.semester/carlsberg/’; $siteKonkurrence = $carlsberg_location.’competition.php’;

“$currenturl” er den aktuelle url man er på. $siteKonkurrence = /cph/2.semester/carlsberg/competition.php

header.php - Linje 23 - 26

Dokumentation style.css får en extension som indeholder dato og tid, som hele tiden er ‘up to date’, grunden til vi bruger dette er at vi ‘forcer’ style.css til at have en ny adresse hver gang vi opdatere siden.

Hvilket gør den at den ‘forcer’ til at loade vores stylesheet, altså kan man være sikker på at de nyeste opdateringer i style.css bliver fundet og pålagt.

Dette er nyttigt når man hele tiden updatere i ens stylesheet.

INDEX.PHP Forsiden på hjemmesiden indeholder, de fire seneste uploadet

if ($currenturl == $siteKonkurrence)

videoer, en scroll effekt når man linker til et internt link og et

{

script der stopper menuen for at være fixed indtil efter videoen i

echo “<title>Konkurrence</title>”;

toppen.

}

index.php - Linje 14 - 23

Hvis den man er på konkurrence siden bliver ‘title’ sat til

<script>

“Konkurrence”. Samme er gældende for alle undersiderne til

$(document).ready(function(){

hjemmesiden.

$(‘a’).click(function(){

header.php - Linje 60 - 63 $timestamp = (date(“Y.m.d”). “.” .date(“h.i.s”)); echo “<link rel=’stylesheet’ type=’text/css’ href=’grid.css?timestamp=”.$timestamp.”’>”; echo “<link rel=’stylesheet’ type=’text/css’ href=’style.css?timestamp=”.$timestamp.”’>”;

$(‘html, body’).animate({ scrollTop: $( $(this).attr(‘href’) ).offset().top-80 }, 500); return false; }); }); </script>

32

DOKUMENTATION AF KODEN (12 AF 17)

Dokumentation

Når man trykker på et internt link scroller den ned eller op af

Scriptet her stopper menuen for at være fixed de første 100% af

siden med en effekt, frem for bare et hoppe direkte til

vinduets højte, altså menuen vil ikke være fixed over videoen i

destinationen.

toppen af forsiden.

Der er tilmed sat et offset i toppen på 80px som er svarenden til

MENU.PHP

menuens højde, så man kommer til destinationen men stadig har menuen lige over.

index.php - Linje 212

Tilføjer en klasse “fixed” til menuen, hvis man ikke er på forsiden.

Udskriver samtidig en div der er 80 pixel høj, i toppen af siden, som menuen vil lægge sig over fra start.

$sql = “SELECT * FROM `carlsberg_entry` ORDER by ID DESC LIM-

menu.php - Linje 2 - 15

IT 4”;

$currenturl = $_SERVER[‘REQUEST_URI’];

Vælger de fire seneste videoer fra databasen, senere vil de blive

$carlsberg_location = ‘/cph/2.semester/carlsberg/’;

posted ud. $siteIndex = $carlsberg_location.’index.php’;

index.php - Linje 264 - 276 <script>

if ($currenturl == $siteIndex)

var h=$(window).height();

{

$(window).bind(‘scroll’, function () {

$addfixed = “”;

if ($(window).scrollTop() > h) {

}

$(‘#header’).addClass(‘fixed’);

else

$(‘#mobile_btn’).addClass(‘fixed’);

{

} else {

$addfixed = “fixed”;

$(‘#header’).removeClass(‘fixed’);

echo “<div class=’header_space’></div>”;

$(‘#mobile_btn’).removeClass(‘fixed’);

}

} }); </script>

Hvis man er på index.php er $addfixed tom, ellers er den “fixed”, senere bliver $addfixed sat ind som klasse på menuen.

33

DOKUMENTATION AF KODEN (13 AF 17)

Dokumentation

UPLOAD.PHP upload siden har et lille script, der viser filstien når en fil er blevet valgt. Denne sti er ikke den aktuelle sti med en såkaldt ‘fakepath’.

upload.php - Linje 21- 30 <input id=”upload_file_dir” type=”text” disabled=”disabled” placeholder=”Vælg video”>

upload.php - Linje 18 - 19 $watchid = $_GET[‘watch’]; $sql = “SELECT * FROM `carlsberg_entry` WHERE `video` = ‘$watchid’ LIMIT 1”;

Videoen bliver ‘selected’ fra databasen via url’ens extension som skal matche op mod video feltet i databasen.

<input type=”file” name=”video” id=’upload_file’/>

SAVE.PHP

<script>

Dataen bliver gemt i databasen og videoen bliver gemt på

document.getElementById(“upload_file”).onchange = function () { document.getElementById(“upload_file_dir”).value = this.value; }; </script>

save.php er filen der modtager de oplysninger fra upload siden. serveren.

save.php - Linje 4 - 5 $random_video_name_length = 10; $random_video_name = substr(str_shuffle(“0123456789abcdefghi-

Når man vælge en fil ved at trykke på knappen med id’et

jklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ”), 0, $ran-

“upload_file”, ændres ‘value’ på feltet med id’et “upload_file_dir”

dom_video_name_length);

til en fakepath sti. Hvis vi havde mere tid ville vi have lavet et script der fandt den rigtige sti hvor videoen befandt sig på computeren.

Her laver php koden en random ‘string’ på ‘10’ karakterer og gemmer det i $random_video_name. Dette bliver senere brugt til at omdøbe den uploadet video til denne nye randome ‘string’.

VIDEO.PHP Video siden har en stor video player i toppen og en beskrivelse og

Forsættes på næste side

navnet på deltageren nedenunder, og i venstre side en liste over de tre nyeste videoer.

34

DOKUMENTATION AF KODEN (14 AF 17) save.php - Linje 8 - 9

Dokumentation Flytter den uploadet video til mappen “videos” på serveren.

$allowedExts = array(“wmv”,”avi”,”mpeg”,”mpg”,”mp4”,”mov”,”ogg”,”webm”); $extension = end(explode(“.”, $_FILES[“video”][“name”]));

Her beskriver vi de tilladte fil typer til, wmv, avi, mpeg, mpg, mp4, mov, ogg og webm.

save.php - Linje 12 - 21 if (($_FILES[“video”][“type”] == “video/mp4”) && ($_FILES[“video”][“size”] < 300000000) && in_array($extension, $allowedExts))

save.php - Linje 48 - 51 $sql = “INSERT INTO `patricktofteng_`.`carlsberg_entry` (`name`, `email`, `description`, `video`, `filename`, `filetype`) VALUES (‘”.$name.”’, ‘”.$email.”’, ‘”.$description.”’, ‘”.$random_video_name.”’, ‘”.$new_file_name.”’, ‘”.$saveto.”’)”; $stmt = $mysqli->prepare($sql); $stmt->execute();

Ydeligere information bliver gemt på serveren.

METER.PHP

Overstående kode er blevet gjort meget kortere for at gøre det

Vores deltagermeter er et dynamisk meter der viser antallet af

mere overskueligt.

deltagere på nuværende tidspunkt.

Hvis filen der bliver uploadet er en af de tilladte filtyper og at fil størrelsen ikke fylder mere end 300mb, bliver videoen uploadet.

save.php - Linje 33 - 34 $new_video_name = $random_video_name; $new_file_name = ($new_video_name).’.mp4’;

Det nye random filnavn bliver gemt som .mp4.

save.php - Linje 40 - 41 move_uploaded_file($_FILES[“video”][“tmp_name”], “videos/”.$new_file_name);

meter.php - Linje 4 - 13 $sql = “SELECT * FROM `carlsberg_entry`;”; $stmt = $mysqli->prepare($sql); $stmt->execute(); $res = $stmt->get_result(); $deltagere = mysqli_num_rows($res); $deltagere = $deltagere + 650-21;

35

DOKUMENTATION AF KODEN (15 AF 17)

Dokumentation

Her udregner vi antallet af deltagere ved at tælle antallet af rækker i “carlsberg_entry”, antallet bliver gemt i “$deltagere”.

Da antallet af deltagere kun er ‘21’ lige nu har vi valgt at sætte deltagere tallet til 650 for at give et mere realistisk look til denne prototype.

meter.php - Linje 42 echo “<div class=’beer-show’ style=’width:”.$procent.”%’>”;

Vi sætter ‘width’ på “beer-show” til “$procent”, så den altid vil ændre ‘width’, til den aktuelle procent i forhold til antallet af

meter.php - Linje 17 - 30 $goal = 1000;

deltagere.

Grunden til at det er ‘width’ og ikke ‘height’ der bliver sat til procenten er at vores meter glas er roteret 90 grader så ‘width’

$divided = $deltagere/$goal;

bliver til ‘height’ og omvendt.

meter.php - Linje 53 - 65 $procent = $divided*100; if ($procent>100) { $procent = 100; }

$step1 = 0; $step2 = 100; $step3 = 250; $step4 = 500; $step5 = 750; $step6 = $goal;

Vi starter med at definere målet, dette skal være det antal hvor meteret er på 100%.

$step2procent = $step2/$goal*100;

Vi udregner procenten ud fra antallet af deltagere og hvad målet

$step3procent = $step3/$goal*100;

er, dette bliver lageret i “$procent”.

$step4procent = $step4/$goal*100;

Hvis “$procent” er større end 100 bliver “$procent” sat til 100, så

$step5procent = $step5/$goal*100;

meteret ikke kan blive mere end 100% i højden.

$step6procent = $step6/$goal*100;

36

DOKUMENTATION AF KODEN (16 AF 17)

Dokumentation

Ved siden af meteret er de forskellige ‘step’ skrevet i tal så man kan se hvilket præmie ‘step’ man er på. Vi sætter tallene for hvert step, og udregner hvad procent det svare til.

meter.php - Linje 77 - 82 $stepprocent=array($step2procent,$step3procent,$step4procent,$step5procent,$step6procent); $stepprocent=array_reverse($stepprocent); $steps=array($step2,$step3,$step4,$step5,$step6); $steps=array_reverse($steps); $arrlength=count($steps);

Der laves et array for både ‘steps’ og ‘step procenten’, de er blevet ‘reversed’ for at tallene kommer ud i rigtig rækkefølge.

meter.php - Linje 85 - 97 for($i=0;$i<$arrlength;$i++) { if ($deltagere>=$steps[$i] | $deltagere>=$goal){ echo “<p id=’step”.$i.”’ class=’prize current_step’ style=’height:”.$stepprocent[$i].”%;’>- “.$steps[$i].”</p>”; echo “<br>”; } else { echo “<p id=’step”.$i.”’ class=’prize’ style=’height:”.$stepprocent[$i].”%;’>- “.$steps[$i].”</p>”; echo “<br>”; } }

Hvis “$deltagere” er større end “$steps[$i]” eller at “$deltagere” er større end eller i lig med “$goal” bliver tallet tildelt klassen “current_step”.

Hvis ikke at deltager tallet er større end tallet bliver klassen ikke givet.

Dette gør at de tal der mindre end deltager tallet bliver highlightet.

Tallene bliver sat på dens rette plads ved hjælp af “$stepprocent” arryet, ’height:”.$stepprocent[$i].”%;’ og selve tallet bliver posted ud fra “$steps” arrayet, således: “.$steps[$i].”.

37

DOKUMENTATION AF KODEN (17 AF 17) GATEKEEPER.PHP Første linje session_start(); starter en ny session til brugeren. if($_SERVER[‘REQUEST_METHOD’]==’POST’) tjekker om hvorvidt siden er blevet kaldt igennem POST, om hvorvidt formen er submitted. Herefter hvis if(isset($_POST[‘YES’])) (hvis ja den er submitted) så redirecter den med ?return= til den side hvor brugeren bør være.

Linje 7 til 8 gør at den også understøtter en udløbstid i sekunder Linje 7 til 14 gør også at den kun vare i denne session og redirecter Linje 15 til 21 sætter en cookie der ikke løber ud før om et godt stykke tid og redirecter.

Linje 22 til 25 giver den istedet en normal udløbstid og redirecter.

Linje 26 til 29 gør at hvis man klikkede på “nej jeg er ikke over 18” etc. bliver man redirected til fx en fejlside.

gatekeeper.php - linje 6 - 33 session_start(); if($_SERVER[‘REQUEST_METHOD’]==’POST’) { if(isset($_POST[‘YES’])) { $redirect=isset($_GET[‘return’])?urldecode($_GET[‘return’]):’./’; $expire=isset($_GET[‘x’]) && is_numeric($_GET[‘x’])?intval($_ GET[‘x’]):-1; if($expire==-1)

Dokumentation

koden forsat { $_SESSION[‘gatekeeper’]=”yes”; header(“location: “.$redirect); exit(0); } if($expire==0) { setcookie(“gatekeeper”, “yes”,mktime(0,0,0,01,01,date(“Y”)+30)); $_SESSION[‘gatekeeper’]=”yes”; header(“location: “.$redirect); exit(0); } setcookie(“gatekeeper”, “yes”,(time()+$expire)); $_SESSION[‘gatekeeper’]=”yes”; header(“location: “.$redirect); exit(0); }else{ header(“location: http://www.youtube.com/watch?v=0ytPgei1tQs”); exit(0); } } ?>

38

Dokumentation

Usability I dette afsnit

• Brugertest og ekspertvurdering • SEO • HTML og CSS validering

39

BRUGERTEST OG EKSPERTVURDERING

Dokumentation

Vi vil gennemføre en brugertest af hjemmesiden på tre

Ekstra spørgsmål til brugertesten:

forskellige platforme før vi lancerer kampagnen.

1. Hvad syntes du om du overordnede navigation af sitet?

2. Er det nemt at læse teksten på hjemmesiden?

3. Tænker du umildbart på grønnere tiltag når du ser siden?

De tre platforme vil henholdsvis pc (Chrome, Internet Explorer, Safari, Mozilla), Ipad og smarttelefon.

Alle platforme vil få stillet de samme spørgsmål og ekstra spørgsmål. Dog vil Ipad og smarttelefon skulle filme en lille

EKSPERTVURDERING

film selv, i stedet for at uploade en allerede given film på

Det er planen at hente en anden gruppe ind for at foretage

USB.

en ekspertvurdering af vores kampagneside.

OPGAVEN:

Denne test skulle gerne give os en ide om hvordan siden

Du har købt en six-pack med den nye Carlsberg Green Line

eventuelt kan ændres for at skabe bedre oplevelse for

indpakning og set reklamen for konkurrencen.

brugren.

Du vil gerne deltage i konkurrencen.

Du skal nu på bedste vis udføre de følgende opgaver:

1. Start med at finde betingelserne for konkurrencen. Er du gammel nok til at deltage?

2. Du vil gerne vide hvad præmierne er. Hvilken præmie er

OBS: Disse tests er ikke gennemført endnu.

Resultater vil blive fremlagt ved eksamen.

pt. første præmien?

3. Tilmeld dig konkurrencen ved at uploade filmen fra USB drevet, eller film med din mobileenhed og upload.

4. Du vil gerne vide mere om Carlsberg Green Line kampagnen. Hvad er der særligt ved Carlsberg indpakningen af øl?

40

SEO

Dokumentation

Ved hjælp at en række forskellige søgemaskine optimeringer

Ydermere fylder vores beskrivelse af sitet, <meta name=”-

har vi gjort det muligt for brugerne at nemmere kan finde

description”…>, ikke mere end 60 tegn, og er helt præcis

vores kampagneside. Når de søger på fx google, bing mv.

med hvad sidens indhold er. Beskrivelsen er ens for alle undersider for at sætte vores konkurrence i fokus.

Vi har brugt et normalt sprogbrug og sikret os at indholdet er fyldestgørende og relevant, for at sikre os at når de

Vi har for at få siden til at være konstant ”up-to-date” i

diverse søgemaskiner finder vores site. Er det relevant

forhold til søgemaskinerne, har vi sat meta tagget <meta

information der dukker frem på søgeresultatet.1

name=”robots” content=”index, follow”>, så søgemaskinerne indeksere siderne og følger alle links.

Vi har sørget for at alle vores sider har relevante url navne, som dækker kort og præcist hvad siderne indeholder.

Samtlige billeder på siden er udstyret med et alt tag,

For at yderligere optimere søgningen har vi sørget for at der

alt=”…”>, der beskriver på bedste vis hvad billedet

på hver side findes et h1 tag, som beskriver sidens

indeholder.

overskrift, i ganske få tegn, og samme er gældende for h2 tag for at få søgemaskinen til at finde orden efter heraki.

For at hjælpe søgemaskinerne yderligere på vej, med indekseringen af vores kampagneside. Har vi fået genereret et

Alle titlerne, <title>…, i headeren er under de estimerede

sitemap, som opdaterer sig selv hver uge. Dette er lavet via

30 tegn, for bedre optimering samt muligheden for at læse

http://www.xml-sitemaps.com/ generatoren.

hele titlen i fanebladet.

Og ved hjælp af Google analytics implementeringen kan vi konstant holde et vågent øje med bevægelserne rundt på sitet, og foretage ændringer i optimeringen efter behov. http://www.browseo.net/?url=http%3A%2F%2Fwww.patricktofteng.dk%2Fcph%2F2.semester%2Fcarlsberg%2Findex.php

41

HTML OG CSS VALIDERING

Dokumentation

For at sikre os at sitet ikke har nogen problemer i forhold til forskellige browsere, har vi fået vores kampagnesides forside og tilhørende undersider valideret på http://validator.w3.org/ Valideringen af sitet sikre os også at der ikke er nogen problemer vi ikke har overset under udviklingen.

Ud over HTML valideringen har vi også fået foretaget en validering af vores stylesheets via http://jigsaw.w3.org/css-validator/ Vi har dog konstateret en fejl i vores css i følge w3.org css validator: ::selection som bliver brugt til at style på markeret tekst, bliver ikke valideret.

Vi mener dog at denne fejl er så ubetydelig og funktionen er så relevant at vi har valgt at ikke følge op på fejlen, men bibeholde den i vores kode.

42

Visuel identitet

Designlinien I dette afsnit

• • • •

Typografi Farve valg Logo Grundelementer

43

TYPOGRAFI

Visuel identitet

Font typerne er valgt ud fra Carlsberg Sans. Idéen er at alle fonttyperne ligner hinanden, dog med små forskelligheder.

AbeeZee er valgt til hjemmesiden skrift, da den er mere moderne end verdana og står flottere som brødtekst end Carlsberg Sans.

Carlsberg sans fungerer som kampagne font. Den bruges til diverse overskrifter og ved særlige tilfælde. Den skal bruges sparsomt.

Verdana skal bruges som brødtekst til eventuelle print medier. Den er hovedfonten i vores rapport, da den står flottere på længere klummer af tekst frem for ABeeZee.

ABeeZee ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789,@-?&/.

Carlsberg Sans ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789,@-?&/.

Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789,@-?&/.

44

Carlsberg Rød #9e0203 R158 G2 B3 C24 M100 Y100 K23

Grå #e9e9e9 R233 G233 B233 C7 M5 Y6 K0

Hvid #ffffff R255 G255 B255 C0 M0 Y0 K0

Sort #070707 R7 G7 B7 C74 M68 Y67 K87

Lys Grøn #21944a R33 G148 B74 C83 M17 Y97 K4

Visuel identitet

Lime #8cc640 R140 G198 B64 C50 M0 Y99 K0

Mørk Grøn #115622 R17 G86 B34 C87 M39 Y100 K39

FARVE VALG

MØRK GRØN har vi valgt at arbejde

LIME repræsenterer et

LYS GRØN er valgt som et midterpunkt mellem lime og den

med da den Carlsbergs original farve.

frisk pust til den mørke

mørk grønne. Den skal være med til at give noget dynamik i

Dog er den gjort let lysere for denne

Carlsberg designman-

designet

kampagnes lyse budskab.

uals originale farver.

Denne farve er valgt til

SORT repræsenterer kvalitet og prestige. Den er også brugt

denne kampagne for at

til brødtekst, overskrifter m.m

hjælpe med at sprede budskabet om en

HVID er primær farven af Carlsbergs logo. Den er også

grønnere verden.

brugt til brødtekst, overskrifter m.m GRÅ er en “standout” farve til vores hvide. Den fungerer som gradient til den hvide, samt hover på nogen knapper.

CARLSBERG RØD skal kun bruges ved særlige tilfælde, og i små mængder. Den bruges dog til hele mobilmenuen for at skabe opmærksomhed

45

LOGO Logoet er skabt ud fra Carlsbergs originale logo. Det er i stil

Visuel identitet

Inline:

med tidligere Carlsberg kampagner at det originale logo står tydligst frem og derfor har vi også valgt at gøre det samme.

Cirklerne i Carlsberg Green Line skal repræsentere bobler i øllen og fungerer som et grundlæggende element i Green

Inline sort/hvid:

Line serien.

Der er flere versioner af logoet, dog er den mest brugte i kampagnen, hvid Carlsberg med limegrøn Green Line.

Sort/hvid:

Green Line alene:

46

GRUNDELEMENTER

Visuel identitet

LINIEN

BOBLERNE

Linien i Green Line er en frisk linie som skal repræsentere

Green Line boblerne skal være i enten lime eller lysegrøn,

den linie som Carlsberg er ved at omligge sig til. Linien skal

og gerne have et lille gradient skær.

i designet helst være lavet med en gradient som går fra den mørke grønne til ventstre imod limegrønne til højre.

Der skal være flest lime farvede bobler ved brugen af dem.

Farve fordelingen:

Den må gerne hælde og skal gå hele vejen hen over baggrunden.

47

Produkter, print og merchandice

Offline, print og merchandise I dette afsnit

• • • •

Green Line - Øl serie Offline materialer og merchandise Eksempler på print Eksempler på merchandise

48

GREEN LINE - ØL SERIE

Produkter, print og merchandice

Green Line ølindpakning skal fungerer som forløber for kampagnen. Det er planen at ved at forbrugeren køber Carlsberg øl, ser de indpakningen og herefter går på greenline.carlsberg.dk for at deltage i konkurrencen, eller blot fordi de har interesse i Carlsbergs seneste tiltag.

Derfor var det vigtigt at lave en indpakning som vil stå ud blandt alle de andre øl Carlsberg og andre producenter har.

Green Line glasøl er påklædt med et stykke bionedbrydeligt stykke plastik, som indeholder designet fra Green Line og herunder en bobbel der har et tilfældigt citat om Carlsbergs seneste energi tiltag.

Det er således meningen at det for forbrugeren er sjovt at samle en Carlsberg op, da der findes mange “grønne info” citater, og derfor aldrig ved om man måske lære noget nyt ved at samle en ny Green Line op.

49

OFFLINE MATERIALER OG MERCHANDISE Merchandise og offline materialer skal være med til at skabe

Se eksempler på print på side 48

en større opmærksomhed omkring kampagnen. Merchandise kan bruges ved events, konkurrencer og festivaller og på den måde for folk at vise deres støtte til GREEN LINE og det at gøre noget for miljøet generelt.

Ved at have plakater og lignende i det offentlige rum som f.eks. på busstoppesteder eller som ’billboard’ reklamer rundt omkring i byerne gør også at langt flere mennesker vil se kampagnen og skabe omtale/interesse.

Flyers der kunne blive delt ud til begivenheder, hvor den limited edition øl ville blive serveret, skulle gerne give den

Se eksempler på merchandise på side 49

samme effekt som de andre offline materialer og evt. give en bedre forståelse for hvad kampagnen går ud på.

Udover effekten som merchandise og offline materialerne ville have, har vi også prøvet at bibeholde den designlinje vi har benyttet på hjemmesiden og på alle andre produkter.

Dette er selvfølgelig for at folk gerne skulle genkende produktet og dets afsender nærmest uden at have læst hvad der står på produktet.

50

EKSEMPLER PÅ PRINT

Produkter, print og merchandice

Flyer

Plakat

Ko nk ur

re nc e

m

ed

fe d

e

pr æ m

ie r

!

Greenline.Carlsberg.dk

Ny limited edition øl fra Carlsberg - Lad os sammen gøre en forskel

Vedvarende energi er vejen frem

Bygnings banner

Fortæl os hvad du gør for miljøet og spred budskabet!

Måske bliver det dig der vinder en af de fede præmier

51

EKSEMPLER PĂ&#x2026; MERCHANDISE

Produkter, print og merchandice

Male FRONT

Female FRONT

Male BACK

Female BACK

52

Konklusion og refleksion

Konklusion og refleksion I dette afsnit

â&#x20AC;˘ Green Line konklusion

53

GREEN LINE KONKLUSION

Konklusion og refleksion

Da vi skulle vælge hvilket firma vi ønskede at arbejde med.

Ved hjælp af SWOT og TOWS analyserne har vi også fundet

Tog det utrolig lang tid for os at blive enige om et firma vi

og unyttet både interne og eksterne muligheder som

alle kunne støtte op om, og idéen om det grønne tiltag for

Carlsberg er i besiddelse af. Herunder muligheden for at

det firma. Da det endelige valg faldt på Carlsberg, fik vi ved

brande nye produkter ved hjælp af Carlsbergs allerede

hjælp af en større analyse af Carlsbergs nuværende ideal-

ekstremt store kommunikationsplatform.

er og firmastruktur en bedre idé om vores koncept. Hvor vi kom frem til idéen ”Carlsberg - Green line”.

Kampagnes konkurrence vil forhåbentlig blive spredt ud

En øl kampagne, med tilhørende konkurrence og

over de sociale medier og dermed få endnu flere

kampagneside.

forbrugere ind på kampagnesiden. Derved resultere i at endnu flere danskere bliver bevidste om Carlsbergs planer

Carlsberg er kendt for at være et firma der ikke går tilbage,

for vedvarende energi og miljørigtig indpakning.

men kun fremad i deres verden. Ved opstillingen af AIDA modellen og studering af Carlsbergs CSR rapport fandt vi

Green Line kampagnesiden, ølindpakning og de mange

hurtigt vores grundlag for kampagnens interessepunkt,

offline medier kan derfor medføre at den miljøbevise

”Fortæl verden om dit grønne tiltag”. Hvilket blev grundlaget

danskere, plus den allerede loyale kunde vælger at tage en

for vores målgruppe, 20 til 35 år, som lever for de sociale

Carlsberg ned fra hylden, frem for andre konkurrenters eller

medier, selfies og generelt informationsalderen.

supplerende produkter.

Carlsberg har i forvejen en utroligt stor loyal kundebasis i Danmark og det var derfor vigtigt at Green Line kampagnen blev formidlet korrekt, så der forsat fastholdes den store kundebasis. Derfor har vi også valgt at holde os til mange af de samme grundelementer og farver som Carlsberg allerede benytter i deres design- og produktionslinie.

54

Kildeliste

Kildeliste I dette afsnit

â&#x20AC;˘ Litteratur â&#x20AC;˘ Links

55

LITTERATUR

Kildeliste

Forbes, Allan : The Joy of jQuery : Udgave 1, Forbes, 2013 Forbes, Allan : The Joy of Programming PHP, Udgave 1, Forbes, 2013 Jackobsen, Jan Kragh : 29 spørgsmål : Udgave 2, Samfundslitteratur, 2012 Wisler-Poulsen, Ian : 20 Designprincipper : Udgave 1, Grafisk Litteratur, 2012 Wisler-Poulsen, Ian og Gregersen, Ole : Usability : Udgave 1, Grafisk Litteratur, 2009 Harder Fischer, Louise og Oosterbaan, Marie : Digital Media Management : Udgave 3, Nyt Teknisk Forlag, 2010

LINKS

https://www.youtube.com/watch?v=VGENVguQQmo https://www.youtube.com/watch?v=RtVt-6Kbmvg https://www.youtube.com/watch?v=vs1wMp84_BA https://www.youtube.com/watch?v=AtK2qImqBQs https://www.youtube.com/watch?v=shIfTvNrJTk https://www.youtube.com/watch?v=r81UASQfHUk https://www.youtube.com/watch?v=dRV5iv66rBE https://www.youtube.com/watch?v=bG7SgSgk6OU https://www.youtube.com/watch?v=wlDjoqWpELg https://www.youtube.com/watch?v=T4qQ2ksuV0o https://www.youtube.com/watch?v=t1tuzvT1hck https://www.youtube.com/watch?v=6aL7e0BPEkY Forsættes på næste side 56

LINKS

Kildeliste

http://www.carlsberggroup.com/SiteCollectionImages/Strategy/GuidelinesStrategyWheelNew.jpg http://www.carlsberggroup.com/SiteCollectionImages/Strategy/business-model.jpg http://www.carlsberggroup.com/Company/Strategy/Pages/MVV.aspx http://www.carlsberggroup.com/media/gallery/Pages/gallery.aspx - Flere billeder fra galleriet Flere billeder fra galleriet: http://www.carlsbergdanmark.dk/Presse/Billedbank/Pages/Default.aspx?fp=PublishingImages%2fStemningsbilleder&vt=file Flere billeder fra galleriet: http://www.carlsbergdanmark.dk/Presse/Billedbank/Pages/Default.aspx?fp=PublishingImages%2fSponsorater&vt=file http://seeklogo.com/logo.aspx?id=26377 http://www.itsmylifeinc.com/wp-content/uploads/2012/12/Man-in-a-chair-in-grass-field.jpg https://www.facebook.com/CarlsbergDK/info http://www.carlsberggroup.com/investor/news/Documents/Carlsberg%20Group%20Annual%20Report%202013.pdf http://www.carlsberggroup.com/investor/downloadcentre/Documents/CSR%20Reports/CarlsbergGroupCSRReport2013.pdf http://www.estravel.ee/uudised/wp-content/uploads/2010/12/fly_picto.gif http://all-free-download.com/free-vector/vector-misc/london_48098_download.html http://all-free-download.com/free-vector/vector-sport/riding_a_bicycle_311140.html https://dribbble.com/shots/1546762-Car-FREE-psd?list=users&offset=0 soccer ball: http://www.clipartbest.com/clipart-4i9E74zAT t-shirt: http://jovdaripper.deviantart.com/art/Vector-T-shirt-Template-143230813 sunglasses: http://www.clipartbest.com/clipart-aceKyEKgi cap: http://alexlit.deviantart.com/art/Vector-Cap-Template-209629720 http://media.juniqe.com/wp-content/uploads//2014/05/Francis-Bacon-via-arteverywhere.org_.jpg http://adoholik.com/wp-content/uploads/2010/12/swedish-tennis-veterans.jpg http://gvartwork.files.wordpress.com/2013/05/sw-banner-on-building-mock-up1.jpg http://www.dac.dk/da/dac-life/copenhagen-x-galleri/cases/carlsberg/ http://wallpapersus.com/wallpapers/2012/11/Green-Grass-Field-1800x2880.jpg http://www.carlsberggroup.com/csr/ourstories/PublishingImages/Trucks.JPG https://www.youtube.com/watch?v=kDRuYoBC3PA Redirect countdown: http://stackoverflow.com/questions/12498209/redirect-10-second-countdown Upload button + show path: http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/ Close current tab link: http://raghunathgurjar.wordpress.com/2012/05/02/how-close-current-window-tab-in-all-browsers-using-javascript/ Pagination gallery: http://stackoverflow.com/questions/10034724/simple-jquery-pagination http://jsfiddle.net/jfm9y/184/ Video upload: http://stackoverflow.com/questions/15566498/video-upload-in-php array + reverse array (meter.php): http://stackoverflow.com/questions/14856787/show-array-values-for-a-specific-letter http://www.php.net/manual/en/function.array-reverse.php Checkbox style (Checkbox Five) (kontakt.php) http://www.paulund.co.uk/style-checkboxes-with-css http://www.carlsberggroup.com/Company/Strategy/Pages/ourbusinessmodel.aspx http://www.carlsberggroup.com/csr/ReportingonProgress/Responsible%20drinking/Pages/Responsibledrinking2013.aspx http://www.carlsberggroup.com/csr/ReportingonProgress/Environment/Pages/Environment_2013.aspx http://www.carlsberggroup.com/csr/ReportingonProgress/SustainablePackaging/Pages/default.aspx 57 http://www.carlsberggroup.com/Company/Strategy/Pages/TheStand.aspx http://www.carlsberggroup.com/media/PressKits/Documents/Carlsberg/International_makeover_for_iconic_carlsberg_brand.pdf

Bilag

Bilag I dette afsnit

• Carlsberg Business model • Carlsberg strategy wheel • Carlsberg sustainable packaging

58

CARLSBERG BUSINESS MODEL

Bilag

Bilag 1

Tilbage til Carlsbergs nuvĂŚrende coporate identity 59

CARLSBERG STRATEGY WHEEL

Bilag

Bilag 2

Tilbage til Carlsbergs nuvĂŚrende coporate identity 60

CARLSBERG SUSTAINABLE PACKAGING

Bilag

Bilag 3

Tilbage til Carlsbergs nuvĂŚrende corporate image 61

62