December 2012 Odense Winter Jazz Christan da Silva Rasmus Mosel Jakob Henner Gruppe 7 Link til siden: http://std.li/y1 (HTML5) http://std.li/z1 (HTML4 Strict) Firma Adresse (arb.) Postnummer (arb.) By (arb.) T Telefon (arb.) F Faxtelefon (arb.) E-post (arb.) URL (arb.)
Indholdsfortegnelse Indledning 2 Problemstilling 2 Kommunikation 3 Målgruppen 3 Idékatalog 3 Events 3 Galleri 3 Gæstebog 4 Parallax 4 Bruger profil 4 Brugerscenarie 4 Mission statement 5 Virksomhed 5 Observationsbaseret research & konceptudviklingsmetode 5 Metode 5 Mindmap 5 Observation 6 Projektstyringsforløbet / Evaluering af gruppeproces og refleksioner 6 Design- og stilarter 6 Research og analyse 6 Navn på rapport 1
Modernisme 6 Popart 7 KiSS: Keep it simple, Stupid! 8 Interaktion 8 Analyse 9 Struktur/modellering 10 Realisering/kode 12 Konklusion 14 Ressourcer 14 Indledning Odense Vinter Jazz har bedt os give et forslag på hvordan deres nye website kan se ud, da de indtil videre primært har promoveret sig igennem spillestederne de samarbejder med. Odense Vinter Jazz ønsker at nå et yngre publikum via nettet. Så vi har brugt en uge på at udvikle en løsning der kan få de yngre interesseret. Problemstilling Odense Vinter Jazz ønsker et website der kan tiltrække et yngre publikum. Hvordan får vi de yngre interesseret i jazz? Hvilken stilart kan få hjemmesiden mere attraktiv I de unges øjne? Navn på rapport 2
Kommunikation Målgruppen Da Odense Vinterfestival ønsker at tiltrække et yngre publikum også, må vores målgruppe være personer I odenseområdet mellem 18 og 40. De skal selvfølgelig være over 18, da der serveres alkohol og under 40, da det passer med gallups kompas segment gruppe1 de individorienterede og de moderne individorienterede. Det er den kreative person der kan lide at se live musik, være synlig i et kulturelt miljø og være social med vennerne. Segmentet er hyppig bruger at computer, mobiltelefon og internet og stiller sig kritisk overfor website design, så deres opmærksomhed skal fanges hurtigt. Vores collage illustrerer den typiske person vi prøver at nå (se bilag). Idékatalog Events Da hele siden omhandler om Odense vinterjazz s events rund omkring I odense, og det ikke afholdes et bestemt sted, mener vi det er vigtigt at have dato, tid og sted på div. Kunstnere der skal spille, samt information om bandet der spiller. Galleri Forhåbentligt har websitets design gjort en besøgende nysgerrig, så et galleri kunne gøre oplevelsen fuldent. Den besøgende for en chance for at få en lille bid af festivalen, uden før at have været der, og de faste besøgende kan se tilbage på tidligere koncerter og mindes om en god oplevelse. Navn på rapport 3
Gæstebog Brugerne kan kommenterer på div. Events, både før og efter, ris og ros og om sitet generelt. Parallax Brugeren får en unik oplevelse med parallax effect3, som skaber et lækkert design, samt overskuelighed og er simpelt. Ikke så mange menuer og undermenuer, men bare scroll ned. Bruger profil Lotte Madsen er 27 år. Hun er single og arbejder som handicap hjælper til hverdag. Hun bor midt i Odense og synger i et band med vennerne i fritiden. Lotte er rimelig udadvendt og kan godt lide at gå på café og shoppingture. Desuden kan hun godt lide at sidde foran sin mac og designe. Brugerscenarie Lotte har en meget bred musiksmag og elsker live musik. Hun gider dog ikke koncerterne der er fyldt med teenagers, så hun søger på nettet for at finde ud af hvor der sker noget i Odense. Lotte finder hurtigt frem til Odense Vinterjazz festival og bliver hurtigt overrasket men interesseret i det stilbeviste design. Hun finder hurtigt rundt på det enkle site og opdager at jazz ikke kun er for ældre mennesker. Konceptet passer rigtigt godt til Lottes kreative sind og ønske om god musik i et ungt miljø. Navn på rapport 4
Mission statement Vores mission er at nå et yngre publikum, som ikke normalt tager til odense vinterjazz festival. Via et lækkert design på hjemmesiden, vil vi gøre det klart for de unge, at jazz ikke nødvendigvis er en oplevelse isoleret til den ældre generation. Virksomhed Observationsbaseret research & konceptudviklingsmetode Vi var til koncert om mandagen med NO SLIPS, som er et jazz/electronica fusionsband. Der blev lagt meget væk på navnet, no slips, da fejl ikke skal antages som fejl, men en del af en livlig musikoplevelse. Den specielle fusions musik der blev spillet, blev bakket op af video og billeder der satte prikken over i et og satte gang i den helt rigtige stemning. Vi blev bla. bedt om at tegne hvad vil følte, da vi hørte musikken. Vi blev hurtigt klar over at vi skulle komme op med noget specielt. Et design og koncept der skulle kunne udfordre selv den aller mest kræsne person. Det skulle være enkelt og overskueligt, så det mere er en oplevelse at besøge sitet, end det er information. Så vi endte med at vælge en blanding mellem popart og modernisme, da det passer godt sammen med jazz og stadig bevarer den enkelthed vi meget gerne vil have med. Metode Mindmap Vi udarbejdede et mindmap med Odense Winterjazz i midten og brainstormede idéer til grenene ud fra. På den måde fik vi en god indsigt i hvordan og hvorledes sitet skulle være. Det er en god metode, hvor alle medlemmerne af gruppen har Navn på rapport 5
mulighed for at sætte sit præg og komme med idéer til udforming, samt at argumenterer imod. Observation Vi har observeret en koncert. Uden selv at vide så meget om jazz, har vi haft mulighed for en smagsprøve. Vi har kunne lytte, se og føle. Det har givet os god inspiration og et indblik i hvordan en jazzkoncert kan foregå. Observering er en god inspirations kilde, og man har mulighed for selv at tage billederne og stå inde for at de er ægte. Projektstyringsforløbet / Evaluering af gruppeproces og refleksioner Allerede helt fra start havde vi et godt overblik over hvad vi ville lave og hvad vi havde mulighed for at lave. Vi var alle enige og arbejdede på samme måde. Vi havde aftalt at mødes kl. 9 på skolen, hvis ikke andet var aftalt og de dage vi arbejde hjemmefra, havde vi kontakt nonstop over Skype, som vi også kunne dele arbejdet over. Vi fandt hurtigt ud af hinanden stærke sider, hvilket arbejdet blev delt ud efter. Vi opsatte fra start et gantt chart, så vi selv og andre kunne holde styr på vores tidsplan og arbejde. Desuden brugte vi en del tid på at reflektere og strukturere de første par dage, hvor vi først kom i gang med rapport og websitet senere på ugen. Design- og stilarter Research og analyse Modernisme Modernismen begyndte i slutningen af 1900 tallet. Den moderne verden blomstede efter mange år med romanisk historisk og mytologisk kunst. Den modernistiske stil Navn på rapport 6
er enkel på alle måder. Formerne er Retvinklede trekandter, cirkler og firkandter. Farverne er ofte hvid, sort, gul, rød, og blå. Den modernistiske stil giver ofte plads til good luft imellem tekst og billeder. Selv de forskellige Fonte der bliver brugt er ofte meget enkle. Da vi gennem gik opgave beskrivelsen til projektet Style and experience var et af kravene til opgaven at vi skulle tage udgangspunkt i fire stilarter: Modernisme, popart, surrealisme og Dekonstruktivisme. Vi blev hurtigt enige om at Popart og jazz ville give en god balance til vores website (Det viste sig senere hen at være en fejl vurdering fra vores side). En kombination af modernisme og popart kom til at være vores færdige produkt. Popart Popart er en stilart som bruger stærke farver, let genkendelige elementer og symboler, poparten bliver ofte brugt i medieverden fordi den er så let genkendelig (reklamer, aviser. mm.) popart skal ikk være perfekt, det er mere om at få skabt et udtryg. Den figurative kunst, de stærke farver samt jazzens stemning ville give vores website et frisk pust til en musik genre som bliver betraget næsten død i mange ungemenneskers øjne. Stilarten "popart" ville også kunne give den simple symbolik og en let genkendelighed som vi gerne ville ramme med vores website. Vi ville gerne have at når websitet for "Odense vinterjazz" var færdigt ville effekten være at Poparten og jazz stemningen vække en intresse fra det yngre publikum. Samtidig ville vi gerne have en enkel stil, vi ville gerne have meget luft på vores website. Kombinationen af modernismens enkle stil og Popartens genkendelighed og farver, mener vi at vi fandt frem til en god løsning på et website det kunne tiltrække det yngre publikum til Odense vinterjazz. Navn på rapport 7
KiSS: Keep it simple, Stupid! Websitet for Odense vinter jazz bygger på stilarterne modernisme og popart, men design principet KISS holder godt fast i den. KISS prencipet går ud på at lave det så simpelt at alle kan forstå det der forgår. Det første man møder på sitet er en Mand der spiller på trompet, og selvfølgelig logoet (Odense vinter jazz). Samtidig med at det skal være let at forstå at det er Odense vinter jazz det handler om, prøver vi også og vække en intresse for det publikum som ser websitet. Forbrugeren skulle jo gerne blive så interesseret de prøver at møde op til en koncert. Den måde vi prøver og holde bruger fast med er meget ny, vi arbejder ikke kun i et lag på denne hjemme side. Så når brugeren kigger ned at websitet, ændre billede sig og deres opfattelse bliver konstant testet. Den konstante ændring får hele tiden nye ting i fokus! Eftersom denne form for websites er meget nye gør det også at brugerne vil huske den oplevelse de havde første gang de besøgte hjemmesiden og mund til mund metoden vil sansynligvis blive brugt. Dette sender endnu flere ind på vores hjemmeside og flere ville få en interesse for Odense vinter jazz's koncerter. Interaktion I dette kapitel vil vi gennemgå hvilke teknologier samt værktøjer, der blev benyttet. Redegøre for valg vi tog igennem hele processen. Derudover vil vi vise et strukturdiagram og wireframe med tilhørende forklaringer, som kort beskriver opbygningen af siden. Afslutningsvis vil vi uddrage nogle kodeeksempler og forklare disse. Navn på rapport 8
Analyse Vi valgte fra starten udelukkende at fokusere på HTML, CSS samt JS og ekskludere Adobe Flash. Man kan lave smukke websider kun i Flash, men set i lyset af at Adobe for nyligt har stoppet al udvikling af Flash til mobile enheder 1 (som browserplugin) og at der er flere mobile webbrugere end IE6 og IE7 brugere tilsammen 2 virker det naturligt at satse på noget der virker bredest muligt. I stedet for at lave en traditionel opbygget side med en masse menupunkter, besluttede vi tidligt i forløbet at vi ville prøve at gøre oplevelsen på siden mere interaktiv og flydende uden at brugeren skal klikke sig frem og tilbage i en sidestruktur. Løsningen er én stor side med seks undersektioner i stedet for seks separate HTML-filer. Vi valgte at anvende parallax scrolling, som egentlig først vandt indpas i computerspil for flere årtier siden. Tanken med parallax scrolling er at brugeren får en illusion af dybde, da en webside (eller spil) består af flere lag, som bevæger sig i forskellig hastighed. HTML5 CSS3 JS Diagram over hvilke webteknologier vi vil benytte 1 Jobs Was Right: Adobe Abandons Mobile Flash, Backs HTML5 WIRED 9.11.2011 2 Browser Trends December 2011: Chrome Becomes the World s Second Favorite Browser Sitepoint 1.12.2011 Navn på rapport 9
Selvom ovenstående diagram viser at vi vil benytte forholdvis nye teknologier, såsom HTML5 og CSS3, der ikke er understøttet i alle browsere er det egentlig meget få ting vi gør brug af - se mere i kodeafsnittet. For at vise at siden også virker upåklageligt i ældre browsere (dog uden parallax effekten), har vi lavet både en HTML5-version og en HTML4-strict version. CSS3 benyttes meget sparsomt - vi bruger det faktisk kun til at lave en lille skygge under hver sektion - udelukkende en meget lille visuel detalje. Til Parallax funktionen (som er en tredjeparts jquery funktion) benytter vi den seneste version af jquery-biblioteket. Vi benyttede Espresso 2-editoren til Mac OS X, som netop er udkommet i en version 2. Den samler glimrende ens projektfiler og dens autocomplete funktioner er yderst hjælpsomme. Derudover kan man gemme snippets i Espresso, hvis man for eksempel hurtigt vil lave et HTML4-strict dokument eller indstille tegnsætningen. Sparer hurtigt nogle Google søgninger. Struktur/modellering Strukturdiagram, som viser hvordan siden er struktureret: Upcoming events Latest news About us Gallery Message Navn på rapport 10
Contact information Eksempel på wireframe: Navn på rapport 11
Realisering/kode Vi har valgt at fremhæve følgende kodeeksempler: <section id="intro" class="story" data-speed="4" data-type="background"> Læg mærke til at her benyttes elementet <section>, som logisk nok i HTML5 betyder at der er tale om en sektion. Èn af de store fordele ved HTML5 er netop at der er indført en masse nye tags, som gøre koden mere logisk - både hvis mennesker skulle have interesse i at skimte koden, men det bliver især en kæmpe fordel, når det får en lidt større udbredelse - især for søgemaskinerne. En masse div er på siden siger absolut intet om hvilket indhold, der er på siden. Nu kan man direkte angive om der er tale om en sektion, artikel, relateret indhold mm. En anden utrolig nyttig funktion der blev introduceret med HTML5 er dataattributten, som muliggør udvikleren at lave sine egne attributter direkte på HTMLelementet og ikke mindst aflæse dem i Javascript og faktisk også CSS3. Før var title-attributten anvendt bredt. Udover det praktiske problem at browseren, som standard vil vise en tooltip af indholdet i title, kan det hurtigt blive besværligt, hvis man gerne vil angive flere parametre til javascript koden. Man kan naturligvis adskille de forskellige data med et koma (som eksempel) og så bagefter adskille dem i Javascript. Udover at det er besværligt, kan det hurtigt blive tungt, hvis Javascript koden skal gennemgå mange elementer. Data-attributten er bare en pænere og nemmere løsning. Den anvendes i praksis i Parallax javascript koden her: $('[data-type]').each(function() {!! $(this).data('offsety',parseint($(this).attr('data-offsety')));! $(this).data('xposition', $(this).attr('data-xposition'));! $(this).data('speed', $(this).attr('data-speed')); }); Navn på rapport 12
Her gemmes offsety (fortæller hvor meget baggrundslaget skal forskydes i vertikal retning), Xposition (fortæller hvor meget baggrundlaget skal forskydes i horisontal retning) og speed (fortæller hvor hurtigt laget skal bevæge sig i relation til resten af dokumentet) - de er nu gemt som en slags variabler og kan hentes globalt i hele funktionen. Derudover vil vi gerne fremhæve et lille visuelt eksempel fra vores stylesheet. Yderst simpelt, men giver en stor visuel forskel: (Hver sektion har en forskellig baggrund og har derfor fået sit eget unikke ID, så kan de også bruges i URL-baren med hashtagget - derudover har hver sektion klassen story tilknyttet).story {! (..)! -webkit-box-shadow: 0px -50px 50px -50px rgba(0,0,0,0.2) inset;! -moz-box-shadow: 0px -50px 50px -50px rgba(0,0,0,0.2) inset;! box-shadow: 0px -50px 50px -50px rgba(0,0,0,0.2) inset; } #news {! border-bottom: 2px ridge #4644A4;! (..) } I den.story laver vi en inset skygge, som kun placeres i bunden - hverken i toppen eller siderne - det kan gøres ved at tilføje en fjerde, negativ offset-værdi. Positiv hvis den skal placeres i toppen. Hver sektion får en bundkant med en bredde på 2px og den specielle ridge effekt anvendes, så kanten får en svag hentydning af dybde. Farven angives til at være den samme som baggrundsfarven på sektionen. Navn på rapport 13
Effekten giver en pæn og elegant overgang mellem de forskellige sektioner: Konklusion Vi kan konkludere at med en interaktivt parallax dybdeeffekt integreret på vores site henvender sig til en ung målgruppe af kreative mennesker, der ønsker noget simpelt og anderledes. Med vores modernistiske popart-stil kan vi få de unge interesseret i jazz og deltage i diverse jazz events. Ressourcer Behind The Scenes Of Nike Better World Smashing Magazine 12.7.2011: http:// coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-betterworld/ Jobs Was Right: Adobe Abandons Mobile Flash, Backs HTML5 WIRED 9.11.2011: http://www.wired.com/gadgetlab/2011/11/adobe-kills-mobile-flash/ Browser Trends December 2011: Chrome Becomes the World s Second Favorite Browser Sitepoint 1.12.2011: http://www.sitepoint.com/browser-trendsdecember-2011/ Navn på rapport 14
Gallup Kompas: http://www.gallup.dk/vores-markedsfokus/medier/printmedier/ gallupkompas/kompas-segmenter.aspx Navn på rapport 15