Projektplan Grupp 10 - Gather Your Heroes Sodertorns Hogskola IMD HT13 Medieteknik A Interaktiva medier / Publicering via internet 8 Januari 2014 Isabelle Borgkvist isabelle01.borgkvist@student.sh.se Magnus Ulenius magnus.ulenius@gmail.com Axel Jonsson axel.jonsson@live.com Lovisa Lindstrom lovisa_lindstrom@hotmail.com 1 (9)
Innehåll 1. Inledning...3 1.1 Bakgrund och syfte...3 1.2 Webbadress och domännamn...3 1.3 Uppdelning av arbetet...3 1.4 Målgrupp...3 2. Genomförande...4 2.1 Idé, analys och prototyp...4 2.2 Lista på insticksprogram och andra funktioner...4 3. Slutsatser...6 3.1 Blev det som vi tänkt utifrån vår ursprungliga projektplan?...6 3.2 Förslag på meta-märkning...7 3.3 Individuella reflektioner...7 4. Källor och referenser...9 2 (9)
1. Inledning 1.1 Bakgrund och syfte Detta projekt har utförts av studenter på IMD-programmet på Södertörns Högskola. Projektet har gått ut på att skapa en webbpresentation/webbplats med CMS-verktyget 1 WordPress. Arbetet har utförts i grupp och ett krav som fanns för projektet var att använda ett förinstallerat blankt WordPress-tema, alltså ett tema helt utan CSS-kod som påverkar utseendet. Vi har sedan kodat webbsidans struktur och stil utifrån de kunskaper vi fått under kursen Medieteknik A, bland annat i CSS3 och HTML5. För de olika funktionerna har vi använt insticksprogram i WordPress och i viss mån även PHP-kodning. Vårt projekt grundades i att vi fick upp ögonen för metalcorebandet Gather Your Heroes och att de saknade både en hemsida och en enhetlig grafisk profil. Flera av oss i projektgruppen har erfarenhet av att spela i band och vi var överens om att ett problem med en bandhemsida är att ett band ofta saknar tid att uppdatera en sida. Vi märkte att Gather Your Heroes ändå är relativt aktiva online, bland annat på Facebook, Twitter och Instagram. Utifrån de förutsättningarna kom vi överens om att GYH's sida ska vara en plattform för all deras aktivitet online, där alla statusar, tweets och poster samlas på ett ställe och presenteras enhetligt. Allt detta skulle ske utan att bandet själva skulle behöva öka sin aktivitet. Allt innehåll på sidan, både fotografier och texter, har Gather Your Heroes tillhandahållit. Logotypen och ikonerna för sociala medier har vi själva tagit fram. 1.2 Webbadress och domännamn En lämplig webbadress för hemsidan skulle kunna vara bandets förkortning GYH, men detta är tyvärr redan upptaget med de vanligaste toppdomänen, därför valde vi att använda hela namnet gatheryourheroes som finns tillgängligt med både.com och.se. Just nu ligger sidan på http://www.wptest.thebirdsnest.se/ 1.3 Uppdelning av arbetet Vi har arbetat som ett team under hela arbetets gång, och vi har tagit alla beslut gemensamt. För att kunna arbeta effektivt har vi haft dagliga SCRUM-möten 2 där vi fördelat arbetsuppgifter och stämt av vad som gjorts sedan det senaste mötet. I den första kodningsprocessen valde vi att dela upp arbetet två och två. Eftersom vi hade tydliga statiska skisser för hur varje sida skulle se ut, och för att effektivisera arbetet, arbetade Isabelle och Lovisa med det, medan Axel och Magnus testade olika insticksprogram och hittade lösningar för de olika funktionerna. 1.4 Målgrupp Vi tog fram tre personas när vi utvecklade hemsidan. Denna metod med påhittade karaktärer som potentiella användare hjälper oss bland annat med att produktionen anpassas efter vår specifika målgrupp och att vi inom teamet arbetar mot samma mål. 3 Mer information finns i projektplanen. 1 CMS Content Management System övers: Innehållshanteringssystem. Ett verktyg för att organisera och publicera innehåll för en webbsida. Föreläsning CMS/WordPress med Emmi Gereb 2013-12-09. Delkurs: Publicering via internet/interaktiva medier, Medieteknik A HT-13. 2 SCRUM-metoden - https://www.scrum.org/resources/what-is-scrum 2014-01-07 Föreläsning Projekthantering med Jon Manker 2013-10-18. Delkurs: Grafisk design, Medieteknik A, Södertörns högskola HT-13. 3 Seminarium 1, 2013-09-06 i delkursen Introduktion till medieteknik, Medieteknik A, Södertörns högskola HT-13. 3 (9)
2. Genomförande 2.1 Idé, analys och prototyp Vi började med att analysera tre andra metalcore-bands hemsidor: Degreed med 1 300 fans på Facebook, Mary Fay med 4 500 och Dead By April med cirka 400 000 fans. Trots skillnaden i publik tyckte vi att sidorna var ganska lika varandra. Bland annat tyckte vi att de kändes slarviga med ogenomtänkt struktur och innehåll. Utifrån analysarbetet fick vi en mycket klarare bild av hur vi ville att vår sida skulle se ut och fungera. Vi fick också större kunskap och idéer om vilka olika funktioner och egenskaper som oftast finns på bandwebbplatser. Vi gick vidare med att bygga upp en struktur för hemsidan och ritade ett preliminärt webbplats-träd för att få en bättre översikt. Detta använde vi sedan för att bygga en pappersprototyp vilken vi under ett seminarium i skolan fick chans att användartesta på flera testpersoner. Med den respons vi fick från prototypningen ändrade vi på några små detaljer, bland annat namnen på de olika sidorna och hur de presenteras i huvudmenyn. Vi fortsatte sedan med att ta fram en grafisk profil, logotyp, en färgpalett och olika typsnitt som vi ville använda oss av. Vi började också arbeta fram mer detaljerade skisser av hur varje sida skulle se ut. Dessa bilder använde vi också för att framställa en digital, klickbar prototyp som vi fick opponering på i klassen. När vi hade tydliga skisser för varje sida och hade fått respons från opponenterna på vårt arbete började vi skriva CSS-kod för sidan. Parallellt letade vi bland och testade många olika insticksprogram för de funktioner som sidan ska innehålla. Vi testade dessa på separata wordpressinstallatione vilket gjorde att vi kunde effektivisera arbetet och låta jobbet med grundstrukturen fortsätta utan avbrott. När vi hittat insticksprogram som passade oss kunde vi enkelt installera och konfigurera de på huvuddomänen. Under det fortsatta arbetet varvade vi tester av funktioner, navigering och utseende med små ändringar i källkoden och detaljarbete. Vi testade själva kontinuerligt hur allting fungerade och på flera utomstående testpersoner. När produktionen i stort sett var färdigställd lade vi till CSS-kod för olika media-queries, som dynamiskt anpassar webbsidan för olika skärmstorlekar. Vi hade kunnat lösa detta problem genom att hitta ett insticksprogram där hela sidan konverteras till en mobilversion, men vi valde att göra på det här sättet eftersom vi ville undvika att webbsidan skulle förlora några funktioner eller element. 2.2 Lista på insticksprogram och andra funktioner Latest news -funktionen på Homesidan Vi valde att flytta Wordpress inbyggda blogg-funktion från startsidan till en egen sida, kallad News archive. På förstasidan ville vi istället presentera en lista med de tre senaste artiklarna från bloggen, kallad Latest news. För att göra detta var vi tvungna att definiera en ny funktion, kallad the_excerpt(). Den skapar ett kortare utdrag av en bloggpost i databasen, som sedan skrivs ut ett bestämt antal gånger (i vårt fall tre). Denna funktion är definieras i filen functions.php, och koden för att skriva ut posterna ligger i en anpassad template-fil, kallad page-blog.php, som i sin tur är kopplad till Home -sidan. 4 4 http://digwp.com/2013/01/display-blog-posts-on-page-with-navigation/ 2013-12-03 4 (9)
Contact Form 7 Ett enkelt tillägg för att skapa och anpassa utseendet för olika kontaktformulär. Custom sidebars Skapar nya mallar (template-filer) vilka gör det möjligt att ha flera sidofält som kan presenteras på olika sidor. FancyBox for WordPress Insticksprogram som möjliggör förhandsvisning av bilder i en pop-up funktion, precis som lightbox -funktionen i JavaScript. Vi valde detta program för att det tillät oss att lägga till en bildtext för varje bild. GlobalFeed Kopplar ihop en Facebookprofil, -sida eller -grupp med WordPress installationen. Detta gör att poster som publicerats i Facebooks gränssnitt dyker upp i vårt bloggflöde automatiskt. Iframe widget Detta tillägg var det enda vi kunde hitta som får Spotify-spelaren att fungera i sidofältet. Instapress Ett mycket anpassningsbart och dynamiskt Instagram-galleri. Passade oss utmärkt då vi kunde använda samma tillägg både för de rullande Instagrambilderna i sidofältet och för Instagramgalleriet. NextGEN Gallery Det här insticksprogrammet valde vi att använda till Press photos -galleriet. Rotating Tweets Tillägg som ger en fullt anpassningsbar widget i WordPress med inbäddade och roterande tweets. Används både för GYH's eget Twitterkonto, och för hashtaggen #gyhband. Tour Dates Band in Town's eget insticksprogram som vi använt för att visa kommande och tidigare spelningar i en ruta i sidofältet på Press -sidan. WP-filebase Detta insticksprogram visade sig inte ha lösenordsskydd för nedladdningar i gratisversionen, vilket var något vi planerat att ha för presskitet så att inte vem som helst kan komma åt det utan en aktiv fråga till bandet. Vi upptäckte detta för sent i projektet vilket gjorde att vi inte kunde åtgärda det i tid för inlämning. Youtube Channel Gallery Ett anpassningsbart galleri kopplat till en Youtube-kanal. 5 (9)
3. Slutsatser 3.1 Blev det som vi tänkt utifrån vår ursprungliga projektplan? Vi har i stort sett lyckats genomföra och bygga hemsidan utifrån vår ursprungliga planering. Vi tror att vårt grundliga förarbete, med konkurrentanalys, prototypframställning och -testning, grafisk profil, webbplats-träd och tydliga skisser på sidorna innan vi satte igång med själva kodandet, underlättade resten av arbetet. Ett av de största problemen vi stötte på var att vi inte hittade något insticksprogram för ett mediagalleri som fungerade som vi ville, vi var då tvungna att tänka om. Istället för att ha en undermeny i form av tumnaglar som visade de tre senaste bilderna, albumen etc. så fick vi skapa en meny som länkade till undersidor med respektive media. Här valde vi att placera undermenyn som flikar till höger om sidans titel, för tydlighetens skull. Vi valde också att Media gallery -länken i huvudmenyn går direkt till Instagram-fliken, och att man själv får navigera sig vidare till de andra medierna. Under opponeringen på vårt arbete blev vi tipsade om att ett bildgalleri för pressfotografier eller andra högupplösta bilder borde finnas med, då ett automatiskt Instagram-flöde kan bli otillräckligt för bandet. Vi valde därför att lägga till ett insticksprogram för ytterligare ett galleri, vilket inte var några problem att lägga in som en ny flik och undersida till mediagalleriet, Press photos. Då detta galleri innehåller pressfoton, vilka inte uppdateras lika ofta som Instagram-bilder, gör det ingenting att detta uppdateras på ett för bandet helt nytt sätt, via WordPress. Något annat som skiljer sig från vår ursprungliga prototyp är den rullande On tour-knappen i vår navigation. Från början hade vi tänkt visa enbart nästa spelning och när man klickade där skulle man komma till en undersida för kommande och tidigare spelningar. Denna funktion skulle självklart även denna uppdateras automatiskt, och istället löste vi det så att informationen hämtas dynamiskt från den externa applikationen Bands in Town, som används för just live-spelningar och marknadsföringen av dem. Den rullande animationen av texten tyckte vi också passade ändamålet, då den drar ögonen till sig. Vi hade planerat att ha Spotify-spelaren i footern på sidan, på grund av och i hopp om att man på något sätt skulle kunna få footern att inte ladda om när man navigerar runt på sidan och på så sätt stoppa spelaren. Vi upptäckte att den webbspelare som spotify tillhandahåller spelar upp låtarna i en lokalt installerad Spotify-applikation, och sedan länkar det till webbspelaren. Detta löste problemet med att uppspelningen stoppas vid navigering, oavsett var vi placerar den på sidan. Vi kunde därför göra spelaren synligare och placera den överst i sidofältet istället. Då vi använt många insticksprogram och flera av dessa hämtar information från olika externa databaser som inte finns på vår server, tar sidan tid att ladda. Att sidan skulle vara optimerad och laddas snabbt hade vi planerat, men det fick prioriteras bort i förmån till andra funktioner. Hade vi haft mer tid till projektet är detta något vi hade arbetat vidare med. Det vi kunde göra för att optimera sidan för användare med mobil uppkoppling var bland annat att plocka bort jquery-script för de specifika delarna. En av de viktigaste funktionerna i produktionen var integrationen med GYH's Facebooksida. Vi ville att de poster som publiceras på Facebook automatiskt skulle presenteras i samma flöden som bloggposterna på webbsidan. Vi löste detta med insticksprogrammet GlobalFeed, vilken fungerar i stort sett felfritt under News archive -sidan. Däremot har vi inte hittat en lösning på hur vi kan generera Facebook-poster till förstasidan i Latest news -flödet. Det verkar som att GlobalFeed endast genererar Facebookposterna i flödet, medan vi under Latest news hämtar utdrag från webbplatsens egen databas. Vår teori är således att om GlobalFeed skrivit posterna till databasen hade vår Latest news -funktion snappat upp även dessa och skrivit ut dem på förstasidan. 6 (9)
Vi märkte för sent att vi inte hade någon kontroll över titlarna som visas i webbläsarfönstret för varje sida. Dessa presenteras väldigt osammanhängande och vi har inte haft tid att ändra dessa. Sidans responsivitet är inte fullständigt optimerad. Tillexempel valde vi att plocka bort sidofältet för de mindre skärmstorlekarna bland annat eftersom Spotify, Instagram och Twitter blir överflödiga som inbäddade då de öppnas som en lokalt installerad applikation på mobila enheter. Eftersom länkar till dessa finns i footern på sidan försvann inga funktioner på grund av detta. WordPress inbyggda navigering till olika kategorier, månadsarkiv och sökruta på News archive är det enda vi inte har hunnit lösa för mobilversionen. 3.2 Förslag på meta-märkning Om våran sida hade varit en riktig produktion hade vi optimerat hur sidan indexeras av olika sökmotorer. Vi hade då lagt till dessa meta-taggar i källkoden: <meta name="description" content="gather Your Heroes is a metalcore band from Sweden. Find our latest news, gigs and music. Don't forget to follow us today!"> <meta name="keywords" content="gather Your Heroes, GYH, music, sweden, metal, metalcore, band"> 3.3 Individuella reflektioner Axel: Det mål jag hade satt upp för det här projektet var att lära mig hur en webbapplikation/-sida skapas från grunden med allt vad det innebär. Jag känner mig nöjd och anser att jag uppnått mitt mål, till stor del eftersom vi i under förarbetet brainstormade förutsättningslöst runt funktioner och innehåll för sidan. Vi gick in med inställningen att Allt går att lösa, utan att någon av oss hade särskilt stor koll på vad WordPress tillåter för funktioner och vilka insticksprogram som finns. Trots det har vi ändå lyckats utveckla en webbsida som till stor del är precis det vi planerade, bortsett från vissa små kompromisser. En av de utmaningar jag stötte på under arbetet var hur vi automatiskt skulle få tre bloggposter att skrivas ut på förstasidan. Eftersom jag tidigare pluggat en grundkurs i PHP och MySQL förstod jag att denna funktion skulle gå att lösa genom en anpassad funktion och olika variabler. Genom att googla, leta och testa fick jag det till slut att fungera som vi ville. Jag hade liknande tankar om hur vi skulle kunna lösa integreringen med Facebook i blogg-flödet. Detta visade sig vara svårare än så eftersom Facebooks API kräver att man skapar en lokal applikation för att kunna hämta information ur dess databas. Efter många försök med olika insticksprogram och andra lösningar fick jag det till slut att fungera, dock med bortfall av vissa rubriker och videos som är postade direkt i Facebooks gränssnitt etc. Isabelle: Mitt mål med projektet var att lära mig mer om hur man kodar en hemsida i ett innehållshanteringssystem, i det här fallet WordPress. Jag ville bli bättre på HTML och CSS, samt förstå grunderna i php. Jag ville också lära mig hur man integrerar sociala medier på ett snyggt sätt på en hemsida, enligt en grafisk profil. I början av projektet arbetade jag väldigt mycket med att lägga grunden till hemsidan i CSS:en. I och med att vi hade en valt en design som skiljde sig något från wordpresstemats grundstruktur så var jag även inne i PHP-filerna för att skapa nya divar. Detta bidrog till att jag fick en del förståelse för hur PHP. fungerar. En stor del av vårt projekt var att integrera sociala medier på hemsidan, det här gjorde vi bland annat för att göra det lättare för bandet att administrera den. Jag har inte haft huvudansvaret för att hitta insticksprogram för de sociala medierna, men jag har letat upp andra insticksprogram och lärt mig hur man installerar och stylar dessa. 7 (9)
Jag har även agerat som produktägare * och skött all kontakt med bandet. Jag har sett till att det som bandet vill ha med på hemsidan också har hamnat där. Jag har ordnat ett visuellt styrdokument för att bandet i fortsättningen skall kunna använda sin nya grafiska profil. Sedan har jag satt ihop ett presskit till bandet med logotyp, bilder, musik och en biografi, detta finns att ladda ner på hemsidan. Över lag tycker jag att jag har fått en bra förståelse för hur man arbetar med ett innehållshanteringssystem utifrån ett tema utan kläder. Lovisa: Mitt främsta mål var att bli bättre på att programmera och jag har mestadels arbetat med CSS. Jag var med och programmerade grunden i CSS och har haft huvudansvar för att göra sidan responsiv med hjälp av media queries. Jag har också varit inne i PHP:n för att anpassa den efter vår sidas upplägg och lagt till div:ar och id:n. Allt jag kunde om kodning innan projektet startade lärde jag mig under arbetet med övningswebbplatsen. Eftersom den här sidan på många sätt är mycket mer avancerad än övningswebbplatsen har det för min del gått åt mycket tid och kraft till att förstå hur sidan är uppbyggd och hänger ihop med alla insticksprogram och PHP-kodning. Det är först under arbetet med media queries som jag verkligen börjat förstå hemsidan som helhet och fått en överblick över hur allt hänger ihop. Jag gjorde även utkasten till de två flashbanners som ska inkluderas i uppgiften. Eftersom flash är helt nytt för mig tog det väldigt lång tid och det bidrog till att jag delvis kom efter i kodningen av sidan, sett såhär i efterhand lite i onödan eftersom dessa banners arbetats om från grunden. Jag har dock i det stora hela fått betydligt större kunskaper om CSS och hur man jobbar i ett CMSsystem, samt förstår bättre vikten av att i ett tidigt skede analysera och planera för hur en hemsida ska utformas. Magnus: Under projektets gång har jag agerat projektledare. Arbetet har gått ut på att leda gruppen och koordinera arbetet så att ingen sitter sysslolös. Mitt mål har varit att effektivt utnyttja tiden då tidsramen har varit knapp. Inledningsvis på projektet arbetade jag mycket med att integrera insticksprogrammen och att modifiera dessa för att passa sidans tema. Detta på en separat webbplats för att ge utrymme för vidare arbete i produktionsmiljön. När insticksprogrammen var klara och konfigurerade migrerades dessa över till produktionssidan. Arbetet med insticksprogrammen blev större än väntat då både Twitter och Instagram har gjort om sitt API (Application Programming Interface) och nu kräver att det skapas en lokal applikation under bandets konto på respektive sidor för att kunna hämta data därifrån. Under projektet har jag fått en bättre förståelse för Wordpress, dess uppbyggnad och användningsområde/möjligheter. Min största personliga milstolpe är dock inom programmering. Insticksprogrammet Instapress är markerat som "not compatible", men efter flera timmars letande på sidan GitHub lyckades jag återuppliva modulen via php-programmering. Även Javascriptet som gråar ut länkarna för de sociala medierna gav oss lite problem, då detta var aktivt slutade samtliga insticksprogram att fungera. Problemet löstes genom att isolera Jquery inom själva scriptet. För att avaktivera scriptet på mobilversionerna användes en enkel if-sats där skärmens bredd kontrolleras. * En roll i SCRUM-metoden. 8 (9)
4. Källor och referenser 1. Föreläsning CMS/WordPress med Emmi Gereb 2013-12-09. Delkurs: Publicering via internet/interaktiva medier, Medieteknik A HT-13. 2. Föreläsning Projekthantering med Jon Manker 2013-10-18. Delkurs: Grafisk design, Medieteknik A, Södertörns högskola HT-13. 3. Seminarium 1, 2013-09-06 i delkursen Introduktion till medieteknik, Medieteknik A, Södertörns högskola HT-13 4. http://digwp.com/2013/01/display-blog-posts-on-page-with-navigation/ 2013-12-03 9 (9)