Casus FletNix Course WebTech
Case Case stud y vid eo-on-demand pl atfor m FLETNI FLETNIX X Opdracht beroepspro duct duc t 1: Statisc Statisc he websit e FLETN FLETNIX IX Version: 15.11.2016
Inleiding
In dit document is de opdracht beschreven waarmee het beroepsproduct “het bouw en van een een statische websit e met een een ont werp dat aangepast is aan de doelgroep ” gerealiseerd kan worden. Het eindproduct moet voldoen aan de eisen zoals deze in dit document beschreven zijn en zoals in het beoordelingsmodel zijn gespecificeerd. Er zijn 3 opdrachten geformuleerd die moeten worden uitgevoerd om tot het eindproduct te komen. Opdracht 1 en opdracht 2 kan in tweetallen worden uitgevoerd, opdracht 3 moet individueel uitgevoerd worden.
Casusbeschrijving Deze casus gaat over de nieuwe video-on-demand internetplatform "FLETNIX", een concurrent van NetFlix1. Het datamodel wordt op dit moment ontwikkeld en de eigenaren van het platform willen ook een doordacht ontwerp laten ontwikkelen voor verschillende gebruikersprofielen. De website moet gebruik maken van de IMDB database en er moeten diverse functionaliteiten geïmplementeerd worden. Omdat FletNix de nieuwe concurrent van NetFlix is, willen de eigenaren een website die duidelijk verschilt van bestaande sites en gericht is op een gespecificeerde doelgroep.
Omdat de applicatie binnenkort live moet gaan, hebben zij jouw hulp nodig voor de ontwikkeling en implementatie van het vereiste websiteontwerp. Je moet dit prototype ontwikkelen voor een Windows platform. De films op het platform zijn voornamelijk georganiseerd in genres, maar het platform toont ook directors en de belangrijkste cast van elke video. Films kunnen deel uitmaken van een filmreeks (bijvoorbeeld Matrix en Matrix Reloaded). Geregistreerde gebruikers betalen een vast tarief om films online te mogen kijken. Dit tarief verschilt per abonnement.
1
www.netflix.com
© Hogeschool van Arnhem en Nijmegen
Pagina 1 van 9
Casus FletNix Course WebTech
Opdrachten
Hieronder vind je de opdrachten waarmee je in 3 stappen de FLETNIX website maakt en een webapplicatie voor eindgebruikers ontwikkelt. Elke opdracht maak je in tweetallen waarbij je ervoor moet zorgen dat elke student wel alles kan verantwoorden en uitleggen. Voordat je met de implementatie kunt starten moet je bepalen wat het beste ontwerp is voor de website. Daarvoor moet je 3 stappen doorlopen. Deze stappen zijn: onderzoek naar doelgroepen, lowfidelity en highfidelity ontwerp. Stap 1: Onderzoek naar d oelgroepen – In tweetal
Onderzoek hoe Fletnix met hun w ebsite een ondersc heidende online merkidentit eit kan creëren dat 30% meer klanten aantrekt? Oftewel: hoe kan Fletnix zich onderscheiden met hun website, welke doelgroep moeten zij aanspreken en wat is belangrijk voor die doelgroep? De doelgroep beschrijving moet concreet gemaakt worden aan de hand van persona’s zodat er een duidelijk beeld ontstaat van de te bereiken gebruiker. Er kunnen diverse doelgroepen gedefinieerd worden voor de te ontwikkelen website. Voorbeelden van doelgroepen zijn: De Sci-Fi Freak Spreekt voor zich. Dit is de ComicCon bezoeker die helemaal opgaat in het genre, zich vereenzelvigt met karakters en alle details weet over het genre. Is helemaal weg van futuristische designs. De Onderzoeker Houdt van CSI series. Houdt van mysterieuze designs. Wil zoveel mogelijk weten over films en series. De Binge-Watcher Wil het liefst hele series in een keer afkijken. Wil informatieve informatie die op een gestructureerde manier wordt aangeboden. De Cowgirls en -boys Western lovers, moet een western look-and-feel voorgeschoteld krijgen De Silent-Movie Lovers Kijkt alleen zwart-wit films, liefst zonder geluid. Het ontwerp moet dus daarop afgestemd zijn. De Action Packers De action packed films kijker. Houdt van een wild, Marvel geïnspireerd ontwerp. User-defined Jullie mogen zelf een doelgroep bepalen gebaseerd op een duidelijk gedefinieerde doelgroepbeschrijving. De keuze van de doelgroep moet passen binnen de resultaten van jouw onderzoek. Eventueel mag je andere duidelijke doelgroep vaststellen. Uiteraard moet deze keuze onderschreven worden door het onderzoek.
Op te leveren product : Het ingevulde sjabloon ‘onderzoek doelgroep.docx ’ (deze vind je op onderwijsonline) met onderbouwing en verantwoording. Dit document moet voldoen aan de ‘Controlekaart documenten ICA’ (deze vind je op onderwijsonline), zoals dat ook bij de course SAQ moest.
© Hogeschool van Arnhem en Nijmegen
Pagina 2 van 9
Casus FletNix Course WebTech
Stap 2 Maak het ontw erp van de websit e- in tweetal a) Informatie architectuur Beschrijf de informatie architectuur van de website. Beschrijf daarbij welke menu-opties er in de applicatie komen en op welke usecase ze betrekking hebben en welke formulieren ze aanroepen, indien nodig.
b) Lowfidelity ontwerp
Op basis van jouw onderzoek moeten de lowfidelity ontwerpen van de FletNix website gemaakt worden. Werk deze lowfidelity ontwerpen uit (in een tekenpakket, bv PENCIL2 of BALSAMIQ3). Maak de ontwerpen voor de pagina’s: Over ons, Registreren abonnement, Filmoverzicht incl. menu, submenu en zoekfunctie, Filmpagina met filminformatie en afspeelmogelijkheid. Laat de ontwerpen reviewen en verwerk de feedback. Laat, voordat je verder gaat met het volgende deel, deze ontwerpen goedkeuren door de docent en verwerk eventuele laatste feedback.
c) Highfidelity ontwerp Website – In tweetal
Op basis van de gegeven lowfidelity ontwerpen moeten nu de highfidelity ontwerpen gemaakt worden. Hierin moet de structuur gehandhaafd blijven van de lowfidelity ontwerpen.
Als je dat nog niet gedaan hebt: onderzoek wat qua thema, kleurenschema en lettertype wat belangrijk is voor, of past bij, de doelgroep. Werk de lowfidelity ontwerpen uit in highfidelity ontwerpen m.b.v. HTML5 en CSS3. Het gebruik van frameworks is uitdrukkelijk niet toegestaan. Bereid een presentatie voor waarin je jullie ontwerp presenteren aan de opdrachtgever FLETNIX(docent.) De presentatie moet gestructureerd worden zoals besproken in de workshop PS
Op te leveren pr oduct : Ontwerpdoc ument met alle ontw erpen. Statische website in HTML5 en CSS3.
2
http://pencil.evolus.vn/
3
https://balsamiq.com/
© Hogeschool van Arnhem en Nijmegen
Pagina 3 van 9
Casus FletNix Course WebTech
Casus FletNix
Stap 3: Bouw applicatie – In tweetallen
Bouw de applicatie volgens het ontwerp dat het resultaat is van stap 2. Het is mogelijk dat je tijdens de realisatie bedenkt dat je van de specificaties wilt afwijken. Maak in dat geval een aantekening op de specificatie en pas alle specificaties aan het eind aan om ze in overeenstemming te brengen met het gerealiseerde formulier.
Verplic hte funct ionaliteiten en eisen aan de statisch e website: Moet een homepagina hebben Film overzichtspagina Product pagina met afspeelbare trailers Een over ons pagina Pagina’s voor registreren en inloggen Pagina’s voor het kiezen en afsluiten van een abonnement Naast de home en over ons pagina 5 pagina’s. Pagina’s voor onderstaande use -cases bevatten, de functionaliteit hiervan moet in Beroepsproduct 2 gerealiseerd worden. Menu met submenu en werkende links naar pagina’s voor de use cases. 3 abonnementen: basis, premium, pro. Namen en inhoud mag je zelf bedenken Afspelen film De site mag geen kopie zijn van Netflix of een van de andere aanbieders Er mag geen lorem ipsum gebruikt worden, maar mag alleen echte content bevatten. Er mag geen javascript gebruikt worden Er mogen geen frameworks worden gebruikt
Bewaar de applicatie ond er een log ische naam zodat de docent ook weet van wie het product is.
© Hogeschool van Arnhem en Nijmegen
Pagina 4 van 9
Casus FletNix Course WebTech
Bijlage A: Use Cases Use Case Diagram Fletnix
© Hogeschool van Arnhem en Nijmegen
Pagina 5 van 9
Casus FletNix Course WebTech
Use Case 1: Use Case:
Registreren nieuw abonnement
Purpose:
Registreren van een nieuwe abonnee
Description of use case:
Verzamelen registratieinformatie abonnee, kiezen van abonnement en betalingsinformatie, bij akkoord starten van abonnement
Primary actor : Secondary actor :
Bezoeker website
Stakeholders and interests:
.
Preconditions : De bezoeker heeft de startpagina van FletNix opgevraagd
Postconditions: De abonnee is geregistreerd, het abonnement is gekozen, betalingsinformatie is geregistreerd, de betaling is akkoord, het abonnement is gestart
Basic Flow (Main Success Scenario) Actor action
System responsibility
1.
De bezoeker geeft aan abonnee te willen worden
2.
De WebServer toont de registratiepagina
3.
De bezoeker vult volledige naam, emailadres, geboortedatum en wachtwoord in
4.
Systeem controleert gegevens en toont betalingspagina
5.
Bezoeker vult betalingsgegevens in
6.
Systeem controleert gegevens en toont abonnementen pagina
7.
Bezoeker kiest abonnement
8.
Systeem genereert activatiecode
9.
Bezoeker logt in met activatiecode
10. Abonnement is gestart.
Alternative flows: A4. Bij incorrecte informatie, fou tmelding genereren A6. Bij incorrecte informatie/fout b ij creditcardservice foutmelding
© Hogeschool van Arnhem en Nijmegen
Pagina 6 van 9
Casus FletNix Course WebTech
Use Case 2: Use Case:
Aanbieden diensten
Purpose:
Het aanbieden van diensten geldend voor gekozen abonnement
Description of use case:
Een ingelogde abonnee zoekt in de catalogus met zoekcriteria, gevonden stukken kunnen afgespeeld worden, lijst met voorkeuren kan aangemaakt worden.
Primary actor : Secondary actor :
Abonnee FletNix
Stakeholders and interests:
.
Preconditions : De bezoeker heeft een abonnement bij FletNix De abonnee is ingelogd
Postconditions: De gekozen diensten zijn geleverd
Basic Flow (Main Success Scenario) Actor action
System responsibility
11. De abonnee kiest voor zoeken
12. Systeem toont zoekpagina met criteria (regisseur, genre, releasedatum, titel, acteur).
13. Abonnee maakt keuze uit gevonden film/aflevering
14. Systeem speelt keuze af
Alternative flows: A1. De abonnee kiest voor afspelen film/aflevering
15. Systeem speelt keuze af
A1. De abonnee kiest voor voorkeurslijst
16. Systeem toont bestaande/lege voorkeurslijst
A1.1. De abonnee past voorkeurslijst aan door keuze genre, acteur, releasedatum, regisseur.
17. Systeem toont aangepaste voorkeurslijst
© Hogeschool van Arnhem en Nijmegen
Pagina 7 van 9
Casus FletNix Course WebTech
Use Case 3: Use Case:
Login abonnee
Purpose:
Inloggen abonnee
Description of use case:
Primary actor : Secondary actor :
Inloggen van abonnee, tonen van menu met top 10, nieuwe releases, tonen van populairste films/series, genrekeuze,
Abonnee FletNix
Stakeholders and interests:
.
Preconditions : De bezoeker heeft een abonnement bij FletNix
Postconditions: De abonnee is ingelogd, de gekozen diensten zijn beschikbaar
Basic Flow (Main Success Scenario) Actor action
System responsibility
18. De abonnee logt in op FletNix
19. De WebServer controleert de credentials 20. Systeem toont menu met top 10, lijst met nieuwe releases, lijst met populairste films/series, genres 21. Systeem toont startcontent (top 10, mijn lijst))
Alternative flows:
© Hogeschool van Arnhem en Nijmegen
Pagina 8 van 9
Casus FletNix Course WebTech
Use Case 4: Use Case:
Tonen informatie
Purpose:
Informatie over FletNix, aangeboden diensten, gebruiksvoorwaarden en werking ter beschikking stellen aan bezoekers
Description of use case:
Weergeven van relevante informatie
Primary actor : Secondary actor :
Bezoeker website / abonnee
Stakeholders and interests:
.
Preconditions : De bezoeker heeft de startpagina van FletNix opgevraagd
Postconditions: De gevraagde informatie wordt weergegeven in de browser
Basic Flow (Main Success Scenario) Actor action
System responsibility
22. De bezoeker vraagt om algemene informatie
23. De WebServer toont de relevante informatiepagina
24. De bezoeker verlaat de pagina
Alternative flows: A3. De bezoeker vraagt abonnement aan
© Hogeschool van Arnhem en Nijmegen
25. Start UC registreren nieuw abonnement
Pagina 9 van 9