UNIVERZA V LJUBLJANI PEDAGOŠKA FAKULTETA
DIPLOMSKO DELO
SUŠEC KLEMEN
UNIVERZA V LJUBLJANI PEDAGOŠKA FAKULTETA
Študijski program: Matematika in računalništvo
SPLETNA APLIKACIJA PEFTUBE DIPLOMSKO DELO
Mentor: Kandidat:
dr. Irena Nančovska Šerbec, docentka Klemen Sušec Somentor:
asist. Matej Zapušek, asistent
Ljubljana, september 2013
Tema diplomskega dela
Izdelajte spletno aplikacijo za učenje s pomočjo izobraževalnih videoposnetkov. Le-ta naj učiteljem, poleg dodajanja videoposnetkov, omogoča ustvarjanje video učnih poti ter dodajanje vprašanj v obliki kvizov. Učenci naj nastopajo v vlogi aktivnih gledalcev videoposnetkov ter reševalci kvizov. Učitelji naj imajo pravico nalaganja videoposnetkov, sestavljanja kvizov, video učnih poti ter preko rezultatov rešenih kvizov spremljanja napredka učencev. Elemente interaktivnosti dodajte v skladu z Mayerjevo kognitivno teorijo učenja z večpredstavnostjo.
Zahvala
Zahvalil bi se vsem, ki so mi med študijem stali ob strani; svoji družini, dekletu Maji in prijateljem Sandri, Špeli ter Luki.
Hvala tudi mentorjema za strokovno pomoč pri pisanju diplomskega dela.
I
SPLETNA APLIKACIJA PEFtube POVZETEK
Videoposnetki se že dolgo časa uporabljajo v izobraževalnem procesu, predvsem kot dopolnitev klasičnega načina poučevanja.
V diplomskem delu Spletna aplikacija PEFtube sem predstavil pomen videoposnetkov med izobraževalnim procesom. Zakaj in kako jih uporabiti? Raziskal sem, kaj mislijo o vključitvi videoposnetkov v poučevanje teoretiki in kakšni so njihovi nasveti ter izkušnje. Povzel sem zelo znano Mayerjevo kognitivno teorijo učenja z večpredstavnostjo. Predstavil pa sem tudi pomen interaktivnosti med videoposnetki.
Razvijal sem spletno aplikacijo PEFtube, ki omogoča hrambo in ogled videoposnetkov ter ustvarjanje video učnih poti. Aplikacija je namenjena učencem, ki so gledalci videoposnetkov in video učnih poti ter reševalci kvizov, in učiteljem, ki nalagajo videoposnetke, oblikujejo kvize in video učne poti ter preko rezultatov rešenih kvizov spremljajo napredek učencev. V skladu z Mayerjevo kognitivno teorijo učenja z večpredstavnostjo vem, da elementi interaktivnosti povečajo učinkovitost učenja z videoposnetkom. V ta namen sem omogočil učiteljem, ki naložijo videoposnetek, dodajanje interaktivnosti v obliki kvizov med dele videoposnetkov.
KLJUČNE BESEDE
Spletna aplikacija, interaktivnost, videoposnetki, video učna pot, kvizi, Symfony 2, PEFtube.
II
ACM KLASIFIKACIJA
D.2. Programsko inženirstvo
D.2.3. Orodja za kodiranje in tehnike K.3. Računalništvo in izobraževanje
K.3.1. Uporaba računalnika v izobraževanju
III
Web application PEFtube ABSTRACT
Video recordings have been used in the educational process for a long time, especially as an addition to the traditional way of teaching.
In the diploma thesis “Web Application PEFtube”, I have presented the importance of video recordings in the educational process. Why and how to use them? I have researched what theorists think of the integration of video recordings into the process of teaching, their advices and experiences. I have recapped the well-known Mayer’s Cognitive Theory of Multimedia Learning. I have also presented the importance of interactivity in video recordings.
I have developed a web application named “PEFtube” which enables storage and viewing of video recordings, and creation of video learning pathways. The application is intended for students who view the video recordings and video learning pathways, and solve quizzes. It is also intended for teachers who upload video recordings, create quizzes and video learning pathways, and monitor the students’ progress through the results of solved quizzes. Based on the Mayer’s Cognitive Theory of Multimedia Learning I know that the elements of interactivity increase the effectiveness of learning with the help of a video recording. For this purpose, I have enabled teachers who upload the video recordings to add interactivity in the form of quizzes between parts of video recordings.
KEYWORDS
Web application, interactivity, video recordings, video learning pathways, quizzes, Symfony 2, PEFtube.
IV
ACM CLASSIFICATION
D.2. Software Engineering
D.2.3. Coding Tools And Techniques K.3. Computer and Education
K.3.1. Computer Uses in Education
V
KAZALO VSEBINE
1. Uvod ... 1
1.1. Cilji diplomskega dela ... 1
1.2. Pregled vsebine ostalih poglavij ... 2
2. Videoposnetki v e-izobraževanju ... 3
2.1. Poučevanje z večpredstavnostjo ... 3
2.1.1. Zakaj uporabiti videoposnetke pri poučevanju? ... 4
2.1.2. Kaj vse lahko dosežemo z videoposnetkom v razredu? ... 4
2.1.3. Kako videoposnetek doživljajo različni tipi učencev? ... 5
2.1.4. Kako izbrati primeren videoposnetek? ... 6
2.1.5. Osem korakov, kako vnesti videoposnetek v izobraževalni proces ... 7
2.1.6. 12 nasvetov uporabe videoposnetka pri poučevanju ... 8
2.1.7. Dobre in slabe strani uporabe videoposnetkov ... 9
2.2. Kognitivna teorija učenja z večpredstavnostjo ... 9
2.3. Interaktivnost ... 11
2.3.1. Interaktivnost na strani uporabnika ... 12
2.3.2. Interaktivnost na strežniku... 13
2.3.3. Interaktivnost med videoposnetki ... 14
3. Okolje za realizacijo sistema ... 15
3.1. Php ... 15
3.2. Arhitektura MVC (angl. »Model-view-controller«) ... 16
3.3. Symfony2 ... 17
3.3.1. Osnovna struktura aplikacije: ... 18
3.3.2. Bundle ... 19
3.4. Javascript ... 20
3.4.1. Jquery – knjižnica JavaScript ... 21
3.5. Ajax ... 21
4. Spletna aplikacija ... 22
4.1. Ideja ... 23
4.2. Izdelava spletne aplikacije ... 23
4.3. Zgradba podatkovne baze ... 24
4.4. Zgradba programske kode... 26
5. Opis sistema ... 28
VI
5.1. Opis sistema za neprijavljene uporabnike ... 28
5.2. Opis sistema za učence ... 30
5.2.1. Registracija... 30
5.2.2. Uporabniške strani ... 32
5.2.3. Videoposnetek in video učna pot ... 34
5.3. Opis sistema za učitelje ... 37
5.3.1. Kako postanemo prijavljen uporabnik, uporabnik s pravicami učitelja? ... 37
5.3.2. Videoposnetek ... 38
5.3.3. Video učna pot ... 43
6. Empirična raziskava ... 47
7. Zaključek ... 52
8. Viri ... 53
KAZALO SLIK
Slika 1: Shema kognitivne teorije učenja z večpredstavnostjo (Mayer E. R., 2001) ... 10Slika 2: Vhodne in izhodne akcije pri interaktivnost s primeri (Stopper, Sieber, Schnabel, Neumann, & Wiesman, Animation and Interactivity, 2012) ... 12
Slika 3: MVC-arhitektura ... 17
Slika 4: alert - Pozdravljen svet! ... 21
Slika 5: Zgradba podatkovne baze ... 25
Slika 6: Primer iskanja ... 27
Slika 7: Iskanje ... 28
Slika 8: Ogled videoposnetka ... 29
Slika 9: Izbrana stran Videoposnetek iz menija ... 29
Slika 10: Ogled video učne poti ... 30
Slika 11: Registracija uporabnika ... 31
Slika 12: Aktivacija uporabnika, 1. del ... 31
Slika 13: Aktivacija uporabnika, 2. del ... 31
Slika 14: Uspešna registracija ... 32
Slika 15: Prijava ... 32
Slika 16: Spustni meni Uporabnik ... 32
Slika 17: Profil ... 33
Slika 18: Urejanje profila ... 33
VII
Slika 19: Spremeni geslo ... 33
Slika 20: Seznam videoposnetkov ... 34
Slika 21: Ogled videoposnetka ... 35
Slika 22: Videoposnetek ni med priljubljenimi ... 35
Slika 23: Kviz med videoposnetkom ... 36
Slika 24: Profil Uporabnik brez pravic učitelja ... 37
Slika 25: Spustni meni Videoposnetek ... 38
Slika 26: Dodaj videoposnetek ... 38
Slika 27: Spustni meni Uporabnik ... 38
Slika 28: Uporabniška stran z videoposnetki ... 39
Slika 29: Uredi videoposnetek ... 40
Slika 30: Dodaj kviz med videoposnetkom ... 41
Slika 31: Rezultati kvizov izbranega videoposnetka ... 42
Slika 32: Več rezultatov za izbranega uporabnika ... 42
Slika 33: Dodaj učno pot ... 43
Slika 34: Dodaj videoposnetek v učno pot ... 44
Slika 35: Video učne poti, ki si jih ustvaril ... 45
Slika 36: Uredi učno pot ... 45
Slika 37: Rezultati kvizov izbrane video učne poti ... 46
Slika 38: Več rezultatov za izbranega uporabnika ... 46
Slika 39: Rezultati 1. anketnega vprašanja ... 49
Slika 40: Rezultati 2. anketnega vprašanja ... 49
Slika 41: Rezultati 3. anketnega vprašanja ... 49
KAZALO GRAFIKONOV
Grafikon 1: Videoposnetek Prvi del – binarna števila. Razmerje med številom študentov, ki so pravilno odgovorili na vsa vprašanja, in tistimi, ki niso. ... 47Grafikon 2: Videoposnete Drugi del - binarno štetje. Razmerje med številom študentov, ki so pravilno odgovorili na vsa vprašanja, in tistimi, ki niso. ... 48
VIII
IX
AKRONIMI IN OKRAJŠAVE:
IKT – informacijsko-komunikacijska tehnologija PHP – Personal Home Page Tools
HTML – Hyper Text Markup Language XML – Extensible Markup Language CSS – Casading Style Sheets
PERL – Practical Extraction and Report Language JSON – JavaScript Object Notation
DOM – Document Object Model
MySQL – sistem za upravljanje s podatkovnimi bazami
1
1. Uvod
V življenju posameznika ima učenje velik pomen. Na našo osebnost in duševnost vplivajo različni dejavniki, vendar se v veliki meri ti dve lastnosti oblikujeta ravno pod vplivom učenja. Izobrazbo, znanje, navade in spretnost pridobimo z učenjem, hkrati pa med tem procesom oblikujemo svoja stališča in interese (Bregar, Zagmajster, & Radovan, 2010). Da bi pri poučevanju izboljšali učenje, se učitelji poslužujejo različnih načinov poučevanja. Eden izmed načinov je, da vključimo v proces izobraževanja tudi videoposnetke.
Učenje s pomočjo videoposnetkov se že dolgo časa uporablja v izobraževalnem procesu predvsem kot dopolnitev klasičnega načina poučevanja. Videoposnetki so dostopni na različnih fizičnih medijih, velika večina pa jih je dostopna tudi v spletu. V zadnjem deseletju se je pojavilo veliko spletnih aplikacij, ki uporabnikom omogočajo ogled in objavo videovsebin. Popularno jih imenujemo videoportali. Med bolj priljubljenimi je Youtube, ki je nastal leta 2005 in je trenutno v lasti korporacije Google. Nekateri videoportali so specializirani za izobraževalne vsebine (npr. TeacherTube, Coursera, Udacity), drugi za objavo akademskih vsebin. Takšen je npr. portal VideoLectures.net, ki je “doma” na Institutu Jozef Stefan v Sloveniji. Videoportali običajno omogočajo ogled videoposnetkov, prijavljenim uporabnikom pa tudi komentiranje in ocenjevanje videoposnetkov.
V diplomskem delu sem izdelal spletno aplikacijo, specializiran videoportal PEFtube, ki poleg hranjenja ustreznih izobraževalnih videovsebin na enem mestu omogoča tudi dodajanje interaktivnih elementov, kot so spletni kvizi, med ogledom videoposnetka in kreiranje video učne poti, ki bo usmerjala učenčev proces učenja. PEFtube ima 2 tipa profilov: učenčev in učiteljev. Učiteljem, poleg omenjenih lastnosti (shanjevanje videoposnetkov, povezovanje le- teh v učne poti, povezovanje posnetkov s kvizi) omogoča sledenje napredka posameznih učencev ter s tem individualizacijo pouka.
1.1. Cilji diplomskega dela
V diplomskem delu želim predstaviti pomen videoposnetkov med izobraževalnim procesom.
Predstaviti želim tudi pomen interaktivnosti med videoposnetki in odprtokodnimi orodji, ki sem jih uporabljal pri izdelavi spletne aplikacije PEFtube.
Glavni cilj diplomskega dela je s pomočjo odprtokodnih orodij razviti spletno aplikacijo, PEFtube, ki omogoča samostojno učenje s pomočjo videovsebin. Aplikacija omogoča
2
shrambo in ogled videoposnetkov ter video učnih poti. Prav tako omogoča dva tipa (profila) uporabnikov. Prvi tip, učitelji ali mentorji, so tisti, ki nalagajo videovsebine, jih med seboj povezujejo ter ustvarjajo kvize, ki jih vstavljajo med časovnim potekom ogleda videoposnetka. Drugi tip uporabnika so učenci, ki se učijo s pomočjo videovsebin. Različne aktivnosti med gledanjem in poslušanjem videoposnetkov povečajo učinkovitost učenja (Mayer, 2005). S tem želim omogočiti učiteljem ali mentorjem, ki naložijo videoposnetek, dodajanje interaktivnosti v obliki kvizov med predvajanjem videoposnetkov.
Za svojo spletno aplikacijo želim pripraviti tudi opis sistema za različne uporabnike.
1.2. Pregled vsebine ostalih poglavij
Po uvodnem poglavju se bom osredotočil na pomen videoposnetkov pri izobraževanju. Zakaj in kako jih uporabiti? Kako izbrati primernega? Kakšen je pomen interaktivnosti med videoposnetki? Predstavil bom Mayerjevo kognitivno teorijo učenja z večpredstavnostjo.
V naslednjem poglavju bom opisal okolje za realizacijo spletne aplikacije. Pri tem se bom dotaknil skriptnega jezika PHP. Preučil bom Symfony2, ki je ogrodje za izdelavo spletnih aplikacij, opisal nekaj njegovih značilnosti in arhitekturo MVC, ki jo uporablja. Predstavil bom tudi programski jezik JavaScript in eno izmed njegovih popularnih knjižnic Jquery.
Nekaj besed bom namenil tudi tehnologiji Ajax, ki skrbi za asinhrono povezavo s strežnikom.
Sledila bo predstavitev spletne aplikacije. Opisal bom zgradbo podatkovne baze in programske kode. Opisal bom tudi funkcionalnosti in sistem za različne uporabnike.
Na koncu bom opisal rezultate empirične raziskave, ki sem jo izvedel zato, da bi ovrednotili uporabnost aplikacije PEFtube za učenje s pomočjo videposnetkov. V raziskavo so bili vključeni študentje Pedagoške fakultete, smer Računalništvo z vezavami. Njihova naloga je bila, da so si natančno ogledali videoposnetke z vmesnimi kvizi ter odgovorili na anketna vprašanja.
3
2. Videoposnetki v e-izobraževanju
»E-izobraževanje je najpogosteje opredeljeno kot izobraževanje, pri katerem se uporablja IKT, kot na primer spletno učenje, virtualna učilnica in digitalno sodelovanje« (Bregar, Zagmajster, & Radovan, 2010). E-izobraževanje lahko razdelimo v dve skupini.
E-izobraževanje v:
a) širšem pomenu:
to je tradicionalno izobraževanje, kjer se med poučevanjem uporablja IKT z namenom dopolnitve ali obogatitve klasičnega načina poučevanja (na internetu se objavijo zapiski predavanj, uporaba spletnih virov, spletne diskusije …);
b) ožjem pomenu:
e-izobraževanje kot uporaba spletnih tehnologij v različnih rešitvah za povečanje znanja ali izboljšanje izobraževalnih aktivnosti (spletni tečaji, spletni testi …) (Bregar, Zagmajster, & Radovan, 2010).
V diplomskem delu sem se posvetil e-izobraževanju v ožjem pomenu, saj sem izdelal spletno aplikacijo PEFtube z namenom popestritve in poglabljanja pouka, kot dodatno aktivnost po predstavitvi določene tematske enote s strani učiteljev ali kot samostojno učenje, s katerim učenci obdelajo določeno učno snov.
2.1. Poučevanje z večpredstavnostjo
Večpredstavnost je kombinacija napisanega ali govorjenega besedila, slik, zvokov, animacij, simulacij ali videa. Po Mayerju je to predstavitev vsebine preko besedila in slike. Raziskave kognitivnih psihologov, kot je Mayer, so pokazale, da se začetniki boljše učijo s pomočjo slik in besedila kot npr. samo s pomočjo besed (E. Mayer, Applying the Science of Learning:
Evidence ‒ Based Pricniples for the Desing of Multimedia Instruction, 2008). Za najbolj učinkovite so se izkazale animacije z naracijo, izgovorjeno besedo (E. Mayer & Moreno, Animation as an Aid to Multimedia Learning, 2002). Videoposnetek je poseben primer animacije.
4
Učenje s pomočjo videoposnetkov se že dolgo časa uporablja v izobraževalnem procesu, predvsem kot dopolnitev klasičnega načina poučevanja. Z raziskovanjem teorije so se pojavljala različna vprašanja. Kakšen videoposnetek izbrati? Na kakšen način ga uporabiti v izobraževalnem procesu? Trajanje videoposnetka? Videoposnetek kot samostojna učna ura, del ure ali naj si ga učenci sami ogledajo doma?
2.1.1. Zakaj uporabiti videoposnetke pri poučevanju?
Med ogledom filmov ali televizijskega programa doživljamo različna čustva in občutke, kot so navdušenje, jeza, ljubezen, sproščenost ter tudi zdolgočasenost. Ta čustva se sprožijo ob določenih scenah, akcijah, igralcih ali glasbi, ki prihaja iz ozadja, ter lahko imajo zelo močan vpliv na naše mišljenje in občutke. Tudi z uporabo videoposnetkov pri poučevanju želimo sprožiti podobne odzive, ki aktivirajo učence in izboljšati razumevanje obravnavane vsebine.
2.1.2. Kaj vse lahko dosežemo z videoposnetkom v razredu?
Pridobimo pozornost učencev,
usmerimo koncentracijo učencev,
ustvarimo zanimanje,
uporabimo ga kot predah pred praktičnim delom ure oziroma po njem,
pripomoremo k učenčevim predstavam,
izboljšamo odnos do vsebine in učenja,
ustvarjamo povezave med ostalimi učenci in učitelji,
povečamo obseg vsebine,
povečamo razumevanje,
povečamo kreativnost,
stimuliramo učence k novim idejam,
povečamo učinkovitost učenja,
učenci imajo priložnost za svobodno izražanje,
sodelovanje v skupinskih diskusijah,
navdušimo in motiviramo učence,
naredimo učenje zabavno,
pokažemo smisel učenja,
ustvarimo vizualne slike (Berk, 2009).
5
2.1.3. Kako videoposnetek doživljajo različni tipi učencev?
a) Vizualni učni tip, aditivni učni tip in kinestetični učni tip
V skladu s Flemingovim VAK-modelom za določanje učnega stila učencev poznamo tri učne tipe (Leite, Svinicki, & Shi, 2009). Vsak posameznik je kombinacija vseh treh, vendar pa lahko eden izmed njih zelo izstopa. Zato je pomembno, da je znanje podano na takšen način, da dovoljuje vsakemu učencu uporabiti njegov močnejši učni tip.
Videoposnetek je primeren za vidni (vizualni) in slušni (avditivni) učni tip ter tako predstavlja odlično dopolnilo k učni enoti, saj zajema dve tretjini učnih tipov.
b) Leva in desna polovica možganov
Vsaka polovica možganov opravlja svoje naloge.
Leva polobla je analitična, specializirana za zapletenejše funkcije (branje, govor, štetje), logično in abstraktno mišljenje. Celoto razčleni na osnovne sestavine ter preuči razmerja in interakcije med njimi. Elemente analizira vsakega posebej in po vrstnem redu.
Razmišljanje sloni na logiki. Tu se nahajata verbalni (za besede in števila) in enciklopedični spomin (za pridobljeno znanje). Slednjega uporablja pri utemeljevanju.
Odlična je pri učenju jezikov, matematike in eksaktnih vedah (Človeški možgani ‒ Wikipedija, prosta enciklopedija, 2013).
Desna polobla nam omogoča celosten pogled na situacijo. Ima pregled nad dogodki, jih povezuje med seboj in preučuje njihove interakcije. Lahko deluje na celo skupino spremenljivk hkrati. Vlada ji intuicija. Razmišljanje podpre z dejanskimi izkušnjami in »slikami«, pridobljenimi iz njih. Komunicira preko umetnosti (glasbe, plesa, slikanja).
Spomin desne poloble je sestavljen iz slik, simbolov in občutij, povezanih z resničnimi dogodki. Odlična je na področju umetnosti in pri humanističnih vedah (Človeški možgani
‒ Wikipedija, prosta enciklopedija, 2013).
Videoposnetki zaposlijo obe hemisferi. Leva polovica obdeluje dialoge, tekst, ritem.
Desna polovica pa obdeluje slike in povezave med njimi, zvočne efekte, melodijo in zvočne povezave.
6
Kljub temu so nekatere raziskave pokazale, da študenti z dominantnim delovanjem desne poloble med različnimi večpredstavnimi gradivi raje izberejo videoposnetke v primerjavi s študenti z dominantnim delovanjem leve poloble (Ocepek, Bosnić, Nančovska Šerbec, &
Rugelj, 2013), kar je v skladu z opisom delovanja polobel.
c) Možganski valovi
Poznamo alfa, beta, delta, gama in teta možganske valove. Alfa in beta valovi imajo izjemen pomen pri ogledovanju videoposnetkov. Delta valovi so aktivni ob globokem spancu, teta pa ob rahlem spancu.
Opazovanje in svobodno razmišljanje je značilno za učence, kjer učitelj le predava brez različnih oblik poučevanja. Takrat so pri učencih aktivni alfa valovi. Prisotni so tudi, ko učenec bere, se uči ali pa je v sproščenem stanju. Pri videoposnetkih, ki so počasni, neprivlačni, miselno neizzivalni, se prav tako pojavijo ti valovi. Za njih je značilno, da sprostijo možgane, kar zna biti koristno pri ponavljanju vsebine, saj se tako vsebina lažje zapiše v dolgoročni spomin. Če pa želimo aktivirati učence, jim moramo stimulirati beta valove, za katere je značilno, da z njihovo stimulacijo omogočimo višji nivo energije, koncentracije in pozornosti. To pa je tisto, kar želimo doseči pri učencih med izobraževalnim procesom. Videoposnetki, ki vsebujejo hitre prizore, kot jih zasledimo v akcijskih filmih, učencem aktivirajo beta valove, povečajo pozornost in jih pripravijo k aktivnemu učenju (Berk, 2009).
2.1.4. Kako izbrati primeren videoposnetek?
Izbrati primeren videoposnetek za uporabo v izobraževalnem procesu ni lahka naloga. Paziti moramo, da ne vsebuje nasilja, prostaškega govorjenja, pomanjkljivo oblečenih igralcev itn.
Komercialni filmi namreč po večini vsebujejo ravno to, z namenom, da čim bolj pritegnejo publiko. Izobraževalni posnetki so prav tako lahko različnih tipov, lahko so motivacijski ali uporabljeni za poučevanje: za predstavitev novih vsebin ali utrjevanje že predstavljene snovi v razredu. Lahko so tudi dokumentarni filmi, zgodovinski filmi ali videoposnetki predavanj.
Vsak učitelj mora oblikovati svoje kriterije, na podlagi katerih oceni primernost filma oziroma dela filma za vključitev v izobraževalni proces. Berk meni, da moramo pri izbiri upoštevati naslednje kriterije:
a) karakteristiko učencev (starost, spol, narodnost, razumevanje jezika);
7
b) stopnjo ofenzivnosti/žaljivosti/neprijetnosti videoposnetka (rasizem, nespoštljivost do ženskega spola, etnične skupine, politična nagovarjanja, droge):
učenec, ki se ob gledanju videoposnetka počuti užaljenega oziroma v videoposnetku prikazujejo nasprotje njegovih prepričanj, se bo z odporom naučil obravnavano temo.
Potreboval bo še več časa kot pri učenju brez videoposnetka. To pa je ravno nasprotje tega, kar želimo z videoposnetkom doseči;
c) smiselno zaporedje dogodkov;
d) trajanje videoposnetka naj bo takšno, da iz njega izvemo bistvo;
e) izločiti moramo dele videoposnetka z ekstremnimi akcijami, da ne bi prevzeli bistva;
f) število igralcev, ki nastopajo v videoposnetku naj bo le tolikšno, kolikšno potrebujemo, da dosežemo želeno znanje.
Pri izbiri videoposnetka se lahko odločamo med dramo, akcijo, romantiko, komedijo, dokumentarcem, televizijskimi programi, videoposnetki, ki so jih naredili učenci, in ne nazadnje tudi videoposnetki, ki smo jih naredili sami oziroma drugi učitelji. Vsi ti različni videoposnetki lahko vzbudijo jezo, navdušenje, aktivnost, strah, smeh, solze, sanje, sprostitev, spanje, muhavost itd. Učitelj zato mora dobro razmisliti, katere cilje želi doseči z videoposnetkom. Ob napačni izbiri lahko doseže ravno nasprotne cilje, kot si jih je zadal (Berk, 2009).
2.1.5. Osem korakov, kako vnesti videoposnetek v izobraževalni proces
1. Izberite le del videoposnetka, ki razloži bistvo snovi, ki jo želite predstaviti učencem (Če želite, da učenci pogledajo celoten videoposnetek, naj to storijo za domačo nalogo.).
2. Pripravite oporne točke ali vprašanja, da se učenci lažje skoncentrirajo na bistvo obravnavane snovi.
3. Pred predvajanjem videoposnetka na kratko napovejte njegovo bistvo, da se učenci lažje osredotočijo na pomembnosti in dosežejo načrtovane cilje.
4. Predvajajte videoposnetek.
5. Ustavite videoposnetek po obravnavani temi in z učenci povzemite bistvo, bodisi s skupinsko diskusijo bodisi z vajami.
6. Po predvajanem videoposnetku dajte učencem čas, da razmislijo o videoposnetku.
7. Zaposlite učence z dejavnostjo, ki povzame bistvo predvajanega videoposnetka.
8. Z diskusijo še enkrat ponovite bistvo (Berk, 2009).
8
2.1.6. 12 nasvetov uporabe videoposnetka pri poučevanju 1. Uporabimo videoposnetek z določeno vsebino.
(To so lahko dokumentarni filmi, zgodovinski filmi, videoposnetki predavanj …) To je tudi največkrat uporabljena oblika vključevanja videoposnetka v izobraževalni proces.
2. S pomočjo videoposnetka ilustriramo določen koncept, princip bodisi pred obravnavno vsebine bodisi po njej.
(Princip delovanja računalnika, prenos podatkovnih paketov med računalniki.) 3. Pokažimo drugačne poglede na obravnavano temo.
(Tu si pomagamo z različnimi videoposnetki, ki obravnavajo isto temo.) 4. Pogledamo primere iz realnega sveta.
5. Motiviramo učence.
6. Pogledamo dobre in slabe primere ter diskutiramo o njih.
7. Prikažemo pretiravanje določene lastnosti.
(Različne parodije.)
8. Pridobimo pozornost učencev.
(Pokažemo smešen videoposnetek.) 9. Učenci si sami ogledajo videoposnetek.
(Primerno za domačo nalogo.) 10. Motiviramo in navdušimo učence.
(Stres učencev med izobraževanjem je včasih zelo velik. Z ogledom kratkega motivirajočega videoposnetka pa učence navdušimo in jih pripravimo za nadaljnje delo.)
11. Predah med poučevanjem.
(Ko zbranost učencev pade, je čas za predah. Pokažemo kakšen zanimiv, smešen, kratek videoposnetek, da si učenci nekoliko spočijejo in pripravijo za nadaljnje delo.
Ta način uporabe je zelo dobrodošel pri več zaporednih urah enake tematike.) 12. Naznanimo začetek ure (Berk, 2009).
9
2.1.7. Dobre in slabe strani uporabe videoposnetkov
Prednosti:
a) hitra pot za razlago snovi,
b) učinkovitejše za učno slabše učence,
c) zanimivo, motivirajoče, navdušujoče za učence,
d) slika in zvok sta primerna za učence različnih tipov učenja, e) dostopnost.
Slabosti:
a) brez vmesne interaktivnosti so uporabni le kratki videoposnetki,
b) ob napačni izbiri videoposnetka lahko dosežemo odpor do učenja obravnavane tematike.
2.2. Kognitivna teorija učenja z večpredstavnostjo
Večpredstavnost je postala pomemben del v izobraževalnem procesu, kar je pripomoglo k temu, da so strokovnjaki s področja izobraževanja, kot so kognitivni psihologi in pedagogi, začeli raziskovati njene vplive na učenje. Najbolj jih je zanimalo, ali je vpliv večpredstavnosti na učenje pozitiven ali negativen, zakaj in kdaj vpliva tako. Mayer, kognitivni psiholog, ki se ukvarja s poučevanjem z večpredstavnostjo, meni, da je učenje z njo učinkovitejše v primerjavi z učenjem iz besedila. Med učenjem z večpredstavnostjo učenec sprejema vidne in besedne informacije, ki jih nato obdela v delovnem spominu ter poveže. Naučena snov je tako bolj razumljena. Njegova kognitivna teorija učenja z večpredstavnostjo (E. Mayer, Multimedia learning: are we asking the right questions?, 1997) temelji ravno na tem. Svojo teorijo je povezal z ostalimi teorijami, ki so naštete v nadaljevanju.
a) Paivijeva teorija dvojnega kodiranja (Paivio, 1986)
Vsak posameznik ima dva sistema, ki sta ločena med sabo in obdelujeta eden besedne podatke, drugi pa vizualne podatke. V prvem se obdelajo besede, besedne zveze, v drugem pa slikovni podatki.
b) Swellerjeva kognitivna teorija (Chandler & Sweller, 1991) in Baddeleyev model delovnega spomina (Baddeley, Working memory, 1986, 1992)
10
Iz teh dveh teorij je Mayer v svoji povzel, da sta oba sistema, ki obdelujeta podatke, omejena glede na količino le teh, ki jih lahko v določenem trenutku sprejmeta in obdelata.
c) Konstruktivistična teorija učenja (E. Mayer, Learning strategies for making sense out of expository text: the SOI model for guiding tree cognitive processes in knowledge construction, 1996)
Dejstva, ki jih je povzel iz prejšnjih dveh teorij, je povezal s konstruktivistično teorijo učenja. Meni, da je za uspešno učenje treba učenca aktivirati za zbiranje podatkov, ki jih nato obdela in poveže v pomenske zveze ter poveže z obstoječim znanjem.
Mayerjev model temelji na treh ključnih domnevah (Mayer E. R., 2001), (Starbek, 2011):
1. vizualni in besedni podatki se obdelujejo v različnih ločenih podatkovnih sistemih, 2. vsak podatkovni sistem lahko v določenem trenutku sprejme in obdela le določeno
količino podatkov,
3. obdelovanje podatkov v podatkovnih sistemih je aktiven miselni proces, pri katerem nastajajo povezave med obstoječimi in trenutno obdelanimi podatki.
Slika 1: Shema kognitivne teorije učenja z večpredstavnostjo (Mayer E. R., 2001)
Miselni proces po (Mayer E. R., 2001) poteka v petih korakih:
1. izbira ključnih besed za obdelavo v verbalnem delovnem spominu, 2. izbira ključnih slik za obdelavo v vizualnem delovnem spominu, 3. organizacija ključnih besed v verbalni miselni model,
4. organizacija ključnih slik v vizualni miselni model,
5. povezava verbalne in vizualne informacije med seboj in s predhodnim znanjem.
Na podlagi treh ključnih domnev, poteku miselnega procesa v petih korakih in različnih raziskavah sta Mayer ter Moreno zapisala sedem principov, kako uporabiti večpredstavnost
11
med izobraževalnim procesom (E. Mayer & Moreno, Animation as an Aid to Multimedia Learning, 2002):
1. multimedijski princip (angl. »multimedia principle«);
učenje z besedilom in sliko je učinkovitejše od učenja le z besedilom;
2. princip časovne usklajenosti (angl. »temporal contiguity principle«);
besedilo in pripadajoče slike je potrebno prikazovati sočasno;
3. princip prostorske usklajenosti (angl. »spatial contiguity principle«);
besedilo in pripadajoče slike si morajo biti prostorsko blizu;
4. princip modalnosti (angl. »modality principle«);
animacija s spremljajočim govorjenim besedilom je učinkovitejša od animacije z besedilom;
5. princip redundance (angl. »redundancy principle«);
animacija z besedilom je učinkovitejše kot animacija z besedilom in s spremljajočim govorjenim besedilom;
6. princip koherence (angl. »coherence principle«);
iz predstavitve je potrebno odstraniti čim več slik, zvokov in odvečnih besed;
7. princip individualnih razlik (anlg. »individual difference principle«);
multimedija je učinkovitejša za učno slabše učence in za vizualne tipe učencev.
2.3. Interaktivnost
Interaktivnost je interakcija med človeškim bitjem in računalniškim programom. Človek uporablja računalniško miško za klikanje gumbov, tipkovnico za vnašanje podatkov in tako komunicira z računalnikom. Interakcija med računalnikom in človekom je dandanes postala, predvsem zaradi grafičnih vmesnikov, nekaj povsem običajnega. Uporabnik se niti ne zaveda, da komunicira z računalnikom. Vse, kar ve, je, da z dvema hitrima levima klikoma na miški zažene program (Stopper, Sieber, Schnabel, Neumann, & Wiesman, Animation and Interactivity, 2012).
12
Običajno je interaktivnost kontrolirana z računalniško miško ali tipkovnico. Spodnja slika prikaže seznam glavnih vhodnih in izhodnih akcij interaktivnosti, ki potekajo med uporabnikom in računalnikom.
Slika 2: Vhodne in izhodne akcije pri interaktivnost s primeri (Stopper, Sieber, Schnabel, Neumann, & Wiesman, Animation and Interactivity, 2012)
2.3.1. Interaktivnost na strani uporabnika
Interaktivnost na strani uporabnika se izvaja v uporabnikovem brskalniku in je neodvisna od povezave do svetovnega spleta.
Tipične interaktivnosti na strani uporabnika so:
učinek, ko se z miško pomaknemo čez element – večinoma se pokažejo dodatne informacije;
povečava ali zmanjšanje elementa.
Na moji spletni strani interaktivnost zasledimo, ko se z miško pomaknemo meni in se pokaže podmeni.
13 Prednosti:
hitra odzivnost,
neodvisna od povezave do svetovnega spleta.
Slabosti:
odvisna od nastavitev brskalnika,
težje je posodobiti vsebino,
primerna le za prikaz manjše število podatkov (Stopper, Sieber, Schnabel, Neumann,
& Wiesman, Animation and Interactivity, 2012).
2.3.2. Interaktivnost na strežniku
Interaktivnost na strežniku se izvaja na strežniku, zato do njega potrebujemo povezavo.
Tipične interaktivnosti na strežniku so:
poizvedbe podatkov iz podatkovne baze,
branje in pisanje v datoteke ter imenike na strežniku.
Na moji spletni strani interaktivnost zasledimo pri videoposnetkih, ko:
ga dodamo med priljubljene,
ga komentiramo,
se nam pojavi kviz in ko odgovorimo nanj.
Prednosti:
neodvisna od nastavitev uporabnika,
primerna za velike baze podatkov,
možna kombinacija več strežnikov med seboj,
možne poizvedbe podatkov in datotek.
Slabosti:
počasna (vsaka interakcija komunicira s strežnikom),
potrebujemo povezavo do strežnika,
odvisna od internetne povezave (Stopper, Sieber, Schnabel, Neumann, & Wiesman, Animation and Interactivity, 2012).
14 2.3.3. Interaktivnost med videoposnetki
Da bi izboljšali klasičen način poučevanja, lahko vključimo v izobraževalni proces tudi večpredstavnost. Del nje so tudi videoposnetki, ki so poseben tip animacij. Moreno in Mayer ugotavljata, da so animacije, ki so prpravljene v skladu s kognitivno teorijo učenja in ugotovitev iz poskusov, eno od najmočnejših orodij večpredstavnosti (E. Mayer & Moreno, Animation as an Aid to Multimedia Learning, 2002). Da bi še izboljšali poučevanje, pa lahko to dosežemo z interaktivnostjo med videoposnetkom. Tak pristop je tudi veliko bolj motivacijski za učence.
Raziskave so pokazale, da je animacija z vmesnimi aktivnostmi učencem zanimivejša, hkrati pa dosežejo boljše rezultate od učencev, ki so se učili preko animacije brez aktivnosti. Do podobnih rezultatov pridemo tudi, če je vmesna aktivnost minimalna. S tako obliko učenja pridobivamo nove podatke postopoma in nadzorovano. Novi podatki se obdelajo po miselnem procesu po Mayerju v petih korakih. Raziskovalci so tudi ugotovili, da učenci, ki uporabljajo animacijo z vmesno aktivnostjo, porabijo več časa na zahtevnejših delih animacije (Mayer, 2005).
Pomembno je, da aktivnosti, ki jih želimo vključiti v videoposnetke, dodamo ob zaključenih vsebinskih celotah. Tako razdelimo videoposnetek na logične vsebinske dele in omogočimo učencem lažji ter postopni način do novega znanja. Pomembno je tudi, da je sama aktivnost, ki se pojavi med učenjem, uspešno zaključena za nadaljevanje. Učenci, ki so uporabljali takšen način interaktivnosti med videoposnetkom, so na poznejših testih dosegali boljše rezultate kot učenci, pri katerih ni bila potrebna uspešno zaključena aktivnost za nadaljevanje (Mayer E. R., 2001).
Ravno z namenom, da bi izboljšal lastnosti učenja z videoposnetkom, sem v svoji spletni aplikaciji PEFtube omogočil, da lahko učitelj dodaja kvize, ki se pojavljajo med predvajanjem videoposnetkov. Z njihovo pomočjo učitelj razdeli videoposnetek na vsebinske dele, ga popestri, vključi sprotno obnavljanje obravnavane vsebine in ga pripravi za interaktivno rabo izven pouka.
15
3. Okolje za realizacijo sistema
3.1. Php
Php je odprtokodni programski jezik, ki se izvaja na strežnikih in se uporablja za razvoj dinamičnih spletnih vsebin. Trenutno ga uporablja več kot 244 milijonov spletnih strani in je nameščen na več kot dveh milijonih spletnih strežnikov. Nekaj najbolj znanih spletnih strani, ki so napisane v PHP-ju, je Joomla, WordPress, Moodle in Facebook. Prvo izvedbo tega programskega jezika je napisal danski programer Rasmus Lerdorf leta 1994. Razvil jo je z namenom vzdrževanja lastne spletne strani. PHP se je razvijal z oznakami 3.0, 4.0 in trenutna 5.0. Razvija se že različica PHP 6.0. Za njegov razvoj skrbi PHP Group in je registriran pod licenco PHP, ki prepoveduje nepooblaščeno uporabo imena PHP. To je tudi razlog, zakaj ni registriran pod licenco GNU (PHP Group).
Php se uporablja za aplikacije grafičnih uporabniških vmesnikov (angl. »GUI applications«) in za programiranje ukaznih vrstic. Uporablja se tudi skupaj s sistemi, ki upravljajo podatkovne baze. Tudi v svoji spletni aplikaciji sem izkoristil to njegovo zmogljivost, in sicer s sistemom MySQL.
Temeljna naloga php-ja je, da sprejme podatke iz določenega vira, to je lahko tudi datoteka s php ukazi ali tekstom, jih obdela in vrne rezultat. Ta je največkrat v obliki datoteke HTML.
Php je pritegnil pozornost spletnih programerjev, ki razvijajo razvijalska orodja za programske jezike, saj ta pohitrijo in poenostavijo razvoj aplikacij. Symfony, Zend Framework, CakePHP in CodeIgniter so le nekatera izmed teh razvijalskih orodij za php. Pri svoji aplikaciji sem uporabljal program Symfony. Nekaj več o njem bom povedal v nadaljevanju.
Za delovanje spletnih vsebin potrebujemo nameščen PHP. Lahko ga namestimo kot samostojno komponento ali pa namestimo katerega izmed paketov, v katerem se nahaja. Paket LAMP (L – Linux, A – Apache, M – MySQL, P ‒ PHP) omogoča enostavno namestitev spletnega strežnika na operacijski sistem LINUX. WAMP (W – Windows, A – Apache, M – MySQL, P ‒ PHP) je paket, ki omogoča namestitev spletnega strežnika na operacijski sistem Windows, MAMP (M – MacOs, A – Apache, M – Mysql, P ‒ PHP) je paket za operacijski sistem MacOS. Obstaja pa tudi verzija, ki je neodvisna od operacijskega sistema. To je XAMPP (X – X-cross-platform, A – Apache, M – MySQL, P – PHP, P ‒ PERL). Vsi ti paketi poleg spletnega strežnika namestijo tudi sistem za upravljanje podatkovne baze MySQL, PHP
16
in PERL interpreter. Za razvoj in testiranje spletne aplikacije sem uporabljal lokalni strežnik XAMPP.
Kot pri vseh programskih jezikih ima tudi php nekaj sintaktičnih pravil.
Skript php se začne z oznako <?php in konča z ?>. Namen teh oznak je, da lahko v enem skriptu uporabljamo tudi ukaze HTML, CSS in JavaScript.
Vsaka spremenljivka se mora začeti z znakom $. Za razliko od drugih programskih jezikov, v php-ju spremenljivke ni treba prej definirati niti ji določiti ustreznega podatkovnega tipa. Je pa občutljiv na velikost črk. Črka oziroma besedilo se zapiše med enojne ali dvojne narekovaje, števila pa brez narekovajev.
Vsak ukaz se konča s podpičjem.
Komentarje med skriptom lahko pišemo na več načinov:
o komentar se začne s /* in konča z */. Tak komentar se lahko razteza čez več vrstic;
o komentar se začne z # ali //. Tak komentar se uporablja le za eno vrstico.
Primer skripta, zapisanega v php-ju:
<?php
echo 'Pozdravljen svet!'; // to je naš komentar
?>
Beseda »echo« je ukaz, ki se uporablja za izpis vsebine v spletni brskalnik.
Večina spletne aplikacije je napisane v php-ju.
3.2. Arhitektura MVC (angl. »Model-view-controller«)
Modul je programska koda, ki opravlja določene naloge v aplikaciji. Tako je v spletni aplikaciji PEFtube modul UserBundle, ki skrbi za prijavo, registracijo in odjavo uporabnikov.
MVC je programska tehnologija, ki razdeli modul na logični del, ki se nahaja v mapi Controller vsakega modula in grafičnih del, ki se nahaja v mapi View. Nastala je z namenom lažjega vzdrževanja in hitrejšega razvoja spletnih aplikacij. Spletne aplikacije, ki uporabljajo to tehnologijo in tiste, ki je ne, se razlikujejo le po načinu razvoja. Aplikacije, ki uporabljajo MVC, lažje nadgradimo oz. jim dodamo določeno funkcionalnost.
17
Slika 3: MVC-arhitektura
Arhitektura MVC-tehnologije se deli na:
Model
To je razred, v aplikaciji napisan v programskem jeziku php. Njegova naloga je, da skrbi za obnašanje celotnega modula. Zahtevo, ki mu pošlje brskalnik ustrezno usmeri do krmilnika, ki to zahtevo obdela in pošlje naprej do pripadajočega pogleda.
Controller (krmilnik)
To je razred, ki vsebuje logiko modela. Aktivira se ob določeni spremembi v spletnem brskalniku. Brskalnik pošlje zahtevo modelu, ta pa ustreznemu krmilniku, zahteva se tam obdela in pošlje pripadajočemu pogledu (view) ali do drugega modela.
View (pogled)
Pogled sprejme podatke od krmilnika, jih vizualno predstavi in vrne spletnemu brskalniku v obliki HTML-strani.
Ena izmed prednosti MVC-tehnologije je ta, da če želimo spremeniti videz spletne aplikacije, to storimo le v datotekah (pogled), ki generirajo HTML-stran. Logika v krmilnikih tako ostane nedotaknjena.
(Model–view–controller – Wikipedia, the free encyclopedia.)
3.3. Symfony2
Symfony2 je odprtokodno ogrodje za izdelavo spletnih aplikacij z uporabo PHP-verzije 5.3.3 in novejših. Sledi načelom objektnega programiranja in izkorišča nove zmogljivosti PHP-ja 5.3 kot so imenski prostori. Imenski prostori razvrščajo vsebine po namembnosti. Strani v različnih imenskih prostorih imajo različne predpone. Programje pa po imenu prostora, ki je naveden na začetku strani, prepozna, kam spada določena vsebina.
18
Spletna aplikacija, ustvarjena s pomočjo Symfony2, je razdeljena na module, kjer vsak modul opravlja svojo nalogo. Modul v Symfony imenujejo »bundle«.
3.3.1. Osnovna struktura aplikacije:
Vsaka Symfony2 aplikacija ima osnovno priporočeno strukturo:
Aplikacijska_mapa o app
cache
config
logs
Resources o src
Vsimoduli
TestBundle o vendor
symfony
doctrine o web
app.php
Razlaga vsebin map:
Aplikacijska_mapa: mapa, v kateri so datoteke celotne spletne aplikacije;
web/: tu se nahajajo vse javno dostopne datoteke, kot so JavaScript, CSS-datoteke, slike in videoposnetki.
V njej se nahaja tudi datoteka app.php, ki je vstopna točka aplikacije. Ta obdela zahteve uporabnikov in jih preusmeri do določenega krmilnika. Ustrezen krmilnik podatke obdela in posreduje do pogleda, ki jih nato uporabniku predstavi kot HTML- stran;
app/: v tej mapi se nahajajo nastavitve spletne aplikacije. To so nastavitve za dostop do podatkovne baze, varnostne nastavitve, nastavitve naslovov URL itd.
Ena izmed pomembnih datotek v tej mapi, ki aplikaciji Symfony sporoči vse potrebne informacije, je AppKernel.php. To je razred php, ki mora imeti definirani dve funkciji:
o registerBundles(): ta kot rezultat vrne tabelo vseh potrebnih »bundlov« za zagon aplikacije;
o registerContainerConfiguration(): naloga te funkcije je, da naloži vse glavne nastavitve aplikacije iz različnih datotek z nastavitvami;
19
src/: vsa koda php, ki daje funkcionalnost spletni aplikaciji, se nahaja v tej mapi, organizirana v »bundle«. Pri razvijanju aplikacije največ časa ustvarjamo ravno v tej mapi;
vendor/: po dogovoru se v tej mapi nahajajo vsi »bundli«, ki jih uporabljamo v spletni aplikaciji, z namenom, da nam olajšajo delo.
3.3.2. Bundle
V Symfony so poimenovali modul kot bundle. Za njega je značilno vse, kar je značilno za modul arhitekture MVC. Bundle je podoben vtičnikom pri drugih programskih rešitvah.
Največja razlika je, da je v Symfony2 vse bundle, vključno z funkcionalnostjo ogrodja in kodo, ki je napisana za aplikacijo. To daje možnost, da pri razvoju spletnih aplikacij lahko uporabljamo že pripravljene bundle, ki nam olajšajo in pohitrijo delo. Te bundle lahko tudi na enostaven način prilagodimo potrebam svoje aplikacije.
Za dobro zgrajen bundle moramo slediti načelu »Do one thing and do it well« (Naredi eno stvar in to naredi dobro).
Osnovna struktura »bundla«
TestBundle/
o Controller
o DependencyInjection o Resources
config
views o Tests
Razlaga vsebin map:
TestBundle/: mapa, v kateri so datoteke bundla, v našem primeru TestBundla.
Controller/: v tej mapi so krmilniki bundla, v našem primeru je to TestController.php.
Krmilnik je razred, ki vsebuje PHP-funkcije, katerih naloga je, da sprejete zahteve obdelajo in posredujejo podatke do ustreznega pogleda. Ta jih vizualno predstavi, največkrat kot spletno stran HTML.
DependencyInjection/: tu se nahajajo datoteke, ki skrbijo za uvoz različnih nastavitev.
Resources/config/: različne nastavitve bundla. To so lahko nastavitve za različne servise, nastavitve naslovov URL itd.
20
Resources/views/: tej mapi pripadajo datoteke za vizualno predstavitev podatkov, ki jih dobijo od pripadajočega krmilnika.
Tests/: vsebuje teste, ki preverijo pravilno delovanje bundla.
(Sensio, The Book – Symfony.)
3.4. Javascript
JavaScript je objektni skriptni programski jezik, ki se izvaja v uporabnikovem brskalniku in tako razbremeni strežnik. Z njegovo pomočjo lahko podajamo dinamične in interaktivne vsebine. Implementiran je bil kot del brskalnika, da lahko skripti sodelujejo z uporabnikom in spreminjajo prikazano vsebino. Razvil ga je Brendan Eich v Netscapu leta 1995. Njegova glavna naloga je dopolnjevanje programskih jezikov, ki se izvajajo na strežnikih. Razen v spletu se uporablja tudi v dokumentih PDF in namiznih dodatkih (angl. »widgets«) (JavaScript – Wikipedia, the free encyclopedia).
Kot pri vseh programskih jezikih ima tudi JavaScript nekaj sintaktičnih pravil.
Skript JavaScript se začne z oznako <script type='text/javascript'> in konča s
</script>. Namen teh oznak je, da lahko v eni skripti uporabljamo tudi ukaze HTML, CSS in PHP.
Vsako spremenljivko moramo pred uporabo definirati (var spremenljivka;), vendar pa ji ni potrebno določiti tipa. Črka oziroma besedilo se zapiše med enojne ali dvojne narekovaje.
Vsak ukaz se lahko konča s ; ali brez.
Komentarje med skripti lahko pišemo na več načinov:
o komentar se začne s /* in konča z */. Tak komentar se lahko razteza čez več vrstic;
o komentar se začne z //. Tak komentar se uporablja le za eno vrstico.
Primer skripta, zapisanega v JavaScriptu:
<script type='text/javascript'>
alert( 'Pozdravljen svet!'); // to je naš komentar
</script>
Z ukazom alert prikažemo pogovorno okno z besedilom »Pozdravljen svet!«.
21
Slika 4: alert - Pozdravljen svet!
3.4.1. Jquery – knjižnica JavaScript
Jquery je najbolj popularna knjižnica JavaScript, ki je bila napisana z namenom, da poenostavi kodiranje aplikacij JavaScript. Razvil jo je John Resig iz BarCamp NYC.
Trenutno jo uporablja več kot 65 % najbolj obiskanih 10.000 strani v svetovnem spletu.
Jquery je odprtokoden z licencama MIT in GNU. Knjižnica poenostavi navigacijo dokumenta in tako lažje dostopamo do elementov DOM. Primer elementa DOM:
<p>Pozdravljen svet</p>
Poenostavi nam tudi ustvarjanje animacij in kodiranje sistemov Ajax. Tehnologijo Ajax bom podrobneje predstavil v nadaljevanju. Ponuja nam tudi možnost, da izdelamo lasten vtičnik.
To je eden izmed razlogov njene razširjene uporabe med programerji (jquery.org).
V aplikaciji sem večino kod JavaScript in Jquery uporabil pri predvajanju videoposnetkov in video učne poti. Nekaj zmogljivosti JavaScript pa sem uporabil pri dodajanju videoposnetkov v video učno pot in dodajanju vmesnih kvizov med videoposnetkom.
3.5. Ajax
Ajax (skovanka Asynchronus, JavaScript in XML) je skupina povezanih spletnih tehnologij, ki omogočajo izdelavo asinhronih spletnih aplikacij. Tehnologije in formati, ki sestavljajo Ajax, so: HTML, CSS, JavaScript, DOM, XML, JSON in XMLHttpRequest. Uporabnik takšnih aplikacij ima občutek, da se vse dogaja na njegovem računalniku, saj si spletne aplikacije, narejene z Ajaxom, izmenjujejo podatke s strežnikom v ozadju in jih tako uporabnik ne zazna. Spletna stran se ne osveži cela, ampak le tisti delčki strani, ki so bili spremenjeni (Ajax (programming) – Wikipedia, the free encyclopedia).
V spletni aplikaciji uporabljam Ajax za prikazovanje vmesnih vprašanj med videoposnetki, komentiranje videoposnetka, dodajanje videoposnetka med priljubljene, dodajanje vmesnih vprašanj med videoposnetke in dodajanje videoposnetkov v video učno pot.
22
4. Spletna aplikacija
Ker je e-izobraževanje vedno bolj priljubljeno, sem se odločil za spletno aplikacijo. Namen aplikacije je izboljšati učni učinek pri poučevanju in olajšati delo učiteljev. Da bi izboljšali kvaliteto učnega procesa, učitelji posegamo po različnih pristopih pri poučevanju. Eden izmed njih je, da vključimo v proces izobraževanja tudi videoposnetke. Aplikacija omogoča nalaganje in ogled videoposnetkov. Da pa to niso le videoposnetki, združeni na enem mestu, aplikacija omogoča dodajanje interaktivnih elementov, kot so kvizi med različnimi tematskimi enotami v videoposnetkih. Kvizi pomagajo, da se učenci bolj osredotočijo na učno gradivo in pomagajo k izpostavitvi ključnih elementov obravnavane snovi. Aplikacija prav tako omogoča povezovanje delov videoposnetkov v video učno pot, s čimer lahko učitelj usmerja učenčev učni proces. Učitelj lahko na osnovi rezultatov kvizov sledi napredku učenca.
Spletna aplikacija je napisana v jeziku HTML, funkcionalnost ji dajeta PHP in JavaScript, obliko CSS, podatki pa so shranjeni v podatkovni bazi MySQL.
Za uporabnike z različnimi pravicami spletna aplikacija omogoča:
neprijavljenim uporabnikom:
o ogled videoposnetkov brez vmesnih interaktivnostih, o ogled video učnih poti brez vmesnih interaktivnostih, o iskanje videoposnetkov,
o iskanje video učnih poti;
prijavljenim uporabnikom:
o ogled videoposnetkov z vmesnimi interaktivnostmi, o ogled video učnih poti z vmesnimi interaktivnostmi, o dodajanje videoposnetka med priljubljene,
o komentiranje videoposnetka,
o ogled seznama priljubljenih videoposnetkov in videoposnetkov, ki so namenjeni skupini, ki ji pripada uporabnik,
o iskanje videoposnetkov, o iskanje video učnih poti;
23
prijavljenim uporabnikom s pravicami učitelja:
dostop do vseh zmogljivosti, ki jih imajo prijavljeni uporabniki, in še:
o dodajanje in urejanje videoposnetkov, o dodajanje in urejanje video učne poti,
o dodajanje in brisanje videoposnetkov v oziroma iz video učne poti, o dodajanje in urejanje kvizov med videoposnetki,
o izbris videoposnetkov in video učnih poti,
o ogled in izbris rezultatov kvizov videoposnetkov, ki jih je sam naložil, o ogled in izbris rezultatov kvizov video učnih poti, ki jih je sam izdelal.
4.1. Ideja
Želel sem izdelati aplikacijo, s katero bi omogočili hrambo in ogled videoposnetkov na enem mestu. Odločil sem se za spletno aplikacijo, ki je uporabnikom hitro in enostavno dostopna.
Da pa ne bi bila to samo aplikacija, kjer bi si lahko ogledali in shranili videoposnetke, sem se odločil, da jo nadgradim z video učnimi potmi, s pomočjo katerih učence postopoma vodimo skozi učni proces in tako olajšamo usvajanje novih znanj.
Različne aktivnosti med videoposnetkom povečajo učinkovitost učenja (Mayer, 2005). V ta namen sem se odločil dodati interaktivnost v obliki kvizov med dele videoposnetkov. Da bi učitelji lahko spremljali učenčev napredek, sem se odločil, da se rezultati beležijo v podatkovno bazo. Tako si lahko učitelj, ki je naložil videoposnetek in dodal kvize, ogleda uspešnost reševanja teh kvizov vsakega izmed učencev, ki je rešil kviz, in tako spremlja njihov napredek.
4.2. Izdelava spletne aplikacije
Za izdelavo spletne aplikacije PEFtube sem uporabil program PhpStorm 5.0.4 in lokalni strežnik Xampp. Za lažje in hitrejše kodiranje spletne aplikacije PHP sem uporabil namensko ogrodje Symfony2. Uporabil sem tudi skriptni jezik JavaScript in njegovo knjižnico Jquery za različne interaktivne elemente v spletni aplikaciji PEFtube.
Potem ko sem izdelal idejo, sem se lotil načrtovanja aplikacije. Najprej sem začel načrtovati strukturo in sestavljati podatkovno bazo, ki je temelj spletne aplikacije. Uporabil sem bazo MySQL. Nato sem pričel graditi osnovni grafični vmesnik, da bi imel boljšo predstavo o aplikaciji in si s tem olajšal kodiranje. Zatem sem se osredotočil na kodiranje funkcionalnosti aplikacije. Najprej sem dodal FOSUserBundle (FriendsOfSymfony/FOSUserBundle ·
24
GitHub). To je modul, ki skrbi za registracijo, prijavo in odjavo uporabnikov. Nato sem napisal programsko kodo za dodajanje, urejanje in prikazovanje videoposnetkov. Dodal sem skripte, ki uporabljajo tehnologijo Ajax, za dodajanje komentarjev izbranega videoposnetka in dodajanje videoposnetka med priljubljene. Ko je bila stran s predvajanjem videoposnetkov funkcionalna, sem dodal skripte za iskanje videoposnetkov in sortiranje rezultatov po naslovu, kategoriji, skupini in datumu. Sledilo je kodiranje uporabniške strani.
To je bil zahtevnejši del kodiranja. Spletni aplikaciji sem z različnimi skripti dodal funkcionalnost dodajanja kvizov med dele videoposnetkov. Pri tem sem si pomagal s skriptnim jezikom JavaScript in knjižnico Jquery. Pri predvajanju videoposnetka sem dodal nekaj skriptov JavaScript, ki preverjajo, kdaj se naj pojavi kviz. Uporabil sem tudi tehnologijo Ajax, ki skrbi za prikazovanje kvizov, brez da bi ponovno naložili vse dele spletne strani.
Nato sem se lotil kodiranja delov aplikacije, ki so odgovorni za dodajanje video učne poti in dodajanje ali brisanje videoposnetkov v oz. iz video učne poti. Dodal sem skripte za prikazovanje rezultatov rešenih kvizov, tako za kvize med videoposnetkom kot tiste, ki se pojavljajo v video učni poti. Na koncu je sledilo kodiranje vmesnika za administracijo in varnostnih nastavitev. Različnim uporabnikom smo dodelili različne pristojnosti. Tako ima npr. neprijavljen uporabnik dostop le do ogleda videoposnetka oziroma video učne poti brez vmesnih kvizov in do iskanja. Prijavljen uporabnik ima dostop do ogleda videoposnetka oziroma učne poti z vmesnimi kvizi, do iskanja in do uporabniških strani. Na uporabniških straneh lahko ureja uporabniške podatke in vidi priljubljene videoposnetke ter videoposnetke, ki so namenjeni skupini, kateri pripada. Prijavljen uporabnik s pravicami učitelja ima iste pristojnosti kot prijavljen uporabnik brez pravic, hkrati pa lahko dodaja še videoposnetke, kvize, kreira video učne poti ter si ogleda rezultate rešenih kvizov pri videoposnetkih in video učnih poteh, ki jih je sam ustvaril. Administrator ima dostop do vseh vsebin.
Sledil je del, kjer sem se posvetil oblikovanju aplikacije. Ta je realiziran z uporabo tehnologije CSS. Določil sem barve pisav in barve ozadij, pisave, postavitev,velikost in obliko elementov. Za različne animacije sem uporabil CSS in Jquery.
4.3. Zgradba podatkovne baze
Podatki o uporabnikih, videoposnetkih, video učnih poteh, kvizih in rezultatih so shranjeni v različnih tabelah v bazi MySQL. Te tabele so:
25
fos_user – podatki o uporabnikih,
tbl_videos ‒ podatki o videoposnetkih,
tbl_categories ‒ podatki o kategorijah videoposnetka in video učne poti,
tbl_groupcls – podatki o skupinah študentov,
tbl_favourites – podatki o priljubljenih videoposnetkih,
tbl_comments – podatki o komentarjih,
tbl_checkpoints – podatki o kvizih,
tbl_playlists – podatki o video učnih poteh,
tbl_results – podatki o rešenih kvizih.
Na spodnji sliki si lahko ogledate grafični prikaz podatkovne baze za spletno aplikacijo PEFtube. Na sliki so lepo vidne zveze med tabelami.
Slika 5: Zgradba podatkovne baze
26
4.4. Zgradba programske kode
Uporabljal sem ogrodje Symfony2 (Sensio, High Performance PHP Framework for Web Development – Symfony). Tako je programska koda razdeljena na module. Modul oziroma v ogrodju Symfony2, poimenovan bundle, je razdeljen po vzoru arhitekture MVC. Moja aplikacija je sestavljena iz štirih bundlov. To so:
1. UserfosBundle
V tem bundlu se nahajajo skripti, ki skrbijo za registracijo, prijavo, odjavo, urejanje uporabnika. Vsebuje tudi skript, ki je odgovoren za prikaz uporabniške strani, kjer so, glede na različne pravice uporabnikov, prikazani:
o videoposnetki,
ki jih je uporabnik dodal med priljubljene,
ki so namenjeni za skupino, ki ji pripada uporabnik,
ki jih je naložil uporabnik;
o video učne poti,
ki jih je naložil uporabnik,
ki so namenjene za skupino, ki ji pripada uporabnik.
2. SearchBundle
Ta bundle vsebuje skript, ki poišče videoposnetek ali video učno pot. Zadetke razvrsti ali po naslovu, kategoriji, skupini ali po datumu. Za iskanje uporablja funkcijo SOUNDEX (xlab). To je funkcija, ki primerja tekst, ki ga je vpisal uporabnik, z naslovom videoposnetka oziroma video učne poti. Če se naslova v večini ujemata, je to pravi videoposnetek oziroma video učna pot. Na sliki je prikazan primer iskanja.
27
Slika 6: Primer iskanja
3. PlayBundle
V tem bundlu so skripti, ki skrbijo za:
o predvajanje videoposnetkov in video učnih poti, o dodajanje videoposnetka med priljubljene, o komentiranje videoposnetka,
o prikazovanje kvizov med videoposnetki in video učnimi potmi, o dodajanje videoposnetkov,
o dodajanje kvizov,
o oblikovanje video učnih poti, o shranjevanje rezultatov kvizov.
4. AdminBundle
V tem bundlu se nahajajo skripti, ki so namenjeni administratorju spletne aplikacije.
Omogočajo:
o upravljanje pravic uporabnikov,
o izbris uporabnikov, kategorij, skupin, videoposnetkov in video učnih poti, o dodajanje skupine in kategorije.
Datoteke CSS za slog in skripti JavaScript se nahajajo v javno dostopni mapi web.
28
5. Opis sistema
Opis sistema je namenjen vsem, ki se prvič srečajo s spletno aplikacijo PEFtube, in vsem tistim, ki se jim med uporabo aplikacije pojavi kakšno vprašanje. Sistem podpira štiri tipe uporabnikov, ki se med seboj razlikujejo glede na dodeljene pravice. V nadaljevanju bom opisal sistem po vrstnem redu od uporabnika z najmanj pravicami do administratorja, ki ima vse pravice.
5.1. Opis sistema za neprijavljene uporabnike
Ta del je namenjen za uporabnikom, ki niso registrirani v sistem. Začetna stran aplikacije je namenjena iskanju. Za iskanje izpolnimo obrazec in pritisnemo gumb Išči!. Če polje Naslov videoposnetka oz. učne poti pustimo prazno in izvedemo iskanje, se nam prikažejo vsi videoposnetki oziroma video učne poti, ki so v spletni aplikaciji. Iz spustnega seznama z naslovom Iskati želim lahko izberemo, kaj želimo poiskati. Imamo možnost, da poiščemo bodisi videoposnetek bodisi video učno pot.
Slika 7: Iskanje
Ko najdemo želen zadetek, si s klikom na ime, ki je obarvano modro, ogledamo videoposnetek oziroma video učno pot. Klik nas preusmeri na spletno stran, kjer se predvaja videoposnetek.
29
Slika 8: Ogled videoposnetka
Na spletni strani z videoposnetkom si le-tega lahko ogledamo, preberemo nekaj informacij o njem, prav tako pa lahko preberemo komentarje, ki so jih napisali prijavljeni uporabniki.
Če iz zgornjega glavnega menija izberemo Videoposnetek, nas spletna aplikacija opozori, da naj najprej poiščemo videoposnetek, ki si ga želimo ogledati.
Slika 9: Izbrana stran Videoposnetek iz menija
Imamo tudi možnost, da si ogledamo video učne poti. Najprej poiščemo želeno učno pot.
Kliknemo na ime, ki je prikazano v seznamu. Klik nas preusmeri na spletno stran, ki prikazuje video učne poti. Ob videoposnetku je tabela, kjer si lahko ogledamo, kateri videoposnetki oziroma njihovi deli sestavljajo video učno pot. Med njimi se lahko pomikamo s klikom na gumb Pojdi, ki se nahaja na desni strani imena videoposnetka na seznamu.
30
Slika 10: Ogled video učne poti
5.2. Opis sistema za učence
Ta del opisa sistema je namenjen prijavljenim uporabnikom, ki jih v diplomski nalogi imenujem »učenci«.
5.2.1. Registracija
Če želimo dobiti pristojnosti »učenca«, se moramo najprej registrirati. S klikom na Registracija, ki se nahaja v glavnem meniju desno, nas aplikacija preusmeri na spletno stran, kjer se registriramo. To naredimo tako, da izpolnimo spodnji obrazec. Pri spustnem meniju Skupina, izberemo skupino oziroma razred, ki mu pripadamo. Ko končamo, pritisnemo na gumb Registracija.
31
Slika 11: Registracija uporabnika
Prikaže se nam spodnje obvestilo.
Slika 12: Aktivacija uporabnika, 1. del
Naslednji korak je, da se prijavimo v svoj e-poštni odjemalec in kliknemo na avtorizacijsko povezavo, ki smo jo dobili po e-pošti.
Slika 13: Aktivacija uporabnika, 2. del
32
Ob kliku na povezavo v e-pošti se pokaže spodnje obvestilo.
Slika 14: Uspešna registracija
S pritiskom na Odjava, se lahko odjavimo in se nato s pritiskom na Prijava zopet prijavimo.
Ob prijavi imamo tudi možnost, da si nas spletna aplikacija zapomni. Tako se nam ob ponovnem obisku spletne aplikacije ne bo potrebno prijavljati.
Slika 15: Prijava
Če pozabimo geslo, lahko kliknemo na povezavo Ste pozabili geslo?, in s pomočjo čarovnika spletne aplikacije ponastavimo geslo.
5.2.2. Uporabniške strani
Če se pomaknemo z miškinim kazalcem v glavnem meniju na Uporabnik, se nam prikaže podmeni z različnimi možnostmi.
Slika 16: Spustni meni Uporabnik
Na spletni strani, ki se odpre, lahko v podmeniju Profil pogledamo svoje podatke. S klikom na povezavo Pošlji e-mail! zaprosimo za pravice učitelja. Administrator nam na podlagi uporabniških podatkov odobri oziroma zavrne prošnjo.
33
Slika 17: Profil
Če v podmeniju izberemo Spremeni geslo, se odpre spletna stran, kjer lahko urejamo svoje podatke. To storimo tako, da spremenimo želene podatke, vpišemo Trenutno geslo in pritisnemo gumb Shrani. Ob pravilno vpisanem geslu se podatki posodobijo.
Slika 18: Urejanje profila
Če v podmeniju izberemo Spremeni geslo, se odpre spletna stran, kjer lahko spremenimo trenutno geslo. Obrazec izpolnimo tako, da najprej vpišemo trenutno geslo, nato v naslednjih dveh poljih vpišemo novo geslo in pritisnemo gumb Spremeni geslo.
Slika 19: Spremeni geslo
34
Če v podmeniju izberemo možnost Videoposnetki, se odpre spletna stran, kjer si lahko ogledamo seznam videoposnetkov in video učnih poti, ki so namenjeni skupini, ki ji pripadamo. Na tej strani je tudi seznam videoposnetkov, ki smo jih dodali med priljubljene.
Če si želimo ogledati videoposnetek s seznama, z levim gumbom na miški kliknemo na ime videoposnetka, spletna aplikacija pa nas preusmeri na spletno stran za ogled izbranega videoposnetka.
Slika 20: Seznam videoposnetkov
5.2.3. Videoposnetek in video učna pot
Prijavljeni uporabnik lahko išče videoposnetke in video učne poti na enak način kot neprijavljeni uporabnik. Ta način je opisan v razdelku »Opis sistema za neprijavljene uporabnike«. Ogleda videoposnetka in video učne poti se pri prijavljenih uporabnikih nekoliko razlikujeta od ogledov pri neprijavljenih uporabnikih.
35
Slika 21: Ogled videoposnetka
Prijavljeni uporabniki imajo možnost komentiranja videoposnetka in možnost, da ga dodajo med priljubljene. Zvezdica na desni strani videoposnetka nam omogoča, da videoposnetek dodamo oz. odstranimo iz priljubljenih. Če je zvezdica rumene barve, kot na sliki 21, je videoposnetek med priljubljenimi. Če je zvezdica takšna kot na sliki 22, videoposnetek ni med priljubljenimi.
Slika 22: Videoposnetek ni med priljubljenimi
Če smo med predvajanje videoposnetkov vključili različne kvize, se ti se pojavijo pod povzetkom videoposnetka. Če na kviz trikrat napačno odgovorimo, se četrtič pojavi pomoč v
