Predmetni nastavnici

Marko Nikoli
marko.nikolic@its.edu.rs

Biljana Bajac
biljana.bajac@its.edu.rs
Veb-dizajn
 Oblast predmeta
eoni veb-dizajn:
Kodiranje:
HTML oznaavanje

CSS stilizacija

Vizuelni dizajn veb-stranica

 Podaci o predmetu
Nain polaganja ispita:

1. Nin polgnj ispit u toku nstve (semestr):

) prvi kolokvijum (sredin semestr), zadaci, prag prolaznosti 55%, 30 poena

b) drugi kolokvijum (krj semestr), zadaci, prag prolaznosti 55%, 30 poena
c) odbranjeni projekat, prag prolaznosti 55%, 35 poena
d) prisustvo i ktivnost n nstvi, 5 poena

Npomena:
Ako su oba kolokvijuma poloena zbirna ocena vai do kraja kolske godine. Poloeni
pojedinani kolokvijumi (prvi ili drugi) vae samo do januarskog ispitnog roka. U tom roku
mogue je ponovo polagati materiju koju obuhvata nepoloeni kolokvijum. Nakon ovog
ispitnog roka studenti moraju polagati ceo ispit. Izrada projekta je obavezna. Odbranjeni
projekat vai do kraja kolske godine. Projekat se predaje najkasnije 10 dana pre ispita u
svakom ispitnom roku, i mora biti ocenjen pozitivno do dana ispita.
 Podaci o predmetu
2. Nin polgnj ispit u ispitnom roku:

) prvi deo, zadaci, prag prolaznosti 55%, 60 poena

b) drugi deo, odbranjeni projekat, prag prolaznosti 55%, 35 poena
c) prisustvo i ktivnost n nstvi, 5 poena

Npomena:
Svi poloeni delovi ispita (zadaci, projekat) vae do kraja kolske godine.
Izrada projekta je obavezna. Projekat se predaje najkasnije 10 dana pre
ispita u svakom ispitnom roku, i mora biti ocenjen pozitivno do dana
ispita.
 Podaci o predmetu
Primer ispitnog zadatka
 Softverski alati
Predmetni editor
Light Table http://lighttable.com/

Predmetni internet pregleda

Mozilla Firefox https://www.mozilla.org

Validatori
HTML https://validator.w3.org/
CSS http://jigsaw.w3.org/css-validator/

Studenti kod kue mogu koristiti alate po elji, stim to se ispit i projekat pregleda sa
Firefox internet pregledaem i u uionici je dostupan navedeni editor
 Literatura
Skripta predmeta
 Literatura
Nauite veb dizajn, 4. izdanje
Denifer Niderst Robins
Beograd: Mikro Knjiga, 2014

Learning Web Design

Jennifer Niederst Robbins
O'Reilly, 2012
 Literatura
HTML5 i CSS3 prilagodljiv web dizajn
Ben Frein
Beograd: Kompjuter biblioteka, 2014

Responsive Web Design with HTML5 and CSS3

Ben Frain
Packt publishing, 2015
 Veb-dizajn

Operativni kontekst veb-dizajna

 ta ete nauiti na ovom asu
Osnovne pojmove iz okruenja u kojem se realizuje
veb-dizajn
 Internet
Internet je globalna mrea raunara koja slui za
razmenu podataka
Razmena podataka se vri preko protokola. Protokol
je standardizovani nain za razmenu podataka preko
mree
Aplikacioni protokoli:
FTP, HTTP, DHCP, DNS, SMTP, RTSP, BitTorrent,
SIP, eDonkey, gnutella
 Internet adresa
Svaki ureaj koji pristupa internetu mora imati svoju
internet adresu (IP internet protocol)
I dalje aktuelni oblik adrese je IPv4. Primer:
216.58.214.228

Novi oblik adrese je IPv6. Primer:

2001:0db8:0a0b:12f0:0000:0000:0000:0001
Ovaj oblik adresira 2128 adresa
 Domen i DNS
Radi lakeg pamenja adrese uveden je opisni oblik
adrese u vidu slovnog naziva koji se naziva domen

Prebacivanje IP broja u naziv domena vri DNS server

(Domain Name System)
 WWW
Vebom se naziva WWW (World Wide Web)
Veb je samo jedan od naina za razmenu podatka preko
interneta uz pomo HTTP ili HTTPs protokola
(HyperText Transfer Protocol)
(secure HyperText Transfer Protocol)

HTTP prenosi hipertekst dokumente. To su elektronski

dokumenti koji u sebi sadre aktivne hiperveze koje
omoguavaju stvaranje spleta povezanih dokumenata
 Veb-stranica i veb-lokacija
Veb-stranica (eng. web page) je HTML dokument sa
svim pripadajuim sadrajem

Veb-lokacija (eng. website) je skup veb-stranica koje

su dostupne pod istim domenom
Veb-lokacije su osnovni sadraj veba
 Veb-adresa
Veb-adresa predstavlja taan opis lokacije i naziva
odreenog resursa na vebu

Adresa se zapisuje u obliku URL-a

(Uniform Resource Locator)
 Delovi URL-a

1. protokol scheme ( http )

2. znak : odvaja protokol. Znakovi // su uvek ispred naziva domena
3. naziv domena authority ( air.verdure.ru )
4. port port ( :8881 )
5. putanja do resursa path ( / )
6. ime resursa ( index.html )
7. parametri za veb-server query ( ?sid=1 )
8. imenovano sidro fragment ( #name )
 Veb-server
Veb-server je raunar koji je konstantno ukljuen i povezan na
internet mreu, i na kome je instaliran softver koji vri funkciju veb-
servera
Uloga veb-server raunara je da uslui veb-klijenta servirajui mu
traene podatke
Najpopularniji veb-server softveri su:
Apache (slobodni softver)
Nginx (slobodni softver)
Microsoft-IIS (vlasniki softver)
Veb-server se takoe naziva i HTTP serverom
 Veb-klijent
Veb-klijent je softver koji alje zahtev za podatak veb-
serveru, i dobijene podatke prikazuje korisniku
To su uglavnom internet pregledai (eng. Internet browsers),
od kojih su najpopularniji:
Firefox
Chrome
Safari
Opera
Edge
 Tok komunikacije: klijent-server
1 http://www....

VEB-KLIJENT 2 http://123.321... DNS https://howdns.works/

3 http://123.321...

VEB-SERVER
4 html dokument

5 zahtevi za spoljne resurse

6 spoljni resursi
 Web 2.0
Druga faza u razvoju WWW-a u kojoj dominira sadraj
korisnika, njihova meusobna komunikacija i
proirenje ureaja na kojima je dostupan WWW

Pojam obuhvata pojavu i omasovljenje upotrebe

drutvenih mrea, mogunost postavljanja komentara
na stranici s odreenim sadrajem, kao i na upotrebu
mobilnih ureaja za pregled veb-sadraja
 Pitanja za proveru znanja
Koji su delovi URL adrese?
ta je IP adresa?
ta je DNS?
 Veb-dizajn
Tehnologije veb-lokacije
 Dva dela veb-lokacije
eoni (eng. front end) deo. To je deo koji vidimo u
pregledau. Prezentacioni deo. Deo iji kd izvrava
korisniki agent. Dizajnerski deo

Zadnji (eng. back end) deo. To je deo iji se kd

izvrava na serveru. Programerski deo
 Back end
Jezici back end dela:
PHP
Java
ASP.NET
Python
JavaScript

Zadnji deo veb-lokacije realizuju veb-programeri (eng. web

developer)
 Jezici front end dela
Jezici front end dela:
HTML oznaavanje sadraja
CSS prezentacija sadraja
JavaScript ponaanje sadraja

eoni deo veb-lokacije realizuju veb-dizajneri (eng.

web designer).
 Pitanja za proveru znanja
Koji je eoni, a koji zadnji deo veb lokacije?
Koje jezike koristimo za eoni deo?
 Najava sledeeg asa
Pojam veb-dizajna