XTML I CSS

Smer: Savremene računarske tehnologije
Predmet: Osnovi elektrotehnike 

SEMINARSKI RAD

UTICAJ FORME LAYONTA NA 

KORISNIČKI UX DIZAJN

Student:

Mentor:

Niš, 2018.

SEMINARSKI RAD

UTICAJ FORME LAYONTA NA KORISNIČKI UX 

DIZAJN

Mentor:

 Student:

Članovi komisije:

1. _____________________

2. _____________________

Sadržaj:

Indeks slika......................................................................................................................................................... 5
Indeks dijagrama.................................................................................................................................................5
Indeks tabela....................................................................................................................................................... 6
1. Uvod................................................................................................................................................................1
2. Šira tematika predmeta rada........................................................................................................................... 3

2.1 Definicija..................................................................................................................................................3
2.2 Vrste i razvoj korisničkih interfejsa......................................................................................................... 3

2.2.1 Komandna linija............................................................................................................................... 4
2.2.2 Tekstualni korisnički interfejs.......................................................................................................... 4
2.2.3 Grafički korisnički interfejs..............................................................................................................5
2.2.4 Web korisnički interfejs...................................................................................................................7

2.3 WIMP paradigma..................................................................................................................................... 8
2.4 Aktuelne tehnike i tehnologije................................................................................................................. 9

3. KORISNIČKI (UI) DIZAJN........................................................................................................................ 13

3.1 PRIMENA (UI) DIZAJNA....................................................................................................................13
3.2 DIZAJNIRANJE (UI)............................................................................................................................ 13
3.3 ODNOS KORISNIČKOG INTERFEJSA I KORISNIČKOG ISKUSTVA..........................................14

4. KORISNIČKI (UX) DIZAJN.......................................................................................................................15

4.1 ISTORIJA (UX) DIZAJNA................................................................................................................... 15
4.2 STRATEGIJA ( UX)  DIZAJNA...........................................................................................................15
4.3 EVALUACIJA ( UX)  DIZAJNA......................................................................................................... 17

5. Kratak opis rada............................................................................................................................................ 18

5.1 Konceptualno rešenje............................................................................................................................. 18

5.1.1 Kontekst..........................................................................................................................................18
5.1.2 Problem..........................................................................................................................................18
5.1.3 Rešenje........................................................................................................................................... 20

5.2 Softversko rešenje.................................................................................................................................. 23

5.2.1 Apstrakcija......................................................................................................................................24
5.2.2 Implementacija............................................................................................................................... 25
5.2.3 Kreiranje komponenata..................................................................................................................26
5.2.4 Lokalizovanje komponenata...........................................................................................................29
5.2.5 Primenjivanje stilova......................................................................................................................30

6. Zaključak......................................................................................................................................................32

5.1 Mogućnosti za proširenje....................................................................................................................... 33

Dodatak A: Primer napredne upotrebe.............................................................................................................35
Dodatak B: Kompletna Simple View specifikacija..........................................................................................53
Pogovor.............................................................................................................................................................59
Literatura...........................................................................................................................................................60

Indeks slika

Komandna linija.............................................................................................................................................4
Turbo okruženje za programski jezik Pascal.................................................................................................4
Macintosh operativni sistem, 1984. godina  [3].............................................................................................6
MS Windows 95, 1995. godina [2]................................................................................................................ 6
KDE4 grafičko okruženje za Linux, 2008 godina......................................................................................... 6
Korisnički interfejs web aplikacije Gmail..................................................................................................... 7
Primer jednostavne forme............................................................................................................................ 19
Uporedni primer – Zahtev zadatka...............................................................................................................30
Uporedni primer – Direktno kodiranje........................................................................................................ 34
Hijerarhija komponenata primera u NetBeans-u.........................................................................................35
Forma za lokalizovanje u NetBeans-u.........................................................................................................36
Uporedni primer - korišćenjem NetBeans alata...........................................................................................36
Uporedni primer - korišćenjem okvira.........................................................................................................41
Uporedni primer – Simple View..................................................................................................................44
Napredni primer - Prvo pokretanje..............................................................................................................60
Napredni primer - Unošenje podataka.........................................................................................................62
Odzivna poruka............................................................................................................................................ 63
Napredni primer - Lokalizovana verzija...................................................................................................... 64
Napredni primer – Verzija sa promenjenim bojama....................................................................................66
Napredni primer - Verzija sa web pretragom...............................................................................................68
Napredni primer - Rezultati web pretrage....................................................................................................69

Indeks dijagrama

Dijagram klasa MVC uzora.........................................................................................................................13
Sistemski prikaz generatora korisničkog interfejsa.....................................................................................20
Konceptualni dijagram klasa softverskog rešenja........................................................................................21
Osnovni sekvencni dijagram SwingGuiBuilder projekta............................................................................24
Dijagram klasa podsistema kreiranja komponenata.....................................................................................25
Dijagram klasa podsistema dodavanja komponenata.................................................................................. 26
Sekvencni dijagram algoritma formiranja strukture korisničkog interfejsa.................................................26
Sekvencni dijagram algoritma za lokalizovanje komponenata....................................................................27
Dijagram klasa podsistema za primenu stilova............................................................................................28
Sekvencni dijagram algoritma za primenu stilova.......................................................................................29
Napredni primer - Dijagram klasa domenskog modela...............................................................................52

1

1. Uvod

Prilikom   razvoja   softvera   redovno   rešavamo   probleme   veoma   različite   prirode.   Izrada   jednog 
tipičnog   informacionog   sistema   podrazumeva   projektovanje   baze   podataka,   podsistema   za 
komunikaciju  sa bazom,  zasebnog  dela  koji  sadrži  aplikacionu  logiku  i  napokon  projektovanje 
korisničkog interfejsa.
Za izradu nekih podsistema, dobra rešenja su pronađena i implementirana u vidu raznih alata, 
programskih   biblioteka   i   okvira.   Tako   je   moguće   nabaviti   softver   za   objektno-relaciono 
preslikavanje (kao što je 

Hibernate

), za upravljanje životnim ciklusom domenskih objekata (kao što 

je 

Spring

), kao i za obavljanje mnogih drugih poslova unutar informacionog sistema.

Nažalost, bar kada su Java tehnologije u pitanju, razvoj korisničkog interfejsa je slabo podržan, a 
mali broj veoma kvalitetnih alata i okvira za pravljenje korisničkog interfejsa najčešće je usko 
vezan za izvršnu platformu. Primera radi,  

Tapestry  

okvir je namenjen samo za web korisnički 

interfejs, a većina alata generiše kôd samo za 

Swing 

paket.

Posledica   toga   je   apsurdna   činjenica   da   je   vreme   koje   programeri   troše   na   razvoj   korisničkog 
interfejsa nesrazmerno veliko u odnosu na vreme potrošeno na rešavanje daleko bitnijih pitanja 
tokom razvoja softverskog sistema. Smatramo da dalji razvoj softverskog inženjerstva kao teorijske 
i praktične oblasti računarstva nije moguć bez adekvatnog rešenja dosadašnjih problema prilikom 
projektovanja korisničkog interfejsa.
U ovom radu su ti problemi detaljno objašnjeni i prezentovano je naše rešenje u vidu softverskog 
sistema koji generiše korisnički interfejs korišćenjem XML (eXtensible Markup Language) i CSS 
(Cascading Style Sheets) tehnologije. Model zasnovan na ovim tehnologijama omogućava upotrebu 
pogodnije   sintakse   za   projektovanje   korisničkog   interfejsa,   lakše   održavanje   tokom   vremena   i 
nezavisnost   korisničkog   interfejsa   od   konkretnih   platformi   kao   što   su   operativni   sistemi, 
programske biblioteke i okviri.
Softversko   rešenje   se   sastoji   od   platformski   nezavisne   specifikacije   korisničkog   interfejsa 
zasnovane   na   XML-u   i   CSS-u   (

Simple   View

),   i   generatora   Swing   korisničkog   interfejsa 

(

SwingGuiBuilder

).

Rad se sastoji od šest poglavlja i dva dodatka:
U prvom poglavlju je dat uvod u kome su definisani predmet i cilj rada.
U drugom poglavlju je definisan pojam korisničkog interfejsa, prikazan istorijat njegovog razvoja i 
objašnjena je WIMP paradigma na kojoj se zasniva većina grafičkih korisničkih interfejsa. Nakon 
toga su nabrojane i objašnjene postojeće tehnike za kreiranje grafičkog korisničkog interfejsa.
U trećem poglavlju su objašnjena pravila dobre prakse koja se primenjuju prilikom projektovanja 
korisničkog interfejsa.
U   četvrtom   poglavlju   je   dat   prikaz   generatora   korisničkog   interfejsa,   najpre   konceptualno   kao 
rešenje za problem u odgovarajućem kontekstu, a potom kao detaljan opis pratećeg softverskog 
rešenja.