HANDLEIDING. Medemogelijk gemaakt door Team15 Communication & Multimedia Design Zuyd Hogeschool

Transcriptie

1 HANDLEIDING Medemogelijk gemaakt door Team15 Communication & Multimedia Design Zuyd Hogeschool

2 VOORWOORD Een van de meest essentiële nieuwe technieken is codetaal. Graag willen wij dan ook kinderen laten kennis maken met deze techniek. Dit in de meest basale vorm. Een kind kan hierdoor een eerste stap zetten in de wereld van de nieuwste technieken. Naast de standaard vakken die basisschool leerlingen elke week behandelen, vinden wij dat de technologie van tegenwoordig nog weinig onder de aandacht wordt gebracht in het basisonderwijs. Vandaar dat wij deze workshop aanbieden, zodat leerlingen al vroeg grip krijgen op de technologie van de toekomst. Onze missie is dan ook om dat eerste kleine zetje te geven, zodat hij of zij later zelf zijn/haar weg kan vinden in deze nieuwe wereld. In deze handleiding vind je stap voor stap wat u moet doen om deze workshop zelf bij u op school te geven aan de leerlingen. Lees alles aandachtig door en download de bijbehorende bestanden op de website: Wij wensen u veel plezier met deze leuke en leerzame workshop! P.S. Mocht het niet helemaal lukken of heeft u vragen? Neem dan gerust contact met ons op. Wij geven u vrijblijvend advies op maat. Handleiding For Each Child 2

3 INHOUDSOPGAVE 1. Benodigdheden... 4! Tijd... 4! Benodigd materiaal... 4! Kennis Voorbereiding... 4! Downloaden... 4! Materiaal Introductie Mini-workshops Het spel De mogelijkheden Flappy bird Afsluiting Handleiding For Each Child 3

4 1. BENODIGDHEDEN Ter voorbereiding van deze workshop heeft u het volgende nodig: Tijd De workshop duurt ca. 1,5 uur. Benodigd materiaal! laptop/pc s met internetverbinding! een muis en toetsenbord! camera met SD-kaart en/of computer kabel! geruit papier (1cm x 1cm)! en/of pennen, potloden, stiften! printer met A4-papier! projector en/of smartboard! begeleiding Kennis Enige kennis van Processing (codetaal) is nodig om deze workshop te kunnen uitvoeren. Echter is de workshop zo ingericht dat alles duidelijk is omschreven; zodat iedereen het kan begrijpen. Handleiding For Each Child 4

5 2. VOORBEREIDING Indien u voor de eerste keer gaat werken met coderen/programmeren en/of het programma Processing, raden wij u aan al het materiaal goed door te nemen. Bij eventuele troubleshooting 3 kunt u gebruik maken van de website of u kunt natuurlijk vrijblijvend contact met ons opnemen. Downloaden Vraag bij uw ICT dienst na als er programma s kunnen en mogen geïnstalleerd worden en/of een nieuwe versie van JAVA geïnstalleerd is. Zonder het programma Processing te downloaden en/of JAVA kan de workshop niet worden uitgevoerd. (U kunt bijv. wel het programma installeren op een laptop en de workshop via een projector of smartboard uitvoeren). Nadat uw het technische gedeelte heeft weten te regelen kunt u verder met het downloaden van het programma Processing. Ga naar onder het kopje workshop vindt u een video instructie die u precies vertelt hoe u het programma Processing kunt downloaden. Het filmpje duurt ongeveer 3 minuten. Daarnaast moet u enkele bestanden downloaden, die u gaat gebruiken ter voorbereiding en tijdens de workshop. Deze kunt u vinden op de website Materiaal Bij gebruik van laptop/pc s Ter voorbereiding van deze workshop raden wij u aan, het programma op alle computers te installeren en even te laten lopen. Zodat eventuele problemen tijdig opgelost kunnen worden. Bij gebruik van projector/smartboard Zorg ervoor dat de connectie met uw laptop en projector/smartboard sterk is. Controleer de synchronisatie en de kleuren. (Het kan zijn dat deze niet met elkaar overeen komen; dit kan u simpelweg oplossen door naar uw configuratie scherm te gaan). Printen Er staan twee bestanden op de downloadpagina, die bedoeld zijn om de kinderen enige houvast te geven tijdens de workshop. Deze formulieren zijn ook handig voor de docent(e); deze kunnen namelijk prima als spiekbriefje gebruikt worden. Instructies: Het Spel In dit bestand staat stap voor stap de opdrachten die u met de leerlingen kan doorlopen tijdens de mini-workshop: Het Spel. Cheat sheet In dit bestand staan enkele fundamentele begrippen voor de leerlingen, om te beginnen met coderen. Erg handig wanneer zij zelf aan de slag mogen gaan met code. Handleiding For Each Child 5

6 3. INTRODUCTIE De workshop begint met een klassikale introductie. U kunt hierbij de PowerPoint gebruiken die u hier kunt downloaden Geef een korte uitleg over de workshop, geeft niet te veel weg. De kinderen moeten zelf gaan ondervinden wat het werken met code inhoud. Introductie: (Dia 1) Wij gaan jullie vandaag laten werken met code. Vragen stellen aan de klas:! Iemand een idee wat je kan doen met code?! Iemand al eens gewerkt met code? Indien iemand antwoord geeft, ga hierop in. Betrek de kinderen in de conversatie. Indien géén antwoord, vraag verder; betrek hierbij hedendaagse hypes die bekend staan bij de leerlingen. (Bijv. Heeft iemand al eens gehoord van Minecraft/ Skylanders/ Flappy bird?). Leg uit dat al deze hypes gemaakt zijn met code. (Ga naar de volgende dia) (Dia 2) Op deze dia staat een afbeelding van een code. Leg hierbij uit dat dit een code is van een Spongebob Squarepants spelletje. Leg hen uit dat een code er misschien wat saai uit ziet, een code staat uiteindelijk alleen maar uit symbolen, letters en cijfers. Maar wanneer dit in werking wordt gezet. (Ga naar volgende dia) (Dia 3) Speel het filmpje af van de code in werking. Aan het einde van het spelletje kun je aan de leerlingen vragen wat zij van het spelletje vonden. Naast games maken, kun je natuurlijk véél en véél meer met coderen en programmeren. (Ga naar de volgende dia) (Dia 4) Speel het filmpje af met voorbeelden van de nieuwste technologieën van tegenwoordig. Vraag de leerlingen nogmaals wat zei hiervan vonden. (Klassikale participatie is erg belangrijk, hiermee vraag je de leerlingen op te letten en hun aandacht erbij te houden). Hoogstwaarschijnlijk zijn de leerlingen lichtelijk perplex en vragen ze zich af, hoe zij dit zelf moeten gaan doen. Leg hen uit dan jullie tijdens deze workshop natuurlijk beginnen bij de basis van coderen. (Ga naar volgende dia) (Dia 5) Ten slotte ga je de groep (Indien dat mogelijk is) in 3 groepjes opsplitsen. Ieder groepje gaat vervolgens aan de start met de mini-workshops en roteren om de ca. 20 minuten van onderdeel. Geef aan dat wanneer de kinderen vragen hebben, zij hun hand moeten opsteken. Zodat de vragen zo goed mogelijk beantwoord kunnen worden.! LET OP: is het niet mogelijk om de groep in 3-en op te splitsen. Kijk dan naar andere mogelijkheden binnen de school/groep. Misschien kan het wel in twee groepjes, of indien de klas niet al te groot is, kan alles klassikaal worden gegeven. Weet u zelf geen oplossing te bedenken, neem dan met ons contact op voor advies op maat. Handleiding For Each Child 6

7 4. MINI-WORKSHOPS Er is gekozen voor een drietal mini-workshops om de leerlingen in korte tijd zo gevarieerd mogelijk de mogelijkheden van codetaal te laten ervaren. 1. Het spel Opdrachtomschrijving Tijdens deze opdracht wordt een spelletje vormgegeven doormiddel van coderen. Het spel is helemaal functioneel, alleen nog kaal. In de code is bij elke regel duidelijk geschreven wat de regel precies doet voor het spel. Hieronder staat een de basis-code regels die je kan gebruiken. Hier staat wat je allemaal zou kunnen veranderen met nummers ervoor. Deze nummers staan ook als commentaar in de code, zodat dit makkelijk te vinden en te veranderen is. De mini-workshop in 6 variërende stappen 1. Achtergrond Door tussen de haakjes in background(255); een ander getal in te voeren, kunt u de achtergrondkleur veranderen. Dit kan een getal van 0 tot 255 zijn voor grijstinten. Wilt u echter een andere kleur, dan moet u gebruik maken van het RGB-systeem. Gebruik hiervoor het bestand Hand-out-sheet die te vinden is in de download map op onze website ( Deze kunt u ook prima gebruiken om uit te delen aan de leerlingen, zodat zij af en toe ook eens kunnen spieken. 2. Kleur van de cirkel/tekst Fill(); staat voor kleur van componenten waaraan geen andere kleur is toegevoegd. De kleur van deze componenten veranderen, gaat op dezelfde manier als bij de achtergrond. 3. Cirkel in een vierkant veranderen Om de cirkel in een vierkant te veranderen moet u het woord ellipse vervangen met rect, dus niet ellipse(), maar rect(). De getallen tussen de haakjes staan respectievelijk voor positie op de x-as en y-as, breedte en hoogte van de cirkel. 4. Snelheid Door het getal achter int speed te veranderen kunt u de snelheid van de cirkel aanpassen. 5. Richting van de cirkel Door het getal achter int xdir te veranderen in een negatief getal kunt u de richting van de cirkel omkeren. 6. Aantal levens aanpassen Het getal achter int levens kunt u aanpassen naar het aantal levens dat u wilt instellen.! TIP: Laat de leerlingen vooral mee doen tijdens al deze stappen, zo is het meteen duidelijk voor u als docent, wanneer ze alert zijn, of ze het snappen en of ze het ook leuk vinden. Handleiding For Each Child 7

8 2. De mogelijkheden Opdrachtomschrijving In dit onderdeel worden verschillende voorbeelden over codetaal aan de leerlingen getoond. De voorbeelden gaan over hedendaagse producten en over de toekomst. Bij deze voorbeelden kan gedacht worden aan robots, Xbox Kinect, Oculus Rift e.d. De leerlingen worden doormiddel van dit onderdeel geïnformeerd over de mogelijkheden van hedendaagse technologie en gestimuleerd om meer met codetaal te doen. De mini-workshop in 3 simpele stappen 1. Inleiding Leg de leerlingen uit wat ze te wachten staat. Laat hen weten dat ze dadelijk naar voorbeelden gaan kijken van hedendaagse technologie en dat zij hun handen mogen opsteken wanneer ze al iets weten over het onderwerp en/of vragen hierover hebben. 2. Vragen Vraag tussen de voorbeelden door aan de kinderen als zij al enige kennis hebben van hedendaagse technologieën. Voorbeeldvragen - Wie heeft er een Xbox en/of Playstation? - Wie kent het spel Flappy Bird? - Heeft iemand al eens nagedacht over hoe iets wordt gemaakt? 3. Voorbeelden U gaat tijdens dit onderdeel voorbeelden laten zien van nieuwe technologieën op het gebied van programmeren. Hieronder staan enkele links die wij tijdens de workshop gebruiken. Voel u vrij om hier uw eigen favorieten aan toe te voegen, zo kunt u ook gemakkelijk erbij uitleggen wat er in de video s gebeurt en hoe het in zijn werk gaat. - Oculus Rift: - Xbox kinect: TIP: veel van deze video s zijn helaas alleen maar in het Engels te vinden. Laat de leerlingen niet alleen maar kijken, maar pauzeer de video s zo nu en dan om uit te leggen wat er wordt gezegd, vraag eventueel wat eenvoudige vragen over de video en/of geef de leerlingen even de tijd om zelf vragen te stellen. Bij dit onderdeel is interpretatie vooral van belang. Kijk of de video s aansluiten bij het publiek: Ja? Prima, u kunt dit onderdeel met gemak afronden. Nee? Laat de kinderen niet te lang naar de video s kijken. Hierdoor raken zij misschien hun aandacht kwijt, terwijl dit helemaal niet hoeft. U kunt dan beter de kinderen meer tijd geven bij de andere twee onderdelen. Handleiding For Each Child 8

9 3. Flappy Bird Opdrachtomschrijving In dit laatste onderdeel krijgen de leerlingen de kans om hun eigen versie van Flappy Bird te maken. De leerlingen krijgen de opdracht om hun eigen personage te tekenen op een vel papier. Eenmaal gekozen voor één van de vogels, wordt de tekening gefotografeerd en in het spel geplaatst. Et voila! Hun eigen creaties komen tot leven. Voorbereiding! geruit papier (1cm bij 1cm)! kleurpotloden of stiften! computer met Processing en Adobe Photoshop/Illustrator of Microsoft Paint! camera met SD kaart of computer kabel De mini-workshop in 4 simpele stappen 1. Inleiding U begint met een uitleg waarin u aan de leerlingen vertelt dat alles wat je op een beeldscherm ziet gebeuren gebaseerd is op code, en dat je deze code ook zelf kunt schrijven. Er wordt vertelt dat het maken van een spelletje begint met een idee, vervolgens wordt er een eerste schets getekend en daarna wordt gekeken hoe je het in de computer verwerkt. Omdat de leerlingen zelf digitaal beeld gaan creëren wordt hen uitgelegd dat een beeldscherm uit allemaal kleine pixels (4) bestaat en dat je bij alles wat je maakt hier rekening mee moet houden. 2. Tekenen De kinderen mogen nu zelf een vogeltje tekenen; deze moet voldoen aan bepaalde voorwaarden. De tekening mag namelijk alleen maar bestaan uit: - driehoekjes - vierkantjes - rondjes Ze mogen zelf bepalen welke kleur ze gaan gebruiken. 3. Van papier naar digitaal Stap 3 van dit onderdeel vergt veel aanvullende kennis van code en adobe programma s, waarmee de leerlingen zelf niet hands on mee in aanraking komen. Wel zal dit proces getoond worden door de leerkracht. Ze zullen een globale uitleg krijgen over hoe het in zijn werk gaat. Het is aan de leerkracht deze stap uit te voeren en dit vergt enige voorbereiding. Er wordt een foto gemaakt van de verkozen tekening. Deze foto wordt op de computer ingeladen en hier zal een digitale afdruk van worden gemaakt in het programma Adobe Photoshop/Illustrator of eventueel Microsoft Paint; hoewel dit laatste programma wel een vierkant vogeltje zal opleveren. Zorg ervoor dat de foto van dit vogeltje ongeveer 80 pixels breed en 80 pixels hoog is, in jpg (5) of png (6) formaat en de naam vogeltje.jpg/png draagt. In de map van het spel vind u een sub map genaamd data. U sleept uw afbeelding in deze map. Vervolgens dubbelklikt u op het processing bestand genaamd: Flappy_Bird.pde. Deze digitale foto wordt vervolgens in de processing map data geladen en in de code aangesproken. 4. Speel het spel Aan het eind van dit onderdeel zal er een Flappy Bird versie te spelen zijn met hun eigen creaties. Wanneer u in het processing bestand die u zojuist geopend heeft, op het play (!) knopje linksboven in het scherm klikt; start het spel. De processing sketch wordt uitgevoerd en het spel is te spelen. Handleiding For Each Child 9

10 5. AFSLUITING De workshop sluiten we af met enkele klassikale vragen. Probeer zo veel mogelijk te reageren op het enthousiasme van de leerlingen. Voorbeeldvragen - Hoe vonden jullie het? - Wat hebben jullie geleerd? - Gaan jullie als jullie thuis zijn er nog iets mee doen? Bij interesse, doorverwijzen naar de links op onze website - Wat vonden jullie het leukste onderdeel? En waarom? - Wie ziet zichzelf later werken met code? Het maken van spelletjes of websites? Sluit af met een sterke zin en bedank de leerlingen voor hun aandacht. Handleiding For Each Child 10