Studiehandleiding 5: de opdracht

De opdracht luidt kort en krachtig:

Ontwerp en bouw enkele bijzondere web-pagina's bestaande uit een tiental statische en dynamische onderdelen. Maak daarbij gebruik van javascript, HTML en onze speciale bibliotheek met Java-applets en andere elementen. Het onderwerp en de doelgroep waar je iets voor maakt, is in principe vrij.

De procedure is:

De opdracht wordt dit jaar beoordeeld in twee rondes. Het eerste gedeelte (deel I) met vijf onderdelen dienen jullie op de dag van het 4e practicum af te ronden en per mail in te leveren (bij R. Min). (Ook de deeltijders.) Wij willen dat het één bestand is. Dan krijgen jullie z.s.m. commentaar terug. Het tweede gedeelte dient - samen met het bijgestelde eerste gedeelte - op de laatste dag van het practicum ter finale beoordeling te worden voorgelegd. Daar dienen alle tien de onderdelen, als een geheel, in het bijzijn van de beoordeelaars, te worden gedemonstreerd (deel II, incl. bijgestelde deel I).

Deel I

Het eerste deel van het werkstuk moet bestaan uit een web-pagina met de volgende onderdelen:

1. Iets met tekststrings, formulieren & passieve velden
- De web-pagina moet gewone tekst bevatten
- De pagina moet een formulier en drie velden bevatten
- De web-pagina moet tekst bevatten die bij het inlezen wordt gepresenteeerd in velden via een script met de method 'writeln'
- Doe dat bij (minstens) een veld
- Doe dat bij (minstens) een veld met 'getallen' (een getallen-string)
- Presenteer bij (minstens) een veld (gewoon) de tekst-string van de default-setting van het veld
2. Iets met een formulier (met buttons, functies en een bewerking)
- De web-pagina moet buttons en velden bevatten
- Via twee verschillende velden getallen kunnen invoeren
- Een button dient een willekeurige (algebraische) bewerking uit te voeren met die twee getallen
- Een derde veld moet de uitkomst (vervolgens) tonen
- De invoervelden moeten bij het inlezen van de getallen 'automatisch gecontroleerd' worden (of ze bijvoorbeeld wel binnen bepaalde range blijven) (met een 'if-than-else'-achtige constructie).
3. Iets met standaard browser objecten
- Je moet gegevens uit standaard browser-objecten, zoals Date, Math, Windows, Document, etc., kunt halen en in enige vorm ergens in/op je werkstuk presenteren.
- Je moet minstens vier (verschillende) objecten (en hun properties of methods) gebruiken.
4. Iets met eigengemaakte objecten
- Het werkstuk moet minstens twee eigengemaakte objecten bevatten (objecten gedefinieerd met javascript)
- In je werkstuk moet op een of andere manier duidelijk worden dat je de in javascript geprogrammeerde eigenschappen op een functionele en nette manier kunt uitlezen en/of gebruiken.
- Dat moet geheel of gedeeltelijk ook (deeels) zichtbaar op je pagina gepresenteerd worden
5. Iets met een loop en een bestaand object (een applet-object)
- In je werkstuk moet ergens een loop kunnen worden gestart om iets dynamisch te maken
- Het 'lopen' van de loop moet zichtbaar worden gemaakt met behulp van een speciale applet (de applet 'Teller.class' uit 'WebLib').

Toelichting 1: de teksten

We willen dat je bij dit onderdeel met teksten en met name tekst-strings om leert gaan. Zie de voorbeelden elders in de reader en op de web-site. Zie bijvoorbeeld (ook) pagina 8, 10, 16, 38, etc. in het boek van Lemay.

Toelichting 2: de buttons en velden

We willen dat je bij dit onderdeel iets dynamisch en interactiefs maakt, minstens bestaand uit drie samenwerkende onderdelen van een formulier (forms) bijvoorbeeld twee 'invoervelden', een 'uitvoerveld' en een knop ('button'). We hebben het hier over een vrij primitieve output- en input-techniek die echter veel wordt gebruikt. Zie o.a. (ook) pagina 34 en 35 in het boek van Lemay.

Toelichting 3, de 'interne' objecten

We willen dat je in je werkstuk een onderdeel opneemt waarin je blijk geeft om te kunnen gaan met objecten die standaard bij de browser en javascript horen. De object georienteerde methode van denken geeft je de gelegenheid op een goede en gestructureerde manier met informatie en alle mogelijke eigenschappen en onderdelen van digitale dingen (objecten) om te kunnen gaan. Zie bijvoorbeeld (ook) pagina 81 t/m 84 (Math en Date), 90 (Window), etc. in het boek van Lemay.

Toelichting 4, de eigengemaakte objecten

We willen dat je in je werkstuk zelfgemaakte objecten opneemt: personen, dieren, planten, verkoopartikelen, fenomenen, etc. Zie bijvoorbeeld de voorbeelden op pagina 48, 49, 56 en 58 in het boek van Lemay.

Toelichting 5, de 'externe' objecten

We willen dat je in je werkstuk een 'bewegend', 'dynamisch' onderdeel opneemt. Dit moet met behulp van een applet. Neem hiervoor onze eenvoudigste applet: het tellertje. Om dit tellertje ook echt iets te laten doen (te 'tellen' of te bewegen) willen we jullie verzoeken een leuke toepassing te bedenken en te maken. Onze gedachten gaan uit naar een soort quiz of toets, waar bij elk deels goed of deels fout antwoord de teller zichtbaar met een bepaalde waarde wordt verhoogd of verlaagd. Niet in een klap, maar zichtbaar oploppend tot een bepaalde waarde.

Deel II

Het werkstuk moet nu worden gecompleteerd. Het dient te bestaan uit de vijf onderdelen van deel I en daar op een nette manier aan toegevoegd de volgende vijf meer multimediaal gekleurde onderdelen: 6 t/m 10:

6. Iets met een extra window
- Het werkstuk moet een onderdeel in een extra, apart window bevatten
7. Iets met geluids-elementen
- Het werkstuk moet enkele geluids-elementen (van derden) bevatten
- Je moet sommige geluiden zelf aan kunnen zetten en sommige geluiden moeten automatisch gepresenteerd worden.
8. Iets met video-elementen
- Het werkstuk moet ergens een video-element (van derden) bevatten
- Je moet kiezen: of zelf aan kunnen zetten of automatisch iets laten zien (en laten horen).
9. Iets met een bestaande complexe applet (statisch aansturen)
- Het werkstuk moet een complexe applet (van derden) bevatten
- De applet moet duidelijk en goed worden aangestuurd (dwz. statisch aansturen via de parameters param)
- Het moet blijk hebben gegeven dat je deze parameters (param) hebt weten te gebruiken
- Je moet ook een eigen achtergrond-plaatje hebben opgenomen
10. Iets met een interactieve animatie (dynamisch aansturen)
- Het werkstuk moet een formula-driven animatie bevatten
- De animatie moet met een slider beinvloedbaar zijn
- Gebruik hierbij een algebraische formule.

Toelichting 6: bij een extra window

We willen dat je ergens in je werkstuk een extra window kan (laten) openen en liefst ook weer dicht kan (laten) doen. In dit extra window mag je iets extra's zetten (iets nieuws) of iets uit de andere onderdelen.

Toelichting 7: bij geluid

We willen dat je een aantal keren bewegend beeld en (lopend) geluid opneemt in je werkstuk. Deze verplichte audio-elementen zijn over het algemeen gemakkelijk te implementeren. De realisatie is over het algemeen moeilijker. Immers je zult geluid moeten opnemen. We gaan er van uit dat je dat kunt en geleerd hebt bij de voorgaande vakken of nog krijgt bij de vervolg-vakken 'lineaire en hypermedia'. Je mag overigens putten uit onze bibliotheken en je mag alles van het world wide web halen wat je nodig denkt te hebben. De plaats van dit soort elementen op of in de pagina is natuurlijk vrij. Dergelijke onderdelen komen vanzelfsprekend overal verspreid over de gehele web-pagina te zitten. Immers ze zijn overal wel ergens functioneel en je kunt ze dus overal plaatsen. Geluid is zelfs veel functioneler dan teksten. Geluidjes kun je op diè plaatsen in je werkstuk aanbrengen, waar je ze nodig en functioneel vindt. Natuurlijk zijn er ook nadelen aan geluid: het is voor iedereen hoorbaar en soms te lineair, dat wil soms zeggen: te lang of te langdradig.

Toelichting 8: bij video

We willen dat je ergens een video-filmpje (een kort en krachtig video-fragment) opneemt in je werkstuk. De realisatie van video is - net als geluid - over het algemeen bewerkelijk en kost tijd. Die tijd hebben jullie niet. Immers je zult video en bijpassend geluid moeten opnemen. Dit stellen we dan ook niet voor. We gaan er - zoals eerder gezegd - van uit dat je dat kunt en geleerd hebt bij de voorgaande vakken of nog krijgt bij de vervolg-vakken, zoals bij 'lineaire en hypermedia'. Je mag dus gewoon putten uit onze bibliotheek 'WebStuff' met elementen en je mag alles van het world wide web halen wat je nodig denkt te hebben.

Toelichting 9: bij computersimulatie als leermiddel

We willen dat je bij dit onderdeel een complexe applet (van een ander) (uit een ander TO-vak) aan de praat krijgt. Wij stellen de simulatie-applet CARDIO (van Hoving & Hoiting; 1999), TRANSISTOR (van Avis; 1999) en BOILER (van de Rijke & Vermaas; 1999) ter beschikking. Deze applets zijn bij het keuzevak 'Computersimulatie als Leermiddel', dit jaar, gemaakt. Zij zijn speciaal ter beschikking gesteld voor onderwijsdoeleinden behorende bij het vak 'Multimedia Programmeren'.

Toelichting 10: bij slider als interactief element bij '2e orde animatie'

Dit animatie-onderdeel is een van de belangrijkste onderdelen van je werkstuk. Hier komen veel methoden en technieken, die je eerder tegenkwam, samen. We willen dat je de animatie met een slider interactief probeert te maken. Met behulp van onze slider kun je een '2e orde animatie', met een (bitmapped) animatie-object, interactief maken. Je moet dan in de loop van het wiskundige model 'inbreken'; de sliderwaarde uitlezen; en daarna is het verdere verloop van de animatie te bekijken en dat verloop is dus anders dan hij normaal zou lopen zonder de interventie.

Intervenieren bij modellen kan alleen met model-parameters, niet met model-variabelen. Model-variabelen sturen het animatie-object. Deze techniek is nuttig voor leeromgevingen waarbij met simulaties of animaties en wiskundige modellen geleerd kan worden hoe fenomenen reageren onder invloed van bepaalde interventies. (Zie onderdeel 9.)

Je dient een speciaal voor animatie gemaakte applet van ons toe te passen. Dit animatie-object dient input te krijgen van een eenvoudige wiskundige formule naar keuze uit onze lijsten met modellen. (De lijst met de formules of modellen die wij voor deze opdracht beschikbaar stellen bevindt zich elders.) De outputvariabele van deze formule stuurt een animatie-object over een 'traject' over een background. Dit onderdeel moet je zien te realiseren met de applet: 'animatie.class'.

Succes.

Diverse andere toelichtingen en opmerkingen

Onderwerp

Aangaande de algemene tekstuele, visuele en audiovisuele inhoud (de 'content') van je werkstuk stellen we geen eisen; het staat een ieder vrij een onderwerp of meerdere onderwerpen te kiezen. De web-pagina mag - om maar wat te noemen - gaan over geschiedenis, aardrijkskunde, biologie of communicatiekunde; of eventueel zelfs een zwaar medisch onderwerp betreffen. De enige eis die wij stellen is dat het werkstuk minimaal de tien onderdelen en de tien gewenste technieken dient te bevatten.

Aanpak

Jullie kunnen het makkelijkste op je eigen harde schijf, thuis of in het practicumlokaal werken. Soms moet je wat down-loaden en soms wat up-loaden van en naar de practicumgebieden van de gewone fileservers van TO. Zie hier voor het 'plan van aanpak'; elders.

Tussen-beoordeling

Let op dat bij het toesturen per mail van deel I aan de docent je de HTML-javascript-file niet attached. Wij willen dat deel I één bestand is (een file). Dus (ook) niet zippen. Stuur deze HTML-file gewoon, 'gecopied en gepasted', zonder commentaar op, per e-mail. De applets die je hebt gebruikt, hoeven jullie niet mee te sturen; en 'SimLib' ook niet. Die spullen hebben we (in dit geval) al.

Beoordeling

Je wordt beoordeeld op het feit of je goede javascript geschreven hebt en onze applets goed gebruikt hebt en dat je alle methoden en technieken netjes in het geheel hebt opgenomen. Je wordt in principe niet beoordeeld op een goed of fantastisch ontwerp; daar is het vervolg-vak, 'CEA', voor bedoeld. Je wordt in principe ook niet beoordeeld op vormgeving en 'mooie plaatjes'. Dat is meer iets voor het vak 'ISM1', uit het eerste jaar.

Eindresultaat

De docenten bepalen - als je werkstuk klaar is - wanneer en waar het werkstuk op de echte web-server van TO en van dit vak wordt gezet. De werkstukken zijn dan verder normaal via de home-page van dit vak ('MMp') te benaderen. Jullie kunnen dan elkaars werk bekijken en beoordelen.

Enschede, 6 dec. 1999