SVEUČILIŠTE U SPLITU

PRIRODOSLOVNO MATEMATIČKI FAKULTET

NEFORMALNI OBLICI PRIKAZA ZNANJA U

INTERNET OKRUŽENJU

DIPLOMSKI RAD

Student: MARTINA PRGOMET Mentor: prof. dr. sc. Andrina Granić

Neposredni voditelj: dr. sc. Saša Mladenović

Split, srpanj 2011.

2

3

Sadržaj

Sadržaj ................................................................................................................................... 3

Uvod ...................................................................................................................................... 5

1. Upravljanje znanjem ...................................................................................................... 6

1.1. Kljuĉni pojmovi ..................................................................................................... 6

1.2. Vrste Znanja .......................................................................................................... 8

1.3. Faze organizacije znanja ........................................................................................ 9

1.4. Upravljanje znanjem u razvoju programske podrške .......................................... 11

1.4.1. Upravljanje znanjem i uĉenje ...................................................................... 12

1.4.2. Uloga Upravljanja znanjem u razvoju programske podrške ....................... 12

1.4.3. Implementacija Upravljanja znanjem .......................................................... 13

2. Mentalne mape ............................................................................................................ 15

2.1. Što su mentalne mape .......................................................................................... 15

2.2. Mentalne mape i ontologija ................................................................................. 17

2.3. Zašto koristiti mentalne mape.............................................................................. 19

2.3.1. Brainstorming .............................................................................................. 19

2.3.2. Uĉenje pomoću mentalnih mapa ................................................................. 20

2.3.3. Ostali naĉini upotrebe mentalnih mapa ....................................................... 21

2.4. Programski alati za izradu mentalnih mapa ......................................................... 23

2.4.1. FreeMind ..................................................................................................... 23

2.4.2. MindManager .............................................................................................. 24

2.4.3. Bookvar ....................................................................................................... 25

2.4.4. Mind42 ........................................................................................................ 26

2.4.5. Mindomo ..................................................................................................... 27

4

2.4.6. Wisemapping ............................................................................................... 28

3. Eksperimentalni dio ..................................................................................................... 29

3.1. Odabrane tehnologije ........................................................................................... 30

3.1.1. HTML5 ........................................................................................................ 30

3.1.2. JavaScript .................................................................................................... 37

3.1.3. JQuery .......................................................................................................... 38

3.1.4. JSON ............................................................................................................ 40

3.2. Realizacija ........................................................................................................... 44

3.3. Primjeri koda za specifiĉne zadaće ...................................................................... 48

3.3.1. Oznaĉavanje grane ....................................................................................... 48

3.3.2. Kreiranje grane ............................................................................................ 49

3.3.3. Brisanje grane .............................................................................................. 52

3.3.4. Kopiranje, rezanje i lijepljenje grane ........................................................... 54

3.3.5. Kreiranje novog dokumenta ........................................................................ 56

3.3.6. Otvaranje dokumenta ................................................................................... 58

3.3.7. Spremanje dokumenta ................................................................................. 63

Zakljuĉak ............................................................................................................................. 67

Literatura ............................................................................................................................. 68

5

Uvod

Ljudi u današnje vrijeme rade na realizaciji kompleksnih zadaća. Za uspješnost realizacije

takvih zadaća u ograniĉenom vremenu, nužna je suradnja više pojedinaca. Najplodniji

oblik suradnje je dijeljenje znanja. Ono može biti formalno i neformalno: s jedne strane se

znanje prenosi pismeno, u obliku dokumenata, a s druge strane svakodnevnom usmenom

komunikacijom. Brzi razvoj tehnologije postavlja uvjete za brže uĉenje i dijeljenje znanja

izmeĊu pojedinaca. Da bi se olakšao taj proces i povećala uspješnost, postoji potreba za

uĉinkovitom programskom podrškom koja na jednostavan naĉin pohranjuje i prenosi

znanje koje pojedinci imaju.

Ovaj rad je podijeljen na dvije cjeline i ĉetiri poglavlja.

Prva dva poglavlja obuhvaćaju teorijski dio rada. U prvom poglavlju je opisana

problematika i dana su odreĊena rješenja za organizaciju i upravljanje znanjem koje

pojedinci imaju, u svrhu dijeljenja znanja, radi uspješnosti realizacije kompleksnih

projekata.

U drugom poglavlju je predstavljen teorijski dio vezan za mentalne mape, njihova svrha,

uĉinkovitost i naĉini korištenja.

Druga cjelina obuhvaća eksperimentalni dio diplomskog rada.

U trećem poglavlju su opisane tehnologije koje su korištene u eksperimentalnom dijelu

rada, a zatim je predstavljeno rješenje izrade aplikacije za mentalne mape, zajedno sa

primjerima specifiĉnih dijelova koda.

6

1. Upravljanje znanjem

Moderni poslovni svijet karakteriziraju dinamiĉnost, promjene i konstantni napredak

tehnologije. Da bi bile u toku s promjenama, organizacije moraju postati fleksibilnije, a

jedan naĉin za to je povećanjem potencijala za uĉenje kao grupa.

Slika 1.1: Krug organizacijskog uĉenja

Upravljanje znanjem (eng. Knowledge Managment, skraćeno KM) se može shvatiti kao

integrirani pristup za postizanje organizacijskih ciljeva, koji postavlja fokus na znanje. Ono

podržava i koordinira kreiranje, prijenos i primjenu individualnog znanja u procesu

kreiranja vrijednosti [1].

Upravljanje znanjem se pojavilo kao znanstvena disciplina u ranim devedesetim godinama

prošlog stoljeća. Ono spaja niz strategija i praksi koje se koriste u organizaciji za

identifikaciju, stvaranje, prikazivanje, distribuiranje i usvajanje predodžbi i iskustava [2].

Ova disciplina se odnosi prema pojedincu kao struĉnjaku koji svoja znanja može podijeliti

sa ostalim ĉlanovima grupe.

1.1. Ključni pojmovi

Uz pojam znanja, usko su vezani i pojmovi podaci, informacije i mudrost koji su definirani

u nastavku.

Podaci su jednostavni neobraĊeni simboli bez ikakvog znaĉenja osim vlastitog postojanja.

Mogu biti u razliĉitim formama, kao što su brojĉani, tekstualni, slikovni itd.

Informacije su obraĊeni podaci koji su dobili znaĉenje relacijskim vezama s drugim

podacima. Ovako obraĊeni podaci mogu biti korisni, iako to nije uvjet. U raĉunalnom

7

svijetu informacije sadrži relacijska baza na temelju podataka složenih u relacijske odnose.

Ponekad se kaže da informacije daju odgovore na pitanja ''tko'', ''što'', ''gdje'' i ''kada''. Iz

podataka dolazimo do informacija ukoliko shvatimo odnose ili relacije.

Znanje je odgovarajući skup informacija kojima je osnovna namjena da budu korisni.

Znanje se stjeĉe kroz proces uĉenja u kojem se informacije pretvaraju u znanje kako bi

nam bilo korisno, kako bi nam poslužilo za nešto. Ponekad se kaže da je znanje primjena

podataka i informacija sa ciljem davanja odgovora na pitanje ''kako''. Iz informacija do

znanja dolazimo ukoliko shvatimo model, obrazac ili predložak. Na temelju njega možemo

i predvidjeti što će se u budućnosti dogaĊati, što kod samog poznavanja informacija nije

moguće.

Shvaćanje temeljnih principa vodi prema mudrosti.

Mudrost oznaĉava duboko znanje, odnosno shvaćanje temeljnih principa ukljuĉenih u

znanje zbog kojih je znanje upravo takvo kakvo jest. Mudrost je najveći stupanj spoznaje,

koji ukljuĉuje ne samo shvaćanje principa već i moral, etiku te dobro rasuĊivanje.

Slika 1.2: Veza pojmova podaci, informacije, znanje i mudrost

8

1.2. Vrste Znanja

Upravljanje znanjem, kao što je prikazano na Slici 1.3, ĉesto dijeli znanje na:

Kognitivnu psihologiju,

Mogućnost izražavanja i

Nositelje znanja.

Slika 1.3: Tipovi znanja

Kognitivna psihologija razlikuje deklarativno i proceduralno znanje. Deklarativno znanje

se odnosi na ĉinjenice i objekte i daje odgovore na pitanje „što“. Proceduralno znanje

opisuje naĉin na koji se izvode kognitivni procesi i akcije i odgovara na pitanje „kako“.

Struktura znanja temeljena na mogućnosti izražavanja se fokusira na ĉinjenici dali je

nositelj znanja svjestan znanja koje ima i zna li ga izraziti. Ovo rezultira podjelom na

eksplicitno i implicitno (prešutno ili skriveno) znanje.

Eksplicitno znanje koje je poznato kao kodirano znanje, artikulirano je formalnim jezikom

i može se jednostavno prenositi s jedne osobe na drugu u obliku informacije.

Implicitno znanje je ugraĊeno znanje ili znanje stvoreno osobnim iskustvom pojedinca i

ukljuĉuje nedodirljive ĉimbenike kao što su osobna uvjerenja, instinkt, osobne vrijednosti i

steĉene vještine. Ono je personalizirano i do njega nije lako doći, stoga ĉesto ostaje

neotkriveno i neiskorišteno. Ovaj oblik znanja je bogatiji od eksplicitnog, ali nema

vrijednosti ako nije upotrijebljeno.

Podjela znanja prema nositelju znanja razlikuje individualno i kolektivno znanje.

Individualno znanje je znanje pojedinca koje nije ovisno o specifiĉnom kontekstu i

individualno je kontrolirano. Kolektivno znanje je relevantno u specifiĉnom okruženju,

9

može ukljuĉivati individualno znanje koje ima puni potencijal samo kada je kombinirano

sa znanjem grupe ljudi. TakoĊer može ukljuĉivati znanje koje se dijeli sa svima i znanje

koje je zajedniĉko pojedincima u grupi.

1.3. Faze organizacije znanja

Definirane su faze organizacije znanja, i to su, kao što je prikazano na Slici 1.4:

Kreiranje znanja,

Prikupljanje/pohranjivanje znanja,

Pretvorba/organizacija znanja,

Distribucija/pristup znanju i

Primjena znanja.

Slika 1.4: Faze organizacije znanja

Kreiranje znanja: ĉlanovi zajednice kreiraju znanje kroz uĉenje, rješavanje problema,

kreativnost, te iz izvora izvan zajednice. Kreiranje znanja može biti postignuto samo u

prikladnom okruženju, a zahtjeva timski rad i efektivnu upotrebu kreativnog potencijala.

Kao što je prikazano na Slici 1.5, dostupno je mnogo razliĉitih kreativnih tehnika koje

podržavaju kreiranje znanja. Interakcija i komunikacija izmeĊu sudionika u ovakvom

okruženju stvara nove prijedloge i rješenja.

10

Slika 1.5: Kreativno okruženje i metode kreiranja znanja

Za ovaj rad je posebno važna jedna od metoda kreiranja znanja prikazana na Slici 1.5, a to

je izrada mentalnih mapa (eng. Mind Mapping), o kojoj će se kasnije detaljnije govoriti.

Prikupljanje/pohranjivanje znanja: ĉlanovi zajednice prikupljaju i pohranjuju

informacije o znanju u eksplicitnom obliku. Za pohranjivanje prikupljenog znanja najĉešće

se koriste programska rješenja za upravljanje sadržajem te razliĉiti oblici baza podataka.

Nakon što je prikupljeno, skriveno znanje postaje eksplicitno, a kako bi ono bilo precizno,

toĉno, razumljivo i pristupaĉno, potrebno ga je strukturirati. U tu svrhu se koristi niz

metoda, a jedna od njih su takoĊer i već spomenute mentalne mape [3].

Pretvorba/organizacija znanja: zajednice organiziraju i pretvaraju znanje te ga ukljuĉuju

u pisane dokumente i baze znanja;

Distribucija/pristup znanju: znanje se distribuira kroz edukaciju, teĉajeve i razne

programe;

Primjena znanja: krajnji cilj je primijeniti znanje i to je najvažniji dio ciklusa organizacije

znanja.

Upravljanje znanjem ima za cilj uĉiniti znanje dostupnim kad god je ono potrebno.

11

1.4. Upravljanje znanjem u razvoju programske podrške

Razvoj programske podrške je podruĉje koje se brzo mijenja, stoga je znanje u tom

podruĉju raznoliko i neprestano se povećava. Postavlja se pitanje: Koliko upravljanje

znanjem može pomoći pri rješavanju problema u razvoju programske podrške?

Organizacije mogu primijeniti upravljanje znanjem da bi došle do rješenja vezanih za

razliĉite poslovne potrebe.

Poslovne potrebe organizacije: Organizacije za razvoj programske podrške imaju potrebu

za smanjenjem troškova i vremena potrebnog za razvoj projekata. Da bi to postigli, moraju

izbjegavati pogreške, jer to smanjuje potrebu za doradom, a ponavljanje uspješnih procesa

povećava produktivnost i vjerojatnost budućih uspjeha. Organizacije trebaju primijeniti

znanja steĉena u prethodnim projektima za uspješnu implementaciju budućih projekata.

Nažalost, stvarnost je da razvojni timovi ne ostvaruju korist od postojećih iskustava i

ponavljaju greške iako pojedinci znaju kako ih izbjeći.

Ĉlanovi tima stjeĉu vrijedno iskustvo sa svakim pojedinim projektom, a organizacija i

individualci postižu više ako dijele znanje. Kako organizacija raste i radi sa većom

koliĉinom informacija, proces stjecanja znanja neformalnim putem postaje nedovoljan te

se organizacije više ne mogu osloniti na osobna iskustva zaposlenih. Individualna znanja

se moraju dijeliti, a organizacije moraju definirati procese za dijeljenje znanja tako da

zaposlenici kroz cijeli projekt mogu donositi ispravne odluke.

Organizacije takoĊer mogu primijeniti upravljanje znanjem da bi zadovoljile potrebe za

znanjem u razliĉitim podruĉjima.

Znanje vezano za nove tehnologije: Nove tehnologije ĉine razvoj programske podrške

uĉinkovitijim, no s druge strane, potrebno je odreĊeno vrijeme dok programeri ne usvoje

znanja vezana uz njih. Ako koriste tehnologiju koju nisu svladali, okreću se pristupu

„uĉenja kroz rad“, koji može uzrokovati ozbiljna zakašnjenja. Stoga programeri moraju

brzo stjecati nova znanja vezana za nove tehnologije i nastojati ih savladati.

Dijeljenje znanja: Neformalno dijeljenje znanja je važan aspekt u uĉenju i ono bi se

trebalo poticati. Ipak, formalno dijeljenje znanja osigurava da svi ĉlanovi grupe mogu

pristupiti znanju. Stoga organizacije moraju formalizirati dijeljenje znanja te u isto vrijeme

poticati i neformalno dijeljenje znanja.

12

Znanje o tome tko što zna: Organizacije se za razvoj programske podrške uvelike

oslanjaju na znanje zaposlenika jer su oni ti koji su kljuĉni za uspjeh projekta. MeĊutim,

pristup tim ljudima može biti težak. Jedan od razloga je mobilnost ljudi: kada osoba s

posebnim znanjem odjednom napusti organizaciju, stvaraju se praznine u znanju. Potrebno

je znati tko posjeduje koju vrstu znanja i tako razviti strategiju za sprjeĉavanje nestanka

vrijednog znanja.

Suradnja: Razvoj programske podrške je grupna aktivnost. Ĉlanovi grupe su ĉesto na

razliĉitim mjestima, ĉak rade i u razliĉitim vremenskim zonama. Ipak, oni moraju

komunicirati i suraĊivati te pronaći naĉin za dijeljenje znanja neovisno o prostoru i

vremenu.

1.4.1. Upravljanje znanjem i učenje

Uĉenje je temeljni dio upravljanja znanjem jer zaposlenici organizacije moraju usvojiti

dijeljeno znanje prije nego što ga mogu poĉeti koristiti za obavljanje specifiĉnih zadataka.

Pojedinci prvenstveno uĉe jedni od drugih kao i kroz samostalno istraživanje. Znanje se

takoĊer može prenositi i od pojedinca na grupu.

Upravljanje znanjem nastoji unaprijediti znanje pojedinaca na razinu organizacije, tako da

mu cijela organizacija može pristupiti. Pojedinci obavljaju zadatke koji postižu ciljeve

organizacije, stoga je aktivnost uĉenja na individualnoj razini od najveće važnosti.

1.4.2. Uloga Upravljanja znanjem u razvoju programske podrške

Predloženi su razliĉiti pristupi vezani za poboljšanje procesa, uvoĊenje novih tehnologija,

te poboljšanje izvedbe ljudi („peopleware“). Upravljanje znanjem uglavnom obuhvaća

poboljšanje izvedbe ljudi. Budući da je razvoj programske podrške rezultat znanja i

kreativnosti, upravljanje znanjem naglašava važnost toga da pojedinci imaju pristup

traženim informacijama i znanju koje im je potrebno za dovršavanje zadatka. Ne ignorira

vrijednost drugih aspekata kao što su proces i tehnologija, niti ih želi zamijeniti. Umjesto

toga, radi na poboljšanju razvoja programske podrške upravljanjem organizacijom znanja.

Znanje se može prenijeti formalnim obukama ili uĉenjem kroz rad. Formalne obuke su

ĉesto dugotrajne i skupe, pogotovo ako se odvijaju izvan organizacije. Uĉenje kroz rad

može biti kritiĉno jer ljudi ĉine pogreške i neprestano ih ponavljaju dok ne doĊu do

13

ispravnog rješenja. Upravljanje znanjem podržava i formalne obuke i uĉenje kroz rad.

Dokumentirano znanje može pružiti osnove za obuke unutar organizacije, a uĉenje kroz

rad osigurava znanje pojedincima koji ga imaju, te ukazuje na te pojedince kada i gdje je

potrebno.

Dokumenti proizlaze iz znanja koje je nastalo temeljem rješavanja problema na projektima,

a ĉlanovi tima to znanje mogu koristiti za buduće projekte.

Voditelji projekta moraju napraviti niz odluka na poĉetku i tijekom projekta. Tipiĉno,

njihove odluke su voĊene osobnim iskustvom i intuicijom. Pošto je razvoj programske

podrške kompleksan i raznolik proces, intuicija nije dovoljna i nemaju svi opsežno

iskustvo. Stoga se donošenje odluka za buduće projekte mora voditi prošlim projektima.

To znaĉi da organizacije moraju osigurati da se znanje koje je steĉeno tijekom projekta ne

izgubi. Ovo zahtjeva odreĊene programe, skupljanje podataka i njihovu analizu. TakoĊer je

potrebno simulirati „što ako“ scenarije te moguće ishode za višestruke odluke. Kvaliteta

ovog predviĊanja ovisi o kvaliteti prikupljenih podataka. Na višoj razini, organizacije

moraju analizirati nekoliko prošlih projekata da bi unaprijedili trenutni projekt. Ovo

zahtjeva veliko znanje bazirano na više razliĉitih iskustava u razvoju programske podrške.

Kako organizacije stjeĉu više iskustva u provoĊenju ovih sluĉajeva, proces razvoja je

ponovljen i postaje još više poboljšan.

1.4.3. Implementacija Upravljanja znanjem

Implementacija upravljanja znanjem obuhvaća mnogo izazova i prepreka. Posebno su

važna tri pitanja:

Pitanje tehnologije: tehnologija za razvoj programske podrške podržava upravljanje

znanjem, ali nije uvijek moguće integrirati razliĉite sustave i alate da bi se postigla željena

razina dijeljenja.

Pitanje organizacije: pogreška je što se organizacije fokusiraju samo na tehnologiju a ne i

na metodologiju. Lako je upasti u zamku tehnologije i posvetiti sve resurse razvoju

tehnologije bez planiranja implementacije upravljanja znanjem.

Individualna pitanja: zaposlenici ĉesto nemaju vremena za primanje i traženje znanja, ne

žele dijeliti svoje i ne žele koristiti tuĊe znanje.

14

Iako nova tehnologija dijeljenje znanja ĉini lakšim nego ikada, organizacije ih možda neće

promovirati. Neke kulture potiĉu individualizam i zabranjuju zajedniĉki rad. Ako

organizacije ne potiĉu dijeljenje, zaposlenici se mogu posesivno odnositi prema svom

znanju i neće dragovoljno dijeliti svoje znanje. Zaposlenici znaju da ih organizacija cijeni

zbog njihovog znanja te mogu biti u strahu da će ih se smatrati suvišnima i zamjenjivima

nakon što poslodavac primi njihovo znanje. TakoĊer mogu ne biti spremni dijeliti svoja

negativna iskustva i ono što su nauĉili na temelju neuspjeha zbog negativne konotacije.

Dakle, iako je svrha upravljanja znanjem da se izbjegnu sliĉne greške, zaposlenici mogu

biti u strahu da će takve informacije biti iskorištene protiv njih.

Druga prepreka je “not invented here” sindrom: neki vjeruju da se softverski inženjeri

opiru ponovnom korištenju rješenja drugih ljudi. Iako je promjena teška, takva vjerovanja

moraju biti promijenjena i zamijenjena pozitivnim stavom vezanim za dijeljenje.

Organizacije ne samo da moraju poticati, već moraju i nagraĊivati zaposlenike koji dijele

svoje znanje, traže znanje i koriste tuĊe znanje.

Iz navedenog se može zakljuĉiti da postoje dobri razlozi za vjerovanje da upravljanje

znanjem za razvoj programske podrške može uspjeti ako se organizacije fokusiraju na

pravi naĉin i implementiraju ga [4].

15

2. Mentalne mape

Kao što je već naglašeno, ponovna upotreba znanja je važan element upravljanja znanjem.

Pri tome se javlja potreba za mehanizmima koji će spremati znanje pojedinaca kao i

organizacije, te pružiti mogućnost njegove ponovne upotrebe. Kao pomoć pri ispunjavanju

ovih ciljeva uvelike može pomoći mapiranje znanja, koje prema Wiig-u (1993.g.) ima

sljedeće karakteristike [5].

Koristi se za izradu hijerarhijskih mapa,

Pomaže pri analizi znanja koja je bazirana na interaktivnom radu,

Pruža metode dokumentiranja znanja i

Identificira podruĉja interesa.

U ovom dijelu rada, pažnja je posvećena jednoj takvoj vrsti mapiranja znanja, a to su

mentalne mape. Mentalne mape su odabrane iz razloga što je to relativno nova tehnika i

sve se više primjenjuje u razliĉitim aspektima života, od individualnog, preko grupnog

naĉina rada, sve do razine velikih organizacija. Drugi razlog je jednostavnost njihove

izrade, naknadne upotrebe, te velika koliĉina informacija koje mentalne mape mogu

pohraniti.

2.1. Što su mentalne mape

Mentalna mapa (eng. Mind map) je vrsta dijagrama koji na odreĊeni naĉin prikazuje ideje

ili razmišljanja. Mentalne mape su prikaz informacija na vizualno organizirani naĉin koji

slijedi hijerarhijsko pojmovno naĉelo, za razliku od uobiĉajenog naĉina pravocrtnog ili

linearnog nizanja informacije jedne za drugom kako se one predstavljaju u pisanim

dokumentima [6].

Jednostavno reĉeno, mentalne mape su slikoviti prikazi sustava informacija i znanja.

Sadrže rijeĉi, reĉenice, simbole ili crteže i razne druge oznake koje predstavljaju znaĉenje

ideja ili razmišljanja. Izgled mape izveden je tako da se u središtu nalazi kljuĉna rijeĉ koja

16

predstavlja ideju ili temu, a oko nje se dalje zrakasto granaju ostale zamisli. Svi su ti

dijelovi meĊusobno povezani grafiĉki i semantiĉki, a ĉine cjelinu [7].

Jednostavan naĉin za razumijevanje mentalnih mapa je njihova usporedba sa kartom grada.

Centar grada predstavlja glavnu ideju u mentalnoj mapi. Glavne ceste koje vode iz centra

grada predstavljaju kljuĉne ideje u procesu razmišljanja, dok sporedne ceste predstavljaju

sekundarne ideje koje se vežu na osnovne ideje, itd.

Slikovne metode su se stoljećima koristile za uĉenje, pamćenje, brainstorming, vizualno

razmišljanje i rješavanje problema. Jedan od prvih primjera mentalnih mapa izraĊen je još

u trećem stoljeću od strane filozofa Porfirija iz Tira (grĉ. Πορφύριος, 234-305). Tvorcem

modernih mentalnih mapa smatra se psiholog i edukacijski savjetnik Tony Buzan, koji je

2006.g. izdao poznati program za izradu mentalnih mapa iMindMap [8].

Elementi koji se granaju podijeljeni su u grupe kako bi se olakšalo razumijevanje i

organizacija odreĊenog tipa znanja s ciljem rješavanja problema ili donošenja odluke.

Metoda izrade mentalne mape je vizualni pristup rješavanju složenih zadaća, s ciljem da se

istakne ono bitno u razmatranoj zadaći.

Slika 2.1: Primjer mentalne mape nacrtane rukom

Moguće je uoĉiti sliĉnost izmeĊu mentalne mape i ontologije koja se takoĊer koristi za

strukturirano predstavljanje znanja. Slika 2.1 prikazuje mentalnu mapu nacrtanu rukom, ali

ona ne može predstavljati ontologiju jer nije razumljiva raĉunalu.

Osim koncepta kojeg sadrži, mentalna mapa sadrži i relacije koje definiraju odnos meĊu

navedenim idejama. Ipak, treba uoĉiti kako se mentalna mapa organizira oko jednog pojma

17

pa je možemo interpretirati kao modul ontologije, koji je takoĊer ontologija, a takoĊer

može predstavljati drukĉiji pogled na sustav. Kako se mentalna mapa može predstaviti kao

stablo, primjereno je koristiti je za opis hijerarhijskih i heterogenih sustava.

Postoji niz programskih alata za izradu mentalnih mapa, a odabir alata ovisi o naĉinu

izrade mape [9].

2.2. Mentalne mape i ontologija

Glavna razlika izmeĊu mentalne mape i ontologije je to što mentalna mapa odražava

razmišljanje o jednom predmetu razgovora, a ontologije se sastoje od niza meĊusobno

povezanih koncepata. Iz ove ĉinjenice može se zakljuĉiti kako za izradu ontologije treba

izraditi barem onoliko mentalnih mapa koliko ontologija ima razliĉitih koncepata, a veze

izmeĊu mentalnih mapa predstavljat će veze izmeĊu koncepata u ontologiji.

Mape koje se sastoje od koncepata povezanih sa usmjerenim lukovima koji predstavljaju

razliĉite relacije izmeĊu parova koncepata nazivaju se konceptualne mape, a mogu se

predstaviti grafom [10].

Konceptualne mape prikazuju vezu izmeĊu razliĉitih koncepata koji su povezani strelicama

u razgranatu hijerarhijsku strukturu. Veza izmeĊu pojmova je, radi lakšeg razumijevanja,

povezana frazama koje se nalaze na strelicama, kao npr. rezultira, odnosi se, uključuje ili

potrebno je [11].

18

Slika 2.2: Konceptualna mapa

Slika 2.2 prikazuje primjer konceptualne mape izraĊene u programu CMapTools i jedan

važan aspekt konceptualnih mapa a to je mogućnost prikaza velikog broja informacija u

sažetoj formi.

Kombinacija poĉetnog pojma, fraze i pojma s kojim se povezan poĉetni pojam, formira

odreĊenu tvrdnju. Jedna takva tvrdnja se može vidjeti iz primjera sa Slike 2.2:

„Organizirano znanje je ovisno o kontekstu.“ Ili „Poveznice prikazuju unutarnje veze.“ Za

vrijeme izrade konceptualne mape u programu CmapTools, moguće je otvoriti pomoćni

prozor koji prikazuje formirane tvrdnje. Prozor je prikazan na Slici 2.3:

19

Slika 2.3: Pomoćni prozor sa listom veza konceptualne mape

Konceptualne mape je razvio profesor Joseph D. Novak sa Cornell University 1970.-ih

godina. Od samog poĉetka, konceptualne mape su se koristile u nekoliko razliĉitih

podruĉja iz razloga što imaju mogućnost korištenja kao sredstvo koje može grafiĉki

prikazati kompleksne sadržaje. Mogu se koristiti i kao sredstvo za pouĉavanje

identifikacijom kljuĉnih koncepata i njihovih veza.

Konceptualne mape ne sadrže dodatne elemente koji nisu koncepti, ali pojašnjavaju ideju

koncepta. Koncepte koji tvore konceptualnu mapu izvlaĉi inženjer znanja, temeljem

mentalne mape koju je izradio korisnik sustava.

2.3. Zašto koristiti mentalne mape

Postoji mnogo naĉina upotrebe mentalnih mapa i to za osobne potrebe, u poslovne svrhe, u

edukaciji, kao tehnika pamćenja ili za shvaćanje kompliciranih ideja. Slijedi nekoliko

razliĉitih naĉina primjena mentalnih mapa.

2.3.1. Brainstorming

Jedna od mogućnosti upotrebe mentalnih mapa je za tehniku kreiranja znanja koju potiĉe

Upravljanje znanjem, a naziva se brainstorming.

20

Brainstorming je kreativna tehnika koja potiĉe razvoj novih ideja, obiĉno u grupi ljudi, da

bi se došlo do rješenja problema. To može biti npr. novi proizvod. Izrada mentalnih mapa

doprinosi kreiranju prepoznatljivih uzoraka i na jedinstveni naĉin unosi red u velikoj

koliĉini ideja. Na Slici 2.4 je prikazan primjer generiranja razliĉitih ideja i njihova

organizacija [12].

Slika 2.4: Organizacija ideja

Ako se ideje linearno vežu jedna na drugu, one postanu neorganizirane i nepovezane sa

osnovnom idejom. S druge strane, ako su zrakasto rasporeĊene oko osnovne ideje, mnogo

ih je lakše organizirati i uoĉiti njihove meĊusobne veze .

2.3.2. Učenje pomoću mentalnih mapa

Druga uĉinkovita upotreba mentalnih mapa je za uĉenje, jer one mogu pomoći pri

rješavanju važnog problema obrazovanja, a to je kako postići viši stupanj upotrebe

mentalnih sposobnosti ĉovjeka.

Uĉenje pomoću mentalnih mapa je uĉenje kroz odvajanje bitnih elemenata i njihova

povezivanja u jednu cjelinu. Vizualna narav mentalne mape olakšava razumijevanje,

pamćenje, ponavljanje i korištenje (izlaganje) znanja.

Postoji nekoliko nedostataka upotrebe standardnih bilješki za vrijeme uĉenja:

Kod standardnih bilješki, kljuĉne rijeĉi se ĉesto pojavljuju na razliĉitim mjestima,

okružene sa mnogo manje važnih rijeĉi. To ih ĉini nerazumljivima i teško je uoĉiti

prikladne veze izmeĊu kljuĉnih koncepata.

Bilješke u jednoj boji su vizualno dosadne. Kao takve, brzo se zaboravljaju. S

vremenom, standardne bilješke poprime formu monotonih beskrajnih lista sliĉnog

izgleda i teško je zapamtiti njihov sadržaj.

Bilješke oduzimaju više vremena zbog zapisivanja nepotrebnih stvari, ĉitanja i

traženja kljuĉnih rijeĉi.

21

Linearna prezentacija bilješki otežava stvaranje veza i smanjuje kreativnost.

Mentalne mape, za razliku od standardnih bilješki, djeluju na naĉin na koji radi mozak:

koriste radijalni prikaz podataka, koji potiĉe asocijativne procese razmišljanja koji imaju

poĉetak u centralnoj toĉki ili se vežu na nju.

Mozak pamti kljuĉne rijeĉi i slike, a ne reĉenice. Kako su mentalne mape vizualne i zorno

prikazuju veze izmeĊu kljuĉnih rijeĉi, mnogo ih se lakše prisjetiti nego linearnih bilješki.

2.3.3. Ostali načini upotrebe mentalnih mapa

Mentalne mape se takoĊer koriste za [13]:

To-do Liste: Ovo je ĉesti primjer upotrebe mentalnih mapa na individualnoj ili grupnoj

razini. Na Slici 2.5 je prikazan takav primjer mentalne mape.

Slika 2.5: Primjer upotrebe mentalne mape kao to-do liste

Rješavanje problema: Mentalne mape pomažu pri definiranju i sagledavanju problema iz

razliĉitih perspektiva, uoĉavanju važnih pitanja i njihovog meĊusobnog odnosa, a takoĊer

pomažu drugima da dobiju opću sliku o tome kako pojedinac vidi razliĉite aspekte

situacije.

22

Slika 2.6: Primjer upotrebe mentalne mape za rješavanje problema

Vođenje bilješki: Mentalne mape pomažu pri organiziranju primljene informacije u obliku

koji mozak lakše pamti. Mogu se koristiti za bilježenje bilo ĉega, od predavanja, sastanaka

do telefonskih razgovora.

Sastanke: Mentalne mape su korisne kako za vrijeme, tako i prije sastanka. Prije sastanka

mentalna mapa pomaže pri organizaciji vremena i moguće ishode. To povećava

uĉinkovitost u smislu komunikacije i donošenja odluka, te smanjuje mogućnost trošenja

vremena i dosade. Za vrijeme sastanka, mentalna mapa pomaže kod zadržavanja fokusa na

odreĊenoj temi, kao i prijelaz na druge teme.

Planiranje: Mentalne mape pomažu pri traženju i organizaciji relevantnih informacija na

jednom mjestu. Mogu se upotrijebiti za planiranje bilo koje vrste pisanog rada, npr. u

okviru izrade scenarija za knjigu radi se glavna mapa za cijelu knjigu, a iscrpnije podmape

za svako poglavlje.

Prezentacije: Vizualna narav mentalne mape omogućava ĉitanje cijelog predmeta

izlaganja bez gledanja u papir.

23

2.4. Programski alati za izradu mentalnih mapa

Kao što je spomenuto ranije, postoji niz razliĉitih programskih alata za izradu mentalnih

mapa. Neki od njih su zajedno sa svojim prednostima i nedostatcima navedeni ovdje.

2.4.1. FreeMind

Freemind je besplatna programska podrška za izradu mentalnih mapa, napravljena u Java

programskom jeziku. Na Slici 2.7 je prikazana mentalna mapa napravljena u ovom

programu.

Slika 2.7: Mentalna mapa izraĊena u Freemind-u

Prednosti:

Podržava hrvatski jezik,

Radna površina zauzima veliki dio ekrana što je pogodno za manje monitore i

lakšu organizaciju prostora,

Ima mnogo mogućnosti, kao što su spremanje mapa u razliĉitim oblicima

(HTML, slike, Flash, Open Office dokument), umetanje slika, hiperlinkova,

ikona.

Nedostatci:

Ikone potrebne za izradu mape su sitne i to otežava njenu izradu. Sve mogućnosti

koje program ima donose i veliku koliĉinu izbornika, a time i teže snalaženje.

Većina funkcija je nepotrebna.

24

Preĉaci za tipkovnicu su u oblicima koji se teško pamte. Npr., za povećavanje

teksta se koristi preĉac Ctrl+L, a za smanjenje Ctrl+M, što je neuobiĉajeno.

Grane mentalne mape su automatski postavljene kao sive, a zbog već spomenute

velike koliĉine izbornika, većina vremena u izradi se gubi na traženje opcije

mijenjanja boje grane.

Kontekstni izbornik je kompliciran, ima previše funkcija i lako je pogriješiti pri

odabiru željene funkcije.

Postoji još nekoliko programskih alata sliĉnih Freemind-u, neki od njih su XMind,

FreePlane, te SciPlore MindMapping. Svi imaju sliĉno suĉelje, kao i izgled mentalne mape

koja se izraĊuje.

2.4.2. MindManager

MindManager je takoĊer programska podrška za izradu mentalnih mapa, ali za razliku od

FreeMind-a, nije besplatna. Na Slici 2.8 je prikazana mentalna mapa izraĊena u ovom

programu.

Slika 2.8: Mentalna mapa izraĊena u MindManager-u

Uoĉene prednosti MindManager-a su:

Razni gotovi predlošci za izradu projekata hijerarhijske strukture, što uvelike

olakšava rad poĉetnicima,

Preĉac za dodavanje grana je realiziran na naĉin da se samo klikne na mjesto na

radnoj površini gdje želimo dodati granu,

Mogućnost kreiranja interaktivne prezentacije sadržaja mentalne mape,

25

Snalaženje po radnoj površini i izbornicima je vrlo jednostavno.

Nedostatci:

Preĉac za dodavanje novih grana dodaje grane samo na glavnu ideju,

Veze meĊu granama se lako prekidaju,

Neke funkcije izbornika su nejasne.

2.4.3. Bookvar

Bookvar je besplatna programska podrška za izradu mentalnih mapa izraĊena sa alatom

Visual Studio.

Slika 2.9: Mentalna mapa izraĊena u Bookvar-u

Prednosti:

Jednostavan izgled i izbornici, omogućavaju lako upravljanje,

Ne sadrži nepotrebne funkcije, ikone su lako shvatljive, dakle ne stvara nikakve

zabune pri radu.

Nedostatci:

Oblik i boja grana su podešeni i ne mogu se mijenjati,

Postoji mogućnost izbora izgleda mentalne mape, ali ograniĉena je na samo dva

primjera, plavi i crni.

Nema mnogo funkcionalnosti, možda ĉak i premalo u odnosu na druge programe.

26

2.4.4. Mind42

Mind42 je Internet aplikacija za izradu mentalnih mapa. Na Slici 2.10 je prikazan izgled

mentalne mape napravljene sa ovom aplikacijom.

Slika 2.10: Mentalna mapa izraĊena u Mind42

Prednosti:

Vrlo jednostavan za korištenje i lagan za uĉenje,

Nema nepotrebnih izbornika, tako da ne zahtjeva „traženje“ funkcija po ekranu,

Klikom na centralnu misao, otvara se jednostavan izbornik koji nudi osnovne

funkcije poput dodavanja grane, mijenjanja boje, brisanja. Izbornik je prikazan na

Slici 2.11:

Slika 2.11: Osnovne funkcije za upravljanje mentalnom mapom u programu Mind42

Nedostatci:

Nemogućnost mijenjanja boje grana,

Upadljiva crna alatna traka na vrhu radne površine koja nameće da pozovemo nove

korisnike,

Odabir crne i tamnoplave boje izbornika.

27

2.4.5. Mindomo

Mindomo je Internet aplikacija bazirana na Flash tehnologiji. Izgledom podsjeća na

Microsoft Office paket.

Slika 2.12: Mentalna mapa izraĊena u Mindom-u

Prednosti:

Pri pokretanju aplikacije, postoji video sa uputama o radu,

Spremanje i organizacija gotovih mentalnih mapa je bogata funkcijama kao što su

razmjenjivanje sa drugim korisnicima, objava mapa na internetu, pretraživanje i

filtriranje,

Mindomo od svih navedenih programa jedini ima ugraĊenu funkciju razmjene

iskustava meĊu korisnicima.

Nedostatci:

Radni prostor, za razliku od dosada opisanih aplikacija, radi velikih izbornika

zauzima manje mjesta na ekranu.

Zbog velikog broja funkcija, izrada mape može postati kompliciranija od

oĉekivanog.

Na lijevoj strani radne površine, izbornici su položeni vertikalno i teško je na prvi

pogled zakljuĉiti o ĉemu se radi.

28

2.4.6. Wisemapping

Wisemapping je takoĊer Internet aplikacija temeljena na tehnologijama HTML5 i Java

programskom jeziku.

Slika 2.13: Mentalna mapa izraĊena u Wisemapping-u

Prednosti:

Od svih navedenih primjera, Wisemapping je izgledom najprivlaĉniji i najlakši za

izradu mentalnih mapa.

Nema nepotrebnih funkcija, a one koje ima su dobro organizirane, lako uoĉljive i

jednostavne za korištenje. Jednostavnost glavnog izbornika je prikazan na Slici

2.14:

Slika 2.14: Izbornik programa Wisemapping

Iako ovu aplikaciju smatram najboljom od svih navedenih, ima dva velika nedostataka, a to

su:

Mogućnost dodavanja novih grana samo na glavnu granu, dakle nisam uspjela do

kraja izraditi mentalnu mapu koja ima više od jednog nivoa,

Nemogućnost promjene boje grane, što je vrlo bitno kod mentalnih mapa.

29

3. Eksperimentalni dio

U ovom dijelu rada će korištenjem Internet tehnologija biti izraĊena Internet aplikacija za

izradu mentalnih mapa. Izgled aplikacije je odabran temeljem uoĉenih prednosti i

nedostataka opisanih programa za izradu mentalnih mapa. Važne karakteristike u izboru

izgleda su olakšavanje rada korisnicima u smislu jednostavnosti i brzine pri izradi

mentalnih mapa, te jednostavna radna površina, radi lakšeg snalaženja.

Cilj ovog eksperimentalnog dijela rada je napraviti aplikaciju za izradu mentalnih mapa

koja će pojednostavniti i olakšati korisnicima izradu mentalnih mapa, u svrhu dijeljenja

znanja.

Mentalna mapa bi trebala imati osnovne funkcionalnosti kao što su:

Izbornici za upravljanje dokumentom: kreiranje, otvaranje postojećeg, spremanje i

zatvaranje dokumenta;

Mogućnost upravljanja osnovnim stilovima kao što su mijenjanje boje grane, teksta

i veliĉine fonta;

Jednostavan naĉin dodavanja novih grana i podgrana,

Jednostavno upravljanje mentalnom mapom i prostorom za crtanje.

S obzirom da je važna karakteristika mentalne mape razliĉita boja pojedinih grana, ideja je

da se boje na grane automatski primjenjuju pri samom dodavanju grane, a da se takoĊer po

potrebi mogu i promijeniti. Time bi se skratilo vrijeme ureĊivanja mentalne mape.

Radi kompliciranosti izvedbe, rješenje je temeljeno na otvorenom kodu.

Otvoreni kod (eng. Open source) je onaj kod koji je objavljen i dostupan javnosti, te

dopušta kopiranje, mijenjanje i ponovnu distribuciju, bez plaćanja naknade. Razvija se

suradnjom zajednice, koja se sastoji od individualnih programera kao i velikih

organizacija.

30

3.1. Odabrane tehnologije

Internet tehnologije su odabrane prvenstveno iz razloga sve veće mobilnosti ljudi –

internet stranici se može pristupiti s bilo kojeg mjesta u bilo koje vrijeme i neovisna je o

platformi. Drugi razlog je što nema nepotrebnog gubljenja vremena za skidanje i

instalaciju programa, što opet podrazumijeva brži pristup aplikaciji. Izrada internet

tehnologijom takoĊer drugim ljudima omogućava lakši pristup neĉijoj mentalnoj mapi u

svrhu dijeljenja znanja.

Za osnovni prikaz sadržaja korišten je HTML5, iz razloga što ima veće mogućnosti od

HTML4, te je s potrebnim predznanjem vrlo jednostavan za uĉenje. Za samu izradu

aplikacije u smislu kodiranja, korišten je JavaScript zajedno sa bibliotekom jQuery i

njenim dodacima, te JSON format za pojedine funkcije.

3.1.1. HTML5

HTML5 je jezik za strukturiranje i prikaz sadržaja za World Wide Web, temeljne

tehnologije interneta. To je peta revizija HTML (eng. HyperText Markup Language)

standarda koji je kreiran 1990.g., a 1997.g. standardiziran kao HTML4, koja je još uvijek u

razvoju i još nije službena, ali ju ipak podržava većina Internet pretraživaĉa. Cilj HTML5

jezika je spajanje HTML4, XHTML, te JavaScript jezika [14]. HTML5 je rezultat suradnje

W3C1 i WHATWG

2 zajednica.

Slika 3.1: HTML5 logo

HTML5 je nastao kao posljedica opažanja da su HTML i XHTML mješavina znaĉajki sa

razliĉitim specifikacijama. To je pokušaj definiranja jedinstvenog jezika koji može biti

napisan i u HTML i XHTML sintaksi.

1 W3C (World Wide Web Consortium) je internacionalna zajednica za razvijanje internet standarda. http://www.w3.org/

2 WHATWG (Web Hypertext Application Technology Working Group) je zajednica za razvoj HTML-a i povezanih

tehnologija. http://www.whatwg.org/

31

Za razliku od ranijih poboljšanja HTML-a, nove specifikacije daju mnogo bolji pogled na

ono što je potrebno za razvoj Internet stranica i web programiranje. HTML5 se uĉinkovito

može podijeliti na sljedeće segmente [15]:

Osnovno strukturiranje Internet stranice,

Vizualni prikazi,

Grafiĉki alati,

Bogata multimedijska podrška i

Poboljšanja JavaScript-a.

Osnovna znaĉajka HTML5 jezika je pojednostavljenje i izbjegavanje nepotrebne

kompleksnosti.

Na primjer, DOCTYPE element koji definira tip dokumenta, u HTML4 je bio :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">,

dok je u HTML5 DOCTYPE element pojednostavljen na:

<!DOCTYPE html>.

Isto tako, deklaracija znakova u HTML4 je bila:

<meta http-equiv="Content-Type" content="text/html; charset=utf-

8">,

a u HTML5 je pojednostavljena na:

<meta charset="utf-8">.

HTML5 uvodi nove elemente radi lakše kontrole koda. Novi elementi pokrivaju sljedeće

funkcije:

Podjelu sadržaja Internet stranice na „blokove“,

Upravljanje multimedijom i

Strukturiranje formi.

32

Podjela sadržaja Internet stranice na blokove u HTML-u se tradicionalno postiže

korištenjem <DIV> elementa ili kompleksnim tablicama. Novi elementi omogućavaju

jednostavno umetanje dijelova sadržaja u Internet stranicu. TakoĊer su imenovani na naĉin

da se lako može zakljuĉiti što se postiže njihovom upotrebom. Neki od elemenata za

osnovnu strukturu stranice su:

<HEADER>: zaglavlje Internet stranice.

<SECTION>: element koji zaokružuje znaĉajan dio stranice, na isti naĉin kao što je

poglavlje znaĉajan dio knjige.

<ARTICLE>: koristi se za identificiranje sadržaja Internet stranice.

<ASIDE>: uloga ovog elementa je opis sadržaja koji nije dio glavnog sadržaja

Internet stranice, ali je povezan s njim. Nalazi se sa strane.

<FOOTER>: podnožje Internet stranice koje najĉešće ukljuĉuje izjavu o zaštiti

prava (eng. copyright).

<NAV>: identificira grupu poveznica koje zajedno tvore navigaciju Internet

stranice.

Uloga ovih elemenata je poboljšani opis odreĊenih dijelova dokumenta. Može se usporediti

sa pisanjem dokumenta u Microsoft Office Word-u: tipiĉan dokument se sastoji od dijelova

sadržaja koji se mogu podijeliti u odlomke, zaglavlje i podnožje.

Slika 3.2: Elementi za osnovnu strukturu stranice

33

Kao podršku upravljanja multimedijom, HTML5 je uveo dva nova elementa, <VIDEO> i

<AUDIO>, koji omogućavaju funkcije automatskog pokretanja, kontrolu vezanu za

pauziranje, veliĉinu i širinu slike, te ponavljanje prikaza. Ovim elementima se upravlja

pomoću JavaScript-a.

Promjena vezana za forme je vezana za nove tipove atributa unutar <INPUT> elementa.

Neki od njih su:

<input type=“search”>: specificiranje elementa pretrage,

<input type=“color”>: konverzija unosa u vizualni izbor boje,

<input type=“tel”>: formatiranje unosa u telefonski broj,

<input type=“url”>: specifikacija web adrese,

<input type=“email”>: specifikacija e-mail adrese.

Osim podrške izgledu web stranice, multimediji i upravljanju formama, HTML5 je uveo i

nove znaĉajke vezane za API [16].

API (eng. Application Programming Interface) je odreĊeni skup pravila i specifikacija koji

nudi suĉelje za komunikaciju izmeĊu razliĉitih programa i olakšava njihovu interakciju,

sliĉno naĉinu na koji korisniĉko suĉelje olakšava interakciju izmeĊu ljudi i raĉunala. API

može biti kreiran za aplikacije, biblioteke, operativne sustave itd., kao naĉin definiranja

njihovog vokabulara [17].

Kada se koristi u kontekstu razvoja Internet stranica, API je definiran kao set HTTP poruka

o zahtjevima, kao i prikladnim odgovorima na te zahtjeve, te je obiĉno u XML (eXtensible

Markup Language) ili JSON (JavaScript Object Notation) formatu.

Nove API znaĉajke HTML-a 5 znaĉajne za ovaj rad su:

Canvas i

Spremište podataka (eng. Web Storage).

Canvas omogućava dinamiĉno stvaranje i generiranje grafike, tablica, slika i animacija.

Korištenjem Canvas-a na Internet stranici, kreira se pravokutnik kojemu se može

specificirati željena visina, širina i ostali atributi poput boje pozadine, rubova itd.

Manipuliranjem Canvas-om pomoću JavaScript-a omogućeno je dodavanje grafiĉkih ili

34

tekstualnih prikaza, animacija, te crtanje. U nastavku su navedena dva primjera korištenja

Canvas-a.

<canvas height="200" width="200"></canvas>

Kod 3.1: Dodavanje Canvas elementa koji kreira pravokutnik visine i širine 200px

<canvas id="diagonal" style="border: 1px solid;" width="200"

height="200"></canvas>

<script>

function drawDiagonal() {

var canvas = document.getElementById('diagonal');

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(70, 140);

context.lineTo(140, 70);

context.stroke();

}

window.addEventListener("load", drawDiagonal, true);

</script>

Kod 3.2: JavaScript kod za crtanje dijagonalne linije unutar Cavas elementa

Slika 3.3: Canvas i dijagonalna linija kao rezultat Koda 3.2

Canvas objektu se pristupa referencom na odreĊenu ID vrijednost koja je u ovom sluĉaju

„diagonal“. Zatim se kreiraju context varijable i poziva se getContext metoda

koja prosljeĊuje pozvani Canvas. Dijagonalna linija se kreira pomoću tri metode:

beginPath(), moveTo() i lineTo(), koje prosljeĊuju poĉetnu i krajnju

koordinatu linije, a tek se onda metodom context.stroke() crta linija.

Na sliĉne naĉine se mogu primijeniti razne transformacije, kao što su mijenjanje boje

linija, pozadine, crtanje krivulja, umetanje slika, teksta, raznih uzoraka, sjenĉanje itd. Može

35

se zakljuĉiti da HTML5 Canvas API pruža jednostavan ali uĉinkovit naĉin za kreiranje i

modificiranje izgleda Internet aplikacija.

Druga API znaĉajka važna za ovaj rad je HTML5 spremnik.

Trajno spremište podataka je podruĉje gdje su desktop aplikacije oduvijek imale prednost

nad Internet aplikacijama. Njima operativni sustav pruža mjesta za spremanje i vraćanje

podataka, kao što su registry, INI datoteke, XML datoteke ili druga mjesta ovisno o

platformi. Za Internet aplikacije su napravljeni cookie-ji koji se mogu koristiti za trajno

spremanje male koliĉine podataka. No oni imaju nekoliko velikih nedostataka:

Ukljuĉeni su u svaki HTTP zahtjev, te usporavaju Internet aplikaciju nepotrebnim

stalnim prijenosom istih podataka;

Šalju nezaštićene podatke preko interneta i

Ograniĉeni su na 4 KB podataka, što je dovoljno za usporavanje aplikacije, ali

nedovoljno da bi bilo korisno za spremanje podataka.

HTML5 spremnik koji se ĉesto naziva i DOM spremnik, je API koji olakšava ĉuvanje

podataka. Dopušta spremanje veće koliĉine podataka na klijentskoj strani, podaci ostaju

saĉuvani i nakon osvježavanja stranice, te se ne šalju poslužitelju, dakle ne usporavaju

Internet aplikaciju.

Dakle, sada se podaci mogu spremiti direktno u Internet pretraživaĉ na strani klijenta, te im

se može pristupiti u bilo kojem trenutku, ĉak i nakon zatvaranja Internet pretraživaĉa.

Važno je napomenuti da HTML5 spremnik podržavaju svi Internet pretraživaĉi.

Postoje dvije vrste spremnika, to su sessionStorage i localStorage. Razlika je u tome što

sessionStorage ĉuva podatke samo dok se pretraživaĉ ne zatvori, a localStorage ih trajno

ĉuva, ĉak i pri ponovnom pokretanju Internet pretraživaĉa. Ova razlika je prikazana u

Tablici 3.1:

36

sessionStorage localStorage

Vrijednosti su spremljene samo

dok je otvoren pretraživaĉ u kojem

se nalaze.

Vrijednosti su vidljive samo unutar

prozora u kojem su kreirane.

Vrijednosti ostaju spremljene i

nakon zatvaranja pretraživaĉa.

Vrijednostima se može pristupiti

preko bilo kojeg prozora u istom

pretraživaĉu.

Tablica 3.1: Razlika izmeĊu sessionStorage i localStorage

HTML5 spremnik je, jednostavno reĉeno, naĉin na koji Internet stranice lokalno spremaju

key/value parove, unutar klijentskog Internet pretraživaĉa. Dakle, podaci se spremaju

pomoću kljuĉa s odreĊenim imenom, te se na isti naĉin i vraćaju. Podaci mogu biti bilo

kojeg tipa koji je podržan od strane JavaScript-a, a spremaju se u obliku znakova (string-

ova). Za spremanje podataka koji nisu znakovi, potrebna je funkcija parse() koja će

pretvoriti odreĊene podatke u oblik prikladan za JavaScript [18].

HTML5 spremnik ima odreĊene funkcije i atribute koji su detaljnije opisani u nastavku, a

to su:

Atribut length specificira koliko je parova vrijednosti kljuĉa trenutno spremljeno

u storage objektu.

Key(index) je funkcija koja dopušta vraćanje danog kljuĉa. Prvi kljuĉ ima

index(0), a zadnji ima index(length-1). Kada je kljuĉ jednom vraćen,

može se koristiti za pristup njegovoj odgovarajućoj vrijednosti. Kljuĉevi zadržavaju

svoje indekse sve dok su prisutni svi njegovi prethodnici, u suprotnom se mijenjaju.

getItem(key) funkcija je jedan od naĉina vraćanja vrijednosti danog kljuĉa.

Drugi naĉin je referenca na kljuĉ kao polje indeksa u storage objektu. U oba

sluĉaja, ako kljuĉ ne postoji u spremniku, bit će vraćena vrijednost null.

setItem(key,value) funkcija postavlja u spremnik vrijednost odreĊenog

kljuĉa ili zamjenjuje postojeću vrijednost ako postoji pod istim imenom.

removeItem(key) funkcija uklanja kljuĉ odreĊene vrijednosti iz spremnika.

37

Clear() funkcija uklanja sve vrijednosti iz liste spremnika.

3.1.2. JavaScript

JavaScript je objektno orijentirani, skriptni programski jezik koji se izvršava na klijentskoj

strani u Internet pretraživaĉu. Pruža poboljšano korisniĉko suĉelje i dinamiĉke Internet

stranice.

Originalno je razvijen od strane Brendana Eich-a iz tvrtke Netscape pod imenom Mocha,

zatim je preimenovan u LiveScript, a na kraju u JavaScript. LiveScript je bilo službeno ime

jezika kada ga je Netscape Navigator 2.0 objavio u rujnu 1995.g. kao beta verziju, no

preimenovan je u JavaScript u prosincu iste godine kao posljedica dogovora izmeĊu Sun

Microsystems i Netscape-a [19].

Jedna od najĉešćih zabluda je da je JavaScript pojednostavljena verzija Java programskog

jezika koji je kreiran od strane Sun Microsystems-a. Sintaksno, JavaScript podsjeća na

Javu u programskim konstrukcijama kao što su npr. while petlja ili && operator. No ova

dva jezika nisu povezana, iako su sintaksno sliĉni te se oba mogu interpretirati u Internet

pretraživaĉu.

Osnovni JavaScript jezik podržava primitivne vrste podataka kao što su brojevi, znakovi i

Boolean vrijednosti. TakoĊer ukljuĉuje podršku za polja, datume i objekte za regularne

izraze. JavaScript se izvršava na klijentskoj strani jer je njegov prevoditelj ukljuĉen u

Internet pretraživaĉ. Ovo je i najĉešći oblik upotrebe JavaScript-a, stoga je proširen sa

objektima koji dopuštaju skripte za interakciju sa korisnicima i kontroliranje Internet

pretraživaĉa i dokumenata u njemu. Ovako orijentirani jezik kombinira mogućnosti

skriptiranja JavaScript interpretera sa Document Object Model-om (skraćeno DOM) koji je

definiran od strane Internet pretraživaĉa. Dokumenti mogu sadržavati skripte, a one mogu

koristiti DOM za mijenjanje dokumenata ili kontroliranje Internet pretraživaĉa koji

prikazuje dokument. Drugim rijeĉima, JavaScript daje dinamiku statiĉnim Internet

sadržajima, a u nastavku je navedeno nekoliko primjera [20]:

Stvaranje vizualnih efekata koji vode korisnika i pomažu mu u navigaciji na

Internet stranici (npr. image rollovers),

Sortiranje stupaca tablice za pojednostavljenje pretrage,

38

Sakrivanje odreĊenog sadržaja i njegovo postupno prikazivanje korisniku,

Direktna komunikacija s poslužiteljem što omogućava prikaz novih informacija bez

osvježavanja stranice.

Osim što se koristi u Internet pretraživaĉima, JavaScript može biti ukljuĉen i u druge

aplikacije, tako da pruži korisnicima podršku za prilagoĊavanje aplikacije svojim

potrebama. Kao primjer, Mozilla Firefox koristi JavaScript skripte za kontroliranje

korisniĉkog suĉelja.

Postoje dva JavaScript interpretera otvorenog koda: SpiderMonkey napravljen u C

programskom jeziku koji služi za dodavanje skripti u C aplikaciju i Rhino napravljen u

Javi za dodavanje skripti u Java aplikaciju.

3.1.3. JQuery

Za jednostavniji razvoj Internet aplikacija pomoću JavaScripta, postoji niz biblioteka koje

pružaju sve potrebne funkcije i olakšavaju razvoj dinamiĉnih suĉelja. Biblioteke postoje od

samog nastanka JavaScripta, a naglim razvojem tehnologije, korisnicima nude sve više

mogućnosti.

Gotovo sve JavaScript biblioteke su objavljene pod otvorenom licencom za distribuciju,

upotrebu i mijenjanje. Jedna od takvih biblioteka korištena u ovom radu je jQuery.

JQuery je JavaScript biblioteka dizajnirana za pojednostavljenje HTML skriptiranja na

klijentskoj strani.

Objavljena je 2006.g. u BarCamp-u NYC od strane John Resiga, a koristi ju više od 43%

od 10.000 najposjećenijih web stranica, što vodi do zakljuĉka da je jQuery danas

najpopularnija JavaScript biblioteka, iz jednostavnog razloga što je lagana za korištenje i

zauzima malo memorije na raĉunalu. Otvorenog je koda pod MIT licencom3 i GNU

javnom licencom4.

3 MIT licenca je otvorena licenca kreirana na Massachusetts Institute of Technology (MIT) koja dopušta ponovnu

upotrebu koda pod postavljenim uvjetima.

4 GNU licenca (General Public License) je najpoznatija licenca za otvorenu programsku podršku, kreirana od strane

Richarda Stallmana, a o kojoj se danas brine Free Software Foundation.

39

Sintaksa jQuery biblioteke je dizajnirana da bi olakšala navigaciju unutar dokumenta,

selektiranje DOM elemenata, kreiranje animacija i dogaĊaja. TakoĊer dopušta proširivanje

svojih funkcionalnosti pomoću dodataka (eng. plugins) za JavaScript biblioteke, koje

omogućavaju stvaranje naprednih efekata. Ti dodaci pokrivaju veliki dio funkcionalnosti

kao što su razne Internet usluge, mreže podataka, dinamiĉne liste, XML i XSLT alati,

dogaĊaji itd.

JQuery pruža razvoj dinamiĉkih web stranica i Internet aplikacija, uz minimalan broj linija

koda, što znaĉi da je biblioteka mala, što je njena velika prednost [21].

JQuery biblioteka se nalazi u jednom JavaScript dokumentu, a sadrži sljedeće znaĉajke

[22]:

Selektiranje HTML elemenata: jQuery selektori omogućavaju manipulaciju i

selektiranje HTML elemenata kao grupe ili kao jedinstvenog elementa.

Manipulacija HTML elementima: jQuery sadrži metode (funkcije) za manipulaciju

i mijenjanje HTML elemenata i atributa.

Manipulacija CSS-om: css() metoda koja može izvršavati tri razliĉita zadatka, a

to su vraćanje trenutne vrijednosti, postavljanje novog svojstva i vrijednosti te

postavljanje više svojstava i vrijednosti CSS elementima.

HTML događaji: metode koje se koriste za registriranje ponašanja koja će

pretraživaĉ poprimiti u interakciji s korisnikom, te manipulacija ovim ponašanjima.

JavaScript efekti i animacije: jQuery pruža nekoliko naĉina za dodavanje animacija

Internet stranici. Ukljuĉene su jednostavne, standardne animacije koje se ĉesto

koriste, kao i mogućnost njihova mijenjanja u druge svrhe.

Osnovna sintaksa jQuery biblioteke glasi:

$(selector).action()

Sastoji se od:

- Znaka dolar ($) koji definira jQuery,

- Selektora (selector) za traženje HTML elemenata po imenu, imenu atributa ili

sadržaju, i

40

- jQuery akcije (action()) koje će biti izvršena nad elementima.

3.1.4. JSON

JSON ili JavaScript Object Notation je pojednostavljeni otvoreni standard dizajniran za

razmjenu podataka. Izveden je iz JavaScript jezika, baziran na tekstu, jednostavan za

ĉitanje i pisanje, neovisan o platformi, a služi za prikaz jednostavnih struktura podataka i

objekata. Iako je povezan s JavaScript-om i najĉešće se zajedno koriste, samostalan je

jezik.

JSON format je izvorno specificirao i popularizirao Douglas Crockford, a opisan je u RFC

4627 dopisu, koji daje informacije Internet zajednici, no ne odreĊuje standarde.

Službeni format JSON datoteke na Internetu (eng. Internet media type) je application/json,

a ekstenzija tekstualne datoteke je *.json.

JSON format se ĉesto koristi za konverziju i prijenos strukturiranih podataka preko mreže.

Primarno se koristi za prijenos podataka izmeĊu poslužitelja i Internet aplikacije, kao

alternativa XML-u [23].

JSON je baziran na dvije strukture [24]:

NeureĊena lista name/value parova. U razliĉitim jezicima, ovo je realizirano kao

objekt, struktura, itd.

UreĊena lista vrijednosti. U većini jezika, ovo je realizirano kao polje, vektor, lista

ili slijed.

Drugim rijeĉima, JSON podržava osnovne tipove podataka kao što su brojevi, znakovi,

Boolean vrijednosti, polja, objekte, te null vrijednost. Ne podržava druge tipove podataka

kao što su datumi, regularni izrazi, funkcije itd. Oni moraju biti prezentirani u nekom

drugom formatu a zatim konvertirani na univerzalan naĉin da ga razumiju oba jezika.

S obzirom da je JSON izveden iz JavaScript-a, moguće ga je prevesti u JavaScript objekt,

pozivom eval() funkciji. No ipak se preporuĉuje korištenje JSON prevoditelja koji je

uĉinkovitiji i sigurniji, a takoĊer je ukljuĉen u moderne Internet pretraživaĉe kao što su

Mozilla Firefox 4 i Internet Explorer 8.

Kako je JSON alternativa XML-u, primjereno je usporediti ih. XML je tekstualni zapis

izveden iz SGML (Standard Generalized Markup Language). U usporedbi sa SGML-om,

41

XML je jednostavan, no u usporedbi s XML-om, jednostavniji je JSON, koji ima sve

prednosti XML-a ali je uz to primjereniji za razmjenu podataka [25]. U Tablici 3.2 je

prikazana detaljnija usporedba JSON-a i XML-a:

Karakteristika XML JSON

Tipovi podataka Za dodavanje tipova podataka

potrebna je XML shema.

Ima mogućnost prikaza

strukturiranih podataka kroz

polja i objekte

Podrška za polja Koriste se dogovorom, npr.

upotrebom vanjskog elementa koji

modelira sadržaj polja kao

unutarnje elemente.

UgraĊena podrška za polja

Podrška za

objekte

Koriste se dogovorom, ĉesto kroz

mješavinu atributa i elemenata

UgraĊena podrška za objekte

preko name/value parova

Podrška za null Zahtjeva upotrebu xsi:nil na

elementima te uvoz odgovarajućih

namespace-a

Prepoznaje null vrijednosti

Komentari Podržani i dostupni kroz API-je Nisu podržani

Namespace Podržani, eliminiraju rizik od

mogućnosti više istih imena i

dopuštaju proširenje XML

standarda

Nije podržano, više istih imena

se izbjegava gniježĊenjem

objekata ili korištenjem

prefiksa u imenu

Formatiranje Kompleksno, zahtjeva veliki trud

pri mapiranju podataka u XML

elemente i atribute

Jednostavno, pruža direktnije

mapiranje podataka;

Nedostatak je nepostojanje

date/time funkcija

42

Karakteristika XML JSON

Veličina Sintaksno duži Sažeta sintaksa;

Prevođenje u

JavaScript

Zahtjeva XML DOM

implementaciju i dodatni kod

Korištenjem eval() funkcije

Učenje Zahtjeva znanje XML sheme,

XSLT-a, XML namespaces-a,

DOM-a itd.

Jednostavna tehnologija;

Lak za uĉenje sa predznanjem

JavaScript-a

Tablica 3.2: Razlika izmeĊu XML-a i JSON-a

U nastavku je, u svrhu usporedbe, naveden primjer JSON koda, te isti primjer u XML-u:

JSON:

{"menu": {

"header": "Preglednik slika",

"items": [

{"id": "Otvori"},

{"id": "OtvoriNovo", "label": "Otvori Novo"},

null,

{"id": "Kvaliteta"},

{"id": "Pauziraj"},

null,

{"id": "Pretraga"},

{"id": "Kopiraj"},

{"id": "SpremiKao", "label": "Spremi Kao…"},

null,

{"id": "Pomoc"},

]

}}

43

XML:

<menu>

<header>Preglednik slika</header>

<item action="Otvori" id="Otvori">Otvori</item>

<item action="OtvoriNovo" id="OtvoriNovo">Otvori

Novo</item>

<separator/>

<item action="Kvaliteta" id="Kvaliteta">Kvaliteta</item>

<item action="Pauza" id="Pauza">Pauziraj</item>

<separator/>

<item action="Pretraga" id="Pretraga">Pretraga</item>

<item action="Kopiraj" id="Kopiraj">Kopiraj</item>

<item action="SpremiKao" id="SpremiKao">Spremi

Kao…</item>

<separator/>

<item action="Pomoc" id="Pomoc">Pomoc</item>

</menu>

U ovom primjeru se može uoĉiti jednostavnost JSON koda u odnosu na XML, gdje su

vrijednosti action i label potrebne samo ako su razliĉite od id vrijednosti, dok se

kod XML-a ne smiju izostaviti.

44

3.2. Realizacija

Upotrebom opisanih tehnologija, napravljena je aplikacija za izradu mentalnih mapa, koja

je opisana u nastavku.

Kao što je već spomenuto, na odabir izgleda i funkcionalnosti su utjecali prednosti i

nedostatci postojećih programa za izradu mentalnih mapa. Radna površina treba biti

jednostavna, gdje izbornici ne zauzimaju mnogo prostora, upravljanje izradom mentalne

mape pojednostavljeno, kao i oblikovanje postojeće mape.

Na Slici 3.4 je prikazana radna površina koja se sastoji od:

Prostora za crtanje mentalne mape,

Alatne trake,

Statusne trake i

Pomoćnih prozora koji služe za oblikovanje i navigaciju.

Slika 3.4:Radna površina

Za poĉetak rada dovoljno je pokrenuti aplikaciju, dakle novi dokument se otvara

automatski, a sastoji se od glavne grane sa natpisom „Nova mapa“. Ukoliko se natpis na

grani ne promijeni, ime spremljenog dokumenta će biti „Novi dokument“, dok će u

drugom sluĉaju biti nazvan po tekstu glavne grane.

45

Alatna traka, koja je prikazana na Slici 3.5, na lijevoj strani sadrži osnovne funkcije za

upravljanje dokumentom, koje ukljuĉuju kreiranje novog, otvaranje postojećeg, spremanje

te zatvaranje dokumenta. Na desnoj strani se nalaze alati za izradu i upravljanje mapom:

dodavanje i brisanje grane, poništavanje akcije, te kopiranje, rezanje i lijepljenje.

Gumbi za poništavanje su onemogućeni sve dok korisnik ne napravi odreĊenu akciju.

Slika 3.5: Alatna traka

Na dnu radne površine nalazi se statusna traka, koja ima dva gumba za upravljanje

pomoćnim prozorima, koji imaju mogućnost sakrivanja i pomicanja radi bolje preglednosti

radne površine.

Slika 3.6: Statusna traka

Pomoćni prozor navigacije služi za zumiranje i premještanje mape po radnoj površini, dok

prozor za oblikovanje sadrži funkcije za oblikovanje kao što su veliĉina, stil i boja teksta,

te boja grana.

Slika 3.7: Pomoćni prozori za navigaciju i oblikovanje

Kreiranje nove grane se može izvršiti na dva naĉina:

klikom na gumb „Dodaj“ u alatnoj traci, ĉime se automatski kreira nova grana

odreĊene duljine, pozicije i boje,

klikom na krug koji se nalazi u sredini glavne grane i njegovim povlaĉenjem do

željenog mjesta na radnoj površini. Prelaskom pokazivaĉem miša preko razliĉitih

grana, premješta se i krug te na taj naĉin dopušta jednostavno kreiranje nove grane.

46

Slika 3.8: Kreiranje nove grane

Važna karakteristika ove aplikacije je automatska primjena razliĉitih boja na grane pri

dodavanju grana. To uvelike olakšava ureĊivanje dokumenta, a po potrebi se ista boja

može i promijeniti. Naravno, boja grane se automatski primjenjuje na sve njene

nasljednike.

Druga karakteristika je vezana za preĉace tipkovnice, koji su zamjerka postojećim

programima za izradu mentalnih mapa. Stoga su preĉaci za tipkovnicu postavljeni kao:

Dodaj – Insert, Izbriši – Delete, Kopiraj – Ctrl+C itd.

Gotova mentalna mapa se sprema u HTML5 spremnik unutar Internet pretraživaĉa, te

ostaje spremljena sve dok je se ne izbriše, preko izbornika za otvaranje postojećih mapa

koji sadrži opcije za otvaranje ili brisanje:

Slika 3.9: Izbornik za otvaranje postojeće mape

Na Slici 3.10 je prikazana mentalna mapa izraĊena u opisanom programu:

47

Slika 3.10: Mentalna mapa

48

3.3. Primjeri koda za specifične zadaće

Crtanje mentalne mape se realizira na naĉin da se korisniku omogući interakcija sa mapom.

Drugim rijeĉima, prostor za crtanje mora reagirati na korisnikove akcije poput dodavanja

nove grane, brisanja postojeće grane, klikanje na granu itd.

3.3.1. Označavanje grane

Pri oznaĉavanju grane, prvo se provjerava dali je grana već oznaĉena, jer nema svrhe dva

puta oznaĉavati istu. U sluĉaju da nije, prvo se ukloni oznaka sa prethodno oznaĉene grane,

a zatim se oznaĉi željena grana, te se objavljuje dogaĊaj da je grana oznaĉena.

var selectNode = function(node) {

if (selectedNode === node) {

return;

}

if (selectedNode) {

view.unhighlightNode(selectedNode);

}

view.highlightNode(node);

selectedNode = node;

eventBus.publish(mindmaps.Event.NODE_SELECTED, node);

};

Kod 3.3: Oznaĉavanje grane

Prilikom izvršavanja funkcije za oznaĉavanje grane, pozivaju se dvije funkcije:

highlightNode() i unhighlightNode(), koje kao varijablu imaju jQuery objekt

koji sadrži tekst napisan na grani, te identifikaciju grane, a služe za dodavanje i uklanjanje

klase „selected“, dakle sudjeluju u oznaĉavanju grane.

this.highlightNode = function(node) {

var $text = $getNodeCaption(node);

$text.addClass("selected");

};

this.unhighlightNode = function(node) {

var $text = $getNodeCaption(node);

$text.removeClass("selected");

};

Kod 3.4: Funkcije highlightNode() i unhighlightNode()

49

3.3.2. Kreiranje grane

Klikom na gumb „Dodaj“, poziva se funkcija za kreiranje grane sa automatskom

pozicijom. Potrebno je provjeriti dali se nova grana dodaje na glavnu ili sporednu granu,

jer o tome ovisi izbor boje.

S obzirom da glavna grana ima null vrijednost, odnosno nema vrijednost, provjera dali je

prethodna grana glavna, vrši se njenom usporedbom sa null:

mindmaps.Node.prototype.isRoot = function() {

return this.parent === null;

};

U sluĉaju da je prethodna grana glavna, nova grana će imati sluĉajno odabranu boju,

odnosno:

var branchColor = mindmaps.Util.randomColor();

dok će u drugom sluĉaju naslijediti boju glavne grane:

var branchColor = parent.branchColor;

TakoĊer, u sluĉaju da prethodna grana nije glavna, potrebno je provjeriti dali već ima

nasljednika, jer o tome ovisi pozicija nove grane. To se vrši usporedbom prethodne grane

sa brojem nasljednika:

mindmaps.Node.prototype.isLeaf = function() {

return this.children.size() === 0;

};

Ako prethodna grana nema nasljednika, nova se dodaje u sredinu, dok se u drugom sluĉaju

dodaje s pomakom prema gore ili dolje.

Sliĉno je kod odabira duljine grane, koji se takoĊer odreĊuje Math.random() metodom,

jedina razlika je, da će grana biti dulja u sluĉaju ako je prethodna grana glavna.

mindmaps.action.CreateAutoPositionedNodeAction = function(parent) {

if (parent.isRoot()) {

var branchColor = mindmaps.Util.randomColor();

var leftRight = Math.random() > 0.49 ? 1 : -1;

var topBottom = Math.random() > 0.49 ? 1 : -1;

var x = leftRight * (100 + Math.random() * 250);

var y = topBottom * (Math.random() * 250);

} else {

var branchColor = parent.branchColor;

50

var leftRight = parent.offset.x > 0 ? 1 : -1;

var x = leftRight * (150 + Math.random() * 10);

if (parent.isLeaf()) {

var max = 5, min = -5;

} else {

var max = 150, min = -150;

}

var y = Math.floor(Math.random() * (max - min + 1) +

min);

}

var node = new mindmaps.Node();

node.branchColor = branchColor;

node.shouldEditCaption = true;

node.offset = new mindmaps.Point(x, y);

return new mindmaps.action.CreateNodeAction(node, parent);

};

Kod 3.5: Kreiranje nove grane s automatskom pozicijom

Grana koja će biti kreirana, definirana je kroz konstruktor za stablo mape koje se sastoji od

grana: svaka nova grana ima identifikacijsko ime, kao roditelju joj je vrijednost postavljena

na null, a takoĊer nema ni nasljednike:

mindmaps.NodeMap = function() {

this.nodes = {};

this.count = 0;

};

Nova grana ima natpis „Ideja“, slovima veliĉine 15px i crne boje, kao što je prikazano na

Slici 3.11:

Slika 3.11: Kreiranje nove grane

mindmaps.Node = function() {

this.id = mindmaps.Util.getId();

this.parent = null;

51

this.children = new mindmaps.NodeMap();

this.text = {

caption : "Ideja",

font : {

style : "normal",

weight : "normal",

decoration : "none",

size : 15,

color : "#000000"

}

};

this.offset = mindmaps.Point.ZERO;

this.collapseChildren = false;

this.branchColor = "#000000";

};

Kod 3.6: Konstruktor za novu granu

Funkcija opisana u Kodu 3.5 zapravo ne kreira novu granu, već samo odreĊuje kako i gdje

će ona biti pozicionirana, te s kojim vrijednostima. Na kraju, kada je sve postavljeno na

željene vrijednosti, poziva se CreateNodeAction(node, parent) funkcija za

kreiranje nove grane:

mindmaps.action.CreateNodeAction = function(node, parent){

this.execute = function(context) {

var map = context.getMindMap();

map.addNode(node);

parent.addChild(node);

};

this.event = [ mindmaps.Event.NODE_CREATED, node ];

this.undo = function() {

return new

mindmaps.action.DeleteNodeAction(node);

};

};

Kod 3.7: Kreiranje nove grane

Da bi se u mapu dodala nova grana, varijabla map je deklarirana u kontekstu funkcije

getMindMap(), koja vraća dokument mentalne mape:

this.getMindMap = function() {

if (document) {

52

return document.mindmap;

}

};

a zatim unutar njega dodaje novu granu pozivom metodama map.addNode(node); i

parent.addChild(node):

mindmaps.MindMap.prototype.addNode = function(node){

this.nodes.add(node);

var self = this;

node.forEachDescendant(function(descendant) {

self.nodes.add(descendant);

});

};

mindmaps.Node.prototype.addChild = function(node) {

node.parent = this;

this.children.add(node);

};

Na kraju se objavljuje dogaĊaj da je nova grana kreirana this.event = [

mindmaps.Event.NODE_CREATED, node]. Još je potrebno osigurati akciju koja

će se dogoditi ukoliko se dodavanje nove grane poništi, a to je poziv funkciji

DeleteNodeAction(node);, opisanoj u Kodu 3.8, koja ima suprotni uĉinak od

funkcije CreateNodeAction(node, parent) za dodavanje nove grane.

3.3.3. Brisanje grane

Brisanje grane se može vršiti na dva naĉina: klikom na gumb „Izbriši“ na alatnoj traci, ili

preko tipkovnice, kraticom Delete. U oba sluĉaja se objavljuje dogaĊaj:

eventBus.subscribe(mindmaps.Event.DELETE_NODE, function() {

var action = new

mindmaps.action.DeleteNodeAction(self.selectedNode);

self.executeAction(action);

});

koji traži izvršenje akcije brisanja grane:

mindmaps.action.DeleteNodeAction = function(node) {

var parent = node.getParent();

this.execute = function(context) {

if (node.isRoot()) {

53

return false;

}

var map = context.getMindMap();

map.removeNode(node);

};

this.event = [ mindmaps.Event.NODE_DELETED, node, parent ];

this.undo = function() {

return new mindmaps.action.CreateNodeAction(node,

parent);

};

};

Kod 3.8: Brisanje grane

Funkcija DeleteNodeAction(node) prvo vrši provjeru dali je grana koju želimo

obrisati glavna, na isti naĉin kao što je opisano u prethodnom primjeru, dakle usporedbom

grane sa null vrijednosti. Ukoliko želimo izbrisati glavnu granu, funkcija vraća Boolean

vrijednost false, iz razloga što se glavna grana ne može izbrisati. Logiĉki se može

zakljuĉiti da grana koju brišemo mora imati roditelja, stoga se roditelj traži funkcijom koja

vraća traženog roditelja:

mindmaps.Node.prototype.getParent = function() {

return this.parent;

};

Naravno, kao i u prošlom primjeru, varijabla map je deklarirana u kontekstu funkcije

getMindMap(), koja vraća dokument mentalne mape, unutar kojega se izvršava akcija

brisanja grane, map.removeNode(node);:

mindmaps.MindMap.prototype.removeNode = function(node) {

var parent = node.parent;

parent.removeChild(node);

var self = this;

node.forEachDescendant(function(descendant) {

self.nodes.remove(descendant);

});

this.nodes.remove(node);

};

Ovo je zadnja funkcija koja zapravo uklanja granu iz mape. Važno je uoĉiti da brisanjem

grane, takoĊer moramo obrisati i sve njene potomke, ako ih ima:

54

mindmaps.Node.prototype.removeChild = function(node) {

node.parent = null;

this.children.remove(node);

};

mindmaps.Node.prototype.forEachDescendant = function(func) {

this.children.each(function(node) {

func(node);

node.forEachDescendant(func);

});

};

3.3.4. Kopiranje, rezanje i lijepljenje grane

Pri izradi mentalne mape, potreban je meĊuspremnik za akcije kopiranja, rezanja i

lijepljenja grana, koji je u ovom sluĉaju ClipboardController:

mindmaps.ClipboardController = function(eventBus, appModel) {

var node = null;

function doCopy() {

var selected = appModel.selectedNode;

node = selected.clone();

}

function doCut() {

var selected = appModel.selectedNode;

node = selected.clone();

var action = new

mindmaps.action.DeleteNodeAction(selected);

appModel.executeAction(action);

}

function doPaste() {

if (!node) {

return;

}

var selected = appModel.selectedNode;

var action = new

mindmaps.action.CreateNodeAction(node.clone(),

selected);

appModel.executeAction(action);

}

eventBus.subscribe(mindmaps.Event.COPY_NODE, doCopy);

55

eventBus.subscribe(mindmaps.Event.CUT_NODE, doCut);

eventBus.subscribe(mindmaps.Event.PASTE_NODE, doPaste);

};

Kod 3.9: MeĊuspremnik za funkcije kopiranja, rezanja i lijepljenja

Kod kopiranja, rezanja i lijepljenja, pozivaju se funkcije doCopy(), doCut() i

doPaste().

Razlika izmeĊu funkcija doCopy() i doCut() je to što funkcija doCopy() samo

„klonira“ oznaĉenu granu, dok funkcija doCut() uz to što „klonira“ oznaĉenu granu, uz

to još poziva akciju DeleteNodeAction(selected);, opisanu u Kodu 3.8, za njeno

brisanje.

Kao nadopuna ovim funkcijama, potrebna je i funkcija doPaste(), bez koje kopiranje ne

bi imalo smisla, a rezanje bi imalo isti uĉinak kao i brisanje, dakle ne bi bilo potrebno.

Funkcija doPaste() funkcionira na naĉin da poziva funkciju za kreiranje nove grane:

CreateNodeAction(node.clone(),selected);, opisanu u Kodu 3.7, no sa

drugim parametrima, dakle ona ponovo kreira granu koja je bila izrezana, na naĉin da

kreira njenog „klona“.

Samo „kloniranje“ grana, omogućava sljedeća funkcija:

mindmaps.Node.prototype.clone = function() {

var clone = new mindmaps.Node();

var text = {

caption : this.text.caption

};

var font = {

weight : this.text.font.weight,

style : this.text.font.style,

decoration : this.text.font.decoration,

size : this.text.font.size,

color : this.text.font.color

};

text.font = font;

clone.text = text;

clone.offset = this.offset.clone();

clone.collapseChildren = this.collapseChildren;

clone.branchColor = this.branchColor;

56

this.forEachChild(function(child) {

var childClone = child.clone();

clone.addChild(childClone);

});

return clone;

};

Kod 3.10: Funkcija za „kloniranje“ grane

Ova funkcija kreira novu granu var clone = new mindmaps.Node();,

konstruktorom iz Koda 3.6, na naĉin da ona poprimi sve parametre kopirane grane: isti

tekst, oblik teksta, boju i duljinu grane, a u sluĉaju da kopirana grana ima nasljednike, oni

su takoĊer ukljuĉeni u izradu nove grane. Bit je da nova grana izgleda identiĉno originalnoj

grani, što znaĉi da će, ako su prvotnoj grani nasljednici bili skriveni, bit će skriveni i u

novoj grani.

3.3.5. Kreiranje novog dokumenta

AppController je model aplikacije koji upravlja dogaĊajima vezanima za upravljanje

dokumentom, u ovom sluĉaju kreiranjem dokumenta. Objavljuje dogaĊaj kreiranja novog

dokumenta te poziva funkciju doNewDocument(), koja prvo zatvara postojeći

dokument (ako je prisutan) , a zatim poziva NewDocumentPresenter, funkciju koja je

opisana u Kodu 3.12, za kreiranje novog dokumenta:

mindmaps.AppController = function(eventBus, appModel) {

eventBus.subscribe(mindmaps.Event.NEW_DOCUMENT,

doNewDocument);

function doNewDocument() {

var doc = appModel.getDocument();

if (doc) {

eventBus.publish(mindmaps.Event.CLOSE_DOCUMENT);

eventBus.publish(mindmaps.Event.DOCUMENT_CLOSED,doc);

}

var presenter = new

mindmaps.NewDocumentPresenter(eventBus, appModel,

new mindmaps.NewDocumentView());

presenter.go();

}

57

};

Kod 3.11: Model aplikacije za upravljanje dogaĊajem kreiranja novog dokumenta

mindmaps.NewDocumentPresenter = function(eventBus, appModel,

view) {

this.go = function() {

var doc = new mindmaps.Document();

appModel.setDocument(doc);

eventBus.publish(mindmaps.Event.DOCUMENT_CREATED,

doc);

};

};

Kod 3.12: Kreiranje novog dokumenta

Funkcija NewDocumentPresenter postavlja varijablu doc kao novi

mindmaps.Document(), konstruktor koji novom dokumentu kreira UUID

(Universally Unique IDentifier), daje mu naziv „Novi dokument“, te pamti datume njegova

kreiranja i modificiranja. TakoĊer mu postavlja dimenzije.

mindmaps.Document = function() {

this.id = mindmaps.Util.createUUID();

this.title = "Novi dokument";

this.mindmap = new mindmaps.MindMap();

this.dates = {

created : new Date(),

modified : new Date()

};

this.dimensions = new mindmaps.Point(4000, 2000);

};

Kod 3.13: Konstruktor novog dokumenta

Kreirani dokument se postavlja u varijalbu doc:

this.setDocument = function(doc) {

document = doc;

};

te se nakon toga objavljuje dogaĊaj:

eventBus.publish(mindmaps.Event.DOCUMENT_CREATED, doc);

koji uzrokuje kreiranje kontrola za poništavanje akcija createUndoManager();,

omogućavanje spremanja dokumenta, view.enableSaveButton();, te prikaz nove

58

mentalne mape koja se sastoji od glavne grane koja ima postavljene dimenzije, centrirana

je, te je oznaĉena da bi se mogao promijeniti njen sadržaj:

function showMindMap(doc) {

view.setZoomFactor(zoomController.DEFAULT_ZOOM);

var dimensions = doc.dimensions;

view.setDimensions(dimensions.x, dimensions.y);

var map = doc.mindmap;

view.drawMap(map);

view.center();

var root = map.root;

selectNode(root);

}

3.3.6. Otvaranje dokumenta

Sliĉno kao kod kreiranja novog dokumenta, i kod otvaranja postojećeg, AppController

upravlja dogaĊajima vezanima za otvaranje postojećeg dokumenta:

mindmaps.AppController = function(eventBus, appModel) {

eventBus.subscribe(mindmaps.Event.OPEN_DOCUMENT, function() {

var presenter = new

mindmaps.OpenDocumentPresenter(eventBus,

appModel, new mindmaps.OpenDocumentView());

presenter.go();

});

}

Kod 3.14: Model aplikacije za upravljanje dogaĊajem otvaranja postojećeg dokumenta

mindmaps.OpenDocumentPresenter = function(eventBus, appModel,

view) {

view.documentClicked = function(doc) {

view.hideOpenDialog();

appModel.setDocument(doc);

eventBus.publish(mindmaps.Event.DOCUMENT_OPENED,

doc);

};

view.deleteDocumentClicked = function(doc) {

mindmaps.LocalDocumentStorage.deleteDocument(doc);

var docs =

mindmaps.LocalDocumentStorage.getDocuments();

59

view.render(docs);

};

this.go = function() {

var docs =

mindmaps.LocalDocumentStorage.getDocuments();

docs.sort(mindmaps.Document.sortByModifiedDateDescending);

view.showOpenDialog(docs);

};

};

Kod 3.15: Upravljanje dogaĊajima nad prozorom za otvaranje dokumenta

OpenDocumentPresenter, kao što je opisano u Kodu 3.15, upravlja dogaĊajima koji

se izvršavaju nad prozorom za otvaranje postojećih dokumenata. U sluĉaju da je kliknuto

na postojeći dokument u svrhu njegova otvaranja, prozor za otvaranje dokumenata se

zatvori (view.hideOpenDialog()) , otvori se dokument i objavljuje dogaĊaj da je

dokument otvoren.

this.hideOpenDialog = function() {

$dialog.dialog("close");

};

Ukoliko se želi izbrisati postojeći dokument, poziva se funkcija lokalnog spremnika koja

uklanja element iz liste na temelju njegova prefiksa koji je postavljen kao

mindmaps.document i identifikacije doc.ID:

deleteDocument : function(doc) {

localStorage.removeItem(prefix + doc.id);

},

Nakon toga, poziva se druga funkcija lokalnog spremnika koja pretražuje lokalni spremnik

pomoću indeksa kljuĉa te na temelju toga prepoznanje koji element je izbrisan iz polja. Na

kraju prikazuje elemente koji su preostali:

getDocuments : function() {

var documents = [];

for ( var i = 0, max = localStorage.length; i < max;

i++){

var key = localStorage.key(i);

if (key.indexOf(prefix) == 0) {

var doc = getDocumentByKey(key);

if (doc) {

documents.push(doc);

60

}

}}

return documents;

},

Kod 3.16: Pretraživanje lokalnog spremnika

Prije osvježavanja prikaza prozora za otvaranje dokumenta, nakon što je jedan od

dokumenata izbrisan, potrebno je još sortirati preostale dokumente prema datumu njihove

izmjene, na naĉin da zadnje mijenjani dokument bude prvi na listi. To se izvršava

usporedbom datuma modificiranja dvaju dokumenata i ukoliko je datum jednog dokumenta

noviji od datuma drugog dokumenta, zamijeni im mjesta i obrnuto:

mindmaps.Document.sortByModifiedDateDescending =

function(doc1, doc2) {

if (doc1.dates.modified > doc2.dates.modified) {

return -1;

}

if (doc1.dates.modified < doc2.dates.modified) {

return 1;

}

return 0;

};

Kod 3.17: Sortiranje dokumenata prema datumu modificiranja

Na kraju se pozove funkcija view.showOpenDialog(docs); koja vraća prikaz

prozora za otvaranje dokumenata:

this.showOpenDialog = function(docs) {

this.render(docs);

$dialog.dialog("open");

};

Osim funkcija koje upravljaju otvaranjem i brisanjem postojećih dokumenata, potreban je i

konstruktor za kreiranje izgleda tog prozora. Tome služi funkcija

mindmaps.OpenDocumentView(), opisana u Kodu 3.18, pomoću koje se kreira

jQuery objekt $dialog, na temelju selektora #template-open, unutar kojega se

nalazi objekt $table, odnosno tablica unutar prozora sa popisom spremljenih

dokumenata, te mogućnosti brisanja istih. Popis spremljenih dokumenata je jQuery objekt

$list.

61

mindmaps.OpenDocumentView = function() {

var self = this;

var $dialog = $("#template-open").tmpl().dialog({

autoOpen : false,

modal : true,

zIndex : 5000,

width : 550,

close : function() {

$(this).dialog("destroy");

$(this).remove();

}

});

var $table = $dialog.find(".localstorage-filelist");

$table.delegate("a.title", "click", function() {

if (self.documentClicked) {

var t = $(this).tmplItem();

self.documentClicked(t.data);

}

}).delegate("a.delete", "click", function() {

if (self.deleteDocumentClicked) {

var t = $(this).tmplItem();

self.deleteDocumentClicked(t.data);

}

});

this.render = function(docs) {

var $list = $(".document-list", $dialog).empty();

$("#template-open-table-item").tmpl(docs, {

format : function(date) {

var day = date.getDate();

var month = date.getMonth() + 1;

var year = date.getFullYear();

return day + "/" + month + "/" +

year;

}

}).appendTo($list);

};

};

Kod 3.18: Kreiranje izgleda prozora za otvaranje dokumenta

62

Da bi se u Internet pretraživaĉu prikazao prozor za otvaranje dokumenta, potrebno je u

HTML kod uĉitati kreirane jQuery objekte koji oblikuju izgled prozora za otvaranje

dokumenta. Elementi tablice moraju imati naslov, datum modificiranja te mogućnost

brisanja:

<script id="template-open-table-item" type="text/x-jquery-

tmpl">

<tr>

<td><a class="title" href="#">${title}</a></td>

<td>${$item.format(dates.modified)}</td>

<td><a class="delete" href="#">Izbriši</a></td>

</tr>

</script>

TakoĊer je potrebno u HTML kodu namjestiti izgled prozora koji se sastoji od naslova i

liste spremljenih dokumenata:

<script id="template-open" type="text/x-jquery-tmpl">

<div id="open-dialog" class="file-dialog" title="Otvori

mentalnu mapu">

<p>Kliknite na ime mape da biste ju otvorili.</p>

<table class="localstorage-filelist">

<thead>

<tr>

<th class="title">Naslov</th>

<th class="modified">Zadnje

mijenjano</th>

<th class="delete">Izbriši</th>

</tr>

</thead>

<tbody class="document-list"></tbody>

</table>

</div>

</script>

Kod 3.19: Prozor za otvaranje postojećeg dokumenta

Naravno, otvaranje postojećeg dokumenta, kao i kod kreiranja novog, uzrokuje kreiranje

kontrola za poništavanje akcija createUndoManager();, omogućavanje spremanja

dokumenta, view.enableSaveButton();, te prikaz nove mentalne mape

showMindMap(doc);.

63

3.3.7. Spremanje dokumenta

Kao što je bilo u prethodna dva sluĉaja, tako je i ovdje od strane AppController-a

pozvana funkcija doSaveDocument():

mindmaps.AppController = function(eventBus, appModel) {

eventBus.subscribe(mindmaps.Event.SAVE_DOCUMENT,

doSaveDocument);

}

function doSaveDocument() {

var presenter = new

mindmaps.SaveDocumentPresenter(eventBus, appModel, new

mindmaps.SaveDocumentView());

presenter.go();

}

Kod 3.20: Model aplikacije za upravljanje dogaĊajem spremanja dokumenta

Konstruktor za spremanje dokumenta, kao i kod otvaranja dokumenta, na temelju selektora

#template-save kreira jQuery objekt $dialog, koji u sebi sadrži gumb, odnosno

jQuery objekt $localStorageButton, koji ukoliko je kliknut, aktivira spremanje

dokumenta. Osim toga, potrebne su i dvije funkcije showSaveDialog() i

hideSaveDialog(), koje pokazuju, odnosno sakrivaju prozor za spremanje

dokumenta.

mindmaps.SaveDocumentView = function() {

var self = this;

var $dialog = $("#template-save").tmpl().dialog({

autoOpen : false,

modal : true,

zIndex : 5000,

width : 350,

close : function() {

$(this).dialog("destroy");

$(this).remove();

}

});

var $localStorageButton = $("#button-save

localstorage").button().click(

function() {

if (self.localStorageButtonClicked) {

64

self.localStorageButtonClicked();

}

});

this.showSaveDialog = function() {

$dialog.dialog("open");

};

this.hideSaveDialog = function() {

$dialog.dialog("close");

};};

Kod 3.21: Konstruktor prozora za spremanje dokumenta

Ukoliko je kliknuto na gumb za spremanje dokumenta, kreira se datum modificiranja, te se

dokument sprema u lokalni spremnik. Ukoliko je spremanje dokumenta bilo uspješno,

objavljuje se dogaĊaj DOCUMENT_SAVED, a prozor za spremanje dokumenta se zatvara.

mindmaps.SaveDocumentPresenter = function(eventBus, appModel,

view) {

view.localStorageButtonClicked = function() {

var doc = appModel.getDocument();

doc.dates.modified = new Date();

var success =

mindmaps.LocalDocumentStorage.saveDocument(doc);

if (success) {

eventBus.publish(mindmaps.Event.DOCUMENT_SAVED, doc);

view.hideSaveDialog();

}

};

};

Spremanje dokumenta izvršava funkcija lokalnog spremnika saveDocument(doc),

opisana u Kodu 3.22, koja postavlja element u lokalni spremnik na temelju njegova imena i

identifikacije. Da bi se spremljeni dokument proslijedio u lokalni spremnik, potrebna je i

funkcija serialize() koja će razliĉite vrste tipova varijabli pretvoriti u isti tip. U

sluĉaju neuspješnog spremanja dokumenta, pojavit će se poruka o greški.

saveDocument : function(doc) {

try {

localStorage.setItem(prefix + doc.id,

doc.serialize());

return true;

} catch (error) {

65

console.error("Greška prilikom spremanja

dokumenta.",error);

return false;

}

},

Kod 3.22: Funkcija lokalnog spremnika za spremanje dokumenta

TakoĊer je, kao i u prethodnom primjeru, potrebno jQuery objekte smjestiti u HTML kod,

za prikaz u Internet pretraživaĉu. Prozor za spremanje dokumenta se sastoji od naslova,

teksta te gumba za spremanje mentalne mape, kao što je prikazano na Slici 3.12.

<script id="template-save" type="text/x-jquery-tmpl">

<div id="save-dialog" class="file-dialog" title="Spremi

mentalnu mapu">

<p>Kliknite na gumb SPREMI da biste spremili mentalnu

mapu.</p>

<button id="button-save-localstorage">Spremi</button>

</div>

</script>

Slika 3.12: Prozor za spremanje mentalne mape

Važno je napomenuti da se dokument u lokalni spremnik sprema u obliku JSON tekstualne

datoteke. Stoga je prilikom spremanja dokumenta, kao i otvaranja postojećeg dokumenta,

potrebno provesti pretvorbu iz objekta u JSON tekst i obrnuto. Za to se koriste dvije

metode: JSON.parse i JSON.stringify.

Metoda JSON.parse prepoznaje JSON tekst i pretvara ga u objekte koje sadrži

dokument mentalne mape:

mindmaps.Document.fromJSON = function(json) {

return mindmaps.Document.fromObject(JSON.parse(json));

};

mindmaps.Document.fromObject = function(obj) {

var doc = new mindmaps.Document();

66

doc.id = obj.id;

doc.title = obj.title;

doc.mindmap = mindmaps.MindMap.fromObject(obj.mindmap);

doc.dates = {

created : new Date(obj.dates.created),

modified : new Date(obj.dates.modified)

};

doc.dimensions = mindmaps.Point.fromObject(obj.dimensions);

return doc;

};

Suprotno tome, JSON.stringify metoda konvertira JavaScript strukturu podataka u

JSON tekst. Ukoliko stringify metoda uoĉi objekt koji sadrži metodu toJSON, ona poziva

tu metodu, izvrši akciju nad njom, te vraća konvertiranu vrijednost.

mindmaps.Document.prototype.toJSON = function() {

return {

id : this.id,

title : this.title,

mindmap : this.mindmap,

dates : {

created : this.dates.created.getTime(),

modified : this.dates.modified.getTime()

},

dimensions : this.dimensions

};};

mindmaps.Document.prototype.serialize = function() {

return JSON.stringify(this); };

67

Zaključak

U zadnjim desetljećima prošlog stoljeća su se dogodile velike promjene vezane uz brzi

razvoj tehnologije. Za pojedinca je teško biti u toku s tim promjenama, stoga postoji

potreba za brzim i uĉinkovitim naĉinima stjecanja znanja. To se postiže dijeljenjem znanja,

a još uvijek najefikasniji naĉin prijenosa znanja je komunikacija meĊu ljudima. Osim

dijeljenja znanja, takoĊer je vrlo važno spremanje znanja u razliĉitim oblicima, u svrhu

njegova širenja. Iako postoji odreĊeni otpor pojedinaca prema dijeljenju znanja, ono je

neophodno za praćenje brzih promjena tehnologije i napredovanje.

Kao rezultat sveprisutnog okruženja novom tehnologijom, dogodile su se i velike promjene

u uĉenju i pouĉavanju. Današnji uĉenici, koji pripadaju tzv. digitalnoj generaciji,

razmišljaju i procesuiraju informacije drugaĉije od svojih prethodnika, koji nisu bili u

dodiru s tehnologijom u tolikoj mjeri. S druge strane, ostali koji nisu roĊeni u digitalnom

svijetu, u nekom trenutku života žele ili moraju usvojiti aspekte nove tehnologije, te ih se

stoga naziva digitalnim imigrantima. (Prensky, 2001.g.)

Kao posljedica, današnje škole se susreću sa ozbiljnim problemom: s jedne strane, digitalni

imigranti uĉe polako, korak po korak, dok je digitalna generacija odrasla uz Internet,

mobitele, knjižnice na raĉunalima, te imaju malo prakse u praćenju instrukcija i uĉenju

korak po korak. Vrlo je vjerojatno da se digitalna generacija nikada neće okrenuti

klasiĉnom naĉinu uĉenja. Stoga profesori moraju prilagoditi svoj pristup, metodologiju i

sadržaje, bilo uĉenjem novih sadržaja u skladu sa digitalnom generacijom ili uĉenje novog

naĉina za pouĉavanje klasiĉnih sadržaja. Potrebno je pronaći i prilagoditi materijale

digitalnoj generaciji.

Temeljna ideja ovog rada bila je olakšati razmjenu informacija i znanja grupi ljudi, a to je

upotrebom mentalnih mapa kao sredstva za stjecanje i dijeljenje znanja. Programska

podrška u obliku aplikacije za izradu mentalnih mapa uvelike može pomoći u procesu kako

kreiranja, tako i spremanja znanja za njegovo daljnje korištenje. Osim toga, ovakav oblik

programske podrške može pomoći i profesorima koji su prisiljeni prilagoditi se naĉinu

razmišljanja današnjih uĉenika, koji pružaju otpor klasiĉnim naĉinima uĉenja.

68

Literatura

[1] WISSENSMANAGEMENT FORUM, An illustrated guide to knowledge managment,

[Mrežno] http://www.wm-forum.org.[Zadnji pristup: 28.06.2011.]

[2] Knowledge management. [Mrežno]: www.wikipedia.org.

http://en.wikipedia.org/wiki/Knowledge_management. [Zadnji pristup:

28.06.2011.]

[3] VUKUŠIĆ, MILANOVIĆ, GOMBAŠEK, Uloga informacijske tehnologije i drugih

čimbenika u upravljanju znanjem.

[4] I. RUS, M. LINDVALL, Knowledge Managment in Software Engineering. Maryland:

Fraunhofer Center for Experimental Software Engineering.

[5] D. WHITE, Mind Mapping and Managment.

[6] T. BUZAN, B. BUZAN The mind map book. Pearson Education, 2006.

[7] T. BUZAN, B. BUZAN, How to mind map, Thorsons, 2002.

[8] Tony Buzan. [Mrežno]: www.wikipedia.org.

http://en.wikipedia.org/wiki/Tony_Buzan. [Zadnji pristup: 30.06.2011.]

[9] Mindmapping, concept mapping and information organisation software. [Mrežno]

www.mind-mapping.org. [Zadnji pristup: 30.06.2011.]

[10] J.D. NOVAK, A.J. CANAS, The theory underlying concept maps and how to

construct and use them. Florida Institute for Human and Machine Cognition, 2008.

[11] Konceptualne mape. [Mrežno]: www,wikipedia.org.

http://hr.wikipedia.org/wiki/Konceptualne_mape. [Zadnji pristup: 30.06.2011.]

[12] How To Use Mind Maps for Brainstorming. [Mrežno]:

http://www.michaelonmindmapping.com/blog/mind-maps/brainstorming-mind-

mapping-and-other-creative-confusions/.[Zadnji pristup: 30.06.2011.]

[13] Mind mapping. [Mrežno]: www.novamind.com.

http://www.novamind.com/mind-mapping/.[Zadnji pristup: 30.06.2011.]

[14] HTML5, [Mrežno]: www.wikipedia.org.

http://en.wikipedia.org/wiki/HTML5. [Zadnji pristup: 04.07.2011.]

[15] MATTHEW DAVID, Pro HTML5 Programming, Powerful APIs for Richer

Internet Application Development.

[16] ALBERS LUBBERS, SALIM, Pro HTML5 Programming, Powerful APIs for

Richer Internet Application Development

69

[17] Web APIs, [Mrežno]: www.wikipedia.org.

http://en.wikipedia.org/wiki/Application_programming_interface#Web_APIs.

[Zadnji pristup: 04.07.2011].

[18] HTML5 storage. [Mrežno]: diveintohtml5.org.

http://diveintohtml5.org/storage.html. [Zadnji pristup: 08.07.2011].

[19] JavaScript History. [Mrežno]: www.wikipedia.org.

http://en.wikipedia.org/wiki/JavaScript#History. [Zadnji pristup: 08.07.2011].

[20] DAVID FLANAGAN, JavaScript: The Definitive Guide, 3th edition, OReilly,

2006.

[21] jQuery, [Mrežno]: www.wikipedia.org. http://en.wikipedia.org/wiki/JQuery

[Zadnji pristup: 08.07.2011].

[22] jQuery, [Mrežno]: www.w3schools.com.

http://www.w3schools.com/jquery/jquery_intro.asp. [Zadnji pristup: 08.07.2011].

[23] JSON, [Mrežno]: www.wikipedia.org. http://en.wikipedia.org/wiki/JSON.

[Zadnji pristup: 11.07.2011].

[24] Introducing JSON, [Mrežno]: http://www.json.org/ .[Zadnji pristup:

11.07.2011].

[25] Comparing JSON to XML, [Mrežno]: msdn.microsoft.com.

http://msdn.microsoft.com/en-us/library/bb299886.aspx. [Zadnji pristup:

11.07.2011]..