BACHELORPROSJEKT Christer Hadland. Samfunnet Bislet. Tore Remi Christensen

Transkript

1 PROSJEKT NR Studieprogram: Anvendt datateknologi Postadresse: Postboks 4 St. Olavs plass, 0130 Oslo Besøksadresse: Holbergs plass, Oslo TILGJENGELIGHET Åpen Telefon: Telefaks: BACHELORPROSJEKT HOVEDPROSJEKTETS TITTEL Samfunnet Bislet DATO ANTALL SIDER / BILAG 53 PROSJEKTDELTAKERE Håkon Andre Sylte Garnes Tobias Hallèn s INTERN VEILEDER Christer Hadland OPPDRAGSGIVER Samfunnet Bislet KONTAKTPERSON Tore Remi Christensen SAMMENDRAG Samfunnet Bislet er et naturlig samlingspunkt for studentene ved HiOA. Samfunnet Bislet er et naturlig samlingspunkt for studentene ved HiOA. Samfunnet Bislet holder til i kjelleren til HiOA i Pilestredet 52, Frydenlunds gamle bryggeri. I dag tilbyr Samfunnet Bislet konserter, studentkro, stand-up, story slam, karaoke, spillklubb, øvingslokaler for studentband, onsdagsquiz og mye mer. Fra oss ønsket Samfunnet Bislet en ny og forbedret hjemmeside, som skulle være både enkel og effektiv å bruke. De ønsket videre at nettsiden skulle være så selvstendig som mulig, med ny og oppdatert informasjon om arrangementer og diverse. I tillegg var en sterkere tilknytning mellom nettsiden og sosiale medier et viktig mål. 3 STIKKORD Webprogrammering Webprosjekt Universell utforming

2

3 Innhold Forord 4 1. Om prosjektet Oppdragsgiver Prosjektgruppen Problemstilling Bakgrunn 6 2. Planlegging og metode Prosjektstyring Tidsplan Risikoplanlegging Ansvars- og arbeidsfordeling Opprinnelig ansvars- og arbeidsfordeling Endelig ansvars- og arbeidsfordeling Prototyping Programmeringsspråk HTML CSS PHP JavaScript Prosjektverktøy Netbeans Sublime Text Google Drive Trello Skype Microsoft Office XAMPP Utvidelser og rammeverk Bootstrap jquery jquery Easing Plugin 14 1

4 3. Utviklingsprosessen Generelt om utviklingsprosessen Utvikling av navigasjon og underseksjoner Utvikling av kommende arrangementer Utvikling av sosiale medier - feed Utvikling av bildekarusell Styling av nettsiden Server-implementering og testing Rapportskriving Kravspesifikasjon Endringer i kravspesifikasjon Funksjonelle krav Ikke-funksjonelle krav Universell utforming Effektivitet Responsivt design Brukervennlighet Sikkerhet Estetiske krav Kostnader Leveringskrav Produktdokumentasjon Generelt om nettsiden Navigasjon Forside Om Samfunnet Bislet Kommende arrangementer Utleie Bli frivillig Kontakt oss Server-implementering - powered by HiOA Gaming 43 2

5 6. Testdokumentasjon Konklusjon Læringsutbytte Samarbeid i gruppen Evaluering av sluttprodukt 49 Litteraturliste 50 Figurliste 51 3

6 Forord Som avsluttende del av et 3-årig bachelorstudium i anvendt datateknologi ved Høgskolen i Oslo og Akershus, presenterer jeg denne prosjektrapporten. Rapporten omhandler utviklingen og utforming av Samfunnet Bislets nye nettside. Prosjektrapporten og nettsiden er skrevet og utformet av meg alene, Håkon Andre Sylte Garnes, da dette gruppeprosjektet i realiteten bare har bestått av ett eneste gruppemedlem. Å ta for seg et bachelor-gruppeprosjekt alene med to gratispassasjerer, er noe jeg i sterk grad ønsker å fraråde. Til fremtidige IT-studenter ønsker jeg derfor å råde til å være svært forsiktig med hvem de starter opp et bachelorprosjekt med. Jeg vil fortsatt gjerne takke Samfunnet Bislet for at de ga meg denne muligheten, i tillegg til Christer Hadland som har vært en svært god veileder gjennom prosjektets gang. 4

7 1. Om prosjektet 1.1. Oppdragsgiver Samfunnet Bislet er en studentpub og -forening, som blant annet tilbyr konserter, quiz, standup, språkcafé, spillekveld, utleie til private arrangementer og mer. Studentforeningen holder til i kjelleren til Pilestredet 52 ved Høgskolen i Oslo og Akershus, Frydenlunds gamle bryggeri, og Samfunnet Bislet blir derfor et naturlig samlingspunkt for studentene. Studentersamfunnet på Bislet ble offisielt åpnet av Gudmund Hernes 23. oktober Samfunnet Bislet drives og driftes av frivillige, og har som mål å kunne tilby både studenter og frivilligarbeidere et godt sosialt tilbud. For øyeblikket er det 234 medlemmer på Facebook-gruppen «Frivillige Samfunnet Bislet », som kan gi et grovt anslag over antall frivilligarbeidere. Vår kontaktperson hos oppdragsgiver har vært Tore Remi Christensen, som fungerte som daværende frivilligsjef Prosjektgruppen Prosjektgruppen besto opprinnelig av Håkon Andre Sylte Garnes, Tobias Hallèn, og Gaurab Jung Gurung, der vi alle er 3. års-studenter ved bachelorstudiet anvendt datateknologi. Senere viste det seg at Gaurab ikke hadde rett til å delta i bachelorprosjektet, så han måtte derfor forlate prosjektgruppen. Gjennom tiden vår på Høgskolen i Oslo og Akershus har vi fått kompetanse innenfor ulike fagområder som universell utforming, webprogrammering, webprosjekt, brukertesting, informasjonsarkitektur og visualisering. I tillegg har Christer Hadland fungert som vår prosjektveileder Problemstilling Samfunnet Bislet har over lang tid slitt med en svært utdatert nettside. Vi fikk høre at nettsiden var i svært lite bruk og ikke var oppdatert på lenge. Nettsiden var bygd opp som en blogg, der det sist gang var skrevet nye poster i I tillegg finner man en bildekarusell overfor bloggen med gamle oversikter over månedsprogram. Man blir derfor umiddelbart bombardert med svært mye unødvendig og utdatert informasjon, mens det finnes null informasjon om fremtidige arrangementer og hendelser. Nettsiden hadde også svært begrenset tilknytning til sosiale medier, der det bare var et par bildeikon som viderefører deg til den ønskede siden. Under disse bildeikonene finner man en oversikt over Samfunnet Bislet Events, hvor det er ingen informasjon oppgitt og man får beskjed 5

8 om at det er Ingen arrangement å vise. Vår oppgave blir derfor å utforme en brukervennlig, oversiktlig og selvstendig nettside, som alltid vil presentere brukeren for relevant og oppdatert informasjon. Nettsiden skal ha sterkere tilknytning til sosiale medier, slik at bilder, arrangementer, og annen informasjon holder seg oppdatert uten at Samfunnet Bislet selv må gå inn på nettsiden og ta hånd om dette. Det skal holde å legge ut informasjon om et arrangement på Facebook én gang, i stedet for at man igjen må gjøre det samme på nettsiden. Videre skal nettsiden være grafisk tiltalende og en glede å bruke Bakgrunn For å kunne utforme et ny nettside som er informativ, oversiktlig og brukervennlig, så har det vært viktig å ha en god og åpen dialog med Samfunnet Bislets styre og besøkende. Dette har vi oppnådd ved å tilbringe ekstra tid i studentpuben, der vi i tillegg har meldt oss opp til frivillige vakter. Videre har dette gjort det mulig for oss å innhente informasjon om miljøet og atmosfæren, og hvordan man kan ta med seg dette inn i utviklingen og utformingen av sluttproduktet. Figur 1: Utsnitt av gamle SamfunnetBislet.no hentet fra Internett-arkiv, da nettsiden er lagt ned. Bildebanner på toppen og ordentlig navigasjonsbar mangler, men gir en viss idé om hvordan nettsiden så ut (web.archive.org) 6

9 2. Planlegging og metode 2.1. Prosjektstyring Tidsplan Uke Mål 2 Oppstart av prosjekt. Første gruppe- og veiledermøte. 3 Innlevering av forprosjektrapport. 4 Prototyping. 5 Prototyping. 6 Utvikling av navigasjon og undersider (med fokus på responsivt design). 7 Utvikling av navigasjon og undersider (med fokus på responsivt design). 8 Utvikling av «kommende arrangementer». 9 Utvikling av «kommende arrangementer». 10 Implementering av «kommende arrangementer». 11 Utvikling av sosiale medier feed. 12 Utvikling av sosiale medier feed. 13 Implementering av sosiale medier feed. 14 Utvikling og implementering av bildekarusell. 15 Styling av nettsiden. 16 Styling av nettsiden. 7

10 17 Server-implementering. 18 Begynne på prosjektrapport. 19 Jobbe med prosjektrapport. 20 Jobbe med prosjektrapport. 21 Innlevering av prosjektrapport. 22 Forberede muntlig presentasjon av prosjektet. 23 Muntlig presentasjon av prosjektet Risikoplanlegging Risiko Konsekvens Tiltak Sykefravær hos gruppemedlem Mindre forsinkelser i prosjektet. Grad: Middels Gruppemedlem kan jobbe hjemmefra, eller så kan et annet gruppemedlem overta ansvaret. Gruppemedlem slutter Kraftige forsinkelser i prosjektet, i tillegg til mulige endringer i kravspesifikasjon. Grad: Høy Arbeids- og ansvarsfordeling må omgjøres. Størrelsen på prosjektet må muligens tilpasses. Forsinkelser i prosjektet Kan føre til at man ikke rekker å fullføre prosjektet, eller at man eventuelt gjør en mindre tilfredsstillende jobb på enkelte komponenter. Grad: Middels Kartlegg de viktigste funksjonene, og gjennomfør de først. Tekniske problemer Fører til forsinkelser i prosjektet, i tillegg til at man bruker energi på andre ting enn selve utviklingen. Løse det tekniske problemet så fort som mulig, eller eventuelt komme frem til alternative 8

11 Grad: Høy løsninger. Nye ønsker fra oppdragsgiver i kravspesifikasjonen Påvirker gruppens tidsplan, i tillegg til ansvars- og arbeidsfordeling. Grad: Middels Diskutere med oppdragsgiver. Finne ut om man kan droppe mindre viktige funksjoner Ansvars- og arbeidsfordeling Opprinnelig ansvars- og arbeidsfordeling Ansvarsområde Utvikling og implementering av navigasjon og undersider (med fokus på responsivt design) Utvikling og implementering av kommende arrangementer Utvikling og implementering av sosiale medier - feed Utvikling og implementering av bildekarusell Server-implementering Fylle ut informasjon på undersidene Styling med vekt på farger Styling med vekt på font / skriftstørrelse Styling med vekt på bilder Styling med vekt på oppsett og plassering Kontaktperson for veileder Kontaktperson for oppdragsgiver Gruppemedlem Håkon Håkon Gaurab Tobias Tobias Gaurab Håkon Tobias Gaurab Håkon Håkon Tobias 9

12 Endelig ansvars- og arbeidsfordeling Ansvarsområde Utvikling og implementering av navigasjon og undersider (med fokus på responsivt design) Utvikling og implementering av kommende arrangementer Utvikling og implementering av sosiale medier - feed Utvikling og implementering av bildekarusell Server-implementering Fylle ut informasjon på undersidene Styling med vekt på farger Styling med vekt på font / skriftstørrelse Styling med vekt på bilder Styling med vekt på oppsett og plassering Kontaktperson for veileder Kontaktperson for oppdragsgiver Gruppemedlem Håkon Håkon Håkon Tobias (10 % utvikling) Håkon (90 % utvikling) Håkon (100 % implementering) Tobias Håkon Håkon Håkon Håkon Håkon Håkon Tobias 2.2. Prototyping For å kunne skape en prototype av hjemmesiden ønsket jeg først å ha en rekke møter med Samfunnet Bislets styre. Det var viktig for meg å få svar på spørsmål om hva de føler definerer en robust nettside og om de hadde noen spesifikke ønsker. Videre begynte utviklingen av en rekke low-fidelity prototyper i form av penn og papir. Disse ble så presentert for Samfunnet Bislet. Hensikten med å presentere flere low-fidelity prototyper var så Samfunnet Bislet selv kunne velge 10

13 hvordan hjemmesiden deres skulle se ut. Videre ble det så utviklet en high-fidelity prototype som ble presentert til oppdragsgiver. Samfunnet Bislet var svært fornøyd med denne prototypen, så jeg da klarsignalet til å begynne å utvikle en nettside som bygde videre på denne prototypen. Figur 2: High-fidelity prototype av nye SamfunnetBislet.no som skrolleside. Uten farger Programmeringsspråk HTML Hyper Text Markup Language (HTML) er det standarde markeringsspråket for å utvikle websider og webapplikasjoner. I vårt prosjekt fungerer det som selve grunnsteinen og fundamentet i forhold til nettsiden CSS Cascading Style Sheets (CSS) er et stilarkspråk som brukes til å definere utseendet av et dokument som er skrevet i et markeringsspråk. Jeg bruker det for å kunne tilpasse presentasjonen av nettsiden min. 11

14 PHP Hypertext Preprocessor (PHP) er et server-side skriptspråk utviklet primært for webutvikling, men også brukt som et generelt programmeringsspråk. I vårt prosjekt ble det brukt for å kunne gjøre nettsiden mer dynamisk, slik at man automatisk kan hente inn bilder, arrangementer, og annen informasjon fra sosiale medier. PHP støtter nemlig datautvekslingsformatet JavaScript Object Notation (JSON), som var svært nyttig for å hente ut den tidligere nevnte informasjonen fra Facebook og Instagram JavaScript JavaScript (JS) er et høynivå -programmeringsspråk, som gjerne brukes for å gjøre nettsider mer dynamiske og interaktive. Jeg har hovedsaklig brukt JavaScript i navigasjonen av nettsiden, der siden vil skrolle ned til valgt underside ved klikk Prosjektverktøy Netbeans Netbeans er en programvare-utviklingsplattform, som ble brukt til å utvikle PHP-komponentene til nettsiden Sublime Text Sublime Text sofistikert tekstredigerer for kode, som i prosjektet ble brukt til å utforme HTML- og CSS-delene av nettsiden Google Drive Google Drive er filoppbevarings- og synkroniseringstjeneste utviklet av Google, som spiller en svært sentral rolle i et gruppeprosjekt ved at man enkelt kan dele dokumenter og samarbeide for å utføre oppgaver Trello Trello er et web-basert prosjektstyringsprogram, som ble brukt i prosjektet for å alltid ha en oversikt 12

15 over oppgaver som må utføres, og oppgaver som har blitt fullført Skype Skype er en direkte meldingsapplikasjon som tilbyr online tekst-, lyd- og video-kommunikasjonstjenester. I prosjektet ble det enkelte ganger brukt for å ha møter, i tillegg til møter med prosjektveileder Microsoft Office Microsoft Office er en programvarepakke med forskjellige programmer utviklet av Microsoft. Jeg har har benyttet meg av Microsoft Word for å føre prosjektlogg og skrive prosjektrapport. I tillegg har jeg brukt Microsoft PowerPoint for å presentere fremdrift og videre mål på våre møter med prosjektveileder og kontaktpersoner. Microsoft PowerPoint vil også bli brukt i sluttpresentasjon av prosjektet XAMPP XAMPP er en web-serverprogramvare, som blant annet består av Apache HTTP Server, i tillegg til kompilatorer som tolker PHP. XAMPP er derfor et svært viktig verktøy for prosjektet, ettersom de viktigste komponentene ble utviklet i PHP Utvidelser og rammeverk Bootstrap Bootstrap er et front-end web-rammeverk, for utforming av nettsider og webapplikasjoner. I prosjektet har jeg brukt Bootstrap for å kunne gi nettsiden et størst mulig profesjonelt preg. I tillegg ender man opp med en responsiv nettside, der nettsiden kan vises på forskjellige enheter med forskjellige skjermstørrelser jquery jquery er et JavaScript-bibliotek som forenkler klientskripting av HTML. 13

16 jquery Easing Plugin jquery Easing Plugin er en jquery plugin som gir avanserte skrolle-funksjoner, som jeg har benyttet i skrolle- og navigasjonsfunksjonaliteten på nettsiden. 14

17 3. Utviklingsprosessen 3.1. Generelt om utviklingsprosessen Jeg har tidligere snakket om planleggingsfasen med prosjektstyringsdokumenter og prototyping, så i denne beskrivelsen av utviklingsprosessen vil jeg fokusere på de resterende utviklingsfasene. Utviklingsprosessen i prosjektet fungerte slik at jeg fokuserte på utviklingen av en bestemt komponent om gangen, og deretter implementering av denne komponenten i nettsiden. Videre flyttet jeg fokus til neste komponent. Utviklingsprosessen kan derfor deles inn i utviklingsfaser knyttet til utviklingen og implementeringen av disse komponentene, der det var backend-funksjonaliteten som ble prioritert først Utvikling av navigasjon og underseksjoner Etter å ha gjennomført planleggingsfasen med intervju og prototyping, og bestemt meg for en skisse og prototype å bygge videre på, så begynte selve oppsettet med nettsiden og undersider. Jeg hadde bestemt meg for at nettsiden skal være bygget opp som én side totalt. På denne siden skulle de forskjellige planlagte undersidene deles inn i seksjoner, fremfor å opprette en ny side og html-dokument for hver enkelt underside. Jeg følte denne strukturen ville gi brukerne en enkel, oversiktlig og effektiv nettside, noe som er svært sentrale mål for sluttproduktet. Videre ønsket jeg at brukeren skulle ha flere forskjellige valg for hvordan han eller henne velger å utforske nettsiden. Den første metoden er ment for den mer målrettede brukeren. Her har man den klassiske navigasjonsbaren på toppen, hvor man klikker på en knapp, for så å bli videresendt til ønsket underside. I stedet for å bli sendt til en ny side, så blir man på min nettside sendt lengre ned på siden til ønsket seksjon. Den andre metoden er rett og slett å bare skrolle seg ned fra topp til bunn. Denne metoden er for brukeren som ønsker å se alt, og som kanskje ikke vet helt spesifikt hva man leter etter. Den siste metoden for utforskning er knapper man finner under hver seksjon, som vil videresende deg til neste seksjon. Denne metoden passer til brukeren brukeren som ønsker å utforske, samtidig som at man har et bevisst mål med utforskningen Utvikling av kommende arrangementer I neste utviklingsfase fokuserte jeg på utvikling av en oversikt over kommende arrangementer. Dette er en svært viktig del av nettsiden, da det gjerne er en av hovedgrunnene til å besøke nettsiden. Det var to viktige tanker jeg tok hensyn til da jeg begynte å utviklingen. Det første var at Samfunnet Bislet 15

18 foretrekker en nettside som er mest mulig selvstendig, og som krever lite oppdateringer. Et bevis på det er deres forrige nettside, der det ikke var oppdatert ny informasjon siden Den andre tanken var at jeg la merke til at Samfunnet Bislet var svært aktive på sosiale medier, der de blant annet legger ut alle deres arrangementer på Facebook. Jeg bestemte meg derfor for å utvikle en løsning som henter ut informasjon om arrangement direkte fra Samfunnet Bislets Facebook-side. Samfunnet Bislet vil da kunne fortsette som før ved å legge ut informasjon om arrangementer på Facebook, da nettsiden automatisk oppdateres med nyeste informasjon om arrangementer. Dette gir oppdragsgiver potensielt muligheten til å nå et større publikum. Så ved bruk av informasjon hentet fra Facebooks API kunne jeg utvikle en oversikt over kommende arrangementer som viser arrangementittel, dato, tid, lokalitet, informasjon, og lenke til arrangementets Facebook-side. I tillegg la jeg til funksjonalitet som viser arrangementene sortert, slik at det nærmeste (i forhold til dato) er oppført først. Jeg valgte også å begrense det til tre antall arrangementer som oppføres, i tillegg til at arrangementsbeskrivelsen begrenses til et bestemt antall ord. Dette var valg jeg gjorde på grunnlag av at jeg ikke ønsker at brukeren skal overveldes med informasjon, og for at det skulle være enklere å mobiltilpasse nettsiden. Jeg valgte allikevel å legge til en snarvei til en ny side (FacebookEvents.php) som viser en fullstendig oversikt med alle kommende arrangementer, i tillegg til fullstendige arrangementsbeskrivelser, slik at man presenterer brukeren med flere valgmuligheter for hvordan han eller henne foretrekker å innhente informasjon om kommende arrangementer Utvikling av sosiale medier - feed Etter å ha fullført utvikling og implementering av oversikt over kommende arrangementer, gikk jeg videre til utvikling av en feed som viser informasjon relatert til Samfunnet Bislet fra sosiale medier. Målet med denne komponenten var å gi nettsiden sterkere tilknytning til sosiale medier, etter ønske fra oppdragsgiver. Jeg begynte denne utviklingsfasen med å undersøke hvilke sosiale medier Samfunnet Bislet faktisk bruker, og hva de brukes til. Jeg fant ut at de hovedsakelig bruker Facebook til å legge ut informasjon om kommende arrangementer, mens det gjerne er på Instagram de legger ut bilder fra arrangementer og andre hendelser. I tillegg tok jeg en titt innom Twitteren deres, men der var det svært lite aktivitet sammenlignet med de to andre. Jeg besluttet derfor at det var Instagram feeden skulle fokusere på. Jeg bestemte først at alle bilder tagget med #SamfunnetBislet postet av hvem som helst automatisk skulle legges inn i feeden. Jeg innså at dette ville føre til store utfordringer, da det for eksempel kan bli lagt ut støtende bilder. I tillegg kan bilder av skålende ungdom for enkelte tolkes som alkoholreklame, noe som er svært uheldig da det er forbud mot alkoholreklame i Norge. Man ville derfor bli nødt til å kontrollere hver enkelt post som legges ut, noe som ville gitt oppdragsgiver en betydelig mengde ekstraarbeid. Jeg besluttet derfor at feeden skulle 16

19 begrenses til bilder lagt ut av Samfunnet Bislets egen Instagram-konto ettersom det ville gjøre ting enklere for alle parter. Så ved bruk av Instagrams API utviklet jeg en feed med bilder hentet fra Samfunnet Bislets Instagram-konto. I tillegg til bildene får man også oppført antall likes, antall kommentarer, opplastingsdato, bildebeskrivelse, og snarvei til det spesifikke bildet på Instagram, ved at man enten trykker på bildet eller på Instagram-ikonet. I likhet med oversikten over kommende arrangement så oppdateres dette helt automatisk uten at man manuelt må inn, noe som opprettholder prinsippet om selvstendighet som nettsiden bygger på Utvikling av bildekarusell Etter å ha vist frem nettsiden med implementer oversikt over kommende arrangementer og Instagram-feed til svært gode tilbakemeldinger, så mottok jeg ønsker om enda flere bilder på nettsiden. Jeg ble så tilsendt en mappe bestående av omtrent femti bilder, som oppdragsgiver ønsket implementert i en bildekarusell. Jeg begynte utviklingen med å legge til kode for at bildekarusellen automatisk skulle gå videre til neste bilde etter en bestemt periode, uten at det kreves at brukeren selv må trykke. Jeg ville allikevel at brukeren skulle ha valgmuligheten til å selv kunne gå til tidligere eller senere bilder i bildekarusellen. Jeg la derfor en rekke små sirkler, som representerer bildene i bildekarusellen. Hvis man for eksempel trykker på sirkel nummer tre, så vil man få opp bilde nummer tre. I tillegg skal sirkelen endre farge og størrelse, slik at det er tydelig at den er aktiv. Så lenge man beholder musepekeren på enten bildene er sirklene i bildekarusellen, så vil den automatisk avspilling deaktiveres. Fjerner man musepekeren fra bildekarusellen så vil den automatiske avspillingen gjenoppta Styling av nettsiden Etter å ha implementert alt av det viktigste funksjonalitet, så gikk jeg videre til neste utviklingsfase med fokus på frontend-utvikling. Jeg begynte først med å jobbe med oppsett og plassering av de forskjellige elementene på nettsiden. Jeg bestemte meg for at oppsettet skulle være midtstilt, da det føltes mest naturlig. Videre gikk jeg over til valg av farger, der det var viktig å gjøre valg som representerte identiteten til Samfunnet Bislet, i tillegg til at man tar hensyn til universell utforming. Jeg bestemte meg for at bakgrunnsfargene skulle bestå av fargene rød, oransje og grått. Rødt ble brukt på introduksjonsseksjonen øverst, og vil være en av de første fargene man ser. Rødt er en av hovedfargene Samfunnet Bislet assosierer seg med, i tillegg til at rødt representerer energi, lidenskap og handling. Videre brukte jeg oransje og grå bakgrunnsfarger på de øvrige seksjonene, der jeg vekslet bakgrunnsfarge på annenhver seksjon. Oransje er nærme rødt, og kan derfor godt 17

20 representere Samfunnet Bislet. Oransje representerer også eventyr og sosial kommunikasjon, noe som er svært sentrale ord for å beskrive Samfunnet Bislet. Grått ble brukt som en kontrast til de øvrige fargene for å sikre lesbarhet. Skriftfargene består av svart og hvit, der jeg valgte å bruke svart på grå bakgrunn, mens hvit ble brukt på rød og oransje bakgrunn. Også her var det lesbarheten som var i fokus, i tillegg til å kunne skape en behagelig opplevelse for brukeren. Videre begynte jeg prosessen med å velge en font til nettsiden. Jeg bestemte meg for å søke meg rundt og undersøke hvilke fonter som er mest populær og hvilke som regnes som de beste fontene. Jeg bestemte meg til slutt for å gå for sans-serif fonten Rubik, som var nevnt i samtlige topp 10 lister over beste fonter. Sans-serif fonter regnes gjerne som best egnet til nettsider, fremfor serif fonter. Videre mente jeg det var viktig å velge en varm og personlig font, som gir brukerne en god velkomst til nettsiden, samtidig som at man sikrer lesbarheten. For å runde av utviklingsfasen for styling, så bestemte jeg meg for å legge til runde hjørner på nettsidens bilder. Dette følte jeg var riktig rett og slett fordi det ga en mer moderne og stilig fremstilling av bildene. Etter å ha implementert disse endringene i farger, font og diverse annet, viste jeg resultatet til oppdragsgiver. Der fikk jeg svært positive tilbakemeldinger, som gjorde at jeg kunne gå videre til neste utviklingsfase Server-implementering og testing Ettersom oppdragsgiver tidligere hadde uttrykt misnøye med deres daværende server, bestemte vi oss for å skaffe en ny og robust server til nettsiden. Vi tok kontakt med studentorganisasjonen HiOA Gaming, som så seg villig til å tilby Samfunnet Bislet en server. Til gjengjeld ønsket de en liten reklame for HiOA Gaming helt nederst på nettsiden. Derfor la jeg så til en liten seksjon i bunn med teksten: Powered by HiOA Gaming. Etter vi får nettsiden oppe og gå vil det være viktig å teste at all funksjonalitet fortsatt fungerte. Da går det i å trykke på alle muligheter navigasjonslenker, passe på at alt fortsatt ser ut som det skal, og da spesielt forsikre oss om alt i forhold til oversikt over kommende arrangementer og Instagram-feeden fungerer. Ved bruk av tjeneste som for eksempel kan vi videre stressteste nettsiden og serveren Rapportskriving Den siste fasen i utviklingsprosessen besto av dokumentering av prosjektet og sluttproduktet. Under hele prosjektet har jeg ført en prosjektlogg som jeg har oppdatert etter hver eneste arbeidsøkt. Denne var svært nyttig i skrivingen av rapporten og dokumenteringen av prosjektet. Jeg begynte prosessen ved å sette opp en disposisjon med hoved- og underoverskrifter. Deretter var det bare å jobbe seg ned fra introduksjon til konklusjon. 18

21 4. Kravspesifikasjon 4.1. Endringer i kravspesifikasjon Gjennom min prosjektperiode har det vært store justeringer i kravspesifikasjonen. Dette kommer som en følge av at det i tillegg har vært store endringer i prosjektgruppen, der jeg blant annet hadde problemer med å få gruppemedlem Gaurab til å bidra og møte opp. Senere viste det seg også at han ikke hadde rett til å ta bacheloroppgave ved Høgskolen i Oslo og Akershus, så da var vi offisielt bare to resterende gruppemedlemmer. Allikevel var det i realiteten bare ett resterende gruppemedlem, da Tobias bidrag i bachelorprosjektet har vært nærmest ikke-eksisterende. Mer om dette i punkt 7.2. Samarbeid i gruppen. Opprinnelig var prosjektet vårt delt opp i to forskjellige deler; Del I: Utforming av ny nettside og Del II: Utbedring og feilsøking av Shifter. Shifter er Samfunnet Bislets turnussystem for frivilligarbeidere, som ble utviklet som et bachelorprosjekt av fem studenter ved Høgskolen i Oslo og Akershus i fjor. Etterhvert som jeg kom lengre inn i prosjektet fortsatte gruppemedlem Gaurab å unnlate å møte opp og bidra. Ettersom at han ikke bidro i den pågående utviklingen av nettsiden, så bestemte jeg at han skulle ha hovedansvaret for Del II: Utbedring og feilsøking av Shifter. Da Gaurabs tidligere atferds- og arbeidsmønster fortsatte, ble jeg tvunget til å innkalle oppdragsgiver til møte angående Shifter-systemet. Jeg forklarte situasjonen og dynamikken i gruppen, og at det var stor sannsynlighet for at jeg ikke ville kunne få gjort noe med Shifter. Oppdragsgiver uttrykte stor forståelse og medfølelse i forhold til dette, og var enig i vårt forslag om å fokusere på at nettsiden skulle ende opp så bra som mulig Funksjonelle krav Utvikle nettside med følgende undersider: Om Samfunnet Bislet Utleie Bli frivillig Kontakt oss Utvikle og implementere en oversikt over Samfunnet Bislet kommende arrangementer, med informasjon om: Hendelse Dato Tidspunkt 19

22 Sted Informasjon Link til Facebook-side for arrangementet Utvikle og implementere en feed fra sosiale medier, som viser: Bilde Dato Antall kommentarer Antall likes Link til siden bildet er hentet fra Utvikle og implementere en bildekarusell: Bruke bildene oppdragsgiver sender Gi muligheten til å kunne navigere seg til forrige eller neste bilde Skal bevege seg til neste bilde automatisk 4.3. Ikke-funksjonelle krav Universell utforming Nettsiden må ta hensyn til universell utforming innenfor IKT, og oppfylle de sju prinsipper for universell utforming Effektivitet Det skal gå raskt og effektivt å finne frem til ønsket informasjon, i tillegg til at en robust server skal sørge for lav responstid Responsivt design Nettsiden skal utvikles slik at den er tilgjengelig på forskjellige skjermstørrelser, som for eksempel nettbrett og smarttelefoner Brukervennlighet Nettsiden skal utformes på en slik måte at man enkelt kan finne frem til ønsket informasjon uten noen betydelig form for kunnskap innenfor informasjonsteknologi. Nettsiden skal være enkel og 20

23 oversiktlig, samtidig som at den tilbyr nok informasjon til besøkende Sikkerhet Nettsiden skal plasseres på en sikker og robust server, slik at man minsker sjansen for mulige hackerangrep Estetiske krav Nettsiden skal utformes på en estetisk tilfredsstillende måte. Det skal brukes farger, bilder, og tekst som representerer og fremstiller Samfunnet Bislet på en god og positiv måte Kostnader Nettsiden skal ikke være for dyr i drift. Viktig å finne noen som tilbyr en prisgunstig server Leveringskrav Prosjektet skal være klar til levering hos oppdragsgiver og sensur innen

24 5. Produktdokumentasjon 5.1. Generelt om nettsiden Nettsiden er bygget opp som en skrolleside, der den består av én side totalt. Et slikt oppsett har blitt svært populært i det siste, da det både er effektivt og oversiktlig. Nettsiden består derfor av en en rekke underseksjoner i stedet for ytterligere undersider. Hver seksjon er bygd opp av et par bestemte bootstrap-klasser. Først har vi container-class, som gir nettsiden en responsiv og fast breddeholder. Videre brukte jeg row-class, som hovedsakelig brukes for å holde kolonner innenfor. Dette deler hver rad inn i et rutenett på tolv virtuelle kolonner. Enkelte steder bruker jeg så col-lg-12-class, som rett og slett vil si at jeg ønsker å bruke alle de de tolv kolonnene. Andre steder har jeg lagt to col-lg-2-class og en col-lg-8-class i midten. Dette er blant annet for at paragrafene med tekst ikke skal gå så alt for langt til sidene, før man bytter linje. Jeg har altså åtte virtuelle kolonner i midten, og så to virtuelle kolonner på hver side av innholdet Navigasjon På nettsiden er det, som tidligere nevnt, tre ulike måter å bla og navigere seg frem til ønsket informasjon. Blant disse er navigasjonsbaren på toppen, som inkluderer én hjem knapp, seks underseksjoner, og én lenke til en ekstern nettside. Denne navigasjonsbaren er fixed top. Det vil si at den er med deg hele veien mens du skroller deg nedover nettsiden. Mens du skroller nedover vil seksjonen du befinner deg på utheves på navigasjonsbaren. Så ved bruk av Bootstrap-klassen navbar-ex1-collapse vil navigasjonsbaren legge seg sammen hvis man surfer på en mobil-enhet eller lignende. Man får da opp den klassiske hamburger-meny-knappen, som jeg har lagt til i utdraget under ved hjelp av <span class= sr-only > og <span class= icon-bar >. Videre har jeg ved hjelp av CSS og jquery gjort slik at navigasjonsbaren utvider når man befinner seg på toppen av siden. Beveger man seg nedover minskes den. Tanken bak dette er at ved først øyekast skal navigasjonsbaren ta større plass, slik at man viser brukeren hvor man kan trykke for å gå videre. Etterhvert som brukeren navigere seg nedover er det heller selve innholdet i underseksjonen som skal være mest mulig i fokus, og det blir da naturlig å gjemme navigasjonsbaren litt mer. 22

25 Figur 3: Oppretter navigasjonsbar og legger til hjem-knapp (index.php) Figur 4: Navigasjonsbar (SamfunnetBislet.no) Figur 5: Navigasjonsbaren på en mobil-enhet (SamfunnetBislet.no) 23

26 Figur 6: Aktiv navigasjon mobil-enhet (SamfunnetBislet.no) Figur 7: Legger til ytterligere navigasjonsknapper (index.php) 24

27 Figur 8: Snarveien til frivilligportal er plassert til høyre, da den skal skille seg ut (main.css) Figur 9: jquery-funksjon for sideskrolling. Legger til effekt som gjør skrollingen mykere. Bruker jquery Easing plugin (scrolling-nav.js) Figur 10: Gjør slik at navigasjonsbaren utvider seg når man er på toppen. Gjelder bare for enheter med minimum 767 piksler bredde (main.css) Figur 11: jquery-funksjon for å kollpase navigasjonsbaren ved skrolling (scrolling-nav.js) 25

28 5.3. Forside Det første som møter deg når du går inn på nettsiden vil være en hvit Samfunnet Bislet - logo på en rød bakgrunn. Dette er som regel fargekombinasjonene oppdragsgiver bruker på bilder og videoer i sosiale medier, så det virket svært passende. Videre får man umiddelbart relevant informasjon, der det er oppgitt åpningstider, og brukernavn og bilde-lenker til sosiale medier. Ellers består seksjonen av en knapp som tar deg videre til neste seksjon. Figur 12: HTML-kode til forside - seksjonen (index.php) Figur 13: CSS-kode til forside - seksjonen (main.css) 26

29 Figur 14: Forside (SamfunnetBislet.no) 5.4. Om Samfunnet Bislet I denne seksjonen får man litt generell informasjon om hva Samfunnet Bislet handler om. Seksjonen består totalt av en overskrift, en stylet <hr> - tag, en stylet paragraf, og en knapp som videresender deg til neste seksjon. Figur 15: HTML-kode fra Om Samfunnet Bislet - seksjonen (index.php) 27

30 Figur 16: CSS-kode til Om Samfunnet Bislet - seksjonen (main.css) Figur 17: Styling av mellomrom ( <hr> ) (main.css) Figur 18: Styling av paragraf ( <p> ) (main.css) Figur 19: Om Samfunnet Bislet (SamfunnetBislet.no) 28

31 5.5. Kommende arrangementer Under denne seksjonen finner man informasjon om de neste kommende arrangementene hentet direkte fra Samfunnet Bislets Facebook-side. For å få tilgang til informasjonen om arrangementene på Facebook trengte jeg en rekke identifikatorer; Facebook-page ID, Facebook-developer app ID, Facebook-developer secret app ID, og Facebook-developer access token. Facebook-page ID finner man enkelt ved å bare søke seg frem til forskjellige nettsider med verktøy hvor du bare limer inn nettadresse til Facebook-siden, for så å få oppgitt IDen. Figur 20: Finner Facebook-page ID ( ) Figur 21: Oppretter variabel med Facebook-page ID (index.php) Videre finner man Facebook-developer app ID og secret app ID ved å registrere seg som Facebook-developer, og så opprette en applikasjon. Til slutt finner man Facebook-developer access token ved å legge inn Facebook-developer app ID og secret app ID på en av undersidene til Facebook for developers. Figur 22 Finner Facebook-developer access token Figur 23: Oppretter variabel med Facebook-developer access token (index.php) 29

32 Så ved å spesifisere since og until - datoene nedenfor får man alle Facebook-arrangementene ett år etter det inneværende året, som kan tilpasses ved å endre year_range. Dette er viktig slik at man fortsatt vil kunne hente arrangementer i Januar når man befinner seg i Desember. Figur 24: Spesifiserer fra og til - datoene for når arrangementer skal hentes (index.php) Ved bruk av linken nedenfor henter man JSON-strengen. Man får JSON-innholdet via PHP-funksjonen file_get_contents(). Figur 25: Henter JSON-streng (index.php) Neste steg var å dekode JSON-strengen ved hjelp av funksjonen json_decode() og så konvertere den til en assosiativ array, noe som skjer ved at man setter den andre parameteren til true. Man må også bruke JSON_BIGINT_AS_STRING - parameteren, ettersom Facebook bruker large integers (eid), og jeg ønsker ikke at PHP skal forenkle verdien. Figur 26: Dekoder JSON-streng (index.php) Videre oppretter man en tabell hvor man henter ut Facebook-arrangementene. Innenfor tabellen ligger en for-løkke som skriver ut arrangementene, i tillegg til en if-setning som begrenser antall arrangementer til maks tre. 30

33 Figur 27: Oppretter tabell og variabel for å finne antall arrangementer (index.php) Figur 28: For-løkke for å skrive ut arrangementer, i tillegg til en if-setning som begrenser antall arrangementer til maks tre (index.php) Innenfor for-løkken satt jeg så arrangement-verdiene i variabler. Figur 29: Arrangement-verdier settes i variabler (1 av 2) (index.php) Figur 30: Arrangement-verdier settes i variabler (2 av 2) (index.php) 31

34 Til slutt legger jeg variablene i tabell, som også ligger innenfor for-løkken. I tillegg legger jeg til ikoner som representerer dato, klokkeslett, sted, informasjon, og Facebook-lenke. Figur 31: Variablene legges inn i tabell (index.php) For at de nærmeste arrangementene (i forhold til dato) skal være øverst, så brukte jeg funksjonen nedenfor. Denne er plassert før starten på for-løkka. 32

35 Figur 32: Funksjon som sorterer arrangement (index.php) Nedenfor har jeg brukt en if-setning for å begrense antall ord i beskrivelsen til 300. Her passer jeg også på at man ikke kutter av midt i et ord, og jeg legger i tillegg til... på slutten. Denne begrensningen er bare aktiv på index.php og ikke på den fullstendige listen over kommende arrangementer (FacebookEvents.php). Grunnen til dette var at jeg ikke ønsket å overvelde brukeren på en side, samtidig som at det blir vanskeligere å mobiltilpasse. Med denne løsningen kan den interesserte brukeren selv oppsøke informasjon via lenken under arrangementene. Figur 33: Begrenser arrangement-beskrivelse (index.php) Seksjonen for kommende arrangementer har i tillegg fått tilpasset blant annet høyde, bredde, bakgrunnsfarge, og padding i CSS-filen main.css. Figur 34: Styling av kommende arrangementer - seksjon (main.css) 33

36 Figur 35: HTML-kode før PHP-kode i seksjonen for kommende arrangementer (index.php) Figur 36: Eksempel på arrangement under seksjonen Kommende arrangementer (SamfunnetBislet.no) Figur 37: Nederst finner man link til fullstendig liste over kommende arrangementer, i tillegg til navigasjonsknapp som sender deg til neste seksjon (Utleie) (SamfunnetBislet.no) 34

37 5.6. Utleie I utleie-seksjonen gir jeg informasjon om utleie av Samfunnet Bislet både til foreninger og privatpersoner. Her ligger det også en e-postadresse man kan ta kontakt på. I tillegg består denne seksjonen av en bildekarusell, med bilder vi fikk tilsendt av oppdragsgiver. Disse bildene ble forsiktig håndplukket, og Samfunnet Bislet uttrykte sterkt ønske om å ha alle disse på nettsiden. Bildekarusellen beveger seg automatisk, samtidig som at navigere seg til hvilket som helst bilde i rekken. Bildene er representert av små hvite sirkler, hvor man for eksempel trykker på sirkel nummer to for å gå til bilde nummer to. Den aktive sirkelen blir så større og rød. Så lenge man har musepekeren inne på bildekarusell-området vil den automatiske avspillingen stoppe. Flytter man vekk fra området, eller eventuelt trykker på noe annet, så vil den automatiske avspillingen starte opp igjen. Til slutt er det en knapp man kan trykke på for å gå videre til neste seksjon. Figur 38: HTML-kode Utleie (index.php) Figur 39: Utdrag fra liste over indikatorer. Brukes til navigasjon mellom bilder i bildekarusellen (index.php) Figur 40: Utdrag fra liste over bilder i bildekarusellen (index.php) 35

38 Figur 41: Styling av utleie - seksjonen (main.css) Figur 42: Styling av bildekarusell (main.css) 36

39 Figur 43: Bildekarusell (SamfunnetBislet.no) - seksjonen finner man Instagram-feeden, som er koblet til Samfunnet Bislets personlige Instagram-konto. For å kunne utvikle denne feeden måtte jeg først ha Instagram API access token. Denne finner man enkelt ved å for eksempel bruke Instagram access token generatoren Deretter var neste steg å initialisere de variable som man behøver. access_token er der man legger inn sin egen Instagram API access token. Med variabelen photo_count velger man antall bilder som skal hentes. Jeg kom frem til at ni var et passende tall. Videre er variabelen json_link2 hvor vi får JSON-dataene med bilder og videoer fra Instagram-brukeren. Figur 44: Initialiserer variablene access_token, photo_count, og json_link2 (index.php) I neste steg mottar man JSON-dataene fra json_link2 - variabelen, ved å først opprette en ny 37

40 variabel der man bruker file_get_contests, for så å dekode dataen ved bruk av json_decode(). Figur 45: Dekoding av JSON-data (index.php) Ved hjelp av en foreach henter jeg ut dekodet JSON-data fra variabelen obj2. Så bruker jeg HTML for å vise bilde, bildetekst, antall likes, antall kommentarer, og opplastingsdato. I tillegg legger jeg til ikoner for å representere antall likes, antall kommentarer, og Instagram-lenke. Figur 46: Foreach-løkke som skriver ut bilde, bildetekst, antall likes, antall kommentarer, og opplastingsdato (index.php) Til slutt la jeg til litt CSS-kode for å tilpasse utseendet og oppsettet til bildeboksene og bildebeskrivelsene. 38

41 Figur 47: Ekstra egendefinert CSS-kode til bildene i Instagram-feeden (main.css) Selve seksjonen for Instagram-feeden får selvfølgelig også sin egen tilpasning i CSS-filen main.css. Figur 48: Styling - seksjonen (main.css) 39

42 Figur 49: Utsnitt fra Instagram-feed (SamfunnetBislet.no) 5.8. Bli frivillig Som tidligere nevnt er Samfunnet Bislet en studentorganisasjon i stor grad drevet av frivillige. Derfor fikk jeg ønske senere i utviklingen om en liten informasjonstekst relatert til det å være frivillig hos Samfunnet Bislet. Denne seksjonen består av en overskrift, en stylet <hr> - tag, en stylet paragraf, og en stylet epost-lenke. Figur 50: HTML-kode for Bli frivillig - seksjonen (index.php) 40

43 Figur 51: CSS-kode for Bli frivillig - seksjonen (main.css) Figur 52: Styling av mellomrom ( <hr> ) (main.css) Figur 53: Styling av paragraf ( <p> ) (main.css) Figur 54: Styling av lenke ( <a href>) (main.css) 41

44 Figur 55: Bli frivillig (SamfunnetBislet.no) 5.9. Kontakt oss Nesten i bunn finner man den vanlige og svært viktige seksjonen for kontaktinformasjon. Her får brukeren informasjon om telefonnummer til venstre, og en rekke e-postadresser til forskjellige formål til høyre. Seksjonen består derfor av tekst, ikoner, og lenker til e-postadresser. I tillegg til å bruke rutenettet med tolv virtuelle kolonner, slik som jeg har brukt ellers i andre seksjoner, så bruker jeg også klasseattributten col-lg-offset-2. Dette flytter kolonnene to virtueller kolonner til høyre, og gjør at det blir midtstilt da det vil være to kolonner på hver side av innholdet, mens innholdet består av to kolonner hver. Dette er en alternativ måte i stedet for å manuelt legge til to ekstra col-lg-2 slik som jeg har gjort tidligere. Figur 56: Telefonnummer - HTML-kode (index.php) 42

45 Figur 57: E-postadresser - HTML-kode (index.php) Figur 58: Styling av Kontakt oss - seksjon (main.css) Figur 59: Kontakt oss (SamfunnetBislet.no) Server-implementering - powered by HiOA Gaming Gjennom samtaler med studentorganisasjonen HiOA Gaming har vi fått til en server-avtale på vegne av Samfunnet Bislet. HiOA Gaming vil ta seg av drifting av serveren, mot at vi la inn en liten reklame for studentorganisasjonen deres nederst på nettsiden. Per er nettsiden ikke oppe og kjører enda dessverre. 43

46 Figur 60: CSS-kode for HiOA Gaming - seksjonen (main.css) Figur 61: HTML-kode for HiOA Gaming - seksjonen (index.php) Figur 62: Footnote - Powered by HiOA Gaming (SamfunnetBislet.no) 44

47 6. Testdokumentasjon Test-case Fremgangsmåte Forventet resultat Resultat Gå til seksjonen «Om oss» Trykker på «Om oss» på navigasjonsbaren, eller «Utforsk!» - knappen på forside-seksjonen Man blir sendt til «Om oss» - seksjonen. «Om oss» blir uthevet på navigasjonsbaren og navigasjonsbaren minskes. Gå hjem til forside-seksjonen Trykker på «Samfunnet Bislet» på navigasjonsbaren. Man blir sendt tilbake til forsiden og navigasjonsbaren utvider seg. Seksjonen du forlater utheves ikke lengre i navigasjonsbaren. Gå til Samfunnet Bislets sosiale medier fra forsiden. Trykk på Facebook-, Instagram-, eller Twitter-ikonet. Man blir videresendt til Samfunnet Bislets side på det spesifikke sosiale mediet man valgte. Gå til arrangementer og sjekke at informasjonen stemmer. Trykk på Arrangementer på navigasjonsbaren, eller trykk på Se våre arrangmenter! - knappen under Om oss - seksjonen. Sammenlign med arrangementene på Samfunnet Bislets Facebook-side. Trykk på Facebook-lenkene. Man blir videresendt til Arrangementer - seksjonen. Arrangementer blir uthevet på på navigasjonsbaren. Ser at det maksimalt blir skrevet ut de tre neste arrangementene, med korrekt dato, tid, sted, begrenset beskrivelse, og Facebook-lenke. Trykker man på Facebook-lenke blir man videresendt til riktig side for Facebook-arrangementet. Gå til den fullstendige listen over kommende Trykk på Se fullstendig liste over kommende arrangementer! nederst Man blir videresendt til FacebookEvents.php i et nytt vindu. Ser at blir skrevet ut 45

48 arrangementer og sjekk at informasjonen stemmer. på Arrangement - seksjonen. Påse at det vises ubegrenset antall arrangementer med korrekt informasjon. ubegrenset antall arrangementer, sortert etter dato. Viser korrekt dato, tid, sted ubegrenset beskrivelse, og Facebook-lenke. Trykker man på Facebook-lenke blir man videresendt til riktig side for Facebook-arrangementet. Gå til Utleie og send e-post om utleie. Trykker på Utleie på navigasjonsbaren, eller Leie Samfunnet Bislet? - knappen under Arrangementer. Trykker på e-postadressen. Man blir videresendt til Utleie - seksjonen. Utleie blir uthevet på på navigasjonsbaren. Man får opp forespørsel om å sende e-post til riktig e-postadresse. Test funksjonaliteten til bildekarusellen under Utleie - seksjonen. Trykker på de forskjellige sirklene på bildekarusellen for å gå til spesifikke bilder. Sjekker at det er riktig bilde. Passer på at automatisk avspilling stopper og starter igjen. Bildekarusellen spilles av automatisk når man møter den. Man får opp riktig bilde når man trykker på sirklene (f.eks. sirkel nr. 2 gir bilde nr 2). Automatisk avspilling stopper mens man samhandler med bildekarusellen, og starter så opp igjen når man er ferdig. Gå - seksjonen og sjekk at informasjonen stemmer. Trykker på navigasjonsbaren, eller - knappen. Påse at det vises 9 bilder med riktig informasjon, i tillegg at man blir sendt til riktig Instagram-bilde når man trykker på bildet / Man blir videresendt - blir uthevet på på navigasjonsbaren. Det vises 9 bilder med riktig antall likes, kommentarer, Instagram-lenke, opplastingsdato, og beskrivelse. Trykker man på bilde / Instagram-ikonet under bildet blir man sendt til riktig bilde på Samfunnet Bislets 46

49 Instagram-ikonet under bildet. Instagram-konto. Gå til Bli frivillig - seksjonen og send e-post om å bli frivillig. Trykker på Bli frivillig på navigasjonsbaren, eller Bli frivillig! - knappen under Arrangementer. Trykker på e-postadressen. Man blir videresendt til Bli frivillig - seksjonen. Bli frivillig blir uthevet på på navigasjonsbaren. Man får opp forespørsel om å sende e-post til riktig e-postadresse. Gå til Kontakt oss - seksjonen og send e-post. Trykker på Kontakt oss på navigasjonsbaren. Trykker på e-postadressene. Man blir videresendt til Kontakt oss - seksjonen. Kontakt oss blir uthevet på på navigasjonsbaren. Man får opp forespørsel om å sende e-post til riktig e-postadresse på alle de fire e-postadressene. Gå til frivilligportalen Shifter. Trykker på Frivilligportal på navigasjonsbaren. Man blir videresendt til Samfunnet Bislets eksterne frivilligportal Shifter. Test at nettsiden er mobil- og nettbretts-tilpasselig Åpne nettsiden og juster vindusstørrelsen. Navigasjonsbaren legger seg sammen, og man får en hamburger-knapp i stedet. Tekst, bilder, og annet innhold tilpasser seg skjermstørrelsen på best mulig måte. 47

50 7. Konklusjon 7.1. Læringsutbytte Gjennom dette prosjektet vil jeg først og fremst si at jeg har hatt stort læringsutbytte i forhold til prosessen å utvikle en nettside. Jeg påstår at jeg sitter igjen med en betydelig dypere kompetanse innenfor HTML, CSS, PHP, og JavaScript, i forhold til da jeg begynte prosjektet. Jeg har også fått muligheten til å lære mye om tilknytning mellom sosiale medier og nettsider. Spesielt bruk av Facebooks og Instagram API har vært både spennende og lærerikt. Gjennom prosjektet har det også vært viktig å ha en åpen dialog med forskjellige parter, det vil si oppdragsgiver og prosjektveileder, som jeg er svært sikker på at jeg vil dra nytte av i arbeidslivet Samarbeid i gruppen I forhold til samarbeidet i prosjektgruppen har det vært svært store utfordringer. I realiteten har dette rett og slett vært et én-manns prosjekt, noe som min prosjektveileder er enig i. Hvis jeg først tar for meg Gaurabs bidrag i prosjektet, så kan det kort og godt beskrives som ingenting. Gaurab var en mester i unnasluntring og å drive med alt annet en bachelorprosjektet da vi hadde møter, hvis han i det hele tatt møte opp. Gang på gang ble det avtalt møter hvor han ikke møtte opp uten å gi noen form for beskjed. De gangene han faktiske møtte opp var han alltid kraftig forsinket. Det viste seg senere i prosjektet at Gaurab faktisk ikke hadde rett til å ta bachelorprosjektet ved HiOA, så da endte det med at han offisielt ble sparket fra gruppen. Så videre til Tobias. Gjennom prosjektperioden har Tobias brukt samtlige av de 20 ukene på å snakke med studentforeningen HiOA Gaming angående en server til nettsiden. Per er nettsiden fortsatt ikke oppe og kjører selv om han har mottatt alle de filene han trenger. De gangene vi møttes for å jobbe endte det med at han ble sittende og observere meg arbeide. Jeg prøvde å få han i gang med å utvikle bildekarusellen, der jeg satt ved siden av han og ga nøyaktige instruksjoner. Det endte likevel med at jeg selv måtte fullføre denne komponenten. Senere i skrivingen av prosjektrapporten prøvde jeg igjen å få Tobias til å bidra. Jeg fikk i uke 20 høre fra han at han skulle bruke hele helgen på å jobbe med prosjektrapporten. Etter helgen mottok jeg et lite avsnitt på fem linjer, som jeg likevel ble nødt til å forkaste, da teksten var av såpass lav kvalitet at det var helt ubrukbart. Å dokumentere et prosjekt man ikke har vært en del av blir gjerne en ganske stor utfordring. Jeg har i senere tid snakket med tidligere samarbeidspartnere Tobias har hatt i andre gruppeprosjekt. Der har jeg fått høre fra personer med lignende erfaring, og at han rett og slett er veldig flink til å sikre seg 48