PROJEKTNA DOKUMENTACIJA r s · PDF fileRedizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija 4 14. 06.01.2014. - 07.01.2014. C. Medica Izrada HTML stranice i CSS datoteke

U Varaždinu, siječanj 2014.

Fakultet organizacije i informatike Varaždin

PROJEKTNA DOKUMENTACIJA Redizajn web-stranice Hrvatskih željeznica

Smjer: Primjena informacijske tehnologije u poslovanju Studenti: Christian Medica, 39624/10-IZV Sandra Gašparid, 39403/10-IZV

Kolegij: Multimedijski sustavi Mentor: Dr. sc. Dijana Plantak Vukovac

r s

I

SADRŽAJ

1. Opdi prikaz demoa ili prototipa multimedijske aplikacije ............................................................... 1

1.1. Osnovni podaci ........................................................................................................................ 1

1.2. Vremenski tijek izrade aplikacije ............................................................................................. 2

1.3. Opis problema nastalih kod izrade web stranice .................................................................... 6

1.4. Opda ocjena aplikacije i perspektiva ....................................................................................... 7

2. Prva (1) faza projekta ...................................................................................................................... 8

2.1. Prikupljanje zahtjeva i analiza problema ................................................................................. 8

2.1.1. Zahtjevi publike ............................................................................................................... 8

2.1.2. Ciljevi web mjesta i ciljana publika .................................................................................. 9

2.1.3. Resursi ............................................................................................................................. 9

3. Druga (2) faza projekta .................................................................................................................. 10

3.1. Inicijalni prijedlog .................................................................................................................. 10

3.1.1. Struktura web mjesta .................................................................................................... 11

3.1.2. Prikaz grubog koncepta naslovne stranice .................................................................... 12

3.1.3. Prikaz grubog koncepta podstranica ............................................................................. 13

3.1.4. Prikaz grubog koncepta stranice za vozni red 1/2 ......................................................... 14

3.1.5. Prikaz grubog koncepta stranice za vozni red 2/2 ......................................................... 14

3.1.6. Odabir palete boja ......................................................................................................... 15

4. Treda (3) faza projekta ................................................................................................................... 18

4.1. Faza dizajniranja ili projektiranja ........................................................................................... 18

4.1.1. Konceptualni dizajni ...................................................................................................... 18

4.1.2. Dizajn navigacije/izbornika i sučelja (grafički dizajn) .................................................... 19

4.1.3. Web upotrebljivost i pristupačnost ............................................................................... 20

5. Četvrta (4) faza projekta ................................................................................................................ 22

5.1. Faza razvoja ili programiranja ............................................................................................... 22

5.1.1. CMS sustav CuteNews ................................................................................................... 23

5.1.2. Foto i video galerija ....................................................................................................... 25

5.1.3. Izrada podizbornika ....................................................................................................... 27

5.1.4. HTML kod početne stranice (index.php) ....................................................................... 31

5.1.5. HTML kod HEAD stranice (head.php) ............................................................................ 39

5.1.6. CSS kod (stilovi.css) ........................................................................................................ 43

II

6. Peta (5) faza projekta .................................................................................................................... 55

6.1. Testiranje i dorada ................................................................................................................. 55

6.1.1. Alfa testiranje ................................................................................................................ 55

6.1.2. Beta testiranje ............................................................................................................... 57

6.1.3. Komentari beta testera ................................................................................................. 58

7. Šesta (6) faza projekta ................................................................................................................... 59

7.1. Implementacija ...................................................................................................................... 59

8. Popis Literature ............................................................................................................................. 67

Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija

1

1. OPĆI PRIKAZ DEMOA ILI PROTOTIPA MULTIMEDIJSKE APLIKACIJE

1.1. Osnovni podaci

Naziv aplikacije Redizajn web-stranice Hrvatskih željeznica

Autori Christian Medica, 39624/10-IZV Sandra Gašparid, 39403/10-IZV

Uloge autora C. Medica - upravljanje projektom, inicijalni prijedlozi dizajna sustava, grafički dizajn cijelog web mjesta, razvoj, programiranje, testiranje, dorada

S. Gašparid - proučavanje literature, prikupljanje zahtjeva, analiza problema, inicijalni prijedlozi dizajna sustava, priprema teksta, struktura stranice, testiranje

Eksperti i korištene tehnike prikupljanja zahtjeva

Google anketa, osobni komentari/primjedbe kolega

Dodatna literatura Nastavni materijali iz kolegija Multimedijski sustavi

Složenost sustava 21 web stranica

Medij prikaza aplikacije web, URL: hz.cmedica.comli.com

Uključene tehnologije PHP, HTML 5, CSS 3, JavaScript, jQuery

Uključeni alati Corel PHOTO-PAINT X6 (grafički dizajn, obrada slika), Adobe Dreamweaver CS5 (PHP, HTML, CSS, JS), IcoFX (ikona web mjesta)

Copyright informacije © Davor Butkovid: fotografija "Prototip dizel električnog motornog vlaka", URL: www.hzpp.hr/fotoarhiv © Branimir Butkovid: fotografija „Prototip elektromotornog vlaka za gradsko-prigradski prijevoz“, URL: www.hzpp.hr/fotoarhiv © Branimir Butkovid: 2x fotografija „Prototip elektromotornog vlaka za regionalni prijevoz“, URL: www.hzpp.hr/fotoarhiv

Ostale slike su vlasništvo autora ovog rada Christiana Medice.

© CMS sustav CuteNews za objavljivanje sadržaja preuzet je sa cutephp.com

© Sustav za galeriju slika preuzet je sa fancybox.net

© Podizbornik koji se koristi na podstranicama je preuzet sa webdesign.tutsplus.com

Tabela 1: Opdi prikaz demoa ili prototipa multimedijske aplikacije

http://hz.cmedica.comli.com/

http://www.hzpp.hr/fotoarhiv



http://cutephp.com/

http://fancybox.net/

http://webdesign.tutsplus.com/tutorials/site-elements/orman-clarks-vertical-navigation-menu-the-css3-version/


2

1.2. Vremenski tijek izrade aplikacije

R. br.

Datum Ime autora Provedene aktivnosti Utrošeno

sati

1. 10.12.2013. C. Medica, S. Gašparid Planiranje projekta 1

2. 11.12.2013. C. Medica, S. Gašparid Izrada Google ankete na temu kako bi trebala izgledati web-stranica HŽ-a, što bi klijenti željeli da sadrži i sl.

- slaganje pitanja - izrada obrasca za anketu u Google

Dokumentima - testiranje obrasca - stavljanje veze obrasca na društvenim

mrežama, slanje mailom

2

3. 14.12.2013. C. Medica, S. Gašparid Obrada rezultata ankete u projektnoj dokumentaciji

2

4. 15.12.2013. - 18.12.2013.

C. Medica, S. Gašparid Izrada koncepta web-mjesta (naslovnica, podstranice, izgled voznog reda, online kupnja voznih karti, strukture web-mjesta) prema rezultatima iz ankete

5

5. 18.12.2013. C. Medica Dizajniranje web-stranice za „Vozni red“ u Corel PHOTO-PAINT-u prema konceptu iz MS Visia

1

6. 21.12.2013. C. Medica Dizajniranje web-stranice za „online kupnju voznih karata“ u Corel PHOTO-PAINT-u prema konceptu iz MS Visia, sva 4 koraka

3

7. 27.12.2013. - 01.01.2014.

C. Medica Dizajniranje naslovne stranice i podstranica web-mjesta u Corel PHOTO-PAINT-u

- obrada vlaka koji de biti na naslovnici

10

8. 29.12.2013. S. Gašparid Proučavanje literature na temu HTML i CSS na Internetu

3

9. 02.01.2014. S. Gašparid Instalacija XAMPP-a, programa koji klijentsko računalo pretvara u web-poslužitelj

- proučavanje načina rada sa localhost-om

2

10. 02.01.2014. C. Medica Izrada 2 HTML stranice i CSS datoteke za stranicu „Vozni red“ prema dizajniranom predlošku iz Corel-a

- stvaranje ikone (favicon.ico) pomodu programa IcoFX

- prijelom loga i ikona za popis stanica

5


3

(listbox) - kopiranje popisa svih stanica sa HŽ-

ovih stranica i spremanje u posebnu datoteku s koje de se pozivati (kako ne bi bilo dupliranja istog popisa na nekoliko različitih mjesta/stranica)

- „uštimavanje“ stranice pomodu CSS-a - Postavljanje javascripte za označavanje

redaka bududi da u CSS-u to ne uspijevam napraviti kako treba

11. 02.01.2014. S. Gašparid, C. Medica Pretraživanje Interneta u potrazi za CMS sustavom koji bi mogli implementirati na naše web-stranice

- Joomla i slični sustavi ne dolaze u obzir jer grafički dizajner (C. Medica) nema iskustva u dizajniranju stranica za takve platforme. Odluka je pala na CMS sustav CuteNews jer grafički dizajner ima iskustva s tim sustavom i jer se jednostavno implementira u dizajnirani predložak

3

12. 02.01.2014. S. Gašparid Instalacija i konfiguriranje CMS sustava CuteNews v2.0 (Beta) na localhost

- Problem: nikako kreirati admin račun - CuteNews kao da uopde ne prima

podatke iz popunjenih formi - ni nakon 5 reinstalacija CuteNews ne

prihvada podatke za stvaranje admin računa

- pretraga na Google-u u nadi za rješenjem problema

- problem i dalje neriješen, sumnja da je Beta verzija loše napravljena odnosno nestabilna

- skidanje i instalacija zadnje stabilne verzije Cutenews-a - verzije 1.5.3

- radi, admin račun kreiran, CMS sustav instaliran

- proučavanje CMS sustava

3

13. 03.01.2014. i 06.01.2014.

C. Medica Izrada 4 HTML stranice i CSS datoteke za stranicu „Kupnja voznih karti“ prema dizajniranom predlošku iz Corel-a

- Copy/paste index.php i CSS datoteke iz „Voznog reda“ i preuređivanje

- pokušaj da se u CSS-u napravi na kojem smo koraku

- odustao, ipak samo slika

5


4

14. 06.01.2014. - 07.01.2014.

C. Medica Izrada HTML stranice i CSS datoteke za naslovnicu HŽ-a (index.php) prema dizajniranom predlošku iz Corel-a

- problem kod slika: ispod svake slike se pojavljuje 2px praznog prostora, vjerojatno negdje greška u HTML i/ili CSS kodu

- odlažem problem do faze testiranja

5

15. 08.01.2014. C. Medica Izrada predloška HTML podstranice za sve podstranice koje de se koristiti prema dizajniranom predlošku iz Corel-a

- problem sa slikama se i dalje pojavljuje - kopiranje predloška za sve stavke u

izborniku (predložak za vijesti, press, korisnici, mapa weba…)

2

16. 08.01.2014. S. Gašparid Proučavanje kako se CMS sustav integrira u web stranicu

- pregled HTML koda u index.php gdje de se ubaciti PHP kod od CMS sustava

- CMS sustav ima alat za jednostavno generiranje potrebnog PHP koda i upute kako ubaciti kod u stranicu

1

17. 08.01.2014. S. Gašparid Traženje na Internetu gotove skripte za okomitu navigaciju koja de biti podizbornik na nekim podstranicama na kojima je predviđen podizbornik

2

18. 08.01.2014. i 10.01.2014.

C. Medica, S. Gašparid Implementacija okomite navigacije na stranicu „O nama“ na kojoj je potreban podizbornik sa lijeve strane

- preuređuje se CSS datoteka kako bi se izgledom uklopilo u dizajn stranice

- CSS kod se kopira u CSS datoteku projekta (stilovi.css)

- jQuery datoteka koja se učitava s interneta skinuta je i pohranjena u root direktorij projekta

- stranica popunjena sadržajem sa HŽ-ovog weba

- popunjene sve podstranice u podizborniku „Osnovni podaci“

5

19. 10.01.2014. C. Medica Popunjavanje sadržajem stranice „Press“ i njenih podstranica

- obrada slike logo-a za podstranicu „Logo“

- implementiranje podizbornika na stranici „Press“ i njenim podstranicama

4


5

20. 10.01.2014. S. Gašparid Popunjavanje sadržajem stranice „Korisnici“ i „Mapa weba“

- napravljen podizbornik na stranici „Korisnici“

3

21. 10.01.2014. S. Gašparid Testiranje web-stranice <1

22. 10.01.2014. C. Medica KARTA PRUŽNE MREŽE - skinuo pdf sa HŽ-ovih web-stranica - obradio sliku u Corelu - napravio HTML stranicu

2

23. 10.01.2014. S. Gašparid Popunjavanje google karti HŽ kolodvorima za potrebe web-stranice „Kontakt“

1

24. 11.01.2014. C. Medica Izrada stranice za kontakt - izrada kontakt forme i njihovo

šminkanje u CSS-u - implementacija google karti na kojima

su dodani HŽ kolodvori - kopiranje kontakata sa HŽ

Infrastrukture

2

25. 13.01.2014. S. Gašparid Pretraga po Internetu u potrazi za sustavom za prikazivanje galerije slika

1

26. 13.01.2014. S. Gašparid Pretraga po YouTube-u u potrazi za što kvalitetnijim snimkama HŽ-ovih (modernih) vlakova koji de se prikazivati u galeriji

1

27. 14.01.2014. C. Medica Foto i video galerija - implementacija Lightbox-a - obrada slika u Corelu - ubacivanje slika u stranicu - ubacivanje YouTube filmida

4

28. 12.04.2014. C. Medica Čišdenje HTML i CSS koda 1

29. 15.01.2014. C. Medica, S. Gašparid Implementacija CMS sustava na stranicu s vijestima

- uređivanje predložaka u CMS-u

2

30. 15.01.2014. S. Gašparid Popunjavanje stranice s vijestima preko CMS sustava

2

31. 16.01.2014. S. Gašparid Testiranje web-stranice u HTML i CSS validatoru

1

32. 17.01.2014. C. Medica, S. Gašparid Izrada projektne dokumentacije 12


6

1.3. Opis problema nastalih kod izrade web stranice

Problemi kod razvoja aplikacije

1. Dizajn web mjesta. HŽ ima za svaku firmu svoju stranicu te je bio izazov sve to objediniti u jedno web mjesto.

2. Dizajn sustava za online kupnju voznih karti. HŽ nema sustav za online kupnju voznih karti te smo morali sami osmisliti kako bi izgledao jedan takav sustav i što bi trebao sve sadržavati. Usput smo i osmislili izgled vozne karte koja bi se ispisivala na HŽ-ovim blagajnama (prikazano na četvrtom koraku kod stranice „Kupi voznu kartu online“).

3. Instalacija i konfiguriranje CMS sustava CuteNews v2.0 (Beta) na localhost. Problem je bio u tome da je Beta verzija još uvijek nestabilna te zbog toga nije bilo mogude kreirati administratorski račun kako bi se sustav uopde koristio. Problem je riješen tako da je instalirana zadnja stabilna verzija (1.5.3) CMS sustava.

4. CMS sustav. Planirali smo implementirati CMS sustav na svim stranicama odnosno podstranicama kako bi administriranje web mjesta bilo centralizirano kroz CMS sustav no zbog nedostatka vremena CMS sustav je implementiran samo za vijesti dok se na ostalim stranicama sadržaj mora ručno uređivati kroz programe za stvaranje/uređivanje web-stranica (tipa Adobe Dreamweaver i sl.). Također, planirali smo CMS upotrijebiti i na naslovnici ali zbog krivo složenog predloška u području gdje se prikazuju vijesti nismo imali vremena ispravljati i prilagođavati taj dio posebno za CMS. Problem smo riješili tako da smo ostavili ručno složene tablice za prikaz vijesti i samo ih linkali na puni sadržaj tih vijesti iz CMS-a.

5. Kontakt forma. Mislili smo napraviti funkcionalnu kontakt formu koja bi slala na mail međutim zbog nedostatka vremena odustali smo od toga te na kraju napravili samo izgled forme.

6. 2 piksela praznog prostora ispod nekih slika na nekim stranicama. Problem vjerojatno leži u nedovoljno dobro napisanom CSS i HTML kodu, ali zbog nedostatka vremena nije riješen.

7. Kod stranice za online kupnju voznih karata nismo uspjeli pomodu HTML-a i CSS-a napraviti korake. Riješili smo tako da smo stavili sliku na kojem se koraku korisnik nalazi.

8. Na vrh stranice. Stranice često mogu biti jako dugačke i zaboravili smo predvidjeti mjesto za link/sliku/ikonu „Na vrh stranice“. Nadamo se da de izbornik na dnu stranice donekle olakšati kretanjem web mjestom.

9. Optimizacija za različite web preglednike. Zbog nedostatka vremena HTML i CSS kod nisu uređeni i očišdeni do kraja te se u drugim preglednicima mogu primijetiti nesavršenosti i nedorađenosti.


7

1.4. Opća ocjena aplikacije i perspektiva

Ocjena: 5 Iako projekt u pozadini još uvijek nije dovršen zbog svoje složenosti i nedostatka vremena, web mjesto je ispalo odlično! Novi i osvježeni dizajn web mjesta Hrvatskih željeznica sa lako dostupnim i najčešde korištenim opcijama poput voznog reda privudi de više korisnika a time i promovirati web mjesto.

Perspektiva: 5 Web mjesto je rađeno u PHP tehnologiji te ima brojne prednosti. Pomodu PHP-a stranica VOZNI RED može se spojiti sa bazom za dohvat podataka o voznom redu. Za stranicu KUPI VOZNU KARTU ONLINE može se implementirati sustav naplate kako bi posjetitelji mogli stvarno kupovati karte u bududnosti. Kontakt forma je osmišljena i može se pomodu PHP Mailera povezati kako bi postala funkcionalna. Implementiran je CMS sustav za dodavanje vijesti i taj sustav se može proširiti tako da prikazuje sadržaj i na ostalim stranicama/podstranicama. Na taj način bi CMS sustav bio centralizirano mjesto za upravljanje sadržajem na cijelom web mjestu.


8

2. PRVA (1) FAZA PROJEKTA

2.1. Prikupljanje zahtjeva i analiza problema Odlučili smo web-stranicu napraviti za vlastite potrebe to jest, pošto nemamo naručitelja dosta smo

razmišljali koju web-stranicu dosta posjedujemo, a nikako nam se ne sviđa? Sinulo nam je kad smo

shvatili da oboje ne živimo u Varaždinu, a prijevozno sredstvo koje najčešde koristimo kada odlazimo

kudi, su Hrvatske željeznice.

Na prvi pogled dosta jednostavna stranica, ali opet hladnih boja i na neki način odbija čovjeka.

Možemo redi da je dizajn zastarjeli. Informacije poput voznog reda često izbacuju greške, a vozni red

npr. međunarodnih linija mora se preuzeti u pdf. formatu. Do nekih informacija se dolazi teže, kao da

su skrivene, a sadržaj na početnoj stranici nije dovoljno atraktivno oblikovan te posjetitelj nema

dojam da HŽ nudi neke pogodnosti.

Najveda zamjerka je što u ova moderna vremena HŽ ne slijedi trendove ostalih zemalja, te nema

mogudnosti kupovine karti online. Na raspolaganju nam je trenutna HŽ-ova web-stranica, a programi

u kojima smo radili su Adobe Dreamweaver i Corel PHOTO-PAINT.

2.1.1. Zahtjevi publike

Proveli smo anketu u svrhu istraživanja javnog mišljenja o web-stranicama Hrvatskih željeznica (u

daljnjem tekstu: HŽ).

Cilj ankete nam je bio da nam rezultati javnog mišljenja pomognu pri izradi nove web-stranice HŽ-a

koja bi sadržavala i izgledala onako kako ju javnost želi vidjeti.

U anketi je sudjelovalo 53 ispitanika.

• Najvedi broj ispitanika njih 70% je bio u dobi od 18 do 25 godina.

• Više od 58% ispitanika putuje vlakom nekoliko puta godišnje, nekoliko puta mjesečno

ili svakodnevno što nam je bilo dovoljno da ih ozbiljno shvatimo kao prave kritičara

jer vjerujemo da svakodnevno prate web-stranice HŽ-a.

• 89% ispitanika je odgovorilo da posjeduju web-stranice HŽ-a kada je u pitanju njihovo

putovanje vlakom

• Najčešde informacije zbog kojih naši ispitanici posjeduju web-stranice HŽ-a su „Vozni

red“ čak 73% ispitanika, te nešto podjednako „Zbog radova na pruzi“ 7%, , „Zbog

novosti“ 4%... Ovim su nam pomogli da pri našoj izradi web-stranice usredotočimo na

poboljšanje izgleda onih informacija koje najviše posjeduju.

• Vrlo nam je bilo bitno da li ispitanici primjeduju pogodnosti koje im nudi HŽ.

Zaprepastio nas je podatak da samo njih 13% prati takve pogodnosti, ali opet nas

usmjerio na ono čemu treba posvetiti pažnju kako bi više ljudi zamjedivalo takve

pogodnosti, što nas dovodi do sljededeg pitanja gdje 61% ispitanika smatra da nisu

dovoljno istaknute da bi ih zamijetili.

• Kada bi HŽ na svojim web-stranicama bolje istaknuo pogodnosti koje nudi te samu

galeriju slika vlakova i mjesta kroz koja prolazi kao i samog odredišta, najvedem broju


9

ispitanika njih 70% zvuči primamljivo i razmislili bi o njihovom odabiru da putuju HŽ-

om

• 66% ispitanika je odgovorilo da ih zanima galerija slika samih vlakova HŽ-a i njihove

unutrašnjosti, dok 85% ispitanika bi voljelo na web-stranicama HŽ-a vidjeti kartu

pružne mreže RH kako bi vidjeli kojom rutom putuju.

• Kako smo i predvidjeli, vedi broj ispitanika posjeduje stranicu „Vozni red“ na web-

stranici HŽ-a, a na pitanja da li je stranica „Vozni red“ točna, ispitanici su se približno

podjednako podijelili na one koji smatraju da je vlak polazio kako je pisalo na stranici

voznog reda i one koji smatraju da baš vlak nije uvijek polazio onako kako je pisalo na

stranici voznog reda.

• Kako na sve više web stranica postoji online kupnja, zanimalo nas je da li je jednoj

takvoj važnoj stranici poput HŽ-a bitna mogudnost online kupovine voznih karti, 74%

ispitanika je odgovorilo potvrdno tj. da bi online kupovinu voznih karti trebalo uvesti.

• Zanimao nas je cjelokupni dojam o trenutnoj web stranici HŽ-a na Internetu u

rasponu ocjena od 1 do 10, poražavajudi su podaci da 61% ispitanika (polovina

ispitanika) daje ocjenu do 5, a čak ni jedan % ispitanika ne daje ocjenu 10, te

zaključujemo da treba podosta izmijeniti stranicu kako bi naši ispitanici promijenili

mišljenje na cjelokupni dojam web-stranice HŽ-a.

2.1.2. Ciljevi web mjesta i ciljana publika

Cilj nam je bio napraviti redizajn HŽ-ove web-stranice po našim zamislima i to tako da kad dođemo na

tu stranicu osjetimo sklad. Ciljana publika su ljudi svih dobi, a najviše radnici koji koriste željeznicu

kao prijevozno sredstvo svaki dan.

Zato smo se orijentirali najviše na redizajn voznog reda koji osim polazišta i odredišta sadrži

informacije o polasku, eventualnim kašnjenjima, presjedanjima vlakova. Onu drugu skupinu ljudi, cilj

nam je bio potaknuti ih, na putovanje HŽ-om i to atraktivnim sadržajem i ponudom raznih pogodnosti

kao što su npr. popusti prijevoznih karata, popusti na ulaznice raznih manifestacija itd.

2.1.3. Resursi

Pošto se radi o redizajnu postojede web stranice HŽ-a, na raspolaganju su nam materijali sa tih

stranica. Nakon opširne analize postojede web stranice odlučili smo da demo napraviti cijeli redizajn

stranice. Sa postojede stranice koristiti demo samo tekstualne zapise kao logo HŽ-a te neke slike iz

foto arhive. Video zapise demo koristiti sa YouTube-a.


10

3. DRUGA (2) FAZA PROJEKTA

3.1. Inicijalni prijedlog Dizajn postojede web-stranice HŽ-a smatramo lošom. Nalazi se na stranici www.hzpp.hr te demo

raditi cjelokupni redizajn.

Slika 1: Trenutna web-stranica "HŽ Putnički prijevoz "

Na sljededim stranicama obrađena je struktura web-mjesta i koncepti web-stranica. U prvoj fazi

služedi se grafičkim alatom napravili smo stranice onako kako smo ih vizualno predočili. Prema njoj de

se definirati izgled ostalih podstranica.

http://www.hzpp.hr/


11

3.1.1. Struktura web mjesta

Struktura web-stranice HŽ-a

Naslovna O nama

Osnovni podaci

Uprava Nadzorni odbor

Misija i vizija Djelatnosti

Organizacija Društva u vlasništvu

Antikorupcijski program

Javna nabava i natječaji Izvješda

Podaci o mreži HŽ-ovih pruga Veliki infrastrukturni projekti

Ekologija Vozni park

Vijesti Press centar

Priopdenja Fotoarhiv

HŽ u medijima i tisku Logo

Kontakt

Vozni red Online kupnja karti

Galerija Korisnički centar

Prijevozne isprave i uvjeti

Unutarnji prijevoz

Međunarodni prijevoz

Mjesečne i godišnje

karte

Prijevozni uvjeti

Povlastice

Invalididne osobe i njihovi pratitelji

Učenici i redoviti studenti

Ostali putnici Povlastice u međunarodnom

prijevozu

Pravilnici Tarife

Tarifno prijevozna izvješda (TPI) Online pozicija vagona

Karta pružne mreže Vodič za korisnike

Mapa weba Kontakt


12

3.1.2. Prikaz grubog koncepta naslovne stranice

LOGO HŽ-a Jezik

Gornji izbornik

Donji izbornik

Copyright i informacije

Okvir za vozni

red i kupnju

karti

Pozadinska slika

Okvir „Radovi

na pruzi“

Okvir „Anketa“

Okvir

„Fotogalerija“

Sadržaj

Vijest 1 Vijest 2 Vijest 3

Vijest 4 Vijest 5 Vijest 6…


13

3.1.3. Prikaz grubog koncepta podstranica

Jezik LOGO HŽ-a

Gornji izbornik

Pozadinska

slika

Donji izbornik

Copyright i informacije

Okvir /

podizbornik

Okvir

Okvir

IME PODSTRANICE

Gdje sam?

Sadržaj


14

3.1.4. Prikaz grubog koncepta stranice za vozni red 1/2

3.1.5. Prikaz grubog koncepta stranice za vozni red 2/2

LOGO HŽ-a Vozni red

Polazni kolodvor: (padajuda lista stanica)

Odredišni kolodvor: (padajuda lista stanica)

Preko kolodvora: (padajuda lista stanica)

Polazak: Dolazak: Datum:

GUMB „Prikaži vlakove na relaciji“

LOGO HŽ-a Vozni red

Relacija: RELACIJA 1 > RELACIJA 2

GUMB „Natrag“ GUMB „Kupi voznu kartu“

Vlak Polazak Dolazak Vozi Napomena

Broj … … … -

Broj … … … -


15

3.1.6. Odabir palete boja

Prijedlozi dizajna web-stranice Hrvatskih željeznica nalaze se na slikama 2, 3 i 4, a prijedlozi se odnose

na korištenje boja koje prevladavaju kao i boja fontova naslova. Kao najbolji dizajn smo odabrali

zadnji dizajn na slici 4.

Slika 2: Prvi prijedlog konkretnog dizajna


16

Slika 3: Drugi prijedlog konkretnog dizajna


17

Slika 4: Tredi i izabrani prijedlog konkretnog dizajna

Odabir paleta boja koje

smo koristili u dizajnu su

plave, sive i zelene boje.

Plavu boju smo izabrali

zbog HŽ-ovog loga i HŽ-

ovih starih lokomotiva koje

su plave boje.

Za plavu se smatra da

simbolizira povjerenje i

odanost što se sjajno

uklapa u naš koncept brige

prema korisnicima od

strane HŽ-a.

Sivu boju zbog HŽ-ovih

vagona koji su često bili

sivi i modernih

niskopodnih vlakova od

kojih su neki isto sivi.

Sivu smo uzeli i zato što bi

bijela bila „blještala“ u oči.

Zelenu smo uzeli kao boju

prirode, a koja je poznata

da djeluje smirujude na

ljude, pa se korisnik osjeda

opušteno prilikom

pretraživanja stranice.


18

4. TREĆA (3) FAZA PROJEKTA

4.1. Faza dizajniranja ili projektiranja

4.1.1. Konceptualni dizajni

Ved prije smo prikazali skice konceptualnih dizajna za naslovnicu, podstranice, vozni red i online

kupnju voznih karata. Naslovnica je u pravilu ista kao i podstranice samo što koristi veliku header

pozadinu i sliku dok na podstranicama je manja header pozadinska slika i na njoj se piše naslov te

podstranice. Postoji gornji i donji izbornik. I jedan i drugi sadrže iste opcije te posjetitelj koji skrola

stranicu duboko dolje može odmah sa donjeg izbornika posjetiti neku drugu stranicu bez potrebe za

skrolanjem gore.

Naslovnica je složena tako da pokazuje izdvojene vijesti/novosti pomodu CMS-a, sadrži okvire za brzi

pristup voznom redu, kupnji voznih karti, karti pružne mreže, radovima na pruzi, foto i video galeriji,

online poziciji vagona i ankete. Na naslovnici postoji gornji i donji izbornik.

Podstranice obične namjene su složene tako da sa lijeve strane sadrže okvire koji su od prioriteta

(poput „Radovi na pruzi“) pa okvira koji de posjetitelju olakšati korištenje web mjesta (brzi klik na

galeriju, kartu pružne mreže…). Sa desne strane de biti sadržaj. Podstranice posebne namjene poput

galerije, karte pružne mreže… složene su da imaju samo sadržaj. Na podstranicama postoji gornji i

donji izbornik a tako gdje je potrebno i podizbornik smješten sa lijeve strane od sadržaja.

Stranica „Vozni red vlakova“ je stranica posebno namijenjena za pregled voznog reda te sadrži forme

za unos podataka poput padajudih lista stanica. Nakon što se odabere relacija za prikaz voznog reda

stranica izlistava sve vlakove koji voze na unesenoj relaciji i njihovo vrijeme polaska, odlaska, trajanje

putovanja i napomenu. Posjetitelj stranice može odmah s te stranice idi na stranicu „Online kupnja

voznih karti“. Potrebno je napomenuti da je stranica samo dizajnirana kako bi trebala izgledati a ne i

funkcionalna (koju god relaciju unesete prikazat de vam se vozni red za relaciju Varaždin > Zagreb

(glavni kolodvor). Stranica voznog reda prikazuje se u obliku dialog okvira unutar stranice i ne sadrži

izbornike.

Stranica „Kupi voznu kartu online“ je stranica posebno namijenjena za pregled i kupnju voznih karti.

Stranica sadrži forme za unos podataka poput input textbox-a, padajudih lista i radio button-a.

Stranica se prikazuje u obliku dialog okvira unutar stranice i ne sadrži izbornike. Osim forma za unos

podataka stranica sadrži tekst, sliku karte za vlak a na vrhu stranice prikazuje se na kojem je koraku

kupnje posjetitelj.

Sadržaji de se preuzeti sa stranica HŽ-a (bilo kojih: HŽ Infrastruktura, HŽ Putnički prijevoz, HŽ Cargo…).

Tekstualni de preuzeti sa stranica HŽ-a te uklopljeni u predložak. Iako smo na stranici predvidjeli dio

za promjenu jezika sav sadržaj de biti na hrvatskom. Slike demo upotrijebiti sa HŽ-ovi stranica,

međutim tamo je prilično teško pronadi kvalitetne slike pa demo upotrijebiti i slike jednog od autora

ovoga rada (Christiana Medice). Video sadržaje ubacujemo sa YouTube-a.

Vodi se briga o veličini slika - kompresijom i prikladnim izborom formata datoteke de se što više

smanjiti a da kvaliteta ostane ista. Isto vrijedi i za ostale elemente koje je mogude smanjiti

(primjerice, slike koje čine dizajn stranice/sučelja). Sve je to u svrhu što bržeg učitavanja stranice


19

prema pravilima pristupačnosti (naravno, učitavanje nede biti brzo onima s najsporijim vezama zbog

puno slika bilo fotografija ili slika koje su sastavni dio dizajna stranice).

4.1.2. Dizajn navigacije/izbornika i sučelja (grafički dizajn)

Naglasak kod dizajna navigacije je na njenoj intuitivnosti korištenja. Dolaskom na web mjesto,

posjetitelj treba znati da je primarno našao ono što je tražio (sadržaje o Hrvatskim željeznicama) te

kako brzo dodi do željenih informacija.

Bududi da se radi o složenom web mjestu gdje je potrebna složena i opširna navigacija potrudili smo

se izbornike podijeliti na nekoliko načina. Na stranicama de postojati gornji i donji izbornik koji de

sadržavati najosnovnije opcije za koje se smatra da su najčešde korištene i od važnosti. Podizbornici

nede biti smješteni u gornji i/ili donji izbornik ved de biti smješteni na lijevoj strani na vrhu u ravnini sa

sadržajem. Izbornici i podizbornici biti de složeni od teksta, bez ikakve grafike, slika, ikona…

Slika 5: Gornji izbornik

Slika 6: Donji izbornik

Slika 7: Podizbornik


20

Kako bi web mjesto privuklo i zadržalo posjetitelja ved na naslovnoj stranici bit de obrađena

fotografija vlaka kako bi posjetitelj znao o čemu je riječ i okvir za unos relacije za vozni red jer to

posjetitelji najčešde koriste. Vijesti na naslovnici sadrže i sliku te kratki naslov i tekst a korisnik mora

kliknut na to da bi dobio puni sadržaj.

Ono što de svim stranicama biti zajedničko su zaglavlje i podnožje, a u srednjem dijelu de sa lijeve

strane biti okviri a sa desne sadržaj. Bududi da je stranica rađena u PHP tehnologiji zaglavlje i

podnožje se includaju u stranicu te je taj način riješen i problem nadogradnje izbornika novim

opcijama i slično.

Slika 8: Izgled praznih stranica

4.1.3. Web upotrebljivost i pristupačnost

Na cijelom web mjestu kao font koristit de se Trebuchet MS a kao zamjenski font Arial. Fontovi su

standardizirani za web stranice te ih svaki posjetitelj ima instalirane na svojem računalu. Nigdje na

web mjestu nede se koristiti tekst u obliku slika. Na taj način se poštuje pravilo web upotrebljivosti i

pristupačnosti. Na fotografijama bit de title i alt tagovi. Na slikama koje čine dizajn stranice nede se

postavljati alt i title tagovi.


21

Testirali smo dizajn na web upotrebljivost za osobe s oštedenjem vida, konkretno za daltoniste.

Stranica kako je vide daltonisti prikazana je na slici dolje. Kontrast boje slova i pozadine uglavnom

odgovaraju dobroj čitljivosti teksta.

Slika 9: Naslovnica kakvu vide daltonisti

Prilikom prelaska preko opcija izbornika kao efekt pojavit de se ipod teksta bijela linija, debela 6

piksela. Testiranjem smo došli do zaključka da je to daltonistima vidljivo.

Za korištenje stranice nije nužan miš (mogude je sve prelaziti TAB tipkom), korištene su nevidljive

tablice za raspored elemenata na stranici u kombinaciji sa CSS-om, nema skrivenih linkova, nisu svi

linkovi povezani zbog složenosti web mjesta (napravljene su samo najvažnije stranice, za prikaz web

mjesta), slike koje ne čine dizajn sučelja imaju alt i title tagove i sl.


22

5. ČETVRTA (4) FAZA PROJEKTA

5.1. Faza razvoja ili programiranja Kao što je ved prije rečeno, korišten je predložak za dizajn web mjesta (slika 4). Web mjesto je rađeno

u Adobe Dreamweaver-u zbog stečenog iskustva u njemu na drugom kolegiju i osobnog iskustva.

Rezultat se najviše pregledavao u preglednicima Google Chrome i Opera. Naravno, kasnije de se

testirati i u drugim preglednicima.

Grafički dizajner je predložak naslovne stranice i podstranica ručno kodirao. Ti su se predlošci kasnije

koristili kao kostur svih stranica. Koristili su se HTML 5, CSS 3.

Slika 10 prikazuje fazu stvaranja predloška naslovne stranice iz slike. U toj su se fazi postavila jedna

tablica koja je širine 100% (prilagođava se širini ekrana na kojem se stranica gleda) i sadržavala je tri

redaka i jedan stupac. Prvi red je činio zaglavlje stranice, drugi red sadržaj a tredi red podnožje

stranice. U svakom redku postavljena je nova tablica koja je sadržavala još po nekoliko tablica u sebi,

ovisno o tome kako bi trebao izgledati dizajn stranice.

Na kraju kad se predložak iskodirao ili složio, elementi koji de se ponavljati na svim stranicama

(zaglavlje, podnožje, okviri sa različitim informacijama i sl.) su se spremili u posebne PHP stranice te

su se pomodu PHP funkcije <?php include('stranica.php'); ?> ubacivale u predložak. Na taj način smo

olakšali proces ažuriranja određenih dijelova stranice bez da moramo mijenjati sve podstranice koje

sadrže dio koji je izmijenjen u nekom trenutku.

Slika 10: Faza stvaranja predloška naslovne stranice iz slike

Na kraju je napravljen predložak za podstranice minimalnim izmjenama u predlošku za naslovnu

stranu.


23

5.1.1. CMS sustav CuteNews

Za složeno web mjesto poput našega neophodan je sustav za upravljanje sadržajem. Tu uskaču

sustavi koji se zovu CMS (engl. Content Management System) i služe tome. Mi smo odabrali CMS

sustav CuteNews jer jedan od autora ved ima iskustva u radu s takvim sustavom.

CuteNews ima i komercijalnu i besplatnu inačicu. Razlika je u tome da komercijalna inačica ne

pokazuje na dnu svakog sadržaja svoje ime dok besplatna inačica to obavezno pokazuje. Za potrebe

ovog projekta koristili smo besplatnu inačicu koja se lako može kupiti i jednostavnim koracima

pretvoriti u komercijalnu verziju bez da izgubimo sadržaj koji smo stvorili pomodu njega.

CMS sustav je jednostavno koristiti. Lako je dodavati u njemu korisnike koji de dodavati i uređivati

sadržaj, dodijeliti im prava tko što može raditi u tom sustavu i slično.

Mi smo izabrali CuteNews sustav jer ga je lako implementirati u web stranicu. Nakon što smo CMS

sustav prilagodili i uredili, u njegovim opcijama postoji čarobnjak (vidi sliku 11) koji nam nakon

postavljanja kakav sadržaj želimo da nam se prikazuje na nekoj stranici izgenerira PHP kod koji

umedemo na mjesto na kojem de se prikazati taj sadržaj.

Slika 11: Integracija sadržaja u web-stranicu pomodu PHP koda


24

Uređivanje i dodavanje vijesti je vrlo jednostavno, slično kao u nekadašnjim starim verzijama

Microsoftovog Worda (verzije 2003 i starije). U okvir Short Story dodajemo kratku vijest kakva se

inače prikazuje na naslovnici pa klikom na nju se otvara puna vijest. Ta puna vijest se nalazi u okviru

Full Story.

Slika 12: Uređivanje sadržaja koji se prikazuje na stranici "Vijesti"

Pristup CMS sustavu je omoguden tako da se na naslovnici web mjesta u URL-u na kraju upiše /cms. Korisničko ime i lozinka za pristup CMS sustavu je: admin, MMSprojekt2013


25

5.1.2. Foto i video galerija

U web mjesto integrirani su multimedijski sadržaji - tekst, slike, slike u galerijama, video s YouTube-a.

Za galeriju slika i videa korišten je besplatni alat FancyBox sa stranice fancybox.net koji je napravljen

u jQuery tehnologiji. Alat podržava pored prikazivanja slika i videa i otvaranje HTML stranica, iFrame,

Ajax tehnologiju, prikazivanje .swf (flash) datoteka. Mi smo ga koristili za video s YouTube-a, slike ali i

za prikazivanje stranice o voznom redu i online kupnju voznih karti. Slike dolje prikazuju korištenje

FancyBox-a na našem web-mjestu.

Slika 13: Otvaranje web-stranice u alatu FancyBox

Slika 14: Otvaranje fotografija u alatu FancyBox

http://fancybox.net/


26

Slika 15: Otvaranje filma s YouTube-a u alatu FancyBox

Ubacivanje FancyBox-a u HTML predložak je jednostavan a i FancyBox ima priložene upute kako se

kod ubacuje i kako se označava za slike i druge linkove da se otvaraju u FancyBox-u te stoga to

nedemo ovdje objašnjavati.

Slike su obrađene u Corel PHOTO-PAINT-u, kompresija jpg slika je od 70 do 85 %, ovisno o kakvim

slikama je riječ (neke slike čine dizajn web-stranice pa zato). Sve datoteke su ručno imenovane.


27

5.1.3. Izrada podizbornika

Bududi da nam je na nekim podstranicama trebao okomiti izbornik koji bi igrao ulogu podizbornika

tražili smo na Internetu neki gotovi a koji je moderan i kojeg možemo lako preurediti da se uklopi u

dizajn našeg web mjesta.

Na ovoj stranici našli smo jedan koji odgovara našim potrebama. Izbornik je rađen u HTML 5, CSS 3

standardima a za efekte otvaranja i zatvaranja koristi jQuery. Izbornik je zamišljen da ima sa lijeve

strane neku ikonicu koja bi predstavljala nešto no nama to ne treba pa smo to uklonili iz HTML koda

tako da smo obrisali class="item1" u <li> kodu. Sa desne strane je zamišljeno da sadrži neki broj,

valjda članaka ili nešto slično no nama ni to ne treba pa smo obrisali <span>neki broj</span> u <a

href…> dijelu koda. Na slici 16 je originalni izgled tog izbornika a brisanjem gore navedenih dijelova

HTML koda i preuređivanjem CSS datoteke dobili smo izgled izbornika koji se uklapa u našu stranicu

(slika 17).

Slika 16: Originalni izgled izbornika

Slika 17: Preuređeni izgled izbornika

Bududi da na navedenoj stranici piše u detalje kako se izrađuje izbornik mi demo na sljededoj stranici

navesti samo promjene koje smo napravili nakon što smo izbornik implementirali na stranicu na kojoj

je potreban u obliku usporedbe. Promjene koje smo radili su u CSS datoteci izbornika. Crvena boja

znači da je kod obrisan a podebljano znači da je vrijednost promijenjena ili dodano nešto. Tri točkice

znače da smo obrisali dio koda koji nije taknut a kako bi skratili stranice ove dokumentacije.



28

ORIGINALNA DATOTEKA (STYLES.CSS) NAŠA DATOTEKA (STILOVI.CSS)

ul, ul ul { margin: 0; padding: 0; list-style: none; } #wrapper { width: 220px; margin: 100px auto; font-size: 0.8125em; } .menu { width: auto; height: auto; -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13); } .menu > li > a { background-color: #616975; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100))); background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864'); border-bottom: 1px solid #33373d; -webkit-box-shadow: inset 0px 1px 0px 0px #878e98; -moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow: inset 0px 1px 0px 0px #878e98; width: 100%;

#wrapper ul, ul ul { margin: 0; padding: 0; list-style: none; } #wrapper { width: auto; font-size:16px; position:relative; } .menu { width: auto; height: auto; } .menu > li > a { /* naslov liste */ background-color: #E9ECED; border-bottom: 1px solid #C1D7E0; width: 100%;


29

height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,.5); } .menu ul li a { background: #fff; border-bottom: 1px solid #efeff0; width: 100%; height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.923em; font-weight: 400; color: #878d95; } .menu ul li:last-child a { border-bottom: 1px solid #33373d; } .menu > li > a:hover, .menu > li > a.active { background-color: #35afe3; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219))); background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db'); border-bottom: 1px solid #103c56;

height: 2em; line-height: 2em; text-indent: 17px; /* razmak */ display: block; position: relative; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; color:#878888; text-decoration:none; } .menu ul li a { /* otvorena lista */ background: #EFEFEF; border-bottom: 1px solid #C1D7E0; width: 100%; height: 2em; line-height: 2em; text-indent:25px; display: block; position: relative; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 0.923em; font-weight: 400; color: #878888; text-decoration:none; } .menu ul li:last-child a { border-bottom: 1px solid #C1D7E0; /* border kod otvorene liste */ } .menu > li > a:hover, .menu > li > a.active { background-color: #CDDDE4;


30

-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef; box-shadow: inset 0px 1px 0px 0px #6ad2ef; } .menu > li > a.active { border-bottom: 1px solid #1a638f; } .menu > li > a:before { content: ''; background-image: url(../images/sprite.png); background-repeat: no-repeat; font-size: 36px; … } .menu > li > a span { … background: #48515c; … color: #fff; … } .menu > li > a:hover span, .menu > li a.active span { background: #2173a1; } .menu > li > ul li a:before{

content: '▶'; … left: -2.7em; } .menu > li > ul li:hover a:before { color: #32373D; } .menu ul > li > a span { … text-shadow: 0px 0px 0px rgba(255,255,255,.01)); }

color: #878888; } .menu > li > a.active { border-bottom: 1px solid #C1D7E0; } .menu > li > a:before { /* ničemu ne služi */ content: ''; font-size: 16px;

… } .menu > li > a span { … background: #262626; … color: #EAEAEA; … } .menu > li > a:hover span, .menu > li a.active span { background: #121212; } .menu > li > ul li a:before{ /* to je crtica kod otvorene liste */ content: ''; … left: 0.7em; } .menu > li > ul li:hover a:before { /* kad staviš miš na otvorenu listu */ color: #878888; background-color: #CDDDE4; } .menu ul > li > a span { … text-shadow: none; }


31

5.1.4. HTML kod početne stranice (index.php)

<?php include('head.php'); ?> <title>Hrvatske željeznice</title> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6" bgcolor="#0A73A3"></td> </tr> <tr> <td height="100" align="center" valign="middle"><?php include('header.php'); ?></td> </tr> <tr> <td align="center" valign="middle" bgcolor="#0A73A3"><table width="980" border="0" cellpadding="0" cellspacing="0" id="izbornik"> <tr> <td align="left" valign="middle"><a href="index.php" class="oznacen">Naslovna</a> <a href="o-nama.php">O nama</a> <a href="vijesti.php">Vijesti</a> <a href="press.php">Press</a> <a class="fancybox fancybox.iframe" href="vozni-red/">Vozni red</a> <a href="galerija.php">Galerija</a> <a href="korisnici.php">Korisnici</a> <a href="mapa-weba.php">Mapa weba</a> <a href="kontakt.php">Kontakt</a></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td align="center" valign="top" id="poz-slika"><table cellpadding="0" cellspacing="0" id="poz-slika-vlak"> <tr> <td align="center" valign="top"><table width="980" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="292" align="left" valign="top" style="padding:30px 0px;"><table width="260" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="6" bgcolor="#0A73A3"></td> </tr> <tr> <td align="left" valign="top" style="padding:17px; background-color:#EFEFEF;"><table border="0" cellpadding="0" cellspacing="0" id="listbox"> <tr> <td width="95">Polazi&scaron;te:</td> <td><?php include('lista-stanica.php'); ?></td> </tr> </table></td> </tr> <tr>


32

<td align="left" valign="top" style="padding:0px 17px 17px 17px; background-color:#EFEFEF;"><table border="0" cellpadding="0" cellspacing="0" id="listbox"> <tr> <td width="100">Odredi&scaron;te:</td> <td><?php include('lista-stanica.php'); ?></td> </tr> </table></td> </tr> <tr> <td align="left" valign="top" style="padding:0px 17px 17px 17px; background-color:#EFEFEF;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="gumb-zeleni"> <tr> <td><a class="fancybox fancybox.iframe" href="vozni-red/voz.php">Pogledaj vozni red</a></td> </tr> </table></td> </tr> <tr> <td align="left" valign="top" style="padding:0px 17px 17px 17px; background-color:#EFEFEF;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="gumb-zeleni"> <tr> <td><a class="fancybox fancybox.iframe" href="kupi-kartu/">Kupi voznu kartu</a></td> </tr> </table></td> </tr> <tr> <td align="left" valign="top" style="padding:0px 17px 17px 17px; background-color:#EFEFEF;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="gumb-plavi"> <tr> <td><a href="karta.php">Karta pružne mreže RH</a></td> </tr> </table></td> </tr> <tr> <td height="6" bgcolor="#0A73A3"></td> </tr> </table></td> <td align="left" valign="top"> </td> </tr> <tr> <td height="100"> </td> <td> </td> </tr> <tr> <td align="left" valign="top"><table width="260" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top"><?php include('radovi.php'); ?></td> </tr> <tr> <td height="64" align="left" valign="top"> </td> </tr> <tr>


33

<td align="left" valign="top"><?php include('anketa.php'); ?></td> </tr> <tr> <td height="64" align="left" valign="top"> </td> </tr> <tr> <td align="left" valign="top"><?php include('banner-karta.php'); ?></td> </tr> <tr> <td height="64" align="left" valign="top"> </td> </tr> <tr> <td align="left" valign="top"><?php include('foto-dana.php'); ?></td> </tr> <tr> <td height="64" align="left" valign="top"> </td> </tr> <tr> <td align="left" valign="top"><?php include('pozicija-vagona.php'); ?></td> </tr> </table></td> <td align="left" valign="top"><table width="688" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top" style="border-bottom:6px solid #0A73A3;"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="border:0; border-spacing:0px; background-color:#D9E3E8; width:35px; height:30px; font-size:10px; line-height:1em;"><img src="sucelje/ikona-info.png" width="35" height="35" alt="Izdvojene aktualnosti" title="Izdvojene aktualnosti"></td> <td><h2>Izdvojene aktualnosti</h2></td> </tr> </table></td> </tr> <tr> <td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="33%" align="left" valign="top" style=" padding:0px 6px 32px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1389538800&template=vijesti&"><img src="sucelje/vijest-01.jpg" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 12.01.2014.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1389538800&template=vijesti&">Remont Borongaj - Dugo Selo</a></td> </tr>


34

<tr> <td class="vijest-sadrzaj">U ponedjeljak 13. siječnja nastavljaju se radovi na remontu te na snagu stupa nova organizacija prijevoza putnika.</td> </tr> </table></td> <td width="33%" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1385996700&template=vijesti&"><img src="sucelje/vijest.png" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 02.12.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1385996700&template=vijesti&">Ispravak teksta</a></td> </tr> <tr> <td class="vijest-sadrzaj">Ispravak teksta u povlastici Unutarnji promet – Invalidne osobe.</td> </tr> </table></td> <td width="33%" align="left" valign="top" style="padding:0px 0px 32px 6px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1386774540&template=vijesti&"><img src="sucelje/vijest-03.jpg" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 11.12.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1386774540&template=vijesti&">Biciklom na vlak – novi tarifni uvjeti</a></td> </tr> <tr> <td class="vijest-sadrzaj">Nove cijene za prijevoz bicikala od nedjelje 15. prosinca 2013.</td> </tr> </table></td> </tr> <tr> <td align="left" valign="top" style=" padding:0px 6px 32px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr>


35

<td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1385651460&template=vijesti&"><img src="sucelje/vijest.png" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 28.11.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1385651460&template=vijesti&">Nove pogodnosti za putnike</a></td> </tr> <tr> <td class="vijest-sadrzaj">Primjenjuju se od prvog prosinca 2013. godine</td> </tr> </table></td> <td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1384096380&template=vijesti&"><img src="sucelje/vijest.png" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 10.11.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1384096380&template=vijesti&">Novi vozni red 2013./2014.</a></td> </tr> <tr> <td class="vijest-sadrzaj">Vozni red stupa na snagu 15. prosinca 2013. i vrijedi do 13. prosinca 2014.</td> </tr> </table></td> <td align="left" valign="top" style="padding:0px 0px 32px 6px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1385910960&template=vijesti&"><img src="sucelje/vijest-06.jpg" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 01.12.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1385910960&template=vijesti&">Vlakom na izložbe Moderne galerije</a></td> </tr> <tr>


36

<td class="vijest-sadrzaj">Iskoristite mogudnost popusta od 40% pri kupnji prijevoznih karata.</td> </tr> </table></td> </tr> <tr> <td align="left" valign="top" style=" padding:0px 6px 32px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1381846680&template=vijesti&"><img src="sucelje/vijest-07.jpg" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 15.10.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1381846680&template=vijesti&">Posjetite Muzej za umjetnost i obrt</a></td> </tr> <tr> <td class="vijest-sadrzaj">Putujte vlakom i ostvatite popust od 40% pri kupnji prijevoznih karata.</td> </tr> </table></td> <td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1389799140&template=vijesti&"><img src="sucelje/vijest-08.jpg" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 15.01.2014.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1389799140&template=vijesti&">Pogodnosti za posjetitelje Hotela Terme Jezerčica</a></td> </tr> <tr> <td class="vijest-sadrzaj">Popust od 40% pri kupnji prijevoznih karata.</td> </tr> </table></td> <td align="left" valign="top" style="padding:0px 0px 32px 6px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1383664920&template=vijesti&"><img src="sucelje/vijest-09.jpg" width="227" height="130"></a></td> </tr>


37

<tr> <td class="vijest-datum">Objavljeno 05.11.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1383664920&template=vijesti&">Dodatna usluga u vagonima za spavanje</a></td> </tr> <tr> <td class="vijest-sadrzaj">Uvođenje higijenskih setova u WL vagonima i besplatna voda u Bc vagonima.</td> </tr> </table></td> </tr> <tr> <td align="left" valign="top" style=" padding:0px 6px 0px 0px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1371738300&template=vijesti&"><img src="sucelje/vijest.png" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 20.06.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1371738300&template=vijesti&">Obavijest za korisnike</a></td> </tr> <tr> <td class="vijest-sadrzaj">Povedanje cijene dodatka za vožnju bez prijevozne isprave.</td> </tr> </table></td> <td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1368973560&template=vijesti&"><img src="sucelje/vijest.png" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 19.05.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1368973560&template=vijesti&">Putovanje skupina</a></td> </tr> <tr>


38

<td class="vijest-sadrzaj">Komercijalna povlastica od 30 do 50% za prijevoz najavljenih i organiziranih skupina po posebnom odobrenju.</td> </tr> </table></td> <td align="left" valign="top" style="padding:0px 0px 0px 6px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="vijest"> <tr> <td align="left" valign="top"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1368887220&template=vijesti&"><img src="sucelje/vijest-12.jpg" width="227" height="130"></a></td> </tr> <tr> <td class="vijest-datum">Objavljeno 18.05.2013.</td> </tr> <tr> <td class="vijest-naslov"><a href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1368887220&template=vijesti&">Povlastica za posjetitelje MSU-a</a></td> </tr> <tr> <td class="vijest-sadrzaj">Otputujte povoljnije na izložbe i događanja u MSU.</td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td align="left" valign="top" style="border-top:6px solid #0A73A3; padding-top:32px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="gumb-plavi"> <tr> <td><a href="vijesti.php">Pregledaj sve vijesti ></a></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td height="60"> </td> <td> </td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td align="center" valign="top"><?php include('dno.php'); ?></td> </tr> </table> </body> </html>


39

5.1.5. HTML kod HEAD stranice (head.php)

<!DOCTYPE HTML> <html> <head> <meta charset="windows-1250"> <html lang="hr"> <?php include('trazilice.php'); ?> <link href="stilovi.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" href="favicon.ico" />  <script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>  <script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>  <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script> <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />  <script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> <script type="text/javascript"> $(document).ready(function() { /* * Simple image gallery. Uses default settings */ $('.fancybox').fancybox({ padding: 0, }); /* * Different effects */ // Change title type, overlay closing speed $(".fancybox-effects-a").fancybox({ helpers: { title : { type : 'outside' }, overlay : { speedOut : 0 } } }); // Disable opening and closing animations, change title type


40

$(".fancybox-effects-b").fancybox({ openEffect : 'none', closeEffect : 'none', helpers : { title : { type : 'over' } } }); // Set custom style, close if clicked, change title type and overlay color $(".fancybox-effects-c").fancybox({ wrapCSS : 'fancybox-custom', closeClick : true, openEffect : 'none', helpers : { title : { type : 'inside' }, overlay : { css : { 'background' : 'rgba(238,238,238,0.85)' } } } }); // Remove padding, set opening and closing animations, close if clicked and disable overlay $(".fancybox-effects-d").fancybox({ padding: 0, openEffect : 'elastic', openSpeed : 150, closeEffect : 'elastic', closeSpeed : 150, closeClick : true, helpers : { overlay : null } }); /* * Button helper. Disable animations, hide close button, change title type and content */


41

$('.fancybox-buttons').fancybox({ openEffect : 'none', closeEffect : 'none', prevEffect : 'none', nextEffect : 'none', closeBtn : false, helpers : { title : { type : 'inside' }, buttons : {} }, afterLoad : function() { this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); } }); /* * Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked */ $('.fancybox-thumbs').fancybox({ prevEffect : 'none', nextEffect : 'none', closeBtn : false, arrows : false, nextClick : true, helpers : { thumbs : { width : 50, height : 50 } } }); /* * Media helper. Group items, disable animations, hide arrows, enable media and button helpers. */ $('.fancybox-media') .attr('rel', 'media-gallery') .fancybox({


42

padding: 0, openEffect : 'none', closeEffect : 'none', prevEffect : 'none', nextEffect : 'none', arrows : false, helpers : { media : {}, buttons : {} } }); }); </script>


43

5.1.6. CSS kod (stilovi.css)

@charset "windows-1250"; /* CSS dokument - Projekt iz Multimedijskih sustava, FOI 2013./2014. */ /* (c) Christian Medica */ body { background: #EFEFEF; color: #878888; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; line-height:1.1em; font-style:normal; font-variant:normal; font-weight:normal; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } /* linkovi za sve */ a:link { color: #666666; text-decoration: underline; } a:visited { text-decoration: underline; color: #666666; } a:hover { text-decoration: underline; color: #000; -webkit-transition:all 100ms ease-in; -o-transition:all 100ms ease-in; -moz-transition:all 100ms ease-in;} a:active { text-decoration: none; color: #666666; } img { border:0px; padding:0px; } h1 { font-size:30px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; padding:0px; line-height:0.5em; color:#0A73A3; text-transform: none; font-weight:bold;} h2 {font-size:18px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; line-height:0em; color:#0A73A3; text-transform:uppercase; font-weight:bold; vertical-align:middle; text-align:left; padding-left:11px;} h3 { font-size:16px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; padding:0px; line-height:1em; color:#0A73A3; text-transform: none; font-weight:bold;} #dno { background:url(sucelje/sjena-dno.png) top center no-repeat #0A73A3; width:100%; color:#84B9D1; text-align:center; vertical-align:middle; padding:30px; border:0; font-size:14px; } #dno a:link { font-size:14px; color: #E4F0F5;


44

text-decoration: none; padding:5px 5px; border:1px solid #0A73A3; } #dno a:visited { font-size:14px; text-decoration: none; color: #E4F0F5; padding:5px 5px; border:1px solid #0A73A3; } #dno a:hover { font-size:14px; text-decoration: none; background: transparent; /* pokazivac na nj */ color: #E4F0F5; padding:5px 5px; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; border:1px solid #E4F0F5; border-radius:5px; } #dno a:active { font-size:14px; text-decoration: none; background: #E4F0F5; /* klik na nj */ color: #0A73A3; padding:5px 5px; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; border:1px solid #E4F0F5; border-radius:5px; } td#poz-slika { background:url(sucelje/pozadina-index.jpg) top center no-repeat;} td#poz-slika2 { background:url(sucelje/pozadina-podstranice.jpg) top center no-repeat; border-bottom:6px solid #0A73A3;} #poz-slika-vlak { background:url(sucelje/pozadina-vlak.png) top center no-repeat; width:100%; border:0;} td#poz-slika-karta { background:url(sucelje/karta.jpg) top center no-repeat; height:990px;} #izbornik {color: #FFF; padding:17px 0px; word-spacing:38px;} #izbornik a:link { font-size:16px; color: #FFF; text-decoration: none; padding:10px 0px; text-transform:uppercase; word-spacing:normal; }


45

#izbornik a:visited { font-size:16px; text-decoration: none; color: #FFF; padding:10px 0px; text-transform:uppercase; word-spacing:normal; } #izbornik a:hover { font-size:16px; text-decoration: none; background: transparent; /* pokazivac na nj */ color: #FFF; padding:10px 0px; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; text-transform:uppercase; border-bottom:6px solid #EFEFEF; word-spacing:normal; } #izbornik a:active { font-size:16px; text-decoration: none; background: #EFEFEF; /* klik na nj */ color: #0A73A3; padding:10px 0px; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; text-transform:uppercase; border-bottom:6px solid #EFEFEF; border-top:6px solid #EFEFEF; word-spacing:normal; } .oznacen { font-size:16px; text-decoration: none; background: transparent; /* pokazivac na nj */ color: #FFF; padding:10px 0px; text-transform:uppercase; border-bottom:6px solid #EFEFEF; word-spacing:normal; } /* PODIZBORNIK na stranici press.php */ #podizbornik { color:#878888; width:100%; float:left; border-bottom:1px solid #C1D7E0; background-color:#E9ECED; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;} #podizbornik ul { list-style: none; margin:0; padding:0; } #podizbornik a { display:block; padding: 10px 17px; text-decoration:none; font-weight:normal; color:#878888; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; } #podizbornik a:hover { color: #878888; background-color:#CDDDE4; } #podizbornik a:active { color: #878888; background-color:#EEEEEE;}


46

#listbox { border:1px solid #C1D7E0; border-radius:5px; background:#EFEFEF; width:100%; height:50px; line-height:1em; padding:0px 0px 0px 15px; color:#93BED1; vertical-align:middle; text-align:left; font-size:20px; } #listbox:hover { border:1px solid #0A73A3; border-radius:5px; line-height:1em; color:#0A73A3; vertical-align:middle; text-align:left; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; } #listbox2 { border:0; background: #EFEFEF; width:100%; height:100%; line-height:1em; padding:0px 0px; color:#0A73A3; font-size:20px; -webkit-appearance: none; text-align:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } #gumb-zeleni { color:#EFEFEF; width:100%; font-size:19px; line-height:normal; border:1px solid #009846; border-radius:5px; text-align:center; vertical-align:middle; background-color:#009846; -moz-box-shadow: inset 0px 0px 30px 0px #007E3A; -webkit-box-shadow: inset 0px 0px 30px 0px #007E3A; box-shadow: inset 0px 0px 30px 0px #007E3A;} #gumb-zeleni a { display:block; padding:10px 0px; text-decoration:none; font-weight:normal; color:#EFEFEF; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; border:1px solid #009846; border-radius:5px;} #gumb-zeleni a:hover { color: #EFEFEF; background-color:#009846; -moz-box-shadow: inset 0px 0px 30px 0px #007536; -webkit-box-shadow: inset 0px 0px 30px 0px #007536; box-shadow: inset 0px 0px 30px 0px #007536;} #gumb-zeleni a:active { color: #009846; background-color:#EFEFEF; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}


47

#gumb-plavi { color:#EFEFEF; width:100%; font-size:19px; line-height:normal; border:1px solid #C1D7E0; border-radius:5px; text-align:center; vertical-align:middle; background-color:#0A73A3; -moz-box-shadow: inset 0px 0px 30px 0px #096C99; -webkit-box-shadow: inset 0px 0px 30px 0px #096C99; box-shadow: inset 0px 0px 30px 0px #096C99;} #gumb-plavi a { display:block; padding:10px 0px; text-decoration:none; font-weight:normal; color:#EFEFEF; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; border:1px solid #0A73A3; border-radius:5px;} #gumb-plavi a:hover { color: #EFEFEF; background-color:#0A73A3; -moz-box-shadow: inset 0px 0px 30px 0px #07577B; -webkit-box-shadow: inset 0px 0px 30px 0px #07577B; box-shadow: inset 0px 0px 30px 0px #07577B;} #gumb-plavi a:active { color: #0A73A3; background-color:#EFEFEF; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} #vijest { background-color:#E9ECED;} #vijest img { border:0; border-bottom:4px solid #BDD4DF; background-color:#E9ECED; width:100%; } .vijest-datum { text-transform:uppercase; font-size:10px; padding:13px 0px 0px 13px; text-align:left; vertical-align:top;} .vijest-naslov { font-weight:bold; color:#0A73A3; padding:5px 13px; text-align:left; vertical-align:top; height:40px;} .vijest-naslov a:link { font-weight:bold; color:#0A73A3; text-decoration:none; } .vijest-naslov a:visited { font-weight:bold; color:#0A73A3; text-decoration:none; } .vijest-naslov a:hover { font-weight:bold; color:#0A73A3; text-decoration:underline;} .vijest-naslov a:active { font-weight:bold; color:#0A73A3; text-decoration:none; } .vijest-sadrzaj { padding:5px 13px 13px 13px; text-align:justify; height:95px; vertical-align:top;} .podstranica-naslov { text-transform:uppercase; font-size:44px; padding:40px 0px 0px 0px; color:#FFF; text-align:left; vertical-align:top;} .podstranica-gdje-sam { text-align:right; font-size:12px; padding:0px 0px 20px 0px; vertical-align:bottom; color:#FFF;} .podstranice-naslov { font-size:18px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; line-height:0em; color:#0A73A3; text-transform:uppercase; font-weight:bold; padding-top:20px;} /* PODIZBORNIK */ #wrapper ul, ul ul { margin: 0; padding: 0; list-style: none; } #wrapper { width: auto; font-size:16px; position:relative; } .menu { width: auto; height: auto; }


48

.menu > li > a { /* naslov liste */ background-color: #E9ECED; border-bottom: 1px solid #C1D7E0; width: 100%; height: 2em; line-height: 2em; text-indent: 17px; /* razmak */ display: block; position: relative; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; color:#878888; text-decoration:none; } .menu ul li a { /* otvorena lista */ background: #EFEFEF; border-bottom: 1px solid #C1D7E0; width: 100%; height: 2em; line-height: 2em; text-indent:25px; display: block; position: relative; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 0.923em; font-weight: 400; color: #878888; text-decoration:none; } .menu ul li:last-child a { border-bottom: 1px solid #C1D7E0; /* border kod otvorene liste */ } .menu > li > a:hover, .menu > li > a.active { background-color: #CDDDE4; color: #878888; } .menu > li > a.active { border-bottom: 1px solid #C1D7E0; } .menu > li > a:before { /* ničemu ne služi */ content: ''; font-size: 16px; height: 1em; width: 1em; position: absolute; left: 0; top: 50%; margin: -.5em 0 0 0; } .menu > li > a span { font-size: 0.857em; display: inline-block;


49

position: absolute; right: 1em; top: 50%; background: #262626; line-height: 1em; height: 1em; padding: .4em .6em; margin: -.8em 0 0 0; color: #EAEAEA; text-indent: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: .769em; border-radius: .769em; -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); text-shadow: 0px 1px 0px rgba(0,0,0,.5); font-weight: 500; } .menu > li > a:hover span, .menu > li a.active span { background: #121212; } .menu > li > ul li a:before{ /* to je crtica kod otvorene liste */ content: ''; font-size: 8px; color: #bcbcbf; position: absolute; width: 1em; height: 1em; top: 0; left: 0.7em; } .menu > li > ul li:hover a, .menu > li > ul li:hover a span, .menu > li > ul li:hover a:before { /* kad staviš miš na otvorenu listu */ color: #878888; background-color: #CDDDE4; } .menu ul > li > a span { font-size: 0.857em; display: inline-block; position: absolute; right: 1em; top: 50%; background: #FFF;


50

border: 1px solid #D0D0D3; line-height: 1em; height: 1em; padding: .4em .7em; margin: -.9em 0 0 0; color: #878D95; text-indent: 0; text-align: center; -webkit-border-radius: .769em; -moz-border-radius: 769em; border-radius: 769em; text-shadow: none; } /* ########## KONTAKT FORMA ############ */ #imeprezime { border:1px solid #C1D7E0; background:#EFEFEF; line-height:1em; padding:0px 0px 0px 15px; color:#93BED1; text-align:left; font-size:20px; width:90%; height:50px; vertical-align:middle; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom:30px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } #imeprezime:hover { background:#EFEFEF; border:1px solid #0A73A3; border-radius:5px; line-height:1em; color:#0A73A3; vertical-align:middle; text-align:left; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; } #naslov { border:1px solid #C1D7E0; background:#EFEFEF; line-height:1em; padding:0px 0px 0px 15px;


51

color:#93BED1; text-align:left; font-size:20px; height:50px; vertical-align:middle; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:94%; margin-bottom:30px; } #naslov:hover { background:#EFEFEF; border:1px solid #0A73A3; border-radius:5px; line-height:1em; color:#0A73A3; vertical-align:middle; text-align:left; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; } #email { border:1px solid #C1D7E0; background:#EFEFEF; line-height:1em; padding:0px 0px 0px 15px; color:#93BED1; text-align:left; font-size:20px; height:50px; vertical-align:middle; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:97%; margin-bottom:30px; } #email:hover { background:#EFEFEF; border:1px solid #0A73A3; border-radius:5px; line-height:1em; color:#0A73A3; vertical-align:middle; text-align:left; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; }


52

#napomena { border:1px solid #C1D7E0; background:#EFEFEF; line-height:1em; color:#93BED1; text-align:left; font-size:20px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; width:94.5%; height:200px; padding:10px 15px; vertical-align: top; margin-bottom:30px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; /*-moz-box-shadow: 0px 2px 10px 0px #039 inset; -webkit-box-shadow: 0px 2px 10px 0px #039 inset; box-shadow: 0px 2px 10px 0px #039 inset;*/ } #napomena:hover { background:#EFEFEF; border:1px solid #0A73A3; border-radius:5px; line-height:1em; color:#0A73A3; vertical-align:middle; text-align:left; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; } #security { border:1px solid #C1D7E0; background:#EFEFEF; line-height:1em; padding:0; color:#93BED1; font-size:20px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; width:40px; height:50px; vertical-align:middle; text-align:center; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } #security:hover { background:#EFEFEF; border:1px solid #0A73A3; border-radius:5px;


53

line-height:1em; color:#0A73A3; vertical-align:middle; text-align: center; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; } #imageField { color:#EFEFEF; font-size:19px; line-height:normal; border:1px solid #C1D7E0; border-radius:5px; text-align:center; vertical-align:middle; background-color:#0A73A3; -moz-box-shadow: inset 0px 0px 30px 0px #096C99; -webkit-box-shadow: inset 0px 0px 30px 0px #096C99; box-shadow: inset 0px 0px 30px 0px #096C99; width:120px; height:50px; padding:0 15px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; -moz-border-radius:5px; -webkit-border-radius:5px; } #imageField:hover { color: #EFEFEF; background-color:#0A73A3; -moz-box-shadow: inset 0px 0px 30px 0px #07577B; -webkit-box-shadow: inset 0px 0px 30px 0px #07577B; box-shadow: inset 0px 0px 30px 0px #07577B; border:1px solid #C1D7E0; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } #imageField:active { color: #0A73A3; background-color:#EFEFEF; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border:1px solid #C1D7E0; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }


54

#drustva-vlasnistvu { width:100%; border:1px solid #878888; border-radius:5px; padding:15px; vertical-align:top; text-align:left; } #drustva-vlasnistvu:hover { border:1px solid #0A73A3; border-radius:5px; padding:15px; background-color:#EFEFEF; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in;} #press-priopcenja { width:100%; border:1px solid #878888; border-radius:5px; padding:15px; vertical-align:top; text-align:left; } #press-priopcenja:hover { border:1px solid #0A73A3; border-radius:5px; padding:15px; background-color:#EFEFEF; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in;} #fotogalerija img { border-top:6px solid #CDDDE4; border-bottom:6px solid #CDDDE4; border-right:0px; border-left:0px; margin-bottom:30px; opacity:0.8; } #fotogalerija img:hover { border-top:6px solid #BDD4DF; border-bottom:6px solid #BDD4DF; border-right:0px; border-left:0px; margin-bottom:30px; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; opacity:1.0;} .fancybox-custom .fancybox-skin { box-shadow: 0 0 50px #222; } #fotoarhiv img { border-radius:200px; margin-bottom:5px;} #fotoarhiv img:hover { -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moz-transition:all 150ms ease-in; border-radius:5px;}


55

6. PETA (5) FAZA PROJEKTA

6.1. Testiranje i dorada Obavlja se testiranje funkcionalnosti i ispravljanje grešaka te dorada sustava na temelju evaluacije od

strane korisnika ili novih specifičnih zahtjeva.

6.1.1. Alfa testiranje

Web stranice i CSS prvo su testirane na ispravnost kôda u HTML i CSS validatorima. Stranice su

validirane na http://validator.w3.org/, a CSS datoteka na http://jigsaw.w3.org/css-validator/.

CSS provjera ispravnosti (slika 18) prošla je odlično bududi da jedan od autora ima višegodišnje

iskustvo sa CSS-om pa je otpočetka projekta pisao ispravno CSS kod.

Slika 18: CSS provjera ispravnosti

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/


56

HTML provjera ispravnosti je na prvi pogled izrazito porazna (slika 19 i 20). Čak 371 greška. Uvidom u

iscrpni popis grešaka ipak je ustanovljeno da nije riječ baš o greškama.

Web mjesto HŽ-a je rađeno u (zastarjelim) tablicama koje sadrže (po validatoru) zastarjele elemente

koji se danas definiraju pomodu CSS-a. Zbog toga su sve te greške vedinom poruka o tome da se

koristi zastarjeli element i da ga definiramo CSS-om.

Manji dio grešaka otpada na poruke tipa da se kod više tablica koristi isti ID što je i tako planirano

(ponavljajude iste tablice sa različitim sadržajem) stoga te „greške“ možemo odbaciti. I za kraj, tu i

tamo je pokoja greška tipa kako se za HTML 5 dokumente koristi UTF-8 kodiranje dok smo mi koristili

windows-1250 kodiranje koje je tipično za srednjeeuropsko područje.

Slika 19: HTML provjera ispravnosti


57

Slika 20: HTML provjera ispravnosti - dio popisa grešaka

Stranice smo testirali na različitim preglednicima pomodu stranice browsershots.org. Ispravno se

prikazuju u: Google Chrome 32.0.1700.76, Internet Explorer 10, Mozzila Firefox 12, Opera 12.16.

Jedina razlika u prikazu je da se vidi strelica za padajude liste u svim preglednicima osim Google-ovog

Chroma. U i Operi se ne vidi prozirna pozadina tih padajudih lista. Stvar je u tome što ti preglednici

osim Google-ovog Chroma ne podržavaju CSS tag appearance koji sakriva gumb sa strelicom prema

dolje za padajudu listu.

Svi su linkovi ispravni, sve slike imaju alt i title tagove (osim onih slika koje čine dizajn sučelja), jQuery

FancyBox galerija radi, vodilo se računa o tome da slike imaju što manju veličinu, tj. da ima dovoljno

multimedije, ali da bude dovoljno pristupačno i za sporije veze.

Smatramo da su dizajn i boje ugodne i da se posjetitelj lako snalazi na stranici, da su slova dobra, font

i tekst čitljivi (i daltonistima i starijim ljudima koji imaju poteškode sa čitanjem sitnoga teksta).

Početna stranica je lagana za snadi se u njoj. Sekundarna navigacija se pojavljuje po potrebi i trebala

bi se lako identificirati. Naslovi su precizni i jasni. Nismo koristili previše tekstualnih efekata (bold,

italic, sjene…) i nismo koristili animacije ili nešto slično što bi ometalo korisnika. Svaka stranica ima

svoj naslov.

6.1.2. Beta testiranje

Web mjesto je zatim testirano na korisnicima. Svi su testeri znali da je to projekt iz kolegija

„Multimedijski sustavi“ i da im originalni komentari ulaze u ovu dokumentaciju. Testirano je na

nekoliko korisnika, uglavnom među studentima i to onima koji se voze vlakom te zbog toga koriste

HŽ-ove stranice.

http://browsershots.org/


58

6.1.3. Komentari beta testera

Danko P. (29, CEO tvrtke Infostudio d.o.o., Ogulin):

Ova stranica je puno bolja od trenutne stranice Hrvatskih Željeznica jer je rađena po uzoru na Europske željeznice. Dizajn i boje su jako ugodne i vrlo se lako snalazi na stranici tako da je taj dio odlično odrađen! Što se tiče tehničkih stvari i ideja za poboljšanje one su slijedede:

- slike u headeru na naslovnici se da bolje obraditi da zadržavaju manje memorije i da se brže učitavaju,

- Ova zelena pozadine šume - mislim da to nije slika iz Hrvatske, pa joj tu nije niti mjesto, trebalo bi je zamijeniti s hrvatskim pejzažom gdje se vidi i pruga u daljini umjesto ove ceste

- Trebalo bi malo smanjiti sve fontove i slike kako bi više sadržaja stalo na stranicu jer se ovdje radi o kompleksnijoj stranici sa mnogo sadržaja

- Fontovi na službenim državnim stranicama trebaju biti crne a ne sive boje - Stranica 'O nama' treba govoriti o prednostima i benefitima HŽ-a i imati neki zanimljivi tekst,

službene informacije o osnivačima i temeljnom kapitalu su totalno nebitne za web posjetitelja - Vozni red bi bilo bolje izvesti kao stranicu a ne popup jer to pruža više mogudnosti i više

prostora programeru da uredi tražilicu. Također glavna tražilica na naslovnoj stranici treba biti više 'user-friendly' i pružati više mogudnosti. Predlažem da se otvara unutar stranice (umjesto kao popup) i da je mogude pretraživati po datumima (slično kao Britanske željeznice: http://www.nationalrail.co.uk/), te da se može odabrati pretraživanje putne karte u jednom smjeru i/ili povratna karta. Zatim se selektiraju željene karte (željeno vrijeme putovanja) i ide se u proces naplate, te nakon pladanja putnik dobije kartu na email koju treba isprintati ili na kolodvoru zamijeniti za originalnu kartu.

Uglavnom sviđa mi stranica, samo naprijed!!

Danko Puškarid CEO - InfoStudio d.o.o.

Valentino Z. (22, student FOI-ja): „Šteta što oni zapravo nisu tako dobri u stvarnosti XD“

Mario M. (23, student PMF-a): „Au bome dobro. Super. Kako to radiš, sve u HTML?“

Snalaženje je bilo intuitivno i nije bilo zamijedenih problema u vezi toga. Dorade nije bilo. Jedino smo

sliku vlaka na naslovnici koja je u PNG formatu pomodu web-stranice tinypng.com smanjili sa 511 KB

na odličnih 97 KB. Usput smo sve slike u PNG formatu smanjili i tako ih komprimirali za 61% od

prijašnje veličine, kako nam je ta stranica izračunala. Na taj način smo još dodatno smanjili vrijeme

učitavanja web mjesta.

Komentar od vlasnika tvrtke Infostudio d.o.o. nam je jako dobrodošao ali zbog nedostatka

vremena nismo napravili nikakve ispravke.

Kod dizajna smo se orijentirali prema minimalnoj rezoluciji od 1024 piksela te zbog toga stranica

izgleda odlično i na takvoj rezoluciji koju uglavnom koriste za današnje vrijeme stariji CRT monitori.

http://www.nationalrail.co.uk/

https://tinypng.com/


59

7. ŠESTA (6) FAZA PROJEKTA

7.1. Implementacija Kako bi promovirali nove web stranice, prilažemo nekoliko screenshot-ova koji prikazuju konačni

dizajn i daju uvid u sadržaj web mjesta.

Slika 21: Naslovna stranica (index.php)


60

Slika 22: Stranica "O nama" > "Organizacija" (organizacija.php)


61

Slika 23: Stranica na kojoj je karta pružne mreže (karta.php)


62

Slika 24: Stranica za kontakt (kontakt.php)


63

Slika 25: Foto i video galerija (galerija.php)


64

Slika 26: Mapa web mjesta (mapa-weba.php)


65

Slika 27: Stranica za korisnike (korisnici.php)


66

Slika 28: Društva u vlasništvu HŽ-a (drustva-vlasnistvu.php)


67

8. POPIS LITERATURE

1. Nastavni materijali iz kolegija „Multimedijski sustavi“

2. Nastavni materijali iz kolegija „Dizajn programskih proizvoda“

3. Powel - Dizajn web mjesta

4. Nielsen - Dizajn upotrebljivih web mjesta

5. Chapman - Principi dobrog web dizajna

6. Pearrow - Smjernice web dizajna

7. Izrada podizbornika i njegova prilagodba dizajnu našeg web mjesta, posjedeno 08.01.2014.:

http://webdesign.tutsplus.com/tutorials/site-elements/orman-clarks-vertical-navigation-

menu-the-css3-version/

8. abc HTML5 i CSS3 TUTORIAL - elektronski priručnik, posjedeno 29.12.2013.:

http://www.znanje.org/abc/tutorials/html5/01/html5_abc.htm

9. Podrška za CMS sustav CuteNews, posjedeno 02.01.2014.:

http://cutephp.com/forum/

10. Dokumentacija za galeriju, posjedeno 14.01.2014.:

http://fancybox.net/howto



http://www.znanje.org/abc/tutorials/html5/01/html5_abc.htm

http://cutephp.com/forum/

http://fancybox.net/howto

Documents

PROJEKTNA DOKUMENTACIJA r s · PDF fileRedizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija 4 14. 06.01.2014. - 07.01.2014. C. Medica Izrada HTML stranice i CSS datoteke