487 HTML CSS I JAVASCRIPT PDF

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 36

L E KC I J A

ta je objavljivanje na Vebu?
1
ta je objavljivanje na Vebu?
Put od 1.000 milja poinje jednim korakom, a vi se nalazite na putu Lekcije 1, koja e vam
pokazati kako da piete, dizajnirate i objavljujete stranice na World Wide Webu. Meutim, pre
poetka stvarnog puta, trebalo bi da ponete jednostavno, sa osnovama. Nauiete sledee:
1. kako World Wide Web zaista radi
2. ta veb pregledai rade i koje pregledae e koristiti vaa publika
3. ta je veb server i zato je potreban
4. neke informacije o jedinstvenim adresama resursa (URL)
U dananje vreme Veb je svuda prisutan i ova lekcija moe izgledati kao stara vest. Ako je tako,
slobodno odmah preite na Lekciju 2, Sreivanje alatki, u kojoj ete otkriti prve korake koje je
potrebno da preduzmete da biste nauili da kreirate veb stranice.

9
10 LEKCIJA 1 ta je objavljivanje na Vebu?

Razmiljajte kao objavljiva na Vebu


Vi skoro sigurno ve poznajete Veb kao korisnik. Otvorite svoj omiljeni veb pregleda i pose-
ujete veb sajtove na kojima traite informacije, kupujete ili pratite ta rade vai prijatelji. Osim
toga, veb pregleda moete koristiti da biste itali e-potu, proverili kalendar i obavljali neki
posao.
Biti objavljiva na Vebu znai razumeti ta se deava kada unesete adresu u veb pregleda ili
kliknete link i posetite veb sajt. Meutim, pre nego to se upustim u objanjavanje Veba na teh-
nikom, elim da ga definiem na konceptualnom nivou.
Veb je
hipertekstualni informacioni sistem
meuplatformski
distribuiran
dinamian
interaktivan
Dakle, hajde da vidimo ta ove odrednice znae u kontekstu toga kako se koristi Veb kao medi-
jum za objavljivanje.

Veb je hipertekstualni informacioni sistem


Ideja koja stoji iza hiperteksta je da, umesto da itate tekst u vrstoj, linearnoj strukturi (kao kod
knjige), lako moete prelaziti sa jedne na drugu taku. Moete dobiti vie informacija, vratiti se
nazad, prei na druge teme i kretati se kroz tekst na osnovu onoga ta vas interesuje u odreenom
trenutku.
Hipertekst omoguava itanje, navigaciju teksta i vizuelizaciju informacija na nelinearan nain,
u zavisnosti od toga ta elimo sledee da znamo.
Kada ujete termin hipertekst, pomislite linkovi (u stvari, neki ljudi i dalje misle da se linkovi
odnose na hiperlinkove). Uvek kada posetite veb stranicu, vi ste skoro sigurni da vidite linkove
na celoj stranici. Neki linkovi ukazuju na lokacije na toj istoj stranici, drugi na stranice na istom
sajtu, a trei, pak, na stranice na drugim sajtovima. Hipertekst je bio stari koncept kada je izmi-
ljen Veb - nalazi se u aplikacijama, kao to je HyperCard, i u razliitim pomonim sistemima.
Meutim, World Wide Web je redefinisao koliko moe da bude veliki hipertekstualni sistem.
ak i veliki veb sajtovi su bili hipertekstualni sistemi u razmeri koja pre nije viena i, ako uzmete
u obzir da nita nije tee povezati dokument na serveru u Australiji sa servera iz Sjedinjenih
Amerikih Drava nego povezati dokument sauvan u istom direktorijumu, opseg Veba postaje
zaista zapanjujui.
Razmiljajte kao objavljiva na Vebu 11

NAPOMENA Skoro sve velike korporacije, srednja preduzea i organizacije koriste


veb tehnologije za upravljanje projektima, naruivanje materijala i distribuiranje
informacija kompanija u okruenju bez papira. Postavljanjem svojih dokumenata na
privatnom, bezbednom veb serveru, koji se zove intranet, oni koriste prednosti
tehnologija koje World Wide Web nudi, a istovremeno zadravaju sadrane infor-
1
macije u okviru kompanije.

Veb je meuplatformski
Ako moete pristupiti Internetu, moete pristupiti i World Wide Webu, bez obzira da li radite na
pametnom telefonu, tablinom ili potpuno novom prenosivom ili stonom raunaru koji ste kupili
na buvljaku. Ako mislite da meniji i tasteri u Windowsu izgledaju bolje od onih u Macintoshu
ili obrnuto (ili ako mislite da su ljudi koji koriste Macintosh i Windows slabii), nije vano.
World Wide Web nije ogranien na jednu vrstu raunara, niti ga je napravila jedna kompanija.
Veb je u potpunosti meuplatformski.
Meuplatformski znai da moete pristupiti veb informacijama isto tako dobro sa bilo kog rau-
narskog hardvera koji radi na bilo kom operativnom sistemu pomou bilo kog prikaza.

M E U PL AT FO R M S K I I D E AL
Fanatici mnogo dre do cele ideje da Veb jeste i da treba da bude meuplatformski. Meutim,
realnost je neto drugaija. Zahvaljujui uvoenju velikog broja posebnih funkcija, tehnologija
i tipova medija tokom godina, meuplatformska priroda Veba je kompromitovana. Autori
Veba mogu izabrati da li e da koriste nestandardne funkcije, kao to je Flash, ali na taj nain
ograniavaju potencijalnu publiku za svoj sajt, posebno zato to sve vie ljudi prelazi na
pametne telefone i mobilne ureaje za pregled Veba. Objavljivai na Vebu isto tako moraju
da izaberu izmeu kreiranja originalnih aplikacija za mobilne ureaje ili korienja savremenih
veb standarda za izradu veb aplikacija koje su meuplatformski kompatibilnije. Individualnim
objavljivaima je preputeno da odlue da li e ugroziti fleksibilnost meuplatforme, radi vee
mogunosti vlasnike platforme.

Veb je distribuiran
Veb sadraj moe da zauzima mnogo prostora za skladitenje, posebno kada su tu ukljuene
slike, audio i video. Da biste sauvali sve informacije objavljene na Vebu, potrebna vam je neo-
graniena koliina prostora na disku, a upravljanje njime je skoro nemogue (postoje ljudi koji
se trude da to postignu).
12 LEKCIJA 1 ta je objavljivanje na Vebu?

Veb uspeva da prui mnogo informacija, jer se one globalno distribuiraju na milione veb sajtova
- svaki od njih doprinosi prostoru za informacije koje objavljuje. Ovi sajtovi se nalaze na jednom
ili vie raunara, koji se zovu veb serveri. Veb server je samo raunar koji uvaava zahteve veb
pregledaa i odgovara na njih. Vi, kao korisnik tih informacija, zahtevate resurs od servera da
biste ih videli - ne morate da ga instalirate ili da radite neto drugo, osim da usmerite pregleda
na taj sajt.
Veb sajt je lokacija na Vebu koja objavljuje neke vrste informacija. Kada pregledate veb stranicu,
pregleda se povezuje sa tim veb sajtom da bi dobio te informacije.
Svaki veb sajt i stranica ili deo informacija na tom sajtu imaju jedinstvenu adresu, koja se zove
jedinstvena adresa resursa, ili URL. Kada vam neko kae da posetite, na primer, sajt na http://
www.nytimes.com/, dao vam je URL. Kad god koristite pregleda da biste posetili sajt, to radite
pomou URL-a. Vie o URL adresama ete nauiti kasnije u ovoj lekciji u odeljku ,,Jedinstvene
adrese resursa.

Veb je dinamian
Ako elite trajnu kopiju neke informacije koja se nalazi na Vebu, morate da je sauvate lokalno,
jer se sadraj moe promeniti u bilo koje vreme, ak i dok pregledate stranicu.
Ako traite tu informaciju, ne morate da instalirate novu verziju sistema, da kupite jo jednu
knjigu ili da zovete tehniku podrku da biste dobili aurirane informacije. Samo pokrenite pre-
gleda i proverite ta je tamo.
Ako objavljujete na Vebu, moete biti sigurni da su vae informacije aurirane svo vreme. Ne
morate da potroite mnogo vremena da biste ponovo objavili aurirane informacije.
Nema trokova materijala. Ne morate da licitirate brojem primeraka ili kvalitetom proizvoda.
Boja je besplatna. I neete dobijati pozive nezadovoljnih klijenata koji imaju verziju knjige koja
je zastarela pre nekoliko godina.
Razmislite o knjizi koja je u potpunosti objavljena online, kao to je Little Brother, Cory
Doctorow (koju moete pogledati na http://craphound.com/littlebrother/). Autor moe ispraviti
sve greke u knjizi i jednostavno objaviti izmenjeni tekst na sajtu, koji odmah postaje dostupan
itaocima. Moe postavljati linkove sa prevodima knjige na stranim jezicima im postanu dostu-
pni. Veb sajt knjige se pojavljuje na slici 1.1.
Razmiljajte kao objavljiva na Vebu 13

SLIKA 1.1
Veb sajt knjige

1
Little Brother

NAPOMENA Slike u celoj knjizi su snimane u pregledau Google Chrome ili Safari
koji radi na OS X. Jedini razlog za ovo je to to ovu knjigu piem na raunaru Apple
Macintosh. Ako koristite drugaiji operativni sistem, nemojte se oseati izostavljeni.
Kao to sam naglasio ranije, Veb je popularan zato to vidite iste informacije, bez
obzira na platformu koju koristite.

Mogunost da se neki sajtovi auriraju u pokretu i u svakom trenutku je upravo ono zbog ega
oni postoje. Na slici 2.1 prikazana je poetna stranica BBC Newsa, sajta koji se aurira 24 asa
da bi prikazivao najnovije vesti o dogaajima im se dese. Poto je sajt dostupan i radi svo
vreme, ima neposrednost sa kojom se novine ne mogu uporediti. Posetite sajt BBC Newsa na
http://www.bbc.co.uk/news/world/.
U dananje vreme ak i ne morate ponovo uitati veb stranicu da biste dobili aurirane informa-
cije. Ako koristite JavaScript, o emu poinjem da govorim u Lekciji 17, ,,Uvod u JavaScript,
moete aurirati sadraj stranice u stvarnom vremenu. Rezultati i statistike o utakmici na stranici
NBA lige na slici 1.3 se auriraju kako igra napreduje.
14 LEKCIJA 1 ta je objavljivanje na Vebu?

SLIKA 1.2
Sajt BBC Newsa

SLIKA 1.3
Rezultati
utakmice uivo
na veb sajtu CBS
Sportsa

Veb je interaktivan
Interaktivnost je mogunost da se razgovara sa veb serverom. Tradicionalniji mediji, kao to
je televizija, ni najmanje nisu interaktivni; sve to radite je da sedite i gledate program koji se
prikazuje. Osim promene kanala, nemate mnogo kontrole nad onim to gledate.
Razmiljajte kao objavljiva na Vebu 15

Veb je sutinski interaktivan; odabir linka i prelazak na drugu veb stranicu za odlazak negde
drugde na Vebu je jedan oblik interaktivnosti. Meutim, pored ove jednostavne interaktivnosti,
Veb omoguava da komunicirate sa objavljivaem stranica koje itate, kao i sa drugim itaocima
tih stranica. 1
U stvari, danas su na Vebu najpopularniji sajtovi koji omoguavaju da komunicirate sa dru-
gim korisnicima, umesto sa objavljivaem sajta. To je ono to ljudi misle kada kau ,,drutveni
mediji. Novac se vie ne troi za angaovanje pisaca i snimatelja, ve na sajtove i angaovanje
programera da bi bio napravljen prostor za deljenje sadraja koji ljudi meusobno kreiraju. U
dananje vreme nije neobino da vidite ljude na televiziji koji itaju objave gledalaca sa Tvitera
ili Fejsbuka u programu. Toliki je stepen do kojeg je ovaj oblik medija uzeo maha.
Kao objavljiva na Vebu, potrebno je da odluite koju vrstu interakcije elite na svom sajtu. Veb
stranice moete objavljivati bez interakcije korisnika. Korisnicma moete omoguiti da podnesu
povratne informacije privatno. Moete im omoguiti da objave javne komentare i da razgovaraju
sa vama i jedni sa drugima. Moete obezbediti forume na kojima bi korisnici neposredno komu-
nicirali. Moete ponuditi igre ili druge interaktivne funkcije. Moete, ak, i ugraditi interaktivne
funkcije sa drugih veb sajtova, pa da tako integriete svoj sajt sa sajtovima kojima vai korisnici
ve pripadaju. Na primer, na slici 1.4 prikazn je videt za Fejsbuk integrisan u nezavisan veb sajt.

SLIKA 1.4
Videt za Fejsbuk
16 LEKCIJA 1 ta je objavljivanje na Vebu?

Veb pregledai
Kao to je pomenuto ranije, veb pregleda je aplikacija koju koristite za pregled stranica i kre-
tanje kroz World Wide Web. Veliki broj pregledaa je dostupan ba za svaku platformu koju
moete da zamislite. Na primer, Microsoft Internet Explorer se nalazi u Windowsu, a Safari u OS
X-u. Mozilla Firefox, Google Chrome i Opera se mogu preuzeti besplatno. Osim toga, sve vie
ljudi koristi veb pregledae na mobilnim ureajima i tablinim raunarima. U ureajima iPhone i
iPod koristi se Mobile Safari. Android platforma za mobilne ureaje ima svoj pregleda. Postoje
i druge platforme za mobilne ureaje, kao to su Blackberry i Windows Phone i pregledai dru-
gih proizvoaa za Android i iPhone. Pre nekoliko godina Internet Explorer je bio dominantan
pregleda za Windows, uee OS X-a na tritu je bilo manje od 5 odsto, a veb pregledai su
bili toliko ogranieni da uopte nisu radili sa regularnim veb stranicama. Zatim su programeri u
nekim situacijama odluili da podre Internet Explorer i zanemare druge pregledae. To, meu-
tim, vie nije odriva strategija.

NAPOMENA Ako izaberete da napravite sajt za odreeni pregleda,


kao to je Internet Explorer, on e biti pogodan samo kada znate da e odreena pub-
lika pregledati va veb sajt pomou ciljanog pregledaa. Razvoj na ovakav nain je
uobiajena praksa u korporacijama koje imaju intranet. U ovakvim situacijama
ispravno je pretpostaviti da e svi korisnici u organizaciji koristiti pregleda koji im je
dat i, prema tome, mogue je dizajnirati veb sajt na intranetu da bi se koristile
odreene mogunosti pomenutog pregledaa.

ta rade pregledai
Glavna svrha veb pregledaa je da se povee sa veb serverima, da zahteva dokumenta i da pra-
vilno formatira i prikazuje ta dokumenta. Veb pregledai mogu prikazivati datoteke i na vaem
lokalnom raunaru, preuzimati datoteke koje nije potrebno prikazati, a u nekim sluajevima ak
omoguiti slanje i preuzimanje e-pote. Meutim, ono u emu je pregleda najbolji su preuzima-
nje i prikazivanje veb dokumenata. Svaka veb stranica je napisana na jeziku koji se zove jezik za
oznaavanje hiperteksta (HTML - Hypertext Markup Language), koji obuhvata tekst stranice,
opis njene strukture i linkove sa drugim dokumentima, slikama ili drugim medijima. Pregle-
da preuzima informacije koje dobija od veb servera i formatira ih za prikaz. Razliiti pregle-
dai mogu formatirati i prikazivati istu datoteku na razliite naine, u zavisnosti od mogunosti
sistema i konfiguracije pregledaa.
Veb pregledai 17

Pregled nekih popularnih pregledaa


Postoji velika ansa da koristite samo jedan ili dva pregledaa ako koristite jedan pregleda na
raunaru, a drugi na mobilnom ureaju. Meutim, va veb sajt e biti poseen sa razliitih pre-
gledaa, a da biste uspeno objavljivali na Vebu, treba da budu svesni da oni postoje. U ovom
1
odeljku opisani su neke od najpopularnijih pregledaa na Vebu. Oni nisu, ni u kom sluaju, jedini
dostupni pregledai, a ako pregleda koji koristite nije na listi, ne mora da znai da morate kori-
stiti jedan od njih. Koji god pregleda da imate u redu je - sve dok ste zadovoljni njime.

Google Chrome
Google Chrome je trenutno najpopularniji veb pregleda (njegov udeo na tritu je pokazao
neverovatan rast). On nudi odline performanse i stabilnost i esto se aurira, a koristi se na
stonim i mobilnim ureajima. I koristi isti HTML kao i pregleda Safari kompanije Apple,
mehanizam otvorenog koda, koji se zove WebKit. Moe se besplatno preuzeti na http://www.
google.com/chrome/. Videete da je za snimke ekrana u ovoj knjizi korien Google Chrome, a
o njegovim posebnim funkcijama u govoriti na poetku Lekcije 2.

Microsoft Internet Explorer


Microsoft Internet Explorer, pregleda kompanije Microsoft, ukljuen je u Microsoft Win-
dows i jo uvek je drugi najpopularniji veb pregleda. Izgubio je nekadanji udeo na tritu u
konkurenciji sa drugim pregledaima, jer njegove nove verzije nisu objavljivane toliko esto
kao verzije Google Chrome i Mozilla Firefox. Meutim, veliki broj ljudi i dalje koristi Internet
Explorer, a to je veina za razliku od onih koji koriste druge pregledae, kao to su Chrome,
Firefox i Safari. Prema veb sajtu CanIUse.com, Internet Explorer 10 nudi 49 odsto podrke za
funkcije jezika HTML5, a Internet Explorer 11 nudi 58 odsto podrke.

NAPOMENA Ako ste se ozbiljno posvetiti veb dizajnu, trebalo bi da instalirate sve
popularne pregledae na svoj sistem i da ih koristite za pregled svojih stranica nakon
to ih objavite. Na taj nain moete biti sigurni da sve ispravno radi. ak i ako ne koris-
tite odreeni pregleda svakog dana, va sajt e posetiti ljudi koji to rade. Ako ste
zainteresovani za proveru kompatibilnosti pregledaa, zaponite je sa pregledaima
Microsoft Internet Explorer i Mozilla Firefox, a ukljuite i Google Chrome.

Na slici 1.5 prikazan je Microsoft Edge, naslednik pregledaa Internet Explorer, koji radi pod
operativnim sistemom Windows 10.
18 LEKCIJA 1 ta je objavljivanje na Vebu?

SLIKA 1.4
Videt za Fejsbuk

Internet Explorer je objavljen 2012. godine, ali mnogi korisnici ga nisu nadgradili od verzije 9,
8 ili ak i verzije 7. Njegove verzije se umnogome razlikuju, pa, da bi sajt radio ispravno, treba
da ga testirate u svakoj. Objavljivai na Vebu su odustali od podrke za verziju 6, a veina i za
verziju 7, dok Microsoft preporuuje svim korisnicima da izvre nadgradnju na noviju verziju.
Microsoft je 2005. godine objavio novi pregleda Microsoft Edge - podrazumevani pregleda
za Windows 10.

Mozilla Firefox
Mozilla Firefox je besplatan veb pregleda otvorenog koda, koji od jula 2015. godine ini otpri-
like 15 odsto trita pregledaa. Nestcape Navigator je bio prvi popularni komercijalni veb
pregleda. Verzija 1.0 je objavljena 1994. godine. etiri godine kasnije kompanija Nestcape
Communications je otvorila izvorni kod za svoje veb pregledae i angaovala neke lanove
osoblja da rade na njegovom poboljanju. Nakon sedam godina truda i mnogo izdanja, rezultat je
pregleda Mozilla Firefox. Od kada je kompaniju Nestcape Communications preuzeo Ame-
rican Online, ona vie nema nikakve zvanine veze sa nezavisnom neprofitnom organizacijom
Mozilla Foundation.
Firefox je u velikoj meri postao popularan zato to nije imao bezbednosnih problema koji su
muili Internet Explorer. Pored toga, veliki broj dodataka poboljava taj pregleda, a kompanija
Firefox je obavila dobar posao, jer odrava korak sa veb standardima kako oni napreduju. Fire-
fox je dostupan za Windows, Mac OS X i Linux, a moe se besplatno preuzeti na http://www.
mozilla.com/.
Veb pregledai 19

Apple Safari
Safari je podrazumevani pregleda za OS X. Postoji i verzija ovog pregledaa za mobilne ure-
aje koja je instalirana na ureajima iPhone i iPad kompanije Apple. Zasniva se na tehnologiji
otvorenog koda i njegova podrka za veb standarde je na slinom nivou kao za Firefox. Safari 1
ima trenutno oko 9 odsto udela na tritu pregledaa.

Pregledai za mobilne ureaje


Ni jedna diskusija o veb pregledaima ne bi bila potpuna, a da se ne pomenu pregledai za
mobilne ureaje. Tri velika pregledaa su Chrome, Safari i Android. Od jula 2015. godine,
Chrome ima 31 odsto udela na tritu pregledaa za mobilne ureaje, Safari 24, a Android 25
odsto.
Google Chrome se pojavio na tritu za mobilne ureaje pre 2014. godine, a poetkom 2015.
postao je najpopularniji pregleda za mobilne ureaje. Koristi isti mehanizam kao popularna
desktop verzija pregledaa i nudi performanse i pouzdanost koje ljudi oekuju od pregledaa
Chrome. Safari je pregleda koji Apple ukljuuje u iOS ureaje, kao to su iPhone i iPad. On
nudi veoma jaku podrku za HTML5 i, osim veliine ekrana, osigurava iskustvo vrlo slino kao
pregleda za stone raunare. Slino tome, Android ima pregleda koji isto tako osigurava veb
iskustvo visokog kvaliteta. Sva tri pregledaa se zasnivaju na WebKit mehanizmu za vizueliza-
ciju, ba kao Safari i Chrome za stone raunare. O tome ta treba uzeti u obzir prilikom izrade
sajtova za mobilne ureaje u govoriti u Lekciji 21 ,,Dizajniranje Veba za mobilne ureaje.

Drugi pregledai
Od jula 2015. godine Google Chrome ima lavovski udeo na tritu veb pregledaa, kako
za stone, tako i za mobilne ureaje. Preostali pregledai meusobno dele veoma malo pare
kolaa - 13 odsto ili manje. Na primer, Opera (http://www.operasoftware.com/) ima mesto na
tritu sa samo 5 odsto udela. Ovaj pregleda je mali, brz, besplatan i dostupan za nekoliko
platformi, ukljuujui Windows, Mac OS X i Linux. Takoe je usaglaen sa standardima. Za
korisnike UNIX-a koji koriste KDE tu je Konqueror. Postoje razliiti Mozilla izdanci, kao to je
Camino za Mac OS X. Osim toga, pregledai sa komandnom linijom, kao to su Lynx i Links,
dostupni su za tekstualni pregled veb stranica. Postoji i nekoliko drugih pregledaa koji obezbe-
uju pristup Vebu osobama sa razliitim posebnim potrebama.
20 LEKCIJA 1 ta je objavljivanje na Vebu?

Veb serveri
Sve to vam je potrebno da biste gledali i pretraivali na Vebu je veb pregleda. Da biste objav-
ljivali stranice na Vebu, potreban vam je veb server.
Veb server je program koji radi na raunaru i odgovaran je za odgovaranje na zahteve veb pregle-
daa, bez obzira na sadraj koji je povezan sa odreenom URL adresom. Veb server je potreban
za objavljivanje dokumenata na Vebu. Meutim, zbunjuje to to se raunar na kome radi ser-
verski program takoe zove server. Dakle, kada neko koristi termin veb server, onaj ko slua ili
ita knjigu moe da se pomisli na program koji se koristi da odgovori na zahteve veb stranica ili
raunara na kome radi taj program.
Kada koristite pregleda da biste zahtevali stranicu na veb sajtu, pregleda uspostavlja vezu sa
veb serverom pomou HTTP-a. Server prihvata vezu, alje sadraj zahtevanih datoteka, pa pre-
kida vezu. Tada pregleda formatira informacije koje je dobio od servera.
to se tie servera, moe da se povee mnogo razliitih pregledaa na isti server da bi se dobile
iste informacije. Veb server je odgovoran za upravljanje svim ovim zahtevima.
Veb serveri rade mnogo vie od opsluivanja datoteka. Oni su odgovorni i za upravljanje ula-
znim obrascem i za povezivanje obrazaca i pregledaa sa programima, kao to su baze podataka
koje su pokrenute na serveru.
Kao i kod pregledaa, mnogo razliitih servera je dostupno za mnoge platforme, uz mnogo razli-
itih funkcija. Za sada, treba da znate samo za ta slui server; vie o veb serverima ete nauiti
u Lekciji 23, ,,Kako da objavite svoj sajt.

Jedinstvena adresa resursa


Kao to ste ranije nauili, URL je pokaziva nekih podataka na Vebu, bilo da je re o dokumentu,
slici, opisu stila ili skriptu JavaScripta. O svemu ovome ete uiti kasnije. URL obezbeuje uni-
verzalni, konzistentni nain za pronalaenje i pristupanje informacijama.
Pored toga to se URL unosi direktno u pregleda radi posete odreenoj stranici, koristi se i kada
se kreira link sa hipertekstom u dokumentu za drugi dokument. Dakle, on je, u svakom sluaju,
vaan za to kako se vi i va pregleda kreete na Vebu.
Uopteni opis objavljivanja na Vebu 21

URL adrese sadre informacije o sledeem:


o nainu kako se dolazi do informacija (koji protokol koristiti: FTP, HTTP ili
datoteku)
o nazivu umreenog raunara na kome se uva sadraj (www.ncsa.uiuc.edu, ftp.
1
apple.com, netcom16.netcom.com i tako dalje).
o direktorijumu ili drugoj lokaciji na sajtu gde se nalazi sadraj
Takoe moete koristiti posebne URL adrese za zadatke poput slanja e-pote (koje se zovu URL
adrese Mailto) i pokretanje koda za JavaScript. O URL adresama i ta svaki deo znai ete uiti
u Lekciji 6 ,,Rad sa linkovima.

Uopteni opis objavljivanja na Vebu


Kada je izmiljen Veb, objavljivanje na njemu je oznaavalo samo kreiranje veb stranica kao
pojedinanih datoteka i njihovo otpremanje na server da bi ljudi mogli da ih pregledaju u pregle-
daima. Od tada se skoro sve promenilo.
Nekoliko veb sajtova i dalje sadri runo kodirane veb stranice koje otprema autor sajta, ali
veina veb sajtova je napravljena pomou softvera koji radi na serveru. Veb stranice su postale
sloenije, kao i veb sajtovi. U dananje vreme veina sadraja na veb stranicama je napisana
pomou aplikacija koje se isto tako nalaze na Vebu. Na primer, moete da napravite blog na
WordPress.com i odmah ponete da objavljujete sadraj korienjem veb interfejsa WordPress.
Bez obzira da li objavljujete status na Tviteru, piete komentare na sajtu sa vestima, objavljujete
blog pomou alatke ili ureujete lanke na Vikipediji, vi objavljujete na Vebu. U veini sluajeva
nije potrebno da sami piete HTML. Uopteno govorei, stranice se nalaze u ablonima koje je
neko drugi napravio, a esto moete formatirati sadraj koji ste kreirali pomou grafikog urei-
vaa ili pojednostavljenim oznaavanjem koje vam omoguava da izbegnete upotrebu HTML-a.
Na kraju krajeva, na koji god nain da unesete sadraj, on e biti pretvoren u HTML pre nego to
bude prikazan korisnicima. Dakle, ako objavite neto i to ne izgleda dobro, morate da poznajete
HTML ako elite to da popravite. Morate biti sposobni da napravite razliku izmeu delova stra-
nice koju kontroliete i delova koji su ugraeni u aplikaciju za objavljivanje koju koristite. A ako
nameravate da preuzmete veu kontrolu nad izgledom svog sajta, verovatno treba da poznajete
HTML da biste aurirali ablone koji se koriste da stranice dobiju eljeni izgled.
Dakle, bez obzira na pristup koji koristite za objavljivanje na Vebu, verovatno ete imati koristi
tako to ete poeti sa osnovama i uiti kako funkcionie objavljivanje na Vebu od poetka do
kraja. Moda neete nikad runo napisati pojedinane veb stranice, ali, ako nauite kako se to
radi, biete pripremljeni za izradu veb sajtova pomou bilo koje alatke koju na kraju izaberete.
22 LEKCIJA 1 ta je objavljivanje na Vebu?

Rezime
Da biste objavljivali na Vebu, morate da znate osnovne koncepte koji ine njegove delove. U
ovoj lekciji ste nauili tri glavna koncepta. Prvo, upoznali ste nekoliko najkorisnijih funkcija
Veba za objavljivanje informacija. Drugo, uili ste o veb pregledaima i veb serverima i kako
oni komuniciraju da bi isporuili veb stranicu. Tree, sada znate ta je URL i zato je bitan za
pretraivanje i objavljivanje na Vebu.

Radionica
Svaka lekcija u ovoj knjizi sadri radionicu koja e vam pomoi da pregledate ono to ste nauili.
U prvom delu ove radionice navode se neka opta pitanja o Vebu. Zatim ete odgovoriti na neka
pitanja o Vebu koja u vam postaviti. Odgovori na pitanja u kvizu se pojavljuju u sledeem
odeljku. Na kraju svake lekcije ete videti neke vebe koje e vam pomoi da upamtite informa-
cije koje ste saznali o Vebu.

Pitanja i odgovori
P Ko vodi Veb? Ko kontrolie sve ove protokole? Ko je zaduen za sve ovo?
O Ni jedno lice ne poseduje, niti kontrolie World Wide Web. S obzirom na ogroman
broj nezavisnih sajtova koji snabdevaju Veb informacijama, ne bi bilo mogue da
bilo koja organizacija sama postavlja pravila ili smernice. Meutim, dve grupe
organizacija imaju jak uticaj na izgled i smer Veba.
Prva grupa je konzorcijum World Wide Web (W3C), koji postoji na Institutu za
tehnologiju u Masausetsu u SAD i Institutu INRIA u Evropi. W3C ine pojedinci i
organizacije zainteresovani za podrku i definisanje jezika i protokola koji ine Veb
(HTTP, HTML, XHTML, itd). Oni obezbeuju i proizvode (pregledae, servere,
itd) koji su slobodno dostupni svakome ko eli da ih koristi. Konzorcijum W3 je
jedini koji je najblii postavljanju standarda i odreivanju pravila za World Wide
Web. Matinu stranicu konzorcijuma moete posetiti na http://www.w3.org/.
Druga grupa organizacija koja utie na Veb su sami programeri pregledaa, pre
svega Google, Apple, Microsoft i Mozilla Foundation. Konkurencija za
najpopularniji i tehniki najnapredniji pregleda moe biti estoka. Grupa ljudi i
kompanija zainteresovanih za budunost Veba napravila je organizaciju pod
nazivom Web HyperTex Application Working Group (WHATWG). Ta organizacija
je, zajedno sa W3C, napisala specifikaciju za HTML5.
U narednom periodu WHATWG e u potpunosti napustiti brojeve verzije
specifikacije za HTML. Umesto toga, HTML e biti ivotni standard i bie
ugraene eksperimentalne i iroko podrane funkcije. Cilj je da se osigura da se
specifikacija razvija tako da odgovara funkcijama koje su autori pregledaa
dogovorili da dodaju u svoje pregledae. Ako se o predloenoj funkciji ne postigne
konsenzus, ona e biti uklonjena iz specifikacije. Ovo je pokuaj da se spree neki
Radionica 23

problemi iz prolosti, kada se postupak kreiranja specifikacije za HTML razlikovao


od posla koji su obavljali autori pregledaa.
Ovo je pokuaj da se spree neki problemi iz prolosti, kada se postupak kreiranja
specifikacije za HTML razlikovao od posla koji su obavljali autori pregledaa. 1
P Mnogi ljudi imaju utisak da se Veb menja toliko brzo da je skoro nemogue
pratiti informacije, vesti, itd. Da li je ova knjiga zastarela ve na dan
objavljivanja?
O Iako je tano da se sve na Vebu veoma brzo menja, velika veina informacija u ovoj
knjizi e vam posluiti daleko u budunosti. HTML je stabilan, kao to je to bio i do
sada, a kada nauite osnovne tehnologije jezika za oznaavanje hiperteksta (HTML),
kaskadne opise stilova (CSS) i JavaScript, moete nauiti i neto drugo u slobodno
vreme.

Kviz
1. ta je URL?
2. ta je potrebno za objavljivanje dokumenata na Vebu?

Odgovori na pitanja u kvizu


1. URL, ili jedinstvena adresa resursa, je adresa koja upuuje na odreeni dokument ili
deo informacija na Internetu.
2. Potreban vam je pristup veb serveru. Veb serveri, programi koji opsluuju dokument
na Vebu, odgovaraju na zahtev veb pregledaa za datoteke i alju zahtevane stranice
na mnogo razliitih vrsta pregledaa. Oni upravljaju i ulaznim obrascem i
integracijom baze podataka.

Vebe
1. Dok surfujete Vebom, ponite da razmiljate o objavljivanju na njemu. Pogledajte
kako su konstruisane URL adrese. Obratite panju na nain kako su konstruisane
stranice. Ubrzo ete shvatiti kako su ove stranice izraene u potpunosti.
2. Preuzmite drugaije pregledae od onih kojih obino koristite i isprobajte ih neko
vreme. Ako koristite Internet Explorer, isprobajte Firefox, Chrome, Safari ili, ak, i
pregleda sa komandom linijom, kao to su Lynx ili Links. Da biste zaista videli
kako su se okolnosti promenile i kako neki korisnici koji nisu nadgradili svoje
pregledae doivljavaju Veb, preuzmite i stari pregleda sa adrese http://browsers.
evolt.org/ i isprobajte ga.
L E KC I J A

Sreivanje alatki
2
Kada ponete realizaciju nekog projekta, bilo da je to pisanje knjige ili farbanje sobe, neete
odmah poeti da kucate ili zgrabiti etku. Smislite plan da izvrite projekat i prikupite materi-
jale koji su vam potrebni da biste obavili posao. Va plan moe biti jednostavan, poput odluke
da ofarbate zidove pre tavanice, ili sloen, kao detaljan prikaz svega to elite da napiete u
svojoj knjizi.
Isto vai i za materijale. Ako farbate sobu, potrebne su vam etke, boja i moda neto da biste
spreili boju da se razlije tamo gde to ne elite. Ako piete knjigu, eleete da instalirate pro-
gram za obradu teksta i moda da prikupite istraivaki materijal koji e vam pomoi u pisanju.
Kao i kod veine drugih projekata, postupak pisanja i dizajniranja veb stranica zahteva planira-
nje i razmiljanje pre nego to ponete da stavljate tekst i grafiku i da ih mahnito povezujete.
eleete da budete sigurni da imate sve to vam je potrebno na raunaru za izradu veb stranica,
kao i prostor na Vebu za hostovanje veb sajta kada zavrite.
Da biste se pripremili za objavljivanje na Vebu, morate:
nauiti razliku izmeu veb servera, veb sajta, veb stranice i poetne stranice
podesiti raunar tako da moete zapoeti izradu veb stranica

23
24 LEKCIJA 2 Sreivanje alatki

Anatomija veb sajta


Napravio sam pregled jednostavne terminologije koju sam koristio u ovoj knjizi. Treba da
znate ta znae sledei termini i kako se oni primenjuju na rad koji ete razviti na Vebu:
V
eb sajt - Zbirka jedne ili vie povezanih stranica na smislen nain, u celini, opisuje
informacije ili stvara ukupan efekat (vidite sliku 2.1).

SLIKA 2.1 Veb


sajtovi i stranice
this ios asd
this aiasd dd
kiwlwototdfsdd

this ios asd


this aiasd dd
kiwlwototdfsdd
sddsd lfl ff dgj

Veb sajt

Stranice u okviru veb sajta

V
eb server - raunar na Internetu ili intranetu koji isporuuje veb stranice i druge
datoteke kao odgovor na zahteve pregledaa (intranet je mrea koja koristi Internet
protokole, ali nije javno dostupna)
V
eb stranica - dokument na veb sajtu, koji se, obino, sastoji od dokumenta jezika
za oznaavanje hiperteksta (HTML) i bilo kojih stavki koje se prikazuju u okviru
dokumenta, kao to su umetnute slike ili opis stilova
P
oetna stranica - ulazna stranica veb sajta, koja moe povezivati dodatne stranice
na samom veb sajtu ili na stranicama na drugim sajtovima.
Svaki veb sajt je smeten na veb serveru. U prvih nekoliko lekcija u ovoj knjizi ete nauiti
kako da razvijete dobro osmiljene i dobro dizajnirane veb sajtove. Kasnije ete nauiti kako da
objavite sajt na stvarnom veb serveru.
Veb stranica je pojedinani element veb sajta na isti nain kao to je stranica element knjige
ili novine (iako, za razliku od novinskih strana, veb stranice mogu biti bilo koje duine). Veb
stranice se ponekad nazivaju i veb dokumenta. Oba termina se odnose na isto. Veb stranica se
sastoji od HTML dokumenta i svih drugih komponenata koje se nalaze na stranici, kao to su
slike ili drugi medijski sadraj.
Anatomija veb sajta 25

NAPOMENA U dananje vreme veina veb sajtova nije napravljena od pojedinanih


stranica, ve pomou aplikacija koje objavljuju veb sadraj sauvan u nekoj vrsti baze
podataka preko zajednikih skupova ablona. URL adrese na sajtu se ponaaju kao
ulaz aplikacije za objavljivanje. U ovoj knjizi ete i dalje kreirati veb stranice na tradi-
cionalan nain, jer je to najlaki nain da nauite kako se vri kreiranje.

Ako objavljujete veb sajt, poetna stranica je prva ili najvia stranica na vaem veb sajtu. To je
namenjena ulazna taka koja prua pristup ostatku stranica na sajtu (vidite sliku 2.2).
2
UPOZORENJE Veina korisnika e pristupiti sajtu preko poetne stranice, ali neki
korisnici e ui na sajt preko drugih stranica. Karakteristika Veba je da se omoguava
povezivanje ljudi sa bilo kojom stranicom na sajtu. Ako imate zanimljive informacije i
na drugim stranicama, osim na poetnoj, ljudi e otii direktno na tu stranicu. Ne
treba da pretpostavite da je posetilac video vau poetnu stranicu sa drugih stranica
sajta.

SLIKA 2.2
The home page
Poetna stranica this ios asd
this aiasd dd
kiwlwototdfsdd

this ios asd


this aiasd dd
kiwlwototdfsdd
sddsd lfl ff dgj

Poetna stranica esto sadri pregled sadraja veb sajta, koji je dostupan sa polazne take - na
primer, u obliku tabele sadraja ili skupa ikona. Ako nemate previe sadraja, sve moete sta-
viti na tu jednu stranicu, pa e tako poetna stranica i veb sajt biti jedno isto. Lina poetna stra-
nica moe sadrati link sa biografijom osobe i link sa njenim nalogom na Tviteru i slikama na
Flickru. Poetna stranica restorana e najverovatnije sadrati radno vreme i lokaciju restorana,
kao i linkove sa menijem i smernicama kako doi do restorana. Poetna stranica preduzea
sadri, obino, Proizvode i usluge i Korisniku podrku.
26 LEKCIJA 2 Sreivanje alatki

Podeavanje raunara za objavljivanje


na Vebu
Pre svega, ako elite samo da objavite neke rei ili slike na veb stranici, ne treba da radite nita
da biste podesili raunar. Moete samo da otvorite pregleda, pronaete sajt koji omoguava da
objavite sadraj, kao to je Tumblr ili Wix, a zatim izvrite objavljivanje iz pregledaa.
Ako elite da nauite kako da napravite veb stranicu od nule, podesite svoj raunar da moete
kreirati i lokalno pregledati veb stranice. Jedine dve alatke koje obavezno morate imati da biste
eksperimentisali sa objavljivanjem na Vebu su ureiva teksta i veb pregleda. U prethodnoj
lekciji ste neto nauili o veb pregledaima, pa emo sada da predstavimo ureivae teksta.

Ureivai teksta
HTML datoteke su datoteke sa obinim tekstom i trebalo bi da se ureuju pomou alatke koja
radi sa datotekama obinog teksta. To sutinski znai da, ako hoete da uite HTML, ne bi
trebalo da ureujete svoje datoteke pomou aplikacije za obradu teksta, kao to je Microsoft
Word, ili pomou online aplikacije Google Docs. Ove vrste programa omoguavaju da ureu-
jete datoteke u njihovom konanom formatu i sauvate rezultate u formatu dokumenta poput
vlasnikog formata Microsoft Worda. Zbunjujue je to ovi tipovi aplikacije omoguavaju
uvanje dokumenata kao HTML. To e vam moda biti dovoljno da biste zadovoljili potrebe u
pogledu izrade dokumenta, ali neete nauiti osnovno o HTML-u, to je va cilj.
Ako ste ranije koristili ureivae teksta, verovatno ve imate meu njima onaj koji vam je
omiljen. Ljudi imaju tendenciju da budu veoma samouvereni kada misle da neto ini dobar
ureiva teksta. Ako uopte niste koristili ureiva ili ga niste mnogo koristili, potrebna vam je
preporuka. Da biste poeli, moete koristiti ureiva teksta koji se nalazi u vaem raunarskom
sistemu; svi raunarski sistemi sadre jedan ureiva.
Ako ste korisnik Windowsa, moete koristiti aplikaciju Notepad. Ako koristite OS X, moete
poeti korienje te aplikacije sa TextEditom, a ako ste korisnik Linuxa, moete poeti sa ure-
ivaem teksta vi ili Emacs.
Notepad, TextEdit i vi nude veoma ograniene mogunosti, a ako mnogo ureujete tekst, ele-
ete da imate jo jednu monu aplikaciju za rad na ureivanju teksta.
Podeavanje raunara za objavljivanje na Vebu 27

Ovo je lista nekoliko ureivaa teksta koje esto koriste ljudi koji izrauju veb sajtove:
K
omodo Edit je besplatna verzija otvorenog koda, popularnog intregisanog
okruenja Komodo. Radi na operativnom sistemu Windows, Macintosh i Linux, a
nudi mnogo funkcija integrisanog razvojnog okruenja. Verziju moete preuzeti na
adresi http://www.htmlkit.com/. Stariju verziju moete koristiti besplatno ili moete
kupiti najnoviju i najbolju verziju.
H
TML-Kit je popularni ureiva teksta posebno za veb stranice u Windowsu.
Moete ga preuzeti na adresi http://www.htmlkit.com/. Stariju verziju moete
2
koristiti besplatno ili moete kupiti najnoviju i najbolju verziju.
N
otepad++ je besplatni ureiva teksta otvorenog koda za Windows, koji je veoma
popularan. Moete ga preuzeti na adresi http://notepad-plus-plus.org/.
T
extWrangler je popularni, besplatni ureiva teksta za OS X. Njega je kreirala
kompanija Bare Bones Software, a moete ga preuzeti na veb sajtu http://www.
barebones.com/products/textwrangler/. Moda ete biti zainteresovani i za BBEedit,
moniji ureiva teksta, uz licencnu naknadu.
C
oda je ureiva teksta posebno za ljude koji izrauju stranice pomou Panica. On
sadri mnogo razvojnih funkcija, poput kontrole izvora i povezivanja sa bazom
podataka. Moete ga pronai na adresi http://panic.com/coda/. Takoe sadri
licencnu naknadu.
eleete da pronaete va ureiva teksta i otvorite aplikaciju. Ako koristite TextEdit na OS
X-u, uverite se da je u reimu obinog teksta. Ako prozor sa dokumentom sadri kontrole
koje omoguavaju da izaberete font ili primenite drugo formatiranje, otvorite meni Format i
izaberite opciju Make Plain Text. Nakon to ste otvorili ureiva, moete uneti ono to elite
da stavite na sajt i, ako elite, sauvati datoteku koju ureujete. Jedino to moete da uradite je
jednostavno kucanje znakova pomou tastature. Uopte nemate opcija za formatiranje, a to je
ono to se podrazumeva pod obinim tekstom.

NAPOMENA U svakoj lekciji iz knjige moete raditi pomou Notepada ili TextEdita,
ali veina veb programera smatra da monija alatka znaajno poboljava njihovu
produktivnost. Mnogi ureivai teksta imaju opciju za isticanje teksta, to ini doku-
mente lakim za itanje. Svi oni omoguavaju da istovremeno otvorite vie dokume-
nata i da grupu datoteka tretirate kao projekat. Pre nego to ponete, bie teko da
pronaete novu alatku koja vam odgovara, ali ja u vas podstaknuti da na putu kroz
ovu knjigu pogledate vie razliitih ureivaa. A mnogi komercijalni ureivai imaju
besplatne probne verzije, pa ih moete isprobati pre nego to se odluite da ih
nabavite.
28 LEKCIJA 2 Sreivanje alatki

Na slici 2.3 je snimak ekrana ureivaa teksta TextEdit u OS X-u. To je primetno najvie
zbog injenice da uopte nema formatiranja teksta ili trake sa alatkama. To je ono to traite u
ureivau teksta; on treba da vam omogui ureivanje sadraja datoteke, a da ne primenjujete
nikakvo formatiranje.

SLIKA 2.3
TextEdit u OS X-u

Veb pregleda
Kao to je pomenuto u prethodnoj lekciji, dostupno je nekoliko popularnih veb pregledaa i
moete koristiti bilo koji pregleda koji volite kada svakodnevno surfujete Vebom. Meutim,
dok budete uili kroz lekcije u ovoj knjizi, ja u vam posebno preporuiti jedan pregleda, a to
je Google Chrome. Glavni razlog je taj to Google Chrome nudi nekoliko monih alatki name-
njenih ljudima koji izrauju veb sajtove. Drugi pregledai imaju sline alatke, ali ja u u tekstu
posebno pomenuti alatku za programiranje Google Chrome, a ako koristite pregleda Google
Chrome, bie vam lake da me pratite. Ako se oseate sigurno i ako elite, moete izabrati
drugi pregleda (treba da prevedete delove gde pominjem Google Chrome u svoj pregleda,
ali ja u vas ohrabriti da preuzmete Google Chrome i da radite na njemu u sledeem delu, bez
obzira na to koji pregleda planirate da koristite na kraju, naroito ako uopte ne poznajete ovu
vrstu alatki). Google Chrome moete preuzeti na adresi http://google.com/chrome.
Korienje programskih alatki Google Chrome 29

Korienje programskih alatki Google Chrome


Nakon to ste preuzeli i instalirali Google Chrome, otvorite aplikaciju i idite na http://getbo-
otstrap.com/. Bootstrap je generiki okvir za veb stranice, o kome emo govoriti kasnije. Za
sada je koristan jer je izvorni kod za veb stranice napisan da bude lako itljiv. U meniju View
pregledaa Chrome otvorite podmeni Developer i kliknite Developer Tools. Otvorie se Deve-

2
loper Tools, kao to je prikazano na slici 2.4.

SLIKA 2.4
Programske alatke
Google Chrome

SAVET Postoji i preica na tastaturi za otvaranje opcije programske alatke Developer


Tools. U Windowsu je moete otvoriti pritiskom na Control+Shit+I. U OS X-u je moete
otvoriti pomou preice Command+Option+I. Videete da ete mnogo koristiti pro-
gramske alatke, pa definitivno vredi memorisati preicu na tastaturi.

Opcija Developer Tools se otvara kao kartica u pregledau, koja pokriva donju stranu veb stra-
nice. Ako elite, moete kliknuti na dugme u gornjem desnom uglu da biste odvojili Developer
Tools od prozora pregledaa. To e omoguiti da vidite vie sadraja u oba prozora, ali mora-
ete da prelazite sa jednog na drugi. Osim toga, ako elite, moete pomeriti alatke na bonu
stranu prozora pregledaa, umesto na dnu. Postavite Developer Tools kako god mislite da je
najudobnije.
30 LEKCIJA 2 Sreivanje alatki

Od najranijih dana Veba pregledai imaju podranu funkciju, koja se zove View Source i koja
prikazuje aktuelni HTML izvorni kod za veb stranice koje pregledate. U pregledau Google
Chrome moete videti izvor za trenutnu stranicu, tako to ete izabrati opciju View Source iz
podmenija pregledaa u meniju View. Izvor za stranicu http://g etbootstrap.com/ se pojavljuje
na slici 2.5.

SLIKA 2.5
Izvorni kod za
http://
getbootstrap.
com/

Programske alatke su mnogo moniji dodatak ovog koncepta. One imaju nekoliko kartica.
Kada ih otvorite, bie prikazana kartica Elements, koja, na neki nain, sadri izvor stranice.
Kada pregleda preuzima veb stranicu, on je transformie tako da mehanizam koji formatira i
predstavlja HTML moe da ga razume. U zavisnosti od validnosti veb stranice, ova transfor-
macija je veoma mala. Kartica Elements predstavlja HTML onako kako ga pregleda vidi.
Opcija View Source prikazuje aktuelni HTML koji je preuzeo pregleda, pa ako uporedite
sadraj prozora View Source sa sadrajem kartice Elements, videete nekoliko razlika koje
pokazuju ono o emu priam.
Ne brinite o funkciji svakog aktuelnog HTML-a u ovom trenutku - uskoro e o njoj biti vie
rei u ovoj lekciji. Kada preete miem preko elemenata u kartici Elements, deo veb stranice
povezane sa elementom ispod mia e biti oznaen tako da moete videti kako HTML odgo-
vara izvoru HTML-a. Kada kliknete na neki od elemenata, kartice sa desne strane prozora e
biti aurirane informacijama o stilu za taj element. Kasnije, kada ponete da koristite kaskadne
opise stilova, ova funkcija e vam zaista biti od velike pomoi, jer prikazuje upravo kako pre-
gleda tumai stilove.
Korienje programskih alatki Google Chrome 31

Na kraju, u donjem redu, nai ete nekoliko dugmadi. Prvo dugme odvaja ili ponovo spaja
prozor sa alatkama. Sledee dugme otvara konzolu JavaScript, o kojoj e biti rei u Lekciji 17
Uvod u JavaScript. Sledee dugme izgleda kao lupa. Ako kliknete na njega, moete kliknuti
i na sadraj na veb stranici, a HTML element koji odgovara toj stranici e biti izabran u kartici
Elements. Ovo je korisno ako elite da pregledate odreeni element na toj stranici.
Sledea dugmad pokazuju ugneivanje tagova za izabrane elemente. Ona su korisna za kre-
tanje kroz strukturu veb stranice. Vie o tome kako su stranice strukturisane nauiete u nared-
nim lekcijama. 2
Veba 2.1 Korienje opcije Inspector
Pre nego to krenete dalje, vredi pogledati kako Inspector tano funkcionie kada se koriste
programske alatke za pronalaenje odreenih elemenata na stranici u prikazu Elements. Ako
stranicu http://getbootstrap.com/ ne gledate u pregledau, pristupite pregledau i otvorite stra-
nicu, a zatim otvorite Chrome Developer Tools. Moda ete eleti da probate preicu na tasta-
turi koju smo pomenuli ranije u Savetu. Kao to sam rekao, dok budete napredovali, mnogo
ete koristiti programske alatke.
Nakon to ste otvorili alatke pregledaa, kliknite na dugme inspect u Developer Tools. To je
prvo dugme na levoj strani u donjem redu, koje lii na lupu. Dugme e postati plavo, to ozna-
ava da je opcija Developer Tools spremna da ispita element na koji ste kliknuli. Pomerajte mi
preko prozora pregledaa, dok ne ugledate veliko zaglavlje blizu vrha stranice. Prozor pregle-
daa izgleda slino kao na slici 2.6.

SLIKA 2.6
Ispitivanje
stranice Bootstrap

Kao to moete videti, zaglavlje je istaknuto, a neke informacije o veliini elementa se nalaze
u pomonom tekstu. Ovo je element koji elim da ispitam, a vi treba da ga locirate u vaem
pregledau i da kliknete na njega. Kao to ste videli na slici 2.4, izvor stranice prikazan u opciji
32 LEKCIJA 2 Sreivanje alatki

Elements je, uglavnom, saet kada prvo otvorite Developer Tools. Kada ispitujete element,
izvor se proiruje da bi prikazao HTML izvor koji odgovara onome to je bilo na stranici
na koju ste kliknuli. Prozor Developer Tools prikazuje HTML tagove koriene za kreiranje
zaglavlja na koje ste kliknuli. To e izgledati kao na slici 2.7.

SLIKA 2.7
Ispitivanje B ikone
u prozoru
Developer Tools

Ne oekujem da jo uvek razumete ono to vidite u prozoru Developer Tools, ali osvrnuu se
na istaknute delove. U levoj kartici ete videti aktuelni HTML izvor stranice. U desnoj koloni
ete nai informacije o stilovima koje pokazuju zato izabrani element ba tako izgleda. U
donjem redu moete videti gde pripada izabrani element u okviru strukture stranice. Izabrani
element je razgranat oko okvira Bootstrap B u desnom donjem delu trake. Dubok je etiri
nivoa na stranici i na njemu su primenjene tri CSS klase.
Mnogo puta ete se vraati u prozor Developer Tools, naroito kada nita na stranici ne izgleda
onako kako ste oekivali. Developer Tools prikazuje kako vaa stranica izgleda u pregledau i
pojednostavljuje postupak da doete do elementa koji elite da pronaete, to je naroito kori-
sno dok vae stranice postaju vee i sloenije.

ta elite da radite na Vebu? 33

ta elite da radite na Vebu?


Ovo pitanje moe zvuati besmisleno. Ne biste kupili ovu knjigu da ve nemate neku ideju o
tome ta elite da objavite. Meutim, moda ne znate ta biste zaista postavili na Vebu ili imate
neku nejasnu ideju, ali nita konkretno. Moda iznenada morate da radite na veb sajtu kompa-
nije i neko vam je dao ovu knjigu i rekao: Evo, ovo e pomoi. Moda ste softverski progra-

2
mer koji je iznenada zaduen da napravi veb interfejs za proizvod ili da izradi veb aplikaciju.
Moda samo elite da uradite neto slino nekoj veb stranici koju ste videli.
Ono to elite da objavite na Vebu ja u ovoj knjizi zovem sadraj. Sadraj je opti pojam koji
se moe odnositi na tekst, grafiku, medijski sadraj, obrasce i tako dalje. Ako nekome kaete
emu je posveena vaa veb stranica, opisujete sadraj.
Jedino to moe ograniiti ono to ete objaviti na Vebu je vaa mata. U stvari, ako ono to
elite da uradite izgleda izuzetno divlje ili udno, to je odlian razlog da probate. Najzanimljivi
veb sajtovi su oni koji se proteu izvan granice mogueg na Vebu.
Moete da pronaete inspiraciju gledajui druge veb sajtove koji su slini ideji o kojoj razmi-
ljate. Ako izraujete veb sajt za preduzee, pogledajte sajtove koji pripadaju vaoj konku-
renciji i vidite ta oni imaju da ponude. Ako radite na linom sajtu, posetite sajtove kojima se
divite i vidite da li u njima moete pronai inspiraciju za izradu svog sajta. Procenite ta vam se
dopada na tim sajtovima to biste eleli da primenite i poboljate kada budete pravili svoj sajt.
U dananje vreme granice za izradu mnogih vrsta sajtova su izuzetno uske. Ako elite da obja-
vite tekst i fotografije, moete koristiti bilo koji od mnogobrojnih besplatnih sajtova za blogo-
vanje da biste podesili sajt za samo nekoliko minuta, sve dok softver za blogovanje odgovara
vaim potrebama. Eksperimentisanje je lake nego ikada. Probajte neto, vidite da li moete to
da primenite i odatle ponite izradu sajta.
Ako stvarno nemate ideju ta da postavite na Vebu, nemojte misliti da morate tu da stanete -
odloite ovu knjigu i smislite neto pre nego to nastavite itanje. Moda ete doi do nekih
ideja dok budete itali ovu knjigu. Mislim da je najbolji nain za ideje da provedete jedno
popodne surfujui Vebom i istraite ta su drugi ljudi uradili.

Skiciranje veb sajta


Sledei korak u planiranju veb sajta je da shvatite na koje stranice se stavja odreeni sadraj i
da smislite emu za navigaciju izmeu tih sadraja. Ako imate mnogo sadraja koje je potrebno
povezati na sofisticirane naine, sedite i napravite odreeni plan gde i ta treba postaviti, to e
biti veoma korisno kasnije kako budete razvijali i povezivali svaku pojedinanu stranicu.
34 LEKCIJA 2 Sreivanje alatki

ta je skiciranje i zato je potrebno?


Skiciranje prua grubi prikaz kako e izgledati veb sajt kada bude zavren i prikazuje na kojim
stranicima e se pojaviti odreeni sadraj i kako e one biti meusobno povezane. Ako imate
takvu skicu, moete razviti svaku stranicu, a da ne treba da pamtite gde se ta stranica uklapa u
veb sajt i u njegov esto sloen odnos sa drugim stranicama.
U sluaju zaista velikih sajtova skica omoguava razliitim ljudima da razviju razliite delove
istog veb sajta. Pomou jasnih skica moete smanjiti dupliranje posla, kao i koliinu kontekstu-
alnih informacija koje svaka osoba treba da zapamti.
Za manje veb sajtove ili veb sajtove izraene pomou aplikacija za upravljanje sadrajem
koje daju odreenu strukturu moda nije potrebna skica. Meutim, za vee i sloenije projekte
postojanje skice moe da utedi ogromnu koliinu vremena i da vas potedi frustracija. Ako ne
moete da zapamtite sve delove sadraja i njihovu povezanost, razmislite o pravljenju skice.
Dakle, kako skice izgledaju? Uopteno govorei, to su zbirke dokumenata ili slika, a svaka
od njih predstavlja odreenu stranicu na veb sajtu. Dokumenti sadre grube dijagrame stra-
nice, pomou kojih se ilustruje kako e razliite komponente stranice biti pozicionirane, koliko
prostora treba da zauzmu i koju funkciju e opsluiti. Na primer, skice za novinski veb sajt e
sadrati dijagram poetne stranice, poetnu stranicu za odeljke novine i skicu za stranice sa
lancima. Skica moe sadrati i obrazac za registraciju na sajtu, kao i za stranicu koja se moe
koristiti za kupovinu reklama. Na slici 2.8 vidi se primer skice kreirane pomou alatke koja se
zove Balsamiq.
Nemojte misliti da skice moraju biti lepe ili izraene u posebnom softveru za skiciranje. Smi-
sao skiciranja je da organizujete veb stranice na nain koji vama odgovara. Ako volite indeksne
kartice i znakovni niz, koristite te alatke. Ako vam vie odgovara jednostavni prikaz na papiru
ili raunaru, koristite ga.

SLIKA 2.8 Skica


za poetnu
stranicu novina
Skiciranje veb sajta 35

Saveti za skiciranje
Neka pitanja o kojima treba da mislite kada pravite skice su sledea:
Koja tema e biti na svakoj stranici?
Ako pokuavate da shvatite koliko informacija treba staviti na jednu stranicu, to
moe biti zahtevno. Na nekim veb sajtovima sav sadraj stavljen je na jednu
dugaku, pametno dizajniranu stranicu. Drugi sajtovi dele sadraj na veliki broj
stranica. Trei koriste savremene tehnike za dinamino otpremanje delova stranica
na zahtev, bez pomeranja sa jedne na drugu stranicu. Najbolje je da organizujete svoj
2
sadraj tako da svaka stranica sadri informacije o jednoj temi. Ako stranice postanu
due od nekoliko ekrana, moda je vreme da ih podelite na logine podteme.
Koji su osnovni oblici navigacije izmeu stranica?
Koji linkovi e biti potrebni da bi se vai posetioci kretali sa stranice na stranicu? To
e biti glavni linkovi u vaem dokumentu koji omoguavaju posetiocima da ispune
ciljeve koje ste definisali u prvom delu. Linkovi za nazad, napred, gore, dole i kui
spadaju u kategoriju primarne navigacije.
Koje druge oblike navigacije elite da obezbedite?
Pored jednostavnih linkova za navigaciju, neki veb sajtovi sadre dodatne
informacije koje su paralelne sa glavnim veb sadrajem, kao to su renici termina,
abecedni indeks koncepata, informacije o autorskim pravima ili stranice za zasluge.
Obratite panju na ove dodatne oblike informacija prilikom izrade plana i razmislite
kako ete ih povezati sa glavnim sadrajem.
36 LEKCIJA 2 Sreivanje alatki

ta ete staviti na poetnu stranicu?


Budui da je poetna stranica, u stvari, poetna taka za ostale informacije na veb
sajtu, razmotrite koje vrste informacija elite da stavite na nju. Da li je to blog, opti
rezime najava ili lista linkova sa drugim temama? ta god da stavite na poetnu
stranicu, uverite se da je to dovoljno ubedljivo da bi se zainteresovani posetioci
zadrali na sajtu.
Kako e posetioci unutranjih stranica utvrditi kontekst?
Osim ako veb sajt zahteva da se korisnici registruju da bi pogledali sadraj, postoji
dobra ansa da korisnici stignu sa bilo koje stranice na va sajt preko pretraivaa.
Vano je da obezbedite da korisnici mogu shvatiti na kom se sajtu nalaze i da postoji
vie informacija za koje mogu biti zainteresovani. Ovaj kontekst moete uspostaviti
pomou dizajna ili navigacije.
Koji su vai ciljevi?
Kada dizajnirate okvir za veb sajt, imajte na umu svoje ciljeve i uverite se da ih
neete prikriti dodatnim informacijama ili sadrajem.

SAVET U kreiranju skica moe vam pomoi nekoliko uslunih programa i paketa.
Neke besplatne alatke sadre Mockingbird (Mockingbird (http://gomockingbird.
com/), Denim (http://dub.washington.edu:2007/denim/) i Gliffy (https://www.gliffy.
com/uses/wireframe-software/). Pored toga, neke mobilne aplikacije za iOS i Android
ureaje pomau u kreiranju skica veb sajta.

Veb hosting
U nekom trenutku ete eleti da premestite veb sajtove koje ste napravili sa lokalnog raunara
na server na Internetu. Pre nego to to uradite, morate odluiti kakvu vrstu hosting paketa
elite. Najjednostavniji pristup je da dobijete nalog za veb hosting koji omoguava da otpre-
mite HTML datoteke, slike, opise stilova i drugi veb sadraj na server koji je vidljiv na Vebu.
Ovaj pristup omoguava da lako kreirate veb stranice (i veb sajtove) lokalno i da ih javno obja-
vite na serveru, a da ne morate da ih menjate.
Veb hosting 37

Korienje aplikacije za upravljanje sadrajem


Druga opcija je da koristite aplikaciju da biste objavili sadraj na Vebu. Ovo moe imati vie
smisla ako vaa ideja o veb sajtu ne pripada postojeoj kategoriji sa dostupnim alatkama.
Na primer, ako elite da objavite blog, moete koristite sajtove, kao to su, izmeu ostalih,
TypePad (TypePad (http://typepad.com/), Blogger (http://blogger.com), WordPress (http://

2
wordpress.com/) ili Tumblr (http://tumblr.com). Prednost ovih aplikacija je u tome to je jed-
nostavno podesiti sajt, izabrati temu i poeti objavljivanje na Vebu pomou veb interfejsa. Nije
potrebno runo izraivati veb stranice, podeavati nalog za hosting ili runo ureivati datoteke.
Postoje i online alatke, kao to su Wix (http://www.wix.com/), Squarespace (http://squares-
pace.com/) i Weebly (http://www.weebly.com/), koje omoguavaju da izraujete veb sajt
otvorenijeg formata od bloga. Ove aplikacije olakavaju kreiranje veb sajta pomou njihovih
mnogobrojnih ablona, a sadre i druge funkcije, poput naziva domena, e-trgovine, zbirke slika,
multimedije i jo mnogo drugih. Prednost korienja ovih aplikacija je u tome to su jedno-
stavne za podeavanje i kreiraju sajtove profesionalnijeg izgleda nego platforme za blogovanje.
Uopteno govorei, sve to je potrebno da uradite da biste zapoeli rad sa ovim aplikacijama
je da popunite obrazac, izaberete URL i temu za svoj veb sajt. Tada moete uneti svoj sadraj
pomou obrazaca, koji omoguavaju da izbegnete pisanje HTML-a za stranice - neke od njih
ve sadre WYSIWYG ureivae, pa moete formatirati sadraj koji unesete, a da ne koristite
HTML.
Meutim, to ne znai da ne treba da nauite nita o HTML-u ili kaskadnim opisima stilova
(CSS). ak i ako ne kreirate stranice runo, ipak treba da razumete kako su strukturisane stra-
nice kada ponete da unosite sadraj ili menjate teme. Ako ne razumete kako se izrauju veb
stranice, neete znati da pratite i reavate probleme oznaavanjem na veb sajtu, bez obzira da li
ste odgovorni za pisanje sajta ili ne.
Korienje aplikacije kod prvih koraka pri objavljivanju na Vebu je najbolji pristup za veinu
ljudi, jer ona omoguava da odmah ponete postavljanje sadraja koji vas zanima na Vebu, a
da ne morate sami da razmiljate o mnogo emu. Meutim, ljudi nailaze na ogranienja u ovim
aplikacijama i ele da preuzmu vie kontrole nad svojim veb sajtovima i da nastave dalje sami.

Podeavanje svog hostinga


Ako elite da kreirate i otpremite svoje veb stranice, izaberite kompaniju koja e vam obezbediti
prostor koji vam je potreban. Postoji veliki broj hosting kompanija koje nude prostor na Vebu
ljudima koji ele da pokrenu svoje veb sajtove. Kompanije, kao to su, na primer, DreamHost
(http://dreamhost.com/) i Pair.com (http://pair.com/), bave se hostingom dugi niz godina i nude
razliite pristupane hosting pakete, ali postoje i mnoge druge opcije. Mnogo ljudi se pretpla-
uju na hosting paket iz kompanije koju koriste za registrovanje naziva domena za svoje veb
sajtove ili koriste hosting kompanije koje se nalaze u njihovom lokalnom podruju.
38 LEKCIJA 2 Sreivanje alatki

Koraci za podeavanje hosting naloga da bi stranice bile dostupne na Vebu su sledei:


1. Registrujte naziv domena po elji. Ako elite da se va veb sajt pojavi na URL
adresi, kao to su mycoolsite.com ili mycompany.com, potrebno je da registrujete taj
naziv domena. Postoji veliki broj registratora domena; samo unesite registracija
domena u omiljeni pretraiva da biste videli veliki broj oglasa i rezultata pretrage
za kompanije koje nude registraciju domena.
2. Izaberite kompaniju za veb hosting i prijavite se za nalog. Ako ete svoje stranice
stavljati na interni ili eksterni server koji pripada vaem poslodavcu ili koli, nee
vam biti potreban vlastiti hosting. Meutim, ako kreirate novi veb sajt koji e biti
dostupan na Internetu, potrebna vam je neka vrsta hosting paketa.
3. Poveite naziv domena sa novim veb sajtom, ako ste ga registrovali. Va registrator
domena i hosting kompanija e vam dati instrukcije za podeavanje naziva domena
tako da on upuuje na va hosting nalog. Zahvaljujui tome, kada korisnici unesu va
naziv domena u URL, oni e dobiti sadraj koji ste otpremili na server.
4. Zaponite otpremanje sadraja. Nakon to ste podesili veb hosting, moete koristiti
bilo koju alatku koju elite da biste zapoeli otpremanje veb sadraja na server.
Mnoge hosting kompanije obezbeuju veb server koji omoguava da se otpremi
sadraj, ali veina hosting kompanija e dozvoliti da koristite alatku za prenos
datoteke koja podrava protokol za prenos datoteka (FTP), bezbedno kopiranje
(SCP) ili bezbedni FTP (SFTP) da biste preneli datoteke na server.
Mnogo opirnije o veb hostingu i o nainu kako se objavljuje sajt e biti rei u Lekciji 23,
Kako da objavite svoj sajt.

Rezime
U ovoj lekciji sam objasnio kako da produktivnije radite na veb stranicama. Nauili ste kako
da koristite Developer Tools ugraen u pregleda Google Chrome, koji e vam pomoi u kori-
enju veb stranica, i kako da pronaete ureiva teksta koji moete koristiti za kreiranje veb
sajtova. Nauili ste i postavljanje ciljeva za svoj veb sajt i pronalaenje hostinga za sajt. Obja-
snio sam, takoe, kako se skice koriste za kreiranje mape veb sajta pre nego to ponete da ga
kreirate u HTML-u.

Radionica
U prvom delu radionice navode se neka od uobiajenih pitanja koje ljudi postavljaju kada
planiraju veb sajt, zajedno sa odgovorima na svako pitanje. Nakon toga, imate priliku da odgo-
vorite na neka pitanja u kvizu. Ako imate problema da odgovorite na bilo koje pitanje, preite
na sledei deo, gde ete pronai odgovore. Vebe e vam pomoi da formuliete neke ideje za
svoj veb sajt.
Radionica 39

Pitanja i odgovori
P Organizovanje zahteva mnogo posla. elim da radim neto jednostavno, a govorite
da moramo da imamo planove i skice. Da li su svi koraci koji se ovde navode zaista
neophodni?
O Ako radite neto jednostavno, neete morati mnogo da primenite od onoga to

2
preporuujem u ovoj lekciji. Meutim, ako je re o dve, tri ili vie meusobno
povezanih stranica, unapred pripremljen plan e vam mnogo pomoi. A rezultat
moda nee biti ono to ste oekivali, to e ljudima oteavati da dobiju informacije
koje su im potrebne sa vaeg veb sajta, a i vama e biti teko da ponovo organizujete
te informacije da imaju smisla. Nee koditi da imate plan pre nego to ponete, a to
vam moe utedeti vreme na duge staze.
P U ovoj lekciji ste veliku panju posvetili organizovanju tema i stranica, ali niste nita
rekli o dizajnu i rasporedu pojedinanih stranica. Zato?
O O dizajnu i rasporedu u govoriti kasnije u ovoj knjizi, nakon to nauite vie o
vrstama rasporeda koji moete uraditi pomou HTML-a i saznate ta ne moete
uraditi pomou HTML-a (jezika koji koristite za veb stranice).
P ta da radim ako mi se ne svia ni jedna osnovna struktura o kojoj ste govorili u ovoj
lekciji?
O U tom sluaju dizajnirajte svoju strukturu. Sve dok vai posetioci mogu pronai ono
to ele ili rade ono to elite da rade, ni jedno pravilo ne kae da morate koristiti
hijerarhijsku ili linearnu strukturu. Predstavio sam ove strukture samo kao
potencijalne ideje za organizovanje veb stranica.

Kviz
1. Kako biste ukratko definisali znaenje termina veb sajt, veb server i veb stranica?
2. Kada je re o objavljivanju na Vebu, koje je znaenje termina poetna stranica?
3. Bez obzira na strukturu navigacije koju koristite na veb sajtu, postoji jedan link koji
obino treba da se pojavljuje na svakoj veb stranici. Koji je to link?
4. Koja je svrha skice?

Odgovori na pitanja u kvizu


1. Veb sajt je jedna ili vie veb stranica meusobno povezanih na smislen nain. Veb
server je stvarni raunar koji skladiti veb sajt (ili deo softvera koji odgovara
zahtevima stranica iz pregledaa). Veb stranice su pojedinani elementi veb sajta,
poput stranica u knjizi.
2. Kad je re o objavljivanju na Vebu, poetna stranica je ulazna taka za ostale
stranice na veb sajtu (prva ili najvia stranica).
40 LEKCIJA 2 Sreivanje alatki

3. Trebalo bi da stavite link poetne stranice na svaku stranicu na veb sajtu. Ako to
uradite, korisnici uvek mogu da pronau put kui ako se izgube.
4. Skica daje celokupan prikaz kako e veb sajt izgledati kada se zavri. Pomae da
organizujete veb stranice na nain koji vama odgovara. Najkorisnija je za vee veb
sajtove.

Vebe
1. Sastavite spisak od nekoliko ciljeva koje posetioci moda imaju za va veb sajt. to
su vai ciljevi jasniji, to je bolje.
2. Nakon to ste postavili ciljeve, posetite sajtove na Vebu koji sadre teme sline
onima koje elite da stavite na svoj veb sajt. Dok pregledate sajtove, zapitajte se da li
su jednostavni za navigaciju i da li imaju dobar sadraj. Zatim, napravite spisak
onoga to vam se dopalo na tim sajtovima. Kako biste poboljali svoj veb sajt?

You might also like