realizacija korisnickog interfejsa web aplikacije
TRANSCRIPT
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
Sadržaj
1. Korisnički interfejs..............................................................................................................4
1.1. Pojam korisničkog interfejsa.................................................................................4
1.2. Usability („upotrebljivost“) korisničkog interfejsa..................................4
1.3. Vrste korisničkog interfejsa...................................................................................6
1.4. Grafički korisnički intefejs.....................................................................................7
1.4.1. Dizajn grafičkog korisničkog interfejsa kao deo aplikacije........8
2. Web aplikacija......................................................................................................................10
2.1. Web browser................................................................................................................10
2.2. Web stranica.................................................................................................................10
2.2.1. HTML, JavaScript i CSS...................................................................................11
2.3. Troslojna arhitektura web aplikacije............................................................17
2.4. Microsoft .NET platforma.....................................................................................19
2.5. ASP.NET...........................................................................................................................21
2.6. ADO.NET.........................................................................................................................22
2.7. SQL Server.....................................................................................................................23
3. Korisnički interfejs Web aplikacije.........................................................................24
3.1. Elementi korisničkog interfejsa........................................................................24
3.2. Dizajn............................................................................................................................... 26
3.2.1 Tipografija........................................................................................................28
3.2.2 Layout................................................................................................................. 29
3.3. Interaktivnost..............................................................................................................30
3.4. Usability i Accessibility.........................................................................................31
3.5. Korisničko iskustvo..................................................................................................32
4. Realizacija korisničkog interfejsa u Microsoft .NET okruženju.............32
4.1. Korisnički zahtevi.....................................................................................................33
4.1.1. Rad sa matičnim podacima:........................................................................33
4.1.2. Rad sa nastavnicima:......................................................................................34
4.1.3. Rad sa studentima:..........................................................................................34
4.1.4. Rad sa finansijama:..........................................................................................35
4.1.5. Primer slučaja korišćenja............................................................................35
4.2. Projektovanje Ekranske forme..........................................................................40
5. Zaključak.................................................................................................................................46
6. Literatura................................................................................................................................48
7. Prilog.........................................................................................................................................49
3
4
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 zadatak u sistemu kao i lakoću upotrebe sistema,
odnosno jednostavnost vršenja inputa i interpretiranja outputa sistema.
1 Wikipedia, the free encyclopedia , http://www.wikipedia.org/ , “User Interface”
5
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 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.
2 Ben Shneiderman i Catherine Plaisant, Dizajniranje korisničkog interfejsa (Beograd: FAR i CET, 2006), str. 16
6
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.
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
7
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 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
8
Ilustracija 1 Xerox Alto računar, preteča računara sa grafičkim korisničkim interfejsom
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 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
9
Ilustracija 2 Prozor sa prikazom stabla foldera i fajlovima u Windows-u XP - primer modernog korisničkog interfejsa
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).
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
3 Wikipedia, the free encyclopedia , http://www.wikipedia.org/ , “Web application”
10
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.
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.
11
Web stranice mogu sadržati klijentski skript koji je sastavni deo
stranice. Na taj način se web stranici može pridružiti 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>
</ul>
12
</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,
<button> -- element za
definisanje komandnih
dugmadi,
<fieldset> i <legend>
za definisanje grupe
korisničkih kontrola,
13
<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;
}
]]>
</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>
14
Ilustracija 4 Primer izgleda korisničkih kontrola
<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>
</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
15
</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.
16
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
17
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 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
18
Ilustracija 7 Shema troslojne arhitekture
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.
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
19
Ilustracija 8 Troslojna arhitektura web aplikacije
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 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
20
Ilustracija 9 Komponente .NET platforme
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 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
21
Ilustracija 10 Arhitektura .NET Framwork-a
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.
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
22
keširanje što omogućava da se svaki ponovni zahtev za određenom
stranicom izvršava 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 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
4 Rick Leinecker: ASP.NET Solutions – 23 Case Studies: Best Practices for Developers, Addison Wesley, 2003
23
Ilustracija 11 Arhitektura 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 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,
24
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.
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
25
Ilustracija 12 Primer izgleda menija u web aplikaciji
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.
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.
26
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 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 interfejsa 5:
5 Wikipedia, the free encyclopedia , http://www.wikipedia.org/ , “Principles of User Interface Design”
27
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čnost Koliko je korisniku jasno
kako da korisiti element
dizajna korisničkog
interfejsa
Oznaka „guraj“ na vratima
prodavnice. Dugme na kome je
jasno naveden naziv komande
koju aktivira.
Jednostavnost 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
28
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
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.
6 Web style guide: TYPOGRAPHY , http://www.webstyleguide.com/ , Typography
29
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 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.
30
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
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.
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
7 Wikipedia, the free encyclopedia , http://www.wikipedia.org/ , “Interaction”
31
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.
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
32
Ilustracija 14 Saće korisničkog iskustva
takvom, da je korisnik u centru, i predstavlja 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
33
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:
34
Ilustracija 16 Dijagram slučajeva korišćenja u okviru rada sa podacima o nastavi
Ilustracija 15 Dijagram slučajeva korišćenja
Ilustracija 17 Dijagram slučajeva korišćenja u okviru rada sa matičnim podacima
4.1.2. Rad sa nastavnicima:
Ilustracija 18 Dijagram slučajeva korišćenja u okviru rada sa nastavnicima
35
4.1.3. Rad sa studentima:
Ilustracija 19 Dijagram slučajeva korišćenja u okviru rada sa studentima
4.1.4. Rad sa finansijama:
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.
36
SK:Slučaj korišćenja- Evidentiranje angažovanja nastavnika
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.
14. Sistem prikazuje poruku o uspešnosti.
Postuslov: Angažovanje nastavnika je zapamćeno u bazu.
37
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.
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.
38
Ilustracija 23 Izgled forme sa porukom o nedostajućim podacima
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.
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.
9 Siniša Vlajić : Projektovanje programa (skripta), Beograd, 2004.
39
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);
ListaSmerova
NađiSmerovePoŠifriVrsteObrazovanja(VrstaObrazovanja);
ListaNastavnihPlanova NađiNastavnePlanovePoŠifriSmera(Smer);
PorukaOUspešnosti ZapamtiNovoAngažovanje();
40
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:
bankama, kao što su
brojevi žiro računa,
adrese, brojevi telefona,
web adrese
41
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
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
Ilustracija 30 Izgled iste forme sa različitim temama
42
Ilustracija 28 Izgled forme za biranje teme/stila
Ilustracija 29 Izgled forme sa menijem za izbor rada sa podacima o nastavi
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 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.
43
Ilustracija 31 Izgled forme za rad sa angažovanjem nastavnika
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
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
44
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.
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.
45
Ilustracija 37 Izgled forme za rad sa prihodima (levo) i vrstama prihoda (desno) sa različitim temama
Navigacija kroz elemente grafičkog okruženja je moguća i uz pomoć
tastature, čime je povećana dostupnost (accessibility) aplikacije.
46
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 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.
47
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.
48
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.
49
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
50
51
52