Prosjekt, Hva skjer a?

Sluttrapport

Funksjonsbeskrivelse

Forprosjektrapport

Sluttrapport

2017 UTVIKLING AV INTERAKTIVE NETTSIDER 2017 HÅVARD FURØ PETTERSEN HØGSKOLEN I ØSTFOLD | http://frigg.hiof.no/interaktiv_v1740/ UIN17: Forprosjektrapport [1740] [Håvard Pettersen] side 1 Prosjektinformasjon Navn: Håvard Furø Pettersen Studentnummer: 162963 Valgt kravspesifikasjon: 2. Hva skjer’a? URL til webside/oppgave: http://frigg.hiof.no/interaktiv_v1740/wordpress URL til ekstern funksjon: http://frigg.hiof.no/interaktiv_v1740/wordpress/meld-inn-aktiviteter/ Admin panel: http://frigg.hiof.no/interaktiv_v1740/wordpress/admin/ Logg inn: http://frigg.hiof.no/interaktiv_v1740/wordpress/wp-login.php?loggedout=true Myphpadmin, database studenter (aktiviteter): http://frigg.hiof.no/myadmin/ Dashboard: http://frigg.hiof.no/interaktiv_v1740/wordpress/wp-admin/ Funksjonsbeskrivelse:http://frigg.hiof.no/interaktiv_v1740/dokumenter/funksjonsbeskrivelse.pdf Forprosjektsrapport: http://frigg.hiof.no/interaktiv_v1740/dokumenter/forprosjektrapport.pdf UIN17: Forprosjektrapport [1740] [Håvard Pettersen] side 2 Planlegging/testing Valget for å velge eksamens oppgaven Hva skjer a var fordi jeg hadde allerede dannet ideer til funksjoner og layout tidligere i ett annet fag fra forrige semester. Fordi jeg hadde ingen forventninger eller tanker om de andre kravspesifikasjonene startet jeg med Hva skjer a. Det var lett å finne andre relevante nettsider fordi de er så populære. Eksempler, vg, dagbladet osv. Jeg kan ingen hotell booking sider i toppen av hodet mitt. Planen min til å starte med var å følge skissene fra Forprosjektrapporten og Funksjonsbeskrivelsen. Nedenunder ser du noen: UIN17: Forprosjektrapport [1740] [Håvard Pettersen] side 3 UIN17: Forprosjektrapport [1740] [Håvard Pettersen] side 4 UIN17: Forprosjektrapport [1740] [Håvard Pettersen] side 5 Jeg valgte å følge disse skissene fordi de var enkle. Nettside/cms Nettsiden ved innleveringen har en forside med fremhevet artikkler og nyeste artikkler, en slider med kategori bildene som du kan trykke på så komme du til den du trykket på. Hva skjera logo. Søke knapp og en meny. Menyen tar deg til de ulike kategoriene. Når du skriver en artikkel går den automatisk inn til den riktige kategori siden sin. Du velger selv hvilke artikkler som skal bli fremhevet på forsiden. Kontakt oss nettsiden lagde jeg ved å lage en ny side hvor jeg la inn bilder og kontakt informasjon. Bildet av Hallvard la jeg bare inn for ¨fylle’ ut siden litt. Du kan registrere aktiviteter ved å navigere deg til Meld inn Aktiviteter på menyen. Det er en steg for steg veiviser. Den lagrer informasjonen du skriver inn på myadminphp siden og i Admin siden. Dette er en siden for Admins på nettsiden. Forbedringer På grunn av dårlig planlegging fikk jeg gjort minimalt med nettsiden. Jeg har vært og reist rundt til Fredrikstad og Oslo, drukket når jeg ikke burde ha gjort det og ikke jobba når jeg burde ha gjort det. Dette har resultert i jeg ikke har fått gjort mye av det jeg ønsket å gjøre. Bare for å nevne noe. Admin panlet har ikke passord og brukernavn. Meldings skjemaet klarer ikke å registrere dato og tid. Noen funksjoner fungerer ikke som feks at du vil motta en bekreftelse på e-post. Knappen for å endre informasjonen du har skrevet inn. Administrasjons panelet lar deg ikke redigere. Dette er noe jeg føler jeg kunne klart hvis jeg hadde planlagt bedre. Selv om det er mangler her og der føler jeg at jeg mestrer dette. Med utgangspunktet at jeg ikke har brukt relavativt mye tid på nettsiden føler jeg at jeg har fått gjort mye på den tiden jeg har brukt. UIN17: Forprosjektrapport [1740] [Håvard Pettersen] side 6 Funksjon Meld inn aktiviteter er min funksjon. Den ligger i wordpress. Dette gjorde jeg ved å lage custom template og så legge det inn på en ny ‘page’. Alle disse filene ligger i tema mappen-colormag. Skal laste det opp i funksjoner mappen på Frigg også. Admin panelet er også lagt inn på Wordpress. Denne lar jeg stå der. Jeg kunne fjernet admin panelet og skrive linken til det på dashbordet til admin innlogging som hadde forhindret brukerne å trykke på funksjonen men for å gjøre det så oversiktlig som mulig lar jeg den stå. Jeg bruker samme navn og id på som det ble lagt ut i studentsystem på hjemme siden til faget. Dette var fordi jeg var ikke 100 prosent sikker på hvordan jeg skulle lage funksjonen, lagre det i databasen og hente informasjonen ut. Så for å få gjort dette på en enkel og oversiktlig måte fortsatte jeg bruke navn og Id samme var oppgitt fra før. Skulle ønske jeg kunne endret navn men på mangel av tid fikk jeg ikke gjort dette. Plugins I nettsiden min ser du noen plugins. De jeg bruker er, Advanced Custom Fields. Recent posts. Event Calender. ThemeGrill. Yoast SEO. Relevanssi. Disse er brukt til å optimalisere søkingen på nettsiden. Fremheve artikkler og legge inn aktiviteter. Thema Jeg valgte tema ColorMag fordi den er veldig populær til nettaviser og blogg sider. Jeg synes den var enkel og bruk og anbefaler den videre. Kravet for oppgaven Redaksjonen ønsker seg en nettside med utforming som en nettavis. Fullført: 100% Kontaktsiden skal vise de ansatte med kontaktinformasjon Fullført: 100% Det skal lages en funksjon som lar besøkende melde inn aktiviteter Fullført: 100% Skjemaet som registrerer en booking skal ha felter for å registrere datoaktiviteten skjer, klokkeslett fra og til, kategori, en tittel/overskrift, en kortbeskrivelse og sted aktiviteten skjer. Fullført: 100% Registreringene skal lagres i en database. Fullført: 100% UIN17: Forprosjektrapport [1740] [Håvard Pettersen] side 7 Det skal finnes en form for sikkerhet som sørger for at det ikke kan spammes direkte inn i skjemaet. (tips: captcha eller Fullført: 0% Det skal finnes en side som viser alle registreringer, med status (mottatt/ny, behandlet, lagt inn i kalender) Fullført: 100% Det sendes en mail til brukeren som bekrefter at informasjonen er mottatt, og viser hvilken informasjon som er sendt inn. Fullført: 50% Å sende mail rett fra php script er ikke godtatt av epost hostene. Aktivitetene som er registrert kan legges rett inn i kalenderen av redaksjonen. Fullført: 50% Dette må gjøres manuelt gjennom dashbordet på wordpress UIN17: Forprosjektrapport [1740] [Håvard Pettersen] side 8 Referanser og Kilder http://www.it.hiof.no/uin/ http://www.it.hiof.no/uin/index.php/hjelp-og-verktoy/studentsystem/ http:/www.google.com/ http://www.youtube.com/ Referanse: Tore Marius Akerbæk (Foreleser)

Funksjonsbeskrivelse

Studentsystem Hva skjer’a? Håvard Furø Pettersen| Avdeling for Informasjonssystemer Kundeversjon Håvard Furø Pettersen Informasjonssystemer09.02.2017 s12 Funksjonsbeskrivelse: Kundeversjon; registrering • Brukeren fyller inne informasjon • Brukeren bruker nedtrekkslistene til å velge det Når informasjonen er fylt inn så kan du velge om • Du vil få bekreftelse på epost eller ikke • Hvis du trenger hjelp vil du få det hvis du trykker på spørsmålstegnet • Når du trykker registrer så blir tatt til en annen side med mindre du ikke har fyllt inn riktig informasjon • Hvor du kan registrerkontrolle det du har skrevet 1) 2) 3) 4) • Håvard Furø Pettersen Informasjonssystemer09.02.2017 s12 Funksjonsbeskrivelse: Kundeversjon; registrering Hvis Brukeren ikke har fyllt inn ett eller flere av feltene så kommer en melding opp som sier at du må. • Håvard Furø Pettersen Informasjonssystemer09.02.2017 s12 Funksjonsbeskrivelse: Kundeversjon; registreringskontroll 1) Her kontrollerer du det du har skrevet hittil, dersom det er behov for å endre noe så kan du trykke tilbake eller endre info knappen. Informasjonen du ser foran deg er det som kommer til å vises hvis du trykker på endre info 2) Dersom informasjonen du har skrevet er riktig så trykker du registrer knappen og du blir tatt til registreringsbekreftelse siden • Håvard Furø Pettersen Informasjonssystemer09.02.2017 s12 Funksjonsbeskrivelse: Kundeversjon; registreringsbekreftelse 1)Brukeren får en bekreftelse på at registreringen ble velykket 2) Dersom brukeren huket av å få tilsendt en bekreftelse på epost, så blir en melding vist som bekrefter dette. Hvis brukeren ikke gjorde dette, vises ingen melding. • Håvard Furø Pettersen Informasjonssystemer09.02.2017 s12 Funksjonsbeskrivelse: Kundeversjon; login admin 1) Bruker fyller inn brukernavn og passord 2) Brukeren kan huke av ‘husk meg’ for å slippe innlogging ved de neste besøkene 3)Dersom brukeren har glemt passordet kan han bruke glemt password og opprette ett nytt passord på en ny side 4)Når informasjonen er fyllt inn og stemmer, sendes brukeren til administrasjonen • Håvard Furø Pettersen Informasjonssystemer09.02.2017 s12 Funksjonsbeskrivelse: Kundeversjon; login admin Nedtrekksmenyene til høyre for ‘viser’ lar brukeren velge hvilke registreringer som vises. Registreringer som ikke møter valgene, vises ikke. Brukeren kan bruke stjernene til å markere hvilke tabell som den skal sorters etter Hvis du trykker på linkene I kollenene under innlevering så blir du tatt til innlveringene. Ved klikk på ‘rediger’ åpes et skjema med mulighet for p redigere oppføringen • Håvard Furø Pettersen Informasjonssystemer09.02.2017 s12 TEKNISK FUNKSJONSBESKRIVELSE • Håvard Furø Pettersen Informasjonssystemer09.02.2017 s12 Teknisk funksjonsbeskrivelse: filstruktur • Håvard Furø Pettersen Informasjonssystemer09.02.2017 s12 Index.php Skjema for registrering Registrer.php Side for gjennomsyn av informasjon Confirm.php Side for registrering I database Login.php Skjema for innlogging til admin Admin.php Side for oversikt over registreringer Functions.php Databasetilkoblin g og funksjoner Brukernivå Administratornivå Felles Teknisk funksjonsbeskrivelse: registrering (index.php) Form action: register.php. Method: POST Feltnavn: navn. Felttype: text Feltnavn: etternavn. Felttype: text Feltnavn: registrer. Felttype: button Feltnavn: confirmationFelttype: checkbox. Returnerer: ‘yes’ Feltnavn: epost. Felttype: email Feltnavn: alder Felttype: number Teknisk funksjonsbeskrivelse: Databasetabell “students” Funksjon: med id #helpexam. Har en skjult med id #help-exam-text som skal synes når man klikker på spørsmålstegnet. • Funksjon: med id #helpfrigg. Har en skjult med id #help-frigg-text som skal synes når man klikker på spørsmålstegnet. Teknisk funksjonsbeskrivelse: Databasetabell “aktiviteter” Veldig usikker på dette Melde inn aktiviteter 1) For å melde inn en aktivitet må du skrive inn dato og klokkeslett 2)Skriv en fengende tittel som passer til beskrivelsen din 3) Velg en kategori som passer til aktiviteten din 4)Fyll in captcha for å sende inn aktiviteten. Hvis den ikke er fylt inn blir den heller ikke sendt inn. 5) Meld inn, sender aktiviteten din inn. 6) Hvis du logger inn blir aktiviten din lagret til siden din Poeng blir lagt til automatisk hvis du logger inn Aktivitet poeng system? • En mulighet er å gi poeng til hver person som melder inn en aktivitet • Admin kan fjerne aktiviteter, da blir også poengene fjernet. • Kan ha en poengskala på hovedsiden, venstre/høyre sider • Den som har flest poeng I løpet av måneden vinner noe • Poengene blir fjerna fra alle hver måned for å gjøre det fair • Du kan se dine totale poeng du har tilsammen på profil siden din Aktivitets feed på hovedsiden A) Aktivitets feeden viser, tittelen på aktiviteten, når den ble lagt til og en kort beskrivelse b) De nyeste aktivitene blir vist øverst Tanker og ideer • Hovedsiden Hovedsiden skal bestå av følgende: Meny,registrer/logg inn knapp, en aktivitets feed som viser de nyeste aktivitetene som har blitt lagt inn øverst, det blir nok en grense på kanskje 5, jeg vet ikke helt, det kommer an på hvor mye plass det tar. Hovedsiden kan også inneholde poeng antallet og viser hvem som ‘leder’ si de top 3 eller 5. 1 poeng for hvert innlegg? Hvis poeng systemet tar av folk legger til mye kan dette utvikles og legges til på hovedsiden og kanskje skrive hva de vant og når neste dato du kan vinne. Poengene blir sletta hver måned men du kan gå på profilen din og se hva du ville hatt totalt. Prosjektinformasjon Valgt kravspesifikasjon: Hva skjer’a? URL til hjemmeområde: http://frigg.hiof.no/interaktiv_v1740 Navn: Håvard Furø Pettersen Levert via mail. Mål Mål Mål Mål, alt om mål Målet mitt er å være så brukervendig at folk får ett bra første inntrykk. Dette gjøres ved å holde nettsiden så basic som mulig. Det skal ikke være nødvendig å registrere deg på nettsiden for å få gjort det du ønsker, det vil si få med deg nyhetene. Og litt flere avanserte funksjoner dersom du registrer deg. Målet mitt er å bli bedre på koding av nettsteder, kunne hva som gjøres bak ulike fuksjoner og sette det opp. Slutt målet mitt med faget er å kunne lage min egen nettside/til andre på egenhånd, med andre ord tjene penger i fremtiden. Målet mitt med nettsiden/prosjektet er å gjøre slutt produktet mitt så bra at selv vg,dagbladet,nettavise osv..vil ha lyst til å bruke nettsiden min. Med andre ord føle selv at jeg klarer å håndtere å lage en nettside. Nettsiden sitt mål er å gi informasjonen de søker på en den enkleste måten. Jeg skal ikke bruke mye unødvendig knapper og funksjoner men heller fokusere på det enkleste og viktigste. Jeg skal prøve å lage nettsiden min som .Første inntrykket er noe jeg kommer til å fokusere mest på, jeg vil at folk skal kunne gå på nettsiden og komme raskt igang med det de ønsker. Vil du registrer deg? Ja da har du knappen øverst til høyre. Er det noe spesefikt de ønsker å søke etter på nettsiden, ja da er søke knappen rett ved siden av registrer/login knappen osv osv. Jeg har laget en skisse som du vil se nedenunder. Planlagte tester/kravspesfikasjon Alarm for hver gang en ny nyhet eller noe blir lagt inn for de som er registrert. Kan gjøre mye med dette, men jeg vet ikke om jeg får dette maksimalt til. Men vi får se. Knapp for å bla til nest nyeste artikkel og tilbake, disse knappe skal fungere over alle sidene. Det vil se når du bruker knappene på hovedsiden så slipper du å scrolle. Kanskje litt unyttig men vi får se. Hvordan gjør de nyttig da? Search bar for hele nettside. Du skal kunne se search baren over alt uansett hvilke side du er på samt, help ikonet, og alle de forskjellige sidene nettsiden tilbyr. Click on funksjon på tekster og bilder. Registrer deg og log in. Er du logget inn så kan du kanskje bookmarke en artikkel eller noe. Kanskje lage det sånn at du får en meldingsboks hvis du har subscriba til. Det vil si at hvis du subscriber til sport da, hver gang det blir lagt ut en ny artikkel der så får du en melding om det. Jeg har en skisse under, dette er bildet av hvordan forsiden skal se ut sånn ca. Du har en meny,du kan registrere deg/logge inn,søke etter ting på nettsiden, og en hjelp knapp. Ads blir lagt på sidene for å illustrere hvordan en ferdig nettside ville sett ut. Alt av nyhter blir lagt på hovedsiden, resten blir katagoristert i undersjangere og de er ett tastetrykk unna. Trykker du på teksten eller bildet som hører sammen blir du tatt til den selektede nyhets artikkelen hvor du finner mye mer informasjon. Wireframes/Mockup/bilder/skisser dette Brukertesting For å finne ut av hvilke nettaviser jeg skulle bruke i brukertestingen min så googla jeg "største nettaviser i norge" Jeg fikk opp en lista på de 10 største som var som følgende i synkende rekkefølge; Vg - dagbladet - Aftenposten - Nettavisen - Nettavisen - Dagens Næringsliv - E24 - Bergens Tidende - Adresseavisen - ABC Nyheter - Bergensavisen - Aust agder blad. Deretter gikk jeg på alle de forskjellige sine nettsider og analyserte hva som gjorde at de største nettavisene så populære sammenlignet med de mindre populære. VG På vg er det mange annonser. Klarte å trykke på en av dem ved ett uheld. Viser temperatur Vise alle nyhets artikkelene sine fra hovedsiden. Dagbladet På første øyekast ser du ingen annonser men så fort du blar litt nedover ser du dem. Viser temperatur Vise alle nyhets artikkelene sine fra hovedsiden. Aftenposten Første øyekast ser jeg ingen annonser, nedover siden finner jeg heller ingen annonser Viser ikke temperatur Vise alle nyhets artikkelene sine fra hovedsiden. Aust adgder blad Har mange annonser. Hovedintrykket jeg fikk fra første øyekast var at det handlet om eiendom og det ikke var nyheter som lå ute. Det var heller noe han synes var interessant. Hele høyre siden av nettsiden er bare hvit. Når du trykker på dropdown menyen så får du opp masse random ting som del videoer og bilder med oss, Brukertestingen min viser at innholdet av nyheter må vær interesannte. Samt vært innholdsrik. Nyhetene slutter aldri så nettsiden burde bli oppdatert regelmessig. Ads som er vansklig å se er plagsomme og gir brukeren en dårlige bruker opplevelse. Vg har litt mange ads på hovedsiden på øyekastet og de er sentrert direkte rundt alle funksjonene men ellers så er resten av adsa på sidene av nettsiden noe som gjør det enkelt å unngå å trykke på dem. De burde fjerne adsa som er rundt de viktigste funksjonen for å gi leserne en behandligere og bedre opplevelse. Dagbladet sine ads er sprett ut nedover hovedsiden. Dette gir ett bedre første inntrykk. Aftenposten har ikke mange ads på nettsiden som jeg ser. Men de fyller ikke ut hele nettsiden, det er hvite kanter til venstre og til høyre for nyhetene. De burde fulle ut nettsiden sin. Aust agder blad har mange ads . De burde fjerne noen ads eller hvertfall legg dem til høyre for nyhtene siden der er det tilgjenglig plass. Materilet eller nyhtene de har på hovedsiden burde endres totallt fordi det de legger ut er total uinteressant. VG og Dagbladet legger ut ting som interesserer leserne, de har funnet det perfekt forholdet mellom nyheter og nytelse mens Aftenposten og Aust Agder Blad legger ut mye "kjedelig" nyheter mye som ikke interesserer brukerne noe som gjøre vg og dagbladet til vinnerne her. Vg skårer best fordi de fyller ut hele nettsiden dems mens de andre har mye tilgjenglig plass. En full nett side ser bedre ut enn en halvfull en. Konklusjon Jeg konkluderer med at prosjektet har fått en grei start og at jeg er godt igang. Jeg har selvfølgelig problemer med å få levert inn hvor jeg skal. Jeg vet hvordan jeg skal levere inn på innleverings siden min men det er tekniske problemer. De tekniske problemene hindrer meg litt men det får jeg ordna sikkert oppi så fort jeg får meg sim kort. Ringte telenor istad og skal få tilsendt sim kort iløpet av neste uke sikkert. Det kan da også hende jeg ikke klarer å levere neste innlevering på innleverings siden min, dette er noe jeg håper du overser og godtar innlevering på mail. Nettsiden min har fått en grei start, det var ett enkelt valg å velge prosjekt fordi jeg jobbet tidligere med en nettavis forrige semester i faget Webutvikling. Jeg sier ikke hva slags karakter jeg fikk på den men det er nye tider og mye rom for forbedringer. Jeg har selvfølgelig lært mye mer fra da og skal lære mye mer gjennom andre semester noe som kommer til å hjelpe meg med å fullføre nettsiden min. Jeg ser det mest positive i ting og tror jeg klarer alt og noen så biter jeg over mer enn det jeg klarer å tygge. Nettsidene jeg har analysert har vist meg hva en ordentlig nettavis behøver for å tiltrekke og behold leserne samt hva jeg ikke burde gjøre. Referanser Wireframes,mockup: https://balsamiq.com/download/# Nettavis: http://www.nettavisen.no/ Vg,nettavis: http://www.vg.no/ Dagbladet,nettavis: http://www.dagbladet.no/ Aust agder blad: https://www.austagderblad.no/