53
SVEUČILIŠTE U ZAGREBU FAKULTET ORGANIZACIJE I INFORMATIKE V A R A Ž D I N Natalia Nađ INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U OBLIKU MASHUP APLIKACIJE DIPLOMSKI RAD Varaždin, 2013.

INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

SVEUČILIŠTE U ZAGREBU

FAKULTET ORGANIZACIJE I INFORMATIKE

V A R A Ž D I N

Natalia Nađ

INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U OBLIKU MASHUP APLIKACIJE

DIPLOMSKI RAD

Varaždin, 2013.

Page 2: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

SVEUČILIŠTE U ZAGREBU

FAKULTET ORGANIZACIJE I INFORMATIKE

V A R A Ž D I N

Natalia Nađ

Matični broj:40603/11–R

Studij: Informacijsko i programsko inženjerstvo

INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U OBLIKU MASHUP APLIKACIJE

DIPLOMSKI RAD

Mentor:

Doc.dr.sc.MarkusSchatten

Varaždin, rujan 2013.

Page 3: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

1

Sadržaj

1. Uvod ...................................................................................................................................... 4

2. Mashup aplikacija .................................................................................................................. 5

2.1. Model Mashup aplikacije ............................................................................................... 6

2.2. Razvijanje Mashup aplikacija ......................................................................................... 7

2.3. Web servisi ..................................................................................................................... 8

3. Web 3.0. aplikacije ................................................................................................................ 9

3.1. Web 2.0. .......................................................................................................................... 9

3.2. Semantički web ............................................................................................................ 10

3.3. Linked data ................................................................................................................... 12

4. Business trip planer ............................................................................................................. 13

4.1. Mogućnosti ................................................................................................................... 14

4.2. Korištene tehnologije .................................................................................................... 16

4.2.1. PHP ........................................................................................................................ 16

4.2.2. HTML5 .................................................................................................................. 17

4.2.3. CSS3 ...................................................................................................................... 18

4.2.4. JavaScript .............................................................................................................. 18

4.2.5. YQL ....................................................................................................................... 19

4.2.6. YUI ........................................................................................................................ 20

4.2.7. xQuery ................................................................................................................... 20

4.2.8. xPath ...................................................................................................................... 20

4.2.9. jQuery .................................................................................................................... 21

4.3. Implementacija ............................................................................................................. 22

4.3.1. Registracija i prijava u sustav ................................................................................ 23

4.3.2. Pregled i promjena korisničkih podataka .............................................................. 26

4.3.3. Prikaz mape trenutne lokacije korisnika ............................................................... 27

4.3.4. Odabir lokacije putovanja...................................................................................... 27

4.3.5. Odabir željenih informacije ................................................................................... 29

4.3.6. Spremanje puta ...................................................................................................... 30

4.3.7. Pregled sačuvanog putovanja ................................................................................ 31

4.3.8. Komentiranje određenog putovanja ...................................................................... 33

4.4. Primjer korištenja ......................................................................................................... 35

4.4.1. Registracija ............................................................................................................ 35

4.4.2. Forma ..................................................................................................................... 36

4.4.3. GoogleID ............................................................................................................... 37

Page 4: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

2

4.4.4. Prijava .................................................................................................................... 38

4.4.5. Trenutna lokacija ................................................................................................... 39

4.4.6. Promjena podataka ................................................................................................ 39

4.4.7. Odabir lokacije ...................................................................................................... 40

4.4.8. Pregled traženih informacija.................................................................................. 42

4.4.9. Spremljena putovanja ............................................................................................ 44

4.4.10. Komentari ....................................................................................................... 45

5. Kritički osvrt ........................................................................................................................ 46

6. Zaključak ............................................................................................................................. 48

7. Literatura ............................................................................................................................. 49

Page 5: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

3

Slika 1 Struktura Web 3.0 aplikacija .......................................................................................... 9

Slika 2 Ekstenzije WAMP-a .................................................................................................... 22 Slika 3Input box registracije korisnika ..................................................................................... 23 Slika 4 Upis novog korisnika u bazu podataka ........................................................................ 23

Slika 5ButtonGoogleOpenID ................................................................................................... 24 Slika 6 Provjera korisnika i upisu u bazu podataka za OpenID ............................................... 24 Slika 7 Prijava korisnika .......................................................................................................... 25 Slika 8 Dohvaćanje podatka iz baze podataka ......................................................................... 26 Slika 9 Ispis vrijednost u input box .......................................................................................... 26

Slika 10JavaScript funkcija za poziciju korisnika .................................................................... 27 Slika 11 Uključenje JavaScript datoteke .................................................................................. 27 Slika 12 Funkcija GetLocation() .............................................................................................. 28

Slika 13 Upis geografske širine i visine ................................................................................... 28 Slika 14 Odabir informacija ..................................................................................................... 29 Slika 15 Provjera checkbox-a ................................................................................................... 29 Slika 16 Ispis informacija pomoću YQL-a .............................................................................. 30

Slika 17 Pregled putovanja ....................................................................................................... 31 Slika 18 Dohvaćanje spremljene lokacije iz BP 4 ................................................................... 32 Slika 19 Prikaz komentara ........................................................................................................ 32 Slika 20 Ispis putovanja ........................................................................................................... 33

Slika 21 Funkcija za ispis komentara ....................................................................................... 34 Slika 22 Odabir registracije ...................................................................................................... 35 Slika 23 Forma za registraciju .................................................................................................. 36

Slika 24GoogleID ..................................................................................................................... 37

Slika 25 Forma za prijavu u sustav .......................................................................................... 38 Slika 26 Trenutna lokacija korisnika ........................................................................................ 39 Slika 27 Mydata tab .................................................................................................................. 39

Slika 28 Mapa za odabir lokacije ............................................................................................. 40 Slika 29 Unos geografske širine i dužine ................................................................................. 40

Slika 30 Odabir putovanja ........................................................................................................ 41 Slika 31 Prikaz podataka - general tab ..................................................................................... 42 Slika 32 Informacije o vremenu ............................................................................................... 43

Slika 33 Informacije o restoranima .......................................................................................... 43 Slika 34 Putovanja korisnika .................................................................................................... 44

Slika 35 Detalji putovanja ........................................................................................................ 44 Slika 36 Popis putovanja s komentarima ................................................................................. 45

Slika 37 Unos komentara ......................................................................................................... 45

Tabela 1 Popis web 2.0 i web 1.0 aplikacija ............................................................................ 10

Page 6: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

4

1. Uvod

Činjenica je da se danas tehnologija vrlo brzo razvija. Neke osnovne stvari koje

predstavljaju revoluciju u odnosu na ranije popularne tehnologije, kao što je na primjer

društvena mreža Facebook, danas se odnosi kao već stara novost to jest predstavlja razvitak

tehnologije iz 2008. godine.(Hendler, 2009.) Upravo prema tome vidimo koliko se zapravo

brzo razvijaju stvari na World Wide Web-u. Web je jedna nevjerojatna platforma za brz

razvitak prototipa, ugradnje aplikacija i inovacija.(Hendler, 2009.) Uzimajući u obzir koliko

su danas informacijske tehnologije popularne, nije ni čudo da se cjelokupni koncept u vezi

weba toliko brzo razvija. Kada su se pojavile Web 2.0. aplikacije, predstavljale su još jednu

revoluciju u Internet svijetu. Omogućavale su korisniku slobodu, otvorenost i kolektivnu

inteligenciju.(Anderson, 2007.) Više nema jednosmjernih informacija, nego dvosmjerna

komunikacija te korisnik sam prilagođava potrebne informacije. Čak sudjeluje u izgradnji

jednostavnijih web aplikacija. Razvijanjem Web 2.0 aplikacija došli smo do razvijanja

aplikacija koje sadrže puno različitih podataka iz različitih izvora, čiji je cilj objediniti točno

potrebne informacije na jednom mjestu, koje su predviđene za jednog korisnika. Zbog velikog

interesa za korištenje spomenutih Mashup aplikacija, došlo je do potrebe da se tom novom

trendu da i novo ime. Te tako smo došli do Web 3.0 aplikacija.

Upravo je zbog velike popularnosti u današnjem tehnološkom svijetu probuđena ideja

o izradi Mashup aplikacije koja ujedinjuje Web 3.0 aplikacije. Korisnik danas želi brz pristup.

Pristup koji ne zahtjeva neke posebne pripreme i točno one informacije koje korisnik želi.

Današnje tehnologije mu upravo to omogućuju, da si on sam prilagodi kakve želi imati

prikazane informacije te od kuda im želi pristupati. Kako postoje velik broj Mashup aplikacija

za korisnike, u ovom slučaju je izabrana jedna specifična na kojoj se primjerom može

prikazati zašto su upravo te aplikacije toliko popularne i kako je korisnik može koristiti.

Izabran primjer aplikacije je Poslovni planer putovanja (eng. Business Trip planer).

Ukratko u toj aplikacija korisnik koji često putuje može koristiti aplikaciju da bi na određenoj

lokaciji mogao vidjeti sve informacije koje ga zanimaju. Postoje različite mogućnosti od

prikaza različitih prijevoza, smještaja, restorana ili spoj sa nekom drugom aplikacijom kako bi

korisnik imao sve na jednom mjestu. Upravo to pružaju različiti servisi te na taj način daju

brze i točne, to jest ažurne informacije korisniku.

Page 7: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

5

2. Mashup aplikacija

Prema Merill (2006.) Web Mashup aplikacije su kombinacija različitog sadržaj,

prezentacijskih i aplikacijskih funkcionalnosti iz različitih web stranica. Što je to točno?

Mashup aplikacija je spoj različitih informacija iz različitih izvora. Cilj Mashup aplikacija je

uskladiti te sve izvore da bi se dobila neka nova aplikacija ili servis. Najčešće se koriste

različiti prezentacijski sadržaji koji dolaze iz različitih izvora kao što su RSS ili Atom feeds ili

različiti XML formati, kao što je na primjer HTML, SWF ili bilo koji drugi grafički elementi.

(Benslimane i sur., 2008.) To bi značilo da je Mashup zapravo skup različitih javnih API-ja,

to jest sadržaja JavaScript biblioteka.

Mashup aplikacije su naglo postale popularne na području web aplikacija. Puno

poduzeća proizvode različite Mashup aplikacije jer su zanimljive korisnicima, a i lagano i

brzo ih je proizvoditi. Primjer vrlo popularne web stranice je housingmaps.com, u kojoj se

pregledavaju lokacije dostupnih kuća za prodaju na Craiglist-u pomoću GoogleMaps. (Daniel

i Matera, 2009.) To predstavlja vrlo jednostavnu aplikaciju, jer su uzete informacije i

predstavljene korisniku na jednostavan i što je još važnije na grafički prikladan način.

Prema Danielu i Mareraliu (2009.) postoje nekoliko principa kojih bi se programeri

Mashup aplikacija trebali držati:

1. Programeri, ne korisnici: Razvijanje dobrih komponenta je nezgodno kod

razvijanja velikih aplikacije. Programeri moraju razumjeti važnost da komponente

Mashup aplikacija razvijaju iskusni web programeri, a zatim korisnici mogu

preuzeti ulogu kompozitora i korisnika.

2. Kompleksnost unutar komponente: Komponente mogu dostavljati kompleksne

mogućnosti, ali ne bi se smjele činiti kompleksne korisniku. Sučelja sa kojima bi

se kompozitori i korisnici trebali susretati su vrlo jednostavna. Pod kompozitore se

podrazumijevaju korisnici Mashup aplikacije koji prilagođavaju i upravljaju

sadržajem, dok se pod korisnikom podrazumijeva krajnji korisnik koji koristi web

aplikaciju.

3. Interakcijski dizajn: Vrlo je važno da su dijelovi vrlo dobro sklopljeni u cjelinu.

Komponente koji dolaze sa svojim UI bi trebale biti u mogućnosti pokretati se

unutar diva, spana ili iframe HTML elementa, bez utjecanja na ostale komponente

Mashup aplikacije. Drugim riječima, ne bi smjelo biti konflikata između različitih

dijelova komponenta.

Page 8: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

6

4. Samostalna izvodljivost: Izvodljivost komponenta i beneficije komponenta bi

trebale ovisiti o tome na koji način su integrirane u Mashup aplikaciju.

Komponente bi trebale biti izvodljive na bio kojoj dostupnoj Mashup platformi.

5. Standardne tehnologije: Da bi garantirali maksimalno usklađivanje i

interoperabilnost komponenata, one se ne bi trebale oslanjati na zaštićene to jest na

tehnologije koje je potrebno plaćati. Ovaj dio se pogotovo odnosi na razvoj

komponenti te bi se trebalo naglasiti upotreba standardne tehnologije.

2.1. Model Mashup aplikacije

Prema Danielu i Materalu (2009.) Mashup aplikacije su tipično okarakterizirane

integracijom velikog dijela komponenta dostupnih na webu. Među najpopularnijim

tehnologijama koje su prisutne u izgradnji Mashup aplikacija se nalaze SOAP/WSDL i

RESTful web servisi, RSS/Atom feeds i XML strukture podataka.(Benslimane i sur., 2008.)

Većina tih tehnologija se oslanja na standardne jezike, tehnologije ili komunikacijske

protokole. Kada dolazimo do kompleksnijih UI komponenta to jest do komponenta koje

funkcioniraju same za sebe, sa svojim podacima i prezentacijskim slojem, nema nekih opće

prihvaćenih standarda. Upravo zato postoji općeniti model da bi pomogao u tim slučajevima.

Taj opći model objašnjavamo kroz tri elementa. (Daniel i Materalu, 2009.)

Korisničko sučelje: Korisničko sučelje složenijih komponenta je grafička

fronta aplikacije koja je predstavljena korisniku. Omogućava korisničku

interakciju sa tom komponentom, koja u odgovor na korisničku interakciju,

pokazuje određeno stanje same komponente.

Događaji: Kada se događa komunikacija sa komponentom, korisnik osigurava

neki određeni ulaz koji komunicira sa komponentom. UI su inače

implementirani na event-based principu, kao što su na primjer klik miša,

pomicanje miša i tako dalje. Za integraciju UI komponenta je potrebno da

svaki put kada se pokrene neki događaj komponente, da se generira

retrospektivan događaj ( eng. respective event).

Operacije: Ne bi smjeli samo korisnici moći promijeniti unutarnje stanje

komponente. Ako se unutar Mashup aplikacije nalaze više komponenta, one

moraju biti sinkronizirane, što znači da ako se promjeni stanje jedne

komponente, da se druge prilagođavaju prema potrebi. UI komponente

Page 9: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

7

omogućavaju vanjske aktere. U tom slučaju jedna komponenta Mashup

aplikacije može komunicirati sa drugom.

2.2. Razvijanje Mashup aplikacija

Osim raznih tehnologija pomoću kojih možemo razvijati Mashup aplikacije, postoje

različiti alati koji nam pomažu da napravimo ne toliko skupe Mashup aplikacije i na relativno

brz način. Inače ovi alati dolaze sa raznim brojem mogućnosti i sa različitim pristupom.

Pogled izbliza nam omogućava da iz različitih alata identificiramo što one zajedničko nude i

koji je neki opći Mashup fenomen koje one pružaju.(Yu i sur., 2008.) U nastavku možemo

vidjeti neke od osnovnih to jest najpopularnijih alata koji predstavljaju alate za krajnje

korisnike. Neki od njih su Yahoopipes, GoogleMashup Editor i Microsoft Popfly.

YahooPipes dozvoljavaju korištenje različitih popularnih podatkovnih feedova da se stvori

podatkovni Mashup preko vizualnog editora. Pipe je podatak koji se sastoji od jednog ili više

podatkovnih izvora i svaki od njih izvršava neki specifični zadatak.(Yu i sur.,2008.) Postoje

različiti operatori za mogućnosti kao što su petlje, RegEx izrazi ili brojenje te operatori za

manipuliranje podataka. Cilj ovog alata je da se omogući korisnicima procesiranje podataka,

transformiranje i kombiniranje iz različitih izvora da se prikaže na način kako oni to žele.(Yu

i sur.,2008.)

GoogleMashup Editor pruža korisnicima predložak za razvoj Mashup aplikacija. Nudi set

standardnih modula koji dozvoljavaju enkapsulaciju i prikaz vanjskih podataka.(Yu i sur.,

2008.) Da bi stvarali Mashup aplikacije, moramo razvijati UI predloške koji sadrže XML

kontrolne tagove i HTML/CSS elemente uključeni u JavaScript kod. (Yu i sur., 2008.)

Microsoft Puppy je alat baziran na komponentama, to jest vizualni okoliš za razvijanje

Mashup aplikacija.(Yu i sur., 2008.) Komponente koje se mogu ponovno iskoristiti su

nazvane blokovima. Blok može biti posrednik između vanjskih servisa, kao što su na primjer

web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza

(eng. inputa) i izlaza (eng. outputa) koji su specificirani u određenom XML deskriptorima.

Blok isto tako može biti površinski displej to jest dio UI koji uzima podatke iz drugih blokova

i prikazivati ih tako da dozvoljavaju korisnicima da komunicira sa Mashup aplikacijom.(Yu i

sur., 2008.)

Osim raznih navedenih podataka i još mnoštvo njih koji nisu navedeni možemo i sami

izraditi svoju Mashup aplikaciju. Zapravo kako definicija govori Mashup je aplikacija koja

ujedinjava različite informacije iz različitih smjerova koje su relevantne korisniku. Tako osim

Page 10: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

8

ovih alata koji su dosta fiksirani,postoji određeni dio koji korisnik može prilagoditi sebi.

Možemo izraditi Mashup aplikaciju koja je striktno prilagođena određenoj skupini korisnika,

a o tom načinu ćemo više saznati u sljedećim poglavljima.

2.3. Web servisi

Za izradu samostalnih Mashup aplikacija koje se izrađuju bez prethodno navedenih alata

najčešće se koriste servisi. Nekoliko projekta koji izrađuju Mashup aplikacije, su koristili taj

način te su se okrenuli tradicionalnim web servisima, kao što su WSDL ili SOAP web servisi.

(Benslimane i sur.,2008.)

Kako je XML postao osnovni način za prijenos podataka, tako su i web servisi usvojili

XML formata te upravo to predstavlja SOAP. SOAP je stvoren od strane Microsofta i kasnije

je razvijen do kraja u suradnji sa Developnebtor, IBM, Lotus i UserLand. (Curbera i

sur.,2002.) Definicija je da je SOAP protokol baziran na XML-u koji se koristi za slanje

poruka i za RPC (eng. Remote Procedure Calls). SOAP radi na već postojećim protokolima

kao što su HTTP, SMTP i MQSeries. SOAP ima vrlo jednostavnu strukturu.(Curbera i

sur.,2002.) To je XML element sa dva elementa djeteta. Jedan od njih sadrži zaglavlja (eng.

header), dok drugi sadrži tijelo (eng. body). Osim osnovne strukture poruka, SOAP definira

model koji odlučuje kako bi se trebale procesirati SOAP poruke. Taj model isto tako uključuje

aktere (eng. actors) koji pokazuju tko bi trebao procesirati poruku. Poruku može identificirati

akter koji iniciraju seriju posrednika koji procesiraju dijelove poruke.(Curbera i sur.,2002.)

Isto tako SOAP implementira postojeće programske jezike kao što su C, Java i Perl koji

automatski generiraju i procesiraju SOAP poruke. Ako poruke odgovaraju SOAP

specifikacijama, one se mogu izmjenjivati preko servisa koji su napravljeni u različitim

jezicima. Upravo u takvim slučajevima je potreban univerzalni jezik da bi se servisi izrađeni u

različitim jezicima mogu sporazumjeti.

WSDL predstavlja univerzalni jezik u XML formatu koji je razvio IBM i Microsoft kako

bi opisali Web servise kao kolekciju komunikacije koji mogu izmjenjivati razne poruke.

(Curbera i sur.,2002.) Drugim riječima, WSDL dokument opisuje sučelje web servisa i

dostavlja korisniku određenu točku kontakta. WSDL servis dostavlja dvije vrste informacija.

Jedna je na aplikacijskom nivou koji predstavlja opis servisa, a druga je specifični protokol

koji korisnici moraju slijediti da bi dobili pristup konkretnom servisu.

Page 11: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

9

3. Web 3.0. aplikacije

Vrlo je teško definirati Web 3.0 aplikacije. Iako su one vrlo specifične teško je

precizno definirati njihovu specifičnu prirodu. Neke od ključnih komponenti je zrela

infrastruktura za integrirane web podatke i povećana upotreba i potpora za razne jezike koji su

prihvaćeni od strane W3C.Na sljedećoj slici možemo vidjeti strukturu Web 3.0. aplikacija.

(Hendler, 2009)

Slika 1 Struktura Web 3.0 aplikacija

Kao što je prikazano na slici, primjena ove tehnologije je integrirana sa postojećim Web

frameworkom koji predstavlja već poznate Web 2.0 aplikacije. Temelj Web 3.0 aplikacija je u

RDF-u (eng. ResourceDescription Framework) koji dostavlja sredstva koja su potrebna da se

povežu podaci iz više web stranica ili baza podataka, zajedno sa upotrebom SPARQL-a,

upitnog jezika koji je kao SQL standard za izvršavanje upita nad RDF podacima. (Hendler,

2009.)

3.1. Web 2.0.

Koncept Web 2.0 je počeo sa konferencijom između dva poduzeća. To su O'Reilly i Media

Live International. Shvatili su da je razvojem weba i razvijanje novih aplikacija na Internetu

došlo do točke preokreta i upravo taj preokret su nazvali Web 2.0. Ubrzo je Web 2.0 naziv

počeo biti toliko popularan da su ga svi koristili i poduzeća su to ime stavljala kao ime na

svoje proizvode, a zapravo nitko nije ni znao što to točno znači. Web 2.0 bi mogli definirati

kao revoluciju na koji način koristimo web. Sve aplikacije kao što su blogovi, wikiji,

podcastovi ili RSS feedovi spadaju pod novu generaciju aplikacija na Internetu na koje se

može odnositi kao na Web 2.0 aplikacije.(O'Reilly, 2007.)

Page 12: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

10

Pri definiranju razlike između Web 1.0 i Web 2.0 došlo je do odvajanja različitih aplikacija

koje su predstavljale Web 1.0 ili Web 2.0. U nastavku možemo vidjeti popis tih aplikacija:

(O'Reilly, 2007.)

Web 1.0 Web 2.0

DoubleClick GoogleAdSense

Ofoto Flicke

Akamai BitTorrent

Mp3.com Napster

BritannicaOnline Wikipedia

Personal websites Blogging

Domainnamespeculation Searchengineoptimization

Screenscraping Web services

Contentmanagmentsystems Wikis

Directories (taxonomy) Tagging (filksonomy)

Tabela 1 Popis web 2.0 i web 1.0 aplikacija

Kao što možemo vidjeti, postoje velik broj Web temeljenih servisa i aplikacija koje

demonstriraju osnove Web 2.0 koncepta. Ti servisi i aplikacije su već na neki način

iskorišteni za edukaciju. Oni zapravo nisu ni tehnologije koliko su servisi koji su uključeni u

blokove tehnologije i otvorenih standarda koji spadaju pod Internet. (O'Reilly, 2007.)

3.2. Semantički web

Berners-Lee (1996.) je isticao da je teško pronaći neki određeni podatak u obliku

konkretnog semantičkog navoda, te je u narednim godinama počeo razvijati svoju globalnu

ideju da bi je konačno 1997. godine na WWW7 i na WWW8 konferencijama izložio.

Predložio je ideju globalnog Weba sa samostalnom unutarnjom logikom te je najavio sljedeću

fazu razvoja nazvano semantički web. (Slavić, 2004.) Svrha semantičkog weba je povezati

temeljna područja ljudskog znanje te time omogućiti njihovu obradu. Temelj te ideje se sastoji

od semantičkih predmetnih metapodataka i vrsti njihovog pristupa kroz kontekstnu i stroju

razumljivu terminologiju. Temelj Berners-Leeove ideje je u tome da će strojno obradivi

Page 13: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

11

metapodaci biti osnova za sljedeći naraštaj te da će se na taj način olakšati pristup

informacijama i pristup komunikacijama. Smisao ideje semantičkog weba je to da se Internet

može pretraživati ne samo korištenjem riječi nego i kroz upotrebu značenja. Zbog toga je

neophodno da se počinje upotrebljavati semantička i sintaktična interoperabilnost predmetnog

rječnika, budući da je dobro poznato da su za temeljit sveobuhvatan opis predmeta potrebni ne

samo izolirani pojmovi nego i propozicijska logika. (Veltman, 2001.) Zbog toga se razni

organizacijski sustavi znanja i klasifikacijski sustavi prepoznaju kao vrlo važni sustavi za

budućnost. Kao što je navedeno ranije, u ovom radu ćemo se usredotočiti na RDFS i OWL,

jer smatramo da ta dva reprezentacijska jezika semantičkog weba uvelike gradi Web 3.0 alate.

OWL (eng. Web OntologyLanguage) je jezik koji se služi za semantičko kodiranje te je

razvijen od strane W3C. OWL jezik je izveden iz DAML standarda u svrhu kreiranja i

razmjene ontologija na webu. (Slavić, 2004.) Standard je namijenjen raznim programskim

aplikacijama, koje umjesto jednostavnih prezentacijskih informacija koje su namijenjene za

ljudsko korištenje, trebaju obrađivati taj sadržaj informacija. Upravo to omogućava OWL.

Strojnu razmjenu Web sadržaja na razini koja je naprednija od one podržane jednostavnim

XML, RDF ili RDFS shemama. (Slavić, 2004.) Da bi pružao potporu različitih scenarija,

OWL uzima osnovnu sposobnost RDF-a (Soergel, 2001.) te strukturu RDF Sheme (Croft,

1997.) te ih proširuje na vrlo važan način. U OWL-u se mogu deklarirati klase i organizirati te

klase u podklase prema hijerarhiji. Isto tako može deklarirati opcije, organizirati ih u

hijerarhiju i pružaju široku domenu tih opcija. Te sve mogućnosti dolaze od proširenosti

RDFS-a. (Mellraith i sur.,2001.)

RDF to jest RDF Shema predstavlja drugi sloj infrastrukture semantičkog weba. On pruža

jedinstveni podatkovni model za navode tako da se upotrjebljavaju elementi objekta,

predikata i vrijednosti te je asocirana sa serializacijskom sintaksom u XML-u.(Berners-Lee i

sur.,2001.) RDF vokabular može biti definiran tako da se upotrebljava RDF Shema. Kao dio

shemnog jezika RDFS definira koncepte, koji uključuju primitivne modele prema klasi,

podklasa hijerarhiji, te povezanost, to jest veza između klasa (eng. property) i domena uvjeta

na takvim svojstvima. Iako RDF model osigurava samo tri elementa, RDFS je jako

ekspresivan tako da opisuje klasnu hijerarhiju koja omogućuje korisničke upite i podršku.

(Hendler, 2008.)

Page 14: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

12

3.3. Linked data

Linked data predstavlja upotrebu weba da se stvori poveznica između podataka iz

različitih izvora. Jedan od primjera mogu biti različite baze podataka koji su održavane od

strane dviju različitih organizacija na različitim geološkim lokacijama ili jednostavno

heterogenim sustavima unutar jedne organizacije, koje nemaju baš jako izražen nivo

interperabilnosti. (Bizer i sur.,2009.) Zapravo, povezani podaci se odnose na podatke koji su

objavljeni na webu te na taj način oni mogu biti iskoristivi od strane stroja, što znači da je

njihovo značenje eksplicitno definirano. Povezano je sa drugim eksternim setovima podataka

i može biti povezano na vanjski set podataka. Povezani podaci se oslanjaju na podatke koji su

napravljeni u RDF-u formatu. (Klynei Carroll,2004). Umjesto da se jednostavno takvi

dokumenti međusobno povežu, povezani podaci upotrjebljavaju RDF da bi napravio izjave

koje povezuju neosnovane podatke diljem svijeta. Postoji nekoliko pravila koje je definirao

Berners-Lee (2006), a često se nazivaju i principi povezanih podataka:

1) Upotrebljavaj URI imena za imenovanja

2) Upotrebljavaj HTTP URI, tako da korisnici mogu pronaći ta imena

3) Kada netko pogleda u URI, pruži mu korisne informacije upotrjebljavajući standarde

(RDF)

4) Uključi poveznice na druge URI, tako da pružimo korisniku da može otkrivati nove

stvari.

Kada objavimo podatke na webu prema unaprijed spomenutim principima, dobavljač

podataka dodaju njihove podatke globalnom prostoru podataka, koji dozvoljava da se podaci

otkriju i da budu korišteni od raznih aplikacija.

Kako je velik broj povezanih podataka objavljen na Internetu, smišljen je velik broj raznih

aplikacija koje bi trebale moći iskorištavati te podatke koji su na webu. Prema tome, možemo

izdvojiti tri kategorije uz pomoću čega se ti podaci mogu iskorištavati: (Bizeri sur., 2009.)

1) Preglednici povezanih podataka,

2) pretraživači i

3) aplikacije za specifične domene pretraživanja povezanih podataka.

Page 15: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

13

4. Business trip planer

Kako bi najbolje prikazali upotrebu gore navedenih servisa najbolje je prikazati na

konkretnom primjeru kako se oni koriste, koji su problemi kod implementacije i što se sve

mora koristiti da bi se izgradila jedna kvalitetna aplikacija.

U današnje doba postoje puno različitih aplikacije, te je jako teško biti inovativan. Tako i

postoje različite verzije i različiti proizvođači koji proizvode ovakvu vrstu aplikacije. Planer

poslovnih putovanja (eng. Bussiness trip planer) je vrlo popularna aplikacija, jer u današnje

doba jedan poslovan čovjek puno putuje. Istina da je tehnologija jako razvijena i uštedi nam

put puno puta, ali jednostavno zbog nekih poslova moramo putovati u druge gradove, a kad se

dogodi taj slučaj onda želimo da sve prođe što je bolje moguće. Planer poslovnih putovanja je

jako popularna aplikacija, jer je najčešće u potpunosti na Internetu tako da je korisnik može

iskoristiti sa bilo koje lokacije. Isto tako postoje razni pametni telefoni (eng. smatphones) koji

omogućuju da se preko njih spojimo na naš odabrani planer poslovnih putovanja i na samom

putu nešto izmijenimo ili provjerimo kako smo ranije definirali.

Najčešće se može naći različitih aplikacija, koje nude samo jedan dio sadržaja dok se

ostali dio mora nadoplatiti ili se pak cijela aplikacija plača. Takve aplikacije su vrlo korisne,

jer se služe web servisima, što znači da nemamo starih podataka, jer se u određenom intervalu

podaci osvježavaju i ponovno prikazuju korisniku. Tako se korisnik ne mora brinuti da će

dobiti stare podatke i da će učiniti nešto krivo zbog njih. Ovakve vrste aplikacije obično imaju

nekoliko mogućnosti kao što su planiranje samog puta, što bi značilo odabir karte ili način na

koji korisnik putuje. Te što je najvažnije, jednom kada se rezervira karta za neko prijevozno

sredstvo, sve je zapisano na jednom mjestu, a tim podacima možemo pristupiti bilo kada, tako

da se ne moramo brinuti da li ćemo ih zagubiti ili da se nećemo sjetiti neke bitne informacije.

Isto tako najčešće mogućnosti su pretraživanje smještaja te rezerviranje tog istog. Korisnik

najčešće može pretražiti smještaj te ga izabrati po svome ukusu. Planer poslovnih putovanja

omogućavaju prikaz ostalih opcija koje su potrebne korisniku dok se nalaze u nekom od

gradova koje su podsjetili, a ne znaju gdje je što. Kao što je na primjer popis restorana ili

bankomata u određenom radijusu oko njih.

Page 16: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

14

4.1. Mogućnosti

Aplikacija na kojoj ćemo prikazati to jest koja će služiti kao ogledni primjer Mashup

aplikacije će imati sljedeće mogućnosti:

Registracija/ prijava

Na početnoj stranici (eng. Home page) će biti omogućena registracija za nove korisnike ili

prijava u sustav za stare to jest za već postojeće korisnika. Registracija će se moći odvijati na

dva načina. Korisnik će u formu moći upisati svoje podatke ili će se moći registrirati preko

OpenID mogućnosti. To bi značilo da korisnik ima mogućnost jednim klikom, povezati se sa

već svojim postojećim ID-em i tako se registrirati u sustav. Za već registrirane korisnike tu je

opcija upisa podataka u formu i prijava u sustav.

Pregled korisničkih podataka

Kada se korisnik registrira, sustav dobije neke određene podatke o njemu. Korisnik sam može

odlučiti da li želi upisati svoje dodatne podatke. Upisivanje dodatnih podataka nije obavezno,

ali tako može dodatno poboljšati grafički prikaz svog profila, kao što je na primjer odabir

profilne slike.

Promjena korisničkih podataka

Ako se korisnik u bilo kojem trenutku predomisli, uvijek može promijeniti svoje podatke. Kao

što je ranije navedeno korisnički podaci, kao što je na primjer korisničko ime i lozinka služe

za prijavu u sustav i obavezni su te se ispunjavaju prilikom registracije. Jednom kada se

korisnik registrira može mijenjati te podatke, dok ostali podaci služe najčešće za grafički

poboljšano sučelje, kao što je avatar. Korisnik toj opciji ne može pristupiti prije nego je

proces registracije dovršen.

Prikaz mape trenutne lokacije korisnika

Na prvom to jest na početnom tabu, korisniku se prikazuje mapa sa trenutnom lokacijom

korisnika. Tako korisnik može vidjeti svoju točnu lokaciju u bilo kojem trenutku kada se

prijavi u aplikaciju.

Odabir lokacije putovanja

Kada korisnik želi kreirati novo putovanje započinje sa odabirom odredišta. Odredište može

izabrati na više načina. Može odabrati grad to jest lokaciju na mapi, tako da mu se koordinate

grada automatski upisuju u formu ili može upisati sam koordinate grada. Ako korisnik

odabere bilo koji način da izabere svoje željeno odredište, ostali načini će se automatski

popuniti to jest prilagoditi odabiru korisnika.

Page 17: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

15

Odabir željenih informacije

Postoji velik broj različitih informacija koje korisnik može odabrati da mu se prikazuju za

odabranu lokaciju. Neke od tih informacija koje korisnik može odabrati su vrsta transporta

(taxi, aerodrom, javni prijevoz), restorani, smještaji, bankomati, trenutno vrijeme, benzinske

postaje i bolnice. Isto tako uz pojedine informacije, kao što su hoteli ili restorani to jest

uslužne djelatnosti, će se prikazat poveznica gdje se može saznati više o određenoj lokaciji,

kao što je na primjer stranica nekog restorana. U slučaju da informacije koju je korisnik

odabrano nije dostupna, sustav će obavijestiti korisnika. U sustavu je predefiniran radijus

unutar kojega se vračaju informacije koje je korisnik zatražio.

Spremanje puta

Korisnik će moći spremiti određeno putovanje tako da može provjeriti bilo kakvu spremljenu

informaciju u vezi tog puta. U tom slučaju ima već spremljene odabrane parametre i ne mora

opet postavljati lokaciju i parametre da bi dobio iste informacije. Još jedna prednost je to da

su spremljeni podaci napravljeni pomoću servisa, tako da će korisnik uvijek dobivati nove

podatke koje su u potpunosti točne. Isto tako spremljena putovanja se mogu mijenjati te ako

korisnik odluči ponoviti to putovanje, može ažurirati neke parametre koji mu se nisu svidjeli.

Komentiranje određenog putovanja

Još jednu od opcija koju sam odlučila implementirati, za koju smatram da bi bila izuzetno

korisna je komentiranje putovanja. Jednom kada je korisnik obavio svoje putovanje,

najvjerojatnije je da mu se nešto neće svidjeti i da nešto želi promijeniti ili napomenuti tako

da pri sljedećem putovanju zna o čemu se radi i da zna što točno treba promijeniti. U tom

slučaju će moći koristiti ovu opciju da komentira već spremljena putovanja. Komentari će se

prikazivati zajedno sa informacijama o tom putovanju, dok će postojati poseban prostor na

web aplikaciji gdje će korisnik moći unositi svoje komentare za određeno putovanje to jest za

određenu lokaciju.

Page 18: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

16

4.2. Korištene tehnologije

Neke od tehnologija koje će se koristiti za izgradnje same aplikacije su jezik PHP,

HTML5 i CSS3. Pomoću tih jezika će biti prikazan sam kostur aplikacije i uređena sama

aplikacija. Dok će se sa ostalim tehnologijama dohvaćati podatke koji će biti prikazani

korisniku. Svi podaci koje će aplikacija dohvaćati će biti dostavljeni u XML formatu iz neke

od sljedećih upitnih jezika: YQL (eng. Yahoo Query Language), xQuery ili xPath. Za izradu

web stanice još će se koristiti YUI (eng.TheYahoo! UserInterfaceLibrary) koja predstavlja

JavaScript biblioteku pomoću koje se na puno lakši način može izraditi interaktivna web

stranica pomoću Ajax-a, DHTML-a i DOM-a, a i sadrži nekoliko CSS resursa, tako da može

pomoći korisniku da odredi svoj grafički dizajn za web aplikaciju.

4.2.1. PHP

PHP predstavlja akronim za PHP: HypertextPreprocessor, te prije nego je došlo do te

kratice, predstavljao je eng. Personal Home Page Tools. (Lengstrof i Leggetter, 2013.) To je

programski jezik koji je napravljen prema jeziku C i Perl sintaksi, te je namijenjen izgradnji

dinamičkih web stranica. PHP je slobodan softver te je distribuiran prema PHP licenciranim

uvjetima. Ima jako dobru podršku prema raznim bazama podataka i Internet protokolima.

Prva verzija PHP/FI je značilo eng. Personal Home Page Tools/Forms Interpreter i to

je bilo skup Perl skripta, koje je razvio Rasmus Lerdorf 1995. godine. (Lengstrof i Leggetter,

2013.) Taj skup skripta su služile za brojanje posjeta na njegovoj privatnoj web stranici. Kako

se je prva verzija sve više popularizirala, javila se potreba za više funkcija te tada je razvio

novu verziju u jeziku C koja je mogla raditi s bazama podataka te je omogućila korisnicima

programiranje jednostavnih dinamičkih web stranica. Rasmus je odlučio objaviti PHP kao

slobodni softver tako da ga može velik broj korisnika poboljšati te je tako postao još bolji i

popularniji programski jezik. Upravo zbog toga PHP je postao jedan od najzastupljenijih

programski jezika za programiranje web aplikacija. Mogućnosti PHP-a su vrlo slične C-u te

ono što je vrlo pogodno za njega je to da se vrlo lako pamti i koristi.

Nakon službenog izdanja od Rasmusa u studenom 1997. godine, izdana je sljedeća

alfa verzija PHP 3. Sljedeće verzije koje su izdavali su:

PHP3

PHP4

PHP5

Page 19: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

17

4.2.2. HTML5

HTML5 je markup jezik za strukturiranje i prezentiranje sadržaja koji se objavljuje na

WWW-u te predstavlja temeljnu tehnologiju za Internet. (Lengstrof i Leggetter, 2013.)

Trenutno je aktualna peta revizija HTML standarda koja je prvotvorno stvorena 1990. godine

i standardizirana kao HTML4 od 1997. godine. Od dvanaestog mjeseca 2012. godine postaje

kandidat za W3C. Njegov cilj je bio taj da se poboljša jezik koji ima podršku za najnoviju

izdanu multimediju, sve dok se održava jednostavnim te čitljivim za ljude, a da je razumljiv

računalima i uređajima kao što su web preglednici i tako dalje. HTML5 je namijenjen tako da

ne samo sadrži sve što je sadržavao HTML4, nego da sadrži i XHTML1 i DOM2 HTML.

HTML5 u potpunosti slijedi svoje prethodnike HTML 4.01 i XHTML 1.1 te je

odgovoran za to da se smatra da je HTML i XHTML temelj za WWW te da sadrži različite

mogućnosti koji su vrlo specifične. (Lengstrof i Leggetter, 2013.) Uz to su predstavljani

pomoću različitih softverskih proizvoda kao što su web preglednici. Preko web preglednika je

moguće pregledati sintaksne pogreške u već postojećim web dokumentima. HTML ujedno

predstavlja i pokušaj da se definira jedinstven markup jezik koji će biti napisan u HTML-u ili

u XHTML sintaksi. Ono uključuje detaljno procesno modeliranje da bi se omogućilo više

operabilne implementacije. On uključuje, poboljšava i racionalizira markup koji je dostupan

za dokumente te predstavlja markup i aplikacijska programska sučelja, ili API-je za

kompleksnije web aplikacije. Iz istog razloga HTML5 je potencijalni kandidat za križane

platforma mobilnih aplikacija. Mnoge mogućnosti HTML5 su ugrađene na taj način da mogu

raditi na uređajima koji nemaju velik pristup jakom napajanju, kao što su pametni telefoni i

tableti. U dvanaestom mjesecu 2011. godine došli su rezultati istraživanja koje je izvršilo

poduzeće „Strategy Analytics“, koje govori da će prodaja HTML5 telefona dostići 1 bilijun u

2013. godine.

Isto tako HTML5 sadrži mnogo novih sintaktičnih mogućnosti. One uključuju

<video>, <audio> i <canvas> elemente. Isto tako omogućuje integraciju skalabilnih vektora

(SVG) i MathML, koji služi za korištenje matematičkih formula. Te mogućnosti su

dizajnirane tako da se olakša način korištenja multimedije i grafičkog sadržaja na webu bez

potrebe za bilo kakvih plug-inima i API-ima. Neki novi elementi kao što su <section>,

<article>, <header> i <nav> su dizajnirani tako da obogate semantički sadržaj dokumenata.

(Lengstrof i Leggetter, 2013.)

Page 20: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

18

4.2.3. CSS3

Cascading Style Sheets ili kako je najpoznatije CSS, je jezik koji predstavlja

upravljanje grafičkim stilom na web stranicama te se upotrebljava za opisivanje

prezentacijske semantike dokumenta koji je napisan u jednom od markup jezika.

(SawyerMyFarland, 2006.) Najpopularnije je koristiti CSS za web stranice koje su napisane u

HTML i XHTML-u, ali isto tako CSS može biti upotrijebljen u bilo kojem XML dokumentu,

uključujući obični XML, SVG i XUL.

CSS je primarno dizajniran tako da se omogući separacija sadržaja dokumenata, koji je

napisan u HTML-u ili u nekom sličnom jeziku. (Sawyer i Farland, 2006.) Separacija sadržaja

dokumenata se odvaja od prezentacije dokumenata, uključujući elemente kao što su layout,

boje i fontovi. Ta separacija poboljšava dostupnost sadržaja, omogućuje više fleksibilnosti i

kontrole u pojedinim prezentacijskim karakteristikama te omogućuje više stranica da

formatiranjem reduciraju kompleksnost i ponavljanje u strukturalnom sadržaju. Najbolji

primjer smanjivanje ponavljanja sadržaja je dozvola web dizajna bez tablica. CSS isto tako

dozvoljava da ista markup stranica bude predstavljena u različitim stilovima za različite

metode renderiranja, kao što je on-screen, inprine ili byvoice. Isto tako se može upotrijebiti da

web stranica prikazuje sadržaj različito, ovisno o tome na kojoj veličini ekrana se prikazuje to

jest na kojoj vrsti uređaja se prikazuje. Autor inače veže određeni CSS dokument na određenu

web stranicu, ali ako se korisniku ne sviđa određeni CSS dokument, može zamijeniti

dokument sa svojim dokumentom i na taj način nadvladati dokument koji je autor

specificirao.

4.2.4. JavaScript

JavaScript (JS) je interpretirani računalno programski jezik. Originalno je

implementiran kao dio web preglednika tako da skripta na strani klijenta može ostvariti

interakciju sa korisnikom, kontrolirati preglednik, komunicirati asinkrono i mijenjati sadržaj

dokumenata kada je prikazan.(Flanagan, 2011.)

JavaScript je prototipni bazirani skriptni jezik koji je dinamičan te ima funkcije prve

klase. (Flanagan, 2011.) Njegova sintaksa je nastala po utjecaju na programski jezik C.

JavaScript kopira puno imena iz Java programskog jezika, ali u svakom drugom smislu ta dva

jezika su nepovezana i imaju vrlo različitu semantiku. Ključni principi unutar JavaScript su

uzeti iz Self i Scheme programskih jezika. To je multiparadigmanski jezik, koji podupire

Page 21: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

19

objektno orijentirane imperativne i funkcionalno programske stilove. Isto tako JavaScript ima

velike koristi i izvan programiranja web stranica, kao što je na primjer u PDF dokumentima,

specifičnim preglednicima i desktop widgetima. Te primjene su jako značajne. Postoji noviji i

brži JavaScript VM i framework koji je izgrađen na tim alatima te upravo oni su povećali

popularnost JavaScript za server stranu web aplikacija. Najpopularniji i svakako najznačajniji

od novijih frameworka je Node.js

JavaScript je formaliziran ECMAScript jezik standard i primarno je upotrijebljen kao

web preglednik. Upravo to omogućuje programski pristup računalnim objektima unutar

okoline domaćina.

4.2.5. YQL

Yahoo! Query Language (YQL) je upitni jezik koji je stvoren od strane Yahoo!-a kao

dio njihove developerske mreže. (Perez, 2009.) YQL je dizajniran tako da pristupi određenim

podacima te da se njima može manipulirati kroz API prema kojem korisnici pristupaju preko

jednostavnog web sučelja. Prema tome dozvoljava se Mashup aplikacijama da omoguće

stvaranje developerske vlastite aplikacije koje se temelje na tim podacima.

YQL je inicijalno pokrenut u desetom mjesecu 2008. godine sa pristupom na Yahoo

API. U veljači 2009. godine se je javila još jedna mogućnost, a to je pristup ostalim otvorenim

tablicama podataka iz nekog drugog izvora kao što je to GoogleReader ili neke ostale poznate

novinarske kuće. Neki od tih API-ja i dalje zahtijevaju API ključ te im se na taj način

pristupa. U travnju 2009. godine, Yahoo je uveo sposobnost izvršavanja tablica podataka kroz

YQL upotrebljavajući JavaScript koji se vrti na serverima poduzeća besplatno. (Perez, 2009.)

Page 22: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

20

4.2.6. YUI

TheYahoo! UserInterfaceLibrary (YUI) je otvorena (eng. opensource) JavaScript

biblioteka za razvoj bogatih interaktivnih web stranica upotrebljavajući tehnologije kao što su

Ajax, DHTML i DOM skriptiranje.(Yahoo! Inc, 2013.) YUI uključuje nekoliko temeljnih

CSS resursa. Oni su dostupni unutar BSD licence. Razvoj na YUL je počeo u 2005. godini i

Yahoo! Servisi, kao što su MyYahoo! i Yahoo! su počeli upotrebljavati YUI u ljeto te godine,

dok je YUI bio pušten u javnu upotrebu u veljači 2006 godine. YUI je aktivno razvijan od

strane tima u Yahoo! poduzeću.

2009. godine Yahoo! je pustio u upotrebu YUI 3. To je nova verzija YUI koja je

ponovo izgrađena iz temelja da bi se modernizirala biblioteka i da bi se upotrijebili ono što su

naučili da bi trebali promijeniti u YUI 2. Neke od najvažnijih unaprijeđenija su CSS selektori

za pristup DOM elementima, naglasak na granulitet modula te još druge razna unapređenja.

(Yahoo! Inc, 2013.)

4.2.7. xQuery

XQuery je upitni i funkcionalni programski jezik koji je dizajniran da bi se pomoću

zbirke upita moglo doći do različitih podataka u XML formatu. XQuery 1.0 je razvijen za

XML Query grupu od strane W3C. Rad su koordinirali između razvoja XSLT 2.0 od strane

XSL grupe. Sama svrha XML upitnog programa je ta da se omoguće fleksibilni upiti da se

izdvoje podaci iz stvarnog i virtualnog dokumenta na WWW-u. Prema tome konačno je

ostvarena interakcija između weba i svijeta baze podataka. (Chamberlin, 2003.)

4.2.8. xPath

XPath ili XML Path jezik je upitni jezik pomoću kojeg se izabiru čvorovi iz XML

dokumenta. U dodatku XPath može biti upotrjebljen da bi se određene računalne vrijednost,

kao što su na primjer slova (eng. string), brojevi ili logičke vrijednost, mogle izvući iz

sadržaja XML dokumenta. XPath je definiran od strane WWW-a ili poznatije strane W3C.

(Clark i DeRose, 2001.)

XPath jezik je osnovan na temelju strukture XML dokumenata, te pruža sposobnost

navigacije unutar te strukture tako da selektira čvorove prema različitim brojem kriterija.

Originalno je cilj XPath-a bio taj da se omogući zajednička sintaksa i model između XPointer

i XSLT, koji je podsustav XPatha upitnog jezika i upotrebljavan je u drugim specifikacijama

Page 23: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

21

od strane W3C, kao što su XML Schema ili XForms. XPath je postao široko korišten od

strane velikog broja XML procesnih biblioteka i alata, te mnogi od njih isto tako nude

mogućnost CSS selektora. (Clark i DeRose, 2001.)

4.2.9. jQuery

jQuery je JavaScript biblioteka koja je dizajnirana od strane jednostavnog skriptiranja

na strani klijenta. jQuery je pušten za javnost u siječnju 2006. godine. Autor je John Resig. Ta

biblioteka je upotrijebljena na preko 65% na 10,000 najposjećenijih stranica i smatra se

najpopularnijom JavaScript bibliotekom danas. (Chaffer i Swedberg, 2007.)

jQuery je besplatan, open source softvare te je licenciran na MIT licencu. Sintaksa je

dizajnirana tako da se može jednostavno navigirati kroz dokument, tako da se izabiru DOM

elementi, stvaraju animacije i razvijaju ajax aplikacije. jQuery isto tako pruža sposobnost

developerima da stvaraju plug-inove. To im omogućava da stvaraju apstraktne interakcije i

animacije sa naprednim efektima i visoko kvalitetnim tematskim widgetima.

Page 24: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

22

4.3. Implementacija

Pri početku implementacije Planera poslovnih putovanja, počeli smo s instalacijom i

konfiguracijom WAMP-a. Nakon normalne instalacije WAMP-a, trebalo je uključiti

ekstenziju curl u WAMP, tako da bi se moglo koristiti neke dodatne opcije kao što je na

primjer korištenje Yahoo! QueryLanguage. Na sljedećoj slici su prikazane sve ekstenzije koje

su uključene u WAMP, uključujući i curl.

Slika 2 Ekstenzije WAMP-a

Nakon što je WAMP konfiguriran, možemo početi sa implementacijom aplikacije.

Aplikaciju sam odlučila implementirati prema koracima, to jest prema prethodno navedenim

mogućnostima.

Registracija/ prijava

Pregled korisničkih podataka

Promjena korisničkih podataka

Prikaz mape trenutne lokacije korisnika

Odabir lokacije putovanja

Odabir željenih informacije

Prikaz puta

Komentiranje određenog putovanja

Page 25: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

23

4.3.1. Registracija i prijava u sustav

Registracija i prijava u sustav se vrše pomoću jednostavnih forma u koje se upisuju podaci

te se zatim pozivaju određene funkcije. Za registraciju postoje nekoliko input-a u koje se

upisuju traženi podaci kao što su na primjer ime i prezime, korisničko ime, lozinka i e-mail.

Tražene podatke možemo vidjeti na sljedećoj slici:

Slika 3Input box registracije korisnika

Nakon što se upišu traženi podaci pozivamo akciju registration.php. Unutar

registration.php vidimo zapisivanje podataka iz input-a u varijable te upit koji upisuje

korisnika u bazu podataka. Sam sadržaj registration.php možemo vidjeti na sljedećoj slici:

Slika 4 Upis novog korisnika u bazu podataka

Page 26: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

24

Drugi način registracije je OpenID. U ovom primjeru koristimo GoogleOpenID

registraciju koja se sastoji od nekoliko dijelova. Prvi dio definira button koji vodi na stranicu

gdje se prihvaćaju uvjeti korištenja korisničkih podataka:

Slika 5ButtonGoogleOpenID

Drugi dio definira dio koda gdje se provjerava da li korisnik postoji u bazi podataka i ako

ne postoji zapisuju se njegovi podaci dobiveni od Google servera.

Slika 6 Provjera korisnika i upisu u bazu podataka za OpenID

Page 27: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

25

Jednom kada je korisnik registriran, sustav pomoću linije echo "<meta http-

equiv='refresh' content='2; url=home.php' />"; prebacuje korisnika na

početnu stranicu aplikacije i automatski ga prijavljuje, jer popunjava sesiju sa podacima

dobivenih od Google servera.

Prijava se odvija na sličan način, samo što nakon dobivanja podataka provjeravamo s

upitom u bazi podataka da li korisnik postoji te ako postoji zapisujemo ga u sesiju. Tijekom

kompletnog rada stranice koristimo sesiju da bismo prikazali korisniku određene podatke i da

bi sustav raspoznavao o kojem je korisniku riječ i na taj način dozvolio mu pristup određenim

podacima. Način na koji je implementirana provjera korisnika i upisivanje u sesiju možemo

vidjeti na sljedećoj slici:

Slika 7 Prijava korisnika

Page 28: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

26

4.3.2. Pregled i promjena korisničkih podataka

U sljedećoj logičnoj cjelini „My data“ korisnik može vidjeti svoje podatke i

promijeniti ih. Pregled i promjena korisničkih podataka radi na sljedećem principu: Unutar

input-a je već upisan tekst koji je uzet iz baze podataka prema sesiji trenutnog korisnika. Taj

tekst predstavlja trenutne podatke korisnika. Ako korisnik želi mijenjati svoje podatke

jednostavno mora izbrisati postojeće i unesti nove podatke. Sustav automatski prepisuje nove

podatke preko starih podataka te kada korisnik klikne na button „Change“, sustav promjeni

postojeće podatke i vrati korisnika na početnu stranicu iz koje je opet u mogućnosti da otvori

svoje trenutne podatke na „My data“ tabu te pregleda što je točno promijenio ili ako opet

nešto želi promijeniti. U prozoru za promjene se nalazi forma za upload slike, to jest avatara u

sustav. Svi ostali podaci se mogu upisati ranije, dok se slika može postaviti na sustav samo iz

ovog dijela. Kako izgleda dio koda gdje se iz bazu upisuje u input možemo vidjeti na

sljedećoj slici:

Slika 8 Dohvaćanje podatka iz baze podataka

Te na koji način je prikazan podatak korisniku:

Slika 9 Ispis vrijednost u input box

Page 29: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

27

4.3.3. Prikaz mape trenutne lokacije korisnika

Trenutna lokacija korisnika se može vidjeti na početnoj stranici korisnika. Zamišljena

je kao orijentacijska točka korisnika i da može vidjeti gdje se točno nalazi. Prikaz same mape

i lokacije korisnika je implementirano pomoću sljedeće JavaScript funkcije.

Slika 10JavaScript funkcija za poziciju korisnika

4.3.4. Odabir lokacije putovanja

Novo putovanje se može odabrati na nekoliko načina. Pomoću mape se može odrediti

geografska širina i dužina klikom na samu mapu. Ta mapa je implementirana isto tako

pomoću JavaScript funkcija. Funkcija se uključuje u datoteku na sljedeći način:

Slika 11 Uključenje JavaScript datoteke

Page 30: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

28

Te se jednostavno poziva funkcija getLocation(); u kojoj se dobiva trenutna lokacija korisnika

i ispisuje na mapi. Sadržaj getLocation(); funkcije je sljedeći:

Slika 12 Funkcija GetLocation()

Drugi način je da se ručno upiše geografska širina i dužina u input box. Ako se koristi bilo

koji način, drugi način će se odmah sam automatski popuniti.

Slika 13 Upis geografske širine i visine

Jednom kada se dobije lokacija putovanja, korisnik odabire željene informacije.

Page 31: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

29

4.3.5. Odabir željenih informacije

Korisnik ima mogućnosti pomoću checkbox-a odabrati između nekoliko osnovnih informacije

koje će se prikazivati u vezi određene lokacije. To su vrijeme, popis restorana, hotela,

bankomata, taxi stanica, benzinskih postaja, bolnica, aerodroma i javnog prijevoza. Na

sljedećoj slici možemo vidjeti odabir informacija vezano uz lokaciju.

Slika 14 Odabir informacija

Kada korisnik odabere željene informacije, odabrani checkbox-i se prenose na sljedeću

stranicu kako bi sustav znao što treba prikazati. Na sljedećoj slici vidimo način na koji se

provjerava da li je označen checkbox. Ako je postavljena varijabla vrijeme to jest eng.

Weather, upisujemo vrijednost u varijablu i prelazimo na sljedeću provjeru.

Slika 15 Provjera checkbox-a

Page 32: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

30

Zadatak sljedeće provjere je pregled da li je zatražena informacija, u ovom konkretnom

slučaju o vremenu, zapravo zatražena. Ako je, izvršava se sljedeći dio koda. Ovdje možemo

vidjeti na koji način se šalje zahtjev za informacijama pomoću YQL-a te kako se ispisuju te

informacije.

Slika 16 Ispis informacija pomoću YQL-a

4.3.6. Spremanje puta

Kada je korisnik odabra sve informacije koje ga zanimaju u vezi neke određene

lokacije, može ili spremiti putovanje ili odustati od cjelokupnog procesa. Ako želi spremiti

informacije, onda jednostavno klikom na button„Save“ pokreće skriptu save_trip.php u kojem

se nalazi spremanje informacija u varijable i upit koji upisuje te varijable u bazu podataka. U

sam upit ulaze sve moguće informacije. Informacije koje je korisnik odlučio da ne želi

spremiti se automatski upisuje 0, što označava da te informacije nema.

Page 33: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

31

4.3.7. Pregled sačuvanog putovanja

Pregled putovanja isto započinje sa listom putovanja iz koje korisnik može birati koje

putovanje želi pregledati. Na sljedećoj slici možemo vidjeti dio koda u kojem se prikazuju

putovanja koja korisnik može odabrati.

Slika 17 Pregled putovanja

Jednom kada se odabere određeno putovanje, slijedi prikaz detalja koji su prikazani to jest

spremljeni za to putovanje.

Page 34: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

32

Na sljedećoj slici možemo vidjeti dio koda gdje se uzima iz baze podatka podaci o

spremljenom putovanju to jest podaci koje je korisnik odabrao te se na isti način kao što su

podaci originalno dobiveni, sustav opet šalje zahtjev tako da korisnik za spremljeno putovanje

može vidjeti ažurne informacije.

Slika 18 Dohvaćanje spremljene lokacije iz BP 4

Isto tako kao što je rečeno, korisnik ima opciju komentiranja. Tako da osim samih

podataka korisnik će imati dostupno odmah i komentare za to putovanje, tako da odmah može

vidjeti informacije koje je još prije izabrao i komentare koji opisuju da li su te informacije bile

istinite. Na sljedećoj slici možemo vidjeti kod gdje se prikazuju korisniku komentari.

Slika 19 Prikaz komentara

Page 35: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

33

4.3.8. Komentiranje određenog putovanja

U tabu Comments korisnik može izabrati putovanje koje želi komentirati i pritiskom

na naziv putovanja otvorit će mu se posebna forma gdje se vide prethodni komentari i gdje

mu je omogućeno daljnje komentiranje izabranog putovanja. Na sljedećoj slici možemo

vidjeti ispis putovanja koje korisnik može odabrati.

Slika 20 Ispis putovanja

Nakon što korisnik odabere putovanje koje želi komentirati prikaže mu se nova

stranica gdje su prikazani već prethodni komentari s datumom komentiranja i gdje se nalazi

forma za unos komentara.

Page 36: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

34

Jednom kada korisnik unese komentar i kada potvrdi da želi komentirati poziva se sljedeća

funkcija:

Slika 21 Funkcija za ispis komentara

U toj funkciji se uzimaju uneseni podaci to jest komentar i pomoću ajax-a se prenose na

sljedeću stranicu definirano pomoću url-s: „commentajax.php“.

Page 37: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

35

4.4. Primjer korištenja

Logički slijed koji korisnik treba slijediti da bi koristio web aplikaciju je sljedeći:

Registrirati se u sustav

Koristiti formu ili OpenID

Prijaviti se u sustav

Dodati svoje korisničke podatke

Saznati na kojoj je lokaciji

Odabrati lokaciju putovanja

Odabrati podatke koji će se prikazivati za pojedinu lokaciju

Pregled traženih informacija

Pregledati spremljeno putovanje

Komentirati određeno putovanje

Korisnik može odabrati bilo koji put korištenja aplikacije, pogotovo ako je već registriran ili

automatski prijavljen u sustav. Ovaj slučaj korištenja je odabran kako bismo prošli kroz sve

primjere korištenja aplikacije.

4.4.1. Registracija

Korisnik može odabrati jedan od dva načina na koji se može registrirati. Forma od

strane aplikacije ili OpenID pomoću kojeg se korisnik može registrirati pomoću Google

računa. Na sljedećoj slici možemo vidjeti na koji način korisnik može izabrati način

registracije.

Slika 22 Odabir registracije

Nakon što korisnik izabere jedan od dva link, otvara mu se određena stranica

predefinirana u prikazanim poveznicama.

Page 38: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

36

4.4.2. Forma

Forma se sastoji od nekoliko input box-a. Ime i prezime, korisničko ime, lozinka i mail.

Jednom kada korisnik ispuni tražene podatke i klikne na button„Register“, podaci se upisuju u

bazu podataka i korisnik se može prijaviti u sustav.

Slika 23 Forma za registraciju

Page 39: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

37

4.4.3. GoogleID

Osim forme izrađene za potrebe aplikacije, korisnik može koristiti opciju OpenID-a

pomoću kojeg se može prijaviti putem svog Google mail računa. Kada klikne na opciju da se

koristi njegov Google račun pojavljuje se stranica gdje se traži odobrenje korisnik da se

njegovi podaci mogu koristiti u aplikaciji.

Slika 24GoogleID

Kada korisnik odobri korištenje njegovih podataka u bazu podataka se upisuju njegovi

podaci te ga se prijavljuje u aplikaciju. Dalje korisnik može mijenjati svoje podatke prema

potrebi.

Page 40: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

38

4.4.4. Prijava

Prijava u sustav se izvršava nakon registracije. Ako se koristi googleID, sustav

automatski prijavljuje korisnika tako da se ovaj korak u tom slučaju može izbjeći, ali ako

korisnik koristi formu, onda će sam trebati upisati potrebne podatke da se prijavi. Korisnik

treba upisati svoje korisničko ime i lozinku u sljedeću formu:

Slika 25 Forma za prijavu u sustav

Page 41: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

39

4.4.5. Trenutna lokacija

Nakon što se korisnik prijavi u sustav, prvo se pojavljuje njegova trenutna lokacija. Izgled

početne stranice je sljedeći:

Slika 26 Trenutna lokacija korisnika

Meni je podijeljen u tabove, gdje korisnik može prolaziti kroz razne tabove i tako

mijenjati sadržaj. Kao što je rečeno na početnoj stranici je prikazana trenutna lokacija

korisnika označena crnom točkom.

4.4.6. Promjena podataka

Daljnji korisnički podaci se nalaze u sljedećem tabu „Mydata“.

Slika 27 Mydata tab

Page 42: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

40

Možemo vidjeti sve već prethodno unesene podatke i još dodatno polje gdje korisnik može

postaviti svoju vlastiti slike, tako da ne treba koristiti zadano postavljenu sliku. Na taj način

može više prilagoditi sustav sebi. Nakon što korisnik promjeni podatke, sustav ga vrača

ponovo na početnu stranicu gdje može ponovo vidjeti sve podatke.

4.4.7. Odabir lokacije

Lokacija se odabire na dva načina. Može se odabrati preko mape jednostavnim klikom na

mapu te se geografska širina i dužina automatski upisuju u text box.

Slika 28 Mapa za odabir lokacije

Ili se mogu geografska širina i dužina ručno upisati u textbox-ove i zatim se pushpin to jest

marker na mapi promjeni.

Slika 29 Unos geografske širine i dužine

Page 43: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

41

Jednom kada je izabrana lokacija korisnik može izabrati koje sve želi saznati informacije o

izabranoj lokaciji. Na sljedećoj slici možemo vidjeti potpuno grafičko sučelje gdje korisnik

izabire novo putovanje.

Slika 30 Odabir putovanja

Kada su odabrani svi željeni podaci, korisnik potvrđuje sustavu da je završio sa

podešavanjem.

Page 44: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

42

4.4.8. Pregled traženih informacija

Sljedeće što se prikazuje korisniku su podaci koje je izabrao u prethodnom izborniku. Podaci

se prikazuju na isti način kao i početan odabir lokacije, promjene podata te ostalih opcija, a to

je pomoću tabova. Tabovi su dinamični te ovise o tome koliko je parametara korisnik

odabrao. U ovom slučaju korištenja odabrani su podaci o vremenu, okolnim restoranima,

bankomatima, taxi služba i aerodromima. Općeniti podaci o lokaciji to jest general tab je

fiksan i uvijek se prikazuje korisniku kao početan tab. Na sljedećoj slici možemo vidjeti

početan tab to jest general gdje se prikazuju općeniti podaci o izabranoj lokaciji..

Slika 31 Prikaz podataka - general tab

Ovdje korisnik ima opciju sačuvati podatke o putovanju, to jest sačuvati podatke koji ga

zanimaju i na taj način ponovo ih pregledati u bilo kojem vremenu.

Page 45: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

43

Korisnik isto tako može vidjeti podatke o vremenu i restoranima, kako je to izabrao na

prethodnom izborniku. Ostali tabovi funkcioniraju na isti način kao i prethodni.

Slika 32 Informacije o vremenu

Slika 33 Informacije o restoranima

Page 46: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

44

4.4.9. Spremljena putovanja

Unutar taba spremljena putovanja se nalazi tablica sa popisom svih putovanja korisnika.

Slika 34 Putovanja korisnika

Kada korisnik odabere određeno putovanje, otvara mu se nova stranica koja sadrži sve

podatke koje je korisnik prethodno spremio u bazu podataka vezano uz određeno putovanje.

Korisniku se ispisuju svi podaci koje je izabrao u originalnom putu, ali su osvježeni, to jest

sustav je ažurirao najnovije podatke o toj lokaciji, tako da korisnik može vidjeti stvarne

podatke.

Slika 35 Detalji putovanja

Unutar detalja putovanja se mogu vidjeti i zapisani komentari korisnika koji se odnose na to

putovanje. Korisnik komentare može upisati puten sljedećeg taba komentari.

Page 47: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

45

4.4.10. Komentari

U tabu comments, korisniku je prvo prikazan popis njegovih spremljenih putovanja. Kraj

svakog putovanja se nalazi informacija o broju komentara koji je korisnik ostavio vezano uz

određeno putovanje.

Slika 36 Popis putovanja s komentarima

Jednom kada korisnik odabere određeno putovanje, otvara mu se sučelje gdje može ostavljati

nove komentare i gdje su prikazani stari komentari koje je već ostavio. Svaki put može

dopisati nešto novo, i komentari su strukturirani u cijeli tako da je svaki komentar vezan za

putovanje na koje se odnosi tako da ne može doći do zabune u komentarima.

Slika 37 Unos komentara

Page 48: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

46

5. Kritički osvrt

Danas je sve u mobilnosti i u dostupnosti. Upravo zbog toga smatram da je ova

aplikacija vrlo pogodna za korištenje, te pogotovo dolazi do izražaja kada pogledamo da na

tržištu postoji puno sličnih aplikacija koje nudi slične mogućnosti. Smatram da u budućnosti

leži tehnologija nabrojena u ovom radu. Sve više i više tehnologija predstavljaju podatke koje

možemo dobiti u istom trenutku kada ih zatražimo te da ti podaci budu točni i ažurni. Upravo

to različite tehnologije sa upitima pružaju. Omogućavaju programerima da uključuju

informacije u svoju stranicu na jednostavan način.

Sve tehnologije koje su uključene u ovaj rad imaju vrlo slične mogućnosti. Pružaju

različite dijelove Mashup aplikacije. Na primjer tehnologije kao što su YQL, YUI, xPath i

druge pružaju developerima da vrše upite nad različitim bazama podataka te na taj način

dolaze do podataka. Korisnici sami mogu odabrati koje vrste podataka žele da im se prikaže te

mislim da sa time developeri daju mogućnost odabira svojim korisnicima, te da se zbog toga

još više korisnicima sviđaju takve vrste aplikacija. Tehnologije kao što su PHP i JavaScript su

vrlo korisne jer se sa njima mogu prikazivati velik broj podataka korisniku. JavaScript se sve

više i više razvija te prati današnji rast tehnologija. Tako da kako dolaze nove tehnologije,

JavaScript se prilagođava tim tehnologijama te tako omogućava developerima da uključe

nove tehnologije u svoje web aplikacija te prikažu korisnicima informacije na najbolji i

najmoderniji mogući način. JavaScript pokazuje svoju uključenost u nove tehnologije time

što se prilagođava današnjem vrlo važnom trendu, a to su mobilni telefoni i tableti. PHP je

otvoren i vrlo koristan jezik koji puno toga omogućava u razvoju aplikacija sa serverske

strane. Uz to ga je vrlo jednostavno naučiti koristiti, tako da ga može koristiti i neiskusan

korisnik. Mislim da su tehnologije vrlo popularne iz brojnih razloga te da definitivno daju

dobru strukturu samoj aplikaciji te na neki način tjeraju samog developera da radi na način

tako da prilagođava aplikaciju tim tehnologijama.

Struktura same aplikacije Planera poslovnog puta je vrlo jednostavna. Sama zamisao

je to da se korisniku prikazuju one mogućnosti koje on želi da mu se pokazuju. Mislim da sam

složila dobru strukturu aplikacije, jer je prema korisniku organizirano dobro grafičko sučelje

te on sam može organizirati kakve informacije želi. Postoje logičke cjeline koje objedinjuju

tabovi. U jednom tabu su korisnički osnovni podaci te mogućnost editiranja tih podatka. U

drugom logičkom djelu korisnik može složiti svoj put. To ne mora niti biti put, korisnik može

iskoristiti aplikaciju, ako jednostavno želi saznati nešto više o nekoj lokacije. Ta lokacija ni ne

Page 49: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

47

mora biti dio njegovog poslovnog puta. U toj logičkoj cjelini korisnik može odabrati sve to

što želi da mu se prikazuje na odabranoj lokaciji to jest putu. Ako želi može sačuvati svoj put.

Te spremljene putove može pregledati u sljedećoj logičnoj cjelini koja predstavlja spremljene

lokacije to jest putovanja. Korisniku će se ispisivati lista putova te on može odabrati ili

editirati već postojeća putovanja. Postoji još jedna logička cjelina koja omogućava korisniku

pregled trenutne lokacije, tako da ako želi mogućnost pregledavanja svoje okoline u potrazi za

određenim informacija, ne mora koristiti opciju za traženje lokacije, nego će ga sustav

automatski locirati. Mislim da su cjeline dobro strukturirane, te da daju korisnicima tražene

podatke. Postoji još velik broj informacija koji bi se mogle ponuditi korisniku, ali zbog toga

što je ovo aplikacija koja služi samo za primjer, nisam smatrala da je potrebno implementirati

brojne opcije koje već komercijalni alati na tržištu nude.

Isto tako smatram da postoji dobra logička struktura samog rada, jer koristi današnje

popularne tehnologije i nove današnje trendove. Mislim da nije bilo potrebno da se detaljno

opisuju pojedine tehnologije i trendovi nego da se da neka osnovna slika te neke osnovne

informacije pomoću kojih će se predstaviti tehnologije koje se koriste. U ovom radu je

prikazan na koji način se koristite razne tehnologije i trendovi te tako zaokružujemo sve to sa

primjerom jednostavne aplikacije.

Page 50: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

48

6. Zaključak

Cilj je pružiti običnom korisniku ono što on traži, na što bolji, brži, jednostavniji i

jeftiniji način. Tehnologije koje smo spominjali u ovom radu, kao što su semantički web,

Mashup aplikacije, Web 2.0 i Web 3.0 tehnologije upravo to pokušavaju postići. Sa današnjim

sve bržim razvojem dolazimo do toga da korisnik bira što želi, a sve ostale tehnologije se

izgrađuju da se prilagode tom zahtjevu. Da bi to bilo moguće, došli smo do ideje kako

zapisivati informacije, to jest u kojem obliku postaviti informacije da bi se što brže pretražile i

dostavile korisniku.

Cilj semantičkog weba je upravo to, napraviti logičku strukturu informacija te ih tako

preraditi da u budućnosti strojno obradive informacije postaju svakodnevnica. I to ne samo po

nazivu, nego i po značaju, što bi na neki način predstavljalo umjetnu inteligenciju.(Berners-

Lee i sur., 2001.) Tako bi došlo do pretraživanja koje razumije značenje što korisnik želi

postići. Postoji još velik niz tehnologija koje su se počele koristiti, kao što su povezani podaci

koji predstavljaju upotrebu weba tako da bi se stvorila poveznica između podataka iz različitih

izvora. Upravo iz tih razloga, u ovom radu je prikazana takva vrsta aplikacije. Kako se

izgrađuje, implementira i koristi. Kao što je već ranije rečeno, glavni fokus je na brzini

pružanja informacija te na točnosti i ažuriranosti informacija. Upotrebom različitih

tehnologija, upravo to se postiže.

Da bi se izgradila jedna takva aplikacija, upotrijebljeni su različiti programski jezici,

koji pomoću jednostavne sintakse pružaju takve podatke. Kako je danas mobilnost vrlo važna,

upravo tehnologije kao što su Yahoo! QueryLanguage, TheYahoo! UserInterfaceLibrary,

xQuery i xPath to pružaju. Pomoću interaktivnih grafičkih sučelja i jednostavnih sintaksi, vrlo

je jednostavno krajnjem korisniku izgraditi vrstu Mashup aplikacije po njegovoj volji. Uz

upotrebu već polako standardnih jezika, kao što je HTML5, PHP i JavaScript, koji pružaju

jako puno novih opcija, možemo doći do jakih web aplikacija, koje su u potpunosti

prilagođene korisniku. Upravo to predstavlja primjer ove aplikacije te pokazuje koliku moć

danas imaju takve vrste tehnologije, a činjenica je da su se one tek počele razvijati i da će biti

još puno više i još puno boljih mogućnosti za izgradnju aplikacija.

Page 51: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

49

7. Literatura

[1] Allemang D, Hendler J (2012) Semantic Web for theWorkingOntologist:

EffectiveModelingin RDFS and OWL, USA: Morgan Kaufman

[2] Anderson P (2007) What is Web 2.0? Ideas, technologiesandimplications for

education. Technology&StandardsWatch. Preuzeto 21.5.2013 s:

http://www.jisc.ac.uk/media/documents/techwatch/tsw0701b.pdf

[3] Benslimane D, Dustdar S, Sheth A (2008) ServicesMashups: The New Generationof

Web Applications. IEEE ComputerSociety: 1089-7801 Preuzeto 11.5.2013

s:http://www.infosys.tuwien.ac.at/Staff/sd/papers/ServicesMashups_IC.pdf

[4] Berners-Lee T, Hendler J, Lassila O (2001) TheSemantic Web: A newformof Web

conten. Scientific American. Preuzeto 8.5.2013 s:

http://www.scientificamerican.com/article.cfm?id=the-semantic-web

[5] Bizer C, Heath T, Berners-Lee T (2009)SpecialIssue on Linked Data,

InternationalJournal on Semantic Web andInformation Systems (IJSWIS). Preuzeto

8.5.2013 s:http://linkeddata.org/docs/ijswis-special-issue

[6] Curbera F, Duftler M,Khalaf R,Nagy W, Mukhl N,Weerawarana S (2002)

UnravelingtheWeb Services Web: AnIntroduction to SOAP, WSDL,and UDDI.

Spotlight: 1089-7801/02/$17.0 Preuzeto 20.5.2013 s:

http://www.citeulike.org/user/ianhall7/article/100185

[7] Chaffer J, Swedberg K (2007) Learningjquery: betterinteractiondesignand web

developmentwithsimplejavascripttechniques.PacktPublishingPreuzeto 21.5.2013

s:http://dl.acm.org/citation.cfm?id=1408134

[8] Chamberlin D (2003) XQuery: A Query Language for XML. IBM

AlmadenResearchCenter. Preuzeto 21.5.2013 s:

http://db.ucsd.edu/cse232b-s05/sigmod03_xquery.pdf

[9] Clark J, DeRose S (2001) XML Path Language (XPath) W3C, preuzeto 22.5.2013

s:http://www.w3.org/TR/xpath/

[10] Croft BW (1997) What do peoplewantfrominformationretrieval. London, UK.

TheHague: InternationalFederation for InformationandDocumentation

[11] Daniel F, Matera M (2009) Turning Web

ApplicationsintoMashup.Components: Issues, Models, andSolutions, Italia:

Page 52: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

50

Politecnicodi Milano. Preuzeto 8.5.2013

s:http://link.springer.com/content/pdf/10.1007%2F978-3-642-02818-2_4.pdf#page-1

[12] Flanagan D (2011) JavaScript: TheDefinitiveGuide. USA: O'ReillyMedia

[13] Garret JJ (2005) Ajax: A New Approach to Web Applications. Adaptivepath 1-

415-495-8270. Preuzeto 8.5.2013 s:

http://adaptivepath.com/publications/essays/archives/000385.php

[14] Hendler J (2008) Web 3.0: ChickenFarms on theSemantic Web. Web

technologies: RensselaerPolytechnic Institute. Preuzeto 8.5.2013 s:

https://www.usukitacs.com/papers/3282/hendler_web_3.pdf

[15] Hendler J, (2009) Web 3.0 Emerging. IEEE ComputerSociety: 0018-9162

Preuzeto 15.5.2013 s:

http://dl.acm.org/citation.cfm?id=1512177

[16] Lengstrof J, Leggetter P (2013)Realtime Web Apps: With HTML5

WebSocket, PHP, andjQuery. aPress: 1430246200

[17] Mellraith S, CaoSon T, Zeng H (2001) Semantic Web Services.

StanfordUniversity: 1094-7167/01/$10.00 Preuzeto 8.5.2013 s:

http://o2k.stanford.edu/people/sam/ieee01.pdf

[18] O'Reilly T (2007) WhatIs Web 2.0: DesignPatternsandBusinessModels for

theNextGenerationofSoftware. Communications &strategies: MPRA Paper No. 4578

Preuzeto 8.5.2013 s:http://mpra.ub.uni-muenchen.de/4578/

[19] Perez JC (2009)YahooExtends YQL Web Data QueryPlatform. PC world.

Preuzeto 21.5.2013 s:http://www.pcworld.com/article/164067/article.html

[20] Slavić A (2004)Semantički Web, sustavi za organizaciju znanja i mrežni

standardi. SchoolofLibrary, ArchivesandInformationStudies, UniversityCollege

London. Preuzeto 7.5.2013 s:http://dzs.ffzg.unizg.hr/text/Slavic_2004.pdf

[21] SawyerMyFarland D (2006) CSS: Themissing manual. USA:

O'ReillyMediaInc. Preuzeto 20.5.2013 s:

http://homepages.rpi.edu/~zappenj/YouthSummit/Readings/McFarland_CSS_Manual.

pdf

[22] Soergel D (2001) TherepresentationofKnowledgeOrganizationStructure (KOS)

data: a multiplicityofstandards, JCDL NKOS Workshop, VA, 2001. Preuzeto

10.5.2013 s: http://www.dsoergel.com/cv/B75.pdf

[23] Veltman K H (2001) Syntacticandsemanticinteroperability: newapproaches to

knowledgeandthesemantic web, The New ReviewofInformationNetworking, 159-183.

Page 53: INTEGRACIJA WEB 3.0 SADRŽAJA I USLUGA U …...web servisi ili može implementirati neku JavaScript funkciju. Blokovi sadrže operacije ulaza (eng. inputa) i izlaza (eng. outputa)

51

[24] Yahoo! Inc. (2013) Documentation. Preuzeto 20.5.2013 s:

http://yuilibrary.com/yui/docs/guides/

[25] Yu J, Benatallah B, Casati F, Daniel F (2008)

UnderstandingMashupDevelopmentand itsDifferences with Traditional Integration.

University of New South Wales, Sydney, Australia. Preuzeto 17.5.2013 s:

http://mashart.org/ER09/YuIEEEIC08.pdf