MASTER RAD - tfzr.rs Dzigurski - Master rad_PDF_final.pdf · grafič ke adaptibilnosti veb aplikacija, razjašnjena je razlika između statičnih veb sajtova i dinamičkih veb aplikacija,

Univerzitet u Novom Sadu Tehnički fakultet „Mihajlo Pupin“

Zrenjanin

Grafička adaptibilnost veb aplikacija za prikaz na heterogenim uređajima u distribuiranom okruženju

Graphical adaptability of web applications for display on heterogeneous devices in a distributed environment

MASTER RAD

Mentor: Doc. dr Ljubica Kazi

Student: Miloš Džigurski MIT 3/17

Smer: Informacione tehnologije

- master

Zrenjanin, 2018.


2

Univerzitet u Novom Sadu

Tehnički fakultet „Mihajlo Pupin“ Zrenjanin

Ključna dokumentacijska informacija

Redni broj: RBR

Identifikacioni broj: IBR

Tip dokumentacije: TD

Monografska dokumentacija

Tip zapisa: TZ

Tekstualni štampani materijal

Vrsta rada (dipl.mag.dokt.): VR

Master rad

Ime i prezime autora: AU

Džigurski Miloš

Mentor (titula, ime, prezime, zvanje): MN

Doc. dr Ljubica Kazi

Naslov rada: NS


Jezik publikacije: JZ

Srpski

Jeziv izvoda: JI

Srpski / Engleski

Zemlja publikovanja: ZP

Republika Srbija

Uže geografsko područje: UGP

Zrenjanin, Vojvodina

Godina: GO

2018.

Izdavač: IZ

Autorski reprint

Mesto i adresa: MS

Tehnički fakultet „Mihajlo Pupin“, Đure Đakovića bb,

Zrenjanin Fizički opis rada:

FO Broj poglavlja 7/ Strana 88/ Slika

63/ Listinga 27/


3

Naučna oblast: OB

Informacione tehnologije - master

Naučna disciplina: ND

Distribuirani informacioni sistemi

Predmetna odrednica, ključne reči: PO

Distribuirani informacioni sistemi, Grafička adaptibilnost, Prilagodljiv veb dizajn

UDK

Čuva se: ČU

Biblioteka Tehničkog fakulteta „Mihajlo Pupin“ Zrenjanin

Važna napomena: VN

Izvod: IZ

U ovom radu je opisan pojam grafičke adaptibilnosti veb aplikacija, razjašnjena je razlika između statičnih veb sajtova i dinamičkih veb aplikacija, objašnjene su tehnike i faze adaptacije. Dodatno je opisan koncept i tipovi primene prilagodljivog veb dizajna u okviru različitih tehnologija. U radu je takođe prikazan primer razvijene veb aplikacije u desktop i mobilnoj verziji gde su primenjene neke od tehnika grafičke adaptibilnosti. Primer je realizovan korišćenjem programskih alata kao što su XAMPP, Notepad++ i phpMyAdmin.

Datum prihvatanja teme od strane NN veća: DP

Datum odbrane: DO

Članovi komisije: ČK

Doc. dr Ljubica Kazi, Prof. dr Ivana Berković, Doc dr Višnja

Ognjenović


4

University of Novi Sad

Technical Faculty “Mihajlo Pupin” Zrenjanin

Keyword documentation

Accession number: ANO

Identification number: INO

Document type: DT

Monograph documentation

Type of record: TR

Textual printed material

Contents code: CC

M.Sc.Thesis

Author: AU

Dzigurski Milos

Menthor: MN

Doc. dr Ljubica Kazi, assistant professor

Title: TI

Graphical adaptability of web applications for display on heterogeneous devices in a distributed environment

Language of text: LT

Serbian

Language of abstract: LA

Serbian / English

Country of publication: CP

Republic of Serbia

Locality of publication: LP

Zrenjanin, Vojvodina

Publication year: PY

2018.

Publisher: PU

Author’s reprint

Publication place: PP

Technical faculty „Mihalo Pupin“, Djure Djakovica bb, Zrenjanin

Physical description: PD

Chapters 7/ Pages 88/ Pictures 63/ Lists of code 27/

Scientific field: SF

Computer Scicence – M.Sc.


5

Scientific discipline: SD

Distributed information systems

Subject, keywords: SKW

Distrubuted information systems, Graphical adaptability, Responsive web design

UDC

Holding data: HD

Library of Technical Faculty „Mihajlo Pupin“ Zrenjanin

Note: N

Abstract: AB

This paper describes the concept of graphical adaptability of web applications, it clarifies the difference between static web pages and dynamic web applications, explains techniques and adaptation phases. Additionally, the concept and types of application of responsive web design within different technologies are described. The paper also presents an example of a developed web application in the desktop and mobile version where some of the techniques of graphical adaptability have been applied. An example is realized using software tools such as XAMPP, Notepad ++ and phpMyAdmin.

Accepted on Scientific Board on: AS

Defended: DE

Thesis defend board: DB

Doc. dr Ljubica Kazi, Prof. dr Ivana Berkovic, Doc dr Visnja

Ognjenovic


6

SADRŽAJ 1. METODOLOŠKI OKVIR ISTRAŽIVANJA ....................................................... 10

1.1 Predmet i problem istraživanja ............................................................... 10

1.2 Vrsta istraživanja ................................................................................... 10

1.3 Cilj i zadaci istraživanja ......................................................................... 10

1.4 Hipoteza i podhipoteze ........................................................................... 10

1.5 Očekivani rezultati ................................................................................. 11

1.6 Metodološki postupak ............................................................................ 11

2. TEORIJSKO ISTRAŽIVANJE ............................................................................ 12

2.1 Koncept veb sajta i veb aplikacije .......................................................... 12

2.1.1 Statički veb sajtovi ................................................................................. 12

2.1.2 Dinamičke veb aplikacije ....................................................................... 13

2.2 Korisnički interfejs ................................................................................. 16

2.2.1 Interakcija čovek – računar..................................................................... 16

2.2.2 Zavisnost korisničkog interfejsa od platforme ........................................ 16

2.2.3 Nezavisni korisnički interfejs ................................................................. 17

2.3 Adaptibilnost korisničkog interfejsa ....................................................... 18

2.3.1 Pojam adaptivnosti i adaptibilnosti ......................................................... 18

2.3.2 Koncept prilagodljivog veb dizajna ........................................................ 19

3. STRUČNO ISTRAŽIVANJE ............................................................................... 22

3.1. Osnovne tehnike prilagodljivog veb dizajna ........................................... 22

3.1.1. „Fleksibilna mreža“ ................................................................................ 22

3.1.2. „Fleksibilne slike“ .................................................................................. 25

3.1.2.1. CSS opsecanje slike ............................................................................ 25

3.1.2.2. Prikaz više slika uz media query ......................................................... 26

3.1.3. Media upiti ............................................................................................. 26

3.1.4. Prilagodljiva tipografija .......................................................................... 28

3.1.5. Prilagodljivi email sistemi ...................................................................... 30

3.2. Nove tehnologije grafičke adaptibilnosti ................................................ 32

3.2.1. HTML5 i CSS3 ...................................................................................... 32

3.2.2. Boostrap................................................................................................. 33

4. NAUČNO-STRUČNO ISTRAŽIVANJE ............................................................. 34

4.1. Komparacija pristupa sa više verzija u odnosu na dinamičko „serviranje“ sadržaja 34

4.2. Istraživanje zastupljenosti prilagodljivih veb aplikacija .......................... 37


7

5. ANALIZA POSTOJEĆIH REŠENJA U OKVIRU RAZLIČITIH TEHNOLOGIJA RAZVOJA VEB APLIKACIJA .................................................................................. 40

5.1. Tehnologija ASP.NET ........................................................................... 40

5.2. Tehnologija PHP .................................................................................... 42

5.2.1. Kreiranje dve verzije veb aplikacije – PHP ................................................. 43

5.2.2. Korišćenje tehnologije prilagodljivog veb dizajna - PHP ............................ 45

5.3. Tehnologija JSP ..................................................................................... 48

5.3.1. Kreiranje dve verzije veb aplikacije – JSP .............................................. 50

5.3.2. Korišćenje tehnologije prilagodljivog veb dizajna - JSP ......................... 51

6. IMPLEMENTIRANO REŠENJE ......................................................................... 54

6.1. Opis poslovnog konteksta....................................................................... 54

6.2. Cilj i opis korišćenih tehnologija za razvoj .................................................... 54

6.2.1. XAMPP ................................................................................................. 54

6.2.2. phpMyAdmin ......................................................................................... 55

6.2.3. Notepad++ ............................................................................................. 56

6.2.4. Power Designer ...................................................................................... 57

6.3. Modeli……………....…………………………………………………………..57

6.3.1. Business Process Model ......................................................................... 58

6.3.2. Use Case Model ..................................................................................... 58

6.3.3. Dijagram komponenti ............................................................................. 59

6.3.4. Dijagram razmeštaja............................................................................... 59

6.3.5. Dijagram opisa procesa grafičkog prilagođavanja veb aplikacije ............ 60

6.4. Korisničko uputstvo i eksperimentalna primena na različitim uređajima . 60

6.4.1. Desktop verzija veb aplikacije ................................................................ 61

6.4.1.1. Početna stranica veb aplikacije desktop verzije................................ 61

6.4.1.2. Pregled firme desktop verzije .......................................................... 62

6.4.1.3. Pretraga i pregled preduzetnika dekstop verzije ............................... 63

6.4.1.4. Kratak opis rezultata eksperimenta .................................................. 64

6.4.2. Mobilna verzija veb aplikacije – mobilni telefon .................................... 64

6.4.2.1. Početna stranica mobilne verzije – mobilni telefon .......................... 64

6.4.2.2. Pretraga i pregled firme mobilne verzije – mobilni telefon .............. 66

6.4.2.3. Pretraga i pregled preduzetnika mobilne verzije – mobilni telefon ... 67


6.4.3. Mobilna verzija veb aplikacije – tablet uređaj ......................................... 68

6.4.3.1. Početna stranica mobilne verzije – tablet uređaj .............................. 69

6.4.3.2. Pretraga i pregled firme mobilne verzije – tablet uređaj ................... 70

6.4.3.3. Pretraga preduzetnika mobilne verzije – tablet uređaj ...................... 71


8


6.5. Opis implementacije............................................................................... 72

6.5.1. Šema baze podataka i SQL skript za kreiranje baze podataka ................. 72

6.5.2. Delovi programskog koda sa objašnjenjem ............................................. 75

6.5.2.1. Grafička adaptabilnost .................................................................... 75

6.5.2.1.1. Automatsko preusmeravanje korisnika na mobilnu verziju ............ 76

6.5.2.1.2. Tehnika prilagodljivog veb dizajna – media upiti .......................... 76

6.5.2.1.3. Tehnika prilagodljivog veb dizajna – fleksibilne slike ................... 78

6.5.2.1.4. Tehnika prilagodljivog veb dizajna – prilagodljiva tipografija ....... 80

6.5.2.2. Ostale funkcionalnosti veb aplikacije .............................................. 81

6.5.2.2.1. Prikaz novih firmi ......................................................................... 81

6.5.2.2.2. Prikaz zatvorenih firmi ................................................................. 82

6.5.2.2.3. Pretraga firmi ................................................................................ 83

6.5.2.2.4. Pretraga preduzetnika ................................................................... 83

7. ZAKLJUČAK ...................................................................................................... 84

8. LITERATURA .................................................................................................... 85

Korišćeni veb sajtovi ................................................................................................... 86

Korišćene slike ............................................................................................................ 88


9

Apstrakt

U ovom radu je opisan pojam grafičke adaptibilnosti veb aplikacija, razjašnjena je razlika između statičnih veb sajtova i dinamičkih veb aplikacija, objašnjene su tehnike i faze adaptacije. Dodatno je opisan koncept i tipovi primene prilagodljivog veb dizajna u okviru različitih tehnologija. U radu je takođe prikazan primer razvijene veb aplikacije u desktop i mobilnoj verziji gde su primenjene neke od tehnika grafičke adaptibilnosti. Primer je realizovan korišćenjem programskih alata kao što su XAMPP, Notepad++ i phpMyAdmin.

Abstract

This paper describes the concept of graphical adaptability of web applications, it clarifies the difference between static web pages and dynamic web applications, explains techniques and adaptation phases. Additionally, the concept and types of application of responsive web design within different technologies are described. The paper also presents an example of a developed web application in the desktop and mobile version where some of the techniques of graphical adaptability have been applied. An example is realized using software tools such as XAMPP, Notepad ++ and phpMyAdmin.


10

1. METODOLOŠKI OKVIR ISTRAŽIVANJA

1.1 Predmet i problem istraživanja

Predmet istraživanja predstavljaju različite tehnike programiranja kojima se postiže grafička adaptibilnost veb aplikacija u odnosu na različite uređaje na kojima će se sadržaj prikazivati. Problem istraživanja je utvrditi različite tehnike za postizanje adaptibilnosti sadržaja, kao i postizanje automatskog skalabilnog prikazivanja sadržaja.

1.2 Vrsta istraživanja

U ovom radu predmetu istraživanja se pristupa sa teorijskog i empirijskog aspekta. U okviru teorijskog pristupa, analiziraju se različite tehnike za postizanje grafičke adaptibilnosti prikaza sadržaja veb aplikacija na različitim uređajima. U empirijskom delu biće izvršena analiza postojećih stručnih rešenja i primenjenih tehnika, kao i implementacija softvera koji uključuju različite tehnike grafičke adaptabilnosti. Takođe, u empirijskom delu će biti prikazani rezultati eksperimentalnog korišćenja realizovane veb aplikacije sa 3 uređaja različitih grafičkih karakteristika i prilagodljivost veb aplikacije karakteristikama uređaja.

1.3 Cilj i zadaci istraživanja

Cilj istraživanja predstavlja teorijsko istraživanje tehnika i metoda grafičke adaptibilnosti veb aplikacija za prikaz na različitim uređajima, istraživanje postojećih stručnih i naučnih rešenaj u oblasti, izrada prototipa aplikacije uz primenu različitih tehnika za grafičku adaptibilnost kao i testiranje prototipa na različitim uređajima.

1.4 Hipoteza i podhipoteze

Osnovna hipoteza:

Savremene tehnologije razvoja veb aplikacija podržavaju koncept prilagodljivog veb dizajna, čime se postiže prilagođavanje prikaza veb aplikacije različitim uređajima u distribuiranom radnom okruženju.

Podhipoteze:

1. Moguće je realizovati veb aplikaciju koja bi bila prilagodljiva mobilnim uređajima.

2. Najčešće korišćene tehnologije razvoja veb aplikacija podržavaju tehnike prilagodljivog veb dizajna.

3. Tehnologijom prilagodljivog veb dizajna moguće je detektovati tip uređaja i automatski pripremiti grafički oblik i obuhvat podataka sadržaja koji treba da bude prikazan.


11

1.5 Očekivani rezultati

- Teorijski prikaz osnovnih koncepata - Stručno-istraživački rezultati prikaza različitih profesionalnih tehnika za

postizanje grafičke adaptibilnosti veb aplikacija - Naučni-istraživački rezultati prikaza aktuelnih istraživanja i rešenja u oblasti

grafičke adaptibilnosti i prilagodljivosti veb aplikacija prema tipu uređaja za prikaz sadržaja

- Realizovan primer softverske aplikacije (veb aplikacije) u kojoj su primenjene različite tehnike postizanja grafičke adaptibilnosti veb aplikacija

1.6 Metodološki postupak

1. Metodološko koncipiranje istraživanja 2. Teorijsko istraživanje osnovnih koncepata i metoda 3. Istraživanje postojećih naučnih i stručnih rešenja 4. Izrada prototipa veb aplikacije 5. Testiranje prototipa 6. Dokumentovanje i analiza rezultata


12

2. TEORIJSKO ISTRAŽIVANJE

Korisnički interfejsi postaju sve kompleksniji, iako se akcenat stavlja na jednostavnost njihovog korišćenja. Prilagodljivi interfejsi su jedan od rešenja kako sačuvati što bolji prikaz i održati korisnički doživljaj na visokom nivou, nezavisno od uređaja sa koga se pristupa sadržaju. Tehnike prilagođavanja interfejsa aplikacija su još uvek na niskom nivou, iako se poslednjih godina mnogo radilo na njihovom unapređenju.

2.1 Koncept veb sajta i veb aplikacije

Na početku ere interneta i razmene podataka preko interneta, većina sadržaja koja se nalazila na internetu je bila statična i imala je samo informacijsku svrhu. Fajlovi i sadržaji su često bili statični, ili su čak i mogli da se menjaju, ali je bilo izuzetno malo pravih dinamičkih informacionih servisa na internetu. Veb sajt prikazuje statični sadržaj iz spremnih fajlova koji se nalaze na serveru, dok veb aplikacija dinamički „kroji“ sadržaj na osnovu zahteva korisnika, trenutnih stanja parametara u bazi podataka, prati i odgovara na ponašanja korisnika i uzima u obzir više parametara pre nego što dinamički isporuči traženi sadržaj. [19]

Jedna od zvaničnih prikaza prvi prave veb aplikacije je prikazana u CERN-u, koja je bila most do baze podataka koja je pretraživala brojeve telefona iz elektronske telefonske knjige. Pojavom dinamičkih informacionih sistema, preko internet pretraživača i CGI skriptova do različitih aplikacija koje se izvršavaju na serveru i komuniciraju sa bazom podataka se postavila jasna granica između običnih statičnih veb sajtova koji služe da pruže jednostavne informacije, i kompleksnih veb aplikacija koje se izvršavaju na serveru obrađujući podatke iz baze podataka, koje filtriraju i sortiraju sadržaj na način koji to korisnik zahteva. [19]

Veb aplikacije se mogu deliti na nekoliko kategorija i vrsta, zavisno od njihove svrhe i namene, kao i prema njihovim mogućnostima i ciljevima.

Jedna od najosnovnijih podela sadržaja na internetu su:

- Statični veb sajtovi - Dinamičke veb aplikacije

2.1.1 Statički veb sajtovi

U osnovi, veb sajt je centralna lokacija različitih veb stranica koje su sve povezane u celinu i može im se pristupiti sa početne stranice veb sajta koristeći pretraživač. Veb sajt je jednostavne forme i funkcije i služi za jednostavan prikaz informacija korisniku. Veb stranice su delovi veb sajta koji povezane u celu čine veb sajt. [20]


13

Statični veb sajtovi su primarno kodirani u HTML-u koji su unapred kruto definisani i teško promenljivi. Glavni nedostatak statičnih veb sajtova je nepromenljivost i njih mogu menjati i modifikovati samo programeri i veb dizajneri jer se svi podaci koji se prikazuju korisniku nalaze u samom kodu veb aplikacije. [2]

Prednosti statičnih veb sajtova:

- Brz razvoj - Jeftin razvoj - Jefin za hostovanje

Statična veb stranica je već formirana stranica koja je spremna u formatu koji se prikazuje korisniku. Prilikom zahteva korisnika i pretraživača, server u istom trenutku odgovara i vraća spremnu veb stranicu pretraživaču koja je prikazuje korisniku.

Slika 1 : Prikaz statične veb stranice [71]

Svi veb sajtovi postavljeni na internet imaju svoj jedinstveni domen koji predstavlja adresu preko koje se pristupa određenom veb sajtu. Ako nije specifičan link, domen uglavnom vodi do početne stranice određenog veb sajta koja nas upućuje u osnovnu svrhu i namenu veb sajta koji smo posetili i preko menija i linkova nudi mogućnost da pristupamo i drugim veb stranicama našeg sajta. Veb sajt može da sadrži različit broj veb stranica, od jedne veb stranice do nekoliko hiljada veb stranica. Korisnici pretražuju veb sajt iz dva glavna razloga. Da nađu traženu informaciju ili da izvrše određeni zadatak. Kada je u pitanju složenija funkcionalnost koja ima poslovnu svrhu i kada se tokom razvoja praktično vrši „programiranje veb sajta“, ona tada postaje dinamička veb aplikacija koja je u stanju da obavlja operacijske zadatke obrađujući podatke na serveru koji se nalaze u bazi podataka. [21] [22]

2.1.2 Dinamičke veb aplikacije

Po definiciji, veb aplikacija predstavlja kompleksniju strukturu od veb sajta. Veb aplikacija podrazumeva klijent/serversku aplikaciju koja koristi veb pretraživač kao klijentski program i izvršava interaktivne servise koristeći resurse u vidu baza podataka postavljene na udaljene servere, kojima pristupa preko interneta. [19]


14

Kod dinamičkih veb aplikacija se sadržaj menja često ili čak automatski. Stranice ovakve veb aplikacije nisu formirane unapred, nego se prilikom pokretanja aplikacije podaci koji se skladište na serveru zatraže i na osnovu odgovora servera se u trenutku kreira HTML stranica koja se korisniku prikazuje u pretraživaču. Ovakva vrsta veb aplikacija prikazuje promenljive podatke koji se ažuriraju često. [3]

Razvoj veb aplikacije predstavlja dinamičke i kompleksnije veb sajtove koji se kombinuju sa “serverskim programiranjem” i predsavljaju se kao softverski paketi na internetu koji ima određenu poslovnu svrhu i koji služe korisnicima za različite svrhe. [23]

Osnovne funkcionalnosti koje veb aplikacija podrazumeva: [23]

- Unapređena interakcija sa korisnicima - Konekcija sa bazom podataka - Generisanje rezultata koji se prikazuju u pretraživaču

Veb aplikacije služe da bi poslovima povećali efikasnost i korisničku interakciju pružajući napredne funkcionalnosti u struktuiranom i pristupačnom okruženju. Važnost razvoja veb aplikacija se blisko posmatra sa stručne i industrijske strane da bi razvijena veb aplikacija što bolje ispunila korisničke potrebe. [23]

Podaci koje koristi dinamička veb aplikacija se najčešće nalaze u bazi podataka u kojima je lakše selektovanje, filtriranje i sortiranje podataka. Dinamičke veb aplikacije se najčešće prave u programskom jeziku PHP ili ASP.NET tehnologiji, a obe su vrlo rasprostranjene i popularne. Oni se izvršavaju na serveru, koji obrađuje dobijene rezulatate i generiše HTML kao odgovor na upit i taj dokument šalje pregledaču i korisniku.

Prednosti dinamičkih veb aplikacija:

- Interakcija sa posetiocima - Prikupljanje podataka o posetiocima - Moguće ograničavanje pristupa sadržajima - Laka pretraga sadržaja - Filtriranje i sortiranje podataka

Slede koraci i proces formiranja odgovora servera i HTML stranice koja se prikazuje korisniku u pretraživaču:

1. Veb pretraživač šalje zahtev za dinamičkom stranicom 2. Veb server nalazi stranicu i prosleđuje je aplikacionom serveru 3. Aplikacioni server pregleda stranicu za instrukcijama 4. Aplikacioni server šalje upit drajveru baze podataka 5. Driver izvršava upit nad bazom podataka 6. Podaci iz baze se vraćaju drajveru


15

7. Drajver prosleđuje set podataka aplikacionom serveru 8. Aplikacioni server ubacuje podatke u HTML stranicu i zatim stranicu prosleđuje

veb serveru 9. Veb server vraća spremnu formiranu veb stranicu pretraživaču koji je prilazuje

korisniku

Slika 2: Proces formiranja i prikaz dinamičke veb stranice [72]


16

2.2 Korisnički interfejs

2.2.1 Interakcija čovek – računar

Interakcija čoveka i računara (Human-Computer Interaction - HCI) је multidisciplinarno polje istraživanja koja se oslanja na dizajniranje kompjuterske tehnologije (korisničkog interfejsa) čiji je fokus na interakciju između čoveka (korisnika) i računara (aplikacije). Interakcija čoveka i računara je polje nastalo 80-tih godina prilikom pojave prvih personalnih računara, i od tada se ova oblast razvijala, tako da se ona danas odnosi praktično na sve forme „dizajna komunikacije“ gde dolazi do interakcije između čoveka i računara. [62]

Prilikom nastanka prvih personalnih računara, prvi put su sofisticirani elektronski sistemi bili dostupni običnim korisnicima u svrhu korišćenja alata za obradu teksta, alata za računanje, skladištenje dokumenata, itd. Sa obzirom na to, da su korisnici personalnih računara bili obični korisnici, koji nisu bili eksperti za korišćenje računara u specijalizovanim okruženjima, bilo je potrebno razviti novo polje istraživanja koje će omogućiti proučavanje i razvoj okruženja (korisničkog interfejsa) koji će obični korisnici moći da koriste bez posebne i komplikovane obuke, sa fokusom na lakoću korišćenja računara. Razvojem interneta i mobilnih uređaja, polje interakcija čovek – računar se proširilo i na druge oblasti, izučavajući mobilne uređaje i njihovu lakoću korišćenja. [62]

2.2.2 Zavisnost korisničkog interfejsa od platforme

Prilikom razvoja aplikacije, mora se uzeti u obzir svi mogući odnosi između zadataka koji će se izvršavati u toku korišćenja aplikacije, korisnički interfejsi i sve platforme na kojima će korisnik koristiti aplikaciju. Pod platformom se podrazumeva grupa uređaja koja dele slične resurse interakcije, a to su najčešće: desktop računar, mobilni telefoni i tablet uređaj. Odnos korisničkog interfejsa sa platformom na kojoj se koristi se može klasifikovati u 5 slučajeva koji slede:

- Isti zadatak sa istim korisničkim interfejsom na različitim platformama - Isti zadatak sa različitim korisničkim interfejsom na različitim platformama - Isti zadatak sa različitim nivoom podzadataka na različitim platformama - Međuzavisnost između različitih zadataka koji se izvršavaju na različitim

platformama - Zadaci smisleni samo na određenim platformama (zahtevaju stabilnu vezu,

mobilnu poziciju, zahtevaju dodatni hardver, itd.) [25]

Zbog ogromne popularnosti i zastupljenosti mobilnih tehnologija, postoje značajne razlike između platformi. Zbog toga je za isti zadatak na različitim platformama ponekad pogodnija jedna platforma a za drugi druga platforma. Jednostavan primer predstavlja gledanje video sadržaja, za koji je uvek pogodnija platofrma i uređaj sa većim ekranom, iako je tehnički moguće gledati video sadržaj i na mobilnom uređaju sa manjim ekranom. [25]


17

2.2.3 Nezavisni korisnički interfejs

W3C ili tzv. „World Wide Web Consortium“ je 2012. godine predstavio koncept nezavisnog korisničkog interfejsa, zvanog „Independent User Interface“ ili skraćeno „IndieUI“. Ovaj koncept je način za veb aplikacije da tumače korisničke akcije. „IndieUI“ omogućava pojednostavljen rad veb aplikacija u različitim kontekstima: različitim uređajima, različitim pomoćnim tehnologijama (implanti, ušni aparati) i različitim korisničkim potrebama. [27]

Slika 3: Tumačenje različitih akcija korisnika [27]

Slika iznad prikuje kakve se akcije korisnika mogu pojaviti u odnosu na različite uređaje i platforme koje koriste za pomeranje ekrana, tj. „scroll down“ opciju. Korisnik za ovu funkciju može koristiti prst na ekranu osetljivom na dodir, ili miš za pomeranjem trake „scroll bar“ na desktop računarima, ili stiskanjem tastera „Page Down“ na tastaturi, ili korišćenjem govorne komande. Sve navedene akcije se mogu prevesti u jednostavan „IndieUI“ događaj za pomeranje prikaza na dole. „IndieUI“ omogućava ljudima koji razvijaju veb aplikacije da dobiju odgovore ovih događaja sa različitih uređaja bez potrebe da prepoznaju način na koji je korisnik izveo akciju. [27]


18

2.3 Adaptibilnost korisničkog interfejsa

2.3.1 Pojam adaptivnosti i adaptibilnosti

Sistemi koji se sami prilagođavaju izmenjenim okolnostima u okruženju u kome se nalaze se nazivaju adaptivni sistemi. Ovakvi sistemi pod uticajem promenjenih okolnosti dinamički menjaju svoju unutrašnju strukturu i funkcionisanje. Pojam adaptivnosti se definiše kao „bilo koja promena strukture ili funkcionisanja organizma kako bi se prilagodio u cilju preživljavanja ili multipriciranja“. Adaptacija predstavlja sposobnost sistema za samo-podešavanje ili samo-modifikovanje u skladu sa novim promenama ili okolnostima u okruženju u kome se sistem nalazi. [63] [64]

Kompleksni adaptivni sistem predstavljaju međusobno povezani elementi koji zajedno vrše adaptaciju i prilagođavanje u odnosu na promene u okruženju. Performanse ovakvog sistema ne zavise od performanski pojedinačnih elemenata, već od aktivnosti svih entiteta u sistemu. Entiteti međusobno komuniciraju, menjaju se i evoluiraju u toku vremena, učeći na osnovu interakcije sa okruženjem u kome se nalaze. [65]

Adaptacija u opštem smislu znači modifikaciju sistema koja je pokrenuta zbog nekih spoljnih izmenjenih okolnosti, na koji sistem reaguje i počinje da se prilagođava prema novom okruženju. Kod softvera, adaptacija se implementira u 3 slučaja, kada je softver ima ulogu:

- „posmatranja“ okruženja čiji je cilj detektovanje novih uslova - odlučivanja o modifikacijama sistema koji se promenjuju na softver - primene modifikacija, tj. prilagođavanje softvera novim uslovima [66]

Savremeni samoadaptivni softveri bi trebali da su u mogućnosti da se adaptiraju samostalno. [66]

Postoje 3 oblika adaptivnog ponašanja u programima:

- Adaptacija jedne tačne („one-point adaptatiton“) - Vođena adaptacija („guided adaptation“) - Preklapajuća adaptacija („overlap adaptation“)

Adaptacija jedne tačke predstavlja oblik adaptivnog ponašanja kada se ponašanje početnog programa mora završiti i tek nakon njega ciljno ponašanje (nakon adaptacije) počinje. Vođena adaptacija je oblik adaptivnog ponašanja kada početni program dobije zahtev za adaptacijom, tada ulazi u poseban režim rada u kome su neke funkcionalnosti programa blokirane i vrši se adaptacija, nakon čega se program vraća stanje ciljnog programa. Preklapajuća adaptacija znači adaptaciju gde se početno stanje i ciljno stanje poklapaju. U toku izvršavanja izvornog programa istovremeno počinje i ciljno stanje i u jednom intervalu oba stanja funkcionišu zajedno. Ovaj način adaptivnog ponašanja je karakterističan za programe sa višestrukim nitima. [67] [68]


19

Samo-adaptivni softver pripada srednjem aplikativnom sloju i osnovna karakteristika samo-adaptivnog softvera je njegov životni ciklus. On ne prestaje instalacijom i podešavanjem za korišćenje, nego uvek postoji otvorena mogućnost promena, nadogradnje, konfiguracije, poboljšanja bezbednosti, itd. [67]

Kod adaptivnih veb aplikacija, jedan od vrste adaptivnosti je adaptivnost u odnosu na korisnika, kada sistem treba da se prilagodi profilu korisnika. Razlikujemo:

- Adaptibilnost sistema – prilagođavanje statičkom profilu korisnika ili uređaju (dešava se jednom na početku korišćenja)

- Adaptivnost sistema – predstavlja višestruka prilagođavanja „dinamičkom profilu korisnika“ u toku njegovog korišćenja sistema [69]

Slika 4: Proces samoadaptacije softvera (prema [70])

Na slici iznad vidimo kako izgleda proces samoadaptacije softvera kroz četiri ključna podprocesa. [70]

- Proces nadgledanja (monitoringa) prikuplja podatke od senzora i vrši pretvara podatke u šablone

- Proces detektovanja analizira šablone koje je obezbedio proces nadgledanja i detektuje kada je promena potrebna

- Proces odlučivanja određuje šta se menja i kako da to donese najbolje rezultate - Proces delovanja primenjuje akcije koje su donete od strane procesa odlučivanja

[70]

2.3.2 Koncept prilagodljivog veb dizajna

Prilagodljiv veb dizajn je pristup veb dizajnu i predstavlja način razvoja veb aplikacija koji omogućava što bolje korisničko istkustvo prilikom pregledanja stranica na bilo kom uređaju sa koga se pristupa aplikaciji. Ključno je da korisnik može jednostavno da čita sadržaj na sajtu, da ne mora mnogo da koristi navigaciju, i da pomera i „skroluje stranice“. [2]

Da bi veb aplikacija bila prilagodljiva različitim uređajima, prilikom samog razvoja veb aplikacije mora se voditi računa kako će isti sadržaj razvijan za jedan uređaj izgledati na


20

drugom uređaju i onda prilagoditi taj sadržaj svim uređajima, rezolucijama i položajima ekrana. Zavisno od tehnologije razvoja veb aplikacije, nekad je potrebno razvijati kompletnu aplikaciju nekoliko puta za različite uređaje, pogotovo ako hoćemo da se sadržaj ponaša tačno na određeni način, u drugim slučajevima je dovoljno samo definisati skalabilne veličine i pozicije nakon čega sadržaj sam reaguje na rezoluciju na kojoj prikazuje sadržaj. U tom slučaju je kompletan sadržaj čitljiv i pregledan na svim uređajima sa kojih se pristupa veb aplikaciji. Uređaji sa kojih se danas najčešće pristupa internetu su desktop računari (kao i laptop) tablet uređaji i pametni mobilni telefoni (smartphone).

Prilagodljiv veb dizajn je postao izuzetno popularan u poslednjih 10-ak godina. Dok nije bilo toliko različitih uređaja sposobnih da pristupe veb aplikacijama sa različitih platformi bilo je dovoljno razviti jednu verziju veb aplikacije za desktop računare sa kojom su korisnici bili zadovoljni i sav sadržaj je bio pregledan i jasan.

Pojavom pametnih mobilnih telefona i tablet uređaja, povećala se potreba za više različitih verzija iste aplikacije i istog sadržaja. Velika popularnost mobilnih telefona i učestalost njihovog korišćenja je u toku vremena postavila standard da sve veb aplikacije na internetu moraju biti prilagodljive uređaju sa kojeg se pristupa internetu. [5]

Sama tehnologija prilagodljivog veb dizajna je evoluirala i omogućila veb dizajnerima mogućnost da mogu da razvijaju veb sajtove na takav način da isti dizajn može da se sam prilagođava različihim uređajima i različitim veličinama ekrana. Ovo je moguće uz pomoć automatskog prilagođavanja veličine elemenata u veb aplikaciji izrađenih u procentima umesto u pikselima. [5]

Izraz prilagodljiv veb dizajn je nastao 2010 godine i od tada se koristi. Svaki korisnik kada pristupi veb aplikaciji on želi da ima pristup svim informacijama brzo i sa najmanjim uloženim naporom. Zbog toga je izuzetno važno imati prilagodljivu veb aplikaciju koja je u mogućnosti da se sama prilagođava uređajima koji joj pristupaju, zadržavajući zadovoljstvo korisnika koji je u potrazi za informacijama. [15]

Prilagodljiv veb dizajn je postao imperativ koji se ne može ignorisati, imajući u obziru činjenicu da je u 2016. godina prvi put više korisnika pristupilo internetu sa svojih mobilnih telefona nego sa desktop računara. Od tada se taj trend nastavio, koje veb aplikacije koje nisu prilagodljive ne mogu da isprate i nailaze na nezadovoljstvo korisnika. [7]


21

Mnogi su, da bi rešili problem prilagodljivosti veb aplikacije, napravili potpuno drugačiju verziju mobilne veb aplikacije da bi se približili korisnicima na mobilnim telefonima. Međutim, onda može da se javi problem druge vrste, ako je mobilna verzija veb aplikacije prilagođena samo određenoj vrsti rezolucije ekrana i rezolucije pretraživača na mobilnim uređajima. Rešenje je kreirati jednu verziju veb aplikacije, ali sa prilagodljivim elementima koji se sami prilagođavaju različitim rezolucijama na različitim uređajima. Od svoje pojave 2011, prilagodljiv veb dizajn je ponudio rešenje i fleksibilnost da uspešno prilagođava sadržaj veb aplikacije različitim rezolucijama. [10]

Slika 5: Prilagodljiv veb dizajn [12]

Slika iznad prikazuje veb aplikaciju koji je u potpunosti prilagodljiva svakom uređaju sa koga se pristupa veb aplikaciji. Ovakvo rešenje obezbeđuje maksimalan korisnički doživljaj bilo da se pristupa sa desktop računara velike rezolucije, laptopa manje rezolucije, tablet-a ili mobilnog telefona najniže rezolucije.


22

3. STRUČNO ISTRAŽIVANJE

3.1. Osnovne tehnike prilagodljivog veb dizajna

Za postizanje prilagodljivog veb dizajna se koriste različite tehnike i metode. Prilagodljiv veb dizajn predstavlja prilagođavanje sadržaja veličini ekrana koji pristupa veb aplikaciji, stoga je potrebno prilagotiti različite forme sadržaja koji može biti tekst, slika, video, dodatne funkcionalnosti, itd.

Za postizanje prilagođavanja najčešće se koristi funkcionalnost „media query-ja“ preko koje se uređaju koji pristupa veb aplikaciji pravi upit za veličinu ekrana njegovog uređaja, i na osnovu odgovora uređaja mu se prikazuje verzija aplikacije koja najviše odgovara prikazu za taj uređaj. Različita rešenja dizajna veb aplikacija se kontrolišu uz pomoć CSS-a koji služi za stilizovanje HTML elemenata veb stranica.

Različite tehnike prilagodljivog veb dizajna su:

- Fleksibilna mreža (Flexible (fluid) Grid) - Fleksibilne slike (Flexible Images) - Media Upiti (Media Queries) - Prilagodljiva tipografija (Responsive Typography) - Prilagodljivi email sistemi (Responsive E-Mail Systems)

3.1.1. „Fleksibilna mreža“

Predstavlja jednu od najvažnijih tehnika za postizanje prilagodljivog veb dizajna. Pre tehnike „fleksibilnih mreža“ najveći broj veb aplikacija je imao fiksiranu širinu i centriran sadržaj, jer skoro svaki računar ima približno sličnu rezoluciju ekrana. Međutim, pojavom mnoštva drugih vrsta uređaja koji imaju različite ekrane, fiksirane širine sadržaja su postale neupotrebljive. Princip „fleksibilnih mreža“ se zasniva na konceptu procentualnog izražavanja širine sadržaja tako da su međusobni odnosi različitih elemenata kompatibilni prilikom prikaza. [6]

Popularan koncept prilagodljivog veb dizajna podržava fleksibilan raspored elemenata koji čine sadržaj veb aplikacije i on je baziran na prednosti mobilnih uređaja, tzv. „mobile first“ razvoj. Jedan od kocepata „fleksibilnih mreža“ je izražavanje sadržaja u kolonama koje se koriste prilikom razvoja veb aplikacije i koje predstavljaju širinu sadržaja koji će se prikazivati na ekranu, i u zavisnosti od veličine (širine) ekrana one se automatski skaliraju i premeštaju tako da prikaz sadržaja bude optimizovan prema veličini uređaja koja pristupa veb aplikaciji. Ovaj koncept postoji i koristi se na nekoliko načina, ali je najpopularniji u okruženju otvorenog koda koji se zove „Bootstrap“. [13] [31]


23

Slika 6: Fleksibilna mreža u konceptu 12 kolona [29]

Korišćenjem kolona prilikom razvoja možemo da odredimo kako želimo da se naš sadržaj ponaša na različitim uređajima, takođe možemo da definišemo da li hoćemo da sakrijemo neke kolone na određenim uređajima, ako on predstavlja nerelevantan sadržaj za mobilne korisnike aplikacije.

Slika 7: Sistem 12 kolona – desktop verzija [30]

Kada pristupamo sa mobilnog uređaja, kolone se automatski skaliraju i premeštaju, tako da kolone 50% veličine na desktop uređajima predstavljaju kolone pune širine 100% na mobilnim uređajima, ali jednu ispod druge.


24

Slika 8: Sistem 12 kolona – mobilna verzija [30]

„Fleksibilne mreže“ znače i izražavanje veličine u procentima. Osnovna razlika u odnosu na raniji pristup je prelazak definisanja veličina sa piksela (npr. 300px) na definisanje veličina u procentima (npr. 30%) o međusobnim odnosima veličina između različitih elemenata na veb stranici.

Da bi se dobio procenat veličine nekog elementa, bitno je podeliti veličinu elementa koji prilagođavamo sa ukupnom veličinom ekrana i to pomnožiti sa 100 da bismo dobili rezultat u procentima. Primer: elemenat širine od 200px na ekranu širine 960px ima procenat 20,83% i taj podatak koristimo prilikom izrade veb aplikacije, umesto fiksnih 200px. [6]

Slika 9: Proporcija elementa širine 200px [6]


25

3.1.2. „Fleksibilne slike“

Kada razvoj veb aplikacije primenimo kroz „fleksibilne mreže“, potrebno je prilagoditi i veličine slika koje se prikazuju u veb aplikaciji. Kruto određene veličine slika izrađene u pikselima predstavljaju problem slične prirode kao kod „fleksibilnih mreža“, gde izražavanje u pikselima znači različite rezulate sa obzirom na uređaj sa koga se pristupa veb aplikaciji. [6]

Dodatni problem je optimizacija učitavanja slika, jer po pravilu mobilni telefoni imaju slabiju i sporiju internet konekciju nego desktop računari. Stoga je izuzetno važno prilagoditi veličinu slike koja se prikazuje uređaju sa koga se pristupa internetu. Postoji nekoliko tehnika:

- CSS crop - Prikaz više verzija iste slike uz pomoć media query

3.1.2.1. CSS opsecanje slike

Predstavlja metodu dinamičkog opsecanja slike smanjujući joj na taj način rezoluciju za lakši prikaz, uz pomoć atributa veličine i širine zadatih u CSS-u. Na ovaj način se prikazuje samo deo slike koji je određen atributima i na taj način korisnik dobija najbolji prikaz određene slike u odnosu na uređaj koji koristi. [6]

Slika 10: Prikaz na velikom ekranu [6]

Slika 11: Prikaz iste slike na manjem ekranu [6]


26

3.1.2.2. Prikaz više slika uz media query

Da bismo obezbedili dinamičku optimizaciju slika za što bolje učitavanje slika i stranica, veb programeri treba da koriste više različitih verzija istih slika za različite rezolucije ekrana sa kojih se pristupa veb aplikaciji. Primer koji sledi koristi tehnologije HTML5 i CSS3 da bi definisala 2 različita izvora iste slike. Jedna slika je predviđena za ekrane visoke rezolucije a druga za niske rezolucije. Uz pomoć media upita je moguće proveriti veličinu ekrana korisnika i na osnovu odgovara prikazati odgovarajuću verziju slike. [6]

<style type=”text / css”>

@media (min−device−width: 400px) {

img[data−src−400px] {

content : attr(data−src−400px , url) ;

} }

@media (min−device−width: 800px) {

img[data−src−800px] {

content : attr(data−src−800px , url) ;

} }

</style></head>

<body>

<img src=”logo.png”

data−src−400px=”logo.png”

data−src−800px=”logo_big.png” />

</body>

Listing 1: Upit za prikaz različitih slika

3.1.3. Media upiti

Upiti ili „media query“ su ključni deo tehnologije prilagodljivog veb dizajna. Bez njih skoro da ne bi bilo mogućnosti za prilagodljiv veb dizajn. Oni omogućavaju saznavanje veličine ekrana korisnika koji pristupa veb aplikaciji, i primenjivanje odgovarajućeg CSS stila za što bolji korisnički doživljaj veb aplikacije. [6]

Upotrebom „media query-ja“ je moguće menjati razne CSS stilove, zavisno od veličine ekrana (uređaja) koji pristupa veb aplikaciji. CSS3 je uveo dodatne funkcionalnosti


27

stilizacije, dozvoljavajući promenu širine, visine, orijentacije objekta i boje. Upiti omogućavaju prilagođavanje veb aplikacije različitim uređajima bez promene ili modifikacije samog sadržaja. [6]

Neki od vrste upita, tj. od karakteristika prema kojima se mogu formirati pravila za određeni uređaj i vrstu prikazivanja sadržaja su: [32]

- Visina prikaza - Širina prikaza - Orijentacija ekrana (horizontalno/vertikalno) - Rezolucija (gustina piksela) - Mreža (grid) - Boja (broj bitova po boji) - Pokazivač (pointer)

Korišćenjem kriterijuma za određivanje karakteristika uređaja, možemo primeniti i 3 logička operatora koji slede: [32]

- Ne – se koristi da se negira upit - I – se koristi za kombinovanje više kriterijuma u jedan upit - Ako i samo ako – se koristi za primenu upita samo ako je ceo upit potvrdan

(sprečava starije pretraživače da prikažu samo delimične promene)

Sledi primer korišćenja media upita u svrhu odabira vrste CSS stila u odnosu na veličinu uređaja koji pristupa sadržaju.

<link rel=”stylesheet” type=”text / css”

media=”screen and (max−device−width : 480px) ”

href=”style . css” />

Listing 2: Primer Inline Media Query Upita

U listingu iznad pravimo upit i pišemo uslov, ako je uređaj sa kog korisnik pristupa manje od 480px, prikaži CSS stil „style.css“.

body {

background-color: tan;

}

@media screen and (max-width: 992px) {

body {

background-color: blue;


28

}

}

@media screen and (max-width: 600px) {

body {

background-color: olive;

}

}

Listing 3: Primer „media query“ upita

Sledeći primer predstavlja promenu boje pozadine u odnosu na vrstu uređaja koji pristupa veb aplikaciji. Prvo podesimo osnovnu boju pozadine, a onda definišemo 2 media upita koji zavisno od veličine ekrana uređaja menjaju boju pozadine.

Slika 12: Prikaz različite boje pozadine [33]

Upiti generalno postavljaju upite uređajima koji pristupaju aplikacijama, i prate unapred definisane uslove. Ukoliko veličina ekrana korisnika odgovara nekom od uslova napisanih u upitu, on izvršava zadatu komandu i prikazuje odgovarajući CSS stil.

3.1.4. Prilagodljiva tipografija

U tehnologijama prilagodljivog veb dizajna, tipografija igra bitnu ulogu, jer je većina sadržaja na internetu i veb aplikacija tekst. Zbog toga je izuzetno važno obratiti dovoljno pažnje odabiru i podešavanju fontova da bi svaki korisnik na svakom uređaju imao dobar korisnički doživalj. Izuzetno je važno da font ne bude premali na malim ekranima, ili preveliki na velikim ekranima. Za korišćenje fontova i njihove veličine u tehnologiji prilagodljivog veb dizajna, postoji 3 pristupa: [6]


29

- Korišćenje procentualnih veličine - Korišćenje atributa min-/max- širine ekrana (media upit) - Određivanje veličine fonta u odnosu na širinu ekrana (vw)

Ponekad se prva dva pristupa koriste zajedno. Korišćenjem procentualnih veličina (em) u CSS se omogućava da veličina fonta bude nezavisna od veličine ekrana. Dodatno, preporuka je da se koristi i min-width i max-width atributi pored procentualnih veličina fonta, da bi se definisala minimalna i maksimalna dužina linija u paragrafu.

@media (min-width:576px) {

h1 {

font-size: 20em;

} }

Listing 4: Media upit kombinovan sa prilagodljivom tipografijom

U listingu iznad definišemo veličinu ekrana preko koje ćemo prikazivati određenu veličinu veličine fonta za h1 naslove. Korišćenje „vw“ veličine fonta znači da se veličina fonta automatski određuje prema širini ekrana, jer „vw“ veličina predstavlja procenat širine ekrana. 1vw predstavlja 1% od ukupne širine ekrana. To znači da ukoliko je širina ekrana 50cm, 1vw će iznositi 0,5 cm. Ovaj pristup predstavlja sigurnu prilagodljivu tipografiju. [34]

Slika 13: Prikaz teksta na širini ekrana 293 px [34]


30

Slika 14: Prikaz teksta na širini ekrana 650 px [34]

3.1.5. Prilagodljivi email sistemi

Korišćenje pametnih mobilnih telefona donosi mnogo promena. Jedna od njih je korišćenje email servisa na mobilnim telefonima. Uz dostupne aplikacije razvijene za mobilne uređaje na različitim platformama postalo je moguće i popularno proveravati email-ove na svom mobilnom telefonu u trenutku kada pristignu, dok smo u pokretu i ne sedimo trenutno za desktop računarom. Pošto je postalo moguće, problem koji se javlja kod čitanja neprilagodljivih email-ova je taj što je često potrebno horizontalno „skrolovanje“ da bi se pročitao ceo email ili neprilagodljive fotografije koje su često prevelike. [6]

Slika 15: Procenat otvaranja email-a zavisno od uređaja [8]


31

Glavni razlozi za pristup razvoja prilagodljivih email sistema su: [35]

- 47% poslatih email-ova se otvori na mobilnim uređajima - U proseku ljudi pogledaju svoj mobilni telefon oko 150 puta dnevno - 80% ljudi obriše email ako ne izgleda čitko na njihovom mobilnom uređaju

Da bi email bio pregledniji i pogodniji za pregled na mobilnim uređajima, moguće je promeniti strukturu sadržaja, navigaciju, povećati font teksta, promeniti boje, promeniti raspored, skaliranje slika, promena ili sakrivanje suvišnog sadržaja. Implementacija prilagodljivih email sistema se zasniva na korišćenju media upita, preko kojih određujemo koji će se CSS stil koristiti za uređivanje email poruke. [35]

Najveći problem kod prilagodljivih email sistema predstavlja neprikladna veličina fonta. Problem skaliranja veličine fonta zavisno od uređaja je prisutno kod čitanja email-ova sa mobilnih telefona i tablet uređaja. Potrebno je omogućiti korisniku odgovarajuću veličinu fonta koja će biti čitljiva kada hoće da pročita email koji mu je stigao. Ovo je takođe moguće rešiti uz pomoć media upita i podešavanje veličine fonta u procentima.

@media only screen and (max−device−width: 480px) { p { font-size: 10em; } }

Listing 5: Media upit

U listingu iznad definišemo da font teksta u paragrafu bude 10em, ako je maksimalna širina ekrana 480. Na ovaj način možemo odrediti kolika će biti veličina fonta zavisno od uređaja sa kog se čita pristigao email.

Slika 16: Prikaz prilagodljivog email-a [35]


32

3.2. Nove tehnologije grafičke adaptibilnosti

3.2.1. HTML5 i CSS3

HTML5 je standardizovao i uveo nekoliko novih „tag-ova“ koji pružaju preciznije podatke Google-u o strukturi i sadržaju veb aplikacije, što je veoma bitno za SEO, koji vodi računa da veb aplikaciju pronađu pravi korisnici preko pretraživača kada im je potrebna. Takođe, HTML5 podržava interakciju sa korisnicima prilikom popunjavanja i slanja formi i time smanjuje potrebu za uključivanjem „teškog“ JavaScript koda. Korišćenjem HTML5 tehnologije značajno ubrzava učitavanje HTML stranica naše veb aplikacije. HTML5 pored media upita takođe omogućava fleksibilne mreže, selektore, prilagodljivu tipografiju, tranzicije i različite animacije. [50]

Početak HTML5 stranice počinje sa tag-om u listingu ispod:

<!DOCTYPE html>

Listing 6: Prvi HTML5 tag u stranici

Novi HTML5 tag-ovi su:

- Header - Footer - Article - Aside - Main - Nav - Section - Canvas (Grafika) - Audio - Video - Embed (Kontejner za dodatni sadržaj)

Prilikom razvoja veb aplikacije, bitno je ne koristiti fiksne veličine elemenata izražene u pikselima kao mernu jedinicu. Zbog naprednijih tehnologije i sve većih gustina ekrana koji se proizvode, broj izražen u pikselima postaje sve manje relevantan. Kao zamena se koriste relativne merne jedicine kao što su procenti i oznaka „em“ za fontove, koja predstavlja procenat uvećanja u odnosu na podrazumevanu veličinu fonta. [50]

Za grafičku prilagodljivost sadržaja veb aplikacije, potrebno je utvrditi veličinu prozora u kome se prikazuje veb sadržaj. Ova veličina se razlikuje od fizičke veličine ekrana, pošto se sadržaj prikazuje u prozoru koji je manji od celog ekrana (viewport). [50]

Prednost korišćenja CSS3 tehnologije je ta što stariji internet pretraživači koji ne razumeju nove komande podržane u CSS3 ih preskaču, omogućavajući veb aplikaciji da se kompletna učita. CSS3 podržava media upite, koji omogućavaju prilagodljivost veb


33

sadržaja određenom uređaju koji pristupa veb sadržaju. Media upiti su samo jedan od modula CSS3 tehnologije i oni omogućavaju izvršavanje ciljanog dela CSS stila u odnosu na uređaj koji pristupa veb aplikaciji. Bez media upita, ne bi bilo moguće utvrditi veličinu uređaja i širinu prozora za prikaz sadržaja, kao ni prilagoditi sadržaj koristeći samo određene delove CSS stila, ili različite CSS stilove. [50]

3.2.2. Boostrap

Boostrap je projekat otvorenog tipa (open-source) i predstavlja „okvir“ (framework) za izradu „front-end“ dela veb aplikacija koristeći tehnologije koje ih čini prilagodljivim svim uređajima koji će joj pristupati. Boostrap je sačinjen od biblioteka CSS-a i JavaScripta koji olakšavaju i ubrzavaju razvoj složenih veb aplikacija koji su prilagodljivi svim uređajima. Boostrap standardizuje izgled HTML elemenata kao što su „button-i“, forme, tabele, itd. Nastao je 2011. godine i od tada se konstantno unapređuje, jer ga podržava velika zajednica programera. [51]

Kada se paket Boostrap-a preuzme, u njemu se nalaze 3 foldera: css, js i img. Po pravilu se oni uključuju u projekat koji se razvija, i oni služe za uređivanje HTML elemenata i određuju ponašanje veb aplikacije. [51]

Slika 17: Struktura Boostrap fajlova [51]

Boostrap takođe podržava fleksibilne mreže i njegova podrazumevana struktura sadrži 12 kolona koji čine ukupnu širinu prikaza sadržaja na ekranu korisnika. Širina sadržaja je uglavnom 724px ili 1170 px, zavisno od uređaja sa kojeg se pregleda sadržaj.

Slika 18: Fleksibilna mreža 12 kolona [51]


34

4. NAUČNO-STRUČNO ISTRAŽIVANJE

U okviru naučno-stručnog istraživanja analizirane su različite nove tehnologije koje obezbeđuju grafičku adaptibilnost veb aplikacija. Neke od njih su razvijene prvenstveno da bi bile „mobile first“, što znači da im je na prvom mestu prilagodljivost mobilnim tehnologijama, čak im pridaju prednost u odnosu na dekstop verzije veb aplikacija.

4.1. Komparacija pristupa sa više verzija u odnosu na dinamičko „serviranje“ sadržaja

Koncept prilagodljivog veb dizajna nam omogućava da jednu razvijenu verziju veb aplikacije prilagodimo i ostalim uređajima tako da budu čitljivi i pregledni kada im korisnik pristupi, bez obzira na uređaj sa koga pristupa sadržaju. To nam omogućava HTML5 i CSS3 tehnologije, kao i korišćenje tehnologije Bootstrap. U tom slučaju postoji samo jedna razvijena verzija veb aplikacije, koja u odnosu na uređaj prilagođava svoj sadržaj. Ovaj način je mnogo jednostavniji, lakši i jeftiniji za održavanje, i on se preporučuje u najvećem broju slučajeva, ako ne postoje posebni zahtevi za mobilnu verziju veb aplikacije.

Prilagodljiv veb dizajn nije jedina opcija za prilagodljive veb aplikacije. Ako postoje razvijene dve verzije veb aplikacije za desktop uređaje i mobilne uređajte, ta veb aplikacija je takođe prilagodljiva, ali bez korišćenja koncepta prilagodljivog veb dizajna. [52]

Prednosti prilagodljivog veb dizajna su [52]:

- Lakše i jeftinije održavanje - Isti domen veb aplikacije za sve uređaje - Nema potrebe za preusmeravanjem korisnika

Nedostaci prilagodljivog veb dizajna su [52]:

- Velike i „teške“ HTML stranice se možda dugo učitavaju na mobilnim uređajima - Ne pruža potpuno iskustvo za mobilne korisnike


35

Slika 19: Jedna verzija veb aplikacije sa 1 URL-om [52]

Međutim, u nekim slučajevima je mnogo bolje imati posebnu i prilagođenu verziju veb aplikacije mobilnim korisnicima, često u slučajevima kada je u pitanju online prodavnica koja zahteva na poseban način uređenu veb aplikaciju, ili veb aplikacija povezana sa pretragom lokacije ili navigacije korisnika, kada se koristi GPS tehnologija koja postoji ugrađena u mobilne i prenosive uređaje. Mnogo je laške navoditi korisnika ako mu znamo trenutnu lokaciju i možemo mu prikazati na grafički način najkraći put do željenog mesta. Takođe, brzina prenosa podataka igra značajnu ulogu prilikom prikazivanja sadržaja. Ako se ustanovi da korisnik pristupa sa mobilnog uređaja koji po pravilu ima slabiji prenos podataka, ne prikazuju mu se veliki grafički sadržaji. [50]

Prava mobilna verzija veb aplikacije je potrebna kada je cilj postići iskustvo specifičnog sadržaja ili funkcionalnosti koja se oslanja na konkretan uređaj koji pristupa sadržaju. Ponekad mobilna verzija veb aplikacije pruža potpuno drugačiji korisnički doživljaj u odnosu na desktop verziju iste veb aplikacije. [50]

Mobilnu verziju veb aplikacije je moguće postaviti na 3 načina. Jedan od načina je kreirati poddomen veb aplikacije, tada će mobilna verzija biti m.vebaplikacija.rs, druga mogućnost je kreiranje odvojenog domena za mobilnu verziju, npr. vebaplikacija.mobi, ili kreiranje pod foldera vebaplikacija.rs/mobile. Kada se kreira posebna mobilna verzija veb aplikacije, detekcija korisnika i preusmeravanje može biti na klijentskoj i serverskoj strani. [52]

Prednosti korišćenja dve verzije veb aplikacije [52]:

- Pruža odličnu optimizaciju mobilnog sadržaja - Sposobnost da pruži potpun korisnički doživljaj mobilnim korisincima


36

Nedostaci korišćenja dve verzije veb aplikacije [52]:

- Skuplji razvoj i održavanje - Teško održavanje dve verzije i prilagođavanje pretraživačima (Google)

Slika 20: Dve verzije veb aplikacije sa 2 URL-a [52]

Kada postoje dve odvojene verzije veb aplikacije, može da se javi problem rangiranja na pretraživačima, koji će u tom slučaju dve verzije veb aplikacije posmatrati kao odvojene veb aplikacije na dva domena (poddomena) i može doći do pada posećenosti veb aplikacije. [52]

U slučaju odabira između prilagodljivosti veb aplikacije i pravljenja dve posebne verzije veb aplikacije, postoji i među-rešenje, a to je tzv. dinamičko “serviranje” (dynamic serving).

Dinamičko “serviranje” predstavlja slučaj kada se prikazuje potpuno drugačiji HTML i CSS sadržaja, na istom URL-u, u odnosu na uređaj koji pristupa veb aplikaciji. To se postiže sakrivanjem mobilnog sadržaja kada se pristupa sa desktop računara, a sakriva desktop sadržaj kada se pristupa sa mobilnog uređaja. Ovaj pristup omogućava kreiranje potpunog korisničkog doživljaja za mobilne korisnike, osiguravajući takođe i desktop verziju optimizovanom. [53]

Prednosti korišćenja dinamičkog „serviranja“ [52]:

- Jedan URL za sve verzije - Pruža odvojen i prilagođen mobilni sadržaj za specifične delatnosti (veb

prodavnice) - Pruža potpun korisnički doživljaj mobilnih korisnika


37

Nedostaci korišćenja dinamičkog „serviranja“ [52]:

- Kompleksna i teška tehnička implementacija - Visoki troškovi održavanja

Slika 21: Dinamičko „serviranje“ sa 1 URL-om [53]

4.2. Istraživanje zastupljenosti prilagodljivih veb aplikacija

Prema podacima, u periodu 2010.-2014. je postojao porast od preko 45% pristupa internetu preko mobilnih telefona. Procena broj ljudi koja pristupa internetu preko mobilnih telefona je oko 1,1 milijarde. Očekuje se da pametni telefonu zadrže lidersku poziciju u odnosu na druge mobilne uređaje. Zbog toga bi se sadržaj morao prilagoditi mobilnim uređajima. [36]

Broj računara koji se koriste u svetu iznosi oko 2 milijarde, dok broj mobilnih telefona koji ljudi koriste dostiže broj od 5 milijardi. Zbog toga postoji ogromna potreba za prilagodljivim sadržajem kojem se može lako pristupiti sa mobilnih uređaja. [36]

U istraživanju sprovedenom 2014. godine u 4 država, ispostavilo se da većina veb sajtova i veb aplikacija nije prilagodljiva. Testiralo se da li je veb sadržaj prilagodljiv, što podrazumeva potpunu prilagodljivost svim uređajima, da li su polu-prilagodljive, što podrazumeva horizontalno poravljanje na većim rezolucijama, i automatsko “zumiranje” (približavanje) sadržaja da bude više čitljiv, ili ne prilagodljive, što podrazumeva da elementi imaju fiksne dimenzije i da se ne prilagođavaju različitim rezolucijama. Države u kojima se vršilo istraživanje su Srbija, UK, SAD i Kanada. Ukupan broj veb sajtova i veb aplikacija koji se testirao je 470 a podaci o prilagodljivosti slede u tabeli: [36]

Prilagodljiva Polu-prilagodljiva Nije prilagodljiva Ukupno

Srbija 20 65 32 117

Kanada 39 83 17 139


38

UK 28 32 35 95

SAD 28 54 37 119

Ukupno 115 234 121 470

Tabela 1: Broj prilagodljivih veb aplikacija i veb sajtova [36]

U istraživanju se testiralo 117 veb sajtova i veb aplikacija iz Srbije i dobili su se sledeći rezultati. Prilagodljivo je 17% veb sajtova i veb aplikacija, a većina njih je polu-prilagodljiva, dok 27% nije prilagodljivo. Prema rezultatima se može zaključiti da većina veb sadržaja u Srbiji nije prilagodljiva. U poredeđenju sa Kanadom u kome je veći procenat prilagodljivog veb sadržaja, zaključujemo da je u zapadnom svetu veći rast prilagodljivih veb sadržaja. [36]

Slika 22: Procenat prilagodljivog veb sadržaja u Srbiji i Kanadi [36]

Slede podaci ostalih država koje su obuhvaćene istraživanjem. U UK je prisutan veći procenat ne prilagodljivih veb sadržaja, dok je manji procenat polu prilagodljivih.

-

Slika 23: Procenat prilagodljivog veb sadržaja u SAD i UK [36]


39

Iz rezultata istraživanja sledi da većina veb sadržaja nije prilagodljiva i da nisu korišćene najnovije tehnologije HTML5 i CSS3, već HTML4 i CSS2 koji ne podržavaju prilagodljiv veb dizajn. [36]

U 2017. godini, u odnosu na 2016. godinu je takođe postojao rast popularnosti mobilnih uređaja, povećava se i broj mobilnih uređaja pa tako raste i broj mobilnih korisnika, a povećao se i broj poseta veb sadržaju sa mobilnih uređaja, takođe postoji i rast vremena provedenog na internetu sa mobilnih uređaja. [54]

U odnosu na 2016-2017, takođe je došlo do povećanja: [54]:

- Posete sa mobilnih uređaja se povećala sa 57% na 63% - Vreme provedeno na internetu sa mobilnih uređaja se povećalo sa 40% na 49% - „Bounce Rate“ se smanjio sa 52% na 47% (što je manji – to je bolje)

Slika 24: Broj poseta mobilnih korisnika [54]

Ovi podaci nam nedvosmisleno govore da je i dalje veoma prisutan rast popularnosti mobilnih uređaja koji traje od njihove pojave 2007.-2008. godine.


40

5. ANALIZA POSTOJEĆIH REŠENJA U OKVIRU RAZLIČITIH TEHNOLOGIJA RAZVOJA VEB

APLIKACIJA

5.1. Tehnologija ASP.NET

Microsoft-ova tehnologija za razvoj veb aplikacija predstavlja tehnologiju ASP.NET, koja se razvija u programskom alatu Visual Studio. Razvoj veb aplikacija kroz alat Visual Studio je olakšan dodavanjem raznih biblioteka i “okvira” (framework-a) među koje spada i popularni “Bootstrap”. “Bootstrap” je prilagodljiv “okvir” koji se koristi za razvoj korisničkog interfejsa veb aplikacija i veb sajtova. On se sastoji od CSS klasa, jQuery dodataka i raznih komponenti. [37]

“Bootstrap” verzija 3 pa nadalje se posebno odnosi na pretraživače koji se nalaze na mobilnim telefonima i tablet uređajima, kao i pretraživačima na velikim ekranima. Najčešće korišćene CSS klase koriste “fleksibilnu mrežu” na koju se oslanja “Boostrap”, koja organizuje sadržaj uz pomoć kolona i redova kako bi on bio prilagodljiv na svim uređajima. [37]

Kada hoćemo da kreiramo projekat, ASP.NET veb aplikaciju u Visual Studio alatu, od verzije 2013 pa na dalje u temi već imamo uključen “Boostrap” koji koristi CSS i JavaScript fajlove, kao i jQuery biblioteke. Verzije koje koristi “Boostrap” u Visual Studio 2013 alatu su jQuery v1.10.2 i “Boostrap” v3.0.0. [37]

Slika 25: Projekat veb aplikacije u VS 2015 [36]

Na slici iznad se nalazi “Solution Explorer” – rešenje našeg projekta koji kreira Visual Studio i u kome vidimo uključene “Boostrap” CSS i JS fajlove nakon kreiranja veb


41

aplikacije. Verzija Visual Studia koja je korišćena za kreiranje projekta je 2015 koja koristi “Boostrap” verziju 3.0.0.

Kreirana veb aplikacija kada se pokrene, na desktop prikazu izgleda kao na slici ispod:

Slika 26: Primer veb aplikacije koja koristi “Boostrap” – desktop prikaz [36]

Slika 27: Primer veb aplikacije koja koristi “Boostrap” – mobilni prikaz [36]


42

Na slikama iznad vidimo kako funkcioniše grafička adaptibilnosti i prilagodljivost veb aplikacija koje se kreiraju korišćenjem ASP.NET tehnologije koja koristi tehnologiju “Boostrap”. Automatska detekcija mobilnog uređaja i prilagođavanje sadržaja se vrši preko “Boostrap”-ovih “fleksibilnih mreža” i rasporeda 12 kolona, kao i prilagođavanje sadržaja uz pomoć CSS i JS fajlova, kao i jQuery biblioteka.

<link href="/Content/bootstrap.css" rel="stylesheet"/>

<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>

<script src="Scripts/bootstrap.js" type="text/javascript"></script>

Listing 7: Uključene “Boostrap” biblioteke i fajlovi

Prilikom pokretanja veb aplikacije, u kreiranom ASP.NET projektu se između ostalog nalaze i fajlovi prikazani u listingu iznad.

5.2. Tehnologija PHP

PHP jezik je skriptni jezik za kreiranje dinamičkih veb aplikacija koji se izvodi na serverskoj strani. Zvanično je objavljen 1995. godine i od tada je postao vrlo popularan. Pošto je od PHP jezik star preko 20 godina, njegov razvoj veb aplikacija se najveći deo vremena primarno odnosio na desktop aplikacije, a ne prvenstveno za mobilne uređaje, čija popularnost izuzetno raste u poslednjih nekoliko godina. [38]

Uloga PHP-a u veb aplikaciji je da ona daje instrukcije serveru kako da zatraži, filtrira i obradi podatke iz baze podataka, zatim kako da kreira HTML fajl koji se prikazuje korisniku u pretraživaču kao rezultat. Prednost korišćenja jezika PHP jeste što se može koristiti zajedno sa HTML-om, CSS-om, kao ostalim jezicima i bibliotekama kao što su “JavaScript” i “jQuery”. [39]

<!DOCTYPE html">

<head>

<title>Hello world as text</title>

</head>

<body>

<?php

echo "<p> Hello world </p>";

?>

</body>

</html>

Listing 8: PHP kod ugrađen u HTML [39]


43

Pošto je PHP skriptni jezik, on se uvek izvršava na serveru i odgovor koji generiše server pretvara u HTML i to je rezultat koji se prikazuje u pretraživaču. To znači da PHP kod nije moguće videti u pretraživaču prilikom pregleda izvora stranice, samo HTML fajl koji u sebi sadrži rezultate izvršavanja PHP jezika na serveru. [39]

Međutim, prednost PHP jezika je ta što je moguće kombinovati različite tehnologije prilikom razvoja veb aplikacija, dok se PHP jezik koristi samo za komunikaciju sa serverom i obezbeđivanje prosleđivanja i potražnju podataka iz baze. To znači da je prilikom razvoja veb aplikacije moguće koristiti različite tehnologije za postizanje prilagodljivosti veb aplikacije.

Za postizanje prilagodljivosti PHP veb aplikacije postoje 2 načina. Prvi način je kreiranje dve različite verzije veb aplikacije, posebnu verziju za desktop računar a posebnu za mobilne uređaje. Drugi način je korišćenje prilagodljivog veb dizajna prilikom razvoja veb aplikacije. [40]

5.2.1. Kreiranje dve verzije veb aplikacije – PHP

Kod ovog načina postizanja prilagodljivosti veb aplikacije, razvijaju se dve verzije iste veb aplikacije, koje se menjaju u odnosu na uređaj na kome se prikazuju. Potrebno je razviti jednu verziju veb aplikacije za prikaz na desktop uređajima (i laptop uređajima), kao i verziju za prikaz na mobilnim uređajima (mobilni telefoni i tablet uređaji). [40]

Ovakav način razvoja veb aplikacije nam omogućava veću kontrolu nad odabirom funkcionalnosti koje su raspoložive korisniku, zavisno od uređaja sa koga pristupa veb aplikaciji. Ponekad postoji potreba da se potpuno izmeni izgled veb aplikacije između dve verzije, desktop verzije i mobilne verzije, a da ta promena ne utiče na drugu verziju veb aplikacije. [40]

U nekim slučajevima se namerno koristi prvi pristup postizanja prilagodljivosti PHP veb aplikacije radi veće fleksibilnosti prilikom razvoja i lakšeg postizanja željenog cilja – svrhe aplikacije. Ovakvi slučajevi su najčešće online prodavnice, koje imaju specifičnu strukturu i način funkcionisanja, a koji zahteva prilično različito korišćenje iste veb aplikacije na desktop računaru i na mobilnim uređajima.

Nedostatak ovog načina postizanja prilagodljivosti veb aplikacije je taj što svaka promena načinjena na aplikaciji mora da se uradi na obe verzije veb aplikacije pojedinačno, što usporava promene i povećava troškove održavanja veb aplikacije. [40]

Da bi se postigla prilagodljivost na ovaj način, ako već imamo jednu verziju veb aplikacije razvijenu i postavljenu, potrebno je kreirati poddomen za mobilne korisnike, npr. m.vebaplikacija.rs ili mobile.vebaplikacija.rs , ovo nam omogućava da razvijamo novu – drugačiju verziju naše veb aplikacije od postojeće za desktop uređaje. Prilikom razvoja nove, mobilne verzije naše veb aplikacije, potrebno je voditi računa na korisnički interfejs koji mora biti prilagođen za mobilne uređaje, kao i da se uklone sve nepotrebne


44

funkcionalnosti koje bi usporavale i komplikovale rad naše veb aplikacije na mobilnim uređajima. [40]

Na kraju, kada je spremna mobilna verzija naše veb aplikacije, potrebno je uključiti detekciju i automatsko preusmeravanje korisnika na mobilnu verziju veb aplikacije u slučaju da sadržaju pristupaju sa mobilnih uređaja. Za ovu svrhu postoji posebno razvijena PHP klasa koja služi za utvrđivanje uređaja sa koga se pristupa veb aplikaciji, koja se zove “Mobile Detect”. Klasu je potrebno uključiti u našu veb aplikaciju i onda je možemo koristiti. Korišćenjem klase, potrebno je utvrditi uređaj sa koga se pristupa veb aplikaciji, i u slučaju da je to mobilni uređaj potrebno ga je preusmeriti na mobilnu verziju koja je kreirana na poddomenu m.vebaplikacija.rs ili mobile.vebaplikacija.rs . Ako korisnik na mobilnoj verziji ipak želi da pristupi potpunijoj desktop verziji veb aplikacije klikom na određeno dugme, pravimo sesiju “desktop” i prebacujemo ga na osnovnu verziju naše veb aplikacije. Za ovu svrhu se može koristiti i funkcija media upita koja je podržana od CSS3 verzije, ali je ona najprimitivniji način detekcije. A primer korišćenja “Mobile Detect” klase je u listingu ispod. [40]

<?php

require_once 'include/Mobile_Detect.php';

$detect = new Mobile_Detect;

$device_type = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');

$script_version = $detect->getScriptVersion();

$desktop = $_GET['desktop'];

if($desktop == 1) {

$_SESSION['desktop'] = 1;

header("Location:" . http://www.yourdomain.com);

}

if($device_type == 'phone' && $desktop != 1 && $_SESSION['desktop'] != 1) {

$url = current_url();

$mobile_url = str_replace('http://www','http://m',$url); }

?>

Listing 9: PHP klasa za detekciju uređaja [40]

Jedan dobar primer za korišćenje dve verzije iste veb aplikacije je domaća popularna veb aplikacija kupujemprodajem.com, koja ima razvijene dve potpuno različite verzije svoje veb aplikacije da bi pružila korisnicima odličan korisnički doživljaj.


45

Slika 28: Desktop verzija veb aplikacije “kupujemprodajem” [47]

Slika 29: Mobilna verzija veb aplikacije “kupujemprodajem” [47]

Prilikom posete veb aplikacije kupujemprodajem.com, ako korisnik veb aplikaciji pristupa sa mobilnog uređaja, biva automatski prebačen na mobilnu verziju sa poddomenom m.kupujemprodajem.com, koja je mnogo bolje optimizovana za mobilne korisnike.

5.2.2. Korišćenje tehnologije prilagodljivog veb dizajna - PHP

Drugi način za postizanje grafičke adaptabilnosti veb aplikacije je korišćenje tehnologije prilagodljivog veb dizajna. Kod ovog načina se prilagodljivost postiže korišćenjem


46

tehnologija koje omogućavaju automatsko prilagođavanje sadržaja veb aplikacije određenom uređaju koji pristupa veb aplikaciji. Da bismo postigli prilagodljivost, koristimo media upite koji omogućavaju otkrivanje uređaja koji pristupa sadržaju, a onda sadržaj prilagoditi uređaju primenom posebno razvijenih CSS stilova za uređivanje HTML elemenata na veb aplikaciji. U listingu ispod su media upiti koji se najčešće nalaze na početnoj stranici naše veb aplikacije i određuju koji CSS fajl će se učitati i koristiti. [40]

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

Listing 10: Uključivanje više različitih CSS stilova

U zavisnosti od širine ekrana uređaja koji pristupa veb aplikaciji, biramo između dva ili više CSS potpuno različite i odvojena stila koji će se koristiti za stilizovanje sadržaja. Nedostatak ovog načina jeste taj što je u nekim slučajevima nemoguće ukloniti određene sadržaje (npr. skripte) u HTML-u koje su nepotrebne za mobilnu verziju a mogu znatno usporiti rad veb aplikacije. [40]

Pored načina navedenog iznad, možemo u okviru istog CSS fajla primenjivati različita pravila i vrednosti. To se postiže uključivanjem pravila u okviru istog CSS fajla koji u odnosu na ispunjen uslov koristi vrednosti stilizovanja.

/* Mobilni telefoni (oba načina rotacije uređaja) */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Stilovi */

}

/* Mobilni telefoni (rotacija horizontalno) */

@media only screen

and (min-width : 321px) {

/* Stilovi */

}

/* Mobilni telefoni (rotacija portret) */


47

@media only screen

and (max-width : 320px) {

/* Stilovi */

}

Listing 11: Primena različitih media upita u okviru istog CSS fajla [40]

Za demonstraciju primera prilagodljivog veb dizajna sa korišćenjem media upita u okviru istog CSS fajla ćemo koristiti primer ispod.

Slika 30: Prikaz sadržaja na širini ekrana preko 800px (desktop uređaji) [41]

Na slici iznad vidimo primer rasporeda sadržaja kada veb aplikaciji ili veb sajtu pristupamo sa desktop uređaja (širina ekrana preko 800px), gde imamo raspored elemenata u 3 kolone, i to po širinama: 20% za meni levo, 60% za centralni sadržaj i preostalih 20% za sadržaj sa desne strane. [41]

.menu { float: left; width: 20%; } .main { float: left; width: 60%; } .right { float: left; width: 20%; }


48

@media only screen and (max-width:500px) { /* Za mobilne telefone: */ .menu, .main, .right { width: 100%; } }

Listing 12: Prikaz CSS fajla sa media upitom [41]

Na prikazu za mobilne telefone sva 3 elementa sadržaja su u punoj veličini, tj. širini od 100%, poređani jedno ispod drugog. Sledi prikaz na ekranu ispod, a CSS fajl je iznad.

Slika 31: Prikaz na širini ekrana ispod 500px (mobilni telefoni) [41]

5.3. Tehnologija JSP

JSP ili Java Server Pages je tehnologija programiranja veb aplikacija. JPS predstavlja serverski jezik koji omogućava kreiranje dinamičkih, platformsko nezavisnih veb aplikacija. Prednost JSP tehnologije je što ona ima pristup kompletnoj kolekciji Java API-ja, kao i JDBC API za komunikaciju i rad sa bazama podataka. [42]

Korišćenje JSP tehnologije praktično znači uključivanje Java koda u HTML stranice uz pomoć posebnih JSP tag-ova, kao što su <% i %>. JSP komponenta je vrsta Java servleta koja je predviđena za korišćenje Java jezika u veb tehnologijama, koji se lako mešaju sa ostalim tehnologijama kao što su HTML, XHTML i XML elementi.

Korišćenjem JSP tehnologije, moguće je preko formi za unos prikupljati i obrađivati podatke sa veb formi, prikazivati podatke iz baze podataka ili iz nekog drugog izvora, ili kreirati veb stranice dinamički. [42]


49

Prednosti korišćenja JSP tehnologije za razvoj veb aplikacija su brži rad veb aplikacija, u odnosu na korišćenje CGI/Perl skriptova koji usporavaju učitavanje i obradu veb aplikacije. Pošto je JSP izgrađen na vrhu Java API Servleta, to znači da JSP ima pristup svim ostalim moćnim Java API-jima, kao što su JDBC (rad sa bazom podataka), JAXP (za obradu XML fajlova), itd... Na kraju, JSP je integralni deo Java EE platforme za razvoj ozbiljnih poslovnih skalabilnih Java aplikacija. [42]

Za korišćenje, obradu i pokretanje JSP veb aplikacija, potrebno je koristiti “Tomcat” veb server koji je sadržan u standardnom paketu “XAMPP” aplikacije za razvoj i testiranje veb aplikacija. Da bismo omogućili “Tomcat” serveru da obrađuje JSP veb aplikacije, potrebno je da ekstenzija veb fajlova bude “.jps” umesto “.html”. [43]

<!DOCTYPE html">

<head>

<title>Hello world as text</title>

</head>

<body>

<%

Date d = new Date();

System.out.println(„Current Date=“ + d); %>

</body>

</html>

Listing 13: Java kod ugrađen u HTML [44]

JSP se može posmatrati kao abstrakcija Java servleta na visokom nivou. JSP dozvoljava Java kodu da bude u istom dokumentu kao i ostali HTML elementi, i on se kompajlira i izvršava na serveru (Tomcat) a kao rezultat vraća HTML dokument koji se prikazuje u pretraživaču. U toku obrade dokumenta, JSP server kreira objekte kao što su zatevi, odgovori, sesije, konfiguracioni fajlovi, itd. [45]

Sa obzirom na to da je kod JSP tehnologije moguće kombinovati različite tehnologije prilikom razvoja veb aplikacija, kao što je to slučaj i sa PHP-om. Za postizanje prilagodljivosti JSP veb aplikacije, postoje 2 načina. Prvi način je kreiranje dve različite verzije veb aplikacije, jednu verziju za desktop računar a drugu verziju za mobilne uređaje, sa tim da će se korisnici automatski preusmeravati na mobilnu verziju ako veb aplikaciji pristupaju sa mobilnog uređaja. Drugi način za postizanje prilagodljivosti je korišćenje koncepta prilagodljivog veb dizajna prilikom razvoja veb aplikacije.


50

5.3.1. Kreiranje dve verzije veb aplikacije – JSP

Kod ovog načina postizanja prilagodljivosti JSP veb aplikacije, razvijaju se dve različite verzije iste veb aplikacije, koje se menjaju u odnosu na uređaj na kome se prikazuju. Potrebno je razviti jednu verziju veb aplikacije za prikaz na desktop uređajima (i laptop uređajima), kao i verziju za prikaz na mobilnim uređajima (mobilni telefoni i tablet uređaji). [40]

Prednost ovakvog načina postizanja prilagodljivosti veb aplikacije jer nam omogućava veću kontrolu nad odabirom posebnih funkcionalnosti koji se prikazuju korisniku karakterističnih za uređaj sa koga se pristupa veb aplikaciji. [40]

Nedostatak ovakvog načina postizanja prilagodljivosti veb aplikacije je ta što svaka načinjena promena na aplikaciji mora da se izmeni na obe verzije veb aplikacije pojedinačno, što usporava promene i povećava troškove održavanja veb aplikacije. [40]

Da bi na ovakav način postigli prilagodljivost, moramo imati kreiranu posebnu verziju veb aplikacije za mobilne korisnike na poddomenu veb aplikacije, npr. m.vebaplikacija.rs ili mobile.vebaplikacija.rs. Prilikom kreiranja mobilne verzije veb aplikacije, treba voditi računa da se uklone sve nepotrebne funkcionalnosti koje su nerelevantne za mobilne korisnike. Na kraju, kada se završi izrada mobilne verzije, potrebno je napraviti automatsko preusmeravanje korisnika veb aplikacije na mobilnu verziju koja im je prilagođena. [40]

Za automatsku detekciju mobilnih korisnika je moguće koristiti kreiranu vrlo složenu JSP klasu koja služi za utvrđivanje različitih mobilnih uređaja posebnih proizvođača i posebnih operativnih sistema. Za ovu svrhu se mogu koristiti i media upiti koji su podržani od strane CSS3, ali su oni primitivniji način za detekciju i nisu toliko precizni.

<%

String ua=request.getHeader("User-Agent").toLowerCase();

if(ua.matches("(?i).*((android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge|maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windowsce|xda|xiino).*")||ua.substring(0,4).matches("(?i)1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\ )|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-


51

w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\ )|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\|)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-")) {

response.sendRedirect("http://m.vebaplikacija.rs");

return;

}

%>

Listing 14: JSP klasa za utvrđivanje mobilnih uređaja [46]

Ova JSP klasa u listingu iznad služi za detekciju uređaja koji pristupaju veb aplikaciji, tako što čita i upoređuje podatke iz zaglavlja zahteva serveru, tačnije “User-Agent” podatke. Kada korisnik pokuša da pristupi veb aplikaciji, njegov pretraživač šalje podatke o sebi (tj. o korisniku) serveru, nudeći mu podatke o uređaju (proizvođač i model), operativnom sistemu, poziciji ekrana, itd. Upoređujući dobijene podatke iz poslatog zaglavlja, možemo saznati tačne podatke o korisniku koji pokušava da pristupi veb aplikaciji. Ova klasa sadrži podatke o različitim proizvođačima mobilnih uređaja, modela, i operativnih sistema. Ako JSP klasa utvrdi da korisnik veb aplikaciji pristupa sa mobilnog uređaja, biva automatski preusmeren na m.vebaplikacija.rs poddomen, prikazujući mu mobilnu verziju veb aplikacije.

5.3.2. Korišćenje tehnologije prilagodljivog veb dizajna - JSP

Ovaj način je druga mogućnost postizanja grafičke adaptibilnosti veb aplikacije. Kod ovog načina koristimo koncept prilagodljivog veb dizajna, koji podrazumeva korišćenje tehnologija koji obezbeđuju automatsko prilagođavanje sadržaja veb aplikacije određenom uređaju koji pristupa veb aplikaciji. Za postizanje prilagodljivosti koristimo media upite koji omogućavaju otkrivanje uređaja koji pristupa sadržaju, a onda automatski prilagođavamo sadržaj uređaju korišćenjem prilagođenih CSS stilova.

<link rel="stylesheet" media="screen and (min-width: 900px)" href="normal.css">

<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">

Listing 15: Uključivanje više različitih CSS stilova


52

Ovi CSS stilovi i media upiti su „in-line“ CSS pravila koja se ugrađuju u „head“ sekciju HTML koda na početnoj stranici veb aplikacije. Oni određuju detekciju širine ekrana, tj. vrstu uređaja koji pristupa veb aplikaciji. U zavisnosti od vrste uređaja se bira između dva ili više potpuno različita CSS stila koji se koriste za stilizovanje sadržaja. [40]

Pored ovog načina, možemo u veb aplikaciju uključiti jedan CSS stil i u okviru njega primenjivati različita pravila.

.menu { float: left; width: 20%; } .main { float: left; width: 60%; padding: 0 20px; overflow: hidden; } .right { background-color: lightblue; float: left; width: 20%; padding: 10px 15px; margin-top: 7px; } @media only screen and (max-width:800px) { /* For tablets: */ .main { width: 80%; padding: 0; } .right { width: 100%; } } @media only screen and (max-width:500px) { /* For mobile phones: */ .menu, .main, .right { width: 100%; } }

Listing 16: Primer jednog CSS fajla sa dodatnim media upitima

Za demonstraciju primera prilagodljivog veb dizajna JSP veb aplikacije sa korišćenjem media upita u okviru istog CSS fajla ćemo koristiti primer ispod.


53

Slika 32: Desktop verzija veb sadržaja

Za prilagođavanje sadržaja na mobilnim uređajima se koristi media upit koji podešava širinu kolona na 100%, ako je širina ekrana manja od 500px.

Slika 33: Prikaz sadržaja na mobilnim uređajima

Kod ovog načina postizanja grafičke adaptibilnosti veb aplikacija dovoljno je razviti samo jednu verziju iste veb aplikacije koja se automatski prilagođava uređajaju koji pristupa sadržaju. Prednost ovog načina je što je svaku buduću promenu dovoljno napraviti jednom. Činjenica je zbog nastanka mnogo popularnih i novih “okvira” (frameworks) za razvoj veb aplikacija kao što je Spring u slučaju Jave, JSP tehnologija sve manje u upotrebi. Neke od popularnih i velikih platformi danas, su nastale i koristile JSP tehnologiju dugo vremena, ali su je na kraju ipak prevazišle i prešli na modernije platforme. To je slučaj sa Amazon-om i Linkedin-om, koji su nastali na JSP platformi ali su prešli na novije platforme. [48] [49]


54

6. IMPLEMENTIRANO REŠENJE

6.1. Opis poslovnog konteksta

Primer poslovnog procesa koji je izabran za ilustrovanje primera implementacije je pretraga i tabelarni prikaz podataka za firme i preduzetnike. Na početnoj strani mobilne verzije veb aplikacije se nalaze tablerani prikazi novoosnovanih firmi u poslednjih 90 dana, kao i zatvorenih firmi u poslednjih 90 dana, i na kraju prikaz godišnjica firmi koje su otvorene na dan pregleda veb aplikacije a koje su i dalje aktivne.

Unapred unete firme i detaljni podaci o firmama, kao i povezanim licima – preduzetnicima se nalaze u bazi podataka i njih je moguće pretražiti i prikazivati. U osnovnoj verziji veb aplikacije, moguće je da administrator veb aplikacije evidentira novu firmu, a nakon evidentiranja firme se evidentira i preduzetnik, a podaci se upisuju u skladište podataka. Firma u spisak firmi, a preduzetnik u spisak preduzetnika. Korisnik veb aplikacije vrši pregled firme i preduzetnika i ima mogućnost prijave netačnosti podataka.

6.2. Cilj i opis korišćenih tehnologija za razvoj

Cilj je prikazati korišćenje veb aplikacije od strane korisnika, kao pregled i pretraga, filtriranje podataka i njihovo skladištenje u bazi podataka. Tehnologije korišćene u realizaciji primera su: MySQL baza podataka i PHP veb tehnologija.

Razvojni alati koji su korišćeni su XAMPP za server i podršku bazi podataka, Notepad++ kao editor i Power Designer za modele.

6.2.1. XAMPP

XAMPP je programski paket koji uključuje nekoliko tehnologija koje podržava. On je najpopularniji alat za razvoj PHP aplikacija, pošto obezbeđuje “Apache” server potreban za pokretanje PHP aplikacija. Dodatno, obezbeđuje “MariaDB” vrstu baze podataka, kao i Perl. XAMPP je u potpunosti besplatan i “open source”, i izuzetno je lak za korišćenje. [55]

XAMPP je nastao pre 10-ak godina i iza njega stoji ogromna zajednica ljudi koja ga svakodnevno unapređuju Dostupan je na svim popularnim platformama kao što su Windows, Linux i macOS. [55]

XAMPP koji je korišćen za razvoj ove veb aplikacije je verzija 3.2.2.


55

Slika 34: XAMPP programski alat

6.2.2. phpMyAdmin

phpMyAdmin je programsko rešenje napisano u PHP jeziku koje služi za administraciju MySQL baze podataka. Podržava izuzetno mnogo operacija koje se mogu izvršiti nad MySQL bazom podataka i MariaDB sistema. Operacije koje se najčešće koriste za upravljanje bazom podataka su upravljanje tabelama, kolonama, relacijama, indeksima, korisnicima koji pristupaju podacima, kao i dozvolama. Uz phpMyAdmin dolazi i obimna dokumentacija koju održava velika zajednica ljudi. [56]

Glavne odlike phpMyAdmin alata su [56]:

- Intuitivni korisnički interfejs - Karakteristike i operacije nad MySQL bazom podataka

o Kreiranje, izmenu i brisanje baza podataka, kolona, redova i indeksa o Održavanje servera i podešavanje njegove konfiguracije o Izvršavanje MySQL naredbi o Upravljanje MySQL korisničnim nalozima o Upravljanje stored procedurama i „okidačima“ (triggers)

- Uvoz podataka iz CSV i SQL formata - Izvoz podataka u CSV, SQL, XML i PDF format - Vizuelni prikaz relacija između tabela u bazi podataka


56

Slika 35: phpMyAdmin programski alat za upravljanje MySQL bazom podataka

6.2.3. Notepad++

Predstavlja izuzetno jednostavan i besplatan tekst editor koji podržava nekoliko programskih jezika i popularan je među programerima. Notepad++ je napisan u C++ jeziku i zbog toga je izuzetno kompaktan i brzo izvršava zadate operacije. Može da se koristi za pisanje HTML, CSS, JS, jQuey, PHP, Java programa, itd. Poslednja verzija je 7.5.8. [57]

Slika 36: Notepad++ programski alat


57

6.2.4. Power Designer

Power Designer predstavlja vodeći softverski alat za modelovanje podataka i modelovanje procesa raznoraznih sistema i podržava nekoliko tipova modela, kao i nekoliko programskih jezika. Power Designer je razvijen za Windows okruženje kao host aplikacija, koja za pluginove (dodatke) koristi Java platformu i programsko okruženje Eclipse. [59]

Vrste modelovanja koje podržava Power Designer su [58] [59]:

- Modelovanje poslovnih procesa (BPM – Business Process Modeling) - Modelovanje podataka - Modelovanje Data Warehouse - Eclipse programiranje - Objektno modeliranje (UML dijagrami) - Rad sa repozitorijumima - Generisanje izveštaja - Generaisanje XML šema - „Slobodni model“

Slika 37: Power Designer programski alat

6.3. Modeli

U ovom delu će biti prikazan business process model kojim se opisuje tok poslovnog procesa u veb aplikaciji. Na osnovu BPM je urađen i use case dijagram koji predstavlja raspoložive softverske funkcije veb aplikacije. Model baze podataka će biti prikazan kasnije, u odeljku opisa implementacije rešenja. Dodatni modeli koji su urađeni su dijagram komponenti, dijagram razmeštaja, kao i dijagram opisa procesa grafičkog prilagođavanja veb aplikacije.


58

6.3.1. Business Process Model

U biznis proces modelu su prikazani poslovni procesi rada veb aplikacije. U modelu su procesi grupisani u 3 grupe, i to „firma“, „korisnik veb aplikacije“ i „administrator veb aplikacije“. Ovaj model sadrži i 3 skladišta podataka, u koje se smeštaju podaci.

Slika 38: Biznis proces model

6.3.2. Use Case Model

U ovom modelu vidimo prikaz osnovnih funkcija i način korišćenja veb aplikacije i to koja grupa korisnika veb aplikacije ima koju ulogu, funkcije i zaduženja. Na slici su prikazane funkcije koje firme, korisnik i administrator mogu da izvode u toku korišćenja veb aplikacije.

Slika 39: Use case model


59

6.3.3. Dijagram komponenti

Ovaj model nam predstavlja osnovne elemente veb aplikacije i njihovu međusobnu zavisnost. Osnovna podela veb aplikacije se deli na korisnički deo gde korisnici vrše pregled i pretragu podataka i administratorski deo gde se vrši administracija.

Slika 40: Dijagram komponenti

6.3.4. Dijagram razmeštaja

Ovaj model nam prikazuje raspored softverskih komponenti po “čvorovima” – koji predstavljaju klijentsku aplikaciju i server gde se veb aplikacija nalazi, uključujući i bazu podataka. U okviru razvijene veb aplikacije postoji klijentska aplikacija, server veb aplikacije i server baze podataka.

Slika 41: Diagram razmeštaja


60

6.3.5. Dijagram opisa procesa grafičkog prilagođavanja veb aplikacije

Proces grafičkog prilagođavanja veb aplikacije može se prikazati uz pomoć različitih vrsta dijagrama. U ovom odeljku je odabran „Business process model“ (BPM) kao najpodesniji jer podržava koncept skladišta podataka/resursa podataka. Primenom BPM modela smo prikazali korake pokretanja veb aplikacije, detekcije mobilnog uređaja i prelaska na mobilnu verziju veb aplikacije, takođe mogućnost namernog vraćanja na desktop verziju veb aplikacije klikom na određeno dugme u mobilnoj verziji, radi potpunijeg prikaza i proširenih funkcionalnosti veb aplikacije u desktop verziji.

Slika 42: Biznis proces model grafičke adaptabilnosti veb aplikacije

Na slici iznad je prikazan proces grafičkog prolagođavanja veb aplikacije uređaju koju pristupa veb aplikaciji. Kao što je prikazano na slici 4. u teorijskom istraživanju, u okviru veb aplikacije senzorski deo programskog koda vrši detekciju uređaja koji pristupa veb aplikaciji i nakon izvršene detekcije uređaja, efektorski deo koda prikazuje odgovarajuću verziju veb aplikacije korisniku u odnosu na uređaj koji vrši pristup.

6.4. Korisničko uputstvo i eksperimentalna primena na različitim uređajima

Veb aplikacija „Privredni Vodič Bečeja“ koja se nalazi na domenu „becej.net“ razvijana je samo za desktop verziju i nije bila prilagodljiva mobilnim uređajima. Sa obzirom da je


61

veb aplikacija veoma kompleksna, bilo bi izuzetno teško naknadno je prilagođavati mobilnim uređajima. Zbog toga je kao primer u ovom radu razvijena dodatna mobilna verzija pomenute veb aplikacije koja prikazuje novosti o firmama na početnoj stranici, kao što se ta funkcionalnost nalazi i na desktop verziji, kao i da omogući funkcije pretrage firmi na osnovu 2 kriterijuma a to su naziv i PIB firme, zatim prikaz firmi, kao i pretraga i pregled preduzetnika. Mobilna verzija je prilagođena mobilnim telefonima, kao i tablet uređajima.

Nakon izrade mobilne verzije veb aplikacije, izvršen je eksperimentalni pregled veb aplikacije sa 3 vrste uređaja koji su dekstop računar, mobilni telefon i tablet uređaj. Kada se veb aplikaciji pristupa sa desktop ili laptop računara, posećuje se osnovna verzija veb aplikacije. Međutim, kada se veb aplikaciji pristupi sa mobilnog uređaja ili sa tablet uređaja, vrši se automatsko preusmeravanje na mobilnu verziju veb aplikacije.

Pristup veb aplikaciji se vršio sa desktop računara koji ima monitor veličine 24“ i rezoluciju ekrana 1920x1080px, sa mobilnog telefona veličine 5“ i rezolucije ekrana 1280x720px i tablet uređaja veličine 7“ i rezolucije ekrana 800x600px.

6.4.1. Desktop verzija veb aplikacije

Desktop verzija predstavlja najpotpuniju verziju veb aplikacije, koja podržava najviše funkcionalnosti. Ova verzija nije prilagodljiva mobilnim uređajima i razvijena je samo za desktop računare i laptop računare. Desktop verzija ima mogućnost prikaza reklami firmi, kao i korišćenje telefonskog imenika i malih oglasa koje postavljaju korisnici koji su registrovani. Eksperimentalni pregled se vrši sa monitora veličine ekrana 24“.

6.4.1.1. Početna stranica veb aplikacije desktop verzije

Slika 43: Početna stranica desktop verzija


62

Na početnoj stranici desktop verzije vidimo tabelu sa novoosnovanim firmama, zatvorenim firmama, godišnjice koje slave aktivne firme, kao i rođendane preduzetnika na dan pregleda veb aplikacije.

6.4.1.2. Pregled firme desktop verzije

Slika 44: Pregled firme desktop verzije

Kroz pretragu je moguće pregledati detaljne podatke o određenim firmama, kao što su PIB, matični broj, datum osnivanja, osobe koje su povezane sa firmom, brojeve tekućih računa firme u bankama, osnovne podatke o knjigovođama određene firme, itd.


63

6.4.1.3. Pretraga i pregled preduzetnika dekstop verzije

Slika 45: Pretraga preduzetnika

Slika 46: Pregled preduzetnika desktop verzije

Moguća je i pretraga i pregled preduzetnika koji se nalaze u bazi podataka. Sve postojeće firme imaju bar jednog preduzetnika vezanog za određenu firmu, a moguće je da postoji i više osoba vezanih za određenu firmu.


64

6.4.1.4. Kratak opis rezultata eksperimenta

Prilikom posete i pregleda veb aplikacije sa monitora, imamo pristup potpunoj desktop verziji i time i pristup svim razvijenim funkcijama veb aplikacije. Pregled se vrši na osnovnom domenu veb aplikacije, bez preusmeravanja korisnika i bez pružanja obaveštenja o drugoj, prilagodljivoj verziji veb aplikacije.

6.4.2. Mobilna verzija veb aplikacije – mobilni telefon

Mobilna verzija veb aplikacije je posebno razvijena za potrebe pregleda veb aplikacije sa mobilnih uređaja. Postoje dve vrste mobilne verzije veb aplikacije, jedna za mobilne telefone a druga za tablet uređaje. Preusmeravanje korisnika se vrši automatski uz pomoć PHP funkcije koja je detaljnije objašnjena u delu opisa implementacije.

U mobilnoj verziji veb aplikacije nije pokrivena funkcionalnost reklamiranja firmi, kao ni telefonski imenik ni mali oglasi. Dodatno, nisu u potpunosti realizovane funkcije registracije i prijave korisnika.

Eksperimentalni pregled se vrši sa mobilnog telefona veličine ekrana 5“.

6.4.2.1. Početna stranica mobilne verzije – mobilni telefon

Slika 47: Početna strana mobilne verzije – mobilni telefon


65

Slika 48: Početna strana mobilne verzije 2 – mobilni telefon

Na početnoj stranici mobilne verzije veb aplikacije, imamo pristup opcijama registracije i prijave, zatim pretrage podataka na osnovu 3 kriterijuma. Takođe, imamo tablarni prikaz novoosnovanih firmi, zatvorenih firmi, kao i godišnjice osnivanja određene firme.


66

6.4.2.2. Pretraga i pregled firme mobilne verzije – mobilni telefon

Slika 49: Pretraga na mobilnoj verziji – mobilni telefon

Pretraga na mobilnoj verziji podrazumeva pretragu firme na osnovu 2 kriterijuma, koja su naziv firme i PIB, a podržava i pretragu preduzetnika po imenu i prezimenu.


67

Slika 50: Pregled firme mobilne verzije – mobilni telefon

6.4.2.3. Pretraga i pregled preduzetnika mobilne verzije – mobilni telefon

Slika 51: Pretraga preduzetnika mobilne verzije – mobilni telefon


68

Slika 52: Pregled preduzetnika nakon pretrage – mobilni telefon

Nakon unetog imena ili prezimena, ili oba podatka, vrši se pretraga podataka i prikazuju se podaci o preduzetniku kao što su ime i prezime, broj mobilnog telefona i mesto boravka.


Prilikom posete veb aplikaciji na osnovnom domenu, još u toku slanja zahteva korisnika serveru se vrši detekcija uređaja i nakon utvrđivanja da je u pitanju mobilni telefon, vrši se automatsko preusmeravanje korisnika na mobilnu verziju veb aplikacije, na poddomenu, još na serverskoj strani. Na ovaj način se korisnik automatski preusmerava, i na vreme usmerava na mobilnu verziju veb aplikcije, i na taj način se štedi vreme i protok učitavanja obe verzije, kada bi bila kasnija a preusmeravanje bilo na klijentskoj strani.

6.4.3. Mobilna verzija veb aplikacije – tablet uređaj

Druga verzija mobilne verzije veb aplikacije predstavlja pregled za tablet uređaje, koja pruža malo više informacija od mobilne verzije za mobilne telefone. Na početnoj stranici, u tabeli je prikazano više kolona, 4 umesto 2 kao na mobilnoj verziji za mobilne telefone, a prikazju se i veća baner slika u „header“ delu veb aplikacije.

Eksperimentalni pregled se vrši sa tablet uređaja veličine ekrana 7“.


69

6.4.3.1. Početna stranica mobilne verzije – tablet uređaj

Slika 53: Početna strana mobilne verzije – tablet uređaj

Slika 54: Početna strana mobilne verzije 2 – tablet uređaj


70

6.4.3.2. Pretraga i pregled firme mobilne verzije – tablet uređaj

Slika 55: Pretraga na mobilnoj verziji – tablet uređaj

Slika 56: Pregled firme mobilne verzije – tablet uređaj

I kod mobilne tablet verzije postoji mogućnost pretrage podataka, takođe po 2 kriterijuma kao što su naziv firme i PIB firme, a preduzetnika je moguće pretražiti po imenu i prezimenu.


71

6.4.3.3. Pretraga preduzetnika mobilne verzije – tablet uređaj

Slika 57: Pretraga preduzetnika mobilne verzije – tablet uređaj

Slika 58: Pregled preduzetnika nakon pretrage – tablet uređaj

Nakon unetog imena ili prezimena, ili oba podatka, vrši se pretraga podataka i prikazuju se podaci o preduzetniku kao što su ime i prezime, broj mobilnog telefona i mesto boravka.


72


Prilikom posete veb aplikacije na osnovnom domenu, kao i u slučaju posete veb aplikaciji sa mobilnog telefona, vrši se detekcija uređaja i nakon utvrđivanja da je u pitanju tablet, vrši se automatsko preusmeravanje korisnika na mobilnu verziju veb aplikacije. Na ovaj način se korisnik automatski preusmerava i na vreme usmerava na mobilnu verziju veb aplikcije. Mobilna verzija za tablet uređaje je malo potpunija od mobilne verzije za mobilne telefone jer vrši prikaz više podataka u tablernim prikazima na početnoj strani.

6.5. Opis implementacije

6.5.1. Šema baze podataka i SQL skript za kreiranje baze podataka

U realizaciji ovog rada imamo jednu bazu podataka sa 6 tabela međusobno povezanih stranim ključevima.

Slika 59: Šema baze podataka (prozor „designer“)

CREATE TABLE àccess_levels` (

àccess_lvl` tinyint(4) NOT NULL,

àccess_name` varchar(100) CHARACTER SET utf8 NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

CREATE TABLE `firma` (


73

`PIB` int(9) NOT NULL,

`naziv` varchar(128) NOT NULL,

`sifrastatusa` char(1) DEFAULT NULL,

`sifravrste` char(2) DEFAULT NULL,

`maticni_broj` varchar(8) NOT NULL,

èppdv` int(11) DEFAULT NULL,

ìdmesta` int(5) NOT NULL,

àdresa` varchar(150) NOT NULL,

`post_fah` varchar(5) DEFAULT NULL,

`telefon` varchar(20) DEFAULT NULL,

`mobtel` varchar(20) DEFAULT NULL,

`telfax` varchar(20) DEFAULT NULL,

`web_adresa` varchar(50) DEFAULT NULL,

èmail` varchar(100) DEFAULT NULL,

`skype` varchar(50) DEFAULT NULL,

`PDV` varchar(9) DEFAULT NULL,

`stara_sifra_delatnosti` varchar(5) DEFAULT NULL,

`sifra_delatnosti` varchar(5) DEFAULT NULL,

`datum_otvar` date NOT NULL,

`datum_zatvar` date DEFAULT NULL,

`sifra_delatnosti2` varchar(5) DEFAULT NULL,

àgencijapib` int(9) DEFAULT NULL,

ùsername` varchar(15) NOT NULL,

`datumazur` date NOT NULL,

`zavrsenunos` varchar(2) DEFAULT 'NE',

`promene_id` varchar(3) DEFAULT NULL,

`vreme_pristupa_podatku` datetime DEFAULT NULL,

`vreme_poslednje_izmene` datetime DEFAULT NULL,

ìzlog` char(2) DEFAULT NULL

) ENGINE=MyISAM DEFAULT CHARSET=utf8;


74

CREATE TABLE `mesta` (


ìdopstine` int(10) UNSIGNED NOT NULL DEFAULT '0',

`mesto` varchar(100) CHARACTER SET utf8 DEFAULT NULL,

`matbrmesto` int(6) UNSIGNED DEFAULT NULL,

`pozbr` varchar(4) CHARACTER SET utf8 NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE òbjekti` (

òbjekat_id` int(11) NOT NULL,


`naziv` varchar(100) CHARACTER SET utf8 NOT NULL,


àdresa` varchar(255) CHARACTER SET utf8 NOT NULL,

ìd_preduzetnika` mediumint(20) DEFAULT NULL


CREATE TABLE òpstine` (

ìdopstine` bigint(20) UNSIGNED NOT NULL,

`postbropst` int(5) NOT NULL,

`nazivop` varchar(255) CHARACTER SET utf8 DEFAULT NULL,

`sifok` char(2) CHARACTER SET utf8 DEFAULT NULL,

`pozbr` varchar(4) CHARACTER SET utf8 NOT NULL,

`porbr` int(5) NOT NULL,

`socbr` int(5) DEFAULT NULL,

àdresa` varchar(255) CHARACTER SET utf8 NOT NULL,

`brojnas` int(3) NOT NULL,

`brojstanov` int(10) NOT NULL,

`regija` char(2) CHARACTER SET utf8 NOT NULL,

`predopst` varchar(100) CHARACTER SET utf8 NOT NULL,

`telpredopst` varchar(30) CHARACTER SET utf8 NOT NULL,


75

`predskup` varchar(100) CHARACTER SET utf8 NOT NULL,

`telpredskup` varchar(30) CHARACTER SET utf8 NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

CREATE TABLE `preduzetnik` (

ìd_preduzetnika` mediumint(20) UNSIGNED NOT NULL,


ìmeprezimepred` varchar(70) DEFAULT NULL,

àdresapred` varchar(100) DEFAULT NULL,

ìdmesta` int(5) DEFAULT NULL,

ùsername` varchar(16) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `statusfirme` (

`sifrastatusa` char(1) NOT NULL,

`nazivstatusa` varchar(50) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

CREATE TABLE ùser` (

ùser_id` int(11) NOT NULL,

ìd_preduzetnika` bigint(20) DEFAULT NULL,

ùsername` varchar(20) CHARACTER SET utf8 NOT NULL,

`passwd` varchar(40) CHARACTER SET utf8 NOT NULL,

àccess_lvl` tinyint(4) NOT NULL DEFAULT '1'


Listing 17: MySQL skript za kreiranje baze podataka

6.5.2. Delovi programskog koda sa objašnjenjem

6.5.2.1. Grafička adaptabilnost

Osnovna verzija veb aplikacije je desktop verzija, koja je prilagođena za desktop računare i laptop uređaje. Za mobilnu verziju veb aplikacije, koja podrazumeva prikaz za mobilne telefone i tablet uređaje, potrebno je posetiti mobilnu verziju veb aplikacije, koja se nalazi na poddomenu osnovne aplikacije, i to na “m.becej.net”. Radi što boljeg korisničkog iskustva, izvršeno je automatsko preusmeravanje korisnika na mobilnu verziju veb


76

aplikacije, ukoliko veb aplikaciji pristupaju sa mobilnih telefona ili tablet uređaja. To se postiže implementacijom PHP funkcije koja selektuje određene reči iz zahteva uređaja koji pristupa serveru, iz koga se vrši detekcija uređaja. Ukoliko se u zaglavlju zahteva klijenta nalaze ključne reči kao što su “iPhone”, “iPad”, “BlackBerry” ili “Android”, vrši se preusmeravanje na poddomen mobilne verzije veb aplikacije. Na ovaj način se vrši serverska detekcija uređaja koji pristupa sadržaju, i prilikom detekcije se ne uzima u obzir veličina ekrana uređaja, već operativni sistem, koji se podrazumeva da se pokreće na mobilnim uređajima (npr. Android).

6.5.2.1.1. Automatsko preusmeravanje korisnika na mobilnu verziju

Sa obzirom da prvobitno razvijena veb aplikacija nije prilagodljiva, zbog toga je razvijena posebna mobilna verzija veb aplikacije koja podrazumeva automatsko preusmeravanje korisnika na mobilnu verziju ukoliko veb aplikaciji pristupaju sa mobilnih uređaja.

Prelazak na mobilnu verziju veb aplikacije se vrši automatskim preusmeravanjem korisnika uz pomoć „strpos()“ PHP funkcije, koja čita zaglavlje HTTP zahteva korisnika koji pristupa veb aplikaciji. Ako se utvrdi da je korisnik pristupa veb aplikaciji sa mobilnog uređaja uz pomoć pronalaženja ključnih reči u zaglavlju pristupa kao što su „Android“, „iPhone“, „iPad“ ili „BlackBerry“, automatski se preusmerava na mobilnu verziju veb aplikacije na „m.becej.net“ poddomenu.

$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"); $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android"); $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry"); $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPad"); if ($iphone || $android || $ipad || $berry == true) { header('Location: http://m.becej.net/'); //OR echo "<script>window.location='http://m.becej.net'</script>"; }

Listing 18: PHP funkcija „strpos()“

Ukoliko se u zaglavlju zahteva za pristup veb aplikaciji nalazi neka od navedenih ključnih reči, podrazumeva se da uređaj pokreće operativni sistem namenjen mobilnim uređajima i vrši se preusmeravanje na poddomen mobilne verzije veb aplikacije.

6.5.2.1.2. Tehnika prilagodljivog veb dizajna – media upiti

Da bi se postigla bolja grafička adaptabilnost veb aplikacije, prilagođena su dva prikaza za mobilne uređaje. Jedan predstavlja prikaz za mobilne telefone, dok drugi za tablet uređaje. Kod tablet uređaja imamo širi prikaz na ekranu, pa se u tabelama na početnoj stranici nalazi više podataka (4 kolone) nego u prikazu na mobilnim telefonima (2 kolone).


77

Promenu između dva prikaza na mobilnim uređajima nam omogućavaju media upiti. Kolone u tabeli na početnoj stranici veb aplikacije su označene određenim klasama, koje uz pomoć media upita sakrivamo ako je u pitanju ekran manji od 480 px, ili prikazujemo ako je širina prikaza veća od 481 px. Razliku između ova dva prikaza možemo videti na slikama ispod.

@media screen and (min-width:481px) {

.mobile {

display:none;

}

.tablet {

max-width: 100%;

} }

@media screen and (max-width:480px) {

.tablet {

display:none;

}

.mobile {

max-width: 100%;

}

} Listing 19: Media upit za dodatne kolone

<div style="overflow-x:auto;" class="w3-row-padding">

<center><h2>Nove firme</h2></center>

<table class="pocetna">

<tr>

<th class="tablet">PIB</th>

<th>Naziv</th>

<th class="tablet">Mesto</th>

<th>Datum</th> </tr>

Listing 20: Kolone određene klasama u tabeli


78

Slika 60: Prikaz tabele na mobilnim telefonima

Slika 61: Prikaz tabele na tablet uređajima

6.5.2.1.3. Tehnika prilagodljivog veb dizajna – fleksibilne slike

U cilju što bolje grafičke adaptabilnosti na mobilnim uređajima, postavljene su dve različite slike banera na vrhu stranice (u header-u), koje se u zavinosti od uređaja menjaju. Manja verzija slike se prikazuje na mobilnim telefonima, dok se veća verzija slike banera prikazuje na većim ekranima, tj. tablet uređajima.


79

Ovo se postiže kombinacijom media upita i različitim verzijama iste slike koje se u zavinosti od vrste uređaja menjaju, i time se postižu tzv. „fleksibilne slike“ za što bolji prikaz sadržaja na mobilnim uređajima.

@media screen and (min-width:481px) { .mobile { display:none; } .tablet { max-width: 100%; } } @media screen and (max-width:480px) { .tablet { display:none; } .mobile { max-width: 100%; } }

Listing 21: Media upit za promenu slike

<a href="/">

<img class="mobile" src="images/header.jpg" />

<img class="tablet" src="images/tablet_header.png" />

</a>

Listing 22: Dve verzije slike određene klasama

Prikaze različitih slika u zavinosti od vrste uređaja preko kojih se pristupa veb aplikaciji, možemo videti na slikama ispod.


80

Slika 62: Slika banera na mobilnim telefonima

Slika 63: Slika banera na tablet uređajima

6.5.2.1.4. Tehnika prilagodljivog veb dizajna – prilagodljiva tipografija

Radi što bolje grafičke adaptibilnosti i prikaza teksta u veb aplikaciji, koristi se kombinacija procentualnog izražavanja veličine fonta i media upita. Izražavanje u veličinama „em“ predstavlja način izražavanja u procentima, koji predstavlja povećanje ili smanjenje podrazumevajućih veličina fonta. Uz pomoć media upita jasnije definišemo željenu veličinu fonta u odnosu na vrstu uređaja na kojoj se prikazuje sadržaj, i na taj način je moguće povećati veličinu fonta na tablet uređajima, koji su veći od mobilnih telefona. Na primer, u slučaju kada je ekran na kome se sadržaj prikazuje manji od 480 px (mobilni telefoni), sadržaj u tabeli će imati veličinu fonta 1,5 em, dok će na uređajima koji su veći od 481 px (tablet uređaji), veličina fonta će biti 1,9 em.


81

@media screen and (min-width:481px) { .pocetna { font-size: 1.9em; } button { font-size: 2em!important; } .dropdown-content { font-size: 2em!important; } } @media screen and (max-width:480px) { .pocetna { font-size: 1.5em; } button { font-size: 1.5em; } .dropdown-content { font-size: 1.5em; } }

Listing 23: Media upti za promenu veličine fonta

6.5.2.2. Ostale funkcionalnosti veb aplikacije

6.5.2.2.1. Prikaz novih firmi

Na početnoj stranici veb aplikacije se u tabeli prikazuju nove firme, koje su otvorile firmu u poslednjih 3 meseca. Filtriranje podataka se vrši MySQL upitom, koji proverava podatke u bazi sa datumom otvaranja firme koji nije manji od 90 dana od dana pristupa veb aplikaciji. Tabela u kojoj se nalaze podaci o firmi i nad kojom vršimo SQL upit je „firma“.

$sql = "SELECT firma.PIB, firma.naziv, firma.maticni_broj, firma.idmesta, mesta.mesto, firma.adresa, firma.telefon, firma.datum_otvar FROM (mesta INNER JOIN firma ON mesta.idmesta = firma.idmesta) WHERE DATEDIFF(NOW(),datum_otvar)<=90 AND mesta.idopstine=80110 ORDER BY datum_otvar DESC LIMIT 0,50"; $result = $con1->query($sql); $num_rows=mysqli_num_rows($result); if ($num_rows==0) { echo "<br><strong>Nema novoosnovanih firmi u zadnjih 90 dana</strong><br>"; }


82

else { while($line = mysqli_fetch_array($result)) { $string = $line['naziv']; $string = substr($string,0,20); $datumotvaranja=KonverzijaDatum($line['datum_otvar']); { echo "<tr><td>$string</td>"; echo "<td>$datumotvaranja</td></tr>"; } } }

Listing 24: SQL upit za prikaz novih firmi

6.5.2.2.2. Prikaz zatvorenih firmi

Na početnoj stranici veb aplikacije, ispod tabele sa novootvorenim firmama se nalazi i tabela sa firmama koje su zatvorene u poslednjih 3 meseca. Filtriranje podataka se vrši SQL upitom, koji proverava podatke u bazi, tako da razlika između datuma zatvaranja firme i dana pristupa veb aplikaciji nije veća od 90 dana. Tabela u kojoj se nalaze podaci o firmi i nad kojom vršimo SQL upit je „firma“.

$sql = "SELECT firma.PIB, firma.naziv, firma.idmesta, mesta.mesto, firma.adresa, firma.telefon, firma.mobtel, firma.datum_zatvar FROM (mesta INNER JOIN firma ON mesta.idmesta = firma.idmesta) WHERE (TO_DAYS(NOW()) - TO_DAYS(firma.datum_zatvar))<=90 AND mesta.idopstine=80110 ORDER BY datum_zatvar DESC"; $result = $con1->query($sql); $num_rows=mysqli_num_rows($result); if ($num_rows==0) { echo "<br><strong>Nema zatvorenih firmi u zadnjih 90 dana</strong><br>";} else { while($line = mysqli_fetch_array($result)) { $string = $line['naziv']; $string = substr($string,0,20); $datumzatvaranja=KonverzijaDatum($line['datum_zatvar']); { echo "<tr><td>$string</td>"; echo "<td>$datumzatvaranja</td></tr>"; } } }

Listing 25: SQL upit za prikaz zatvorenih firmi


83

6.5.2.2.3. Pretraga firmi

Tabela u kojoj su smešteni podaci o firmi i nad kojom se vrši SQL upit se zove „firma“. Pretraga firmi se vrši na osnovu 2 kriterijuma, a to su PIB i naziv firme. SQL upit za pretragu po kriterijumu naziva firme je sličan kao i za pretragu po PIB-u, sa tim da umesto „WHERE firma.PIB LIKE '$search_text%'“ za pretragu prema PIB-u, koristimo „WHERE firma.naziv LIKE '%$search_text%'“ za pretragu prema nazivu firme. Minimalan broj karaktera za vršenje pretrage je 3.

$search_text = $_GET['search_text'];

$sql = "SELECT firma.PIB, firma.naziv, firma.idmesta, mesta.mesto, firma.telefon, firma.mobtel, firma.sifrastatusa, statusfirme.nazivstatusa FROM (mesta INNER JOIN firma ON mesta.idmesta = firma.idmesta) INNER JOIN statusfirme ON statusfirme.sifrastatusa=firma.sifrastatusa WHERE firma.PIB LIKE '$search_text%' ORDER BY firma.naziv";

Listing 26: SQL upit za vršenje pretrage firmi

6.5.2.2.4. Pretraga preduzetnika

Tabela u kojoj su smešteni podaci o preduzetniku i nad kojom se vrši SQL upit se zove „preduzetnik“. Pretraga preduzetnika se vrši na osnovu unosa prezimena i imena preduzetnika, ili samo prezimena ili samo imena. Minimalan broj karaktera za vršenje pretrage je 3.

$search_text = $_GET['search_text'];

$sql = "SELECT preduzetnik.imeprezimepred, preduzetnik.id_preduzetnika, preduzetnik.idmesta, mesta.mesto FROM preduzetnik INNER JOIN mesta ON preduzetnik.idmesta=mesta.idmesta WHERE preduzetnik.imeprezimepred LIKE '%$search_text%' ORDER BY preduzetnik.imeprezimepred";

Listing 27: SQL upit za pretragu preduzetnika


84

7. ZAKLJUČAK

U ovom radu predmet istraživanja bio je predstavljanje različitih tehnika programiranja kojima se postiže grafička adaptabilnost veb aplikacija, u odnosu na različite uređaje na kojima će se sadržaj prikazivati. Cilj istraživanja bio je teorijsko istraživanje tehnika i metoda grafičke adaptabilnosti veb aplikacija za prikaz na različitim uređajima, zavisno od tehnologije razvoja veb aplikacija, kao i istraživanje postojećih stručnih i naučnih rešenja u oblasti. Navedene su i objašnjene konkretne tehnike i tehnologije razvoja prilagodljivog veb dizajna i postizanja grafičke adaptabilnosti veb aplikacija.

Osnovna hipoteza je potvrđena kroz rezultate kojima su potvrđene podhipoteze. Prva podhipoteza dokazana je realizacijom primera veb aplikacije koja uključuje primenu tehnologija prilagodljivog veb dizajna kojim se omogućava da se mobilna verzija veb aplikacije prikazuje na mobilnim uređajima. Eksperimentalno je razvijena veb aplikacija testirana na mobilnom telefonu i tablet uređaju. Druga podhipoteza dokazana je u poglavlju 5. kroz analizu različitih tehnologija razvoja veb aplikacije sa aspekta podrške prilagodljivom veb dizajnu. Analizirane su najčešće koriscene tehnologije ASP.NET, PHP i JSP. Treća podhipoteza potvrđena je empirijski u okviru izrađene veb aplikacije, gde je realizovano detektovanje tipa uređaja i preusmeravanje aplikacije na mobilnu verziju. Posebno je značajno da je pored grafičkog prilagođavanja, implementirano i prilagođavanje koje obuhvata prikaz podataka na različitim uređajima.

Dalja istraživanja koja se odnose na grafičku adaptibilnost veb aplikacija bi se mogla odnositi na nove načine detekcije uređaja i nove koncepte prilagodljivog veb dizajna. U daljem razvoju aplikacije bi se mogle završiti sve predviđene funkcionalnosti, a mogle bi se proširiti i dodatne funkcije. Nisu realizovane funkcije registracije i prijave korisnika na mobilnoj verziji veb aplikacije, vršenje izmene podataka firmi i preduzetnika, kao ni štampa prikazanih podataka kao ni brisanje podataka. Takođe, nije implementirana ni mogućnost prelaska sa mobilne verzije veb aplikacije na desktop verziju koja je funkcionalno bogatija.


85

8. LITERATURA

[5] Rajesh A. N, Responsive Web Design, International Journal of Engineering and Computer Science: 2015;4:3

[6] Harb E, Kapellari P, Luong S, Spot N. Responsive Web Design, Online Knjiga, 2011;13-24 Dostupno na: https://courses.isds.tugraz.at/iaweb/surveys/ws2011/g3-survey-resp-web-design.pdf

[10] Lestari M. D, Hardianto D, Hidayanto N. A, Analysis of User Experience Quality on Responsive Web Design from its Informative Perspective, International Journal of Software Engineering and Its Applications: 2014;5:8

[13] Gardner B. S, Responsive Web Design: Enriching the User Experience, Sigma Publication, Noblis: 2011:15-16

[15] Baturay H. M, Murat B, Responsive Web Design: A New Type of Design for Web-based Instructional Content, Procedia Social and Behavioral Sciences Journal, 2013;106:2275-2279

[18] Kolhe P., Khetri G., Deshmukh N. K., Study of Standard Assumptions of Graphical User Interface (GUI) Based on Usability, Adaptability and Security Factors, International Journal of Emerging Research in Management &Technology, 2013;92-93

[19] Shklar L.,Rosen R.,Web Application Architecture,John Wiley & Sons Ltd,2003:4-6

[24] Oppermann R., Adaptive User Support: Ergonomic Design of Manually and Automatically Adaptable Software, 2009 . Dostupno na: https://www.taylorfrancis.com/books/e/9781351468923

[25] Paterno F., The Encyclopedia of Human-Computer Interaction, The Encyclopedia of Human-Computer Interaction, 2nd Ed., Interaction Design Foundation, 2013. Dostupno na: https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/user-interface-design-adaptation

[36] Subić N., Krunić T., Gemović B., Responsive web design – Are we ready for the new age, Online Journal of Applied Knowledge Management, 2014;2:1:94-97

[50] Frain B., Responsive Web Design with HTML5 and CSS 3, Packt Publishing, 2012.

[51] Spurlock J., Bootstrap, O’Relly Media, 2013.

[59] Janosevic V., Pantelic O., Becejski-Vujaklija D., Sybase Power Designer 12 (skripta), Univerzitet u Beogradu, Fakultet Organizacionih Nauka. Dostupno na: http://poslis.fon.rs/download/vezbe/PD%20Skripta.pdf


86

[63] Šoti F., „Uvod u kibernetiku“, Radnički univerzitet „Radivoj Ćirpanov“, Novi Sad, 1978.

[64] Alleman G. B., „Is There an Underlying Theory of Software Project Management?“, A Work in Progress, Version 4.0, 1.30.04 Dostupno na: http://niwotridge.com/PDFs/ProjectManagementTheory.pdf

[65] Pathak S.D., Day J.M., Nair A., Sawaya W.J., Kristal M.M., „Complexity and Adaptivity in Supply Networks“, Decision Sciences, Volume 38 Number 4, 2007.

[66] David P.C., Ledoux T., „An Aspect-Oriented Approach for Developing Self-Adaptive Fractal Components“, International Conference on Software Composition, 2006:82-97

[67] Zhang J., Cheng B.H.C., „Model-Based Development of Dynamically Adaptive Software“, ICSE06, Shanghai, China, 2006

[68] Zhang J., Cheng B.H.C., „Specifying Adaptation Semantics“, ICSE05, St. Luis, Missouri, 2005.

[69] Houben G. J., „Challenges in Adaptive Web Information Systems: Do Not Forget the Link“, ICWE2004, 2005:3-11

[70] Salehie M., Tahvildari L., „Self-Adaptive Software: Landscape and Research Challenges“, ACM TAAS Journal, 2009:4:2

Korišćeni veb sajtovi

[1] https://www.raf.edu.rs/citaliste/internet/3623-istorijski-razvoj-interneta-i-racunarskih-mreza 8.5.2018.

[2] https://www.popwebdesign.net/popart_blog/2012/12/responsive-web-dizajn/ 9.5.2018.

[3] https://racunarstvoiinformatika.wordpress.com/2012/04/01/staticki-i-dinamicki-veb-najcesce-veb-tehnologije-portali/ 9.5.2018.

[4] http://sr.magma.rs/blog/web-dizajn/dinamicki-web-sajt 9.5.2018.

[7] https://www.phonearena.com/news/For-the-first-time-more-people-are-using-their-mobile-devices-more-than-desktop-to-access-the-Internet_id87330 9.5.2018.

[9] https://developers.google.com/web/fundamentals/design-and-ux/responsive/ 10.5.2018.

[11] https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html 10.5.2018.


87

[14] https://sites.google.com/site/sigurnostizastitanainternetu/sigurnost-na-internetu 14.05.2018.

[20] https://www.computerhope.com/jargon/w/website.htm 2.7.2018.

[21] https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines 2.7.2018.

[22] https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps 2.7.2018.

[23] https://www.linkedin.com/pulse/importance-web-applications-businesses-sayed-jasi 2.7.2018.

[27] https://www.w3.org/WAI/intro/indieui 10.7.2018.

[28] https://deviceatlas.com/blog/device-description-repository 11.7.2018.

[31] https://getbootstrap.com/docs/4.1/getting-started/introduction/ 13.7.2018.

[32] https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 14.7.2018.

[34] https://www.w3schools.com/Css/css_font.asp 14.7.2018.

[35] https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic 14.7.2018.

[37] https://msdn.microsoft.com/en-us/magazine/mt147241.aspx 20.7.2018.

[38] http://php.net/manual/en/history.php.php 20.7.2018.

[39] https://www.yourwebskills.com/firstphp.php 20.7.2018.

[40] https://www.developer.com/ws/creating-a-mobile-friendly-website.html 23.7.2018.

[41] https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_page 23.7.2018.

[42] https://www.tutorialspoint.com/jsp/jsp_overview.htm 24.7.2018.

[43] https://www.tutorialspoint.com/jsp/jsp_architecture.htm 24.7.2018.

[44] https://www.journaldev.com/2021/jsp-example-tutorial-for-beginners 25.7.2018.

[45] https://www.javaworld.com/article/2076557/java-web-development/understanding-javaserver-pages-model-2-architecture.html 25.7.2018.

[46] http://detectmobilebrowsers.com/download/jsp 25.7.2018.

[47] http://www.kupujemprodajem.com/ 25.7.2018.

[48] https://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates 26.7.2018.


88

[49] https://www.quora.com/Are-there-any-popular-web-sites-e-g-Google-Twitter-Facebook-Guardian-using-plain-Java-Servlet-JSP 26.7.2018

[53] https://developers.google.com/search/mobile-sites/mobile-seo/dynamic-serving 27.7.2018.

[54] https://www.stonetemple.com/mobile-vs-desktop-usage-study/ 27.7.2018.

[55] https://www.apachefriends.org/index.html 3.8.2018.

[56] https://www.phpmyadmin.net/ 3.8.2018.

[57] https://notepad-plus-plus.org/ 3.8.2018.

[58]http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.infocenter.dc00844.1252/html/pbug/CACCCJHE.htm 3.8.2018.

[62] https://www.interaction-design.org/literature/topics/human-computer-interaction 28.08.2018.

Korišćene slike

[8] https://www.emailmonday.com/mobile-email-usage-statistics/ 9.5.2018.

[12] http://www.mrnwebdesigns.com/important-mobile-responsive-website/ 10.5.2018.

[16] https://alb.host.cs.st-andrews.ac.uk/webdatabases/Assets/querydatabase.JPG 25.6.2018.

[17] http://doeltech.com/images/website-static.png 25.6.2018.

[26] https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/user-interface-design-adaptation 11.7.2018.

[29] https://www.joomla-monster.com/documentation/template-tutorials/how-to-understand-bootstrap-grid-system 13.7.2018.

[30] https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp 13.7.2018.

[33] https://www.w3schools.com/css/css3_mediaqueries_ex.asp 14.7.2018.

[71] https://programacionulatina1997.wordpress.com/2016/10/05/diferencias-de-una-pagina-pagina-web-estatica-y-dinamica/ 3.9.2018.

[72] https://alb.host.cs.st-andrews.ac.uk/webdatabases/dsn.htm 3.9.2018.

Slike koje nisu referencirane su delo autora realizovano za potrebe ovog master rada

Documents

MASTER RAD - tfzr.rs Dzigurski - Master rad_PDF_final.pdf · grafič ke adaptibilnosti veb aplikacija, razjašnjena je razlika između statičnih veb sajtova i dinamičkih veb aplikacija,