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
Sadržaj
Sadržaj ................................................................................................................................... 3
Uvod ...................................................................................................................................... 5
1.
2.
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
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
3
2.4.6.
3.
Wisemapping ............................................................................................... 28
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
4
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.
5
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
6
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
7
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,
8
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.
9
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.
10
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.
11
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
12
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.
13
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].
14
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
15
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
16
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].
17
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:
18
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.
19
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.
20

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.
21
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.
22
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.
23

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,
24

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.
25
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.
26
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.
27
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.
28
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.
29
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 WHATWG2 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/
30
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=utf8">,
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.
31
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
32
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
33
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
34
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:
35
sessionStorage
localStorage
Vrijednosti su spremljene samo
Vrijednosti ostaju spremljene i
dok je otvoren pretraživaĉ u kojem
nakon zatvaranja pretraživaĉa.
se nalaze.
Vrijednostima se može pristupiti
Vrijednosti su vidljive samo unutar
prozora u kojem su kreirane.
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 (stringova). 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.
36

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,
37

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.
38
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
39
-
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,
40
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
Tipovi podataka
XML
JSON
Za dodavanje tipova podataka
Ima mogućnost prikaza
potrebna je XML shema.
strukturiranih podataka kroz
polja i objekte
Podrška za polja
Koriste se dogovorom, npr.
UgraĊena podrška za polja
upotrebom vanjskog elementa koji
modelira sadržaj polja kao
unutarnje elemente.
Podrška za
Koriste se dogovorom, ĉesto kroz
UgraĊena podrška za objekte
objekte
mješavinu atributa i elemenata
preko name/value parova
Podrška za null
Zahtjeva upotrebu xsi:nil na
Prepoznaje null vrijednosti
elementima te uvoz odgovarajućih
namespace-a
Komentari
Podržani i dostupni kroz API-je
Nisu podržani
Namespace
Podržani, eliminiraju rizik od
Nije podržano, više istih imena
mogućnosti više istih imena i
se izbjegava gniježĊenjem
dopuštaju proširenje XML
objekata ili korištenjem
standarda
prefiksa u imenu
Kompleksno, zahtjeva veliki trud
Jednostavno, pruža direktnije
pri mapiranju podataka u XML
mapiranje podataka;
elemente i atribute
Nedostatak je nepostojanje
Formatiranje
date/time funkcija
41
Karakteristika
XML
JSON
Veličina
Sintaksno duži
Sažeta sintaksa;
Prevođenje u
Zahtjeva XML DOM
Korištenjem eval() funkcije
JavaScript
implementaciju i dodatni kod
Učenje
Zahtjeva znanje XML sheme,
Jednostavna tehnologija;
XSLT-a, XML namespaces-a,
Lak za uĉenje sa predznanjem
DOM-a itd.
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"},
]
}}
42
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.
43
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.
44
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.
45
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:
46
Slika 3.10: Mentalna mapa
47
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()
48
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;
49
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;
50
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) {
51
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()) {
52
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:
53
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);
54
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;
55
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();
}
56
};
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
mindmaps.Document(),
konstruktor
postavlja
koji
varijablu
novom
doc
dokumentu
kao
kreira
novi
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
57
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();
58
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);
59
}
}}
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.
60
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
61
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-jquerytmpl">
<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);.
62
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) {
63
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) {
64
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();
65
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); };
66
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.
67
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-mindmapping-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
68
[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]..
69

Funkcije - knjizara.hr

prezentacija pdf

EM 02 instr man 75x75 mm

Pročitaj više

Puni Mjesec br. 4

Windows 2

ANALIZA SESTRINSKE DOKUMENTACIJE

Uvjeti objavljivanja – tržišni rizik