UNIVERZA V LJUBLJANI -...

UNIVERZA V LJUBLJANI

PEDAGOŠKA FAKULTETA

DIPLOMSKO DELO

ZSOLT PROŠIĆ

UNIVERZA V LJUBLJANI

PEDAGOŠKA FAKULTETA

Študijski program: Matematika in računalništvo

PROGRAMSKO ORODJE ZA SIMULACIJO KARDANSKE

REŠETKE

DIPLOMSKO DELO

Mentorica: doc. dr. IRENA NANČOVSKA ŠERBEC

Kandidat: ZSOLT PROŠIĆ

Ljubljana, avgust 2016

Tema diplomskega dela

Izdelajte spletno aplikacijo, ki vizualizira in simulira vrtenje kriptografskega modela

Kardanske rešetke. Aplikacijo umestite v kontekst večpredstavnega učnega gradiva. To naj

omogoča preverjanje znanja pred in po uporabi interaktivne simulacije rešetke in sledi

napredku znanja učencev. Obravnavajte lastnosti interaktivnih, večpredstavnih učnih gradiv

za simulacijo in animacijo, ki podprejo veščine za razvoj abstraktnega razmišljanja in

razumevanje prostorskih predstavitev v skladu s sodobnim kontekstom razvoja

računalniškega razmišljanja. S pilotsko raziskavo preizkusite didaktične lastnosti aplikacije

med izbranimi učenci srednjih šol.

V Ljubljani, 5. 5. 2016

Mentorica:

doc. dr. Irena Nančovska Šerbec

Irena Nančovska Šerbec

Zahvala

Za vso strokovno pomoč in usmeritve ter za dejstvo, da »obljuba dela dolgo«, se

zahvaljujem mentorici doc. dr. Ireni Nančovski Šerbec.

Hvala vodstvu podjetja Comtrade.

Družini in najbližjim se zahvaljujem za podporo in potrpežljivost.

I

PROGRAMSKO ORODJE ZA SIMULACIJO KARDANSKE REŠETKE

POVZETEK

Večpredstavnost, animacija in interaktivnost veljajo za ustaljena in močna orodja v učnem

procesu.

V diplomskem delu bomo predstavili primer orodja, ki ga uporabimo za aktivno učenje.

Razvili smo konceptualni model, spletno aplikacijo Programsko orodje za simulacijo

Kardanske rešetke, ki temelji na teh orodjih in predstavlja učno gradivo s področja

kriptologije. Struktura aplikacije sledi Mayerjevim načelom za izdelavo večpredstavnostnih

gradiv in sloni na kognitivni teoriji učenja z večpredstavnostjo. S simulacijo in nalogami

problemskega značaja spletna aplikacija služi kot sredstvo za razvoj abstraktnega

razmišljanja in prostorskih predstavitev. Aplikacija je namenjena srednješolcem, ki so jo tudi

preizkusili. Analiza rezultatov pilotske raziskave kaže na pozitivne učne učinke, ki so skladni z

neo-Piagetovo teorijo kognitivnega razvoja

KLJUČNE BESEDE

spletna aplikacija, simulacija, interaktivnost, kriptografija, steganografija, računalniško

razmišljanje, abstraktno in prostorsko razmišljanje

II

ACM KLASIFIKACIJA

K.3 Računalništvo in izobraževanje

K.3.1 Uporaba računalnika v izobraževanju

K.3.2 Poučevanje računalništva in informatike

III

WEB APPLICATION FOR SIMULATION OF CARDAN GRILLE

ABSTRACT

Multimedia, animation and interactivity are common and powerful tools that can be applied

in the learning process. In this diploma thesis we present an example of an active-learning

tool. We have developed a conceptual model in the form of a web application called “Web

Application for simulation of Cardan Grille”, which is based on the aforementioned tools and

consists of learning material from the field cryptography. The application’s structure follows

Mayer’s principles of the cognitive theory of multimedia learning. Based on simulation and

problem-solving activities, this web application serves as a tool for developing abstract and

spatial reasoning. It is intended for high school students. The analysis of results obtained from

the pilot empirical study points toward positive learning outcomes that are consistent with

the neo-Piagetian theory of cognitive development.

KEYWORDS

web application, simulation, interactivity, cryptography, steganography, computational

thinking, abstract and spatial reasoning

IV

ACM CLASSIFICATION

K.3. Computer and Education

K.3.1 Computer Uses in Education

K.3.2 Computer and Information Science Education

V

KAZALO VSEBINE

1. UVOD ................................................................................................................................... 1

1.1. Cilji diplomskega dela .................................................................................................. 1

1.2. Pregled vsebine ostalih poglavij .................................................................................. 2

2. KRIPTOGRAFIJA ................................................................................................................... 3

2.1. Zgodovina .................................................................................................................... 4

2.1.1. Od starega veka do 1. svetovne vojne ................................................................. 4

2.1.2. Od prve svetovne vojne do danes ........................................................................ 5

2.2. Steganografija .............................................................................................................. 8

2.3. Kardansko in vrteče se rešeto ................................................................................... 10

2.3.1. Girolamo Cardano .............................................................................................. 10

2.3.2. Kardansko rešeto ................................................................................................ 10

2.3.3. Vrteče se rešeto ................................................................................................. 11

3. TEORETSKO OZADJE .......................................................................................................... 13

3.1. Računalniško razmišljanje .......................................................................................... 13

3.2. PISA ............................................................................................................................ 15

3.3. Neo-Piagetova teorija kognitivnega razvoja in učenje abstraktnega razmišljanja.... 17

3.4. Učenje z animacijo in simulacijo ................................................................................ 23

3.4.1. Kognitivna teorija učenja z večpredstavnostjo .................................................. 24

4. TEHNIČNA REALIZACIJA ..................................................................................................... 27

4.1. HTML5 ........................................................................................................................ 27

4.2. CSS3 ........................................................................................................................... 29

4.3. JAVASCRIPT ................................................................................................................ 31

4.3.1. JQUERY ............................................................................................................... 32

4.3.2. AJAX .................................................................................................................... 33

VI

4.4. PHP ............................................................................................................................. 34

4.5. MYSQL ........................................................................................................................ 35

4.6. BOOTSTRAP ............................................................................................................... 36

4.7. HEROKU ..................................................................................................................... 37

5. PROGRAMSKO ORODJE ZA SIMULACIJO KARDANSKE REŠETKE ....................................... 38

5.1. Začetno in končno preverjanje .................................................................................. 38

5.2. Vadnica ...................................................................................................................... 44

5.3. Rezultati ..................................................................................................................... 51

6. EMPIRIČNA RAZISKAVA ..................................................................................................... 54

6.1. Opis vzorca ................................................................................................................. 54

6.2. Splošni podatki .......................................................................................................... 55

6.3. Analiza odgovorov ..................................................................................................... 56

6.3.1. Delež pravilnih odgovorov .................................................................................. 56

6.3.2. Prvi par nalog (1. in 4. naloga) ............................................................................ 57

6.3.3. Drugi par nalog (2. in 5. naloga) ......................................................................... 58

6.3.4. Tretji par nalog (3. in 6. naloga) ......................................................................... 59

6.4. Analiza časa ................................................................................................................ 60

6.4.1. Povprečni čas ...................................................................................................... 60

6.4.2. Prvi par nalog (1. in 4. naloga) ............................................................................ 61

6.4.3. Drugi par nalog (2. in 5. naloga) ......................................................................... 62

6.4.4. Tretji par nalog (3. in 6. naloga) ......................................................................... 63

6.5. Povzetek analize rezultatov ....................................................................................... 64

7. ZAKLJUČEK ......................................................................................................................... 65

8. VIRI .................................................................................................................................... 67

VII

KAZALO SLIK

Slika 1: Scytale ............................................................................................................................ 4

Slika 2: Stroj Enigma ................................................................................................................... 7

Slika 3: Kardanska rešetka ........................................................................................................ 11

Slika 4: Vrteča se rešetka .......................................................................................................... 11

Slika 5: Model prekrivajočih se valov ....................................................................................... 22

Slika 6: Shema kognitivne teorije učenja z večpredstavnostjo ................................................ 25

Slika 7: Zaslonska slika aplikacije med uporabo ....................................................................... 40

Slika 8: Z izbiro možnosti med reševanjem naloge se rešetka obarva modro ......................... 41

Slika 9: Razkrita Kardanska rešetka v aplikaciji ........................................................................ 44

Slika 10: Prekrita Kardanska rešetka v aplikaciji ...................................................................... 44

Slika 11: Rešetka v prvi poziciji ................................................................................................. 46

Slika 12: Rotacija rešetke za 90 stopinj .................................................................................... 46

Slika 13: Rešetka v drugi poziciji ............................................................................................... 46

Slika 14: Uporabnikovo rešeto ................................................................................................. 48

Slika 15: Izdelovanje svojega šifriranega besedila ................................................................... 50

Slika 16: Prikaz rezultatov končnega preverjanja..................................................................... 53

VIII

KAZALO GRAFIKONOV

Grafikon 1: Delež pravilnih odgovorov pri začetnem preverjanju ........................................... 56

Grafikon 2: Delež pravilnih odgovorov pri končnem preverjanju ............................................ 56

Grafikon 3: Odgovori 1. naloga ................................................................................................ 57






Grafikon 9: Čas reševanja nalog pri začetnem preverjanju ..................................................... 60

Grafikon 10: Čas reševanja nalog pri končnem preverjanju .................................................... 60

Grafikon 11: Čas reševanja 1. naloge ....................................................................................... 61






KAZALO TABEL

Tabela 1: Primerjava klasične Piagetove in neo-Piagetove teorije .......................................... 21

X

AKRONIMI IN OKRAJŠAVE

PHP – PHP: Hypertext Preprocessor

HTML – Hyper Text Markup Language

CSS – Cascading Style Sheets

DOM – Document Object Model

JS – JavaScript

MySQL – sistem za upravljanje s podatkovnimi bazami

1

1. UVOD

Živimo v dobi digitalizacije, tehnologija nas spremlja na skoraj vsakem koraku in vseh področjih

življenja. Tehnološki napredek, ki ga poganja kolesje družbe in gospodarstva, se odvija pred

našimi očmi – delamo v poklicih, ki pred desetimi leti še niso obstajali, in uporabljamo

tehnologije, katerih si še pred manj kot desetletjem ne bi znali predstavljati. V razvoju

posameznika se v vse večji meri kaže potreba po naboru veščin, ki presegajo statično znanje.

Da bi v svoji in prihodnjih generacijah vzgojili samostojne, analitično in kritično razmišljujoče

posameznike, ki znajo reševati probleme tehnološke družbe, velik del odgovornosti nosimo

prav pedagogi in didaktiki. Stroka skupek tovrstnih metodologij povzema v konceptu razvoja

računalniškega razmišljanja, ki postaja tako orodje kot cilj v učilnicah.

V diplomskem delu smo želeli raziskati, v kakšni meri so slovenski srednješolci vešči

abstraktnega razmišljanja in prostorskih predstavitev, ki sta gradnika računalniškega

razmišljanja. Področje kriptografije, ki sicer ni del kurikula za računalništvo, nudi odličen

poligon, saj je rezultat več kot štiri tisoč let tovrstnega razmišljanja in se razvija še danes v

digitalni obliki.

Učno gradivo, ki predstavlja simulacijo kriptografskega modela, smo izdelali v obliki

interaktivne spletne aplikacije Programsko orodje za simulacijo Kardanske rešetke.

1.1. Cilji diplomskega dela

V prvi vrsti je cilj diplomskega dela izdelava spletne aplikacije, ki služi kot večpredstavno učno

gradivo. Uporaba večpredstavnosti oz. multimedije s poudarkom na animacijah, simulacijah

in interaktivnosti se pogosto uveljavlja pri ustvarjanju učnih gradiv oz. vsebin, s katerimi želimo

pri uporabnikih razviti abstraktno ali prostorsko razmišljanje. Spletna aplikacija obravnava

problemske situacije uporabe Kardanskega, vrtečega se rešeta na tak način, da med

reševanjem problemov od uporabnika zahteva algoritmično, prostorsko in abstraktno

razmišljanje, ki so nekateri od gradnikov računalniškega razmišljanja. Skladno z neo-Piagetovo

teorijo kognitivnega razvoja pričakujemo, da bo uporaba aplikacije merljivo vplivala na

2

utrjevanje in razvoj prej omenjenih veščin, ki spadajo med najvišje stopnje kognitivnega

razvoja po tej teoriji. Da bi aplikacija najbolje služila svojemu namenu, smo pri izdelavi

aplikacije, kjer je to bilo mogoče, sledili Mayerjevim načelom za izdelavo večpredstavnostnih

gradiv, ustreznih za učenje.

1.2. Pregled vsebine ostalih poglavij

Poglavja tega diplomskega dela se podrobneje dotaknejo gradnikov izdelane spletne

aplikacije.

V drugem poglavju bomo obravnavali kriptografijo, ki je predmet učnega gradiva izdelka. V

tem poglavju bomo predstavili pojem kriptografije v splošnem ter pojme, povezane s

kriptografijo. Predstavili bomo zgodovino in sodobno rabo kriptografije ter se dotaknili tehnike

steganografije, kamor uvrščamo Kardansko rešetko.

V poglavju, ki sledi, bomo predstavili teoretske koncepte, ki bodisi predstavljajo temelj ali

motivacijo izdelave spletne aplikacije. Podrobneje bomo predstavili stališče pomembnosti

tovrstnih aplikacij ter kakšno je ozadje same konstrukcije aplikacije, da bi izpolnjevala svoj

namen.

V poglavju Tehnična realizacija bomo predstavili tehnologijo in okolja, s katerimi smo izdelali

spletno aplikacijo. Ogledali si bomo uporabljene programske jezike, tehnologije za grafično

oblikovanje ter programska okolja s primeri uporabe v našem izdelku.

Podrobneje bomo opisali implementirane funkcionalnosti spletne aplikacije in njenega

delovanja s konkretnimi primeri programske kode.

V sklepnem delu diplomskega dela bomo predstavili ugotovitve in analizo rezultatov empirične

raziskave na osnovi podatkov, pridobljenih od uporabnikov, ki so uporabljali spletno aplikacijo

Programsko orodje za simulacijo Kardanske rešetke.

3

2. KRIPTOGRAFIJA

Želja po skrivni komunikaciji je stara skoraj toliko kot sama pisna komunikacija. Že stoletja je

vključena v vojaško in politično delovanje. Vojaški generali so med seboj komunicirali o

pozicijah svojih ali nasprotnikovih čet in nujno je bilo, da nasprotnik v primeru, da je

informacijo prestregel, vsebine ni razumel. Enako je veljalo tudi za politične puče skozi

zgodovino.

Tudi v današnjem času je kriptografija močen del vojaškega in političnega gibanja, prav tako

pa je del vsakdanjika večine ljudi. Spletno bančništvo in nakupovanje, varovanje podatkov,

shranjenih na trdem disku, ali varovanje e-pošte temeljijo na kriptiranju (Easttom, 2015).

Easttom (2015) je opisal pojem kriptografije kot vedo o spreminjanju sporočila tako, da ga ni

mogoče brati brez ustreznega algoritma ali ključa. Za potrebe te diplomske naloge bomo

uporabljali Esttomovo terminologijo kriptoloških pojmov:

Dešifrirati (dekriptirati) – pretvoriti šifrirano besedilo v navadno besedilo.

Ključ – informacija, po navadi številka, ki jo uporablja algoritem za šifriranje ali dešifriranje

sporočila.

Kriptoanaliza – veda o zakonitostih in metodah za dešifriranje šifre brez poznavanja ključa.

Kriptologija – velikokrat napačno enačena s kriptografijo. Kriptologija je širši pojem, ki sestoji

iz kriptografije in kriptoanalize.

Šifra – sinonim za algoritem, ki ga uporabimo za transformacijo navadnega besedila v šifrirano

besedilo.

Šifrirano besedilo – besedilo, ki je rezultat šifriranja. Varnost šifriranega besedila je odvisna

od kompleksnosti algoritma ali šifre, uporabljene pri šifriranju.

Šifrirati (kriptirati) – pretvoriti navadno besedilo v šifrirano besedilo.

Navadno besedilo – izvorno besedilo šifriranega besedila. Besedilo, ki ga želimo zavarovati.

4

2.1. Zgodovina

2.1.1. Od starega veka do 1. svetovne vojne

Najstarejše besedilo, ki vsebuje osnovni element kriptografije – spreminjanje zapisa, je nastalo

pred približno 4000 leti v Egiptu, v mestu Menet Khufu. Gre za hieroglifski zapis na grobnici

plemeniteža Khnumhotepa II, ki je zapisan z vrsto nenavadnih simbolov, in sicer z namenom,

da vsebino in pomen zapisa otežijo oziroma zakrijejo (Kahn, 1996).

Približno v 5. stoletju pred našim štetjem so Špartanci, slovita antična vojaška družba, znana

po strogem načinu vzgoje, pogumu in bojevitosti, razvili kriptografsko sredstvo za šifriranje in

dešifriranje sporočil. Scytale (Slika 1) je naprava cilindrične oblike, na katero so navili ozek trak

pergamenta ali usnja. Ko je bil trak navit, so nanj zapisali sporočilo, ki ga ni bilo mogoče

prebrati, ko se je trak odvil. Pisec in bralec sporočila sta morala imeti enako širok scytale za

uspešno prenašanje sporočila. Takšno tehniko šifriranja uvrščamo med transpozicijske šifre,

značilnost katerih je, da so uporabljene črke nespremenjene, spremeni pa se vrstni red

oziroma položaj zapisanih črk.

Slika 1: Scytale (Easttom, C., 2015)

Še ena antična tehnika šifriranja je adicija – substitucija. Opisal jo je grški pisec Polibij, prvi pa

jo je uporabljal Julij Cesar. Sporočilo se je šifriralo tako, da se je vsaka črka zamenjala s črko, ki

je po abecednem vrstnem redu bila tri mesta naprej. Črka »A« se je spremenila v črko »D«,

»V« v črko »Y« in tako naprej.

V eseju iz leta 1466 je italijanski avtor Leon Battista Alberti, ki velja za očeta zahodne

kriptografije, opisal disk za šifriranje, ki je temelj polialfabetske šifre. Čeprav je njegov koncept

5

bil prvi večji zgodovinski kriptografski napredek, ga je v celoti razvil in v praksi uporabil

francoski kriptograf Blaise De Vigenere, po katerem šifra nosi ime Vigenerjev kvadrat oz.

Vigenerjeva šifra. Dolgo je veljalo prepričanje, da te šifre ni mogoče razbiti.

Predvidoma leta 1845 je Charles Babbage razvil metodo statistične analize, s katero je uspešno

dešifriral Vigenerjevo šifro. Ker Babbage ni vestno dokumentiral svojega dela ali pa zato, ker

bi ta informacija lahko ogrozila položaj Združenega kraljestva v krimski vojni, je bilo to dejstvo

odkrito šele v 20. stoletju. Zasluge za razvoj tehnike statističnega napada za razbitje

Vigenerjeve šifre se pripisuje Prusu Kasiskemu, ki je tehniko odkril leta 1863. Danes jo

poznamo kot Kasiskijev test (Easttom, 2015; Kahn, 1996).

2.1.2. Od prve svetovne vojne do danes

Prvi dan vojne je britanska ladja Telconia odkrila in uničila nemške čezoceanske

komunikacijske kable in s tem Nemce prisilila v uporabo komunikacijskih kablov v lasti Švedov

ali Američanov. Te kanale je rutinsko prestregala in pregledovala organizacija »ROOM 40«,

šifrirna organizacija britanske kraljeve mornarice. 16. januarja 1917 sta člana »ROOM 4O«,

William Montgomery in Nigel De Gray, prestregla sporočilo Nemcev, šifrirano s šifro 0075. Do

naslednjega dne sta dešifrirala sporočilo, ki ga je nemški zunanji minister Zimmermann poslal

mehiškemu predsedniku, v katerem je razkril načrt napada na ameriške podmornice in ga

pozval naj se mu, skupaj z Japonci, pridruži v napadu.

Razkrito sporočilo je bilo predano ameriškemu predsedniku Wilsonu, ki je 2. aprila 1917 vstopil

v vojno z Nemčijo.

Proti koncu prve svetovne vojne je vodja ameriških vojnih kriptografov Joseph Mauborgne

razvil prvo šifriranje, ki je slonelo na naključno generiranih ključih. Za šifriranje in dešifriranje

so uporabili dve enaki knjižici, v katerih so natisnjene naključno izbrane črke. Z Vigenerjevo

šifro so šifrirali sporočila tako, da je vsaka stran knjižice bila uporabljena za šifriranje samo

enega sporočila. Ranljivost Vigenerjeve šifre je en sam ključ. Z novo tehniko, ki je vpeljala

naključno generirane ključe šifriranja, v šifriranem besedilu ni bilo mogoče odkriti enovitega

ključa za dešifriranje.

6

Za dešifriranje sporočila, šifriranega s ključem dolžine 21 črk, s preizkušanjem, bi morali

preizkusiti do 500 x 1027 ključev, pri čemer bi se utegnilo več dešifriranih sporočil zdeti

berljivih. Tehnika se je ohranila do današnjega dne, imenujemo pa jo OTLP (One Time Letter

Pad) in se uporablja za šifriranje strogo zaupnih podatkov.

Nedvomno je čas vojne krojil in pospeševal družbeni in tehnološki napredek. V prvi svetovni

vojni se je pokazala pomembna vloga kriptografije in teža posledic šibkega šifriranja, kar je

botrovalo odkritju OTLP. Druga svetovna vojna pa je vlogo kriptografije postavila v samo

središče vojaških in političnih strategij, kjer je ostala vse do danes (Bleakley, 1991; Richelson,

1999).

Zgodovinsko znano je tudi delovanje tajnega projekta Ultre, skupine kriptografskih

strokovnjakov, ki so prestregali in dešifrirali sporočila sil osi. Med najbolj znane dosežke

štejemo prispevke k razbitju kode nemške Enigme.

Enigma je bila družina kriptografskih strojev. Prvo različico je razvil Nemec Arthur Scherbius in

jo patentiral leta 1919. Enigmo so za kriptirano komunikacijo uporabljale številne vojske, ne le

nemška. Tekste, kriptirane z eno različico Enigme, so dešifrirali poljski kriptoanalitiki Marian

Rejewski, Jerzy Różycki in Henryk Zygalski. Trojica je z dostopom do delujoče Enigme z

obratnim inženirstvom razvila orodja za razbitje šifre Enigme, eno teh orodij pa je kriptološka

bomba.

Enigmo so sestavljali rotorji, medsebojno povezani diski s 26 črkami, razvrščenimi krožno po

disku. Vsak od diskov je predstavljal drugačno substitucijsko šifro, torej lahko Enigmo

razumemo kot mehansko polialfabetsko šifro. Operater Enigme je besedilo, ki ga je bilo treba

šifrirati, vnašal preko tipkovnice. Enigma je vsak vnesen znak šifrirala z drugim substitucijskim

ključem. Na drugi strani je prejemnik v Enigmo vnesel šifrirano besedilo, ki ga je lahko razbil

le, če je Enigma imela enako konfiguracijo rotorjev kot stroj, ki je besedilo šifriral.

7

Slika 2: Stroj Enigma (Easttom, 2015)

Družino Enigme so sestavljali različni modeli; (1) Enigma A, prva različica, (2) Enigma B, (3)

Enigma C, (4) Enigma B, ki so jo uporabljali Združeno kraljestvo, Japonska, Švedska in ostali,

(5) Mornariška šifra D, ki jo je uporabljala italijanska mornarica, (6) Funkschlüssel C, ki jo je

uporabljala nemška mornarica v začetku leta 1926, (7) Enigma G, ki jo je uporabljala nemška

vojska, (8) Wehrmacht Enigma I, razširitev Enigme G, različica, ki jo je nemška vojska

uporabljala najpogosteje, in (9) M3 izboljšana Enigma, ki jo je leta 1930 začela uporabljati

nemška vojska.

Ostali sistemi so bodisi izhajali iz Enigme ali bili konceptualno podobni, med njimi japonski

GREEN, sistem SIGABA, NEMA in drugi.

Pomembno vlogo pri razbitju šifre je igral Alan Turing, angleški matematik in kriptolog, ki velja

za pionirja modernega računalništva. V času druge svetovne vojne je Turing delal za skrivni

vladni projekt Ultra, ki je deloval v Bletchley Parku pod okriljem MI6 (britanske obveščevalne

službe). Na podlagi dognanj poljskih kolegov je razvil elektromehanski stroj, ki ga danes

poznamo kot Turingovo bombo, ki je dešifrirala inačico Enigme. Turing je vodil ekipo, ki je

uspešno razbila šifro Enigme, ki jo je uporabljala nemška mornarica. Delo, ki so ga opravljali,

je bilo strogo zaupno. Predvideva se, da se je na račun Turingovega uspeha vojna skrajšala za

dve leti, s čimer je Turing posredno rešil milijone življenj (Easttom, 2015; Smith, 1998).

8

Z digitalizacijo sveta in porastom uporabe osebnih računalnikov v vsakdanji rabi se je pojavila

potreba po varni digitalni komunikaciji. Leta 1976 je ameriški inštitut za standard in

tehnologijo na javnem natečaju izbral DES (DATA ENCRYPTION STANDARD), algoritem

šifriranja, ki temelji na IBM-ovem algoritmu iz leta 1974.

Algoritem DES temelji na simetrični kriptografiji, ključa za šifriranje in dešifriranje podatkov

sta enaka. Šifrirajo se bloki podatkov velikosti 64 bitov, in sicer s 64-bitnim ključem, ki ga

morata poznati tako pošiljatelj kot prejemnik.

Hkrati je leta 1975 Whitfield Diffie s kolegoma Martinom Hellmanom in Ralphom Merklom

razvil koncept šifriranja z uporabo asimetričnega ključa, kar je odprlo poligon za razvoj

kriptiranja podatkov z javnim in zasebnim ključem.

V prakso so njihovo delo vpeljali Ron Rivest, Adi Shamir in Leonard Adleman, po katerih

algoritem RSA nosi ime. Gre za asimetrično šifriranje, torej uporablja javni in zasebni ključ.

Varnost algoritma temelji na zahtevnosti iskanja faktorjev velikih števil. Javni in zasebni ključ

sta lahko sestavljena iz velikih (300–400 števk) praštevil. Kljub temu da je sam postopek

kreiranja ključev znan, je dešifriranje sporočila z javnim ključem izjemno zahtevna računska

naloga, ki ji tudi sodobni računalniki niso kos (Schneier, 1996; Beckett, 1997).

2.2. Steganografija

Za razliko od kriptografije, ki za prikrivanje informacij uporablja šifre, steganografija zavaruje

podatke tako, da jih skrije v drug medij in prikrije obstoj samega skritega sporočila. Nihče razen

pošiljatelja in prejemnika ne ve, da medij vsebuje prikrito sporočilo.

Prednost, s katero se steganografija ponaša pred kriptografijo, je, da je sporočilo skrito v

povsem običajen medij, ki ne vzbuja pozornosti. Ker je sam obstoj sporočila skrit, je verjetnost,

da je izpostavljeno razkritju, majhna. Za dodatno varnost so sporočila, skrita z metodo

steganografije, velikokrat tudi kriptirana.

Korenine steganografije segajo daleč v zgodovino. Kitajci so na kos svile zapisali sporočilo, nato

pa svilo zvili v majhen klobčič in prelili z voskom. Voščeno kroglico je pogoltnil sel. Tudi, če je

nasprotnih prestregel sla in ga temeljito preiskal, sporočila ni odkril zlahka.

9

V Grčiji so slu obrili glavo in sporočilo zapisali na golo kožo, nato pa počakali, da lasje zrasejo

nazaj. O tej metodi steganografije je pisal grški zgodovinar Herodot, z njo pa naj bi Grke

posvarili o načrtovanem napadu Perzijcev.

Še ena metoda steganografije, ki izvira iz Grčije, je zapis na zložljivo leseno mizo, ki so jo nato

prekrili z voskom, da bi zakrili sporočilo. Prejemnik je nato odstranil voščeno plast, da je prišel

do sporočila. To metodo naj bi uporabil Demarat, ki je posvaril Špartance pred invazijo

Kserksesa.

V 4. stoletju pred našim štetjem je Grk Enej (z vzdevkom Taktik) pisal o vojnih strategijah in

velja za enega prvih strategov, ki je pisal o varovani vojaški komunikaciji.

»Tisti, ki sodelujejo z izdajalci, morajo vedeti, kako pošiljati sporočila. Sel naj odkrito nosi

sporočilo o nekih drugih stvareh. Skrito sporočilo naj bo všito v podplat sandalov, ki jih sel nosi,

da bo varovano od vode in blata, brez njegovega vedenja. Ko sel doseže cilj, naj preda odkrito

sporočilo. Ponoči, ko bo sel spal, naj prejemnik sporočila odstrani šive na podplatu sandalov

in vzame skrito sporočilo, na njegovo mesto pa postavi svoj odgovor in popravi šive. Naslednji

dan naj prejemnik sporočila slu preda odprto sporočilo, ki ga naj vrne kot odgovor pošiljatelju.

Tako nihče, tudi sel, ne bo vedel za obstoj skritega sporočila (Enej, 4. st. pr. n. š.)« (Kahn, 1996).

Leta 1499 je Johannes Trithemius (1462–1516) napisal delo v treh knjigah z naslovom

Steganographia, v katerih je ta pojem prvič omenjen. Delo govori o okultizmu, med vrstice

dela pa so skriti teksti o kriptografiji in steganografiji (Easttom, 2015).

Steganografske metode prikrivanja skritega sporočila se uporabljajo tudi v modernih časih.

Vrsta programskih orodij in metod nam omogoča, da želeno sporočilo skrijemo v digitalne

medije, kot so slike, videi, zvočni posnetki in drugi.

Primer steganografije je tudi Kardansko rešeto, ki ga bomo natančneje obravnavali v

naslednjem poglavju.

10

2.3. Kardansko in vrteče se rešeto

2.3.1. Girolamo Cardano

Girolamo Cardano, rojen leta 1501 v Milanu, je bil italijanski fizik in matematik, znan po tem,

da je v svojih delih znanost približal ljudem, prav tako pa je avtor prvega pisnega dela, ki

obravnava teorijo verjetnosti.

Svoje delo je izdal v 131 knjigah in 111 rokopisih, v katerih je pisal o matematiki, astronomiji,

astrologiji, fiziki, šahu, kockanju (kjer se je prvič ukvarjal z verjetnostnim izračunom),

nesmrtnosti duše, čudežnih zdravilih, dialektih, smrti, Neronu, dragih kamnih in barvah,

strupih, zraku, vodi, sanjah, urinu, zobeh, glasbi, morali in modrosti. Kljub vsem obravnavanim

tematikam svojih razmišljanj in dognanj o kriptologiji ni izdal v posebni knjigi, temveč jih je

strnil v dveh delih, s katerima je populariziral znanost, De Subtilitate in De Rerum Varietate.

Deli sta bili opremljeni s številnimi ilustracijami in vsebovali tako znanstvena dognanja tistega

časa kakor tudi veliko ugibanj. Prevedeni sta bili v več jezikov in tiskani širom Evrope (Kahn,

1996).

2.3.2. Kardansko rešeto

Med Cardanova najbolj znana odkritja na področju kriptografije in steganografije uvrščamo

Kardansko rešeto.

Kardansko rešeto (Slika 3) je steganografsko orodje pravokotne oblike iz tršega materiala, na

primer kartona, usnja ali kovine, v katerega so vrezane pravokotne luknje višine pisane vrstice

besedila. Vrezane luknje so poljubne dolžine in poljubne razporeditve. Rešeto se položi na

papir in v luknje rešeta se zapiše skrivno sporočilo. Rešeto se nato umakne in na papir zapiše

preostanek besedila tako, da tvori smiselno celoto in zakrije obstoj skritega sporočila.

Cardanov predlog je bil, naj se tako sestavljeno besedilo prepiše vsaj trikrat, da se zakrijejo

morebitne nepravilnosti. Da bi sporočilo dešifrirali, rešeto preprosto položimo na besedilo in

skrito sporočilo se razkrije skozi luknje rešeta.

11

To metodo steganografije je uporabljalo več držav za diplomatsko korespondenco v 16. in 17.

stoletju (Kahn, 1996).

Slika 3: Kardanska rešetka (Easttom, C., 2015)

2.3.3. Vrteče se rešeto

S časom se je tehnika rešeta spreminjala in razvijala. Na začetku 20. stoletja so uporabljali t. i.

vrteče se rešeto (angl. Turning Grille). V tem primeru gre za rešeto kvadratne oblike, ki je

deljeno na kvadratne celice. Četrtina celic je izluknjanih v vzorec, ki, ko obračamo rešeto skozi

vse štiri pozicije, razkrije vsako celico na papirju pod rešetom natanko enkrat. Čeprav sta si

Kardansko rešeto in vrteče se rešeto zelo različni, je v literaturi pogosto moč zaslediti enako

imenovanje (Kahn, 1996).

Slika 4: Vrteča se rešetka (Kahn, D., 1996)

12

Položaj celice rešeta po rotaciji za 90° v smeri urinega kazalca lahko opišemo s funkcijo:

𝑓(𝑥, 𝑦) = {𝑥 = 𝑛 − 𝑦 + 1

𝑦 = 𝑥

, pri čemer je n naravno število, ki predstavlja število celic na stranici rešeta.

V spletni aplikaciji, ki smo jo izdelali v sklopu tega diplomskega dela, obravnavamo pojem

steganografije in Kardansko rešetko, vrtečo se rešetko, na kateri temeljijo naloge v aplikaciji.

13

3. TEORETSKO OZADJE

V tem poglavju bomo obravnavali teoretična izhodišča, ki pojasnjujejo didaktične modele za

poučevanje abstraktnega razmišljanja, kar je namen spletne aplikacije Programsko orodje za

simulacijo Kardanske rešetke. Ta spodbuja učence k računalniškemu, abstraktnemu in

problemskemu razmišljanju, ki postaja temelj sodobnih pristopov za poučevanje

računalništva. Opisali bomo učenje s pomočjo animacij in simulacij ter poglavje zaključili z

Mayerjevo kognitivno teorijo za učenje z večpredstavnostjo, saj smo omenjena teoretična

izhodišča upoštevali pri snovanju spletne aplikacije.

3.1. Računalniško razmišljanje

V preteklosti se je pri poučevanju računalništva veliko poudarka namenilo obravnavi nekega

problema iz stališča »kako« (npr. kako uporabljati nek program) ali »kaj« (npr. kaj je končni

izdelek). Način poučevanja je deloma pogojen z ekonomskimi potrebami družbe. Tak pristop

k poučevanju ima slabosti, saj ekonomske potrebe družbe čedalje močneje slonijo na

tehnoloških inovacijah in ne le spretni uporabi tehnologije. Obenem se tehnologija spreminja

s tako hitrostjo, da utegnejo priučena znanja zastarati, preden učenec zaključi s šolanjem, prav

tako pa tehnologija prodira v domala vsa področja življenja, zaradi česar konkretno aplikativna

znanja predstavljajo le majhen nabor računalniških znanj.

Sodobnejši pristop k poučevanju računalništva si prizadeva učencem priučiti veščine, ki bi jih

delale neodvisne pri učenju in kritični obravnavi problemov ali morda celo snovanju novih

tehnologij. Skozi pouk računalništva bi učenec moral pridobiti konkretna znanja ter se naučiti

odprtega pristopa k problemskemu razmišljanju oziroma razviti t. i. računalniško razmišljanje.

Da bi učenci razumeli tehnologijo in njeno spreminjanje, jo znali uporabljati in razvijati, morajo

poznati odgovore ne le na vprašanji »kaj« in »kako«, temveč tudi »zakaj«. Tak pristop k

obravnavi nekega kompleksnega problema nudi računalniško razmišljanje, nabor kognitivnih

veščin, s katerimi problem razbijemo na enostavnejše enote, ki jih lahko obravnavamo tudi z

računalnikom (Curzon, Dorling, Ng, Selby in Woollard, 2014).

14

J. Wing, ki je zaslužna za popularizacijo ideje računalniškega razmišljanja, je termin definirala

kot miselne procese, »ki so vključeni pri formuliranju problemov in njihovih rešitev, pri čemer

so rešitve v taki obliki, da jih lahko učinkovito izvaja informacijsko-procesni agent.« Ta agent

je lahko človek, računalnik ali kombinacija obojega (Cuny, Snyder in Wing, 2010, v Curzon idr.,

2014)

Računalniško razmišljanje je vrsta analitičnega razmišljanja, povezujemo pa ga z logičnim,

sistemskim, algoritmičnim in vzporednim razmišljanjem. Računalniško razmišljanje je deloma

matematično razmišljanje v smislu pristopa k reševanju problemov, deloma inženirsko

razmišljanje v smislu pristopa k ustvarjanju in evalvaciji kompleksnih sistemov, ki v realnosti

delujejo, in deloma znanstveno razmišljanje v smislu pristopa k razumevanju izračunljivosti,

inteligence, uma in človekovega vedenja (Wing, 2011).

Selby in Woollard (2013) strneta pet temeljnih konceptov, ki nastopajo pri računalniškem

razmišljanju, podrobneje pa so razloženi v Curzon idr. (2014):

Algoritmično razmišljanje – iskanje rešitve z jasno definiranimi koraki. Posameznik ne išče

enega samega odgovora, temveč množico sistematiziranih postopkov in pravil, ki jim je treba

natančno slediti, da bi prišli do rešitve dotičnega ali podobnega problema.

Vrednotenje – proces, v katerem se posameznik prepriča, da je izdelan algoritem pravilen –

služi namenu. Sem spada vrednotenje algoritma z vidika pravilnosti, hitrosti, učinkovitosti in

razumljivosti. V procesu vrednotenja se mogoče algoritem spreminja na podlagi ugotovljenih

rezultatov.

Razčlenitev – način obravnave problemske situacije, algoritma, procesov in sistemov kot

sestavljenih celot. Dele, ki sestavljajo celoto, je mogoče razumeti, reševati, razvijati in

vrednotiti ločeno. S tem kompleksno problemsko situacijo razbijemo na manjše, lažje rešljive

dele.

Abstrakcija – sodi med načine, s katerimi problem ali sistem poenostavimo. Pri abstrakciji

govorimo o prikrivanju odvečne kompleksnosti. Ključno je izbrati pravilno podrobnost, ki jo

namensko skrijemo, da problem poenostavimo, brez izgube informacij. Z abstrakcijo lažje

snujemo kompleksne algoritme ali celotne sisteme.

15

Posplošitev – s posplošitvijo hitreje pridemo do rešitve problemov na podlagi rešitev, ki smo

jih že poiskali pri podobnih problemih. Izdelan algoritem, ki predstavlja rešitev neke določene

problemske situacije, priredimo tako, da ga je mogoče uporabiti za niz sorodnih problemskih

situacij.

Z računalniškim razmišljanjem povezujemo različne načine razmišljanja in spretnosti, ki jih

učenci razvijajo pri različnih predmetih in ne le tistih, ki so povezani z računalništvom. S ciljem,

da bi ostale pismenosti (bralne, matematične, naravoslovne) povezali z računalniško

pismenostjo oziroma razvojem zmožnosti za reševanje kompleksnih problemov, kot pri

računalniškem razmišljanju, bomo opisali rezultate zadnjih PISA raziskav na nivoju OECD.

3.2. PISA

Program mednarodne primerjave dosežkov učencev PISA (Programme for International

Student Assessment) je dolgoročen projekt primerjanja znanja ter spretnosti učenk in učencev

v državah članicah Organizacije za ekonomsko sodelovanje in razvoj (OECD) in državah

partnericah. Raziskava je bila v mednarodnem prostoru prvič izvedena leta 2000 in od takrat

države na tri leta ugotavljajo ravni bralne, matematične in naravoslovne pismenosti učenk in

učencev, starih 15 let, kar je za večino držav približno ob koncu obveznega izobraževanja. V

Sloveniji so v raziskavo vključeni praviloma dijakinje in dijaki prvih letnikov srednjih šol in

gimnazij. Skupaj s šolami raziskavo PISA v Sloveniji izvaja Pedagoški inštitut. Leta 2012, ko je

bila raziskava osredotočena na matematično pismenost, je v raziskavi sodelovalo okoli 510

000 učenk in učencev iz 65 držav, kar predstavlja reprezentativno skupino za okoli 28 milijonov

15-letnikov. V Sloveniji je v raziskavi sodelovalo 8405 dijakinj in dijakov ter učenk in učencev.

Sodelovale so vse slovenske gimnazije in srednje šole oz. 327 srednješolskih izobraževalnih

programov, ob tem pa še 24 osnovnih šol in ena ustanova za izobraževanje odraslih. V raziskavi

PISA so zbrani tudi spremljajoči podatki iz osebnega in šolskega okolja sodelujočih učenk,

učencev, dijakinj in dijakov.

Na področju matematične pismenosti so slovenski učenci in učenke v poprečju dosegli 501

točko, dosežek je pomembno višji od povprečja OECD (494 točk). Dosežek slovenskih učenk in

16

učencev je statistično podoben dosežkom učencev v Avstriji, Avstraliji, Irski, Danski, Češki in

Novi Zelandiji (Štraus, Šterman Ivančič in Štigl, 2013).

Na področju problemskega razmišljanja oziroma reševanja nalog, ki zahtevajo kompleksnejše

problemsko razmišljanje, izviren pristop ter abstraktno razmišljanje in prostorsko predstavo,

so slovenski učenci in učenke v povprečju dosegli 476 točk, kar je pomembno nižje od

povprečja OECD (500 točk). Zanimiva ugotovitev je, da so učenci držav, s katerimi so slovenski

učenci imeli primerljiv dosežek na področju matematične pismenosti, na področju

problemskega razmišljanja vsi dosegli povprečen ali nadpovprečen rezultat. Slednje ne velja

za Novo Zelandijo, za katero za področje problemskega razmišljanja ni podatka o doseženem

povprečju.

PISA 2012 definira kompetenco problemskega razmišljanja kot »… sposobnost posameznika,

da miselno obravnava situacijo ali problem, katerega rešitev je sistematizirana in ne očitna. V

kompetenco je vključena tudi želja po tovrstnem delovanju s ciljem razvoja posameznikovega

potenciala (PISA 2012 Results, 2014).«

Miselni procesi, ki so vključeni v problemsko razmišljanje, so povzeti v štirih sklopih:

Raziskovanje in razumevanje – sem spada raziskovanje problemske situacije z opazovanjem,

interakcijo in iskanjem informacij ter morebitnih omejitev in ovir. Razumevanje podanih in z

odkrivanjem pridobljenih informacij.

Predstavitev in formulacija – uporaba tabel, grafov, simbolov in besed za predstavitev celote

ali delov problemske situacije, formuliranje hipotez z relevantnimi parametri problemske

situacije in formuliranje odnosov med njimi za ustvarjanje koherentne miselne predstave o

problemski situaciji.

Načrtovanje in izvedba – izdelava načrta ali strategije za rešitev problemske situacije in

izvedba. V tem sklopu lahko govorimo o razjasnitvi celostnega cilja, razdelavi kompleksnega

primera na manjše in manj kompleksnejše probleme itn.

Preverjanje in vrednotenje – preverjanje procesa rešitve in odzivanje na ugotovitve.

Vrednotenje pridobljenih informacij ali izdelane rešitve oziroma strategije.

Za razumevanje problemskih situacij so učenci morali prepoznati razliko med dejstvi in mnenji,

pri formulaciji rešitve so morali prepoznati odnose med spremenljivkami, pri izbiri strategije

17

za rešitev so morali upoštevati vzroke in posledice strategije in pri vrednotenju rešitve kritično

vrednotiti hipoteze in obravnavati alternativne rešitve. Med drugim v procesu spopadanja s

problemskimi nalogami v PISI učenci uporabljajo deduktivno, induktivno, analitično in

kombinatorično razmišljanje (OECD, 2014).

Opisane kompetence za uspešno reševanje problemskih nalog v PISA 2012 imajo torej močne

vzporednice s temeljnimi koncepti računalniškega razmišljanja:

Formuliranje hipotez in algoritmov

Načrtovanje, razčlenjevanje

Preverjanje in vrednotenje

V naslednjem podpoglavju bomo opisali osnove kognitivne teorije, s pomočjo katere učitelji

snujejo didaktične modele za razvoj abstraktnega razmišljanja ter posledično med učenci

razvijajo zmožnosti za reševanje kompleksnih problemov. Opisali bomo neo-Piagetovo teorijo

kognitivnega razvoja, ki je v zadnjih časih najbolj popularna teoretična osnova za uvodno

poučevanje programiranja.

3.3. Neo-Piagetova teorija kognitivnega razvoja in učenje abstraktnega

razmišljanja

Izkušen programer je tisti, ki si je zmožen zapomniti, razumeti in aplicirati programerske

koncepte, analizirati in vrednotiti delovanje programa in nenazadnje samostojno izdelati

program (Krathwohl, 2002). Za izkušenega programerja je značilna visoka stopnja

abstraktnega razmišljanja, katerega razvoj na tem področju in tranzicijo učencev iz nižjih do

višjih kognicijskih stopenj raziskuje Donna Teague, strokovnjakinja na področju poučevanja

računalništva.

Razlog, da imajo učenci težave z učenjem programiranja, ne leži v predpostavki, da za to niso

dovolj pametni, da preprosto niso rojeni s talentom ali da je programiranje prezahtevna

domena. Programiranje zahteva abstraktno razmišljanje, ki se razvija sekvenčno in

kumulativno. To zavedanje je pomembno pri poučevanju programiranja, pri čemer naj bi

18

učitelj prepoznal kognitivno stopnjo učenca in na podlagi te pripravljal dejavnosti za

napredovanje v višjo kognitivno stopnjo (Teague, 2015).

V številnih raziskavah so strokovnjaki raziskovali programerske kompetence učencev skozi

klasično Piagetovo teorijo kognitivnega razvoja, vendar nobena raziskava ne nudi jasnih

vzporednic med proučevanimi kompetencami in modelom, ki ga ta teorija narekuje.

Piaget je raziskoval kognitivni razvoj otrok in svoje ugotovitve strnil v konstruktivistično teorijo

z diskretno ločenimi razvojnimi stopnjami, skozi katere posameznik prehaja od rojstva do

odraslosti. Piaget trdi, da posameznikovo doživljanje sveta temelji na miselnih shemah,

temeljnih enotah inteligentnega vedenja in operacijah, ki so logični postopki ravnanja z odnosi

med shemami. Stopnje si sledijo v točno določenem vrstnem redu, teorija predvideva okvirno

starost posameznika, ko dosega stopnje, in vsaka stopnja je opredeljena s svojimi značilnostmi

(Helmore, 1969; Flavell, 1977; Shayer in Adey, 1981; Huber, 1988; Ojose, 2008):

Senzomotorična stopnja (0 do 2 leti)

Stopnja pred samozavedanjem

Koordinacija vida in giba

Začetek razvoja govora

Manipulacija z objekti s poskušanjem

Učenje z interakcijo

Začetek razumevanja koncepta objekta, začetek razlikovanja sebe in objekta

Povezovanje objektov in števil

Predoperativna stopnja (2 do 7 let)

Dominantno zaznavno doživljanje (npr. več vode je v ožjem kozarcu, ker je gladina

višje)

Centracija mišljenja (osredotočenost na en sam vidik situacije)

Stadijska centracija (osredotočenost na statično stanje dogodka, navadno sedanjosti)

Nepovratnost (mišljenje v eno smer, ki ga otrok ni sposoben preveriti v nasprotni

smeri)

Pomanjkanje konzervacije

Mešanje objektov in simbolov, ki objekte predstavljajo

19

Pomanjkanje miselnih predstav

Transduktivno razmišljanje

Egocentrizem

Težave pri razredni vključitvi (ne razumevanje odnosov med celimi razredi in

podrazredi)

Doživljanje situacije skozi en sam pojem (spremenljivko, dimenzijo) hkrati

Stopnja konkretno logičnega mišljenja (7 do 11 let)

Sklepanje

Decentralizacija

Razumevanje transformacije objektov

Obrnljivost mišljenja

Začetek logičnega mišljenja

Tvorjenje miselnih predstav

Multipla klasifikacija

Konzervacija

Seriacija

Razredna vključitev

Pomanjkanje kritične obravnave

Stopnja formalno logičnega mišljenja (11 let in naprej)

Prepoznavanje objektov in ne sestavnih delov objekta

Sposobnost opredelitve ključnih gradnikov situacije

Razmišljanje je zunaj okvirjev zaznavnega in ni osredotočeno na konkretno situacijo

Kritično in logično razmišljanje

Izdelava hipotez, organizacija zaključkov in induktivno ter deduktivno razmišljanje

Doživljanje situacije skozi več pojmov (spremenljivk, dimenzij) hkrati

Razvoj abstraktnega razmišljanja

Neo-Piagetova teorija je razširitev klasične Piagetove teorije. Knight in Sutton (2004)

povzemata naslednje koncepte, ki izhajajo iz klasične Piagetove teorije in se ohranjajo v neo-

Piagetovi:

20

Organizacija miselnih značilnosti, kot so stopnje in sheme

Konstruktivizem

Miselne strukture postajajo kompleksnejše z odraščanjem in izkušnjami

Kompleksnejše in bolj abstraktno razmišljanje je grajeno na prej osvojenem znanju in

razmišljanju na prejšnji stopnji

Razvojne stopnje si sledijo zaporedno, a niso pogojene s starostjo

Večina stroke, ki se ukvarja s klasično Piagetovo teorijo, meni, da razvoj posameznika skozi

razvojne stopnje poteka sinhrono na vseh področjih (Beard, 1969; Boden, 1979; Fischer in

Kenny, 1986).

Neo-Piagetova teorija temelji na predpostavki, da je miselni razvoj pogojen s konkretnim

predznanjem. V tem primeru je povsem mogoče, da je posameznik na različnih stopnjah

miselnega razvoja na različnih področjih, denimo oseba, ki je na stopnji formalno logičnega

razmišljanja na nekem področju (npr. igranje šaha), ni nujno na enaki stopnji na nekem

drugem področju (npr. glasba).

21

Primerjavo med klasično in Neo-Piagetovo teorijo Teaguejeva povzema v spodnji tabeli:

Klasična Piagetova teorija Neo-Piagetova teorija

Se ukvarja s splošnim miselnim razvojem otrok

Se ukvarja z miselnim razvojem posameznikov, ne glede na starost, pri učenju novih znanj

Otrok na določeni razvojni stopnji kaže enako stopnjo razmišljanja na vseh miselnih področjih

Ker so miselne zmožnosti posameznika pogojene z njegovim znanjem in izkušnjami na konkretnem področju, lahko na drugem področju izkazuje drugačno Piagetovo stopnjo miselnega razvoja, zato … <nadaljevanje v spodnji vrstici>

Poznamo konkretna preverjanja in preizkuse za določitev posameznikove stopnje miselnega razvoja.

… ni mogoče posplošiti preizkusov ali preverjanj, ki bi posameznika enovito umestila v neko stopnjo miselnega razvoja.

Predvideva umestitev v določeno razvojno stopnjo glede na starost, kljub empiričnim dokazom, ki kažejo na močna odstopanja zaradi kulturnih in okoljskih dejavnikov (Cole, 1996)

Umeščenost posameznika v določeno stopnjo in napredovanje v naslednjo ni pogojeno s starostjo, temveč konkretnim predznanjem na določenem področju.

Otrok je dlje časa na določeni stopnji miselnega razvoja, za tem naglo preide v naslednjo.

Prehajanje iz nižje v višjo stopnjo miselnega razvoja ni diskretno, temveč prekrivajoče se in valovito.

Tabela 1: Primerjava klasične Piagetove in neo-Piagetove teorije

Po neo-Piagetovi teoriji je čas, ki ga posameznik potrebuje, da s senzomotorične stopnje

preide na stopnjo formalno logičnega mišljenja, različen od posameznika do posameznika. Po

klasični teoriji je posameznik dlje časa na določeni stopnji miselnega razvoja, za tem pa naglo

preide v naslednjo. Ko enkrat preidejo v višjo stopnjo, se ne vračajo več na nižjo. Ta

predpostavka ima dve šibkosti, in sicer empirično – raziskave ugotavljajo, da posamezniki

hkrati kažejo značilnosti razmišljanja, ki jih povezujemo z različnimi miselno razvojnimi

stopnjami, ter filozofsko – kako in zakaj posameznik naenkrat preide v višjo stopnjo miselnega

razvoja. Nekateri neo-Piagetovski teoretiki pojasnjujejo prehode med stopnjami z modelom

prekrivajočih se valov. Ko oseba usvaja nova znanja novega področja, prevladujejo značilnosti

nižje miselno razvojne stopnje. S spreminjanjem in nadgrajevanjem miselnih shem se veča

prisotnost značilnosti višje miselno razvojne stopnje in niža prisotnost značilnosti nižje. S tem

na neki točki oseba hkrati kaže značilnosti dveh različnih miselno razvojnih stopenj (Siegler,

1996; Boom, 2004; Feldman, 2004; Teague, 2015). Ilustracija modela prekrivajočih se valov na

spodnji sliki (Slika 5):

22

Slika 5: Model prekrivajočih se valov (Siegler, 1996)

V svojih raziskavah Teague (2015) odkriva, da imajo učenci pri učenju programiranja težave že

na zelo zgodnji stopnji učenja, še preden se vpeljujejo netrivialni koncepti. Ugotavlja, da se

miselni razvoj učencev pri učenju programiranja razvija skladno s stopnjami miselnega razvoja

neo-Piagetove teorije, prav tako se jasno kažejo značilnosti posameznih stopenj kot na primer

nerazumevanje, nezmožnost sledenja in pisanja kode, ozka ali napačna osredotočenost,

nezmožnost abstraktnega razmišljanja. Zaključuje, da učenci, ki se učijo programiranja in se

uvrščajo v senzomotorično miselno razvojno stopnjo, napredujejo na predoperativno stopnjo,

nato na stopnjo konkretnega logičnega mišljenja in nazadnje na stopnjo formalnega logičnega

mišljenja po modelu prekrivajočih se valov. Programerji začetniki razvijajo razmišljanje v

različnih tempih, ključnega pomena pa je zadostna izpostavljenost problemskim situacijam, ki

razvijajo razmišljanje določene miselno razvojne stopnje, preden lahko napredujejo na

naslednjo.

Prav to dognanje je motiv za strukturo učnega gradiva, ki je predmet te diplomske naloge.

Naloge spletne aplikacije, ki smo jo izdelali, od uporabnika zahtevajo razmišljanje na stopnji

konkretno logičnega in formalno logičnega razmišljanja. Ključni del spletne aplikacije je

vadnica, ki predstavlja poligon, na katerem uporabnik utrjuje in gradi prostorske in abstraktne

miselne sheme z namenom polnega napredovanja na stopnjo formalno logičnega razmišljanja.

23

3.4. Učenje z animacijo in simulacijo

Wilensky vidi računalniško razmišljanje ter računalniško simulacijo kot močni in univerzalni

orodji pri učenju, neodvisni od znanstvenega področja. Prednost računalniške simulacije

informacij v primerjavi z običajnimi predstavitvami je ta, da računalniška simulacija lahko oriše

proces in obnašanje nekega pojava, dejstva predstavi na preverljiv način, lahko je skalabilna

in mogoče jo je predstaviti grafično (Wilensky, 2014).

Računalniške simulacije so interaktivna programska orodja, s pomočjo katerih posamezniki

raziskujejo neko novo situacijo in odnose med spremenljivkami, ki to situacijo tvorijo v

resničnem svetu. Učenci s pomočjo simuliranega okolja lahko preverjajo in preizkušajo svoje

hipoteze s spreminjanjem parametrov in opazovanjem učinka, ki ga sprememba povzroči

(Homer, Lee in Plass, 2006).

Zaradi lastnosti simulacije, da prikazuje informacije dinamično in vizualizira kompleksne

koncepte, med pedagogi služi kot pogosto izbrano sredstvo za poučevanje zahtevnejših in

kompleksnejših tem, za poučevanje reševanja problemskih situacij ter pojavov, ki so

človeškemu očesu nevidni (Reigeluth in Schwartz, 1989).

O vlogi animacije pri učenju pišeta tudi Mayer in Moreno, 2002, ki jo opisujeta kot močno učno

orodje. Njuno delo se ukvarja z vprašanjem, kako in kdaj uporabiti animacijo, da vzpodbudimo

proces učenja. Ugotavljata, da je animacijo oz. simulacijo treba oblikovati na način, ki spoštuje

postopek učenja. Svoja dognanja utemeljita s kognitivno teorijo učenja z večpredstavnostjo:

24

3.4.1. Kognitivna teorija učenja z večpredstavnostjo

Do učinkovitega učenja pride, kadar učenec aktivno oblikuje pridobljene informacije v

medsebojno odvisno miselno predstavo celote. Teorija sloni na treh predpostavkah, ki izhajajo

iz dosedanjih dognanj na področju raziskav kognicije:

Dvojni kanali procesiranja

Pri učenju informacije prejemamo preko dveh kanalov. Preko prvega doživljamo

slikovne informacije in preko drugega zvočne informacije (Baddeley, 1998; Paivio,

1986)

Končna kapaciteta, kognitivno breme

Pri učenju je vsak od kanalov zmožen hkrati obravnavati končno omejeno količino

informacij (Baddeley, 1998; Sweller, 1999)

Aktivno procesiranje

Učenje je najučinkovitejše, kadar je učenec aktivno vključen v miselni proces, na

primer z izbiro in prepoznavanjem relevantnih informacij, organizacijo teh v

povezano miselno predstavitev celote in vključevanjem naučenega v že obstoječe

znanje (Mayer v Wittrock, 1974).

Spodnja slika (Slika 6) povzema proces učenja po kognitivni teoriji učenja z večpredstavnostjo.

Govorjeno navodilo posameznik sliši, iz navodila izbere relevantne besede za nadaljnjo

obdelavo v verbalnem sistemu. Besede organizira po načelu vzročno-posledičnosti in nazadnje

to združi z informacijami vizualnega sistema ter z že obstoječimi informacijami. Animacijo

posameznik zazna z vidom, zgodi se postopek izbire relevantnih slikovnih informacij za

nadaljnjo obdelavo v vizualnem sistemu. Slikovne informacije spet organizira po načelu

vzročno-posledičnosti in to združi z informacijami verbalnega sistema ter z že obstoječimi

informacijami. Implikacija te teorije je, da je večpredstavnostno gradivo najbolj učinkovito, če

so vsebinsko povezane enote predstavljene preko vizualnega in verbalnega medija.

25

Slika 6: Shema kognitivne teorije učenja z večpredstavnostjo (Mayer E. R., 2002)

Rezultate raziskav, ki sta jih izvajala Mayer in Moreno pri proučevanju, kdaj in v kakšnih

pogojih večpredstavna gradiva vzpodbujajo učenje, strneta v sedem načel, ki so skladna s

kognitivno teorijo učenja z večpredstavnostjo (Mayer in Moreno, 2002):

1. Načelo večpredstavnosti

Učenje je učinkovitejše, če so informacije podane z animacijo in besedilom, kakor če

so podane samo z besedilom. Načelo sloni na ugotovitvi, da učenci lažje gradijo miselno

predstavo o nekem pojmu, če je ta predstavljen preko več medijev. Da bi učenec zgradil

celostno miselno predstavo pojma, mora sam graditi predstavo segmenta pojma, ki ga

ne predstavimo z večpredstavnostjo. Načelo ne drži brezpogojno za vsako animacijo,

kar je začrtalo naslednja načela.

2. Načelo prostorske usklajenosti

Da bi učenje s pomočjo animacije bilo učinkovito, mora animacija oz. simulacija biti

prostorsko umeščena v bližini opisa pojma, ki ga animira. V nasprotnem primeru se po

nepotrebnem izgublja kognitivna kapaciteta, ko učenec išče animacijo ali del te, ki

simulira pojem.

3. Načelo časovne usklajenosti

Učenje je učinkovitejše, če so verbalne in vizualne informacije podane hkrati. Učenec

lažje gradi miselno predstavo o pojmu, če sta dva tipa informacij hkrati v delovnem

spominu.

26

4. Načelo koherence

Učenje je učinkovitejše ob odsotnosti zunanjih oziroma s pojmom nepovezanih

verbalnih, vizualnih ali avditornih dejavnikov (npr. glasba). Načelo sloni na ugotovitvi,

da učenci v primeru prisotnosti prej navedenih dejavnikov del pozornosti in kognitivne

kapacitete preusmerijo v te dejavnike, zaradi česar grajenje miselne predstave pojma

poteka bistveno počasneje.

5. Načelo modalnosti

Učenje s pomočjo animacije je učinkovitejše, kadar so informacije podane v

kombinaciji animacija – avditorna informacija (učenec sliši informacijo), kakor v

primeru animacija – vizualna informacija (učenec bere informacijo). Načelo sloni na

ugotovitvi, da lahko pride do preobremenitve vizualnega sistema obdelave informacij,

kar povzroči pomanjkanje miselne kapacitete za povezovanje besed in slik, ki pojem

opisujejo.

6. Načelo redundance

Učenje je učinkovitejše, kadar so informacije podane v kombinaciji animacija –

avditorna informacija, kakor v primeru animacija – avditorna informacija – vizualna

(pisana) informacija. Teoretsko ozadje je enako kot pri načelu modalnosti.

7. Načelo poosebljenosti

Učenje je učinkovitejše, kadar je jezikovni slog, s katerim se predaja verbalna

informacija, neformalen oz. oseben (uporaba zaimkov »jaz« in »ti«). Načelo sloni na

ugotovitvi, da je učenčev fokus močnejši, kadar se čuti osebno vključenega v proces.

Načela smo upoštevali pri izdelavi spletne aplikacije Programsko orodje za simulacijo

Kardanske rešetke, ki hkrati predstavlja model za simulacijo, s katerim želimo vplivati na razvoj

abstraktnega razmišljanja med učenci.

27

4. TEHNIČNA REALIZACIJA

V tem poglavju bomo obravnavali tehnologijo, s katero je bila realizirana spletna aplikacija

Programsko orodje za simulacijo Kardanskega rešeta. Povzeli bomo lastnosti HTML5, na

katerem temelji naša aplikacija, ter opisali pojme, tehnologije, knjižnice in okolja, s pomočjo

katerih je bila ta realizirana, to so CSS3, PHP, JavaScript, JQuery, Ajax, MySql, Bootstrap in

Heroku.

4.1. HTML5

HTML5 je trenutna in peta verzija tega standarda. HTML (Hyper Text Markup Language,

slovensko jezik za označevanje nadbesedila) je označevalni jezik za izdelavo spletnih strani.

Predstavlja osnovo spletnega dokumenta. S HTML določamo zgradbo in semantični pomen

delov dokumenta. Programski razčlenjevalnik v brskalniku (angl. »Parser«) dokument razčleni

in brskalnik dokument prikaže. HTML dokument se lahko izdela v poljubnem urejevalniku

besedil, saj je zapisan v obliki elementov HTML, ki so sestavljeni iz značk v kotnih oklepajih

(npr. <p>) znotraj vsebine spletne strani. Značke HTML so običajno zapisane v parih, npr. <p>

in </p>. Prva značka se imenuje tudi začetna značka, druga pa končna značka. Znotraj para

značk lahko oblikovalec spletne strani vpiše poljubno besedilo in tudi druge značke –

gnezdenje značk (HTML5 Reference, https://dev.w3.org/html5/html-author/, 2016).

https://dev.w3.org/html5/html-author/

28

Preprost primer sintakse HTML5 dokumenta:

<!DOCTYPE html> <html lang="en"> <head> <title>Kardanska rešetka</title> </head> <body> <p>"Pozdravljen svet!"</p> </body> </html>

Peta verzija standarda je izšla oktobra 2014 in predstavlja večji mejnik v razvoju HTML-ja, saj

za razliko od prejšnjih inačic vključuje natančne modele procesov, ki omogočajo povezovanje

različnih operacij; razširja ter z optimizacijo izboljšuje pretekle operacije s HTML dokumenti in

prinaša programske vmesnike (angl. »API«), ki omogočajo razvoj kompleksnih spletnih

aplikacij. Prav zato je tudi odlično sredstvo za razvijanje spletnih aplikacij, ki jih podpirajo

različne platforme in mobilne naprave. Prinaša nabor novih elementov, ki lahko v številnih

primerih nadomestijo funkcionalnost JavaScripta, pa tudi funkcije za delo z multimedijskimi

vsebinami, shranjevanje podatkov brez povezave, povleci in spusti ter druge.

Standard prinaša tudi določene sintaktične spremembe, katerih posledica je bolj strnjena

koda. V spodnjem primeru je navedena značka, ki brskalniku sporoči, da obravnava HTML

dokument:

<!DOCTYPE html>

, ki se je v prejšnjih verzijah HTML-ja zapisal v precej daljši obliki:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Standard je univerzalen in nudi podporo za vse jezike (Gornik, 2012).

29

Uporaba v aplikaciji: Aplikacija, ki smo jo izdelali, zajema novosti sintakse petega standarda

HTML. Ogrodje vsake strani aplikacije je samostojen HTML dokument. Aplikacija vsebinsko in

funkcionalno ne upošteva novosti, ki jih prinaša HTML5.

4.2. CSS3

CSS (Cascading Style Sheets, slovensko kaskadne stilske podloge) je nabor kaskadnih stilov, ki

ga uporabljamo pri oblikovnem snovanju dokumentov, zapisanih v označevalnem jeziku

(največkrat HMTL in XHTML). S CSS definiramo stil označevalnih elementov v smislu pravil,

kako naj se ti prikažejo na strani. Določamo lahko barve, velikosti, odmike, poravnave, obrobe,

pozicije in vrsto drugih atributov, prav tako pa lahko nadziramo aktivnosti, ki jih uporabnik nad

elementi strani izvaja (npr. prekritje povezave z miško).

Bistvo uporabe CSS je, poleg definiranja pravil, predvsem ločitev strukture strani – ki jo podaja

označevalni jezik skupaj z vsebino – od njenega videza. S tem omogočimo lažje urejanje in

dodajanje stilov ter poskrbimo za večjo preglednost dokumentov, ki temeljijo na HTML

sintaksi. Prav tako zmanjšamo ponavljanja kode, saj množici strani omogočimo uporabo istih

podlog, kar lahko bistveno zmanjša njihovo velikost.

Pravila za označevanje in predstavitev predmeta je mogoče zapisati v različne vire, zato CSS

prepoznava pravila, kateri izmed stilov naj se predpiše. Omogočeno je tudi zlivanje oz.

prepisovanje pravil iz več virov, kar imenujemo kaskadiranje. Vrednosti pravil z višjo prioriteto

bodo prepisala tiste z nižjo, kar je predstavljeno v spodnjem seznamu prioritet, razvrščenem

od najvišje do najnižje.

30

Avtorjev stil – pridobljen s spletnega mesta, ki smo ga obiskali:

Vrstični stil je definiran v notranjosti HTML elementa pod atributom style:

<p style="color: red;">vsebina odstavka</p>

Vgrajen stil je definiran znotraj HTML dokumenta med značkami style:

<style type="text/css"> p { color: red; } </style>

Zunanji stil je definiran znotraj CSS dokumenta (končnica .css) in je vključen v

HTML stran

vsebina dokumenta stil.css

p{color: red;}

vsebina dokumenta stran.html

<head> <link rel="stylesheet" href="http://primer-stila.si/stil.css" type="text/css" /> </head>

Uporabnikov stil – uporabnik lokalno definira stil in prepiše brskalnikovega

Brskalnikov stil – brskalniki imajo privzet stil za vsakega izmed HTML elementov (CSS,

Wikipedija, prosta enciklopedija, 2015)

CSS3 med drugimi spremembami prinaša tudi 2D in 3D transformacije elementov.

31

Uporaba v aplikaciji:

Aplikacija, ki smo jo izdelali, močno sloni na CSS3 in njegovi funkcionalnosti.

Oblikovanje spletne strani (barva ozadja, oblika pisave, oblika slik, barva in

oblika posameznih elementov)

Postavitev elementov na spletni strani

Transformacije in animacije elementov na spletni strani (drsenje in rotacija

rešet)

Posebni učinki (povečanje elementa, kadar smo z miško nad njim,

spreminjanje barve na klik)

4.3. JAVASCRIPT

JavaScript je objektni skriptni programski jezik. Skupaj s HTML in CSS velja za osnovni gradnik

dinamičnih spletnih strani. Podprt je v večini novodobnih spletnih brskalnikov. Največkrat se

uporablja za implementacijo funkcionalnosti na odjemalčevi strani HTML dokumenta za

interakcijo z DOM elementi. Med najbolj značilne funkcionalnosti, ki jih lahko dosežemo z

JavaScriptom, spadajo animacija elementov na strani (prikaz, skrivanje, spreminjanje velikosti,

premikanje itn.), uporabniška interakcija (igre, uporabnikov nadzor elementov na strani),

validacija vnesenih podatkov, preden so ti poslani strežniku.

Jezik se uporablja tudi zunaj spletnega razvoja v dokumentih PDF in namiznih dodatkih.

Pri rabi jezika v spletni strani se koda izvaja lokalno v uporabnikovem brskalniku, zato se

brskalnik na uporabnikove vnose lahko odziva relativno hitro, kar dela JavaScript aplikacije

odzivne.

Skript v spletni dokument vključimo z oznako <script>. S to oznako brskalniku sporočimo,

da želimo vdelano kodo izvajati in ne prikazati. Z dodatnim atributom <type> povemo, v

katerem jeziku je vdelana koda zapisana (JavaScript, Wikipedija, prosta enciklopedija, 2016).

32

Primer vdelave v spletni dokument:

<!DOCTYPE html> <html lang = "en" > < head > < meta charset="utf-8"> <title>Primer</title> </head> <body> <h1 id = "header" > JavaScript </ h1 > < script type="text/javascript"> //Vdelana JavaScript koda </script> </body> </html>

Uporaba v aplikaciji: Z JavaScriptom so realizirane interaktivne lastnosti aplikacije na strani

odjemalca.

4.3.1. JQUERY

jQuery je najpogosteje uporabljana JavaScript knjižnica, ustvarjena z namenom, da poenostavi

skriptiranje HTML dokumentov na odjemalčevi strani. Je brezplačen in licenciran z MIT licenco.

Oblika jQuery sintakse poenostavi navigacijo skozi spletni dokument in dostopanje do DOM

elementov dokumenta, omogoča ustvarjanje animacij in poenostavi rokovanje z dogodki.

Z jQuery knjižnico enostavno iščemo, izbiramo in manipuliramo DOM elemente. Na primer, z

jQuery lahko poiščemo element v dokumentu glede na določene atribute elementa (recimo

vse značke h1) in elementu prirejamo različne lastnosti, kot so stilna prezentacija, vsebina,

položaj.

JQuery omogoča omenjene manipulacije v kontekstu dogodkov na spletni strani (klik na

gumb).

Prednosti uporabe jQuery:

33

Razdruževanje JavaScripta in HTML: jQuery omogoča preprosto sintakso za dodajanje

odzivov na dogodke na DOM elementih z JavaScriptom, kar je preprostejša

alternativa za uporabo HTML dogodkov, ki nato prožijo določene JavaScript funkcije.

Na ta način usmerja razvijalca, da skripte razvije ločeno od HTML dokumenta.

Jedrnatost in jasnost.

Združljivost z brskalniki: določene komponente JavaScripta ne delujejo ali ne delujejo

enako v vseh brskalnikih – jQuery to pomanjkljivost odpravlja.

Razširljivost: preprosto dodajanje dogodkov, elementov in metod, ki jih lahko

ponovno uporabimo kot vtičnik. (jQuery API, https://api.jquery.com/, 2016)

Knjižnico v svoj dokument vključimo z naslednjima zapisoma:

<script src = "jquery.js" ></ script > <script src = "https://code.jquery.com/jquery-latest.min.js" ></ script >

V primeru prvega zapisa moramo knjižnico shraniti lokalno, z drugim zapisom pa do knjižnice

dostopamo neposredno preko spleta (jQuery, https://api.jquery.com/, 2016).

Uporaba v aplikaciji: S pomočjo jQueryja v JavaScript logiki iščemo in manipuliramo z DOM

objekti.

4.3.2. AJAX

Ajax (asinhroni JavaScript in XML) je skupina medsebojno povezanih spletnih razvojnih tehnik,

uporabljenih za ustvarjanje interaktivnih spletnih aplikacij. Z Ajaxom si lahko spletne aplikacije

izmenjujejo podatke s strežnikom asinhrono v ozadju, brez potrebe po ponovnem nalaganju

strani. Ajax vključuje naslednje tehnologije: HTML, CSS, DOM, XML, XMLHttpRequest ter

JavaScript, ki povezuje vse te tehnologije. Ajax aplikacije dajejo vtis, kot da v celoti tečejo na

računalniku uporabnika. Običajna spletna aplikacija namreč za vsako spremembo na strani

pošlje zahtevo HTTP, strežnik pa kot odgovor pošlje celotno stran. Brskalnik mora zato osvežiti

celotno stran, s tem pa pride do motečega obnavljanja strani. Spletna aplikacija je zato

počasna in čisto nič podobna namiznim.

https://api.jquery.com/

34

Aplikacije Ajax so prirejene za generiranje poizvedb za strežnik, tako da pošljejo samo tiste

podatke, ki jih dejansko potrebujejo. Klic se opravi kot asinhrona komunikacija, torej lahko,

medtem ko aplikacija čaka podatke iz strežnika, uporabnik nemoteno uporablja spletno stran.

Ko so podatki pripravljeni, določena funkcija v JavaScriptu prikaže podatke na strani, brez

potrebe po ponovnem nalaganju.

Posledica tega je uporabniški vmesnik, ki se veliko hitreje odziva na vnose uporabnika. Razlog

za vpeljavo te tehnologije je tudi dejstvo, da se med odjemalcem (brskalnikom) in strežnikom

prenese veliko manj podatkov ter da poteka nalaganje podatkov asinhrono. Poleg tega se

zmanjša obremenitev spletnega strežnika, ker se veliko obdelave lahko naredi na strani

odjemalca.

S tem je mogoče tekoče in hitrejše spremljanje ter spreminjanje vsebine na spletni strani.

Podatki se prenašajo s pomočjo objektov XMLHttpRequest ali s pomočjo Remote Scriptinga

(Ajax http://api.jquery.com/jquery.ajax/, 2016).

Uporaba v aplikaciji: Tehnologijo Ajax uporabljamo za asinhrono pošiljanje uporabnikovih

odgovorov strežniku.

4.4. PHP

PHP (PHP: Hypertext Preprocessor) je odprtokodni objektni skriptni programski jezik za spletni

razvoj, ki se pogosto izvaja na strežniški strani. Ustvaril ga je Rasmus Lerdorf leta 1994. Za

razvoj skrbi PHP Group, zaščiten je s PHP licenco, ki prepoveduje uporabo besede PHP v

imenovanju kode, izdelane s PHP, kar je razlog, da jezik ni licenciran z licenco GPL.

Gre za vsestranski programski jezik, ki je najpogosteje uporabljen za implementacijo logike in

dinamičnega ustvarjanja strani na strežniški strani, kjer se PHP izvaja.

Funkcija PHP-ja v spletnem razvoju je po navadi posredniška, saj prestreza podatke iz datotek

s PHP ukazi ali tekstom, nad podatki izvede operacije in jih vrne kot rezultat, največkrat v obliki

HTML.

35

PHP je mogoče uporabljati tudi kot skriptni jezik v znakovnem uporabniškem vmesniku in v

grafičnih vmesnikih aplikacij na odjemalčevi strani. Namestimo ga lahko na širok nabor

spletnih strežnikov, operacijskih sistemov in platform ter ga uporabimo za komunikacijo s

podatkovno baznimi strežniškimi sistemi, kot so PostreSQL, MySQL, MS SQL Server in SQLite.

Nameščen je lahko kot samostojna komponenta ali pa kot del predpripravljenih razvojnih

arhitektur, kot so LAMP, WAMP, MAMP in drugi (PHP, https://secure.php.net/manual/en/ija,

2016).

Primer uporabe PHP v HTML dokumentu:

<!DOCTYPE html> <html> <head> <title>PHP Test</title> </head> <body> <?php echo '<p>Pozdravljen svet!</p>'; ?> </body> </html>

Uporaba v aplikaciji: S PHP-jem je realizirana celotna logika aplikacije na strežniški strani ter

dinamično generiranje strani aplikacije.

4.5. MYSQL

MySQL je sistem za upravljanje s podatkovnimi bazami. Je odprtokodna implementacija

relacijske podatkovne baze, ki za delo s podatki uporablja jezik SQL. Julija 2013 je bil drugi

najpogosteje uporabljen sistem za upravljanje s podatkovnimi bazami. Izvorna koda je

licencirana z GNU GPL licenco in je v lasti Oracle Corporation.

MySQL je priljubljena izbira za spletne aplikacije. Nameščen je lahko samostojno ali kot del

predpripravljenih razvojnih arhitektur, kot so LAMP in ostale »AMP« arhitekture. Nekatere

izmed najbolj prepoznavnih spletnih aplikacij, ki uporabljajo MySQL, so TYPO3, MODx, Joomla,

WordPress, phpBB, MyBB, Drupal, Google, Facebook, Twitter, Flick, YouTube.

36

Do baze lahko dostopamo in z njo operiramo preko znakovnega uporabniškega vmesnika, a

pogostejša praksa je uporaba grafičnih vmesnikov, saj so, sploh za začetnega uporabnika, bolj

intuitivni in obvladljivi. Med najbolj priljubljene grafične vmesnike za delo z MySQL sodijo My

SQL Workbech, Adminer, Database Workbench, DBEdit, HeidiSQL, LibreOffice Base, Navicat,

OpenOffice.org Base, phpMyAdmin idr. (MySQL https://dev.mysql.com/doc/, 2016).

Uporaba v aplikaciji: Aplikacija uporablja MySQL za shranjevanje podatkov uporabnikov

aplikacije.

4.6. BOOTSTRAP

Bootstrap je brezplačno odprtokodno spletno ogrodje za oblikovanje spletnih strani in spletnih

aplikacij. Prinaša oblikovne predloge za tipografijo, obrazce, gumbe, navigacijske in ostale

elemente, ki slonijo na HTML in CSS oblikovanju.

Bootstrap, ki se je najprej imenoval Twitter Blueprint, sta razvila Mark Otto in Jacob Thornton

pri Twitterju. V svojih začetkih je šlo za oblikovno ogrodje, namenjeno interni rabi v Twitterju

za oblikovno enotnost. Interno ogrodje je raslo ter se razvijalo in avgusta 2011 bilo objavljeno

za javno uporabo.

Ogrodje je združljivo z novejšimi verzijami brskalnikov Google Chrome, Firefox, Internet

Explorer, Opera in Safari. Druga verzija ogrodja podpira odzivno oblikovanje – oblikovanje, ki

se dinamično prilagaja velikosti zaslona, ki aplikacijo ali stran prikazuje (klasično namizje,

tablice, telefoni).

Razvijalec lahko prikaže in funkcionalnost prilagaja svojim potrebam tako, da spreminja oz.

nadgrajuje izvorne Less in CSS podloge.

Ogrodje vsebuje tudi JavaScript vtičnike za spletne elemente: načinovna okna, spustni meniji,

zavihki, pojavna okna, gumbi in drugi (Bootstrap, http://getbootstrap.com/getting-started/,

2016).

Uporaba v aplikaciji: Celotna grafična podoba aplikacije in njenih gradnikov sloni na

Bootstrap.

37

4.7. HEROKU

Heroku je storitev v oblaku, ki uporabnikom na preprost način nudi infrastrukturo in okolje za

spletne aplikacije. Začetki platforme segajo v leto 2007, leta 2010 pa jo je kupil Salesforce.com.

S preprostimi koraki razvijalcem nudi okolje za razvoj spletnih aplikacij, platforma sama skrbi

za namestitev in vzdrževanje infrastrukture strežnika, baze, operacij in skaliranja.

Trenutno je podprta z naslednjimi programskimi jeziki: Node.js, Ruby, Java, PHP, Python, Go,

Scala in Clojure.

Omogoča uporabo baz MySQL, PostgreSQL in SQLite.

Uporaba platforme Heroku je v osnovi brezplačna, z različnimi paketi pa je mogoče zakupiti

zmogljivejše okolje (Heroku, https://www.heroku.com/, 2016).

Uporaba v aplikaciji: Spletna aplikacija Programsko orodje za simulacijo Kardanskega rešeta

je bilo razvita lokalno in v zadnjem stadiju prenesena na platformo Heroku, kjer je dostopna

na povezavi:

https://kardanskaresetka.herokuapp.com

https://www.heroku.com/

38

5. PROGRAMSKO ORODJE ZA SIMULACIJO KARDANSKE

REŠETKE

V tem poglavju bomo natančneje obravnavali izdelano spletno aplikacijo Programsko orodje

za simulacijo Kardanske rešetke s konkretnimi primeri iz same aplikacije in primeri kode

implementiranih funkcionalnosti.

Realizacijo delov aplikacije bomo opisali glede na njeno strukturo.

5.1. Začetno in končno preverjanje

Po nagovorni strani aplikacije uporabnik vstopi na stran začetnega preverjanja. V trenutku, ko

se stran naloži, se v ozadju sproži JS funkcija, ki ustvari enolično identifikacijsko številko za

uporabnika in jo shrani v lokalno shrambo brskalnika. Identifikacijska številka bo skozi celotno

aplikacijo referenca, ki bo uporabljena, da bodo podatki v bazi aplikacije shranjeni pravilno oz.

bodo pripadali pravilnemu uporabniku.

Izsek kode, ki generira identifikacijsko številko uporabnika in jo shrani v lokalno shrambo

brskalnika:

39

// funkcija guid(), ki ustvari niz znakov // (primer: 'a13d5641-9663-f8cd-14c2-921baef3d4c0') // pridobljeno s http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript function guid() { function s4() { return Math.floor((1 + Math.random()) * 0x10000) .toString(16) .substring(1); } return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } // ustvarjeno identifikacijski niz shranimo v spremenljivko uporabnikovID var uporabnikovID = guid(); // spremenljivko shranimo v lokalno shrambo brskalnika localStorage.setItem("uporabnikovID", uporabnikovID);

Hkrati aplikacija zabeleži čas, ko se je stran naložila. Informacijo o času in uporabnikovem

identifikacijskem nizu pošlje na strežnik, kjer se podatka zapišeta v podatkovno bazo. Dogodek

se ponovi, ko uporabnik aplikacije vstopi na stran končnega preverjanja.

Beleženje trenutnega časa, pridobitev uporabnikovega identifikacijskega niza in pošiljanje

podatkov strežniku (JS, odjemalec):

//pridobivanje trenutnega časa var zacetni_cas = Math.floor(Date.now() / 1000).toString(); // pridobivanje uporabnikovega ID iz lokalne shrambe brskalnika var uporabnikov_ID = localStorage.getItem("uporabnikovID"); //Ustvarjanje Http klica, pošiljanje podatkov skriptu shrani_sejo.php na strežniku var http = new XMLHttpRequest(); http.open("POST", "shrani_sejo.php", true); http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.send("uporabnikov_ID=" + uporabnikov_ID + "&zacetni_cas=" + zacetni_cas);

40

Na strežniški strani se izvede koda skripta »shrani_sejo.php«:

<?php //ustvarimo povezavo z bazo definirano v datoteki 'connect.php' include 'connect.php'; //prestrežemo podatke, ki jih je poslal odjemalec if (isset($_POST['uporabnikov_ID'])) { uporabnikov_ID = $_POST['uporabnikov_ID']; } if (isset($_POST['zacetni_cas'])) { zacetni_cas = $_POST['zacetni_cas']; } //podatke shranimo v podatkovno bazo $stmt = $db ->prepare("INSERT INTO `results` (sessionID) VALUES (?)"); $stmt ->bind_param('s', uporabnikov_ID); $stmt->execute(); $stmt->close(); $sql = "UPDATE results SET field0 = ? WHERE sessionID = ?"; $stmt = $db->prepare($sql); $stmt ->bind_param('ss', zacetni_cas, uporabnikov_ID); $stmt->execute(); $stmt->close(); ?>

Vsebinsko je stran sestavljena iz treh nalog, ki od uporabnika terjajo odgovor.

Prva in druga naloga temeljita na prikazani sliki (Slika 7):

Slika 7: Zaslonska slika aplikacije med uporabo

41

Na levi strani je vidna matrika črk in na desni rešeto z izluknjanimi oziroma razkritimi celicami.

Uporabnik mora v prvo besedilno polje zapisati geslo, ki bi ga videl, če bi matriko črk prekril z

rešetom, zasukanim za 90° v smeri urinega kazalca, in v drugo besedilno polje geslo, ki bi se

prikazalo, če bi rešeto zavrtel za 90° v nasprotni smeri urinega kazalca.

Matrika črk in rešeto sta definirana v HTML obliki. Vsaka celica je element zase, ki mu je

mogoče pripisati oblikovne ali druge lastnosti.

Izsek kode prve vrstice matrike črk iz slike 7:

 <div class="code c-1-1"><p>A</p></div> <div class="code c-1-2" style=" border-style solid; border-width 5px; border-color #1abc9c;"><p>C</p></div> <div class="code c-1-3"><p>T</p></div> <div class="code c-1-4"><p>I</p></div> <div class="code c-1-5"><p>P</p></div> <div class="code c-1-6"><p>S</p></div>

V tretji nalogi preverjanja mora uporabnik med štirimi rešeti izbrati tista, ki so veljavna. S

klikom in izbiro nekega rešeta, se to obarva modro (Slika 8).

Slika 8: Z izbiro možnosti med reševanjem naloge se rešetka obarva modro

Skript se odziva na dejanja uporabnika. Kadar uporabnik s kurzorjem miške potuje čez katero

od rešet, se to nekoliko poveča. Kadar na rešeto klikne, ga izbere. Če klikne isto rešeto še

enkrat, ga umakne iz svoje izbire, rešeto pa se znova obarva sivo. Ob uporabnikovi izbiri

nekega rešeta skript z jQuery sintakso razbere, za katero rešeto gre in podatek shrani v

spremenljivko, ki je kasneje poslana strežniku. Za opisano delovanje torej uporabnikovo

42

izbiranje rešet in manipulacijo spremenljivke, v katero shranjujemo uporabnikov izbor, skrbi

spodnji del kode:

//prazna tabela, v katero bomo shranjevali uporabnikovo izbiro selected_grilles = []; //dogodek, kadar uporabnik klike na katero od rešet $('.grille3_wrapper').click(function () { $(this).children('.grille3').each(function (i, obj) { var grille_color = $(this).css("background-color"); // označevanje oz. odznačevanje izbranega rešeta switch (grille_color) { case "rgb(128, 128, 128)": $(this).css({ 'background-color': 'rgb(0, 115, 153)' }); break; case "rgb(0, 115, 153)": $(this).css('background-color', 'rgb(128, 128, 128)'); break; } }); var retrieved_text = $(this).find(".box_text").text() // shranjevanje podatkov izbire, ki bodo poslani strežniku if (selected_grilles.indexOf(retrieved_text) >= 0) { selected_grilles.splice(selected_grilles.indexOf(retrieved_text), 1); } else { selected_grilles.push(retrieved_text); } });

Ko uporabnik v besedilno polje zapiše svoj odgovor ali ga izbere, svoj odgovor oz. izbiro potrdi

s klikom na gumb »POTRDI«. To dejanje sproži dogodek, ki shrani čas, ko je bil gumb pritisnjen,

spremeni barvo in besedilo gumba ter podatke pošlje na strežnik:

43

var sent2 = false; $(document).ready(function () { //dogodek ob pritisku na gumb $(document).on('submit', '#shrani_drugo', function () { //branje podatkov, ki jih je uporabnik vnesel var form = $("#shrani_drugo"); var druga_naloga = $("[name='druga_naloga']", form).val(); var user_id = localStorage.getItem("userID"); //čas, ko je gumb bil pritisnjen var currentTime = Math.floor(Date.now() / 1000).toString(); //pošiljanje podatkov na strežnik $.ajax({ type: 'POST', url: 'store_to_db2.php', data: { druga_naloga: druga_naloga, userID: user_id, currentTime: currentTime }, success: function (data) { $("#reg-form").fadeOut(500).hide(function () { $(".result").fadeIn(500).show(function () { $(".result").html(data); }); }); } }); //spreminjanje lastnosti gumba po kliku nanj $("#potrdi2").html('POSLANO'); $("#potrdi2").css({ 'background-color': 'rgb(26, 188, 156)', 'border-color': 'rgb(12, 90, 74)' }); sent2 = true; //šele, ko uporabnik potrdi vse odgovore na strani, //se prikaže na dnu strani gumb, s katerim nadaljuje //na naslednjo stran if (sent1 && sent2 && sent3) { $("#first_pager").css({ 'visibility': 'visible' }); } return false; }); });

44

5.2. Vadnica

V delu vadnice se uporabnikovi odgovori ne pošiljajo na strežnik. Za razliko od začetnega in

končnega preverjanja so elementi (matrike črk in rešeta) interaktivni in animirani.

Pri prvi nalogi uporabnik spozna Kardansko rešeto in metodo steganografije.

Slika 9: Razkrita Kardanska rešetka v aplikaciji

S klikom na gumb se rešeto pomakne navzgor in prekrije zapisano besedilo. Skozi luknje rešeta

se prikaže skrito sporočilo (Slika 10):

Slika 10: Prekrita Kardanska rešetka v aplikaciji

45

Rešeto in besedilo sta slikovna elementa, vključena v HTML dokument, animacijo pa

dosežemo z JavaScript funkcijo:

HTML:

 <img src="cardan_text2.png" class="img-responsive center-block" alt="cardan text">  <img src="transparent_grille.png" class="img-responsive center-block" alt="original cardan grille">  <button class="btn btn-primary" id="together4">KLIK</button>

Iz zgornje kode je razvidno, da smo atributu »id«, ki ga ima gumb, pripisali vrednost

»together4«. To lastnost bomo uporabili v skriptu:

JS:

//dogodek, ki se sproži ob kliku na element // z atributom id=together4 $("#together4").click(function () { switch (together4) { //če elementa nista združena, ju združimo case 0: //s spreminjanjem CSS lastnosti rešeta, ga s funkcijo 'translate' //pomaknemo navzgor document.getElementById('original_grille').style[prop] = "translate(0,220px)"; together4 = 1; break; //če sta elementa združena, ju ločimo case 1: //s spreminjanjem CSS lastnosti rešeta, ga s funkcijo 'translate' //pomaknemo v prvotno pozicijo document.getElementById('original_grille').style[prop] = "translate(0, 0px)"; together4 = 0; break; }; });

V drugi in tretji nalogi uporabnik vidi v prvem primeru matriko črk in rešeto velikosti 4 x 4, v

drugem primeru pa 6 x 6. Podobno kot pri prvi nalogi, s klikom na gumb združi ali razdruži par

matrike in rešeta. S pritiskom na levo ali desno puščico na tipkovnici lahko uporabnik poljubno

vrti rešeto in s tem pozicijo za pozicijo razkriva šifrirano besedilo vrtečega se rešeta. Besedilo,

46

ki se razkrije, uporabnik vnese v besedilno polje in svoj odgovor potrdi s pritiskom na gumb

»POTRDI«. Aplikacija na mestu preveri pravilnost odgovora in nudi uporabniku povratno

informacijo.

Rotacija rešeta iz prve v drugo pozicijo, ki jo uporabnik doseže s pritiskom na desno puščico

na tipkovnici:

Slika 11: Rešetka v prvi poziciji

Slika 12: Rotacija rešetke za 90 stopinj

Slika 13: Rešetka v drugi poziciji

47

Rotacijo rešeta dosežemo s skriptom:

JS:

var xAngle = 0 //dogodek ob pritisku gumba na tipkovnici $('body').keydown(function (evt) { switch (evt.keyCode) { //če je pritisnjena leva puščica, //spremenljivki xAngle odštejemo 90 case 37: xAngle -= 90; break; //če je pritisnjena desna puščica, //spremenljivki xAngle prištejemo 90 case 39: xAngle += 90; break; }; //element z atributom class=cube3 (rešeto) zavrtimo za vrednost spremenljivke //xAngle document.getElementById('cube3').style[prop] = "rotateZ(" + xAngle + "deg)"; });

V zadnjem sklopu vadnice uporabnik izdela svoje vrteče se rešeto velikosti 6 x 6 in poljubno

besedilo s pomočjo aplikacije vnese v matriko črk tako, da ga je mogoče razbrati le z rešetom,

ki ga je izdelal.

V prvem koraku se uporabniku prikaže neizluknjano rešeto (sive barve). Uporabnik s pomočjo

aplikacije izdela rešeto, ki je veljavno. To pomeni, da se nobena luknja rešeta v vseh štirih

pozicijah rešeta ne sme prekriti z neko drugo luknjo.

Ko uporabnik klikne na celico rešeta, ga izluknja. Izbrana celica se obarva temno zeleno, s

svetlo zeleno barvo pa se obarvajo pozicije izluknjane celice v ostalih treh pozicijah rešeta, ki

jih uporabnik, da bi rešeto bilo veljavno, ne more izluknjati. Svojo izbiro uporabnik razveljavi s

ponovnim klikom na izluknjano celico v prvi poziciji, torej celico temno zelene barve.

48

Primer uporabnikovega izdelanega rešeta (Slika 14):

Slika 14: Uporabnikovo rešeto

Vsaka od 36 celic rešeta je samostojen HTML element z drugačnim imenom atributa »class«,

vsa imenovanja pa sledijo isti konvenciji:

<div class="grille diy g-Y_koordinata-X_koordinata"></div>

Primer imenovanja celice rešeto skrajno levo zgoraj in skrajno desno spodaj:

 <div class="grille diy g-1-1"></div>  <div class="grille diy g-6-6"></div>

S klikom na neko celico rešeta skript celico obarva temno zeleno, preko imena celice pridobi

koordinate celice, ki jih uporabi za izračun položaja celice v ostalih treh pozicijah. Slednje

obarva s svetlo zeleno barvo.

Če poznamo koordinate neke celice (x, y), njen položaj po rotaciji za 90° v smeri urinega kazalca

izračunamo s funkcijo:

𝑓(𝑥, 𝑦) = {𝑥 = 𝑛 − 𝑦 + 1

𝑦 = 𝑥

49

Opisano obnašanje dosežemo s skriptom:

JS:

//funkcija, ki kot argument sprejme objekt koordinat celice in barvo function highlightBlockFinal(block, color){ //koordinate objekta spremenimo v niz imena var blockClass = "grille final g-" + parseInt(block.y) + "-" + parseInt(block.x); //z jQueryjem pridobimo element na podlagi imena var elt = document.getElementsByClassName(blockClass); var jquery_elt = $(elt); //elementu spremenimo barvo $(jquery_elt).css( 'background-color', color); } //funkcija, ki za argument sprejme niz znakov (vrednost attributa class) //Iz imena razbere koordinate celice in ustvari objekt 'block' function getBlock(classString) { var x_coordinate = parseInt(classString.charAt(15)); var y_coordinate = parseInt(classString.charAt(13)); var block = { "x": x_coordinate, "y": y_coordinate, }; return block; } $(document).ready(function() { $(function () { //dogodek ob kliku na celico rešeta $('[class^="grille diy"]').click(function () { //v spremenjljivko gotclass shranimo vrednost atrributa class izbrane //celice var gotclass = this.className; //iz pridobljenega imena s fukncijo getBlock() ustvarimo objekt //koordinat var clicked_block = getBlock(gotclass); //s fukncijo highlightBlock() obarvamo izbrano celico temno zeleno highlightBlock(clicked_block, SELECTION_COLOR) for (i = 0; i < 3; i++) { //s fukncijo rotateCoordinates() pridobimo koordinate //celice v naslednji poziciji in jo obarvamo svetlo zeleno var rotated_block = rotateCoordinates(clicked_block); highlightBlock(rotated_block, ROTATED_SELECTION_COLOR); clicked_block = rotated_block; } } }); });

50

Celice, ki jih uporabnik izluknja, aplikacija shranjuje v podatkovno tabelo elementov koordinat

izluknjanih celic rešeta. V zadnjem koraku izdelave se pred uporabnikom prikaže prazna

matrika črk, prikrita z rešetom, ki ga je izdelal (Slika 15). Uporabnik lahko rešeto poljubno vrti

ali ga v celoti skrije tako, da vidi samo matriko črk. V besedilno polje vnaša besedilo, ki ga

aplikacija črko za črko vnaša na prazno matriko črk, na pozicije lukenj rešeta, ki ga je izdelal.

Ko dolžina vnesenega niza zapolni vse luknje rešeta v neki poziciji, se rešeto samodejno zavrti

v naslednjo pozicijo. Če uporabnik vnesen niz briše, aplikacija izbrisane črke odstrani iz matrike

črk in samodejno prilagaja pozicijo rešeta.

Slika 15: Izdelovanje svojega šifriranega besedila

51

Vpisovanje uporabnikovega vnosa na matriko črk dosežemo z JavaScript funkcijo:

JS://funkcija za argumente sprejme vneseno besedilo, //koordinate celice v katero mora črko vpisati, //informacijo če gre za novo črko, ali brisanje stare function writeBlock(input_str, block, action) { //iz koordinat celice ustvarimo ime elementa, ki bo spremenjen var blockClass = "code diy c-" + parseInt(block.y) + "-" + parseInt(block.x); //s pomočjo imena z jQeryjem pridobimo element var elt = document.getElementsByClassName(blockClass); var jelt = $(elt); var paraghraph = jelt.find("p"); if (action == 0) { //če gre za nov vnos, pridobimo zadnjo črko vnosa in jo zapišemo var last_input = input_str.slice(-1); paraghraph.text(last_input); } else { //če gre za brisanje, izbrišemo obstoječ vnos paraghraph.text(""); } }

5.3. Rezultati

Na zadnji strani aplikacije se izrišeta tabeli z rezultati uporabnikovega začetnega in končnega

preverjanja. V tabeli je prikazan uporabnikov odgovor, pravilen odgovor in čas, ki ga je

uporabnik potreboval za reševanje naloge.

Tik preden se naloži stran z rezultati, skript na odjemalčevi strani še zadnjič iz lokalne shrambe

prebere uporabnikov identifikacijski niz in ga pošlje na strežnik.

Na strežniku PHP skript prestreže uporabnikov identifikacijski niz, se poveže na bazo in pridobi

vrstico, v kateri so shranjeni odgovori uporabnika in čas, ko je odgovore poslal:

52

PHP:

<?php //povezava z bazo podatkov include 'connect.php'; //branje uporabnikovega identifikacijskega niza if (isset($_POST['userID'])) { $userID = $_POST['userID']; } // SQL poizvedba, ki pridobi podatke celotne baze $sql = "SELECT * FROM results"; $result=$db->query($sql); //pridobivanje podatkov za določenega uporabnika while ($row=$result->fetch_object()) { $sessionID = $row->sessionID; //shranjevanje uporabnikovih podatkov v spremenjljivke if ($sessionID == $userID) { $sessionID = htmlentities($row->sessionID, ENT_QUOTES, "UTF-8"); $field0 = htmlentities($row->field0,ENT_QUOTES,"UTF-8"); $field1 = htmlentities($row->field1,ENT_QUOTES,"UTF-8"); $field2 = htmlentities($row->field2,ENT_QUOTES,"UTF-8"); $field3 = htmlentities($row->field3,ENT_QUOTES,"UTF-8"); $field4 = htmlentities($row->field4,ENT_QUOTES,"UTF-8"); $field5 = htmlentities($row->field5,ENT_QUOTES,"UTF-8"); $field6 = htmlentities($row->field6,ENT_QUOTES,"UTF-8"); $field7 = htmlentities($row->field7,ENT_QUOTES,"UTF-8"); $field8 = htmlentities($row->field8,ENT_QUOTES,"UTF-8"); $field9 = htmlentities($row->field9,ENT_QUOTES,"UTF-8"); $field10 = htmlentities($row->field10,ENT_QUOTES,"UTF-8"); $field11 = htmlentities($row->field11,ENT_QUOTES,"UTF-8"); $field12 = htmlentities($row->field12,ENT_QUOTES,"UTF-8"); $field13 = htmlentities($row->field13,ENT_QUOTES,"UTF-8"); } } ?>

Podatke, ki smo jih pridobili in shranili v spremenljivke, uporabimo za izračun trajanja

reševanja posamezne naloge in preverjanja pravilnosti vnesenih odgovorov.

Če je uporabnik nalogo, ki preverja iste učne cilje, pri drugem reševanju izpolnil hitreje, se bo

prikazan čas reševanja naloge v tabeli obarval zeleno, sicer rdeče.

Z izračunanimi vrednostmi, z vdelanimi PHP segmenti, dinamično ustvarimo tabelo.

53

Dinamično kreiranje prve vrstice druge table:

<tr> <td>1</td>  <td> <?php echo $field7; ?>  </td> <td>LUKNJASTA</td>   <td <?php if ($time4 <= $time1){?> style="color: green; font-weight: bold;" <?php } else{ ?> style="color: red;" <?php } ?>> <?php echo $time4 ?> </td>  <td> <?php $field7_no_space = str_replace(' ', '', $field7); $field7_upper = strtoupper($field7_no_space); if($field7_upper == "LUKNJASTA") { ?> <img src="correct5.png" /> <?php } else { ?> <img src="wrong5.png" /> <?php } ?> </td> </tr>

Primer dinamično ustvarjene tabele, ki se prikaže uporabniku:

Slika 16: Prikaz rezultatov končnega preverjanja

54

6. EMPIRIČNA RAZISKAVA

Spletna aplikacija Programsko orodje za simulacijo Kardanske rešetke je bila javno dostopna

na spletnem naslovu https://kardanskaresetka.herokuapp.com/. S pilotsko raziskavo smo

želeli oceniti uporabo modela Kardanskega rešeta oziroma njegove interaktivne simulacije za

izboljšanje abstraktnih oziroma prostorskih predstav uporabnikov.

Spletna aplikacija sestoji iz treh sklopov; začetnega preverjanja, vadnice in končnega

preverjanja. Začetno in končno preverjanje (imenovano tudi predtest in potest) sestavljajo tri

naloge, ki v parih (1. in 4. naloga, 2. in 5. naloga ter 3. in 6. naloga) preverjajo iste učne cilje.

Aplikacija samodejno shranjuje uporabnikove odgovore in čas, ki ga je uporabnik potreboval,

da je na vprašanje odgovoril oziroma rešil nalogo.

V tej raziskavi nas zanima, v kolikšni meri so odgovori uporabnikov aplikacije pravilni in koliko

časa so potrebovali za posamezne odgovore ter predvsem, ali je mogoče opaziti spremembe

v rezultatih začetnega in končnega preverjanja po uporabi vadnice v spletni aplikaciji.

6.1. Opis vzorca

Ciljna skupina uporabnikov aplikacije so bili slovenski srednješolci. Ta skupina je bila izbrana

na podlagi podobne ciljne skupine v raziskavi PISA. K preizkusu spletne aplikacije smo

uporabnike povabili preko spletnega portala dijaski.net in spletnega družbenega omrežja

Facebook. Na Facebooku smo povabili k sodelovanju srednješolce v skupini »Matura 2016«

ter skupini, ki združuje dijake Dvojezične srednje šole Lendava. Ker je vabilo bilo javno,

sklepamo, da uporabniki aplikacije niso bili izključno srednješolci.

https://kardanskaresetka.herokuapp.com/

55

6.2. Splošni podatki

Aplikacija je od trenutka, ko je postala javno dostopna, do časa analize, zabeležila 425 obiskov.

V analizi empirične raziskave smo uporabili le koherentne rezultate, ki sledijo naslednjim

kriterijem:

Čas reševanja nalog je krajši od 1 ure

Uporabnikov, ki so naloge v spletni aplikaciji reševali dlje, je bilo 8.

Noben odgovor ni prazen

Uporabnik obišče spletno aplikacijo, vendar ne rešuje nalog ali nalog ne reši v celoti.

Takšnih uporabnikov je bilo 359.

Odgovori so umestni

V analizo niso vključeni rezultati, pri katerih so odgovori zaporedje znakov ali besed, ki

niso prisotni v matriki črk nalog, ki so jih uporabniki reševali. Primeri takšnih vnosov so:

»?«, »qwert« ... Uporabnikov, ki so vnašali tovrstne znake ali besede, je bilo 10.

V analizi smo uporabili rezultate 48 uporabnikov.

56

6.3. Analiza odgovorov

6.3.1. Delež pravilnih odgovorov

Pri začetnem preverjanju so uporabniki pravilno rešili nalogo 89-krat, kar predstavlja 62

odstotkov pravilnih odgovorov med vsemi podanimi odgovori. Pri končnem preverjanju so

uporabniki oddali pravilen odgovor 105-krat, kar predstavlja 73 odstotkov pravilnih odgovorov

med vsemi podanimi odgovori.

Grafikon 1: Delež pravilnih odgovorov pri začetnem preverjanju

Grafikon 2: Delež pravilnih odgovorov pri končnem preverjanju

Ugotavljamo, da so uporabniki po uporabi vadnice v aplikaciji oddali 16 pravilnih odgovorov

več oziroma je bilo število pravilnih odgovorov višje za 11 odstotkov.

57

6.3.2. Prvi par nalog (1. in 4. naloga)

Prvi par nalog preverja zmožnost prostorske predstavitve rešetke, ki smo jo zavrteli za pravi

kot v nasprotni smeri urinega kazalca, in zmožnost pravilnega branja razkritega besedila po

vrsticah po vrtenju rešetke. Pri 1. nalogi (začetno preverjanje) je pravilen odgovor

(»ISAWESOME«) podalo 33 uporabnikov oziroma 69 odstotkov uporabnikov. Pri enaki 4.

nalogi (končno preverjanje) je pravilno (»LUKNJASTA«) odgovorilo 39 uporabnikov oziroma 81

odstotkov uporabnikov.

Grafikon 3: Odgovori 1. naloga


Ugotavljamo, da je po uporabi vadnice v aplikaciji pravilen odgovor podalo 6 uporabnikov več

oziroma 12 odstotkov več kot pri začetnem preverjanju.

58

6.3.3. Drugi par nalog (2. in 5. naloga)

Drugi par nalog preverja zmožnost prostorske predstavitve rešetke, ki smo jo zavrteli za pravi

kot v smeri urinega kazalca, in zmožnost pravilnega branja razkritega besedila po vrsticah po

vrtenju rešetke. Pri 2. nalogi (začetno preverjanje) je pravilen odgovor (»THINGTODO«) podalo

39 uporabnikov oziroma 81 odstotkov uporabnikov. Pri enaki 5. nalogi (končno preverjanje) je

pravilno odgovorilo (»JERESETKA«) 40 uporabnikov oziroma 83 odstotkov uporabnikov.



Ugotavljamo, da je po uporabi vadnice v aplikaciji pravilen odgovor podal 1 uporabnik več

oziroma 2 odstotka več kot pri začetnem preverjanju.

THINGTODO; 81%

Odgovori 2. naloga

NEVEM

NIOGTOTH

NIOGTOTHD

NWM

SOAEEIWMS

THINGTODO

UNOCPIMGT

59

6.3.4. Tretji par nalog (3. in 6. naloga)

Tretji par nalog preverja zmožnost sledenju pravil za izgradnjo rešetke, kar pomeni med

rešetkami prepoznati tiste, ki so veljavne oz. ki ob upoštevanju pravil štejejo za veljavno

rešetko. Pri 3. nalogi (začetno preverjanje) je pravilen odgovor (»A, D«) podalo 17 uporabnikov

oziroma 35 odstotkov uporabnikov. Pri enaki 6. nalogi (končno preverjanje) je pravilen

odgovor (»B, D«) podalo 26 uporabnikov oziroma 54 odstotkov uporabnikov.



Ugotavljamo, da je po uporabi vadnice v aplikaciji pravilen odgovor podalo 9 uporabnikov več

oziroma 19 odstotkov več kot pri začetnem preverjanju

Ugotavljamo, da je bil najbolje reševan 2. par nalog (pravilnih je povprečno 82 % odgovorov),

najslabše pa 3. par nalog (pravilnih je povprečno 44,5 % odgovorov). V primeru vseh treh parov

opažamo več pravilnih odgovorov pri končnem preverjanju. Največji napredek opažamo v

primeru 3. para nalog (izboljšanje za 19 %).

60

6.4. Analiza časa

6.4.1. Povprečni čas

Povprečni čas reševanja začetnega preverjanja je bil 463,98 sekunde. V nadpovprečnem času

je začetno preverjanje zaključilo 30 uporabnikov oziroma 62,5 odstotka uporabnikov.

Povprečni čas reševanja končnega preverjanja je bil 270,19 sekunde. V nadpovprečnem času

je končno preverjanje zaključilo 28 uporabnikov oziroma 58,33 odstotka uporabnikov.

Grafikon 9: Čas reševanja nalog pri začetnem preverjanju

Grafikon 10: Čas reševanja nalog pri končnem preverjanju

Ugotavljamo, da se je po uporabi vadnice povprečen čas izpolnjevanja vseh treh nalog izboljšal

za 193,79 sekunde oziroma za 41,77 odstotka, vendar sta v nadpovprečnem času vse naloge

rešila 2 uporabnika oziroma 4 odstotki uporabnikov manj.

61

6.4.2. Prvi par nalog (1. in 4. naloga)

Povprečni čas reševanja 1. naloge (začetno preverjanje) je bil 173,75 sekunde. V

nadpovprečnem času je nalogo rešilo 30 uporabnikov oziroma 62,5 odstotka uporabnikov.

Povprečni čas reševanja enake 4. naloge (končno preverjanje) je bil 89,12 sekunde. V


Grafikon 11: Čas reševanja 1. naloge


Ugotavljamo, da se je po uporabi vadnice povprečen čas izpolnjevanja prvega para nalog

izboljšal za 84,63 sekunde oziroma za 48,7 odstotka, v nadpovprečnem času sta nalogo rešila

2 uporabnika oziroma 4 odstotki uporabnikov več.

62

6.4.3. Drugi par nalog (2. in 5. naloga)







Ugotavljamo, da se je po uporabi vadnice povprečen čas izpolnjevanja drugega para nalog

izboljšal za 9 sekund oziroma za 18,75 odstotka, v nadpovprečnem času so nalogo rešili 3

uporabniki oziroma 6 odstotkov uporabnikov več.

63

6.4.4. Tretji par nalog (3. in 6. naloga)







Ugotavljamo, da se je po uporabi vadnice povprečen čas izpolnjevanja tretjega para nalog

izboljšal za 100,17 sekunde oziroma za 45,17 odstotka, vendar sta v nadpovprečnem času vse

naloge rešila 2 uporabnika oziroma 4 odstotki uporabnikov manj.

Ugotavljamo, da so uporabniki najhitreje reševali 2. par nalog (povprečni čas reševanja je bil

61,32 sekunde), največ časa pa so potrebovali za 3. par nalog (povprečni čas reševanja je bil

171,66 sekunde). V primeru vseh treh parov opažamo nižji povprečni čas reševanja nalog pri

končnem preverjanju. V primeru 1. in 2. para nalog opažamo, da je več uporabnikov dosegalo

nadpovprečni čas reševanja pri končnem preverjanju. V primeru 3. para nalog je več

uporabnikov dosegalo nadpovprečni čas reševanja nalog pri začetnem preverjanju. Največji

napredek povprečnega časa reševanja nalog opažamo v primeru 3. para nalog (povprečni čas

reševanja je bil krajši za 100,17 sekunde). Največji napredek uporabnikov, ki so naloge rešili v

nadpovprečnem času, opažamo v primeru 2. para nalog (6,25 % uporabnikov več je nalogo

rešilo v nadpovprečnem času).

64

6.5. Povzetek analize rezultatov

Analiza rezultatov kaže, da so rezultati vseh opazovanih parametrov boljši pri končnem

preverjanju znanja, ki ga uporabniki rešijo po uporabi vadnice spletne aplikacije. Izjemi sta

število uporabnikov, ki so končno preverjanje rešili v nadpovprečnem času v primerjavi z

začetnim preverjanjem, in število uporabnikov, ki so nalogo pri končnem preverjanju rešili v

nadpovprečnem času v primeru 3. para nalog. Končno preverjanje je v nadpovprečnem času

končalo 28 uporabnikov, kar je 2 manj kot pri začetnem preverjanju. Pri 3. paru nalog je nalogo

pri končnem preverjanju v nadpovprečnem času rešilo 30 uporabnikov, kar je 2 manj kot pri

začetnem preverjanju.

Rezultati empirične raziskave izpolnjujejo namen, zastavljen v diplomski nalogi.

65

7. ZAKLJUČEK

Diplomsko delo sledi težnji šolstva in vzgoje, ki si prizadeva učencem predati ne le znanje,

temveč tudi veščine, ki jim omogočajo sistematiziran pristop k reševanju problemov. Tak

model poučevanja je prisoten pri razvoju t. i. računalniškega razmišljanja.

Izdelana spletna aplikacija v sklopu tega diplomskega dela upošteva pedagoška dognanja, ki

vzpodbujajo učinkovito učenje, in uporabnikom nudi okolje za utrjevanje in razvoj

algoritmičnega, prostorskega in abstraktnega razmišljanja.

Cilj, ki smo si ga zastavili v diplomi, je bil izdelati programsko orodje, ki bo uporabnike z

aktivnim eksperimentiranjem seznanilo z določenimi kriptografskimi oz. steganografskimi

postopki. Predpostavili smo, da bo uporaba tovrstnega orodja pripomogla k učinkovitejšemu

reševanju problemov, ki zahtevajo prostorsko-abstraktno razmišljanje. Predpostavka se sprva

utegne zdeti naivna, vendar rezultati, ki smo jih pridobili v pilotski raziskavi, pričajo o pozitivnih

učinkih na razumevanje in učinkovitost reševanja problemskih situacij s področja vizualizacije.

Ta ugotovitev je skladna s teoretskim izhodiščem neo-Piagetove teorije kognitivnega razvoja,

ki narekuje, da čas in primerno izpostavljanje problemskim situacijam vodi v kognitivni

napredek na področju, ki zahteva določeno stopnjo abstraktnega razmišljanja. Poudariti

moramo, da je v primeru pričujočega diplomskega dela šlo za pilotsko raziskavo. Zaključki naše

raziskave implicirajo pozitivne učinke uporabe spletne aplikacije za utrjevanje in razvoj

abstraktnega razmišljanja in prostorske predstavitve, vendar bi za bolj poglobljeno oceno

učinka aplikacije veljalo izvesti obširnejšo raziskavo. Raziskava bi se izvedla na večjem vzorcu

in s kontrolnimi skupinami, ki bi za doseganje istih učnih ciljev uporabile alternativne modele,

morda skozi tradicionalen pouk ali s pomočjo fizične različice rešetke.

Spletna aplikacija Programsko orodje za simulacijo Kardanske rešetke v svoji trenutni obliki

služi kot konceptualni model in je lahko predmet številnih izboljšav in razširitev, denimo

povečanje nabora in kompleksnosti animiranih in interaktivnih problemov, povezanih s

Kardansko in vrtečo se rešetko, ter vsebinska razširitev s problemskimi situacijami številnih

drugih kriptografskih metod.

66

Čeprav izdelek neposredno ne obravnava gradiva iz učnega načrta, menimo, da bi dopolnjena

oblika aplikacije lahko služila kot dodatno učno sredstvo, s katerim učenci usvajajo in utrjujejo

razmišljanje na višjih stopnjah abstraktnega razmišljanja in prostorskih predstavitev.

67

8. VIRI

Baddeley, A. (1998). Human Memory. Allyn and Bacon.

Beard, R. M. (1969). An Outline of Piaget's Developmental Psychology. London: Routledge:

Taylor and Francis Group, London and New York.

Beckett, B. (1997). Introduction to Cryptology and PC Security. London : McGraw-Hill.

Bleakley, J. (1991). The Eavesdroppers. Canberra: AGPS Press.

Boden, M. A. (1979). Piaget. London: Fontana Press.

Boom, J. (2004). Commentary on: Piaget's stages: the unfinished symphony of cognitive

development. New Ideas in Psychology, 22, 239–247.

Bootstrap. (b.d.). Pridobljeno s http://getbootstrap.com/getting-started/.

Cole, M. (1996). Psychology: A Once and Future Discipline. Cambridge, Mass.: Belknap Press

of Harvard University Press.

CSS. (11.10.2015). Pridobljeno s https://sl.wikipedia.org/wiki/CSS.

Curzon, P., Dorling, M., Ng, T., Selby, C., Woollard, J. (2014). Developing computational

thinking in the classroom: a framework. Swindon, GB: Computing at School. Znanstvena

monografija. Pridobljeno s

http://eprints.soton.ac.uk/369594/10/DevelopingComputationalThinkingInTheClassroo

maFramework.pdf.

Easttom , C. (2015). Modern Cryptography: Applied Mathematics for Encryption and

Information Security. McGraw-Hill Education. Pridobljeno s

https://www.safaribooksonline.com/library/view/modern-cryptography-

applied/9781259588099/.

Feldman, D. H. (2004). Piaget's stages: the unfinished symphony of cognitive development.

New Ideas in Psychology, 22, 175–231.

Fischer, K. W., Kenny, S. L. (1986). Environmental Conditions for Discontinuities in the

Development of Abstractions. V R. A. Mines, K. S. Kitchener Adult cognitive

development: methods and models (57–75). New York: Praeger.

Flavell, J. H. (1977). Cognitive Development. Englewood Cliffs, NJ: Prentice Hall.

Gornik, A. (2012). Prednosti uporabe HTML5 in CSS3 (Diplomsko delo). Fakulteta za

elektrotehniko, računalništvo in informatiko, Maribor.

68

Helmore, G. A. (1969). Piaget ‐ A Practical Consideration. Oxford, ZK: Pergamon Press.

Heroku. (b.d.). Pridobljeno s https://www.heroku.com/.

HTML5 Reference. (b.d.). Pridobljeno s https://dev.w3.org/html5/html-author/.

Huber, L. N. (1988). Computer Learning Through Piaget's Eyes. Classroom Computer

Learning, 6, 39–43.

JavaScript. (25.7.2016). Pridobljeno s https://en.wikipedia.org/wiki/JavaScript.

jQuery API. (b.d.). Pridobljeno s https://api.jquery.com/.

jQuery.ajax(). (b.d.). Pridobljeno s http://api.jquery.com/jquery.ajax/.

Kahn, D. (1996). The Codebreakers – The Story of Secret Writing. New York: Scribner.

Knight, C. C., Sutton, R. E. (2004). Neo‐Piagetian Theory and Research: enhancing

pedagogical practice for educators of adults. London Review of Education, 2, 47–60.

Krathwohl, D. R. (2002). A Revision of Bloom's Taxonomy: An Overview. Theory into Practice,

41, 212–218.

Lee, H., Plass, J.L., Homer, B.D. (2006). Optimizing Cognitive Load for Learning From

Computer-Based Science Simulations. Journal of Educational Psychology, vol. 98, 902–

913.

Mayer, E. R., & Moreno, R. (2002). Animation as an Aid to Multimedia Learning. Educational

Psychology Review, vol.14, 87–99. doi:10.1023/A:1013184611077.

MySQL. (b.d.) Pridobljeno s https://dev.mysql.com/doc/.

OECD (2014), PISA 2012 Results: Creative Problem Solving: Students’ Skills in Tackling Real-

Life Problems, vol 5. PISA, OECD Publishing. doi: 10.1787/19963777. Pridobljeno s

https://www.oecd.org/pisa/keyfindings/PISA-2012-results-volume-V.pdf.

Ojose, B. (2008). Applying Piaget’s Theory of Cognitive Development to Mathematics

Instruction. The Mathematics Educator, 18(1), 26–30.

Paivio, A. (1986). Mental Representations: A Dual Coding Approach. Oxford: Oxford

University Press.

PHP Manual. (b.d.). Pridobljeno s https://secure.php.net/manual/en/.

Reigeluth, C. M., Schwartz, E. (1989). An instructional theory for the design of computer-

based simulations. Journal of Computer-Based Instruction, 16, 1–10.

Richelson, J. T. (1999). The US Intelligence Community 4th Edition. Westview Press.

Schneier, B. (1996). Applied Cryptography 2nd Edition. John Wiley & Sons.

69

Shayer, M., Adey, P. (1981). Towards a Science of Science Teaching. London: Heinemann

Educational Books.

Siegler, R. S. (1996). Emerging Minds. Oxford: Oxford University Press.

Smith, M. (1998). Station X: The Codebreakers of Bletchley Park. Channel 4 Books.

Sweller, J. (1999). Instructional Design in Technical Areas. Camberwell, Australia: ACER.

Štraus, M., Šterman Ivančič, K. Štigl, S. (2013). OECD PISA 2012. Pridobljeno s

http://www.pei.si/UserFilesUpload/file/raziskovalna_dejavnost/PISA/PISA2012/PISA%2

02012%20Povzetek%20rezultatov%20SLO.pdf.

Teague, D. (2015). Neo-Piagetian Theory and the Novice Programmer (Doktorska disertacija).

Queensland University of Technology. doi: 10.13140/RG.2.1.3663.2089. Pridobljeno s

http://eprints.qut.edu.au/86690/1/Donna_Teague_Thesis.pdf.

Wilensky, U. (2014). Computational Thinking through Modeling and Simulation – An agent-

based modeling approach. Future Directions in Computer Science Education.

Wing, J. (2011). Research Notebook: Computational Thinking - What and Why?. Pridobljeno s

http://www.cs.cmu.edu/link/research-notebook-computational-thinking-what-and-why.

Wittrock, M. C. (1974). Learning as a generative activity. Educ. Psychol. 11, 87–95.

http://eprints.qut.edu.au/86690/1/Donna_Teague_Thesis.pdf

UNIVERZA V LJUBLJANI -...

Documents

Transcript of UNIVERZA V LJUBLJANI -...