A W3Suli projekt célja
Oktatási célok
A tanulók valós körülmények között, valós probléma megoldására szerveződve szerezzenek új ismereteket és tapasztalatokat. A webfejlesztéshez kapcsolódó egy vagy több szakmai területen próbálják ki és fejlesszék tudásukat, képességeiket. Tanuljanak meg a kapcsolódó szakmai feladatokat végző (dizájner, grafikus, web-programozó, marketinges, tesztelő, ...) társaikkal együtt dolgozni. Figyelembe venni azok lehetőségeit, elvárásait.A megoldani kívánt valós probléma:
- Iskolánkban (és valószínűleg nagyon sok más helyen is) az intézmény honlapjának karbantartása egy web-programozásban jártas kolléga feladata, ami korlátozza a közzé tehető tartalmak mennyiségét.- Az osztályok a Facebook-on mutatják be életüket, annak minden buktatójával. A szaktanárok egy része pedig saját honlapján teszi közzé tananyagait, és a tanuláshoz szükséges információkat.
- Az elkészült blogmotor célja, a tanulóknak és a tanároknak lehetővé tegye tartalmak közzétételét az intézmény webhelyén. Még HTML ismeretek sem kell hozzá. A Facebook-al ellentétben a moderálás esetünkben megelőzi a nyilvános megjelenést.
A W3Suli projekt megvalósítása
Előkészítő szakasz
2015. utolsó negyedévében már tudtuk, hogy a pályázati programunk támogatása esetén milyen feladatokat kell majd megoldanunk.A projekt előkészítése keretében megkezdtük a tanulók toborzását. Szakköri keretek között az érdeklődő diákok elkezdtek mélyebben megismerkedni a CSS3, a HTML5 által kínált lehetőségekkel. Többen elkészítették első űrlapjaikat és PHP5 segítségével tárolták a beküldött adatokat MySql adatbázisban.
A diákok ekkor leginkább a saját maguk által kitalált feladatokon dolgoztak tanári segítséggel.
A projekt szempontjából hasznos volt ez a szakasz, mert sikerült jobban megismerni a tanulók képességeit egy-egy területen, ők pedig olyan alapismeretekhez jutottak, amelyek nélkül a vállalt feladatok nem lettek volna megvalósíthatók a rendelkezésre álló idő alatt. Tervezés szakasza
Decemberre a diákok egy része eljutott arra a szintre, hogy legalább sejtse a felhasznált nyelvekben rejlő lehetőségeket és tisztában legyen egy egyszerűbb projekt megvalósításának lépéseivel. Ekkor sorra vettük, hogy mit kell tudni egy blogmotornak, ha azt egy iskolai honlap megvalósításához kívánják felhasználni.
Az igényeket összegyűjtve a megvalósításhoz használt programmodulokat és az általuk kezelt paramétereket UML osztálydiagramba gyűjtöttük (W3Suli tervezett elemei - GitHub).
Az osztálydiagram szerkesztésére nyílt forráskódú szoftvert (Dia) használtunk.
Megvalósítás szakasza
PHP készítés
Az első php fájljaink az osztálydiagramból, a szintén nyílt forráskódú Die2Code segítségével készültek. Hamar kiderült, hogy OOP használata nagyon megszűrné a bevonható diákokat, így az objektumorientált kódot gyorsan visszaalakítottuk Procedurális formára. Kezdetben minden PHP fájl csak üres függvényeket tartalmazott. A résztvevő diákok feladata volt megtöltésük tartalommal. Minden a PHP kód készítésében résztvevő tanuló egy egyszerűbb feladat megoldásával kezdte. Egy fájl függvényeit készítette el. Közben megismerkedett az űrlapok készítésével, az elküldött űrlapadatok feldolgozásával és HTML blokkok készítésével az adatbázisban tárolt adatok felhasználásával.Dizájn
A dizájnerek közben egy előre elkészített HTML oldal formázásába kezdtek, ami a PHP-sok számára is mintául szolgált a HTML kód összeállításánál. Ez volt az a terület, amelyre a legtöbb tanulót sikerült bevonni. Minden tanuló egy-egy CSS-t készített, így jelenleg összesen 14 -féle módon jeleníthetjük meg az oldalt. Egy-egy közös CSS készült az alapbeállításokhoz, a responsive megjelenítéshez, valamint szerkesztői felületekhez. A diákok által készített CSS-ek a három alap CSS beállításait írják felül, ill. egészítik ki. Egyik tanulónk készített egy 3 dimenziós kockaként forgó logót aminek beépítése még hátra van. Ennek illesztése Ajax hívás segítségével történik majd, kizárólag webkitt alapú böngészőkben. (Perspektívakezelése nélkül torzul.)Grafika
Grafikusunk közben elkezdte a minta HTML oldalhoz illeszkedő ikonok készítését.Tesztelés
A diákok kezdetben a tesztelést nem tartották igazán komoly tevékenységnek. Az első hibák felfedezését követően azonban már versengtek azon, hogy ki talál többet, és a programozók is megtanultak örülni annak, ha a társaik felfedezték hibáikat. Alapigazság, hogy „Az a jó hiba, amit ismerünk, mert azt javítani is tudjuk”.PR tevékenység
A pályázati kiírásban és projektünk megvalósításában is kiemelt helyet kapott a projekt és eredményeinek népszerűsítése.Ehhez tartozott:
- Beschenbacher Kornélnak a Fülemüle verseny első fordulójára beadott pályaműve (a HelloWorld versenyfeladatát sajnos nem fejezte be). (Beschenbacher Kornél prezentációja - PPTX)
- A W3Suli webhely tartalomfejlesztési munkái. Jórészt tanulók szerkesztették tartalmát. (W3Suli blogmotor webhelye)
- Tóth-Kovács Gellértnek és Szép Balázsnak a bemutatója a Gábor Dénes Főiskola Tehetségnapján. (GDT Alkotni jó! Tehetségnap 2016. április 8.)
- Tóth-Kovács Gellértnek és Szép Balázsnak a bemutatója a Fülemüle Tehetségnapon. (Tóth-Kovács Gellért és és Szép Balázs előadás - Youtube videi)
- A ISZE lapjában az Inspirációban néhány napon belül megjelelő cikkünk. (Inspiráció 2016./1. - PDF)
- A PCWorld júniusi számához készülő cikk. (PCWorld cikk- Facebook)
- Tóth-Kovács Gellértnek az iskolánk honlapján megjelenő prezentációja. (Tóth-Kovács Gellért prezentációja - PPTX)
- Az ISZE honlapján „Blogmotor pályázat” link alatt elérhető bemutatkozó anyagunk. (ISZE "Blogmotor pályázat" - PDF)
- Az Egressy nevelési napján tartott szakmai előadás.
- Két webhely (webfejlesztes.gtportal.eu és www.tehetseggondozas.hu) kapcsolódó oldalainak elkészítése.
- És persze besegít mindenki, aki használja munkánk eredményét: belvarosikepzo.hu
Keresőoptimalizálás
Van néhány olyan kapcsolódó szakmai terület, amelyet a munka során folyamatosan szem előtt tartottunk. Ilyenek az akadálymentesítés és a keresőoptimalizálás. Ezek ismerete nélkül lehet honlapot készíteni, csak nem érdemes.A keresők igényeit figyelembe vettük a blogmotor készítésénél.
Az elkészült blogmotor webhelyét a korábban felsorolt PR tevékenységekkel és a tanulók segítségével ismerőseik között népszerűsítettük, ami a látogatói adatokat kedvezően befolyásolta. Regisztráltuk oldalunkat a Google Analytics és a Google Webmestereszközök szolgáltatásaiba, így a diákok folyamatosan nyomon követhetik a forgalom alakulását, és láthatják a kereső figyelmeztetéseit és a fejlesztésre vonatkozó javaslatait.
A Google+-on és a Facebook-on is kampányt indítottunk.
A w3suli.hu domaint 2016. március 24-én regisztrálták. Célunk kezdetben a Google találati listájának első oldalára kerülés volt a „Blogmotor” szóra. Ezt viszonylag gyorsan sikerült elérni. Már a legrelevánsabb találattá válás a cél.
Megvalósítás szakaszában végzett közös tevékenységek
Egy 60 órás szakkör keretében, csak szakköri foglalkozásokon nem lehetett volna a W3Suli blogmotort elkészíteni. A fejlesztői munkát a diákok többsége saját szabadidejében is folytatta (délután, hétvégéken, iskolai szünnapokon).A szakköri foglalkozások célja elsősorban a munka koordinálása és olyan ismeretek elsajátítása volt, amelyek szükségesek egy hasonló feladat elkészítésénél. Több területről is bevontunk külső szakértőknek, akik hitelesen és érthetően mutattak be a diákoknak egy-egy a projekthez kapcsolódó témát:
Az akadálymentes honlapok készítésének célját és alapjait megismerték Szántai Károly (web akadálymentesítési szakértő) előadásából. A responsive webdizájn tervezésből kaptak ízelítőt Ágoston Gergely (Gábor Dénes Tehetségpont) előadásán és gyakorlati foglalkozásán. A PR tevékenységhez jól használható, magyar világsikerű PREZI-t ismerték meg Fülöp Márta Marianna (ISZE elnök) jóvoltából.
A szakkör keretében meglátogattuk a NIIFI budapesti szuperszámítógépét, ahol dr. Stefán Péter (NIIFI igh.) a szuperszámítógépek feladatainak, működésének bemutatásán túl, bevezette a tanulókat a SULINET és kutatói rejtelmeibe is. Itt láthatták az internetet a szolgáltatók szemével is.
Látszólag kevés köze van a blogmotor készítésnek a Fülemüle verseny zsűrizéséhez. Ennek ellenére hasznos volt a projekt résztvevőinek bevonása a verseny diákzsűrijében. Közösen hoztak döntést arról, hogy kik legyenek a diákzsűri díjazottjai az általános iskolás és a speciális kategóriákban. Eközben közösen értékelték a beküldött pályaművek tartalmát és megjelenését. Ugyanakkor az általuk készített honlapot és az általuk feltöltött tartalmakat hasonló módon és gyakran hasonló szempontból értékelik a látogatók vagy potenciális felhasználók is.
Együttműködés formái és segédeszközei
A projekt megvalósítása során kiemelt cél volt, hogy a diákok csapatban, egymással együttműködve, egymás munkáját segítve tanuljanak meg dolgozni.Kezdetben nem ment zökkenőmentesen. Néhány lelkes diák nehezen szokta meg, hogy a teljes kódnak csupán egy részében garázdálkodhat szabadon, és a többiek kódját ne módosítsa. A közös munka közös „szabványok” betartását is megkövetelte annak érdekében, hogy a résztvevők egymás kódját megértsék, és legyenek képes használni is. Végül azonban sikerült.
A verziókezelésre a GitHub-ot használtuk, ami ingyenesen elérhető a nyílt forráskódú projektek számára. A projekt fő ágának kezelésére Szép Balázs kapott jogosultságot, Tóth-Kovács Gellért pedig saját ágon dolgozott. Ketten segítettek a többiek munkájának koordinálásában, a kódok összefésülésében.
Minden résztvevő kapott a Google Apps iskoláknak szolgáltatás keretében egy saját egressy.info-s email címet és w3suli csoporttagságot is egyben. Közös projekt Drive könyvtárán belül mindenki létrehozta saját alkönyvtárát, és ide töltötte fel elkészült anyagait. Ezeket az anyagokat a projekt minden résztvevője szabadon használhatta, de másokét nem módosíthatta.
Kezdetben nem jelöltünk ki sem csoportvezetőket, sem projektmenedzsert. Mindenki saját feladata megvalósításáért volt felelős. A munka haladtával a tapasztaltabb és motiváltabb tanulók átvették az irányítást. Már Ők fogalmaztak meg elvárásokat társaik felé. Feladatokat adtak és számon kérték azok megvalósítását. Önmagától, tanári beavatkozás nélkül kialakult a valós életben kinevezéseken, vezetői döntéseken alapuló belső hierarchia.
A blogmotor használatának potenciális veszélyei
A PR tevékenység során és a kollégákkal való beszélgetéseknél is felmerül, hogy ha egy iskola összes tanulóját regisztrálják, akkor bizony a moderátoroknak nem lesz egyszerű dolga a rengeteg cikk ellenőrzésénél. Természetesen minden intézmény maga dönti el, hogy ki kaphat lehetőséget a cikkek feltöltésére (osztályonként egy-két diák vagy mindegyik). Ezt természetesen az adott helyzetnek megfelelően kell eldönteni. Jelenleg, sok esetben már az is nagy segítség lehet, ha több webfejlesztési ismeretekkel nem rendelkező pedagógus között oszthatják meg az iskolai honlap kezeléséhez tartozó feladatokat. Ha pedig tanulókat is be lehet vonni, akkor a feltölthető tartalom mennyisége lényegesen növekszik. Okosan megszervezve a blogmotor kezelését a tanárok terhelése nem növekszik jelentősen. Sőt nem kell aggódniuk a jelenleg sok helyen használt Facebook oldalakra kikerülő, oda nem illő tartalmak miatt.A projekt eredményei
Elkészült blogmotorunk. Még számos helyen módosításra, fejlesztésre szorul, de működőképes és fejlesztése a felhasználók visszajelzései alapján továbbra is folyik.Már 3 webhely működik felhasználásával (w3suli.hu, www.egressy.info és belvarosikepzo.hu).
A részvevő diákok igen sok tapasztalatot és ismeretet szereztek a megvalósítás során.
W3Suli monitoron
