IZDELAVA PROGRAMSKEGA PAKETA ZA GRAFIČNI PRIKAZ POMENSKIH SLOVARJEV IN ONTOLOGIJ

Transcription

1 Gregor Hren IZDELAVA PROGRAMSKEGA PAKETA ZA GRAFIČNI PRIKAZ POMENSKIH SLOVARJEV IN ONTOLOGIJ Diplomsko delo Maribor, september 2011

2

3 I Diplomsko delo univerzitetnega študijskega programa IZDELAVA PROGRAMSKEGA PAKETA ZA GRAFIČNI PRIKAZ POMENSKIH SLOVARJEV IN ONTOLOGIJ Študent: Študijski program: Mentor(ica): Somentor(ica): Gregor Hren UN ŠP Računalništvo in informacijske tehnologije izr. prof. dr. Milan Ojsteršek doc. dr. Simon Kolmanič Lektor(ica): / Maribor, september 2011

4 II

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

6 IV IZDELAVA PROGRAMSKEGA PAKETA ZA PRIKAZ POMENSKIH SLOVARJEV IN ONTOLOGIJ Ključne besede: Protovis pomenski splet, ontologija, pomenski slovar, canvas, HTML5, UDK: : (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.

7 V DEVELOPING OF SOFTWARE PACKAGE FOR GRAPHICAL REPRESENTATION OF SEMANTIC DICTIONARIES AND ONTOLOGIES Key words: semantic web, ontology, semantic dictionary, canvas, HTML5, Protovis UDK: : (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.

8 VI VSEBINA 1 UVOD POMENSKI SPLET POMENSKE ZBIRKE POMENSKI SLOVARJI ONTOLOGIJE SPLETNE TEHNOLOGIJE ZA RISANJE GRAFOV HTML Novosti in razlike med HTML 4.01 ter HTML CANVAS SVG CANVAS IN SVG ORODJA JAVASCRIPT ZA PRIKAZ POMENSKIH MREŢ JSVIZ SPRINGY ARBORJS PROTOVIS OPIS LASTNE REŠITVE S KNJIŢNICO PROTOVIS ZA RISANJE GRAFOV IZDELAVA PROGRAMSKEGA PAKETA Gradnja grafa za prikaz relacij med pojmi Gradnja grafa za prikaz hierarhije pojma Vključitev na spletno stran GRAFI V SPLETNI APLIKACIJI ZA GRADNJO DOMENSKO SPECIFIČNIH IN SPLOŠNO POMENSKIH SLOVARJEV Graf prikaza relacij pojma Graf prikaza hierarhije pojma Graf prikaza skupnih relacij med podanima pojmoma SKLEP... 25

9 VII 7 LITERATURA KAZALO SLIK Slika 1: JsViz... 8 Slika 2: Springy... 9 Slika 3: ArborJS Slika 4: Protovis Slika 5: Arbor visual thesaurus Slika 6: Javascript visual wordnet Slika 7: Visuwords online graphical dictionary Slika 8: Predstavitev pojma ter besedne vrste Slika 9: Povezava med pojmoma Slika 10: Pomenski graf Slika 11: Hierarhija pojma»upravljati« Slika 12: Gumbi grafov Slika 13: Graf prikaza relacij Slika 14: Hierarhični graf pojma Slika 15: Graf prikaza skupnih relacij med pojmoma»car«ter»railway« 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« Izpis 4: struktura podatkov za graf prikaza relacij... 18

10 VIII Izpis 5: razred»hierarchicalgraph« Izpis 6: struktura podatkov za hierarhični graf Izpis 7: Vključitvene datoteke Javascript Izpis 8: inicializacija grafov Izpis 9: Nalaganje podatkov KAZALO TABEL Tabela 1: primerjava Canvas in SVG... 7

11 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

12

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

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

15 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 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.

16 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 HTML 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:

17 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

18 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran SVG SVG je kratica za ang. Scalable Vector Graphics. SVG je standard, predlagan pod okriljem konzorcija W3C septembra 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=" 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

19 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 Scenski graf, vsak lik kot DOM objekt Osnovni elementi so liki Težje kombinirati z jezikom HTML Ni najbolj primeren za animacije, le v nekaterih primerih Enostavno lovljenje dogodkov HTML5 CANVAS Vsak lik HTML objekt, risanje grafike preko Javascript-a Osnova slikovne pike Je del jezika HTML Primeren za animacije in igre, 20% hitrejši Težje lovljenje dogodkov, dobimo le pozicijo klika na elementu canvas

20 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: JsViz 1 1

21 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: Springy 1 1

22 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

23 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: Protovis 1 1

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

25 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 Slika 5: Arbor visual thesaurus 1 1

26 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 Podatke o besedah pa črpa iz baze Wordnet. Slika 6: Javascript visual wordnet 1 Tretji primer in najbolj izpopolnjen za prikaz grafa po naši oceni pa je Visuwords online graphical dictionary[12], ki se nahaja na naslovu 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

27 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 15 Slika 7: Visuwords online graphical dictionary 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 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 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

28 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

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

30 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 18 var podatki = { "nodes":[ { "nodename":"avtomobil", "type":"samostalnik", "group":0, "id": }, { "nodename":"avto", "type":"samostalnik", "group":0, "id": } ], "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 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 Vizualna podoba grafa Graf vsebuje besede povezane v hierarhijo s črtami kot vidimo na sliki 11.

31 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran Programiranje grafa Slika 11: Hierarhija pojma»upravljati«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«

32 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 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 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].

33 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

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

35 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 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.

36 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 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.

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

38 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: Nazadnje obiskano: [2] Samizdat Drafting Co., arborjs, Dostopno na naslovu: Nazadnje obiskano: [3] Kyle Scholz, jsviz: JSViz makes it easy to create dynamic 2D views of information, Dostopno na naslovu: Nazadnje obiskano: [4] Dennis Hotson, Springy: A force directed graph layout algorithm in Javascript, Dostopno na naslovu: Nazadnje obiskano: [5] Wikipedia, Ontology, spletni članek, Dostopno na naslovu: Nazadnje obiskano: [6] Wikipedia, Semantic Web, spletni članek, Nazadnje obiskano: , Dostopno na naslovu: [7] What is the Semantic Web?, Nazadnje obiskano: , Dostopno na naslovu: [8] E-Računalništvo, Pomensko in storitveno usmerjen splet, spletni članek, Nazadnje obiskano: , Dostopno na naslovu: [9] Wikipedia, HTML5, spletni članek, Nazadnje obiskano: , Dostopno na naslovu: [10] Stanford Visualization Group, D3: graphical toolkit for visualization, Nazadnje obiskano: , Dostopno na naslovu: [11] JQuery, JQuery library, Nazadnje obiskano: , Dostopno na naslovu: [12] Visuwords, online graphical dictionary, Nazadnje obiskano: , Dostopno na naslovu: [13] Kyle Scholz, Javascript visual Wordnet, Nazadnje obiskano , Dostopno na naslovu:

39 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 27 [14] Matt Hobbs, Arbor visual thesaurus, Nazadnje obiskano: , Dostopno na naslovu: [15] Bighugelabs, Big Huge Thesaurus, Nazadnje obiskano: , Dostopno na naslovu:

40 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 28

41 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 29

42 Izdelava programskega paketa za prikaz pomenskih slovarjev in ontologij Stran 30