Multimédia az oktatásban 2022

NJSZT-MMO logó

NJSZT-MMO logóA Neumann János Számítógép-tudományi Társaság (NJSZT) „Multimédia az oktatásban” Szakosztály által – évente – szervezett XXVIII. Multimédia az oktatásban nemzetközi konferencia hibrid (jelenléti és online) formában került megrendezésre 2022. július 6-7-én.

A konferencia célja

A szakmai rendezvény célja, hogy elősegítse az oktatás, valamint a kutatás és fejlesztés különböző területein dolgozó, oktató hazai és külföldi szakemberek, PhD és felsőoktatási hallgatók kapcsolatfelvételét, tapasztalatok és jó gyakorlatok cseréjét, egyes képzési szakterületekhez kapcsolódó kreditek gyűjtését.

28 témakörben hirdették meg az előadóknak a jelentkezési lehetőséget, köztük néhány hozzánk kötődő

  • élethelyzethez igazított tanulás,
  • a multimédia alkalmazása a felsőoktatásban és a felnőttképzésben,
  • mLearning, eLearning és környezete,
  • a tanulási környezet technikai, technológiai változása,
  • felhőalapú szolgáltatások,
  • multimédia és a tudományos kutatás összefonódása,
  • multimédia-fejlesztések, eredmények, alkalmazások bemutatása.

A konferencia programja

Letölthető a konferencia programja. A konferencia az Eszéki Josip Juraj Strossmayer Egyetem Bölcsészettudományi Karáról (University of Osijek) élő közvetítésben zajlott Teams-en. 2 nap alatt 10 szekcióban 30 előadás hangzott el, valamint sor került plenáris előadásokra és műhelymunkára is.

Részt vettünk a konferencián

Oktatóink rendszeresen részt vesznek az MMO konferencián. Szakmai blogunkban több beszámoló is van, lásd MMO címke. Kaczur Sándor oktatónk publikációs listájában szerepelnek a megjelent szakmai cikkek. Jövőre is szívesen csatlakozunk a rendezvényhez.

2022-ben Sándor két előadást tartott előadást tartott 20-20 percben, amelyek a konferencia „Multimédia-fejlesztések, eredmények, alkalmazások bemutatása” című szekciójába kerültek. Az előadások prezentációit ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára. Négy szerző (köztük én is 🙂 ) együttműködésével elkészült egy 5 és egy 7 oldalas szakmai cikk is, amelyek elérhetők a konferencia kiadványban.

Szakmai cikkeink összefoglalói

Kaczur Sándor, Szegedi Kristóf, Bánki Benedek: Variációk egy témára – Szilassi-poliédert megjelenítő grafikus programok fejlesztése

A számítógépes grafika alkalmazásának egyik speciális területe az, amikor saját fejlesztésű, egyedi grafikus objektumokat jelenítünk meg. Ehhez szükséges néhány előismeret, például: modelltér, kü­lönböző koordinátarendszerek, grafikus primitívek, grafikus 2D és 3D leképezések, vetítő algoritmusok, vászontechnika, koordináta- és ponttranszformációk. Ezekre építve a továbblépést a következők megisme­rése biztosítja: adott programozási nyelv(ek) beépített grafikus képességei, korlátai, sajátosságai, osztály­könyvtárai, kiegészítő API-jai, plugin-jai. Természe­tesen a grafikus fejlesztés megvalósítása objektumori­entált megközelítéssel, életciklus modellben, MVC architekturális tervezési mintával, eseménykezelés al­kalmazásával történik – hiszen a korszerű megközelí­tés és az interakció alapkövetelmény.

Az előadás/cikk ismerteti a feladatspecifikációt, majd egy közös koncepcionális tervet mutat be. A cél a Szilassi-poliéder megjelenítése saját fejlesztésű, egyedi grafikus objektumként. Elkészült többféle fejlesztői környezetben és többféle programozási nyelven né­hány implementáció Java és Unity alapon. Az előadás/cikk bemutatja az elkészült esettanulmányokat, elem­zi, teszteli, össze is hasonlítja azokat és megfogalmaz néhány továbbfejlesztési lehetőséget.

Kaczur Sándor, Kiss Balázs: Tankockák – Java szoftverfejlesztésben használt interaktív tanulási környezet

A 20. századig három jellegzetes pedagó­giai paradigma és ezeknek megfelelő didaktikai rendszer alakult ki: ismeretátadás, szemléltetés és cselekedtetés. Két kérdés merül fel: milyen szerepük van a tanításban ezeknek, illetve milyen a tanítási-tanulási folyamatban a tanár és tanuló szerepe.
A 21. században megjelenő folyamatok – a résztvevők együttműködve közös tudásobjektumot alkotnak és a megosztásra alapozva a hálózatiság élményét kapják – következménye a negyedik didaktikai paradigma, amelynek kulcsszavai: hálózatalapú tanulási formák, konnektivizmus, hipertanulás, e-learning.

Nahalka szerint a „tanítási – tanulási folyamat terve, az értékelési technikái, az elképzelt tanulási folyamat elképzelt logikája, koncepcionális háttere, a munka megszervezésének körülményei, azok a speciális eljá­rások, amelyeket az elképzelt folyamatban fel kívá­nunk használni, a gyermekek közötti, valamint a pe­dagógus – gyermek interakciók jellege, lehetőségei, a felhasznált információhordozók és más eszközök egy rendszert alkotnak”. Ez a negyedik paradigma tanu­lási környezete, amelynek biztosíthatnak egyéni és csoportos, offline és online tanulást, számítógéppel se­gített tanulást vagy kommunikációt, valamint aszink­ron és szinkron kommunikációt. Prensky megalkotta a „digitális bennszülött” és „digitális bevándorló” fo­galmait. Jukes és Dosaj ezekre alapozva meghatározta a „született digitális tanuló” és az „emigráns digitális tanár” jellemzőit.

Az előadás és a cikk egyrészt ismerteti a fenti folyamat tipikus mérföldköveit. Másrészt pozicionálja, hol tart ebben a folyamatban az it-tanfolyam.hu oktatói csa­pata az e-learning tananyagaik és online tartalmaik tekintetében. Harmadrészt bemutatásra kerül 12 db tankocka – interaktív tanulási környezetként –, ame­lyek elérhetőek az it-tanfolyam.hu szakmai blogban. Ezek élményszerű tanulást biztosító gamifikációs ele­mek, interaktív, weboldalakba ágyazható kisalkalma­zások, amelyek kiválóan használhatók gyakorlásra, rendszerező összefoglalásra Java szoftverfejlesztés, Java programozás témában.

Kígyókocka grafikus felületen

Kígyókocka

KígyókockaA JavaFX grafikus felhasználói felületének és eseménykezelésének megvalósítása némileg eltér más Java GUI implementációk működésétől, például swing vagy Java3D. Főként animációk során hasznos használni. Megközelítése természetesen objektumorientált: a térbeli objektumok koordinátái, viselkedésük, transzformációkkal valósul meg, és azok is objektumok. A korábban elkészített konzolos kígyókocka programot valósítjuk meg most JavaFX GUI-val.

Ez egy két részből álló blog bejegyzés 2. része. A blog bejegyzés 1. része itt található.

A program működése

Kígyókocka JavaFX grafikus felületen

A program megvalósítása

A start() JavaFX életciklust indító eljárás felépíti a createGridUI() függvényt meghívva a felhasználói felületet (színpad/jelenet JavaFX-ben), beállítva a méreteket, címsort, és meghívja az eseménykezelésért felelős handleRotateButtons() eljárást.

A createGridUI() függvény a grafikus felhasználói felület elemeit paraméterezi (szerepe szerint Factory metódus). Öt elemből álló rács ( GridPane osztályú grid nevű objektum) készül el, amelyre nyilakat tartalmazó nyomógombok (pl.: Button típusú btLeft objektum) kerülnek fel a négy égtájnak megfelelően, valamint rajta középen helyezkedik el a kígyókocka 3D megjelenítését megvalósító objektum. A nyilak entitásai az Unikód karaktertáblából származnak. A kígyókocka objektumot a meghívott createSnakeCube() függvény hozza létre. A Node osztályú snakeCube nevű objektum geometriai transzformációs objektumot is hozzá kell rendelni: ez most a négyirányú forgatást megvalósítani képes névtelen Rotate osztályú objektum lesz. A forgatást 5 paraméterrel célszerű beállítani (van rá megfelelő túlterhelt konstruktor), ezek rendre: szög, X, Y, Z tengely origója és a forgatás tengelye. Az objektumok tulajdonosi hierarchiája swing-es szemmel nézve szokatlannak tűnik, de szemléletben legalább azonos a Java3D és a JavaFX megvalósítás.

A createSnakeCube() függvény előállítja a színpadra/jelenetbe kikerülő kígyókockát Node osztályú objektumként. A konstans CUBE tömb egységvektor rendszerben tartalmazza a kígyót alkotó kockák középpontjait. Az első ciklus mindezt nagyítást alkalmazva skálázza. A második ciklus koordináta és pont transzformációk alkalmazásával ( moveToMidPoint: eltolás középre, rotateAroundCenter: forgatás a középpont körül) a kiinduló állapotnak megfelelő méretben és pozícióban elhelyezi a kígyó útvonalát mutató hengerobjektumokat. A konstrukciós és transzformációs műveletek esetén alkalmazkodni kell ahhoz, hogy a JavaFX koordinátarendszerben az X jobbra, az Y lefelé, a Z pedig befelé (a nézőponttól távolodva a térben) növekszik. A matematikai hátteret részletesen most nem magyarázzuk el.

A handleRotateButtons() eljárás a forgatás 4 nyíl eseménykezelésének hozzárendelést végzi el. A nyomógomb objektumok setOnAction() hozzárendelő metódusának paramétere EventHandler funkcionális interfésszel és lambda művelettel működik. A forgatás irányát hozzárendeljük a megfelelő nyomógombhoz. Ez még csak végrendelkezés a jövőre: csak definiáljuk, hogy minek kell majd történnie, ha bekövetkezik az esemény (valamelyik nyílra/nyomógombra kattint a felhasználó).

A rotateSnake() eljárás minden nyíl feliratú nyomógombra kattintva reagál a bekövetkezett eseményre. A rotateAxis objektum a forgatás tengelye, a paraméterként átvett direction enum-tól függ, szinkronban azzal a nyomógombbal, amelyikre kattintott a felhasználó.

Ötletek a továbbfejlesztésre

  • Lehetne többféle irány is, például a négy sarokba átlós vagy mélységi irányú elforgatással.
  • Beépülhetne többféle transzformáció is, például skálázás (kicsinyítés, nagyítás), eltolás (közelítés, távolítás).
  • A kígyó útvonalát mutató hengerobjektumok kirajzolásának sorrendjén lehetne változtatni, mert a megjelenítés nem tökéletes. Jelenleg néhány helyzetben lehetetlennek, Escher lehetetlen konstrukcióihoz hasonlónak tűnhet a kígyókocka. Ha a tér mélységéből a nézőpont felé közeledve rajzolnánk ki a hengerobjektumokat, akkor a 3D látvány nem sérülne.

Tanfolyamainkon JavaFX grafikus felülettel hangsúlyosan nem foglalkozunk, de egy-egy kész forráskódot közösen megbeszélünk, és össze is hasonlítjuk a swing-es változattal. Fejlesztünk játékprogramot, de inkább konzolosan, vagy swing-es ablakban, vagy webes alkalmazásként.

A grafikus felületek felépítésének megismerése fontos lépcső az objektumorientált programozás elmélyítéséhez, gyakorlásához. A grafikus felületekhez egy másik lényeges szemléletváltás is kapcsolódik, hiszen a korábbi algoritmusvezérelt megközelítést felváltja az eseményvezérelt (eseménykezelés).

Tudatosan hangsúlyozott MVC-s projektben megoldva a feladatot, a modell rétegben tárolhatnánk többféle kígyókocka megjelenítéséhez és animációjához szükséges adatszerkezetet és transzformációs objektumokat/metódusokat is és a nézet/vezérlő rétegekben biztosíthatnánk ezek közül a kijelölést/kiválasztást menüvel, ikonokkal, eszköztárral, gyorsbillentyűkkel.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

Tanfolyamaink orientáló moduljának 9-12. óra: Mesterséges intelligencia alkalmához kapcsolódóan a kígyókocka véletlenszerű előállítása helyett stratégiával rendelkező visszalépéses algoritmust specifikálhatunk és implementálhatunk.

Ez egy két részből álló blog bejegyzés 2. része. A blog bejegyzés 1. része itt található.

Hello World! másképpen

Hello World! - Piet programozási nyelven

Hello World! - Piet programozási nyelvenA programozási nyelvek tanulásának első lépése a „Hello World!” szintaktikájának megismerése, és egyben teszt arra is, hogy megfelelő-e a fejlesztői környezet telepítése, konfigurálása. Megjelenik-e a „Hello World!” a konzolon, felbukkanó ablakban, önálló ablakban, weblapon, üzenetben? Mit kell ezért tenni? Néhány Java példát nézünk erre.

1. Konzolos megoldás

Ez a kiinduló állapot. Futtatva a programot, a konzolon jelenik meg a szöveg.

2. Swing 1. megoldás

Itt felbukkanó párbeszédablakban jelenik meg a szöveg. A JOptionPane ablaka itt önálló, így nincs olyan szülője/tulajdonosa ( null), ahonnan elveheti a fókuszt.

3. Swing 2. megoldás

Itt egy testre szabott JFrame utód készül, alapvető beállításokkal. Az ablak címsorában jelenik meg a szöveg. Az ablak saját magát példányosítja és főablakként viselkedik, vagyis gondoskodik saját maga láthatóságáról, fókusz- és eseménykezeléséről (utóbbi 2 most nincs).

4. JavaFX megoldás

Itt egy testre szabott  Application utód készül, minimál beállításokkal. Az ablak címsorában jelenik meg a szöveg. Az ablak saját magát példányosítja és főablakként viselkedik.

5. Applet megoldás

Böngészőben fut a testre szabott JApplet utód. A weblapon elfoglalt téglalap alakú területen vízszintesen balra és függőlegesen középen jelenik meg a címke komponensben a szöveg.

6. JSP 1. megoldás

Ez egy JSP weboldal automatikusan generált forráskódja. Böngészőben jelenik meg a szöveg.

7. JSP 2. megoldás

Ez egy JSP weboldal egyszerű direktívával a h1 címsorban.

8. Servlet megoldás

Itt egy szervlet által generált weboldal, amely fixen tartalmazza a szöveget.

9. Atipikus 1. megoldás

„Adatbázisból is lekérdezhető” a szöveg.

10. Atipikus 2. megoldás

Ebben az esetben a Java nyelv által biztosított véletlenszám generáló osztályra támaszkodva állítjuk elő a szöveget. Mivel a random objektum által előállított számok csupán a véletlenség látszatát keltik, de valójában egy algoritmus szerint készülnek, ezért előre teljes pontossággal megjósolható a kimenet. Csupán meg kell találni azt a kezdőértéket, ami után „véletlenül” pont a h, e, l, l, o betűk fognak következni. Megismételve a folyamatot egy másik kezdőértékkel, megkapjuk a w, o, r, l, d  betűket is.

A bejegyzéshez tartozó teljes forráskódot – több projektben – ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A példák a Java SE szoftverfejlesztő tanfolyam, a Java EE szoftverfejlesztő tanfolyam és a Java adatbázis-kezelő tanfolyam több alkalmához is kötődnek (kivéve 4. és 5.).

Hivatkozások a témakörben, amelyek más programozási nyelvek példáit is tartalmazzák: