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 Digital produktion del 2 Digital produktion del 1 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.“ Kommunikationskonsulent: "Jeg synes, måden at tænke på her [...] er god.“ Kommunikationskonsulent: "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 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 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 Bold Condensed Italic 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 Light Condensed Italic Condensed Condensed Italic Bold Condensed Bold Condensed Italic 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 C O M M U N I C A T I O N . L I V E AGENDAGRP. AGendA AGendA GRouP GRouP AGendA AGendA GRouP GRouP skærer det overflødige væk . L I V E C O M M U N I C A T I O N . 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 C O M M U N I C AT I O N . L I V E AgendA AgendA group group C O M M U N I C A T I O N 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 c o m m u n i c a t i o n 13 . l i v e AGENDA GROUP . L I V E communication . live communication . live AgendA AgendA group group AGENDAGRP C O M M U N I C A T I O N C O M M U N I C AT I O N . L I V E AGendA AGendA G RGoRuoPu P C O M M U N I C A T I O N AGENDA GROUP communication . live . L I V E C O M M U N I C A T I O N . L I V E AG E N DA G R P c o m m u n i c a t i o n . l i v e AGENDA GROUP communication . live 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 Menulinje med link til: Communication Live Seminar & Conferences Event Marketing Sponsor Markerting Index > JOBS Logo Menulinje med link til: Communication Live Seminar & Conferences 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 Footermenu med link til: Kontaktinformation Om Agenda Group Bank Information Fildeling Billede Tekst Jobformular Footermenu med link til: Kontaktinformation Om Agenda Group Bank Information Fildeling Footer med adresse og sociale medier-links Footer med adresse og sociale medier-links 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 Menulinje med link til: Communication Live Seminar & Conferences Event Marketing Sponsor Markerting Cases News Jobs Communication Live Seminar & Conferences Event Marketing Sponsor Marketing Cases News Om Agenda Group Referencebillede Footermenu med link til: Kontaktinformation Bank Information Fildeling overskrift billedbokse (delvist sammenklappelig) Footer med adresse og sociale medier-links overskrift Logo tekstbokse (delvist sammenklappelig) 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 Menulinje med link til: Communication Live Seminar & Conferences Event Marketing Sponsor Markerting Cases News Jobs Communication Live Seminar & Conferences Event Marketing Sponsor Marketing Cases News Om Agenda Group Referencebillede Footermenu med link til: Kontaktinformation Bank Information Fildeling overskrift billedbokse (delvist sammenklappelig) Footer med adresse og sociale medier-links overskrift Logo tekstbokse (delvist sammenklappelig) 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 (delvist sammenklappelig) Index Logo Menulinje med link til: Communication Live Seminar & Conferences Event Marketing Sponsor Markerting Cases News Jobs Communication Live Seminar & Conferences Event Marketing Sponsor Marketing Cases News Om Agenda Group Referencebillede Footermenu med link til: Kontaktinformation Bank Information Fildeling Footer med adresse og sociale medier-links overskrift tekstbokse (delvist sammenklappelig) 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 <!--Viser Æ Ø Å--> <!-------------------HEAD --------------------> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <head> <title>Agenda Group - Communication Live</title> <!--Søgemaskineoptimering (SEO)--> <meta name="keywords" content="Agenda, Group, Communication, Live, <!--Viser Æ Ø Å--> Kommunikation"><!--Google ser ikke denne--> <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 <!--Søgemaskineoptimering <!-------------------HTML --------------------> 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."><!--Den Kommunikation"><!--Google serand ikke denne--> 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 <!-------------------<html xmlns="http://www.w3.org/1999/xhtml" 14 amoung Europe's leaders in experience-basedxml:lang="da"> communication and communication 5 <head> 3 <!--Link til stylesheet--> 15 live. On our website can read more about our work with Communication 6 <title>Agenda Group -you Communication Live</title> 4 <!-------------------HEAD --------------------> 16 <link Seminars href="styles.css" rel="stylesheet" type="text/css" /> Live, & Conferences and Sponsor and Event Marketing."><!--Den 7 5 <head> 17 beskrivelse der står fx på Google. Max 263 tegn. Her 251 tegn.--> 8 Æ Ø Å--> 6 <!--Viser <title>Agenda Group - Communication Live</title> 18 14 <!--Google font--> 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: <!--Link til stylesheet--> 10 8 <!--Viser Æ Ø Å--> 16 300italic,400italic,700italic,400,300,700' rel='stylesheet' <link href="styles.css" rel="stylesheet" type="text/css" /> type='text/css'> 11 <!--Søgemaskineoptimering (SEO)--> 9 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 20 17 </head> 12 <meta name="keywords" content="Agenda, Group, Communication, Live, 10 21 <!--Google 18 <!-------------------HEAD SLUT --------------------> font--> Kommunikation"><!--Google ser ikke denne--> 11 (SEO)--> 22 <!--Søgemaskineoptimering 19 <link name="description" href='http://fonts.googleapis.com/css?family=Roboto+Condensed: 13 <meta content="The communication agency Agenda 12 name="keywords" content="Agenda, Group, Communication, Live,Group is 23 <meta 300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'> amoung Europe's leaders in experience-based communication and communication ser ikke denne--> 24 Kommunikation"><!--Google 20 </head> live. On our website you can read morecommunication about our work with Communication 13 name="description" content="The agency Agenda Group is 25 <meta 21 <!-------------------HEAD SLUT --------------------> Live, Seminars Conferences and Sponsor andcommunication Event Marketing."><!--Den Europe's&leaders in experience-based and communication 26 amoung 22 <!-------------------BODY --------------------> 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."><!--Den 28 24 15 <!--Link til stylesheet--> 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 <!-------------------26 <div id="header"> BODY --------------------> 17 15 til stylesheet--> 31 <!--Link 27 <h1><span>Skjult tekst om Agenda Group og "live communication" som giver god background="images/background.jpg"> 18 <body <!--Google font--> 16 href="styles.css" rel="stylesheet" type="text/css" /> 28 <link SEO.</span></h1> 19 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed: 162 17 32 <!-------------------29 </div> HEADER --------------------> 300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'> 163 18 class="box"> <!--Google font--> 33 <div 30 <div id="header"> 20 company strategy.</td> </head> 164 19 <div class="header"><h2>Sponsor Marketing</h2></div> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed: 34 <h1><span>Skjult 31 <!-------------------MENU --------------------> tekst HEAD om Agenda Group og "live communication" som giver god 192 21 <td style="width:30px;"></td> <!-------------------SLUT --------------------> 165 rel='stylesheet' 35 300italic,400italic,700italic,400,300,700' <div id="menu"><!--SEO: Er placeret som noget af det første,type='text/css'> da SEO.</span></h1> 193 22 <td><img src="images/simcorp.jpg" alt="SimCorp"></td> 166 20 <div class="leftLive" column"> </head> 32 "Communication er det vigtigste søgeord og dette linker videre til en </div> 194 23 </tr> 167 21 <span 700; text-transform: uppercase;">Activate your den <!-------------------HEAD SLUT --------------------> 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--> <!-------------------MENU --------------------> 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"><!--SEO: Er sponsorship placeret somisnoget af det første, da 26 weight: 700; text-transform: uppercase;">The World‘s second-oldest <!-------------------BODY --------------------> 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 background="images/background.jpg"> 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 <!-------------------BODY --------------------> 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 <!-------------------HEADER --------------------> 27 And they will also associate things with specific groups in an and <body background="images/background.jpg"> 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" title="Communication 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> <!-------------------HEADER --------------------> 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 <!-------------------FOOTER Agenda Group's cases.">Cases</a></li> Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:index.html: 199 34 src="images/irma.jpg" alt="Irma"></td> <!-------------------MENU --------------------> 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"><!--SEO: Er placeret som noget af det første, da find news 173 33 <br /><span style="font-weight: 700; text-transform: uppercase;">Advic 334 <div id="box"> other updates from Agenda Group.">News</a></li> 201 and <tr id="case3" style="display:none;"> "Communication Live" er det vigtigste søgeord og dette linker videre til en 34 that affects the bottom line</span> MENU --------------------> 335 44 e<!-------------------<div class="column left">Agenda Group <li><a href="#about" class="scroll" title="If youmening are style="fontwondering 202 <td style="width: 244px; text-align: justify;"><span tekst omkring Communication Live. Det giver derfor ikke at flyttewhat den 174 35 <br />Agenda Group has extensive experience of sponsorships and corporate <div id="menu"><!--SEO: Er placeret som noget af det første, da 336 we are all <br />Øster Allé 48, 4. sal about, check this out!">About us</a></li> weight: 700; text-transform: uppercase;">Barbie – The Scandinavian Tour</spa ned i html og placere den med CSS--> 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" title="Communication 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 HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:index.html: 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 design:Website:agenda_group:index.html: 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 <!-------------------our profile"><img src="images/twitter1.png" WRAPPER -------------------->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 <!---------------------CASES---------------> /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> <!----SLIDER -----> 211 186 class="box"> 345 57 <div <div class="box" style="margin-top: 131px;"> 212 <!---------------------NEWS---------------> 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 <!----*** SLIDER SCRIPT *** -----> 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" <!--tekstboks_1--> 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({ <!----SLIDER SLUT -----> 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) <!----CAPTIONSmed -----> 21, emplo-yees 2013</span></h3></div> with the correct knowledge im-plementing the new 355 66 the 12,infused // Tilfor "slice"-animationen: <!--maerskcaption--> 221 <divslices: class="right column">nulloru mquidel icilita sperferia cupiditatur Hvor re Macintosh HD:Users:Ninahmk:Skole:Portfolio 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 design:Website:agenda_group:index.html: 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 --------------------> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"> <!-------------------- HEAD --------------------> <head> <title>Agenda Group - Communication Live</title> <!--Viser Æ Ø Å--> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!--Søgemaskineoptimering (SEO)--> <meta name="keywords" content="Agenda, Group, Communication, Live, Kommunikation"><!--Google ser ikke denne--> <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."><!--Den beskrivelse der står fx på Google. Max 263 tegn. Her 251 tegn.--> <!--Link til stylesheet--> <link href="styles.css" rel="stylesheet" type="text/css" /> <!--Google font--> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed: 300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'> </head> <!-------------------- HEAD SLUT --------------------> <!-------------------- BODY --------------------> <body background="images/background.jpg"> <!-------------------- HEADER --------------------> <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> <!-------------------FOOTER --------------------> </div> <div id="footer"> <div id="box"> <div class="column left">Agenda Group <!-------------------WRAPPER --------------------> <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"> <!----- SLIDER -----> <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 <!----- SLIDER SLUT -----> our Twitter profile"><img src="images/twitter1.png" width="28px" height="28p x" onMouseOver="this.src='images/twitter2.png'" onMouseOut="this.src='images <!----CAPTIONS -----> /twitter1.png'"></a></div> <!--maerskcaption--> <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 <!--Viser Ø Å--> <tr>et,Æ quist </tr> hovres 250 1969 <div 201 370 aliquamus, magnatur ma estorep resequat la// quias porit est molorepere aut <meta http-equiv="Content-Type" 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" style="display:none;"> 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? <!--Søgemaskineoptimering (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> Kommunikation"><!--Google 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 ... <!--tekstboks_2 slut--> 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."><!--Den </div> sale inSeminars one day -function everthousands in the history ofand Irma at stagering index 139.</td> Se-veral ofSponsor kids their parents visited Barbie (){}, //a kommer efter et our afterChange: 369 235 univers Stop animationen, pauseOnHover: true, 252 198 <!--tekstboks_3--> beskrivelse der slut--> står fx på Google. Max 263 tegn. Her 251 tegn.--> når der <!--tekstboks_4 <td over style="width:30px;"></td> and 1,000 kids and participated in// the competition.</td> billedskifte 236 14 hovres 253 199 203 376 <divslideShowEnd: class="news"> <td><img src="images/irma.jpg" alt="Irma"></td> <td style="width:30px;"></td> // kommer efter alle billeder function(){}, 370 237 // Forcer manuel overgang manualAdvance: false, 15 <!--tekstboks_5--> 254 200 204 <div class="left column"><h3>Say Hello toalt="Barbie"></td> Morten<br /><span style="color:#99 <!--Link til </tr> <td><img src="images/barbie.jpg" er blevet viststylesheet--> 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" style="display:none;"> </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 <!--Google font--> 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 controlNavThumbsFromRel: 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 href='http://fonts.googleapis.com/css?family=Roboto+Condensed: n> A class="link"> new Barbie introduced to the and TOP-TOY que billede er 366 <div controlNavThumbsSearch:'.jpg', // 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 300italic,400italic,700italic,400,300,700' rel='stylesheet' class="right column">Alitas sinumquia dissitatur alignis dolorestrum wanted tosim raise attention towards this. creating a portable Barbie <a href="javascript:viewMore('case3');" 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 <!-------------------HEAD SLUT sim --------------------> 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 <!---------------------NEWS---------------> 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 <!-------------------SCRIPT CASES --------------------> 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 <!--tekstboks_3 slut--> ad magnatur ma estorep resequat la quias porit est molorepere aut <td style="width:30px;"></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 <!-------------------BODY --------------------> <td><img src="images/barbie.jpg" alt="Barbie"></td> <div class="box"> <!-------------------SCRIPT NEWS vernam --------------------> captions 243 er vist 27 inum, 205 216 387 class="clear"></div> odita doluptur, qui in re quo beatur aut lam eatur.</div> <body background="images/background.jpg"> </tr> <div class="header"><h2>News</h2></div> <script type="text/javascript" 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> <!--maerskcaption slut--> navigation 245 billede er loadet 259 29 <!--tekstboks_5 207 218 389 <!--skjulte news--> 70 slut--> <!-------------------HEADER --------------------> <!--tekstboks_1--> <!-------------------SCRIPT SCROLL LINKS --------------------> 373 nextText: 'Næste', // Tekst ved "næste"379 Display defineres som „none“ 246 }); 260 30 </div><!--skjulte 208 219 390 <div class="box" id="hidenews" style="display: none; padding: 0; margin: 0;" 71 news slut--> src="scripts/scroll.js"></script> <div class="news"> id="header"> class="link"> <script type="text/javascript" <!--vwcaption--> navigation 380 }); 261 31 209 220 391 > 72 <h1><span>Skjult tekst om Agenda Group og "live communication" som giver god <a href="javascript:viewMore('case3');" 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 <!--tekstboks_4--> 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> <!----*** BODY SLUT *** -----> will definitely participate again next year!" billedskifte klappe-sammen-funktionen 383 249 <!-------------------SCRIPT news.">... CASES --------------------> 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 type="text/javascript" src="scripts/show.hide.cases.js"></script> 264 34 212 395 75 </div> <!-------------------MENU --------------------> <!---------------------NEWS---------------> verchit et,vist quist ea invellandit, quam iliquatur rectaquundis eossint iminum 8/13 <!--vwcaption slut--> Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:index.html: er blevet 385 265 35 213 396 76 <div id="menu"><!--SEO: Er placeret som noget af det første, da 377 Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:index.html: // kommer når det sidste billede 7/13 lastSlide: function(){}, 386 <!-------------------SCRIPT NEWS --------------------> 266 214 397 77 </div><!--news slut--> "Communication Live" er det vigtigste søgeord og dette linker videre til en <a class="anchor" id="news">news</a> </html> <!--samsungcaption--> er vist 387 type="text/javascript" src="scripts/show.hide.news.js"></script> 267 215 398 78 <script tekst omkring Communication Live. Det giver derfor ikke mening atsidste flytte den <div class="box"> <!----*** HTML SLUT *** class="nivo-html-caption"> -----> <div id="samsungcaption" 378 // kommer når det afterLoad: function(){} 388 268 216 399 79 <!---------------------ABOUT US---------------> 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 <!-------------------217 400 in a<ul> comfor-table setting. The results were obvious on the bottom line." 379 }); 390 <script type="text/javascript" src="scripts/scroll.js"></script> 270 37 <a 218 80 class="anchor" id="about">about</a> <li><a href="#com-liv" class="scroll" title="Communication Live is <!--tekstboks_1--> </div> 380 }); 391 271 219 81 <div the core competenceslut--> of Agenda Group. Read about what it means to us here.">C class="news"> <!--samsungcaption 381 </script> 392 </body> 272 220 82 <div class="box"> ommunication Live</a></li> class="left column"><h3>Agenda Group is<br />looking for a new<br />sen </div> 382 Linket henviser til et anchor. Med 393 *** BODY SLUT -----> 273 38 <!----83 <div class="header"><h2>About Us</h2></div> <li><a href="#sem-con" class="scroll" title="Agenda Group plans and ior project manager<br /><span style="color:#999; font-weight: 300;">April 383 <!----CAPTIONS SLUT *** -----> <!-------------------SCRIPT CASES --------------------> 394 274 class=“scroll“ og scriptet „scroll“ 84 21, 2013</span></h3></div> 384 Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:index.html: 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 <!---------------------COM-LIV---------------> opnås scroll-effekt. Macintosh HD:Users:Ninahmk:Skole:Portfolio 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> <!-------------------SCRIPT --------------------> 397 87 </html> communication among European companies. Since 1997, we have deve-loped, 387 <script type="text/javascript" src="scripts/show.hide.news.js"></script> Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:index.html: 7/13 Class=“anchor“ giver mulighed 398 *** SLUT *** -----> 88 <!----planned and HTML implemented communication based on physical events. We make sure 388 <div class="box"> 399 for at style. 89 that target groups feel involved. That way we bring about empathy, 389 <div class="header"><h2>Communication Live</h2></div> <!-------------------SCRIPT SCROLL LINKS --------------------> 400 90 <script 390 type="text/javascript" src="scripts/scroll.js"></script> Macintosh HD:Users:Ninahmk:Skole:Portfolio 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 <!----your product or service and be loyal, and this generates sales. This is why *** BODY SLUT *** -----> 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 design:Website:agenda_group:index.html: 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 <!----HTML SLUT *** -----> 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 <!----- *** SLIDER SCRIPT *** -----> 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, // Til "box"-animationen: Hvor hvor hurtigt det skal gå, om de mange kolonner forskellige navigationsmulighe357 boxRows: 4, // Til "box"-animationen: Hvor 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 controlNavThumbsFromRel: false, 366 vises controlNavThumbsSearch:'.jpg', // Erstat dette billede 364 med controlNavThumbs: // Små billeder som navigation false, ... 367 controlNavThumbsReplace: '_thumb.jpg', // ... dette billede Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:index.html: 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 <!-------------------- SCRIPT CASES --------------------> 384 <script type="text/javascript" src="scripts/show.hide.cases.js"></script> 385 386 <!-------------------- SCRIPT NEWS --------------------> 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 $formproc->GetSelfScript(); ?>' <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 Agenda Group</h2></div> 30 55 <!----- JOB DESCRIPTION SpamTrapInputName(); ?>' /><!-- -----> 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 <!----JOB DESCRIPTION -----> echo $formproc->GetSelfScript(); ?>' <form action='<?php 51 echo $formproc->GetFormIDInputName( <input type='hidden' name='<?php Her starter formen og tilhørende 46 34 <head> echo $formproc->GetSelfScript(); ?>' <form id='contactus' id='contactus' action='<?php 58 <option selected="selected" value="0">Choose a job 56 <div class="headline"> enctype="multipart/form-data" accept-charset='UTF-8'> ); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/><!-35 method='post' 46 method='post' enctype="multipart/form-data" accept-charset='UTF-8'> php bliver defineret. echo $formproc->GetSelfScript(); ?>' <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' accept-charset='UTF-8'> <title>Søg job hos Agenda Group</title> 59 <option value="Senior Project Manager">Senior Project 48 bottom: <input 5px;"> <div class="headline"><h2>Søg job Agenda 52 echo $formproc->Get type='text' class='spmhidip' name='<?php 48 47 <div class="headline"><h2>Søg job hos hos Agenda Group</h2></div> 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> <!--Google font--> 60 <option value="Freelance">Freelance</option> 50 description</option> <input type='hidden' name='submitted' 53 50 49 <input type='hidden' name='submitted' id='submitted' id='submitted' value='1'/><!-value='1'/><!-39 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed: 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 <!----JOB DESCRIPTION -----> 51 echo $formproc->GetFormIDInputName( $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="Freelance">Freelance</option> ); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/><!-56 <div class="headline"> 51 ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/><!-<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 echo $formproc->GetFormIDInputValue(); ?>'/><!-- margin41 65 <script type='text/javascript' src='scripts/fg_captcha_validator.js'> 62 bottom: <input 52 </select> echo $formproc->Get type='text' class='spmhidip' name='<?php 5px;"> 52 echo $formproc->Get <input type='text' class='spmhidip' name='<?php validering --> 66 </script> <!----- GENDER -----> 63 </div> SpamTrapInputName(); ?>' /><!-- spam spam --> --> 58 <option selected="selected" value="0">Choose a job 52 SpamTrapInputName(); ?>' /><!-<input type='text' class='spmhidip' name='<?php echo $formproc->Get 42 67 </head> <div class="headline" style="margin-bottom:6px;"> 64 description</option> 53 53 SpamTrapInputName(); ?>' /><!-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 -----> <!----JOB DESCRIPTION Manager</option> 55 54 <!----JOB DESCRIPTION -----> -----> 45 69 </div> 67 <body> <div 56 class="headline" style="margin-bottom:6px;"> class="headline"> 60 <option value="Freelance">Freelance</option> formularen. Her med en select 56 55 <div class="headline"> <!----JOB DESCRIPTION -----> 70 <div class="headline"> 68 57 Macintosh HD:Users:Ninahmk:Skole:Portfolio 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 <option value="Other">Other</option> 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> <div class="headline"> 64 Option definerer de valgmulig58 description</option> <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> <!----GENDER -----> 59 <option value="Senior Project Manager">Senior Project 75 Manager</option> <!----- <option DRIVER'Svalue="Freelance">Freelance</option> LICENSE -----> dinet. 72 60 </div> 67 <div class="headline" style="margin-bottom:6px;"> 60 <option value="Freelance">Freelance</option> 76 Manager</option> <div class="headline"> 73 61 <option value="Other">Other</option> 68 Her en radio-funktion, hvor man <input type="radio" name="gender" value="male" style="border: 0; 61 60 <option value="Other">Other</option> value="Freelance">Freelance</option> 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 value="Other">Other</option> width: 15px; float: left;-----> margin-right: 5px; margin-top: 5px;" />Yes 75 der: 0; </div> 63 <!----DRIVER'S LICENSE 69 63 62 </div> </select> den anden. , I have a Danish driver's license! 76 64 <div class="headline"> class="headline"> 70 <div 64 63 </div> 78 </div> 77 Her en check-box, hvor man kan 65 <input type="radio" type="checkbox" name="drivers-license" value="yes" style="bor 71 <input name="gender" value="female" style="border: 0; 65 64 79 der: 0; width: 15px; float: left; margin-right: 5px; margin-top: 5px;" />Yes 66 <!----GENDER -----> vælge til eller fra. width: 15px; float: left; margin-right: 6px; margin-top:5px;" />Female 66 65 GENDER -----> 80 , I have<!----67 a Danish driver's license! <div class="headline" style="margin-bottom:6px;"> 72 </div> 67 66 <div class="headline" style="margin-bottom:6px;"> <!----GENDER -----> 81 <!-----type="radio" YOU NAME -----> 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 style="margin-bottom:6px;"> 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 <!----DRIVER'S LICENSE -----> 69 </div> width: 15px; float: left; margin-right: 6px; margin-top:5px;" />Male 81 70 Macintosh HD:Users:Ninahmk:Skole:Portfolio <!----- YOU NAME -----> H3:Grafisk design:Website:agenda_group:pages:contactform.php: 2/5 <div 76 70 69 <div class="headline"> class="headline"> </div> 82 71 <div class="headline"> <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 <!----80 75 74 <!----- DRIVER'S DRIVER'S LICENSE LICENSE -----> -----> 34 76 <div class="headline"> 81 <!----YOU NAME LICENSE -----> -----> 76 75 <div class="headline"> <!----DRIVER'S 77 <input type="checkbox" 82 <div class="headline"> class="headline"> 77 76 <input type="checkbox" name="drivers-license" name="drivers-license" value="yes" value="yes" style="bor style="bor <div </span></div> 84 </span></div> <label for='name' >Your Full Name*: </label><br/> 84 <label Full Name*: </label><br/> 85 </span></div> <input for='name' type='text'>Your name='name' id='name' value='<?php echo $formproc 85 <input type='text' name='name' id='name' value='<?php echo $formproc ?>' >Your maxlength="70" /><br/> 84 ->SafeDisplay('name') <label for='name' Full Name*: </label><br/> ?>' maxlength="70" /><br/> 86 <span id='contactus_name_errorloc' class='error'></span> 85 ->SafeDisplay('name') <input type='text' name='name' id='name' value='<?php echo $formproc </span></div> 86 <span class='error'></span> 87 ->SafeDisplay('name') </div>id='contactus_name_errorloc' ?>' maxlength="70" /><br/> Her kan man indtaste text som 84 <label for='name' >Your Full Name*: </label><br/> 87 </div> 88 86 <span class='error'></span> 85 <inputid='contactus_name_errorloc' type='text' name='name' id='name' value='<?php echo $formproc skal opfylde de valideringskrav, 88 89 87 </div> ->SafeDisplay('name') ?>' maxlength="70" /><br/> 89 der er defineret i php-delen. Her 90 <!----- EMAIL -----> 88 86 <span id='contactus_name_errorloc' class='error'></span> 90 <!----EMAIL -----> 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 <!----EMAIL -----> og max fylder 70 karakterer. 88 92 <label for='email'>Email Address*:</label><br/> 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 Address*:</label><br/> Igen et tekstfelt, men her kræver 90 <!----EMAIL -----> oc->SafeDisplay('email') ?>' maxlength="70"/><br/> 94 <span id='contactus_email_errorloc' class='error'></span> 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> ?>' maxlength="70"/><br/> 92 <label for='email'>Email Address*:</label><br/> 95 </div> med en e-mail-adresse. 96 94 <span id='contactus_email_errorloc' class='error'></span> 93 <input type='text' name='email' id='email' value='<?php echo $formpr 96 97 95 </div> oc->SafeDisplay('email') ?>' maxlength="70"/><br/> 97 98 <!----- PHONE -----> 96 94 <span id='contactus_email_errorloc' class='error'></span> 98 <!----PHONE -----> 99 <div class="headline"> 97 95 </div> 99 Her kan indtastes telefonnum<div class="headline"> 100 <label>Phone /> 98 <!----PHONENumber:</label><br -----> 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. <!----PHONE -----> (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 <!----- FILE ATTACHMENT -----> 103 Her starter fil-vedhæftnings-de(e.g. 0045)" /><br/> 105 <!----FILE ATTACHMENT -----> 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 <!----FILE ATTACHMENT -----> 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' class='error'></span> 107 <label for='resume' >Upload File (max 2MB):</label><br /> 105 <!----FILE ATTACHMENT -----> 109 <span class='error'></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 id='contactus_photo_errorloc' class='error'></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 <!----- SPAM SECURITY CODE -----> 111 109 <span id='contactus_photo_errorloc' class='error'></span> 113 <!----SPAM SECURITY CODE -----> 114 <div class='headline'> 112 110 </div> 114 <div class='headline'> 115 <label for='scaptcha' >Enter Code:</label> 113 <!----SPAM SECURITY CODE -----> 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 <!----SPAM SECURITY CODE -----> 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' class='error'></span> 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 id='contactus_scaptcha_errorloc' class='error'></span> 117 <input type='text' name='scaptcha' id='scaptcha' maxlength="10" /><b 120 121 <!----- REFRESH IMAGE -----> 119 r /> 121 <!----REFRESH IMAGE -----> 122 <div class='explain'>Can't read the image? 120 118 <span id='contactus_scaptcha_errorloc' class='error'></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 <!----REFRESH IMAGE -----> 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 <!----REFRESH IMAGE -----> 124 *required fields</p></div> 125 a>.<br /> </div><!--SPAM SECURITY CODE SLUT--> 122 <div class='explain'>Can't read the image? 125 </div><!--SPAM SECURITY CODE SLUT--> 126 124 fields</p></div> 123 <a*required href='javascript: refresh_captcha_img();'>Click here to refresh</ 126 125 </div><!--SPAM SECURITY H3:Grafisk CODE SLUT--> Macintosh HD:Users:Ninahmk:Skole:Portfolio design:Website:agenda_group:pages:contactform.php: 3/5 a>.<br /> Macintosh HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:pages:contactform.php: 3/5 126 124 *required fields</p></div> Macintosh HD:Users:Ninahmk:Skole:Portfolio design:Website:agenda_group:pages:contactform.php: 3/5 125 </div><!--SPAM SECURITY H3:Grafisk CODE SLUT--> 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, thead, tr, th, td, article, aside, canvas, details, position: relative; sidder fikseret og skalerer med 9 12 57 /* ----body ----*/ background-attachment: fixed; 352 text-align: left; 15 12 embed, figure, footer, /* ----headerfigcaption, ----*/ background-attachment: 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 background-attachment: 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: url(images/header.png); 64 #header width: 359 22 margin-top: -2px; rgba(0,0,0,0.5); 10 background-color: 19 bodybackground-image: { url(images/header.png); 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%; background-position: center center; 66 24 margin-top: 60px; 361 top: 0; 12 21 background-attachment: fixed; background-position: center center; Nogle steder med placering og/ 19 22 background-image: url(images/header.png); 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 background-position: 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: url(images/header.png); 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 background-position: 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 HD:Users:Ninahmk:Skole:Portfolio 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*/ Condensed', sans-serif; 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 HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:styles.css: 1/11 36 width: 852px; 90 top: 100px; Macintosh HD:Users:Ninahmk:Skole:Portfolio 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 HD:Users:Ninahmk:Skole:Portfolio 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 HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:styles.css: 2/11 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 HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:styles.css: 1/11eksempel er det på alt indeholdt i 221 overflow: hidden; Macintosh HD:Users:Ninahmk:Skole:Portfolio 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, thead, tr, th, td, article, aside, canvas, details, 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 background-attachment: 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 background-position: 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 background-position: 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: Condensed', sans-serif; 135 81 287 43 font-weight: float: left; 136 #adresse:hover { 700; 82 .clear { 288 text-align: justify;} 137 Macintosh HD:Users:Ninahmk:Skole:Portfolio 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 HD:Users:Ninahmk:Skole:Portfolio H3:Grafisk design:Website:agenda_group:styles.css: 6/11 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
![Lær HTML og CSS grundlæggende [Gratis PDF]](http://cdn3.abcdocz.com/store/data/003199325_1-8a3d801c7bb3d73937551695efd86f2d-250x500.png)
© Copyright 2024