FOI Nastava - Web dizajn i programiranje

Sadržaj se učitava...

FOI Nastava

apps

mdi-login

Web dizajn i programiranje

Web Design and Programming
2021/2022

7 ECTSa

Informacijski i poslovni sustavi 1.1 (PDS)

Katedra za teorijske i primijenjene osnove informacijskih znanosti

6. 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
Informacijski i poslovni sustavi 1.1 (PDS)	Poslovni sustavi	6	izborni
Informacijski i poslovni sustavi 1.1 (PDS)	Informacijski sustavi	6	obavezan

Cilj kolegija

Cilj kolegija je upoznavanje studenata s elementima dizajna web stranica i razvoja web aplikacija. Predmetom se obrađuju glavni elementi koji čine pojedinačne sastavne komponente cjelovitog projektnog rješenja na web platformi. Predmet prati moguće razine realizacije Web projekata tako da se studentima pruža uvid u različite tehnološke mogućnosti koje mogu primijeniti u konkretnim situacijama. Studenti tijekom praktičnog dijela kolegija rade vježbe kojima postepeno razvijaju pojedine gradive blokove kasnijih web stranica i aplikacija. Prezentacijom izabranih rješenja 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

Obrada teksta i slike (PDS 1.1)
Programiranje 2 (PDS 1.1)
Mreže računala 1 (PDS 1.1)
Projektiranje informacijskih sustava (PDS 1.1)

Norma kolegija

Predavanja

30 sati

Seminar

15 sati

Vježbe u praktikumu

30 sati

Nastavnik	Uloga na kolegiju	Oblik nastave	Tjedana	Sati	Grupa
Kermek Dragutin	Nositelj
Kaniški Matija	Suradnik	Vježbe u praktikumu Seminar Seminar Vježbe u praktikumu	10 7 1 2	3 2 1 3	5 2 2 1
Novak Matija	Suradnik	Vježbe u praktikumu Seminar Seminar Vježbe u praktikumu Predavanja	8 7 1 10 2	3 2 1 3 3	1 1 1 1 1
Levak Iva	Suradnik	Vježbe u praktikumu	10	3	2
Radošević Danijel	Izvođač	Predavanja	10	3	1

Sadržaj predavanja

Internet, Web, protokoli, HTTP protokol
Odnos Internet - Web. Povijest Interneta i Weba. Trendovi razvoja Interneta i Weba. Elementi web aplikacija (web poslužitelj i preglednik), njihove uloge i osnovne značajke njihovog konfiguriranja. Principi prijenosa poruka mrežom između web poslužitelja i preglednika u tipičnoj web aplikaciji. Uloga slojeva u ISO-OSI modelu.
HTML jezik – uvod, DTD, XML, XHTML, osnovne oznake
Povijest HTML jezika. Definiranje sintakse HTML jezika (DTD i XML Schema). Osobine SGML-a, XML-a i XHTML-a. Struktura HTML dokumenta. Osnovni oblici formatiranja. Ugrađivanje multimedijskih elemenata u dokument i veza između dokumenata. Meta definicije i određivanje skupa znakova.
HTML jezik – tablice, okviri, obrasci
Primjena tablica u formatiranju dokumenta. Formatiranje redaka i ćelija u dokumentu. Spajane ćelija unutar retka ili stupca. Formatiranje dokumenta primjenom standardnih i internih okvira. Prijenos sadržaja u različite okvire i prozore. Osobine interaktivnog pristupa prema korisniku. Elementi obrazaca i njihove specifične primjene.Realizacija raznih oblika prikupljanja tekstualnih podataka (jednolinijski, višelinijski, sakriveni upis). Realizacija raznih oblika izbornika (padajući s jednim ili više izbora, prikazani s jednim ili više izbora).
Kaskadni oblik formatiranja dokumenta (CSS)
Problemi formatiranja dokumenta uz čisti HTML. Definicija kaskadnog oblika formatiranja dokumenta. Osnovni koncepti kaskadnog oblika formatiranja dokumenta. Smještaj kaskadnih uputa. Načini korištenja kaskadnih uputa (implicitno, eksplicitno, jednoznačno, pseudo-klase). Jedinice u kaskadnim uputama.Područja primjene kaskadnih uputa (font, boja i pozadina, tekst, pravokutnik, korisničko sučelje, klasifikacija i sl).
Dizajn Web mjesta, autorski alati
Opće smjernice dizajna web mjesta. Dizajn sučelja. Realizacija dizajna web mjesta. Smjernice za dizajn web stranice (vizualna hijerarhija, kontrast, konzistentnost, dimenzije stranice, prostor stranice i sl). Tipografija (čitljivost, vrsta fonta, veličina fonta i sl). Uređivački stil (naslovi i podnaslovi, formatitanje web dokumenta, broj veza, njihov smještaj iprikaz). Grafika (broj piksela i dubina boje, rezolucija, brzina prijenosa). Formati grafičkih datoteka: GIF (običan, transparentni i animirani), JPEG, PNG. Mapa slike. Multimedija. Flash. Definicija autorskih alata prema W3C. Kriteriji za ocjenu autorskih alata. Analiza najpoznatijih autorskih alata prema predloženim kriterijima.
Uvod u programiranje na strani poslužitelja
Što se može očekivati od programiranja na strani poslužitelja. Vrste programskih jezika za programiranje na strani poslužitelja. Common Gateway Interface (CGI). Osobine programskih jezika za programiranje na strani poslužitelja (ASP, Cold fusion, C#, JSP, Java servlet, Perl, PHP, Ruby on Rails).
PHP jezik – uvod i sintaksa, funkcije, korištenje datoteka, obrada pogrešaka i postavljenje razine izvještavanja
Povijest PHP-a. Što može PHP? Sintaksa jezika. Rukovanje s tipovima podataka. Elementi PHP jezika: operatori, instrukcije (uvjeti, petlje, manipuliranje objektom, komentari, funkcije). Vidljivost varijabli. Rad s varijablama okoline. Preuzimanje podataka iz obrazaca. Obrada pogrešeka, definiranje rukovatelja za određene razine pogrešaka, postavljanje korisničke razine izvještavanje o pogreškama.
PHP jezik – rad s bazom podataka, korištenje imeničkih servisa, slanje email poruke
Životni ciklus rada s bazom podataka. Korištenje raznih vrsta sustava za upravljanje bazama podataka. Načini preuzimanja podataka iz baze podataka. Korištenje imeničkih servisa za pretraživanje korisnika i jedinstvenu autentikaciju. Razlozi i načini korištenja servisa email poruka.
PHP jezik – autentikacija, autorizacija i dnevnik rada
Interna autentikacija web poslužiteljem. Podešavanje parametara web poslužitelja za autentikaciju. Vlastita autentikacija s formularom, bazom podataka i pohranom podataka u cookie ili sesiju. Metode autorizacija rada korisnika. Vrste realizacija dnevnika rada (log) s pohranom podataka u bazu podataka. Korištenje usluge vođenja dnevnika od web poslužitelja. Podešavanje parametara web poslužitelja za dnevničke poslove.
PHP jezik – Smarty predlošci, XML, XSL, XSTL, SAX, DOM, generiranje digitalnih slika i pdf dokumenata
Osobine realizacije korisničkog sučelja. Primjena predložaka u realizaciji korisničkog sučelja. Odvajanje programskog koda od definicije korisničkog sučelja. Osobine Smarty predložaka. Osobine transformacijskih sustava. Primjena XSTL u realizaciji korisničkog sučelja. Generiranje RSS. Analiza XML sadržaja putem SAX i DOM klasa. Primjena klasa za generiranje digitalnih slika i pdf dokumenata.
Javascript – uvod i sintaksa jezika, osnovi objekti
Razlika između statičkih i dinamičkih osobina dokumenta. Prijelaz s pasivnih na aktivne dokumente, koji prate rad korisnika. Mogući načini realizacije aktivnih osobina dokumenata. Jezici skriptiranja na strani korisnika i njihovo definiranje. Globalni i lokalni jezik skriptiranja. Smještaj skripata. Osobine Javascript programskog jezika. Elementi Javascript jezika: operatori, instrukcije (uvjeti, petlje, manipuliranje objektom, komentari, funkcije). Predefinirani objekti. Određivanje verzije Javascript jezika
Javascript – ugrađeni objekti, upravljanje događajima
Hijerarhija ugrađenih objekata na strani korisnika. Moguće vrste događaja koji se generiraju kao odgovor na pojedine aktivnosti korisnika. Upravljanje događajima kroz pripadajuće rukovatelje događaja. Primjena glavnih ugrađenih klasa: Window, Document, History. Upravljanje vremenskom komponentom izvršavanja dokumenta. Korištenje psudo funkcija. Kontrola unosa podataka na pojedinoj stavci unosa ili cijelom obrascu. Privremeno pohranjivanje podataka. Realizacija personalizacijskih elemenata.
Javascript – objektni model dokumenta - DOM
Definicija objektnog modela dokumenta. Povezivanje HTML jezika, kaskadnog formatiranja dokumenta i Javascript jezika. Pristup do pojedinog objekta ili grupe objekata. Pristup do pojedinog atributa izabranog objekata. Dinamičke promjene osobina izabranih objekata. Realizacija dinamičkog izbornika i drugih modula.
Javascript – dozvoljeni izrazi, AJAX, novi trendovi u Web tehnologijama
Definicija dozvoljenih izraza. Realizacija predložaka primjenom meta simbola. Testiranje predloška na izabranim tekstom. Realizacija raznih kontrola unosa podataka. Pretraživanje teksta i zamjena dijela teksta novim sadržajem. Utvrđivanje djelova koji su pokriveni predloškom i njegovim segmentima. Realizacija tzv. bogatog Internet klijenta povezivanjem asinkronih događaja, Javascripte i XML u. Važnost pozadinske podrške na strani poslužitelja. Primjeri gotovih AJAX klasa za razne namjene. Integracija raznih medija i modula u stvaranju modernih Web aplikacija nove generacije tzv. Web 2.0.
Razvoj Web mjesta, mjerenje opterećenje Web poslužitelja, Web inženjerstvo
Proces razvoja Web mjesta. Planiranje, definiranje i razvoj specifikacije web mjesta. Definiranje i planiranje Web mjesta. Definiranje informacijske strukture. Indikatori krivog pristupa razvoja Web mjesta. Važnost analize opterećenja Web mjesta. Analiza opterećenja Web poslužitelja pomoću specijaliziranih alata (JMeter, Webserver Stress Tool i sl). Skaliranje Web poslužitelja. Web inženjerstvo kao disciplina sistematičnog razvoja Web aplikacija.

Sadržaj seminara/vježbi

Ishodi učenja kolegija

razumjeti i primijeniti hipertekstualno i hipermedijsko povezivanje dokumenata
razumjeti način funkcioniranja Web mjesta i Web aplikacija
razumjeti principe rada Web autorskih alata i znati ih koristiti ih u razvoju Web mjesta
razlikovati Web tehnologije
razumjeti osobine korisničke i poslužiteljske strane Web aplikacija te ih primijeniti na način koji odgovara specifičnostima pojedinog projekta
razumijeti osobine skriptnih programskih jezika i koristiti ih u realizaciji Web aplikacije
razumjeti i primijeniti preporuke Web dizajna
razumjeti i koristiti razne servise za potrebe Web aplikacija
izraditi Web aplikacije različite namjene i složenosti ...
analizirati opterećenje Web poslužitelja i predložiti potrebne radnje za poboljšanje njegovih performansi
razumjeti i primijeniti preporuke Web inženjerstva

Ishodi učenja programa

razumjeti stanje i trendove razvoja suvremenih informacijskih i komunikacijskih tehnologija (ICT), razumjeti njihov utjecaj na pojedinca, organizaciju i društvo te procijeniti njihovu primjenjivost u zadanom kontekstu
razumjeti i primijeniti ključne aspekte informacijske tehnologije (programiranje, algoritmi, strukture podataka, baze podataka i znanja
razumjeti i primijeniti suvremene tehničke koncepte i prakse u informacijskim tehnologijama (arhitektura računala, operacijski sustavi, mreže računala)
razumjeti i primijeniti matematičke metode, modele i tehnike primjerene rješavanju problema iz područja informacijskih i poslovnih sustava
razumjeti bitne čimbenike koji utječu na poslovanje organizacije i pojedinaca te primijeniti osnovne metode i koncepte planiranja, upravljanja i obračuna poslovanja
analizirati stanje, identificirati prilike i definirati probleme s kojima se susreću organizacije i pojedinci u primjeni ICT, te formulirati rješenja uz primjenu ICT
razumjeti osnovna vertikalna područja primjene ICT (industrija, zdravstvo, promet, turizam, država i sl.), te horizontalne aplikacije (uredski sustavi, DSS, CRM, ERP, DMS i sl.)
razumjeti i primijeniti suvremene metodološke pristupe razvoja organizacijskih i informacijskih sustava, te oblikovanja organizacije i organizacijske strukture
razumjeti suvremene organizacijske koncepte i upravljati organizacijskom kulturom
modelirati poslovne procese i podatke u organizacijama i primijeniti modele u razvoju informacijskih i poslovnih sustava
razumjeti i primijeniti metode, tehnike razvoja informacijskih i programskih sustava u suvremenim razvojnim okolinama
razumjeti i primijeniti procese, metode i tehnologije upravljanja IT uslugama i resursima te podrške i pružanja različitih vrsta usluga vezanih uz ICT
razumjeti i primijeniti etička načela, zakonsku regulativu i norme koje se primjenjuju u struci
razumjeti osnovna načela i metode upravljanja organizacijom i uspješno raditi u timu
uspješno komunicirati s klijentima, korisnicima i kolegama na verbalan i pisani način uz primjenu odgovarajuće terminologije uključujući i sposobnost komunikacije o struci na stranom jeziku
pratiti stručnu literaturu na hrvatskom i stranom jeziku, pripremiti i samostalno održati prezentacije na hrvatskom i stranom jeziku stručnoj i općoj publici, te kritičku evaluaciju prezentirane stručne teme
razumjeti i primijeniti vještine učenja potrebne za cjeloživotno učenje i nastavak obrazovanja na diplomskom studiju
razumjeti i primijeniti osnovne principe planiranja i razvoja karijere u struci i vlastitih poduzetničkih poduhvata
poznavati ključne aspekte informacijske tehnologije
identificirati i razumjeti bitne čimbenike koji utječu na poslovanje organizacije i pojedinaca te primijeniti osnovne metode i koncepte planiranja, upravljanja i obračuna poslovanja
prepoznati osnovna vertikalna područja primjene ICT (industrija, zdravstvo, promet, turizam, država i sl.), te horizontalne aplikacije (uredski sustavi, DSS, CRM, ERP, DMS i sl.)
razumjeti metode, tehnike razvoja informacijskih i programskih sustava u suvremenim razvojnim okolinama
razumjeti procese, metode i tehnologije upravljanja IT uslugama i resursima te podrške i pružanja različitih vrsta usluga vezanih uz ICT
identificirati ključne podatke i informacije za donošenje racionalnih poslovnih odluka
analizirati i vrednovati rezultat poslovanja, te predložiti unapređenje poslovnog sustava.
PROBAnje OPISivanja....

Osnovna literatura

Materijali s predavanja dostupni u zatvorenom sustavu za e-obrazovanje http://www.foi.hr:8080/moodle/course/view.php?id=193
Goodman, D. Dynamic HTML: The Definitive Reference. 2nd Edition, O’Reilly, 2002.
Welling, L.; Thomspon, L. PHP and MySQL Web Development. 2nd Edition, Sams Publishing, 2003
Lynch, P.J.; Horton, S. Web Style Guide: Basic Design Principles for Creating Web Sites. 2nd Edition, Univ Press, March 2002.

Dopunska literatura

Lecky-Thompson, E.; Eide-Goodman, H.; Nowicki, S.D.; Cove, A. Profesional PHP5. John Wiley, 2005.
Van Duyne, D.K.; Landay, J.A.; Hong, J.I. The Design of Sites. Addison-Wesley, 2003.
Van Dijck, P. Information Architecture for Designers. RotoVision, 2003.
Kappel, G.; Pröll, B.; Reich, S.; Retschitzegger, W. Web Engineering. John Willey, 2006.

Slični kolegiji

Tehničko veleučilište u Zagrebu

Redoviti studenti

Izvanredni studenti

izvanredni rok

Datum: 27.11.2024.

Vrijeme: 16:00

Opis: Na Fakultetu

izvanredni rok

Datum: 25.04.2025.

Vrijeme: 16:00

Opis: Na Fakultetu

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