Napredni veb-dizajn

Predmetni nastavnici
Marko Nikolić
marko.nikolic@its.edu.rs

Biljana Bajac
biljana.bajac@its.edu.rs
 DON
● Dodatni časovi:

Nevena Ranković
nevena.rankovic@its.edu.rs
 Oblast predmeta
● HTML
– Obrasci
– Multimedija (audio i video)
● CSS
– stilizacija obrazaca
– animacija
● JavaScript
– jezgro
– uvod u jQuery biblioteku
 Podaci o predmetu
Način polaganja ispita:
1. Nаčin polаgаnjа ispitа u toku nаstаve (semestrа):
а) prvi kolokvijum (sredinа semestrа), zadaci, prag prolaznosti 51%, 30 poena
b) drugi kolokvijum (krаj semestrа), zadaci, prag prolaznosti 51%, 30 poena
c) projekat, prag prolaznosti 51%, 35 poena
d) prisustvo i аktivnost nа nаstаvi, 5 poena
Nаpomena:
Ako su oba kolokvijuma položena zbirna ocena važi do kraja školske godine. Položeni pojedinačni kolokvijumi
(prvi ili drugi) važe zaključno sa junskim ispitnim rokom. U tom roku moguće je ponovo polagati materiju koju
obuhvata nepoloženi kolokvijum. Nakon ovog ispitnog roka studenti koji su položili samo jedan kolokvijum
moraju polagati ceo ispit. Takođe, studenti koji nisu zadovoljni ostvarenim rezultatima na kolokvijumima iste
mogu korigovati polaganjem celog ispita.
Izrada projekta je obavezna. Pozitivno ocenjeni projekat važi do kraja školske godine. Projekat se predaje
najkasnije 14 dana pre ispita u svakom ispitnom roku. U ovom periodu od 14 dana može se izvršiti samo jedna
korekcija projekta od strane nastavnika pre konačnog ocenjivanja. Ukoliko projekat ne bude ocenjen pozitivno
obaveza se prebacuje za sledeći ispitni rok. Tokom školske godine može se izvršiti najviše pet korekcija
projekta od strane nastavnika, ne računajući korekciju u periodu od 14 dana pred ispit.
 Podaci o predmetu
2. Nаčin polаgаnjа ispitа u ispitnom roku:
а) zadaci, prag prolaznosti 51%, 60 poena
b) projekat, prag prolaznosti 51%, 35 poena
c) prisustvo i аktivnost nа nаstаvi, 5 poena
Nаpomena:

Svi položeni delovi ispita (zadaci, projekat) važe do kraja školske godine. Izrada
projekta je obavezna. Projekat se predaje najkasnije 14 dana pre ispita u svakom
ispitnom roku. U ovom periodu od 14 dana može se izvršiti samo jedna korekcija
projekta od strane nastavnika pre konačnog ocenjivanja. Ukoliko projekat ne bude
ocenjen pozitivno obaveza se prebacuje za sledeći ispitni rok. Tokom školske
godine može se izvršiti najviše pet korekcija projekta od strane nastavnika, ne
računajući korekciju u periodu od 14 dana pred ispit.
 Softverski alati
● Predmetni editor
– Light Table – http://lighttable.com/

● Predmetni internet pregledač

– Mozilla Firefox – https://www.mozilla.org

● Validatori
– HTML – https://validator.w3.org/
– CSS – http://jigsaw.w3.org/css-validator/

Studenti kod kuće mogu koristiti alate po želji, stim što se ispit i projekat pregleda sa
Firefox internet pregledačem i u učionici je dostupan navedeni editor
 Literatura
● Džeremi Mekpik, JavaScript 24-časovna obuka,
Beograd: Kompjuter biblioteka, 2011
● Dženifer Niderst, Naučite web dizajn, 4. izdanje,
Beograd: Mikro knjiga, 2014
● Ben Frein, HTML5 i CSS3 prilagodljiv web dizajn,
Beograd: Kompjuter biblioteka, 2014
● Skripta predmeta
● Udžbenik predmeta
 Napredni veb-dizajn
Semestralni projekat – uputstvo
Semestralni projekat – smernice za
izradu
● Tema:
– Veb-prezentacija (esej) o objektu, pojavi, događaju, zanimanju ili
živom biću iz vašeg okruženja. Predmet projekta mora biti
postojeći, realan.
● Izraditi:
– Originalni tekst na jednom govornom jeziku, grafičke priloge (foto,
video) i izgled stranice koji adekvatno prezentuje odabranu temu
● Obim projekta:
– „Home“ strana + 1-3 veb-strane, u zavisnosti od potreba.
Maksimum 4 stranica zajedno sa index.html.
 Semestralni projekat – smernice za
izradu
● Tehnički uslovi:
– Izraditi bar jedan originalni JavaScript skript koji unapređuje
rešenje
– Upotrebiti principe prilagodljivog veb-dizajna tako da se sadržaj
projekta skladno prikazuje na telefonu, tabletu i desktopu
– Besprekoran prikaz i funkcionalnost stranica u Firefox pregledaču
– Validan HTML5, CSS i JS kȏd
– Sav CSS kȏd napisati u jednom CSS dokumentu
– Veb-lokaciju organizovati u okviru jednog foldera koji je nazvan
po šemi: „ime_prezime_brindeksa“. U posebne foldere smestiti
CSS kȏd, font, slike i JavaScript kȏd. Kao što je prikazano na slici
desno
 Semestralni projekat – smernice za
izradu
● Tehnički uslovi (nastavak):
– Početnu stranu nazvati „index.html“. Ostale stranice nazvati
smisleno po potrebi. Ne nazivati ih „druga“, „treća“ itd.
– Upotrebiti isključivo lokalne fontove iz „font“ foldera
– Generički tekst (Lorem ipsum) nije dozvoljen
– Upotreba gotovih tema (rešenja) nije dozvoljena
● Dodatni prilozi:
– Sačuvan i dokumentovan proces razvoja projekta:
skice razmeštaja, istraživanje postojećih rešenja i dr.
● Dozvoljena je upotreba gotovih JS priključaka i CSS
biblioteka, ali ne i Framework-a
 Semestralni projekat – smernice za
izradu
● Slanje projekta:
– Projekat se predaje elektronski u vidu kompresovane arhive (7z, zip ili tar.gz format)
koja ima naziv po šablonu:
„Ime prezime brindeksa“.[zip|tar.gz|7z]
– Sadržaj arhive je početni folder u kojem su svi potrebni dokumenti
– Termin predaje je 14 dana pred ispit u datom ispitnom roku. Nakon ovog datuma
projekat se neće razmatrati za dati ispitni rok, već za sledeći (ako postoji)
– Dozvoljeno je slati projekat pre roka.
– Projekat se šalje po sledećem principu:
● studenti sa neparnim brojem indeksa profesoru Marku Nikoliću na email

marko.nikolic@its.edu.rs
● studenti sa parnim brojem indeksa profesorki Biljani Bajac na email

biljana.bajac@its.edu.rs
 Ocenjivanje projekta
● Tehnički uslovi
● Upotrebljivost i sadržaj
– adekvatnost sadržaja za odabranu temu
– funkcionalnost navigacije i dugmića
– JavaScript
● Estetika
– kompozicija razmeštaja
– tipografija
– boja i efekti
– slike
– vizuelna celina
 Ocenjivanje projekta
● Za 51%:
– pogođena tema i adekvatan sadržaj za temu
– validan HTML 5, CSS i JS
– adekvatan HTML 5
– sadržaj ne sme da izlazi van ekrana za sve širine prozora veb-
pregledača (responsive web design)
– čitljiv tekst (veličina, kontrast, dužina reda, prored, familija, poravnanje)
– slike ne smeju da gube svoju prirodnu proporciju (da se „razvlače“ i
„spljeskavaju“)
– ispunjeni svi tehnički uslovi
 Napredni veb-dizajn
Česte greške na projektu iz WD
 Česte greške
● Generički tekst
● Mešanje govornih jezika
● Nekorišćenje diaktiričkih znakova i naših slova. DJ umesto Đ.
● Tekst (font) koji nije proporcionalan. Izgleda razvučeno,
spljošteno, nesrazmerno.
● Ime foldera „portfolio, projekat“ umesto „imeprezime brindeksa“
● Ne poštovanje uputstva za projekat
● Nisu sve tri širine na jednom JPG, već zasebno
 Česte greške
● Ogromni JPG fajl (22400x14000px samo desktop mokap)
● Ne uzimanje viewporta u obzir prilikom dizajniranja. Posmatranje celog
mokapa kao da je plakat.
● Predimenzionisani elementi, ogromna razmera za tekst i ikone
● Nepostojanje svih stranica iz navigacije, ili traženog sadržaja
● Vertikalno poravnanje mokapa – nisu poravnjati sa gornjom ivicom
● Spljeskane slike
● Ispisivanje dimenzija artborda umesto viewporta iznad mokapa. Nije
nužno ispisivati dimenzije viewporta.
● Ogromni razmaci između prikaza pojedinačnih mokapa za različite širine
 Česte greške
● Ne upućenost u pojam „hamburger“ ikone
● Neujednačeni razmaci i gust sadržaj, umesto ujednačenijih i većih razmaka
da bi sadržaj mogao da "diše"
● Nije upotrebljena mreža za razmeštaj
● Nedostatak belog prostora (sadržaji sa više teksta se najbolje čitaju na beloj
podlozi)
● Neujednačeno poravnanje teksta, neujednačeni pasusi, previše teksta.
Siročad.
● Previše stilova nad jednim elementom (Npr. upotreba pozadinske boje,
gradijenta, ivice i senke odjednom).
● Previše font familija. Loše uklapanje više font familija.
 Česte greške
● Stavljanje izgleda ispred funkcionalnosti. Ne razmišljanje o
tome kako bi nešto trebalo da funkcioniše.
● Ne prikazivanje izgleda navigacije u mobilnom, ili tablet
prikazu koja je spakovana u meni
● Ne prikazivanje izgleda elemenata na hover, ili kada se
klikne na njega (npr. u galeriji)
● Mutni prikazi i loš kvalitet mokapa
● Nedostatak istraživanja postojećih rešenja – vizuelni
sistemi, funkcionalnost
 Korisna knjiga iz grafičkog dizajna
● Rebecca Hagen, Kim
Golombisky
● White Space Is Not Your
Enemy : A Beginner's Guide to
Communicating Visually
Through Graphic, Web and
Multimedia Design 3rd ed.
● A K Peters/CRC Press 2016
 Šifra 17
● Studenti koji polože zadatke, a nisu predali projekat
imaće upisano 17 poena
● To je naznaka da su položili zadatke, u koliko to ne
mogu da vide na portalu.
 Najava sledećeg časa
● CSS animacija