Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
Gregor Hren
IZDELAVA PROGRAMSKEGA PAKETA ZA GRAFIČNI PRIKAZ POMENSKIH SLOVARJEV
IN ONTOLOGIJ
Diplomsko delo
Maribor, september 2011
I
Diplomsko delo univerzitetnega študijskega programa
IZDELAVA PROGRAMSKEGA PAKETA ZA GRAFIČNI PRIKAZ
POMENSKIH SLOVARJEV IN ONTOLOGIJ
Študent: Gregor Hren
Študijski program: UN ŠP Računalništvo in informacijske tehnologije
Mentor(ica): izr. prof. dr. Milan Ojsteršek
Somentor(ica): doc. dr. Simon Kolmanič
Lektor(ica): /
Maribor, september 2011
II
III
ZAHVALA
Zahvaljujem se mentorju za pomoč in vodenje
pri opravljanju diplomskega dela. Prav tako se
zahvaljujem somentorju.
Posebna zahvala velja staršem, ki so mi
omogočili študij.
IV
IZDELAVA PROGRAMSKEGA PAKETA ZA PRIKAZ
POMENSKIH SLOVARJEV IN ONTOLOGIJ
Ključne besede: pomenski splet, ontologija, pomenski slovar, canvas, HTML5,
Protovis
UDK: 519.17:004.724(043.2)
Povzetek
V diplomskem delu smo predstavili tehnologije HTML5 za vizualizacijo na spletu ter
orodja, pisana v programskem jeziku Javascript, ki uporabljajo te tehnologije za
risanje grafov. V praktičnem delu naloge smo izdelali programski paket, ki omogoča
prikaz grafa pojmov pomenskega slovarja, ki so med seboj povezani z relacijami.
Izdelali smo tudi prikaz hierarhije pojmov pomenskega slovarja. Programski paket smo
vključili na spletno stran za gradnjo domensko specifičnih in splošno pomenskih
slovarjev.
V
DEVELOPING OF SOFTWARE PACKAGE FOR GRAPHICAL
REPRESENTATION OF SEMANTIC DICTIONARIES AND
ONTOLOGIES
Key words: semantic web, ontology, semantic dictionary, canvas, HTML5, Protovis
UDK: 519.17:004.724(043.2)
Abstract
We presented the technologies HTML5 for visualisation on the web in the thesis as well
as the tools written in the programme language Javascript which use these technologies
for drawing the graphs. In the practical part of the assignment a programme package
was made that enables the review of the graph of the terms of the semantic dictionary.
We also made a review of the hierarchy of the terms in the semantic dictionary. The
programme package was included in the web site for the making of domain specific and
general semantic dictionaries.
VI
VSEBINA
1 UVOD ...................................................................................................................... 1
2 POMENSKI SPLET ............................................................................................... 2
2.1 POMENSKE ZBIRKE ............................................................................................ 2
2.2 POMENSKI SLOVARJI .......................................................................................... 3
2.3 ONTOLOGIJE ...................................................................................................... 3
3 SPLETNE TEHNOLOGIJE ZA RISANJE GRAFOV ...................................... 4
3.1 HTML5 ............................................................................................................. 4
3.1.1 Novosti in razlike med HTML 4.01 ter HTML 5........................................... 4
3.2 CANVAS .......................................................................................................... 5
3.3 SVG .................................................................................................................. 6
3.4 CANVAS IN SVG ............................................................................................. 6
4 ORODJA JAVASCRIPT ZA PRIKAZ POMENSKIH MREŢ ......................... 8
4.1 JSVIZ ................................................................................................................ 8
4.2 SPRINGY ............................................................................................................ 9
4.3 ARBORJS ......................................................................................................... 10
4.4 PROTOVIS ........................................................................................................ 11
5 OPIS LASTNE REŠITVE S KNJIŢNICO PROTOVIS ZA RISANJE
GRAFOV ....................................................................................................................... 13
5.1 IZDELAVA PROGRAMSKEGA PAKETA ................................................. 15
5.1.1 Gradnja grafa za prikaz relacij med pojmi ................................................ 15
5.1.2 Gradnja grafa za prikaz hierarhije pojma ................................................. 18
5.1.3 Vključitev na spletno stran ......................................................................... 20
5.2 GRAFI V SPLETNI APLIKACIJI ZA GRADNJO DOMENSKO SPECIFIČNIH IN SPLOŠNO
POMENSKIH SLOVARJEV ............................................................................................... 21
5.2.1 Graf prikaza relacij pojma ......................................................................... 22
5.2.2 Graf prikaza hierarhije pojma .................................................................... 23
5.2.3 Graf prikaza skupnih relacij med podanima pojmoma .............................. 24
6 SKLEP ................................................................................................................... 25
VII
7 LITERATURA ..................................................................................................... 26
KAZALO SLIK
Slika 1: JsViz .................................................................................................................... 8
Slika 2: Springy ................................................................................................................ 9
Slika 3: ArborJS ............................................................................................................. 10
Slika 4: Protovis ............................................................................................................. 11
Slika 5: Arbor visual thesaurus ....................................................................................... 13
Slika 6: Javascript visual wordnet .................................................................................. 14
Slika 7: Visuwords online graphical dictionary ............................................................. 15
Slika 8: Predstavitev pojma ter besedne vrste ................................................................ 16
Slika 9: Povezava med pojmoma ................................................................................... 16
Slika 10: Pomenski graf .................................................................................................. 16
Slika 11: Hierarhija pojma »upravljati« ......................................................................... 19
Slika 12: Gumbi grafov .................................................................................................. 21
Slika 13: Graf prikaza relacij .......................................................................................... 22
Slika 14: Hierarhični graf pojma .................................................................................... 23
Slika 15: Graf prikaza skupnih relacij med pojmoma »car« ter »railway« .................... 24
KAZALO IZPISOV
Izpis 1: vključevanje platna na spletno stran .................................................................... 5
Izpis 2: vključevanje grafike SVG v spletno stran ........................................................... 6
Izpis 3: razred »SemanticGraph« ................................................................................... 17
Izpis 4: struktura podatkov za graf prikaza relacij ......................................................... 18
VIII
Izpis 5: razred »HierarchicalGraph«............................................................................... 19
Izpis 6: struktura podatkov za hierarhični graf ............................................................... 20
Izpis 7: Vključitvene datoteke Javascript ....................................................................... 20
Izpis 8: inicializacija grafov ........................................................................................... 21
Izpis 9: Nalaganje podatkov ........................................................................................... 21
KAZALO TABEL
Tabela 1: primerjava Canvas in SVG ............................................................................... 7
IX
SLOVARČEK IZRAZOV
HTML – Hypertext Mark Language
HTML5 – Hypertext Mark Language 5
SVG – Scalable Vector Graphics
W3C – World Wide Web Consortium
XML – eXtensible Markup Language
WHATWG – Web Hypertext Application Technology Working Group
DOM – Document Object Model
CSS – Cascading Style Sheets
JSON – Javascript Object Notation
OWL – Web Ontology Language
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 1
1 UVOD
Na spletu je vse več podatkov, ki med seboj niso povezani. Z razvojem pomenskega spleta
kot Web 3.0 pa se ti podatki združujejo v eno veliko bazo, v kateri so podatki med seboj
povezani in ovrednoteni.
Cilj diplomske naloge je da izdelamo programski paket, ki bo omogočal grafični prikaz
povezanih konceptov ali pojmov, tako da bo uporabnik dobil vizualno predstavo
povezanosti pojma ali koncepta z drugimi pojmi. Na kratko bomo predstavili tehnologije
za vizualizacijo grafov na spletu ter izbrali najboljšo rešitev za izdelavo programskega
paketa. Primerjali bomo tudi različne vrste orodij za prikaz grafov. Osredotočili se bomo
predvsem na gradnjo grafa za prikaz relacij med koncepti, saj prav ta graf najbolj
učinkovito prikaže pomenske slovarje ter ontologije. Po tehtnem premisleku smo izbrali
orodje Protovis[1], ki uporablja označevalni jezik SVG in s pomočjo njega izdelali naš
programski paket, ki smo ga nato vgradili na spletno stran za gradnjo domensko
specifičnih in splošnih pomenskih slovarjev.
V drugem poglavju bomo predstavili pomenski splet ter pomenske zbirke. Naslednji dve
poglavji sta namenjeni izbiri tehnologije, ter orodja za grafični prikaz pomenskih slovarjev
in ontologij. V predzadnjem poglavju bomo predstavili našo programsko rešitev ter
vgraditev programskega paketa na spletno stran za gradnjo domensko specifičnih in
splošnih pomenskih slovarjev.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 2
2 POMENSKI SPLET
Današnji splet temelji na množici podatkov, ki jih lahko prebira in razume samo človek.
Prav zaradi kopičenja in neurejenosti teh podatkov se je začel razvijati pomenski splet.
Namen pomenskega spleta ali spleta 3.0, kot mu pravimo, je v tem, da razširi trenutni splet
podatkov tako, da le tem doda pomen, kar pomeni, da ti podatki postanejo strojno berljivi
in razumljivi za računalnik. S pomočjo takšne urejenosti podatkov, bi splet postal ena
velika globalna baza podatkov. Podatki bi bili definirani in povezani na način, da jih
računalniki lahko uporabljajo ne le za prikazovanje ampak tudi za avtomatizacijo,
integracijo in ponovno uporabo v različnih aplikacijah. Pomenski splet je torej le razširitev
današnjega spleta, kjer so informacije pomensko dobro definirane in omogočajo
učinkovitejše sodelovanje med človekom in računalnikom.
Informacije, ki bodo ustrezno pomensko opisane, bodo na spletu odprle vrata novim
vrstam inteligentnih spletnih aplikacij.
2.1 Pomenske zbirke
Ljudje za medsebojno razumevanje uporabljamo mentalni leksikon. To je dinamična
organizacija besed v naših mislih in je pomemben del človeških jezikovnih sposobnosti. Ta
leksikon je sestavljen iz obsežnih in kompleksnih mrež mentalnih predstavitev, asociacij in
procesov. Ljudje si besede lažje zapomnimo, če jih razvrščamo v besedne zveze in besedne
družine ter jih povežemo z drugimi podobnimi pojmi.
Sistem pojmovanja pa na računalnikih poteka drugače, zato ga prilagodimo. En izmed
načinov pojmovanja so prav pomenske zbirke. Meje med pomenskimi zbirkami niso vedno
natančno določene, vendar jih lahko razdelimo v dve kategoriji. Prva so pomenski slovarji,
ki še vedno služijo jezikoslovni naravi, druga kategorija pa so ontologije, ki so pravzaprav
baza znanja za neko področje in so temelj pomenskega spleta.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 3
2.2 Pomenski slovarji
Pomenski slovar vsebuje pojme, ki so med seboj povezani v hierarhično organizirano
strukturo pojmov. Določen pojem ima lahko nadpomenke (angl. hypernym) ali
podpomenke (angl. hyponim). Primer nadpomenke od »smreka« je »drevo«. Primer
podpomenke od »drevo« pa je »smreka«. Pojme lahko razvrščamo v več hierarhij sočasno.
Pomenski slovar vsebuje tudi pojme, ki predstavljajo protipomenke (angl. antonym).
Primer potipomenke besede »bel« je »črn«. Nekatere besede predstavljajo skupek delov
znotraj celote (angl. meronym). Primer delov hiše so okna, vrata in stene. Kadar gre za
dvoumnost, pri kateri so različni pomeni besed med seboj povezani, govorimo o polisemiji
ali večpomenskosti (npr. beseda „miška”, ki je lahko del računalnika ali glodavec). Najbolj
ohlapna so asociativna razmerja, ki povezujejo besede iz istega pomenskega polja (npr.
državni uradnik <-> vloga). Največ podobnosti med pomensko povezanimi besedami
izkazujejo sopomenke oziroma sinonimi. Na vsak pojem lahko vežemo več sopomenk
(npr. sopomenke: vodja, šef in direktor predstavljajo uslužbenca, ki vodi organizacijsko
enoto). Besede so sopomenke, če jih je v besedilu mogoče zamenjati, brez da bi pri tem
spremenili njegov pomen.
2.3 Ontologije
Ontologijo sestavljajo pojmi oziroma koncepti, relacije med njimi ter primerki teh pojmov.
V računalništvu ontologije predstavljajo znanje v neki domeni. Pojem predstavlja koncept
(razred ali objekt razreda) v neki domeni ali področju. Koncepti na področju računalništva
so »računalnik«, »programer«, »miška«, »tipkovnica«. Ontologije predstavljajo tudi
lastnosti, omejitve, razdruževanja ter specifikacije logičnih relacije med objekti.
Poznamo več vrst ontologij, ene izmed njih so ontologije, ki se uporabljajo v informacijski
tehnologijah na področju umetne inteligence, pomenskih mrež, biomedicinske informatike,
informacijske arhitekture itd. Za opis ontologij uporabljamo posebne jezike, kot sta jezika
OWL ter RDF.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 4
3 SPLETNE TEHNOLOGIJE ZA RISANJE GRAFOV
Za risanje grafov na spletu lahko uporabimo precej različnih tehnologij kot so Adobe
Flash, java programčke in Silverlight. Standard HTML5 je uvedel nov element canvas, ki
omogoča vključevanje vektorske grafike s pomočjo označevalnega jezika SVG(Scalable
Vector Graphics), zato lahko v spletnem brskalniku izrišemo precej zapletene grafične
elemente.
Ker se splet vse bolj usmerja v HTML5, deloma pa tudi zato, ker za prikaz vsebin ne
potrebujemo nobenih dodatnih vtičnikov, smo tudi sami uporabili slednjo rešitev za
izdelavo grafičnega paketa za izris grafov.
3.1 HTML5
HTML5 je standard za oblikovanje in predstavitev vsebin na svetovnem spletu.
Specifikacija HTML5 ne razvija nove ideje za prikaz spletnih strani, ampak jo le
izboljšuje. Njena neposredna predhodnika sta HTML 4.01 ter XHTML 1.1.
Leta 2004, ko je W3C delala na razvoju standarda XHTML 2.0, se skupina
WHATWG(Hypertext Application Technology Working Group), ki je skupina za
hipertekstualno tehnologijo, odloči ustvariti nov standard HTML5. Kasneje leta 2009, se
W3C odloči, da opusti razvoj XHTML 2.0 ter se pridruži WHATWG pri razvoju standarda
HTML5.
3.1.1 Novosti in razlike med HTML 4.01 ter HTML 5
Uporaba HTML5 precej spremeni zgradbo same spletne strani, ker je bilo standardu v
primerjavi s HTML 4.01 dodanih precej novih značk, nekatere starejše pa so odstranili.
Dodane so bile značke ali elementi, ki nam precej povečajo paleto orodij, s katerimi
naredimo spletno stran še lažje in bolj učinkovito ter uporabniku prijazno.
Očitnejše razlike med HTML5 in HTML4.01 pa so:
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 5
nova pravila uporabe elementov,
novi pomenski elementi: header, footer, section, article, audio, video, progress,
nav, meter, time, aside, canvas,
novi tipi elementov pri obrazcih– input elementi,
dodatni atributi,
globalni atributi: id, tabindex, repeat,
odstranjeni elementi kot so: center, font, strike.
Za nas pa je predvsem zanimiva podpora HTML5 za element <canvas> ter standard SVG,
ki ga podpirajo novejši brskalniki.
3.2 CANVAS
Element canvas(platno) element je del standarda HTML5 in ga uporabljamo za prikaz
grafičnih elementov, kot so grafi, slike, besedilo, liki ter druge grafične podobe. Zaenkrat
uporablja 2D grafiko, najdemo pa tudi že nekaj Javascript knjižnic za podporo 3D grafiki,
kot je npr. WebGL. Element canvas trenutno podpirajo vsi popularnejši brskalniki kot so
Chrome, Firefox, Opera ter Internet Exploler.
Za prikazovanje grafike na spletni strani s pomočjo elementa canvas pa potrebujemo nekaj
programerskega znanja v programirnju s pomočjo skriptnega jezika Javascript. Element
canvas je torej grafični vmesnik, ki mu moramo določiti višino, širino ter id objekta, preko
katerega kasneje v Javascript kodi dostopamo do njega samega in s pomočjo pisanja kode
na njega dodajamo grafične elemente.
Vstavljanje platna na spletno stran je zelo enostavno, podobno kot dodajanje ostalih značk
HTML [Izpis 1].
<canvas id=˝platno˝ width=˝500px˝ height=˝300px˝>
To besedilo vidiš, ker tvoj brskalnik ne podpira canvas elementa.
</canvas>
Izpis 1: vključevanje platna na spletno stran
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 6
3.3 SVG
SVG je kratica za ang. Scalable Vector Graphics. SVG je standard, predlagan pod
okriljem konzorcija W3C septembra 2009. Tukaj ne gre le za standard za prikaz grafike na
spletnih straneh, ampak ga bodo in ga tudi že uporabljajo raznovrstne namizne aplikacije.
Trenutno je standard še vedno v fazi razvoja. SVG je specifikacija za opis
dvodimenzionalne vektorsko-rastrske grafike v formatu XML, prav tako odprt standard, ki
je v zadnjih letih zelo pridobil na popularnosti in se preko njega rojeva veliko novih in
pomembnih standardov.
Standard pozna tri tipe grafičnih objektov, to so vektorski elementi, rastrske slike ter
besedilo. Nad temi objekti je mogoče izvajati različne slikovne transformacije. Če pa
uporabimo še skriptni jezik Javascript, lahko naredimo grafiko SVG dinamično in za
uporabnika interaktivno.
V brskalnik grafiko SVG vključimo zelo enostavno. Določenemu elementu, v katerem jo
želimo prikazati dodamo <svg> značko z grafičnimi elementi [Izpis 2].
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
Izpis 2: vključevanje grafike SVG v spletno stran
3.4 CANVAS in SVG
SVG prikazuje grafiko v brskalniku na nekoliko višjem nivoju. Vsak grafični objekt je
shranjen v drevesu DOM, ki je nato prikazano na zaslon. Prednost tega je, da se ob
spremembi atributa nekega objekta, ta ne bo ponovno ustvaril, ampak se bo le spremenil in
prerisal. Drugače je pri tehnologiji HTML5 canvas, kjer se vsak objekt, ki ga spremenimo
ustvari ponovno, vključno z vsemi, ki se z njim prekrivajo.
Tehnologija SVG porabi precej časa, da si ustvari scenski graf, na katerem nato poteka
prikazovanje elementov, zato je uporabna predvsem za prikaz velikih površin kot je npr.
Google Maps, medtem ko pa element canvas najraje uporabimo za izdelavo animacij in
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 7
iger, ker nam omogoča hitrejši izris več zaporednih grafičnih objektov. Podrobnejšo
primerjavo med elementoma pa vidimo v tabeli 1.
Tabela 1: primerjava Canvas in SVG
SVG HTML5 CANVAS
Scenski graf, vsak lik kot DOM objekt Vsak lik HTML objekt, risanje grafike preko
Javascript-a
Osnovni elementi so liki Osnova slikovne pike
Težje kombinirati z jezikom HTML Je del jezika HTML
Ni najbolj primeren za animacije, le v
nekaterih primerih Primeren za animacije in igre, 20% hitrejši
Enostavno lovljenje dogodkov Težje lovljenje dogodkov, dobimo le
pozicijo klika na elementu canvas
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 8
4 ORODJA JAVASCRIPT ZA PRIKAZ POMENSKIH MREŢ
4.1 JsVIZ
JsViz[3] je knjižnica jezika Javascript avtorja Kyla Scholza. Podpira obe tehnologiji
HTML5 canvas in tudi SVG. Če nima brskalnik podpore za nobeno od teh dveh tehnologij,
lahko knjižnica uporabi za prikaz grafa tudi navaden HTML, ki deluje s pomočjo CSS
stilov. Usmerjeni graf lahko naložimo preko dokumenta XML, ki ima posebno določeno
zgradbo, ki predstavlja vozlišča in povezave. Slika 1 nam prikazuje graf izdelan z
knjižnico JsViz.
Slika 1: JsViz1
1 http://www.jsviz.org/blog/2007/06/viva_la_canvas.html
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 9
Prednosti:
Uporaba treh različnih prikazov(SVG, CANVAS, HTML).
Graf lahko naložimo tudi s pomočjo zunanje datoteke XML.
Slabosti:
Brez vnaprej pripravljene interakcije z grafom (dogodki), jo lahko dodamo sami.
Brez možnosti enostavnega dodajanja teksta na vozlišča.
Če želimo vključiti graf na našo spletno stran, moramo vključiti precej dodatnih datotek
Javascript.
Sami moramo napisati veliko kode, da si prilagodimo graf.
4.2 Springy
Springy[4] je knjižnica jezika Javascript avtorja Dennisa Hotsona. Prvotna knjižnica je
temeljila na tehnologiji SVG, trenutno pa deluje na na principu HTML5 CANVAS. Slika 2
nam prikazuje graf izdelan z knjižnico Springy.
Slika 2: Springy1
1 http://dhotson.github.com/springy/demo.html
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 10
Prednosti:
Risanje in lovljenje dogodkov povsem poljubno.
Dokaj hitro delovanje grafa.
Enostavno dodajanje vozlišč in povezav med njimi.
Enostavna vključitev na spletno stran.
Slabosti:
Grafa ne moremo naložiti preko zunanje datoteke ali spremenljivke brez kakršnegakoli
dodatnega programiranja.
Slaba dokumentacija.
4.3 ArborJS
ArborJS[2] je grafična vizualizacijska knjižnica napisana v jeziku Javascript. Knjižnica je
v bistvu algoritem, ki računa prikaz usmerjenega grafa. Grafična podoba ter prikaz pa je
povsem prepuščena uporabniku, da si jo izriše kot sam želi. Podan je že primer izrisa grafa.
Podpira tri prikaze, podobno kot JsVIZ[3]. Prvi je s pomočjo tehnologije SVG, drugi je
HTML5 CANVAS in tretji navaden HTML. Slika 3 nam prikazuje graf izdelan z knjižnico
ArborJS.
Slika 3: ArborJS
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 11
Prednosti:
Uporaba treh različnih prikazov(SVG, CANVAS, HTML).
Risanje in lovlenje dogodkov povsem poljubno.
Dokaj hitro delovanje grafa.
Graf lahko naložimo preko zunanje datoteke ali spremenljivke.
Dobra dokumentacija.
Slabosti:
Sami moramo napisati precej kode, če želimo graf malenkost prirediti.
Zelo težko dodati enostavne stvari na graf.
4.4 Protovis
Protovis[1] je zastonjska odprtokodnja knjižnica, ki za vizualizacijo na spletnih straneh
uporablja prikaz SVG s pomočjo Javascript jezika. Za prikaz seveda ne potrebujemo
nobenega dodatka. Knjižnica ne podpira le usmerjenih grafov, temveč tudi množico drugih
vizualnih predstavitev. Avtor knjižnice je Stanford Visualization Group z univerze v
Stanfordu[1]. Knjižnica je doživela zadnjo izdajo avgusta 2011, ker so avtorji pričeli
ustvarjati novo knjižnico za vizualizacijo D3.js[10], ki naj bi bila še boljša, vendar je šele v
razvoju. Slika 4 nam prikazuje graf izdelan z knjižnico Protovis.
Slika 4: Protovis1
1 http://mbostock.github.com/protovis/ex/force.html
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 12
Prednosti:
Enostavna vključitev na spletno stran.
Odlična dokumentacija in primeri.
Enostavno programiranje in dodajanje različnih elementov po svoji izbiri.
Zelo hitro delovanje grafa.
Graf lahko naložimo preko zunanje datoteke ali spremenljivk.
Enostavno lovljenje dogodkov.
Možnost zoomiranja in premikanja grafa.
Slabosti:
Prikaz podpira le preko tehnologije SVG.
Na koncu smo se po tehhtnem premisleku odločili, da za izdelavo našega programskega
paketa uporabimo knjižnicijo Protovis, ker vsebuje vse elemente, ki jih potrebujemo za
izdelavo grafičnega prikaza pomenskega slovarja.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 13
5 OPIS LASTNE REŠITVE S KNJIŢNICO PROTOVIS ZA RISANJE
GRAFOV
Pri izdelavi paketa smo morali biti pozorni, na kakšen način naj sploh prikažemo slovarje
in ontologije. Ker se slovarji in ontologije v prikazu ne razlikujejo, smo pregledali že nekaj
obtoječih podobnih rešitev na spletu.
Prvi primer je prikaz besed iz Bighugelabs[15] tezavra s knjižnico »arbor.js«[2] pod
imenom Arbor visual thesaurus[14], na sliki 5, in se nahaja na naslovu
http://nooshu.com/explore/arbor-visual-thesaurus/.
Slika 5: Arbor visual thesaurus1
1 http://nooshu.com/explore/arbor-visual-thesaurus/
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 14
Drugi primer je Javascript Visual Wordnet[13], na sliki 6, ki uporablja knižnico JsVIZ in
ga najdemo na naslovu http://kylescholz.com/projects/wordnet/. Podatke o besedah pa črpa
iz baze Wordnet.
Slika 6: Javascript visual wordnet1
Tretji primer in najbolj izpopolnjen za prikaz grafa po naši oceni pa je Visuwords online
graphical dictionary[12], ki se nahaja na naslovu http://www.visuwords.com/ in uporablja
tehnologijo flash za prikaz grafa. V nadaljevanju pa bomo poskušali našo rešitev približati
prav tej. Na sliki 7 vidimo predstavitev pojma »car« v aplikaciji Visuwords[12].
1 http://kylescholz.com/projects/wordnet/
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 15
Slika 7: Visuwords online graphical dictionary1
5.1 IZDELAVA PROGRAMSKEGA PAKETA
Ugotovili smo, da za prikaz ontologij in pomenskih slovarjev prideta v poštev dva različna
grafa. Najprej smo se posvetili izdelavi grafa za prikaz relacij med besedami ali v
pomenskem slovarju, kot nam kaže tudi nekaj prej naštetih primerov. Drugi graf pa je
hierarhični graf, ki nam pokaže iz katerih področij izhaja pojem.
5.1.1 Gradnja grafa za prikaz relacij med pojmi
Graf smo gradili s pomočjo Javascript knjižnice za vizualizacijo grafov Protovis[1].
Programski paket smo gradili tako, da je lahko enostavno uporabljen v različnih
aplikacijah, s samo nekaj vrsticami kode.
5.1.1.1 Vizualna podoba grafa
Graf je vizualno precej podoben prej predstavljenim grafom. Sestavljen je iz dveh ključnih
elementov. Na sliki 8 vidimo pojem, ki je na grafu predstavljen kot krog z tekstom.
1 http://www.visuwords.com/
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 16
Slika 8: Predstavitev pojma ter besedne vrste
Slika 9 prikazuje povezavo med dvema pojmoma, ki jo predstavlja črta med enim in
drugim pojmom.
Slika 9: Povezava med pojmoma
Oba elementa skupaj pa predstavljata pomenski graf.
Slika 10: Pomenski graf
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 17
Iz grafa na sliki 10 hitro razberemo, da je izbran pojem »avtomobil« povezan s še dvema
drugima pojmoma. Avto je sopomenka za avtomobil, motorno vozilo pa je nadpomenka
avtomobila.
5.1.1.2 Programiranje grafa
Koda grafa za prikaz relacij se nahaja v datoteki »SemanticGraph.js«, ki je uporabnik
načeloma ne bo spreminjal, če ne bo posebne potrebe po zamenjavi izgleda grafa. V
datoteki smo napisali Javascript razred, ki mu podamo id html vsebnika grafa ter širino in
višino. In že nam razred ustvari pojme ter povezave med njimi, podati mu moramo le še
podatke.
function SemanticGraph(graphId, width, height) {
//podatki za graf
this.words = {
nodes: [],
links: []
};
//dodamo platno za risanje
this.vis = new pv.Panel()
...
//dodamo vrsto grafa(force-directed graf)
this.force = this.vis.add(pv.Layout.Force)
...
//dodamo povezave
this.force.link.add(pv.Line)
...
//dodamo pojme
this.force.node.add(pv.Dot)
...
}
Izpis 3: razred »SemanticGraph«
Kot vidimo v izpisu 3 je koda precej kratka, saj nam Protovis knjižnica precej poenostavi
inicializacijo grafa.
5.1.1.3 Gradnja podatkov za graf
Za prikaz podatkov smo uporabili format JSON za opis podatkov. Je lahko berljiv za
človeka ter omogoča enostavno in učinkovito uporabo v spletnih aplikacijah. Seveda smo
podatke morali zgraditi tako, da bodo primerni za naš graf. To pomeni, da moramo shraniti
podatke o pojmih ter povezavah med njimi. To smo storili na naslednji način.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 18
var podatki = { "nodes":[ { "nodeName":"avtomobil", "type":"samostalnik", "group":0, "id":309960 }, { "nodeName":"avto", "type":"samostalnik", "group":0, "id":309959 } ], "links":[ { "source":0, "target":1, "imeP":"Sopomenka - Synonym", "value":0 } ] }
Izpis 4: struktura podatkov za graf prikaza relacij
Kot vidimo v izpisu 4, je v podatkih o grafu zapisano, kateri pojmi ter povezave sestavljajo
graf. Podatki na zgornjem primeru vsebujejo informacijo o dveh pojmih ter povezavi med
njima.
5.1.2 Gradnja grafa za prikaz hierarhije pojma
Graf smo zgradili na zelo podoben način kot prejšnjega. Tudi ta graf lahko zelo enostavno
vključimo v našo spletno stran s samo nekaj vrsticami kode.
5.1.2.1 Vizualna podoba grafa
Graf vsebuje besede povezane v hierarhijo s črtami kot vidimo na sliki 11.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 19
Slika 11: Hierarhija pojma »upravljati«
5.1.2.2 Programiranje grafa
Koda hierarhičnega grafa se nahaja v datoteki »HierarchicalGraph.js«, ki jo vključimo na
spletno stran in je načeloma ne spreminjamo, razen če želimo dodati kakšno posebno
funkcionalnost grafu. Koda je zelo enostavna saj nam knjižnica ponuja enostavno
dodajanje posameznih elementov. Izpis 5 nam prikazuje Javascript kodo razreda
»HierarchicalGraph«.
function HierarchicalGraph(graphId,w,h) {
//podatki za graf
this.data = {};
//dodamo platno za risanje
this.vis = new pv.Panel()
...
//dodamo vrsto grafa(tree graf)
this.layout = this.vis.add(pv.Layout.Tree)
...
//dodamo povezave med pojmi
this.layout.link.add(pv.Line);
//dodamo pojme in podro誡
this.layout.node.add(pv.Dot)
...
}
Izpis 5: razred »HierarchicalGraph«
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 20
5.1.2.3 Gradnja podatkov za graf
Tudi pri tem grafu uporabimo že vnaprej določeno strukturo podatkov zapisanih v JSON,
ki jih kasneje podamo grafu za prikaz. Struktura je naslednja.
var podatki = { "Glosar elektronskega poslovanja":{ "Splošno besedišče":{ "upravljati":-2, "aktualna informacija - real-time information":56234, "avtomatizirati - automate":56235, "boljša analiza - improved analysis":56236, "celotno nagrajevanje - total compensation":56237, "enostavnost uporabe - ease of use":56241, "omogočiti - empower":56269, "prilagoditi - personalize":56289, "razporejanje - deployment":56296, "samopostrežen - self-service":56297, "...":-3 }, "Ekonomija":1943, "Računalništvo":1944 } }
Izpis 6: struktura podatkov za hierarhični graf
Tudi podatki so zgrajeni hierarhično. V izpisu 6 vidimo da vsi podatki spadajo pod slovar
»Glosar elektronskega poslovanja« na prvem nivoju.
5.1.3 Vključitev na spletno stran
Vključitev je izjemno enostavna, saj smo Javascript kodo tudi tako priredili. Najprej na
spletno stran vključimo pet datotek Javascript, ki so potrebne za delovanje grafov [Izpis 7].
Potrebno je vključiti JQuery[11] ogrodje ter Protovis[1], ki sta zunanji tehnologiji. Nato
dodamo še naše datoteke, pri katerih prvih dveh »semanticGraph.js« ter
»hierarchicalGraph.js« ne spreminjamo, medtem ko datoteko »graphMain.js« uporabimo
kot datoteko v kateri imamo napisano kodo za inicializacijo ter interakcijo z grafom.
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
<script src="Scripts/graphs/protovis.js" type="text/javascript"></script>
<script src="Scripts/graphs/semanticGraph.js" type="text/javascript"></script>
<script src="Scripts/graphs/hierarchicalGraph.js" type="text/javascript"></script>
<script src="Scripts/graphs/graphMain.js" type="text/javascript"></script>
Izpis 7: Vključitvene datoteke Javascript
Grafa inicializiramo tako, da novima razredoma podamo kot argumente html element, ki
bo vseboval graf, širino ter višino grafa [Izpis 8].
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 21
var graph, graphH;
$(document).ready(function (e) {
graph = new SemanticGraph('protoviscanvas', 300, 300);
graphH = new HierarchicalGraph('protoviscanvas2',300,300);
});
Izpis 8: inicializacija grafov
Na primeru smo ustvarili po en pomenski in hierarhični graf. Grafa smo torej pripravili za
nadaljno uporabo v dveh vrsticah kode.
Vključiti moramo samo še podatke, ki naj se prikažejo na grafu preko metode v razredu
grafov, ki ji dodamo podatke kot argument [Izpis 9]. Podatki so seveda v formatu JSON,
kot smo jih prikazali pri obrazložitvi posameznega grafa.
graph.loadVariable(podatkiSemantic);
...
graphH.loadVariable(podatkiHierarchical);
Izpis 9: Nalaganje podatkov
Če upoštevamo vse te korake se nam graf prikaže.
5.2 Grafi v spletni aplikaciji za gradnjo domensko specifičnih in splošno pomenskih
slovarjev
Aplikacija nam ponuja prikaz različnih slovarjev, kjer lahko vidimo pojme porazdeljene po
različnih področjih slovarja. Prav tako nam omogoča iskanje pojmov in urejanje le teh. Ob
kliku na pojem se nam pokažejo informacije o njem, kjer vidimo naziv, opis pojma ter tudi
njegove relacije z drugimi pojmi v bazi.
Slika 12: Gumbi grafov
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 22
V informacije o pojmu smo vključili nekaj gumbov, kot vidimo na sliki 12, ki ob kliku
prikažejo želeni graf za izbran pojem.
5.2.1 Graf prikaza relacij pojma
Slika 13: Graf prikaza relacij
Na sliki 13 je graf, ki omogoča uporabniku hiter in pregleden prikaz relacij pojma. Ob
kliku na pojem se na levi pokažejo informacije o pojmu. Graf nam omogoča tudi
približevanje ter premikanje grafa po risalni površini, kar nam je v veliko pomoč, kadar je
na grafu veliko informacij. Če se z miško postavimo nad relacijo, se nam preko oblačka
pokaže ime tipa relacije. Če nas zanima besedna vrsta nekega pojma, se z miško
postavimo nad pojem, kjer se nam pokaže oblaček z imenom besedne vrste pojma. Ob
dvojnem kliku na določen pojem pa se nam znova naloži nov graf prikaza relacij za izbran
pojem. Nalaganje podatkov smo rešili s tehnologijama JQuery[11], ki da zahtevo Ajax po
podatkih, ki se nato zgradijo s pomočjo tehnologije ASP.NET in prikažejo.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 23
5.2.2 Graf prikaza hierarhije pojma
Slika 14: Hierarhični graf pojma
Na sliki 14, ki predstavlja hierarhični graf pojma, vidimo iz katerih področij določen pojem
izhaja ter kateri pojmi spadajo pod isto področje. Prav tako smo omogočili premikanje in
približevanje grafa na risalni površini.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 24
5.2.3 Graf prikaza skupnih relacij med podanima pojmoma
Slika 15: Graf prikaza skupnih relacij med pojmoma »car« ter »railway«
Slika 15 nam prikazuje dialog, kateremu podamo imeni pojmov, nakar se nam ob kliku na
gumb izriše graf, ki predstavlja kako sta ti dve besedi med seboj povezani, ne le preko
relacije ampak tudi preko vmesnih pojmov.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 25
6 SKLEP
Izdelavo programskega paketa za prikaz pomenskih slovarjev in ontologij smo uspešno
izvedli s pomočjo Javascript knjižnice Protovis[1], ki nam omogoča vizualizacijo v
spletnih brskalnikih, kateri omogočajo prikaz značk HTML5. S to tehnologijo in še
nekaterimi drugimi se razvija tudi vizualna podoba spleta. Prav to smo izkoristili za
izdelavo našega grafičnega paketa. Dosegli smo, da lahko izdelan grafični paket enostavno,
z le nekaj vrsticami Javascript kode, vključimo na spletne strani in prikažemo dva različna
grafa. Prvi nam prikaže besede in povezave med njimi, drugi pa hierarhijo nekega
koncepta. Rešitev je kompatibilna z vsemi novejšimi brskalniki, za kar ne potrebujemo
nobenega dodatnega vtičnika.
Programski paket z obema vrstama grafov smo uspešno vključili v spletno stran za prikaz
pomenskih slovarjev. S prvim grafom za prikaz relacij smo precej povečali uporabniško
izkušnjo, saj si ljudje po naravi lažje predstavljamo pojem predstavljen na grafu, ki je
povezan z ostalimi pojmi, kot so sopomenke ter protipomenke, kot pa da informacijo o tem
le preberemo. Na drugem grafu, ki smo ga vključili vidimo iz katerih virov in področij
izhaja določen pojem. Na zadnjem tretjem grafu, pa vidimo kako sta pojma med seboj
povezana, ne le z relacijo ampak tudi z ostalimi vmesnimi pojmi.
V času izdelave grafov s pomočjo orodja Protovis, se je pojavila nova Javascript knjižnica
za vizualizacijo istih avtorjev D3[10], ki nam omogoča nadgrajene animacije ter interakcije
z grafi. Priporočljivo bi bilo, da bi Protovis knjižnico v našem programskem paketu
zamenjali z novejšo knjižnico, saj bi s tem lahko razširili funkcionalnosti, ki bi jih ponujali
grafi.
Ker slovarji vsebujejo veliko množico podatkov, in je izgradnja podatkov za graf časovno
potratno in zahtevno opravilo, bi bilo potrebno izboljšati algoritme za njihovo pridobivanje
in sestavljanje.
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 26
7 LITERATURA
[1] Stanford Visualization Group, Protovis: graphical toolkit for visualization, Dostopno na
naslovu: http://mbostock.github.com/protovis/, Nazadnje obiskano: 10.8.2011
[2] Samizdat Drafting Co., arborjs, Dostopno na naslovu: http://arborjs.org/, Nazadnje
obiskano: 12.8.2011
[3] Kyle Scholz, jsViz: JSViz makes it easy to create dynamic 2D views of information,
Dostopno na naslovu: http://code.google.com/p/jsviz/, Nazadnje obiskano: 12.8.2011
[4] Dennis Hotson, Springy: A force directed graph layout algorithm in Javascript,
Dostopno na naslovu: https://github.com/dhotson/springy, Nazadnje obiskano: 12.8.2011
[5] Wikipedia, Ontology, spletni članek, Dostopno na naslovu:
http://en.wikipedia.org/wiki/Ontology_(information_science) , Nazadnje obiskano:
28.8.2011
[6] Wikipedia, Semantic Web, spletni članek, Nazadnje obiskano: 29.8.2011, Dostopno na
naslovu: http://en.wikipedia.org/wiki/Semantic_Web
[7] What is the Semantic Web?, Nazadnje obiskano: 5.9.2011, Dostopno na naslovu:
http://www.altova.com/semantic_web.html
[8] E-Računalništvo, Pomensko in storitveno usmerjen splet, spletni članek, Nazadnje
obiskano: 6.9.2011, Dostopno na naslovu:
http://gradiva.txt.si/racunalnistvo/programiranje/nacrtovanje-in-razvoj-spletnih-
aplikacij/razvoj-spletnih-aplikacij/spletne-storitve-2/spletne-storitve-2/
[9] Wikipedia, HTML5, spletni članek, Nazadnje obiskano: 6.9.2011, Dostopno na
naslovu: http://en.wikipedia.org/wiki/HTML5
[10] Stanford Visualization Group, D3: graphical toolkit for visualization, Nazadnje
obiskano: 11.9.2011, Dostopno na naslovu: http://mbostock.github.com/d3/ex/force.html
[11] JQuery, JQuery library, Nazadnje obiskano: 11.9.2011, Dostopno na naslovu:
http://jquery.com/
[12] Visuwords, online graphical dictionary, Nazadnje obiskano: 11.9.2011, Dostopno na
naslovu: http://www.visuwords.com/
[13] Kyle Scholz, Javascript visual Wordnet, Nazadnje obiskano. 11.9.2011, Dostopno na
naslovu: http://kylescholz.com/projects/wordnet/
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 27
[14] Matt Hobbs, Arbor visual thesaurus, Nazadnje obiskano: 11.9.2011, Dostopno na
naslovu: http://nooshu.com/explore/arbor-visual-thesaurus/
[15] Bighugelabs, Big Huge Thesaurus, Nazadnje obiskano: 11.9.2011, Dostopno na
naslovu: http://words.bighugelabs.com
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 28
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 29
Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 30