ECTS Informacijski paket za akademsku godinu 2025. / 2026.

Osnove web dizajna

 

Naziv
Osnove web dizajna
Organizacijska jedinica
Odsjek za informacijske i komunikacijske znanosti
ECTS
4
Šifra
266158
Semestri
ljetni
Nastavnici
Satnica
Predavanja
15
Vježbe u praktikumu
30

Cilj
Cilj kolegija je upoznati studente s temeljnim principima web dizajna i izrade mrežnih stranica kroz HTML, CSS i JavaScript, uz naglasak na semantičko označavanje, SEO optimizaciju, pristupačnost i korisničko iskustvo. Studenti će postupno savladati izradu strukture (HTML), vizualnog izgleda (CSS) i osnovne interaktivnosti mrežnih stranica (JavaScript) te primijeniti stečena znanja na samostalnom projektnom zadatku na kojem će raditi tijekom semestra.
Sadržaj
  1. Šetnja kroz povijest. Terminologija. Web standardi. Kako putuje stranica? Od SGML-a do HTML-a. DHTML= HTML+CSS+DOM (JavaScript) HTML sintaksa, HTML oznake, HTML zaglavlje (meta podatci, naslov). HTML tijelo (hiperveze, URL, hintovi, naslovi, nabrajanje, slike, medij).
  2. HTML tijelo (tablica, obrasci): elementi na obrascu (tekstualna polja, padajući izbornici, radio gumbi, checkboxes,gumbi). Semantičke oznake.
  3. Pristupačnost (web za sve), različitosti, tipovi web korisnika. Statistika (prikupljanje podataka). Elementi navigacije: id, sekcije, početna, link za pretraživanje, alati, ime stranice, putokazi, tragovi, pozicioniranje elemenata navigacije,pristupačnost.
  4. Web dizajner (dizajn / razvoj / sadržaj / multimedija). Dizajn stranice i arhitektura informacija. Anatomija stranice (1,62, balans, sklad).
  5. Prikaz 1. projektnog zadatka - analize
  6. Definicija CSS-a i modeli dodavanja stilova (vanjski, unutarnji, umetnuti). Sintaksa ili pravila pisanja CSS-a, selektor i deklaracija (svojstvo+vrijednost). Vrste selektora (jednostavni, klasni, ID, kontekstni, pseudoklase), komentari u CSS-u. Grupiranje elemenata i seciranje stranice.
  7. CSS svojstva 1 (font; tekst; pozadina; okvir; popis; tablica). Bojanje, web dokument kao kutija, redoslijed zadavanja vrijednosti. CSS svojstva 2 (rub; margina; odmak; pozicija; mix).
  8. Grid elementi (container, item, line, cell, area, track, gap), numerički i asocijativni modeli.
  9. Dodatni elementi: kursor, ikone Navigacija - izrada različitih modela izbornika: kao tablica, kao lista, kao lista s rolloverom, višerazinski izbornici, horizontalni, poput gumba. CSS2, CSS3
  10. Demonstracija korištenja svih HTML i CSS elemenata. - Prikaz 2. projektnog zadatka - analize.
  11. Programiranje kroz povijest - žene programerke. Povijest JavaScript-a. Osnovni pojmovi u programiranju. Logičke greške u programiranju, dekompozicija. Pozicioniranje (zaglavlje, tijelo, vanjska datoteka) JavaScript sintaksa, komentari.
  12. Varijable, tipovi podataka (string, broj, boolean, polje). Polja (deklariranje, 'naseljavanje', indeksiranje). Operacije nad podatcima (aritmetičke, logičke, poređenje). window.prompt, window.confirm, alert.
  13. Uvjeti (if else, elseif, switch, uvjetni oeprator). Petlje (while, do while, for). Funkcije (ugrađene, korisnički definirane), funkcije (s/bez argumenata)
  14. Objekti: svojstva i metode, pozivanje svojstava, pozivanje metoda. Korisnički definiran objekt, instance objekta, ugrađeni objekti (array, math, date, string, document, form, image) Pperacije nad znakovima (indexOf, search, lastIndexOf, replace, slice, substr, substring) DOM, struktura stabla, DOM metode (getElementById, getElementByTagName, getAttribute, setAttribute) Svojstva objekta 'document', pozivanje drugih objekata, događaji, atributi.
  15. Demonstracija korištenja svih HTML, CSS i JavaScript elemenata. - Prikaz 3. projektnog zadatka - analize.

Ishodi učenja
  1. prepoznati i objasniti temeljne koncepte mreže, mrežnih standarda i strukture mrežnog dokumenta
  2. izraditi semantički ispravan HTML dokument i organizirati sadržaj prema načelima arhitekture informacija
  3. primijeniti CSS za oblikovanje vizualnog izgleda mrežnog sadržaja
  4. izraditi responzivan raspored elemenata koristeći Flexbox i Grid
  5. primijeniti osnovna načela pristupačnosti u izradi mrežnih stranica
  6. koristiti JavaScript za dodavanje interaktivnosti, manipulaciju DOM‑om i validaciju korisničkih unosa
  7. samostalno i timski osmisliti i izraditi funkcionalno mrežno sjedište koristeći HTML, CSS i JavaScript
  8. kritički analizirati upotrebljivost, dizajn i arhitekturu informacija mrežnih stranica
Metode podučavanja
1. izravno poučavanje
2. samostalno učenje
3. poučavanje vođenim otkrivanjem i raspravom
4. ERR okvir za poučavanje
Metode ocjenjivanja
1. kratki testovi znanja
2. projektni zadatci
3. sudjelovanje na nastavi

Obavezna literatura
  1. J.N. Robbins: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics, 2018.
  2. Jon Duckett: HTML & CSS: Design and Build Websites (2011)
  3. Jon Duckett – JavaScript & jQuery: Interactive Front-End Web Development (2014)
  4. Steve Krug – Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd ed., 2014)
  5. Ethan Marcotte – Responsive Web Design (2nd ed.)
  6. W3C WAI – Web Content Accessibility Guidelines (WCAG 2.1/2.2)
  7. MDN Web Docs (Mozilla Developer Network)
Dopunska literatura
  1. Beaird, Jason & George, James:The Principles of Beautiful Web Design
  2. Covert, Abby: How to Make Sense of Any Mess (2023)
  3. Garrett, Jesse James: The Elements of User Experience
  4. Marcotte, Ethan: Responsive Design: Patterns & Principles
  5. Meyer, Eric & Weyl, Estelle: CSS: The Definitive Guide
  6. J.Nielsen: Designing web usability:The Practice of Simplicity
  7. Mary Frances Theofanos and Janice (Ginny) Redish : Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen Readers
  8. Luke Wroblewski: Mobile First (2020)

Izborni kolegij na studijima
Novi i reformirani studiji
  1. Informacijske znanosti, sveučilišni prijediplomski jednopredmetni studij, 2., 4. semestar
  2. Informacijske znanosti, sveučilišni prijediplomski dvopredmetni studij, 4. semestar