navodila za izdelavo diplomske naloge - core.ac.uk · procesov. ljudje si besede lažje zapomnimo,...

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

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.


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.


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.


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:


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


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


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


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

http://www.jsviz.org/blog/2007/06/viva_la_canvas.html


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

http://dhotson.github.com/springy/demo.html


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


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

http://mbostock.github.com/protovis/ex/force.html


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.


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/

http://nooshu.com/explore/arbor-visual-thesaurus/



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/

http://kylescholz.com/projects/wordnet/

http://www.visuwords.com/



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/



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


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.


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.


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«


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].


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


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.


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.


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.


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.


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/

http://mbostock.github.com/protovis/

http://arborjs.org/

http://code.google.com/p/jsviz/

http://code.google.com/p/jsviz/

https://github.com/dhotson/springy

http://en.wikipedia.org/wiki/Ontology_(information_science)

http://en.wikipedia.org/wiki/Semantic_Web

http://www.altova.com/semantic_web.html

http://gradiva.txt.si/racunalnistvo/programiranje/nacrtovanje-in-razvoj-spletnih-aplikacij/razvoj-spletnih-aplikacij/spletne-storitve-2/spletne-storitve-2/

http://gradiva.txt.si/racunalnistvo/programiranje/nacrtovanje-in-razvoj-spletnih-aplikacij/razvoj-spletnih-aplikacij/spletne-storitve-2/spletne-storitve-2/

http://en.wikipedia.org/wiki/HTML5

http://mbostock.github.com/d3/ex/force.html

http://jquery.com/




[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


http://words.bighugelabs.com/

navodila za izdelavo diplomske naloge - core.ac.uk · procesov. ljudje si besede lažje zapomnimo,...

Documents