Rapport Epaper. 1DV411, Webbprojekt I. Författare och termin: Joar Leth Frida Källberg Johan Sundén Mikael Östman VT13

Transkript

1 Rapport Epaper 1DV411, Webbprojekt I Författare och termin: Joar Leth Frida Källberg Johan Sundén Mikael Östman VT13 1

2 1. Sammanfattning Epaper är en webbaserad applikation för e tidningspublikation. Tack vare att den använder sig av moderna tekniker så möjliggör den presentation av e tidningar med den ursprungliga layouten fullt bibehållen i en stor bredd av dagens enheter. Med visionen av att Epaper ska bli det mest använda systemet för presentation av e tidningar i Sverige så kommer utvecklingen att fortsätta efter detta projekt. 2

3 Innehållsförteckning 1 Sammanfattning Bakgrund Syfte och mål Projektorganisation Genomförande Metodik Inception Elaboration Construction Transition Teknik Resultatbeskrivning/måluppfyllelse Handledning/Kontakt med kund Grupparbete Tidsplan/iteration Applikationen Avvikelser/efterkalkyl Slutsats Vidareutveckling Förslag till förbättringar inför kommande projekt Bilagor Skärmdumpar Artikelvy i landskapsläge Artikelvy i porträttläge Sidöversikt med sökfält utfällt Läsläge i porträttvy

4 2. Bakgrund Bakgrunden till projektet kommer ifrån att de system som finns för att presentera e tidningar i dagsläget antingen är dyra, eller inte tillhandahåller de funktioner som efterfrågas. Vi fick därför i uppdrag av Infomaker Scandinavia AB att ta fram en tjänst som på ett bättre sätt uppfyller tidningarnas behov och läsarnas önskemål. Fokus skulle främst ligga på mobila enheter, som exempelvis Ipad och andra surfplattor. Under projektets gång har visionen om att kunna stödja en större brädd av plattformar, såsom desktop, växt fram. 4

5 3. Syfte och mål Målet med Epaper är att utveckla ett Proof of Concept på en modern webbapplikation som automatiskt kan hämta tidningsmaterial och presentera det i e tidningsformat. För att på så sätt erbjuda tidningsföretag en tjänst som inte orsakar mer arbete utan underlättar deras nuvarande arbetsflöde. 4. Projektorganisation Vi bestämde redan från början av projektet att vi skulle ha kundmöte varje vecka, så att det skulle kunna bli så få missförstånd som möjligt, och för att hålla kunden så delaktig som möjligt. Detta kändes extra viktigt med tanke på den relativt korta tiden för projektet. Alla i gruppen tog ansvar för e postkontakten med kunden istället för att ha endast en person som hade det ansvaret. All e post skulle skickas vidare till alla gruppens medlemmar. Själva organisationen inom gruppen, arbetsfördelningen och mötena fungerade bra under hela projektets gång. Med hjälp av morgonmöten inom gruppen hade alla koll på vilka uppgifter som skulle utföras samt vem som fick ansvaret för att se till att de genomfördes. Vi tilldelade även var och en i gruppen huvudansvaret för ett visst område i början av projektet. Se Fig 1 för en visualisering av projektorganisationen. Fig 1. Bild över projektorganisationen. 5

6 5. Genomförande 5.1. Metodik I enlighet med Unified Process har arbetet delats in i fyra faser; inception, elaboration, construction och transition. Arbetet har delats in i veckolånga iterationer. Varje iteration har inletts med handledarmöte på måndagen. Med vissa undantag hölls möte med uppdragsgivaren varje torsdag. Under dessa möten skedde veckoleveransen för att hålla uppdragsgivaren uppdaterad på arbetets gång Inception Under den inledande fasen lades fokus på att utvärdera potentiella tekniker. Den viktigaste frågan var vilken teknik som skulle användas för att presentera en sida i tidningen. Kravet var att det skulle gå att konvertera från Adobe Indesign dokument till det format som skulle användas i applikationen. Till en början var planen att använda PDF, vilket hade fördelen att det enkelt kunde exporteras från Indesign. På grund av svårigheter med att presentera PDF dokument i en webbapplikation gick undersökte vi möjligheten att använda SVG istället. Det finns i nuläget ingen funktionalitet för att exportera till SVG från Indesign, men det visade sig att det finns tillägg ( som sköter om detta. Javascript ramverk utvärderades med målet att få en bra grund att bygga applikationen på. Lite inledande arbete gjordes i EmberJS men efter en del testande ersattes detta av BackboneJS, eftersom Ember visade sig vara för ungt och instabilt Elaboration I samband med att elaboration fasen inleddes hade vi genomfört tillräckligt med förberedande undersökningar för att kunna fastställa de viktigaste teknikerna. Tidningens sidor skulle visas med SVG och applikationen skulle byggas med hjälp av BackboneJS. Under elaboration fasens sista möte med uppdragsgivaren kunde vi sedan visa upp en prototyp på en applikation som började bli ganska stabil och visuellt tilltalande. Uppdragsgivaren var nöjd med att se början till en mer komplett applikation och i och med detta passade det bra att gå över till Construction fasen enligt den övergripande tidsplanen. 6

7 Construction När construction fasen inleddes fortsatte arbetet med applikationens funktionalitet och utförande och vi började också lyfta in koden i Phonegap för att kunna paketera den som applikation för IOS samt Android. Målet med detta var att få bättre tillgång till enheternas lagringsmöjligheter för att tillåta läsning offline. I slutet av andra veckan av denna fas fick vi en mockup av uppdragsgivaren som innebar ett ändrat design och interaktionsmässigt upplägg samt beskrivning av ytterligare funktionalitet. Det fanns också en ändrad inriktning för projektet vad gäller de plattformar som skall stödjas. Till en början var fokuset på att applikationen skulle anpassas för Ipad och eventuellt motsvarande Android enheter. Det nya målet var att applikationen även skulle stödja desktop enheter. Detta gjorde att stora delar av kodbasen behövde ses över och omarbetas, något som man normalt vill undvika såpass nära slutet av ett projekt. Eftersom huvudsakliga målet med detta projekt var att utveckla ett Proof of Concept och bana väg for vidare utveckling av applikationen gjordes dock bedömningen att detta inte utgjorde ett problem för projektet. Eftersom det tillkommit mycket nytt som skulle implementeras lades arbetet med att implementera offline läge i applikationen för de mobila enheterna på is. Det visade sig också att det fanns ett viktigt högrisk problem som behövde lösas, nämligen implementation av zoomfunktionalitet för artiklar. Eftersom webbläsares inbyggda funktionalitet för detta inte går att styra till enskilda delar av sidan var vi tvungna att hitta andra lösningar på zoomning. Ett stort problem med zoomlösningar är att de antingen blir hackiga eller zoomar utifrån det som är utrenderat, vilket gör att text blir pixlig vid inzoomning. Arbete med att försöka kombinera dessa lösningar, så att den blir pixligt medan man zoomar, och sedan klart när man slutat zooma har inletts. Mycket fokus har lagts på detta eftersom zoomning på artiklar är ett viktigt krav från uppdragsgivarens sida, och eftersom det verkar svårt att lösa på ett sätt där appkänslan bibehålls trots att det sker i form av en webbapplikation. För att göra det möjligt att lägga ner mycket jobb på att undersöka och utvärdera olika metoder för zoomning utan att detta påverkar applikationen i övrigt har denna del lyfts ut ur applikationen. I 7

8 applikationen har artikelvisningen därför temporärt ersatts av bilder istället för SVG, i väntan på att en bättre lösning för artikelvisningen arbetas fram Transition Under transition fasen skedde en presentation av projektet och en demo av applikationen. Denna demo använde sig av bilder istället för SVG, eftersom artikelvisningen med hjälp av SVG lyfts ut ur applikationen tillfälligt, och bedömningen gjordes att det var bättre att visa upp en väl fungerande applikation där artiklarna presenteras som bilder än att lyfta in SVG i applikationen enbart för demons skull, då detta inte skulle göra någon visuell skillnad och problem med SVG zoomning gjort att det lämpat sig bättre att fortsätta utvecklingen av den delen utanför applikationen. Sett från den ursprungliga utgångspunkten, att under projektet utveckla ett Proof of Concept för hur e tidningar kan presenteras i en webbapplikation, kan projektet ses som lyckat även om den slutliga applikationen är långt ifrån färdig. Detta är dock inte ett problem eftersom målet redan tidigt varit att fortsätta utveckla applikationen på allvar efter det att tekniker och möjligheter tagits upp och utvärderats i syfte att komma fram till vad som är möjligt att åstadkomma inom ramen för en webbapplikation Teknik För att bygga upp applikationen och få den att fungera på så många enheter som möjligt har vi använt oss av Javascript. Som en hjälp i att strukturera upp Javascriptkoden använde vi oss av ramverket BackboneJS. Tillsammans med uppdragsgivaren och efter en tids testande kom vi fram till att applikationens tidningsartiklar skulle vara i formatet SVG då detta, till skillnad från exempelvis PDF, är ett format som stöds av de moderna webbläsarna. Versionshantering har skötts via Github för att på ett enkelt sätt kunna arbeta tillsammans och dela bland annat dokumentationsfiler, kod och länkar. Projektgruppen har oftast jobbat på plats tillsammans. De gånger gruppen har jobbat på distans har kommunikationen skötts via först och främst Facebook för att dela med oss av mindre tankar och nya implementationer. Sedan har även Google Hangout använts för att enkelt kunna dela skärm och prata med varandra i längre möten. 8

9 6. Resultatbeskrivning/måluppfyllelse 6.1 Handledning/Kontakt med kund Vår kontakt och kommunikation med vår kund har under hela projektet varit bra, med ett möte varje vecka för att visa hur långt vi kommit och diskutera vad som skulle göras härnäst. På detta sättet kunde vi undvika komplikationer med missförstånd mellan båda parter. Utöver mötena har mycket kontakt skett via e post och kunden har visat ett stort intresse och engagemang för projektet Grupparbete Samarbetet inom gruppen har fungerat bra, det har inte varit några kommunikations eller samarbetssvårigheter, då alla varit överens om vad som måste göras, och tagit sitt ansvar för att saker och ting ska bli genomförda, vare sig det är uppgifter till applikationen eller möte med kund Tidsplan/iteration Tidsplanen har följts bra och arbetet har varit jämnt utspritt över iterationerna. Då vi mitt i projektet fick en mockup att gå efter vilket medförde mycket ändringar i applikationen fick även tidsplanen ändras och mycket arbete börjas om. Eftersom huvudsyftet med projektet var att komma fram till vad som är möjligt att åstadkomma i form av en webbapplikation för att presentera e tidningar, och ge en bra grund för fortsatt arbete efter detta projakt sågs detta dock inte som ett problem Applikationen Applikationens mål var att få fram ett Proof of Concept på en tidningsapplikation. Då projektet har lett till både detta samt en fungerande början på applikationen har projektet lyckats väldigt bra. Applikationen har fått grundfunktioner för att välja en tidning, bläddra mellan artiklar, få en sidöversikt samt kunna läsa artiklar i ett läsläge vilket har varit några större krav på applikationen. Zoomning av artiklar samt bildspel har även påbörjats och kommit en god bit på väg. 9

10 7. Avvikelser/efterkalkyl Under projektet tillkom det idéer både för funktionalitet men även för hur applikationen skulle utformas. När projektet inleddes hade en gemensam vision med kunden tagits fram vilken bestod av att vi skulle utveckla ett Proof of Concept som skulle fungera väl för Ipad och visa på applikationens potential. Under projektets gång ändrades detta till att istället utveckla en körbar demo och vi blev också tillhandahållna en mockup att utforma applikationen efter. Därmed tillkom ny funktionalitet och nya krav. Nu blev det även aktuellt att applikationen skulle vara kompatibel med en större bredd av enheter och detta gjorde oss tvungna att arbeta om stora delar av den redan utvecklade mjukvaran. 8. Slutsats Vi är nöjda med vårt arbete då vi har kommit fram till ett Proof of Concept och samtidigt även fått igång en bra början på en fungerande applikation. Kontakten med uppdragsgivaren har fungerat utmärkt. Möten har hållits kontinuerligt med givande samtal där vi levererat och fått respons samt uppdateringar på läget. Uppdragsgivaren har i princip hela tiden varit öppen för det mesta när det gäller genomförandet men samtidigt haft klara mål att sträva efter, vilket har underlättat mycket. Om vi undrat något utöver våra möten har e postkontakt fungerat väldigt bra då vår uppdragsgivare alltid svarat snabbt och visat stort intresse för arbetet. Kommunikationen i gruppen har fungerat bra. Vi har träffats på utsatta tider på plats varje vardagsmorgon och jobbat tillsammans under dagen. Distanskommunikationen har skett på kvällar för de som haft tid och velat diskutera samt koda lite extra. Iterationsmöten har också hållits med jämna mellanrum och efter behov. Vi har då gått till ett mötesrum och lämnat kodningen för en stund, för att försöka hålla en gemensam vision, diskutera målet med veckans iteration samt försöka se till att alla jobbat med relevanta uppgifter utan att arbetet överlappar någon annans i onödan. Överlag är vi jättenöjd med hela detta projekt och fortsättningen kommer att bli riktigt intressant. 10

11 9. Vidareutveckling Delar av projektmedlemmarna kommer att fortsätta med applikationen i form av examensarbete. Första delmålet med det fortsatta arbetet är att applikationen ska visas upp för Infomakers kunder på konferens den 22:a april. Det finns mycket att vidareutveckla på applikationen. För det första kan hela applikationen optimeras rent generellt och för kompatibilitet med så många enheter som möjligt. Vidare finns buggar som ska fixas och många funktioner som ska/kan läggas till. Formatet på artiklarna är just nu inlagt som en bild, istället ska SVG användas då det utifrån våra undersökningar ser ut att vara det mest optimala formatet att använda. Artiklarna bör även ha funktionalitet för zoomning för bättre tillgänglighet samt ett läsläge där layouten är borttagen och artiklarna presenteras med ren text och bild istället. Då tidningsföretagen ofta har fler bilder än vad som publicerats i tidningen ska dessa läggas in i form av bildspel tillhörande varje artikel. Ytterligare tänkbar funktionalitet för artiklar kan bestå av klickbar reklam som länkas till annonsörens hemsida. Även länkar till t ex liknande och tillhörande material till en specifik artikel samt ifyllningsbara korsord kan tänkas som extra funktionalitet. En sökfunktion ska implementeras, dels en för att kunna söka bland tidningar och dels för att kunna söka i en specifik tidning på artiklar och olika avdelningar. En autentiseringsfunktion kommer också att skapas där användare kan logga in för att kunna läsa tidningar. Vidare att fundera på kan vara en delningsfunktion. Ska man ska kunna dela artiklar och tidningar via t ex sociala nätverk? Användare ska kunna ladda ned tidningar till mobila enheter för att kunna fortsätta sin läsning när det saknas täckning. Inställningar för användare kan implementeras för en mer personligt anpassad applikation. En användare skulle kunna få välja om applikationen ska tillåtas att ladda ned tidningar vid endast mobil uppkoppling. 11

12 10. Förslag till förbättringar inför kommande projekt Inför kommande projekt kommer vi att ta med oss både bra och dåliga saker som vi har lärt oss. Iterationerna vi har jobbat med har fungerat riktigt bra med tanke på samarbetet med uppdragsgivaren. De veckovisa mötena och leveranserna har gett både dem och oss en klar bild över hur vi ligger till och vad fokus i nästa iteration ska ligga på. Under nästa projekt kan detta vara ett mycket bra sätt att arbeta på. Något som inte fungerat lika bra som vi kommer att ta med oss är gruppstorleken. Applikationen är uppbyggd på klientsidan och mycket av delarna är beroende av varandra vilket gjorde det varit lite svårt att samarbeta och dela upp uppgifterna ibland. Det blev lätt att man satt 2 och 2 och jobbade istället vilket kanske inte var optimalt. Det är svårt att komma på en lösning till detta men det kan vara nåt att tänka på till nästa projekt iallafall. 12

13 11. Bilagor Skärmdumpar Artikelvy i landskapsläge 13

14 Artikelvy i porträttläge 14

15 Sidöversikt med sökfält utfällt 15

16 Läsläge i porträttvy 16