MULTIMEDIALE LEERMIDDELEN --- LOS TEKSTFRAGMENT

Building blocks

Deze losse tekst gaat over building blocks, libraries en hergebruik.

Websites bevatten vaak plaatjes, animaties, geluidjes of video's. Dat noemen we elementen. Elementen zijn (hier) een-dimensionaal. Elementen bevatten (hier) geen intelligentie. Indien elementen zoals Flash animaties wel intelligentie bevat, dan spreken we van een geprogrammeerd of soms ook wel van een intelligent element of beter: van een component (Min en de Goeijen, 2002). Componenten zijn (hier) losse elementen die iets doen onder invloed wat voor programma of functionaliteit er in zit, bijvoorbeeld een Java-applet. Wat we (hier) building blocks noemen zijn meestal applets, en met name applets die door de ontwerper/ontwikkelaar hergebruikt (kunnen) worden. De Universiteit Twente (hier: studierichting Educational Design, Management & Media; EDMM; vakgroep ISM) heeft voor haar onderwijs en haar studenten een (groot) aantal building blocks ontwikkeld. Hiermee is het mogelijk om - zonder in Java te programmeren - toch de functionaliteit van java en java-applets te kunnen bereiken, door vanuit JavaScript 'lege' Java-applets aan te sturen. Een beetje met JavaScript kunnen omgaan is een competentie in het curriculum van EDMM (en met name bij het vak 'Atelier 1'). Docenten van de practicumvakken in onze studierichting EDMM kunnen hiermee de studenten duidelijk maken waar een probleem hoort te liggen en het beste kan worden opgelost; daar waar het hoort: of in de html-code, of in een JavaScript-script of in een Java-applet. Dat te weten en te leren zien, is een kwestie van didactiek.

Daarom gebruiken we building blocks; meestal geprogrammerd in Java; soms in Flash/ActionScript. Daartoe zijn er door de Universiteit Twente building blocks gemaakt. De building blocks die wij voor dit soort educatieve doeleinden ter beschikking hebben, zitten in onze library 'WebLib' (Min & de Goeijen, 1999). De applets uit deze library kunnen allemaal eenvoudig worden 'aangestuurd' vanuit JavaScript en 'ingesteld' worden via Html. Eenvoudige, 'domme' applets kunnen zodoende, via slimme scripts in JavaScript-code, toch intelligente programmatuur opleveren. De student kan vanuit de html-code en de JavaScript-code, losse Java applets als building blocks op zijn eigen manier en met zijn eigen content gebruiken en die functionaliteit van al die bouwstenen - eenvoudig - in zijn eigen website aanbrengen. Hij kan 'events' over en weer laten gaan en de invloed van het ene object in het andere object laten gelden (zie voorbeelden). We hebben eenvoudige, op alle mogelijke manieren direct te gebruiken, niet-complexe applets in onze library 'WebLib' zitten en een groot aantal complexe her-te-gebruiken applets uit andere vakken en projecten, allen gemaakt met ons JavaTHESIS systeem en de library 'SimLib', down te loaden van onze websites (Min, 2001).

Eenvoudige, niet-complexe applets ('WebLib')

In de library 'WebLib' zitten (voorlopig) zes verschillende door ons ontwikkelde applets met veel voorkomende functionaliteit. Bijvoorbeeld een applet om model-driven animaties met bitmapped objecten, eenvoudig zelf te kunnen maken; een applet voor model-driven simulaties met grafische output; een applet voor dynamische tellertjes; etc. De building blocks voor het realiseren van interessante web-applicaties, zoals we die aan onze studenten en wetenschappelijke staf kunnen aanbieden zijn:

een van buiten aan te sturen tellertje;
een van buiten aan te sturen meebewegend histogram;
een scroll bar, waarmee interactief output kan worden afgeven in de vorm van events;
een eenvoudig met een of meerdere functies te programmeren xy-vlak;
een animatie component voor een van buiten aan te sturen bitmapped animatie-object;
een grafische component voor bijvoorbeeld simulaties met grafische output;

Al deze applets zijn door Jan de Goeijen (1999) geprogrammeerd in Java, gecompileerd met de Java compiler en opgeslagen in class-files. Ze zijn aan te sturen vanuit JavaScript. De intelligentie bevindt zich (altijd) in JavaScript. De 'events' die de user kan versturen en de 'methods' die het object heeft, zorgen dat de output in de betreffende applets wordt afgehandeld. In figuur 1 t/m 6 ziet u onze verzameling building blocks (applets) uit 'WebLib'.

Figuur 1: Een tellertje. De 'content' van dit tellertje is hier en op dit moment 888.

Figuur 2: Een histogram. De 'content' van dit histogram is hier blijkbaar en op dit moment een automatisch getekend staafje op de helft van het maximum.

Figuur 3: Een slider. De 'content' van deze slider zijn zijn default instellingen (de zogenaamde Pstart, Pmin en Pmax).

Figuur 4: Een eenvoudig met een of meerdere functies te programmeren xy-vlak. De 'content' is hier - en op dit moment - een niet te voorspellen grafische weergave in een xy-vlak; maximaal 8 stuks. (Eventueel ook te gebruiken voor fractels.)

Figuur 5: Een eenvoudig grafische output object voor maximaal twee groeiende grafieken (hier bijvoorbeeld rood en blauw). De 'content' is hier een niet te voorspellen grafische weergave.

Figuur 6: Een eenvoudige animatie met een animatie-object. Het animatie-object wordt (hier) voorbewogen door een formule, losse data of een wiskundig model. De 'content' is hier een bewegende vogel en een achtergrond-plaatje.

Vanuit JavaScript kun je alleen maar tekenen, animeren en simuleren als je ook de confrontatie aangaat met Java-applets. Je kunt met applets allerlei goede functionaliteit bewerkstelligen terwijl je programmeert in JavaScript. Op deze wijze kun je de student laten kennismaken met de kracht van moderne web-technologieën. Voor dit idee is een library ontwikkeld: 'WebLib'. In die library bevinden zich een tiental standaard objecten waar studenten uit kunnen kiezen. De library bevat een serie applets, oplopend van eenvoudig tot complexe applets met complete simulaties. Deze applets kunnen statisch zowel als dynamisch worden aangestuurd vanuit Html zowel als uit JavaScript. De student kan vanuit de html-code en de JavaScript-code alle functionaliteit aanbrengen die hij in zijn werkstuk maar wil: rekenen, tekenen, bewegingen, intelligente animaties en grafische presentaties; zoals nodig bij model-driven simulaties. Websites kunnen op deze manier vrij eenvoudig dynamisch worden gemaakt en programmeer-technisch volkomen didactisch verantwoord, zonder dat men met Java en allerlei compilers aan de slag hoeft.

Wij beschouwen een java applet als een object. Objecten - en dus deze applets - hebben kenmerken: properties. Al die kenmerken of properties kunnen vastgelegd worden in Html (statisch via param's). Objecten kunnen events ontvangen, maar zelf (ook) events sturen. De applets kunnen dus dynamisch aangestuurd worden met behulp van methods en events. Voor intelligente applicaties, zoals simulatie- en animatie-applicaties is dat (natuurlijk) heel belangrijk. Hier onder ziet u een werkend voorbeeld. Kijk maar eens naar de dynamiek van het geheel als je op de knop 'runnen' drukt.

a b c d

Dynamisch voorbeeld van een meebewegend histogram. Klik maar eens op 'run'. Na het stoppen kun je op 'set' klikken en daarna weer op run.

Samengestelde voorbeelden (met 'WebLib')

In figuur 7, 8, 9, 10 en 11 ziet u een aantal samengestelde voorbeelden met componenten uit 'WebLib'. In figuur 7 ziet u een samengesteld voorbeeld met een scroll bar voor interactie tussen het script en de presentatie-component voor de grafisch output (met de grafische display functie). Tussen de input- en de output-component worden events verzonden en door de component die het betreft, opgemerkt. De output-component (met de display-functie) wordt zodoende door de input-componenten en de intelligentie die zich in het script bevindt, aangestuurd. Met JavaScript en Html alleen kan dit niet gerealiseerd worden.

Figuur 7: Screendump van een samengesteld voorbeeld. Hier een groeiende grafiek en een slider voor een selecte interventie in het onderliggende wiskundige model (geschreven in JavaScript). Dynamische voorbeeld: zie elders.

Figuur 8: Screendump van een samengesteld voorbeeld. De drie soorten applets, waarvan sommige twee keer gebruikt worden, worden gecombineerd met JavaScript. Dynamische voorbeeld: zie elders.

In figuur 8 zie je twee scroll bars voor interactie tussen het script en de applets; twee tellertjes voor numerieke output; en een presentatie-component voor grafisch output. Tussen de twee input- en de drie output-componenten worden events verzonden en door de componenten die het betreft, opgemerkt. De output-componenten worden door de input-componenten en de intelligentie die zich in het script bevindt, aangestuurd. Met JavaScript en Html alleen kan dit niet gerealiseerd worden.

Figuur 9: Screendump van een samengesteld voorbeeld. Hier worden drie applets toegepast: de slider; de teller en de animatie voor het 'niveau'-object. Dynamische voorbeeld: zie elders.

In figuur 9 ziet u een scroll bar voor interactie tussen het script en de applets; twee tellertjes voor numerieke output (de actuele hoogte van het 'niveau'-object en de simulatietijd); en een presentatie-component voor de animatie-output. Tussen de twee input- en de drie output-componenten worden events verzonden en door de componenten die het betreft, opgemerkt. De output-componenten worden door de input-componenten en de intelligentie die zich in het script bevindt, aangestuurd. Met JavaScript en Html alleen kan dit niet gerealiseerd worden.

Figuur 10: Screendump van een samengesteld voorbeeld. Hier worden drie applets toegepast: vier tellertjes, drie model-driven animaties en twee grafische onderdelen. Dynamische voorbeeld: zie elders.

In figuur 10 ziet u geen scroll bars voor interactie alleen een aan/uit-knop. Er is een drie dubbel gecodeerde output (volgens de inzichten van de 'dual code' theory) (hier voor S, ES en P), namelijk drie groeiende grafieken, drie 'niveau'-animaties, en vier tellertjes voor numerieke output, incl. de simulatietijd. De 'loop' met het wiskundige model (hier van een chemische enzym-reactie) zend bij elke itteratie events uit die door de componenten die het betreft, worden opgemerkt. De output-componenten worden door 'de intelligentie', die zich in het script bevindt, aangestuurd. Met JavaScript en Html alleen kan dit niet gerealiseerd worden.

Figuur 11: Screendump van een samengesteld voorbeeld. Hier slechts een applet en een gewoon formulier met velden. In de velden kunnen getallen komen te staan die verder statistisch verwerkt worden, en waarbij de resultaten met staafjes, grafisch, wordt weergegeven. Dynamische voorbeeld: zie elders.

In figuur 11 ziet u alleen maar een enkele output-applet en een gewoon formulier met velden. In de velden kunnen getallen komen te staan die verder statistisch verwerkt worden in het het JavaScript-script, en waarbij de resultaten met staafjes - grafisch - wordt weergegeven. Dit is (hier) een eenvoudige data-driven output. Het is de zelfde applet als uit figuur 10. De output-componenten worden door de intelligentie die zich in het script bevindt, aangestuurd. Met JavaScript en Html alleen kan dit niet visueel gemaakt en gerealiseerd worden. Hooguit met DHTML en/of met ActionScript in Flash. Maar om allerlei redenen met name van didactische aard, maar ook tijd en geld, volstaan wij met het aanbieden van deze methoden van programeren. De library 'WebLib' is daarbij onlosmakelijk verbonden. We hebben echter naast eenvoudige applets ook de beschikking over complexe applets: complete simulatie componenten.

Al deze applets worden dus vanuit Html en JavaScript aangestuurd. De intelligentie ligt in in het JavaScript-sript. Als u een stapje hoger wilt met de kwaliteit van uw applicatie onkomt u er niet aan in Java te programmeren. Voor simulatie-applets hebben wij sinds jaar en dag een ontwerp systeem ('JavaTHESIS'). Dat systeem levert complexe applets van een hoge kwaliteit waarbij de intelligentie in de Java source ligt. Deze applets die met de library 'SimLib' samenwerken, kunnen studenten ook (her-)gebruiken voor hun eigen website.

Complexe applets (met 'SimLib')

Naast het (her-)gebruiken van eenvoudige applets - zonder 'content' - uit 'WebLib', kan een student van de Universiteit Twente ook complexe applets van derden, elders ontworpen en gerealiseerd met ons JavaTHESIS systeem, (her-)gebruiken in zijn eigen educatieve website. De 'content' van de applet en het wiskundige model dat deze applets 'drijft', zijn in principe niet meer te veranderen; op een aantal van te voren in te stellen properties na, zoals het aantal sliders en de in te stellen simulatietijd. Figuur 12 laat een voorbeeld van een dergelijke complexe applet van derden zien. Applet als deze kunnen dus worden (her-)gebruikt door onze studenten bij het ontwikkelen van hun eigen - hogere orde - website.

Figuur 12: Screendump van een complexe applet die gebruikt wordt als ontdekomgeving c.q. een micro-world op zich zelf. Een dynamische voorbeeld van deze micro-world vindt u elders.

In figuur 12 ziet u dat een gebruiker de mogelijkheid heeft een model te runnen; te intervenieren via vier sliders en grafische zowel als numerieke output heeft om, in alle rust en met eigen tempo, oorzaak en gevolg van zijn handelen te kunnen bestuderen. Een gebruiker kan hier oorzaak en gevolg van zijn actief handelen mee leren inzien. De intelligentie bevindt zich in de applet. Met JavaScript kan men daar niet bij. De voordelen die dit heeft wegen niet op tegen de nadelen (Min, 19xx). Websites waarin dergelijke complexe applets zijn opgenomen, noemen wij 'hogere orde websites' of 'hogere orde e-learning omgevingen'. Met JavaScript en Html alleen kunnen dergelijke educatieve simulaties niet gerealiseerd worden (Min, 200x)

Conclusie

De resultaten van onze mehode om met building blocks te werken, zijn zeer positief gebleken. Drie studiejaren lang heeft deze methode in het onderwijs van TO (EDMM) gezeten. Wij hebben aangetoond met deze software oplossingen en met deze filosofie een evenwichtig systeem te hebben gevonden. Inmiddels hebben wij ontdekt dat ook andere groepen belangstelling voor onze methode hebben. Met deze methode van losse componenten en losse, kant en klare simulatie-applets, bleken onze studenten een technisch hoog eindniveau met hun werkstukken (websites) te kunnen halen. Componenten van derden, uit latere jaren, en elementen van hen zelf uit het eerste jaar (of ook van derden) bleken prima inpasbaar en heel goed hergebruikt te kunnen worden. Daar had in 1999 nog niemand in Nederland en volgens ons elders - op deze manier en op deze wijze toegepast- eerder aan gedacht. Met name de dynamische aansturing met events hebben we helemaal zelf ontworpen en ontwikkeld (Min & de Goeijen, 1999). Het is een efficiente en effectieve methode voor in het onderwijs gebleken. Niet alleen in het bachelers maar ook in het master onderwijs en (naar blijkt) ook goed toepasbaar bij promotie-projecten, waar snel prototypen moeten kunnen worden geconstrueerd. In het onderwijs is het effectief en efficient omdat studenten al vroeg zien en ervaren waar je allemaal vrijheidsgraden hebt en dat er nog andere programmeer-methoden zijn. Studenten kunnen ruiken aan toekomstige ontwikkelingen, aan die waar men pas in bijvoorbeeld het laatste jaar, bij de keuzevakken mee leert om te gaan, namelijk de simulaties, animaties, micro-werelden en virtual reality, kortom de interessante onderdelen, die intelligente hogere orde leeromgevingen juist kenmerken.

Referenties

Min, R. & J. de Goeijen (studiejaar 1999/2000);
Het vak "Multimedia Programmeren" (MMp); [online] beschikbaar op, maar zie xxx

Min, R. & J. de Goeijen (studiejaar 2000/2001);
Het vak "Productie van Onderwijssystemen" (PvO) (voorheen 'Multimedia Programmeren').

Diana, I. De, R. Min, J. Wetterling & J. de Goeijen (studiejaar 1999/2000);
Het vak "Courseware Engineering: Architectuur" (CEA);

Min, R., & J. de Goeijen (studiejaar 2002/2003);
Het vak "Computersimulatie als Leermiddel" (CSaL) ofwel "Technology and Simulation" (T+S).

Collis, B., en J. Moonen (2001).
Flexible Learning in a digital world: Experiences and expectations", Kogan Page, London.

Min, R. (2001).
Down te loaden micro-worlds en systemen: complexe en minder complexe applets, WebLib, SimLib en JavaTHESIS.

Min, R. (1996 - 2002).
Multimediale leermiddelen; het ontwerpen en ontwikkelen van Leer-, Werk- & Doe-omgevingen; inzichten, concepten, methoden en technieken. Een interactief electronisch boek op internet. (multifunctioneel collegediktaat).

Min, R., en I. De Diana (2002).
Het leren ontwerpen van hogere orde e-learning omgevingen; een nieuwe didactische aanpak in educatieve software engineering. Tijdschrift: Onderwijsinnovatie, Maart 2003.

Min, R., en J. de Goeijen (studiejaar 2002/2003);
Het vak Methods and Techniques: Technology for Training and Education (M+T); (Scripts in combination with building blocks).

Terminologie

Een element is (hier) meestal een een-dimensionale digitale eenheid; bijvoorbeeld een plaatje, een stuk tekst, een geluidje, een videofragment of een los animatiefilmpje; meestal passief en zonder geprogrammeerde elementen erin.
Een dimensie van een multimediaal product is (hier) datgene dat als modaliteit, als mono-multimediaal element, vergelijkbaar met elkaar is; beeldmateriaal met beeldmateriaal; geluidsfragmenten met geluidsfragmenten; etc. Ook: datgene waarop (of waarlangs) je een element - per soort - kan sorteren.
Een component is (hier) meestal meer dan een gewoon, passief element: namelijk een element dat iets kan (actief is) en meer dan alleen maar (passieve) content bevat. Het betreft meestal een applet of een element met een script erin, zoals bijvoorbeeld een Flash-animatie met daarin wat ActionScript-scripts.

Een applet is een component gemaakt met de programmeertaal Java. Applets zijn (hier) class-files die zich in een library (met andere class-files) bevinden. Hier 'WebLib'. Applets varieren (hier) van zeer eenvoudig tot zeer complex. Bijvoorbeeld een compleet simulatie-programma.

Rik Min, Enschede, nov., 12, 2003; updated 2005 en 2020.