WEB DIZAJN - SKRIPTA

Tema i izgled Web prezentacije  

          Najpre treba odlučiti koja je svrha i cilj sajta, na koji način želite da predstavite sebe.
U zavisnosti od načina izrade Web strane u velikoj mjeri zavisi i njen izgled kod posjetilaca.
Sve mora biti prosto i jednostavno. Dizajn je veoma bitan, jer komunicira sa posjetiocem i
predstavlja prvu impresiju. Prije izrade treba pažljivo istražiti koji već sajtovi postoje na
Internet-u sa istom ili sličnom tematikom kako bi se izbjegle sličnosti i kopiranje. Ne treba
činiti iste greške kao i drugi, već pokazati nove ideje i rješenja za postojeće probleme.
           Na svakoj strani se pojavljuju šabloni (template) koji predstavljaju skup elemenata.
Ovim šablonima se definišu fontovi, veličina i boja teksta, poravnjanja, proredi i drugi bitni
elemeti. Elementi koji su bitni za jedan šablon su:  navigacija, dizajn i struktura
strane.                                                                                                       

Web prezentacije, odnosno web stranice mogu biti statične i dinamičke. Za statične stranice
koristimo HTML skriptni jezik uglavnom. Statična stranica je web stranica kojoj ne mjenjamo često
sadržaj. Npr. napravimo svoju prezentaciju (4-5 fajlova sa slikama, opisom itd.).
Dinamičke prezentacije su web portali kod kojih se svakodnevno mjenja sadržaj, dodajemo nove
vijesti, novosti itd. Takvi portali su danas free (besplatni) za download i lagani za instalirati.
Najpoznatiji su: phpnuke, mambo, dotnetnuke i drugi.
Linkovi za ove portale su: www.phpnuke.org www.dotnetnuke.org
Web stranica može biti jedan ili više fajlova koji nešto prezentiraju na internetu, dok web sajt sadrži
znatno više sadržaja, mnoštvo slika, materijala, direktorija itd.
Da bi web stranicu predstavili na internetu, moramo je podići na neki web server (kod nekog
provajdera), ona mora biti dostupna 24 sata. Web stranicu možemo postaviti i na lokalnim web
serveru u LAN računarskoj mreži. Koristimo Microsoft Internet Information server i Apache web
server. Microsoft IIS se koristi za HTML, ASP, dok Apache web server koristimo kada imamo php
stranice.

Navigacija
Navigacija je najvažnija i potrebno je da bude što jednostavnija. Linkovi treba da se otvaraju
u istom prozoru sem kod strana koje sadrže liste linkova. Linkove i hiperlinkove treba pisati
jasno i jednoznačno, a link ka uvodnoj strani treba da bude vidljiv na svim stranicama sajta.
Neispravni linkovi, nedostajuće strane i pogrešno povezane strane rastjeraće posjetioce
sajta.
       Dizajn šablona služi da privuče pažnju posjetilaca. Sve treba da djeluje skladno i da
tekst bude čitljiv. Preporučuje se korišćenje pastelnih boja koje privlače pažnju posjetilaca.
Ne treba zaboraviti na logo, jer se na taj način stvara identitet sajta. Da biste imali prostora
za sadržaj treba paziti da slike ne zauzimaju previše mjesta. Takođe ne treba koristiti
previše slika, jer će to smanjiti brzinu učitavanja strane. Grafiku i multimediju smanjiti na
nužan minimum.
      Struktura šablona sadrži različite elemente: naslov, uvodni pasus, jedan ili više pasusa
razrade sa podnaslovima, više vezanih pasus za poziv na gledanje sljedećih strana. Naslovi
se najprije uočavaju pa se zatim ističu podebljanim slovima, bojom i veličinom.

Kreiranje Web strane i Home page  

           Uvodna strana (Home page) je veoma bitna za kreiranje Web prezentacije, najbitnije
stvari su na prvoj strani. Home page predstavlja kratku formu koja će zainteresovati
korisnike za ono o čemu će se poslije govoriti, s toga ona treba da predstavlja vodič kroz
sadržaj. Najsažetiji rezime prezentacije treba da je na početku uvodne stranice sajta.
Najbitnijii djelovi sajta mogu se istaći vizuelno pomoću grafičkih metafora (maksimalno pet).
Na uvodnoj strani treba da stoji Vaša e-mail adresa, ukoliko želite da Vam se korisnici
obrate. Ono što je najvašnije za Home page jeste sadržaj koji se nudi, liep dizajn, brzina
učitavanja i dobar navigacioni meni.
                                                                            
Pravila vezana za kreiranje jedne strane su:
 U svetu danas prema statistici najviše preovladavaju monitori sa rezolucijom
1024*768 tako da stranice ne treba da budu manje rezoluciji od ove.
 Ukoliko koristite programe za automatsko kreiranje strana koji koriste tabele za
formatiranje strana, izbjegavajte da stavljajte cjele strane u tabele, ako ih koristite
tada ih podjelite na više manjih, jer će se one postepeno pojavljivati pa će posjetilac
moći da prati sadržaj.
 Strana mora biti bez grešaka i koristite ispravne HTML oznake.
 Izbjegavajte elemente koji su specifični za neki od Web čitača, a nisu podržani u
ostalim čitačima, kako izgled Vaše strane ne bi zavisio od Web čitača u kome se ona
pregleda.
 Većina korisnika Internet-a nema na svojim računarima instalirane razne plugin-ove i
zato ih treba izbjegavati, a oni i u mnogo slučajeva usporavaju učitavanje strana.
Jedini plugin o kom bi možda trebalo razmisliti je Macromedia Shockwave & Flash,
koji se već nalazi na većini računara i na neki način je već postao standard.
 Javu treba koristiti samo u slučajevima kada za to postoji dobar razlog. Poznata je
kao jedan od uzroka obaranja sistema posjetilaca. Java apleti se izvršavaju sporo i
prenos često dugo traje. Većina posjetilaca ovo neće tolerisati. Razmislite o kreiranju
dinamičkih Web prezentacija.
 Dužina strane ne treba da bude duža od 30 kb, dok se za samu stranu preporučuje
da učitavanje ne treba da bude duže od 30 sekundi. (Ovo nije lahko uvijek postići).
 Dinamičnost strana i unapređenje dizajna se postiže upotrebom Cascading Style
Sheet-a i JavaScript-a, jer razdvajaju izgled i interakciju od prezentacije podataka.
 
            Na Web-u je veoma bitna stvar čitljivost i kontrast, ali sa kontrastom ne treba
pretjerivati  pošto jak kontrast uopšte nije prijatan za oči. Tradicionalna crna na bijeloj
pozadini je prijatna za naše oči, siva na bijeloj pozadini je još prijatnija. Neophodno je
razdvajanje pasusa i dosta bijelog prostora pošto ta kombinacija odmara oči, a ujedno će i
doprinjeti da posjetioci žele da pročitaju sadržaj sajta. Tekst ne treba da bude ni predugačak
ni preširok, a fontovi ne bi trebalo da su manji od 10 piksela

Najveća prednost Web-a je njegova jednostavnost, što omogućava brzu izmjenu sajta
ukoliko on ne funkcioniše kako želimo.

Organizacija Web strukture    

        Da bi kreirali Web prezentaciju ( sajt ) potrebna je najpre IDEJA. Web dizajn je
mješavina kreativnih sposobnosti i tehničkog znanja. Kada odredite temu Web prezentacije,
prije nego što krenete na kreiranje, potrebno je izvršiti malo istraživanje i pogledati kako
izgledaju slični sajtovi i analizirati sve moguće detalje. Sajtovi slični onome koji ste izabrali
mogu se pronaći korišćenjem ključnih riječi Web prezentacije ili raspitivanjem kod korisnika.
Pronađeni sajtovi i ispitivani korisnici treba da daju odgovore na neka od sljedećih pitanja:
da li je razumljiva svrha sajta, da li adresa sajta označava tematiku, da li je sajt koristan za
posjetioce, da li ste pronašli teme koje interesuju korisnike... Cilj je da razvijete sajt koji će
efikasno da se nosi sa konkurencijom, ne samo na sajtu već i u okviru drugih medija.
             Nakon određivanja svrhe sajta, kao i sadržaja, potrebno je izvršiti organizaciju sajta
koja ujedno predstavlja i strukturu kataloga (direktorijuma) tj. kategorija u kojima će biti
smještene stranice sajta.  Treba odrediti važne dijelove prezentacije i te dijelove razdvojiti
na neki način u okviru prezentacije. Najbolje je napraviti blok šemu sajta na osnovu koje se
pravi navigacija kroz sajt. Na taj način vizuelno se predstavlja organizacija i sastav sajta, a
olakšava kasnije njegovo dokumentovanje. 
            Web strane tj. sadržaj se grupiše u krupnije cjeline, a ove se dalje
organizuju u kategorije (npr. kategorija USLUGE može imati cjeline WEB
DIZAJN, INTERNET PROGRAMIRANJE itd.). Svaki pravougaonik blok
šeme može predstavljati jednu ili više Web strana organizovanih u te
kategorije. Linkovi se ređaju po važnosti i to s lijeva na desno kod
horizontalne i od gore na dole kod vertikalne navigacije. 
Za prezentaciju je korisno da ima definisane sljedeće delove:
 INDEKS
Predstavlja abecedni spisak svih ključnih riječi, tehničkih izraza sa
objašnjenjem.
 PRETRAGA
Dio sajta koji omogućuje posjetiocu da brzo dođe do traženog
sadržaja, kroz nalaženje ključnih riječi ili fraza. 
 PITANJA I ODGOVORI - FAQ
Stranica koja nudi objašnjenja za najčešće postavljena pitanja od
strane korisnika prezentacije.
 Kada se razvije organizacija sajta, kreiraju se direktorijumi (folderi) na hard disku sa
tom strukturom. Dubina direktorijuma treba da ide najviše četiri nivoa, zbog
navigacije. Treba zapisati imena svih HTML dokumenata koje želimo kasnije da
ubacimo u te direktorijume. Ta imena se kasnije  koriste za linkovanje.

Sadržaj za Web 

           Dizajn Web prezentacije jeste bitan, ali ne i presudan faktor. Najviše pažnje treba
obratiti na sadržaj. Riječi su osnovno sredstvo pomoću koga sajt postaje vidljiv za široke
mase na Internet-u. Na kreiranje ne treba trošiti puno vremene i nema potrebe dovoditi do
perfekcionizma. Web prezentacija ne mora odmah na početku biti sa svim zamišljenim
djelovima dovoljno je za početak kreirati 4-5 najbitnijih djelova. Tekstove je najbolje pisati
nazavisno od sajta, u nekom od tekst editora i to mora biti neformatiran. Web je tzv. "kratka
forma", gde sa malo riječi treba reći najbitnije stvari. Istraživanja su pokazala da čovjek čita
25% sporije na monitoru nego što to radi na papiru. To znači da treba tekst smanjiti za 25%,
jer :
 
 79% čitača samo iščitava tekst, tj. ne čita u punom smislu već samo glavne pasuse i
naslove,
 Čitanje preko monitora nije produktivno i zamara,
 Većina ljudi čita u off-line režimu i želi da tekst odštampa.

            Bitno je da tekst bude gramatički ispravan, preporučuje se da neko drugi provjeri
tekst. Potrebno je omogućiti da se tekstovi čitaju ili štampaju u off-line modu. Svaki tekst
mora da posjeduje jedinstven naslov i da nedvosmisleno ukazuje na predmet teksta (naslovi
se najviše čitaju). Naslovi u obliku pitanja sa velikim i malim slovima privlače posjetioce. 
          Najbitnija je čitljivost. Čitljivost se postiže odvajanjem teksta samim tim tekst će
postati pregledniji. Prvi pasus koji dolazi neposredno posle teksta treba da najavi i
zainetresuje posjetioca za čitanje ostatka. Važne stvari treba staviti na sam početak. Ostali
pasusi obezbjeđuju direktnu korisnu informaciju, oni moraju biti jasni i koncizni. Širina teksta
bi trebala da bude oko 400 pixela ili 15 riječi ( 65 karaktera ). Ukoliko je tekst dugačak
najbolje je podjeliti ga na više strana i izbaciti zamorne reči i konstrukcije kao što je
izražavanje u pasivu, korišćenje pretjerano dugih riječi (ako postoje sinonimi) ili suvišnih
pridjeva. Treba koristiti direktan govor (aktiv), jasne konstrukcije koje prenose suštinsku
informaciju ili emociju. Pet fontova imaju najbolju čitljivost na ekranu i zastupljenost na
računarima, a to su:  Verdana, Tahoma, Arial, Times New Roman i Courier fontovi.
Tekstove treba prevesti bar na engleski jezik.
Upotreba slika na Web - u  

           Upotreba slika na Web-u omogućila je ovom mediju da bude prihvaćen i da zaživi.
Bez slika sajt bi bio suhoparan i izgubio bi na vizuelnom izgledu, jer jedna slika govori više
od 1000 reči. Slike moraju da prate tekst, ali treba voditi računa da se ne nabaca previše
slika, jer će se stranica učitavati previše sporo.
 
        Poželjno je da veličina slike na ekranu bude prilagođena minimalnoj velični ekrana
korisnika Web-a a to je rezolucija od 640*480 piksela. Kad se na to odbije okvir koji pravi
sam browser, za prikaz ostaje 600*350 piksela, pa je preporuka da slike ne budu veće od
ove rezolucije. Uvek možemo staviti i sliku veće rezolucije, ali je preporučljivo da pored linka
ka njoj stoji i njena veličina u kilobajtima. Ovo je poželjno i za druge zahtjevnije
multimedijalne sadržaje kao što su animacije, video snimci i dr. 
 
        Slike ne bi trebalo da pređu veličinu od 50KB. Boju pozadine, slike i tekst treba
usaglasiti tako da sve djeluje skladno i da tekst bude čitljiv. Slike koje koristite za pozadinu
ne trebaju da budu ni suviše velike (1-3 kb) niti suviše male (zbog procesa popunjavanja
pozadine sajta - najbolja veličina za pozadinu je 256 bajta). 
Slike treba da upotpune sadržaj, pružajući vizuelni identitet samom kontekstu. Ne trebe
postavljati suviše mnogo, a ni suviše malo slika. Sljedeća lista je prikaz tipova grafika koje
su prihvatljive pri dizajnu Web strana (redosled je po važnosti):

 Navigacija - Potrebno je uvek istaći sistem za navigaciju u okviru strana, to se postiže

na mnoge načine, najjednostavniji i najbrži odnosi se na korišćenje slika oko samih
linkova, boja i HTML tabela. Ovakav sistem je mnogo više upotrebljiviji od običnog
nabrajanja linkova, mada uvek koristite tekstulne linkove. 
 
 Logo - Koristi se da bi identifikovao samu Web prezentaciju. On treba da se provlači
kroz sve strane kako bi se lakše zapamtile, a tako se održava cjelovitost dokumenata na
Web stranama. 
 
 Tačke ispred stavki - Koriste se da bi privukle pažnju na bitnije djelove, posebno kod
nabrajanja, npr. linkova, a omogućuju osvježavanje izgleda na stranama sa puno
paragrafa.  
 
 Zaglavlja - Poznata i kao naslovna slika, tj. slika u kontekstu. Ovakva slika određuje
raspoloženje i tematiku kategorije u kojoj se prikazuje. Korisnik po ovim slikama može
da zaključi gdje se trenutno nalazi. 
                                                                                                            
 Horizontalne linije - Koriste se za isticanje i prekida same forme teksta. Zbog različitog
prikaza u raznim browser-ima, obično se koriste slike. 
 
 Pozadinska slika - Korišćenje pozadinskih slika omogućava kreiranje vizuelnog
identiteta same Web prezentacije, potrebno je da se usaglase sa strukturom same
strane i da ističu sadržaj koji posjeduju. 
 
 Naslovi (tekstualna grafika) - Često se umjesto samih naslova koriste tekstualne slike,
jer su naslovi najčitaniji pa je potrebno privući posjetioce. Ovakve slike su čitljivije i
omogućavaju nezavisnost fontova, tj. željeni nestandardni fontovi vide se na svakom
računaru. 
 
 Fotografije - Najčešće se koriste da bi se propratio tekst, privukla pažnja i izgradio
kredibilitet. Posjetioci najviše obraćaju pažnju na slike, pa možete kreirati razna
osjećanja u zavisnosti od ciljne grupe kojoj se sajt obraća.
 
 Sve slike na sajtu moraju se slagati po bojama, obliku slova i specijalnim efektima.
Cjelovitost prezentacije ne smije se prekinuti upotrebom različitih veličina, boja itd.
 
 Slike koje se koriste za Web prezentaciju treba postaviti  u jedan direktorijum (katalog)
kako bi se keširale (snimile kod korisnika), čime se ubrzava vreme učitavanja strane.
Kod ovakvih slika treba paziti na referenciranja, pošto moraju da ukazuju na isti
direktorijum i isti fajl pa je potrebno dobro organizovati Web prezentaciju. 

Web stranice    

           Web stranica je osnovna jedinica organizacije. Web stranice  imaju hipertekst,
odnosno linkove sa drugim stranicama, koji su implementirani preko URL – a. Stranice su
opisane korišćenjem “Hypertext Markup Language“ (html), koji predstavlja visok nivo jezika
za opis dokumenta. HTML određuje strukturu, ali ne i  izgled dokumenta. On definiše
djelove kao što su “zaglavlje prvog nivoa“, “spisak“ i  “naglašen tekst“. Tumačenje stranice
na mašini klijenta se obavlja uz pomoć čitača.

           Da bi se uspješno kreirala Web stranica potrebno je znati HyperText Markup
Language (HTML). To je jezik koji služi za opis dokumenata i njihovih međusobnih veza. Ovi
dokumenti predstavljaju međusobno povezane hipertekstove (hypertext), djelovi teksta,  koji
se prikazuju u Web čitačima (browser-ima). Na taj način čitalac interaktivno određuje
redosljed čitanja. Kretanje kroz dokument naziva se navigacija. Navigacija omogućava
korisniku osećaj slobodnog kretanja kroz informacioni prostor. HTML je sintaksni jezik za
formatiranje dokumenata koji je nastao od SGML-a (Standard Generalized Markup
Language). HTML je u tekstualnom formatu i posjeduje ekstenziju .htm, .html.

XML (eXtensible Markup Language)

XML (eXtensible Markup Language) - predstavlja sintaksu jezika koji opisuju podatke. XML
predstavlja sintaksu u tekstualnom formatu. On je kreiran sa namjerom da bude
jednostavan za učenje, jeftin, brz i optimizovan za Internet. XML se naziva i eXcellent
Marketing Language. (XML danas ima široku primjenu).

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) je nastao sa ciljem proširivanja HTML-a bez dodavanja
novih elemenata i atributa. Koristeći šeme definišemo dizajn cjelokupne Web prezentacije
umjesto da konstruišemo dizajn svake strane pojedinačno. Promjena izgleda Web
prezentacije je jednostavna pošto mjenjamo samo šeme stilova. Šeme stilova su rješile
veliki problem prezentacije informacije. CSS specifikacija se mora poštovati više nego
HTML. U okviru CSS morate bolje rezumjeti logičku hijerarhiju elemenata. Npr. imamo
sljedeći raspored elemenata i neka smo definisali izgled za svaki od njih:
 
<body> <p> <i> nauči da </i> kreiraš </p>  Web prezentaciju.</body>
            Elemenat "italic" (<i> tag) nasljeđuje sve definisane stilove od paragrafa (<p> tag)
plus primjenjuje svoje. Ukoliko posjeduju iste definicije sa različitim vrijednostima, usvaja se
zadnja. Paragraf (<p> tag) nasleđuje sve od "body" (<body> tag) elementa. Znači i "italic"
(<i> tag)  element posjeduje definiciju stila od body  (<body> tag) elementa. 
                                                                                                                   
Šeme stilova su kreirane od pravila koja izgledaju kao npr:
H3 {
font-family: Times New Roman;
font-style: regular; 
color: #00FF00
} 
 H3 predstavlja selektor. Svako pravilo počinje selektorom koji je jedan od HTML elemenata
(tagova). Posle selektora, u okviru vitičastih zagrada { }, navodi se deklaracija osobina CSS
koje manipulišu stilovima sa vrijednostima. Deklaracije se razdvajaju sa ; tačka-zarez.
Nazivi klasa se pišu malim slovima.
Npr. deklaracija "font-style: regular; se odnosi na osobinu stil fonta koja posjeduje vrijednost
regular. Kompletno CSS pravilo prethodno navedeno nam govori da će svaki HTML tag u
okviru Web dokumenta posjedovati Times New Roman regular  fontove sa zelenom bojom. 
                                                                                                                   
Kada se CSS koristi?
CSS stilovi se na Web stranama mogu prikazati u:
 u okviru samih HTML elemenata korišćenjem STYLE atributa,
 u obliku blokova CSS pravila u okviru STYLE  elementa i da se referenciraju na
same HTML elemente ili pomoću CLASS atributa kod HTML elemenata, 
 odvojenim dokumentima stilova, sa ekstenzijom .css i da se referenciraju u okviru
strana sa LINK elementom.

Plug - ins  
Kako bi se omogućila funkcionalnost pregleda dokumenata koje Web čitač ne podržava tj.
koji su izvan standardnog HTML, kao što su razni multimedijalni fajlovi, u sam Web čitač se
ugrađuju dodaci (Plug-ins) koji predstavljaju dodatne aplikacije (module). Postoje još i
pomoćne aplikacije. Razlika između pomoćnih aplikacija i dodataka je u tome što dodaci
rade zajedno uz Web čitač, a pomoćne aplikacije su samostalne. 
Postoje mnogi dodaci za Web čitač ali se smatra da bi sljedeća četri trebalo svi korisnici da
posjeduju:  QuickTime, RealMedia, Shockwave i Acrobat Reader. 

QuickTime
Apple’s QuickTime omogućava rad sa mnogim formatima za video, audio i slike
na Web-u. Podržava i QuickTimeVR za prikaz slika virtualne realnosti.
QuickTime posjeduje mnoge funkcionalnosti kako za Macintosh tako i za
Windows platforme. Tip fajla je mov.

RealPlayer
RealAudio i RealVideo predstavljaju najčešće formate za prenos slike i zvuka
preko Web-a. Paket u sebe uključuje dodatke i eksterne aplikacije za
reprodukciju. Tipovi fajlova RealMedia su ra, rm, ram, ili rmd.

 
Acrobat Reader
 Adobe’s Acrobat Reader prikazuje Portable Document  Format (PDF)
fajlove. Ovaj format se upotrebljava za dokumentaciju i brošure.Veoma je
popularan pošto omogućava kreatorima potpunu kontrolu nad dokumentom
ili elementima dizajna što je ponekad nemoguće izvesti u okviru HTML-a. Tip fajla je pdf.

Shockwave
Macromedia’s Shockwave plug-in omogućava pregled fajlova aplikacija Director,
Flash, Freehand, i Authorware u Web čitaču. Mnoge kompleksne animacije na
Web-u su kreirane korišćenjem aplikacije Director ili Flash.