Sveuilite u Zagrebu Fakultet elektrotehnike i raunarstva

Seminarski rad iz kolegija Ergonomija raunalne i programske opreme

Uporaba dinamikog HTML-a pri izradi web suelja

Zagreb, rujan 2004. Autor: Josip Masla

Uvod
Od poetaka masovnijeg koritenja interneta za izradu internet stranica koristio se jezik za oznaavanje HTML (Hypertext Markup Language). Njegova osnovna zadaa bila je da na jednostavan i pregledan nain prikae tekst i slike. Kako je vrijeme prolazilo tako su i zahtijevi za sadrajem sa vie mogunosti sve vie rasli. Sukladno tome pojavljivale su se nove tehnologije, jezici i protokoli te razna razmiljanja o tome to sve internet stranice mogu i trebaju sadravati. Pri tome se mnoge od tih tehnologija do danas nisu odrale. U ovom seminaru govoriti u o onim tehnologijama/jezicima koji se danas preteno koriste pri izradi preglednih i funkcionalnih internet stranica.

Dinamiki HTML
Veina dananjih internet stranica su izraene u veoj ili manjoj mjeri koritenjem dinamikog HTML-a (u nastavku teksta - DHTML). Iako bi se po samom nazivu dalo zakljuiti da je rije samo o novijoj tj. naprednijoj verziji jezika HTML, DHTML predstavlja ipak neto drugo. DHTML je samo oznaka da se pri izradi internet stranica koristi nekoliko tehnologija. To je zapravo ideja o tome koje (ve postojee) jezike i na koji nain ih se treba/moe koristiti pri izradi stranica. Ti jezici su: HTML CSS skriptni jezik: JavaScript,VBScript Ovdje je vano napomenuti i Document object model (skraeno DOM). DOM ne predstavlja neki konkretan jezik ve je to model po kojemu se u HTML-u stranica gradi od objekata. On je bitan jer predstavlja poveznicu izmeu HTML-a koji sadri objekte i CSS-a i skriptnog jezika koji tim objektima na neki nain upravljaju tj. dodjeljuju ili mijenjanju objektima u HTML-u neka svojstva.

Mogunosti DHTML-a
Ispravnom uporabom i kombinacijom jezika koji sainjavaju DHTML pruaju se velike mogunosti za manipuliranje stranicama. Spomenuti u par najvanijih (u zagradi je navedeno koji od jezika omoguava pojedinu opciju): interakcija s posjetiteljima stranice (JavaScript) mogunost prilagodbe stranica ljudima s posebnim potrebama (CSS) mijenjanje izgleda stranice nakon uitavanja - "ivi" elementi (JavaScript) lake odravanje tj. izmjena izgleda stranica (CSS)

Sadraj ovog seminara

Kao to je ve ukratko objanjeno DHTML ne predstavlja konkretni jezik ve oznaava uporabu vie jezika za izradu internet stranica. Za svaki od tih jezika bi se mogao napisati poseban seminar (a neki su i napisani) pa u zato u ovom seminaru dati samo kratki osvrt na mogunosti i ulogu tih jezika za kreiranje DHTML internet stranica. Ono to u u ovom seminaru pokuati prezentirati su mogunosti koritenja DHTML-a te na koji nain pravilno kombinirati gorespomenute jezike za dobijanje eljenog rezultata - kvalitetnih internet stranica.

HTML i DOM
HTML
Povijest HTML-a zapoinje ve krajem prve polovice 20-og stoljea kada se razmiljalo na koji nain skladititi tekstualne i grafike informacije te na koji nain iste logiki povezati. Ta i sline ideje (a i rjeenja) su se desetljeima pojavljivali kao odgovor na razne probleme. Jedan od eih problema koji je dosta povezan sa idejom HTML-a bio je: na koji nain oznaiti tj. formatirati tekst i slike - rjeenje tog problema primjenu je najee nalo za lanke u novinama i knjige. S proirenjem interneta poetkom 90-ih i pojavom prvih interpretera internet stranica (medju prvima Cello, Viola, MidasWWW) pojavio se i HTML. Od tada do danas HTML je doivio dosta promjena i verzija. U trenutku pisanja ovog seminara aktualna verzija je HTML 4.01 dok se polako proiruje i XHTML. Glavna namjena HTML-a je odreivanje(oznaavanje) koje informacije i na koji nain e se one prikazati na internet stranicama. Treba napomenuti da HTML nije programski jezik ve jednostavan jezik za oznaavanje. Sastoji se od jednostavnih oznanih elemenata koji se nazivaju tag-ovi i unutar kojih se smjetaju informacije. Nain na koji e se pojedina infomacija, bilo tekstualna ili grafika, prikazati ovisi o tag-u unutar kojega je smjetena. Sama sintaksa HTML-a je dosta jednostavna a detalji se mogu pogledati na jednoj od stranica koja se nalazi meu linkovima. Takoer vano je napomenuti da je jedna od iznimno bitnih karakteristika HTML dokumenata mogunost definiranja veze meu stranicama. Izgled pojednostavljenog HTML dokumenta dan je sljedeim primjerom:
<HTML> <HEAD> <TITLE>Naslov dokumenta</TITLE> </HEAD> <BODY> <H1>Naslov</H1> <H2>Podnaslov</H2> <P>Text, text, text...</P> <a href="neka_stranica.html">slijedeca</a> </BODY> </HTML>

U poecima razvoja internet stranica HTML je sluio sa ciljem, kako je navedeno, da se unutar njega smjetaju informacije a ujedno i odreuje na koji nain e se te informacije prikazati. Danas se zbog razvoja ostalih (specifinih) jezika tei da HTML ima malo drugaiju ulogu. Ideja je da HTML sadri informacije no da pomou raznih tag-ova pojedine elemente tih informacija (samo) oznai, bez da se definira kako e se ti elementi prikazati. Nain na koji e se ti elementi onda prikazati ili mijenjati pri interakciji sa posjetiteljem vre se u drugim prije spomenutim jezicima: CSS-u i JavaScript-u. Ova ideja se pojavila kao rezultat tenji raslojavanja samih podataka i naina njihovog prikaza, i to ne samo za podruje internet stranica ve i klasinih tekstualnih dokumenta, dokumenata namijenjenih za pregled mobilnim telefonima itd.

DOM (Document object model)

Kao to je reeno u uvodu DOM predstavlja iznimno bitan faktor u DHTML-u. Na hrvatskom bi se DOM preveo kao objektni model dokumenta. Upravo se iz imena moe vidjeti emu on slui. Kao prvo rije je o modelu tj. definiranju strukture HTML dokumenta. Prilikom definiranja strukture HTML dokumenta postavljaju se sljedea pitanja: Koji sve tag-ovi postoje na stranici?

Koliko ih ima? Na koji nain su poredani? Koja su svojstva tih tag-ova? Na koji se nain elementi tih tag-ova prikazuju na stranici? DOM daje odgovor na ova pitanja. On izraava strukturu HTML dokumenta na univerzalan, sadrajno neovisan nain. Postoji vie razina (level-a) DOM-a koji se meusobno razlikuju po objektima koje sadre kao i mogunostima mijenjanja svojstava i prikaza tih objekata. Primjer pojednostavljene sheme elemenata DOM-a dan je sljedeom slikom:

Oznaavanje objekata u HTML-u

U zadnjem odsjeku reeno je da se HTML sastoji od objekata. Da bi ostala dva jezika DHTML-a tj. CSS i JavaScript mogli identificirati objekte kojima ele manipulirati potrebno je te objekte oznaiti. U HTML-u objekti se oznaavaju tako da se za HTML element koji se eli oznaiti eksplicitno definira ID atribut na sljedei nain:
<P id="naslov"> ....sadraj paragrafa naslov... </P>

Ovako oznaenom HTML objektu se preko vrijednosti ID atributa lako pristupa u CSS-u i JavaScript-u. Jedino ogranienje je da se ne smije dodijeliti ista vrijednost ID atributa dvoma razliitim objektima.

CSS
Cascading style sheets - CSS se pojavio najkasnije u odnosu na ostala dva jezika koja se koriste u DHTML-u. Prva verzija je nastala 1996 godine a razlog nastajanja bile su slabe mogunosti formatiranja i pozicioniranja sadraja u HTML-u. CSS je donio puno dobrih stvari koje su znaajno olakale izradu internet stranica. Prije nego to spomenem prednosti CSS-a objasniti u to to CSS uope je. CSS je nita drugo nego skup pravila/stilova kojima se definira kako e se pojedini elementi HTML-a prikazati. Prednosti koje CSS nudi su sljedee: znatno vee mogunosti odreivanja svojstava HTML-a objekata mogunost odvajanja sadraja od prezentacije (donekle) izgled kompletnog web site-a se moe promjeniti samo promjenom jedne CSS datoteke definiranje prezentacije ovisno o mediju (ekran, pisa, mobitel itd.)

Kako CSS funkcionira

Nain funkcioniranja CSS-a je taj da se za pojedine objekte HTML-a definiraju eljena svojstva tj. pravila. Povezivanje HTML objekata i CSS stilova se vri preko CSS selektora. Glavna uloga selektora je da izaberu(selektiraju) objekte iz HTML-a te za njih definiraju stil tj. vizualna svojstva koja e izabrani objekt posjedovati. Ima vie vrsta selektora a ovdje u navesti samo najee koritene: Selektori tipa - izabiru sve objekte koji su odreenog tipa (tonije HTML tag-a) ID selektori - izabiru objekte na osnovi vrijednosti ID atributa Selektori klase - izabiru one objekte/tag-ove koji imaju atribut class jednak selektoru Nakon to se pomou selektora odrede objekti kojima se eli manipulirati potrebno je definirati eljena svojstva tih objekata. Ona se definiraju pomou deklaracijskog bloka koji sastoji od jedne ili vie deklaracije. Svaka deklaracija sadri dva dijela: oznaku svojstva te vrijednost tog svojstva. Shema jednog CSS pravila dana je slijedeom slikom:

Mjesto gdje se definiraju CSS pravila moe biti: u samoj HTML datoteci koja koristi stilove u zasebnoj CSS datoteci Ova dva naina mogue je kombinirati te je mogue imati i vie CSS datoteka u kojima se definiraju stilovi. Izbor ovisi o odabiru autora no preporuljivo je stilove definirati u zasebnim CSS datotekama i to tako da je za svaki medij definirana jedan CSS datoteka.

Odabir medija
Jedna od iznimno korisnih svojstava CSS-a je mogunost definiranja izgleda na osnovi medija na kojem e se sadraj stranice prikazivati. Primjeri medija su: zaslon ekrana, pisa, zaslon mobitela itd. Za svaki medij mogu se definirati posebni stilovi koji se onda primjenjuju samo ako se stranica pregledava s odreenim medijem.

Primjer koritenja
// HTML datoteka .. <P>paragraf</P> <A href="link.html" class="klasa1";>link</A> <DIV id="sloj1"></DIV> .. // CSS datoteka .. P{ /* selektira sve P tag-ove */ font-size: 12pt; } .klasa1{ /* selektira sve tag-ove klase 'klasa1' */ color: #ff0000; } #sloj1{ /* selektira objekt sa id-em 'sloj1' */ width: 350px; } ..

JavaScript
Iz imena DHTML esto se krivo tumai to u tom imenu oznaava atribut dinamiki. Zbog tog atributa najee se oekuje da stranica napravljena uporabom DHTML-a ima neku vrstu animacije, pokretnih objekata, promjenjivih elemenata, jednom rijeju oekuje se interaktivna stranica. To najee nije sluaj. No uporabom DHTML-a mogu se napraviti spomenute interaktivne stranice. Jezik koji to omoguava naziva se JavaScript. Osim JavaScript-a za istu namjenu moe se koristiti i VBScript no on se u praksi iznimno rijetko koristi.

to je JavaScript
JavaScript je skriptni jezik koji slui za upravljanje/izmjenu HTML dokumenta za vrijeme pregledavanja tog dokumenta. Navest u par osnovnih karakteristika JavaScript-a: JavaScript se izvrava u internet pregledniku posjetitelja Sintaksa je slina programskom jeziku C Sam programski kod moe se smjestiti u samom HTML dokumentu ili zasebnoj datoteci Jedan od bitnijih dijelova JavaScripta je podrka dogaajima (eng. events). Dogaaji na stranici se deavaju kao rezultat neke akcije posjetitelja - klik miem, prelazak miem preko nekog objekta, uitavanje dokumenta i sl. Iznimno su korisni jer se onda moe definirati to e se dogoditi ukoliko posjetitelj vri odreene radnje. Na taj nain posjetitelj dobija osjeaj interakcije tj. osjeaj da su stranice 'ive'.

Naini koritenja
Kao to je spomenuto JavaScript kod se moe smjestiti u samom HTML dokumentu ili u jednoj ili vie zasebnih datoteka. Ukoliko se smjetava u datoteku ta datoteka bi trebala imati ekstenziju '.js' i sam kod se bez posebnih dodatnih oznaka smjesti u datoteku. Ukoliko se JavaScript kod smjetava u HTML to je mogue izvriti na dva naina: Unutar HTML tag-a <script> </script> Preko vrijednosti atributa dogaaja nekog HTML objekta Objektima u HTML-u se u JavaScript-u pristupa preko ID atributa. Svim objektima u HTML-u se takoer moe pristupiti preko globalnih polja koja se implicitno definiraju za svaki HTML dokument. Shema tih polja dana je sljedeom slikom:

O detaljima JavaScript-a i njegovim mogunostima ovdje neu govoriti iz razloga to je to malo vea tema tj. tema za poseban seminar. Vie informacija se moe pronai na stranicama koje se nalaze meu linkovima.

Problemi
Problema u vezi koritenja JavaScripta ima vie. U praksi su oni najee vezani uz to da razni internet preglednici ne podravaju sve mogunosti Javascipta, ili ih ne podravaju na standardom definiran nain. No vei problem od toga je mogunost da neki internet preglednici uope ne podravaju JavaScript ili da je Javasript onesposobljen od strane posjetitelja. Ovaj problem se naalost za sad nemoe rijeiti niti na jedan nain.

Primjeri
U ovom poglavlju navesti u par primjera kojima u probati ilustrirati razliite mogunosti koje DHTML prua.

Prilagodba izgleda stranica pristupnom mediju

Kao to je u poglavlju o CSS-u objanjeno glavna uloga CSS-a je definiranje vizualnih svojstava stranica. Jedna od iznimno korisnih opcija DHTML-a je mogunost definiranja izgleda stranice ovisno o mediju preko kojega se stranica pregledava. Primjeri medija su: zaslon monitora, izlaz na pisa, zaslon mobitela itd. Nain na koji se ova mogunost ostvaruje je da se jednostavno u HTML dokumentu definira koje stilove treba koristiti za eljene medije:
<HEAD> .. <LINK rel="stylesheet" href="stil.css" type="text/css" media="all"> <LINK rel="stylesheet" href="print.css" type="text/css" media="print"> .. </HEAD>

Gore je naveden konkretni primjer koji se koristi na ovim stranicama - ova stranica je posebno prilagoena za ispis na pisa. Uinci se mogu vidjeti ispisom ovih stranica na pisa (ili koristei print preview opciju u File izborniku).

Kontrola unosa web forme

Jedan od najeih naina koritenja DHTML-a (preciznije JavaScript-a) a ujedno i najkorisniji je kontrola ispunjavanja web formi. Naime prilikom ispunjavanja web formi esto valja provjeriti ispravnost uneenih podataka. To se moe napraviti na nain da korisnik ispuni formu, poalje je i ukoliko je korisnik neto krivo ispunio na sljedeoj stranici se ispie poruka o pogrenom unosu. Nedostatak ovog pristupa je vrijeme - korisnik mora poslati podatke te onda priekati odreeno vrijeme da se uita nova stranica. Ovim pristupom ukoliko je posjetitelj sve ispravno unio ne gubi se na vremenu (jer se u svakom sluaju podaci forme moraju poslati te se uitati nova stranica). No ukoliko je posjetitelj neto krivo ispunio uinkovitiji nain je da se odmah po prihvaanju forme obavijesti posjetitelja na krivo ispunjena polja te bez uitavanja nove stranice omogui mu se ispravak. Primjer ove mogunosti ilustrirati u skriptom za validaciju email-a.

Izrada dinamikih menija

Meniji su jedan od najbitnijih dijelova svih stranica jer omoguavaju jednostavan pristup sadrajima koje stranice nude. Koristei CSS i JavaScript mogue je izraditi iznimno efikasne i oku ugodne menije. U nastavku u prikazati primjer jednostavnog menija koji je izraen uporabom svih DHTML jezika: Meni 1 Meni 2 Za izradu vizualno atraktivnih i funkcionalnih menija preporuio bih program Sothink DHTML Menu koji se nalazi meu linkovima.

Definiranje vie stilova za jednu stranicu

Kao to je vie puta naglaeno ideja DHTML-a (zapravo samog HTML-a) je da se u HTML-u samo oznae elementi koje e stranica sadravati a potom se u CSS moe definirati na koji nain e se vizualno ti elementi prikazati. Iz toga proizlaze dvije korisne mogunosti: Mogunost mijenjanja kompletnog izgleda site-a mijenjanjem samo stilova tj. CSS datoteka. Odlian primjer je stranica CSS Zen Garden. Mogunost definiranja vie stilova te omoguavanje korisniku da odabere stil koji mu najvie odgovara. Dobar primjer ove mogunosti se moe pogledati u seminaru Borisa Kuzmia.

Problemi
Prilikom izrade DHTML internet stranica pojavljuje se naalost puno (previe) problema. Glavni uzrok tih problema nenalazi se u jezicima koji se koriste pri izradi ve su u pitanju internet preglednici. Iako su svi jezici standardizirani i nain njihovog koritenja je jasno definiran, internet preglednici to zbog jednostavno loe izvedbe a to zbog namjernog nepridravanja navedenih standarda esto ne prikazuju ispravno razne internet stranice. Glavni razlog nepridravanja slubenih standarda je elja za vlastitim standardiziranjem protokola. U prolosti a u velikoj mjeri jo i danas najveu zastupljenost u koritenju meu korisnicima ima Microsoftov internet preglednik Internet Explorer. On ujedno i prednjai u nepridravanju slubenih protokola. To je zapravo uzrok veine problema. No polako se pojavljuju drugi preglednici koji zbog inovativnih mogunosti koje nude, privlae znatan broj korisnika. Iznimno bitno je to to se veina njih pridrava slubenih standarda te time polako prisiljavaju da to ini i Internet Explorer.

Konkretni problemi
Problemi koji su vezani uz razvoj DHTML stranica vezani su uglavnom za CSS i JavaScript. HTML kao jezik postoji ve dosta dugo i tijekom vremena nije se znaajno mijenjao tako da njega preglednici (veinom) ispravno prikazuju. JavaScript kao drugi najstariji jezik iako se tijekom godinama javljao u raznim verzijama (s tim da se u novijim verzijama radilo samo o nadogradnji) nije mijenjao svoj osnovni koncept i funkcionalnost pa tako da iako je on nailazio na najvie 'prepreka' kod razliitih preglednika u prolosti, danas je uglavnom dobro podran od svih poznatijih internet preglednika. Problemi koji se javljaju kod JavaScript-a i raznih preglednika su uglavnom u razlikama pristupa HTML objektima te pristupu/izmjeni svojstava HTML objekata. Ti problemi esto se rijeavaju na nain da se prvo provjeri sa kojim preglednikom se stranica pregledava i onda ovisno o rezultatu se izvodi kod koji je ispravan za dobijeni preglednik. Primjer jednog od najese koritenih pristupa je sljedei:
function getObject(objectId) { if (document.all && !document.getElementById){// Netscape return document.all(objectId); } else{ // ostali preglednici return document.getElementById(objectId); } }

Zadatak navedenog primjera tj. funkcije getObject() je da vrati pokazivac na eljeni objekt. Ovisno o internet pregleniku to se izvodi na jedan od dva gorenavedena naina. Najmlai od jezika koji se koriste u DHTML-u CSS sa sobom donosi i najvie problema. Najvei problemi su u razliitom shvaanju raznih preglednika na koji nain treba tumaiti CSS pravila. Ovo je donekle paradoks jer je u slubenom definiranju CSS-a dosta jasno prikazano to pojedina pravila znae i na koji nain ih treba vizualno primjeniti. Rjeavanje ovog problema u potpunosti je ostavljeno autoru stranica a najee se svodi na to da autor pregledava svoje stranice u najpopularnijim preglednicima (Internet explorer, Mozilla Firefox, Opera) te pokua raznim 'trikovima' postii eljeni izgled.

Savjeti
Prilikom izrade stranica da bi iste bile kvalitetne i uinkovite valja se drati par osnovnih pravila/savjeta: Pridravanje slubenih standarda Osim to je ovo naravno imperativ sam po sebi, dovodi do toga da je velika vjerojatnost da e se stranice (uglavnom) ispravno prikazivati u veini internet preglednika. Nakon izrade stranica pridravanje standardima u sluaju HTML-a i CSS-a moe se provjeriti validatorima dotinih jezika. Adrese na neke od njih se nalaze meu linkovima. Za JavaScript nema nekog slubenog rjeenja ve se najee ispravnost koda provjerava samim pregledom stranice u internet pregledniku. Stanje u vezi toga se malo popravlja jer se u nekim preglednici novijeg datuma nude dodaci kojima se izvravanje JavaScript-a moe malo detaljnije nadgledati - pa tako preglednici Mozilla Firefox i Opera nude JavaScript Debug Console dodatak koji prua malo vie detalja o eventualnim grekama u JavaScript kodu. Preglednost i funkcionalnost Prilikom izrade stranice ovo su jedni od najvanijih pravila na koja treba misliti. Razlog zbog kojega se stranice rade i zbog ega privlae korisnike je njihov sadraj. Zato je bitno prije same izrade samih stranica dobro razmisliti o nainu na koji e se sadraj organizirati i prezentirati kako stranice unato kvalitetnom sadraju ne bi zbog loe izvedbe postale neupotrebljive. Doziranje efekata Mogunosti koje se nude uporabom DHTML-a su velike no iste ne treba krivo niti previe koristiti. Naime esto (najee neiskusni) autori koriste neke efekte i mogunosti DHTML-a bez da su promislili uklapaju li se oni u samu stranicu i koja je njihova svrha na stranici. Savjet s tim u vezi je da treba koristiti samo one mogunosti koji su u funkciji stranice a nikako dodavati efekte koji su sami sebi svrha. Primjeri toga su: (animirana) slova koja prate kursor mia, ispis vremena provedenog na stranici, koritenje vie od jednog dijela teksta koji se pomie (eng. scroll text), ispis trenutnog datuma i sl. Provjera izgleda u drugim preglednicima Unato injenici da je jo uvijek Microsoftov preglednik Internet Explorer daleko najkoriteniji internet preglednik svakako je preporuljivo provjeriti kako se stranice prikazuju i u drugim (koritenim) internet preglednicima te naravno pokuati ispraviti stranice ukoliko se iste ne pokazuju ispravno u tim preglednicima. Obavijest o onesposobljavanju JavaScript-a Kao to je reeno u poglavlju o JavaScript-u korisnicima je u preglednicima dozvoljena mogunost onesposobljavanja JavaScript-a. Ukoliko na stranicama JavaScript predstavlja bitan faktor za pregled stranica (npr. preko njega se obavlja navigacija), valja korisnike koje imaju onesposobljen JavaScript o tome obavijestiti. To se moe napraviti koritenjem <noscript> tag-a npr.:
<NOSCRIPT> Zbog onemoguavanja JavaScript-a u Vaem pregledniku neete moi pristupiti svim dijelovima ovih stranica! </NOSCRIPT>

Tekst koji se nalazi u <noscript> tag-u biti e prikazan samo u preglednicima u kojima je JavaScript onemoguen.

Linkovi
HTML
http://www.w3.org/TR/html401 Slubena specifikacija HTML 4.01 http://www.htmlref.com Specifikacije HTML-a, XHTML-a i neto CSS-a http://validator.w3.org/ HTML validator

CSS
http://www.w3.org/TR/css21 Slubena specifikacija CSS 2.1 http://www.csszengarden.com Odlian primjer pravilnog koritenja/kombiniranja CSS-a i HTML-a http://css.maxdesign.com.au/index.htm Kvalitetni primjeri koritenja CSS-a pri izradi lista i menija

JavaScript
http://www.javascript.com Stranica sa puno sadraja vezanih uz JavaScript http://www.w3schools.com/js/default.asp Tutorial o JavaScript-u

Ostalo
http://www.sothink.com/product.htm Odlini programi za kreiranje DHTML stranica. http://www.westciv.com/style_master/index.html Iznimno koristan program za kreiranje CSS stilova

O autoru
Moje ime je Josip Masla i student sam na Fakultetu elekrotehnike i raunarstva. Bavim se izradom uglavnom dinamikih internet stranica pri emu se osim jezika navedenih u ovom seminaru koristim Php-om i MySql-om. Email putem kojega me moete kontaktirati je: josip.maslac@fer.hr