PROJEKTNA DOKUMENTACIJA

Fakultet organizacije i informatike Varaždin
PROJEKTNA DOKUMENTACIJA
r
Redizajn web-stranice Hrvatskih željeznica
Smjer: Primjena informacijske tehnologije u poslovanju
Kolegij: Multimedijski sustavi
Mentor: Dr. sc. Dijana Plantak Vukovac
U Varaždinu, siječanj 2014.
s
Studenti:
Christian Medica, 39624/10-IZV
Sandra Gašparid, 39403/10-IZV
SADRŽAJ
1.
2.
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
Prva (1) faza projekta ...................................................................................................................... 8
2.1.
3.
2.1.1.
Zahtjevi publike ............................................................................................................... 8
2.1.2.
Ciljevi web mjesta i ciljana publika .................................................................................. 9
2.1.3.
Resursi ............................................................................................................................. 9
Druga (2) faza projekta .................................................................................................................. 10
3.1.
4.
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
Treda (3) faza projekta ................................................................................................................... 18
4.1.
5.
Prikupljanje zahtjeva i analiza problema ................................................................................. 8
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
Č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
I
6.
Peta (5) faza projekta .................................................................................................................... 55
6.1.
7.
6.1.1.
Alfa testiranje ................................................................................................................ 55
6.1.2.
Beta testiranje ............................................................................................................... 57
6.1.3.
Komentari beta testera ................................................................................................. 58
Šesta (6) faza projekta ................................................................................................................... 59
7.1.
8.
Testiranje i dorada................................................................................................................. 55
Implementacija ...................................................................................................................... 59
Popis Literature ............................................................................................................................. 67
II
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
1
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
1.2.
Vremenski tijek izrade aplikacije
R.
br.
Datum
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
dokumentaciji
projektnoj
2
4.
15.12.2013. - C. Medica, S. Gašparid Izrada koncepta web-mjesta (naslovnica,
18.12.2013.
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 localhostom
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
Ime autora
Utrošeno
sati
Provedene aktivnosti
ankete
u
2
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
-
-
(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
3
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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 C. Medica, S. Gašparid Implementacija okomite navigacije na stranicu
10.01.2014.
„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.
4
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
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
validatoru
1
32.
17.01.2014.
u
C. Medica, S. Gašparid Izrada projektne dokumentacije
HTML
i
CSS
12
5
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
6
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
7
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
8
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
•
•
•
•
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 webstranici 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.
9
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
10
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
3.1.1. Struktura web mjesta
Struktura web-stranice HŽ-a
Naslovna
O nama
Osnovni podaci
Uprava
Antikorupcijski program
Nadzorni odbor
Misija i vizija
Djelatnosti
Organizacija
Društva u vlasništvu
Javna nabava i natječaji
Izvješda
Podaci o mreži HŽ-ovih pruga
Veliki infrastrukturni projekti
Ekologija
Vijesti
Vozni park
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
Mjesečne i
godišnje
karte
Međunarodni
prijevoz
Prijevozni
uvjeti
Pravilnici
Tarifno prijevozna izvješda (TPI)
Karta pružne mreže
Mapa weba
Povlastice
Invalididne osobe i
njihovi pratitelji
Ostali putnici
Učenici i redoviti
studenti
Povlastice u
međunarodnom
prijevozu
Tarife
Online pozicija vagona
Vodič za korisnike
Kontakt
11
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
3.1.2. Prikaz grubog koncepta naslovne stranice
LOGO HŽ-a
Jezik
Gornji izbornik
Okvir za vozni
red i kupnju
karti
Pozadinska slika
Sadržaj
Okvir „Radovi
na pruzi“
Vijest 1
Vijest 2
Vijest 3
Vijest 4
Vijest 5
Vijest 6…
Okvir „Anketa“
Okvir
„Fotogalerija“
Donji izbornik
Copyright i informacije
12
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
3.1.3. Prikaz grubog koncepta podstranica
LOGO HŽ-a
Jezik
Gornji izbornik
IME PODSTRANICE
Pozadinska
slika
Gdje sam?
Okvir /
podizbornik
Okvir
Sadržaj
Okvir
Donji izbornik
Copyright i informacije
13
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
3.1.4. Prikaz grubog koncepta stranice za vozni red 1/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“
3.1.5. Prikaz grubog koncepta stranice za vozni red 2/2
LOGO HŽ-a
Vozni red
Relacija: RELACIJA 1 > RELACIJA 2
Vlak
Polazak
Dolazak
Vozi
Napomena
Broj
…
…
…
-
Broj
…
…
…
-
GUMB „Natrag“
GUMB „Kupi voznu kartu“
14
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
15
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
Slika 3: Drugi prijedlog konkretnog dizajna
16
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
Slika 4: Tredi i izabrani prijedlog konkretnog dizajna
17
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
18
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
19
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
20
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
21
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
22
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
23
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
24
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
25
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
26
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
27
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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:
-webkitgradient(linear,
left
top,
left
bottom,
from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image:
-webkit-lineargradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image:
-moz-lineargradient(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-lineargradient(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(Gra
dientType=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%;
28
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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:
-webkitgradient(linear, left top, left bottom, from(rgb(69,
199, 235)),to(rgb(38, 152, 219)));
background-image:
-webkit-lineargradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image:
-moz-lineargradient(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-lineargradient(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(Gra
dientType=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;
29
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
-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:
rgba(255,255,255,.01));
}
0px
0px
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;
0px
}
30
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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="mapaweba.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="pozslika-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>
31
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
<td align="left" valign="top" style="padding:0px 17px 17px 17px; backgroundcolor:#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; backgroundcolor:#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; backgroundcolor:#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; backgroundcolor:#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>
32
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
<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=vijes
ti&"><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=vijes
ti&">Remont Borongaj - Dugo Selo</a></td>
</tr>
33
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
<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=vijes
ti&"><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=vijes
ti&">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=vijes
ti&"><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=vijes
ti&">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>
34
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
<td align="left" valign="top"><a
href="http://localhost/multimedija/vijesti.php?subaction=showfull&id=1385651460&template=vijes
ti&"><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=vijes
ti&">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=vijes
ti&"><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=vijes
ti&">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=vijes
ti&"><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=vijes
ti&">Vlakom na izložbe Moderne galerije</a></td>
</tr>
<tr>
35
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
<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=vijes
ti&"><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=vijes
ti&">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=vijes
ti&"><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=vijes
ti&">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=vijes
ti&"><img src="sucelje/vijest-09.jpg" width="227" height="130"></a></td>
</tr>
36
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
<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=vijes
ti&">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=vijes
ti&"><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=vijes
ti&">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=vijes
ti&"><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=vijes
ti&">Putovanje skupina</a></td>
</tr>
<tr>
37
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
<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=vijes
ti&"><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=vijes
ti&">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; paddingtop: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>
38
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.fancyboxmedia.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
39
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
$(".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
*/
40
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
$('.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({
41
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
padding: 0,
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
});
</script>
42
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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; -otransition: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; lineheight: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; lineheight: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;
43
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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; borderbottom: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;
}
44
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
#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;}
45
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
#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; -moztransition: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; -webkitbox-shadow: none; box-shadow: none;}
46
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
#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; -moztransition: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; -webkitbox-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; verticalalign:bottom; color:#FFF;}
.podstranice-naslov { font-size:18px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; lineheight: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;
}
47
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
.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;
48
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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;
49
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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;
50
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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;
}
51
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
#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;
52
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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;
}
53
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
#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; backgroundcolor:#EFEFEF; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moztransition: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; backgroundcolor:#EFEFEF; -webkit-transition:all 150ms ease-in; -o-transition:all 150ms ease-in; -moztransition:all 150ms ease-in;}
#fotogalerija img { border-top:6px solid #CDDDE4; border-bottom:6px solid #CDDDE4; borderright:0px; border-left:0px; margin-bottom:30px; opacity:0.8; }
#fotogalerija img:hover { border-top:6px solid #BDD4DF; border-bottom:6px solid #BDD4DF; borderright: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; -moztransition:all 150ms ease-in; border-radius:5px;}
54
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
55
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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
56
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
57
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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.
58
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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)
59
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
Slika 22: Stranica "O nama" > "Organizacija" (organizacija.php)
60
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
Slika 23: Stranica na kojoj je karta pružne mreže (karta.php)
61
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
Slika 24: Stranica za kontakt (kontakt.php)
62
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
Slika 25: Foto i video galerija (galerija.php)
63
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
Slika 26: Mapa web mjesta (mapa-weba.php)
64
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
Slika 27: Stranica za korisnike (korisnici.php)
65
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
Slika 28: Društva u vlasništvu HŽ-a (drustva-vlasnistvu.php)
66
Redizajn web-stranice Hrvatskih željeznica - Projektna dokumentacija
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-navigationmenu-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
67

Download Report