UNIVERZITET U BEOGRADU FAKULTET ORGANIZACIONIH NAUKA ZAVRŠNI RAD REALIZACIJA KORISNIČKOG INTERFEJSA WEB APLIKACIJE MENTOR Prof. Dr Božidar Radenković KANDIDAT Veselin Ostojin 340/93
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