FOI Nastava - Uvod u Web tehnologije

Sadržaj se učitava...

FOI Nastava

apps

mdi-login

Uvod u Web tehnologije

2024/2025

4 ECTSa

Informacijske tehnologije i digitalizacija poslovanja 1.3 (ITDP)

Studijski centar Sisak (ITDP 1.3)

Studijski centar Varaždin

Studijski centar Križevci

Studijski centar Zabok

Studijski centar Zagreb

Katedra za teorijske i primijenjene osnove informacijskih znanosti

2. semestar

Osnovne informacijemdi-information-variant

Izvođači nastavemdi-account-group

Nastavni plan i programmdi-clipboard-text-outline

Model praćenjamdi-human-male-board

Ispitni rokovimdi-clipboard-check-outline

Rasporedmdi-calendar-clock

Konzultacijemdi-account-voice

Izvođenje kolegija

Studij	Studijski program	Semestar	Obavezan
Informacijske tehnologije i digitalizacija poslovanja 1.3 (ITDP)		2	obavezan

Cilj kolegija

Cilj predmeta je upoznavanje studenata s web tehnologija putem kojih se obavlja izrada i dizajn web stranica. Predmetom se obrađuju elementi koji čine pojedinačne sastavne komponente cjelovitog rješenja statičkih i dinamičkih web stranice. Studenti tijekom praktičnog dijela predmeta rade vježbe kojima postepeno razvijaju pojedine gradive blokove složenijih web stranica. Prezentacijom izabranih rješenja zadaća otvara se diskusija tijekom koje studenti mogu izraziti svoje mišljenje o dizajnu, dovršenosti i drugim dogovorenim kriterijima kvalitete, čime se potiče kritičko razmišljanje o tuđem i vlastitom rješenju.

Preduvjeti

Informacijski i računalni sustavi u poslovanju (ITDP 1.3)
Uvod u programiranje (ITDP 1.3)

Norma kolegija

Predavanja

30 sati

Vježbe u praktikumu

30 sati

Nastavnik	Uloga na kolegiju	Oblik nastave	Tjedana	Sati	Grupa
Kermek Dragutin	Nositelj
Novak Matija	Nositelj	Predavanja	3	5	1
Kaniški Matija	Suradnik	Vježbe u praktikumu	3	5	1
Levak Iva	Suradnik
Maček Marija	Suradnik

Sadržaj predavanja

Uvod u Internet i Web kroz povijest i razvoj. (1+0 sat)
Odnos Internet - Web. Povijest Interneta i Weba. Trendovi razvoja Interneta i Weba.
Protokoli HTTP i HTTPS – princip rada protokola, struktura podataka zahtjeva i odgovora. (1+1 sat)
Principi prijenosa poruka mrežom između web poslužitelja i preglednika u tipičnoj web aplikaciji. Sintaksa HTTP protokola. Osobine GET i POST metoda. Zašto je potreban HTTPS protokol.
Arhitektura Web sustava, osnovni pojmovi – Web preglednik, Web poslužitelj, Web mjesto, Web stranica, Web aplikacija, autorski alat. (1+0 sat)
Opis osnovnih pojmova. Elementi web aplikacija (web poslužitelj i preglednik), njihove uloge i osnovne značajke njihovog konfiguriranja. Definicija autorskih alata prema W3C. Potrebne osobine alata za isporuku web stranica na poslužitelj.
Jezici oznaka HTML, XML i XHTML (1+0 sati)
Povijest HTML i ostalim jezika oznaka. Definiranje sintakse HTML i ostalih jezika oznaka. Struktura HTML dokumenta.
Definiranje statičkog sadržaja web stranice (6+9 sati)
Osnovni oblici formatiranja. Osnovni elementi HTML jezika. Ugrađivanje multimedijskih elemenata u dokument i veza između dokumenata. Meta definicije i određivanje skupa znakova.
Validacija i automatsko testiranje web stranice (1+2 sati)
Validacija web stranice - provjera ispravnosti web stranice u odnosu na ciljanu verziju HTML jezika. Ručno testiranje web stranice. Automatsko testiranje web stranica pomoću alata.
Definiranje dizajna statičke Web stranice – jezik stilskih uputa CSS, validacija CSS. (5+6 sati)
Osnovni koncepti kaskadnog oblika (CSS) formatiranja dokumenta. Razine CSS-a. Smještaj kaskadnih uputa. Načini korištenja kaskadnih uputa. Jedinice u kaskadnim uputama. Područja primjene kaskadnih uputa. Pravila za određivanje prednosti u primjeni kaskadnih stilskih uputa.
Dizajna Web stranice i web mjesta (3+1 sati)
Opće smjernice dizajna web mjesta. Dizajn sučelja. Realizacija dizajna web mjesta. Smjernice za dizajn web stranice. Responzivni dizajn kao odgovor na različitost uređaja, orijentacije i sl. Problemi formatiranja dokumenta uz čisti HTML
Usporedba statičkih i dinamičkih Web stranice (1+0 sati)
Razlika između statičkih i dinamičkih osobina web stranice te pasivnih i aktivnih osobina web stranice. Jezici skriptiranja na strani korisnika i njihovo definiranje
Programski jezik JavaScript (4+5 sati)
Osobine JavaScript programskog jezika. Sintaksa i elementi JavaScript jezika. Slične vrste skriptnih jezika kao što je TypeScript.
Realizacija korisničkog dijela dinamičke Web - DOM, JavaScript knjižnice. (4+5 sati)
Hijerarhija ugrađenih objekata na strani korisnika/u pregledniku. Objektni model dokumenta (DOM). Upravljanje događajima u web stranici kroz pripadajuće rukovatelje događaja. Provjera upisanih podataka u obrascu. Primjena jednostavnih elemenata iz knjižnica (npr. jQuery).
WebAssembly (1+0 sati)
Osobine WebAssembly kao novog programskog koda za web platformu.
Analiza web stranica (1+1 sat)
Utvrđivanje potrebnog vremena za učitavanje/preuzimanje web stranice. Optimizacija web stranice. Web analitika – uspješnost web stranice na pretraživačima.

Sadržaj seminara/vježbi

Vježba 1
Upoznavanje s radnom i razvojnom okolinom.
Vježba 2
Primjeri slanja podataka kod protokola HTTP i HTTPS.
Vježba 3
Izrada osnovne web stranice (minimalni skup HTML oznaka) i njena validacija pomoću W3C validatora.
Vježba 4
Izrada osobne web stanice uz primjenu multimedijskih HTML oznaka (slika, video, audio, poveznica i sl.).
Vježba 5
Proširenje osobne web s formatiranje pomoću stilskih elementa (CSS).
Vježba 6
Izrada složenije web stranice s obrascem za unos podataka.
Vježba 7
Automatsko testiranje web stranica.
Vježba 8
Izrada osnovne web stranice s dinamičkim sadržajem (JavaScript).
Vježba 9
Proširenje složenije web stranice s upravljanjem događaja (JavaScript).
Vježba 10
Mjerenje vremena za učitavanje web stranice. Optimizacija elemenata iz sadržaja web stranice.

Ishodi učenja kolegija

Razumijevanje pojma Interneta, Weba, njihovog odnosa i uloge u poslovnom sustavu i svakodnevnom životu, načina opisivanja realnih sustava, principa rada pojedinih dijelova web sustava kako bi se mogao učiniti odabir, nabavka ili izrada potrebne web aplikacije.
Poznavanje i primjena osnovnih web tehnologija za primjenu u poslovnom sustavu te potrebe njihovog uvođenja s ciljem povećanja efikasnosti, točnosti, brzine obavljanja pojedinog posla u sustavu i njegovih vanjskih korisnika.
Odabrati odgovarajuće HTML oznake i elemente stilskih predložaka (CSS).
Odabrati odgovarajuće multimedijske sadržaje i ugraditi ih u web stranicu.
Opisati principe i smjernice za web dizajn i responzivni dizajn.
Izraditi grafički prikaz osmišljene informacijske arhitekture web mjesta.
Izraditi i objaviti web stranice na temelju zadanog opisa i u skladu sa smjernicama za web dizajn i responzivni dizajn.
Analizirati osobine programskih jezika za realizaciju korisničkog dijela (eng. front-end).
Izgraditi interaktivnu web stranicu pomoću odabranih tehnologija.
Poznavati opasnosti i preporuke za realizaciju sigurnih web stranica.

Ishodi učenja programa

Identificirati i analizirati bitne interne i vanjske čimbenike koji utječu na odabir poslovnih prilika te na efikasnost poslovanja određenog poslovnog subjekta na domaćem i međunarodnom tržištu
Vrednovati rezultata poslovanja i interpretirati pokazatelje uspješnosti za potrebe upravljanja i donošenja poslovnih odluka
Primijeniti koncepte poduzetništva i poduzetnog djelovanja kako unutar postojećih poslovnih subjekata tako i u okviru pokretanja vlastitih poduzetničkih poduhvata
Predložiti i primijeniti metode komuniciranja s klijentima, korisnicima i kolegama usmenim i pismenim putem primjenom odgovarajuće terminologije, uključujući i sposobnost komunikacije o struci na stranom jeziku
Odabrati i koristiti informacijsko komunikacijske tehnologije u djelovanju poslovnih sustava
Odabrati odgovarajuću organizacijsku arhitekturu na razinama odlučivanja, upravljanja i izvođenja u organizacijama privatnog i javnog sektora primjenom Informacijsko komunikacijske tehnologije
Upravljati životnim ciklusom proizvoda, usluga, kao i životnim ciklusom razvoja informacijskog sustava
Predložiti i primijeniti temeljne metode razvoja informacijskih sustava u području modeliranja i izgradnje jednostavnih programskih rješenja
Predložiti i primijeniti metode razvoja programske potpore za jednostavne organizacijske procese na razini izvođenja
Izraditi i održavati dokumentaciju potrebnu za instalaciju, konfiguraciju, prilagodbu, administraciju i zaštitu informacijskih sustava
Razumjeti ulogu i održavati operacijski sustav te mrežnu i podatkovnu infrastrukturu
Odabrati i primijeniti metode iz područja programiranja, podatkovnih tehnologija i modeliranja podataka i procesa u problemskim domenama
Razumjeti i primijeniti odabranih matematičkih tema iz logike, relacija, linearne algrebre i statistike koje su temelj za usvajanje informatičkih i ekonomskih znanja
Odabrati i primijeniti odabrane tehnike zaštite informacijskih sustava uz poznavanje zakonskih i normativnih okvira za informacijsku i računalnu sigurnost
Planirati i podržati uvođenje novih informacijskih tehnologija za potporu organizacijskim procesima
Primijeniti odgovarajuće metode i alate za potporu u obradi, interpretaciji i vizualizaciji podataka za potporu u donošenju odluka
Primijeniti vještine učenja (uključujući i e-učenje) i planiranja potrebnih za cjeloživotno učenje, nastavak obrazovanja na diplomskom studiju te razvoj karijere u struci

Osnovna literatura

Ben Frain: Responsive Web Design with HTML5 and CSS, Packt, 2020.
Duckett, J. JavaScript and JQuery: Interactive Front-End Web Development, John Wiley & Sons, 2014.
Frisbie M., Professional JavaScript for Web Developers 4th Edition, Wrox, 2019.
Patrick J. Lynch and Sarah Horton: Web Style Guide, 4th Edition

Dopunska literatura

Duckett, J. HTML & CSS: Design and Build Web Sites, John Wiley & Sons, 2011.
Flanagan, D. JavaScript: The Definitive Guide: Master the World's Most-Used Programming Language 7th Edition, O'Reilly Media, 2020.
Gallant G. WebAssembly in Action, Manning Publications, 2019.
Battagline R., The Art of WebAssembly, No Starch Press, 2021.
Pollard B., HTTP/2 in Action, Manning Publications, 2019.
DuRocher D., HTML and CSS QuickStart Guide, ClydeBank Media LLC, 2021.

Slični kolegiji

Redoviti studenti

Izvanredni studenti

U kalendaru ispod se nalaze konzultacije predmetnih nastavnika, no za detalje o konzultacijama možete provjeriti na profilu pojedinog predmetnog nastavnika.