preuzimanje - Visoka Å¡kola za informacione tehnologije ITS

VISOKA ŠKOLA STRUKOVNIH STUDIJA ZA INFORMACIONE TEHNOLOGIJE 

Završni rad 

Razvoj web sajta Fakulteta za primenjenu ekologiju 

Futura 

Mentor: 

Student: 

Prof. Suzana Marković Kristina Naumović 111/06 

Beograd, Decembar 2008.

Razvoj web sajta Fakulteta za primenjenu ekologiju – Futura Kristina Naumović 111/06 

SADRŽAJ 

SADRŽAJ ...................................................................................................................... 2 

SPISAK KLJUČNIH REČI .................................................................................................. 4 

1. UVOD ....................................................................................................................... 5 

2. ŽIVOTNI CIKLUS RAZVOJA WEB SAJTA ........................................................................ 7 

3. ANALIZA I SPECIFIKACIJA ZAHTEVA WEB SAJTA FAKULTETA FUTURA .............................. 9 

3.1 ANALIZA TRENUTNOG WEB SAJTA FAKULTETA FUTURA ............................................ 9 

3.2 DEFINISANJE CILJEVA WEB PREZENTACIJE ........................................................... 14 

3.3 INFORMACIONE TEME ........................................................................................ 15 

3.4 TAKSONOMIJA INFORMACIJA .............................................................................. 15 

4. PROJEKTOVANJE WEB PREZENTACIJE ........................................................................ 16 

4.1 PRIMENA OSNOVNIH PRINCIPA NA ARHITEKTURU I KRETANJE ................................ 16 

4.2 PODFAZE PROJEKTOVANJA .................................................................................. 17 

4.2.1 PROJEKTOVANJE KRETANJA .......................................................................... 17 

4.2.2 STRUKTURA INFORMACIJA ........................................................................... 19 

4.2.3 PROJEKTOVANJE SADRŽAJA ......................................................................... 19 

5. WEB TEHNOLOGIJE .................................................................................................. 20 

5.1 HTML, XHTML .................................................................................................... 20 

5.2 CSS .................................................................................................................. 21 

5.3 JAVASCRIPT ...................................................................................................... 22 

5.4 WEB ČITAČI ...................................................................................................... 22 

6. DIZAJN WEB PREZENTACIJE ..................................................................................... 23 

6.1 DIZAJNIRANJE ZA KORISNIKE ............................................................................. 23 

6.1.1 KORISNOST I UPOTREBLJIVOST .................................................................... 23 

6.1.2 PRISTUPAČNOST ......................................................................................... 24 

6.2 GRAFIČKI INTERFEJS ......................................................................................... 28 

6.2.1 PRAVILA DIZAJNA INTERFEJSA ..................................................................... 28 

6.3 NAVIGACIJA ...................................................................................................... 31 

6.3.1 DOSLEDNOST NAVIGACIJE ........................................................................... 34 

6.3.2 BOOKMARKING ........................................................................................... 34 

6.3.3 FUNKCIJE LINKOVA ..................................................................................... 34 

6.3.4 DOSTUPNOST LINKOVA ............................................................................... 36 

6.3.5 STANJA LINKOVA ........................................................................................ 36 

6.3.6 POUZDANOST LINKOVA ............................................................................... 36 

6.4 LEYOUT WEB STRANICE ...................................................................................... 37 

6.4.1 TEHNIČKA PITANJA ..................................................................................... 37 

6.4.2 ALATI ZA RASPORED STRANICE .................................................................... 38 

6.4.3 ESTETSKA PITANJA ..................................................................................... 39 

6.5 BOJE ................................................................................................................ 39 

6.5.1 RGB SISTEM BOJA ....................................................................................... 39 

6.5.2 ZNAČENJE BOJA .......................................................................................... 40 

6.6 GRAFIKA ........................................................................................................... 42 

6.7 TIPOGRAFIJA ..................................................................................................... 44 

6.8 OBRASCI .......................................................................................................... 45 

7. SEO ....................................................................................................................... 45 

7.1 PRIJAVLJIVANJE NA PRETRAŽIVAČE ..................................................................... 45 

7.2 OPTIMIZACIJA ZA PRETRAŽIVAČE ........................................................................ 45 

7.2.1 GOOGLE ANALYTICS .................................................................................... 47 

8. TESTIRANJE ............................................................................................................ 48 

9. OBJAVLJIVANJE I ODRŽAVANJE ................................................................................. 49 

10. KORIŠĆENI ALATI .................................................................................................. 50 

10.1 ADOBE DREAMWEAVER CS4 .............................................................................. 50 

10.2 ADOBE PHOTOSHOP CS4 .................................................................................. 51 

10.3 ADOBE ILLUSTRATOR CS3 ................................................................................. 51 

11. ZAKLJUČAK ........................................................................................................... 52 

LITERATURA ............................................................................................................... 54 

2 / 54


Sadržaj slika 

Slika 1. Kaskadni model ................................................................................................. 7 

Slika 2. JAD Model ......................................................................................................... 8 

Slika 3. Osnovne akademske studije iz stavke “Futura” .................................................... 12 

Slika 4. Osnovne akademske studije iz stavke Akreditacija ............................................... 13 

Slika 5. Taksonomija informacija ................................................................................... 15 

Slika 6. Dijagram toka podataka .................................................................................... 18 

Slika 7. Primer tabele koja se kristi za izgled web stranice ................................................ 26 

Slika 8. Redosled pristupa ćelijama u procesu linearizacije ................................................ 27 

Slika 9. Redosled ćelija dobijen u procesu linearizacije tabele sa slike 2. ............................. 27 

Slika 10. Početna stranica web sajta Fakulteta za primenjenu ekologiju - Futura ................. 30 

Slika 11. Elementi navigacije web sajta Futura ................................................................ 33 

Slika 12. Izgled favicon.ico ........................................................................................... 34 

Slika 13. Kombinacija boja iz slike elementa voda ........................................................... 41 

Slika 14. Kombinacija boja iz slike elementa vatra ........................................................... 42 

Slika 15. Komprimovanje fajla u Fotošopu ...................................................................... 43 

Slika 16. Primer serif i sans serif fonta ........................................................................... 44 

Slika 17. Interfejs Google Analytics alata ........................................................................ 48 

Sadržaj tabela 

Tabela 1. Principi primenjeni na arhitekturu web prezentacije i kretanje po njoj .................. 16 

Tabela 2: Principi primenjeni na projektovanje sadržaja ................................................... 20 

Tabela 3. Uobičajena značenja boja u zapadnoj kulturi ..................................................... 41 

3 / 54


SPISAK KLJUČNIH REČI 

A 

B 

C 

G 

H 

I 

J 

L 

P 

R 

S 

X 

Analiza 7, 9, 33 

Boje 21, 22, 35, 36, 37 

Bookmarking 30 

CSS 9, 17, 18, 20, 22, 24, 28, 32, 

33, 34, 35, 36, 40, 43, 46 

Grafika 38 

Grafički interfejs 19, 24 

HTML 9, 16, 17, 18, 20, 22, 33, 36, 

42 

Internet Explorer 18, 28, 30, 33, 40, 43, 45 

JavaScript 18, 20, 28, 33, 43, 46 

Linkovi 9, 18, 27, 30, 31, 43, 46 

Pristupačnost 20, 21, 22 

Projektovanje 7, 12, 13, 15 

RGB sistem boja 45, 46 

SEO 41, 42 

XHTML 16, 17, 20, 28, 46 

4 / 54


1. UVOD 

Fakultet za primenjenu ekologiju – Futura, Univerziteta Singidunum je nov i osoben 

Fakultet u visokom školstvu Srbije. Prva generacija studenata primenjene ekologije je upisana 

2006. godine. U svom programu studija Fakultet objedinjuje prirodne, društvene i tehničke 

nauke usmerene ka oblasti ekologije i zaštite životne sredine. 

Kao zaposlena Fakulteta za primenjunu ekologiju na mestu informatičar, za temu 

završnog rada sam izabrala izradu fakultetskog web sajta a samim tim i unapreñenje 

prezentacije Fakulteta na Internetu. 

Trenutni web sajt Fakulteta ne predstavlja Fakultet na adekvatan način, samim tim što 

nije funkcionalan, nema odgovarajući sadržaj i nije kvalitetnog dizajna, a takoñe web sajt ne 

odgovara zahtevima korisnika. Zato je bilo potrebno uraditi nov web sajt koji će biti kvalitetan 

u pogledu funkcionalnosti, upotrebljivosti, pristupačnosti, korisnosti, profesionalnog izgleda i 

sadržaja. Takoñe je potrebno optimizovati web sajt kako bi bio vidljiv na svim pretraživačima, 

a samim tim i šire dostupan. 

Završni rad se sastoji iz 11 poglavlja, pored uvoda i zaključka, opisani su životni ciklus 

razvoja web sajta, analiza i specifikacija zahteva web sajta Fakulteta Futura, projektovanje 

web prezentacije, web tehnologije, dizajn web prezentacije, optimizacija za web pretraživače, 

testiranje, objavljivanje i održavanje, i korišćeni alati. 

Poglavlje „Životni ciklus razvoja web sajta“ opisuje usvajanje modela postupka koji 

opisuje različite faze razvoja web lokacije. Predstavljeni su modeli koji se primenjuju za 

realizaciju sledećih faza razvoja: analiza, projektovanje, implementacija, i testiranje. 

U poglavlju „Analiza i specifikacija zahteva web sajta Fakulteta Futura“, predstavljene 

su nefunkcionalnosti trenutnog web sajta, odreñeni su ciljevi web prezentacije Fakulteta, zatim 

ciljne grupe i namena web sajta Fakulteta. Prezentovane su informacione teme i taksonomija 

informacija, urañena je logička analiza sadržaja web lokacije. 

Poglavlje „Projektovanje web prezentacije“ opisuje osnovne principe projektovanja i 

njihovu primenu. Obrañeno je projektovanje sadržaja i projektovanje kretanja po web 

prezentaciji. Opisana je struktura informacija. 

U poglavlju „Web tehnologije“ opisane su tehnologije u kojima je urañen web sajt 

Fakulteta Futura – XHTML, CSS i JavaScript i opisani su web čitači. Objašnjene su prednosti i 

značaj korišćenja tih novih tehnologija. 

Poglavlje „Dizajn web prezentacije“ opisuje koliko je od značaja brinuti o potrebama 

korisnika kod dizajniranja jedne web lokacije. Objašnjeno je šta znači kada je web lokacija 

upotrebljiva, pristupačna i korisna, i koji su to parametri koji obezbeñuju ove tri osobine. 

Obrañen je dizajn interfejsa, postavljena su pravila kojih se treba pridržavati kod dizajna 

interfejsa. Zatim opisana je navigacija, objašnjeni su osnovni elementi navigacije koje jedna 

web stranica mora da sadrži. Objašnjeno je zbog čega je bitna doslednost navigacije, 

bookmarking, koje su funkcije linkova, njihova dostupnost, stanja i pouzdanost. Opisana je 

izrada rasporeda na web stranici i alati koji se koriste. Objašnjeno je korišćenje boja, njihovo 

značenje i sistemi boja. Predsavljeni su formati slika i tipografija. 

5 / 54


Sedmo poglavlje „SEO“ ili optimizacija web sajta za pretraživače (engl. Search Engine 

Optimization) opisuje sve mere koje su preduzete da bi web sajt Fakulteta bio vidljiv i visoko 

kotiran na web pretraživačima. Opisan je Google Analitycs alat kojim se prate posete na web 

sajtu. 

Poglavlje „Testiranje“ objašnjava sve načine testiranja jedne web lokacije i prikazano 

je testiranje validnosti jedne web stranice u aplikaciji Adobe Dreamweaver. 

U poglavlju „Objavljivanje i održavanje“ prikazano je nekoliko uslova koje je potrebno 

zadovoljiti kod izbora hosting servisa. Objašnjen je značaj ažuriranja web lokacije. 

U poslednjem poglavlju opisani su alati koji su korišćeni za izradu web lokacije 

Fakulteta Futura: Adobe Dreamweaver CS4, Adobe Photoshop CS4 i Adobe Illustrator CS3. 

6 / 54


2. ŽIVOTNI CIKLUS RAZVOJA WEB SAJTA 

Da bi se izradila kvalitetna web prezentacija i da bi se upravljalo razvojem, na samom 

početku projekta potrebno je usvojiti model postupka koji opisuje različite faze razvoja web 

lokacije. Idealan model omogućava da se: 

• shvati složenost prezentacije, 

• umanji opasnost od neuspeha projekta, 

• ostavi mogućnost izvesnim promenama tokom izrade projekta, 

• prezentacija isporuči brzo, i 

• da se sve vreme informiše o upravljanju projektom tokom izrade. 

Ciklus razvoja web prezentacije sastoji se iz sledećih faza: 

• Analiza 

• Projektovanje 

• Implementacija 

• Testiranje 

Postoje različiti modeli koji se primenjuju za realizaciju navedenih faza razvoja web 

prezentacije. Osnovni model postupka koji se koristi pri razvijanju web lokacija počinje od 

celine a zatim se prelazi na pojedinačne korake koji su neophodni pri izradi prezentacije. Taj 

model se u softverskom inženjerstvu često naziva kaskadni model (engl. waterfall model) ili 

životni ciklus razvoja računarskog programa. Kod ovog modela sve etape slede jedna drugu do 

samog završetka. Model se sastoji od sledećih etapa: planiranje, dizajniranje, realizacija, 

testiranje i završava se etapom održavanja. Broj koraka i njihovi nazivi nisu uvek isti ali to ne 

menja opštu ideju kaskadnog modela. 

Slika 1. Kaskadni model 

7 / 54


Modifikovani kaskadni model predstavlja model kod koga se predlaže malo duže 

zadržavanje u njegovim početnim fazama, gde se više puta ispituju namena i zahtevi web 

prezentacije, pre nego što se preñe na faze dizajniranja i realizacije. Ovaj model je koristan 

kada se pristupa izradi projekta koji sadrži dosta nepoznatih faktora. 

Model zajedničko dizajniranje aplikacije ili JAD (engl. joint application design) koji se 

još naziva i model evoluirajućeg prototipa (engl. evolutionary prototyping) zbog toga što se do 

konačnog izgleda web sajta stiže razvijanjem prototipa kroz niz koraka, funkcioniše tako što se 

prvo napravi prototip prezentacije i pokaže se klijentu ili korisniku. Od klijenta/korisnika se 

tada direktno dobijaju povrtne informacije potrebne za narednu verziju prototipa. Ovaj ciklus 

se ponavlja sve dok se ne dodje do končne verzije web sajta. 

Funkcionalnost modela zajedničko dizajniranje aplikacije je prikazana na slici br.2 

Slika 2. JAD Model 

Model koji je korišćen u izradi web prezentacije Fakulteta za primenjenu ekologiju – 

Futura je kombinacija modifikovanog kaskadnog modela i evoluirajućeg modela. 

8 / 54


3. ANALIZA I SPECIFIKACIJA ZAHTEVA WEB SAJTA FAKULTETA 

FUTURA 

3.1 ANALIZA TRENUTNOG WEB SAJTA FAKULTETA FUTURA 

Funkcionalnost: 

• Vreme učitavanja stranice (engl. loading time) je neprihvatljivo, dovodi do 

odustajanja korisnika od posete web sajtu. Veličina početne stranice (index.html) 

iznosi 15.6 KB. Kompleksnost stranice: 

1. Flash.swf – 102.26 KB, 

2. Tri slike jpg formata od po 226 KB, 286 KB i 198 KB 

Sve ukupno 17 fajlova sto iznosi 0.98 MB 

• Navigacija - postoji samo jedan meni sa leve strane, java applet koji nije u 

potpunosti funkcionalan i preobilan je 

• Onemogućen je povratak na početnu stranicu web sajta jer link ka toj stranici u 

zaglavlju nije funkcionalan 

• Nepotrebni Java Script kod u futeru koji pokazuje trenutno vreme i datum; ne 

postoje tekstualni linkovi u futeru 

• Ne postoji mapa sajta 

• Kod je pisan u HTML 4.01 Transitional jeziku koji nije najnoviji standard za izradu 

web stranica 

• Prema WC3 (engl. World Wide Web Consortium) index stranica nije validan HTML 

dokument i ima 29 grešaka i 4 upozorenja, CSS je lokalonog karaktera, nije 

validan i ima 1 grešku 

• Meta tagovi ne postoje, sem 

 

• Svaka web stranica ima isti naziv u title bar-u 

Dizajn: 

• Korišćena je tabela pri kreiranju izgleda strane što nije po današnjem standardu, 

takoñe elementi u tabeli imaju nepravilan raspored što dovodi do lošeg vizuelnog 

utiska i neupotrebljivosti 

• Početna stranica ne odaje profesionalan izgled jednog fakultetskog web sajta 

• Harmonija boja nije pravilno iskorišćena 

• Preporučeno mesto za logotip je gornji levi ugao sa ugrañenim linkom ka početnoj 

stranici, što ovde nije slučaj (logotip je na sredini bez linka ka početnoj stranici) 

9 / 54


Sadržaj: 

• Iste informacije se ponavljaju na više web stranica 

• Na više strana se nalaze različite informacije o istoj temi 

Na primer, postoje dve stranice o osnovnim akademskim studijama, jedna 

stranica se nalazi u stavci menija Futura a jedna u stavci Akreditacija. Posle 

intervjua sa studentima Fakulteta, došlo se do saznanja da im nije jasno koji 

program studija se odnosi na njih tj. po kom studijskom programu će se oni 

školovati. 

10 / 54


11 / 54


Slika 3. Osnovne akademske studije iz stavke “Futura” 

12 / 54


Slika 4. Osnovne akademske studije iz stavke Akreditacija 

13 / 54


3.2 DEFINISANJE CILJEVA WEB PREZENTACIJE 

Da bi projekat izrade web prezentacije bio uspešan potrebno je jasno definisati ciljeve 

izrade web lokacije. To je ujedno i prvi korak u realizaciji projekta izrade web prezentacije. 

Potrebno je definisati namenu lokacije, definisati broj posetilaca, zatim profil korisnika, 

ciljne grupe. Treba definisati šta web sajt treba zapravo da radi, koje informacije treba da 

pruži, na koji način treba da vrši interakciju sa posetiocima. 

Najbitnija stavka je da web sajt treba da odgovori na pitanje koja je njegova svrha, 

kome i za šta je namenjen i to mora da bude očigledno kako na početnoj stranici tako i na 

svim ostalim stranicama web sajta. 

Ciljevi izrade web sajta Fakulteta za primenjenu ekologiju Futura su: 

• Informisanje sadašnjih i potencijalnih korisnika fakultetskih usluga (sadašnjih i 

budućih studenata), stejkholdera i šire javnosti o radu, proizvodima i resursima 

Fakulteta, 

• Pomoć studentima u studiranju, 

• Promovisanje ideja, načela i principa održivog razvoja i unapreñenja kvaliteta 

životne sredine. 

Ciljne grupe: 

• Sadašnji i potencijalni studenti, 

• Kreatori mišljenja i javnog mnjenja u okruženju, stejkholderi (Univerziteti, 

državna tela i organi vlasti koji se bave pitanjima zaštite životne sredine, 

nevladine organizacije koje se bave pitanjima zaštite životne sredine, privatni 

sektor koji se bavi pitanjima zaštite životne sredine), 

• Šira javnost, itd. 

Najuža ciljna grupa su sadašnji i potencijalni studenti. 

Namena web sajta Fakulteta za primenjenu ekologiju – Futura je: 

• da servisira sadašnje i potencijalne studente, 

• da pruža informacije od značaja sadašnjim i potencijalnim domaćim i inostranim 

partnerima, 

• da povezuje studente sa interesnim stranama i donosiocima odluka na polju 

zaštite životne sredine, itd. 

14 / 54


3.3 INFORMACIONE TEME 

U okviru logičke analize odreñuje se ceo sadržaj koji će biti potreban na web lokaciji. 

Ovaj sadržaj je na nivou tema i ove informacione teme su organizovane po kategorijama. Neke 

od kategorija web lokacije Fakulteta Futura su: 

• Fakultet 

• Studije 

• Nastavno naučne jedinice 

• Budući studenti 

• Centri 

• Novosti 

• Galerija slika 

3.4 TAKSONOMIJA INFORMACIJA 

Taksonomija ili hijerarhija predstavlja logičnu analitičku podelu informacija. Na 

sledećoj slici prikazana je hijerarhija informacija za web sajt Fakulteta za primenjenu ekologiju 

Futura. 

Slika 5. Taksonomija informacija 

15 / 54


4. PROJEKTOVANJE WEB PREZENTACIJE 

Postoje četiri osnovna principa koji predstavljaju temelje za projektovanje kretanja na webu, 

kao i sadržaja web prezentacije. Ti principi su: 

• Podela informacija na grupe – grupisanje informacija u male delove od 4-6 

elemenata 

• Relevantnost – u istu grupu uključiti samo one elemente koji su isti; izuzetii 

nebitne elemente 

• Označavanje – označiti svaku grupu 

• Konzistentnost – predstavljati informacije na konzistentan način 

4.1 PRIMENA OSNOVNIH PRINCIPA NA ARHITEKTURU I KRETANJE 

Princip 

Primenjen na arhitekturu web prezentacije i kretanje po njoj 

Podela 

informacija na 

grupe 

- Potrebno je da se prezentacija organizuje u grupe koje su vidljive 

- Vidljiva struktura web prezentacije i putanje kretanja moraju da 

budu usaglašeni sa opažajnim ograničenjima 

Relevantnost 

- Svaki deo ili grupa web prezentacije treba da sadrži samo one 

elemente koji su bitni za tu grupu ili deo 

- Nebitni elementi se prebacuju na neko drugo mesto ili se brišu 

Označavanje 

- Iskoristiti označavanje da se napravi arhitektura prezentacije koja 

će za korisnika biti jasna i intuitivna 

- Izbegavati oznake kao što su prethodni, sledeći, gore, dole, jer 

mogu dovesti do toga da korisnik zaluta 

Konzistentnost 

- Koristiti konzistentno kretanje, na primer dugme Kontakt treba da 

bude iste veličine i na istom mestu na svakoj stranici web 

prezentacije 

Tabela 1. Principi primenjeni na arhitekturu web prezentacije i kretanje po njoj 

16 / 54


4.2 PODFAZE PROJEKTOVANJA 

Projektovanje može da se dodeli na dve podfaze: 

• Projektovanje kretanja 

• Projektovanje sadržaja 

4.2.1 PROJEKTOVANJE KRETANJA 

Izrada dijagrama toka kretanja omogućava da se dobije slika arhitekture prezentacije i 

različitih putanja kojima korisnik može da se kreće po prezentaciji. Na sledećoj slici je prikazan 

dijagram toka podataka web prezentacije Fakulteta za primenjenu ekologiju Futura. 

17 / 54


Slika 6. Dijagram toka podataka 

18 / 54


4.2.2 STRUKTURA INFORMACIJA 

Da bi projekat web prezentacije bio uspešan potrebno je pružiti korisniku struktuiranu 

prezentaciju i dobre kontrole za kretanje. Da bi se ovo postiglo potrebno je: 

• Napraviti intuitivnu strukturu prezentacije 

• Omogućiti korisniku da vidi tu strukturu, čak i ako ta struktura izgleda intuitivno 

• Pružiti korisnicima informacije o položaju, na taj način oni znaju gde su i kuda 

mogu da odu 

• Pružiti korisniku jasne, konzistentne metode kretanja 

Organizacija kretanja na webu može biti: 

• Sekvencijalna 

• Hijerarhijska 

• Asocijativna 

• Kombinacija prethodnih 

U projektovanju web prezentacije Fakulteta za primenjenu ekologiju Futura korišćena 

je hijerarhijska struktura i ona podrazumeva matičnu stranu sa menijem hiperveza ka nižim 

nivoima detalja na sledećim stranama. 

4.2.3 PROJEKTOVANJE SADRŽAJA 

U Tabeli 2 je prikazana primena osnovna četiri principa na projektovanje sadržaja web 

lokacije. 

Princip 

Primenjen na sadržaj web prezentacije 

Podela 

informacija na 

grupe 

- Korisnici ne vole da čitaju, više im odgovara da brzo pregledaju 

web stranicu 

- Čitaoci će provesti tri do četiri sekunde na web stranici da bi 

pronašli nešto korisno 

- Podela informacija na grupe od četiri do šest elemenata pomaže 

korisnicima da lakše pronañu i koriste informacije 

- Potrebno je koristiti podelu informacija u grupe na svakom nivou 

web prezentacije tako da organizacija web prezentacije bude 

vidljiva – u tom slučaju korisnik će smatrati prezentaciju 

intuitivnom 

Relevantnost 

- Samo ono što je relevantno se stavlja zajedno 

- Nebitne stvari zbunjuju čitaoca i brzo smanjuju kredibilitet web 

prezentacije 

19 / 54


Označavanje 

- Označavanje informacija obezbeñuje brz način da čitalac pristupi 

informacijama 

- Oznaka treba da bude jasna, precizna i da opisuje prirodu 

informacija u grupi 

Konzistentnost 

- Konzistentna terminologija i konzistentno predstavljanje i raspored 

informacija doprinose boljem razumevanju 

- Bilo koja promena terminologije trebalo bi da odražava drugačiju 

prirodu informacija 

Tabela 2: Principi primenjeni na projektovanje sadržaja 

5. WEB TEHNOLOGIJE 

Tehnologije izrade web lokacija se brzo menjaju. Otkako je web postao popularan, 

osnovna tehnologija, HTML jezik je značajno redefinisan više puta, postoje verzije 2.0, 3.2, 4.0 

i najnovija XHTML. Nedostatak stabilne i dobro podržane tehnologije je veliki problem pri izradi 

web lokacija. Uvek postoji dilema da li koristiti najnovije tehnologije i suočiti korisnike sa 

stranicama koje im saopštavaju da moraju preuzeti najnoviji čitač ili pak neki dodatak, ili 

praviti web lokacije koje ne koriste napredne tehnologije, koje se korisnicima najverovatnije 

neće dopasti. Stručnjaci predlažu korišćenje novih tehnologija ako mogu ispravno da se 

iskoriste i donose nova zanimljiva svojstva. 

5.1 HTML, XHTML 

HTML je jezik za označavanje hiperteksta (engl. Hypertext Markup Language), to je 

računarski jezik i predstavlja suštinu World Wide Weba. Pri pravljenju web lokacija, HTML se 

koristi za unos teksta, slika, animacija, zvuka i videa na pojedinačne web stranice koje 

sačinjavaju lokaciju. HTML omogućava i da se unese hipertekstualna veza i interaktivna 

dugmad koji web stranice povezuju s drugim stranicama na web lokaciji i drugim lokacijama 

širom sveta. 

Pošto Web server pošalje Web stranicu računaru posetioca, čitač prevede HTML u 

datoteci stranice i prikaže u prozoru čitača sadržaj te datoteke kao tekst i slike. Web serveri i 

web čitači za komunikaciju koriste protokol za prenos hiperteksta (engl. HyperText Transport 

Protocol, HTTP). Ovaj protokol, izmeñu ostalog, odreñuje način na koji čitači i serveri šalju 

poruke kao i strukturu samih poruka. 

Kao i svaka tehnologija, HTML pokazuje znake starenja. Iako je dobro poslužio svrsi, 

to je uvek bio donekle nezgrapan jezik. Izmeñu ostalog, u oznakama je dozvoljena upotreba 

velikih slova, malih slova ili njihove kombinacije (na primer, ispravno je i ) i 

nezatvorene oznake (pa se pasus može obeležiti pomoću jedne oznake bez završne 

oznake ). Ova fleksibilnost možda olakšava izradu strana, ali otežava rad čitačima, PDA 

ureñajima i drugim tehničkim pomagalima koja moraju da rade s podacima sa Weba. Takoñe, 

HTML ne radi s jednim od najpopularnijih novih Internet jezika: XML ili ExtensibleMarkup 

Language. Da bi se održavao korak s vremenom, napravljena je poboljšana verzija HTML-a 

pod nazivom XHTML, ona se koristi na sve više web lokacija. 

20 / 54


XHTML nije revolucionaran nov jezik, to je u osnovi HTML, ali sa strožim smernicama. 

Da bi XHTML datoteka bila kompatibilna sa XML-om, potrebno je zapamtiti nekoliko strogih 

pravila: 

• Strana počinje deklaracijom tipa dokumenta i imenskim prostorom. To je 

prvih nekoliko redova u kodu web stranice. Oni pokazuju kog je tipa strana i 

upućuju na datoteke na mreži koje sadrže definicije za taj tip datoteke. 

 

 

• Oznake i atributi oznaka moraju da budu napisani malim slovima. Za 

razliku od HTML-a, u XHTML-u je neispravno napisati oznaku . Ona mora 

da bude napisana malim slovima: 

• Atributi oznaka moraju biti pod navodnicima. Na primer, veza napisana na 

sledeći način: važi u HTML-u, ali ne radi u 

XHTML-u. Vrednost svojstva href moraju se okružiti navodnicima: 

 

• Sve oznake (čak i prazne) moraju da budu zatvorene. Na primer, da bi se 

napravio pasus na XHTML jeziku, on mora da počne oznakom , a da se završi 

oznakom . Meñutim, neke oznake nisu u parovima. Te oznake, poznate i kao 

prazne oznake (engl. empty tags), nemaju završnu oznaku. Primer je oznaka za 

prekid reda. Da bi se zatvorila praznu oznaka, mora se otkucati kosa crta na kraju 

oznake, na sledeći način: . 

5.2 CSS 

CSS je skraćenica od Cascading Style Sheets. CSS je jezik za oblikovanje koji se 

koristi za poboljšavanje izgleda teksta, sofisticirano rasporeñivanje elemenata na strani i, 

uopšteno, za davanje stila web lokaciji. Primarna funkcija CSS-a je da odvoji prezentaciju 

stranice od njene strukture. Prezentacija ima veze sa „izgledom“ stranice, dok je struktura 

vezana za „značenje“ sadržaja stranice. H1 tag definiše da tekst unutar njega predstavlja 

naslov i da ovaj tekst ima odreñeno specijalno značenje. Bez obzira da li je naslov plav, crven, 

veliki, mali, iskošen ili bilo šta drugo, to ima veze sa njegovom prezentacijom. Važno je da se 

razdvoji sadržaj i njegovo predstavljanje. 

Stilovi se čuvaju ili u eksternim fajlovima sa ekstenzijom .css (XHTML standard), ili su 

interni gde se vezuju samo za jednu stranicu kojoj pripadaju ili se pišu inline, tj. u okviru taga 

samog elementa (što nije XHTML standard). 

Prednost korišćenja eksternog CSS fajla je što on omogućava promenu stilova na više 

stranica istovremeno. Na primer ako je u eksternom CSS fajlu stoji da pozadina stranice bude 

bela, ona će biti bela na bilo kojoj stranici koja je sa ovim fajlom prethodno bila povezana, i 

21 / 54


ako se nakon toga u istom CSS fajlu promeni boja pozadine u crnu ona će istovremeno postati 

crna na svim tim stranicama. Ovakva dinamičnost može se postići i kada su u pitanju fontovi, 

boje, linkovi, pozicije, dimenzije, itd. 

5.3 JAVASCRIPT 

JavaScript je programski jezik koji se interpretira, sa objektno orijentisanim (OO) 

mogućnostima. Po sintaksi, jezgro jezika JavaScript slično je jezicima C, C++ i Java, s 

programskim konstrukcijama kao što su naredba if, petlja while i operator &&. Meñutim, ova 

sličnost se završava sa sintaksom. JavaScript je slabo tipiziran jezik, što znači da se za 

promenljive ne mora definisati tip. Objekti u JavaScriptu preslikavaju (mapiraju) imena 

svojstava u proizvoljne vrednosti svojstava. Zbog toga su sličniji heš tabelama ili asocijativnim 

nizovima (u Perlu) nego strukturama (u C-u) ili objektima (u jezicima C++ ili Java). 

Mehanizam OO nasleñivanja u JavaScriptu zasnovan je na prototipovima, kao u malo 

poznatom jeziku Self. On je potpuno različit od nasleñivanja u jezicima C++ i Java. 

Kao i Perl, JavaScript je jezik koji se interpretira i nadahnut je Perlom u mnogim 

oblastima, kakve su regularni izrazi i mogućnosti rada s nizovima. Jezgro (engl. core) jezika 

JavaScript podržava brojeve, znakovne nizove (engl. strings) i logičke vrednosti kao osnovne 

tipove podataka. Osim toga, ono ima ugrañenu podršku za objekte kao što su nizovi (engl. 

arrays), datumi i regularni izrazi. 

JavaScript se najčešće koristi u web čitačima, pa se jezgro opštenamene proširuje 

objektima koji omogućavaju skriptovima interakciju s korisnikom, upravljanje čitačem i izmene 

sadržaja dokumenta koji se pojavljuje unutar prozora čitača. Ova ugrañena (engl. embedded) 

verzija JavaScripta izvršava skriptove koji su ugrañeni u HTML web stranice. To se obično zove 

klijentski (engl. client-side) JavaScript, da bi se naglasilo kako se skriptovi izvršavaju na 

klijentskom računaru, a ne na web serveru. Jezgro jezika JavaScript i njegovi ugrañeni tipovi 

predmet su meñunarodnih standarda, i veoma je dobra kompatibilnost različitih 

implementacija. Neki delovi klijentskog JavaScripta zvanično su standardizovani, neki su de 

facto standardi, a ostali predstavljaju proširenja koja zavise od čitača. Kompatibilnost izmeñu 

različitih čitača značajna je za programere koji koriste klijentski JavaScript. 

U web prezentaciji Fakulteta Futura JavaScript je korišćen za izradu globlnog menija i 

to samo da bi obezbedio pravilno prikazivanje drop down menija u Internet Exploreru 6. 

5.4 WEB ČITAČI 

Da bi išli u korak s tržištem koje se stalno menja i učinili Internet pristupačnim 

svakome, Microsoft i Netscape su za sve platforme i operativne sisteme koji se na tržištu mogu 

naći napravili verzije svojih web čitača. Pored Internet Explorera i Netscape Navigatora postoje 

još i Mozila Firefox, Opera, Safari i drugi web čitači. Da bi prikazao web stranicu, čitač prevodi 

HTML kod, a marka i verzija čitača koji posetioci web lokacije koriste odreñuju koje će 

karakteristike HTML-a kod njih raditi. To znači da od verzije čitača zavisi šta će posetilac imati 

na ekranu ako web lokacija nije optimizovana za sve čitače. Web lokacija Fakulteta Futura je 

optimizovana za sve pomenute web čitače i sve njihove verzije. 

22 / 54


6. DIZAJN WEB PREZENTACIJE 

6.1 DIZAJNIRANJE ZA KORISNIKE 

Najbitniji detalj kod izrade web prezentacija je voditi računa o potrebama korisnika 

lokacije. Ključ uspešno dizajnirane upotrebljive web lokacije je da se ona posmatra sa gledišta 

korisnika. 

„Dizajniranje sa aspekta korisnika jeste izraz koji se odnosi na proces dizajniranja koji 

uvek u prvom planu ima korisnika.“ 1 

6.1.1 KORISNOST I UPOTREBLJIVOST 

Korisnost je funkcionalnost web prezentacije koja izlazi u susret potrebama korisnika, 

a upotrebljivost se odnosi na sposobnost korisnika da koristi lokaciju kako bi postigao odreñeni 

cilj. Upotrebljive lokacije se mogu definisati kao efikasne, na njima se snalazi lako, 

omogućavaju korisnicima da bez grešaka i zadovoljavajuće postignu svoj cilj. 

Upotrebljivost (engl. Web usability) čine sledeće komponente: 

• Mogućnost brzog korišćenja (pregledanja) web stranice – Koliko jednostavno 

korisnik postiže jednostavne zadatke na web stranici koju prvi put pogleda 

• Efikasnost – Posle početnog upoznavanja sa dizajnom web stranice, koliko brzo 

korisnik može izvoditi zadatke pretraživanja informacija na stranici 

• Memorabilnost – Ako se korisnik vrati na web stranicu nakon odreñenog 

vremenskog perioda nekorišćenja iste, koliko jednostavno može ponovno 

iskoristiti stečena znanja/veštine na web stranici 

• Minimiziranje grešaka – Koliko grešaka čine korisnici, koliko su ozbiljne te greške i 

mogu li se korisnici jednostavno i brzo oporaviti od tih grešaka i nastaviti koristiti 

web stranicu 

• Zadovoljstvo – Da li je ugodno koristiti grafički interfejs web stranice 

Najbitnije stavke koje je potrebno obezbediti u web prezentaciji da bi ona bila 

uspešna: 

• Jasno prezentovati najbitnije sadržaje stranice – Na početnoj stranici (engl. home 

page) treba prezentovati jasno i kvalitetno najbitnije sadržaje 

• Gde, šta, kako i zašto – Na početnoj stranici korisnik treba dobiti odgovore na 

ova pitanja: Gde sam Koje sadržaje mogu ovde pronaći O čemu je reč na ovoj 

stranici Šta mogu raditi na ovoj stranici Kako mogu pronaći odreñenu 

informaciju 

1 Powell, Thomas A. Web design: The complete reference, The McGraw-Hill Companies, 2000 

23 / 54


• Konzistentnost – Najbitnije elemente na stranici npr. logo, navigacija, footer, 

search page i sl. prikazati na konzistentan način - uvek na istom mestu na stranici 

i na isti vizuelni način 

• Samo čitljiv tekst je koristan tekst – Koristiti tamni tekst na beloj pozadini za 

maksimalan kontrast odnosno maksimalnu čitljivost 

• Pozadina stranice (engl. Page background) – Koristiti jednostavne i blage pozadine 

na stranicama 

• Opisati svaku sliku – Koristiti ALT tagove za sve slike, a najviše za navigaciju koja 

je napravljena u slikama 

• Navigacija je ključ – Postaviti navigaciju na isto mesto na svakoj web stranici 

• Preglednost - Poravnati sve elemente na stranici (tekst, logo, navigacija i sl.) zbog 

bolje čitljivosti i preglednosti 

• Jezik pisanja jasan i razumljiv – Koristiti jasan i razumljiv jezik pisanja sadržaja 

• Web standardi - pridržavati se web standarda (XHTML, CSS, JavaScript, DOM, 

XML) 

Svaka od ovih stavki je uspešno primenjena na web lokaciju Fakulteta za primenjenu 

ekologiju Futura. 

6.1.2 PRISTUPAČNOST 

Pristupačnost Web sadržaja se ogleda u dostupnosti tog sadržaja ljudima sa 

invaliditetom ili nekim drugim funkcionalnim ili situacionim ograničenjima. Pristupačan sadržaj 

mora biti kompatibilan sa pomoćnim tehnologijama koje koriste ljudi sa invaliditetom, posebno 

sa ekranskim čitačima. Mora postojati alternativa za vizuelni sadržaj, za ljude koji ne vide, i 

alternativa za audio sadržaj, za ljude koji ne čuju. 

Konzorcijum W3C je zagovornik projektovanja što pristupačnijih web lokacija i 

podržava inicijativu za pristupačnost na Webu – WAI (Web Accessibility Initiative). Ova 

inicijativa ne preporučuje samo pristupačnost lokacija hendikepiranim osobama već i pravljenje 

lokacija pristupačnih bilo kome ko radi u uslovima drugačijim od onih koje je web dizajner 

usvojio kao „normalne“. Pod ovim se podrazumeva da možda korisnici nemaju monitor iste 

veličine kao dizajner, možda nemaju toliko brz Internet kao dizajner a i obrnuto. 

Iz WAI uputstva proizilazi da je potrebno uvek misliti na to da korisnici mogu da imaju 

ograničenja u radu drugačija od dizajnera web sajta. 

Preporučeni elementi W3C konzorcijuma primenjeni na dizajn web sajta Fakulteta za 

primenjenu ekologiju Futura: 

• Deklarisanje tipa i jezika HTML dokumenta 

24 / 54


Meta jezik kojim se opisuje Web strana je HTML (Hypertext Markup Language). On se 

sastoji od tagova . Većina tagova ima i svoj par, koji označava kraj taga 

. Sadržaj je smešten izmeñu otvorenog i zatvorenog taga. 

Tip dokumenta se navodi kroz DOCTYPE tag, koji se piše pre otvorenog html taga. 

Najnoviji standard za tip dokumenta je: 

Ovaj dokument je definisan kao XHTML 1.0 Strict i taj tip obuhvata niz pravila i 

preporuka za pisanje ispravnog koda. Neki od najvažnijih odlika su odvajanje sadržaja od 

prezentacije i pravilna struktura. Svaka stranica web sajta Fakulteta Futura je validan XHTML 

1.0 Strict dokument. 

• Tekstualni ekvivalenti za slike 

Svaki HTML tag koji prikazuje sliku tag, treba da sadrži alternativni tekstualni 

opis i on se zadaje preko „alt“ atributa. Vrednost alt atributa će biti korišćen u sledećim 

slučajevima: 

• ekranski čitač će tu vrednost pročitati naglas ili poslati brajevom 

displeju, 

• biće prikazana umesto slike u grafičkom pretraživaču, u slučaju da slika 

nije pronañena na zadatoj lokaciji, 

• biće prikazana umesto slike u grafičkom pretraživaču ako je učitavanje 

slika isključeno, 

• alt tekst koriste Web spajderi, pri indeksiranju sajta, što može doprineti 

boljem rangu na pretraživačima. 

Jedan od primera korišćenja alt atributa u web prezentaciji Fakulteta Futura: 

• Saopštavanje i prikaz informacija bojom 

Boja može da poboljša doživljaj koji korisnik ima kada poseti sajt. Ona se koristi da 

skrene pažnju, da naglasi, da odvoji celine. Pa ipak, ima slučajeva kada nepažljivo korišćenje 

boja može biti uzrok nepristupačnosti sajta. Web lokacija može biti nepristupačna ljudima koji 

ne mogu da razlikuju boje, ili imaju problema sa opažanjem boja, ali i ljudima koji imaju slabiji 

vid. Obezbeñivanje pristupačnosti ovde ne zahteva prestanak korišćenja boja na stranici. Boja 

svakako doprinosi upotrebljivosti sajta, ako je dobro primenjena. Samo boja ne treba da bude 

jedino sredstvo kojim se ističe neka informacija. 

Bitno je osigurati da su svi objekti od značaja na web stranici jasni i bez upotrebe 

boje. Objekti od značaja su: 

• tekst, 

• linkovi, 

25 / 54


• navigacija, 

• delovi interfejsa (kao što su slikovna dugmad), 

• slike koje prenose neke informacije, a nisu samo čisto dekorativne. 

Neke od metoda kojima se može obezbediti pristupačnost elemenata a primenjene su 

na web lokaciju Fakulteta Futura: 

• korišćenje dodatnih elemenata za isticanje informacije, 

• korišćenje vidova isticanja kao što su veličina, raspored elementa, 

• izbegavanje korišćenja naziva boja kao reference na element 

• pažljiv odabir boja. 

• Kontrast 

Pored brige o korišćenju samo boje za isticanje informacije, treba voditi računa i o 

kontrastu na stranicama. Ako su nijanse pozadinske boje i boje slova bliske, te stranice neće 

imati dovoljno kontrasta. To može da postavlja problem ljudima sa poremećajima u opažanju 

boja ili korisnicima sa monohromatskim displejom. 

Takoñe treba posebno voditi računa o tome da korisnici mogu podesiti njihove 

pretraživače za prikazivanje boja nekih elemenata strane (pozadina, tekst..) i zbog toga 

obavezno treba uz pomoć CSS dokumenta odrediti boje i teksta i pozadine. 

Kod za pozadinsku belu boju: html { background: #fff; } 

Kod za tekst na web stranicama tamno sive boje: body { color:#666666; } 

• Kreiranje pristupačnih tabela 

HTML tabele su se ranijih godina puno upotrebljavale za postavljanje izgleda web 

stranica. Po savetima W3C postavljanje web stranice se isključivo dizajnira uz CSS a tabele se 

koriste za ono, zašta im i jeste namena, a to je za čuvanje tj. prikaz tabelarnih podataka. 

Ranijih godina, mada i danas ne retko sreće se korišćenje tabela za postavljanje 

izgleda strane. Često se u takvim tabelama koriste parametri colspan i rowspan, koji služe za 

spajanje ćelija, tj. za prostiranje ćelija duž onoliko kolona/redova navedenih u vrednosti 

colspan i rowspan. 

Slika 7. Primer tabele koja se kristi za izgled web stranice 

26 / 54


Ekranski čitači prevode tabele s leva na desno, od vrha ka dnu tabele. Ovaj metod se 

naziva linearizacija. 

Slika 8. Redosled pristupa ćelijama u procesu linearizacije 

Korišćenje span-a tj. raspona za ćelije utiče na to kako će čitač pročitati tabelu. 

Osnovno pravilo je da sve u ćeliji biva pročitano (nezavisno od njenog opsega) kada se na 

ćeliju (polje) prvi put naiñe. 

Slika 9. Redosled ćelija dobijen u procesu linearizacije tabele sa slike 2. 

Ovakva linearizacija strane nije pogodna, jer korisnik do samog sadržaja strane, koji 

je i najbitniji, stiže tek na kraju. 

Prilikom dizajna web lokacije Fakulteta za primenjenu ekologiju Futura tabele su 

korišćene jedino za tabelarne prikaze, za prikaze programa studija. Takoñe kod tabela je 

potpuno prilagoñen najnovijem standardu koji predlaže: 

Da bi se tabela učinila pristupačnom treba učiniti sledeće: 

1. koristiti tag (tag za zaglavlja tabele) u tabeli umesto za polja 

koja predstavljaju zaglavlja tabele 

2. koristiti summary atribut za duža objašnjenja tabele 

3. povezati ćeliju tabele sa odgovarajućim zaglavljem, preko scope, id ili 

header atributa. 

Primer koda stranice osnovne-program.html 

27 / 54


 

 

 

Rb. 

Naziv predmeta 

…. 

 

 

 

 

I 

semestar 

 

 

1. 

… 

 

 

 

Bitno je istaći da su sve gore navedene tehnike namenjene samo za tabele koje sadrže 

podatke. Ako se tabela koristi za postizanje izgleda stranice, ove tehnike ne treba koristiti. 

Tagovi za zaglavlja, summary atribut, povezivanje ćelija scope atributom, bi u ovom drugom 

slučaju mogli samo još više zbuniti korisnike sa nestandardnim browserima. Ove tehnike su 

malo vremenski zahtevnije, ali koristi koje će imati osobe koje koriste čitače ekrana ili druge 

pomoćne tehnologije su velike. Takoñe u dizajnu web sajta Fakulteta Futura, dodatna struktura 

i markup su korišćeni da bi se preko CSS-a tabele dodatno stilizovale, i učinile privlačnijim i 

razumljivijim svim korisnicima. 

6.2 GRAFIČKI INTERFEJS 

Na webu nema priznatih standarda za dizajn interfejsa. Pojedina pravila su se 

spontano pojavila, jednim delom pod uticajem inovacija koje su uveli proizviñači čitača (engl. 

browser), a jednim delom kao nasleñe ideja dizajna grafičkog interfejsa softverskih aplikacija. 

Za web dizajnera je najbitnije razumeti pravila dizajna grafičkog okruženja jer se većina njih 

može primeniti na web dizajn. 

6.2.1 PRAVILA DIZAJNA INTERFEJSA 

1. Težiti doslednosti. Uvek treba težiti doslednom redosledu akcija u sličnim 

situacijama, zatim identičnoj terminologiji u menijima, kao i doslednim bojama, izgledu, 

fontovima i upotrebi velikih slova. 

2. Težiti univerzalnoj upotrebljivosti. Prepoznati potrebe različitih korisnika, 

razlike u iskustvima i znanju korisnika, njihovoj starosti, sposobnostima, kao i tehnološke 

različitosti. Sve ovo povećava zahteve koji se stavljaju pred dizajn. 

28 / 54


3. Ponuditi povratne informacije. Svaku akciju korisnika treba da prati 

odgovarajuća povratna akcija sistema. Kod čestih i manje bitnih akcija odgovor sistema treba 

da bude diskretan, a kod retkih i veoma bitnih, jasan i nesumnjiv. 

4. Sprečiti greške. Koliko je god to moguće dizajnirati sistem tako da korisnici ne 

mogu da naprave ozbiljne greške. Na primer, u formama ne dozvoliti upis brojeva tamo gde se 

upisuju slova. Ukoliko korisnik pogreši, interfejs treba to odmah da ustanovi i ponudi 

jednostavna, konstruktivna i konkretna uputstva za prevazilaženje grešaka. 

5. Podrška internog mesta kontrole. Korisnici žele da imaju utisak kompletne 

kontrole i korisnik treba da bude taj koji upravlja. Ali u zavisnosti od namene web lokacije u 

mnogim situacijama potrebno je korisnika voditi. 

6. Estetska celovitost. Interfejs mora biti jasan i prijatan za oko, dizajn treba da 

bude dosledan a ono što je različito treba jasno i istaći. Korisnicima kojima se ne sviña izgled 

lokacije vrlo brzo osuñuju i napuštaju lokaciju. 

7. Kvalitetan sadržaj. Najbitnije je da sadržaj mora da bude tačan. Zatim sadržaj 

mora da bude kvalitetan i dobro napisan, jasan i čitljiv. 

8. Svest o vremenu. Jedna od bitnijih stavki kod dizajniranja interfejsa za web je 

voditi računa o vremenu. Trajanje isporuke je najbitniji aspekt web lokacije. Korisnici ne 

opraštaju neefikasnu isporuku sadržaja. Takoñe, pravovremeno ažuriranje interfejsa i sadržaja 

je bitno kod web lokacija. 

Ovo su samo neki od principa koje Apple postavio za dizajniranje korisničkog 

interfejsa, koji imaju izuzetan značaj za dizajniranje savremenog GUI-a (engl. Graphical User 

interface), a koji su primenjeni na dizajniranje interfejsa web lokacija; neka pravila treba 

podesiti za web a treba dodati i neka nova jer je web drugačiji medijum od softvera. 

Kod dizajniranja korisničkih interfejsa za web, na uspeh kod korisnika nailaze modeli 

sa informativnom arhitekturom i navigacijom. Za korisnike weba moglo bi se reći da su 

„gladni“ informacija, što daje na značaju „aromi informacija“ koju predstavljaju hiperveze. 2 

Visokokvalitetna hiperveza, povezana sa konkretnim zadatkom, daje korisniku dobru indikaciju 

onoga što se nalazi na njenom drugom kraju. Na primer, za korisnike koji pokušavaju da 

pronañu izvršnu demonstraciju nekog softvera, hiperveza sa tekstom „preuzmi demo“ 

predstavlja dobru indikaciju. Potrebno je dobro upoznati zadatke koje će korisnici izvršavati, i 

napraviti web lokacije na kojima će korisnici lako pronalaziti svoje odredište, čak i ako je ono 

nekoliko koraka udaljeno od početne stranice. 

2 Pirolli, Designing the user interface, Person education, 2005 

29 / 54


Slika 10. Početna stranica web sajta Fakulteta za primenjenu ekologiju - Futura 

30 / 54


6.3 NAVIGACIJA 

Posetioci web sajta koriste navigaciju da bi se kretali kroz njegov informacioni prostor. 

Navigacija treba da pomogne korisnicima da shvate gde se nalaze, da odluče kuda žele da idu i 

da nauče kako da stignu na neko drugo mesto. Vidljivost elemenata navigacije, njihovo 

označavanje i raspored služe da bi se korisnik bolje snašao. 

Pod navigacijom se podrazumeva skup linkova, predstavljen tekstualno ili grafički, koji 

su u svakom trenutku prisutni i mogu odvesti na glavne delove sajta. Sa svake podstranice 

treba da bude dostupna svaka druga sekcija i jasno naglašena mogućnost povratka na 

prethodnu ili osnovnu stranicu. Postavljanje elemenata navigacije na web stranicu nije samo 

stvar ukusa već utiče i na upotrebljivost web prezentacije. Postoji pet glavnih mesta za 

postavljanje navigacije: gornja, donja, leva, i desna ivica i centar stranice. 

Svaka web stranica jedne web prezentacije mora sadržati sledeće osnovne elemente 

navigacije: 

• Identifikacija web sajta (logo, ime,..) i identifikacija stranice (naslovna 

linija i zaglavlje stranice). Ne može se samo osloniti na početnu stranicu da 

pruža orijentaciju posetiocima, jer to nije jedina stranice na koju posetioci stižu. 

Preko pretraživača ili linkova sa drugih sajtova posetioci mogu stići na neku drugu 

stranicu web sajta koja se nalazi na nižem nivou (duboko linkovanje) i zato je 

potrebno da oni na svakoj stranici web sajta imaju predstavu gde se nalaze. 

• Kontakt. Link ka stranici sa kontakt informacijama, brojevi telefona, ulica i broj, 

email adrese. 

• Link ka početnoj stranici. Iako identifikacija web sajta (logo) može poslužiti kao 

link ka početnoj stranici, na sajtu takoñe mora postojati eksplicitan „Home“ link. U 

svakom trenutku korisnik mora imati mogućnost da se samo jednim klikom vrati 

na početnu stranicu web prezentacije. 

• Linkovi ka glavnim stranicama ispod home stranice. Ovi linkovi zajedno sa 

home stranicom se nazivaju globalna navigacija zato što se oni nalaze na svakoj 

stranici web sajta. 

Pored ovih elemenata preporučljivo je da web stranice takoñe sadrže: 

• Lokalnu navigaciju. Navigacija za subsekcije ispod tekuće stranice. 

• Mapu sajta (engl. Site map). Mapa koja omogućava korisniku da lakše pronañe 

željene stranice na web sajtu. 

• Search funkciju. Ona je jako bitna za obimne sajtove više nego za male web 

prezentacije. 

Na web prezentaciji Fakulteta za primenjenu ekologiju Futura primenjena je globalna 

navigacija – horizontalni padajući meni (engl. Horizontal drop-down menu), lokalna navigacija 

31 / 54


na levoj strani, linkovi na svakoj stranici ka početnoj (home) stranici, kontakt stranici i mapi 

sajta, takoñe i rezervni sistem navigacije koji se nalazi u futeru. 

Horizontalni drop-down meni je urañen uz pomoć CSS i JavaScript koda. U XHTML 

kodu su korišćene neureñene liste (engl. Unordered lists) za prikaz stavki menija koje su 

stilizovane uz pomoć CSS-a. 

XHTML kod: 

 

 

Fakultet 

 

Primenjena 

ekologija 

… 

 

 

Studije 

… 

 

 

Treba biti obazriv kod ovakvih vrsta menija, jer se oni ne pokazuju isto u svim 

čitačima. Internet Explorer 6 ne pokazuje padajući podmeni pa je kod globalnog menija web 

lokacije Fakulteta Futura bio potreban JavaScript kod da bi podmeni bio vidljiv: 

ie6drop = function() { 

var cssRule; 

var newSelector; 

for (var i = 0; i < document.styleSheets.length; i++) 

for (var x = 0; x < document.styleSheets[i].rules.length ; x++) 

{ 

cssRule = document.styleSheets[i].rules[x]; 

if (cssRule.selectorText.indexOf("LI:hover") != -1) 

{ 

newSelector = cssRule.selectorText.replace(/LI:hover/gi, 

"LI.iehover"); 

document.styleSheets[i].addRule(newSelector , 

cssRule.style.cssText); 

} 

} 

var getElm = document.getElementById("nav").getElementsByTagName("LI"); 

for (var i=0; i


Slika 11. Elementi navigacije web sajta Futura 

33 / 54


6.3.1 DOSLEDNOST NAVIGACIJE 

Bez obzira na to koje će se mesto na web stranici izabrati za navigaciju, čak kada se 

istovremeno koriste i više mesta za navigaciju na stranici, najbitnije je da sve bude dosledno 

izvedeno. Na osnovu brojnih istraživanja došlo se do zaključka da je doslednost presudna za 

upotrebljivost. Ako je odlučeno gde će biti položaj navigacije onda se to sprovodi kroz celu 

lokaciju. Takoñe, broj i položaj elemenata unutar sistema za navigaciju mora biti isti na svakoj 

stranici, izuzetak je lokalna navigacija. 

6.3.2 BOOKMARKING 

Obeležavanje (engl. Bookmarking) je važan aspekt navigacije. Korisnik ima 

mogućnost da obeleži svaku stranicu i sačuva je u Bookmarks meniju (Firefox, Safari) ili 

Favorites meniju (Internet Explorer). Ovde je najbitnije da svaka stranica web sajta ima svoj 

naziv koji se nalazi izmeñu title tagova 

Futura - Fakultet za primenjenu ekologiju 

Još jedna zanimljiva mogućnost je da se napravi namenska ikonica – Favicon koja će 

se pokazivati pored imena sajta u bookmarks meniju. Ovaj fajl se zove favicon.ico i smešta se 

u root folder web sajta i veličine je 32x32 piksela. Za Fakultet Futura je napravljena ikonica od 

logotipa Fakulteta i ubačena je u stranicu index.html pomoću sledećeg koda: 

 

Slika 12. Izgled favicon.ico 

Da bi se ikonica videla u bookmarks meniju, takoñe i u tabovima čitača pored naslova 

stranice potrebno je ovaj kod ubaciti samo u index.html stranicu a ne u sve stranice web sajta. 

6.3.3 FUNKCIJE LINKOVA 

Linkovi u navigacionom sistemu se mogu podeliti prema funkciji: 

• Interni hiperlinkovi 

• Spoljašnji hiperlinkovi 

• Download linkovi 

• Auto – email linkovi 

34 / 54


Standardni interni hiperlinkovi linkuju na druge html stranice unutar jednog web 

sajta. Takav link može biti tekstualni ili grafički link. Primeri takvih linkova: 

Primenjena ekologija 

 

Interno sidro je „domaći“ link koji „skače“ na lokaciju duboko na stranici. Ako se to 

mesto nalazi na tekućoj stranici, onda se stranica ne učitava ponovo već sidro (engl. Anchor) 

omogućava da se stranica postavi direktno na tu lokaciju. Ako se ta lokacija nalazi na drugoj 

stranici, onda se ta stranica učitava a lokacija se postavlja na početak prozora čitača. 

Primer sidra: 

Laboratorije 

Glavna prednost ovih internih sidra je da posetioci mogu zaobići sadržaj koji ih ne 

interesuje i preći odmah na onaj koji ih zanima. Jedan od popularnih načina korišćenja ovog 

elementa je da se sidro obezbedi na dnu veoma dugačke stranice koje će vraćati na sam 

početak te stranice. 

Eksterni hiperlinkovi vode posetioce van našeg web sajta, na lokacije koje nam ne 

pripadaju. Razlika u kodu kod primene internih i eksternih hiperlinkova je da kod spoljašnjih 

hiperlinkova moramo uvrstiti http:// na početku svake adrese jer u suprotnom slučaju čitač će 

pretpostaviti da tražimo stranicu unutar naše lokacije. Primer: 

 

Univerzitet Singidunum 

Download linkovi omogućavaju posetiocima da preuzmu fajlove koji nisu tipični za 

web. Na primer doc fajlove, pdf, mp3, ppt, exe, itd. Kod linka za download je isti kao za 

standardni hiperlink. 

ovde 

Auto-email link otvara prazan email u posetiočevom email programu. Postoje dve 

opcije da se prikaže tekst koji je vidljiv posetiocu: 

• da se pokaže prava adresa, 

< a href=mailto:draganmarkovic@singidunum.ac.yu > 

draganmarkovic@singidunum.ac.yu 

• de se pokaže tekstualna deskripcija 

35 / 54


< a href=mailto:draganmarkovic@singidunum.ac.yu > Email Prof. Dr. Dragan 

Marković 

„Dobra praksa“ kod pisanja koda za linkove je ubaciti i atribut title, koji obezbeñuje 

povremeno vidljivo dodatno objašnjenje, takozvanu ekransku pomoć (engl. Tool-tip). Kada 

korisnik postavi pokazivač miša iznad linka, trebalo bi da se pojave ova dodatna obaveštenja. 

Primer iz web prezentacije Fakulteta Futura: 

Statut Fakulteta za primenjenu ekologiju 

Futura preuzmite ovde 

6.3.4 DOSTUPNOST LINKOVA 

Dostupnost linkova ili vizuelna indicija funkcionalnosti linkova (engl. Affordances) 

predstavlja obeležavanje linkova. Najčešće se koristi linija, tj. svaki link bi trebalo da je 

podvučen linijom, i boja koja označava neposećene, aktivne i posećene linkove. Bez obzira koji 

metod se koristi za dostupnost linkova najbitnije je ostati dosledan pri toj upotrebi. Na primer, 

boja, veličina i stil tekstualnih linkova trebalo bi da su konstantni kroz ceo web sajt. 

6.3.5 STANJA LINKOVA 

Moguća stanja linkova su: 

• Neposećen 

• Posećen 

• Trenutan 

• Aktivan 

Stanja linkova u prezentaciji Fakulteta Futura su definisana pomoću CSS-a - kaskadnih 

stilova na sledeći način: 

.tekst a:link { color:#339900; } - neposećen 

.tekst a:visited { color:#999; } - posećen 

.tekst a:hover { color:#333; } - trenutan 

.tekst a:active { color:#0f0; } - aktivan 

6.3.6 POUZDANOST LINKOVA 

Navigacija je u suštini beskorisna ako ne odvede korisnika negde. „Linkrot“ ili „mrtvi 

link“ (engl. Dead link) je izraz koji se koristi za linkove koji su raskinuti. Linkrot je jedan od 

najbržih načina da se posetioci ubede da je sajt nepouzdan. Pre nego što se implementira web 

sajt mora se proveriti funkcionalnost svih linkova. 

Kada je neki link raskinut, korisniku se pojavljuje stranica „greška 404“ (engl. 404:File 

not found). Korisno je napraviti namensku 404 stranicu, u koju se ubacuje link ka mapi sajta, 

36 / 54


ili način stupanja u kontakt sa administratorom web sajta. Postoje i strane za preusmeravanje 

koje korisnika usmeravaju na novu stranu umesto da mu prikazu stranicu sa 404 greškom. 

Ove namenske stranice za obaveštavanje i stranice za preusmeravanje mogu da 

pomognu neko vreme ali ipak, linkove je potrebno stalno kontrolisati. 

6.4 LEYOUT WEB STRANICE 

Da bi bio uspešan u današnje vreme, moderan izgled ili raspored web stranice 

takozvani elektronski layout web stranice mora da se pozabavi kako tehničkim tako i estetskim 

pitanjima. Tehnička pitanja se odnose na to koliko veliki fajlovi smeju da budu, kolika je 

veličina i rezolucija korisnikovog ekrana, a estetska pitanja se odnose na to kako ćemo urediti 

tekst, slike i beline (engl. White space) na stranici. 

6.4.1 TEHNIČKA PITANJA 

Ukupna veličina fajlova - Što je veća ukupna veličina fajlova na stranici to je više 

vremena potrebno da se učita stranica. Ukupna veličina fajlova odnosi se na sve fajlove koji 

čine web stranicu. U to spada HTML, eksterni CSS, eksterni JavaScript, slike, zvuk i video. Od 

pomenutih fajlova, HTML, CSS i JavaScript su fajlovi sa običnim tekstom, i oni su obično 

kompaktni. Slike, zvuk i video fajlovi su oni koji prave download probleme. Ako se utvrdi da 

većina korisnika web sajta koristi brz internet kao što je aDSL onda stranice mogu biti velike, 

ali ako korisnici koriste dial-up onda stranice moraju biti male. 

Veličina monitora i ekranska rezolucija - Treba voditi računa o tome kako će se 

ponašati elementi web stranice na različitim veličinama monitora i ekranske rezolucije. Ako su 

sistemi male rezolucije i/ili velikog monitora to će rezultovati velikom tekstu i slikama na web 

stranici, efektu koju ne želimo da postignemo, a ako su sistemi velike rezolucije i/ili malih 

monitora tekst i slike će biti jako mali, skoro da tekst ne može da se pročita. 

Horizontalna veličina web stranice – Kada je web stranica preširoka da stane na 

korisnikov displej čitači obezbeñuju horizontalni klizač (engl. Scroll bar) kako bi mogli da se 

vide sakriveni delovi te stranice. Generalno korisnici ne vole skrol barove i potrebno je 

obezbediti širinu stranice koja odgovara većini korisnika. 

Kada je urañena analiza web sajta Fakulteta Futura došlo se do zaključka da većina 

korisnika su mladi ljudi koji prate moderne tehnologije, pa samim tim pretpostavlja se da 

većina koristi monitore rezlolucije od 1024x768 px i naviše. Na osnovu toga horizontalna 

veličina stranice web sajta je urañena prema tim zahtevima i ona iznosi 900px. 

Vertikalna veličina stranice – Iako korisnici ne vole horizontalni skrol bar, vertikalni 

skrol bar je obično dobro tolerisan. Neki korisnici više vole da skroluju niz jednu veliku stranicu 

nego da čekaju više odvojenih stranica da se učitavaju. 

Svaki čitač koristi drugačija standardna podešavanja za margine web stranice (ne 

samo za margine nego i za većinu elemenata HTML koda). Tako jedna stranica neće izgledati 

isto u Firefoxu i Internet Exploreru ako se ne podese svojstva margina. U CSS-u se podešavaju 

svojstva preko sledećeg koda: 

37 / 54


* { 

} 

margin:0; 

padding:0; 

Zvezdica je univerzalni selektor koji utiče na svaki element na web stranici. Ovaj kod 

se postavlja na samom početku CSS dokumenta i obezbeñuje da se margine i padding svakog 

elementa postave na nulu, a kasnije kroz dokument odreñuju se za svaki element ponaosob 

željena svojstva. 

6.4.2 ALATI ZA RASPORED STRANICE 

Glavni alati za raspored elemenata na web stranici su , , i . 

Okviri (engl. Frames) i njihovo korišćenje je danas veoma sporno, i većina stručnjka 

ih više ne koristi. Jedan od glavnih razloga je zato što pretraživači kao što su Google, Yahoo i 

drugi imaju problema sa takvim stranicama jer ne mogu da ih vide, ili šalju posetioce na 

stranice na neprikladno prikazanim tekstom ili bez teksta. 

Tabele (engl. Tables) su sve manje u upotrebi danas, razlozi su sledeći: 

• Kada čitači (engl. Browsers) doñu do tabele i krenu da je čitaju, oni moraju 

dvaput da je pročitaju pre nego što prikažu njen sadržaj, jednom da izrade 

strukturu tabele a drugi put da utvrde sadžaj. Prilikom učitavanja ostalih web 

stranica na istoj lokaciji, ponavlja se postupak 

• Tabele se ne prikazuju na ekranu deo po deo, već se čeka da se cela tabela učita i 

onda tek prikaže 

Layers ili slojevi (engl. Divs) su elementi HTML jezika pomoću kojih se uz kaskadne 

stilove prave moderni, pristupačni i upotrebljivi rasporedi elemenata na stranici. Raspored 

elemenata na web lokaciji fakulteta za primenjenu ekologiju Futura je odreñen pomoću CSS-a i 

div elemenata. Neki od razloga za ovaj izbor su sledeći: 

• CSS generalno zahteva manje koda nego tabele 

• Ceo CSS kod je u jednom eksternom fajlu koji se samo jednom učitava, zatim se 

kešira na korisnikovom računaru 

• Preko CSS-a može da se kontroliše redosled po kojem će se učitavati pojedini 

elementi – prvo je bitno da se učita sadržaj pa tek onda elementi koji se sporije 

učitavaju, npr. slike, zvuk, video 

Jedan od najvećih problema trenutnog web sajta Fakulteta za primenjenu ekologiju 

Futura je što ukupna veličina početne stranice iznosi 997KB što je apsolutno nedopustivo, 

pogotovo što većina korisnika ima dial-up pristup Internetu. 

38 / 54


Najveća prednost novog web sajta Fakulteta je ta što ukupna veličina početne stranice 

iznosi 100KB, svi CSS i JavaScript fajlovi su eksterni, oni se učitavaju samo jednom tj. prvi put 

kada su referencirani na web sajtu i od tada oni postaju dostupni bez ponovnog učitavanja. 

Ceo raspored novog web sajta je urañen u CSS-u, bez upotrebe tabela za postavljanje izgleda 

web stranice, što umnogome smanjuje potrebno vreme učitavanja. Svi grafički fajlovi su 

optimizovani za upotrebu na Internetu. 

6.4.3 ESTETSKA PITANJA 

Preopterećenje web stranice informacijama, dezorganizacija, prepunjenost stranice 

raznim elementima, odbija posetioce veoma brzo. Ako nešto zahteva veliko ulaganje vremena 

– ili ako izgleda kao da će zahtevati – manje je verovatno da će biti upotrebljeno. 3 U 

suprotnom, dobro organizovane stranice, sa adekvatnim belim prostorom daju korisnicima 

utisak jednostavnosti, iako je stranica puna informacija i raznih elemenata. 

6.5 BOJE 

Boja se obično opisuje pomoću tri komponente: 

• Ton, atribut koji predstavlja ime boje npr. plava, crvena 

• Zasićenje, relativna čistoća boje, ili intenzitet boje, što je boja zasićenija to je i 

intenzivnija 

• Svetlina, predstavlja svetlinu ili tamnoću boje 

Postoji više faktora koji utiču na to kako se boja može a kako ne sme koristiti na 

webu. Najvažnij faktor je dubina boje (izražena je u bitovima), koja je istovremeno i najvažnija 

komponenta za generisanje boja na ekranima monitora. Svi čitači i svi računarski sistemi ne 

mogu da podrže isti opseg i dubinu boja, zbog čega postoje boje koje su namenjene samo za 

web. To su boje koje se pokazuju manje više isto bez obzira na okruženje u kom se nalazi 

korisnik. 

6.5.1 RGB SISTEM BOJA 

Računarski monitori prikazuju sve boje koristeći različite količine crvene, zelene i plave 

boje. Taj sistem se naziva RGB (red, green, blue) sistem, smatra se aditivnim sistemom, jer 

jednake količine crvene, plave i zelene svetlosti daju belu svetlost. Ovo je potpuno suprotno 

formiranju boja kod štampanja, gde se koristi CMYK sistem (cyan, magenta, yellow and black) 

i on se smatra suptraktivnim sistemom boja jer teoretski kad se spoje cijan, magenta i žuta 

boja, trebalo bi da proizvedu utisak crne boje, mada u praksi se ipak dodaje crni pigment da bi 

se dobila crna boja na papiru. 

Kod RGB formata u programima za obradu slika kao što je Photoshop ove tri 

komponente imaju vrednost od 0 do 255, one se obično razdvajaju zarezom, pa tako kod 

oznake boje 125,220,95 prvi broj 125 predstavlja vrednost crvene boje, 220 vrednost zelene a 

95 vrednost plave boje. Za razliku od ovog – decimalnog označavanja boja, na webu boje se 

označavaju heksadecimalnim vrednostima. 

3 Steve Krug, Don’t make me think, A common sense approach to web Usability, New riders, 2000 

39 / 54


U HTML jeziku boja se označava RGB tripletom ispred koga ide znak #. Tako na primer 

u boji #FF10AC, FF predstavlja intenzitet crvene boje i maksimalan je, jer je FF maksimalan 

dvocifreni broj, 10 predstavlja intenzitet zelene i prilično je nizak, a AC predstavlja intenzitet 

plave boje i prilično je visok. Konačan rezultat ove oznake je svetloružičasta ekranska tačka. 

Mikrosoft je definisao 16 boja koje su deo HTML specifikacije. Tako u kodu se može samo 

napisati „white“ umesto #FFFFFF, „red“ umesto #FF0000, itd. 

Najsigurnija web paleta se sastoji od 216 boja, one su prepoznate od strane svih 

čitača i sistema. Ove boje su izabrane matematički, sačinjene su od cifre 0 i drugih 

heksadecimalnih cifara koje su deljive cifrom tri – 3, 6, 9, C (12), F (15), i dodatno cifre se 

koriste uvek u paru, npr: 

• #3366FF je web sigurna boja jer se sastoji od tri para identičnih cifara i deljive su 

brojem 3 

• #2255AA nije web sigurna boja, jer nisu sve cifre deljive brojem 3 

• #3693CF nije web sigurna boja, jer cifre nisu uparene isto iako su deljive sa tri 

U web prezentaciji Fakulteta Futura korišćene su samo web sigurne boje (engl. web 

safe colors), za pozadinu, fontove, i njihova vrednost im je dodeljena preko eksternog CSS 

fajla. 

html { background:#fff; } ili html { beckground:white; } 

Ovim kodom je odreñena bela pozadina web stranice. 

.novosti h3 { color:#339900; } ili .novosti h3 { color:#390; } 

Ovim kodom je odreñena svetlo zelena boja fonta. 

6.5.2 ZNAČENJE BOJA 

Pored vrednosti boja treba obratiti pažnju i na značenje boja i upotrebu kontrasta. 

Značenje boja je prilično subjektivno, tako različite kulture i nacije različito poimaju neke boje. 

Naučnici, filozofi, umetnici vekovima se bave pitanjem značenja boja i nisu došli do rešenja. U 

tabeli je prikazano nekoliko uobičajenih značenja koja ljudi povezuju sa odreñenim bojama. 

Boja 

Značenje 

Crvena 

Ružičasta 

Narandžasta 

Žuta 

Vruće, greška, stop, upozorenje, agresija, vatra, bujnost, neustrašivost 

Žensko, privlačno, šećerna pena 

Toplo, jesenje 

Sreća, oprez, sunčano, radosno 

40 / 54


Braon 

Zelena 

Plava 

Purpurna 

Crna 

Siva 

Bela 

Toplo, jesen, prljavo 

Idila, plodnost, ljubomora, zavist, neiskustvo, novost 

Spokoj, tuga, voda, muško 

Kraljevski, luksuzno 

Noć, strah, zlo, smrt 

Sumrak, starost 

Čisto, nevino, zima, hladno 

Tabela 3. Uobičajena značenja boja u zapadnoj kulturi 

Na web sajtu Fakulteta Futura su korišćene nijanse crvene, plave, zelene i braon boje, 

zbog harmonije sa četiri slike koje predstavljaju znak fakulteta: voda, zemlja, vazduh i vatra. 

Takoñe preovlañuje zelena boja jer je ona predstavlja pojam ekologije. Za svaku glavnu 

stavku globalnog menija, za zaglavlje svih stranica koje pripadaju podmeniju te stavke, 

korišćene su kombinacije dve boje iz svake slike koje predstavljaju elemente. 

Slika 13. Kombinacija boja iz slike elementa voda 

41 / 54


Slika 14. Kombinacija boja iz slike elementa vatra 

6.6 GRAFIKA 

Računarske slike javljaju se u dva glavna oblika, kao 

• Bitmapirane (rasterske) slike i 

• Vektorske slike 

Web podržava bitmapirane slike formata JPG, GIF i PNG. 

JPG format (Joint Photographic Experts Group) koristi .jpg ili .jpeg ekstenziju. Ovaj 

format ne podržava providnost (engl. transparency), niti animaciju, ali je odličan za 

komprimovanje fotografija. U programima za obradu slika možemo izabrati koliku degradaciju 

kvaliteta ćemo tolerisati u zamenu za manju veličinu fajla. 

Primer iz web sajta Fakulteta Futura: 

 

 

Na slici 13. je prikazan originalan fajl koji iznosi 46KB i fajl optimizovan za web, sa 

85% kvaliteta i 15KB. Kao što se vidi, slika skoro uopšte nije izgubila na kvalitetu ali je znatno 

smanjena veličina fajla. 

42 / 54


Slika 15. Komprimovanje fajla u Fotošopu 

GIF (Graphic Interchange Format) se pretežno koristi za male slike, jer se sa njim ne 

gube detalji ali je ograničen na 256 boja. GIF-ovi su odlični za tehnički crtež i za slike na 

kojima se pojavljuje tekst. GIF-ovi mogu da pamte 2,4,16... boja, pa se može dosta uštedeti 

na veličini prilikom kreiranja slika. GIF fajlovi se kompresuju horizotalno, tj. ukoliko na GIF slici 

pixel ima malu varijaciju boja u horizontalnom pravcu mnogo lakše se transformiše u manju 

veličinu. GIF format podržava providnost i animaciju. 

Svaka pojedinačna boja u GIF slici može da postane "providna", omogućujući tako 

pozadini da se vidi. Ovakve slike se nazivaju providnim GIF-ovima. GIF slika može da bude 

sastavljena od više pojedinačnih slika koje se redom smenjuju, dajući utisak kretanja. Ovakve 

slike se nazivaju animiranim GIF-ovima. 

Primer: 

 

PNG (Portable Network Format Graphic), još jedan format podržan od strane novijih 

Web čitača a kombinuje funkcionalnosti gif-a i jpeg-a. Postoje dva tipa formata: 

• PNG-8, sadrži 8 bitnu informaciju o bojama (slično GIF-u), 

• PNG-24, sadrži 24 bitnu informaciju o bojama (slično JPEG-u). 

43 / 54


PNG-8 ne podržava animaciju ali podržava transparentnost i to mnogo bolje nego GIF, 

dok PNG24 je ekvivalentan JPEG-u i poseduje sličnu kompresiju. 

PNG format nije korišćen u web prezentaciji Fakulteta Futura jer čitač kao što je 

Internet Explorer 6 ne podržava ovaj format, a smatra se da neki deo ciljne grupe i dalje 

koristi ovaj čitač. 

6.7 TIPOGRAFIJA 

Font predstavlja stil pisma na računaru. Izraz potiče iz štamparstva gde je označavao 

odreñenu veličinu odreñenog pisma. Na webu postoji nekoliko kriterijuma po kojima se pismo 

deli na vrste. Jedna podela je po tome da li su serifna (engl. serif) ili beserifna pisma (engl. 

sans serif). 

Slika 16. Primer serif i sans serif fonta 

Serif fontovi su oni fontovi koji imaju male ukrase. Veliki nedostatak im je to što 

imaju premalo belog prostora izmeñu slova što uveliko utiče na njihovu nečitljivost. Ali kada se 

promeni okruženje i stave se na papir, oni se ponašaju dosta dobro. Razlog je što monitori 

imaju manju rezoluciju (najčešće 72 dpi), a štampan materijal ima veću rezoluciju (najniža je 

200 dpi). Kod nižih rezolucija, slova postaju manje čitljiva jer pikseli dolaze do izražaja. Od 

serif fontova najpoznatiji su Times New Roman, Georgia. 

Sans serif nemaju te ukrase zvane serifi te su zato čitljivija i daju više prostora oko 

slova čime se povećava čitljivost. Poznati sans serif fontovi su Arial, Verdanu, Tahoma. Savet 

stručnjaka je da se koriste sans serif fontovi na webu. 

Čitači nisu u mogućnosti da pročitaju sve fontove kako bi ih korisnici mogli videti. To 

znači, da fontove koje korisnici nemaju instalirane na računaru čitači ne mogu ni da pročitaju. 

Postoje web sigurni fontovi (engl. web safe fonts) koji se koriste u web dizajnu. Oni se 

isporučuju sa operativnim sistemima, u XP-u postoji 68 web sigurnih fontova a u Visti 168. 

Web sajt Fakulteta za primenjenu ekologiju Futura koristi web sigurne fontove, i 

njihova vrednost im je dodeljena preko CSS-a. 

Za tekst na web stranicama korišćen je font Tahoma, veličine 11px 

body{ 

font-family: Tahoma, Arial, Helvetica, sans-serif; 

color:#666; 

font-size:11px; 

text-align:left; } 

44 / 54


U slučaju da korisnik nema instaliran Tahoma font, primeniće se Arial, ako nema Arial 

font primeniće se Helvetica, a ako nema ni Helvetike onda se primenjuje bilo koji font na 

korisnikovom računaru koji je sans serif. 

Za navigaciju upotrebljen je font Arial. 

#nav { 

... 

font-family: Arial, sans-serif; 

} 

6.8 OBRASCI 

Korisnici najčešće komuniciraju sa web lokacijom preko različitih elemenata obrazaca, 

kao što su tekstualna polja, radio dugmad, polja za potvrñivanje itd. Na web lokaciji Fakulteta 

Futura postoji obrazac za kontakt koji je urañen Spry tehnikom. 

7. SEO 

Web prezentacija može biti beskorisna ukoliko nema saobraćaja, odnosno ako nema 

posetilaca. Da bi se deo ogromnog saobraćaja na Internetu skrenuo ka web sajtu, potrebno je 

uraditi nekoliko koraka: 

• Prijaviti web sajt na pretraživače 

• Optimizovati web sajt za pretraživače 

7.1 PRIJAVLJIVANJE NA PRETRAŽIVAČE 

Činjenica je da najveći deo saobraćaja dolazi sa pretraživača (engl. SEs – Search 

Engines). Postoje dve vrste pretraživača: direktorijumi i „pravi“ pretraživači. Direktorijume 

ureñuju ljudi tako što pregledaju sajtove, smeštaju u odgovarajuću kategoriju i rangiraju. Pravi 

pretraživači imaju program koji se naziva pauk (engl. spider, crowler) koji prati linkove i čita 

strane do kojih linkovi vode. Sve što pauk pročita ide u indeks (katalog) koji je baza podataka 

u kojoj su sačuvane kopije svih web strana koje je pauk pročitao. Pauk posećuje periodično 

svaki web sajt i tako beleži sve promene i osvežava katalog. Treći i poslednji deo je softver za 

pretragu koji za tražene ključne reči iz milijardi zabeleženih kopija stranica, rangira bitne 

rezultate i pokazuje ih posetiocu. Da bi se našli u indeksu pretraživača, web sajt mora da se 

prijavi. Procedura je sledeća: potreban je link do sajta odnosno adresa web sajta i kratak opis, 

zatim će pauk prateći link snimiti web sajt, odnosno u slučaju direktorijuma, posetu će da 

obavi jedan od urednika direktorijuma. 

7.2 OPTIMIZACIJA ZA PRETRAŽIVAČE 

Na osnovu ključnih reči u upitu pretraživač mora da odredi koji su to najpogodniji 

sajtovi iz kataloga koji će najbolje zadovoljiti zahtev posetioca. U procesu odlučivanja 

pretraživači koriste kompleksan algoritam koji ima zadatak da prvo prikaže najbitnije rezultate 

koji zadovoljavaju kriterijume iz upita. Algoritmi koje pretraživači koriste nisu poznati iz 

razumljivih razloga, ali se bitni kriterijumi na osnovu iskustva naslućuju. Osnovne akcije koje 

45 / 54


imaju za cilj stvaranje sajta koji se prilagoñen softveru za pretragu naziva se Search Engine 

Optimization odnosno prilagoñavanje zahtevima pretraživača. 

Istraživanja su pokazala da velika većina posetilaca pretraživača gleda samo prvih 20 

do 30 rezultata. Zbog toga se pribegava ovoj tehnici koja treba da omogući takav plasman u 

moru od nekoliko miliona rezultata za date ključne reci. Na ovaj način se izdvaja kvalitet od 

nekvaliteta, a ponekad i pošten posao od laži i prevara. SEO je tehnika koja u teoriji i praksi 

ima mnoge oblike, ali se uglavnom izdvaja nekoliko bitnih faktora. 

Optimizacija web sajta je aktivno prilagoñavanje sadržaja web sajta unapreñivanjem 

raznih aspekata sajta u cilju povećavanja broja posetilaca koji na sajt dolaze preko Internet 

pretraživača. 

Sam proces optimizacije sajta obuhvata više aspekata - od pronalaženja 

odgovarajućih ključnih reči ili izraza koje će dovesti posetioce pretraživača na web sajt, preko 

onoga što će pretraživačima olakšati prepoznavanje tih ključnih reči/izraza na web sajtu što će 

dodatno obezbediti postavljanje tog sajta na bolje pozicije u pretragama, pa do izgradnje 

kvalitetnih linkova ka web sajtu što može dodatno poboljšati rangiranje web sajta na 

pretragama najpoznatijih pretraživača kao što su Google, Yahoo ili MSN. 

Verovatno najbitnija stvar je što bolji izbor ključnih reči i izraza za koje će se 

optimizacija vršiti. Ovo ne mora biti jedna reč – može biti i ceo izraz za koji se optimizacija 

vrši. Početna faza optimizacije web sajta može trajati nekoliko dana. To je period koji je 

potreban da se da izvrše manuelne promene na web sajtu kako bi ključne reči bile što lakše 

indeksirane od strane pretraživača. Nakon toga potrebno je odreñeno vreme da pretraživač 

primeti novonastale promene. Ovaj period može trajati od nekoliko dana pa i do mesec dana i 

više. Nakon toga pojavljuju se prvi rezultati. 

Jedan od bitnih faktora za optimizaciju svakog web sajta je i što veći broj kvalitetnih 

eksternih linkova koji linkuju ka web sajtu (kvalitetni u smislu da moraju biti pravilno 

formatirani tj. da imaju nekakve veze sa ključnim izrazima sa sajta) koji bi dodatno pospešili 

samo rangiranje sajta na pretraživačima. 

Treba napomenuti da će se na ovaj način položaj sajta na pretraživačima drastično 

poboljšati, ali nikada nije zahvalno odreñivati unapred tačnu poziciju u pretraživaču za sve 

ključne reči, tj. ovo veoma zavisi od nekih spoljnih efekata – koliko je reč koja se optimizuje 

standardna tj. naročito je teško optimizovati za reči koje su veoma zastupljene na Iternetu. 

Zbog ovoga ću vam opet ponoviti priču sa početka da je izbor ključnih reči za sajt najbitnija 

stavka koju treba dobro proučiti. 

Pošto je Web počeo kao HTML aplikacija i sami pretraživači (još uvek) preferiraju 

sadržaj u HTML formatu. Ono što se uvek napominje je savet da se obavezno postavljaju 

ključne reči u sve bitne elemente HTML stranice. Kako se na osnovu ključnih reči i njihovog 

položaja u stranici sajtu dodeljuje rang, dobar izbor ključnih reči je najznačajni za uspešno 

privlačenje posetilaca na web sajt. Google nudi uslugu Google Site Map gde se prijavljuje mapa 

sajta, dokument koji sadrži bitne linkove i poželjnu učestanost poseta pretraživača. 

Optimizacija web sajta Fakulteta za primenjenu ekologiju Futura je urañena preko: 

1. Sve stranice web sajta imaju svoj naslov (jedna od najbitnijih stavki kod 

optimizacije) i ključne reči u njemu. Na primer: 

46 / 54


Index.html (početna stranica) - Futura - Fakultet za primenjenu 

ekologiju 

Struktura-fakulteta.html - Fakultet Futura - struktura fakulteta 

2. Tekstovi – Upotrebljene su ključne reči u tekstovima na web sajtu, zatim u 

naslovima preko CSS-a, H1, H2, H3 

3. Linkovi – Sa početne stranice do svih ostalih stranica na sajtu preko globalnog 

menija. Zatim eksterni linkovi ka Univerzitetu Singidunum: 

 

4. Meta tagovi – iako se danas smatra da meta tagovi ne doprinose poboljšavanju 

pozicije na pretraživačima, stručnjaci predlažu da se ipak uvrste u kod web prezentacije 

 

 

7.2.1 GOOGLE ANALYTICS 

Google Analytics je jedan od besplatnih alata koje nudi Google a koristi se za web 

analitiku. Preko ovog alata moguće je pratiti posete web sajtu, koliko je bilo posetioca na sajtu 

(od toga koliko novih a koliko onih koji su ponovo došli na sajt), koliko stranica su pogledali, 

koliko su se zadržali, odakle su došli (grad, država), koje čitače koriste, koju rezoluciju 

monitora imaju, koju konekciju koriste, koji operativni sistem, koje stranice su najviše 

posećivali, koju verziju Flash-a imaju, da li imaju Java podršku, i još mnogo toga što je u vezi 

sa posetiocima. 

Zatim moguće je pratiti izvore saobraćaja ka web sajtu: koliko je bilo poseta sa web 

pretraživača, koliko je bilo direktnih poseta (kada posetioci ukucaju web adresu direktno u 

čitač), a koliko poseta sa sajtova koji imaju link ka našem sajtu (engl. referring sites). Zatim 

preko kojih ključnih reči su posetioci dospeli na sajt, tj. koje ključne reči su ukucali u 

pretraživač da bi se izlistao naš sajt. 

Implementacija ovog alata je veoma laka, kada je sajt online, dobija se JavaScript kod 

koji se implementira na svakoj web stranici sajta i to pred zatvaranje tela stranice, ispred 

taga. Alat je veoma koristan jer na osnovu informacija koje nam pruža u vezi web 

sajta moguće je modifikovati sajt, npr. ako većina posetioca dolazi sa dial-up konekcijom tada 

treba smanjiti veličinu fajlova, ako u većini koriste Internet Explorer 6, treba biti siguran da 

sve savršeno radi kada se sajt otvori u tom čitaču. 

47 / 54


Slika 17. Interfejs Google Analytics alata 

8. TESTIRANJE 

Nakon završetka izrade web lokacije pristupa se testiranju. Najbolje je da testiranje 

prezentacije urade osobe koje nisu učestvovale u njegovoj izradi, jer su one neutralne i mogu 

dati svoje mišljenje sa aspekta prosečnog posetioca sajta. Testiranje treba uraditi sa različitim 

čitačima (Firefox, Internet Explorer, Netscape, Opera ...), različitim rezolucijama ekrana 

(1024x768, 800x600, wide ekrani), po mogućstvu na različitim platformama (Windows, Linux), 

pa i sa različitim pristupima Internetu (dial-up, adsl, kablovski, bežični). Testiranje se može 

obaviti na samom računaru (s tim što tu ne može biti uzeta u obzir brzina učitavanja) ili 

prezentaciju postaviti privremeno na server radi testiranja. 

Dreamweaver nudi mogućnost testiranja web lokacije i to provere svih linkova, 

kompatibilnost čitača, validnost web lokacije i daje izveštaje u vidu xml dokumenta. Kod za 

izveštaj validnosti: 

 

 

ResultsReport.xml 

11/26/08 18:11:11 

E:\\Fakultet 

Futura\WebSajtZavrsniRad\ 

 

48 / 54


8 

 

E:\Fakultet Futura\WebSajtZavrsniRad\index.html 

 

 

 

Dreamweaver Validator Report 

 

 

9. OBJAVLJIVANJE I ODRŽAVANJE 

Pošto je web lokacija urañena, testirana i pošto su zadovoljeni neophodni kriterijumi, 

može se postaviti na Internet, kako bi bila vidljiva za korisnike. Iznajmljuje je se hosting i 

kupuje se domen. Pošto web sajt Fakulteta Futura već ima svoj domen i hosting, potrebno je 

nakon objavljivanja testirati hosting servis i videti da li zadovoljava sledeće uslove: 

• Dostupnost: Da li hosting servis obezbeñuje stalnu vezu ka Internetu kroz 

mnogobrojne i različite veze ka Internet provajderima Prezentacija treba da je 

dostupna 24 časa svakog dana. 

• Sigurnost: Da li poseduje neophodne alate za obezbeñivanje zaštite integriteta i 

privatnosti 

• Brzina: Da li poseduje brze veze za prenos velike količine podataka 

• Integritet podataka: Da li omogućava zaštitu dokumenta od gubitka i korupcije. 

Koliko često se kreira kopija dokumenata (Backup) 

• Skalabilnost: Da li servis može da nadograñuje funkcionalnost i usluge kako bi 

izašli u susret rastućim potrebama 

• Dodaci: Da li servis obezbeñuje funkcionalnost kao što su email nalozi sa 

zaštitom od virusa, alat za kreiranje i analiziranje web prezentacija kao i 

besplatnu tehničku podršku 

Ako su ovi uslovi zadovoljeni nastavlja se sa uslugama postojećeg hosting provajdera, 

a ako nisu daju se predlozi za nov hosting servis zajedno sa svim funkcijama tog servisa. 

Kada se web prezentacija objavi proces se nastavlja dalje. Izuzetno je značajno da 

web lokacija poseduje svež sadržaj, koristan i zanimljiv za posetioce, stoga je potrebno 

svakodnevno unositi nove informacije kao što su vesti, slike, zatim novosti na polju stručnih 

konferencija, stručnih radova itd. 

49 / 54


10. KORIŠĆENI ALATI 

10.1 ADOBE DREAMWEAVER CS4 

Dreamweaver je kompletna alatka za pravljenje Web lokacija i upravljanje njima. Radi 

sa Web tehnologijama, kao što su HTML, XHTML, CSS i JavaScript. Zahvaljujući poboljšanjima 

u najnovijoj verziji, pravljenje web lokacija je lakše nego ranije. Konkretno, osvežena podrška 

za CSS obezbeñuje pristup najnovijim web tehnikama kako bi se pravile web strane koje se 

brzo učitavaju i koje je lako izmeniti, a nova tehnologija Spry omogućuje da jednim pritiskom 

tastera miša pristupite složenim, interaktivnim elementima, kao što su padajući meniji. 

Dreamweaver takoñe sadrži mnoge alatke za upravljanje web lokacijama. Pomoću njih se 

može proveravati da li postoje pokidane veze (linkovi), koristiti šablone za primenjivanje 

izmena na celoj lokaciji i veoma brzo ponovo organizovati web lokaciju. Dreamweaver je 

takoñe ozbiljna alatka za pravljenje dinamičkih Web lokacija (zasnovanih na bazama 

podataka). Postoje drugi programi za Web dizajn – u stvari, ima mnogo takvih programa. 

Meñutim, Dreamweaver je postao jedan od vodećih zahvaljujući sledećim ključnim 

prednostima: 

Vizuelno pravljenje strana. Dreamweaver ima vizuelni pristup pravljenju web 

strana. Ako se slika postavi na stranu, Dreamweaver prikazuje tu sliku na ekranu. Kao 

program za obradu teksta koji prikazuje dokumente na ekranu onako kako će izgledati kada se 

odštampaju, Dreamweaver prikazuje web stranicu približno onako kako će izgledati u web 

čitaču. 

Složena interaktivnost. U Dreamweaveru CS4 postoji jednostavna i inovativna 

tehnologija Spry, zasnovana na JavaScriptu. Pomoću tehnologije Spry, lako se mogu praviti 

interaktivni padajući meniji, dodavati napredne elemente rasporeda, kao što su panoi s 

karticama i dodavati sofisticiranu proveru ispravnosti obrazaca kako bi sprečili posetioce web 

lokacije da šalju obrasce s neodgovarajućim informacijama. 

Dvosmerni kod. Kompanija Adobe je shvatila da mnogi profesionalni web dizajneri 

još uvek dosta posla obavljaju pišući HTML kod ručno. Prelazak iz vizuelnog režima – koji se 

naziva prikaz dizajna strane (engl. design view) – u prikaz koda (engl. code view) neprimetan 

je i, što je najbolje, nije štetan. Za razliku od mnogih programa za vizuelno pravljenje web 

stranica u kojima se pri unošenju izmena u režimu WYSIWYG menja i HTML kod, Dreamweaver 

poštuje ručno napisan kod i ne pokušava da ga zameni (osim ako se to ne zatraži). 

Dreamweaver može da otvori mnoge druge tipove datoteka koji se uobičajeno koriste na web 

lokacijama, kao što su spoljne JavaScript datoteke (.js datoteke), pa nema potrebe menjati 

program da bi se radilo s njima. 

Alatke za upravljanje lokacijom. Dreamweaver-ove alatke za upravljanje lokacijom 

olakšavaju izradu lokacije. Dreamweaver automatizuje mnoge rutinske zadatke s kojima se 

suočava svaki web master – od upravljanja linkovima, slikama, stranama i drugim medijima, 

do saradnje sa timom i prebacivanja lokacije na web server. 

Deo paketa Creative Suite. Od kada je kompanija Adobe kupila kompaniju 

Macromedia (tvorca Dreamweavera), web dizajneri imaju pristup mnogo većoj porodici 

dizajnerskih alatki, uključujući Adobe Photoshop i Illustrator. Dreamweaver CS4 još uvek ne 

izgleda kao Adobe aplikacija, ali sadrži neke korisne integracije sa Adobe svetom: sada se 

mogu prenositi slike iz Photoshopa direktno u Dreamweaver a pomoću programa Adobe Device 

Central mogu se testirati web stranice na različitim modelima mobilnih telefona. 

50 / 54


10.2 ADOBE PHOTOSHOP CS4 

Photoshop CS4 je najnovija i najbolja verzija programa koji predstavlja standard u 

oblasti obrade slika još od 1987. godine. Photoshop je vrhunski grafički program. To je 

najsnažnija, najneizbežnija aplikacija za obradu slika na svetu. Kao i svaki program za obradu 

slika (engl. image editor), Photoshop omogućuje izmenu fotografija i drugih skeniranih slika. 

Slika se može retuširati, mogu se primeniti specijalni efekti na njoj, premeštati elementi s 

jedne fotografije na drugu, ubacivati tekst i logotipovi, podešavati boje i izoštravati detalji, itd. 

Photoshop takoñe obezbeñuje sve što je potrebno da bi se napravila slika započinjući od 

praznog lista. 

Kod izrade web sajta Fakulteta Futura Photoshop je korišćen za optimizovanje 

rasterskih slika (jpeg i gif) za korišćenje na Internetu. 

10.3 ADOBE ILLUSTRATOR CS3 

Illustrator je vektorski program koji služi za dizajn i izradu pripreme za štampu. 

Pomoću seta alata koje on poseduje može da se, kombinujući tekst, slike i grafiku, kreira od 

logotipa, znaka, vizit karte, plakata do brošura i složenih ilustracija. Pored radova namenjenih 

štampanju, može se kreirati i za web. Illustrator može da izvozi dokumente u Adobe Portable 

Document Format (PDF), PSD izvorni Photoshopov format PSD, EPS, itd. Illustrator podržava 

Unicode za obradu teksta, naprednu tipografiju fontova OpenType i nudi višejezičnu podršku. 

Illustrator ima i napredne osobine transparentnosti. 

Kod izrade web sajta Fakulteta Futura Illustrator je korišćen za optimizovanje 

vektorskih fajlova za korišćenje na Internetu. 

51 / 54


11. ZAKLJUČAK 

Posle analize postojećeg web sajta Fakulteta za primenjenu ekologiju - Futura došlo se 

do saznanja u kojoj meri web sajt nije prikladan za dalju egzistenciju na Internetu. Zaključeno 

je da je potrebno dizajnirati novu web lokaciju koja će na adekvatan način prezentovati 

Fakultet. Postavljeni su ciljevi izrade web sajta, odreñene su ciljne grupe i namena web 

lokacije. 

Odreñene su nove informacione teme, koje su slične temama postojećeg sajta, ali su 

kvalitetno poreñane u nove kategorije, i urañena je nova taksonomija tj. hijerarhija informacija 

pri čemu su ispoštovana sva pravila projektovanja jedne web lokacije. Prednosti su lakše 

snalaženje na web lokaciji, lakše pronalaženje i pristup informacijama. 

Dizajniran je nov interfejs, koji takoñe prati sva pravila dizajniranja interfejsa. Kod 

dizajniranja lokacije najviše pažnje je dato korisnosti tj. funkcionalnosti web prezentacije koja 

izlazi u susret potrebama korisnika, zatim upotrebljivosti koja se odnosi na sposobnost 

korisnika da koriste web lokaciju da bi postigli odreñeni cilj, i pristupačnosti lokacije koja se 

ogleda u dostupnosti tog sadržaja ljudima sa invaliditetom ili nekim drugim funkcionalnim ili 

situacionim ograničenjima, takoñe i pravljenje lokacija koje su pristupačne bilo kome ko radi u 

uslovima drugačijim od onih koje je web dizajner usvojio kao uobičajene. 

Urañena je kvalitetna navigacija koja omogućava korisnicima lakše kretanje kroz web 

lokaciju, u svakom trenutku korisnici znaju gde se nalaze i gde mogu da idu. Pored globalnog 

menija, koji je isti na svakoj web stranici, svaka kategorija informacija ima i lokalni meni na 

svakoj stranici. Pored toga, footer sadrži najvažnije linkove na web sajtu, a svaka stranica ima 

u gornjem levom delu stranice linkove za kontakt, home stranicu i mapu sajta na kojoj najbrže 

mogu naći potrebnu informaciju. Web sajt je optimizovan za pretraživače čime je omogućeno 

visoko kotiranje na web pretraživačima. 

Web sajt Fakulteta je urañen u najmodernijim tehnologijama kao što su XHTML, CSS i 

JavaScript, one obezbeñuju odličnu funkcionalnost, moderan dizajn i profesionalan izgled jedne 

web lokcije. 

Za razvoj ove web lokacije korišćeni su sledeći alati: 

• Adobe Dreamweaver je kompletna alatka za pravljenje Web lokacija i 

upravljanje njima. Radi sa svim najmodernijom tehnologijama kao što su XHTML, 

CSS i JavaScript. Takoñe ova aplikacija služi i za pravljenje dinamičkih lokacija 

zasnovanih na bazama podataka. 

• Adobe Photoshop je vrhunska aplikacija za manipulaciju slikama. Obezbeñuje 

odličnu optimizaciju rasterskih slika za korišćenje na webu. 

• Adobe Illustrator je vektorska aplikacija koja služi za dizajn i pripremu za 

štampu. Takoñe služi za optimizaciju vektorskih slika za upoterbu na internetu. 

Predlog budućeg razvoja web lokacije je izrada studentskog servisa. Na sajtu će 

postojati log-in link preko kojeg će se studenti logovati na ličnu web stranicu na studentskom 

servisu. Tamo će svakom studentu biti dostupni sledeći linkovi: home Futura, dosije studenta, 

raspored časova, raspored polaganja ispita, kalendar nastave, materijali za nastavu, pregled 

52 / 54


ocena, biblioteka, promena lozonke, webmail. Svaki student će dobiti svoje korisničko ime i 

lozinku koju posle prvog logovanja mogu promeniti. Studentski servis će biti urañen u PHP-u i 

MySQL-u. Takoñe biće napravljena aplikacija u C#-u preko koje će biti olakšano ažuriranje 

baze podataka od strane zaposlenih u studentskoj službi. Planirana je i implementacija Google 

email servera radi profesionalnije komunikacije izmeñu zaposlenih i studenata Fakulteta. 

Objavljivanje novog web sajta se očekuje po završetku studentskog servisa. Svi ciljevi 

izrade fakultetske web lokacije su dostignuti, komunikacija sa studentima je unapreñena, sve 

informacije su dostupne potencijalnim studentima i ostalim korisnicima na dosledan i 

konzistentan način, i što je najvažnije prezentacija je u potpunosti funkcionalna i upotrebljiva. 

53 / 54


LITERATURA 

Thomas P., Web dizajn: Kompletan priručnik, Mikro knjiga, 2001. 

Lyons C., Web prezentacija za profesionalne projektante, CET, 2001. 

Schneiderman B., Plaisant C., Dizajniranje korisničkog interfejsa, CET, 2006. 

McIntire P., Visual Design for the Modern Web, New Riders, 2008. 

Pfaffenberger B., Schafer S., White C., HTML, XHTML, and CSS Bible, 3rd Edition, 

Wiley Publishing, 2004. 

Holzschlag M., 250 HTML and Web Design Secrets, Wiley Publishing, 2004. 

Ledford J., SEO - Search Engine Optimization Bible, Wiley Publishing, 2008. 

Wyke-Smith C., Stylin' with CSS: A Designer's Guide, Peachpit Press, 2005. 

Ledford J., Tyler M., Google Analytics 2.0, Wiley Publishing, 2007. 

Morville P., Rosenfeld L., Information Architecture for the World Wide Web, O'Reilly 

Media, 2007. 

Web site: 

1. W3C - Cascading Style Sheets home page < http://www.w3.org/Style/CSS/> 

2. W3C - XHTML2 Working Group Home Page < http://www.w3.org/MarkUp/> 

3. W3C – Validators < http://www.w3.org/QA/Tools/#validators> 

54 / 54

preuzimanje - Visoka Å¡kola za informacione tehnologije ITS

Create successful ePaper yourself

Delete template?

Save as template?