RC -SERIEN RC 230i

Transcription

RC -SERIEN RC 230i

Procesbeskrivelse
opgaven
produkt, Fysisk portfolio og appendix
Agenda Group (AG) (hvor jeg er elev) har igennem de seneste
år været igennem en strategisk ændring. Denne er for alvor ved
at slå igennem, og nu er det på tide at kommunikationen og
derved den grafiske identitet følger med.
Produktet er i dette tilfælde hjemmesiden, og den ses på
www.ninakristensen.com/testside.
Jeg har i denne proces designet et nyt logo, et nyt visitkort og
en ny hjemmeside, som grundlag for den videre udvikling af
kommunikationen AG og vores kunder imellem.
Der er rigtig mange appendix til denne opgave. Alt fra skriftprøver til skitser til de færdige produkter. Alt er vedlagt den
fysiske portfolio.
kvalitetsvurdering
mit birdrag
Jeg alene har stået for fremstillingen af alt der ses i denne
portfolio. Lige fra undersøgelser af nuværende identitet til
skitser til fremstilling af produkter og hjemmeside.
Arbejdsform
Jeg har i denne procesdokumentation valgt at lægge vægt
på, at beskrive de ting jeg har valgt frem for det jeg har
fravalgt. Det betyder ikke at der ikke er begrundelser for mine
fravalg, men blot at jeg ikke finder grund til at uddybe dem
nærmere.
Elementer jeg har valgt at arbejde videre med, sætte fokus på
eller på anden måde vil fremhæve, er markeret med et
som et symbold på det jeg godt „kan lide“.
sparring & Inspiration
I dette projekt har jeg inddraget eksterne ressourcer for
at hente input. Det være sig fx mine kollegaers (dem der i
dagligdagen bruger identiteten) meninger om nuværende
identitet eller en tidligere medarbejder og kommunikationskonsulent hos , for at sparre med i idé-fasen.
2
Jeg er ekstremt tilfreds med resultatet og især min chefs
tilfredshed med resultatet af denne udvikling af en grafisk
identitet.
Det kan være et meget ømtåleligt emne, at ville udfordre det
folk kender og ofte er glade for, men det kan vise sig at være
givtigt og rigtigt timet.
Da jeg gik i gang med opgaven var jeg ikke klar over, at faktisk er på vej mod et identitetsskifte, og jeg er meget glad og
stolt over at være udpeget til at lede den interne del af denne udvikling, og at mine tanker og bedrifter er højt værdsat.
Nu glæder jeg mig bare til at se det færdige resultat en gang
ultimo 2013, forhåbentlig.
3
Endelige produkter
Digital produktion del 3
Det nye look
Hvad så nu?
Fremvisning & kommentarer
Endelig produktsammensætning
Endelige sider
CSS
HTML & PHP
Optimering
Wireframes
Design ver. 3
Design ver. 2
Storyboard
Layoutskitser
Sitemap
Design ver. 1
Storyboard
Layoutskitser
Sitemap
Endeligt logo
Fonte & farver
Logodesign
Farveinspiration
Fontinspiration
Logoskitser
Afsender og målgruppe
Inspiration
Resultater
Interview
Det gamle Agenda Group-look
TIDSLINJE
Her ses et overblik over den grafiske designproces.
Igennem denne dokumentation af opgaven, vil jeg uddybe
de vigtigste punkter yderligere.
Det gamle Agenda Group-look
AGs nuværende look består af et logo, et bomærke, 17
farver plus sort og hvid samt én font, Myriad Pro.
De vigtigste elementer AG arbejder med er visitkortet,
hjemmesiden og præsentationsskabelonen.
Myriad Pro
Light
Light Italic
Regular
Italic
Semibold
Semibold Italic
Bold
Bold Italic
Nina Kristensen
Art Director
+45 2213 1554
[email protected]
Light Condensed
Light Condensed Italic
Condensed
Condensed Italic
Semibold Condensed
Semibold Condensed Italic
Bold Condensed
Bold Condensed Italic
Black Condensed
Black Condensed Italic
Myriad ProFerio bero int molumquid
que quatin nonet aut expliciatur,Alici nos earum nisciet
fugitio. Harum dolores tempor sum adiaspere nest volores
del inciis aut porpor soluptinum es nim rent re erenis comnihi caborum aut esed quam, quo et aut quia cullandit aborem
etur? Solo imporem ad exerum utasinust, officid quo deliquo
dolorum eos ipsam non nem hilignatur aut harit ut vid que
imusdaecta simillec
4
Når vi laver præsentationer, tilpasser vi dem ofte kundens
designguidelines, og derfor ser vores præsentationer ofte
meget forskellige ud, og er af den grund ikke vist her.
Generelt er looket meget kantet, og sort er meget dominerende. Der er mange farver i designmanualen, men det
bliver stortset aldrig brugt. I stedet benyttes ofte kunden
designmanual og farver.
Interview
Jeg starter processen med at undersøge hvad mine kollegaer, som er dem der arbejder med AGs elementer gerne
vil have ud af et nyt look.
logo
Generelt
Her ses de områder jeg spørger til og ellers får samtalen
lov at flyde af sig selv.
Hvad fungerer nu?
Hvad fungerer ikke?
hvad fungerer ved bomærket?
hvad fungerer ikke
3 ord der beskriver Agenda Group
2 ord mere?
3 farver
tagline
Skal den være der?
Hvad skal den bruges til?
Hvad skal den sige?
Nyt look til Agenda Group
hjemmeside
nye elementer?
Font
Hvad virker ved den nuværende?
Hvad virker ikke?
Mangler vi en sekundær/tertier font?
Elementer
Visitkort
Inspiration
brevpapir
Er der nogle ting du har set, som du synes er lækre
billeder du godt kan lide?
bygninger?
Andet design?
Skabeloner
Powerpoint
word
Excel
faktura-pdf
5
Resultater
Fede ting - ikke alt muligt ligegyldigt
Kedelig?
glas / krus med logo eller
cases printet på
Kommunikation Live
(eller communication live!)
Integrere sites
Elementer
Kommunikationsvirksomhed, der ikke kan
forklare sit logo!
DNA helt mærkeligt
empati
Kvalitet
oplevelser
Kommunikation
Ord
professionalisme
Tagline
faglihed
kreativitet
Innovativt
Oplevelser
resultatorienteret
Kommunikationsbureau #1
eventmarketing #2
Stramt/enkelt
Mest b2b
åbne mere op
Let/luftigt
Skal vise at vi er på forkant,
men ikke falde for sæsonudsving!
Hvad symboliserer de?
Blå, hvid og sort
Farver
Farver i selve logo
Logo
Laves om eller
forklaring om DNA
forenkles!
sanser
Generelt
Opdatere look
- fx farverne
Ikke rød, gul og grøn
Alt for meget sort
DNA holder ikke
Innovation
Stemning
Dejlig simpelt
større
Forvirring nu. Skal
hænge sammen eller
én ud!
Hyggeligt med det runde
bomærke
kreativitet
Høj kvalitet
Troværdighed
Godt navn!
For sorte
God idé!
For kedelige
Er meget i tvivl
For kantede
Visitkort
Må ikke blive FOR enkelt
Kort & præcis
Hvis der skal være
Skal være brugervenlig
Evt. QR-kode
tagline, skal den passe
De er pæne, folk kommenterer dem Mange forsk. layout
sammen med logo
og kan godt li dem
skal ikke nødvendigvis ændres
Skal være en oplevelse
Ikke så vild med det
Pænt - virker godt
Enkelt
brugervenlig
tænk apple
mest b2b (80%)
Stramt udtryk
Nuværende er ubehageligt
mere interaktivt
mere simpelt
mere lækkert
Mere "gå på opdagelse“
Ét stort billede der følger musen
Enten opdateres ugenligt eller
årligt - indhold derefter!
Telefonnr. på første side
Ikke for mange ord
Turde mere
skal fortælle
hvad vi laver
På væggen?
Præsentation
Hjemmeside
Her ses hovepunkterne i de samtaler jeg holdt. Samtaler
i fuld længde er transkriberet i appendix vedlagt fysisk
portfolio. Jeg har highlightet de udtalelser/betragtninger
jeg lægger vægt på i mit design med
Det sorte er passé
nuværende
Farver holder ikke
Så få som muligt
Ensartet for alle
lækkert
Måske 2 (digi og print)
- IKKE 3
6
Fonte
Minder for meget om det
helt gamle logo
Ok. men så heller ikke bedre
Myriad Pro
"Har vi ikke kun arial?“
Nemt at bruge
Shout Cph's !
Noget grafik, som
kan bruges for sig
mere 2012
Arial: træt af
Myriad: Fin
Inspiration
sjovt
sjov brug af typografi
Inden jeg går i gang søger jeg inspiration i
andre logoer. Her ses et udvalg af dem jeg så
forskellige særheder ved.
fontvægt stiger
apostrof bryder
diskret, men tydeligt budskab
opdeling, der hænger sammen
sjov brug af ?
Sammensætning af initialer
skæv på den
gode måde
7
Afsender & målgruppe
Inden jeg går i gang med at designe et nyt logo, vil jeg
først definere afsender og målgruppe. Eller måske rettere
den målgruppe vi gerne vil henvende os til fremover.
Afsenderen er Agenda Group (AG); Den virksomhed jeg i
over 3 år har været elev i.
AG er netop i de sidste faser af en strategisk ændring fra at
være et eventburau med speciale i kommunikation til at
være et kommunikationsbureau med speciale i event-marketing (det fysiske møde). Vi har styrket os selv på kommunikationssiden og har opsøgt kommunikationsopgaver og
fravalgt klassiske event-opgaver.
Business to business
Dette skal nu bakkes op af en visuel identitet, som henvender sig til vores kunder.
Der er ingen tvivl om, at den der ved det bedst, er den
der tager de strategiske beslutninger i AG, nemlig partner
Andreas Høgsberg.
beslutningstagere indenfor
markedsføring & kommunikation
Ud fra en samtale med ham, har jeg defineret et sæt kunder, som ses illustreret her på siden.
Når man dykker ned i den målgruppe finder man ud af, at
det de vil have fra os, er en oplevelse. De vil wow‘es, når de
møder os. Det være sig på nettet, ansigt til ansigt, på papir
eller på kontoret.
4 indgange:
Vi vil sælge, at vi er eksperter i det fysiske møde, så det skal
vi selv være frontløbere på.
HR
Typisk interne arrangementer
Salg
Typisk B2B-kommunikation
Marketing
typisk forbrugerrettet (B2C)
Kommunikation
Typisk intern kommunikation
De er travle mennesker, og har ikke tid til at lede efter det, de vil
have. Vi skal levere det til dem. Gerne før de ved, at de har brug
for det.
Det er en krævende kundegruppe, men omvendt er der også
anerkendelse af gode resultater at hente.
Internt
strategi, medarbejderseminar,
lanceringer, etc.
C-level
chef-, direktør- eller ledelseSSEMINARER
C-level
chef, direktør eller ledelse
8
Internt
strategi, medarbejderseminar,
lanceringer, etc.
Logoskitser
Efter inspirationssøgningen går jeg i gang med skitseringen af idéer til nyt logo-design.
Da jeg har tilpas mange forskellige retninger holder jeg et
møde med kommunikationskonsulenten, Heidi Shila, der
som tidligere ansat hos AG, kender virksomheden rigtig
godt, men som samtidig er trænet i at tage modtagerens
position.
Især tre elementer fra vores samtale stak ud. De er her
highlightet. Andre omtalte elementer er markeret med
et lille
Skitserne findes i appendix vedlagt fysisk portfolio.
Transkriberet samtale findes også i appendix.
Kommunikationskonsulent:
"Altså, jeg synes det er
vigtigt med sådan noget som det
dér! ... fordi "Agenda Group“
i sig selv, forstår
man ikke.“
"Jeg synes, måden at tænke på
her [...] er god.“
"Det der synes jeg er sjovt,
fordi man sparer ... jeg får
sådan en oplevelse af, at jeg
sparer tid, men det kræver at
man kender brandet.“
9
fontinspiration
Inden jeg går videre, søger jeg lidt inspiration i forskellige
fonte. Både web-baserede og almindelige fonte, da AGs
nye look både skal fungere digitalt og på print.
Af de almindelige fonte kigger jeg lidt nærmere på de
forskellige elementer i fontene. Se kommentarer nedenfor
eller i appendix vedlagt fysisk portfolio.
10
farveinspiration
AGs nuværende 17+2 farver er alt for mange efter min mening. Især fordi AG ofte skal tilpasse sit look efter kundens
designguides. Dvs. ofte benyttes kundens farver og fonte.
Ergo er ‚alle‘ farver AGs farver.
Dog vælger jeg at definere 2 farver, der skal fungere som
accenter til AGs look. Især når AGs look står alene som på fx
visitkort og hjemmeside.
Her ses nogle af de inspirationsbilleder jeg har fundet,
samt markering af hvilke farver, jeg har udvalgt. Nedenfor
ses signalværdien i farverne, som stemmer overens med
de værdier AG gerne vil sættes i forbindelse med.
intellekt
visdom
glæde
styrke
elegance
perfektion
Mæglende
ungdom
11
klarhed
udvalgte fonte og farver
Myriad Pro
Myriad Pro er en grotesk med ensartet stregtykkelse. Dvs. at kontrast mellem
grundstreg og hårstreg er lille. Der er stor forskel i minuskel-bredden på især de
typer, der ikke er ’condensed’, hvilket gør den mindre lærevenlig. Netop fordi
forskellen er mindre i ’condensed’-udgaver, er disse mere læsevenlig. Højde-bredde-ratioen er til gengæld mest læsevenlig i den almindelige udgave og
ikke læsevenlig i ’condensed’-udgaverne. X-højden er i begge udgaver fin. Der
er nogle spejlinger b, d, p og q og n og u, og o’et er i den almindelige udgave
cirkel-rundt. Alt i alt er ingen af de to udgaver særligt læsevenlige. Kan bruges
som displayskrift (fx rubrikker).
mange udgaver
Light
Light Italic
Regular
Italic
Semibold
Semibold Italic
Bold
Bold Italic
ikke læsevenlig
sammentrykket
Light Condensed
Condensed
Condensed Italic
Semibold Condensed
Semibold Condensed Italic
Bold Condensed
Black Condensed
Black Condensed Italic
Myriad ProFerio bero int molumquid que quatin nonet aut
expliciatur,Alici nos earum nisciet fugitio. Harum dolores
tempor sum adiaspere nest volores del inciis aut porpor
soluptinum es nim rent re erenis comnihi caborum aut esed
quam, quo et aut quia cullandit aborem etur? Solo imporem
ad exerum utasinust, officid quo deliquo dolorum eos ipsam
non nem hilignatur aut harit ut vid que imusdaecta simillec
Roboto
Minion Pro
Minion Pro er en gammelantikva med lille kontrast mellem grundstreger
og hårstreger. Minusklernes bredde er nogenlunde ens med en x-højde, der i
forhold til majuskelhøjden, gør fonten meget læsbar. Der er ingen spejlinger eller
‚skævheder‘ i fonten, som ødelægger læsbarheden. Et godt valg til en brødtekst i en artikel. Der opstår nogle spatieringsproblemer, de steder hvor fonten
optræder kun med majuskler, så her skal man ind og arbejde med teksten mere
detaljeret. Den kan blive svær at benytte som skærm-font, da den har meget
små øjer og sløjfer i forhold til sine forholdsvis tykke grundstreger. Det gør den
meget gnidret at se på. Desuden findes den ikke i finere udgaver som fx light
eller thin, hvilket kan genere et ønske om et ’luftigt’ look. En meget elegant font
uden at blive fesen.
Regular
Italic
Medium
Medium Italic
Semibold
Semibold Italic
Bold
Bold Italic
Bold Condensed
elegant
læsbar
måske FOR klassisk
Minion ProMagnis ant. Itatet molest ditat odis magnam et
alignatur, que venimint quo doluptae volorest, aborum idel id
que pe eumquis re pratur adit iur, quo cumquia nam dolorum
quiassit ad es aut unto dolum enditem endia sa de et molenda
parum ipsunt qui offic tesserum recus, con re voloreh eniende
nus, is sin cusdaecepuda vel molum re, aut quossit optam que
netur, odiae que ne sit ullaut distibus ex elic tecusanis etur sum
12
Roboto er en anden grotesk med ensartet stregtykkelse. Kontrasten mellem
grund- og hårstreger er lille. Forskellen i minuskelbredden er i de almindelige
udgaver store, men i condensed-udgaverne ikke så voldsomme. Højde-bredde-ratioen er i begge udgaver også acceptabel og x-højden er fin. Begge dele
noget der bidrager til fontens læsbarhed. Der er spejlinger i b, d, p og q og
u og n. I denne font, er de almindelige udgaver ikke særlig læsevenlig, mens
condensed-udgaven er mere venlig for øjet. Condensed-udgaven findes også i
2 udgaver fra helt slanke linjer og til en fed udgave. Dette giver gode variationsmuligheder med én og samme font.
Thin
Thin Italic
Light
Light Italic
Regular
Italic
Medium
Medium Italic
Bold
Bold Italic
Black
Black Italic
Light Condensed
Condensed
Condensed Italic
Bold Condensed
mange udgaver
mest læsbar i condensed
minder om nuværende,
som folk godt kan lide
Roboto Condensed Omnis ea volendam, ommossin nonsera dolupta spicti dolorehentis abore nietusa
perupta que sinctione es ipsa elest exernatem fugitas
perepudia quam, omniendam re, nos as et, ut quatemporae simusam fugias antis eum arum quo dicat iliquam
faceati ute esed quat. Nullest, secum fugiate nobiten
imiliquodi dissitiis sedit alique volupic ilibeatis dipitatur
Videreudvikling af logo
med den gamle font
Efter en videre bestemmelse af fonte og farver gik jeg
videre med logoudviklingen. Denne udvikling ses på siden
her eller i appendix vedlagt fysisk portfolio.
Agenda
Agenda
GRPGRP
type-markør
AgendaGRP
AgendaGRP
AgendaGRP
AgendaGRP
nyt bomærke?
A
G
a
g
Agenda
Agenda
Group
Group
a
g
a
g
a
g
a
g
a
g
a
g
a
g
AGendA
GRouP
AGendA
GRouP
a
g
a
AgendA
group
ikonisk a
”
a
g
a
g
AgendaGroup
AgendaGroup
a
g AGendA GRouP
AGendA GRouP
A”
AgendaGroup
AgendaGroup
AGENDAGRP
C O M M U N I C AT I O N . L I V E
C O M M U N I C A T I O N
.
L I V E
.
L I V E
AGENDAGRP.
AGendA
AGendA
GRouP
GRouP
AGendA
AGendA
GRouP
GRouP
skærer det overflødige væk
.
L I V E
.
L I V E
C O M M U N I C AT I O N . L I V E .
AGendA
AGendA
G RGoRuoPu P
AgendA
AgendA
group
group
AGENDAGRP
AGENDAGRP
communication . live
AGendA
AGendA
GRouP
GRouP
AG E N DA G R P
c o m m u n i c a t i o n
.
l i v e
arbejde med a'et
AG E N DA G R P
13
.
l i v e
AGENDA GROUP
.
L I V E
AgendA
AgendA
group
group
AGENDAGRP
AGendA
AGendA
G RGoRuoPu P
AGENDA GROUP
.
L I V E
.
L I V E
AG E N DA G R P
.
l i v e
AGENDA GROUP
Efter logoerne er layoutet bliver de rentegnet og tweeket.
Her ses de endelige ændringer.
c o mm u n i c a t i o n
.
l i v e
G‘ets arm er ændret fra at være indad-gående til at
pege opad i en spids.
Dette giver et mere skarpt look og det giver mere luft i
g‘ernes øjer. Det gør også at g‘et kommer tættere på at
være en spejling af d‘et. Det gør at AG og DA ligner en
spejling omkring EN. Dette kan bevirke, at øjet hviler
for længe omkring „Agenda“ og derved ikke får „Group“
og „Communication Live“ med.
Der er yderligere arbejdet med spatieringen, da fonten
i versal-udgave har en tendens til at blive for luftig og
glide fra hinanden.
Før:
AGENDA GROUP
Har taget dele af det tidligere logo med sig, men er
samtidig fornyet og anderledes. Det bevarer altså noget genkendelighed, men tilfører også noget nyt.
Det virker meget lige til, men lækkert.
Den venstre del af A‘ernes seriffer på højre fod er
fjernet. Det giver en lille dynamisk ændring, som lader
blikket ‚glide‘ mod højre.
Her er arbejdet en del med spatieringen. Dels for at
give et mere luftigt look og dels fordi der er en del
problemer med denne font i versaler. Især fx mellem
A-G og D-A på grund af G og D‘s meget rundede
buetræk. Der er i fonten arbejdet med denne luft, men
jeg var stadig ikke tilfreds. Yderligere synes jeg der er et
problem med luften mellem N-D. Serifferne driller, så
luften rent optisk bliver for stor.
Desuden er punktet mellem „communication“ og „live“
løftet fra grundlinjen for at gøre den visuelle opbremsning mindre hård.
Før:
AGENDA GROUP
Er meget elegant, og henvender sig måske derfor til
det segment vores kunder befinder sig i. Det kan skabe
stor tryghedsfølelse. Omvendt er det for kunden set
før, og det giver ikke en fornemmelse af at AG kan
tilføre noget nyt og inspirerende.
Der er ikke nogle særligheder ved det, som gør det
genkendeligt og memorabelt.
Roboto Condensed, som er grundstammen for logoet,
er en meget kompakt font. Derfor har jeg skabt lidt
mere luft ved at gøre G‘ets hårstreg kortere og derved
skabe mere luft i øjet.
Der er ikke lige så mange problemer med spatieringen
i denne font, da bogstavernes buetræk ikke er så cirkulære som ved de to andre fonte.
Dog er der lagt luft ind for at gøre denne bombastiske
font lidt lettere og mere elegant uden at den mister sin
sammenhæng og seriøsitet.
Før:
AGENDA GROUP
Minder på nogle områder om det nuværende, men
tilfører alligevel noget nyt. Det er en meget god kombination af genkendeligheds- og tryghedseffekten.
Det er meget særegent, da det er bestandigt opbrudt
af en hård streg, som på den ene side bremser læseretningen og på en anden binder logoet og tagline
sammen.
Punktummet før live, som er ment som en lille form for
gimmic, kommer ekstra meget til sin ret her. Det kan
både være forstyrrende, men det kan også gøre logoet
memorabelt.
14
endeligt logo
Her ses forskellige udgaver af logoer der bliver implementeret i AGs look. Det ændres hen ad vejen og det endelige
valg er version 3.
ver 3: Primært logo
Ver 1
c o mm u n i c a t i o n
.
l i v e
ver 3: sekundært logo
Ver 2
15
Her ses begge logoudgaver vist i forskellige størrelser.
16
Her ses logoerne med forskellig baggrund i både positiv
og negativ udgave.
17
sitemap 1
På dette site er der mange undersider. Det gør som regel
den enkelte side mere overskuelig, men omvendt kan det
være svært at navigere mellem de forskellige sider.
Skitser og wireframes ses i appendix vedlagt den fysiske
portfolio.
ekst.
links
Index
Com.
live
sem. &
conf.
event
market.
sponsor
market.
cases
cases
cases
cases
About
agenda
Group
18
Jobs /
form
Contact
info
bank
info
file
sharing
layoutskitser 1
•
•
•
19
Stort, tydeligt logo i top, så man ikke er i tvivl om,
hvem afsender er
Design i bokse, så det giver øjet ro og er overskueligt
Kontaktinformation på forsiden, så det er let for brugeren at finde
•
•
Opdateringer en gang om ugen frem for en gang om
året. Dette giver helt automatisk et mere dynamisk
look, da man kan lave momentære ting, som bliver
skiftet ud
Så ofte som muligt bruges billeder frem for tekst
storyboard 1
Logo
Logo
menulinje
menulinje
billede
Billedslider
Tekstbokse
formular
Tekstbokse
Pop-up-cases
referencer
footer menu
footer menu
Footer
Footer
Index
Logo
Menulinje med link til:
Communication Live
Seminar & Conferences
Event Marketing
Sponsor Markerting
Index > Communication live
Logo
Communication Live
Event Marketing
Sponsor Markerting
Index > JOBS
Logo
Communication Live
Event Marketing
Sponsor Markerting
Billedslide med cases
Tekstbokse m. nyheder og links (jobform og eksterne links)
Referencebillede
Footermenu med link til:
Kontaktinformation
Om Agenda Group
Bank Information
Fildeling
Billede
Tekst
Billeder af Communication Live, som linker til pop-up-cases
Kontaktinformation
Om Agenda Group
Bank Information
Fildeling
Billede
Tekst
Jobformular
Kontaktinformation
Om Agenda Group
Bank Information
Fildeling
Footer med adresse og sociale medier-links
20
design ver. 1
For kedeligt! For traditionelt. Det minder for meget om det
brugeren normalt ser, og giver ikke en oplevelse af, at AG
kan tilbyde noget ud over det sædvanlige.
Sitet indeholder så mange ting, som er for gemte for brugeren. Det skal være mere indbydende og spændende at
gå på opdagelse på AGs hjemmeside. Desuden går nogle
informationer tabt, fordi de er så svære at finde.
21
SITEMAP 2
Et meget mindre komplekts layout, som placerer stor set
alle informationer på forsiden. Dette stiller store krav til den
layoutmæssige opbygning af sitet, da overskueligheden
ikke må gå tabt.
ekst.
links
Index
Jobs /
form
Contact
info
bank
info
file
sharing
22
layoutskitser 2
•
•
•
23
Stadig bokse for at bevare overslikket på sitet
En tydelig menu, som følger dig overalt på sitet (med
undtagelse af popup-vinduer)
folde-ud-/klappe-sammenfunktioner, som gør siden
„mindre“.
storyboard 2
Logo
Menu
Billedslider
link til jobform
overskrift
Tekstbokse
Index
Logo
Communication Live
Event Marketing
Sponsor Markerting
Cases
News
Jobs
Communication Live
Event Marketing
Sponsor Marketing
Cases
News
Om Agenda Group
Referencebillede
Kontaktinformation
Bank Information
Fildeling
overskrift
billedbokse
(delvist sammenklappelig)
overskrift
Logo
tekstbokse
Formularfelter
referencer
footer menu
Footer
24
Index > Jobformular
Samme header som Index
Formularfelter
Send- / Clearknap
layoutskitser 3
•
25
Indholdet flyttet til at være i en rektangulær kasse,
som indrammer de forskellige elementer på sitet og
holder dem på plads
storyboard 3
Logo
Menu
Billedslider
link til jobform
overskrift
Tekstbokse
Index
Logo
Communication Live
Event Marketing
Sponsor Markerting
Cases
News
Jobs
Communication Live
Event Marketing
Sponsor Marketing
Cases
News
Om Agenda Group
Referencebillede
Kontaktinformation
Bank Information
Fildeling
overskrift
billedbokse
overskrift
Logo
tekstbokse
Formularfelter
referencer
footer menu
Footer
26
Index > Jobformular
Samme header som Index
Formularfelter
Send- / Clearknap
design ver. 2
Sitet er blevet meget mere dynamisk og er mere i brugerens magt (frem for den anden vej rundt), men det er stadig meget ensformigt og ikke særlig ‚spiseligt‘. Der mangler
farver. Men farver skal tilføres med omhu, så det ikke bliver
en malerpalette i regnbuens farver.
27
layoutskitser 4
•
•
•
28
Baggrundsbillede, som løfter stemningen. Det skal
være det rigtige billede, ellers giver det ikke mening
Luft mellem boksene giver et lettere og mere dynamisk look, som kan løfte det meget indholdsrige site,
så det ikke virker så tungt
Stadig en fast menu, som ikke ændrer sig og som
følger brugeren rundt på sitet
storyboard 4
Logo
Menu
link til jobform
Billedslider
overskrift
Tekstbokse
overskrift
billedbokse
Index
Logo
Communication Live
Event Marketing
Sponsor Markerting
Cases
News
Jobs
Communication Live
Event Marketing
Sponsor Marketing
Cases
News
Om Agenda Group
Referencebillede
Kontaktinformation
Bank Information
Fildeling
overskrift
tekstbokse
Formularfelter
overskrift
Tekstbokse
adresseboks
referencer
footer menu
Footer
29
Index > Jobformular
Formularfelter
Send- / Clearknap
design ver. 3
baggrundsbilledet er fra AGs kontor.
Indgangsloungen på kontoret ændrer udseende et par gange om
året. Lige nu er hele den ene væg pyntet med dette billede!
30
Her ses det endelige design, som sitet skal have. Det er
meget mere levende, opløftende og dynamisk, men uden
at forvirre brugeren. Menuen er brugerens bedste ven,
som sikkert fører ham/hende rundt på sitet.
optimering
farveoptimering
billedoptimering
browseroptimering
størrelser
seo
Jeg tager udgangspunkt i at finde en farve,
ex grå, som er min udgangsfarve. Jeg finder
en 4-farve pantone på bestrøget materiale,
som er den farve jeg ønsker. Her er det CMYK
0 | 0 | 0 | 70. Da CMYK-farver er en substraktivt farvesystem og RGB et additivt farvesystem, og også har et større farverum, skal
farven ligesom „kodes om“. Det gør jeg ved
hjælp af et sæt pantonevifter.
Det er vigtigt, at man overvejer hvilke billeder
man skal bruge til hvad. Specielt når man skal
bevæge sig på forskellige medier.
Når man skal lave et website, er der flere
og flere muligheder for hvad man kan med
kodning. Former, farver, effekter, etc.
Størrelsesbegrebet i denne opgave har helt
sikkert størst betydning i forbindelse med
opgavens to hovedelementer: logoet og
hjemmesiden.
SEO. Seach Engine Optimization. Et rigtig
vigtigt stykke værktøj i promoveringen af en
hjemmeside.
Farverne i billedet skal virke både fysisk og digitalt. Billedets opløsning skal kunne tilpasses
både tryk, print og digitalt.
Man skal i opbygningen være opmærksom
på dette, og at der ikke findes ét universelt
kodesprog. Man skal tilpasse nogle dele af
koderne til forskellige browsere. Eksempler
på dette vil I kunne se, når jeg fremhæver
elementer i html‘en og CSS‘en.
Herefter finder jeg i color bridge den farve
der bedst matcher den første og aflæser
farvekoden for RGB-farverummet her. I dette
tilfælde 116 | 118 | 120.
Med en RGB > Hex Converter finder jeg frem
til at det giver en hex-værdi på #747678.
Da forskellige browsere afkoder 6-cifrede
hex-koder forskelligt, men 3-cifrede hex-koder ens, kan man overveje om man vil finde
en hex-værdi (og derved en RGB-kode), der
består af kun 3 cifre. Jeg vælger her at konvertere til websikre farvekoder. #666 hvilket
giver en RGB-kode der hedder 102 | 102 | 102.
Farvekoderne for de forskellige farver ses her.
Sort
CMYK
0 | 0 | 0 | 100
RGB
0|0|0
Hex#000
Grå
CMYK
0 | 0 | 0 | 70
RGB
102 | 102 | 102
Hex#555
Hvid
CMYK
0|0|0|0
RGB
255 | 255 | 255
Hex#FFF
Blå
CMYK
70 | 0 | 0 | 0
RGB
102 | 204 | 255
Hex#6CF
Det bærende billede i AGs look (skoven) skal
printes på tapet, hvor det er nødvendigt med
en opløsning på billeder på min. 100 ppi.
Det skal også bruges på præsentationer, som
både skal printes og vises på en skærm. Dvs.
hhv. 300 og 72 ppi. Det er altså nødvendigt,
at billedet kan scaleres.
Når man ved, hvor billedet skal benyttes, fx
som baggrundsbillede på sitet, tilpasses det
i højde-bredde, som passer til skærme. Der
er mange forskellige størrelser, så se mere
om dette på denne side under afsnittet
„Størrelser“. Det skal også have en opløsning
til skærm, altså 72 ppi og så skal det gemmes
i et farvespektrum, der passer til mediet, en
skærm, altså RGB.
Dette website er testet i Google Chrome,
Safari, Mozilla Firefox og Internet Explorer 6
og frem efter.
Alle funktioner er testet og virker 100% i
Chrome, Safari og Firefox, mens Internet
Explorer ikke altid kan rumme de samme
funktioner, som de tre andre.
Ifølge StatCounter bruger 29,30% af verdens
browserbrugere (på computer) Internet
Explorer, så det er absolut værd at overveje
denne gruppe brugere.
Derfor har sitet heller ikke funktioner kodet
ind, hvis manglende tilstedeværelse ødelægger sitets indhold.
Man skal også tage med i betragtningen,
at mange besøg på internettet i disse dage
foregår fra mobile devices. Derfor er det vigtig at sitet også er mobilvenligt. Dette kunne
opnås ved at kode et responsivt design. Dog
mener jeg, at det mest optimale er, at have
et helt seperat mobil-site.. Man kunne måske
starte med at kode et responsivt design, som
kunne erstattes af et mobil-site, når man
nåede så langt i processen.
Slutteligt er det også værd at overveje om
man evt. skulle begynde at arbejde i html5.
Det er endnu ikke fuldt accepteret, men er
helt sikkert fremtidens kodesprog.
Gul
CMYK
0 | 0 | 75 | 0
RGB
255 | 255 | 102
Hex#FF6
31
Logoet er vektoriseret og kan derfor benyttes
i præcis den størrelse man ønsker.
Ifølge StatCounter er 1366x768 px den mest
brugte skærmopløsning, når man bevæger
sig på internetsider.
Mere almindelige formater er 1280 x 720 px
eller 1920 x 1080px. For at kunne tilpasses
flest mulige formater, har jeg valgt at mit site
skal kunne passe til 1280 x 720 px og opefter.
På hjemmesiden er der både arbejdet med %
som enhed og px. Em er ikke benyttet.
I forhold til browser-optimering til mobilsites,
så er det vigtigt at få skaleret sit site til mobile
devices. Der findes koder, som man kan føje
til sin html og css, som skalerer sitet, men
dette finder jeg ikke optimalt.
Med de opløsninger man i dag arbejder med,
er det ikke optimalt at skalere hjemmesiderne ned. Man bør lavet et specifik site til mobil-browsere. Dette er ikke medtaget i denne
del af udviklingen, men bør helt sikkert indgå
i et færdigt koncept.
Først og fremmest er det vigtigt, at have en
god tekstforfatter, som kender til SEO og forstår at optimere tekst til dette. Tekstmaterialet
til dette websitet kommer fra vores nuværende website, så der er kun den mængde SEO
i teksten, som der fra start er arbejdet ind i
den. Jeg ved, der er arbejdet overfladisk med
den, men også at den kunne forbedres.
Ud over at man kan arbejde med teksten, så
er der forskellige elementer man kan arbejde
ind i html-koden. På de følgende sider viser
jeg, hvor jeg har arbejdet med koden for at
optimere i forhold til SEO.
7
3
8
4
9
5
10
6
11
7
12
8
9
13
10
11
1
12
2


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>Agenda Group - Communication Live</title>

<meta name="keywords"
content="Agenda, Group, Communication, Live,

Kommunikation">
<meta
http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1" />
<meta name="description" content="The communication agency Agenda Group is
amoung Europe's leaders in(SEO)-->
experience-based communication and communication

live. name="keywords"
On our website you
can read more about
our
work with Communication
<meta
content="Agenda,
Group,
Communication,
Live,
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="da">
Live,
Seminars & Conferences
Sponsor
and Event Marketing.">
3
1 
13
beskrivelse
der står fxHTML
på
Google.
Maxcommunication
263 tegn. Heragency
251 tegn.-->
<meta
name="description"
content="The
Agenda Group is
4
HEAD
-------------------->
2 
15
live. On our website
can read more
about our work with Communication
6 <title>Agenda
Group -you
Communication
Live</title>
4

16
<link Seminars
href="styles.css"
rel="stylesheet"
type="text/css"
/>
Live,
& Conferences
and Sponsor and
Event Marketing.">
8
Æ Ø Å-->
6 
9
http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
7 <meta
19
15
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:

10
8 
16
300italic,400italic,700italic,400,300,700'
rel='stylesheet'
<link
href="styles.css"
rel="stylesheet"
type="text/css"
/> type='text/css'>
11
(SEO)-->
9 <meta
content="text/html; charset=iso-8859-1" />
20
17
</head>
12
<meta
name="keywords"
content="Agenda,
Group,
Communication,
Live,
10
21 
font-->
ser
ikke
denne-->
11
(SEO)-->
22 
24 Kommunikation">
Live,
Seminars
Conferences
and Sponsor
andcommunication
Event Marketing.">
beskrivelse
står fx
Google.
Max 263
tegn.
tegn.-->
ourder
website
youpå
can
read more
about
our Her
work251
with
Communication
27 live.
23
<body On
background="images/background.jpg">
14
Live,
Seminars
&
Conferences
and
Sponsor
and
Event
Marketing.">
der står fxHEADER
på Google.
Max 263 tegn. Her 251 tegn.-->
29 beskrivelse
25

16
<link href="styles.css" rel="stylesheet" type="text/css" />
14
30 
17
15
til stylesheet-->
31 
16
href="styles.css"
rel="stylesheet" type="text/css" />
28 <link
SEO.</span></h1>
19
162
17
32 
rel='stylesheet' type='text/css'>
163
18
class="box">

33 <div
30
<div
id="header">
20
company
strategy.</td>
</head>
164
19
<div
class="header"><h2>Sponsor
Marketing</h2></div>
<link
34 <h1><span>Skjult
31

tekst HEAD
om Agenda
Group og "live communication" som giver god
192
21
<td style="width:30px;"></td>

165
rel='stylesheet'
35 300italic,400italic,700italic,400,300,700'
<div
id="menu">
33 executes
tekst style="font-weight:
omkring
Communication
giver derfor
ikke meningRead
at flytte
both large
and smallLive.
scaleDet
seminars
and conferences.
about how
195
24
<tr>
22
brand’s
potential</span>
34 we
nedcan
i html
og placere
den
med
CSS-->

improve
on
your
seminars
and
conferences.">Seminar
&
Conferences</a>
196
25
<td
style="width:a 244px;
text-align:
justify;"><span
style="font168
23
When
used
intelligently,
an exceptionally
strong
36
35 </li>
<div<ul>
id="menu">
24
communication
tool
and
a
cornerstone
in
experience-based
communication.
37
<li><a href="#eve-mar"
href="#com-liv"
class="scroll"
title="Communication
is
"Communication
Live"
er det
søgeord title="There
og
dette linker
tilWhen
en
39
<li><a
class="scroll"
are videre
many Live
actions
27
chain
turned
125vigtigste
years</span>
<body
25 asupermarket
spon-sorship
is implemented
actively
and about
itderfor
comes
alive,
it has
the
the
core
competence
of
Agenda
Group.
Read
what
it
means
to
us
here.">C
tekst
omkring
Communication
Live.
Det
giver
ikke
mening
at
flytte
den
you
can
take
to improve
on your
brand awareness.
Here girls
you'llare
seeturning
how Agenda
197
28
With
the
campain
title
"One
of
Denmark‘s
most
famous
125
26 ability
to instantaneously
make
people associate it with your brand and your

ommunication
Live</a></li>
ned i works
html
og
placere
den
med
CSS-->
Group
with
brandcompeted
awareness.">Event
Marketing</a></li>
29
years"
the
consumers
in
writing
the
best
birthday
song
for
the
Irma

27
And they
will also associate
things with
specific groups
in
an and
<body
38 company.
36
<li><a
href="#sem-con"
class="scroll"
title="Agenda
plans
40
href="#spo-mar"
class="scroll"
title="One
way Group
toand
raise
brand
30
girl.
On<li><a
the very
day Irma
girls
and boys offered
free coffee
choral
by
<div<ul>
id="header">
28
organisation.
But
this
requi37
<li><a
href="#com-liv"
class="scroll"
Live
is
Macintosh
HD:Users:Ninahmk:Skole:Portfolio
H3:Grafisk
design:Website:agenda_group:index.html:
awareness
is sponsor
marketing.
We
activate
our
clients'
brand
in
ways
that
31
a
lot
of
Irma
stores.
In
the
end
664
verses
were
admitted
and
more
than
<h1><span>Skjult
tekst
om
Agenda
Group
og
"live
communication"
som
giver
god
169
29 </div>

the
core
competence
Agenda In
Group.
Read about
it means
to greatest
us here.">C
are
both
innovative,
refreshing
and
Marketing</a></li>
cups
of coffeeof
samplet.
themeaningful.">Sponsor
stores
theywhat
experienced
the
SEO.</span></h1>
170
30 3,000
<div
id="header">
ommunication
Live</a></li>
41
32
sale
in <br
one /><br
day
- />
ever
in the history of Irma at a stagering index 139.</td>
</div>
171
31
class="center
column">
<h1><span>Skjult
tekst
om Agenda
Group og "live
communication"
somplans
giverand
god
38 <div
<li><a
href="#sem-con"
class="scroll"
title="Agenda
Group
42
<li><a
href="#cases"
class="scroll"
title="An
overview
of some
of
198
33
<td style="width:30px;"></td>
172
res
knowledge
of
how
you
make -------------------->
the most of a sponsorship. We are ready to
SEO.</span></h1>
332

32 help
you <td><img
with that.
</div>
333
43
<div
id="footer">
<li><a href="#news"
class="scroll"
title="Here
you will
200
35
</tr>
<div/><br
id="menu">
335
44 e
social
responsibility
campaigns.
WeØ</div>
provide
advice
all the
way videre
throughtil
theen
"Communication
Live"
er
det vigtigste
søgeord
og dette
linker
337
45
<br
/>DK
– 2100
Copenhagen
<li><a
href="index.html"
36 n> A<ul>
newfrom
Barbie
was
introduced
toonClick="window.open('pages/
the selection
Scandinavian
markets and TOP-TOY
process
sponsorship
strategy
to negotiation.
tekst omkring
Communication
Live. and
Det giver derfor
ikke mening at flytte den
338
<div
class="column
center"></div>
jobform.html','Job
Form
for
jobs
at
Agenda
Group','width=620px,
37
wanted to
raisehref="#com-liv"
attention towards
this. By creating
a portable Barbie
uni<li><a
class="scroll"
Live
is
175
ned i html
ogclass="column
placere den med
CSS-->
339 </div>
<div
right">
height=645px,
scrollbars=0,
resizeable=0,
vers
Barbie
and
Agenda
crew
travelled
Scandinavia.
Eightto
malls
in
the core
competence
of Group
Agenda
Group.
Read top=100px,
about
what it means
us here.">C
176
36
<ul>
340 left=230px,location=no,menubar=no','replace=false')"
<a
href="http://www.linkedin.com/company/agenda-group"
title="Apply
jobs
Denmark,
Norway,
Sweden
and Finland. The setup allowed
the kids target="new"
tofor
play,
ommunication
Live</a></li>
177
37 <div
class="right
column">
<li><a
href="#com-liv"
class="scroll"
title="Communication Live
is
title="Visit
our
LinkedIn
profile"><img
src="images/linkedin1.png"
width="2
at
Agenda
Group.">Jobs</a></li>
38
meet
a
living
Barbie
and
participate
in
the
"Design
a
dress
for
Barbie"
<li><a
href="#sem-con"
class="scroll"
title="Agenda
Group
plans
and
178 We
act
as
a
strategic
and
creative
partner
in
relation
to
development
of
the
core
competence
of
Agenda
Group.
Read
about
what
it
means
to
us
here.">C
46 8px"
height="28px"
onMouseOver="this.src='images/linkedin2.png'"
<br /><br
/>
competition.
Se-veral
thousands of
kids
and
their parents
visitedonMouseOut=
our Barbie
Macintosh
H3:Grafisk
sponsorship
concepts,
initiation
and
implementation
of
sponsorships.
ommunication
Live</a></li>
47 "this.src='images/linkedin1.png'"></a>
href="#top"
title="Go
to
top of page.">Top</a>
univers <li><a
andweover
1,000
kidsclass="scroll"
and
participated
in the analyses.
competition.</td>
38 Obviously,
follow
through
on class="scroll"
things
and pro-vide
We constantly
<li><a
href="#sem-con"
title="Agenda
Group
plans
and
341
<a
href="http://www.facebook.com/agendagroup"
target="new"
title="Vi
203 </li>
<td
style="width:30px;"></td>
know-ledge
about sponsorship
in collabo-ration
with
Macintosh
H3:Grafiskmarketing
48 develop
sit HD:Users:Ninahmk:Skole:Portfolio
our new
Facebook
profile"><img
src="images/facebook1.png"
width="28px"
</ul>
204
<td><img
src="images/barbie.jpg" alt="Barbie"></td>
Media
Group.
49 Omnicom
height="28px"
onMouseOver="this.src='images/facebook2.png'" onMouseOut="this
</div>
205
</tr>
179
</div>
50 .src='images/facebook1.png'"></a>
206
</table>
180
342
51 </div> <a href="http://twitter.com/AgendaGroup" target="new" title="Visit
207
181
52 width="28px" height="28p
208
<divTwitter
class="link">
182
53 <div
x"
onMouseOver="this.src='images/twitter2.png'"
onMouseOut="this.src='images
id="wrapper">
209
<a
href="javascript:viewMore('case3');"
id="xcase3"
title="Click here to
183
54 
/twitter1.png'"></a></div>
<a
class="anchor"
id="top">top</a>
reveal
more
of
Agenda
Group's
cases.">...
more
stories</a></div>
184
343
55 </div>
</div>
210
185
class="anchor" id="cases">cases</a>
344
56 <a
</div>

211
186
class="box">
345
57 <div
<div
class="box" style="margin-top: 131px;">
212

187
<div
class="header"><h2>Cases</h2></div>
346
58 <div id="slider" class="nivoSlider">
213
188
347
59 <a class="anchor"
<img src="images/maersk.jpg"
alt="Maersk Line" title="#maerskcaption" />
214
id="news">news</a>
189 <table
cellspacing="0">
348
60  alt="VW Sæbekasse DM" title="#vwcaption
src="images/saebekasse.jpg"
215
<div<img
class="box">
190
<tr>type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
349
<script
/> class="header"><h2>News</h2></div>
216 "
<div
191
<td style="width: 244px;
text-align: justify;"><span style="font350
61 <script
src="scripts/jquery.nivo.slider.js"></script>
<imgtype="text/javascript"
src="images/samsung.jpg"
alt="Samsung Galaxy Studio" title="#samsun
217
weight:
700;
text-transform:
uppercase;">SimCorp
Discovery Days</span>
351
<script
type="text/javascript">
/>
218 gcaption"

had crea-ted a new{strategy for the company and its almost 1.000
352
62 SimCorp
$(window).load(function()
</div>
219
<div class="news">
employees
worldwide. This strategy needed to be communicated to all
353
63 $('#slider').nivoSlider({

220
<div class="left
Group is<br
/>looking for
a new<br
employees
at'fold',
once column"><h3>Agenda
in a 2-day long conference
inHvilken
Copenhagen.
Agenda
Group/>sen
354
64 ior effect:
//
effekt
der
bliver
project
manager<br
/><span
style="color:#999;
font-weight:
300;">April
helped
SimCorp
bring
the
strategy
to
life
through
different
tool,
leaving
65 skiftet
billede
(fold, fade, sliceUp)

21, emplo-yees
2013</span></h3></div>
with the correct knowledge
im-plementing the new
355
66 the
12,infused
// Tilfor
"slice"-animationen:

221
<divslices:
class="right
column">nulloru mquidel icilita
sperferia
cupiditatur Hvor
re
Macintosh
H3:Grafisk design:Website:agenda_group:index.html:
67 mange
slices
<div
id="maerskcaption"
class="nivo-html-caption">"Never
in doubt
that iminum
the
verchit et, quist ea invellandit, quam iliquatur rectaquundis
eossint
356 things
boxCols:
// to
Tillook
"box"-animationen:
we had8,
discussed, agreed upon
or wanted
into were takenHvor
care
Macintosh HD:Users:Ninahmk:Skole:Portfolio
H3:Grafisk
mange
kolonner
of, which
made it possible to focus almost entire-ly on our own internal
357 process."
boxRows: 4,
// Til "box"-animationen: Hvor
68 mange rækker
html & PHP
Hele sitet er bygget op i Dreamweaver ved hjælp af html(xhtml), php- og css-koder. På denne og følgende sider ses
de vigtigste kode-funktioner i html‘en, php‘en og css‘en.
SEO – seach engine optimization
Vises ofte som overskrift på søgemaskiners resultatliste.
De komplette koder ses i appendix vedlagt den fysiske
portfolio.
3-5 søgeord. Google ser ikke disse
nøgleord.
Kort beskrivende tekst, som er
den tekst der vises i søgemaskinernes resultatlister efter overskriften.
Alle overskrifter er stylet ved
hjælp af H-tags. Sidens H1 er
skjult, hvilket giver mulighed for
at skrive noget betydningsfuldt.
Alle billeder er tilføjet en beskrivende „alt-tekst“
Menuen er placeret som noget af
det første i html‘en, da den indeholder meget beskrivende ord.
Alle links er en beskrivende
tekst og ikke bare „klik her“-links.
1/13
Desuden er alle links tilføjet en
title, som beskriver hvor linket
fører hen
Generelle bestemmelser for html‘en
1/13
1
2
3
4
5
6
7
8
9
10
11
12
Åben link i nyt vindue
Mouse over
Med denne funktion åbnes linket
i et nyt vindue. Her er størrelsen
og placeringen defineret og
vinduet er uden browserens
normale værktøjslinjer.
1/13
1/13
Med denne funktion skifter billedet fra ét til et andet, når curseren
kører hen over og tilbage igen,
når curseren forsvinder igen.
13
14
15
16
17
18
19
tabel
En måde at arbejde i html, som
skal fungere meget i kasser der
flyder ved siden af og efter hinanden, er ved at arbejde i tabeller.
„Cases“ er opsat i tabelform med
båded billeder og tekst.
6/13
7/13
32
20
21
22
23
24
25
26
27
28
29
30

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">

<head>
<title>Agenda Group - Communication Live</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="keywords" content="Agenda, Group, Communication, Live,
Kommunikation">
<meta name="description" content="The communication agency Agenda Group is
amoung Europe's leaders in experience-based communication and communication
live. On our website you can read more about our work with Communication
Live, Seminars & Conferences and Sponsor and Event Marketing.">

<link href="styles.css" rel="stylesheet" type="text/css" />

300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
</head>


<body background="images/background.jpg">

<div id="header">
Definerer hvor html‘en henter
sine koders definitioner.
Sørger for at æ, ø og å vises
korrekt i alle browsere;
International standard ISO 8859-1.
Linker til stylesheet.
Linker til benyttet Google-font.
46
47
48
332
49
333
50
334
51
335
52
336
53
337
54
338
55
339
56
340
57
height=645px, scrollbars=0, resizeable=0, top=100px,
left=230px,location=no,menubar=no','replace=false')" title="Apply for jobs
at Agenda Group.">Jobs</a></li>
<br /><br />
<li><a href="#top" class="scroll" title="Go to top of page.">Top</a>
</li>
</ul>

</div>
<div id="footer">
<div id="box">
<div class="column
left">Agenda
Group

<br />Øster Allé 48, 4. sal
<div id="wrapper">
<br />DK –id="top">top</a>
2100 Copenhagen Ø</div>
<a class="anchor"
<div class="column center"></div>
<div class="column
right">

<a href="http://www.linkedin.com/company/agenda-group"
target="new"
<div class="box"
style="margin-top: 131px;">
title="Visit
our
LinkedIn
profile"><img
src="images/linkedin1.png"
width="2
<div id="slider" class="nivoSlider">
8px"<img
height="28px"
onMouseOver="this.src='images/linkedin2.png'"
onMouseOut=
src="images/maersk.jpg"
alt="Maersk Line" title="#maerskcaption"
/>
"this.src='images/linkedin1.png'"></a>
<img src="images/saebekasse.jpg" alt="VW Sæbekasse DM" title="#vwcaption
<a href="http://www.facebook.com/agendagroup" target="new" title="Vi
" />
sit <img
our Facebook
profile"><img src="images/facebook1.png"
width="28px"
src="images/samsung.jpg"
alt="Samsung Galaxy Studio"
title="#samsun
height="28px"
gcaption"
/> onMouseOver="this.src='images/facebook2.png'" onMouseOut="this
.src='images/facebook1.png'"></a>
</div>
<a href="http://twitter.com/AgendaGroup"
target="new" title="Visit

our Twitter profile"><img src="images/twitter1.png" width="28px" height="28p
x" onMouseOver="this.src='images/twitter2.png'"
onMouseOut="this.src='images

/twitter1.png'"></a></div>

<div</div>
id="maerskcaption" class="nivo-html-caption">"Never in doubt that the
</div> we had discussed, agreed upon or wanted to look into were taken care
things
229
1947 <span
199
369
<divpauseOnHover:
class="right
column">nulloru
mquidel
icilita
cupiditatur
style="color:#999;
font-weight:
300;">January
31,animationen,
2013</span></h3></di
</tr>
<td><img src="images/irma.jpg"
alt="Irma"></td>
// sperferia
Stop
når re
der
true,
1958 v>
200
verchit
ea invellandit, quam iliquatur rectaquundis eossint iminum

<tr>et,Æ quist
</tr>
hovres
250
1969 <div
201
370
aliquamus,
magnatur
ma estorep
resequat
la//
quias
porit
est
molorepere
aut
<meta
charset=iso-8859-1"
/>
class="right
column">Et
quamcontent="text/html;
renimet ius
veliquuntet,
alitas
sinumquia
<tdad
style="width:
244px;
text-align:
justify;"><span
style="font<tr
id="case3"
Forcer
manuel
overgang
manualAdvance:
false,
10 dissitatur
202
371
aruptatur
re
sam
ilignatus
moloria
vernam doloreptium
facit
alit
utem
alignis
dolorestrum
nit
accatistis
molupidem
atistem
qui
weight:
700;
text-transform:
uppercase;">The
World‘s
second-oldest
<td
style="width:
text-align:
justify;"><span
style="fontcaptionOpacity:
0.8, 244px;
//
Tekst-opacitet
påaritate
alle apel
11 aut
inum,
doluptur,
qui125
in
re
quo beatur
aut rataeru
lam
eatur?
(SEO)-->
laodita
pores
sedipsa
doloribus
dolest,
santium
ptataque simTour</spa
voluptas
supermarket
turned
years</span>
weight:
700;chain
text-transform:
uppercase;">Barbie
– The
Scandinavian
captions
230
12 n>
197
372
<br
/><br
/><a
href="http://www.sæbekasse.dk"
target="new">
Visit
VW
<meta
name="keywords"
content="Agenda,
Group,
Communication,
Live,
ulpa
essum
re,'Forrige',
tet
liam
volores
trumqui
accuptae
volorehendit
quiatia
With
the
campain
title
"One
of to
Denmark‘s
most
girls
are
turning
125
AprevText:
new
Barbie
was
introduced
the Scandinavian
markets
and
TOP-TOY
//famous
Tekst
ved "forrige"365 wanted
//
Billed-rel
som
navigation
controlNavThumbsFromRel:
false,
Sæbekasse
DM
website</a></div>
ser
ikke
denne-->
dolorum
utraise
volupta
tiusciis
eatquas
maios
am
de
ommoluptium
erspero
ribusdae
years"
the
consumers
competed
in
writing
the
best
birthday
song
for
the
Irma
to
attention
towards
this.
By
creating
a portable
Barbie
uninavigation
366
231
controlNavThumbsSearch:'.jpg',
// Tekst
Erstat
dette
billede
13 vers
373
</div>
atenes
con
nimus
audaecte
nulloru
mquidel
icilita
sperrnam
doloreptium
<meta
name="description"
content="The
communication
agency
Agenda
Group
is
girl.
On
the
very
day Irma
girls
boys
offered
free
coffee
and
choral
by
Barbie
and
Agenda
Group
crewand
travelled
Scandinavia.
Eight
malls
infacit
nextText:
'Næste',
//
ved
"næste"232 Denmark,
med
...

alit
utem
apelstores.
inum,
odita
doluptur,
qui
in re
quo
beatur
lam
amoung
leaders
in
experience-based
communication
and
communication
a
lot
ofEurope's
Irma
Inand
the
end 664 The
verses
were
admitted
and
more
than
Norway,
Sweden
Finland.
setup
allowed
theaut
kids
toeatur.</di
play,
navigation
367
233 meet
controlNavThumbsReplace:
//
...
billede
374
v>
live.
On
our
you participate
can '_thumb.jpg',
read
more
about
our
work
with
Communication
3,000
of website
coffee
samplet.
In the
stores
they
the
greatest
acups
living
Barbie
and
in
the "Design
adette
dress
for
//experienced
kommer
før
et Barbie"
billedskifte
beforeChange:
function(){},
368
234 competition.
//
Brug
af højre-/venstrepil
keyboardNav:
true,
251
375
Live,
&
Conferences
and
and
Event
Marketing.">
beskrivelse
der slut-->
står
fx
på Google.
Max 263 tegn.
Her
251
tegn.--> når der

254
200
204
<div
class="left
column"><h3>Say
Hello toalt="Barbie"></td>
Morten<br
/><span
style="color:#99

371
captionOpacity:
0.8,
//
allebillede
16 <div
255
Tabelrækken defineres som
201
205
377
9;
font-weight:
300;">
February
16, 2013</span></h3></div>
<link
href="styles.css"
rel="stylesheet"
type="text/css"
class="news">
<tr
id="case3"
</tr>
// Tekst-opacitet
kommer når />
det på
sidste
lastSlide:
function(){},
238
captions
17 </table>
256
202
206
class="right
column">Qui
dolorite
volum
fuga.
Ratem/>a
sa que
Torem
qui
<div
class="left
column"><h3>Agenda
Group
wishes
you<br
merry
christmas
<td style="width:
244px;
text-align:
justify;"><span
style="fonter
vist
display: none. Her efter tilknytter
372
prevText:
'Forrige',
// Tekst
ved
"forrige"18 and<br
207
378
sam
rem/>a
idehappy
perferi
re iust.
Itat
ilictur
re
laborent
dolo

newonseque
year<brvenis
/><span
style="color:#999;
font-weight:
300;">D
700;
text-transform:
uppercase;">Barbie
– The
Scandinavian
Tour</spa
//
kommer
når
det sidste
afterLoad:
function(){}
man Javascriptet til linket, som
365 weight:
//
Billed-rel
som
navigation
false,
19 navigation
208
esti
vit
inloadet
non was
consedi
coneceptis
nemScandinavian
et omnim si markets
as elibus
idemperro
ecember
18,
2012</span></h3></div>
<link
n>
A class="link">
new
Barbie
introduced
to the
and
TOP-TOY que
billede
er
366 <div
// Tekst
Erstat
dette
billede
åbner og lukker og
373
nextText:
'Næste',
//
ved
"næste"257
209
379 <div
sitibus,
volupta
spitis
est aut
rem By
eatem
es sunt
omni
uttype='text/css'>
fugitium
quae
rel='stylesheet'
class="right
column">Alitas
sinumquia
dissitatur
alignis
dolorestrum
wanted
tosim
raise
attention
towards
this.
creating
a
portable
Barbie
<a
id="xcase3"
title="Click
here unito
});
med ...
20 navigation
380
ni
aut
quae of
quimolupidem
doloraGroup's
simpeliqui
con repedis
de
prapores
quosEight
doluptatia
quia
nit
accatistis
atistem
aritate
qui
aut
la
sedipsa
doloribus
</head>
vers
Barbie
and
Agenda
Group
crew
travelled
Scandinavia.
malls
in
reveal
more
Agenda
cases.">...
more
stories</a></div>
});
367
controlNavThumbsReplace: '_thumb.jpg',
// ... dette billede
374
// kommer
før
et to
billedskifte
beforeChange:
function(){},
21 dolest,
210
381
sam.
santium
ptataque
voluptas
essum
re,
tet
liam

Denmark,
Norway,rataeru
Sweden
and Finland.
The setupulpa
allowed
the
kids
play,
</script>
368 </div>
// Brug af højre-/venstrepil
keyboardNav: true,
375
239
(){},
// kommer
efter
et
afterChange:
function
22 volores
211
382
<br
/><br
/><a
href="http://dk.linkedin.com/pub/morten-stevn/2a/275/b25"
trumqui
accuptae
volorehendit
quiatia
dolorum
ut
volupta
tiusciis
meet
a
living
Barbie
and
participate
in
the
"Design
a
dress
for
Barbie"
369
// Stop animationen, når der
pauseOnHover: true,
billedskifte
23 
212
383
target="new">Visit
LinkedIn
profile</a></div>
eatquas
maiosSe-veral
am deMorten's
ommoluptium
er
icilita
sperferia
competition.
thousands
of del
kids
and their
parentscupiditatur
visited ourre
Barbie

hovres
376
240
//
kommer
eftereossint
alle billeder
slideShowEnd:
function(){},
24 verchit
213
384
</div>
et,
quist
ea
invellandit,
quam
iliquatur
rectaquundis
iminum
univers
and
over
1,000
kids
and
participated
in
the
competition.</td>
<script
type="text/javascript"
src="scripts/show.hide.cases.js"></script>
370
// Forcer manuel overgang
manualAdvance: false,
241
er
blevet
vist
25 aliquamus,
203
214
385

ad
magnatur
ma estorep resequat la quias porit est molorepere aut
<td
class="anchor"
id="news">news</a>
371 <a
captionOpacity: 0.8,
// Tekst-opacitet på alle
377
242
// kommer facit
når det
sidste
lastSlide:
function(){},
26 aruptatur
204
215
386
re sam
ilignatus
moloria
doloreptium
alit
utembillede
apel

<td><img
src="images/barbie.jpg"
alt="Barbie"></td>
<div
class="box">

captions
243
er
vist
27 inum,
205
216
387
class="clear"></div>
odita
doluptur,
qui
in
re
quo
beatur
aut
lam
eatur.</div>
<body
</tr>
<div
class="header"><h2>News</h2></div>
<script
src="scripts/show.hide.news.js"></script>
372
prevText:
'Forrige',
//
Tekst
ved
"forrige"378
244
// kommer når det sidste
afterLoad: function(){}
258
28 </div>
206
217
388
69
</table>

navigation
245
billede
er loadet
259
29 
70
slut-->



373
nextText: 'Næste',
// Tekst ved "næste"379
Display defineres som „none“
246
});
260
30 </div> src="scripts/scroll.js"></script>
<div class="news">
id="header">
class="link">
<script

navigation
380
});
261
31
209
220
391
>
72
<h1><span>Skjult
tekst
om
Agenda
Group
og
"live
communication"
som
giver
god
<a
id="xcase3"
title="Click
here
to
<div
class="left
column"><h3>Agenda
Group
is<br
/>looking
for
a
new<br
/>sen
<div
id="vwcaption"
class="nivo-html-caption">
374
// kommer før et billedskifte hvorefter et javascript tilknyttes
beforeChange: function(){},
381
247
</script>
262
392

73 <div
class="link">
SEO.</span></h1>
reveal
moreexciting
of
Agenda
Group's
cases.">...
moreI've
stories</a></div>
ior
project
manager<br
/><span
style="color:#999;
300;">April
</body>
"The
most
and
engaging
family event
seen
inefter
a long
375
(se næste punkt), så folde-up-/
(){},
// font-weight:
kommer
ettime. I
afterChange:
function
382
248
263
32 <a
210
393
<div
class="news">
href="javascript:viewMore('hidenews');"
id="xhidenews"
title="Click
here
</div>
</div>
21,
2013</span></h3></div>

will
definitely
participate
again
next
year!"
billedskifte
klappe-sammen-funktionen
383
249

33 to
211
221
394
class="left
column"><h3>Maersk
Line more
Conference<br
/>in
Copenhagen<br
74
see
more of Agenda
Group's
stories</a>
<div
class="right
column">nulloru
mquidel
icilita
cupiditatur
re/>
</div>
376
// sperferia
kommer
efter
alle billeder
slideShowEnd:
function(){},
aktiveres.
384
<script
src="scripts/show.hide.cases.js"></script>
264
34
212
395
75 </div>


verchit
et,vist
quist
ea invellandit,
quam iliquatur
rectaquundis eossint iminum 8/13

Macintosh
H3:Grafisk
er
blevet
385
265
35
213
396
76
<div
id="menu">
266
214
397
77 </div>
"Communication
Live"
er
det vigtigste
søgeord og dette linker videre til en
<a
class="anchor"
id="news">news</a>
</html>

er
vist
387
267
215
398
78 <script
tekst
omkring
Communication
Live.
Det giver derfor
ikke mening
atsidste
flytte den
<div
class="box">

<div
id="samsungcaption"
378
// kommer
når det
afterLoad:
function(){}
388
268
216
399
79 
ned incredibly
i
html
og placere
med
CSS-->
<div
class="header"><h2>News</h2></div>
"An
stylishden
setup
that
allowed the consumer to test our product
billede
er loadet
389
SCRIPT
SCROLL
LINKS
-------------------->
269
36 
</div>
380
});
391
271
219
81 <div
the core
competenceslut-->
of Agenda Group. Read about what it means to us here.">C
class="news">

273
38 

394
274
class=“scroll“ og scriptet „scroll“
84 21,
2013</span></h3></div>
384
Macintosh
H3:Grafisk
1/13
<script type="text/javascript" src="scripts/show.hide.cases.js"></script>
395
275
221
85 <div
class="left
class="rightcolumn">
column">nulloru
mquidel design:Website:agenda_group:index.html:
icilita sperferia cupiditatur re
385

opnås scroll-effekt.
Macintosh
H3:Grafisk
13/13
396
276
86 The
communication
AgendaNEWS
Group
leads
in experience-based
verchit
et, quist agency
ea
invellandit,
quam
iliquatur
rectaquundis eossint iminum
386
<a class="anchor"
id="com-liv">com-liv</a>

397
87 </html>
communication
among European companies.
Since
1997, we have deve-loped,
387
<script
Macintosh
H3:Grafisk
7/13
Class=“anchor“ giver mulighed
398
***
SLUT ***
----->
88 
400
90 <script
390
type="text/javascript" src="scripts/scroll.js"></script>
Macintosh
H3:Grafisk design:Website:agenda_group:index.html: 9/13
91 <div class="left column">
391
Til sidst henvisningen til
92 </body>
392
We know from experience that when people feel involved, they will remember
Javascriptet.
393 
394 our company philosophy is to create and implement ideas and processes that
395 make people feel they are a part of things. We believe that a company must
396 actHD:Users:Ninahmk:Skole:Portfolio
Macintosh
H3:Grafisk
out its message and give target
groups
the chance to actually ‘feel’ the 13/13
397 </html>
message. Our focal point when we commu-nicate is physical experiences or
398 
symbolic***
acts
399
93 </div>
400
94
95 <div class="center column">
96 that speak directly to people and their hearts. This is Communication Live!
97
98 <br /><br /><span style="font-weight: 700; text-transform: uppercase;">Uniqu
e solutions</span>
99 FromHD:Users:Ninahmk:Skole:Portfolio
the point of view of your company
anddesign:Website:agenda_group:index.html:
your objectives, we are capable
Macintosh
H3:Grafisk
13/13
of delivering professional solutions that will work as qualitative elements
in your com-pany’s internal and external branding and communication. The
communicative experience is based on understanding of your company, tar100 </div>
101
102 <div class="right column">
103 get group and – specifically – the contact point’s relevance in terms of how
it is experienced at a specific point intime and in a specific place. Our
concepts are thus always unique and tailor-made to your company’s needs.
104 Our communicative processes and tools are tried and tested and have been
billedSlider
58
59
60
341
61
Vis/skjul tabeL
Nivo-slider implementeret
på sitet.
62
342
63
64
65
Tekst tilhørende de forskellige
66
343
67
billeder
344
345
of, which made it possible to focus almost entire-ly on our own internal
346
process."
347
68 </div>
348 
Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:index.html: 2/13
Henvisningen til Javascriptet.
349 <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
350 <script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
351 <script type="text/javascript">
Under selve henvisningen kan
352 $(window).load(function() {
man kode en masse indstillings353 $('#slider').nivoSlider({
muligheder for slideren, bl.a.
354
effect: 'fold',
// Hvilken effekt der bliver
hvilken effekt billederne skal skifskiftet billede med (fold, fade, sliceUp)
355
slices: 12,
// Til "slice"-animationen: Hvor
te med (her slices), hvor mange
mange slices
slices billederne skal inddeles i,
356
boxCols: 8,
hvor hurtigt det skal gå, om de
mange kolonner
forskellige navigationsmulighe357
boxRows: 4,
mange rækker
der skal vises eller ej.
358
animSpeed: 1000,
// Effektens hastighed
359
pauseTime: 4500,
// Hvor lang tid billeder vises
inden det skifter til næste
360
startSlide: 0,
// Index for på hvilket
billede slideshowet skal starte
361
// Næste og forrige vises
directionNav: false,
362
// Vis kun næste og forrige
directionNavHide: false,
når der hovres
363
365
//
(bullet)-navigation
controlNavn:
true,
//123
Billed-rel
som navigation
false,
366 vises
// Erstat dette billede
364 med controlNavThumbs:
// Små billeder som navigation
false,
...
367
controlNavThumbsReplace: '_thumb.jpg',
// ... dette billede
Macintosh
12/13
368
// Brug af højre-/venstrepil
keyboardNav: true,
369
// Stop animationen, når der
pauseOnHover: true,
hovres
370
// Forcer manuel overgang
manualAdvance: false,
371
captionOpacity: 0.8,
// Tekst-opacitet på alle
captions
372
prevText: 'Forrige',
// Tekst ved "forrige"navigation
373
nextText: 'Næste',
// Tekst ved "næste"navigation
374
// kommer før et billedskifte
beforeChange: function(){},
375
// kommer efter et
afterChange: function (){},
billedskifte
376
// kommer efter alle billeder
slideShowEnd: function(){},
er blevet vist
377
// kommer når det sidste billede
lastSlide: function(){},
er vist
378
// kommer når det sidste
afterLoad: function(){}
billede er loadet
379 });
380 });
381 </script>
382
383 
384 <script type="text/javascript" src="scripts/show.hide.cases.js"></script>
385
386 
387 <script type="text/javascript" src="scripts/show.hide.news.js"></script>
388
Vis/skjul div-tag
Anchors med scroll
Fortsættes på næste side ...
Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:index.html: 3/13
33
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
php-formular
3
4
PHP-koden, som definerer hvilken
5 <?PHP
6 require_once("./include/fgcontactform.php");
type php der arbejdes med.
7 require_once("./include/captcha-creator.php");
8
9 $formproc = new FGContactForm();
10 $captcha = new FGCaptchaCreator('scaptcha');
11
12 $formproc->EnableCaptcha($captcha);
13
14 //Tilføj e-mail-adresse her
15 $formproc->AddRecipient('[email protected]');
Modtager af formularen
16
17
46
<form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>'
18 //For
bedre sikkerhed, hent ny string her: http: //tinyurl.com/randstr*
enctype="multipart/form-data" accept-charset='UTF-8'>
19 method='post'
For at forhindre sikkerhedsbrud,
$formproc->SetFormRandomKey('dnDOi4bvcXfaXU3');
47
20
ændres stringen og derved kryp48
<div
class="headline"><h2>Søg
hos
Agenda Group</h2></div>
46
echo
$formproc->GetSelfScript();
?>'
<form
id='contactus'
action='<?phpjob
21 $formproc->AddFileUploadField('resume','jpg,jpeg,gif,png,bmp,pdf,doc,xdoc,tx
teringen.
49 method='post' enctype="multipart/form-data" accept-charset='UTF-8'>
t',2024);
50
<input
type='hidden'
name='submitted'
id='submitted'
value='1'/><!-47
22
tilclass="headline"><h2>Søg
php'en -->
48
<div
job hos Agenda Group</h2></div>
23 refererer
51 if(isset($_POST['submitted']))
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(
49
24 {
); ?>' value='<?php
echo $formproc->GetFormIDInputValue();
?>'/><!-50
<input type='hidden'
name='submitted' id='submitted'
value='1'/><!-25
if($formproc->ProcessForm())
validering
-->php'en -->
refererer
til
26
{
52
echo $formproc->Get
<input
type='text'
class='spmhidip'
name='<?php
51
echo
$formproc->GetFormIDInputName(
<input
type='hidden'
name='<?php
46
echo
?>'
<form
id='contactus'
action='<?php
27
$formproc->RedirectToURL("thank-you.html");
SpamTrapInputName();
?>' /><!-spam -->
);
?>'
value='<?php
echo
$formproc->GetFormIDInputValue();
?>'/><!-enctype="multipart/form-data" accept-charset='UTF-8'>
28 method='post'
}
53 validering -->
47
29
54 }
52
echo $formproc->Get
<input
type='text' class='spmhidip'
48
<div class="headline"><h2>Søg
job hosname='<?php
30
55

spam -->
49
31
?>
56
<div class="headline">
53
50
<input type='hidden' name='submitted' id='submitted' value='1'/><!-32
57
<select name="description" style="width:auto; display:block; margin54
33 refererer til php'en -->
bottom:
5px;">
55
46
 echo
?>'
<form
action='<?php
51
echo
<input
type='hidden'
name='<?php
Her starter formen og tilhørende
46
34 <head>
echo
?>'
<form id='contactus'
id='contactus'
action='<?php
58
<option selected="selected"
value="0">Choose a job
56
enctype="multipart/form-data"
accept-charset='UTF-8'>
); ?>'
value='<?php
?>'/><!-35 method='post'
46
method='post'
enctype="multipart/form-data"
php bliver defineret.
echo
?>'
<form
id='contactus'
action='<?php
<meta
http-equiv='Content-Type'
content='text/html;
charset=utf-8'/>
description</option>
57 validering
47
<select
name="description" style="width:auto; display:block; margin-->enctype="multipart/form-data"
47
36 method='post'
<title>Søg
job
hos Agenda
Group</title>
59
<option
value="Senior
Project
Manager">Senior
Project
48
bottom: <input
5px;">
<div
job
Agenda
52
echo $formproc->Get
name='<?php
48
47
<div
job hos
hos
Group</h2></div>
37 Manager</option>
<link
rel="STYLESHEET"
type="text/css"
href="phpstyle.css"
/>
58 SpamTrapInputName();
49
<option
selected="selected"
value="0">Choose a job
?>'
/><!-spam
-->
49
48
38
<div class="headline"><h2>Søg
job hos Agenda Group</h2></div>

60
<option
value="Freelance">Freelance</option>
50
<input
type='hidden'
name='submitted'
53
50
49
<input
type='hidden'
name='submitted' id='submitted'
id='submitted' value='1'/><!-value='1'/><!-39
<link
61
<option
value="Other">Other</option>
59 refererer
<option
value="Senior Project Manager">Senior Project
til
php'en
-->
54
50
refererer
til
php'en
-->
<input
type='hidden' name='submitted'
id='submitted' type='text/css'>
value='1'/><!-300italic,400italic,700italic,400,300,700'
rel='stylesheet'
62
</select>
51 Manager</option>
echo
<input
type='hidden'
name='<?php
55

51
echo $formproc->GetFormIDInputName(
<input
type='hidden'
name='<?php
40 refererer
tiltype='text/javascript'
php'en
-->
<script
src='scripts/gen_validatorv31.js'>
63
</div>
60
<option
);
?>'
value='<?php
echo
$formproc->GetFormIDInputValue();
?>'/><!-56
<div
class="headline">
51
?>' value='<?php
?>'/><!-<input
type='hidden'
name='<?php echo $formproc->GetFormIDInputName(
64 );
</script>
61
<option value="Other">Other</option>
validering
-->
57
<select
name="description"
style="width:auto; display:block;
validering
-->
); ?>'
value='<?php
?>'/>
66 </script>

63
</div>
?>'
/>
-->
58
<option
selected="selected"
value="0">Choose
a
job
52
?>'
/><!-<input
name='<?php echo $formproc->Get
42
67
</head>
<div
class="headline"
style="margin-bottom:6px;">
64 description</option>
53
53
?>'
/><!-spam
-->
43
68
<input type="radio" name="gender" value="male" style="border: 0;
65
54
59
<option value="Senior Project Manager">Senior Project
54
53
44 width: 15px; float: left; margin-right: 6px; margin-top:5px;" />Male
66
55
Her starter selve indholdet i
GENDER
----->

----->
45
69
</div>
67 <body> <div
56
class="headline"
class="headline">
60
<option
formularen. Her med en select
56
55
<div
class="headline">

70
<div
class="headline">
68
57
Macintosh
H3:Grafisk
design:Website:agenda_group:pages:contactform.php:
1/5
<input
type="radio"
name="gender"
value="male"display:block;
style="border:margin0;
<select
name="description"
style="width:auto;
61
57
56
<select
name="description"
style="width:auto;
display:block;
marginfunktion, hvor
man kan vælge fra
<div
class="headline">
71 width: 15px;
<input
type="radio"
name="gender"
value="female"
style="border:
0;
float:
left; margin-right:
6px;
margin-top:5px;"
/>Male
5px;">
62 bottom:
</select>
57
bottom:
5px;">
<select
name="description"
style="width:auto;
display:block;
marginet
drop-down-gardin.
width:
15px;
float:
left;
margin-right:
6px;
margin-top:5px;"
/>Female
69
58
</div> <option selected="selected" value="0">Choose a job
63
</div>
58
<option selected="selected" value="0">Choose a job
bottom: 5px;">
72
</div>
70 description</option>
64
Option definerer de valgmulig58
<option selected="selected" value="0">Choose a job
73
71
59
<input
type="radio"
name="gender"
value="female"
style="border:
0;
<option value="Senior
value="Senior
Project
Manager">Senior
Project
65
59
<option
Project
Manager">Senior
Project
heder man har i drop-down-gar74 description</option>
width: 15px;
float:
left;
margin-right: 6px; margin-top:5px;" />Female
66 Manager</option>

59
<option
value="Senior
Project Manager">Senior Project
75 Manager</option>

dinet.
72
60
</div>
67
<div class="headline"
60
<option value="Freelance">Freelance</option>
76 Manager</option>
73
61
<option
68
Her en radio-funktion, hvor man
<input
type="radio"
name="gender"
value="male"
style="border:
0;
61
60
77
<input type="checkbox"
name="drivers-license" value="yes" style="bor
74
62
</select>
float:
left;
margin-right: 6px; margin-top:5px;" />Male
62 width: 15px;
kan vælge enten den ene eller
61
</select>
<option
width: 15px;
float:
left;----->
margin-right: 5px; margin-top: 5px;" />Yes
75 der: 0; </div>
63

vælge til eller fra.
width:
15px;
float:
left;
margin-right:
6px;
margin-top:5px;"
/>Female
66
65
GENDER ----->
80 , I have
81

78
68
</div>
<input
value="male"
73
68
67
<input
type="radio" name="gender"
name="gender"
value="male" style="border:
style="border: 0;
0;
<div
82
Her validerer php‘en det indhold
<div class="headline"
class="headline">
79
width:
15px;
float:
left;
margin-right:
6px;
margin-top:5px;"
/>Male
74
68
width:
15px;
float:
left;
margin-right:
6px;
margin-top:5px;"
/>Male 0; ?>
<input
type="radio"
name="gender"
value="male"
style="border:
83
echo
$formproc->GetErrorMessage();
<div><span
class='error'><?php
80
69
der bliver tastet ind i feltet.
</div>
75

69
</div>
width: 15px;
float: left; margin-right: 6px; margin-top:5px;" />Male
81
70
Macintosh
 H3:Grafisk design:Website:agenda_group:pages:contactform.php: 2/5
<div
76
70
69
class="headline">
</div>
82
71
<input
type="radio"
name="gender"
value="female"
style="border:
0;
77
type="checkbox"
name="drivers-license"
value="yes"
style="bor
71
70
<input
type="radio"
name="gender"
value="female"
style="border:
0;
<div
class="headline">
83 der: 0;15px;
echo
$formproc->GetErrorMessage();
?>
<div><span
class='error'><?php
float:
left;
margin-right:
6px;
margin-top:5px;"
/>Female
width:
15px;
float:
left; margin-right:
5px; margin-top:
5px;" />Yes
71 width:
width: 15px;
float:
left;
margin-right:
6px;
margin-top:5px;"
/>Female
<input
type="radio"
name="gender"
value="female"
style="border:
0;
72
</div>
, I HD:Users:Ninahmk:Skole:Portfolio
have
a
Danish
driver's
license!
Macintosh
H3:Grafisk
design:Website:agenda_group:pages:contactform.php:
2/5
72 width:
</div>
15px; float: left; margin-right: 6px; margin-top:5px;" />Female
73
78
</div>
73
72
</div>
74
79
74
73
75

----->
34
76
<div
class="headline">
81
 ----->
76
75
<div
class="headline">

88
86
<span
id='contactus_name_errorloc'
90

91
<div
class="headline">
89
at den er udfyldt (jf. tidligere php)
87
</div>
91
<div
class="headline">
92
<label
for='email'>Email
Address*:</label><br/>
90

og max fylder 70 karakterer.
88
92
<label
for='email'>Email
93
<input
type='text' name='email'
id='email' value='<?php echo $formpr
91
<div
class="headline">
89
93
<input type='text'
name='email'
id='email' value='<?php echo $formpr
?>'
maxlength="70"/><br/>
92 oc->SafeDisplay('email')
<label for='email'>Email
Igen et tekstfelt, men her kræver
90

oc->SafeDisplay('email')
?>' maxlength="70"/><br/>
94
<span
id='contactus_email_errorloc'
93
<input
type='text'
name='email'
id='email'
value='<?php echo $formpr
91
valideringen, at feltet er udfyldt
<div
class="headline">
94
<span
id='contactus_email_errorloc' class='error'></span>
95 oc->SafeDisplay('email')
</div>
92
<label
for='email'>Email
95
</div>
med en e-mail-adresse.
96
94
<span
93
<input
type='text' name='email' id='email'
value='<?php echo $formpr
96
97
95
</div>
oc->SafeDisplay('email')
97
98

96
94
<span
98

99
<div
class="headline">
97
95
</div>
99
Her kan indtastes telefonnum<div
class="headline">
100
<label>Phone
/>
98

96
100
<label>Phone
Number:</label><br
/>
101
mer og feltet er fyldt ud med en
<input
type="tel"
name="phone"
placeholder="Please,
add
country
code
99
<div
class="headline">
97
101
<input
type="tel" name="phone" placeholder="Please, add country code
0045)"
/><br/>
100
Placeholder-tekst der slettes, når
<label>Phone
Number:</label><br
/>
98 (e.g.

(e.g. 0045)"
/><br/>
102
</div>
101
<input
type="tel" name="phone" placeholder="Please, add country code
man skriver i feltet.
99
<div
class="headline">
102
</div>
103 (e.g. 0045)"
/><br/> Number:</label><br />
100
<label>Phone
103
104
102
</div>
101
<input type="tel" name="phone" placeholder="Please, add country code
104
105

103
Her starter fil-vedhæftnings-de(e.g.
0045)"
/><br/>
105

106
<div class='headline'>
104
102
</div>
len af formularen. Her vælges
106
<div
class='headline'>
107
<label for='resume'
>Upload
File (max 2MB):</label><br />
105

103
107
<label
for='resume'
>Upload
File
(max
2MB):</label><br
/>
først den fil, man vil vedhæfte.
108
<input
type="file" name='resume' id='resume' /><br />
106
<div
class='headline'>
104
108
<input
type="file" name='resume' id='resume'
/><br />
109
<span
id='contactus_photo_errorloc'
107
<label
for='resume'
>Upload
File
(max
2MB):</label><br
/>
105

109
<span
Denne span vises, hvis et forkert
110
</div>id='contactus_photo_errorloc'
108
<input
type="file" name='resume' id='resume' /><br />
106
<div
class='headline'>
110
</div>
111
fil-format vælges, og derved ikke
109
<span
107
<label for='resume' >Upload File (max 2MB):</label><br />
111
112
110
</div> type="file" name='resume' id='resume' /><br />
kan valideres.
108
<input
112
113

111
109
<span
113

114
<div class='headline'>
112
110
</div>
114
<div
class='headline'>
115
<label
for='scaptcha'
>Enter
Code:</label>
113

111
115
<label
for='scaptcha'
116
<div><img
alt='Captcha>Enter
image'Code:</label>
src='show-captcha.php?rand=1' id='scap
114
<div
class='headline'>
Her vises den kode man skal
112
116
<div><img
alt='Captcha image' src='show-captcha.php?rand=1' id='scap
/></div>
115 tcha_img'
<label
for='scaptcha'
>Enter
Code:</label>
113
indtaste for at verificere, at man

tcha_img'
/></div>
117
<input type='text'
name='scaptcha'
id='scaptcha' maxlength="10"
/><b
116
<div><img
alt='Captcha
image' src='show-captcha.php?rand=1'
id='scap
114
<div
class='headline'>
117
ikke sender spam.
<input
type='text' name='scaptcha' id='scaptcha' maxlength="10" /><b
r
/>
/></div>
115 tcha_img'
<label
for='scaptcha' >Enter Code:</label>
118 r />
<span
id='contactus_scaptcha_errorloc'
117
<input
type='text'
name='scaptcha'
id='scaptcha'
maxlength="10"
/><b
116
<div><img
alt='Captcha image' src='show-captcha.php?rand=1'
118
<span id='contactus_scaptcha_errorloc'
class='error'></span>id='scap
Hvis en forkert kode tastes, mel119 r />
tcha_img' /></div>
119
120
118
des en fejl.
<span
117
<input type='text' name='scaptcha' id='scaptcha' maxlength="10" /><b
120
121

119
r />
121

122
<div class='explain'>Can't
read the image?
120
118
<span
122
Hvis man ikke kan læse billedet,
<div
class='explain'>Can't
read the image?
123
<a
href='javascript:
refresh_captcha_img();'>Click
here to refresh</
121

119
123
<a href='javascript: refresh_captcha_img();'>Click here to refresh</
kan man ‚få‘ et nyt.
a>.<br
/>
122
<div class='explain'>Can't read the image?
120 a>.<br />
124
*required
fields</p></div>
123
<a
href='javascript:
refresh_captcha_img();'>Click
here
to
refresh</
121

124
*required
fields</p></div>
125 a>.<br />
</div>
122
<div
class='explain'>Can't
read
the image?
125
</div>
126
124
fields</p></div>
123
<a*required
href='javascript:
refresh_captcha_img();'>Click here to refresh</
126
125
</div>
Macintosh
design:Website:agenda_group:pages:contactform.php: 3/5
a>.<br
/>
Macintosh
H3:Grafisk design:Website:agenda_group:pages:contactform.php: 3/5
126
124
*required fields</p></div>
Macintosh
design:Website:agenda_group:pages:contactform.php: 3/5
125
</div>
126
Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:pages:contactform.php: 3/5
css
1 /* --------------------------Formular
ALLE ---------------------------*/
2
3
Jeg starter altid med at nulstille
Nultstile margin, padding
border ----- */
1 /*
/* -------------------------------ALLE &
---------------------------*/
1 html,
ALLE ---------------------------*/
4
body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p,
2 /* --------------------------margin, padding og border.
2 blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
3 /* ------ Nultstile margin, padding & border ----- */
3 img,
/*
-----Nultstile
margin,
padding
&
border
----*/
ins,
kbd,
q,span,
s, samp,
small,
strike,
strong,
tt,h5,
var,
b,p,
u,
1
4 /*
--------------------------ALLE
---------------------------*/
html,
body,
div,
applet,
object,
iframe,
h1,sub,
h2, sup,
h3, h4,
h6,
4 i,
body,dl,
div,
span,
applet,
object,
iframe,
h1, label,
h2, h3,legend,
h4, h5,table,
h6, p,
44
center,
dt,
ol,
ul, li,
fieldset,
form,
text-transform:
uppercase;
2 html,
blockquote,
pre,
a,dd,
abbr,
acronym,
address, big,
cite, code,
del, dfn, em,
blockquote,
pre,tfoot,
a, 5px
abbr,
acronym,
address,
big, cite,
code,
del, details,
dfn, em,
45
thead,
tr, th,
article,
aside,
canvas,
border-bottom:
solid
#6cf;
3 caption,
/*
-----Nultstile
padding
& td,
border
-----sub,
*/ sup,
img,
ins,tbody,
kbd, q,
s,margin,
samp,
small,
strike,
strong,
tt, var,
b, u,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b, u,
46
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
padding-right:
10px;
4 html,
body,dl,
div,
span,
iframe,
h1, h2,
h3,legend,
h4, h5,table,
h6,ruby,
p,
i, center,
dt,
dd, applet,
ol, ul, object,
li, fieldset,
form,
label,
i, center,
dl,
dt,time,
dd, ol,
ul,audio,
li, fieldset,
form, label, legend, table,
summary,
mark,
video
{big,
47 section,
float:
left;
blockquote,
pre,tfoot,
a, abbr,
acronym,
address,
cite,
code,
del, dfn,
em,
caption,
tbody,
thead,
tr, th,
td, article,
aside,
canvas,
details,
5 caption,
tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details,
margin:
0; q,
48
font-size:
24px;
img,
ins,
kbd,
s, samp, small,
sup,
tt,
var, b,
u,
embed,
figure,
figcaption,
footer,strike,
header,strong,
hgroup,sub,
menu,
nav,
output,
ruby,
6 embed,
figure,
footer, header, hgroup, menu, nav, output, ruby,
padding:
0;figcaption,
49
} center,
344
i,
dl,
dt,16px;
dd, ol,
ul,audio,
li, fieldset,
line-height:
section,
summary,
time,
mark,
video { form, label, legend, table,
1
/*
--------------------------ALLE
---------------------------*/
7
summary,
time, mark, audio, video {
border:
0;} tfoot,
50
5 section,
345
caption,
tbody,
thead, tr, th, td, article, aside, canvas, details,
margin:
0;
float:
left;
2
5
8
margin:
51
6 embed,
#wrapper
p {0;
346
figure,
figcaption,
footer, header, hgroup, menu, nav, output, ruby,
padding:
0;
text-align:
justify;}
3
6
/*
-----Nultstile
margin,
padding & border ----- */
9
padding:
0;
----body ----*/
52
7 section,
padding-top:
347
summary,
time, mark, audio, video {
border:
0;} 10px;
4
7 html,
10
body,
div,
span,
applet,
object, iframe, h1, h2, h3, h4, h5, h6, p,
border:
0;}
body
{
53
5
8 #wrapper
font-family:
'Roboto
Condensed', sans-serif;
348
margin:
0; .left
.news
{
11
8 blockquote,
pre,
a, abbr,
acronym, address, big, cite, code, del, dfn, em,
position:
relative;
54
6
9 /* ----font-weight:
300;
349
padding:
0;
body
----*/
width:
244px;
12
9 img,
ins,body
kbd,
q, s,*/
samp, small,
background-attachment:
fixed; strike, strong, sub, sup, tt, var, b, u,
--------55
7 /*
10
font-size:
0;} 13px;
350
bodyborder:
{
margin-right:
13
10 i,
center,
dl, dt, 30px;
dd,
ol, ul, li, fieldset, form, label, legend, table,
Sørger for at baggrundsbillede
background-size:
cover;}
body
{
8
56
11
line-height:
16px;}
position:
relative;
351
padding-bottom:
30px;
14
11 caption,
tbody,
tfoot,
position:
relative;
sidder fikseret og skalerer med
9
12
57 /* ----body ----*/
fixed;
352
text-align:
left;
15
12 embed,
figure,
footer,
/* ----headerfigcaption,
----*/
fixed; header, hgroup, menu, nav, output, ruby,
10
13
58 body
browserens størrelse.
{
background-size:
cover;}
#wrapper
.header
{
353
float:
left;} time,
16
13 section,
mark, audio, video {
#header
{summary,
background-size:
cover;}
11
14
59
position:
relative;
width:
792px;
354
17
5
14
height: 100px;
margin:
0;
12
15
60
fixed;
----header
----*/
margin-bottom:
10px;
355
#wrapper
.news
{
18
6 /*
width:
100%;
15
padding:
0; .right
/*
----header
----- */
13
16
61
background-size:
cover;}
#header
{ left;}
float:
356
width:
518px;
19
7
background-image:
url(images/header.png);
16 #header
border:
0;}
{
14
17
62
height:
100px;
357
20
float: left;
8
background-repeat:
no-repeat;
17
height:
100px;
15
18
/*
----header
----*/
width:
100%;
63
#wrapper
.box ----{ justify;
358
21
text-align:
9 /*
background-position:
center center;
18
----body
*/
width:
100%;
16
19
{ 792px;
background-image:
64 #header
width:
359
22
margin-top:
-2px; rgba(0,0,0,0.5);
10
background-color:
19
bodybackground-image:
{
17
20
height:
100px;
background-repeat:
no-repeat;
65
padding:
30px;
360
23
11
padding-bottom:
fixed; 30px;}
Der er brugt forskellige positions.
20
position:
relative;
background-repeat:
no-repeat;
18
21
width:
100%;
center center;
66
24
margin-top:
60px;
361
top: 0;
12
21
fixed;
center
center;
Nogle steder med placering og/
19
22
background-image:
background-color:
rgba(0,0,0,0.5);
67 /* --------------------------25
float:0;left;
362
left:
13
INFOBOKS ---------------------------*/
22
background-size:
cover;}
background-color:
rgba(0,0,0,0.5);
20
eller z-index for placering ad
23
background-repeat:
no-repeat;
position:
fixed; #FFF;
68
26
background-color:
363
z-index:
99;
14
23
position:
fixed;
21
24
center
center;
top:
0;
z-aksen.
27
69
-webkit-box-shadow:
3px 3px rgba(125,125,125,0.5);
-webkit-border-radius:
364
15
#infoboks
24 /*
----header
----- */0px 2px;
top:
0;{
22
25
background-color:
rgba(0,0,0,0.5);
left:
0;
28
70
-moz-box-shadow:
0px
3px
3px
rgba(125,125,125,0.5);
-moz-border-radius:
2px;
365
16
25 #header
height:
{ 0; 21px;
left:
23
26
position:
fixed;3px 3px rgba(125,125,125,0.5);}
z-index:
99;
29
71
box-shadow:
border-radius:
17
366
26
height:
100px;
width: 100%;
z-index:
99;0px 2px;}
Alle komandoer der styrer hvilke
24
27
top:
0;
-webkit-box-shadow:
0px 3px 3px rgba(125,125,125,0.5);
30
72
18
367
194
27
width:
100%; 2px; 0px 3px 3px rgba(125,125,125,0.5);
padding-top:
-webkit-box-shadow:
elementer det stylede element
25
28
left:
0;
-moz-box-shadow:
0px 3px 3px rgba(125,125,125,0.5);
31
h1.anchor
spanand
{ {boxes
73 #header
19
#wrapper
368
195
28
background-image:
position:
absolute;
slices
in
*/
-moz-box-shadow:
0px
3pxthe
3pxSlider
rgba(125,125,125,0.5);
26 /* The
29
z-index:
99;
box-shadow:
0px
3px
3px
rgba(125,125,125,0.5);}
skal forholde sig til og hvordan
32
visibility:
74
20
display:
369
29
196
background-repeat:
z-index:{block;
95;hidden;}
box-shadow:
0px 3pxno-repeat;
3px rgba(125,125,125,0.5);}
27 .nivo-slice
30
-webkit-box-shadow:
0px
3px
3px
rgba(125,125,125,0.5);
33
det skal forholde sig.
75
21
width:
50%;
370
30
center center;
197
background-color:
rgba(0,0,0,0.6);
display:block;
28 /*
31
-moz-box-shadow:
0px*/
3px 3px rgba(125,125,125,0.5);
h1
span {-----34
----wrapper
76 #header
22
float:
left;
31
371
background-color:
rgba(0,0,0,0.5);
198
#header
h1 span {
-webkit-box-shadow:
0px -7px 7px rgba(125,125,125,0.5);
position:absolute;
29
32 #wrapper
box-shadow:
0px
3px 3px rgba(125,125,125,0.5);}
35
visibility:
hidden;}
{
77
23
32
margin-top:
-70px;
position:
fixed;
372
199
visibility:
hidden;}
-moz-box-shadow:
0px -7px 7px rgba(125,125,125,0.5);
z-index:5;
30
33
36
width:
852px;
24
78
33
top:
0;
overflow:
hidden;
373
200
box-shadow:
0px -7px 7px rgba(125,125,125,0.5);
height:100%;
31
34 #header
37
h1
span {------ */
----wrapper
position:
25
79 /*
34
left:
0; relative;
padding-top:
53px; */
374
201
/*
----wrapper
-----text-align:
justify;}
top:0;}
32
35 #wrapper
38
visibility:
hidden;}
{
Nogle elementer skal indeholde
left:
50%;
/*
Placerer elementets øverste højre hjørne centreret i det
26
80 #wrapper
35
z-index:
99; -9999px;}
text-indent:
375
{
202
33
36 element
width:
852px;
det er placeret i. Juster herefter med margin-left*/
tekst for at virke. Her kan text-in27
81
36 .nivo-box
-webkit-box-shadow:
0px 3px 3px rgba(125,125,125,0.5);
376
width:
852px;
203
#infoboks
ul
{relative;
{
34
37 /*
39
----wrapper
-----position:
margin-left:
-426px;*/
/* halvdelen af wrapperens bredde */}
28
82 .clear
37
-moz-box-shadow:
0px
3px
3px
rgba(125,125,125,0.5);
dent benyttes at til forskyde
{
position:
relative;
377
204
alignment-adjust:
auto;elementets øverste højre hjørne centreret i det
display:block;
35
38 #wrapper
40
{50%; /* Placerer
left:
29
38
83
box-shadow:
0px
3px 3pxelementets
rgba(125,125,125,0.5);}
left:
50%;
/*
Placerer
øverste højre hjørne centreret i det
clear:
both;}
378
205
width:
792px;
teksten. Her til usynlighed.
position:absolute;
36 #wrapper
41
width:
h2852px;
{
element
det
er placeret i. Juster herefter med margin-left*/
30
84
det er placeret
i. Juster herefter med margin-left*/
379
206
list-style-type:
none;
z-index:5;
42
37
39 element
font-family:
'Roboto
Condensed',
sans-serif;
position:
relative;
margin-left:
-426px;
/*
halvdelen
af
wrapperens
bredde
*/}
31
39
h1menu
span-----{-426px;
85 #header
margin-left:
halvdelen af wrapperens bredde */}
*/ /*elementets
380
207
padding-left:
50%;
overflow:hidden;}
43
38 /* ----40
font-weight:
left:
50%; /*700;
Placerer
øverste højre hjørne centreret i det
32
40
visibility:
hidden;}
86
#menu
{
381
208
margin-left:
-396px;}
41 #wrapper
element
det
er
placeret
i.
Juster
herefterdesign:Website:agenda_group:styles.css:
med margin-left*/
h2
{
Macintosh
H3:Grafisk
1/11Man kan bruge left og margin-left
33
41
87
#wrapper
h2
{
width:img
200px;
382
209
{ display:block;}
39 .nivo-box
42
margin-left:
-426px; Condensed',
/* halvdelensans-serif;
af wrapperens bredde */}
font-family:
'Roboto
til at placere relative elementer fx
34
42
----wrapper
88 /*
font-family:
'Roboto*/
height:
383
210
#infoboks
ul400px;
li {-----40
43
font-weight:
700;
centreret.
35
43
#wrapper
{
font-weight:
700;
89
position:
384
211
float:
left;
41 #wrapper
/* Caption
*/
h2 styles
{ fixed;
Macintosh
H3:Grafisk design:Website:agenda_group:styles.css: 1/11
36
width:
852px;
90
top:
100px;
Macintosh
H3:Grafisk
design:Website:agenda_group:styles.css:
1/11
385
212
text-align:
42 .nivo-caption
{ center;
font-family:
'Roboto Condensed', sans-serif;
37
position:
relative;
91
left:
50%;
386
213
43
display:
inline;
position:absolute;
font-weight:
700;
38
left:
50%;
/*
Placerer elementets øverste højre hjørne centreret i det
92
z-index:
98; 3px;}
387
214
padding-top:
left:0px;
Macintosh
H3:Grafisk
1/11
element
det
er
placeret
i. Juster
herefterdesign:Website:agenda_group:styles.css:
med margin-left*/
93
float: left;
388
215
bottom:20px;
244
39
width: 44px; -426px; /* halvdelen af wrapperens bredde */}
margin-left:
389 .outer
216
Der er forskellige måder at lave
{
Macintosh
background-color:
rgba(255,255,102,0.7);
245
40
height: 44px;
390
217
text-align:
color:
#444;justify;}
opacitet på. I den første kode-bid,
41 #wrapper
246
h2 { block;
display:
391
218
width:200px;
42
247
er opaciteten kun på den farve
font-family:
opacity: 0.5;'Roboto Condensed', sans-serif;
392 .outer
219
span.finish {
z-index:8;
43
248
font-weight:
-moz-opacity:700;
0.5;
der er defineret (CSS3). I det andet
393
220
display: 10px
inline-block;
padding:
15px;
249
filter:alpha(opacity=5)}
Macintosh
H3:Grafisk design:Website:agenda_group:styles.css: 1/11eksempel er det på alt indeholdt i
221
overflow:
hidden;
Macintosh
H3:Grafisk
design:Website:agenda_group:styles.css:
8/11
250
222
det element der er stylet.
display: none;
251 a.nivo-prevNav
{
223
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
252
background: url(img/arrow-left.png) no-repeat;
224
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
253
left:10px;}
225
box-sizing: border-box;
/* Opera/IE 8+ */
254
226
font-family: 'Roboto Condensed' sans-serif;
255 a.nivo-nextNav
{
227
font-weight: 400;
256
background: url(img/arrow-right.png) no-repeat;
228
font-style: italic;
257
right:10px;}
229
font-size: 14px;
258
230
-moz-border-radius: 0 3px 3px 0;
35
259 /* Control
nav styles (e.g. 1,2,3...) */
231
-webkit-border-radius: 0 3px 3px 0;
260 .nivo-controlNav
{
232
border-radius: 0 3px 3px 0;}
261
position: absolute;
Styring af baggrundsbillede
position
Placering
opacitet
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
1
64
2
65
3
66
4
67
}
padding-right: 10px;
float: left;
font-size: 24px;
#wrapper p {
padding-top: 10px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
font-size: 13px;
line-height: 16px;}
#wrapper .header {
width: 792px;
margin-bottom: 10px;
float: left;}
Her ses css‘en til index-sitet. Css‘en til php‘en er en seperat
fil, som kan ses i sin fulde længde i appendix vedlagt den
fysiske portfolio.
#wrapper .box {
/* --------------------------ALLE ---------------------------*/
width: 792px;
padding: 30px;
/* -----Nultstile
margin, padding & border ----- */
margin-top:
60px;
html,float:
body, left;
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em,
68 blockquote,
background-color:
#FFF;
244
ins,
kbd,
q,
s,
samp,
44px;
69 img, width:
-webkit-border-radius: small,
2px; strike, strong, sub, sup, tt, var, b, u,
245
dt,
dd, ol, ul, li, fieldset, form, label, legend, table,
height:dl,
44px;
94 i, center,
70
text-align:
right;
-moz-border-radius:
2px;
tbody,
tfoot,
246
display:
block;
95 caption,
71
margin-top:
30px;
border-radius:
2px;}
figure,0.5;
figcaption,
247
opacity:
96 embed,
72
margin-left:
-656px;} footer, header, hgroup, menu, nav, output, ruby,
summary, time,
mark, audio, video {
248
-moz-opacity:
97 section,
73
Hvis man bruger anchor, og skri#wrapper
.anchor {0.5;
5
margin:
249
filter:alpha(opacity=5)}
98
74
#menu
ul { 0;block;
display:
ver tekst ind i dem, kan man style
6
44
padding:
0;
text-transform:
uppercase;
250
99
75
list-style:
width:
50%; none;}
dem og derved placere dem,
7 a.nivo-prevNav
45
border:
0;}
border-bottom:
5px
solid
#6cf;
251
{
100
76
float: left;
8
46
præcis som ønsket.
padding-right:
10px;
252
background:
url(img/arrow-left.png)
no-repeat;
101
77 #menu
ul li {
margin-top:
-70px;
9 /* ----body ----- */
47
float:
253
left:10px;}
102
78
height:left;
30px;}
overflow:
hidden;
10
{
48 body font-size:
24px;
254
103
79
Fx bliver „Communication Lipadding-top: 53px;
11
position:
relative;
49
}
255
{ -9999px;}
104
80 a.nivo-nextNav
#menu
ul
li
a
{
text-indent:
ve“-boksen placeret i y=0, hvilket
12
fixed;
50
256
background:
no-repeat;
105
81
font-family:url(img/arrow-right.png)
'Roboto Condences', sans-serif;
13
er „bag ved“ headeren, da headebackground-size:
cover;}
51
#wrapper
p
{
257
right:10px;}
106
82 .clear
font-size:
12px;
{
14
52
ren har position: fixed.
padding-top: 10px;
258
107
83
text-decoration:
none;
clear:
both;}
15
----header
----*/ Condensed', sans-serif;
53 /*
font-family:
'Roboto
259
/* Control
nav styles
(e.g. 1,2,3...) */
108
84
text-transform:
uppercase;
16
{
54 #header
font-weight:
300;
260
.nivo-controlNav
{
109
85 /*
color:
#FFF;
Derfor styles anchoret med
----menu
-----*/
17
height:
100px;
55
font-size:
13px;
261
position:
absolute;
110
86
font-weight:
700;
#menu
{
margin/padding til at plecere sig
18
width:
100%;
56
line-height:
16px;}solid #777;
262
top:
630px;
111
87
border-bottom:
width:
200px; 5pxurl(images/header.png);
19
background-image:
samme sted som sidens start/
57
263
left: 396px;
112
88
padding-left:
height:
400px;5px;}no-repeat;
20
background-repeat:
58 #wrapper
overkant med menuens link.
.header
{
264
z-index:
9;}
113
89
position: fixed;
21
center center;
59
width:
792px;
265
114
90 #menu
ul
li
a:hover
{
top:
100px;
22
background-color: rgba(0,0,0,0.5);
60 .nivo-controlNav
margin-bottom:
10px;
266
a {
115
91
border-bottom:
5px
solid #6cf;}
left: 50%;fixed;
23
position:
61
float:
267
cursor:left;}
pointer;
116
92
z-index:
98;
24
top: 0;
62
268
float: left;
left;
117
93 /* --------------------------ADRESSE ---------------------------*/
float:
25
left:
0;
63
#wrapper
.box
{ -9999px;
269
text-indent:
118
#adresse
{
26
z-index:
99;
Macintosh
HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:styles.css: 2/11
64
width:
792px;
270
background:
url(images/bullets.png)
no-repeat;
119
width:
135px;
27
Med CSS3 kan man lægge
-webkit-box-shadow:
0px 3px 3px rgba(125,125,125,0.5);
65
padding:
30px;
271
width: 22px;
120
height:60px;
28
-moz-box-shadow:
0px 3px 3px rgba(125,125,125,0.5);
forskellige elementer på sine
66
margin-top:
60px;
272
height: 22px;}
121
border-top:
5px
solid
29
box-shadow:
0px
3px
3px#000;
rgba(125,125,125,0.5);}
kodeelementer. Her hhv. skyg67
float:
left;
273
122
border-bottom: 5px solid #000;
30
68 .nivo-controlNav
background-color:
#FFF;#000;
ge, runde hjørner og „animeret“
274
a
{
123
31 #header
border-left:
5px
solid
h1 span {
69
-webkit-border-radius:
275
cursor:pointer;}
124
overgang.
32
background-color:
#fff;2px;
visibility:
hidden;}
70
-moz-border-radius:
2px;
276
125
33
position:
fixed;
71 .nivo-controlNav
border-radius:
2px;}*/ {
277
a.active
126
34
bottom:
20px;-----/* ----wrapper
Det er vigtigt, når man bruger
72
278
0 -22px;}
127
35
right:
#wrapper
{ 0;
CSS3, at man tænker på at
73
#wrapper
.anchor
{
279
128
36
width:
852px;1s;
tansistion:
74 /* --------------------------display:
block;
280
browser-optimere. Forskellige
KOMPETENCER ---------------------------*/
37
129
position:
relative;
-moz-transition:
1s;
75 #wrapper
width:
50%;/* {Placerer
281
.column
38
130
browsere bruger nemlig forskellileft:
50%;
-webkit-transition:
1s;elementets øverste højre hjørne centreret i det
76
float:
282
font-family:
'Roboto
sans-serif;
131
element
det left;
er placeret
Juster herefter
med margin-left*/
-o-transition:
1s; i.Condensed',
ge koder.
77
margin-top:
283
39
font-weight:-70px;
300; url(images/adresse2.jpg);
132
margin-left:
-426px;
/* halvdelen af wrapperens bredde */}
background-image:
78
overflow:
284
40
font-size:hidden;
13px;
133
background-repeat:
no-repeat;
79 #wrapper
padding-top:
285
41
line-height:
16px;
134
h2 { 98;}53px;
z-index:
80
text-indent:
-9999px;}
286
42
width: 244px;'Roboto
font-family:
135
81
287
43
font-weight:
float: left;
136
#adresse:hover
{ 700;
82 .clear
{
288
text-align:
justify;}
137
Macintosh
H3:Grafisk design:Website:agenda_group:styles.css: 1/11Det er altid nøvendigt at ombrywidth:
290px;
83
clear:
289
138
de tekst på sit site, hvis man vil
height:both;}
60px;
84 #wrapper .left, .center {
290
139
background-image: url(images/adresse2.jpg);
få det til at se optimalt ud, men
85 /* ----menu -----*/no-repeat;}
291
margin-right:
30px;}
140
background-repeat:
med text-align sat til justify, er
86
292 #menu {
141
dette ekstra nødvendigt.
87
width:
200px;
293
/*
--------------------------CASES
---------------------------*/
142
88
height: 400px;
143
Macintosh
89
position: fixed;
Her ses et eksempel på arbejdet
Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:styles.css: 3/11
90
top: 100px;
med at ombryde teksten på sitet.
91
left: 50%;
92
z-index: 98;
93
float: left;
Anchor
CSS3
justering af teksten
Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:styles.css: 2/11
endelig produktsammens æ tning
website
Den endelige produktsammensætning består af tre hovedelementer:
Website: Det første digitale møde med AG
Visitkortet: Det første fysiske møde med AG
Loungen: Det første indtryk af AGs fysiske rammer
På de følgende sider er de forskellige elementers indhold
forklaret.
I appendix vedlagt fysisk portfolio findes et eksempel på
det nuværende visitkort.
Loungen
visitkort
Nina Kristensen
Art Director
+45 2213 1554
p.com
nk@agendagrou
S
Agende Group A/
4.
,
48
é
Øster All
Ø
2100 København
36
endeligt site
Links, der følger dig over alt
på siden og gør navigation let
og overskuelig
Logo hele tiden i top, så man
ikke er i tvivl om, hvem
afsenderen er
Billedslider, der viser de nyeste
og vigtigste cases
Links, der leder dig til de sammenklappedelige dele af sitet
(cases og news)
Baggrundsbillede fra Agenda
Groups lounge. Dette skiftes med
ny indretning i lounge.
Link, der åbner job-formularen.
Når man sender (mail), bliver
man ledt over til en takkesiden,
som lukke ved klik
Adressesnip, der folder ud og
Følger dig overalt på sitet
En oplevelse af fysisk at
bevæge sig rundt på sitet
det første digitale møde
med agenda group
37
endeligt visitkort
Vores visitkort i dag er meget lækre og får som regel en
kommentar med på vejen, når man deler dem ud. Derfor
skal der ikke laves om på dette, men kun på selve designet.
Visitkortet skal således være kraftig papirkvalitet med mat
kachering på begge sider og partiel lak på logoet på den
side hvor kontaktinformtionerne ikke findes.
Helt enkelt og
renset for "larm“
Uden billede, da det skal holde
længere end loungens design
Nina Kristensen
Art Director
+45 2213 1554
[email protected]
Kraftig papirkvalitet med
kachering og partiel lak
på logoet
Agende Group A/S
Øster Allé 48, 4.
2100 København Ø
Oplevelsen er i følelsen
(det fysiske) og
budskabet i looket
Det første fysiske møde
uden for kontoret
Tydelig afsender og budskab
38
Endeligt logo i brug i loungen
binder skiftende og
vedvarende elementer sammen i en visuel og følelsesmæssig oplevelse
Det første fysiske møde
på kontoret
Logoet skal indgå som
stort og synligt element
i loungens design
39
hvad så nu?
I første omgang har jeg præsenteret mit resultat for AGs
strategiske overhoved, administrerende partner Andreas
Høgsberg.
Kort fortalt kan han rigtig godt lide det. Han kan godt lide
det stykke arbejde jeg har lavet, de tanker der ligger bag
og det resultat jeg er nået frem til.
Det er klart, at det er en stor beslutning for en virksomhed
at skifte identitet, og det bør ikke gøres uden omtanke. Der
er meget tryghed, genkendelighed og følelse af kontrol
ved, at man kan se noget visuelt og knytte en forrektningsmæssig værdi til det.
Men der kan også være noget fornyende i det. Og det er
lige præcis sådan et sted AG befinder sig nu.
Andreas har før mit arbejde hyret en kreativ grafiker til at
lave et nyt logo, men det kom aldrig rigtig i gang.
Nu har han bedt mig tage mine tanker med til hende, og
sammen med hende fortsætte arbejdet ud fra mine tanker.
Vi skal udvikle (med afsæt i mit arbejde) et nyt look til AG.
I efteråret er det meningen, at vi skal have en ny hjemmeside. Her vil Andreas også gerne have, at jeg tager styringen
på det, og får mine tanker og visuelle inputs med.
Jeg glæder mig meget til at se, hvor det ender.
40

RC -SERIEN RC 230i

Transcription

Similar documents

Jyllandsposten 3. Juni 1992/OD

Aktivitets- kalender

RIA KVR Kontraklap til montage i rørmuffe 0110 – 160

Velkommen til Aabenraa Kommunes Special

Symmetriske og ortogonale matricer Uge 6

Udvidet erhvervsret (pdf) - AU - Executive