Web dizajn - osnovni pojmovi

1. Uvod

Mrežna stranica (web page) je hipertekstualni, multimedijski dokument koji sadržava tekst, grafiku, zvučne zapise i videozapise te veze na druge stranice. Više mrežnih stranica koje su sadržajno povezane čine mrežno sjedište (web site). Izrada mrežnih stranica (web development) odnosi se na sav posao počevši od pripreme, dizajniranja i izrade. Mrežna stranica može biti jednostavna, statična ili dinamična, interaktivna, u obliku mrežnog dnevnika – bloga, mrežne aplikacije ili velike mrežne stranice koja sadržava bazu podataka poput društvenih mreža.

Mrežna stranica najčešće ima nastavak .htm ili .html. Katkad mrežne stranice stvaraju i neki drugi programi i tada nastavak odgovarajuće datoteke na poslužitelju odgovara upotrijebljenomu programskom jeziku (PHP, ASP i sl.).

Kako su mrežni preglednici različiti po svojim mogućnostima i svojstvima, jedna mrežna stranica može izgledati drugačije u različitim mrežnim preglednicima (Google Chrome, Mozilla Firefox, Opera, Internet Explorer, Microsoft Edge). Primjeri kojima ćemo se koristiti u udžbeniku provjereni su u preglednicima Google Chrome i Mozilla Firefox.

2. Struktura i izgled mrežnih stranica

Na većini mrežnih stranica nalaze se tekst, slike i veze na druge stranice, ali mogu se pronaći i animacije, videomaterijali, dokumenti za preuzimanje ili glazba.

 Uobičajeni elementi mrežne stranice jesu:

• okvir stranice
• zaglavlje
• logo
• navigacija
• sadržaj
• podnožje.

Elemente možemo rasporediti na različite načine, a uobičajeni rasporedi prikazani su na sljedećim slikama:

Napomena: Stranica treba biti ispunjena kvalitetnim sadržajem radi kojeg je stvorena. Sadržaj treba davati jasne informacije. Iako je sadržaj najvažniji, vrlo je bitan i privlačan dizajn stranice.

3. Malo o dizajnu

Na izgled mrežne stranice uvelike utječu boja pozadine, tip i veličina fonta te razmještaj elemenata na stranici. Pozadina i boje na stranici utječu na dojam koji stranica ostavlja. Pri odabiru pozadine treba obratiti pozornost na čitljivost teksta koji se nalazi na stranici (šarena tekstura ili žarke boje umanjuje čitljivost i umaraju oči). Preporučuje se na cijelomu mrežnom sjedištu dosljedno se koristiti bojama, tipom i veličinom slova da bi sjedište ostavilo dojam povezanosti.

Važno je pri izrade mrežne stranice obratiti pozornost na to kome je stranica namijenjena.

Ako dizajn nije usklađen i privlačan, korisnik odustaje od pregledavanja i prelazi na druge stranice.

Osim vizualnog dojma, veliku ulogu pri izradi mrežne stranice ima i brzina učitavanja, a to ovisi o objektima koji se učitavaju na samoj stranici.

Iako se dinamičnost stranice može postići ugrađivanjem animacija i/ili videoisječaka, kao i u prezentacijama MS PowerPointa, treba obratiti pozornost na to da animacijama ne odvučemo pozornost posjetitelja od samog sadržaja zbog kojega mrežna stranica postoji. Dobro je glazbene materijale i videomaterijale postaviti tako da posjetitelji sami mogu odabrati žele li pokrenuti glazbu ili pregledati video.

Osobine koje bi trebao posjedovati svaki sadržaj pripremljen za prikazivanje na mrežnim stranicama jesu:

• pravopisna i gramatička ispravnost,
  
• istinitost i ažurnost,
  
• jednostavnost i jasnoća,
  
• zanimljivost i razumljivost,
  
• konkretnost,
• interaktivnost te
  
• multimedijalnost.

4. Savjeti za izradu mrežne stranice

Savjeti za izrade mrežne stranice:

• odrediti namjenu mrežne stranice i ciljanu skupinu
• na papiru skicirati željeni izgled stranice (s naslovnicom, navigacijom i ostalim elementima stranice)
• odrediti dizajn: odabrati pozadinu, boje, font, logo
• odabrati alat za rad
• pripremiti sadržaj i materijale: tekst, slike (poštovati autorska prava)
• sažeto i jasno istaknuti ključne informacije.

4.1. Zadatak 1

Razmisli o temi koju želiš prikazati mrežnom stranicom.

Skiciraj željeni izgled stranice - za cijelo web sjedište i za pojedinu stranicu.

Pripremi sadržaj i materijale poštujući pri tome autorska prava.

Napomena: Dok prikupljate sadržaj i materijale za svoju stranicu, mi ćemo osnove web dizajna proučiti na stranici vezanoj za autorska prava i CC licence.

5. Tehnologija izrade mrežnih stranica

Mrežna stranica prikazuje se u mrežnom pregledniku i u pozadini sadržava HTML kôd (Hyper Text Markup Language). HTML je standardni opisni jezik za izradu mrežnih stranica. HTML kôd mrežnim preglednicima daje podatke o sadržaju i strukturi učitane mrežne stranice, a preglednik od tih podataka oblikuje stranicu kakvu mi vidimo. Danas se koristimo inačicom HTML5.

HTML je jezik za označavanje hipertekstualnih dokumenata. Definirao ga je 1990. godine sir Timothy Berners-Lee. Kao i svaki drugi jezik, i HTML se s vremenom mijenjao i obogaćivao.

Više o razvoju inačica HTML-a pogledajte na https://www.w3schools.com/html/html5_intro.asp. Na istoj stranici pronaći ćete i standardne elemente iz prethodnih inačica koji su u inačici HTML5 zamijenjeni CSS elementima (npr. oznaka font, center i sl.) da bi se dodatno odvojio sadržaj od oblikovanja.

World Wide Web konzorcij (W3C)  organizacija je koja brine o standardizaciji mrežnih tehnologija i razvoju weba . Na W3C mrežnom sjedištu možete pronaći i vježbe (www.w3schools.com/html/exercise.asp) koje će vam pomoći u ovladavanju osnovama dizajna mrežnih stranica.

Za izradu mrežnih stranica uz poznavanje HTML-a važan je i CSS (Cascading Style Sheets) kojim se koristimo za upotrebu stilova pri oblikovanju elemenata na stranici. Upotrebom CSS stilova odvaja se sadržaj od dizajna, što znatno olakšava naknadne promjene u dizajnu. Na taj način stvaramo mrežnu stranicu na računalu korisnika, a kad ju izradimo, potrebno je pronaći poslužitelja (server) na koji ju možemo pohraniti.