1. ZÁRÓDOLGOZA T M a r to n n é M ia v ecz Márta 2 010
1. Pannon Egyetem, Veszprém Műszaki Informatikai Kar Matematika Tanszék Tanári mesterképzési szak Informatikatanári szakképzettségi terület ISKOLAI HONLAP TANANYAGTARTALOMMAL M A R T O N N É M I A V E C Z M Á R T A Témavezető: L I P O V I T S Á G N E S Veszprém 2010
2. TARTALOMJEGYZÉK BEVEZETŐ... 3 ISKOLAI HONLAPOK TERVEZÉSE... 4 1.1 Igények, elvárások megismerése... 4 1.2 Lehetőségek felmérése... 4 1.3 Honlap tervének elkészítése... 4 HONLAPKÉSZÍTÉS... 5 2.1 Incomedia WebSite X5... 5 2.2 Általános beállítások... 5 2.3 Menüválasztás... 6 2.4 Stílusminta választása... 6 2.5 Szöveg objektum... 7 2.6 Kép objektum... 8 HTML ÉS CSS AJÁNLÁSOKRÓL RÖVIDEN... 10 3.1 A HTML... 11 3.2 Stíluslapok CSS... 13 3.3 Weboldal ellenőrzése... 15 TANANYAGOK LÉTREHOZÁSA... 16 4.1 Sulinet Digitális Tudásbázis... 16 4.1.1 Publikálás... 18 4.1.2 SDT jelentősége... 19 4.2 Hot Potatoes - a tesztszerkesztő... 19 4.3 Interaktív bemutató... 20 4.4 exe elearning Tananyagfejlesztő... 21 ÖSSZEFOGLALÁS... 23 ÁBRAJEGYZÉK... 26
3. Bevezető Jelenlegi iskolámban 2004 óta dolgozom, ahol testnevelést és informatikát tanítok. 2008 tavaszán az igazgatónő megkeresett azzal a kéréssel, hogy a HEFOP 3.1.3 pályázat és a dokumentumok nyilvánosságra hozatala miatt jó lenne, ha az iskolának lenne egy honlapja. Anyagiak miatt természetesen szóba se jöhet külső cég, azaz nekem kellene megcsinálni. Elvállaltam, bár tudtam nem lesz egyszerű dolog, hiszen korábban nem foglalkoztam weblapkészítéssel. Egyszerű próbálkozások voltak, de komolyan, élesben nem. Több probléma is felmerült. Iskolánkban nincs szerver, egyenrangú hálózat van, az internet csatlakozásunk meglehetősen döcögős, 356 Kbit/sec, így a saját web szerver lehetősége elvetve. Találnom kellett olyan szolgáltatót, amely kibővített szolgáltatással rendelkezik ( PHP, MySQL ), ha a későbbiekben az oldalt át szeretném alakítani, fejleszteni, akkor ez ne legyen akadály. Kezdtem feltérképezni, hogy milyen lehetőségek vannak weblapkészítésben, milyen editorok léteznek. Ezeket ki kellett próbálnom, melyik az, amelyikkel szinte a semmi tudásból képes leszek egy honlapot létrehozni, lehetőleg minél hamarabb. Ezen kívül a szakirodalmat is tanulmányoznom kellett, mert mindenképpen a szabványnak megfelelő oldalt szerettem volna létrehozni. Tervbe vettem, hogy az oldalra tananyagokat, kvízeket is kiteszek a későbbiekben, lehetőséget biztosítva az iskolán kívüli tanulásra, gyakorlásra is. Az iskola honlapja itt érhető el: http://iszkaiskola.hu
4. Iskolai honlapok tervezése 1.1 Igények, elvárások megismerése A honlap készítés tervezéssel kezdődik. Az első lépés az igények és elvárások összegyűjtése. Iskolavezetés, az iskola dolgozói, ötletei, javaslatait kellett összegyűjteni. Az iskolavezetés kérte, hogy a honlapon jelenjenek meg az intézmény adatai (pl. postacím, telefon és fax szám), legyenek elérhetőek a fontosabb iskolai dokumentumok (pl. SzMSz, Pedagógiai program, Házirend, éves munkaterv, pályázati anyagok). Kollégáim javasolták, hogy legyen egy oldal a Diákönkormányzatról, Hírek oldal, ahova a friss információk, tájékoztatók kerülnek, Versenyek oldal és egy olyan oldal, ahova az iskolai eseményekről készült képeket fel lehet rakni. 1.2 Lehetőségek felmérése Az igények felmérése után a következő teendő volt a lehetőségeink felmérése. Fontos tisztában lenni azzal, hogy egy honlap elkészítése szaktudást, sok időt, megfelelő hardvert és szoftvert igényel. Ahogy a bevezetőben is említettem az igen szűk internet sebességünk miatt szóba sem jöhetett, hogy saját web szervert üzemeltessünk, ezért keresnem kellett egy olyan szolgáltatót, amely elfogadható áron nagy tárterületet ad és bárhonnan elérhető. A fejlesztőeszközök kiválasztása elsősorban az alapján történt, hogy számomra mely eszközzel tudok elfogadható, de minőségi oldalt létrehozni. Ezekről a későbbiek során esik szó. A weboldalakon megjelenő grafikák, képek elkészítéséhez, módosításához megfelelő eszköz lehet a Paint.NET nevű ingyenes képszerkesztő szoftver. Telepítéséhez és futtatásához szükséges a.net Framework keretrendszer. A grafikai szoftver átlag felhasználónak minden igényt kielégítő funkciókkal van ellátva. Ha sok képet kell átméretezni, átnevezni, átalakítani nagyon hasznos segédeszköz az IrfanView, ami képes a képek kötegelt feldolgozására és szintén ingyenesen használható. 1.3 Honlap tervének elkészítése Következő feladat a honlap látványtervének elkészítése és szerkezetének megtervezése. Sokféle elrendezés között lehet választani, én mindenképpen a függőleges menüelrendezést szerettem volna megvalósítani. Törekednem kellett az egyszerűségre úgy, hogy jól navigálható, átlátható, de megjelenésében is elfogadható legyen.
5. Honlapkészítés 2.1 Incomedia WebSite X5 A választásom az Incomedia WebSite X5 programra esett. Segítségével viszonylag egyszerűen alakíthatunk ki honlapokat, digitális fényképalbumokat és interaktív prezentációkat. A program nem ingyenes, demó változatban nincs korlátozás, tehát minden funkció működik, ám ára igen barátságos, ezért érdemes megvásárolni. Jelenleg az Internet Explorer böngészőre van optimalizálva, a későbbi kiadásban már a Firefox-ot is támogatni fogja. Tulajdonképpen csak az oldalváltásnál található effektek megjelenítése nem megfelelő, minden más jól működik Firefox alatt is, tapasztalatom szerint. Különféle, a program által ajánlott objektumokat illeszthetünk a tervbe: szöveget, képet, táblázatot, Flash animációt, videót, hangot, diavetítést, képböngészőt, HTMLobjektumokat, e-mail küldő űrlapokat. A grafikus sablonok nagy tárháza, a belső háromdimenziós gombszerkesztő, a testre szabások rengeteg formája, a bevezető kialakítása és a jelszóvédett lapok létrehozásának lehetősége gazdag, professzionális és tökéletesen működő honlap megalkotását teszik lehetővé. A program elindításakor választhatunk, hogy már meglévő projektet vagy új projektet szeretnénk létrehozni. Első alkalommal az új projektet kell választani, a későbbiek során, ha módosítani szeretnénk, akkor a már meglévő projektet választjuk. Ezt követően lépésről-lépésre állíthatjuk be az oldalunkkal kapcsolatos beállításokat. 2.2 Általános beállítások A megfelelő mezők kitöltésével a projekt alapvető paramétereihez szükséges információkat adhatjuk meg: A honlap neve: Írjuk be a honlapunk nevét. Ez az internetböngésző címsorában fog megjelenni. A honlap szerzője: ide weblap készítője neve kerül. A szerző neve feltűnik a HTML-kódban, mint az <AUTHOR> Meta Tag értéke. E-mail: Írjuk be e-mail címünket, melyen a weblap látogatói kapcsolatba léphetnek velünk. A címből link lesz a weblap alján, melyre kattintva a látogatók gyorsan és hatékonyan küldhetnek üzenetet.
6. A honlap leírása: Itt adjuk meg honlapunk rövid ismertetőjét. A lap leírása az XHTML-kódban a <DESCRIPTION> Meta Tag értékeként jelenik meg. Ezt az információt használják a keresőmotorok és segédprogramjaik honlapunk tartalmának értékelésére és indexelésére. Kulcsszavak: Írjunk be weblapunk szempontjából fontos szavakat, kifejezéseket. A kulcsszavak is feltűnnek a HTML-kódban, mint a <KEYWORDS> Meta Tag értékei. Ezt az információt a keresőmotorok a részletes kereséshez használják. 2.3 Menüválasztás Függőleges menü A menü a honlap bal oldalán jelenik meg, az összes oldal és mappa függőlegesen elrendezve látható. Vízszintes menü A menü a honlap felső részén jelenik meg, az összes oldal és mappa vízszintesen elrendezve látható. A következő beállítások érhetőek el: Első szintű menüelemek megjelenítése a lap alján. Ebben a menütípusban a teljes honlaptérképhez vezető hivatkozás automatikusan megjelenik. Almenü megjelenítése a szint tartalmával: a kijelölt első szintű elemhez rendelt almenü feltűnik a kép bal oldalán. 2.4 Stílusminta választása A stílussablonok a grafikus kezelőfelületet alakítják ki. Az animált kategória sablonjai pedig Flash animációjú bannerrel rendelkeznek. Természetesen lehetőségünk van egyedi megjelenésű oldal létrehozására, ekkor az egyedi sablont kell kiválasztanunk. A későbbiek során tetszőlegesen megváltoztathatjuk a kinézetet, a tartalomra nem lesz hatással. Ezt követően megkezdődhet az oldal tartalommal való feltöltése.
7. 2.5 Szöveg objektum 1. ábra Szöveg objektum A képen látható, hogy meglehetősen sok beállítással rendelkezik. Alapvető szövegszerkesztői feladatok elvégzésére alkalmas: betű típus, stílus és méret. Ezen kívül beszúrhatunk HTML kódot, vagy bekapcsolhatjuk a RollOver funkciót, melynek hatására a szövegünk gördülve jelenik majd meg. Megváltoztathatjuk a szöveg színét, hátterét, felsorolásokat hozhatunk létre, hivatkozásokat helyezhetünk el a dokumentumunkban, vagy egyenleteket is beírhatunk.
8. 2.6 Kép objektum 2. ábra Objektumok beszúrása A kép jobb oldalán láthatóak azok az objektumok melyekkel az oldal tartalmát készíthetjük el. Bármelyik elemet választjuk is, mindegyiknek van külön egyénre szabható beállítása. Képek beszúrásakor a képeket optimalizálja, megfelelő méretre alakítja, különböző effekteket rendelhetünk hozzá. Beszúrhatjuk objektumként, készíthetünk rá hivatkozást, így külön oldalon is megtekinthető a kép, ami nagyítható is. 2.6.1 Flash animációs objektum Flash fájlok futtatásához a számítógépen, Macromedia Flash Player szükséges. 2.6.2 E-mail űrlap objektum Lista fül: E rész beállításaival hozhatjuk létre az űrlap különféle mezőit. Ez az ablak tartalmazza a felhasználók adatainak begyűjtéséhez használható űrlapok elkészítéséhez szükséges eszközöket. Küldés fül: E rész eszközeivel az űrlapon összegyűjtött adatok elküldésének módja határozható meg. Színek fül: Az űrlap kinézetére vonatkozó beállításokat tartalmazza.
9. 2.6.3 További beállítások 3. ábra Beállítások Ebben a menüben találhatók a további paraméterek beállítási lehetőségei a menük, hiperhivatkozások, görgetősávok és szövegek grafikus megjelenítésével, valamint a bevezetőlap és a nyelv kiválasztásával, és a jelszóvédett területek, a bevásárlókosár és az RSS csatorna létrehozásával kapcsolatos beállítások. Az itt beállított paraméterek hatással vannak a dokumentumra, tulajdonképpen úgy is felfogható, mint a weboldalunk stíluslapja. Ha a projektünket itt kezdjük, tehát a beállításokat végezzük el először az hatással lesz az egész dokumentumra. A lépések során minden egyes változtatást, illetve annak hatását megnézhetjük a teszt gomb megnyomásával, így könnyen alakíthatjuk weblapunkat. Munkák befejezésekor exportálnunk kell az elkészült anyagot. Három lehetőségünk van: projektként és weblapként is elmenthetjük, illetve feltölthetjük a tárhelyünkre. Projektként is érdemes elmenteni, hiszen ez szükséges lesz a későbbiek során, ha változtatni szeretnénk mind tartalmilag, mind kinézetét tekintve a dokumentumon. Sajnos nem tud.html állományokat importálni, így a kisebb változtatások esetén kényelmesebb volt a Dreamweaver programot használni.
10. HTML és CSS ajánlásokról röviden Szükségesnek tartom egy kicsit elidőzni a főbb szabványok körül, két okból is. Egyrészt az ismertetett program szabványokkal dolgozik, másrészt, ha úgy gondoltuk, hogy az elkészült és feltöltött, működőképes oldalunk csodálata közben nyugodtan hátra dőlhetünk, bizony tévedünk, mert lesz még munkák vele. A mai korszerű oldalak külön választhatóak a szabványok tekintetében tartalmuk és megjelenítésük alapján. Tartalmuk szabványát a HTML (HyperText Markup Language) adja, megjelenítés szabványát pedig a CSS (Cascading Style Sheets). 1994-ben Tim Berners-Lee megalapította a W3C 1 - t (World Wide Web Consortium), melynek fő célja a különböző technológiák és protokollok szabványosítása. Napjainkban a W3C a webes infrastruktúrára és alkalmazásokra irányuló műszaki szabványok nemzetközi szervezeteként ismert. Egy olyan Web felépítését kívánta ezzel biztosítani, amelyen az információ a Föld népességének lehető legnagyobb része számára elérhetővé válik, függetlenül attól, hogy milyen hardverrel, szoftverrel, hálózati infrastruktúrával, anyanyelvvel, kultúrával rendelkezik. 2 A webes szabványok használatának a következő előnyei vannak: 1. Hatékony kód: legjobb módszerek a web fejlesztésben sokszor a kód újra használhatóságára alapoznak a HTML tartalmat szétválaszthatjuk a stílustól (CSS) és a működéstől (JavaScript), így a fájlok kisebbek maradnak, a kódot csak egyszer kell megírni, és később bárhol felhasználható, ahol újra szükség van rá. 2. Egyszerűbb karbantartás 3. Hozzáférés: az egyik legnagyobb probléma a weboldalakkal az, hogy hozzáférhetővé tegyük mindenki számára, függetlenül attól, hogy kiről és milyen körülményekről van szó. Ebbe beletartozik az olyan weboldalak készítése is, amelyeket fogyatékos személyek is használnak, mint például vakok vagy gyengén látók, mozgássérültek. Ha webes szabványokat és a legjobb módszereket használjuk, akkor olyan weboldalakat készíthetünk, amelyeket a fogyatékkal élők is használhatnak. 1 World Wide Web Consortium: konzorcium, amely nyílt szoftverajánlásokat (szabványokat) alkot a világhálóra, melyek alkalmazását a szoftvergyártókra bízza. 2 NAÁR JÁNOS: Weblap-szerkesztés lépésről lépésre, 2008.
11. 4. Kompatibilitás: a weboldalaink nem csak a különböző platformokon (mint például Windows, Mac vagy Linux) fognak megbízhatóan működni, hanem a különböző eszközökön is, amelyekbe manapság beletartoznak a mobiltelefonok, a tévék és a játékkonzolok is. 5. Webes keresők és keresőrobotok: ha a webes szabványokat és a legjobb módszereket használjuk, akkor a weboldal a lehető legátláthatóbb lesz a keresőrobotok számára, amelyek pásztázzák a weboldalakat, így az oldal jobb eredményt fog elérni az olyan keresőkben, mint például a Google. 3 3.1 A HTML A HTML (HyperText Markup Language, magyarul hiperszöveg-leíró nyelv) az SGML 4 -ből származó leíró jelölőnyelv, az abban meghatározottak egyik nyelvmegvalósítása, amelyet weboldalak készítésére használunk. A hypertext elnevezés a HTML fájlok kapcsolhatóságaira (linkelés) utal. A HTML gazdag szókinccsel és szintaxissal rendelkezik. A HTML állomány olyan szövegfájl, amely a szövegen kívül tartalmaz ún. "HTMLtag"-eket (formázóutasításokat), amelyek befolyásolják a dokumentum megjelenítését, és megjelenítendő, letöltendő objektumokra történő hivatkozásokat. A tageket a böngésző értelmezi és hajtja végre. 5 Az HTML nyelvet eredetileg platform független közzétételére fejlesztették ki, amely tartalmaz szöveges és képi tartalmat, s napjainkra multimédiás tartalommal is bővült. A HTML dokumentum kiterjesztése a.html vagy.htm. 3.1.1 HTML fejlődése A HTML nyelvnek az évek során számos szintje, hivatalos verziója jelent meg. Ezen verziók mindegyike szabvány. 0. szinten (HTML 1.0) alakult ki az alapvető szerkezet, a nyitó és záró címek, a fejléc és a törzs. 1. szint (HTML 2.0) nem hozott túl sok változást, de innentől különül el a böngésző által szabályozott és a dokumentum szerkezetében létrehozott formázás. 3 CHRIS MILLS: Bevezető a webes szabványokba. 4 Az SGML (Standard Generalized Markup Language) szabványos jelölőnyelv dokumentumok belső szerkezetének leírására. 5 NAÁR JÁNOS: Weblap-szerkesztés lépésről lépésre. 2008.
12. 2. szint a HTML 2.0 kiegészítése. Bevezetésre kerültek az űrlapok, az ezen belüli többsoros szövegbevitel és a kiválasztható opciók (listából). 3. szintet jelentő HTML 3.2 verziót 1996-ban fogadta el a W3C, ami jelentős változásokat hozott. Tovább bővültek a lehetőségeink: lehetővé vált a táblázatok, matematikai képletek és vezérlőelemek használata, innentől van lehetőségünk Java appletek 6 beágyazására, és scripteket is innentől használhatunk. 4. szintet jelentő HTML 4.0 verziót 1997 végén tette hivatalos ajánlássá a W3C, majd némi módosítás után 1998 áprilisában kiadta a végleges verziót, mely megfelel az ISO 8879:1986 szabványnak. 7 A HTML 4.01 1999 decemberében jelent meg, amely néhány javítást tartalmazott és úgy tűnt, hogy ezzel be is fejeződik az SGML nyelven alapuló HTML nyelv fejlesztése. A W3C egyszerre két dolgot tartott szem előtt. Az egyik, hogy száműzze megjelenésre, kinézetre vonatkozó jelölőelemet a nyelvből, így azt végre arra használják, amire való: az oldal struktúrájának leírására. A másik, hogy szigorúbb szabályokat kell bevezetni a nyelv használatát illetően. Ehhez épp kapóra jött az akkorra már rendkívül népszerűvé vált XML 8. Ez egy adatstruktúrák leírására kitalált speciális jelölőnyelv, mely szigorú formai szabályokat határoz meg arra vonatkozóan, hogy egy XML dokumentumnak hogyan kell felépülnie, a legkisebb hibát sem tűri el. A HTML és az XML erősségeinek összegyúrásából jött létre 2000-ben az XHTML 1.0. 2008 januárjában a W3C nyilvánosságra hozta a HTML 5 első vázlatát. Kidolgozásában az összes jelentős böngészőgyártó aktívan részt vett, ezáltal a jelenlegi kompatibilitási problémák minimalizálásra kerültek. Fontos újítás, hogy a HTML innentől már csak a tartalomra és felépítésre szorítkozik, mindenféle formázás és stíluselem CSS-be kerül. A fejlesztők a HTML 5-öt igyekeznek kompatibilissé tenni a HTML 4.01-gyel és az XHTML 1.0 és 1.1 verziókkal is. 9 6 Java programozási nyelven írt programkód, amely a szerver oldalon tárolódik, böngészőből indítva a felhasználó számítógépén fut le. 7 SPÁNYIK BALÁZS: Weboldalkészítő suli 8 extensible Markup Language: Kiterjeszthető Leíró Nyelv, a W3C által ajánlott általános célú leíró nyelv. 9 SPÁNYIK BALÁZS: Weboldalkészítő suli
13. 3.2 Stíluslapok CSS A böngészőprogramok fejlesztése során, a HTML szabványon túlléptek és új paramétereket vezettek be, amelyekkel a dokumentum megjelenésére helyezték a hangsúlyt. Ha megnézzük egy hagyományos webes dokumentum kódját látható, hogy nagyobb részét a formázási utasítások alkotják, a kisebb része a tényleges tartalom. Ezért vált fontossá és szükségessé a formázások egyszerűsítése és egységesítése a dokumentumon belül. E probléma megoldására a W3C kidolgozta és felügyeli a CSS 10 specifikációját, amely biztosítja a tartalom és a megjelenés elkülönítését. A CSS tehát egy stílusleíró nyelv, amely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le. 11 Stíluslap használatával például, ha az oldalunk betűtípusát, méretét, vagy színét szeretnénk megváltoztatni nem kell a tag-ekkel bajlódnunk, a stíluslapban gyorsan átírhatjuk. 4. ábra Egy stílusdefiníció felépítése 12 A stílusleírás weboldalunk (X)HTML-kódjával többféle módon kapcsolódhat: 1) Közvetlen (inline): Az dokumentumban az adott címke attribútumaihoz hozzáadunk egy új, style nevű attribútumot, amelynek értéke egy komplett CSSszabály lehet. Kerülendő megoldás. 2) Beágyazott (embedded): A stílusdefiníciók a dokumentumba kerülnek, de a head részében definiáljuk. Ha HTML megjegyzésbe is tesszük (<!--... -->), akkor azt érjük el, hogy az olyan böngészik, amik nem ismerik a stíluslapokat, ne jelenítsék meg a stílus definíciónkat. Az így meghatározott stílus az egész dokumentumra érvényes lesz. (Kerülendő megoldás, bár néhány oldalból álló site esetén nem számít főben járó bűnnek ez a megoldás.) 3) Csatolt (linked): A stílusdefiníciók külső CSS-fájlban találhatóak, az oldalba pedig csak egy hivatkozás kerül be, amely arra utasítja a böngészőt, hogy töltse 10 Cascading Style Sheets: Lépcsőzetesen egymásra épülő stíluslapok 11 SPÁNYIK BALÁZS: Weboldalkészítő suli 12 Kép forrása: http://pcworld.hu/weboldalkeszito-suli-6-stiluslapok-20080919.html?p=4
14. be a CSS-fájlban levő stílusokat, és azoknak megfelelően jelenítse meg az oldal tartalmát. Ez a módszer biztosítja a legrugalmasabb megoldást. A stílusok egy külső állományban vannak definiálva, amelyet tetszőleges számú dokumentumhoz kapcsolhatunk hozzá. 13 A külső stíluslapokra az oldal fejlécében tudunk hivatkozni egy link elem segítségével: <head> <link rel="stylesheet" href="style.css" type="text/css"> </head> A stíluslapot tartalmazó állományban (style.css) csak a stílusaink definícióját kell elhelyeznünk, pl.: h1 { font-size: 20px; color: #a00000; } p { font-size: 12px; color: #00a000; } A beágyazott stíluslapokhoz hasonlóan az így meghatározott stílus az egész dokumentumra érvényes. 4) Importált stíluslap Egy stílus meghatározáson belül egy másik, külső stílus meghatározásra hivatkozzunk: <style type="text/css"><!-- @import url(http://www.honlapunk.hu/stilusok/masik.css); --></style> <style type="text/css"><!-- @import url(http://www.honlapunk.hu/stilusok/masik.css); --></style> A cím megadásakor hasonlóképpen járhatunk el, mint a linkeknél általában, azaz akár URL (masik.css) formában is írhatjuk, amennyiben ugyanabban a könyvtárban található 13 SPÁNYIK BALÁZS: Weboldalkészítő suli
15. mint a HTML állományunk. A külső stílus hivatkozás megelőz minden más definíciót, amennyiben már szerepel előtte más, figyelmen kívül lesz hagyva! 14 3.3 Weboldal ellenőrzése Visszatérve az elkészült oldalunkhoz ellenőriznünk kell, hogy vajon a W3C által meghatározottaknak megfelel-e a site. Ehhez el kell látogatnunk a http://validator.w3.org/ oldalára, ahol a jelölőnyelv ellenőrzése - Markup Validation Service -, és a stílus ellenőrzése - CSS Validation Service - alapján megnézhetjük megfelel-e dokumentumunk a szabványoknak. (Természetesen lehetőség van a dokumentum elkészítése közben is megnézni nem tértünk-e el a szabványtól.) Nagy volt az örömöm, mert a Markup Validation Service kevés hibát talált. Viszont a CSS Validation Service szerint hemzsegett a hibától. Nagyon lehangoló volt, de elhatározásomat ez a tény csak megerősítette, hogy márpedig szabályos, szabványos oldalt hozok létre. Így nekiálltam a hibák kijavításának. A CSS Validation Service is nagy segítségre van azzal, hogy kiírja hol, melyik sorban van a hiba és az milyen jellegű. Ennek megfelelően végighaladva a stíluslapokon, sok-sok munkát belefektetve sikerült kijavítani a hibákat. A javítás során két programot használtam: Adobe Dreamweaver CS4 és Rapid CSS 2010 szoftvereket. 14 BÁRTHÁZI ANDRÁS: CSS alapjai
16. Tananyagok létrehozása Az információs társadalom nevezhető tudás-alapú társadalomnak is, az információ a gazdaság mozgatórugója is. Az információs társadalom egyik alapvető tétele az élethosszig tartó tanulás, ami jelentős időráfordítást is igényel. Az oktatásnak változnia kell, követnie és támogatnia szükséges az élethosszig tartó tanulást. Az iskolának nem csak a tananyagot kell megtanítani a tanulóival, hanem azt a képességet is, hogy önállóan tudjanak tanulni. Ebben a folyamatban megváltozik a tanár szerepe is. 15 Az Internet-alapú tananyagok elérhetősége jelentősen megnőtt, terjeszkedik. Ez gyakran azzal jár, hogy a mennyiségi növekedéssel az anyagok (szakmai, didaktikai, használhatósági) minősége nem tart lépést. Viszont növekvő igény tapasztalható a tananyagok megfelelő minőségére. Az Internet-alapú oktatás tulajdonképpen egy kommunikációs folyamat, mely folyamat többnyire internetes eszközökön keresztül zajlik, ahol átviteli közegként az internet illetve intranet hálózatok szolgálnak. Ebben a környezetben tanulási folyamat a tanár személyes jelenlétét már csak kis mértékben igényli. 16 4.1 Sulinet Digitális Tudásbázis A Sulinet Digitális Tudásbázis (SDT) tartalom-menedzsment, e-tanulás keretrendszer és digitális tananyag adatbázis, melynek célja, hogy minden közoktatási évfolyamon a műveltségi területeket, a szakképzésen belül pedig az egyes szakmacsoportok ismeretanyagát felölelő elektronikus tananyag-adatbázis és az azt kezelő dinamikusan testre szabható keretrendszer létrehozása. A rendszer egy elektronikus tananyag-adatbázis és tartalomkezelő eszköz, amely minőségileg új lehetőségeket biztosít interaktív multimédia tartalmak eléréséhez és felhasználásához az iskolai oktatásban. Lehetővé teszi eddig nem létező elektronikus oktatási anyagok online elérését és felhasználását (akár online, akár offline) a mindennapi oktatásban, illetve egy szerkesztő eszközt biztosít a pedagógusok, felhasználók számára saját tananyagok összeállításához, szerkesztéséhez, így támogatva a pedagógiai tevékenység hatékonyságának növelését, megújulását. 17 15 WAGNER BALÁZS: Az elearning magyarországi helyzete 16 IZSÓ LAJOS: Web-bányászati módszerek alkalmazása Internet-alapú tananyagok minőségvizsgálatára 17 SULINET DIGITÁLIS TUDÁSBÁZIS FELHASZNÁLÓI KÉZIKÖNYV
17. Az SDT web-es felületét a http://sdt.sulinet.hu/default.aspx?cid=6d895142-0eb0-414b-a3ef-5e350fbc3d7f címen érhető el. Oktatási célra mindenki számára szabadon és díjmentesen hozzáférhető. A bevezetőben említett pályázat keretében volt szerencsém egy 30 órás tanfolyamon részt venni, ahol megismerkedtem a tananyagkészítés alapjaival. Ahhoz, hogy a tananyagszerkesztőt használni tudjuk regisztrálnunk kell egy felhasználó nevet a http://www.sulinet.hu/tart/regisztracio oldalon. A webes megjelenítéshez és a szerkesztéshez is a következő szoftvereket kell telepítenünk: a) megjelenítéshez: Böngésző ( pl. IE, Firefox, Opera) b) a tananyagszerkesztőhöz:.net keretrendszer 1.1 és 1.1 szervizcsomag c) animációk megjelenítése: Flash Player d) képletek megjelenítése: MathPlayer e) képletszerkesztő: MathType 5.2 f) SVG megjelenítő: Adobe SVG Viewer 3.0 g) chathez: JAVA virtuális gép h) SDT tananyagszerkesztő Az SDT rendszer felépítésének egyik legfontosabb alapelve az, hogy az egyes tartalmi elemek (objektumok) kerüljenek be egy tananyagtárba, ahonnan bárki tetszése szerint előveheti és beillesztheti az általa megtervezett tananyagba. 18 Az SDT keretrendszer speciális objektumokból épül fel tananyagegységek - Az elkészítendő digitális tananyag elemi egységek szervezett halmaza, amelyet tananyagegységnek nevezünk. pl.: foglalkozás, tevékenység, fogalomtár, tesztfeladat tananyagelemek - pl. szöveg, kép, mozgókép, hang, animáció, hivatkozás, ezek építik fel az egyes tantárgyak és műveltségterületek elektronikus tananyagát. pedagógiai objektumok - A digitális tananyag rugalmas felhasználása a képességfejlesztésnek vagy a pedagógiai céloknak megfelelően. 18 SULINET DIGITÁLIS TUDÁSBÁZIS FELHASZNÁLÓI KÉZIKÖNYV
18. Egy objektumra vonatkozó minden információt a meta adatok tárolnak. Ezek az információk határozzák meg az objektumok tartalmát és tulajdonságait a szerkesztés során, amelyek aztán a keretrendszerben használhatóak. A meta adatok tájékoztatnak arról, hogy az adott objektumnak milyen felhasználási lehetőségei vannak. 5. ábra A tananyagszerkesztés technikai lépései 4.1.1 Publikálás Az elkészült tananyagot a szerkesztőből feltölthetjük a saját privát publikus területünkre. A feltöltés után a Csomaglista eszköztár Csomag web publikáció pontjával lehet a webes publikációt elindítani. Megtekinteni a Csomag megtekintése a weben... gombbal lehet felhasználónév és jelszó megadása után. Az általam készített tananyag itt található, amely az oldalra való bejelentkezés után érhető el: http://sdt.sulinet.hu/player/default.aspx?w=9ba9a14d-2836-4922-b455-10788f69b34f&pkg=dbc1e837-1fbe-47c8-a6ca-073f7905fc1e&v=1&b=1&g=00000000-0000-0000-0000-000000000000&t=tema&cid=b9041986-193d-4380-a282-d51c89afd232 Az elkészített foglalkozások internetkapcsolat nélkül is megjeleníthetjük. A lejátszáshoz offline csomag szükséges. Ehhez a Csomag tallózóban kiválasztott téma vagy foglalkozás helyi menüjéből az Offline publikáció-t kell választani. A létrejövő tar.gz állományt az offline SDT lejátszóban nyithatjuk meg. Természetesen az online és offline változatokat is a későbbiekben bármikor szerkeszthetjük, módosíthatjuk.
19. 4.1.2 SDT jelentősége Az oldalon publikált tananyagok fejlesztésének célja, hogy az oktatásban módszertani megújulást hozzon, korszerű eszközeként segítséget nyújtson a tanároknak és a tanulóknak a tanítási-tanulási folyamatban. Az SDT a magyar digitális pedagógia fejlesztésének egyik meghatározó eszköze. A foglalkozások feldolgozása során a tanárok és tanulók új tanítási és tanulási módszereket próbálhatnak ki. Az SDT alkalmas az aktív tanulási módszerek megalapozására. A korszerű eszközök használata következtében előtérbe kerül a kooperatív munka, és a tanárok feladatai is megváltoznak. 4.2 Hot Potatoes - a tesztszerkesztő A Hot Potatoes szoftver segítségével viszonylag gyorsan és praktikus tudunk interaktív feladatlapokat létrehozni. A program használata egyszerű, ingyenes, pusztán egy rövid regisztráció szükséges, hogy minden funkciót használhassunk. Letöltése erről az oldalról lehetséges: http://hotpot.uvic.ca/index.php#downloads. Magyar nyelven is használhatjuk, ehhez szükségünk van a nyelvi fájlra, amely a http://www.okm.gov.hu/nemzetkozikapcsolatok/ikt-nyelv/hot-potatoes-magyar oldalról tölthető le, majd be kell másolni a Hot Potatoes program "translations" nevű alkönyvtárába. Ezt követően a program megnyitásakor a Settings menüben tudjuk a nyelvet átállítani. A program 5 alprogramból áll, melyek különböző típusú kérdések, gyakorlatok elkészítését támogatja, mentési, nyomtatási és weboldalra történő exportálási funkciókkal. Időzítőt is megadhatunk, ennek lejárta utána a kitöltő már nem tud új választ megadni, így csak az addig megadott válaszok kerülnek kiértékelésre. Az egyes kérdéseknél használhatunk szöveget, hangot, videót, vagy képeket is. JQuiz: kérdés alapú rejtvény 4 különböző válasszal, lehetőség van segítség kérésére, ekkor a következő betűt kapjuk meg. JCloze: szókitöltős teszt, automatikus pontozással, több lehetséges válasszal. Lehetőség van egy hosszabb szövegben a kitöltendő szavak automatikus kiválasztására is, de mi magunk is kiválaszthatjuk, pontosan mely szavakat kell majd a felhasználónak kitöltenie. JCross: online kitölthető keresztrejtvény készítését teszi lehetővé. JMix: összekevert mondatszavak helyes sorrendbe állítását gyakoroltató feladatokat készíthetünk vele. A megadott szavakból tetszőleges számú helyes mondat készíthető.
20. JMatch: összepárosító vagy sorba rendező feladatok készítésére szolgál. Megadjuk az eredeti sorrendet (párosítást), majd a program összekeveri a lehetőségeket. A feladatok nehézsége és szintje csak attól függ, hogyan készítjük el a feladatlapokat, ezért bármilyen életkorú, tudású és képességű tanulócsoport részére el lehet készíteni. A feladatokat az Internetre fel tudjuk tölteni, weboldalunkba illeszteni. Van egy hatodik lehetőség is, The Masher a neve, amellyel az elkészített feladatokat "összegyúrhatjuk", vagyis a még különálló feladatokat összeilleszti és egy index.html állományt hoz létre. Ezzel a programmal készítettem el az iskola honlapján a Diák menüben található feladatokat. 4.3 Interaktív bemutató Egy jól összeállított prezentáció segítségére van tanárnak, diáknak egyaránt. Az iskola oldalán található A számítástechnika története című könyvecske 19 50 oldalas, de úgy gondoltam egy rövidebb összefoglaló segíthet a témakörhöz tartozó anyagrészek könnyebb elsajátításában. Ezért elkészítettem a prezentációs változatot is 20, melyben röviden összefoglaltam azokat a részeket, amelyek az általános iskola felső tagozatában a történethez kapcsolódóan elkísérnek. Elkészítése során nem a program által felkínált számtalan lehetőség beépítése volt a célom, hanem egy olyan vázlat elkészítése, amely tartalmát tekintve hasznos információt nyújt. A PowerPoint szinte csábít arra, hogy rögtön nekilássunk a bemutató elkészítésének, de érdemes először inkább papíron megtervezni a diákra lebontott bemutatónkat. Elég felvázolnunk, hogy mit és hány dián akarunk majd megosztani a tanulókkal. A túl kevés dia éppen úgy helytelen, mintha 150 diát kellene áttekinteni. A prezentáció készítése történhet: Tervezősablonból: A tervezősablonok használatával egyszerűen és gyorsan készíthetünk prezentációt, ám így az meglehetősen uniformizált lesz. A PowerPoint elindítása után az Új bemutató létrehozása kereten belül válasszuk a Tervezősablon opciót. (Előadás-tervező varázsló) Bemutatótervből: A tervezősablon használata esetén kész diasorból indulhatunk ki, amelyet csupán át kell írnunk. A bemutatóterv esetében csak a diakockák hátterét 19 http://iszkaiskola.hu /Tananyag/tortenet/index.html A könyv kikapcsolódásképpen tartalmazza Móra Ferenc: A gellérthegyi távirgány című rövid elbeszélését is. 20 http://iszkaiskola.hu /Tananyag/Szamolast_segito_eszkozok_szg_fejlodes.ppt