SVEUČILIŠTE U ZAGREBU

FAKULTET ORGANIZACIJE I INFORMATIKE

V A R A Ž D I N

Toni Steyskal

BOGATE INTERNET APLIKACIJE

ZAVRŠNI RAD

Varaždin, 2014.

SVEUČILIŠTE U ZAGREBU

FAKULTET ORGANIZACIJE I INFORMATIKE

V A R A Ž D I N

Toni Steyskal

Matični broj: 40102/11–R

Studij: Informacijski sustavi

BOGATE INTERNET APLIKACIJE

ZAVRŠNI RAD

Mentor:

Dr.sc. Tihomir Orehovački

Varaždin, rujan 2014.

I

Sadržaj

1. Uvod ...................................................................................................................................... 1

2. Bogate internet aplikacije ...................................................................................................... 2

2.1. Kratka povijest ................................................................................................................ 3

2.2. Usporedba s desktop aplikacijama ................................................................................. 4

2.3. Arhitektura ...................................................................................................................... 5

2.4. Prednosti i nedostaci ....................................................................................................... 7

2.5. Primjer ............................................................................................................................ 8

3. Tehnologije .......................................................................................................................... 10

3.1. Adobe/Apache Flex ...................................................................................................... 10

3.1.1. Adobe Flash ........................................................................................................... 11

3.2. AJAX ............................................................................................................................ 12

3.3. JavaFX .......................................................................................................................... 14

3.4. Microsoft Silverlight .................................................................................................... 15

3.5. HTML5 ......................................................................................................................... 17

4. Prototip ................................................................................................................................ 19

4.1. Unity ............................................................................................................................. 20

4.2. UnityPlay ...................................................................................................................... 21

4.3. Tehnologije ................................................................................................................... 23

4.3.1. HTML5 .................................................................................................................. 24

4.3.2. CSS ........................................................................................................................ 25

4.3.3. PHP ........................................................................................................................ 26

4.3.4. JavaScript, jQuery i AJAX .................................................................................... 26

5. Zaključak ............................................................................................................................. 30

6. Literatura ............................................................................................................................. 32

1

1. Uvod

Početak stvaranja web stranica karakteriziran je statičkim stranicama koje su prenosile

samo sirove informacije krajnjem korisniku, ne obraćajući pozornost prema interakciji i

pridobivanju pažnje posjetitelja stranice. Prve ideje stvaranja web stranica su bile zaokupljene

samo sadržajem koji žele prenijeti ciljanoj skupini, ne shvaćajući da je i način prenošenja tog

sadržaja od velike važnosti. Način prenošenja sadržaja i željene poruke je bitan aspekt

ostavljanja dojma i marketinga proizvoda ili usluge. U suvremenom globalnom poslovnom

okruženju, kupci i korisnici usluga su sve zahtjevniji, te je njihovu pozornost i odanost sve teže

zadobiti. Posvećivanje više vremena načinu prenošenja sadržaja i kreiranju interakcije pomoću

bilo kojeg načina komuniciranja sa kupcima i korisnicima dovodi do većeg uspjeha i

zadovoljstva na obje strane. Uobičajene standardne web stranice ne mogu u potpunosti doprijeti

do korisnika i mogu ostaviti loš ili neočekivan dojam. Danas se vrlo rijetko nailazi na web

stranicu koja uopće nema interakciju sa korisnikom. Standardno se očekuje i određena razina

dinamičnost, što zapravo predstavljaju bogate internet aplikacije. Bogate internet aplikacije su

postale toliko rasprostranjene da se one kao takve već smatraju uobičajenim web stranicama.

Primjer povećanja pojma web stranice i integracije karakteristika bogatih internet aplikacija

može se predočiti na raznim primjerima web stranica koje se danas svakodnevno koriste i

posjećuju. Krajnji korisnik tu stranicu doživljava kao uobičajenu web stranicu ne shvaćajući da

ona sadrži čak sve ili samo neke karakteristike i prednosti bogatih internet aplikacija. Bogate

internet aplikacije čine interakcije privlačnim, dinamičnim i korisnim, one izlaze u susret

korisniku. Posjetitelj stranice u današnje doba osjeća odbijenost prema klasičnim prvobitnim

statičnim web stranicama. Zahtijeva se da se kvalitetan sadržaj prenosi i na kvalitetan način,

korisnik jednostavno želi „sudjelovati“ u samoj razmjeni informacija.

Završni rad započinje uvodom u pojam bogatih internet aplikacija, objašnjavanjem nastanka i

utjecaja istih na moderan web i internet. Definirana je arhitektura bogatih internet aplikacija i

uspoređene su s desktop aplikacijama, čime su pokazane prednosti i nedostaci bogatih internet

aplikacija. Predočene su tehnologije za izradu bogatih internet aplikacija, načini njihovih

primjena i nastanka. Za potpunu predodžbu i prikaz bogate internet aplikacije kreiran je prototip

i prikazan je unutar završnog rada.

2

2. Bogate internet aplikacije

Naziv bogate internet aplikacije (eng. Rich Internet Applications – RIA) je prvi put

upotrijebljen 2002. godine od strane inženjera Macromedije, današnjeg Adobe-a. Macromedia

je odlučila poraditi na novom konceptu razvijanja web aplikacija i desktop aplikacija. Nova

vrsta aplikacija će pružati bogato korisničko iskustvo koje povećava produktivnost i

zadovoljstvo aplikacijom [Allaire, 2002].

Bogate internet aplikacije su web aplikacije, koje koriste podatke koji se mogu obraditi od

strane poslužitelja i klijenta. Nadalje, razmjena podataka se odvija na asinkron način da klijent

bude osjetljiv na promjene (eng. responsive) i pritom kontinuirano preračunava ili osvježava

potrebne dijelove korisničkog sučelja. Sa gledišta korisnika, bogate internet aplikacije pružaju

sličan izgled i dojam kao i desktop aplikacije. Riječ „bogate“ konkretno označava razliku

naspram prijašnjih generacija web aplikacija. Karakteriziraju ih raznovrsne interaktivne

operativne kontrole, mogućnost korištenja aplikacija neovisno o mreži i transparentno

korištenje računalne snage klijenta i poslužitelja [Busch i Koch, 2009].

Bogate internet aplikacije predstavljaju web aplikacije koje sadrže mnoge karakteristike

desktop aplikacija. Bogate internet aplikacije su uobičajeno isporučene pomoću preglednika,

njegovog posebnog dodatka (eng. plug-in), neovisnog sigurnosnog okvira (eng. sandbox),

korištenjem JavaScript-a ili preko virtualnog stroja. Struktura bogate internet aplikacije vidljiva

je na slici 1.

Slika 1: Bogate internet aplikacije (Izvor: Whatley, 2007)

3

Web 2.0 predstavlja vrstu evolucije Web-a, promijenivši način kreiranja aplikacija za web i

način korištenja istih. Pojam se često povezuje s bogatim okruženjima i okruženjima

orijentiranim prema korisniku (eng. User-Centered), manjim brojem osvježavanja stranica

(koristeći AJAX) i korištenjem određenih standarda. Također, Web 2.0 se odnosni na vrstu

weba gdje korisničko sudjelovanje, suradnja i programska sučelja za izradu programa (eng.

Application Programming Interface - API) zajedno otvaraju mogućnosti za moćnije aplikacije

[Granbäck, 2009].

Bogate internet aplikacije su dio Web 2.0 standarda unutar kojeg još ulazi nekoliko tehnologija

(npr. XML, RSS, CSS itd.). To su aplikacije koje bi trebale imati iste funkcionalnosti kao

desktop aplikacije (poslovne aplikacije, igrice i sl.). Takva vrsta aplikacije je u potpunosti u

skladu sa konceptom Web 2.0 aplikacija. Glavna karakteristika bogatih internet aplikacija je

kreiranje okruženja koje je orijentirano prema korisniku (eng. User-Centered). Takvo

okruženje omogućava korisnicima učinkovito korištenje resursa uz maksimalne mogućnosti

dizajna. Još jedna bitna karakteristika je široka dostupnost, dobivena korištenjem tehnologija

koje su rasprostranjene i kompatibilne [IBM, 2014].

Trenutno postoje mnoge platforme i okviri (eng. framework) koji se upotrebljavaju za izradu

bogatih internet aplikacija (npr. Adobe Flash, Microsoft Silverlight, JavaFX, AngularJS,

Google Web Toolkit i drugi). Najkorišteniji je Adobe/Apache Flex za profesionalni razvoj, koji

osigurava potpuno neovisna okruženja preglednika i operativnog sustava. Također, HTML5 se

koristi kao alternativna tehnologija otvorenog koda (eng. open source) sa okvirima koji

omogućuju veću interaktivnost sa web aplikacijama.

2.1. Kratka povijest

Prva ideja kreiranja animacijskog okruženja unutar preglednika i pokušaj savladavanja

standardnih problema weba predstavlja ključnu prekretnicu u stvaranju bogatih internet

aplikacija. Takva vrsta ideje potiče od proizvoda „SmartSketch“ koji je prije 20-tak godina

izveden iz vektorski orijentiranog programa za skiciranje. Kako su dizajneri proizvoda

pokušavali animirati svoje skice i probiti se na tržište, nastao je predak današnjeg Adobe Flash

Player-a pod nazivom FutureSplash. Time su stvoreni korijeni platforme za novi stil aplikacija,

poznate pod imenom bogate internet aplikacije. Kroz nekoliko narednih godina Flash se razvija

i dobiva audio, video i vrlo složene mogućnosti rukovanja pikselima i tekstom pod okriljem

Macromedije. Bogate internet aplikacije su riješile važan problem pružanja vrlo interaktivnog

korisničkog iskustva kroz sam preglednik i nisu bile ovisne o načinu kako preglednik renderira

4

HTML označavanje. Također, pojavili su se i razni HTML standardizirani načini pružanja

bogatog iskustva (AJAX). Njihova kompleksnost razvijanja se ublažuje mnogim

HMTL/JavaScript okvirima, no tehnologija posebnih dodataka (eng. plug-in) i dalje ostaje

glavna pri pružanju najinteraktivnijih i standardiziranih iskustva s bogatim internet

aplikacijama [Hilwa i Perry, 2010].

2.2. Usporedba s desktop aplikacijama

Tradicionalne desktop aplikacije su karakterizirane bogatim korisničkim iskustvom i

kompleksnim grafičkim sučeljem (izbornici, višestruki prozori i sl.). Desktop aplikacije se

izvršavaju brzo i smještene su lokalno na platformi krajnjeg korisnika. Problem takvih

aplikacije nastaje kada korisnici koji koriste istu nisu lokalizirani, odnosno, kada je aplikaciju

potrebno koristiti preko mreža s različitim sigurnosnim ograničenjima. Dodatni problem se

javlja kada je grupa korisnika iznimno velika, što otežava instalaciju, održavanje i fleksibilnost

pristupa samoj aplikaciji. Pri tome se u obzir mora uzeti pojedinačni hardver i operativni sustav

svakog korisnika [The Server Labs S.L, 2008].

Web aplikacije pružaju način kako savladati te prepreke pomoću arhitekture „tankog“ klijenta

koja je temeljena na internet standardima i protokolima. Jednostavan web preglednik preuzima

ulogu prezentacijskog sloja unutar aplikacije, a ostatak se izvršava centralizirano na

poslužitelju. Na taj način samo spajanje na mrežu je dovoljno za bilo kojeg korisnika da pristupi

aplikaciji od bilo kuda. Također, kod web aplikacija nema potrebe za instalacijom i ažuriranjem

na strani klijenta. No glavni problem tradicionalnih web aplikacije je da su vrlo statične. Kod

tradicionalnih web aplikacija svaka interakcija aplikacije mora proći kroz poslužitelj, potrebna

je razmjena podataka, te im nedostaje bogato korisničko sučelje [The Server Labs S.L, 2008].

Bogate internet aplikacije zapravo predstavljaju spoj tih dvaju načina rada, pokušavajući

preuzeti prednosti desktop aplikacija i web aplikacija. To postižu uvođenjem dodatnog

klijentskog sloja, kako bi se izvršavao kod na strani klijenta, postižući bolje performanse,

korisničko sučelje i korisničko iskustvo.

5

2.3. Arhitektura

Arhitektura bogatih internet aplikacija se ne oslanja na komunikaciju između klijenta i

poslužitelja (eng. Client-Server Communication). U takvoj komunikaciji korisnik šalje zahtjev

prema poslužitelju, zatim se odvija potpuna obrada podataka i poslužitelj vraća odgovor

zahtijevane web stranice u obliku čistog HTML-a. Bogate internet aplikacije se oslanjaju na

obradu koja se izvršava na klijentskom računalu unutar preglednika. Rezultat je učinkovitiji

proces obrade, oslobađanje poslužitelja i pružanje veće mogućnosti dizajneru aplikacije. Još

jedna karakteristika ovakve arhitekture je asinkrona komunikacija između bogate internet

aplikacije i poslužitelja. Takav način rada omogućava brži odaziv i brže izvršavanje aplikacije.

Male količine podataka koje je potrebno razmijeniti između poslužitelja i klijenta ne zahtijevaju

stalno osvježavanje stranica [The Server Labs S.L, 2008].

Ovisno o količini programske logike koja se izvršava na strani klijenta, postoje različita rješenja

kao što je prikazano na slici 2.

Slika 2: Arhitekture bogatih internet aplikacija (Izvor: The Server Labs S.L, 2008)

6

Tipična bogata internet aplikacija se sastoji od tri sloja: prezentacijskog, aplikacijskog i

podatkovnog sloja. Prezentacijski sloj obično sadrži korisničko sučelje i komponente

prezentacijske logike. Aplikacijski sloj se sastoji od poslovne logike, radnog tijeka i

komponenata poslovnih subjekata. Podatkovni sloj uobičajeno služi za pristup podacima i

sadrži komponente usluga. Često je da bogate internet aplikacije izvode poslovne obrade i

pristup podataka na strani klijenta. Stoga, klijent može sadržavati neke ili čak sve

funkcionalnosti aplikacijskog i podatkovnog sloja, ovisno o načinu razvoja same aplikacije

[Microsoft, 2014].

Kod tradicionalnih web aplikacija podaci se nalaze na poslužitelju, dok kod bogatih internet

aplikacija podaci mogu biti raspoređeni između poslužitelja i klijenta. Razvojni programer (eng.

developer) može odlučiti o načinu raspodjele podataka, pa čak i razviti aplikaciju koja će se

privremeno koristiti neovisno o poslužitelju. Dakle, bogata internet aplikacija može koristiti

dosljedan i promjenjiv sadržaj klijenta. Podacima se može manipulirati na strani klijenta i pri

završetku poslati poslužitelju. Također, tradicionalne web aplikacije koriste samo jedan

kontroler (eng. controller) na strani poslužitelja koji određuje prikaz i osvježavanje stranice.

Pri svakoj korisničkoj interakciji, cijela stranica je osvježena i prikazana ispočetka. Bogate

internet aplikacije uvode dodatan kontroler na strani klijenta koji je odgovoran za osvježavanje

i prikaz pojedinih dijelova stranice. Obrada podataka se može izvršiti i na strani klijenta i

poslužitelja, te postoji drugačija navigacijska struktura od Web 1.0 aplikacija. Zbog povećane

sposobnosti obrade podataka na strani klijenta, kod bogatih internet aplikacija poslužitelj i

klijent mogu obavljati složene operacije [Busch i Koch, 2009].

Bogate internet aplikacije mogu biti izvedene kao sučelja koja prekrivaju poslovne usluge s

kojima korisnik rijetko dolazi u kontakt (eng. back end business services). Mogu biti izvedene

i kao složene aplikacije koje izvode većinu procesa same i samo komuniciraju s istim kako bi

iskoristile ili poslale informacije. Dakle, dizajn i implementacija bogatih internet aplikacija se

razlikuje. Međutim, u pogledu prezentacijskog sloja i načina komuniciranja s spomenutim

poslovnim uslugama, postoje uobičajeni pristupi dobrom arhitekturnom dizajnu. Većina se

temelji na dobro poznatom uzorku dizajna koji ohrabruje korištenje zasebnih komponenti

unutar aplikacije. Zasebne komponente se koriste za smanjenje zavisnosti aplikacije, da učine

održavanje i testiranje jednostavnije i promiču ponovnu iskoristivost [Microsoft, 2014].

Bogate internet aplikacije predstavljaju mehanizme za smanjenje razmjene podataka koji

prenose interakcijski i prezentacijski sloj sa strane poslužitelja na stranu klijenta. Nasuprot

7

standardnih web aplikacija, bogate internet aplikacije koriste i sinkroni i asinkroni način

komuniciranja. Raspodjela podataka i funkcionalnosti prijeko klijenta i poslužitelja proširuje

značajke proizvedenih događaja, koji mogu biti otkriveni, obaviješteni i obrađeni na različite

načine [Busch i Koch, 2009].

2.4. Prednosti i nedostaci

Iz načina izrade bogatih internet aplikacije proizlaze određene prednosti [Hilwa i Perry, 2010]:

imaju iste značajke i sposobnosti poput desktop aplikacija

nemaju potrebu za instalacijom za njihovo pokretanje, iz razloga kako rade isključivo

na web preglednicima

ažuriranje se provodi automatski

jedna te ista bogata internet aplikacija se može izvršavati na različitim preglednicima i

operativnim sustavima

daju veću vizualnu interaktivnost od uobičajenih web stranica

smanjuju troškove zbog svoje implementacije na više platforma

Ni jedna vrsta tehnologije ne predstavlja savršeno rješenje za sve scenarije korištenja, pa tako i

bogate internet aplikacije imaju svoje nedostatke. Iako pružaju bogatije korisničko sučelje, još

ne mogu u potpunosti konkurirati sa tradicionalnim desktop aplikacijama. Ukoliko se koriste

unutar sigurnosnog okvira (eng. sandbox), imaju ograničen pristup resursima sustava. Kako bi

se postigla neovisnost o platformi, neke bogate internet aplikacije koriste skripte na strani

klijenta. Skripte su pisane u interpreterskim jezicima poput JavaScript-a, što rezultira značajnim

gubitkom performansi. Također, jedan od glavnih nedostataka bogate internet aplikacije je

ovisnost o internet vezi. Idealna zamjena za desktop aplikaciju bi korisniku dopustila da bude

„povremeno spojen“, no trenutno tipična bogata internet aplikacija obavezno zahtijeva

povezanost na mrežu [The Server Labs S.L, 2008].

Kod potpuno dinamičkih bogatih internet aplikacija javlja se još jedan nedostatak da se

određena stanja stranice ne pohranjuju automatski u povijest pretraživača. Potrebni su posebni

mehanizmi kako bi se korisnik mogao tipkom Povratak (eng. Back) vratiti na prijašnje stanje.

Isti problem se javlja i kod pohrane stranice u društvenom knjižnom označavanju preglednika

(eng. bookmarks). Pretraživač pamti samo originalnu stranicu, a ne može pohraniti neko

određeno stanje aplikacije.

8

2.5. Primjer

Pojam bogatih internet aplikacija je najlakše shvatiti preko određenih primjera. Naime

postoje razne upotrebe bogatih internet aplikacija unutar raznih poslovnih i edukacijskih

sektora. Kao primjer će biti prikazane stranice Centra za istraživanje i edukaciju jezika ( eng.

The Center for Language Education and Research – CLEAR) koje se mogu pronaći na

http://clear.msu.edu/teaching/online/ria/#RIAs. Ova vrsta bogatih internet aplikacija se koristi

u edukativnu svrhu s ciljem približavanja novog načina učenja studentima i stvaranja odnosa s

nastavnicima Michigan State Sveučilišta.

Primjer bogate internet aplikacije je QuizBreak! koji predstavlja vrlo fleksibilan program.

QuizBreak! omogućuje nastavnicima da stvore zabavan način učenja jezika unutar učionica,

pomoću interaktivnih materijala za učenje i koristeći vrstu kviza (slika 3).

Slika 3: QuizBreak! (Izvor: CLEAR, 2010)

9

QuizBreak! funkcionira na način da nastavnik stvara određena pitanja neke bodovne

vrijednosti. Pitanja se mogu nadopuniti savjetima u obliku audio ili video zapisa, slika,

animacija i slično. Ujedno je stvoreno okruženje orijentirano prema korisnicima za kreiranje

samog kviza od strane nastavnika, kao i korištenje aplikacije od strane studenta. Može se u

potpunosti koristiti samo unutar preglednika i radi na više platforma. Izgled sučelja i

implementacija video pomoći unutar kviza vidljivi su na slici 4.

Slika 4: Video pomoć (Izvor: CLEAR, 2010)

10

3. Tehnologije

Postoje razne platforme i okviri za kreiranje bogatih internet aplikacija, a već spomenute

najpoznatije i najkorištenije će biti objašnjene, Adobe Flex, AJAX, JavaFx, Silverlight i

HTML5.

3.1. Adobe/Apache Flex

Adobe Flex je prvi okvir za izradu bogatih internet aplikacija, kojeg je Macromedia izdala

na tržište 2004. godine. 2011. godine je preimenovan u Apache Flex i dalje razvijan od strane

Apache Software Foundation-a. Trenutna najnovija inačica na tržištu je Apache Flex 4.13. Flex

je ujedno i aplikacijski okvir otvorenog koda za izradu tradicionalnih, desktop i mobilnih

aplikacija, pritom koristeći Flex alat za razvoj softvera (eng. Flex Software Development Kit –

SDK). Pojednostavljen prikaz izrade aplikacije unutar Flex-a vidljiv je na slici 5 [Apache Flex,

2014].

Slika 5: Način rada Flex-a (Izvor: Apache Flex, 2014)

Flex 4 stavlja naglasak na ideju koja se odnosi na „Design in Mind“, kojoj je glavni prioritet

omogućavanja lake prilagodbe izgleda aplikacija inicijalnoj zamisli dizajnera. Realizacija se

vrši pomoću predodređene teme ili koristeći komponentu za dizajnerske alate kako bi se

postigao jedinstven izgled. To se ujedno i odražava u MXML-u, koji predstavlja Flex-ov jezik

za označavanje korisničkog sučelja (eng. user interface markup language), čiji je format

prilagođen da odgovarajući alati bolje opisuju značajke poput stanja, prijelaza i efekata. Flex

11

aplikacije se izvode koristeći Flash Player. Kako je ActionScript programski jezik koji koristi

Flash, također se koristi i za Flex. ActionScript 3.0 predstavlja zadnju inačicu, te je objektno

orijentiran jezik koji zahtjeva Flash Player 9 ili više. Flex aplikacije se mogu i pisati u MXML-

u koji je vrlo sličan HTML-u. MXML je deklarativan jezik za označavanje temeljen na XML-

u, a koristi se za opisivanje korisničkih sučelja i postavljanja komponenti. MXML se može

koristiti i za implementaciju značajki koje nisu vizualnog tipa [Granbäck, 2009].

3.1.1. Adobe Flash

Adobe Flash platforma je bila vodeće rješenje za kreiranje bogatih internet aplikacija, koje

nudi skup integriranih tehnologija. Koristi se za kreiranje animacija, igra i bogatih internet

aplikacija koje je moguće prikazati, igrati i izvršiti pomoću Adobe Flash Player-a. Povijest

Flash-a se proteže do 1996. godine, kada je predstavljen od strane Macromedije. Adobe Flex

aplikacije se obično sastavljaju (eng. compile) u ActonScript-u, koji se zatim sastavlja u SWF

(eng. Shockwave Flash) datoteku. SWF datoteke se sastoje od sadržaja i funkcionalnosti

Flash/Flex aplikacije i izvodi se unutar Flash Player-a [Granbäck, 2009].

U početku je Adobe Flash bio alat za izradu animacija i web aplikacija (jednostavne igre,

reklame i sl.). Daljnjim razvojem proširile su se mogućnosti i ugrađuju se kompleksnije

instrukcije i opcije u sam program. Adobe Flash se bazira na ActionScript programskom jeziku,

te je napravljen kao vektorski alat. Adobe je omogućio veliku kompatibilnost između svojih i

Macromedijinih programa, učinivši suradnju između Photoshop, Illustrator i Flash programa

laganom i intuitivnom. Moguće je čitavu web stranicu nacrtati u Illustratoru, zatim je prebaciti

u Flash, tamo animirati i programirati dodatne funkcionalnosti. Nedostaci Flash stranica su

dugo učitavanje, loše pozicioniranje na tražilicama, nemogućnost korištenja gumba za

povratak. Postoji i problem nepravilnog društvenog knjižnog označavanja (eng. bookmarking)

i nedostatak pretraživanja stranica. Naravno postoje i dobre strane korištenja Flash alata, kako

on koristi vektorske grafike kao osnove, omogućava skaliranje sadržaja bez gubljenja kvalitete.

Jednom učitana stranica se može čuvati, čime se izbjegava kasnije ponovno učitavanje. Flash

nudi mogućnost povećanja interaktivnosti i standardiziranja web stranica na način da se u svim

preglednicima prikazuju jednako [Hilwa i Perry, 2010].

12

3.2. AJAX

AJAX (akronim za Asynchronous JavaScript and XML) predstavlja skup programskih

tehnika ili specifičan pristup web programiranju. Takav način programiranja omogućuje

neprimjetno ažuriranje web stranice ili dijela web aplikacije s informacijama sa poslužitelja,

bez potrebe za osvježavanjem stranice. Unatoč tome što u nazivu sadrži XML, njegova

upotrebna nije obavezna, već se može i koristiti JSON umjesto XML-a. Također, zahtjevi prema

poslužitelju ne moraju biti asinkroni. Tehnologije koje se koriste unutar AJAX-a su [IBM,

2014]:

XHMTL i CSS

The Document Object Model (DOM)

JavaScript

XML i XSLT

XMLHttpRequest objekt

Kako bi se aplikacija kreirala pomoću AJAX tehnologija dovoljni su samo: XHTML, DOM i

JavaScript, no razvijanje pomoću AJAX-a s vremenom će zahtijevati korištenje svih

tehnologija. Ujedno su potrebni i jezici za rukovanje sa interakcijama sa poslužiteljem, najčešće

korišteni su: PHP, ASP.NET (Visual Basic.Net/C#) i Java [Ullman i Dykes, 2007].

Primjer implementacije Javascript-a/AJAX-a je Facebook, koji koristi AJAX unutar vlastitog

okvira. Drugi primjer je Google Maps, koji koristi AJAX kako bi asinkrono učitao slike

prilikom pomicanja na karti. Okviri temeljeni na JavaScript-u/AJAX-u predstavljaju bolji izbor

ukoliko je propusnost (eng. bandwidth) najvažniji dio kod rada projekta. Bogate internet

aplikacije izrađene pomoću Javascript/AJAX okvira su generalno mnogo manje od bogatih

internet aplikacija izrađenih pomoću nekih drugih okvira temeljenih na posebnim dodacima

(eng. plug-in based frameworks). Problem kod bogatih internet aplikacija zasnovanih na

Javascript-u i AJAX-u je nemogućnost iskorištenja iste snage poput okvira temeljenih na

posebnim dodacima, kao što su izravna manipulacija grafike, suočavanje s vektorskom

grafikom i obavljanje više dretvenih izračuna [Granbäck, 2009].

Prednost korištenja AJAX-a je mogućnost web aplikacija da traže samo onaj sadržaj koji im je

bitan za prikaz promjene stanja. Na taj način znatno smanjuju korištenje propusnosti mreže i

vrijeme obrade zahtjeva. Asinkroni zahtjevi omogućuju pregledniku da bude interaktivniji i da

brže reagira na ulazne podatke, a pritom se dijelovi stranica mogu zasebno učitavati. Aplikacija

13

time ostavlja dojam da je brža i da brzo reagira na zahtjeve korisnika, iako zapravo nije došlo

do nikakve promjene na strani poslužitelja. Nedostatak pri korištenju AJAX-a je ovisnost o

postavkama preglednika korisnika. Ukoliko je isključena podrška za AJAX ili JavaScript, neće

se moći koristiti sve funkcionalnosti web aplikacije. Također, postoji i problem sigurnosti jer

korištenje AJAX-a omogućuje ubacivanje štetnog koda [W3Schools, 2014].

JavaScript je razvijen u svrhu skriptiranja, a ne za kreiranje punopravnih bogatih internet

aplikacija. JavaScript/AJAX proizvod možda neće nužno podržavati sve spomenute moguće

funkcije bogatih internet aplikacija. Djelomično ažuriranje stranice, asinkrona komunikacija,

modalni dijalozi i izbornici će biti dostupni, no ostale specifičnosti bogatih internet aplikacija

bi mogle biti ograničene u funkcionalnosti ili potpuno nedostupne. Tipično, skup bogatih

naprava korisničkog sučelja (eng. rich UI widgets) koje podržavaju izravnu manipulaciju će biti

siromašne u usporedbi s onima koje nalazimo kod desktop aplikacija. Obilježja industrijske

snage poput održavanja, pouzdanosti, dostupnosti, skalabilnosti, performansi i sigurnosti

predstavljaju izazov za JavaScript/AJAX proizvode. JavaScript/AJAX proizvodi se moraju

oslanjati na skriptni jezik i moraju raditi u heterogenom skupu izvršne okoline [Domenig,

2005].

Najpoznatija JavaScript biblioteka, koja olakšava korištenje JavaScript-a je jQuery. Radi na

način da puno zajedničkih zadataka koji zahtijevaju veliku količinu JavaScript linija koda

obuhvaća unutar metoda. Definirane metode se mogu pozvati korištenjem samo jedne linije

koda. Također, pojednostavljuje AJAX pozive i DOM manipulaciju. jQuery sadrži sljedeće

značajke: HTML/DOM manipulaciju, CSS manipulaciju, HTML metode događaja, efekte i

animacije i ostale korisne značajke. Iako postoji mnogo drugih JavaScript okvira, jQuery je

najpopularniji i proširiv, što je dokazano njegovim korištenjem od strane kompanija poput

Google-a, Microsoft-a, IBM-a i Netflix-a. Prva inačica jQuery 1.0 se pojavila 2006. godine,

dok je trenutno aktualna inačica 2.1.0 koja je podržana od strane svih današnjih preglednika

(Internet Explorer, Chrome, Firefox, Safari, Opera itd.) [W3Schools, 2014; jQuery, 2014].

14

3.3. JavaFX

JavaFX je okvir za kreiranje bogatih internet aplikacija, razvijen od strane Sun

Microsystems-a. Prvi put je izdan 2008. godine, kao lagana, hardverski ubrzana Java UI

platforma za poslovne aplikacije. Trenutna najnovija inačica JavaFX 2.0 je dostupna na

stranicama Oracle-a.

JavaFX se dijeli na tri različita izdanja: JavaFX Desktop, JavaFX Mobile i JavaFX TV. JavaFX

Desktop se često oslovljava kao samo JavaFX. Ta podjela predstavlja ideju korištenja JavaFX

okvira na više platforma. Razvojni programer (eng. developer) pritom može izabrati biblioteke

iz bilo kojeg izdanja (uobičajenog, JavaFX Desktop ili JavaFX Mobile) i time razviti aplikaciju

za obje platforme bez dodatnih izmjena. Arhitekturni pregled komponenata platforme vidljiv je

na slici 6 [Granbäck, 2009].

Slika 6: Arhitektura JavaFX platforme (Izvor: Granbäck, 2009)

Svrha JavaFX-a je stvaranje grafičkih aplikacije sa bogatim interaktivnim sadržajem. Okvir je

isporučen s UI komponentama poput klizača i grafikona. Iako nema mnogo komponenata poput

Flex-a i Silverlight-a, tim komponentama se može mijenjati vizualni izgled kako bi se bolje

15

uklopio sa ostatkom izgleda aplikacije. Nadalje, animacije, transformacije i efekte je moguće

lako primijeniti na bilo koju grafičku komponentu, a za slaganje rasporeda komponenata postoji

šest različitih klasa rasporeda [Granbäck, 2009].

3.4. Microsoft Silverlight

Microsoft Silverlight je alat za kreiranje i isporuku bogatih internet aplikacija na webu.

Silverlight 5 preuzima temelje Silverlight-a 4 za izgradnju poslovnih aplikacija i medijskih

iskustava. Alat uključuje mnogo noviteta, poput visoke video kvalitete, poboljšanje performansi

i značajka koje poboljšavaju produktivnost razvojnog programera (eng. developer). Silverlight

predstavlja besplatan poseban dodatak (eng. plug-in) za web preglednik koji također omogućuje

i kreiranje modernih mobilnih aplikacija [Microsoft, 2014].

Silverlight runtime je u osnovi podskup Windows Presentation Foundation-a (WPF). On

predstavlja Microsoftov standardan model za razvijanje korisničkih sučelja i centralni dio .NET

okvira, izgrađen na DirectX-u. Windows Vista i Windows 7 su izgrađeni koristeći WPF kao

grafički temelj. Glavne funkcionalnosti i nove značajke WPF-a su sažete u poseban dodatak

(eng. plug-in) koji se može instalirati na strani klijenta. Što znači da je Silverlight lakša i

prenosivija inačica WPF-a. Silverlight je razvijen da bude raspodjeljiv na webu, a pritom ima

snagu WPF modela. Aplikacije kreirane u Silverlight-u se mogu pokretati unutar preglednika

ili bez veze s internetom sa start izbornika i radne površine [Granbäck, 2009].

Kako bi spremio podatke lokalno, Silverlight koristi izoliranu pohranu (eng. Isolated Storage).

Izolirana pohrana predstavlja nešto poput virtualnog datotečnog sustava, koji raspodjeljuje 1

MB po aplikaciji. Taj način rada služi kao alternativa korištenju kolačića (eng. cookies) imajući

prednost boljih performansi i priručne memorije (eng. caching) većih skupa podataka.

Nedostatak je da administrator sustava može onemogućiti toj datoteci pravo pisanja i podaci

unutar te datoteke nisu u potpunosti sigurni ako nisu kriptirani. Kreiranje Silverlight aplikacije

unutar Visual Studia 2012 prikazano je na slici 7 [Granbäck, 2009].

16

Slika 7: Microsoft Silverlight

U Silverlightu video predstavlja običan element kojeg se može dodatno animirati, razvlačiti,

namještati prozirnost i stavljati druge elemente iznad njega. Video element se ni po čemu ne

tretira kao zaseban element sučelja. Razvojna platforma Silverlight aplikacije za izradu sučelja

koristi XAML (eng. Extensible Application Markup Language), XML i neki od .NET jezika za

programiranje [Višnar, 2008].

Silverlight predstavlja Microsoftov odgovor na dominaciju Adobe Flash alata na tržištu koje se

usredotočuje na multimedijske stranice. Izrađene aplikacije se mogu pokrenuti unutar

preglednika na kojem je prethodno instaliran Silverlight poseban dodatak (eng. plug-in). Postoji

mogućnost instalacije tih aplikacija u obliku desktop aplikacije pomoću sigurnosnog okvira

(eng. sandbox). Kako podržava više programskih jezika stvara određenu prednost na području

bogatih internet aplikacija, Silverlight nudi mogućnost implementacije u C#, (Iron)Pyhton-u,

(Iron)Ruby-u, VB.NET-u ili bilo kojem drugom .NET podržanom jeziku. Problem Silverlight-

a je nepopularnost kod razvojnih programera (eng. developer) bogatih internet aplikacija, kao i

Microsoft-ova odluka o usmjeravanju alata prema Windows Phone razvoju čime njegova

upotreba za web opada. Silverlight ujedno nije dostupan na Android i iOS uređajima koji su

vladajući na mobilnom tržištu [Kromkamp, 2010; Tucker, 2011].

17

3.5. HTML5

HTML5 predstavlja najnoviji standardni jezik za označavanje web stranica. Prijašnja

inačica HTML-a, 4.01, je izašla davne 1999. godine, te se je od tada internet drastično

promijenio. Potreban je HTML5 kako bi zadovoljio potrebe korisnika i programera. Novi

standard bi trebao u potpunosti zamijeniti HTML4, XHTML i HTML DOM inačicu 2. Posebno

je razvijen da može prikazivati bogati sadržaj bez potrebe za dodatnim posebnim dodacima

(eng. plug-ins). Trenutna inačica obuhvaća sve - od animacije do grafike, audio i filmove, a i

koristi se za kreiranje složenih web aplikacija. HMTL5 je sam po sebi iskoristiv na svim

platformama, bez obzira da li se koristi računalo, tablet, pametni telefon ili pametni TV

[W3Schools, 2014].

Međusobnom suradnjom između World Wide Web Consortium-a (W3C) i Web Hypertext

Technology Working Group (WHATWG) je nastao HTML5. WHATWG je do 2006. godine

razvijao web forme i aplikacije, a W3C XHTML 2.0. Zajedno su odlučili stvoriti novu HTML

inačicu i odredili su neka pravila za HTML5 [W3Schools, 2014]:

nove značajke će se temeljiti na HTML, CSS, COM i JavaScript-u

potreba za vanjskim posebnim dodacima (poput Flash-a) se treba smanjiti

rukovanje pogreškama treba biti jednostavnije i lakše

skriptiranje se mora zamijeniti jezikom za označavanje (eng. markup language)

HTML5 bi trebao biti neovisan o uređaju na kojem se izvršava

razvojni proces bi trebao biti vidljiv javnosti

Cilj stvaranja HTML-a 5 je razvoj standarda koji može pokretati cijele aplikaciju unutar web

preglednika. HTML5 predstavlja širok skup novih tehnologija. Uključuje nove HTML

elemente, geolokacijska programska sučelja, povuci i ispusti (eng. drag-and-drop) programska

sučelja, obrasce 2.0, podršku za video i audio, skalabilnu vektorsku grafiku i CANVAS grafiku,

CSS3, dvodimenzionalne i trodimenzionalne animacije i JavaScript 2.0 [Matthew, 2013].

Neke od novih zanimljivih značajki u HTML5 su pojava <canvas> elementa za 2D crtanje, te

<video> i <audio> elemenata za reprodukciju medija. Pojavljuje se podrška za lokalnu pohranu,

novi elementi specifični za dijelove sadržaja poput <article>, <footer>, <header>, <nav> i

<section> i nove kontrole poput kalendara, datuma, vremena, e-maila i pretraživanja. Svi

poznati preglednici (Chrome, Firefox, Internet Explorer, Safari i Opera) podržavaju nove

HTML5 elemente i programska sučelja za izradu programa (eng. Application Programming

18

Interface –API). Preglednici nastavljaju dodavati nove HTML5 značajke unutar vlastitih

najnovijih inačica [W3Schools, 2014].

HTML5 razvija mogućnost ostvarivanja načina rada bez potrebe za povezanosti s mrežom (eng.

offline) koji pomoću lokalne pohrane omogućuje korisniku posjećivanje web stranice. Cilj same

HTML5 tehnologije je udaljiti web od tehnologija poput okvira za bogate internet aplikacije,

koji se temelje na posebnim dodacima (eng. plug-in) [Granbäck, 2009].

Činilo se kako novi HTML5 standard neće zaživjeti, no dogodilo se nešto zanimljivo. Firefox

je počeo usvajati elemente HTML-a što je brzo slijedio i Apple-ov Safari web preglednik. Tri

konačna događaja su istaknula važnost HTML-a 5. Google je predstavio web preglednik

Chrome s HTML-om 5 kao glavnom značajkom. W3C je zaustavio rad na XHTML-u 2.0 i

preuzeo HTML5 kao novi web standard. Web je postao mobilan i stvorio potrebu za novim

standardom koji će pokretati aplikacije unutar različitih mobilnih operativnih sustava [Matthew,

2013].

HTML5 je podržan od strane sljedećih web preglednika [Matthew, 2013]:

Firefox 3.0+ (svi operativni sustavi)

Safari 3.0+ (Mac OS X i iOS 1.0+ operativni sustavi)

Google Chrome (svi operativni sustavi)

Opera 9.5+ (svi operativni sustavi)

Microsoft Internet Explorer 9+

19

4. Prototip

Kako bi se pojam bogate internet aplikacije bolje predočio i shvatio, uz teorijski dio

završnog rada kreiran je i prototip bogate internet aplikacije. Prototip će služiti kao ogledni

primjer na kojem će se prikazati neke ključne karakteristike bogatih internet aplikacija.

Tehnologije korištene unutar prototipa će biti objašnjenje i prikazat će se kako se pomoću njih

postigao željeni rezultat. Ideja prototipa kao bogate internet aplikacije je spoj klasičnih

informativnih web stranica poput T-portala i web aplikacija za razonodu, konkretnije web igara,

kao što vidljivo na slici 8.

Slika 8: T-portal i ArmorGames (Izvor: http://www.tportal.hr/, http://armorgames.com/)

Prototip se usredotočuje na kreiranje članaka, diskusiju među korisnicima i dijeljenje novosti

vezanih uz specifičan program za izradu računalnih igara Unity. Vlastitu igru, kreiranu u Unity-

u, moguće je prenijeti na web aplikaciju i učinit ju dostupnom drugim korisnicima. Igre koje se

nalaze na aplikaciji drugi korisnici mogu isprobati, ocijeniti ili ostaviti komentar vezan uz tu

igru. Naziv te bogate internet aplikacije je intuitivan i jednostavan, bogata internet aplikacija se

naziva UnityPlay. Sve novosti prikazane unutar samog prototipa već postoje, te su preuzete sa

službene stranice Unity-a. Preuzete novosti prototip čine stvarnijim kao da već postoji

implementiran unutar nekog poslužitelja i kao da je dostupan široj javnosti. Također, određene

igre su preuzete kao gotovi primjeri. Implementirane igre na UnityPlay-u služe za testiranje

funkcionalnosti prototipa vezanih uz igre, osvrta na igre, ocjena i slično.

20

4.1. Unity

Unity predstavlja računalni program za razvijanje igara (eng. game engine) u 2D ili 3D

okruženju. Igre se izrađuju pomoću gotovih modela, raznih skripti i određenih scena (nivoa)

koje omogućuju željene funkcionalnosti igre. Modeliranje, stvaranje animacija i kreiranje scena

se izvršava unutar samog Unity alata. Sučelje alata nalikuje na tipične alate za 3D modeliranje,

dok se pisanje koda izvršava unutar dodatnog alata zvanog MonoDevelop koji podržava C#,

Javascript, UnityScript i Boo jezik. Primjer izrade igre vidljiv je na slici 9 [Unity, 2014].

Slika 9: Izrada igre u Unity-u

Igru kreiranu uz pomoć bilo kojeg navedenog jezika moguće je razviti (eng. build and deploy)

da bude dostupna kao desktop, web ili mobilna inačica igre. Početni kod ostaje isti neovisno o

vrsti platforme za koju se igra razvija. Unity razvojem može stvoriti web inačicu igre koja je u

potpunosti jednaka desktop inačici te igre. Navedene karakteristike su ujedno i jedne od glavnih

karakteristika bogatih internet aplikacija. Kreirana igra je također i u neku ruku bogata internet

aplikacija sama za sebe.

21

4.2. UnityPlay

UnityPlay predstavlja prototip bogate internet aplikacije završnog rada. Prototip omogućuje

pregledavanje članaka i uključivanje u samu diskusiju o novostima vezanim uz Unity. Također,

moguće je kreirati vlastiti članak, koji je otvoren za komentiranje i interakciju posjetitelja. Na

početnoj stranici prikazani su najnoviji članci te su dodatno izdvojeni najposjećeniji i

najkomentiraniji članci. Omogućuje registraciju, prijavu i sadrži poveznicu na glavnu stranicu

za odabir igara za igranje. Prototip je u potpunosti ispunjen bogatim medijskim sadržajem

(slikama, poveznicama, video zapisima itd.). Početna stranica UnityPlay-a prikazana je na slici

10.

Slika 10: Početna stranica - UnityPlay

22

Kako postoji registracija i prijava, postoje i određena ograničenja i ovlasti ovisno o vrsti skupine

korisnika kojoj posjetitelj pripada. Ukoliko je posjetitelj neregistrirani korisnik, on može vidjeti

sav sadržaj UnityPlay-a i isprobati sve igre, no ne može sudjelovati u diskusijama i ocjenjivanju

igara. Neregistrirani korisnik ne može ni sudjelovati u kreiranju novih članaka ni novih igara.

Ako se korisnik registrira dobiva mogućnost uključivanja u sve diskusije, ali kreiranje novih

članaka i igara se odvija samo od strane korisnika koji imaju najviše ovlasti (administratora).

Registracija sadrži određene uvjete ispunjavanja kako bi se korisnik uspješno registrirao, tipa

validacija korisničkog e-maila i ispunjavanje reCaptcha-e. Administrator ima sve spomenute

ovlasti, te može ukloniti nekorektne komentare, članke i igre. Administrator može zabraniti

pristup određenim korisnicima ukoliko su prekršili određeni bonton ponašanja prilikom

korištenja bogate internet aplikacije. Prijava i registracija vidljive su na slici 11.

Slika 11: Prijava i registracija - UnityPlay

Sljedeći bitan dio prototipa je stranica koja prikazuje igre sa njihovim nazivima, ocjenama i

ikonama, na način da prikazuje zasebno najbolje ocjenjene igre i zasebno najnovije igre. Broj

prikazanih igara je ograničen, ali zato je omogućena poveznica za prijelaz na pretraživanje svih

mogućih igara na UnityPlay-u. Prilikom pretraživanja igara omogućeno je sortiranje i

pretraživanje po bilo kojoj javno poznatoj informaciji o igri. Odabirom željene igre vrši se

preusmjeravanje na vlastitu stranicu igre, koja omogućuje igranje igre, ocjenjivanje i

diskutiranje. Moguće je i preuzeti igru unutar .rar datoteke, kako bi bilo omogućeno pokretanje

igre ne koristeći UnityPlay niti internet vezu, već kao samostalnu desktop aplikaciju (slika 12).

23

Slika 12: Odabir igre – UnityPlay

4.3. Tehnologije

Za izradu prototipa bogate internet aplikacije UnityPlay korišteno je više tehnologija:

HTML5, CSS, PHP, JavaScript (jQuery i AJAX), bootstrap (bootswatch), Unity i Netbeans.

Cijeli prototip je kreiran unutar Netbeans-a, alata koji predstavlja integrirano razvojno

okruženje za rad s Java-om, PHP-om, C/C++ i HTML-om 5. Gotova aplikacija unutar

Netbeans-a prikazana je na slici 13.

Slika 13: Netbeans - UnityPlay

24

4.3.1. HTML5

HTML kao tehnologija se unutar prototipa koristi kao jezik za označavanje (eng.

markup language), sav pisani HTML se drži HTML5 standarda, oznaka i elemenata. U

UnityPlay-u HTML5 se koristi pri izradi strukture svake stranice bogate internet aplikacije

(slika 14). HTML označava određene dijelove i elemente koji će biti prikazani i dodjeljuje im

klase i atribute preko kojih će se pomoću CSS-a, JavaScript-a, jQuery-a i AJAX-a dobiti

konačan rezultat.

Slika 14: HTML5 – UnityPlay

HTML5, pomoću bootstrap-a i tehnologija poput JavaScript-a i AJAX-a, može elementima za

označavanje dodati određene funkcionalnosti koje stvaraju interaktivnost s posjetiteljem

prilikom prikaza sadržaja, kao što je prikazano na slici 15.

Slika 15: Carousel element – UnityPlay

25

4.3.2. CSS

CSS se koristi za kreiranje opisa izgleda i oblikovanje korištenih HTML elemenata.

Pomoću CSS-a HTML-u se dodaju razna vizualna svojstva prilagođavajući izgled aplikacije

koji se prikazuje krajnjem korisniku. Izgled CSS koda je prikazan na slici 16.

Slika 16: CSS – UnityPlay

Većina oblikovanja elemenata UnityPlay-a potječe od predefiniranog predloška (eng. template)

bootstrap teme „Yeti“. Sveukupni i konačni dizajn je prilagođen CSS skriptom kako bi se

stvorio osjećaj suvremene i oku ugodne aplikacije. CSS može poslužiti i za interakciju s

korisnikom, što se može vidjeti na slici 17. Lijevi dio slike prikazuje uobičajeni tekst, a desni

dio slike izgled tog teksta kada se iznad njega nalazi miš gdje isti dobiva dodatna vizualna

svojstva.

Slika 17: CSS „hover“ efekt – UnityPlay

26

4.3.3. PHP

PHP je skriptni jezik, koji se koristi za komunikaciju s poslužiteljem. Kod prototipa se

koristi samo za dohvaćanje potrebnih informacija iz baze podataka, ukoliko je potrebna

određena validacija na strani poslužitelja ili komunikacija s poslužiteljem. Koristi se i pri pozivu

AJAX funkcija unutar jQuery-a, za pozadinsku komunikaciju s poslužiteljem. Kako su bogate

internet aplikacije usredotočene na arhitekturu „debelog“ klijenta, tako se i u UnityPlay-u veći

dio programske funkcionalnosti nalazi na strani klijenta. Aktivacija korisničkog računa izvršena

pomoću PHP-a vidljiva je na slici 18.

Slika 18: Skripta za aktivaciju korisničkog računa – UnityPlay

4.3.4. JavaScript, jQuery i AJAX

JavaScript, jQuery i AJAX, jezici koji se koristi na strani klijenta, su poslužili za

kreiranje specifičnih svojstva prototipa. Korištenjem tih tehnologija dobiva se veća mogućnost

i sloboda prilikom izrade aplikacije u usporedbi s upotrebom samo standardne programske

logike na strani poslužitelja. Iste se koriste pri implementaciji bootstrap-a i bootswatch teme

kod kojih uvelike povećavaju dinamičnost, interaktivnost i reagiranje stranice na korisnika.

Unutar prototipa su korištene u svrhu pisanja skripti za prijavu, komentiranje, odjavu, pisanje

članka, upravljanje člancima, igrama, korisnicima itd. Također, ova tehnologija je korištena

kod stvaranja skripte za kreiranje UnityWebPlayera, odnosno skripte za prikaz i omogućavanja

igranje Unity igra.

27

Pretraživanje i upravljanje korisnicima je funkcionalnost koja je omogućena samo

administratoru. Cilj je bio stvoriti mogućnost lakog pretraživanja svih korisnika, davanja

pojedinom korisniku zabranu pristupa aplikaciji ili ukloniti već postojeću zabranu. Ujedno,

potrebno je i prikazati sve detalje vezane uz pojedine korisnike, a svaka funkcionalnost se

izvodi bez osvježavanja stranice. Komunikacija s poslužiteljem se odvija u pozadini pomoću

AJAX funkcije unutar jQuery-a. Izgled funkcionalnosti za krajnjeg korisnika vidljiv je na slici

19.

Slika 19: Upravljanje korisnicima – UnityPlay

Dobivene informacije preko PHP skripte od strane poslužitelja se ispisuju unutar HTML oznaka

za tablicu. Dodavanjem jQuery posebnog dodatka (eng. plug-in) DataTables, ostvaruje se

mogućnost sortiranja, pretraživanja i ograničavanja prikaza korisnika. Time se dobiva

preglednost, jednostavnost i brzina u izvođenju željene korisnikove akcije. Svakom korisniku

je pridružen gumb s klasom „status_changer“. Ovisno o statusu gumba definiran je izgled

gumba i informacije koje prosljeđuje AJAX-u, odnosno PHP skripti koja komunicira s

poslužiteljem. Rezultat je mogućnost mijenjanja statusa korisnika bez osvježavanja stranice i

istovremenog prikazivanja promjene. Izvršena promjena statusa omogućuje njegovu ponovnu

promjenu preko istog gumba novog adekvatnog izgleda i nove funkcionalnosti dobivene nakon

prvobitne promjene. Administrator može na ovaj način mijenjati statuse korisnika u

„nedogled“, a pritom AJAX i PHP izvode funkcionalnost u pozadini. Implementacija unutar

koda prikazana je na slici 20.

28

Slika 20: Upravljanje korisnicima (jQuery i AJAX) – UnityPlay

Na vrlo sličan način je izvedeno i upravljanje svim člancima, igrama i njihovim komentarima

unutar prototipa. Razlika je jedino u mogućnosti brisanja pojedinih članaka, igara i pripadnih

komentara. Prije brisanja se pojavljuje poruka potvrde brisanja, da ne dođe do nenamjernog

brisanja određenog članka, igre i svih komentara korisnika vezanih uz pojedini članak ili igru.

Drugačiji način upotrebe jQuery-a korišten je kod skripte pisanja novih članaka. Prilikom

upisivanja opisa članka i njegovog sadržaja jQuery prebrojava upisane znakove i u realnom

vremenu ih prikazuje korisniku. Ta informacija se na ovaj način prikazuje prilikom pisanja

članka. Postoje određena ograničenja, maksimalne veličine sadržaja članaka, kako ne bi

neograničen prostor bio zloupotrebljavan (slika 21).

29

Slika 21: Pisanje članka – UnityPlay

Prikazana funkcionalnost se izvodi na sljedeći način: na svaki od „input“ elemenata se dodaje

događaj (eng. event) „keyup“, dodani događaj svakim pritiskom tipke (točnije otpuštanjem)

prebrojava broj znakova unutar tog elementa. Zatim se u određeni pomoćni ili generirani

element putem jQuery-a upisuje povratna poruka o trenutnom broju znakova određenog

elementa. Kod je vidljiv na slici 22.

Slika 22: Pisanje članka (jQuery) – UnityPlay

30

5. Zaključak

Karakteristike bogatih internet aplikacija izvrsno se uklapaju u smjer razvoja

tehnologija, weba i povezanosti čovječanstva. Idealne su za upotrebu kod mobilnog weba kako

sve više postoji potreba za upotrebom desktop aplikacija bilo gdje i bilo kada. Iako postoje

određeni nedostaci korištenja bogatih internet aplikacija, neophodnost bogatih internet

aplikacija čini te nedostatke zanemarivim. Razvoj i kretanje tehnologija u stvaranju potpuno

mobilnog svijeta će s vremenom riješiti probleme kojima se suočavamo pri korištenju istih.

Bogate internet aplikacije su danas svugdje zastupljene, no zanimljivo je da ćete rjeđe naići na

sam pojam nego na aplikaciju. Glavni razlog tome je kako je sam web napredovao tako su se i

očekivanja za pojam klasične web stranice povećavala. Korisnici i programeri zapravo uzdižu

standardnu web stranicu na nivo prijašnje bogate internet aplikacije i na taj način takav naziv

postaje suvišan. Gotovo je nemoguće pronaći web stranicu koja nalikuje početnim statičnim

web stranicama. Također, dolazi i do promjena generacija tehnologija koje se koriste za izradu

bogatih internet aplikacija. Starije i neuspjele tehnologije se napuštaju, nove redefiniraju pristup

bogatim internet aplikacijama i način njihove izrade.

Pojam bogatih internet aplikacija bi mogao postat naziv koji će se kroz daljnji razvoj weba

ponovno pojavljivati sa sličnom idejom i značenjem, te opet polako nestajati kada ta novost

postane standard na webu. Bogate internet aplikacije su predstavljale nešto novo i inovativno

nakon predstavljanja Web-a 2.0 i kroz daljnji razvoj postaju standard na webu. Ako su današnje

web stranice bogate internet aplikacije, sutrašnje će biti „bogatije od bogatih“, bazirane na

drugačijim novitetima.

Neovisno o konkretizaciji pojma, uvijek postoji opasnost zanosa kod strane razvojnog

programera bogatih internet aplikacija. Potrebno je veliku pozornost obratiti na upotrebljivost

bogate internet aplikacije kako ona ne bi postala prenatrpana medijskim sadržajem i raznim

funkcionalnostima, a da pritom ne uspijeva služiti prvobitno namijenjenoj svrsi.

Izrađeni prototip je spreman za implementaciju na poslužitelju i uz određene nadogradnje može

postati potpuno samostalna bogata internet aplikacija. Ovisno o načinu daljnjeg razvoja

prototipa, aplikacija se može usredotočiti više na aspekt objavljivanja i diskusiju članaka ili

funkcionalnosti povezanih s igrama. Postoje određeni nedostaci prototipa koji ne utječu izravno

na njegovu cjelokupnu funkcionalnost, već bi njihov ispravak predstavljao novosti koje bi

poboljšale i olakšale način njegovog korištenja. Primjeri takvih nedostatka su: nemogućnost

31

pisanja članaka van predefiniranog predloška ograničavajući određenu slobodu pisanja i

nemogućnost uvođenja vlastitog izgleda strukture novog članka, ne postoji integracija prijave

preko društvenih mreža itd. Daljnju nadogradnju prototipa moguće je izvršiti ispravljanjem

postojećih nedostataka kao i uvođenjem novih funkcionalnosti (sortiranje i grupiranje igara po

žanru, mogućnost stvaranja komentara s medijskim sadržajem, proširenje prototipa da pokreće

igre koje nisu kreirane u Unity alatu itd.).

32

6. Literatura

[1] Allaire J. (2002), Macromedia Flash MX – A next-generation rich client. Preuzeto 29.

srpnja 2014. s http://download.macromedia.com/pub/flash/whitepapers/richclient.pdf

[2] Apache Flex (2014), About Apache Flex. Pristupano 12. kolovoza 2014. na

http://flex.apache.org/about-whatis.html

[3] Bootstrap (2014), Designed for everyone, everywhere. Pristupano 11. rujna 2014. na

http://getbootstrap.com/

[4] Bootswatch (2014), Yeti. Pristupano 11. rujna 2014. na http://bootswatch.com/yeti/

[5] Busch M., Koch N. (2009), Rich Internet Applications. Preuzeto 18. kolovoza 2014. na

http://uwe.pst.ifi.lmu.de/publications/maewa_rias_report.pdf

[6] CLEAR (2010), Rich Internet Applications. Pristupano 20. srpnja 2014. na

http://clear.msu.edu/teaching/online/ria/#RIAs

[7] CLEAR (2010), QuizBreak!. Pristupano 20. srpnja 2014. na

http://clear.msu.edu/quizbreak/play.php?board=2807-1311166778

[8] Domenig M. (2005), Rich Internet Applications and AJAX – Selecting the best product.

Pristupano 21. kolovoza 2014. na http://www.javalobby.org/articles/ajax-ria-overview/

[9] Granbäck C. – D. (2009), Rich Internet Applications (RIAs). Preuzeto 1. kolovoza 2014. s

http://publications.lib.chalmers.se/records/fulltext/116839.pdf

[10] Hilwa A., Perry R. (2010), Adobe Flash in the Enterprise: The Case for More Usable

Software. Preuzeto 20. srpnja 2014. s http://www.adobe.com/enterprise/pdf/idc.pdf

[11] IBM (2014), Creating Rich Internet Applications (RIA). Pristupano 29. srpnja 2014. na

http://pic.dhe.ibm.com/infocenter/rsawshlp/v7r5m0/index.jsp?topic=%2Fcom.ibm.etools.

webtoolscore.doc%2Ftopics%2Ftcrtria.html

[12] jQuery (2014), jQuery write less, do more. Pristupano 21. kolovoza 2014. na

http://jquery.com/

[13] Kromkamp B. (2010), A comparison of Rich Internet Applications. Pristupano 21. srpnja

2014. na http://www.quesucede.com/page/show/id/ria-frameworks

[14] Matthew D. (2013), HTML5: Designing Rich Internet Applications. Burlington: Focal

Press

33

[15] Microsoft (2014), About Silverlight. Pristupano 21. srpnja 2014. na

http://www.microsoft.com/silverlight/what-is-silverlight/

[16] Microsoft (2014), Designing Rich Internet Applications. Pristupano 19. kolovoza 2014. na

http://msdn.microsoft.com/en-us/library/ee658083.aspx

[17] The Server Labs S.L (2008), Rich Internet Applications – Framework evaluation. Preuzeto

18. srpnja 2014. s http://www.theserverlabs.com/brochures/RIA_Frameworks-TSL-

evaluation.pdf

[18] Tucker D. (2011), Enterprise RIA Development: Comparing Flex/Flash, Silverlight,

HTML5/CSS3, JQuery/JavaScript. Pristupano 21. srpnja 2014. na

http://www.codeproject.com/Articles/199022/Enterprise-RIA-Development-Comparing-

Flex-Flash-Si

[19] Ullman C., Dykes L. (2007), What is Ajax?. Pristupano 20. srpnja 2014. na

http://www.wrox.com/WileyCDA/Section/What-is-Ajax-.id-303217.html

[20] Unity (2014), Learn with Unity. Pristupano 11. rujna 2014. na http://unity3d.com/learn

[21] Višnar K. (2008), Silverlight tehnologija. Pristupano 21. srpnja 2014. na

http://www.infotrend.hr/clanak/2008/5/silverlight-tehnologija,12,271.html

[22] W3Schools (2014), AJAX Introduction. Pristupano 29. srpnja 2014. na

http://www.w3schools.com/ajax/ajax_intro.asp

[23] W3Schools (2014), HTML5 Introduction. Pristupano 22. srpnja 2014. na

http://www.w3schools.com/html/html5_intro.asp

[24] W3Schools (2014), jQuery Introduction. Pristupano 21. kolovoza 2014. na

http://www.w3schools.com/jQuery/jquery_intro.asp

[25] Whatley S. (2007), Rich Internet Applications – A Background. Pristupano 29. srpnja 2014.

na http://www.simonwhatley.co.uk/rich-internet-applications-a-background