Rapport groep 2014 Taal- en Letterkunde 2

From Edutech
Jump to: navigation, search

The Restaurant Game

30/04/2014

Groepswerk gemaakt in het kader van het vak onderwijstechnologie Lerarenopleiding VUB

Groepsleden

Michaela Beck, Marie Giannone, Enjo Hendriks, Sarah Leclercq, Samantha Sioen, Anika Thommen

SLO Taal- en Letterkunde Engels

Samenvatting

Dit project is gericht op leerlingen met een niveau pre-intermediate Engels. Elke leerling Engels, zowel van beginnend niveau als een gemiddeld niveau zal van onze website iets kunnen bijleren. Met behulp van verschillende oefeningen op de website zullen de leerlingen de basis kunnen leren om op restaurant te gaan in het Engels.

Aan de hand van instructiefilmpjes en woordenschatoefeningen die wij zelf gemaakt hebben, leren de leerlingen hoe ze bijvoorbeeld een reservatie kunnen maken of iets kunnen bestellen. Deze interactieve website kan een leerrijke bron zijn voor iedereen met een interesse om iets bij te leren in het Engels, maar de doelgroep blijft leerlingen uit het middelbaar met een pre-intermediate niveau.

Doel - Concept

Onze website is aangemaakt voor leerlingen van het secundair onderwijs, die Engels willen/moeten leren, en die het niveau „pre-intermediate“ (A2/B1) hebben. De site kan echter steeds uitgebreid worden door er oefeningen aan toe te voegen voor lagere of hogere niveaus.

De website is opgebouwd rond de onderwerpen “eten”, “bestellen”, “sociale uitdrukkingen”. Eten is een basisbehoefte voor alle mensen in alle landen. Daarom horen de eerder genoemde thema's tot de eerste dingen die je in een vreemde taal moet leren. Engels is een internationale taal die bijna overal begrepen en gesproken wordt. Vaak worden ook business-gesprekken in een restaurant gevoerd. Daarom is het uitermate belangrijk dat leerlingen de woordenschat en uitdrukkingen op dit gebied goed beheersen.

Wij wilden van het concept af waarbij leerlingen door boeken en woordenschatlijsten communicatieve vaardigheden en thema's op een vrij droge manier leren. Met deze site bieden we de leerlingen de mogelijkheid om op een interactieve manier deze thema's en nieuwe woorden te ontdekken, video's te bekijken en reële situaties te beleven, woordenschat gemakkelijker te onthouden, enz.

Door telkens in het begin van het hoofdstuk video's van gesprekken in het restaurant te tonen, hebben de leerlingen een reële situatie voor ogen en begrijpen ze beter het nut van de oefeningen. Voorts is het voor jongeren interessanter om video's te bekijken dan dialogen te lezen. Ten laatste wennen ze door het audiomateriaal aan de uitspraak van de taal. De vele verschillende soorten oefeningen die daarop volgen (hiaatvullende oefeningen, memory, woorden met elkaar verbinden) bieden afwisseling toe en de leerlingen kunnen zich op een speelse manier met de leerstof vertrouwd maken. Op die manier vervelen ze zich niet zo vlug en onthouden ze de leerstof beter. De antwoorden van de leerling worden onmiddellijk na de oefeningen verbeterd, zodat hij of zij niet ver naar de correcte antwoorden moet zoeken.

In het algemeen biedt een voortdurend en vrij beschikbare website de voordelen dat de leerlingen individueel en in hun eigen tempo vooruit kunnen gaan. Daarboven kunnen ze de filmpjes en oefeningen zo vaak herhalen als ze willen of het nodig vinden om de leerstof te onthouden.

Gebruikte technologieën

Interactive content

Drupal: Drupal werd geïnstalleerd op een server om H5P te kunnen laten werken.

H5P: H5P werd geselecteerd omdat het een hoog interactief gehalte had, maar deze module werkte alleen met Drupal of Joomla.

GIMP: GIMP werd gebruikt om een image map aan te maken.


Website

We hebben drupal op een server moeten installeren voor het gebruik van H5P, en zo een website gemaakt, omdat het uploaden van H5P binnen de Classy.be website niet werkte.


Video

Video Editor Windows Movie Maker: De video editor werd gebruikt om de gefilmde video's te editen, zoals ondertitelingen toevoegen en eindbeelden met instructies. Deze editor werd uiteindelijk gebruikt omwille van praktische redenen. Binnen Windows zijn de open source editors zeer beperkt. Er waren interessante video editors, maar deze werkten slechts op Linux en niet op Windows waardoor ze niet konden worden gebruikt. Er werd overwogen Avedimux of Videolan te gebruiken, maar de eerste had niet de nodige features en de tweede kon niet meer gebruikt worden omwille van problemen op het niveau van VLC zelf.

Na het editen van de video's werden deze op YouTube geüpload opdat ze binnen de website konden worden geplaatst.

Opmerking: VirtualDub en zijn afgeleiden vallen nog te overwegen als open source video editor voor Windows, alsook tal van online video editors. Zie bv http://www.makeuseof.com/tag/5-free-tools-online-video-editing/ --Frederik.Questier (talk) 21:27, 6 May 2014 (CEST)


Communicatie

Google Docs: Google Docs werd gebruikt voor het schrijven van het rapport en de samenvatting.

Dropbox: Dropbox werd gebruikt om video's, bestanden en oefeningen uit te wisselen en te verbeteren.

PointCarré & Webmail: Eerst werd PointCarré gebruikt, maar daarna werd er vooral gecommuniceerd via Webmail, Dropbox en Google Docs bij het gebruik van de verschillende bestanden.


Overwogen-maar-niet-gebruikte technologieën

Exe-learning en GLO Maker: beperkte interactieve content, dus werd het niet geselecteerd.

Classy.be met Drupal werd eerst geselecteerd, maar kon niet gebruikt worden omdat H5P er niet op kon worden geüpload.

De andere technologieën waren meestal gratis, maar niet open source dus werden ze niet bijgehouden.

Verwezenlijking

Informatief voor derden die iets gelijkaardig willen construeren.


Inleiding

Voor een leuke en interessante taalervaring zochten we een interactieve tool waarmee leerlingen niet enkel dankzij video's en foto's zouden kunnen leren maar ook hun kennis zouden kunnen testen via efficiënte en doelgerichte oefeningen. De moeilijkheid zat er wel in dat we Xerte als referentiepunt in hoofd hadden en dat we niet onmiddellijk hetzelfde konden terugvinden.

Na veel te hebben gezocht en uitgetest (Courselab, Exelearning, Moodle, Quandary,...) zijn we voor H5P gegaan. Ze stelden leuke en interactieve oefeningen voor en we waren meteen verkocht door hun « Interactive video ». Toen beseften we echter nog niet dat H5P enkel via een Content Management platform kon draaien en hoeveel werk dit zou voorstellen. Dit was het begin van een lang leerproces rond Drupal, het platform compatibel met H5P.

Een Drupalplatform aanmaken was zeker geen gemakkelijke zaak. De versie die we via Classy konden verkrijgen functioneerde niet met H5P. We zijn dus van nul moeten beginnen en hebben een nieuw platform moeten aanmaken.


De Server

Het hele project wordt van een thuis server gehost. Deze server is een NAS van Synology met een Linux gebaseerd open source besturingssysteem erop, die enkel door Synology producten wordt gebruikt. De broncode van de Synology NAS is op deze website te vinden: http://sourceforge.net/projects/dsgpl/. Aangezien dit geen professionele set-up is, en dat de server verbonden is met een thuis internet verbinding, hadden wij geen statisch ip beschikbaar. Er werd gebruik gemaakt van een dynamic DNS dienst om een statisch adres te verzekeren, waarbij de website steeds aan dezelfde URL bereikbaar is: http://kroonlaan392.synology.me/drupal


Drupal

Om drupal te installeren op de server gaat men eerst naar de server (Die lokaal te vinden is op: http://192.168.2.21:5000/) via de browser. Daar meld je je aan en dan ga je naar Package Center, tabblad All en vindt men Drupal als software pakket aangeboden door Synology. Van hier uit is het een simpele, GUI gebaseerde installatie.


H5P

Om H5P te installeren op drupal werd eerst de Drupal module van H5P gedownload van deze website: https://drupal.org/project/h5p. De installatie bestanden van H5P werden in de Drupal module map op de server geplaatst door direct te verbinden met de bestanden server. (die lokaal te vinden was op dit adres: \\192.168.2.21\web). Daarna ga je naar de site als admin, en activeer je de module in het Modules tabblad.

Eens de H5P module geïnstalleerd is moeten we de verschillende « bestanden » nog op Drupal krijgen. Elk bestand komt overeen met een oefening. Deze bestanden vindt men op de website van H5P: http://h5p.org/content-types-and-applications.

Voor elk bestand is er een demo zodat men precies weet wat het inhoudt. Alle gewenste bestanden dienen eerst via deze link gedownload en opgeslagen te worden. Daarna moet men terug naar Drupal gaan om de H5P bestanden up te loaden en beginnen te gebruiken. Twee stappen moeten hier uitgevoerd worden :

1. Add Content > Interactive Content > HTML5 Content> Upload

  • Dient om de eerste gedownloade bestanden up te loaden om er op het platform van Drupal gebruik van te kunnen maken. Eénmaal geüpload komen de bestanden in de Drop down « Content type » te staan.

Spijtig genoeg hebben we voor onbekende redenen de zeer attractieve « Interactive video » en «Presentation » bestanden niet kunnen uploaden. We hebben toch beslist om verder te gaan met H5P omdat de combinatie van een website met goede didactische oefeningen toch een leuk idee bleef voor ons restaurantconcept.

2. Add Content > Interactive Content > HTML5 Content> Create

  • Deze functie is enkel mogelijk vanaf het moment dat de te gebruiken H5P bestanden reeds geüpload zijn en dient om een nieuwe oefening aan te maken (1 type oefening/bestand). De gewenste soort oefening wordt via de Dropdown geselecteerd.

Na het selecteren van de oefening kunnen de stappen voor het opstellen van de oefening gemakkelijk gevolgd worden. De oefening moet een titel krijgen en de didactische inhoud van de oefening dient uiteraard door de admin ingevoerd te worden.


GIMP

We hadden in Xerte gezien dat we hotspot images konden maken, en we waren dus van plan om dat in ons project ook te gebruiken. We merkten echter snel dat deze optie niet bestond op H5P. Er bestaat wel iets gelijkaardigs op H5P, de “interactive video” oefening, maar zoals hierboven vermeld konden we deze oefening niet uploaden. We hebben besloten om te zoeken naar een andere manier om zo’n interactieve foto te gebruiken. Door wat opzoekwerk op Google, leerden we dat dit mogelijk was met “Gimp”, dat ook meteen een vrij open-source programma is.

Om een image map (zo heet dat in Gimp) aan te maken, volg je deze stappen:

1. Download gimp op http://www.gimp.org/downloads/

2. Open het programma

3. Klik op “file”, en “open” : selecteer de foto die je wil gebruiken in jouw afbeeldingen

4. Ga dan naar “filters” > “web” > “image map”: er opent zich een nieuwe venster met jouw foto

5. Kies in de kolom links van jouw foto één van de drie vormen. Met die vormen ga je gebieden selecteren die je wilt hotspotten.

6. Selecteer het gewenste gebied, en klik dan nog een keer waar je muis zich nu bevindt, om een venster te openen.

Het verschil met hotspotten in Xerte is dat je hier enkel kan hotspotten naar een link, door op een gebied te klikken. In Xerte kan je gewoon door op het gebied te gaan met je muis, een woord zien. In ons geval hebben we dan besloten om bij elk woord te verwijzen naar de correcte wiktionary pagina.

7. In het venster dat nu open is, klik je op “website”, en plak je het adres in de url balk.

8. Klik op “save”.

9. Herhaal stap 7 en 8 voor alle gebieden die je wilt hotspotten.

10. Ga weer naar “files”, en klik op “save as”.

11. Selecteer de map waarin je het wilt opslaan, en geef het een naam (laat de .map wel staan!)

12. Ga naar de map waar je het document in hebt opgeslagen, en verander “.map” in “.html”.

13. Een venster opent met een boodschap, klik op “ok”.

Tot hier dus geen probleem. Wanneer je het document dat je net naar .html hebt veranderd en vervolgens opent met een tekstverwerker als notepad, krijg je de code voor de image map. Deze code moet je dan kopiëren en plakken in het tekstvlak van een artikel dat je aanmaakt op Drupal. Echter, er moesten volgens alle gelezen en bekeken tutorials iets veranderd worden in die code, maar wat en hoe was nooit duidelijk.

Uiteindelijk hebben we toch begrepen dat de “image source” aangepast moest worden naar een online link naar die foto. Dus waar het in de code zegt <img src=”(iets)”>, moet dat veranderd worden naar <img src=”(link naar de foto)”>.

In Drupal creëer je dus een artikel en plak je deze code in het tekstvlak. Je moet dan ook in de opties “filtered html” aanpassen naar “full html” opdat de foto zou verschijnen.

Het tweede probleem was dat de hotspots niet werkten. Ook hier hebben we nog gezocht naar verdere tutorials, maar ze leggen deze stappen nooit uit, en gaan enkel over de stappen in Gimp zelf. We hebben dus zelf moeten prutsen, en werken door middel van trial and error.

Na een tijdje hebben we geprobeerd om de naam van de map te veranderen. Standaard staat er “usemap=#map” en <map name=”map”>. Dat hebben we veranderd naar “usemap=#resto” en <map name=”resto”>. Nu werkt de image map.

Nog eens de stappen samengevat na stap 13:

14. Open het .html bestand met de notepad en kopieer de code.

15. Maak een nieuw artikel aan in drupal, en plak de code in het tekstvlak.

16. Verander wat er staat na “img src=” naar een link naar de foto*

17. Vervang het “map” gedeelte na de “=” in “usemap=#map” en <map name=”map”> naar een ander woord (zelfde woord in beide).

18. Onder het artikel staat “filtered html”. Verander dat naar “full html”.

19. Publiceer het artikel.

Telkens als je op een element uit de foto klikt, wordt je nu doorverwezen naar de gekozen link. Het is wel niet handig dat je hiervoor de website moet verlaten. Toevallig zijn we in een tutorial over coderen op de oplossing gevallen. Op het einde van elke code die naar een hotspot verwijst (begint met “area shape=”), schrijf je net voor de twee laatste tekens (/>) het volgende: target=”_blank”. Nu opent elke link zich in een nieuw tabblad.

* In ons geval hebben we de foto op de server geplaatst in plaats van op een website (om bv. geen flickr te moeten aanmaken, en om er ook volledige controle over te hebben), maar het werkt ook met een gewone internetlink.


Het filmen

Een van de groepsleden is jobstudent in een frituur/broodjesbar. Deze zaak werd door de eigenaar ter beschikking gesteld om te gebruiken als filmlocatie. Enkele vrijwilligers werden gevonden die een script, opgesteld door de groep, hebben voorgelezen. Een groepslid heeft dit gefilmd met zijn smartphone. Na verschillende takes werden de resultaten gedeeld via Dropbox. De foto’s op de website zijn ook getrokken in dezelfde zaak.


Het editen

Om de video’s zo leervriendelijk mogelijk te maken werden ze geëdited met een Video Editor. Omwille van de beperkte mogelijkheden bij het gebruik Open Source Video Editors die binnen Windows werken (zoals Avidemux), werd er geopteerd voor de Windows Movie Maker die gratis te verkrijgen is binnen Windows. Voor alle video’s werd er een begin- en een eindtitel toegevoegd met informatie of de inhoud van de video of instructies over de volgende stappen, zoals het overgaan naar oefeningen. Met het gebruik van bijschriften werd er voor de video van “Chapter 1: Making a reservation” ondertitels vrijgegeven om de leerlingen te helpen.

Conclusie

Deze groepsopdracht heeft ons vooral geleerd om op een zelfstandige en constructieve manier te werken en nieuwe technologische programma's te ontdekken en uit te testen.

We hebben geleerd te werken binnen Drupal en H5P en voor sommige leden van de groep was het ook de eerste keer dat ze met Dropbox en Google Docs werkten. Door de beperkte auteursrechten hebben wij ook geleerd praktischer te werken met Creative Commons en sommige Wikipedia-pagina's.

Het is spijtig dat we veel problemen binnen H5P zijn tegengekomen, anders was het programma op zich heel interactief en aantrekkelijk voor de studenten met vele foto’s en video’s. Voor de admins was Xerte wel gebruikersvriendelijker dan Drupal en H5P. Daarbij is het interessant te noteren dat H5P vrij nieuw is en dat ze zelf op hun site hebben verwezen op het feit dat het voor het moment nog met Drupal of Joomla werkt, maar dat het hun intentie is dat H5P onafhankelijk wordt, wat de toegang tot het programma en het gebruik ervan zou kunnen vergemakkelijken.

Naast Drupal en H5P hebben we tijdens onze zoektocht ook met andere leerplatformen kennisgemaakt, wat ons een bredere zicht geeft op de bestaande mogelijkheden naar de toekomst toe.

Linken

Referenties

Video's: zelf gefilmd

Reservatiefoto: zelf getrokken

Tafelfoto: zelf getrokken

Logo: http://commons.wikimedia.org/wiki/File:Cutlery.svg

Appendices

Appendix 1: Overzichtsmatrix van individuele bijdragen

Overzichtsmatrix
Wie Onderzoek Aanwezigheid bij de 5 vergaderingen Aanmaak leermateriaal Gebruikte tech Rapport Presentatie
Michaela Beck Xical, Exelearning, Courselab, Moodle, H5P, Drupal 5/5 lay-out, sidebar, structure, embed video's, Creative Commons Licentie Dropbox, Google Docs, Drupal, H5P, YouTube Verwezenlijking, Conclusie presenteren, computer-management, slides
Marie Giannone GLO maker, Moodle, Scenari, Iris, Edubuntu, H5P, Drupal, Joomla, Quandary 5/5 hfdst 1 Dropbox, Google Docs, Drupal, H5P, Video Editor Lay-out en structuur rapport op Wiki, Gebruikte technologieën, Verwezenlijking, Conclusie presenteren, computer-management, slides
Enjo Hendriks Courselab 2/5 hfdst 2 Dropbox, Google Docs Samenvatting, Verwezenlijking, Conclusie presenteren, slides
Sarah Leclercq Xical, Moodle, H5P, Drupal, Quandary 4/5 hfdst 3 Dropbox, Google Docs, Drupal, H5P Verwezenlijking, Conclusie presenteren, slides
Samantha Sioen Xical, Courselab, Exelearning, GIMP, GLO maker, Scenari, H5P, Drupal, Joomla 5/5 hfdst 3 Dropbox, Google Docs, Drupal, H5P, GIMP Verwezenlijking, Conclusie presenteren, slides
Anika Thommen What2learn, Hotpotatos, Xical, Qt, Courselab, H5P 1/5 hfdst 4 Dropbox, Google Docs Doel en concept, Conclusie presenteren, slides

Handtekeningen

--Sarah Leclercq (talk) 10:19, 5 May 2014 (CEST)

--Enjo Hendriks (talk) 17:37, 30 April 2014 (CEST)

--Samantha Sioen (talk) 12:54, 4 May 2014 (CEST)

--Anika Thommen (talk) 21:45, 4 May 2014 (CEST)

--Marie Giannone (talk) 22:35, 4 May 2014 (CEST)

--Michaela Beck (talk) 22:45, 4 May 2014 (CEST)