Web dizajn

O web dizajnu

Dr Nenad Koji

Web dizajn
Ovaj termin nije precizno definisan i vrlo esto ima
mnogo iroka znaenja
Inicijalno, ukazuje na dizajn web sajta
Meutim, luksuz da jedan ovek radi samo dizajn, u
smislu definisanja boja, pozicije teksta, slika i slino,
drugi definie sadraje sajta, trei to pravi u kodu a
etvrti administrira je samo u teoriji
U praksi, u najboljem sluaju, postoji dizajner, koji
kreira template u psd formatu, i ovo se argonski
naziva dizajnom
Nakon toga, web dizajner, ovo pretvara u HTML i
CSS kod, i dalje definie konkretne sadraje,
stranice i veze meu njima
Tako nastane web sajt

Web programer
Kada se u najboljem sluaju, od dizajnera, ne dobije
psd format, nego elementarni HTML, a jo ree i
CSS kod, web programer sve ovo optimizuje za
razliite browsere, kreira fizike stranice sa
sadrajima, povezuje, hostuje, odrava,...
Sve ovi navedeni poslovi su 20% posla web
programera
Kljuna uloga je u pisanju dodatnih kodova, u
velikom broju klijentskih i serverskih programskih
jezika, kojima se upravlja sadrajem, omoguavaju
interakcije sa korisnicima (galerije, ankete, baneri,
drop down meniji, prikazi slika, kontrole flash
animacija, stranienje sadraja, ...)
Ipak, mora se poeti od HTML-a

O HTML-u
HyperText Markup Language
HTML predstavlja jezik za oznaavanje hiperteksta i
hipermedija (teksta, slike, zvuka, videa i drugih
meusobno povezanih objekata pomou linkova)

HTML predstavlja tekstualnu datoteku

Bilo koji tekst editor je prihvatljiv za izradu HTML
dokumenata
Namenjen browser-ima koji ga dobijaju od web
servera i grafiki prikazuju sadraj sajta

O HTML-u
Evolucijom tehnologije HTML se razvijao i proirivao
do verzije koja se trenutno koristi (HTML 4 i 5)
Razvojem dinamikog HTML-a (DHTML-a), postaje
nezamislivo kreiranje stranica koje ne sadre
dinamiki sadraj i napredne komponente kao to
su naredbe skript jezika
U njemu se implementiraju skoro svi script jezici,
kao to su PHP i ASP
HTML jedini moe da generie grafiku, pa bez
obzira na vie programske jezike, bez njega nema
web sajtova

Dostupnost kodu
Dostupan je i vidljiv za svaki sajt na Internetu
Kada se sadraj sajta prikae u browseru, uvek se
moe videti pozadinski kod
U veini browsera, desnim klikom mia treba
izabrati (View page source)

Kako sve funkcionie

HTML je univerzalan kod za sve browser-e
Web browser interpretira HTML i kreira korisniku
web stranicu sa tekstom, slikom, video i audio
sadrajima u zavisnosti od html koda
Za svaki drugi objekat, koji nije HTML kod, (slika,
flash, video, zvuk, ...) posebno se obraa web serveru
Da bi web browser dobio html kod mora da ga zatrai
od web servera, kao sadraj neke web stranice
Web stranica je smetena na web server

Kako sve funkcionie

Web server i web browser-i komuniciraju pomou
HTTP protokola (HiperText Transport Protocol)
Korisnik upisuje eljenu URL adresu u web browser,
i nakon odgovarajueg klika, browser putem HTTP
protokola uspostavlja komunikaciju sa web
serverom i konkretnim folderom na serveru gde se
nalazi sajt
Server alje web stranicu (HTML kod) i browser je
interpretira. Ako u datoteci postoji bilo koji objekat
osim teksta, browser se za svaki od njih
pojedinano obraa serveru (slike, video, audio i sl.)

Kako sve funkcionie

Dobijanjem datoteka web browser prikazije stranicu
onako kako je u HTML kodu definisana njena struktura
Browser ita svaku liniju koda redom, i tako generie
grafiki izgled stranice
Iako je HTML kod na serveru uvek isti, nee se uvek
interpretirati isto u razliitim browserima
http request

Internet
provajder

http response

Web server

Kako se poinje rad na sajtu?

Potrebno je osmisliti ceo sajt to podrazumeva:

Osmisliti organizaciju stranica (divove),

Dizajn pojedinanih delova,
Pojedinane stranice (broj, imena,organizaciju),
Navigaciju meu stranicama
Sadraje pojedinanih stranica

Ovo je za poetnike najbolje prvo uraditi na papiru.

papiru

Organizacija stranica
Potrebno je definisati organizacionu strukturu sajta, to
predstavlja prvi korak u pravljenju template-a
Ovo podrazumeva da se tano definiu oblasti (divovi) u
kojima e biti zaglavlje, logo, meni, sadraj, i sl.
Nakon toga, divovi se po potrebi grupiu u vee divove,
zbog stabilnosti prikaza sadraja u browseru
Logo
Meni

Zaglavlje
Sadraj

Blok
1
Blok
2

Footer

Dizajn stranica
Dizajn podrazumeva:
Definisanje pozadine stranice (boje ili slike),
Pozadine pojedinanih blokova (divova) u
organizaciji,
Fonta slova
Boje slova
Stilova i paragrafa kod prikaza teksta
Slika
...

Pojedinane stranice
Web sajt je skup web stranica
Pre poetka izrade, mora se znati koje stranice sajta
postoje i kako se one zovu, jer je to kasnije potrebno
za sam kod i navigaciju
Za svaku stranicu potrebno je definisati njenu
organizaciju
Nije dobro imati mnogo razliitih organizacija unutar
web sajta. Preporuke max 2, za prvu i ostale strane
sajta
Primer za stranice: poetna, o nama, kontakt,
lokacija, proizvodi, akcije, cenovnik, ponuda

Navigacija
Kada su poznate sve stranice, treba da se definie
navigacija
Navigacija podrazumeva nain povezivanja stranica
pomou linkova
Navigacija treba da bude u skladu sa ranije
definisanim oblicima navigacije
Navigacija se realizuje kroz vertikalnu ili
horizontalnu navigacuju na sajtu, i argonski se
naziva meni
Klasinim HTML-om navigacija se pie runo, i nije
centralizovana za sajt, nego je deo svake
pojedinane strane, to je loe za kasnije promene
u dodavanju ili brisanju web strana

Sadraji pojedinanih strana

Kada su definisane organizacije za svaku od strana,
mora se definisati i njihov sadraj
To se radi pre pisanja kod, koji treba da se pie na
bazi sadraja
Sadraj je najbitniji deo sajta
Primarno je bitan za korisnika, ali i za SEO, pa treba
paljivo birati rei, strukture, slike, atribute, tagove i
slino.
Ako se ovo ne uradi planski unapred, nego u toku
pisanja HTML koda, takav sajt i stranicu je mnogo
teko napraviti SEO optimalnom nakon toga
Uvek raditi sadraj i pripremu pre pisanja koda

Kreiranje prve strane

Pod uslovom da su sve ove faze ureene, kreira se
prva stranica sajta
Iako se argonski kae da je to prva stranica,
poetna ili home, obavezno je da se ova stranica
imenuje kao index.html
Ako postoji ova stranica, i ako je ona fiziki
smetena na web server, na lokaciji
www.nesto.com, tada se ona automatski uitava,
kada se u browser-u ukuca www.nesto.com
Ona se moe traiti i sa punim imenom stranice
www.nesto.com/index.html
Svaka druga stranica mora se adresirati
pojedinano kao www.nesto.com/neka_druga.html

Kreiranje prve strane

Pod uslovom da su sve ove faze ureene, kreira se
prva stranica sajta
Iako se argonski kae da je to prva stranica,
poetna ili home, obavezno je da se ova stranica
imenuje kao index.html
Ako postoji ova stranica, i ako je ona fiziki
smetena na web server, na lokaciji
www.nesto.com, tada se ona automatski uitava,
kada se u browser-u ukuca www.nesto.com
Ona se moe traiti i sa punim imenom stranice
www.nesto.com/index.html
Svaka druga stranica mora se adresirati
pojedinano kao www.nesto.com/neka_druga.html

index.html
Ova stranica sadri sve ono to je vidljiv, ali i nevidljiv,
deo za korisnika
Deo koji ne vidi korisnik vidi web server i pretraivai
Deo kojim treba da pone stranica (a koji se kasnije
detaljno obrauje) je
<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
xmlns="http://www.w3.org/1999/xhtml">

Nakon ovog dela koda poinje korisniki sadraj pisan u

HTML kodu (uz dodatak skript-a)

Sadraj stranica
Kreiranjem index stranice, podrazumeva se da je
poznata struktura sajta, broj stranica, njihova
organizacija i sadraj
Preporuka je da se prvo kreira HTML index.html
stranice, koji slui samo za organizaciju sadraja, sa
propratnim meta tagovima i delom za navigaciju
Ovo emo smatrati template-om sajta
Ovu stranicu treba snimiti posebno, i kopirati je kao
poetni materijal za svaku narednu
Kopiranjem, i kreiranjem nove strane, treba
definisati konkretne sadraje za novu stranu
Pa da krenemo...

Web dizajn
O web dizajnu

Dr Nenad Koji