Tanítási módszerek –
weblapszerkesztés
1 udvarosj@atlas.sk
Absztrakt. Az Internet és az 1990-es évek elején a WWW kialakulásával
új témakör jelent meg az informatikában, a weblapszerkesztés. Ezen témakör
tanítására viszonylag rövid időn belül többféle módszer alakult ki. Közülük
néhány módszert hasznosan lehet alkalmazni az általános és középiskolában, míg
a többit a felsőoktatásban. A megfelelő tanítási módszer alkalmazásának
kiválasztását nagyban befolyásolja a weblapszerkesztés módja és az iskola
típusa.
1. Tanítási módszerek
A munkámban a weblapszerkesztés tanításának legelterjedtebb módszereit mutatom be:
·
Nyelv és utasítás orientált (a nyelvet strukturált egységnek
tekinti, a weblapszerkesztés logikáját állítja előtérbe, s a szükséges
mértékben vezeti be a használt nyelv konkrét elemeit)
·
Szoftvertechnológia-orientált (a szoftvertechnológia előnyeit
állítja előtérbe)
·
Feladattípus-fogalom orientált (egy konkrét feladatkörből
feladatsorokat épít, s a feladatsor megoldása közben vezeti be az éppen
szükséges új weblapszerkesztési ismereteket és meghatározza az alkalmazói
rendszer által használt fogalmakat, majd ezen fogalmakhoz kapcsolódó funkciókat
tárgyalja)
·
Funkcióorientált (meghatározza az alkalmazói
rendszer általános funkcióit, majd a funkciókhoz kapcsolja a konkrét
ismereteket)
·
Mintapélda alapján (a nyelvet mintapéldák elemzésén
keresztül mutatja be)
·
Adatorientált (az adatstruktúrát tekinti
elsődlegesnek, feladat meghatározást típus-specifikációként tekinti)
·
Menüorientált (a weblapszerkesztési
ismereteket az alkalmazói programon keresztül tanítja, méghozzá annak
menüpontjai szerint) [1] [3]
2. Nyelv és utasítás orientált
Egyik legrégebben és egyben legszélesebb körben elterjedt módszer, itt is egy működőképes weboldal előállítása a cél, amely mindig egy programozási nyelvhez kötődik.
Alapelve: egy programozási nyelv,
illetve jelölő nyelv elemein keresztül tanítja a weblapszerkesztést, pl. HTML,
PHP.
A módszer lényege, hogy egy
programozási, illetve jelölő nyelvet tanít meg, s azon keresztül vezeti be
a weblapszerkesztési ismereteket. Mivel a programozási/jelölő nyelv
van a középpontban, ezért sok nyelvfüggő ismeret rögzül, mint általános
weblapszerkesztési fogalom. Ez azt a problémát hozza magával, hogy nehezen
lehet áttérni más weblapprogramozói nyelvre, illetve teljesen az alapoktól kell
kezdeni a tanulást-tanítást.
Problémái:
·
Nyelvfüggő elemek a weblapszerkesztésben
·
Weblapszerkesztési fogalmak nem köthetők egyértelműen nyelvi fogalmakhoz
·
Dinamikus weboldalak szerkesztésénél nagyon meg kell választani
a nyelvet a bonyolultság miatt
A nyelvet strukturált egységnek
tekinti, mint más strukturált programozási nyelvnél. A nyelv logikáját veszi
figyelembe. Áttekinti a weboldalak felépítésének fő vázát.
Tematikák a HTML nyelv
tanításához:
·
A HTML nyelv logikája
·
Betűk formázása
·
Fejezetek/címsorok és formázásaik
·
Hivatkozások
·
Listák
·
Táblázatok
·
Képek és videók
·
FRAME-ek
·
BODY és META
·
Képtérképek
·
Űrlapok
·
Stíluslapok [7]
Az említett tematikák közül az
iskolatípustól függően és a tanulók tudásszintjéhez igazítva néhányat
nélkülözhetünk.
3. Szoftvertechnológia-orientált
Egy szoftverfejlesztési módszertanhoz, technológiához rendelt weblapszerkesztési módszer, ahol a szoftverfejlesztési módszertan határozza meg a weblapszerkesztést. Ebben az esetben nem beszélhetünk kimondottan weboldal programozásról. Itt a környezet adja a weblapszerkesztés módját. Pl. JOOMLA, MOODLE, LMS rendszerek. [10] Az eszközök határozzák meg a weboldal kinézetét, ha változtatni szeretnénk rajta, akkor az előreprogramozott sablonok közül választhatunk, vagy mi magunknak kell a sablonokat testre szabnunk. Nagy előnye, hogy szinte nincs szükség weboldal szerkesztési készségekre, elegendő elsajátítani a rendszerkörnyezet felépítését, logikáját. Hátránya, hogy rendszerfüggő, amit az egyik rendszerben könnyedén alkalmazhatunk, az nem biztos, hogy más rendszerben is. Ezt a módszert nem tudjuk használni más módszerekkel közösen.
Tematikák a JOOMLA tanításához:
·
JOOMLA telepítése
·
Rendszergazdai felület és funkciói
·
JOOMLA rendszer konfigurációja és felhasználók definiálása
·
Komponensek és modulok kezelése
·
Sablonok telepítése és váltása – a weboldal vizualizálása
·
Új komponensek és modulok telepítése a weboldal funkcióinak bővítése [5]
·
E-shop létrehozása
·
Tartalom kezelése
·
Menürendszer kezelése
·
Cikkek kezelése
·
Tartalom menühöz való rendelése [4]
Tematikák a MOODLE tanításához:
·
MOODLE telepítése
·
Nyelvi beállítások
·
Felhasználói profil kialakítása
·
Kurzus formátumok, beállítások
·
Kurzus szerkesztése
·
Tartalom hozzáadása és kezelése
·
Fórum létrehozása és kezelése
·
Csevegés létrehozása és kezelése
·
Tesztek készítése
·
Műhely létrehozása és kezelése
·
Feladat létrehozása
·
Napló létrehozása és kezelése
·
Fogalomtár létrehozása és kezelése
·
Lecke létrehozása és kezelése
·
Wiki létrehozása és kezelése
·
Statisztikák
·
Kurzus adminisztráció
·
Felmérés és válasz [5]
Az előző tematikákból látható,
hogy a két rendszer teljesen különböző. Tehát nem hivatkozhatunk az egyik
rendszerben tanultakra a másik rendszer tanításánál. A szoftvertechnológia-orientált
tanítási módszer nagyon jól alkalmazható a LMS rendszerek tanításánál.
Abban az esetben, ha a tanulók
elsajátítottak már egy szoftvertechnológia-orientált tanítási módszerrel
tanított weblapszerkesztési módot, akkor utána akár tanítható a HTML, vagy a
PHP nyelv. A HTML és a PHP nyelveket nyelv és utasításorientált módszerekkel
taníthatjuk. A megírt weblapok könnyen beágyazhatók egy MOODLE rendszerbe.
4. Feladattípus-fogalom orientált
Itt a weblapszerkesztés tevékenysége egységet alkot, egyes részei nem választhatók el egymástól, itt mindig egy teljes weboldalt szerkesztünk, esetleg ezt a weboldalt feloszthatjuk kisebb részekre, s ezek megszerkesztése után összerakva megkapjuk a teljes weboldalt. A különböző részek létrehozásánál használhatunk más módszereket is. Úgy vezet be új weblapszerkesztési ismereteket, hogy azokat a megoldandó feladatok tegyék szükségessé. Nélkülük a soron következő feladat nem oldható meg.
A feladattípus-orientált
módszernél egy konkrét összetett feladatból, vagy feladatkörből indulunk ki,
ahol több feladattípust is felhasználhatunk. Az egymásra épülő feladatok megoldásánál
szükséges bevezetni új fogalmakat, elemeket, melyek nélkülözhetetlenek a
konkrét feladat megoldásánál. Előnye, hogy az előbb említett fogalmakat,
elemeket gyakorlatilag kipróbáljuk – felhasználjuk. Esetleges hátránya, hogy a
feladatot más módszerekkel gyorsabban illetve egyszerűbben is megoldhatjuk.
A feladattípus-orientált módszer
alkalmazásánál gyakran használjuk a fogalom orientált módszert, mivel a
feladatok megoldása közben elmagyarázzuk a weboldalszerkesztő rendszer által
használt fogalmakat, pl. kép, videó, keret, link,... majd az ezen fogalmakhoz
kapcsolódó műveleteket - funkciókat tárgyaljuk. Oktatás szempontjából fontos a
fogalmak helyes sorrendjének meghatározása.
Weboldalszerkesztés műveletei:
·
Alkalmazott program alapfunkciói, mely programfüggő (fájl létrehozása,
módosítása, mentése, megjelenítése, nyomtatása)
·
Weboldal létrehozása: keretek, képek, videók, szövegek beillesztése
·
Hivatkozások beillesztése
·
Különböző objektumok formázása – hasonlóan, mint a szövegszerkesztésnél
·
Módosítások
·
Weboldalak publikálása
A felsorolt műveletek
alkalmazhatóak a sztatikus weboldalaknál, azonban ha dinamikus weboldalakat
szeretnénk szerkeszteni, akkor a műveleteinket szükséges a következőkkel kibővíteni:
·
Adatbázis létrehozása és beállításai
·
Adatbázissal való műveletek (SQL)
Feladattípusai:
·
Betű és
bekezdés formázási beállítások
·
Listák
·
Hivatkozások
készítése
·
Táblázatok
·
Képek és
videók beillesztése
·
Oldalfelosztás - keretrendszer
·
Grafika
·
Szövegfeldolgozás
·
Adatbáziskezelés
·
Kommunikáció (e-mail, FTP, fórum, chat,...)
Megjegyzés: Napjainkban a legtöbb irodalom ezzel a módszerrel mutatja be a weblap-szerkesztés lépéseit.
Tematikák az alkalmazás orientált
weblapszerkesztés tanításához:
·
Az adott weblapszerkesztő program kezelése
·
Egyszerű HTML parancsok
·
Hivatkozások készítése
·
Formázási beállítások a programban
·
Formázás CSS segítségével
·
Képek és videók beillesztése
·
Egyéni komplex feladatok és példasorok megoldása
5. Funkcióorientált
Meghatározza az weboldalszerkesztő rendszer általános funkcióit, pl. beírás, képek, videók, flash animációk beillesztése, formázás, keretek,... , majd a funkciókhoz kapcsolja a konkrét ismereteket. Hátránya az eszközfüggőség, mivel nem biztos, hogy ugyanazon eszköz más verziójában (vagy teljesen más eszközben) van lehetőség továbbfejlesztésre.
6. Mintapélda alapján
A módszer a weblapszerkesztést mintapéldák elemzésén keresztül mutatja be. Ez a módszer ötvözi a nyelvorientált és feladattípus-orientált módszereket, mivel adottak a nyelvi elemek a példákban, ezek felépítése a nyelv elemeit követi. Ebben az esetben egy vagy több egyszerűbb mintapéldát elemezünk, vagy egy komplex mintafeladaton mutatjuk be a kívánt ismereteket. Előnye, hogy rögtön vizuálisan látjuk a végeredményt, ez által a tananyag sokkal gyorsabban elsajátítható. Hátránya, hogy alkalmazás, illetve nyelvfüggő módszer.
Ezen módszer alkalmazásánál
javasolt a következő témakörökre mintapéldákat összeállítani:
·
Betű és bekezdés formázási beállítások
·
Listák
·
Hivatkozások készítése
·
Táblázatok
·
Képek és videók beillesztése
·
Egyéni komplex feladatok és példasorok megoldása, ill.
saját weboldal szerkesztése
Amennyiben a tanulók tudásszintje
engedi, akkor kibővíthetjük a következő témakörökkel:
·
FRAME-ek
·
BODY és META
·
Képtérképek
·
Űrlapok
·
Stíluslapok
A mintapéldák lehetnek a
fogalomorientált módszer szerint felépítettek is. Az alapvető különbség, hogy a
fogalomorientált módszerben fogalmakat definiálunk, majd alkalmazunk. A mintapélda
módszerben pedig a mintapéldákat elemezzük és onnan ismerjük meg a fogalmakat,
funkciókat.
A szlovákiai középiskolai
oktatásban leggyakrabban ezt a módszert alkalmazzák az oktatási folyamatban,
melyben mintapéldák segítségével mutatják be a weblapszerkesztés problematikáját,
utalva az előbbi témakörökre. Általában csak a szakközépiskolákban foglalkoznak
az alábbi témakörökkel: FRAME-ek, BODY és META, képtérképek, űrlapok,
stíluslapok.
7. Adatorientált
Alapgondolata, hogy a feladatot részfeladatokra osztjuk, s ezeket „sablon” alapján oldjuk meg. Itt arra gondolunk, hogy az említett részfeladat mindig megoldható egy algoritmussal, vagy utasítással, mint például egy hivatkozást HTML nyelvben az <A HREF=”…”..> utasítással oldunk meg. Tehát ebben az esetben meg kell tanítani a legtöbb alaputasítást, illetve a többször használt algoritmust, melyeket aztán a megfelelő sorrendben kell alkalmazni. A módszer hátránya, hogy nyelvfüggő. Másik hátránya, hogy sokkal több információt meg kell tanítani, mint amit a web-fejlesztés folyamán felhasználunk. Ezt a módszert sikeresen lehet alkalmazni a feladattípus-orientált módszerrel.
8. Menüorientált
A weblapszerkesztési ismereteket az alkalmazói programon keresztül tanítja, annak menüpontjai szerint. Hátránya, hogy csak az alkalmazott program lehetőségein belül tudunk weboldalt szerkeszteni. Bár a legtöbb weblapszerkesztő környezete hasonló, s így a már megtanultakat kis változtatással alkalmazni tudjuk. Előnynek könyvelhetjük el, hogy az alkalmazói programon keresztül viszonylag gyorsan tanítható – tanulható a weblapszerkesztés, az alkalmazói programot is tökéletesen megismertetjük. További előnye, hogy nagyon sok szakirodalom ezen módszer segítségével mutatja be a weblapszerkesztést különböző alkalmazói programokon keresztül.
Ajánlott egy olyan feladaton
keresztül bemutatni az alkalmazói program menüpontjainak funkcióit, ahol
elemezni tudjuk a funkciók által kifejtett változásokat.
A menüorientált weboldal
szerkesztési módszer témakörei, egy adott alkalmazásból indul ki. Témakörök a
Macromedia DreamWeaver oktatásához:
·
File
·
Edit
·
View
·
Insert
·
Modify
·
Format
·
Commands
·
Site
·
Window [8]
9. Összefoglalás
A megfelelő módszer kiválasztása a következő befolyásoló tényezőktől függ:
·
Tanár egyénisége
·
Iskolatípus
·
Tanulók tudásszintje, életkora
·
Tananyag nehézsége (tananyag egységekre való bontása)
·
Az oktatásra szánt idő [9]
A nyelv és utasítás-orientált
módszereket a középiskolában, illetve a felsőoktatásban ajánlott alkalmazni,
mivel ennél a módszernél már szükséges valamilyen szintű algoritmizációs gyakorlat.
A módszer segítségével a tanulók megtanulják, hogy a weboldalaknak van
forráskódjuk és vizuális megjelenítésük. Az elsajátított utasítások
alkalmazásával, megfelelő sorrendben való leírásukkal algoritmusokat hoznak
létre. Az algoritmusok vizuális megjelenítésével weboldalakhoz jutunk. Mivel az
ilyenfajta programozás eredménye látványos, ezért a tanulók nagyon gyorsan megtanulják.
A JOOMLA és az LMS rendszerek
egyszerű kezelhetősége miatt, egyre több középiskolában tanítják, de általában
csak szabadidős, ill. szakköri tevékenység keretein belül. Ezen tanagyag tanításánál
legjobban alkalmazható a szoftvertechnológia-orientált módszer, hiszen egy
szoftver technológiát kell tanítani. A környezet bemutatását követően a tanulók
könnyen tudnak menüszerkezeteket létrehozni, majd ezeket tartalommal –
cikkekkel feltölteni.
Az alkalmazás és eszközorientált
módszereket a szakképzésben (szakközépiskolákban) ajánlott használni, mivel itt
már feltételezhető, hogy a tanulók ismerik a weboldalszerkesztés lépéseit, s
nem kell az alapokkal foglalkozni, hanem az alkalmazáson keresztül bemutatni.
A közoktatásban kimondottan a
feladattípus-fogalom orientált módszer a javasolt, mivel ebben az esetben az
általános jártasságok kialakítása és a weblapszerkesztésben használt fogalmak
elsajátítása a cél, nem web-fejlesztő szakembereké.
Funkció orientált módszert
kimondottan a felsőoktatásban javasolt alkalmazni, vagy olyan típusú
tanfolyamokon, ahol a hallgatóság professzionális számítógép használó.
Menüorientált módszer a lehető
legrosszabb oktatói módszer, mivel ez nem ösztönöz logikus gondolkodásra, csak
a menüpontokra való kattintgatásra. Nem ajánlott ezen módszer alkalmazása.
Adatorientált módszert
alkalmazhatjuk a középiskolákban, ahol a bemutatott struktúrákat „csak
összeollózzuk” és így könnyen szerkeszthetünk egyszerűbb weboldalakat. Ezt a módszert
gyakran ötvözik a többi módszerrel, hiszen minek hozzunk létre új struktúrát,
ha már egyszer létrehoztunk egy hasonlót, csak módosítani kell a meglévőt.
Mintapélda alapján való oktatási
módszert kimondottan az általános iskola felső tagozatán és a nem kimondottan
informatika irányultságú középiskolákban alkalmazhatjuk. A diákok a mintapéldák
alapján könnyen létre tudják hozni saját weboldalaikat. Ebben az esetben a
tanulóknak nincs szükségük weboldal szerkesztési készségekre, hiszen nem az a
cél, hogy tökéletesen megtanulják a weboldalszerkesztést, hanem csak
kipróbálják és bemutatjuk weboldalszerkesztés technikáját. Tehát felkeltjük a
tanulók érdeklődését a weblapszerkesztés iránt.
Irodalom
1. Szlávi Péter, Zsakó László: Programozás tanítási módszerek. ELTE TTK
Informatikai Szakmódszertani Csoport
2. Papp-Varga Zsuzsanna, Szlávi
Péter, Zsakó László: ICT Teaching Methods
– Programming Languages. Department of Media and Educational Informatics,
Eötvös Lóránd University of Budapest
3. Nóra Csiki, László Zsakó: ICT Teaching Methods – Applications.
Department of Media and Educational Informatics, Eötvös Loránd University of
Budapest
4. North,
Barrie M.: Joomla! 1.5 felhasználói kézikönyv - Webhelyek
üzemeltetése a Joomla! Segítségével. Kiskapu
Kiadó, Budapest (2010)
5. Steven Holzmer, Nancy Conner: Joomla! for Dummies. Wiley Publishing, Inc.. Indianapolis (2009)
6. Tanári Kézikönyv
http://moodle.disabilityknowledge.org/file.php/1/Tanari-Kezikonyv-Szep.pdf
7. Bodnár István, Magyary Gyula: Az Internet használata II. – Informatikai füzetek. Kiskapu kiadó, Budapest (2006)
8. Bruce, Betsy: Tanuljunk meg az Adobe Dreamweaver CS3 használatát 24 óra alatt. Kiskapu Kiadó, Budapest (2007)
9. Erich Petlák: Všeobecná didaktika. Iris, Bratislava (2007)
10. Stoffová, V.: Animation Models in E-learning of Science.
In: Computer Based Learning in Science 2005. University of Žilina, Žilina (2005)