Fork me on GitHub
notes
subs
pix

Leer de Bloemen - "The Making Of"

Michiel Overtoom - motoom@xs4all.nl

• Snelle demo: leer-de-bloemen.nl

Laat in 15 seconden zien wat de site doet

• Sideproject - voor de lol

- Hobby == Werk

Softwareontwikkelen is zowel mijn werk als hobby. Ik heb hierin altijd al intrinsieke interesse gehad.

- Dynamische webapplicaties

Ik vind het leuk om dynamische webapplicaties te maken. Het webframework dat ik voor deze site toepaste, gebruik ik al voor meerdere sites.

- Uitbundige kleurige vormgeving

De meeste websites die ik maak (of waar ik aan meewerk(te)) zijn nogal saai. Met dit soort sideprojects kan ik mij op grafisch gebied uitleven.

• Educatieve Quiz

- Woord bij plaatje raden

Vroeger gebruikte ik een zelfgeschreven BASIC programma om mijn woordjes (idioom) te overhoren.

- Multiple choice

Erg geschikt voor het web of een applicatie: de leerling kan makkelijk op het antwoord klikken, typen is niet nodig.

- Niet triviaal

Alhoewel een multiple-choice applicatie triviaal eenvoudig lijkt, is dat niet zo. De duivel zit in de details. Een voorbeeld: Je kunt niet willekeurig bloemen uit een grote vergaarbak trekken, want dan heeft iemand die de bloemen nog niet kent geen prettige leerervaring.

- Feedback

Een 'narrator' leidt de leerling door de applicatie, en z'n stemming wijzigt alnaargelang er goede of foute antwoorden worden gegeven. Bij veel foute antwoorden wordt-ie verdrietig, en blij als de leerling veel goede antwoorden geeft.

• Adaptief leerproces

- Zoveel!

Er zijn verschrikkelijk veel bloemen. En de meeste bestaan ook nog in ontelbare cultivars. Er lijkt geen beginnen aan.


- Levels

Categoriseer de bloemen in makkelijke, middelmatige en moeilijke bloemen. Makkelijke bloemen zijn bv. die iedereen als kind al kent, zoals de zonnebloem of de paardebloem. Een Muizenoor is een moeilijke bloem.


- Leerset

Teveel bloemen ineens aanbieden vormt een probleem voor leerlingen die de bloemen nog niet kennen, en dat kan demotiverend werken ("Wat saai, ik heb alles fout!"). Het is makkelijker om een kleine set bloemen te leren, want dan kun je gebruik maken van je korte-termijn geheugen. De website pakt uit de totale verzameling bloemen eerst een kleine willekeurige subset, en gaat die eerst overhoren.

- Geleerd na 2x goed

Een bloem wordt uit de leerset verwijderd als-ie tweemaal achterelkaar goed is geraden. De voortgang wordt getoond als een progress-bar, zodat je ziet dat je progressie maakt. Zodra het aantal bloemen in de leerset onder een bepaalde grens komt, wordt de leerset aangevuld met een aantal nog niet geleerde bloemen. Wanneer alle bloemen van een bepaald level geleerd zijn, schakelt de website naar het volgende level. Op het moment zijn er drie levels.











• Content

- Redactiewerk

Het materiaal moet bijelkaar gezocht worden: selecteer aantrekkelijke bloemen, download de foto, maak eventueel een uitsnede, geef de file de juiste naam, zoek een weetje (of hint) op bij de betreffende bloem, zet die in een tekstfile met dezelfde naam, zet de naam van de fotograaf en het licentietype daar ook in. Uiteindelijk wordt met een script alle plaatjes op het juiste formaat gesized, de naam geobfusceerd, en in de juiste directory gezet voor publicatie op de website. Tegelijkertijd wordt een datastructuur voor de webapp aangemaakt.

- Attributie

Voor webplaatjes geldt dat alleen Public Domain en Creative Commons-gelicenseerde foto's toepasbaar zijn. Ik heb geen zin in cease&desist toestanden of rechtszaken. Zelf foto's maken is ook een optie.

• Techniek

- Python en CherryPy

De webapplicatie is geschreven m.b.v. het lightweight CherryPy webframework, in mijn favouriete taal, Python. Met Python ben ik stukken productiever dan bv. met C++, vandaar. De broncode staat trouwens op github.

- Nginx reverse proxy

Mocht de website onverhoopt erg populair worden, dan zorgt nginx ervoor dat de webapplicatie geen hinder ondervindt van trage clients. Nginx verzorgt ook het serveren van alle statische content.

- Datacenter

De hele boel is gehost op mijn gecoloceerde FreeBSD server (Telehouse, Zernike Park). Deze machine serveert ook nog een heel stel andere websites.

- Geen database

Voor deze webapp komt de data uit een datastructuur die tijdens het klaarmaken van de plaatjes automatisch wordt samengesteld, en bij het opstarten als Python source geïmporteerd wordt.

• Monetizen

Hoe kan ik geld verdienen met deze onzin?

- Winkel/Markt/Tuincentrum

Customized versie maken met alleen foto's gemaakt in de betreffende winkel of tuincentrum, en op de website deze winkel/tuincentrum prominent in het zonnetje zetten.

- Google AdSense

Op elke pagina (of om de zoveel pagina's) advertenties van Google laten zien. Ik verheug me al bij voorbaat om de krankzinnige associaties die gemaakt gaan worden ;-)

- Spin-off

Mensen die de website zien, kunnen denken: die Michiel Overtoom krijgt wat concreets voorelkaar, en ik wil ook zoiets: weet je wat, ik huur hem in! Dat kan.

• Vervolg

- Report

Aan het einde van een level een overzicht geven van de bloemen die vaker dan gemiddeld fout werden geraden. Met mijn woordenlijstjes had ik hier altijd baat van, om de 'probleemwoorden' nog eens extra te oefenen.

- Highscore

Als iemand de quiz met bovengemiddeld success aflegt, laat dan hem/haar in een highscorelijst toe.

- Leer de groente, leer de dieren

Ook andere items dan bloemen zijn geschikt om te leren met dit systeem, zonder aanpassing aan de software. Alleen de foto's, omschrijvingen, en de narrator hoeven aangepast te worden (bv. een pratende broccoli ;-)

- Leer de vogels, muziekinstrumenten (geluid)

Bij een plaatje van iets dat geluid maakt, kun je ook gelijk dat geluid laten horen. Of je kunt alleen een vogelgeluid laten horen en vier plaatjes presenteren; de leerling moet dan op de juiste vogel klikken.

- Andere talen: Engels

Door bv. in Engels en Spaans te vertalen bereik je véél meer mensen.

- Prof. illustrator, cartoonist

De plaatjes heb ik zelf getekend, maar een professionele cartoonist kan veel beter emoties tot uitdrukking brengen in de narrator. Het is me echter nog niet gelukt om iemand te vinden.

- S3/CloudFront

Om de bandbreedte die voor de statische content (zoals foto's) nodig is te verlagen, ben ik voornemens om voor de Engelse en Spaanse versies Amazon S3/Cloudfront te gebruiken. Voor de Historische Uitgeverij heb ik hier al goeie ervaringen mee.

• Links