Functioneel Ontwerp Rapstrijd

Opdrachtgever: Kinderboekenmuseum Versie: 2

Door: Lucas Simons Datum: 18-05-2011

2

FUNCTIONEEL ONTWERP

 

1)   Home   4  

2)   Rapstrijd   5  

3)   Kies  je  beat   6  

4)   Maak  je  rijm  (eerdere  rapper)   7  

5)   Maak  je  rijm   9  

6)   Rap  opnemen   10  

7)   Rapbattle  reeks   11  

8)   Rapoverzicht   12  

9)   Uitdagingsflow   13  

3

1) Inleiding

In dit FO wordt de functionaliteit van de website beschreven. In deze fase wordt ook de structuur van de website vastgelegd in

een sitemap. Er wordt ook beschreven hoe de bezoeker de website doorloopt. Deze flow wordt vastgelegd in een flowdiagram.

Dit document dient als blauwdruk voor de realisatie van de website. Alle schermen worden schematisch uitgewerkt. In een

document wordt van elke pagina de hoofdlayout van de onderdelen vastgelegd en de interactie beschreven. De gebruiker van de

website wordt hierbij centraal gesteld. Hoe de website wordt gebruikt, wordt gesimuleerd in een klikmodel.

4

PAGINA'S

1) Home

Screenshot

5

2) Rapstrijd

Willie Wartaal verwelkomt je en geeft je een korte introductie over de rapstrijd (audio). Vervolgens daagt hij je uit om zelf een

rijm te schrijven en een rap op te nemen onder zijn begeleiding. Daarnaast kan er ook direct naar de stage worden gesprongen

om daar eerst inspiratie op te doen voor je eigen rap.

Animatie

Gevoel wekken dat er beats uit de muur van boxen komen.

Plaat beweegt op de platenspeler (loop).

Het publiek springt en gaat uit zijn dak (ingekocht filmpje van silhouetten, te vinden op bijv istock).

Lichten worden van tijd tot tijd langzaam sterker en zwakker.

Rook dwaalt over en rondom de stage.

Screenshot

6

3) Kies je beat

Kiezen en afspelen van een beat.

De platen staan in de platen doos achter elkaar, bij een rollover komt 1 van de platen omhoog. Wanneer deze omhoog is

gekomen wordt er doormiddel van onion skinning/ghosting aangetoond dat je de plaat op de platen speler dient te

slepen/leggen (lage opacity preview van de animatie). Wanneer er een plaat is gekozen wordt deze doormiddel van een

animatie op de platenspeler gelegd (welke met een extra klik te skippen is), waarop de naald op de plaat word geplaatst. Om

de de plaat te stoppen met spelen klikt de gebruiker op de naald, waarop deze van de plaat word gehaald. Je kan er nu voor

kiezen om een nieuwe plaat af te spelen of de naald wederom op dezelfde plaat te leggen.

Screenshot

7

4) Maak je rijm (eerdere rapper)

Je kan ten allen tijden je beat afspelen en op je rijm oefenen. Als voorbeeld wordt er een willekeurige rap van een eerdere

rapper getoond, waarvan ook de video is te bekijken (mits deze is aangemaakt, anders wordt deze optie niet weergegeven).

Deze raps gelden puur als inspiratie, je reageert er namelijk niet op, tenzij je een uitdaging accepteert van een vriendje. Je hebt

verder de mogelijkheid om tijdens het maken van je eigen rap ook nog terug te grijpen naar deze inspiratie.

Screenshot

8

Unlabeled

State1

Screenshot

State2

Screenshot

9

5) Maak je rijm

Een andere beat kiezen

Rijmen en het rijmwoordenboek

Je schrijft je rijm over 12 regels, elke regel heeft een maximum van x aantal karakters. Na het schrijven van een rijmregel en

een enter wordt er op basis van je laatst geschreven woord rijmsuggesties gegeven. Dit zijn woorden die rijmen op jouw

zojuist geschreven woord. Je voegt een rijmsuggestie toe door te klikken op het woord in de rijmwoordenwolk. De

rijmsuggesties bewegen langs elkaar heen en worden langzaam groter en kleiner, wanneer je over een woord heen hovert

komt deze naar voren en krijgt deze een selectie kleur. Je kan ook een woord selecteren uit jouw geschreven rijm zodat er

rijmsuggesties voor dat woord worden gegenereerd.

Willie Wartaal

Spreekt je toe en geeft je tips betreft het schrijven van een rap. Dit zijn tekstbalonnen of opgenomen spraakopnames.

Foutmeldingen

"Schrijf je rijm over 12 regels"

Screenshot

10

6) Rap opnemen

Er wordt gevraagd om je microfoon en webcam te activeren. Vervolgens maak je je opname door op de opname knop te

klikken. Wanneer er opnieuw op deze knop geklikt is, wordt de opname gestopt en opgeslagen. Deze kan hierop teruggekeken

worden en ingekort met de twee pijlen. Door op 'knippen' te klikken wordt de video ingekort tot het stuk tussen de 2 pijlen,

deze knip kan ook weer ongedaan worden gemaakt (knop wordt pas actief na de knip). Opnieuw opnemen toont een popup met

de vraag of je daadwerkelijk een nieuwe opname wilt maken, de huidige opname gaat verloren. Wanneer de gebruiker klaar is

klikt hij of zij op 'klaar!'. De opname wordt ingekort, opgeslagen en toegevoegd aan de rapbattle reeks. Wanneer men over geen

webcam beschikt kan je er ook voor kiezen geen rap video op te nemen. De rijm wordt dan op een mooie visueele wijze

getoond als video.

Screenshot

11

7) Rapbattle reeks

De rap wordt gepubliceerd en is nu te bekijken op de Rapstrijd stage, je wordt ook automatisch na publicatie naar jouw video

gebracht. Deze video is te delen via Hyves, Twitter en E-mail. Daarnaast kan je zelf bepalen welke vrienden er op je video

reageren, dit door hen uit te dagen per e-mail (de knop opent een formulier). Reacties worden weergegeven op de hiphopvloer in

elk hun eigen kader. Deze reacties kunnen als still of korte video preview worden weergegeven, afhankelijk van de technische

ingreep, en worden na een klik ingeladen in de player. Met meer dan 10 reacties kan er met de scrollbalk naar de resterende

reacties worden gescrollt. Verder kan er naar de volgende of vorige rapvideo worden gesprongen of een overzicht van alle raps

aan worden geroepen. Dit overzicht start bij de video die de gebruiker op dat moment bekijkt (in dit geval dus #10).

Animatie

Gevoel wekken dat er beats uit de muur van boxen komen.

Tijdens het afspelen van een video beweegt de plaat op de platenspeler (loop).

Het publiek springt en gaat uit zijn dak (ingekocht filmpje van silhouetten, te vinden op bijv istock).

Lichten worden van tijd tot tijd langzaam sterker en zwakker.

Rook dwaalt over en rondom de stage.

Screenshot

12

8) Rapoverzicht

Overzicht waarin er een lijst wordt weergegeven van alle raps op volgorde van aanmaak. Er kan ook gezocht worden op een

nickname (gebruiker) of direct naar een nummer worden gesprongen. Verder zijn de reactie te bekijken door op reacties te

klikken, de video wordt geselecteerd en klapt open. Om de rapvideo of reactie te bekijken klik je op de play knop.

Screenshot

13

9) Uitdagingsflow

Screenshot