Osn o v e W eb di z ajna

1. OsnoveWebdizajna

2. Web dizajn: Web dizajn je planiranje, kreiranja izgleda i strukture, − izbor sadržaja i izrada Web stranice. − Oblasti Web dizajna obuhvataju: Web i grafički dizajn, dizajn interfejsa i optimizaciju za Web pretraživače. − PrviWebdizajnerbiojeTimBerners-Lee,kojije1990- 1991. godine kreirao prvi Web sajt na Internetu (info.cern.ch)

3. Alati za (grafički Microsoft izraduWebstranica orijentisani • HTML editori) Open source • – – – – – FrontPage Exspression Quanta Plus Mozilla Composer … Web • Macromedia – HomeSite – DreamWeaver Adobe – PageMill •

4. Tehnologije za izradu Web stranica − − − − − − − − HTML CSS JavaScript PHP ASP MySQL Adobe FLASH AJAX

5. Kreiranje Web sajta

6. Websajtovi World Wide Web je multimedijalni informacioni sistem koji se izvršava na Internetu. Sastoji se od Web sajtova koji su smešteni (hostovani) na serverima po čitavom svetu. Web − − sajtovi se sastoje od Web stranica: svaka stranica (page) ima sopstvenu fizičku adresu (URL). promena stranice se vrši klikom na vezu (link: reč, niz reči, dugme ili sliku). − veza je dizajnirana i posebno označena na ekranu (osvetljena u drugoj boji ili podvučena). Web stranica su formatirane u HTML (HyperText Markup Language) jeziku.

7. PostupakkreiranjaWebsajtova − − − − − − − definisanje ciljevai zadataka sajta planiranje sajta prikupljanje materjala za sajt izrada sajta (dizajn) proba i popravka sajta promocija sajta pradenje i održavanje sajta

8. Planiranje Web sajta Planiranje Web sajta je najvažniji deo u procesu njegove izrade. Bitno je da znate šta želite da prikažete posetiocima, kako Internet funkcioniše i da imate realna očekivanja o tome kako vaš sajt može da izgleda. Prva stvar kod koje vedina pravi grešku jeste da počnu izradu bez planiranja. Pre nego što počnete izradu sajta stavite na papir odgovore pitanja : na • Da li postoji stvarna potreba za sajtom? • Koje poslove i zadatke želim da realizujem preko Web sajta? • Kako želim da izgleda moj sajt? • Kome je namenjen? • Koje su ključne reči i pojmovi koje najbolje opisuju sajt? • Kako treba biti dizajniran? • Da li de biti interaktivan ili ne?

9. StrukturaWebsajta Verovatno najvažniji deo planiranja sajta je struktura sajta, odnosno kako rasporediti sadržaj u logičke jedinice (početna strana,ostalestrane,meni,linkovi,slike,video materijalidr.). Kada počinjete sajt morate imati u vidu na koji način de bitiraspoređen sadržaj (tekst, slike , video...). Uvek je poželjno kreirati grafičku šemu, odnosno mapu sajta, što de vam pomodi u sagledavanju logičke hijerarhije, a takođe ostalimapojasnitistrukturuvašegsajta.

10. Mapa Web sajta Linearni tip Hijerarhiskitip Mešoviti tip

11. Strukturasajta

12. Početna strana Home page (prva stranica) je početna strana sajta Browser je otvara kao prvu prilikom pristupa Web adresi Obezbeđuje linkove ka ostalim delovima sajta Početna stranica daje osnovne informacije o samom sajtu i njegovom sadržaju Početna strana se snima pod imenom index.htm

13. Imena strana Početna strana se čuva pod imenom index.htm Ostale strane se čuvaju kao posebani fajlovi imena prema sadržaju stranice. Primer: linkovi.htm ili biografija.htm Nikada ne treba ostavljati razmake u imenima. nazive sa velikim početnim slovima. itreba imdavati Koristiti višerečne Primer:ListaProizvoda.htmiliDetaljiProizvoda.htm

14. RootfolderWebsajta Pri izradi sajta sve fajlove koji čine sajt treba držati isključivo unutar jednog foldera, tzv. Root foldera Web sajta. Unutar root-a grupisati srodne sadržaje unutar zasebnih foldera, radi kasnijeg lakšeg snalaženja i održavanja. Uvekpravitiposebnefolderezaslike,tekstove,videozapiseisl.

15. Vreme učitavanja stranice Vreme učitavanja stranice (loading time) je tehnički faktor od presudnog značaja za uspešnost kreacije Web strane. Najvažnije je da korisnik dovoljno brzo vidi korisnu informaciju na ekranu. Stranice nikad ne bi trebale biti veće od najviše200 KB. Ali bez obzira kolika je vaša stranica u bajtovima morate proveriti koliko je potrebno vremena da se učita vaša početna stranica na najsporijoj vezi (danas bi to još uvek bilo 56Kbps). Ako posetilac otprilike za 4 sekunde ne može videti o čemu se radi na stranici velike su šanse da de je i napustiti. Konačna veličina stranice je manje značajna ako korisnik može brzo da preduzme neku akciju.

16. StrukturaWebstranice Web stranica je elektronski (digitalni) sinonim ili ekvivalent klasičnom papiru, a obično sadrži slededeće elemente − − − − − − − zaglavlje (header) navigaciju (meni, menu) sadržaj stranice (content) podnožje stranice (footer) baner (banner) bočna traka (sidebar ) pozadina (backgorund)

17. Struktura Web stranice Dimenzijeelemenatasranicedatesuupixelima

18. Primer Web stranice

19. Zaglavlje(Header) Header predstavlja najviše pozicionirani element Web stranice. Bitna karakteristika header-a je što je header element koji ostvaruje prvi vizuelni kontakt sa posetiocem. U header-u se, kao što ste do sadaimaliprilikudaprimetite,nalazilogoWeb sajta, uvek sa leve strane,slogan, fotografijai navigacija (meni). Meni Baner Logo

20. Sadržaj (Content) U delu za sadržaj se nalazi glavni sadržaj stranice. U zavisnosti od tipa stranice na kojoj se nalazite, to može biti tekst sa slikama, grupa proizvoda, samo jedan proizvod, i slično. Na primer, u sadržaju početne stranice ovog sajta nalazi se spisak poslednjih 10 tekstova, dok se u Sadržaj-delu ove stranice nalazi tekst koji upravo čitate. Sadržaj

21. Bočna traka (Sidebar) Još nije nalaziti. ostalim sasvim ustanovljeno gde se bočna traka zapravo treba Na nekim sajtovima ona se nalazi sa leve, dok je na sa desne strane. Ipak, čini se da sajtovi na kojima se bočna traka nalazi sa desne strane prevolađuju kao noviji trend, jer na ne su se nekada bočne trake na svim sajtovima nalazile isključivo levoj strani. Sadržaj bočne trake je često raznolik. Uglavnom, treba propustiti priliku da se u bočnu traku ubace linkovi navigacija ka (veze) ka profilima na društvenim mrežama, popularnim zaglavlju), i sadržajima zašto da ne, ili čak glavna navigacija (umesto u deosa reklamama (banerima). Bočna traka je element bez kog mnogi sajtovi funkcionišu najnormalnije. Bočna traka se u vedini slučajeva nalazi samo na sajtovima koji imaju veliku količinu sadržaja.

22. Bočna traka (Sidebar) Bočna traka

23. Podnožje (Footer) U footer-u svakog sajta nalazi se tekst o zaštiti prava na korišdenje sadržaja. U podnožju se takođe može nadi navigacija, kratke kontakt informacije o vlasniku sajta ili veze ka društvenim mrežama. Podnožje

24. Navigacija Navigacija ili navigacioni meni je u stvari skup linkova koji međusobnopovezujustraniceWebsajta. Navigacija na Web sajtu da omogudava korisniku morabitipregledna, lakazakorišdenjei da sa što manje klikova dođe do željene stranice. Kada je god to mogude, dobro je rukovoditi se principomdakorisniksa bilo koje stranice može otidi na bilo koju drugustranicusamojednimklikom.Trebaizbegavatiotvaranje drugih stranica u novom prozoru, novom tab-u ili pop-up prozoru. Navigacija mora biti uočljiva, ali ne prenapadna da ne bi odvlačila pažnju korisnika od sadržaja.

25. Navigacija Navigacija se najčešde smešta u levu ili gornju stranu, retko sredemorešenjanavigacijesadesne ilidonje strane. Horizontalni meni Vertikalni meni 25

26. Standardni elementiWebstranice • • Prematipu medija Prema vrsti HTML (HTML > 3.2) objekta – – – – – Tekst Slika Zvuk Video ... – – – – – – Tekst Okvir Tabela Forma Slika ... 26

27. Bojapozadineifontova Boje pozadine i fontova su bitan faktor u grafičkom dizajniranju sajta. Boje zavise od teme sajta i ciljne grupi kome je sajt namenjen. Na primer neki dečji sajtovi imade boje koje su šarene, crvene, vesele i slično, dok recimo sajtovi firmi imade dve, do najviše tri boja sa njihovim nijansama, bez šarenila, itd. Odnos izmedju boje pozadine i boje fonta je najbitniji za čitljivost teksta, da ne bi došlo do zamaranja posetilaca prilikom čitanja. Ukoliko se prilikom odabira pozadine teksta uzima neka slika, napravitejemanjetransparentnompomoduphptoshop-a.

28. Bojapozadineifontova

29. Formatiranjeteksta Prezentacija teksta je važan element u grafičkom dizajnu stranica. Osim na pravilan raspored slika i ostalih elemenata unutar teksta, potrebno je obratiti pažnju i na korištenje praznina u obliku margina, novih redova i paragrafa, proreda i sl. Važno je da sadrži dovoljno praznina ili npr. okvira jer se na taj način grupiše u celine koje se lakše pretražuju pogledom. tekst tekst Vedinaposetilaca koji se prvi put nađu na nekoj stranici prvo pogledom "prelete" po sadržaju stranice i na taj način odluče sadrži li ona ono što ih zanima. Zgusnuti tekst otežava takvo pretraživanje.

30. Formatiranje teksta Na ovoj slici levo je dobro uredjen tekst a na desnoj, taj isti tekst je vrlo loše uređen. Primećujete da su slike na desnoj strani "zamarajuće" organizovane, kao i naslov i nema proreda. Sve to rezultira lošim utiskom i obeshrabruje posetioce da čitaju tekst.

31. Fontovi Kako nijedan korisnik nema instalirane iste fontove, to se pri izradi Web stranica moraju koristiti samo oni fontovi za koje ste sigurni da su prisutni na svakom računaru. Ovo obično sužava izbor na Arial, Times New Roman, Verdana, Comic Sans Ms i Courier New. Za stranice koje nastoje ostaviti ozbiljan utisak bi trebalo koristiti na primer Times ili Courier a za zabavne i mladalačke stranice Comic Sans Ms. Naslove i neke detalje za koje vam treba neki kitnjasti font koji imate samo vi prikažite kao slike, ali umereno. Na stranicama čitavog sajta mora da se koristi jedan te isti font, a nikako mešati dve ili vrste fontova. Isto važi i za veličinu fonta. 31

32. Slike O korišćenju slika treba dobro razmisliti. Više slika znači duže učitavanje, pa zato oprez! Bez slika se ne može, inače bi sve izgledalo kao tehnički priručnik, a ne kao dizajnersko delo. Osnovnu stranicu nemojte preopteretiti, jer se ona učitava prva, a duže čekanje zna da nervira (znate po sebi - kada se neka stranica ne učita u prvih pola minuta, verovatno dete otidi na neku drugu). Kao orjentacija može se uzeti da pojedini grafički elementi ne bi trebao biti vedi od 50 KB dok celoukupna stranica ne bi trebala prelaziti 200 KB. Koristite komprimovane slike u gif, jpg ili png formatu.

33. Animacije Na stranicama su najraširenije Gif i Flash animacije. Najčešde se radi o dugmadima ili banerima kojima se želi privudi pažnja posetilaca. I dok jedan do dva takva elementa po stranici ne smeta previše, više od toga nije estetski lepo jer pravi prilično šarenila. Takvo šarenilo za dečje i zabavne sajtove možda i ne smeta previše ali ako je u pitanju poslovni sajt to apsolutno nije preporučljivo. Što se tiče poslovnih sajtova nimalo nije preporučljivo koristiti bilo kakvu animaciju u tekstualnom delu, ali ne smeta recimo u top (gornjem) delu sajta gde je logo firme na primer.

34. Zvuk Nimalo se ne preporučuje da se prilikom otvaranja internet stranice automatski pokrene nekakva melodija. Nametati tako nešto posetiocima nije poželjno, jer to može prilično usporiti otvaranje stranica. Ukoliko se ipak odlučite na korišdenje muzike, npr. tako nešto nije toliko iznenađujuće kod stranica u Flash-u, uvek treba omogućiti opciju za uključenje i isključenje zvukova, i to na jako vidnom mestu u gornjem delu stranice.

35. Kompatibilnost sajta u raznim okruženjima Prilikom grafičkog dizajna potrebno je izgled stranice pogledati različitim okruženjima, i to u skoro svim: u − vrstama internet čitača, kao i u gotovo svim njihovim verzijama rezolucijama ekrana brzinama interneta. − − Morate napraviti grafički dizajn tako da je sajt potpuno identično vidljiv u svim preglednicima. Rezolucija ekrana može uveliko promeniti izgled stranice, čak dotle da je stranica potpuno nečitljiva. To se može preduprediti na dva načina. Prvi način je da se koriste fiksne dimenzije (u pikselima) u dizajniranju. Drugo rešenje bi bilo fluidni grafički dizajn stranice, odnosno stranica koja se prilagođava veličini prozora brauzera.

36. Sklapanje sadržaja u celinu Spremili ste sve slike i tekstove koje ćete staviti na sajt, razradili dizajn i sada to želite pretočiti u oblik koji će browser prikazati. Iako nije neophodno, jako je preporučljivo napraviti dobru strukturu foldera po kojima ćete razmeštati datoteke. – – slike dobijaju svoj folder svaka rubrika sajta svoj folder

37. Webstranica-primer1:

38. Webstranica-primer2:

39. Webstranica-primer3:

40. Preuzeto sa: http://gimnazijakursumlija.files.wordpress.com/2013/03/osnove-web-dizajna2.pdf