Veb-dizajn

Alati za veb-dizajn
 Šta ćete naučiti na ovom času
●
Koji alati se mogu koristiti za određene zadatke u veb-
dizajn procesu
 1. Planiranje
Za potrebe planiranja mogu se koristiti
sledeći alati:
– Papir i olovka
– Lepljive beleške
– Pencil (FLOSS, Windows, macOS, Linux)
http://pencil.evolus.vn
– Figma (web) https://www.figma.com
 2. Dizajniranje
Za potrebe dizajniranja mogu se koristiti sledeći alati:
– rasterska grafika:
●
Abobe Photoshop (Windows, macOS)
●
GIMP (FLOSS, Windows, macOS, Linux)
– vektorska grafika:
●
Adobe Illustrator (Windows, macOS)
●
Inkscape (FLOSS, Windows, macOS, Linux)
– namenski
●
Adobe Color – https://color.adobe.com (web)
●
Paletton.com (web)
●
Adobe XD
 2. Dizajniranje
●
Prototipovi
– papirni
– elektronski
●
Adobe XD CC (Windows, macOS)
●
InVision (web)
●
Sketch (macOS)
●
Figma (web)
 3. Kodiranje
Za potrebe kodiranja mogu se koristiti sledeći tekst
editori:
– Notepad++ (FLOSS, Windows)
– Atom (FLOSS, Windows, macOS, Linux)
– (Adobe) Brackets (FLOSS, Windows, macOS,
Linux)
– (Microsoft) Visual Studio Code (FLOSS, Windows,
macOS, Linux)
 3. Kodiranje
Za proveru kȏda koriste se HTML i CSS validatori:
– HTML i CSS – https://validator.w3.org/nu/ (web)
– page source u okviru veb-pregledača za HTML
 3. Kodiranje
Alati za razvoj (engl. dev tools) u okviru veb-pregledača:
– inspector
– console

Konzola se može
koristiti za proveru
validnosti CSS-a
 4. Objavljivanje
Za potrebe podizanja (engl. upload) dokumenata koji
čine veb-lokaciju može se koristiti sledeći alat
– FileZilla (FLOSS, Windows, macOS, Linux)
– bilo koji FTP klijent
 Veb-pregledači
Podela veb-pregledača na osnovu motora (engl. layout
engine) za parsiranje kȏda:
●
Gecko
– Firefox (FLOSS, Windows, macOS, Linux)
– SeaMonkey (FLOSS, Windows, macOS, Linux)
●
Webkit
– Apple Safari (Windows, macOS)
– Midori (FLOSS, Windows, Linux)
 Veb-pregledači
●
Blink
– Google Chrome (Windows, macOS, Linux)
– Chromium (FLOSS, Windows, macOS, Linux)
– Opera (Windows, macOS, Linux)
●
EdgeHTML
– Microsoft Edge (Windows)
●
Trident
– Microsoft Internet Explorer (Windows)
 Nedoslednosti veb-pregledača
●
Ne parsiraju svi motori isto HTML, CSS i JavaScript
kȏd. Stoga je potrebno pregledati veb-stranicu na što
više različitih vrsta motora

●
Veb-lokacija za pregled podržanosti HTML
elemenata i CSS svojstava u različitim
veb-pregledačima:
http://caniuse.com/
 Veb-dizajn
Preporuke za rad sa grafičkim alatima za potrebe
veb-dizajna
 Šta ćete naučiti na ovom času
●
Opšti radni tokovi u klasičnim alatima za rad sa
grafikom za potrebe veb-dizajna
●
Navedene preporuke se najviše oslanjaju na rad u
programu Adobe Photoshop, ali se mogu primeniti i u
drugim programima za rad sa rasterskom i vektorskom
grafikom (GIMP, Inkscape)
 Podešavanja radnog okruženja
●
Korisno je uključiti prikaz lenjira (engl. ruler) radi lakšeg dodavanja
vođica (engl. guidelines) i očitavanja mera
●
Skala na lenjiru treba da bude izražena u pikselima
●
Pored panela za rad sa slojevima (engl. layers), korisno je imati
prikazane panele:
– swatches
– info
– type
– type styles
●
Korisno je sačuvati podešavanje okruženja
 Kreiranje novog dokumenta
●
Dimenzija dokumenta zavisiće od tipa veb-stranice koja se
dizajnira
– Širina će zavisiti od vrste ekrana za koji se dizajnira
(desktop, tablet, telefon)
– Visina zavisi od količine sadržaja i plana razmeštaja.
Uvek je dobro zadati veću dimenziju visine od
očekivane.
●
Proporcija piksela treba biti 1:1 (kvadrat)
●
Vrednost rezolucije nije od značaja, odabrati 72dpi
 Organizacija dokumenta
●
Ako fazu kodiranja ne vrši ista osoba koja je radila fazu dizajniranja onda
je korisno organizovati dokument na način koji govori programeru jasno
čemu je namenjen svaki deo dokumenta i treba da sadrži sve delove koji
treba da se pojave na stranici
●
Dokument se:
– organizuje u vidu grupisanih slojeva koji se imenuju na osnovu njihove
namene na stranici (header, footer itd.)
– unutar grupe, svaki grafički element se nalazi na posebnom sloju i nosi
ime koje ime programersku logiku. Praktično, to bi mogao biti ili naziv
CSS selektora, vrednost ID atributa, opsi stanja (npr. hover). Ako je u
pitanju posebna slika onda navesti ime datoteke (npr. logo.png)
 Mreža (grid)
●
Ukoliko se kao pomoć za dizajniranje koristi mreža
ona se raspoređuje uz pomoć vođica
●
Raspored vođica se vrši ručno ili automatizovano uz
pomoć proširenja, npr:
– http://guideguide.me/
– https://github.com/AriaMinaei/Griddify
●
Širine kolona i razmaka se određuju proizvoljno, ili na
osnovu odabranog CSS mrežnog sistema
 Prilagodljivi veb-dizajn
●
Za potrebe prilagodljivog veb-dizajna dobro je napraviti
dizajn za nekoliko širina. Ovo se može uraditi kao:
– zasebni dokumenti za traženu dimenziju ekrana
– jedan dokument u kome su referencirani zasebni
dokumenti kao Smart objekti
– jedan dokument u kome su kompozicije organizovane
u vidu grupe slojeva
– upotrebom artbordova (najbolja opcija)
 Pitanja za proveru znanja
●
Nabrojati alate za fazu planiranja
●
Nabrojati alatre za fazu kodiranja
●
Koji motor koristi Firefox?
 Najava sledećeg časa
●
Formati slika za WWW