UNIVERZITA J. SELYEHO – SELYE JÁNOS EGYETEM PEDAGOGICKÁ FAKULTA – TANÁRKÉPZŐ KAR
PROGRAMOZÁS OKTATÁSÁNÁL FELHASZNÁLHATÓ ALGORITMUSOK ANIMÁCIÓINAK ELEKTRONIKUS GYŰJTEMÉNYE
Szakdolgozat
Márk Csóka 2015
UNIVERZITA J. SELYEHO – SELYE JÁNOS EGYETEM PEDAGOGICKÁ FAKULTA – TANÁRKÉPZŐ KAR
PROGRAMOZÁS OKTATÁSÁNÁL FELHASZNÁLHATÓ ALGORITMUSOK ANIMÁCIÓINAK ELEKTRONIKUS GYŰJTEMÉNYE
Szakdolgozat
Študijný program:
Učiteľstvo anglického jazyka a literatúry a informatiky
Tanulmányi program:
Angol nyelv és irodalom és angol nyelv és informatika
Číslo a názov študijného odboru:
7656 – Učiteľstvo akademických predmetov
Tanulmányi szak száma és megnevezése:
7656 – Tanárképzés akadémiai tárgyakban
Školiteľ:
PaedDr. Ladislav Végh
Témavezető:
PaedDr. Ladislav Végh
Školiace pracovisko:
Katedra matematiky a informatiky
Tanszék megnevezése:
Matematika és informatika tanszék
Márk Csóka 2015
Köszönetnyilvánítás Köszönetemet nyilvánítom ki témavezetőmnek, PaedDr. Ladislav Végh tanár úrnak, aki szakmai tudásával és tapasztalatával hozzájárult a szakdolgozat elkészítéséhez. Továbbá köszönöm Józsa Evelinnek a folyamatos ösztönzésért és Szalai Dávidnak a támogatásért.
Abstrakt Cieľom práce je vytvoriť databázu, ktorá je použiteľná vo vyučovaní, ktorá obsahuje väčšinu algoritmov vyskytujúcich v strednoškolskom a vo vysokoškolskom vyučovaní, poskytuje krátke vysveltovalie a obsahuje odkazy kde sa dajú aj prezrieť animované verzie daných pojmov. Práca je rozdelená do dvoch hlavných častí. V prvej časti záverečnej práce krátko rozoberám, prečo sú dôležité animácie algoritmov, dôvody na to, prečo je potrebné s ními spestreiť prednášky, ako sa stane vyučovacia hodina effektívnejšou. Potom nasleduje vysvetlenie niektorých dôležitých pojmov a rozdelenie animácií z rôznych aspektov. Zdôrazňuje tiež výskumy, ktoré skúmalil vplyv vizualizácií u študentov. Druhá časť práce sa zaoberá s prípravou webových strán. Stručne zhrniem, podľa akých kritérií som vybral animácie a akým zdrojom som dal prednosť. Na konci záverečnej práce píšem o problémoch, ktoré vznikli v priebehu prípravy tejto zbierky. Kľúčové slová: algoritmus, animácie, vzdelávanie, informačné technológie, vizualizácia
Absztrakt A munka célja egy oktatás során is felhasználható adatbázis létrehozása, amely tartalmazza a közép- és főiskolai oktatás során előforduló algoritmusok többségét, rövid magyarázatot ad és felsorol néhány linket, ahol megtekinthető az adott fogalom animált változata. A munka két fő fejezetből áll. A szakdolgozat első részében röviden leírom, miért is fontosak az algoritmusok animációi, miért érdemes az oktatás során ilyenekkel színesebbé tenni az előadást és hogyan válik effektívebbé az óra. Ezek után néhány fontos fogalom magyarázata következik és az animációk különböző szempontok szerint való felosztása. Továbbá kiemelek kutatásokat, amelyek a vizualizációk hatását vizsgálták a diákokra nézve. A dolgozatom második részében a weboldal elkészítéséről lesz szó. Röviden összefoglalom, milyen kritériumok szerint válogattam az animációkat és milyen forrásokat részesítettem előnyben. Végül szó esik a gyűjtemény készítése közben felmerülő problémákról is.
Kulcsszavak: algoritmus, animáció, oktatás, informatika, vizualizáció
Abstract The aim of this work is to create a collection which contains most of the algorithms which are occurring at high school and university studies. The database provides a short explanation and several links for each term. This work contains two major chapters. First chapter will explain why it is important to have an animated version of the algorithm, why they are useful on the lectures and how they can make lectures more effective. Afterwards are the explanations of important definitions and different classifications of animations depending on some of their aspects. Furthermore I will highlight some of the recent researches which investigated the impact of teaching with visualizations on students. The second part of my thesis will focus on the making of the web page. I will also shortly make clear why the specific animations were chosen and which sources were preferred to others. Finally, I will write about the problems, which came up during the building of this collection of algorithms.
Key words: algorithm, animation, information technology, education, visualisation
Tartalom Bevezetés ............................................................................................................................... 9 1. Az algoritmusok oktatása................................................................................................. 11 1.1. Az algoritmusokról általánosságban ............................................................................. 11 1.2. Vizualizációk készítése és alkalmazása ........................................................................ 14 1.3. Animációk hatékonyságát kutató kísérletek ................................................................. 16 2. Algoritmusok gyűjteménye .............................................................................................. 19 2.1. A HTML nyelvről ......................................................................................................... 19 2.2. A vizualizációk keresése, gyűjtése ............................................................................... 20 2.3. A gyűjtemény szerkesztése ........................................................................................... 21 2.4. Felmerülő problémák .................................................................................................... 23 2.5. A gyűjtemény lehetséges fejlesztési lehetőségei .......................................................... 24 Befejezés .............................................................................................................................. 25 Resumé................................................................................................................................. 28 Felhasznált irodalom ............................................................................................................ 31
Bevezetés „Az olyan ember, aki nem ért a számítógéphez, a XXI. században analfabétának fog számítani.” Teller Ede
Napjainkban a számítástechnika egyre nagyobb térfelet hódít magának, ezért szerencsére bekerült az iskolai törzsanyagba is. Ez a tudományág rengeteg újítást hozott, egészében változtatta meg és még jelenleg is változtatja az oktatás menetét, új eszközöket és módszereket hoz be. Mivel az informatika nagyon gyorsan fejlődik,
az
oktatástechnológiának kimondottan nehéz lépést tartania, éveken belül elavulttá válhatnak az újnak vélt eszközök. Ez a munka az animációk kiemelt fontosságát ismerteti az általános- és informatika oktatás során. A programozás oktatás esszenciális része az alap algoritmusok megértése, hiszen később ezek kombinálásával lesz a diákoknak lehetősége bonyolultabb programok megírására és az informatikai problémák megoldására. Ezért is fontos az informatikában az egyes függvények szemléltetése, mivel ezek egytől egyik absztrakt fogalmak, amelyek a diákok számára nehezen ültethetők át a való életbe, jelentősen eltérnek a többi tantárgytól, legközelebb a matematikához állnak. Ezzel egyidejűleg a tanároknak is problémát okozhat elmagyarázni az adott algoritmust. Nem megfelelő magyarázat esetén előfordulhat, hogy évekkel később tudatosul egy adott algoritmus lényege. Az algoritmusok animációi ezt a problémát hivatottak orvosolni. Több tanulmány is ígéretes és pozitív eredményeket hozott azzal kapcsolatban, hogy azok a diákok, akik a magyarázat mellett vizuális bemutatót is kaptak, gyorsabban értették meg és nagyobb sikerekkel voltak képesek a későbbi informatikai problémáknál alkalmazni az algoritmust. Sajnos hosszú évekig nem volt igény az informatika oktatás fejlesztésére, de hála az internet népszerűsödésének az utóbbi években felzárkózni látszik és egyre több kutatás is igyekszik alátámasztani az animációk használatának sikerét. A munka második felében egy folyamatosan és egyszerűen bővíthető adatbázis elkészítéséről lesz szó. Röviden ismertetve lesz a HTML nyelv és bemutatásra kerül a gyűjtemény maga is. Két okból is fontosnak tartom, hogy létezzen legalább egy gyűjtemény, ami igyekszik lefedni az oktatás során ismertetett és használt algoritmusokat. Az első nem más, mint az, hogy az oktató számára kényelmesebb, ha rendelkezésére áll egy hasonló oldal, ahol megbízható, válogatott animációk találhatók az egyes fogalmakra. A második ok pedig, hogy a diákok szempontjából jelentősen csökkenhet a bevésődésre 9
fordítandó idő és hamarabb lesznek képesek a gyakorlatban használni. Ezekhez kiváló alapot adhat egy gyűjtemény, ami az internet segítségével szinte bármilyen eszközről elérhető.
10
1. Az algoritmusok oktatása A következő három alfejezet központi témáját az algoritmusok oktatása fogja képezni. Az első alfejezetben definiálom a vizualizációk típusait, kategóriáit és néhány példa is említésre kerül. Az animációk feloszthatók irányításuk, formátumuk alapján. Az informatika-oktatásban az alapfogalmak gyakran problémát okoznak a diákok számára, mivel kezdetben nehéz megérteniük a forráskód és a lejátszódó folyamatok közötti kapcsolatot. Az absztrakt alapfogalmak, mint például a tömb, elágazás vagy a ciklus, egyaránt szemléltetésre és magyarázatra szorulnak. Az előbb említettekre jelenleg megfelelő megoldásnak tekinthető módszer az algoritmusok animációja. A vizualizációk nagyban leegyszerűsítik a tanulási, tanítási folyamatot egyaránt. A diákoknak segít elképzelni, hogy hogy is hajtja végre az adott parancsot, algoritmust a számítógép. A következő alfejezet témája az algoritmikus gondolkodás fontossága és a helyes animáció kiválasztása vagy elkészítése. A programozás és az algoritmusok megértéséhez vezető úton nélkülözhetetlen elsajátítani ezt a típusú gondolkodást. A legnagyobb problémát az okozza, hogy eltér a többi tantárgyhoz szükséges gondolkodási módtól. Az internetnek és a gyorsan fejlődő számítástechnikának köszönhetően megszámlálhatatlan opció létezik az animációk készítésére és keresésére is. A megfelelő animáció kiválasztásához körültekintően kell eljárni és több szempontot is figyelembe kell venni. Ahhoz, hogy a magyarázat tényleg sikeres legyen, nem elég a látványos animáció, de egyúttal átláthatónak is kell lennie. Ugyanakkor minden algoritmus eltérő, ezért nem minden esetben ugyanaz a forma az ideális. A harmadik és egyben a fejezet utolsó alfejezetében a vizualizációk hasznosságát vizsgáló kutatásokról számolok be. Egyre több kísérlet készül ilyen témában és az eredményeikből fontos információkat lehet levonni a vizualizációkra nézve.
1.1. Az algoritmusokról általánosságban Minden tantárgynak megvannak a maga alapfogalmai. Az informatikában ide tartoznak az algoritmusok, amelyek nélkül a tantárgy megértése a diákok számára akadályokba ütközhet, ha egyáltalán lehetséges. A tapasztalat azt mutatja, hogy egyaránt nehéz oktatni és tanulni is az algoritmusokat. Ezért is kulcsfontosságú az informatika oktatás során a lehető legjobb, legfrissebb eszközök felhasználása az algoritmusok megértéséhez. Ahhoz, hogy megértsük mi is az az algoritmus először tisztázni kell, hogy mit neveznek problémának az informatikában. A probléma egy megoldásra váró feladat, melynek során utasítások sorozatát felhasználva jutunk el az eredményig. Az algoritmus 11
maga egy olyan kifejezés, amit a matematikából vettek át és bizonyos informatikai problémák lépésről lépésre való leírását, szükséges utasítások halmazát tartalmazzák. Animációk segítségével még érthetőbbé, szemléletesebbé lehet tenni az algoritmusok oktatását, miközben a megértéshez szükséges időt is jelentősen csökkenheti. Az animációk három nagy csoport valamelyikébe sorolhatók. Léteznek nem irányítható, irányítható és kombinált animációk (Stoffová-Végh, 2010; Törley, 2009). Egyszerűbb algoritmusok esetén nincs szükség animációra, egyértelműségük miatt léteznek hatékonyabb módszerek is ábrázolásukra. Ilyen módszerek például a strukturált diagramok és folyamatábrák. A strukturált diagramok esetében minden lépés, művelet, saját mezőt kap. Minden mező egyforma, általában téglalap, csak a benne helye foglaló művelet változhat. A mezők összekötése logikus, nyomon követi a futó programot lépésről lépésre. Az ilyen ábra elkészítéséhez nem szükséges speciális program, megvalósítása Paint-ben is lehetséges, bár léteznek kifejezetten strukturált diagramok készítésére való programok is. Ezek kezelőfelülete többnyire kevesebb opciót tartalmaz és feladat orientáltabbak a gyorsabb végrehajtás, szerkesztés kedvéért. Általában kép formátumban mentenek, de létezik olyan is, ami saját formátumot is használ, hogy később is könnyen módosítható legyen a diagram. A folyamatábrák esetében különböző szabvány diagramelemek sorrendben vonalakkal való összekötéséről van szó. A különböző diagramelemek mind más-más utasítás szimbolizálására alkalmasak. Folyamatábra is megvalósítható bármilyen képszerkesztőben, de megszerkesztése nehezebb, ajánlott a célnak megfelelő program használata (Végh, 2006). Léteznek példák, amelyek esetében nem elég egyszerűen a statikus elemek grafikus ábrázolása. Ilyenkor szükséges az animációk használata, ez egy mozgókép, ami lehetőleg minimum 25 képkockát játszik le másodpercenként és ez által az emberi szem számára folyamatosnak tűnik. Animációk esetében gyakori az értékek szimbolikus helyettesítésére, ennek következtében sokkal elérhetőbbé válnak a diákok számára. A megfelelő megoldás erre a számok helyett a tárgyak, elemek domináns tulajdonságával szemléltetni az értékeket. Kiváló példa erre a rendezési algoritmusoknál mikor az oszlopok magassága, szélessége vagy XY koordinátarendszerben a foglalt helyzetükkel van szemléltetve a szám. A tanulók számára a praktikus forma sokkal előnyösebb, gyorsabban értik meg az algoritmus elvét és működését (Végh, 2006). A nem irányítható vagy irányítás nélküli animációk készítés szempontjából nagyon hasonlók a rajzfilmekhez, hiszen másodpercenként több képkocka levetítéséről van szó. Ez a kategória nem rugalmas, minden lejátszásnál ugyanaz a tartalom adott sorrendben fog 12
ismétlődni. A nevét arról kapta, hogy az animációhoz kapcsolódó beavatkozások száma minimális, többnyire kimerült az indítás, szünet, megállítás és indítási pont kijelölése lehetőségekben. Ide tartoznak a video formátumok (.mp4, .avi, .mkv), online video megosztó oldalak, mint a Youtube, Vimeo és PowerPoint-ban is megoldható. Kakukktojásként meg kell említeni a .gif formátumot, ahol semmilyen beavatkozásra nincs lehetőség, hiszen automatikusan játssza le az adott tartalmat körbe-körbe, viszont kis mérete és egyszerűsége miatt népszerű és elterjedt. Tartalmukat tekintve leggyakrabban alapelvek, működési elvek, technológiák bemutatására használatos. Ilyen animációk megfigyelése választ ad az adott folyamat működését illetően. Irányítás nélküli animációk fő kritériumai az érdeklődés felkeltése, átláthatóság és az eredmények kiemelt fontossága (Stoffová-Végh, 2010). Az irányítható animációk, ahogy nevük is mutatja, felhasználói beavatkozást igényelnek. „Az irányítható animációk kivétel nélkül egzakt matematikai modelleken alapulnak. Maga az animáció a szimulációs kísérlet eredményét szemlélteti.” Ezek a térben és időben rugalmas folyamatok képesek bizonyos korlátok közti változásra. Függnek a felhasználó által bevitt adatoktól és annak fényében változnak. Ez úgy valósítható meg, hogy az előző kategóriától eltérően itt a matematikai modell fut a háttérben és hozza létre az animációt. Nagyon fontos, hogy a készítő, többnyire programozó, megtalálja az animációhoz legjobban illő szemléltetési módot. Ez a megoldás általában több munkát igényel, de a dinamikussága kárpótolja a felhasználót. Ide tartoznak az online elterjedt Java animációk, de különböző programok is ide sorolhatók. Ilyen animációk készítése legtöbbször különböző szerkesztő felületeken (editorokban) történik. Objektum orientált programozási nyelvek, mint például a Delphi, kifejezetten előnyösek, mert előre elkészített elemekkel is van lehetőség dolgozni és vizuálisan is követhető a haladás. Mivel az említett kategóriát képviselő animációk többször is lefuttathatók különböző adatokkal, mélyebb betekintést engednek és ez miatt több tapasztalat szerezhető (Stoffová-Végh, 2010). A kombinált animációk az előző két kategória egyesítése, részben irányíthatók. Ez a típus egyszerre használ statikus és dinamikus elemeket, ezáltal még valóságosabb élményt nyújtva. Leggyakrabban különböző járművezetési oktatásoknál és hasonló speciális oktatásnál használatosak. Ez a típus kombinálja a virtuális realitás és a valóság elemeit. Más szavakkal a virtuális környezetben valós és valósan irányítható elemek szerepelnek vegyítve, a képzés szempontjából kívánt teret kialakítva (Stoffová-Végh, 2010).
13
Az előző csoportosításon túl fontos az animációkat felosztani az animációk tárgya szerint is. Létezik reális, szemmel megfigyelhető, ebben az esetben akár videofelvétel is lehetséges opció. Ez a csoport azon animációk gyűjtőhelye, amelyek akár szabad szemmel is megfigyelhetők, esetleg nagyítottak vagy kicsinyítettek a jobb megfigyelhetőség érdekében. A másik csoport a sematikus animációkat tartalmazza, amelyek ugyan a valós folyamatokat követnek, de leegyszerűsített formában. Ide tartoznak még a szabad szemmel nem, vagy csak nehezen megfigyelhető dolgok is. Az informatika oktatása során főleg ilyen animációkkal lehet találkozni, hiszen az algoritmusok elvont folyamatok. Sematikus animációk megvalósítása manapság már nem okoz gondot, rengeteg módszer létezik, hogy az elképzelést grafikus formába lehessen ültetni. Léteznek külön erre a célra kifejlesztett fizetős és ingyenes programok is (Stoffová-Végh, 2010). „Az eLearning széleskörű alkalmazásában, maga az elektronikus tananyag fejlesztésében és kivitelezésében jelentős szerepe van az animációnak.” Külön organizációk jöttek létre annak érdekében, hogy gyors ütemben fejlődhessen ez a tanítási típus. A szervezetek fő céljai közé tartozik a népszerűsítés, fejlesztés és minőség javítása is. Az ADL és SCORM szervezetek kidolgoztak egy javaslatot, ami lefekteti az alap kritériumokat a tananyagcsomagokat illetően. Ezek az előírások többek között meghatározzák a tananyag szerkezetét. Sajnos egy téma feldolgozása önmagában is sok időt és energiát igényel, de az interaktív animáció és programozási modellek készítéséhez nélkülözhetetlenek a tapasztalt informatikusok (Stoffová-Végh, 2010).
1.2. Vizualizációk készítése és alkalmazása Az animációk nagyon fontos szerepet játszanak az oktatásban. A programozáshoz és az algoritmusok megértéshez a diákoknak kulcsfontosságú elsajátítani az algoritmikus gondolkodást. Ez egy hosszabb távú folyamat, amely fejleszti a kognitív képességeket is Szántó Sándor tanulmányában az algoritmikus gondolkodás a legfontosabb céljai közé a következőket sorolja:
Tudatos, tervező magatartás kialakítása,
Önkontroll kialakítása,
Értékelés – tudatosítás (Szántó, 2002).
Tervezés során a diák átgondolja az informatikai problémát, részekre bontja és a megoldásnak szánt gondolatokat (algoritmus) mérlegeli. Elég időt hagy a megoldása értékelésére és vár a következtetésekkel egészen addig, amíg egészben láthatja a megoldását. Ez az elgondolás egybevág Pólya György matematikai probléma megoldására 14
szánt négy lépésével, amelyek a következők: feladat megértése, tervkészítés, végrehajtás, megoldás vizsgálata. Gyakran megfigyelhető, hogy a diák rossz megoldások sorozatán keresztül jut el a helyes megoldások egyikéhez. Ezek a tapasztalatok sokkal jobban elmélyülnek és képesek lesznek felidézni, használni azokat legközelebb. Ebből kifolyólag az algoritmusok és algoritmikus gondolkodás képes a kognitív gondolkodás fejlesztésére, ami az embert egész élete során végigkíséri és hasznát veszi majd (Törley, 2009; Pintér, 2012). Annak ellenére, hogy a programozás oktatás pozitív hatással van az emberi agyra, az oktatása még napjainkban is nehézkes és akadályokba ütközik. „Tapasztalatok szerint – külföldön is –, nehéz tanulni és tanítani algoritmusokat.” Ezért is fontos fejleszteni az informatika oktatásában felhasznált módszereket. A vizualizációk alkalmazása az oktatás során többnyire pozitív eredményeket hozott több kutatás eredményeként is, amelyekre később kitérek. Középiskolákban a legfontosabb a diákok számára az, hogy megértsék, hogyan működik összhangban a forráskód és a leírás, és hogy az elemi egységek összekombinálásával lesz lehetőségük később bonyolultabb, komolyabb programok megírására. Gyakori probléma, hogy a tanulók nem látják rögtön az adott algoritmus hasznát, viszont később, több haszontalannak ítélt algoritmus kombinálásával valami olyat képesek alkotni, ami érdekli őket. A diákok későbbi tanulmányai során problémát okozhat az eltérő tanulmányi háttér és tudásszint is, ezt felzárkóztatással lehet kompenzálni (Törley, 2009). Az oktatók számára fontos szem előtt tartani a „Multimédia hatás” elveit, mert implementálásukkal effektívebbé tehetik az oktatást több szempontból is. A multimédia hatás öt alapelve a következő:
Többszörös ábrázolás elve: a magyarázat hatékonyabb, ha szóban és vizuálisan is történik.
Egyidejűség elve: a magyarázat hatékonyabb, ha egyidejűleg fogadják be a képet és a hozzá fűzött kommentárt.
Megosztott figyelem elve: megjelenített kép mellé szóban és ne írásban kapják a magyarázatot.
Egyedi különbségek elve: előző három elv sokkal jobban hat alacsony tudásszintű tanulókra.
Koherencia alapelve: minimálisra kell redukálni a témához nem tartozó képet és kifejezést.
15
Az elmélet kifejezetten nagy hangsúlyt fektet a vizuális- és hang elemekre, mivel az információ befogadásának többsége ezeknek az érzékszerveknek a segítségével történik. A felsorolt elvek mellett az ajánlott, ha a bemutatásra kerülő vizualizáció rendelkezik az alábbi tulajdonságokkal is:
Rugalmas: o
platform független,
o
helyzet szerint különbözőképp magyarázható,
o
lehetséges a kód adott részének bemutatása.
Áttekinthető: o
programszerkezet, paraméterek, objektumok legyenek láthatóak,
o
lépésről lépésre kövesse a programot,
o
lehető legpontosabb legyen az adatszerkezetben történő változásokat illetően.
„Előnyös, ha az AV szoftver teljes és folyamatos vizualizációt nyújt, tehát minden elemnek (konstans, változó, adatszerkezet, objektum) lesz vizuális megfelelője, illetve világosan megmutatja a program tevékenységei, eljárásai közötti kapcsolatokat.” Az algoritmusvizualizáció hatalmas fejlődésen ment keresztül, miután egyre többen felfedezték a benne rejlő lehetőségeket. Az első kezdetleges animációktól mára eljutottak a komplex animációkig, ahol a felhasználó saját maga viheti be az adatokat, megváltoztathatja vagy akár újat is készíthet (Törley, 2009).
1.3. Animációk hatékonyságát kutató kísérletek Egyre több kutatás, kísérlet próbálja felmérni az animációkban rejlő potenciált, ám ezek a kutatások nem hoztak egységes eredményt eddig. Ezek a kutatások általában két csoportot mérnek össze, az egyik csoportnál bemutatásra kerülnek a vizualizációk, míg a kontrollcsoportnál nem történik vizuális demonstráció. Ezután a két csoport eredményei kerülnek összehasonlításra. Nem minden kutatás volt képes jelentős eltérést mutatni a két vizsgált csoport között. Feltételezték, hogy olyan feladatoknál figyelhető meg a különbség, amelyek több energiát és gondolkodást igényelnek, egy szóval bonyolultabbak. Nagyon fontos továbbá, hogy az adott algoritmus a lehető legmegfelelőbb módon legyen ábrázolva. Erre nincs általános megoldás, de kezdetnek a fentebb említett rugalmasságot és áttekinthetőséget érdemes szem előtt tartani. Minden algoritmus eltérő, ezért bemutatása is más vizualizációt kíván.
16
Kehoe és munkatársai tanulmányukban a házi feladathoz hasonló helyzetben vizsgálták a diákokat. A hallgatókat két csoportra osztották és figyelembe vették az egész év alatt elért eredményeiket és az év végit egyaránt. A kurzus témája a binomiális kupac volt, a két csoport közti egyetlen különbséget az jelentette, hogy az egyik hozzáférhetett a témához készített, gyűjtött animációkhoz is. Az eredmények azt mutatták, hogy az utóbbi csoport a segédanyag miatt jobb eredményeket ért el és viselkedésükben is pozitív változásokat fejtett ki, ösztönözöttebbek és magabiztosabbak voltak. A kutatók megjegyezték, hogy az említett vizsgálatot jó tanulókkal végezték, gyengébb képességű tanulóknál lehetséges, hogy más eredményeket kapnak (Kehoe, 2001). Több vizsgálat is alapul a Jeliot 3 nevű ingyenes, Java alapú programot választotta. Ez a program egy olyan környezetet biztosít, ahol a programozással ismerkedő diákok egy időben látják a program kódját és animációját. A program lényegében egyfajta szimulátorként működik, ahol az animáció azt mutatja, hogy fordítja le magának a program a kódot. Ezáltal a diákok számára minden parancs lefutása egyértelműen nyomon követhetővé válik. Mint az összes többi módszernek, ennek is megvannak a maga előnyei és hátrányai. Előnyei közé tartozik, hogy képes többek között elágazás és ciklus bemutatására, elágazás és ciklus esetén képes indokolni a választott útját. Hátrányaihoz tartozik, hogy nem programozási nyelv független, Java oktatásánál használható leginkább (Törley, 2009). Egyik ilyen kutatást egy Jeliot 3-al foglalkozó kurzus egész hosszában végezték el és többször értékelték a tanulókat. Az eredmények arra engedték következtetni a kutatókat, hogy a program segített megérteni a tanár mondandóját. Megfigyelték, hogy a legjobb eredményeket a közepes képességű tanulók körében váltotta ki ez a módszer (Bassat, 2002). Ebel és Ben-Ari vizsgálatai a tanulók figyelmét helyezték előtérbe. Abból indultak ki, hogy a figyelem és a tanulás hatékonysága kölcsönösen függnek egymástól, ezért magatartás- és figyelemzavaros tanulókon végezték a kutatást. Az eredményekből kiderült, hogy a Jeliot használata közben nem volt probléma az amúgy is problémás diákokkal. Egyértelműen lefoglalta őket az említett típusú oktatás (Ebel-Ben-Ari, 2006). Moreno és Joy vizsgálata ellenben arra mutatott rá, hogy ez a program sem tökéletes. Kutatásuk során önkéntes első éves egyetemistákat figyeltek meg, akiknek nem volt programozás terén előzetes tapasztalatuk. Eredményeik alapján a program nem elég rugalmas ahhoz, hogy „különböző tudásszinten levő tanulókat vagy használati sablonokat
17
támogasson.” Csak az átlagos tanulók esetében sikerült jelentős különbségeket feljegyezniük (Moreno-Joy, 2006; Törley, 2009). A következő kutatás is hivatkozik a már korábban említett informatikaoktatás nehézségeire. A programozást kezdő diákok számára nehéz a valós probléma megoldására algoritmust írni. A hagyományos megközelítés túlzottan matematikai és absztrakt számukra. A kutatás fókuszát 14-17 éves diákok képezték és a számukra kialakított web alapú környezet (Macromedia Flash). Minden elvet a lehető legegyszerűbben és legrövidebben foglaltak össze, miközben a szakkifejezések folyamatosan jelen voltak. Az órák játékprogramszerű feladatokkal voltak megerősítve, amelyeket sokkal jobban tudtak a hallottakhoz kötni, mint a hagyományos módszert. A kutatók és a diákok is pozitívan értékelték a módszert (Andrew Rudder - Margaret Bernard -Shareeda Mohammed, 2007). Peter Bellström és Claes Thorén kutatásukban a hagyományos, szintaxis szempontú oktatást látják az oktatási nehézségek elsődleges okának. Továbbá problémának látják a diákok eltérő programozással kapcsolatos hátterét, tudásszintjét. Az alapvető programozási tapasztalat megszerzéséhez szükséges tudást négy részre osztották: számtani-, programozás környezeti-, programozási nyelv- és az átfogó tudás átalakítása logikai ismeretekre. Kutatásuk tárgyául a buborékrendezést választották, mivel ez egy egyszerű rendezési algoritmus, ami remekül szemlélteti magát a tömböt és a rendezési folyamatot is. Az animációt PowerPointban készítették el és lejátszása közben magyarázatra is sor került. A vizualizáció befejezése után a forráskódra került sor és az is részletes magyarázatot kapott. Az előadás után a hallgatóknak két kifejtős kérdésre kellett válaszolniuk, amiből összességében pozitív eredmény született. A pozitív fogadtatáson felbuzdulva új, bővített kutatást terveztek nagyobb csoporton és hosszabb távon (Bellström-Thorén, 2009). Tágabb értelemben véve egy oktató játék felfogható, mint irányított animáció. Ebben a kutatásban a Wu’s Castle elnevezésű oktatóprogram hatását figyelték egy szemeszteren át egy csoporton. A játék használata nem volt kötelező, így természetesen alakult ki a kontroll csoport. A program fő célja a ciklusok és tömbök megértéséhez szükséges tudás átadása, begyakorlása játék környezetben, ahol különböző témához kapcsolódó feladatokat kell megoldani. A ciklusok és tömbök nem véletlen választás, felmérések szerint ez a két téma élen jár a kezdő informatikus hallgatóknak legtöbb problémát okozó témakörök között. Az eredmények azt mutatták, hogy a programot használók statisztikailag jobban teljesítettek az egész szemeszter alatt és a kérdőívek összesítése is pozitív eredményt hozott (Eagle-Barnes, 2008).
18
2. Algoritmusok gyűjteménye A munka második fejezetét egy általam készített algoritmus vizualizáció gyűjtemény elkészítése képezi. Az első alfejezetben a HTML nyelv rövid bemutatása található és néhány sajátossága, valamit a készítéshez felhasznált szoftverek ismertetése. A következő rész a vizualizációk gyűjtésére fókuszál. Formátumok szempontjából négy kategória, míg források szempontjából kettő jelentős csoport említhető meg. Az elméleti részben tárgyalt helyes vizualizáció tulajdonságai mellett fontos volt, hogy egy fogalomra több link is legyen, amelyek lehetőség szerint más formátumot képviselnek. a felhasználói igényt bizonyítja, hogy már jelenleg is több különböző gyűjtemény van az interneten és folyamatosan újak látnak napvilágot. Ezeknek a kollekcióknak is megvannak a maga előnyei és hátrányai. Az elegendő link összegyűjtése után a forráskód megírására került a sor, ahol fontos szempontnak számított az átláthatóság és a gyors kezelhetőség. Ismertetésre kerül pár gyakoribb és felhasznált HTML és CSS parancs. A csoportos formázáshoz CSS parancsokra volt szükség, ezek jelentősen lecsökkentették a formázáshoz szükséges idő mennyiségét. A weboldal készítése közben probléma volt bizonyos formátumokkal és többször is át
kellett
nézni,
továbbá
aktualizálni
a
válogatott
animációkat.
Mindemellett
megnehezítette a munkát az, hogy ha az elrendezésen, kialakításon változtatás történt, akkor azt a gyűjtemény összes tételére alkalmazni kellett. A második fejezet utolsó alfejezete a gyűjtemény lehetséges bővítéséről, fejlesztéséről és a benne rejlő lehetőségekről szól. 2.1. A HTML nyelvről A HTML (Hyper Text Markup Language) nyelv nagyon elterjedt és népszerű, ha web fejlesztésről, weboldalak készítéséről van szó. Szerkezetében jelentősen eltér a többi programozási nyelvtől, de kódja átlátható, könnyen értelmezhető, kezdők számára is hamar elsajátítható. Az interneten is, és könyv formában is rengeteg segédanyag található hozzá. Jelenleg a 2014-ben kiadott HTML5 az aktuális. A HTML nyelvben az egyes parancsok <> és közé íródnak. Fontos részei a elemek és ezek /-jeles lezárásai. A forráskód megírásához megfelel bármilyen szövegszerkesztő (pl. Notepad), de ajánlott az átláthatóság kedvéért az erre a célra tervezett kódszerkesztő használata, mint például Notepad++ vagy Adobe Dreamweaver. Mindkét említett környezetet kipróbáltam a weboldal szerkesztése közben, mindkettő megfelelt és feladatát kiválóan ellátta.
19
2.2. A vizualizációk keresése, gyűjtése A gyűjtemény készítésének első lépéseként egy dokumentumba mentettem címek szerint a hasznosnak ítélt linkeket, rögtön kategóriák szerint rendezve. Az egyes kategóriákhoz rögtön rövid definíciót is fűztem, hogy később egyszerűbb legyen a kód szerkesztése. Igyekeztem logikus mintában keresni, például egy algoritmusra koncentrálni és ígéretes oldal esetén megvizsgálni, hogy van-e még más fogalomra is használható animáció. Ez könnyen kivitelezhető URL-ben 1-2 szint visszalépéssel, Youtube esetén a szerző csatornájának meglátogatásával. Tapasztalatom azt mutatta, hogy ahol egy algoritmusról van vizualizáció, ott többről is található. Linkek gyűjtése során több száz weboldalt néztem át, többségében idegen nyelvűt. Ennek eredményeként több mint 140 animációkhoz vezető linket sikerült összeszedni, ezek elég széles skálán mozognak. A válogatás soron fontos volt, hogy az egyes animációk érthetőek legyenek, irányítható animációk esetében a könnyű irányítás is szempont volt. Feltételeztem, hogy különböző embereknek más és más vizualizáció a legérthetőbb, ezért igyekeztem eltérőeket keresni. Irányíthatóság szempontjából jelen vannak irányítható és nem irányítható vizualizációk is. Mindkét típusnak megvannak az előnyei és hátrányai, de mindkettőnek megvan a maga helye az oktatás, tanulás során is. Formátumok szempontjából a flash, java, .gif, Youtube típusúakat válogattam főleg. Mindegyiknek megvannak a maga sajátosságai. A .gif formátum alkalmas ciklikus animációk megjelenítésére, kis mérete és általánossága mellett hátránynak mondható, hogy hangot nem tartalmaz. További előnyei közé tartozik, hogy gyorsan elkészíthető, lejátszása nem igényel semmilyen programot és szabadon letölthetőek offline használathoz. Általában megjelenítés szempontjából is nagyon egyszerűek, a tömb elemi oszlopokkal vagy számokkal vannak szimbolizálva. A Youtube biztosította az animációk jelentős részét, népszerűsége miatt érthető. A nagy felbontású videó gyakran rendelkezett szóbeli magyarázattal is. Hátránya, hogy többnyire idegen nyelvűek és a .gif formátumhoz hasonlóan ezek sem irányíthatók. Szükség esetén külső alkalmazás segítségével ezek is letölthetőek későbbi használatra. Külön említésre méltó megoldás, ahol hagyományos néptáncok segítségével szemléltetik a különböző rendezési algoritmusokat. A keresés során több, különböző gyűjteményre is rátaláltam, ezek általában bizonyos kar, tanár, weboldal vagy programozó saját készítésű vizualizációi voltak, általában minden fogalomra egy-egy példával. Ezek linkjeit is belefoglaltam a gyűjteménybe, jellemző volt valamiféle uniformitás a kezelés és a kinézet szempontjából is. Az irányítható animációknál ez megkönnyíti a felhasználást, mivel megszokott stílus és 20
hasonló irányítási elvek vannak alkalmazva. Volt példa ehhez hasonló gyűjteményre is, ami nem magát az animációt tárolta, hanem a hozzá vezető utat, hasonlóan az általam készített weboldalhoz. Kevés volt az olyan gyűjtemény, ahol egy algoritmusra több különböző vizualizáció is volt. Léteznek olyan weboldalak, ahol lehetséges különböző algoritmusok összehasonlítása, ez kifejezetten pozitív megoldás rendező algoritmusok esetében, ahol lehetőséget biztosít különböző algoritmusok versenyeztetésére, ennek apropóján bemutatva gyorsaságukat. Külön kiemelném és ajánlom a http://sorting.at/ weboldalt, ahol rendkívül látványos animációkkal vannak szemléltetve a különféle rendezési algoritmusok, lehetőség van párhuzamosan több különböző rendezés indítására, ennek következtében összehasonlításukra is. Tartalmaz útmutatót, állítható a rendezendő tömb mérete, a kezdő rendezettségi állapota és a rendezés során méri a cserék és műveletek számát is. 2.3. A gyűjtemény szerkesztése Miután elég link összegyűlt és a meghatározások elkészültek, meg kellett tervezni a weboldal felépítését. Az oldal egy főoldalból áll, ami tartalmaz jelmagyarázatot és elérhetők róla az aloldalak. Magát a gyűjteményt 3 részre osztottam: rendezési algoritmusok, gráfok és egyéb. Áttekinthetőség kedvéért a rendezési algoritmusok és gráfok részt szigorúan vettem. A rendezési algoritmusok rész lett a leghosszabb, de ez nem okozott különösebb meglepetést. Az egyéb kategóriába olyan algoritmusok és fogalmak kerültek, amelyek bár összefüggnek a másik két téma valamelyikével, mégis inkább az említett részbe kerültek. Ilyen például a lineáris és bináris keresés, amelyek ugyan kapcsolódnak a rendezésekhez, ott viszont elvesztek volna.
1. ábra: Rendezési algoritmusok oldala 21
Az oldalak struktúrája hasonló a könnyebb kezelhetőség érdekében. A cím alatt fel vannak tüntetve a lapon található alfejezetek és a hozzájuk tartozó ugrás lehetőség. Ez hivatott megkönnyíteni a navigálást az oldalon. Az alfejezetek felépítése a következő: magyar és angol megnevezés, magyar és angol nyelvű rövid leírás, alatta soronként egy vizualizáció. A linkek formailag úgy néznek ki, hogy először ikon szimbolizálja a típusát, ebből általában következtethető, hogy irányítható-e vagy lesz-e hang. Utána következik a hyperlink. A hyperlink amennyiben Youtube-ra mutat, a videó nevét tartalmazza. Más típusok esetén, ha el volt nevezve (pl.: Selection Sort Animation by Y. Daniel Liang), akkor azt tartalmazza, ha nem, akkor örökölte a kategória címét és a weboldal kezdőlapját dőlt betűkkel (pl.: Selection Sort at www.ee.ryerson.ca). Dőlt betűk írását a kívánt szöveg
közé tételével lehet elérni. Ilyen módon jobban megkülönböztethetőek lettek. A megnevezések írásában sok különbség volt, angol esetén főleg kis-, nagy kezdőbetűk, esetleg egybe-, különírás adták az eltérést. Az előbbihez képest a magyar megnevezésekben nagyobb eltérések voltak, amelyek meghosszabbították a keresést. Igyekeztem azt a formát használni, amit a szakirodalom. Kiváló példa erre a Counting Sort, ami előfordult, mint „Számláló-, Leszámoló-, Számoló rendezés” is. A linkekre kattintva automatikusan új lapon nyílik meg a kiválasztott animáció. Erre a
tulajdonság target=blank értéke használatos. Egyes kategóriák elkülönítését vízszintes vonallal oldottam meg, amire a parancs szolgál.
2. ábra: Rövid rész a forráskódból
Ellenben a programozási nyelvekkel itt nem szükséges futtatni a kódot, elég egyszerűen menteni szerkesztőben a változásokat és böngészőben (esetemben Google 22
Chrome) frissíteni az oldalt. Miután a gyűjtemény linkjei, szöveg és címek helyükre kerültek, kész volt a nyers weboldal, ami ugyan használható, de minimálist nyújtja kinézetre. Itt jön képbe a CSS (Cascading Style Sheets) integrálása. Ezek segítségével könnyen és részletekig menően definiálhatók a HTML nyelv egyes elemei. Használata kis gyakorlás után gyors és effektív. A <style> és parancsok közé írt részben lehetséges bizonyos típusú elemek gyors és egyszerű formázása. Itt különböző ID-k és speciális címkék létrehozása mellett megvalósítható adott címke tulajdonságainak a megadása. Példaként az alábbi sor minden
paragrafus részt Arial betűtípussal és árnyék effekttel fog megjeleníteni: p { font-family: 'Arial'; text-shadow: 1px 1px 1px #aaa; } A szöveg minden tulajdonságát lehet állítani, lehetőség van többek között Google által támogatott betűtípusok meghívására, szöveg árnyékolására és vizuális elemek használatára. Háttérnek minden lapra különböző, egyszerű színátmeneteket készítettem, hogy ne rontson az olvashatóságon, de mégse legyen monoton. 2.4. Felmerülő problémák A gyűjtemény készítése során a legnagyobb problémát a Java alapú animációk okozták, mivel 2015 folyamán kétszer is, márciusban és áprilisban, kapott olyan frissítést, ami változtatott a biztonsági protokollok kezelésén. Régebbi animációk öregebb biztonsági tanúsítvánnyal rendelkeznek és ezeket az aktuális program már letiltja futtatás helyett. Ennek eredményeként mind a két esetben sok animáció, ami előtte működött, később nem indult el. Néhány kivételes esetben előfordult, hogy az áprilisi frissítéssel pár, előtte nem futtatható vizualizáció futtatathatóvá vált. Kivételek hozzáadása se oldotta meg az adott problémát. Jelenleg a Java biztonsági részében két opcióból lehet választani: magas és nagyon magas. Megfigyeltem, hogy különböző böngészők másképp reagálhatnak az adott Java kódra. Volt olyan animáció, amelyiket mindegyik sikeresen futtatta és volt olyan is, amit csak az egyik, vagy legtöbb és legrosszabb esetben egyik se. Amennyiben nem érkezik javítás erre a problémára, az érintett animációk nem lesznek többé elérhetők. A Java alapú vizualizációkat Google Chrome, Mozilla Firefox és Microsoft Internet Explorerben néztem át. A munka írásának idejekor az összes gyűjteményben szereplő animáció legalább egy böngészőben futtatható, de a kivételek hozzáadása még így is 23
ajánlott. Kivételek hozzáadása a Java Control Panel/Security/Edit Site List/Add részen elérhető. Mivel a gyűjtemény csak HTML kódból áll és a linkek száma meghaladja a százat, az egyes tételek beformázása időigényes volt. Arra is volt példa, hogy különböző címeken ugyanaz az animáció szerepelt, az ilyen redundáns linkek ellenőrzés során törlésre kerültek. 2.5. A gyűjtemény lehetséges fejlesztési lehetőségei Amennyiben a gyűjtemény a jövőben bővítés, fejlesztés alá kerülne, rengeteg lehetőséget látok a javítására. Mindenekelőtt legfontosabb egy PHP adatbázis készítése, ami megkönnyíti a linkek tárolását, bővítését és jelentősen egyszerűsíti a forráskódot. Fontos, hogy mindig naprakész legyen, az időközben halott weboldalak helyére újak, lehetőleg frissek keresése és kerülése. A PHP adatbázis elkészítése után lehetőség nyílik egy értékelő rendszer integrálására (star-, vagy thumbs system), ami a látogatók véleményét tükrözné az egyes vizualizációkról. Ez a rendszer segítené, hogy milyen animációkra van szükség. Számomra a thumbs, vagy +/- rendszer kézenfekvőbb, mert bár kivitelezése hasonló bonyolultságú, kinézete egyszerűbb. Továbbá az adatbázis lehetőséget ad különböző adatok tárolására, például utolsó megnyitás, megnyitások száma és így tovább. Az eddig felsoroltakon kívül CSS segítségével fejleszthető külalak, különböző effektekkel dinamikusabbá tehető az oldal. Az említett CSS feladatokon kívül cél még egy letisztult, felhasználóbarát design kialakítása is. A felsorolt pontok egy olyan gyűjtemény létrehozása felé vezetnek, ami az interneten, a többi hasonló oldal mellett is megállja a helyét.
24
Befejezés A munkámnak több célja is volt. Elsősorban szerettem volna bemutatni az animációkat, mint lehetséges tanítási segédeszközt. Az alapfogalmak tisztázása után nyilvánvaló, hogy az animáció önmagában nem számít új keletű dolognak, viszont a számítógépek terjedése, felhasználóbarát programok készítése lehetővé tették az említett módszer fejlődését és gyors terjedését. Fejlődés alatt értendő az animációk dinamikussága, némelyik képes tetszőleges, felhasználó által megadott adatokkal dolgozni. Napjainkban rengeteg eltérő program és módszer közül lehet válogatni, annak függvényében, hogy mit kell készíteni, mi az elképzelés. Animációk és vizualizációk készítésének ideje is jelentősen lerövidült, egyszerűsödött és új lehetőségek jöttek létre. Ha animáció szerkesztésére kerülne a sor, az első fejezet tartalmazza a fontosabb támpontokat, amiket ajánlott figyelembe venni a készítés során. A támpontok betartása során fontos, hogy a készülő vizualizáció didaktikailag helyes legyen és ellássa a feladatát, tehát felkeltse a szemlélők érdeklődését és érthető legyen. Továbbá fontos a megfelelő animáció típus kiválasztása is. Tisztában kell lenni az egyes formátumok előnyeivel és hátrányaival egyaránt, minden formátum más és más helyzetben effektív. Például egyszerű animáció készítésére, vagy rögtönzött magyarázathoz a PowerPoint is remekül alkalmazható, annak ellenére, hogy a program elsődlegesen nem ilyen felhasználásra készült. A felsoroltak mellett az internet is remek opció azok számára, akik valamilyen okból kifolyólag nem akarnak készíteni, viszont oktatás, tanulás során alkalmaznák őket. Rengeteg pozitívumuk és típusuk ellenére még mindig nem elég elterjedtek az itthoni oktatásban. A felosztások maguk, és a példák is igazolják, hogy milyen sok fajtájuk van, az oktatás szinte összes területén alkalmazhatóak lehetnének. Több kutatás is alátámasztotta, hogy a programozás terén tapasztalatlan és informatikában járatlan diákok számára nehézkes a kezdés. Nehéz áthidalni a forráskód és a végrehajtás közti űrt. Ezt a problémát olyan programokkal igyekeztek kiküszöbölni, amelyek párhuzamosan képesek követni a forráskódot és ábrázolni (pl. folyamatábrával), hogy mi is történik a fordítóban. Általánosságban elmondható, hogy kezdetben a legnagyobb problémát a tömbök és ciklusok
megértése
jelenti,
annak
ellenére,
hogy
jelentős
alapját
képezik
a
programozásnak. Informatikában a hagyományos, kód alapú oktatás nem effektív, ellenben hosszadalmas és a szükséges ismeretek megszerezése is nehezebb. Amellett, hogy más tantárgyaktól eltérően sok absztrakt, megfoghatatlan fogalommal találkoznak, amik eleinte nem is tűnnek hasznosnak, problémát jelenthet az algoritmikus gondolkodás elsajátítása is,
25
ami egy teljesen másfajta megközelítés, de pozitív hatása van a gondolkodásra és akár a mindennapi problémamegoldásra is. Ahogy az informatika közel áll a matematikához, úgy a matematikai gondolkodás és algoritmikus gondolkodás is közel állnak egymáshoz. Az algoritmikus gondolkodás céljai között szerepel a tervező magatartás kialakítása, önkontroll gyakorlása, fejlesztése és a tudatos értékelés is. A munkámban felsorolt kutatásoknál is észrevehető, hogy a különböző tanulmányok során különféle módszereket próbáltak ki, mint például a TRAKLA 2, Jeliot 3, de volt olyan is, ahol hang nélküli animációt használtak, vagy éppen folyamatot ábrázoló képeket. Mivel a kutatások a programozás oktatására fókuszáltak, jelentősen leszűkítették a kísérletben résztvevők számát. Az amúgy is szűk csoportot tovább csökkentette a kutatások hossza és önkéntes jellege. A kísérletek többsége pozitív eredményekről számolt be a vizualizációk javára, de fontos, hogy főleg az átlagos tanulók esetében mértek kedvező értékeket, a kimagasló és átlagon aluli tudásszintű tanulóknál nem volt jelentős eltérés. Ez arra enged következtetni, hogy az animációk remek lehetőséget nyújtanak az átlagos tanulók fejlesztésére, ám a gyenge tanulók felzárkóztatására tovább kell keresni a lehetséges megoldásokat. A munka második felében a weboldal elkészítését és a linkek gyűjtését tárgyalom. A gyűjtemény készítése bizonyította, hogy minden fontosabb témára már jelenleg is létezik több, különböző típusú vizualizáció. A weboldalra került linkek jelentős mennyiségét a Youtube és másféle egyetemek honlapjai szolgáltatták. Fontosnak tartom, hogy létezzenek gyűjtemények, amikhez a tanár és diák egyaránt fordulhat, ha szükségét érzi. A különböző típusú és formátumú animációk lehetővé teszik, hogy minden esetben legyen használható, például a .gif formátum ciklikus tulajdonságát és hangnélküliségét ki lehet használni, de teljesen más élményt és tapasztalatot jelenthet egy oktatóprogram vagy kommentárral ellátott videó. A válogatás során több száz weboldalt néztem át, egyes fogalmak jóval népszerűbbek és több vizualizáció készült rájuk, mint másokra. Zavaró, hogy az algoritmusok megnevezése nem egységes, magyar nyelven meg kifejezetten még rosszabb a helyzet ilyen szempontból. A fogalmak megnevezését gyakran találtam eltérő toldalékkal (pl. buborék-, buborékos rendezés, számláló-, leszámoló-, számoló rendezés), ez zavarodást okozhat és a keresést is megnehezíti. Több informatikai kar honlapján a diákoknak kellett beadandó formában elkészíteni az egyes vizualizációkat, ami kihívást jelenthet még a felkészült tanulóknak is. Algoritmus vizualizációkon belül a legnépszerűbb témáknak a rendezési algoritmusokat és gráfokat találtam, mert ezekre volt a legnagyobb 26
választék. Ezek animációi rendkívül nagy változatosságot mutattak, a letisztult, egyszerű kinézettől kezdve a sci-fi hatást keltő formáig. Az előbb említett két témakör hálásnak is mondható, mert a programozás oktatása, tanulása során elkerülhetetlenek, gyakran használatosak, mindezek mellett az animációik megalkotása is remek programozási probléma.
27
Resumé Bakalárska práca sa zaoberá animáciami algoritmov a elektronickou zbierkou animácií algoritmov na vyučovanie programovania. Cieľom práce bolo vytvoriť použiteľnú databázu algoritmov v stredoškolskom a vysokoškolskom vyučovaní. Práca je rozdelená do dvoch hlavných častí, ktoré sa ďalej členia do podkapitol. Prvá časť sa zaoberá teoretickou stránkou témy. Druhá časť je praktická, obsahuje informácie o webovej stránke a kritéria na zhotovenie zbierky algoritmov. Prvá časť rozoberá vyučovanie algoritmov, je členená do troch podskupín. V prvej podskupine sa definujú typy vizualizácií, ich kategórie aj s vhodnými príkladmi. Abstraktné základné pojmy sú často ťažko pochopiteľné pre študentov. Vizualizácia značne zjednoduší prácu učiteľa, aj učenie sa. Téma druhej podskupiny je dôležitosť algoritmického myslenia a vhodný výber animácie. Tretia podskupina sa zaoberá výskumami. Každý vyučovací predmet má svoje základné pojmy. Vo vyučovaní informatiky sem patria algoritmy, ktoré sú ťažko pochopiteľné pre študentov. Vyučujúcim tiež spôsobuje ťažkosti ako priblížiť túto tému študentom. Algoritmus je pojem prevzatý z matematiky. V informatike je opis informatických problémov uvedený krok za krokom. Pomocou vizualizácií sa dá efektívnejšie, názornejšie vyučovať algoritmy, čím sa významne skráti čas, ktorý študenti potrebujú na ich pochopenie. Na zápis algoritmov do vizuálnej formy sa najčastejšie používa štruktúrovaný alebo vývojový diagram. Na znázornenie diagramov je veľa možností. Sú príklady, keď jednoduché znázornenie nestačí, vtedy je potrebné používať animácie. Pre študentov je to praktickejšia forma, rýchlejšie pochopia metódu a fungovanie algoritmov. Pod pojmom animácie najčastejšie rozumieme premietanie obrázkov pri frekvencii cca. 25 obrázkov za sekundu, čím sa vytvorí spojitý pohyb. V tejto časti práce sú spracované možnosti animácie, rozpísané ich pozitívne a negatívne stránky. Animácie majú dôležitú úlohu vo vyučovaní. Pri programovaní a pochopení algoritmov u žiakov je prvoradé, aby si osvojili algoritmické myslenie. Je to dlhodobejší proces, ktorý rozvíja kognitívne zručnosti. Napriek tomu, že vyučovanie programovania má pozitívny vplyv na ľudský mozog, ešte aj v dnešnej dobe je ťažko realizovateľné. Vyučujúci sa stále stretávajú s prekážkami, preto je dôležité stále vyvíjať vyučovacie metódy v informačnej technológii.
28
Dôležité je, aby žiaci v stredných školách dostali v tejto problematike dobrý základ, na ktorý budú vedieť počas štúdia nadviazať. K tomu je potrebné, aby vyučujúci vždy vybral vhodnú metódu zo všetkých aspektov. Stále viac výskumov sa snaží zistiť, aký potenciál sa skrýva v animáciách, ale tieto výskumy do dnešného dňa nepriniesli jednoznačné výsledky. Tieto štúdie zvyčajne skúmajú dve skupiny. V jednej skupine sa prezentujú vizualizácie, kým v kontrolnej skupine sa pracuje bez ich použitia. Potom sa výsledky oboch skupín porovnajú. Nie všetky výskumy boli schopné ukázať významný rozdiel medzi týmito dvoma skupinami. Predpokladalo sa, že viditeľné rozdiely budú v komplikovanejších príkladoch. Tiež je dôležité, aby pri znázornení denných algoritmov vyučujúci vybral najvhodnejšiu metódu animácie. Nakoľko každý algoritmus je iný, aj ich prezentácia potrebuje iný prístup. Som preštudoval množstvo zverejnených výskumov, ako napríklad
Kehoe a kolektív vo svojej štúdií pozorovali dve skupiny študentov, z ktorých iba jedna skupina mala prístup aj k animáciám. Táto skupina dosahovala jednoznačne lepšie výsledky.
Viac štúdií je založených na voľnom programe Jeliot 3, ktorý je založený na jazyku Java. Tento program poskytuje prostredie, kde si študenti, ktorí sa zoznamujú s programovaním môžu v rovnakom čase pozrieť zdrojový kód a animáciu.
V štúdií Ebel a Ben-Ari dostala prioritu pozornosť študentov. Ich východiskovým bodom bolo, že pozornosť a efektivita vzdelávania sú vzájomne prepojené, preto svoj výskum vykonali na študentoch, ktorí mali problémy s pozornosťou a so správaním.
Vyšetrenie Moreno a Joy poukázalo na to, že program Jeliot 3 nie je dokonalý. Pozorovali dobrovoľníkov prvého ročníka vysokých škôl, ktorí dovtedy nemali žiadne skúsenosti s programovaním.
Peter Bellström a Claes Thoren v ich výskume príčinu ťažkostí videli v tradičnom vzdelávacom procese.
Druhá časť práce sa zaoberá so zbierkou algoritmov, ktorú som vytvoril. Člení sa na štyri podskupiny. V prvej podskupine sa práca zaoberá jazykom HTML, a použitými softvérmi pri príprave zbierky. Nasledujúca podskupina sa zameriava na zbieranie vizualizácií. Podľa formátov sa uvádzajú štyri kategórie, kým podľa použiteľných zdrojov sú dve významné
29
skupiny. Tretia podskupina rozoberá problémy, s akými som sa stretol pri príprave zbierky. Spomínam problémy s určitými formátmi, ktoré bolo treba viackrát prekontrolovať a aktualizovať vybrané animácie. Posledná podskupina obsahuje nápady na možnosti rozšírenia zbierky. Jazyk HTML je veľmi častý a populárny. Štruktúrou sa výrazne líši od ostatných programovacích jazykov, ale kód je transparentný, ľahko pochopiteľný a pre začiatočníkov rýchlo naučiteľný. Na internete, ale aj v knižnej forme sa dá nájsť množstvo pomocných materiálov k tejto téme. Na vytvorenie zdrojového kódu bol vhodný hocijaký textový editor (napr. Poznámkový blok), ale odporúča sa v záujme transparentnosti, použitie editoru, napríklad Notepad ++ alebo Adobe Dreamweaver. Pri úprave webových stránok boli vyskúšané obe tieto prostredia a obidve splnili všetky očakávania. V zbierke sú odkazy na internetové stránky s krátkymi definíciami, ktoré som považoval za užitočné a ktoré hneď som aj usporiadal podľa kategórií. Po preštudovaní značného počtu webových stránok je v tejto zbierke viac ako 140 odkazov na animácie. Pri výbere bolo dôležité, aby jednotlivé animácie boli jednoznačné a jednoduchšie ovládateľné. Pri vytvorení zbierky najväčší problém spôsobili animácie s Java základom, keďže do apríla 2015 Java dostal dvakrát aktualizácie, ktoré zmenili správu bezpečnostných protokolov. To spôsobilo, že staršie animácie, ktoré boli pred aktualizáciou funkčné, namiesto spustenia program zablokovali. Po aprílovej aktualizácii niektoré dočasne zablokované animácie boli zas použiteľné. Stála potrebná kontrola a aktualizácia zbierky značne skomplikovala prácu. Vizualizácie boli preštudované na prehliadačoch Google Chrome, Mozilla Firefox a Microsoft Internet Explorer, ale nereagovali rovnako. Táto zbierka je dôkladne vytvorená, s možnosťou doplnenia. Ako zlepšenie by sa dalo pripraviť PHP databázu, ktorá by uľahčila ukladanie odkazov. Predovšetkým by bolo potrebné vytvoriť PHP databázu, čo by uľahčilo skladovanie odkazov na internetovej stránke. Je dôležité, aby odkazy boli vždy aktuálne. K tomu je potrebná častá kontrola webových stránok, a nefunkčné odkazy by sa mali čo najrýchlejšie nahradiť použiteľnými. Aby sa dalo databázu dobre použiť, je nevyhnutné stále rozširovanie a dopĺňanie.
30
Felhasznált irodalom BELLSTROM, Peter – THOREN, Claes. 2009. Learning How to Program through Visualization: A Pilot Study on the Bubble Sort Algorithm. 2009 Second International Conference on the Applications of Digital Information and Web Technologies (Icadiwt 2009), 90-94. old. BEN-BASSAT, Ronit – BEN-ARI, Mordechai – A URONEN, Pekka. The Jeliot 2000 Program Animation System, Computers & Education 40, 2002, 1–15. old. EAGLE, Michael – BARNES, Tiffany. 2008. Wu’s Castle: Teaching Arrays and Loops in a Game. Charlotte: University of North Carolina at Charlotte, 2008 EBEL, Gil – BEN-ARI, Mordechai. The Affective Effects of Program Visualization, ICER’06, Canterbury, United Kingdom, 2006 ESPONDA-ARGÜERO, Margarita. 2010. Techniques for visualizing data structures in algorithmic animations. Information Visualization, 9, 2010, 31-46. old. FLEISCHER, Rudolf – KUČERA, Luděk. 2002. Algorithm Animation for Teaching. Software Visualization, Lecture Notes in Computer Science, 2002, 113–128. old. ISSN 0302-9743. KEHOE, Coleen – STASKO, John – TAYLOR, Ashley. Rethinking the Evaluation of Algorithm Animations as Learning Aids: An Observational Study, International Journal of Human Computer Studies, 54, 2007, 265–284. old. MORENO, Andrés – JOY, Mike. 2007. Jeliot 3 in a Demanding Educational Setting. Proceedings of the Fourth Program Visualization Workshop, 2007, 51-59. old. PINTÉR, Klára. 2012. A matematikai problémamegoldás és problémaalkotás tanításáról. Doktori értekezés. Szegedi Tudományegyetem RUDDER, Andrew – BERNARD, Margaret – MOHAMMED, Shareeda. 2007. Teaching Programming Using Visualization. Proceedings of the Sixth IASTED International Conference on Web-Based Education, 2007, 487-492. old. STOFFOVÁ,
Veronika
–
VÉGH,
Ladislav.
2010.
Szemléltető
animációk
a
programozásban. INFODIDACT 2010, 3. Informatika Szakmódszertani Konferencia. Szombathely, 2010. VÉGH, Ladislav. 2006. Vizualizácia algoritmov vo vyučovaní programovania. Informatika v škole a v praxi. Ružomberok : Katolícka univerzita, 2006. 65–69. old. ISBN 80-8084112-8.
31
VÉGH, Ladislav. 2011. Animácie vo vyučovaní algoritmov a programovania. In Dostál, J. (ed.): Nové technologie ve vzdělávání : vzdělávací software a interaktivní tabule. Olomouc : Univerzita Palackého v Olomouci, 2011. 47-51. old. ISBN 978-80-244-2720-1. http://epa.oszk.hu/00000/00035/00060/2002-05-mu-Szanto-Algoritmikus.html (2015.05.08.) http://www.w3schools.com/Html/html_intro.asp (2015.05.08.) http://www.ferencesgimnazium.hu/regihonlap/informatika/weblapszerkesztes/htmlbevezetes1.html (2015.05.08.)
32
