U N I V E R Z I T E T U B E O G R A D U

F A K U L T E T O R G A N I Z A C I O N I H

N A U K A

Z A V R Š N I R A D

REALIZACIJA KORISNIČKOG INTERFEJSA WEB APLIKACIJE

MENTOR

Prof. Dr Božidar

Radenković

KANDIDAT

Veselin Ostojin340/93

Beograd, maj 2007. godine

2

3

Sadržaj

Sadržaj ......................................................................................... 4

1. Korisnički interfejs .................................................................. 6

1.1. Pojam korisničkog interfejsa ............................................ 6

1.2. Usability („upotrebljivost“) korisničkog interfejsa ......... 6

1.3. Vrste korisničkog interfejsa ............................................. 8

1.4. Grafički korisnički intefejs ................................................ 9

1.4.1. Dizajn grafičkog korisničkog interfejsa kao deo

aplikacije .............................................................................. 11

2. Web aplikacija ....................................................................... 12

2.1. Web browser .................................................................... 13

2.2. Web stranica ................................................................... 13

2.2.1. HTML, JavaScript i CSS ............................................. 14

2.3. Troslojna arhitektura web aplikacije .............................. 20

2.4. Microsoft .NET platforma ................................................ 23

2.5. ASP.NET ............................................................................ 25

2.6. ADO.NET .......................................................................... 26

2.7. SQL Server ....................................................................... 27

3. Korisnički interfejs Web aplikacije ....................................... 28

3.1. Elementi korisničkog interfejsa ..................................... 28

3.2. Dizajn ............................................................................... 31

3.2.1 Tipografija ............................................................... 32

3.2.2 Layout ..................................................................... 33

3.3. Interaktivnost .................................................................. 35

3.4. Usability i Accessibility ................................................... 35

3.5. Korisničko iskustvo ......................................................... 36

4

4. Realizacija korisničkog interfejsa u Microsoft .NET

okruženju ................................................................................... 37

4.1. Korisnički zahtevi ............................................................ 38

4.1.1. Rad sa matičnim podacima: .................................... 38

4.1.2. Rad sa nastavnicima: ............................................... 39

4.1.3. Rad sa studentima: ................................................... 40

4.1.4. Rad sa finansijama: .................................................. 40

4.1.5. Primer slučaja korišćenja ......................................... 40

4.2. Projektovanje Ekranske forme ....................................... 46

5. Zaključak ............................................................................... 53

6. Literatura ............................................................................... 55

7. Prilog ...................................................................................... 56

5

1. Korisnički interfejs

Korisnički interfejs (User Interface, UI) predstavlja skup

načina na koje ljudi, tj. korisnici ostvaruju interakciju sa

određenom mašinom, uređajem, računarskim programom ili

drugim složenim alatom, tj. sistemom1. Korisnički interfejs

obezbeđuje način za:

• Input, omogućavajući korisnicima da vrše manipulaciju

nad sistemom

• Output, omogućavajući sistemu da proizvede efekte

manipulacije koju je izvršio korisnik.

1.1. Pojam korisničkog interfejsa

Da bi radili sa sistemom, korisnicima je potrebna mogućnost

da kontrolišu sistem i da odrede stanje sistema. Na primer,

prilikom vožnje automobila, vozač koristi volan da bi

kontrolisao pravac kretanja vozila, pedale za gas i kočnicu i

menjač da bi kontrolisao brzinu vozila. Vozač određuje

poziciju vozila gledajući kroz vetrobrane, a tačnu brzinu

kretanja očitavajući brzinomer. Korisnički interfejs

automobila je u celosti sastavljen od instrumenata koje vozač

može da koristi kako bi uspešno koristio automobil za vožnju.

Termin korisnički interfejs se najčešće koristi u kontekstu

računarskih sistema i električnih uređaja.

1.2. Usability („upotrebljivost“) korisničkog

interfejsa

Dizajn korisničkog interfejsa utiče na količinu truda koju

korisnik mora uložiti da bi obezbedio input u sistem i time

vršio manipulaciju nad sistemom, da bi interpretirao output

sistema i da bi naučio kako da koristi sistem. Usability

predstavlja efikasnost kojom korisnik može obaviti određeni

1 Wikipedia, the free encyclopedia, http://www.wikipedia.org/ , “User Interface”

6

zadatak u sistemu kao i lakoću upotrebe sistema, odnosno

jednostavnost vršenja inputa i interpretiranja outputa

sistema.

Usability je najčešće karakteristika samog korisničkog

interfejsa, mada može biti i u vezi sa funkcionalnošću

proizvoda. Time se opisuje koliko je proizvod upotrebljiv za

svrhu kojoj je namenjen od strane predviđenih korisnika i

koliko njegova upotreba obezbeđuje efikasnost, efektivnost i

zadovoljstvo korisnika prilikom upotrebe proizvoda. Sve ove

karakteristike nisu uvek deo korisničkog interfejsa, ali su

ključni elementi za upotrebljivost nekog proizvoda.

Aspekti interakcije ljudi i računara (Human Computer

Interaction, HCI) su obuhvaćeni standardom ISO 9241 kojim

su precizirani pravi ciljevi te interakcije: delotvornost,

efikasnost i zadovoljstvo. Ostvarenje ovih ciljeva se može

utvrditi sledećim merilima2:

• Trajanje obuke – koliko je vremena potrebno tipičnim

pripadnicima neke grupe korisnika da nauče da korste

komande koje su relevantne za neki skup zadataka.

• Brzina rada – koliko je vremena potrebno za

izvršavanje reprezentativnih zadataka.

• Učestalost grešaka korisnika – koliko često korisnici

greše prilikom reprezentativnih zadataka i o kakvim je

greškama reč. Iako same greške i njihovo ispravljanje

mogu da se uračunaju u brzinu rada, način na koji se

greške rešavaju je toliko značajna komponenta

interfejsa da joj treba posvetiti posebnu pažnju.

• Zadržavanje usvojenih znanja – u kojoj meri su

korisnici u stanju da zadrže stečena znanja nakon isteka

određenog perioda – sata, dana ili nedelje. Zadržavanje

2 Ben Shneiderman i Catherine Plaisant, Dizajniranje korisničkog interfejsa (Beograd: FAR i CET, 2006), str. 16

7

znanja može biti u tesnoj vezi sa vremenom trajenja

obuke, a učestalost korišćenja tu takođe predstavlja

važan faktor.

• Subjektivno zadovoljstvo – koliko se korisnicima

sviđaju pojedini aspekti interfejsa. Odgovor na ovo

pitanje može se dobiti putem intervjua ili detaljnih

istraživanja u kojima postoje skale ličnog zadovoljstva i

prostor za komentare korisnika.

1.3. Vrste korisničkog interfejsa

U računarstvu korinički interfejs računarskog programa

predstavlja grafičke, tekstualne ili zvučne poruke, tj.

informacije koje program prezentuje korisniku i kontrolne

sekvence (kao što su pritisci tastera na tastaturi, pomeranje

miša ili označavanje po ekranu osetljivom na dodir) koje

korisnik sprovodi kako bi kontrolisao program.

Prema načinu kako korisnik zadaje komande sistemu i kako

sistem odgovara na te komande, srećemo više vrsta

korisničkih interfejsa, najčešće su to:

• Grafički korisnički interfejs (GUI) – prima input preko

uređaja kao što su tastatura i miš i obezbeđuje uređen i

povezan output na monitoru.

• Web-bazirani korisnički interfejs – prima input i

obezbeđuje output generisanjem web strana koje se

transportuju internetom i gledaju uz pomoć programa

za pregled sadržaja – web browsera. Novije

implementacije koriste razne klijent i server tehnologije

kao što su AJAX, Microsoft.NET, Java, PHP i slično, da bi

omogućile kontrolu u realnom vremenu i time

eliminisale potrebu za ponovnim učitavanjem sadržaja i

osvežavanjem koji su karakteristični za tradicionalne

HTML bazirane web browsere.

8

• Command-line interfejs – korisnik upisuje komande

koristeći tastaturu a sistem odgovara ispisujući

tekstualne poruke na monitoru. Najčešće se koristi

prilikom adminstracije sistema i sličnih zadataka.

• Touch interfejs – grafički korisnički interfejs koji koristi

ekran osetljiv na dodir i time kombinuje input i output

uređaj u jednom. Najčešće se koristi u mašinama za

industrijsku proizvodnju ili u bankomatima itd.

1.4. Grafički korisnički intefejs

Grafički korisnički interfejs korisniku omogućava interakciju

sa računarskim sistemom putem grafičkih prikaza, posebnih

grafičkih elemenata kao što su okviri, prozori, meniji,

dugmad i slično, zajedno sa tekstom da bi se korisniku

predstavile informacije i akcije koje su mu na raspolaganju.

Korisnik obično sprovodi akcije direktnom manipulacijom

datih grafičkih elemenata.Evolucija grafičkog korisničkog

interfejsa

Preteču grafičkog

korisničkog interfejsa su

otkrili istraživači na

Stanford Research

institutu, pod vođstvom

Douga Engelbarta. Oni

su razvili tekstualno-

bazirane hiperveze

kojima se upravlja

pomoću miša. Kasnije

su istraživači u Xerox

PARC (Palo Alto

Research Center)

istraživačkom centru

koncept hiperveza

usavršili i proširili na

grafičke elemente i

9

Ilustracija 1 Xerox Alto računar, preteča računara sa grafičkim korisničkim interfejsom

time stvorili grafički korisnički interfejs kao osnovni korisnički

interfejs za Xerox Alto računar. Skoro svi moderni grafički

korisnički interfejsi opšte namene, vode poreklo od tog

sistema. Ovakav grafički korisnički interfejs se sastoji od

posebnih grafičkih elemenata koji imaju svoju prepoznatljivu

grafičku prezentaciju i definisano ponašanje. Ti elementi su

prozori, meniji, komandni tasteri (buttons), radio dugmad,

check box, ikone itd. Pored tastature prilikom interakcije

korisnika i sistema koristi se i računarski miš kao pokazni

uređaj.

Najpoznatiji grafički korisnički interfejsi su oni korišćeni u

modernim operativnim sistemima kao što su Windows, Mac

OS X ili X Window System. Primena grafičkih korisničkih

interfejsa potiče iz Xerox PARC istraživačkog centra tokom

sedamdesetih godina 20 veka. Te ideje i koncepte preuzela je

kompanija Apple i koristila ih u svom prvom Macintosh

računaru. Kasnije su IBM i Microsoft preuzeli mnoge ideje od

Apple-a i razvili Common User Access specifikaciju, koja je

osnova koriničkog interfejsa koji je u upotrebi u Windows i

OS/2 operativnim sistemima, kao i Unix Motif sistemu za

korisnički interfejs. Ove ideje su dalje usavršavane i dovele

su do pojave modernih grafičkih korisničkih interfejsa koji su

u primeni u modernim

verzijama operativnih

sistema Windows, Mac

OS X i raznih Unix

baziranih ili GNU/Linux

računarskih sistema.

Tako skoro svi moderni

grafički korisnički

interfejsi u velikoj meri

imaju zajedničke

elemente slične funkcije

i vizuelnih karakteristika. Razlike među modernim grafičkim

operativnim sistemima na nivou dizajna korisničkog interfejsa

se mogu prevazići uz mogućnost podešavanja korisničkih

10

Ilustracija 2 Prozor sa prikazom stabla foldera i fajlovima u Windows-u XP - primer modernog korisničkog interfejsa

opcija, kojima se može dobiti izgled elemenata korisničkog

interfejsa koji emulira neki drugi sistem.

1.4.1. Dizajn grafičkog korisničkog interfejsa kao deo

aplikacije

Dizajn grafičkog korisničkog interfejsa predstavlja važnu

odrednicu u programiranju aplikacije. Zadatak ove discipline

je da poveća upotrebljivost programa i njegovu

funkcionalnost. Vidljivi elementi grafičkog korisničkog

interfejsa predstavljaju „lice“ aplikacije. Tu spadaju grafički

elementi koji se koriste za interakciju sa programom. Najčešći

elementi grafičkog korisniškog interfejsa su prozori (window)

, dugmad ili komandni tasteri (button), meniji (menu),

klizači (scroll bar), polja za štikliranje (check box), radio

dugmad ili opciona dugmad (radio button), polja za unos

teksta (text box), itd. Krupniji elementi grafičkog korisničkog

interfejsa, kao što su prozori, obično obezbeđuju okvir ili

kontejner za prezentovanje sadržaja ili za smeštanje drugih

elemenata interfejsa. Sitniji elementi obično služe kao alati

za korisnički input. Dobro dizajnirani elementi korisničkog

interfejsa nekog sistema su međusobno funkcionalno

nezavisni i indirektno su povezani sa funkcionalnošću

programa, tako da grafički korisnički interfejs dobro

osmišljenog sistema može lako biti prilagođen potrebama i

ukusu korisnika, omogućavajući mu da izabere kako će

program izgledati – izborom nekog od ponuđenih skinova

(skin).

11

Ilustracija 3 Primeri elementata grafičkog korisničkog interfejsa u operativnom sistemu Windows XP

Moderni grafički operativni sistemi imaju svoj prepoznatljiv

izgled koji je zajednički za sve aplikacije i omogućava

korisniku da lako usvoji novi program i da ga intuitivno koristi

na osnovu iskustva stečenog u radu sa drugim programima.

Prepoznatljivi elementi korisničkog interfejsa operativnog

sistema Windows izgledaju isto ili veoma slično u raznim

programima koje taj operativni sistem izvršava.

2. Web aplikacija

Web aplikacija je posebna vrsta programa, odnosno aplikacije

kojoj se pristupa uz pomoć Web browser-a preko mreže kao

što je Internet ili intranet3.

Web aplikacije su svoju popularnost stekle zahvaljujući

sveprisutnosti web browser-a kao klijenta na raznim

računarskim konfiguracijama i platformama, koji predstavlja

tankog (thin) klijenta. Thin klijent predstavlja komponentu u

klijent-server mrežnoj arhitekturi koja u svojoj funkcionalnosti

najvećim delom zavisi od centralnog servera. Mogućnost

izmena i održavanja web aplikacija bez potrebe za posebnom

distribucijom i instalacijom na korisničke računare je ključni

razlog njihove popularnosti.

Gradivni elementi web aplikacije su web server koji šalje

dinamički generisane web stranice i web klijent, odnosno

web browser koji korisniku interpretira informacije primljene

od servera i serveru šalje input od korisnika.

3 Wikipedia, the free encyclopedia, http://www.wikipedia.org/ , “Web application”

12

2.1. Web browser

Web browser predstavlja poseban program koji korisniku

omogućava da prikaže i interaguje sa tekstualnim, grafičkim

ili drugim sadržajem koji je inkorporiran u web stanici. Tekst

ili multimedijalni sadržaj na web stranici može imati

hiperveze ka drugim web stanicama istog ili nekog drugog

web sajta. Najpopularniji web browser programi su Internet

Explorer (sastavni deo Windows operativnog sistema), Mozilla

Firefox i Opera. Svi ovi programi podržavaju sličan skup

standardnih mogućnosti i podršku za standradne formate

dokumenata i izvršavanje skriptova na klijentskoj strani kao

bitnog elementa za interaktivnost web stranica.

2.2. Web stranica

Informacioni resurs koji se distribuira putem World Wide Web

mreže, uz pomoć internet protokola predstavlja web stranicu.

Web stranica može sadržati multimedijalne informacije i

hiperveze ka drugim web stranicama, što obezbeđuje

infrastrukturu za povezivanje World Wide Web-a u

jedinstvenu povezanu celinu, kao globalnu informacionu

sferu. Web stranica je osnovni element koji može imati svoju

jedinstvenu adresu – URL (Uniform Resource Locator).

Korisnik zahteva web stranicu uz pomoć web browser-a i web

server mu je putem HTTP protokola isporučuje.

Svaka web stranica može imati svoj definisani izgled odnosno

dizajn koji obuhvata boje, tipografiju, raspored elemenata na

strani - layout, multimedijalne sadržaje, itd. Skup svih tih

elemenata predstavlja ukupni dizajn stranice i definiše njen

pojavni oblik. U web aplikaciji je poželjno da sve stranice koje

čine web aplikaciju budu konzistentnog izgleda i da

predstavljaju funkcionalnu i vizuelnu celinu.

Web stranice mogu sadržati klijentski skript koji je sastavni

deo stranice. Na taj način se web stranici može pridružiti

13

dinamičko ponašanje. Prihvaćeni standard za skript jezik u

okviru web stanica je JavaScript, odnosno ECMAScript.

2.2.1. HTML, JavaScript i CSS

Standardni format za definisanje web stranica je HTML

(Hypertext Markup Language) ili noviji XHTML – (Extensible

Hypertext Markup Language) koji predstavlja XML

reformulaciju HTML-a. Ovim jezikom se definišu strukturni

elementi, sadržaj web stranice i hiperveze kojima se stranica

povezuje sa drugim web stranicama ili drugim web sajtovima.

U cilju razdvajanja sadržaja, funkcionalnosti i prezentacije (tj.

dizajna) pored (X)HTML-a se koriste i prateće tehnologije:

JavaScript – za definisanje ponašanja i manipulaciju web

stranicom na strani klijenta i CSS (Cascading Style Sheets)

za opis prezentacje, odnosno dizajn i tipografiju web stranice.

Osnovna struktura web stranice definisane HTML jezikom je

sledeća:

<html>

<head>

<title>Naziv</title>

<script type=”text/javascript” src=”ponasanje.js” />

<link rel=”stylesheet” type=”text/css” href=”izgled.css” />

</head>

<body>

<h1>Naslov sadržaja</h1>

<p>Pasus teksta povezan hipervezom sa <a href=”hiperveza.html”>drugim

dokumentom</a>.</p>

<ul>

<li>stavka a iz liste</li>

<li>stavka b iz liste</li>

<li>stavka c iz liste</li>

14

</ul>

</body>

</html>

Listing 1 Primer izvornog koda HTML dokumenta

Svaka web stranica, da bi bila validna, mora imati sve

neophodne elemente koji su pravilno ugnježdeni i poštuju

standardni format definisan od strane međunarodnog tela za

definisanje web standarda, W3C – Worl Wide Web

Konzorcijuma. Web stranici se mogu pridružiti CSS stilovi za

razne vrste prezentacionih medija kao što je monitor,

projektor, štampač, PDA uređaj ili mobilni telefon i time se

obezbediti prilagođavanje izgleda web stranice uređaju sa

kog joj se pristupa, tako da se menja samo izgled web

stranice bez izmena strukture i sadržaja.

Posebnim elementima – HTML tagovima opisuje se

semantika sadržaja web stanice i njena struktura, kao i sam

sadržaj. Elementi za definisanje korisničkih input kontrola i

mogućnost prosleđivanja tih podataka serveru na obradu

predstavljaju ključni element korisničkog interfejsa web

stranice i time omogućavaju interakciju sa web aplikacijom.

Ti ključni elementi za interakciju su:

<a> element za definisanje hiperveza i za gradnju menija u

korisničkom intefejsu,

<form> -- element za definisanje korisničke forme koja

sadrži polja za unos podataka: <input type=”text”>, <input

type=”password”> i <textarea>

<input type=”checkbox”>, <input type=”radio”> -- elementi

za definisanje polja za unos teksta i za check box i radio

button kontrole,

15

<button> -- element za

definisanje komandnih

dugmadi,

<fieldset> i <legend>

za definisanje grupe

korisničkih kontrola,

<label> za definisanje

naziva korisničkih

kontrola,

<select> i <option> za

liste opcija...

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Naziv</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">

<![CDATA[

body { margin:16px; padding:8px; background:#f8f8f8; font:normal 13px verdana,arial,sans-serif;

}

form legend { color:#36f; font-weight:bold; font-size:11px; }

form label { float:left; clear:both; display:block; width:180px; text-align:right; padding:4px 2px; }

.dvakol { clear:both; margin:16px 0; padding-left:180px; }

.dvakol label { float:none; display:inline; }

.dvakol .dvakol_a { float:left; }

.dvakol .dvakol_b { float:left; }

.dvakol hr { clear:both; visibility:hidden; }

]]>

</style>

<scrtipt type="text/javascript">

<![CDATA[

function validateInput(f)

{

// provera ispravnosti unetih podataka

// ...

return true;

}

]]>

16

Ilustracija 4 Primer izgleda korisničkih kontrola

</script>

</head>

<body>

<h1>Unos podataka</h1>

<form action="process-data.php" method="post" onsubmit="return validateInput(this);">

<fieldset>

<legend>Primer kontrola za unos podataka</legend>

<label for="text1">Tekst polje: </label>

<input type="text" id="text1" name="text1" value="Početna vrednost" /><br />

<hr style="visibility:hidden;" />

<label for="pass1">Lozinka: </label>

<input type="password" id="pass1" name="pass1" value="" /><br />

<div class="dvakol">

<div class="dvakol_a">

<fieldset>

<legend>Grupa polja za štikliranje: </legend>

<input type="checkbox" value="1" id="cb1" name="cbgroup" />

<label for="cb1">Opcija 1</label><br />

<input type="checkbox" value="2" id="cb2" name="cbgroup" checked="checked" />

<label for="cb2">Opcija 2</label><br />

<input type="checkbox" value="3" id="cb3" name="cbgroup" />

<label for="cb3">Opcija 3</label><br />

</fieldset>

</div>

<div class="dvakol_b">

<fieldset>

<legend>Grupa polja za izbor: </legend>

<input type="radio" value="1" id="rb1" name="rbgroup" checked="checked" />

<label for="rb1">Opcija 1</label><br />

<input type="radio" value="2" id="rb2" name="rbgroup" />

<label for="rb2">Opcija 2</label><br />

<input type="radio" value="3" id="rb3" name="rbgroup" />

<label for="rb3">Opcija 3</label><br />

</fieldset>

</div>

<hr />

</div>

<label for="sel1">Izbor predefinisanih opcija: </label>

<select id="sel1" name="sel1">

<optgroup label="Grupa opcija 1">

<option value="opcija1">Opcija 1</option>

<option value="opcija2">Opcija 2</option>

<option value="opcija3">Opcija 3</option>

17

</optgroup>

<optgroup label="Grupa opcija 2">

<option value="opcija4">Opcija 4</option>

<option value="opcija5">Opcija 5</option>

<option value="opcija6">Opcija 6</option>

</optgroup>

</select>

<hr />

<label for="txta1">Polje za upis teksta: </label><br />

<textarea id="txta1" name="txta1" rows="5" cols="40">

Početna vrednost polja za unos teksta može biti veoma dugačka, kao i sam sadržaj ove kontrole

</textarea>

</fieldset>

<button type="submit">Obradi podatke</button>

<button type="reset">Poništi izmene</button>

</form>

</body>

</html>

Listing 2 HTML kod sa formom za unos podataka i sa pridruženim CSS stilom i JavaScript funkcijom. Ovaj HTML kod se u web browseru prikazuje kao na ilustraciji 5.

18

Ilustracija 5 Prikaz HTML forme sa kontrolama za unos podataka

Ilustracija 6 Prikaz iste HTML forme u različitim operativnim sistemima i okruženjima: Windows Vista/Internet Explorer, Ubuntu Linux/Mozilla Firefox i Kubuntu Linux/Konqueror

19

2.3. Troslojna arhitektura web aplikacije

U začetku razvoja

klijent-server

arhitekture, svaka

aplikacija je imala svoj

specifičan klijent

program koji je

uglavnom služio kao

korisnički interfejs

klijent-server aplikacije i zahtevao je da bude posebno

instaliran na računaru svakog pojedinačnog korisnika. Izmena

serverskog dela aplikacije često je zahtevala i izmenu

klijentskog dela i ponovnu instalaciju na računaru svakog

pojedinačnog korisnika. Time su bili povećavani troškovi

održavanja softvera i smanjena efikasnost. Prvi korak u

rešavanju problema bio je potpuno razdvajanje klijentskog od

serverskog dela aplikacije. Njihova nezavisnost omogućila je

da izmene u funkcionisanju sistema ostanu na serverskom

delu i time su postale nevidljive za klijenta. Daljim

raslojavanjem na serverskom delu je odvojen i sloj

prezentacije podataka čime je razvoj softvera postao

nezavisan od izvora podataka. Sa druge strane direktan

pristup podacima sa klijentske strane je onemogućen, čime je

povećana sigurnost baze podataka. Kontakt između slojeva

se uglavnom obavlja preko kontrolera. U prezentacionom

sloju, koji se nalazi na strani klijenta nalazi se kontroler

korisničkog interfejsa koji ima zadatak da prihvata podatke sa

forme i prosleđuje ih srednjem sloju, logičkom sloju, koji čuva

poslovnu logiku sistema. Logički sloj ima kontrolera

aplikacione logike koji te podatke prihvata i prosleđuje ih

samom sistemu na obradu. Sistem dalje preko posebnih

mehanizama prosleđuje podatke sistemu za upravljanje

bazama podataka.

Web aplikacije su organizovane kao višeslojne aplikacije. One

dinamički generišu seriju web dokumenata u standardnom

20

Ilustracija 7 Shema troslojne arhitekture

formatu kao što je HTML/XHTML koji je podržan od strane

standardnih web browser-a. Time se obezbeđuje

upotrebljivost univerzalnog programa kao što je web browser

za pristup serverskom delu web aplikacije u klijent-server

arhitekturi. Scripting mogućnost sa klijentske strane uz

pomoć standarnog skript jezika kao što je JavaScript

omogućava da se korisničkom interfejsu web aplikacije doda

dinamičnost i povećani stepen interaktivnosti. U opštem

slučaju, svaka pojedinačna web strana, kao komponenta web

aplikacije se dostavlja klijentu kao statični dokument, ali

serija takvih web strana omogućava korisniku interakciju sa

web aplikacijom, jer je korisnički input koji korisnik unosi

putem web formi prosleđen serverskom delu aplikacije i posle

obrade sistem korisniku vraća povratnu informaciju. Tokom

sesije (session), web browser interpretira i prikazuje stranice

korisniku i predstavlja univerzalni klijent za bilo koju web

aplikaciju.

21

Interfejs web aplikacije postavlja samo nekoliko ograničenja

za funkcionalnost klijenta. Bez obzira na tehnologiju koja se

koristi za pridruživanje multimedijalnog sadržaja (Java,

JavaScript, DHTML, Flash ili neka druga tehnologija) koji je

deo web stranice ili web aplikacije, standradne metode

interakcije sa korisnikom su na raspolaganju: iscrtavanje na

ekranu, puštanje zvuka, pristup tastaturi i mišu. Takođe, na

raspolaganju su i opšte metode kao što je drag-and-drop.

Značajna prednost web aplikacija koje podržavaju standardne

mogućnosti web browsera je u tome što takve aplikacije rade

kao što je predviđeno bez obzira na kom operativnom

sistemu ili platformi je klijent koji im pristupa. Umesto

kreiranja posebnih klijenata za Windows, Mac OS X,

GNU/Linux ili neki drugi sistem, web aplikaciju je moguće

napisati jednom i koristiti je skoro svugde.

Iako web aplikacija može biti organizovana na razne načine,

najčešće se struktuira kao troslojna aplikacija. U

najrasprostranjenijoj formi, web browser predstavlja prvi sloj,

neki web aplikativni server za dinamički web sadržaj

22

Ilustracija 8 Troslojna arhitektura web aplikacije

predstavlja srednji sloj i baza podataka predstavlja treći sloj u

troslojnoj arhitekturi. Web browser šalje zahteve srednjem

sloju, koji ih obrađuje tako što dalje prosleđuje instrukcije

sistemu za upravljanje bazom podataka i generiše korisnički

interfejs.

Postoji nekoliko tehnologija i platformi za razvoj troslojnih

web aplikacija. Među najpopularnijima su Sun Java Server

Pages, ASP .NET i LAMP (Linux, Apache, MySQL i

Perl/Pyton/PHP)

2.4. Microsoft .NET platforma

Razvoj softvera danas

je industrija koju koče

razne

nekompatibilnosti.

Moduli napisani u

drugim programskim

jezicima se ne ugrađuju

lako. Programi koji se

pokreću na različitim

mašinama moraju da se dovijaju da bi međusobno mogli da

komuniciraju. Aplikacije koje se razvijaju za različite

operativne sisteme su izgrađene na nekompatibilnom API-ju,

čineći održavanje teškim. Softverska industrija fokusira se na

prebacivanje sa samostalnih aplikacija i klijent/server

programa na aplikacije koje žive i pokreću se na Web-u.

Microsoft .NET ili samo .NET je novi način pravljenja i

razvijanja softvera koji koristi standarde HTTP i XML da bi

učinili interoperabilnost mogućim, i koji se oslanja na Internet

da učini softverske servise dostupnim u neverovatnim

razmerama. Microsoft .NET platforma predstavlja široku

lepezu proizvoda i tehnologija. Zajednički element za sve njih

je da su bazirane na Microsoft .NET Framework-u kao

komponenti Windows operativnog sistema. U open source

pokretu, takođe, postoji inicijativa za razvoj projekta koji bi

23

Ilustracija 9 Komponente .NET platforme

omogućio izvršavanje .NET aplikacija i na drugim

platformama osim Windows-a. Ovaj projekat se razvija pod

imenom Mono.

Osnovne komponente Microsoft .NET Framework okruženja

su:

• ADO.NET,

biblioteka za

pristup podacima

• ASP.NET, razvoj

web stranica

• Managed code

• Common

Language Runtime

• Common

Language

Infrastructure

• Shared Source Common Language Infrastructure

• Common Intermediate Language

• Common Type System

.NET Framework je platforma za pokretanje .NET aplikacija.

Framework nije neophodan za razvoj softvera, ali omogućava

proces razvoja na mnogo lakši način sa mnogo manje

utrošenog vremena. Pored mnogih prednosti: dovodi objektno

programiranje na Web, eliminiše većinu najčešćih bug-ova

koji oslabljuju softvere, pruža zajednički API za sve jezike, što

znači da jezik koji se izabere na početku nas neće saterati u

ćošak na kraju. Cilj Microsoft .NET-a je da pretvore Internet u

servis-orijentisanu softversku platformu.

24

Ilustracija 10 Arhitektura .NET Framwork-a

2.5. ASP.NET

ASP.NET počiva na programskim klasama .NET Framework-a,

snabdevajući model Web aplikacije setom kontrola i

infrastrukturom koja omogućava jednostavno pravljenje ASP

aplikacija. ASP.NET uključuje set kontrola koji enkapsulira

zajedničke elemente HTML korisničkog interfejsa, kao što su

polja za unos teksta, komandni tasteri, dugmad za izbor,

drop-down meniji itd. Ove kontrole se pokreću na Web

serveru i šalju njihov interfejs kao HTML do browser-a.

ASP.NET, takođe, pruža infrastrukturne servise, upravljanje

sesijama stanja i recikliranje procesa, što smanjuje količinu

koda koju programer treba da napiše istovremeno

povećavajući pouzdanost aplikacije i smanjujući rizik od

greške.

Za razliku od ASP-a, ASP.NET ne koristi sopstveni jezik za

programiranje. Umesto toga, ASP.NET aplikacije prave se kao

i aplikacije u nekom programskom jeziku koji je kompatibilan

sa .NET okruženjem (C#, VB.NET,...). To omogućuje Web

programerima da razdvoje sadržaj od izgleda, zato što

ASP.NET aplikacije mogu koristiti Web formulare za

prikazivanje korisničkog interfejsa, a mogu koristiti i sve alate

.NET okruženja. Sam kod aplikacije koja se pravi u ASP.NET-u

je već kompajliran, te se zbog toga .NET program izvršava

znatno brže od ekvivalentnih ASP aplikacija. To sve značajno

poboljšava performanse. Još jedna značajna razlika u odnosu

na tradicionalni ASP jesu server kontrole. ASP.NET server

kontrole mapiraju pojedinačne HTML elemente ili grupe HTML

elemenata u jedinstvene celine i pružaju moćnu

programabilnost serverske strane. Serverske kontrole se

izvršavaju na serveru i kao izlaz daju HTML koji je skrojen za

browser-e novije generacije.

Još jedna prednost u odnosu na stari ASP, kod koga su se

stranice interpretirale nakon svakog novog zahteva te

stranice, ASP.NET uvodi keširanje što omogućava da se

svaki ponovni zahtev za određenom stranicom izvršava

25

mnogo brže nego prvi put. Informacije o konfiguracijama za

Web aplikacije više ne skladišti IIS u teško dostupnim

bazama, već se skladište u XML formatu, odakle ih lako mogu

pročitati i mašina i korisnik, što razmeštanje čini lakšim. Ova

nova tehnologija uvodi praćenje stanja distribuiranih sesija

preko Web servera bez korišćenja kukija (cookies). 4

ASP.NET komponente i fajlovi koji se na serveru obrađuju su

raspoređeni u datoteke sa ekstenzijom .aspx za osnovnu

stranicu, .aspx.cs za programski kod, .ascx za kontorole ,

.ascx.cs za programski kod kontrola, itd. Ovakvom

organizacjiom programskog koda se dodatno naglašava

razdvojenost pojedinih slojeva aplikacije i olakšava se razvoj

softverskih proizvoda jer se razdvaja programski kod za

obradu logike aplikacije i kod za obradu korisničkog

interfejsa.

2.6. ADO.NET

Uz pomoć komponente

ADO.NET omogućen je

pristup raznim

skladištima podataka

kao što je server

relacione baze

podataka, Microsoft

Excell radna sveska ili

XML datoteka. ADO.NET sa mnogim karakteristikama i

unapređenjima, stavlja totalno novo lice starom ADO modelu.

Najzapaženija od svih prednosti je eliminisanje ADO

recordset-a i ta da je interna struktura podataka kod

ADO.NET-a sada bazirana na XML-u. ADO.NET je razvijan

ruku-pod-ruku sa XML klasama u .NET Framework-u. Obe su

komponente iste tehnologije. XML je izabran za koren

reprezentacije podataka iz više razloga: XML pruža širi niz

podržanih tipova podataka, podaci mogu lako prolaziti kroz

4 Rick Leinecker: ASP.NET Solutions – 23 Case Studies: Best Practices for Developers, Addison Wesley, 2003

26

Ilustracija 11 Arhitektura ADO.NET

firewall-ove i interne mreže, XML ne mari za baze podataka i

jezike upita, i dozvoljava povezivanje na bilo koji korisnički

interfejs. ADO.NET zamenjuje eliminisani recordset sa mnogo

kompletnijim objektom koji se zove DataSet. Ovaj objekat

predstavlja diskonektovanu, keširanu kopiju podataka, koji se

ponašaju veoma slično kao baza podataka, uskladištenjem

kolekcija hijerarhijskih tabela, redova, kolona, relacija i

ograničenja podataka.

ADO.NET se sastoji od grupe objekata koji komuniciraju sa

bazom podataka preko .NET dobavljača podataka.

Komponente su dizajnirane da razdvoje pristup podacima od

manipulacije podacima.

2.7. SQL Server

SQL Server predstavlja Microsoft sistem za upravljanje

relacionim bazama podataka. Sistemi rade sa podacima,

obrađuju ih i skladište. Podaci su najčešće organizovani u

tabelama između kojih su uspostavljene određene relacije.

Transact-SQL (T-SQL) jezik je glavni za upravljanje SQL

Server-om. Njime se može manipulisati podacima u SQL

bazama podataka, a pruža i komande za upravljanje i

održavanje servera. Baze podataka predstavljaju osnovne

gradivne blokove SQL Servera. One se sastoje od logičkih

komponenti – kao što su tabele, pogledi i uskladištene

procedure, kao i od fizičkih komponenti – koje su uglavnom

sačinjene od fajlova koji kreiraju bazu podataka i koji su

uskladišteni na diskovima.

U troslojnoj arhitekturi ovaj sloj je potpuno odvojen od

prezentacionog sloja. Korisnik nema direktnog uticaja na

bazu podataka, te se na taj način održava njena

konzistentnost i perzistentnost. Ovaj sloj se, takođe, može

urediti kao troslojna arhitektura. Najniži sloj, sloj podataka

čine same tabele sa međusobnim vezama. Kao što je baza

podataka osnovni gradivni blok SQL Servera, tako je i tabela

osnovni gradivni blok baze podataka. Ove strukture čuvaju

27

podatke u kolonama (koje predstavljaju atribute) i redovima

(koji predstavljaju zapise). Srednji sloj, logički, predstavljaju

uskladištene procedure. To je grupa Transact-SQL iskaza koji

se izvršava u pojedinačnom izvršnom planu. Ove grupe

naredbi predstavljaju poslove koje bi aplikacije, možda,

trebalo da često procesiraju. Uskladištene procedure vode

računa da se ove transakcije procesiraju pravilno i efikasno.

Konačno, najviši sloj, prezentacioni sloj predstavljaju pogledi,

view. Kao što i samo ime kaže, to su podaci koji se prikazuju

korisniku iz jedne ili više tabela. Vrlo često se krajnjem

korisniku zabranjuje direktan pristup podacima, već se taj

pristup obezbeđuje preko pogleda. Time se povećavaju

sigurnost i performanse sistema.

3. Korisnički interfejs Web aplikacije

Korisnički interfejs Web aplikacije zahteva posebnu pažnju

prilikom razvoja. Postavljanjem aplikacije na Internet, broj

korisnika takvih aplikacija dobija neverovatne razmere. Svaki

od tih korisnika ima svoje zahteve, tehničke mogućnosti,

lične mogućnosti čime se broj zahteva na koje treba

odgovoriti povećava. Teorija po kojoj je korisnik bio u centru

pažnje se polako napušta. Umesto scenarija u kome se čeka

na reakcije korisnika i sistem prilagođava njima, teži se tome

da se mišljenje korisnika formira na osnovu korisničkog

interfejsa. Praksa je pokazala da na korisnika utiču određeni

aspekti, tako da poštujući principe za svaki od njih moguće je

napraviti korisnički interfejs koji bi odgovarao svima.

Kreiranje korisničkog interfejsa je kombinacija nauke i

umetnosti.

3.1. Elementi korisničkog interfejsa

Kao što je već ranije rečeno, najčešće korišćeni elementi

korisničkog interfejsa su prozori (window) , dugmad

(button), meniji (menu), klizači (scroll bar), polja za

štikliranje (check box), radio dugmad (radio button), polja

za unos teksta (text box), itd.

28

Kod web aplikacija prozor je browser u kome se pokreće ta

aplikacija. Najveći deo površine browsera predstavlja

kontejner odnosno okvir u koji se smeštaju ostali elementi.

Web browser-i omogućavaju korisnicima kretanje napred i

nazad kroz delove (sekvence) dokumenta kao i hronološki

vraćanje na prethodno posećenu stranicu.

Meniji omogućavaju

korisniku da izvršava

komande selektujući je

iz ponuđene liste.

Opcije se selektuju

mišem ili nekim drugim

pokazivačkim uređajem,

a dobra praksa je da se

omogući i aktiviranje

komandi iz menija putem tastature – korišćenjem prečica.

Meniji su praktični zato što pokazuju koje su komande

dostupne u okviru aplikacije. Menu bar se prikazuje na vrhu i

najčešće je to padajući meni. Kada korisnik izabere neku

opciju u meniju prikazuje se njen sadržaj. Ovaj postupak

može biti rekurzivan, odnosno meniji mogu imati više nivoa

dubine i sadržati podmenije.

Dugmad se, najčešće, koriste da se na jednostavan način

„okine“ događaj. Najčešće su to komande za pretrazivanje,

prihvatanje promena, brisanje objekata, dodavanje objekata.

Tekst na dugmetu treba da da opis akcije koja će se dogoditi

klikom na to dugme.

Radio dugmad ili opciona

dugmad pružaju korisniku

mogućnost da izabere jednu iz

seta ponuđenih opcija. Radio

dugmad su uređena u grupe od

dva ili više i prikazana su na

ekranu najčešće kao krugovi.

29

Ilustracija 12 Primer izgleda menija u web aplikaciji

Najčešće se ove kontrole vizueliziraju tako da prazan krug

simbolizuje opciju koja nije izabrana, a krug sa tačkom u

centru predstavlja opciju koja je izabrana. Opciona dugmad

su međusobno isključiva, tako da u jednom trenutku može

biti izabrana samo jedna od ponuđenih opcija. Ukoliko

korisnik izabere neku opciju, ostale automatski postaju

neobeležene.

Polje za štikliranje je element

grafičkog korisničkog okruženja,

koji omogućava korisniku da

izabere proizvoljan broj opcija

od ponuđenih, ili da ne izabere

nijednu. Ovo polje može imati

samo dve vrednosti, tačnu i

netačnu. Može se koristiti i

samo jedno polje za štikliranje,

za pojedninačnu opciju koju

korisnik može uključivati ili isključivati.

Klizači su dodatak grafičkom korisničkom okruženju koji

nastavljaju tekst, sliku ili čak vreme na nekoj video aplikaciji.

Korisni su ukoliko sadržaj nije vidljiv u

celosti zbog veličine ekrana ili prozora. U

Microsoft .NET dokumentaciji ovaj

element se naziva „scroll box“, dok se u

drugim razvojnim okruženjima može naći

i pod imenom „elevator“, „puck“ ili

„wiper“. Može biti horizontalan i

vertikalan, najčešće se predstavlja u

obliku izduženog pravougaonika koji ima na sebi deo (bar) za

pomeranje kroz dokument, kao i dve strelice na krajevima za

preciznije podešavanje.

Polja za unos teksta, najčešće, pružaju korisniku

mogućnost da unosi tekst koristeći tastaturu, da se kreće

kroz tekst i selektuje neke njene delove ili da vrši izmenu

30

postojećeg testa. Text box omogućava korisniku da unese

tekstualne informacije koje se koriste u programu. Može

sadržati horizontalni klizač, vertikalni ili kombinacju.

3.2. Dizajn

Postoje dva zakona dizajna interfejsa (smatra se da ih je

postavio Jef Raskin u svojoj knjizi, The Humane Interface) koji

se uzimaju u obzir u ranim fazama razvoja. Ti zakoni su

bazirani na fiktivnim zakonima robotike koje je osmislio Isak

Asimov:

1. Računar ne sme da ošteti rad korisnika, niti da zbog

neaktivnosti dovede do oštećenja rada.

2. Računar ne sme da nepotrebno troši vreme korisnika ili

da zahteva od korisnika više rada nego što je

neophodno.

Kada su ova pravila ispunjena i potrebno je pristupiti daljem

razvoju u kasnijim fazama, koriste se principi dizajna

korisničkog interfejsa5:

Princip Opis Primer

Vidljivost Jasnoća Da li je cilj očigledan? Da li

se koriste ikonice?

Povratna

informacija

Informacija se

predstavlja korisniku

odmah nakon njegove

akcije

Zvuk. Tekst koji prikazuje

status operacije.

Pristupačnos

t

Koliko je korisniku

jasno kako da korisiti

Oznaka „guraj“ na vratima

prodavnice. Dugme na

5 Wikipedia, the free encyclopedia, http://www.wikipedia.org/ , “Principles of User Interface Design”

31

element dizajna

korisničkog interfejsa

kome je jasno naveden

naziv komande koju

aktivira.

Jednostavnos

t

KISS princip (”Keep it

simple. Stupid”)

Postavljanje komande

„otvori fajl“ pod stavku

menija „fajlovi“.

Struktura Da li su elementi

postavljeni i

raspoređeni u smislenu

celinu za korisnika

Grupisanje podataka u

dijalog prozoru.

Konzistencija Koliko je lako naučiti i

zapamtiti izgled,

poziciju i ponašanje

elemenata?

Oznaka „x“ za zatvaranje

prozora (u gornjem desnom

uglu prozora).

Tolerancija Sprečavanje korisnika

da pravi greške i

mogućnost oporavka iz

stanja greške

Ignorisanje pogrešnog

unosa sa tastature.

Skrivanje opcija koje nisu

dostupne u određenom

kontekstu.

Tabela 1 Principi dizajna korisničkog interfejsa

3.2.1 Tipografija

Tipografija je balans i međusobni odnos forme teksta na

strani, verbalno i vizuelno izjednačavanje koje pomaže

korisniku da razume formu i apsorbuje suštinu sadržaja

stranice. Tipografija igra dvostruku ulogu, kao verbalna i

vizuelna komunikacija. Dok korisnik pogledom skenira stranu,

on podsvesno postaje svestan obe ove funkcije: prvo

32

pregleda globalne grafičke paterne na stranici, zatim parsira

jezik, ili čita. 6

Pojam tipografije vezuje se za format teksta, kao i raspored

nekih tekstualnih elemenata. Postoje neka osnovna pravila i

principi koje treba poštovati prilikom dizajniranja tekstualnih

elemenata grafičkog interfejsa. Tako na primer, tekst treba

poravnati sa leve strane, ekran je suviše širok za čitanje, tako

da redove treba ograničiti na 50-70 karaktera. Treba ostati

konzistentan u dizajnu. Ukoliko se na stranici nalaze polja za

unos osnovnih podataka o korisniku, na početku se treba naći

prvo polje za unos imena, zatim polje za unos prezimena, i

tako redom. Korisnik će biti zbunjen ako se ime unese na

početku, a polje za unos prezimena se pojavi negde na kraju

forme.

Font teksta predstavlja vrlo bitan deo tipografije. Jedan od

najpoznatijih fontova je Times New Roman koji je napravljen

za potrebe štampanja novina, ali je jako loš za čitanje sa

ekrana. Njegova originalna verzija dizajnirana je da skupi što

je više moguće slova na jednom papiru, a da tekst ostane

čitljiv. Glavni problem kod digitalne verzije Times-a jeste to

što prilikom prikazivanja ne može da prenese fine nijanse na

ekran. Pixel je i dalje pixel, najmanja moguća jedinica, i ne

postoji nešto što je veličine pola pixela. Radi prevazilaženja

ovog problema napravljeni su drugi fontovi, sa većim

razmakom između karaktera.

3.2.2 Layout

Layout predstavlja deo grafičkog dizajna koji se tiče uređenja

i stila elemenata na stranici i njihovog međusobnog položaja i

6 Web style guide: TYPOGRAPHY, http://www.webstyleguide.com/ , Typography

33

Ilustracija 13 Tipičan raspored elemenata na web strani koji predstavljaju layout. Ovakav raspored omogućava korisnicima da na osnovu prethodnog iskustva lako prihvate i savladaju novu web aplikaciju

odnosa. Posmatrajući kroz vreme, od vremena ručno

štampanih knjiga do modernih magazina možemo videti da

se grafičkom dizajnu uvek posvećivala velika pažnja. Kod

štampanog materijala dizajn se sastojao od teksta i slike.

Razvojem računara, mogućnosti layout stranica su se

proširile kako u elektronskim medijima tako i u štampanim

medijima.

Margine, širina stranice i uvlačenja su aspekti dizajna

stranica koji značajno mogu poboljšati čitljivost. Prozoru

browser-a se može promeniti veličina, čime se menja i

veličina stranice. Različiti web uređaji (web TV, monitori

visoke rezolucije, PDA uređaji) imaju različite minimalne i

maksimalne veličine prozora. Zbog toga fiksne veličine fonta,

layout-a mogu dovesti do problema nepristupačnosti na web-

u. Da bi stranica bila prilagodljiva različitim veličinama

prozora, treba koristiti procentualne vrednosti za parametre

elemenata koji čine layout.

Postoje alati koji pomažu u očuvanju konzistentnosti web

aplikacija. Najpoznatiji je CSS (Cascading Style Sheet), koristi

se da opiše prezentaciju dokumenta koji je napisan u nekom

označavajućem jeziku kao što je HTML.

Layout web strane može biti fiksan kada svi elementi strane

ostaju nepromenjenih dimenzija bez obzira na veličinu

prozora web browser-a. Layout može biti i prilagodljiv

(liquid) veličini prozora web browsera i u tom slučaju se

najbolje iskorišćava površina prozora na ekranu – u zavisnosti

od veličine prozora, sadržaj web strane se prilagođava i

popunjava slobodan prostor. Za definisanje prilagodljivog

rasporeda elemenata na web strani međusobni odnosi i širine

i visine elemenata korisničkog interfejsa se definišu u

procentima.

34

3.3. Interaktivnost

Interakcija je vrsta akcije u kojoj dva ili više objekata imaju

međusobnog uticaja. 7 Da bi razumeli interaktivnost možemo

prvo razmotriti pasivne događaje na suprot aktivnim.

Najčešći pasivni događaj je gledanje televizije, tokom koje je

jedini aktivni događaj pretraživanje daljinskim upravljačem.

Da bi se ova akcija pretvorila u interaktivnost potrebno je

izvršiti neke modifikacije ovih događaja. Modifikacije moraju

ići u pravcu uključivanja gledaoca na neki način. Ukoliko se

prilikom gledanja neke televizijske emisije, domaćin te

emisije iznenada obrati gledaocu i pita ga da napravi izbor iz

menija na ekranu, i on to uradi, a zatim vidi rezultat tog svog

izbora, onda je to interaktivnost.

Na webu, svaki put kada se napravi neka selekcija koja

izaziva neku povratnu aktivnost, dobija se interaktivnost.

Web je fundamentalno interaktivan zbog hiperveza.

Nove tehnologije su često vrlo komplikovane njihovim

korisnicima. Dizajniranje interaktivnosti ima za cilj da

minimizira krivu učenja i da poveća tačnost i efikasnost

ispunjavanja zadataka bez smanjivanja vrednosti

funkcionalnosti proizvoda. Interaktivnost treba da smanji

frustracije, poveća produktivnost i zadovoljstvo korisnika.

3.4. Usability i Accessibility

Usability je istovremeno i umetnost i nauka dizajniranja

sistema ili proizvoda koji su efektivni, efikasni, korisni,

tolerantni na greške i laki za učenje. Usability i accessability

su pojmovi koji se vrlo često mešaju. Ova dva pojma nisu

isključiva, ali postoji vrlo jasna razlika između njih. Sa jedne

strane, usability znači da je Web aplikacija intuitivna i laka za

korišćenje, dok sa druge, accessability znači da Web

aplikacija nema ograničenja u korišćenju.

7 Wikipedia, the free encyclopedia, http://www.wikipedia.org/ , “Interaction”

35

Pravljenje Web aplikacija da budu upotrebljive (usable) i lake

za korišćenje je pametan biznis. Usability povećava

zadovoljstvo korisnika i njihovu produktivnost, i vodi ka

njihovom poverenju i lojalnosti. Visoko kvalitetan korisnički

interfejs zahteva dosta truda, ali zato predstavlja dobru

investiciju zbog rezultata koje on daje. Vrlo često korisnici

stiču opšti utisak o proizvodu upravo na osnovu njegovog

dizajna.

Accessibility (dostupnost) odnosi se na to da je aplikacija

dostupna svima. Ovde se naročito misli na osobe sa

ograničenjima, bilo da su ta ograničenja zbog bolesti,

starosti, nesreće ili iz nekog drugog razloga tehničke prirode.

Tako aplikacija treba da ima mogućnost povećavanja slova

zbog onih sa slabim vidom. Mora postojati mogućnost

navigacije uz pomoć tastature, za korisnike koji nemaju miš.

Treba omogućiti rad i onim korisnicima koji imaju lošu

konekciju ka internetu. Vrlo često korisnici sa slabom

konekcijom isključuju u browserima prikazivanje slika. Iz tog

razloga treba obezbediti alternativni tekst koji bi se pojavio

na mestu gde bi trebalo da stoji slika.

3.5. Korisničko iskustvo

Mnoge tehnološke inovacije se oslanjaju na dizajn korisničkog

interfejsa da uzdigne njihovu tehničku kompleksnost u

koristan proizvod. Tehnologija sama možda neće osvojiti

potvrdu korisnika i sledeću prodaju. Korisničko iskustvo,

odnosno kako korisnici doživljavaju krajnji proizvod, je ključ u

prihvatanju.

Korisničko iskustvo je termin koji

se koristi da opiše sveobuhvatno

iskustvo i zadovoljstvo korisnika

dok koristi proizvod ili sistem.

Ova oblast ima korene u

pristupu dizajniranju takvom, da

je korisnik u centru, i predstavlja

36

Ilustracija 14 Saće korisničkog iskustva

multidisciplinarnu oblast. Neki od aspekata koje obuhvata su

psihologija, antropologija, kompjuterska nauka, grafički

dizajn i industrijski dizajn. Neophodno je uključiti sve aspekte

prilikom razvoja korisničkog interfejsa kako bi se povećala

pozitivna strana doživljaja korisnika.

Svi prethodno navedeni elementi korisničkog interfejsa mogu

značajno uticati na korisničko iskustvo. Peter Morville,

profesor na Univerzitetu Michigan i predsednik kompanije

Semantic Studios koja se bavi informacionom arhitekturom i

dizajnom korisničkog iskustva, u svojim publikacijama navodi

sledeće aspekte korisničkog iskustva raspoređenih u obliku

saća. 8

4. Realizacija korisničkog interfejsa u Microsoft

.NET okruženju

Primer koji će ovde biti prikazan predstavlja informacioni

sistem postdiplomskih studija. Sistem predstavlja web

aplikaciju razvijenu u ASP.NET-u u Visual Studio 2003

razvojnom okruženju.

8 User Expirience Design, http://www.semanticstudios.com

37

4.1. Korisnički zahtevi

Za potrebe rada studentske službe potrebno je napraviti

informacioni sistem

postdiplomske službe.

Postdiplomska služba

raspolaže velikim

brojem podataka i

dokumenata i potrebno

je organizovati ih i

napraviti korisnički

interfejs koji bi olakšao

njihov rad, povećao

efikasnost i efektivnost.

Sa tim ciljem je

napravljen ovaj

korisnički interfejs za

praćenje rada

postdiplomskih studija.

Korisničke zahteve možemo predstaviti preko dijagrama

slučaja korišćenja.

Radi preglednosti izvršena je dekompozicija sistema.

4.1.1. Rad sa matičnim podacima:

Rad sa podacima o nastavi je veoma složen poslovni proces i

obuhvata sledeće podprocese:

38Ilustracija 16 Dijagram slučajeva korišćenja u okviru rada sa podacima o nastavi

Službenik

Rad sanastavnicima

Rad sa maticnimpodacima

Rad sastudentima

Rad sa finansijama

Ilustracija 15 Dijagram slučajeva korišćenja

Službenik

Rad sa podacima o nastavnim planovima

Rad sa podacima o

smerovima na studijama

Rad sa podacima o zvanjima

Rad sa podacima o

vrstama obrazovanja

Rad sa podacima o nastavnim grupama

Rad sa podacima o

nastavnicima

Rad sa podacima o

prostorijama za nastavu

Rad sa podacima o

ispitnim rokovima

Rad sa podacima o predmetima

Ilustracija 17 Dijagram slučajeva korišćenja u okviru rada sa matičnim podacima

Službenik

Rad sa podacima o korisnicima

Rad sa podacima o

bankama

Rad sa podacima o nastavi

Rad sa podacima o

školskoj godini

Rad sa podacima o

organizacijama

Rad sa geografskim podatacima

4.1.2. Rad sa nastavnicima:

Službenik

Rad sa podacima o rasporedu

nastave

Rad sa podacima o angažovanju nastavnika

Rad sa izveštajima

Ilustracija 18 Dijagram slučajeva korišćenja u okviru rada sa nastavnicima

39

4.1.3. Rad sa studentima:

Službenik

Obrada podataka o radovima

Obrada podataka o

ispitima

Upis studenta na studije

Overa semestra

Ilustracija 19 Dijagram slučajeva korišćenja u okviru rada sa studentima

4.1.4. Rad sa finansijama:

Službenik

Rad sa podacima o

vrstama rashoda

Rad sa podacima o

vrstama prihoda

Rad sa podacima o rashodima

Rad sa podacima o prihodima

Ilustracija 20 Dijagram slučajeva korišćenja u okviru rada sa finansijama

4.1.5. Primer slučaja korišćenja

Razmotrimo jedan scenario slučaja korišćenja. Uzmimo, na

primer, evidentiranje angažovanja nastavnika.

SK:Slučaj korišćenja- Evidentiranje angažovanja nastavnika

40

Naziv SK: Evidentiranje angažovanja nastavnika

Aktori SK: Službenik u studentskoj službi

Učesnici SK: Službenik i sistem

Preduslov: Službenik je ulogovan na sistem i izabrao je iz

padajućih menija opciju za rad sa angažovanjem nastavnika.

Otvorena je forma za rad sa angažovanjima nastavnika.

Osnovni scenario slučaja korišćenja:

1. Službenik pored teksta Nastavnik i Predmet, iz

padajućeg menija bira ime nastavnika kome želi da

doda angažovanje i predmet za koji ga angažuje.

2. Sistem za izabrani predmet čita vrste obrazovanja

iz baze.

3. Sistem prikazuje pročitane vrste obrazovanja.

4. Službenik bira vrstu obrazovanja.

5. Sistem čita smerove za izabranu vrstu

obrazovanja.

6. Sistem prikazuje smerove za izabranu vrstu

obrazovanja.

7. Službenik bira jedan smer od ponuđenih.

8. Sistem čita spisak nastavnih planova za izabrani

smer.

9. Sistem prikazuje spisak nastavnih planova.

10. Službenik unosi preostale podatke. Bira školsku

godinu, unosi broj časova i ostavlja napomenu ukoliko

je ima.

11. Službenik proverava da li je uneo sve podatke.

12. Službenik poziva sistem da prihvati promene

pritiskom na dugme Dodaj angažovanje nastavnika

13. Sistem dodaje angažovanje u bazu.

41

14. Sistem prikazuje poruku o uspešnosti.

Postuslov: Angažovanje nastavnika je zapamćeno u bazu.

Ilustracija 21 Izgled prazne forme za unos angažovanja nastavnika

Ilustracija 22 Izgled forme sa porukom o uspešno izvršenoj operaciji

Alternativna scenarija

Ukoliko korisnik ne unese sve podatke polja će biti označena

zvezdicom, a u poruci o uspešnosti će biti ispisana poruka o

nedostajućim podacima.

Ukoliko korisnik želi

tokom rada da proveri

neke druge podatke

može izabrati

odgovarajući link iz liste

referentnih linkova ili iz

liste padajućih menija.

Prilikom povratka na

stranu na kojoj je pre

toga radio uneti podaci

su ostali zapamćeni i

forma je spremna za

nastavak rada.

42

Ilustracija 23 Izgled forme sa porukom o nedostajućim podacima

Radi sigurnosti, ukoliko je sistem duže vremena neaktivan,

podaci o logovanju se brišu i od korisnika se traži da se

ponovo uloguje.

Ponašanje softverskog sistema može se opisati uz pomoć

sistemskih dijagrama sekvenci ili pomoću dijagrama

saradnje. Sistemski dijagram sekvenci prikazuje, za

izdvojeni scenario slučaja korišćenja, događaje u određenom

redosledu, koji uspostavljaju interakciju između aktora i

softverskog sistema. Događaj koji napravi aktor je pobuda za

poziv sistemske operacije. Aktor se ne obraća direktno

sistemu, već događaj koji on napravi prihvata primalac

događaja, koji nakon toga poziva sistemsku operaciju. Poziv

sistemske operacije ukazuje na interakciju između aktora i

sistema. Za događaj koji predstavlja pobudu za poziv

sistemske operacije često se kaže da predstavlja sistemski

događaj. 9

Za prethodno navedeni primer slučaja korišćenja sistemski

dijagram sekvenci ima sledeći izgled:

Dijagram sekvenci za slučaj korišćenja: Evidentiranje

angažovanja nastavnika

Osnovni scenario:

1. Službenik bira ime nastavnika kome želi da doda

angažovanje i predmet za koji ga angažuje.

2. Sistem prikazuje pročitane vrste obrazovanja.

3. Službenik bira vrstu obrazovanja.

4. Sistem prikazuje smerove za izabranu vrstu

obrazovanja.

5. Službenik bira jedan smer od ponuđenih.

6. Sistem prikazuje spisak nastavnih planova.

9 Siniša Vlajić : Projektovanje programa (skripta), Beograd, 2004.

43

7. Službenik unosi preostale podatake. Bira školsku

godinu, unosi broj časova i ostavlja napomenu ukoliko

je ima.

8. Službenik poziva sistem da prihvati promene pritiskom

na dugme Dodaj angažovanje nastavnika

9. Sistem prikazuje poruku o uspešnosti.

ZapamtiNovoAngažovanje

Lista VrsteObrazovanja

NađiNastavnePlanovePoSifriSmera(Smer)

Poruka o uspešnosti

Službenik NađiVrsteObrazovanjaPoSifiPredmeta(Predmet)

Sistem

NađiSmerovePoŠifriVrsteObrazovanja(VrstaObrazovanja)

Lista Smerovi

Lista NastavniPlanovi

Ilustracija 24 Dijagram sekvenci za slučaj korišćenja „Evidentiranje angažovanja nastavnika“

Na osnovu analize uz pomoć dijagrama sekvenci kao rezultat

dobili smo sistemske operacije koje treba projektovati. Za

ovaj primer dobijene su sledeće sistemske operacije:

ListaObrazovanja

NađiVrsteObrazovanjaPoŠifriPredmeta(Predmet);

44

ListaSmerova

NađiSmerovePoŠifriVrsteObrazovanja(VrstaObrazovanja)

;

ListaNastavnihPlanova

NađiNastavnePlanovePoŠifriSmera(Smer);

PorukaOUspešnosti ZapamtiNovoAngažovanje();

45

4.2. Projektovanje Ekranske forme

Na samom početku,

prilikom pokretanja

aplikacije otvara se prozor

za autentifikaciju korisnika.

Ovim je obezbeđen prvi

nivo zaštite od

neautorizovanog pristupa.

U slučaju pogrešno unetih

podataka za autentifikaciju

korisniku se prikazuje

poruka o grešci:

Nakon toga korisniku se

prikazuje početna strana,

sa dobrodošlicom. Maska

prozora koju čine zaglavlje

na vrhu sa osnovnim

podacima i datumom kao i

raspored boja ostaju isti u

svim delovima aplikacije.

Korisnik bira akciju iz liste

padajučih menija. Meni je

podeljen u četiri kategorije

koje odgovaraju grupama

slučajeva korišćenja kao

što je prikazano na prvom

dijagramu. Prva kategorija

jesu matični podaci. Ovde

korisnik može dobiti

osnovne podatke o:

46

Ilustracija 25 Izgled forme za autentifikaciju

Ilustracija 26 Izgled forme u slučaju pogrešno unetih podataka za autentifikaciju

Ilustracija 27 Izgled početne strane

• bankama, kao što su brojevi žiro računa, adrese,

brojevi telefona, web adrese

• korisniku, u ovom delu korisnik može promeniti

svoje podatke, kao i podatke za pristup sistemu

• teme/stilovi,

može promeniti stil

maske i pruža mu se

mogućnost da bude

zapamćena za tog

korisnika

• nastavi, ovaj

deo menija je dalje

proširiv i obuhvata

kategorije: nastavnici,

nastavne grupe,

smerovi na studijama,

nastavni plan, zvanja,

vrste obrazovanja,

ispitni rokovi,

prostorije za nastavu,

vrste nastave i

predmete.

• školskoj

godini, u okviru koje

korisnik bira da li želi

dobiti informacije o školsko godini, semestru ili tipovima

upisa semestra

47

Ilustracija 28 Izgled forme za biranje teme/stila

Ilustracija 29 Izgled forme sa menijem za izbor rada sa podacima o nastavi

Ilustracija 30 Izgled iste forme sa različitim temama

• organizacijama i vrstama organizacija, slično kao

kod banaka, korisnik može videti podatke o

organizacijama, pretraživati ih ili unositi nove podatke.

Podaci su grupisani u logičke celine radi bolje

preglednosti i očuvanja konzistentosti, pa tako imamo

matične podatke, podatke o lokaciji, kontakt podatke i

napomenu. Možemo primetiti da su tekstualni delovi svi

sa levim poravnanjem i raspoređeni su u dve kolone,

čime su ispunjeni neki od osnovnih principa tipografije.

Na sledećoj slici prikazan je izgled ovog dela aplikacije

za različite izabrane teme.

• geografski podaci, gde korisnik može pristupiti

podacima o gradovima, kao što su pozivni i poštanski

brojevi i

• ugovorima, gde se mogu gledati ugovori sa

organizacijama, potpisnici ugovora ili se zavoditi novi

ugovori.

Druga kategorija menija

je nastava. U ovom

delu korisnik može vršiti

organizaciju nastave,

voditi evidenciju o

angažovanjima

nastavnika i gledati

48

Ilustracija 31 Izgled forme za rad sa angažovanjem nastavnika

razne izveštaje vezane za nastavu. Ukoliko korisnik izabere

opciju angažovanje nastavnika, otvara se forma za

popunjavanje potrebnih podataka. Ukoliko neki podatak može

uzeti samo vrednost iz određenog seta vrednosti, onda se

unos takvog podatka vrši uz pomoć izbora odgovarajuće

vrednosti iz combo box-a. Ukoliko su neki podaci u

međusobnoj zavisnosti, kao roditelj-dete, tada je redosled

unosa bitan, prvo se unosi vrednost roditelja, pa tek onda

deteta. Korisnički interfejs obezbeđuje ovu logiku, tako što ne

nudi korisniku podatke o detetu dok ne popuni podatke o

roditelju (combo box deteta je prazan). Time je

demonstrirana interaktivnost između korisnika i sistema.

Ukoliko korisnik izabere da želi da vidi podatke o nastavi tada

se otvara pop-up prozor u okviru koga se prikazuje izveštaj o

nastavi. Izveštaji su uređeni sa zaglavljem i kolonama i

spremni su za štampanje ili kopiranje u neki drugi dokument.

Desnim klikom na izveštaj dobijaju se dodatne opcije za dalji

rad sa izveštajima.

Ilustracija 32 Izgled iskačućeg prozora sa izveštajem o rasporedu nastave

49

Ilustracija 33 Izgled forme sa spiskom svih studenata

Ilustracija 34 Izgled forme sa podacima o izabranom studentu

Treća sekcija menija je obezbeđena za rad sa studentima.

Akcije koje se mogu vršiti na studentima su: overa semestra,

upis na studije, obrada ispita i obrada radova. U okviru upisa

na studije, mogu se videti i podaci o već upisanim

studentima. Ukoliko se na formi sa praznim poljima za

podatke o studentu, klikne na dugme „Prikaži podatke“

otvara se lista studenata koji se već nalaze u bazi.

Selektovanjem jednog od ponuđenih prikazuje se prethodna

forma sa popunjenim podacima. U dnu stranice se nalaze

kontrole button za navigaciju, uz pomoć kojih korisnik može

da nastavi pregled podataka o studentima, listajući jednog po

jednog, krećući se levo-desno.

Ukoliko korisnik želi da vrši pretragu po određenim

kriterijumima, onda u ponuđenim poljima na formi unosi

poznate podatke za željene atribute i pozivom na dugme

Pojedinačni izveštaj-student dobija spisak studenata koji

odgovaraju postavljenom kriterijumu.

50

Ilustracija 35 Izgled forme sa postavljenim kriterijumom za pretragu izveštaja o studentima

Ilustracija 36 Izgled forme sa spiskom izveštaja o studentima po izabranom kriterijumu

Četvrta kategorija menija su finansije, u okviru koje se nudi

rad sa prihodima, rashodima kao i pregled vrsta prihoda i

rashoda. U svakom trenutku, u bilo kom delu aplikacije sa

desne strane se nalazi lista relevantnih linkova čime je

olakšana navigacija kroz aplikaciju. Linkovi koji se u ovom

delu prikazuju u vezi su sa podacima sa kojima se trenutno

radi.

Ilustracija 37 Izgled forme za rad sa prihodima (levo) i vrstama prihoda (desno) sa različitim temama

51

Navigacija kroz elemente grafičkog okruženja je moguća i uz

pomoć tastature, čime je povećana dostupnost (accessibility)

aplikacije.

52

5. Zaključak

Tokom rada sa Visual Studio 2003 alatima otkrio sam mnoge

mogućnosti koje to integrisano razvojno okruženje pruža.

Ovaj alat se, pre svega, ističe u lakoći programiranja i lakom

povezivanju elemenata. Njegovo okruženje je pravi primer

user-friendly korisničkog interfejsa. I pored toga što

predstavlja jedan veoma kompleksan proizvod, uspeva da

korisnika ne optereti svojom veličinom, nego da mu

transparentno pomaže u radu i olakšava korišćenje.

Okruženje .NET Framework je veoma bogato raznim klasama

za skoro svaku namenu i veoma je lako za upotrebu.

Savladavanjem osnovnih principa, lako se stečeno iskustvo

može primeniti i na ostale delove biblioteke.

Ipak postoje i neki nedostaci. Kao glavna zamerka na koju

sam naišao tokom razvoja korisničkog interfejsa za ovaj

informacioni sistem, bio je problem u vezi sa rešavanjem

konzistentnosti izgleda svih kontrola i formi kroz sve stranice

aplikacije. ASP .NET je pokazao teškoće u pravljenu tema,

koje bi očuvale konzistentnost aplikacije. Ova slabost je u

novoj verziji ASP.NET 2.0 dobrim delom otklonjena uvođenjem

tehnologije pod nazivom master pages. Na taj način se, u

velikoj meri, olakšava rad sa istovetnim ili sličnim

elementima na strani, koji lako mogu da se parametrizuju.

Drugi problem na koji sam naišao je kvalitet HTML koda, koji

generiše vizuelni dizajner strana i kontrola ugrađen u Visual

Studio 2003. Ovako generisane kontrole na ekranu u

renderovanom obliku izgledaju dobro, ali kada se pogleda u

generisani kod, tu nalazimo mnogo nepotrebnog i

redundantog koda koji nepotrebno opterećuje alikaciju i

značajno smanjuje performanse, posebno u uslovima sporije

mrežne komunikacije ili slabe propusne moći mreže.

Pažljivijim generisanjem kontrola koje se ugrađuju na web

strane ili u ekstremnom slučaju, ručnim kodiranjem HTML-a

53

tih kontrola, može se dobiti izuztetno kvalitetno rešenje koje

je značajno boljih performansi u izvršavanju preko mreže jer

je količina prenetih podataka koji služe za konstruisanje

korisničkog interfejsa svedena na manje od 30% originalne

veličine.

Ukoliko se na početku razvoja informacionog sistema, nakon

prikupljanja korisničkih zahteva oni dobro definišu, korisnički

interfejs se može već tada razvijati nezavisno od ostatka

sistema. Na taj način možemo dobrim dizajnom sistema

obezbediti mogućnost da se MVC (Model-View-Controler)

model strukture programa primeni na web aplikaciju i time

omogući nezavisna realizacija komponenata aplikacije kao

što su: korisnički interfejs, poslovna logika i čuvanje

podataka.

Ovim radom demonstrirani su neki od principa dizajniranja

korisničkog okruženja. Daljim unapređenjem se može

posvetiti veća pažnja dostupnosti (accessability ) i njegovom

prilagođavanju i drugim uređajima kao što su PDA, mobilni

telefon ili slični prenosni uređaji koji su sve popularniji.

Korisničko iskustvo je podržano mogućnošću da se bira izgled

aplikacije: moderan ili klasičan. Ovim se korisniku ostavlja

mogućnost izbora da prilagodi izgled celokupne aplikacije

svojim afinitetima, a u cilju veće udobnosti korisnika u radu.

54

6. Literatura

Wikipedia, the free encyclopedia, http ://www.wikipedia.org/

Ben Shneiderman i Catherine Plaisant, Dizajniranje

korisničkog interfejsa (Beograd: FAR i CET, 2006), str. 16

Rick Leinecker: ASP.NET Solutions – 23 Case Studies: Best

Practices for Developers, Addison Wesley, 2003

A List Apart Magazine,

http://www.alistapart.com/articles/wiwa , What Is Web

Accessability?

Designing Web Applications for Use, http://www.uie.com/

Web Style Guide, http://www.websyleguide.com

User Interface Design, http://www.usernomics.com

Usability basics, http://www.usability.gov/

Microsoft MSDN Online Library, Microsoft Corporation

Jeffrey Richter: Applied Microsoft .NET Framework

programming, Wintelect, 2003.

Siniša Vlajić, Projektovanje programa (skripta), Beograd,

2004.

G. Andrew Duthie, Microsoft ASP.NET Programming with

Visual C# .NET Version 2003 Step by Step, Microsoft Press,

2003.

B. Lazarević, Z. Marjanović, N.Aničić, S. Babarogić, Baze

podataka, FON, Beograd, 2003.

55

7. Prilog

CD sa izvornim kodom aplikacije i potrebnim softverom:

• izvorni kod aplikacije

• instalaciona verzija aplikacije

• potreban softver za izvršavanje aplikacije:

o Postgree SQL

o Microsoft .NET Framework 1.1

• arhiva baze podataka za aplikaciju

• grafičke datoteke korišćene za dizajn korisničkog

interfejsa

56

57

58