Casus FletNix Beschrijving Opdracht BeroepsProduct1 -Statische Website v Rev SR

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


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.


Pagina 2 van 9


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/


Pagina 3 van 9


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.


Pagina 4 van 9


Bijlage A: Use Cases Use Case Diagram Fletnix


Pagina 5 van 9


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


Pagina 6 van 9



Aanbieden diensten

Purpose:

Het aanbieden van diensten geldend voor gekozen abonnement


Een ingelogde abonnee zoekt in de catalogus met zoekcriteria, gevonden stukken kunnen afgespeeld worden, lijst met voorkeuren kan aangemaakt worden.


Abonnee FletNix


.

Preconditions : De bezoeker heeft een abonnement bij FletNix De abonnee is ingelogd  

Postconditions: De gekozen diensten zijn geleverd 



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


Pagina 7 van 9



Login abonnee

Purpose:

Inloggen abonnee



Inloggen van abonnee, tonen van menu met top 10, nieuwe releases, tonen van populairste films/series, genrekeuze,

Abonnee FletNix


.

Preconditions : De bezoeker heeft een abonnement bij FletNix 

Postconditions: De abonnee is ingelogd, de gekozen diensten zijn beschikbaar 



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:


Pagina 8 van 9



Tonen informatie

Purpose:

Informatie over FletNix, aangeboden diensten, gebruiksvoorwaarden en werking ter beschikking stellen aan bezoekers


Weergeven van relevante informatie


Bezoeker website / abonnee


.

Preconditions : De bezoeker heeft de startpagina van FletNix opgevraagd 

Postconditions: De gevraagde informatie wordt weergegeven in de browser 



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


25. Start UC registreren nieuw abonnement

Pagina 9 van 9

Casus FletNix Beschrijving Opdracht BeroepsProduct1 -Statische Website v Rev SR

Recommend Documents