ECTS Informacijski paket za akademsku godinu 2024. / 2025.

Osnove web dizajna

 

Naziv
Osnove web dizajna
Organizacijska jedinica
Odsjek za informacijske i komunikacijske znanosti
ECTS
5
Šifra
39704
Semestri
zimski
Nastavnici
Satnica
Predavanja
15
Vježbe u praktikumu
30
Kolegij je preduvjet za upis ili polaganje
Kolegij je potrebno položiti za

Cilj
Upoznati studente s osnovnim elementima HTML, CSS i JavaScript tehnologija, demonstrirati njihovu međusobnu povezanost u procesu izrade dinamičnih mrežnih stranica s posebnim naglaskom na funkcijsku stranu web dizajna i arhitekturu informacija.
Sadržaj
  1. Od SGMLa do HTMLa. Kako putuje stranica? IETF / W3C. Web standardi. DHTML= HTML+CSS+DOM (JavaScript) HTML dokumenti i HTML elementi. Zaglavlje dokumenta (meta podaci, naslov). Hipertekst, nabrajanje.
  2. Grafika, grafičke mape. Tablica, okviri, obrasci i elementi na obrascu (tekstualna polja, padajući izbornici, radio gumbi, checkboxes, gumbi).
  3. Dizajn, arhitektura informacija, tipovi web korisnika, elementi navigacije (id, sekcije, početna, link za pretraživanje, alati, ime stranice, putokazi, tragovi, pozicioniranje elemenata navigacije, pristupačnost).
  4. Umetanje stilova (vanjski, unutarnji, umetnuti), pravila pisanja CSS-a, selektor i deklaracija (svojstvo+vrijednost), vrste selektora (jednostavni, klasni, ID, kontekstni, pseudoklase), komentari u CSS-u.
  5. Span, div, CSS svojstva (fonta, teksta, pozadine, okvira, popisa, tablica).
  6. Web dokument kao kutija, redoslijed zadavanja vrijednosti, rubovi elemenata, margine, odmak.
  7. Pozicioniranje, z-index, izrada različitih modela izbornika, CSS2 i CSS3
  8. Demonstracija korištenja svih HTML i CSS elemenata. - Prikaz grupnih radova 1.
  9. JavaScript i povijest, logičke greške u programiranju, dekompozicija, pozicioniranje (zaglavlje, tijelo, vanjska datoteka), sintaksa, komentari, varijable, tipovi podataka.
  10. Window.prompt, Window.confirm, alert, uvjeti (if else, elseif, switch, uvjetni operatori), petlje (while, do while, for), funkcije (ugrađene, korisnički definirane), funkcije (s/bez argumenata).
  11. Objekti (svojstva i metode), pozivanje svojstava, pozivanje metoda, korisnički definirani objekti, instance objekta, ugrađeni objekti (array, math, data, string, document, form, image), operacije nad znakovima (indexOf, search, lastIndexOf, replace, slice, substr, substring).
  12. DOM, struktura stabla, DOM metode, getElementById, getElementByTagName, getAttribute, setAttribute, svojstva objekta 'document', pozivanje drugih objekata, događaji, atributi.
  13. Demonstracija korištenja svih HTML, CSS i JavaScript elemenata. - Prikaz grupnih radova 2.
  14. Demonstracija korištenja svih HTML, CSS i JavaScript elemenata. - Prikaz grupnih radova 3.
  15. Demonstracija korištenja svih HTML, CSS i JavaScript elemenata. - Prikaz grupnih radova 4.

Ishodi učenja
  1. prepoznati i primijeniti sintaksu HTML-a, CSS-a i JavaScript-a,
  2. povezati vanjske CSS i JavaScript datoteke s HTML-om,
  3. definirati i obrazložiti izbor HTML elemenata,
  4. demonstrirati primjenu CSS-a,
  5. samostalno izraditi jednostavniji JavaScript kod,
  6. objasniti i primijeniti kompleksniji JavaScript kod,
  7. samostalno i timskim radom osmisliti interaktivno web sjedište ovisno o temi web sjedišta,
  8. valorizirati, održavati i uređivati postojeća ili nova web sjedišta,
  9. procijeniti kvalitetu arhitekture informacija,
  10. primijeniti model arhitekture informacija na web sjedištu.
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. E.Castro: HTML za World Wide Web: brzi virtualni vodič, 2004
  2. Dan Cederholm: Bulletproof Web Design, 2007.
  3. Joe Clark: Building Accessible Websites, 2003.
  4. E.Tittel, S.N.James : HTML 4 za neupućene, 2002.
  5. T.A.Powell : Kompletan priručnik - Web Dizajn, 2000.
  6. J. Keith: DOM Scripting: Web Design with JavaScript and the Document Object Model, 2005.
  7. S. Krug: Don't Make Me Think:A Common Sense Approach To Web Usability, 2000.
  8. Eric Mayer: CSS web site design hands on training, 2006.
  9. J.Nielsen: Designing web usability:The Practice of Simplicity
  10. Jim Thatcher et al. : Constructing Accessible Websites
Dopunska literatura
  1. K.Jamsa, K.King, A.Anderson : HTML i Web dizajn: kroz praktične primere, Mikro knjiga (str.324-378; 422-476), 2003..
  2. R. Andrew, D. Shafer: HTML Utopia: Designing without tables using CSS, 2006.
  3. Mary Frances Theofanos and Janice (Ginny) Redish : Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen Readers

Izborni predmet na studijima
Stari studiji
  1. Informacijske znanosti, sveučilišni prijediplomski jednopredmetni studij, 3., 5. semestar
  2. Informacijske znanosti, sveučilišni prijediplomski dvopredmetni studij, 3., 5. semestar