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