ECTS Informacijski paket za akademsku godinu 2024. / 2025.

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
Ciljevi kolegija obuhvaćaju temeljna znanja i vještine potrebne za izradu funkcionalnih i privlačnih web stranica. Studenti će dobiti osnovna znanja u području strukturiranja mrežnog sadržaja (HTML), primjene stilova na sadržaj (CSS) i dodavanje funkcionalnosti sadržaju (JavaScript). Na kraju kolegija student će savladati osnovnu sintaksu HTML-a i naučiti koristiti meta podatke i elemente u tijelu stranice. Upoznat će se sa semantičkim oznakama koje poboljšavaju strukturu i SEO optimizaciju web stranica. Ovladat će sintaksom CSS-a i različitim modelima dodavanja stilova, kao i sintaksom JavaScripta koja će moći implementirati u izradi dinamičkih web stranica. Kroz ovaj kolegij, studenti će steći osnovna znanja o web dizajnu i razviti praktične vještine potrebne za izradu profesionalnih web stranica.
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 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. R. Andrew, D. Shafer: HTML Utopia: Designing without tables using CSS, 2006.
  2. Dan Cederholm: Bulletproof Web Design, 2007.
  3. Joe Clark: Building Accessible Websites, 2003.
  4. J. Keith: DOM Scripting: Web Design with JavaScript and the Document Object Model, 2005.
  5. S. Krug: Don't Make Me Think:A Common Sense Approach To Web Usability, 2000.
  6. Eric Mayer: CSS web site design hands on training, 2006.
  7. J.Nielsen: Designing web usability:The Practice of Simplicity
  8. Jim Thatcher et al. : Constructing Accessible Websites
Dopunska literatura
  1. Mary Frances Theofanos and Janice (Ginny) Redish : Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen Readers
  2. J. Beaird: The Principles of Beautiful Web Design, 2010.
  3. Abby Covert: How to make sense of any mess, 2023
  4. J.N. Robbins: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics, 2012.
  5. E. Watrall, J. Siarto: Head First Web Design, 2009.

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