Upload
lianxing24
View
298
Download
7
Embed Size (px)
DESCRIPTION
Dizajn web stranice
Citation preview
SVEUILITE U RIJECIEKONOMSKI FAKULTET
Franko Antievi
DIZAJN, IMPLEMENTACIJA I TESTIRANJE KORISNIKOG SUELJA WEB STRANICA
I WEB APLIKACIJA
DIPLOMSKI RAD II
Rijeka, 2010.
SVEUILITE U RIJECIEKONOMSKI FAKULTET
DIZAJN, IMPLEMENTACIJA I TESTIRANJE KORISNIKOG SUELJA WEB STRANICA
I WEB APLIKACIJA
DIPLOMSKI RAD II
Predmet: Informatika tehnologijaMentor: prof. dr. sc. Slavomir VukmiroviStudent: Franko Antievi
Studijski smjer: MenedmentJMBAG: 19871
Rijeka, rujan 2010.
SADRAJ 1 . UVOD.............................................................................................................1
1.1 . Problem i predmet istraivanja.............................................................1
1.2 . Svrha i ciljevi istraivanja....................................................................1
1.3 . Hipoteza................................................................................................2
1.4 . Znanstvene metode...............................................................................2
1.5 . Struktura rada.......................................................................................2
2 . RELEVANTNE ZNAAJKE INTERNET I WEB TEHNOLOGIJE. . .4
2.1 . Definicija Interneta...............................................................................4
2.2 . Povijesni osvrt i sadanje stanje Interneta............................................5
2.3 . Web najvanija usluga Interneta.......................................................8
2.4 . Utjecaj Web-a na dananjeg ovjeka.................................................13
3 . OSNOVNA OBILJEJA WEB KORISNIKOG SUELJA...............15
3.1 . Openito o korisnikom suelju ........................................................15
3.2 . Web stranice ......................................................................................16
3.2.1 . Osnovne karakteristike web stranica.............................................16
3.2.2 . Specifinosti korisnikog suelja kod web stranica......................20
3.3 . Web aplikacije....................................................................................23
3.3.1 . Relevantne znaajke web aplikacija..............................................23
3.3.2 . Korisniko suelje za potrebe interaktivnosti...............................26
4 . PRISTUP RAZVOJU WEB SUELJA U TVRTKI DOMO PRO...28
4.1 . Djelatnost i dosadanje iskustvo........................................................28
4.2 . CMS sustavi i njihovo korisniko suelje..........................................30
4.3 . Smjernice za daljnji razvoj................................................................33
5 . PROCES RAZVOJA WEB SUELJA ...................................................34
5.1 . Proces i princip dizajniranja web korisnikog suelja......................34
5.2 . Tehnologije za implementaciju..........................................................39
5.2.1 . HTML ...........................................................................................39
5.2.2 . CSS ...............................................................................................41
5.2.3 . JavaScript......................................................................................43
5.2.4 . AJAX.............................................................................................45
5.2.5 . Grafiki elementi...........................................................................46
5.2.6 . Alati za izradu korisnikog suelja................................................47
5.2.7 . Dobra praksa..................................................................................48
5.3 . Testiranje korisnikog suelja .........................................................49
6 . UTJECAJ WEB KORISNIKOG SUELJA NA USPJENOST
POSLOVANJA PODUZEA .....................................................................54
6.1 . Kriteriji mjerenja uspjenosti.............................................................54
6.2 . Utjecaj upotrebljivosti web suelja na ROI........................................56
6.3 . Primjeri iz prakse................................................................................57
7 . ZAKLJUAK.............................................................................................58
LITERATURA.............................................................................................61
POPIS SLIKA..............................................................................................64
POPIS TABLICA.........................................................................................65
POPIS GRAFIKONA...................................................................................65
1. UVOD
1.1. PROBLEM I PREDMET ISTRAIVANJA
Internet tehnologija, s posebnim naglaskom na Web, posljednjih je dvadesetak godina
napravila najveu revoluciju u ljudskoj povijesti. Promijenjen je nain komunikacije meu
ljudima kao i nain poslovanja tvrtki, od itanja dnevnih novosti, preko online kupovine
dobara i usluga pa sve do obavljanja bankarskih transakcija.
Ako bi se analiziralo internet tehnologiju, mogli bismo je okvirno podijeliti u nekoliko
sastavnih cjelina:
tehnoloka osnova (mrena oprema, serveri, preklopnici, itd.)
skup servisa i standarda (http, ftp, e-mail, voip, itd.)
korisnike aplikacije (web preglednici, e-mail klijenti, itd.)
Predmet ovog rada obrauje jedan specifini, sastavni dio zadnje stavke gornjeg nabrajanja,
a to je korisniko suelje. Upravo korisniko suelje predstavlja dodirnu toku korisnika1 i
web globalne mree. Ono to korisnik vidi na ekranu i kako komunicira preko mia i
tastature je ono to je njemu najbitnije. O tome to se nalazi u pozadini korisnikog suelja,
veina korisnika zna malo ili gotovo nita. Budui da postoji globalni trend koritenja web
tehnologije u sve veoj mjeri u odnosu na "klasine" desktop aplikacije, ovaj rad e se
bazirati samo na web aplikacijama i web stranicama.
1.2. SVRHA I CILJEVI ISTRAIVANJA
Utvrivanje svrhe i cilja u uskoj je vezi s prethodno definiranim problemom istraivanja.
Cilj ovog diplomskog rada je ukazati na ulogu i teinu korisnikog suelja u koritenju
Interneta. Isto tako, detaljno e se analizirati proces izrade kvalitetnog korisnikog suelja
kroz proces planiranja, implementacije i testiranja. Kao to je i u naslovu rada navedeno,
napraviti e se i distinkcija izmeu neega to je vrlo esto predmet nerazumijevanja, a to su
web stranice i web aplikacije.
1 Rije "korisnik" se u ovom radu odnosi na bilo koju osobu koja se koristi uslugama web stranica ili web aplikacija
1
1.3. HIPOTEZA
Iz prethodno navedenih problema i predmeta te svrhe i cilja istraivanja, izvedena je
osnovna hipoteza diplomskog rada koja polazi od pretpostavke da korisniko suelje
predstavlja najvaniji element svakog web rjeenja, jer upravo korisniko suelje
predstavlja tu dodirnu toku izmeu korisnika i sustava koji stoji iza svega toga.
1.4. ZNANSTVENE METODE
U ovom radu koritene su sljedee znanstvene metode:
metoda indukcije,
metoda dedukcije,
metoda analize i sinteze,
metode dokazivanja,
metoda klasifikacije,
metoda deskripcije,
metoda komparacije,
metoda intervjuiranja,
metoda promatranja.
Takoer su koriteni podaci iz raspoloive literature, strunih lanaka i relevantnih internet
stranica. Kombinacijom navedenih metoda dolo se do rezultata iznesenih u obradi teme.
1.5. STRUKTURA RADA
Diplomski rad se sastoji od 7 meusobno povezanih dijelova. U prvom dijelu, UVOD,
definirani su problem i predmet istraivanja, svrha i cilj koji se eli postii ovim radom te
hipoteza koja se eli dokazati. Navedene su znanstvene metode koje su pri tome koritene te
je ukratko prikazana struktura diplomskog rada.
U drugom dijelu s naslovom RELEVANTNE ZNAAJKE INTERNET I WEB
TEHNOLOGIJE, ukratko je napravljen uvod u tehnoloku osnovu, koja je preduvjet za
razvoj web stranica i web aplikacija. Napravljen je i kratki osvrt na povijest, tempo razvoja i
trenutno stanje tih tehnologija kao i ono to moemo oekivati u budunosti.
2
Trea cjelina OSNOVNA OBILJEJA WEB KORISNIKOG SUELJA detaljnije
obrauje aplikacijski sloj web tehnologije. Radi se distinkcija izmeu web stranica i web
aplikacija sa predstavljenim tipinim primjerima jedne i druge kategorije. Tu se navode
osnovni elementi web korisnikog suelja te specifinosti ukoliko se ono aplicira na web
stranice ili na web aplikacije.
U etvrtom dijelu naslova PRISTUP RAZVOJU WEB SUELJA U TVRTKI DOMO
PRO se navode iskustva izrade suelja u web studiju Domo Pro. Ta tvrtka ima
viegodinju praksu intenzivnog rada na takvim poslovima te je napravila stotinjak
projekata upravo na ovom podruju.
Peti dio, naslova PROCES RAZVOJA WEB SUELJA, ujedno je i najopseniji dio ovog
diplomskog rada. itatelja se upoznaje sa procesom koji se prakticira kod svakog
profesionalnog projekta realizacije korisnikog suelja neke web stranice ili web aplikacije.
Svaka se faza zasebno obrauje, navode se metodologije realizacije, prezentiraju se alati
koji se koriste kod izrade te se ukratko analizira tehnologija koja slui za implementaciju.
esta cjelina, UTJECAJ WEB KORISNIKOG SUELJA NA USPJENOST
POSLOVANJA PODUZEA, e ukratko elaborirati poslovnu ulogu korisnikog suelja
web aplikacija i web stranica te njihovu ulogu na uspjenost poslovanja poduzea.
Prezentirat e se kvantitativni pokazatelji pomou kojih je mogue mjeriti postignute
rezultate i na temelju toga donositi kvalitetne poslovne odluke.
Diplomski rad zavrava estom cjelinom ZAKLJUKOM u kojem su iznesene spoznaje
do kojih se dolo tijekom ovog istraivanja.
3
2 . RELEVANTNE ZNAAJKE INTERNET I WEB
TEHNOLOGIJE
2.1. DEFINICIJA INTERNETA
Iako tema ovog rada nije detaljnije elaborirati Internet, bez te tehnoloke podloge ne bi bilo
mogue koritenje web stranica i web aplikacija te je stoga napravljen kratki osvrt na taj
fenomen koji je promijenio drutveni i poslovni ivot zadnja dva desetljea.
Internet je javno dostupna globalna mrea koja zajedno povezuje raunala i raunalne mree
koritenjem istoimenog protokola (IP internet protokol). To je "mrea svih mrea" koja se
sastoji od milijuna kunih, akademskih, poslovnih i vladinih mrea koje meusobno
razmjenjuju informacije i usluge kao to su elektronika pota, chat i prijenos datoteka te
povezane stranice i dokumente World Wide Weba (Wikipedia.org, 2010).
Slina definicija bi bila kako je Internet najvea raunala mrea na svijetu u koju su
korisnici iz cijeloga svijeta spojeni pomou telefonske linije, modema i raunala, a koji na
svojim raunalima imaju odreeni software s potrebnim protokolima za spajanje na Internet
te koriste razne internet servise (Franji, 1999:1)
Bill Gates, naglaava termin "povezivost" koju Internet donosi. Povezivost u digitalnom
dobu ima ire znaenje od dovoenja dviju osoba u izravnu vezu. Internet stvara posve novi
sveobuhvatni prostor za dijeljenje podataka, suradnju i trgovinu. Radi se o novom
komunikacijskom sredstvu koje iskoritava dostupnost i spontanost tehnologije poput
televizijske i telefonske te ih povezuje dubinom i irinom svojstvenom papirnatim
komunikacijama (Gates, 1999: xiii).
Ne uputajui se u tehnike detalje, vano je spomenuti na koji nain korisnici danas dolaze
u dodir sa Internetom. Najvie koritene "toke neposrednog dodira" korisnika i Interneta
su; osobno raunalo, mobilni ureaji, VOIP telefoni, GPS ureajii televizija (npr. MaxTV
usluga). Moglo bi se rei da dananji korisnik, svijesno ili nesvijesno, sve vie i vie koristi
infrastrukturu zvanu Internet.
4
2.2. POVIJESNI OSVRT I SADANJE STANJE INTERNETA
Poetni motiv razmiljanja o unapreenju meusobne komunikacije meu raunalima datira
iz Amerikih vojnih ureda. Povijesne okolnosti vezane za Hladni rat i potreba za
umreavanjem i stabilnosti amerike vojno-obavjetajne mree uvjetovala je osnivanju
agencije ARPA (Advanced Research Project Agency). Njen zadatak je bio osmisliti mreu
koja treba zadovoljiti dva osnovna kriterija:
Telekomunikacijska mrea ne smije ovisiti o centralnom serveru ve sustav treba biti
vie disperzivan i meusobno neovisan,
Mrena komunikacija mora biti mogua ak i u sluaju da je pojedini segment mree
oteen i onemoguena je njegova djelomina ili potpuna funkcionalnost.
ARPA je po tom nalogu 1969. godine izgradila mreu zvanu ARPANet (Petri, 2002.) .
Tu novonastalu mreu ve u samim poecima poinju koristiti i akademske zajednice u
Americi. Prvi akademski vor je postavljen u sveuilitu UCLA ( University of California
Los Angeles), koji se povezao sa sveuilitem Barkley u istom gradu. U toj evoluciji bitno
je spomenuti i 1971. godinu kada se toj mrei prikljuuje i prvi neovisni vor, a to je
ALOHANet sveuilita sa Hawaii-a. Zbog prikljuivanja sve vee koliine novih mrea, iz
sigurnosnih razloga Amerika vojska se povlai u svoju zasebnu mreu zvanu MILNET.
ARPANet se 70-ih i 80-ih ubrzano iri te joj se prikljuuje sve vei broj, do tada, izoliranih
mrea. Svi su htjeli u ARPANet; sveuilita, vladine agencije, korporacije, razne ostale
organizacije, ali i pojedinci. 1973. godine ARPANet izlazi iz okvira SAD-a te poinje
povezivati i University College u Londonu i Royal Rada Establishment u Norvekoj.
Sve do poetka 90-ih godina prolog stoljea globalna mrea se intenzivno irila, ali i
tehniki razvijala. Krajem osamdesetih se, tada ve zastarjeli ARPANet-ov sustav
protokola, zamijenio NSFNet-ovim. On je predstavljao backbone (kraljenica mree
struktura mree na koju su spojeni svi ostali dijelovi mree) link koji je dobio kapacitet od
1.5 magabit po sekundi te su se standardizirali TCP/IP internet protokoli koji su
predstavljali skup standarda (pravila) po kojima raunala meusobno komuniciraju.
Iako je tehnika osnova ve postojala 20 godina, sve do poetka 90-ih ta globalna mrea
nije dobila svoje "javno lice". To se promijenilo dolaskom World Wide Web projekta.
5
Najvea revolucija na podruju Interneta, dogodila se 06. kolovoza 1991. kada je
predstavljen World Wide Web, skraeno WWW ili WEB projekt. Web je osmislio britanski
znanstvenik Tim Berners-Lee u institutu CERN (Organisation Europenne pour la
Recherche Nuclaire) u vicarskoj.
Web je sistem koji se sastoji od skupa hipertekst dokumenata koji su meusobno povezani i
kojima se moe pristupiti preko Interneta (Wikipedia.org, 2010). Takvi dokumenti mogu
sadravati tekst, slike, video i ostale multimedijalne elemente te su meusobno povezani
hiperlinkovima to omoguava brzo i lako pretraivanja velikog broja informacija. Web je
razvijen kako bi predstavljao more ljudskog znanja, ljudske kulture i kako bi omoguavao
udaljenu suradnju za razmjenu ideja i raznih oblika zajednikih projekata ljudi (Wardrip-
Fruin i Montfort, 2003).
Kako bi se hipertekstualne dokumente moglo pregledavati potreban je neki od web
preglednika. Prvi znaajniji preglednik bio je NCSA Mosaic koji je predstavljen
1993.godine. Znaajan je po tome to je to bio prvi pretraiva s grafikim sueljem (do
njega su preglednici koristili samo isti tekst) to je uvelike doprinijelo popularizaciji WEB
servisa. Nakon njega uslijedio je cijeli niz pretraivaa raznih tvrtki i organizacija od kojih
su najpoznatiji: Internet Explorer, Mozilla Firefox, Opera, Safari i Google Chrome.
Sve usluge koje danas koristimo, rezultat su nekih od servisa koje Internet omoguuje.
Najpoznatiji servisi Interneta su:
WWW servis (World Wide Web),
E-mail servis koristi se za elektroniku potu te je drugi po popularnosti uz web,
FTP (File Transfer Protocol) servis prenoenje datoteka izmeu udaljenih raunala,
VOIP (Voice Over IP) - telefonija koja koriti klasinu internet infrastrukturu,
Telekonferencije/Videokonferencije.
Kombinacijom navedenih glavnih servisa razvili su se i sljedei dodatni servisi:
Dostavne liste,
UseNet - diskusijske skupine,
IRC - Internet relay chat.
6
Internetom se danas koristi oko dvije milijarde svjetskog stanovnitva. Krivulja rasta broja
korisnika kroz zadnjih 20 godina ima stalnu tendenciju pozitivnog uspona te e tako biti i
ubudue. Sljedea tablica argumentirano upuuje na takav zakljuak:
Tablica 1: Korisnici Interneta u svijetu
REGIJE BROJ STANOVNIKA(2010. g.)
BROJ KORISNIKA INTERNETA (2000. g.)
BROJ KORISNIKA INTERNETA (2010. g.)
PENETRACIJA (% POPULACIJE)
RAST (2000-2010)
Afrika 1,013,779,050 4,514,400 110,931,700 10.9 % 2,357.3 %
Azija 3,834,792,852 114,304,000 825,094,396 21.5 % 621.8 %
Europa 813,319,511 105,096,093 475,069,448 58.4 % 352.0 %
Bliski Istok 212,336,924 3,284,800 63,240,946 29.8 % 1,825.3 %
Sj. Amerika 344,124,450 108,096,800 266,224,500 77.4 % 146.3 %
Lat. Amerika 592,556,972 18,068,919 204,689,836 34.5 % 1,032.8 %
Australia/Oceania 34,700,201 7,620,480 21,263,990 61.3 % 179.0 %
UKUPNO 6,845,609,960 360,985,492 1,966,514,816 28.7 % 444.8 %
(Izvor: Internetworldstats.com, 2010 )
Sukladno svijetskim tendencijama, broj korisnika Interneta u Hrvatskoj je u konstantnom
rastu. Hrvati najvie koriste Internet za komunikaciju e- potom, itanje novina i magazina
te pronalaenje informacija o proizvodima i uslugama. U porastu je i upotreba Interneta za
informacije o putovanjima, traenje posla, informacija o zdravlju, edukacija, download
igara, filmova i muzike, a u zadnje vrijeme najvie raste broj korisnika socijalnih mrea
(Facebook, Twitter, ). Po dobnoj skupini, najvie ima mladih i to do 24 godine.
Za nain pristupa najvie ima onih koji koriste irokopojasni pristup (ADSL linija).
Grafikon 1: Svrha koritenja Interneta u Hrvatskoj u 2009. godini
(Izvor: Izradio autor prema podacima Gfk [URL: www.gfk.hr], preuzeto 13.08.2010.)
7
2.3. WEB NAJVANIJA USLUGA INTERNETA
Puno ljudi u svakodnevnom govoru koristi termin Internet i Web kao sinonime, ali oni to
svakako nisu. Internet i Web su dva sasvim razliita, ali usko povezana termina.
Dok je Internet mrea nad mreama i predstavlja infrastrukturu koja je temelj za
funkcioniranje razliitih servisa, Web je nain kako koristiti informacije preko te
infrastrukture (Webopedija.com, 2010). To je u biti model za razmjenu informacija koji se
temelji na Internetu. Uz Web, postoje i drugi servisi koji isto tako omoguuju razmjenu
informacija, ali koristei druga pravila (protokole) i neke druge aplikacije specijalizirane za
tu vrstu usluge.
Informacije koje Web servisira prikazuju se u obliku HTML dokumenata. HTML je kratica
za HyperTekst Markup Language, to znai prezentacijski jezik za kreiranje web stranica
(Wikipedija.com, 2010). Kako bi se dokument pogodan za Web servis mogao oblikovati,
napravljen je HTML standard. Taj format omoguuje da se na istu stranicu integriraju razni
elementi koji olakavaju prezentaciju eljenog sadraja. Danas HTML standard omoguava
integraciju teksta, tablica, fotografija, zvuka i video materijala. No to nije uvijek bilo tako.
Danas koristimo standard XHTML 1.0. Od poetka devedesetih do danas HTM standard je
doivljavao promjene i sve veu funkcionalnost.
1992. HTML 1.0. - osnovna funkcionalnost sa tekstom i hiperlinkovima.
1994. HTML 2.0. - ograniena nadogradnja na prethodnu verziju sa dodavanjem
mogunosti prezentiranja fotografija i formatiranja online interaktivnih obrazaca.
1994. HTML 3.0 - dodana mogunost tablica. Tvrtke koje proizvode web
pretraivae poinju dodavati svoje vlastite mogunosti i poinje se naruavati
standard to oteava rad web developerima i meusobnu kompatibilnost.
1996. HTML 3.2 W3C konzorcij preuzima ulogu HTML regulatora i standardizira
HTML specifikaciju koju bi trebali potivati svi online pretraivai.
1997. HTML 4.0 standardizirana verzija specifikacije uz brojna funkcionalna
poboljanja u smjeru internacionalizacije i kaskadnih stilova.
2000. XHTML 1.0 ne predstavlja velike novosti u smjeru funkcionalnosti, ve
inzistira na striktnom potivanju jednoznanih standarda po uzoru na logiku XML
specifikacije.
Osim HTML standarda i njegove evolucije, bitno je ukratko elaborirati kako web servis
funkcionira. Laikim pristupom reeno, korisnik upie adresu u web pretraiva (npr.
8
www.efri.hr) i pritisne tipku enter. Nakon sekunde ili dvije, otvori mu se poetna stranica
Ekonomskog fakulteta u Rijeci. Drugi najei pristup je pomou trailica. Korisnik u
Google trailicu upie termin Ekonomski fakultet u Rijeci i na prvom mjestu mu se
prikae link pomou kojeg dolazi na istu destinaciju. Tehniki gledano, to se ovdje deava
u pozadini? Na kojem modelu se temelji takva usluga? Rije je o klijent posluitelj
modelu. Klijent-posluitelj model je distribuirana aplikacijska struktura koja odvaja zadae
ili optereenja izmeu davatelja usluge, zvanog posluitelj ili server i primatelja usluge,
zvanog klijent. esto klijenti i serveri komuniciraju preko raunalne mree na razliitim
ureajima, ali klijent i server se mogu nalaziti u istom sistemu. Server slui kao domain
koji obavlja jednu ili vie posluiteljskih programa koji dijele svoje resurse sa klijentima.
S druge strane, klijent ne dijeli nikakve resurse ve samo zahtijeva od posluitelja sadraj ili
odreeni servis (Reese, 1997).
Slika 1: Klijent-posluitelj model
(Izvor: izradio autor)
Kako bi gore spomenuti model mogao nesmetano raditi potreban je neki sistem adresiranja
klijenata i posluitelja kako bi posluitelj znao kojem klijentu treba to isporuiti. Kad ne bi
bilo tog sistema, klijent bi mogao poslati jedan zahtjev prema posluitelju, a moda bi
mogao dobiti neto to uope nije traio. Sistem adresiranja raunala, servisa ili bilo kojeg
resursa zove se DNS sistem (Domain Name System). esto koritena analogija za lake
shvaanje DNS sistema je princip rada telefonskog imenika. Kada se telefonom treba dobiti
osobu A, pogleda se u telefonski imenik prezime te osobe te se na taj nain dobije njen broj
telefona, nakon ega se osobu moe telefonski nazvati. Na istom principu funkcionira i DNS
sustav. Ako se eli web stranice Ekonomskog fakulteta u Rijeci, DNS sustav potrai IP
9
adresu na temelju web adrese i uputi se zahtjev tono tom posluitelju. Zajedno sa
zahtjevom za poetnom stranicom fakulteta, alje se i IP adresa klijenta kako bi posluitelj
znao kome tono vratiti odgovor. DNS sustav slui kako bi omoguio korisnicima da ne
pamte fizike IP adrese pojedinog posluitelja kojem trebaju poslati zahtjev ve je dovoljno
znati itljiv naziv domene (npr. www.efri.hr).
Svako raunalo koje je spojeno na Internet dobiva svoju jedinstvenu adresu IP adresu.
To je niz od etiri troznamenkasta broja odvojena tokom. Primjer jedne IP adrese je
174.121.14.165. DNS sustav povezuje tu IP adresu sa domenom www.index.hr te tako
korisnici ne trebaju pamtiti ove sloene kombinacije brojeva kad ele proitati dnevne
novosti tog portala. Bitno je istaknuti da posluitelji moraju imati statine odnosno stalne IP
adrese. Klijenti, s druge strane, obino imaju promjenjive IP adrese. Na primjer, T-com u
Hrvatskoj svakih 24 sata mijenja IP adresu svakog korisnika koji se spaja preko njihove
MaxADSL usluge.
Pojedini elementi globalnog informacijskog prostora, npr. pojedini web posluitelji,
pojedina raunala ili pojedine osobe prepoznatljivi su na Internetu po svojem nazivu (npr.
www.carnet.hr) ili elektronikoj adresi (npr. [email protected]). Kljuni dio svakog
takvog naziva ili adrese uvijek ini Internet domena, npr. carnet.hr (CARNet, 2001). Svaka
unikatna domena sastoji se od jednog ili vie dijelova koji su meusobno odvojeni tokom.
Uzeti e se za primjer domena knjinica.efri.hr.
1. Krajnji desni dio oznake hr koji se naziva top-level-domena i predstavlja nacionalnu
vrnu domenu. Svaka zemlja ima svoju vrnu nacionalnu domenu. Osim toga postoje
i meunarodne komercijalne domene od kojih je najpoznatija com domena.
2. Tipina domena je u biti subdomena vrne domene i nalazi se lijevo od nje. U naem
sluaju to je efri.
3. Ukoliko postoji potreba, Ekonomski fakultet Rijeka moe kreirati i svoju
poddomenu - knjinica.efri.hr i slino. Takva hijerarhija moe ii do 127 nivoa od
ega svaka daljnja lijeva oznaka ne moe imati vie od 63 ASCII znaka. Ukupno,
domena ne moe imati vie od 253 znaka dok neki registrari koji upravljaju
domenama mogu biti i restriktivniji oko duine domene koju odobravaju.
Pravo na dobivanje odreene domena povjereno je ustanovama zvanim registrarima domena
(eng. domain name registrars). Registrari moraju biti odobreni od strane Internet
10
Corporation for Assigned Names and Numbers (ICAAN). Za nacionalne vrne domene
uvijek postoji vrna institucija koja administrira tom domenom. U Hrvatskoj ta institucija je
CARNet koja definira pravilnik po kojem se ureuju pravila dodjeljivanja hr domene.
Veina domena koje se koriste za web servis poinju sa www zbog prakse da se posluitelje
naziva po servisu kojeg pruaju. Posluitelji za Web servis imaju www oznaku, posluitelji
za FTP servis imaju ftp oznaku itd. Ovisno kako je podeen posluitelj, domena sa i bez
www oznake moe isto ili razliito funkcionirati. Veina web servera je podeena da radi na
oba naina. Paralelno s tim, neki web preglednici su podeeni da sami nadodaju www
oznaku na poetku web adrese, ako ona nije eksplicitno navedena.
Uz HTML dokumente koji su fiziki nosioci podataka, DNS sustav koji regulira promet tih
podataka, trei nuan element Web-a su web pretraivai bez kojih usluge Weba ne bi bile
mogue. Web pretraiva je softwerska aplikacija koja slui slanju, primanju i prezentaciji
informacija koje posluitelj poalje. Informacijski izvori se identificiraju sa unificiranim
identifikatorom izvora (engl. Uniform Resource Identifier ili skraeno URI) i mogu biti
stranice, fotografije, video ili druga vrsta sadraja ( Jasobs & Walls, 2009). Upravo pomou
URI-a mogue je jednoznano adresirati bilo koju vrstu datoteke i otvoriti je pomou web
pretraivaa. Meusobno povezivanje vie dokumenata mogue je klikom mia na onaj
element koji predstavlja hipervezu i povezuje se na drugi dokument.
S vremenom je zapoet rat meu proizvoaima koji su uvodili vlastite standarde u nainu
prikazivanja i interpretiranja HTML pravila. Danas se svi vei proizvoai dre HTML i
XHTML standarda te tako omoguuju skoro identino renderiranje prikaza HTML
dokumenata. Vaniji podaci danas najkoritenijih web pretraivaa prikazani su u tablici.
Tablica 2: Usporedba danas vodeih Web pretraivaa, 2010
Pretraiva Proizvoa Trenutna verzija
Udio na tritu Podrani operativni sustavi
Internet Explorer Microsoft 8.0 52,68% Windows
Firefox Mozilla 3.6 30,69% Windows, Mac OS, Linux
Chrome Google 6.0 9,80% Windows, Mac OS, Linux
Safari Apple 5.0 5,09% Windows, Mac OS
Opera Opera software ASA 10.6 1,91% Windows, Mac OS, Linux
(Izvor: izradio autor prema podacima www.en.wikipedia.org [URL: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers ])
11
Broj korisnika Web usluga i njihovo vrijeme provedeno surfajui, konstatano raste u
cijelom svijetu. S druge strane, veliki broj web stranica i web aplikacija sve vie uvjetuje
registraciju prilikom koje se daje vei ili manji broj osobnih podataka. Takve baze podataka
koje broje na stotine tisua, nekad i milijune korisnika, predstavljaju veliku vrijednost u
svijetu marketinga. Postoje opravdane sumnje kako neki web servisi ustupaju baze podataka
svojih korisnika drugim korporacijama uz velike naknade. Problem privatnosti dolazi do
izraaja i kod zapisa koji ostaju memorirani na web pretraivaima. Ukoliko korisnik
iskljuivo koristi samo svoje raunalo to i nije neki problem, no ukoliko vie osoba koristi
isto raunalo, ovaj problem dolazi do izraaja. Moderni web pretraivai su doskoili tome
izradom posebnih tzv. Private mode naina pretraivanja. Na taj nain, gaenjem
pretraivaa, svi podaci o njegovu koritenju (na kojim stranicama je bio, to je tamo gledao
i to je upisivao) se automatski briu.
S aspekta sigurnosti potrebno je istaknuti i prijetnju zlonamjernog skeniranja prometa.
Kada klijent ili posluitelj meusobno komuniciraju i alju jedan drugome podatke, uz
nezatieni promet, isti se moe bez veih problema presresti i proitati. Kod online
plaanja i slanja ostalih slinih podataka to predstavlja ozbiljnu prijetnju. U tom sluaju
postoje dvije razine zatite koje su se pokazale vrlo uspjene, a to su kriptiranje prometa
preko HTTPS protokola i koritenje SSL certifikata. Promet osjetljivog sadraja trebao bi
svakako koristiti ove metode zatite. Svaka ozbiljnija web trgovina takve mjere ve i koristi.
Uz privatnost i sigurnost kod Web-a se insistira i na jo jednoj karakteristici, a to je
pristupanost (eng. accessibility). Princip pristupanosti se odnosi na praksu omoguavanja
koritenja Web usluga bez obzira na fizike i mentalne sposobnosti korisnika.
Kada su web stranice i web aplikacije dobro dizajnirane, implementirane i ureene svi ili
gotovo svi korisnici e imati jednaku priliku koritenja sadraja i funkcionalnosti.
Osim za vrijeme izrade sadraja, istom problemu idu u susret i web pretraivai sa svojim
dodatnim mogunostima u smjeru pristupanosti. Tako na primjer, ako web stranice imaju
premaleni font, sam pretraiva ima mogunost poveavanja fonta kako bi osobe sa slabijim
vidom ipak mogle itati takav sadraj. Osniva Web-a Tem Berners-Lee jednom je istaknuo
kako je snaga Web-a u njegovoj univerzalnosti. Dostupnost i iskoristivost Web-a od strane
svakoga bez obzira na njegove mogunosti je jedna od najvanijih karakteristika tog medija
(W3C, n.d.).
12
2.4. UTJECAJ WEB-A NA DANANJEG OVJEKA
U toki 2.2. ovog rada prezentirani su podaci i statistika koja govori kako gotovo dvije
milijarde ljudi na svijetu koristi Internet. Velika veina njih Internet koristi na dnevnoj bazi
te sve vie vremena troe na konzumiranje usluga koje Internet, posebice web servis,
omoguuje. Takva, relativno nova pojava u ivotu ljudi izaziva viestruke efekte koje
strunjaci raznih znanstvenih podruja pokuavaju prouavati i interpretirati.
S neuropsiholokog aspekta znanstvenici govore kako koritenje Interneta uzrokuje
prilagodbe mozga koje omoguuju bolje filtriranje mnotva dostupnih informacija te lake
donoenje brzih odluka. Na taj nain ta tehnologija moe uvelike ubrzati uenje i poveati
osobnu kreativnost. Neka istraivanja govore kako iskusni korisnici Interneta imaju
dvostruko veu aktivnost u podrujima mozga koja su odgovorna za donoenje odluka i
kompleksnije prosuivanje. Tako se za starije osobe preporuuje surfanje Web-om, umjesto
da se puno vremena troi na pasivno gledanje televizora.
U zadnje vrijeme jaa i socijalni utjecaj Web-a na obinog ovjeka. Raniji je Internet bio
poput dananje televizije, uglavnom jednostran te je postojala jasna crta izmeu onih koji
publiciraju informacije i onih koji informacije konzumiraju. Glavna karakteristika novije
generacije Web-a, za koji se esto koristi naziv Web 2.0, je micanje te granice izmeu
njih i nas. Sve vie maha uzimaju oni sadraji i servisi gdje su autori i korisnici
informacija meusobno isprepleteni. Noviji formati web stranica kao to su blog i forum ne
vre razliku izmeu urednika i itatelja. Svi su ravnopravni i svatko se moe izraziti na
slobodan, besplatan i jednostavan nain. ak i velike medijske kue sve vie integriraju
socijalne alate u svoja online izdanja pa tako danas skoro da i ne moemo nai vei portal
koji ne omoguava komentiranje svakog lanka koji je na portalu publiciran. Danas, najvea
imena na Web-u prikazuju sadraj iji su autori iskljuivo posjetioci, a ne zaposleni urednici
neke medijske kue koji bi taj sadraj trebali pisati. Primjer takvog web sjedita je
YouTube.com koji omoguava posjetiocima da samostalno publiciraju svoj video uradak i
omogue posjetiocima irom svijeta da taj uradak pogledaju, komentiraju, oznae ga da im
se svia itd. Osim spomenutog portala slinu popularnost su doivjeli i slini servisi poput
Flicker.com (dijeljenje fotografija), Scribid.com (dijeljenje dokumenata) i drugi. Sve
navedeno uvelike omoguava prosjenom korisniku da komunicira, identificira se sa
odreenim sadrajima, istrauje i aktivno se ukljui u odreenu socijalnu sferu sukladno
13
njegovom interesu. Zadnje dvije godine najveu popularnost su dobile takozvane socijalne
mree. Najpoznatija meu njima je Facebook.com. Neki korisnici Web poistovjeuju sa
Facebook-om i razlika izmeu toga im nije previe jasna. Podijeliti svoja iskustva,
fotografije, diskutirati o nekoj temi, grupno se ukljuiti u odreenu kampanju i stvoriti
respektabilno javno mijenje o nekoj drutvenoj temi danas predstavlja vanu mo koja je
dokazala da moe ozbiljno utjecati i na politike reime neke drave te jaati informiranost i
demokraciju nekog drutva.
Internet je sa svojim mogunostima utjecao i na nain uenja. Nakon dostupnosti Internet
mree i funkcionalnosti koje je Web omoguavao, krajem prolog desetljea termin e-
learning ili e-uenje se sve ee poeo spominjati. Uenje na daljinu, kako ga se esto
nazivamo, ima nekoliko oitih prednosti:
Poveani pristup vrsni strunjaci pojedinog podruja dostupni su globalnom
auditoriju koji ele uiti sadraj njihova podruja.
Prilagodljivost i fleksibilnost za polaznika jer su izvori najee dostupni po
principu 24x7 te omoguavaju polazniku veliku prilagodbu.
Razvoj dodatnih vjetina sam proces e-uenja trai od korisnika savladavanje
stanovitih tehniko-edukativnih vjetina koji uvelike pomau ueniku u kasnijem
traenju i obavljanju svog posla.
Vie od svega, Web je promijenio nain dananjeg poslovanja. Neki vaniji elementi
poslovanja na koje je ova revolucija utjecala su sljedei:
brzina i niski trokovi komunikacije,
komuniciranje sa globalnim tritem gotovo bez teritorijalnog ogranienja,
mogunost direktne prodaje dobara i usluga preko online trgovine,
mogunost rada od kue za veliki broj zaposlenika.
14
3 . OSNOVNA OBILJEJA WEB KORISNIKOG
SUELJA
3.1. OPENITO O KORISNIKOM SUELJU
Korisniko suelje ini prostor izmeu ovjeka i stroja. Bilo da je rijei o industrijskom
stroju, kuanskom aparatu, automobilu ili raunalnom programu, korisnikom suelju je cilj
efikasno koritenje i kontrola objekta s kojim korisnik radi, kao i povratna informacija koju
korisnik dobiva od tog objekta. Discipline usko povezane sa kreiranjem i testiranjem
korisnikog suelja su ergonomija i psihologija. Glavni elementi komunikacije su:
ulaz koji omoguava korisniku da upravlja svojim objektom i daje mu naredbe i
izlaz koji omoguava prikazivanje efekta korisnikova rada od strane tog objekta.
Objekt koji je predmet ovjekova upravljanja, moemo kategorizirati u dvije skupine;
hardware i software. Ova zadnja kategorija zauzima posebno mjesto u novije vrijeme s
obzirom na konstantno poveanje koritenja elektronikih ureaja koji imaju upravljake
programe kojima ovjek moe upravljati. Najpoznatiji primjeri takvih ureaja su osobno
raunalo, mobilni telefoni, GPS ureaji, putna raunala u automobilima i brojni drugi.
U svijetu raunala najee se spominju dvije grupe suelja (Wikipedia.org, 2010):
grafika korisnika suelja (Graphical User Interface GUI) omoguavaju
ulazne naredbe preko tastature i mia te svoj izlaz realiziraju preko grafikog prikaza
na monitoru. Pretea ovog tipa suelja je komandni redak koji je omoguavao ulaz
iskljuivo preko tastature i izlaz u obliku obinog teksta. Upravo je komercijalizacija
GUI suelja unijela revoluciju u koritenju osobnih raunala kad je tvrtka Apple
proizvela svoj prvi operativni sustav s takvim sueljem.
web bazirana korisnika suelja ili web korisnika suelja slino kao i kod gornjeg sluaja samo to je izlaz uvijek manifestiran u obliku web stranice . Taj izlaz
moe biti manifestiran na klasian nain, a to je ponovno uitavanje stranice ili
putem modernijih tehnologija koje omoguavaju asinkronu komunikaciju korisnika i
korisnikog suelja.
15
3.2. WEB STRANICE
3.2.1. Osnovne karakteristike web stranica
Uzevi u obzir temu ovog rada kao i injenicu da termini poput web stranice, web sjedite
(engl. website) i web aplikacija veini ljudi esto slue kao sinonimi, potrebno je definirati
ove pojmove s obzirom da svaki od njih ima svoje posebno znaenje i nalazi se u nekom
odnosu prema ostalim terminima.
Web stranica je HTML dokument koji omoguava prezentaciju informacija u razliitim
oblicima kao to je tekst, fotografija, video ili zvuk. Svaka web stranica je dostupna preko
svoje jedinstvene web adrese. Primjer web adrese jedne web stranice koja prezentira
informacije o pristupu Internetu u Hrvatskoj je http://www.carnet.hr/pristup_internetu.
Do web stranice se moe doi unoenjem njene tone adrese direktno u traku za adresu u
nekom web pretraivau ili pomou hiperlinkova na nekim drugim stranicama koji pozivaju
tu web adresu. Ti hiperlinkovi mogu biti na nekoj web stranici istog web mjesta ili nekog
drugog web mjesta.
Web mjesto je kolekcija web stranica. Web stranica je dio web mjesta. Jedno web mjesto
moe imati samo jednu ili nekoliko tisua web stranica. Web adresa web mjesta je obino
ista web domena, npr www.carnet.hr. Ta domena otvara prvu web stranicu tog web mjesta.
Razlika web stranice i web mjesta izraena je u fizikom odnosu cjeline i njegova djela.
Razlika izmeu web stranica2 i web aplikacija lei u funkcionalnoj razlici. Web stranice su
kolekcija dokumenata koji sadre statian sadraj, slike i video sa ogranienom ili nikakvom
funkcionalnou. Primarna uloga web stranica je da informira korisnike. S druge strane, web
aplikacije su dinamini i interaktivni sistemi koji omoguuju korisniku izvravanje
odreenih poslova. Znai glavna uloga web stranica je pruanje informacija dok je primarna
uloga web aplikacija omoguavanje funkcionalnosti svojim korisnicima. Web adresa
tipinih web stranica je www.pbz.hr dok je net.pbz.hr/pbz365/ web adresa tipine web
aplikacije koja omoguava internet bankarstvo Privredne banke Zagreb.
2 Na Hrvatskom jeziku se zadrao termin web stranice umjesto web mjesta. Iz tog razloga u nastavku ovog rada e se koristiti termin web stranice kao mnoina, a podrazumjevati e se web mjesto (eng. website)
16
Vrstom sadraja, ciljanom publikom i svojom funkcionalnou razvile su se razliite vrste
web stranica koje bi se mogle podijeliti u sljedee tipove (Rocketface.com, n.d.):
1. Komercijalno prezentacijske web stranice u komercijalnom sektoru, ovaj tip
stranica je najei. Stranice mogu imati osnovni sadraj o svojoj djelatnosti i ponudi
a mogu prezentirati i kompletan katalog svojih proizvoda i usluga.
2. Komercijalno transakcijske web stranice prvenstvena svrha ovog tipa web
stranica je prodaja proizvoda ili usluga. Osim kvalitetne prezentacije proizvoda,
omoguena je kupnja procesom stavljanja proizvoda u virtualnu koaricu i njegovo
plaanje klasinim nainima (bankarski nalog ili pouzee) ili putem kreditne kartice.
Najpoznatiji primjer ovakvog tipa web stranica je www.amazon.com.
3. Osobne web stranice - svrha ovog tipa je pruanje informacija o pojedincu ili
manjoj grupi ljudi (obitelj ili slino). Sadraj je veinom predmet interesa vlasnika
kao na primjer njegov hobi. Auriranje i administriranje stranice je preputeno
vlasniku. Tipian primjer osobne web stranice je http://www.jakubkrcmar.cz.
4. Web stranice organizacija slui prezentiranju i zagovaranju zajednikog
miljenja o nekoj temi ili nekom podruju. Na ovakvim stranicama se nalaze
korisnici slinih razmiljanja o istoj temi. Osim iste prezentacije sadraja, ove
stranice esto imaju mogunost interakcije njihovih korisnika. Interakcija se obino
postie pomou foruma i chata. Primjer je www.suza.hr.
5. Edukacijske web stranice glavni fokus sadraja ovih stranica bi trebao biti
edukativnog karaktera. Naglasak je na kvaliteti edukacijskog sadraja, a ne na
njegovoj koliini ili na estetskom dojmu stranica. Primjer je www.w3schools.com.
6. Zabavne web stranice prvenstvena svrha ovih web stranica je zabavljanje
korisnika prilikom koritenja. Sporije uitavanje stranice, nekonvencionalni pristup
izgledu i navigaciji kroz ove stranice je prihvatljivo. Primjer je gamebox.net.hr.
7. Informacijske web stranice esti termin koji se koristi za ovaj tip web stranica je
web portal. Svrha je omoguiti korisniku veliku koliinu aktualnog sadraja
grupiranog u neke okvirne teme. Ove web stranice mogu biti opeg tipa, npr.
www.index.hr ili se mogu temeljiti na nekoj temi kao npr. www.zdravakrava.hr.
8. Blog veliku popularnost zadnjih est-sedam godina doivio je uptavo ovaj tip web
stranica. Naglasak je na aurnom publiciranju vlastitog sadraja autora s
mogunou javnog komentiranja svakog lanka. Primjer je www.blog.hr.
9. Hibridne web stranice predstavljaju kombinaciju gore navedenih glavnih tipova.
17
Tone kriterije po kojima bi se mjerila i ocjenjivala kvaliteta web stranica je vrlo teko
utvrditi. Neke od njih bi mogle biti sljedee: (Panian, 1999):
stranice se trebaju brzo uitavati,
stranice trebaju biti to manje veliine mjereno u kilobajtima,
tablice i okvire koji se upotrebljavaju za izgled stranica treba upotrebljavati prema
nekim pravilima,
izbjegavati slijepe stranice,
poveati preglednost,
izbjegavati pretjeranu upotrebu slika i animacija ako nisu relevantna za sadraj,
stranice treba testirati u svim veim pretraivaima,
odgoditi registraciju korisnika,
interaktivne obrasce treba uiniti to jednostavnijima,
omoguiti dostupnost stranica bez obzira na sistem njegova auriranja.
Profesorica Marina iin-ain govori o sljedeih pet kriterija:Tablica 3: Kriterij za procjenu kvalitete web stranica
Kriteriji Pitanja za laku procjenu
Tonost Tko je napravio taj dokument? Moe li se kontaktirati autora? Usporediti sadraj s drugim izvorima. Moe li se pronai greke na prvi pogled? Gdje je dokument objavljen?
Autoriziranost Da li je autor kvalificiran za davanje tih informacija? Da li je autor strunjak na tom podruju? Da li je dokument pristran? Koja je svrha dokumenta?
Objektivnost Da li je informacija miljenje ili injenica? Da li stranica ima poveznice na srodne stranice? Da li srodna stranica ima poveznicu na ovu stranicu Da li je sadraj rasistiki, nacionalistiki ili seksistiki?
Vaenje Da li je informacija datirana? Da li je informacija objavljena? Koliko je stara informacija? Da li poveznica upuuje na postojeu stranicu?
Dostupnost Da li je vrijeme odaziva brzo? Da li je stranica dosljedna? Da li se lako kretati stranicom? Da li se moe pristupiti stranici za raznih pretraivaa? Da li se potrebno registrirati? Da li je slobodna ili se plaa?
(Izvor: iin-ain, 2003)
18
Bez obzira na prije navedene tipove stranica, svima je zajedniki cilj privui to veu panju
odnosno to veu posjeenost. Nain na koji korisnici mogu doi na neke web stranice su:
direktnim unosom web adrese u web pretraiva,
pomou linka na nekoj drugoj web stranici koji je povezan sa vlasitiom,
pomou web pretraivaa traenjem eljenih web stranica po kljunoj rijei.
Upravo ova zadnja stavka predstavlja sve vei udio naina dolaska posjetioca na eljene
web stranice. Web pretraivai i nain njihova pretraivanja web prostora uzimaju sve veu
panju marketing strunjacima koji ele vei trini udio. Iz to razloga razvila se cijela jedna
disciplina koja se bavi optimizacijom web stranica za bolju poziciju na rezultatima pretrage
Search engine optimizing (SEO). SEO ukljuuje analizu eljenih kljunih rijei i
optimiziranje web stranica za te termine kako bi se postigla vea posjeenost web stranica.
Za rezultat SEO aktivnosti kao i za druge podatke potrebne za analizu posjeenosti slue
razni alati. Danas postoje brojni naini i brojne aplikacije koje mogu vrlo tono mjeriti i
prikazati rezultate posjeenosti stranica. Od brojnih, najvie se istie Google Analytics -
besplatna usluga koju je Google omoguio svojim korisnicima. Za njeno koritenje potrebno
je otvoriti svoj raun na Google-u, postaviti na stranice odreeni kod i usluga je aktivirana.
Podaci mjerenja se prikazuju preko web korisnikog suelja. Mogue je analizirati
posjetioce, pojedinu grupu sadraja kao i izvore sa kojih su doli na stranice.
Slika 2: Prikaz suelja Google Analytics usluge mjerenja posjeenosti web stranica
(Izvor: www.google.com/analytics )
19
3.2.2. Specifinosti korisnikog suelja kod web stranica
Web stranice su namjenjene prvenstveno pretraivanju sadraja te su principi dizajniranja
njihova suelja zbog toga neto drugaiji u odnosu na web aplikacije. Za razliku od
klasinih windows aplikacija, gdje su elementi suelja vrlo standardizirani, na sueljima
web stranica imamo sasvim drugi sluaj. Svaka web stranica eli biti unikatna, ljepa i bolja
od konkurencije. Iz tog razloga neupueni dizajneri znaju napraviti sasvim neproduktivna
suelja, koja nisu previe korisna posjetiocima koji ne znaju gdje traiti neki sadraj, ne
znaju gdje se trenutno nalaze i slino.
Bez obzira na injenicu da nema pravila, mogu se izdvojiti neke cjeline koje ine svako
profesionalno suelje web stranice.
Slika 3: Anatomija tipine web stranice
(Izvor: Bearid, 2007:7)
Glavni blok sadraja svaka web stranica mora imati jedan blok koji povezuje sav
sadraj. To je obino prvi element HTML dokumenta. Kad ne bi bilo ovog elementa,
sadraj bi se rasprostirao po itavoj irini web preglednika to bi naruilo njenu estetsku
dimenziju i preglednost sadraja. Glavni blok moe biti definiran apsolutnom irinom
izraenom u mjernoj jedinici (najee piksel) ili apsolutno u postotku.
20
Logo se preporua pozicionirati u lijevi gornji kut web stranice. Zajedno sa bojama, logo
predstavlja vizualni identitet vlasnika pa je zbog marketinkih razloga bitno da je
konzistentan sa vizualnim identitetom tvrtke. Prema logotipu, posjetioc odmah shvati da li
se nalazi na eljenom mjestu ili ne. Logotip bi cijelo vrijeme trebao biti identian kroz sve
stranice jednog web mjesta. Po praksi i standardima, logo bi trebao biti i link na poetnu
stranicu web mjesta. Uz logo se esto pozicionira i slogan tvrtke koji daje izjavu o tome
ime se tvrtka bavi.
Navigacija su vrata kroz koje se ulazi na ostali sadraj web stranica. Korisnici oekuju
glavnu navigaciju poravnatu horizontalno odmah ispod logotipa ili vertikalno ispod
logotipa. Ako je ikako mogue, glavna navigacija bi trebala biti iznad podruja do kojeg se
dolazi sputanjem mia (skrolling), a to znai unutar gornjih 500-600 piksela stranice.
Ukoliko su web stranice opsene, dolazi do potrebe kreiranja drugog ili ak i treeg nivoa
izbornika. Ima raznih nain za kreiranje podizbornika kao to su padajui izbornici,
sekudarni izbornici horizontalno ispod primarnih, sekundarni izbornici vertikalno u desnoj
ili lijevoj koloni i slino
Slika 4: Primjer organizacije navigacije sa primarnim i sekundarnim izbornicima
(Izvor: http://www.applereviews.com)
Sadraj je najvaniji dio web stranice. Posjetioc dolazi na stranicu da bi proitao ono to
je u glavnom sadraju. Ukoliko on nije jasno vidljiv i ukoliko nije jasno to je glavni
sadraj, posjetioc e ugasiti pretraiva ili e otii na drugo web mjesto gdje moe nai ono
to ga interesira. Poeljno je da sadraj ima jasno istaknuti naslov, ispisan veim fontom,
ispod kojeg dolazi sadraj u obliku teksta, fotografija i videa.
Podnoje nalazi se na dnu stranice. To je uobiajeno mjesto za izjavu prava o koritenju
sadraja i za kontakt podatke tvrtke. Trenutno je trend ponavljanja glavnih ili svih linkova i
u podnoju. Na taj nain se omouvaa posjetiocu da prilikom zavretka itanja sadraja
trenutne stranice odmah ima mogunost prelasna na neku drugu. U pogledu dizajna,
21
podnoje treba jasno sugerirati da je to mjesto zavretka glavnog sadraja, a to se postie
drugom bojom, horizontalnom crtom ili nekom drugom tehnikom.
Slika 5: Primjer podnoja koji sadri kompletnu navigaciju web stranica
(Izvor: http://www.productivedreams.com)
Prazan prostor je vrlo vaan isto kao i svi gore navedeni elementi. Web stranica mora
imati praznog mjesti, reklo bi se da die, a ne da je svaki njen centimetar popunjen
tekstom, fotografijama, tablicama ili drugim sadrajem. Prazan prostor daje dizajnu
prozranost i preglednost, a time i veu ugodu posjetiocu koji ita sadraj.
Ovisno o kojem tipu web stranice je rije ili kojem se tipu i koliini sadraja radi, raspored
elemenata e biti drugaije organiziran. Osnovnim stranicama je dovoljna jedna kolona gdje
su na vrhu izbornici , a ispod sadraj. Poveavanjem razine navigacije, izdvajanjem liste
nekog tipa sadraja (npr. novosti, povezane vijesti, blog postovi i sl.), prikazivanje banera i
ostalih elemenata, ukazuje se potreba za sloenijom organizacijom.
Slika 6: Tipini primjeri organizacije sadraja web stranica
(Izvor: izradio autor)
22
3.3. WEB APLIKACIJE
3.3.1. Relevantne znaajke web aplikacija
Kao to je ranije spomenuto, web aplikacije imaju naglasak na funkcionalnost.
One su interaktivni sistemi koji pomau korisnicima da odrade eljene zadae i time
poveaju njihovu produktivnost. Primarna zadaa web aplikacija je odraditi posao koji slui
njihovim korisnicima za obavljanje zadataka, sukladno definiciji poslovnog pravila za koji
je web aplikacija i napravljena.
Dok web stranice trebaju biti to jednostavnije i omoguavati svakome brzo snalaenje i
koritenje, web aplikacije od njihovih korisnika zahtijevaju vei stupanj ukljuenosti i
znanja o sistemu kojeg web aplikacija obrauje. Korisnici rabe web aplikaciju kao alat za
obavljanje kritinih poslovnih zadataka u njihovom svakodnevnom poslu. Ukoliko se
posjetiocima web stranice ne sviaju i ne pruaju informacije na nain i u koliini koju bi
htjeli, oni mogu svoju potrebu, vrlo lako, zadovoljiti na nekoj drugoj web stranici. To nije
sluaj sa web aplikacijama. Ponajvie u sluaju poslovnih web aplikacija, korisnik je
primoran koristiti upravo tu jednu koja mu je na raspolaganju i ne postoji nekoliko drugih
alternativa.
Jedna od vanijih podjela je ona na web aplikacije otvorenog tipa i web aplikacije
zatvorenog tipa. Glavna odlika onih otvorena tipa je da su dostupni svima onima koji
otvore svoj raun kod pruatelja takve usluge. Korisnici mogu slobodno pristupati takvoj
aplikaciji putem web-a kao to to ine i pregledavajui web stranice. Neke od takvih web
aplikacija otvorena tipa su potpuno besplatne dok je za koritenje nekih potrebno platiti
odreeni iznos. U praksi su to vrlo esto mali iznosi koji se plaaju periodino, obino
mjeseno. Kao obraun naplate se obino koristi broj korisnika koji pristupaju preko istog
rauna, broj koritenih serverskih resursa (broj megabajta) ili neka druga jedinica ovisno o
tipu aplikacije. Web aplikacije zatvorena tipa su najee iskljuivo poslovne aplikacije koje
nisu dostupne svima preko javne mree, ve se koriste za interne potrebe neke tvrtke od
strane njihovih zaposenika i eventualno njihovih partnera. Takve aplikacije su esto
dizajnirane i realizirane da zadovolje specifine potrebe odreene tvrtke te se njih radi po
narudbi. Te aplikacije se najee pokreu preko lokalne raunalne mree tvrtke ili preko
njene virtualne privatne mree ukoliko su dijelovi tvrtke dislocirani.
23
S obzirom na naglasak na funkcionalnost koju trebaju odraivati web aplikacije, njihovo
tehnoloko dizajniranje i impementacija zahtijevaju odreeni stupanj sloenosti. Aplikacije
su obino podjeljene u logike slojeve gdje svaki sloj ima svoju dodjeljenu ulogu. Pomalo
zastarjele tradicionalne desktop aplikacije sastoje se od samo jednog sloja koji se odvija na
jednom raunalu. Web aplikacije zahtijevaju vie slojeva koji se odrauju na barem dva
raunala: posluitelju i klijentu. Iako postoje razliite varijante, u praksi se najee nailazi
na web aplikacije koje imaju tri sloja.
Prezentacijski sloj
Odvija se u web pretraivau. Ovdje korisnik vri interakciju sa web aplikacijom; unosi
potrebne podatke i dobija rezultate rada koje sustav odradi. Klasine web aplikacije
zahtijevaju nanovo uitavanje same stranice nakon korisnikove akcije (npr. klik na gumb
Unesi) to zakida kvalitetu korisnikog iskustva zbog vremena koje je potrebno da se
stranica ponovno uita. Novije tehnologije izale su tome u susret i omoguavaju asinhrono
odvijanje procesa to omoguava koritenje web aplikacija na nain kao to je to kod
klasinih stolnih aplikacija. Neke od tih tehnologija su Microsoft Silverlight, Adobe Flex i
Java FX. Tako za koritenje Adobe Flex-a potrebna je instalacija Adobe Flash programa.
Najvie je u praksi zaivjela AJAX tehnologija koja je nezavisan tehnoloki standard i
kompatibilan je sa svim postojeim tehnologijama.
Aplikacijski sloj
Veina funkcionalnog dijela posla odvija se na serverskoj strani web aplikacije, gdje se
koristi neke od brojnih dinaminih web tehnologija, koje omoguuje web server ili
aplikacijski server. Primjeri tehnologja su : PHP, ASP.Net, Python, Ruby on Rails, JSP/Java
i druge. Neke od tih tehnologija su zatvorenog tipa dok su druga rjeenje otvorenog tipa i
odvijaju se na svim platformama odnosno na svim operativnim sustavima.
Sloj baze podataka
Gotovo svaka web aplikacija ima potrebu za trajnim spremanjem vee ili manje koliine
podataka. Spremanjem podataka se bave sustavi zvani kao baze podataka. Baze podataka se
nalaze na strani posluitelja te mogu, ali i ne trebaju fiziki biti na istom posluitelju kao i
aplikacijski sloj web aplikacije. Najpoznatije baze podataka za potrebe web aplikacija su
MySQL, PostgreSQL, SQL server, Oracle itd.
24
Slika 7: FreshBooks web aplikacija za slanje, praenje i evidenciju poslovnih rauna
(Izvor: http://www.freshbooks.com)
Osnovne prednosti koritenja web aplikacija u odnosu na tradicionalna desktop rjeenja su
(Wikipedia.org, 2010):
Web aplikacije ne zahtijevaju kompleksne procedure za njihovo uvoenje u velike
organizacije. Sve to treba je instaliran web pretraiva i pristup mrei.
Nema potrebe za kupovanjem skupih radnih stanica sa visokim performansama rada
budui da se veina sistemskih zahjeva odvija na posluiteljima.
Skupih procedura za auriranje i nadogradnju sustava ovdje nema jer se sve odvija
centralizirano na posluitelju.
Laka integracija sa ostalim uslugama koje se temelje na web tehnologiji kao to je
email servis ili usluge pretraivanja i indeksiranja sadraja te mobilne tehnologije.
Nema ogranienja u koritenju razliitih operativnih sustava budui da svaki od njih
ima web pretraiva koji je jedini uvijet za rad sa web aplikacijama.
Neki vaniji nedostaci web aplikacija:
Web pretraiva mora biti kompatibilan sa zahtjevima web aplikacije.
U sluaju prekida veze izmeu klijenta i posluitelja rad je potpuno onemoguen.
Kompletna ovisnost o centralnom posluiteljskom raunalu.
este nadogradnje i nedovoljno uklanjanje greaka svake verzije.
Tvrtke mogu pratiti kompletan promet i imati uvid to svako radno mjesto radi to u
nekim sluajevima stvara problem privatnosti.
25
3.3.2. Korisniko suelje za potrebe interaktivnosti
Svaka web aplikacija je unikatna i polazna osnova njena kreiranja je funkcija koju treba
zadovoljavati. Web aplikacija koja slui za upravljanje sadrajem web stranica (CMS web
aplikacija) ili webmail aplikacija, slue sasvim razliitim svrhama. Ipak postoje zajedniki
elementi koje takva suelja koriste i dobra praksa njihove upotrebe slui kao osnova za
kreiranje svakog korisnikog suelja.
Web forme su sastavni dio svake web aplikacije. Za sam ulaz u aplikaciju potrebno se
prijaviti preko web forme.Unos podataka se uvijek obavlja preko web forme kroz jedno ili
vie polja za unos. Istraivanja meu korisnicima govore kako nitko ne voli ispunjavati web
forme te je nuno maksimalno ih pojednostaviti i uiniti ih user friendly. Dobra praksa je
postavljanja sustava pomoi koji daje kratke upute to se u koje polje treba upisati. Sustav
povratne informacije je isto tako jako bitan. Poeljno je da on bude interkativan. Ukoliko
korisnik u polje za email adresu unese neto drugo, suelje bi trebalo dati naznaku da je
podatak kriv odmah nakon to se fokus kursora makne iz tog polja. Za validaciju takvih web
formi potrebno je intenzivno korisiti JavaScript mogunosti koje pruaju napredne
mogunosti po pitanju validacija.
Prikaz lista-detalja je integralni dio svake web aplikaciji. Kada je potrebno prikazati
kumulativni prikaz skupa podataka istog tipa, poeljno ih je prikazati u obliku liste sa
najvanijim informacijama tog tipa podatka. Informacije tog zapisa se prikazuju u kolonama
tablice. Na listi su bitne sljedee karakteristike:
sortiranje zapisa po ulaznom ili silaznom kriteriju neke kolone,
filtriranje koliine podataka po odreenim kriterijima,
listanje stranica, budui da se na jednom prikazu nalazi ograniena koliina zapisa.
Poeljno je da listanje bude numerirano s jasnom naznakom na kojoj stranici te liste
se korisnik nalazi u datom trenutku.
Naprednije mogunosti liste su:
grupiranje zapisa po nekom kriteriju,
reorganizacija poretka kolona liste,
mogunost pokretanja akcije nad svim selektiranim zapisima.
Ukoliko lista ne prikazuje sve informacije tog tipa podatka potrebno je omoguiti prikaz
detalja tog zapisa u zasebnoj formi. Prikaz liste i detalja moe biti na istoj stranici ili na
26
dvije stranice ovisno koliko su liste velike, koliko imaju kolona i koja koliina polja postoji
u prikazu detalja.
Radne ploe sastavni su dio svih kvalitetnijih web aplikacija. Radna ploa predstavlja
ulaznu toku u aplikaciju, prikazuje najvanije informacije u obliku tablice ili ee
grafikone i slui kao jedan zbirni pregled svih vanijih podataka u sustavu. Neke web
aplikacije dozvoljavaju prilagodbu u smilsu samostalnog odabira koje podatke korisnik eli
vidjeti na radnoj ploi. Ta prilagodba se radi na razini svakog korisnika.
Slika 8: Prikaz radne ploe web aplikacije Google Analytics
( Izvor: http://www.google.com/analytics )
Izvjetaji posebice poslovne aplikacije zahtijevaju razne izvjetaje koji se moraju
prikazivati na ekranu, ali i prikazati se u obliku prlagoenom za ispis na pisau . Neke tvrtke
koriste vie web aplikacija specijaliziranih za odreene zadatke. Nekada se podaci moraju
izvesti iz jedne aplikacije, odnoso uvesti u drugu aplikaciju to moe biti povezano i sa
izvjetajima.
Kod korisnikog suelja web aplikacija, korisnici su neto drugaijeg profila od korisnika
web stranica. Posjetioci web stranica su obino tamo jednokratno ili vrlo rijetko i provode
na tom suelju nekoliko sekundi do par minuta. Kod web aplikacija to nije sluaj. Neki
korisnici cijelo radno vrijeme imaju otvoreno suelje neke web aplikacije i intenzivno ga
koriste dui vremenski period. Zbog toga dolaze do izraaja i performanse takvih suelja.
AJAX tehnologija se ovdje intenzivno koristi kako bi sprijeila nepotrebno ekanje i
eliminirala potrebu za ponovnim uitavanjem prikaza na suelju.
27
4. PRISTUP RAZVOJU WEB SUELJA U TVRTKI
DOMO PRO
4.1. DJELATNOST I DOSADANJE ISKUSTVO
Tvrtka je u svojih pet godina postojanja prevenstveno bila orjentirana na proizvode i usluge
vezane za vizualnu komunikaciju koristei web tehnologiju. Prvi proizvod je bio Visual
Card koji je bio ponuen prvenstveno turistikom, graevinskom i sektoru posredovanja u
prometu nekretnina. Radi se o zaokruenoj prezentaciji objekta kroz nekoliko naina kao to
su virtualno interaktivno razgledavanje prostora u 360 stupnjeva, klasine fotografije, 3D
prikaz objekta i interaktivna mapa za geografsko pozicioniranje lokacije objekta.
Cilj proizvoda je bio na jedinstven i iskljuivo vizualan nain, omoguiti korisniku
jednostavan i zabavan nain upoznavanja odreenog objekta; hotela, kue za odmor,
nekretnine za kupnju i slino. Visual Card se dostavljao naruiocu na CD mediju te se
postavljao i na web stranice kao multimedijalni dodatak na ve postojee web rjeenje.
Od samih poetaka, paralelno za ovim proizvodom, poelo se raditi na jednostavnijim i
neto sloenijim prezentacijskim web stranicama koje su bile statinog karaktera. U zadnjoj
fazi razvoja poslovanja pristupilo se i razvoju web aplikacija koje su prenstveno sustavi za
upravljanje sadrajem web stranica. Danas tvrtka nudi sljedee usluge:
Konzultantski poslovi vezani za izradu novog ili reorganizaciju postojeeg web
rjeenja, bilo da je rije o web stranicama ili web aplikacijama.
Osmiljavanje, izrada prototipa i implementacija korisnikog suelja.
Prilagoavanje postojeih ili izrada novih web aplikacija i programiranje za web.
Optimizacija web stranica za potrebe bolje pozicioniranosti na web trailicama.
Veina web stranica su klasine prezentacijske naravi koje omoguuju vlasniku prezentaciju
svoje djelatnosti, proizvoda i usluga te omoguuju interakciju putem online formulara za
upit. Moe se rei da je konani cilj ovakvih web stranica ostvarivanje to veeg broja
konverzija to znai pretvoriti posjetioce u kontakte s konanim ciljem realizacije suradnje.
Iako su trenutno u manjini, u konstantnom su porastu zahtjevi za naprednijim web
stranicama u smjeru publiciranja kataloga ponude s mogunou narudbe i online plaanja
28
kreditnim karticama, povezivanje sadraja na socijalne mree, integracija stranica sa
newsletter sustavima i slino. Od web aplikacija najvie se realiziraju one koje omoguuju
samostalno upravljanje sadrajem web stranica. Klijenti danas ele samostalno i aurno
upravljati svojim online marketingom i prodajom, a ne traiti konstantne intervencie od
strane svog dobavljaa. Osim navedene vrste web aplikacija, u ponudi su i newsletter
sustavi za marketing putem elektronike pote i CRM (Customer relationship management)
sustavi za grupno i organizirano upravljanje marketing potencijalnim i postojeim kupcima.
Klijenti su preteno male i srednje velike tvrtke u privatnom sektoru i to najvie iz
djelatnosti turizma i prometa nekretnina. Takvim tvrtkama se omoguuje proizvod i usluga
po sistemu klju u ruke te se svi zahtjevi odrauju u potpunosti; od faze savjetovanja pa
sve do implementacije i odravanja.
Danas ve postoje tvrtke koje su specijalizirane samo za osmiljavanje web korisnikog
suelja. Dakle nije rije o usluzi kompletne realizacije, ve samo o osmiljavanju i dizajnu
suelja web stranica i web aplikacija. Takve tvrtke to obino rade iskljuivo za velike
klijente kod inicijalne izrade novih projekata ili, neto ee, kod analize postojeeg rjeenja
i njihova poboljanja u smjeru estetike i upotrebljivosti. S obzirom na veliinu tipinih
klijenata i njihova budeta, Domo Pro nastoji primjenjivati iste principe kad je rije o
korisnikom suelju te potivati standarde vezane za profesionalnu izradu tog dijela svojih
proizvoda. Uzevi u obzir da, gotovo u pravilu, svaki projekt podrazumijeva rad nad
korisnikim sueljem, lako je zakljuiti kako taj dio posla zahtijeva najvie znanja, iskustva
i vremena u realiziaciji dosadanjih projekata.
Iskustvo je pokazalo da najvanija komponenta gotovo svakog rjeenja je upravo korisniko
suelje. To je toka u kojoj naruioc, ukoliko je zadovoljan, daje zeleno svijetlo projektu
ili ga osporava i trai izmjene. To posebno dolazi do izraaja kod web stranica odnosno
njenih estetskih karakteristika. Ovdje treba posebnu panju i energiju usmjeriti na edukaciju
naruioca na sve aspekte koji su bitni kod web stranica te naglasiti kako nije najvanije
zadovoljiti estetske kriterije samog naruioca, ve napraviti suelje koje e zadovoljiti
prosjenu ciljanu publiku kojoj se eli prezentirati sadraj. Kod web aplikacija sluaj je
neto drugaiji. Estetska komponenta je minimalna. Najvanije je omoguiti intuitivno
snalaenje u procesima kojima se upravlja, kvalitetu validacije sadraja koji se unosi i
smanjiti vrijeme koje je potrebno za obaviti odreeni zadatak.
29
4.2. CMS SUSTAVI I NJIHOVO KORISNIKO SUELJE
Ranije je spomenuto kako Domo Pro u pravilu na svakom projektu izrade web stranica
implementira prateu web aplikaciju za potrebe samostalnog upravljanja sadrajem tih
stranica. Ta vrsta aplikacije se u pravilu naziva Content management system (CMS).
Generalno gledajui, CMS sustavi upravljaju sadrajem kao to su dokumenti, fotografije,
tekstualni podaci i slino. Sustav slui za pohranu, kontrolu, uvid u revizije i publiciranje
sadraja. Takvi sustavi su evoluirali, tako da se danas spominju dvije osnovne kategorije:
Enterprise sustavi upravljanja sadrajem (ECMS),
Web sustavi upravljanja sadrajem (WCMS).
Dok ECMS prvenstveno slui za upravljanje nestrukturiranim podacima nekog poduzea i
namjena je iskljuivo inteterne naravi, WCMS se koristi za pojednostavljivanje publiciranja
sadraja na javnim web stranicama (Wikipedia.org, 2010.). Takvi sustavi omoguuju
odvajanje sadraja, njegova dizajna i procesa publiciranja. Na taj nain, autor sadraja ne
treba imati nikakvo tehniko predznanje da bi mogao upravljati bilo kakvim sadrajem
svojih web stranica.
Iako postoje rjeenja gdje nema razlike u izgledu korisnikog suelju izmeu web stranice i
CMS web aplikacije, postoji snana potreba za razlikovanjem tog dvoje. Razlog tomu su
dva razliita pristupa i potrebe koje imaju korisnici koji s jedne strane informativno gledaju
web stranice za razliku od urednika sadraja koji njime upravlja kroz CMS web aplikaciju.
Slika 9: Razlika suelja javne web stranice (lijevo) i pripadajueg CSM sustava (desno)
(Izvor: izradio autor prema web stranici: http://www.san-rocco.hr)
30
Na temelju viegodinjeg iskustva rada sa korisnicima, dolo se do zakljuka kako su glavni
razlozi izrade zasebnog korisnikog suelja za potrebe CMS aplikacija viestruki.
Navigacija
Urednik sadraja ima drugaiji pristup prilikom konzumiranja sadraja od posjetitelja.
Glavne potrebe su sistematinost, preglednost, mogunost pretrage i opcija za grupnim
radnjama nad vie zapisa istog tipa sadraja. S druge strane, navigacija javnih web stranica
je uvelike orjentirana po sasvim drugim kriterijima, najvie marketing principima.
Raspored sadraja
Slino kao i u sluaju navigacije, organizacija suelja za potrebe CMS korisnika potpuno se
razlikuje od potrebe posjetitelja web stranice. Dok se kod web stranica esto prikazuju
podruja stranice sa oglasnim prostorom, formularima za pretplatu na newsletter,
izdvojenim sadrajima i slino, u CMS sustavima to je potpuno nepotrebno i stvara
konfuziju uredniku sadraja te takvi elementi trebaju biti uklonjeni iz CMS suelja.
Estetski elementi
Web stranice trebaju pratiti vizualni identitet tvrtke. Ukoliko je rije o sadraju vezanom za
zabavu, muziku i djecu, tada e vizualni doivljaj web stranica biti areni, multimedijalni i
nekonvencionalni. Ukoliko takve web stranice imaju CMS sustav, njegovo suelje treba biti
potpuno drugaije i predstavljati maksimalnu jednostavnost i preglednost gdje je sve
podreeno funkcionalnosti i sadraju kojim se upravlja.
Kada je rije o CMS sustavima Domo Pro koristi dvije vrste rjeenja:
Drupal platforma je sustav otvorenog koda kojeg razvija zajednica na razini
cijelog svijeta koja radi na nadogradnjama i podrci prema svim svojim korisnicima.
Taj sustav nije najbolje rjeenje u pogledu korisnikog suelja za krajnjeg korisnika
ve ga je trebalo posebno prilagoditi kako bi zadovoljio kriterije koji su definirani od
strane tvrtke Domo Pro. Suelje je prilagoeno internim standardima te predstavlja
kvalitetno rjeenje koje je mogue u relativno kratko vrijeme implementirati.
Individualna rjeenja po narudbi ukoliko su funkcionalni zahtjevi dosta
sloeniji te je budet klijenata za projekt vei, pristupa se prilagoenom razvoju
cijele web aplikacije kao i cijelog korisnikog suelja koji se prilagoava svrsi te
aplikacije. Primjer takvog rjeenja nalazi se na sljedeoj ilustraciji.
31
Slika 10: Prikaz suelja web aplikacije po narudbi za interno voenje lagera vozila
(Izvor: intranet mrea naruitelja iz Zagreba)
Jedan od najvanijih elemenata kada je rije o web aplikacijama i korisnikom suelju je
sustav pomoi unutar samog suelja. Pomo se odnosi na upute koje korisniku sugeriraju u
koje polje treba neto upisati ukoliko je rije o poetnicima ili manje vjetim korisnicima
raunala. Bitna je i povratna informacija koju sustav daje korisniku nakon to se odradila
neka akcija. Na primjer, nakon to korisnik klikne na potvrdu auriranja sadraja sustav
treba, nakon uspjenog provoenja procesa auriranja podataka u svoju bazu, potvrditi
korisniku porukom kako je radnja uspjeno izvrena. Ukoliko to nije sluaj, treba na vidnom
mjestu istaknuti kako radnja nije odraena i koji je uzrok tome. Drugi esti sluaj je unos
krive email adrese u polje u kojem se to trai. Pomou JavaScripta suelje se moe napraviti
dovoljno pametno da netom nakon krivog unosa korisnik dobije upozorenje da e-mail
adresa nije ispravno upisana. Na taj nain, korisnik stekne odreenu razinu komocije u radu
sa tom aplikacijom to je svakako jedna od vanijih karakteristika dobrog suelja.
Bez obzira na napore oko pojednostavljivanja naina upravljanja i kontekstualne pomoi u
samoj aplikaciji, neposredna edukacija je vrlo bitna. Preko edukacije, korisnik postepeno
stie znanja o upravljanju aplikacijom te na brz i interaktivan nain stjee potrebne vjetine
koje e mu trebati u kasnijem radu. Edukacija se prakticira neposrednim fizikim sastankom
ili pomou telefona i programa za udaljeno pristupanje raunalu korisnika preko Interneta.
32
4.3. SMJERNICE ZA DALJNJI RAZVOJ
Nakon viegodinjeg rada sa web korisnikim sueljima u tvrtki Domo Pro prilino je
logian zakljuak kako e njihova ulaga biti sve znaajnija. Ostale web tehnologije koje su
isto tako sastavni dio svakog web rjeenja, ne doivljavaju bitniju evoluciju. Ako se za
primjer usporedi tehnologija u domeni relacijske baze podataka ili razvoj programskih
jezika, vidi se kako ovi segmenti ne doivljavaju bitnije promjene u kraem vremenskom
razdoblju. U domeni tehnologije korisnikih suelja ubrzana evolucija je prilino oigledna.
Razlog tomu bi mogao biti u sljedeim injenicama:
Sve vea upotreba web stranica i web aplikacija u poslovnoj i socijalnoj domeni
Novi ureaji, poput mobitela, pomou kojih se moe pristupiti Internetu, a koji
predstavljaju nove izazove kako napraviti optimalno korisniko suelje.
Sve vea brzina Interneta koja omoguava nove tehnologije razvoja web suelja.
Potvrena veza izmeu poslovno uspjenih web stranica i aplikacija s jedne strene i
kvalitete njihovog korisnikog suelja s druge strane.
Zbog navedenog, Domo Pro ima cilj daljnje poboljanje kvalitete izrade web korisnikih
suelja web stranica i aplikacija za svoje klijente. Posebno se to odnosi na sljedee stavke:
Konstantno praenje standarda i primjera dobre prakse novih istraivanja i
preporuka vrhunskih strunjaka u ovom podruju ima sve vie. Praenje tih sadraja
na konstantnoj bazi je uvijet za poslovanje na profesionalnoj razini u ovom poslu.
Sve vea upotreba AJAX tehnologije i HTML 5 standarda - te dvije tehnologije
otvaraju neke nove mogunosti kako lake i efikasnije rijeiti neke poznate
probleme. One omoguavaju i neke sasvim nove karakteristike web suelja.
Vea primjena tehnologije otvorenog koda (Open Source) globalne zajednice
koje se okupljaju oko pojedinih rjeenja postaju sve vee i snanije. Web sustavi koji
proizlaze iz takvog pristupa imaju znaajne prednosti u odnosu na zatvorene sustave
iza kojih stoje korporacije poput tvrtki kao to su Microsoft, Oracle i druge.
Praenje rezultata koritenja i njihova analiza posebice se to odnosi na web
stranice i praenje analize njihove posjeenosti te stupnja konverzije u odnosu na
kvalitetu njihova web suelja kakvo je za njih inicijalno napravljeno.
33
5. PROCES RAZVOJA WEB SUELJA
5.1 PROCES I PRINCIP DIZAJNIRANJA WEB KORISNIKOG SUELJA
Kvalitetno suelje se fokusira na korisnika i na njegove radne zadatke. Iako ovo izgleda
prilino oigledno i samo po sebi jasno, puno web developera nije uspjelo zadovoljiti
potrebe svojih korisnika iako je web stranica ili web aplikacija tehniki zadovoljila unapred
definirane ciljeve. Web developeri vole kompleksnost i istraivanje, pritom zaboravljajui
da u konanici korisniko suelje njihova proizvoda mora zadovoljavati ovjeka i olakati
mu koritnjenje tog sustava na maksimalno jednostavan nain.
U nekim sluajevima identifikacija korisnika je prilino oigledna. Ako je rije o naruenoj
poslovnoj web aplikaciji za neku kompaniju, korisnici su njihovi zaposlenici. Ukoliko je
rije o javnim web stranicama ili otvorenoj web aplikaciji stvari nisu tako jednostavne.
Najprije je potrebno od strane web developera shvatiti da oni sami nisu konani korisnici i
ne treba zakljuke temeljiti iskljuivo na njihovu sudu. Korisnici web stranice ili web
aplikacije nisu ni naruitelji. Iako e oni u veoj ili manjoj mjeri utjecati na konaan izgled
suelja, moraju biti svijesni da oni sami nee raditi s tim sueljem i koristiti ga nekoliko sati
dnevno. Najvaniji su konani korisnici te se njih najvie treba uzeti u obzir.
Identifikacija korisnika i njihovih potreba se moe obaviti koristei nekoliko metoda
(Slideshare.net, n.d.)
kontekstualni dizajn kao polazna toka,
metoda posmatranja,
kontekstualni interview,
fokusne grupe.
Metode modeliranja korisnika i njihovih potreba su
kreiranje scenarija,
kreiranje Persona.
Bez obzira na rezultat procesa identifikacije korisnika, jedno je sigurno: mora se uzeti u
obzir iskusni korisnici kao i oni poetnici. Poetnicima se mora omoguiti da se prilagode i
34
upoznaju suelje to je prije i to je bre mogue. Naprednim korisnicima treba omoguiti
da poznate radnje omoguiti obavljaju to efikasnije mogue. Neki strunjaci tome
pristupaju na nain da u biti rade dva korisnika suljelja, ali u mnogim sluajevima je to
bolje izvesti preko jedinstvenog suelja, a pomou raznih tehnika kao to je metoda
stupnjevitog otvaranja.
Postoje razni procesi po kojima se moe realizirati korisniko suelje. Danas
najinteresantniji je Agilni pristup. Njegova glavna prednost je to to se temelji na
konstantnoj interaktivnosti. Svaka interacija se sastoji od svih faza definiranih u tom
procesu. To znai da na kraju prve inteakcije, ve postoji proizvod koji moe biti testiran, a
to je prototip. Proces se moe podjeliti u etiri cjeline: skiciranje, izrada prototipa, testiranje.
Skiciranje
Ovo je jednostavna i vrlo efikasna metoda istraivanja i ilustriranja razliitih ideja s kojima
dizajner poinje svoj rad. Cilj je napraviti rjeenje pomou skiciranja razliith koncepata.
Veina skica e biti vrlo brzo baena u smee, ali to nije nikakav problem budui da
njihovo kreiranje nije ni novano ni vremenski skupo. Upravo ova injenica je ono to
skiciranje ini vrlo monom metodom u ovom procesu. Jednom kad se napravi prava
skica ili barem prava s aspekta autora, moe se pristupiti detaljnijoj analizi i razraivanju
detalja a to znai izrada wireframe-a i kasnije prototipa
Slika 11: Primjer skice za izradu novog web korisnikog suelja
(Izvor: izradio autor)
35
Izrada prototipa
Prototip je konceptualni model koji prikazuje namjeru odnosno ideju dizajna (Warfel,
2009). Nakon skiciranja, sljedei korak je izrada pravog prototipa koji e simulirati
konano korisniko suelje. Prototip moe imati implementirane neke ili sve mogunosti u
smjeru funkcionalnosti koje su planirane za konano rjeenje, ali te funkcije u biti ne rade
nita trajno pozdadinski programski kod ne postoji, kao ni pripadajua baza podataka.
Bitno je da korisnici koji testiraju prototip dobiju dojam kako e se obavljati pojedina
radnja. Na primjer, ukoliko se radi o web aplikaciji koja obavlja kalkulativne zadatke, moe
se omoguiti generini unos podataka i prikaz rezultata kalkulacije.
Ukoliko je rije o pasivnim web stranicama, prototip moe biti u obliku fotografije koja je
rezultat rada u nekom od foto editora kao to je npr. Photoshop. Ako je rije o web
aplikaciji, prototip je bolje napraviti u obliku statinog HTML-a bez pozadinskog
programskog koda. Tada ja samo bitno da se omogui koritenje online formi za potrebe
rada sa podacima ulaz i izlaz rezultata operacije. Ovdje je glavni cilj omoguiti korisniku
to kvalitetniji i realniji uvid u konano rjeenje, kako bi se eventualne greke ili propusti
mogli korigirati. Istovremeno, cilj je to manje resursa potroiti za izradu prototipa budui
da e on doivljavati vee ili manje promjene. Osim to se prototip moe raditi u nekom
foto editoru (npr. Photoshop) ili nekom HTML editoru (npr. Dreamweaver), postoje i
specijalizirani alati za izradu prototipa.
Slika 12: Izrada sloenijeg interaktivnog prototipa pomou specijalne aplikacije Axure
(Izvor : http://www.axure.com/ )
36
Testiranje
Faza koja nikako ne bi trebala biti zanemarena je faza testiranja. To je i najvanija faza u
procesu izrade korisnikog suelja. Ovdje dolazi do upoznavanja krajnjeg korisnika sa
izgledom i mogunostima suelja. Osnovno pravilo, to se testiranja tie, je: testirati treba
od samog poetka i to vrlo esto. Detaljnije o metodama testiranja govoriti e se u
narednim poglavljiva ovog rada.
Uz navedeni proces, bitno je naglasiti i principe dobrog korisnikog suelja kojih bi se
trebalo drati prilikom njegova dizajniranja i implementacije. Slijede najvaniji principi.
Konzistentnost - korisnika suelja bi trebala biti konzistentna kroz sve dijelove rjeenja;
od navigacije preko odabira boje pa sve do vrste odnosno tipa koritene terminologije koja
se nalazi na samom suelju. Ovo se zove interna konzistencija. Ali, korisnika suelja bi
trebala biti konzistentna i unutar iste grupe proizvoda i unutar grupe proizvoda istog
proizvoaa. Najbolji primjer toga su aplikacije Microsoft Office paketa. Svi programi koji
ulaze u ovaj paket imaju korisniko suelje koje je vrlo blisko jedno drugom.
Familijarnost se vrlo esto mjea sa konzistentnou. Bit ovog principa je da elementi
korisnikog suelja ili cijela koncepcija bude bliska standardima koje korisnik ve
prepoznaje i time olakava svoje snalaenje u suelju. Npr. standard je da se klikom na
glavni logo web stranica dolazi na njegovu poetnu stranicu ili da se klikom na link kontakt
dolazi do adrese i broja telefona vlasnika web stranice.
Efikasnost korisnik treba to bre i to lake odraditi aktivnosti za koje web rjeenje slui.
Posebice to dolazi do izraaja kod web aplikacija gdje korisnik vri intenzivnu dvosmjernu
interakciju sa posluiteljem. Za ovaj princip vano je rano identificirati sve radne zadatke
koji e se obavljati preko tog suelja. Efikasnost je mogue unaprijediti i pomou
personalizacije korisnikog suelja ukoliko to suelje omoguava.
Povratne informacije sistem povratne informacije je bitan kod svakog suelja koje
ukljuuje ulaz od strane korisnika. Korisniku treba omoguiti informaciju koja upuuje na
trenutno stanje sistema. Ako je dolo do greke, to treba uoljivo pisati na ekranu. Ukoliko
je unesen krivi podatak, poruka mora biti jasno upuena korisniku. Kad aplikacija obrauje
podatke, i za to joj treba vremena, poruka o trenutnom stanju treba biti javljena korisniku.
37
Estetska strana korisnikog suelja je vrlo vana u konanom iskustvu korisnika i njegovom
zadovoljstvu. Estetika kod web-a je vrlo esto i krivo shvaena te je neki percipiraju kao
najvaniju stvar. Ukoliko je dojam u prvih par sekundi zadovoljavajui web stranica ili
web aplikacija je dobra i suprotno, ukoliko naruitelja rjeenje ne obori s nogu na prvi
pogled potrebno je sve ponoviti. Ovo je potpuno krivi pristup. Web stranice i web
aplikacije nisu umjetnika djela. Da li je cilj web rjeenja da ga se gleda i divi se njegovoj
poetnoj stranici? Prvenstveni cilj svakog web suelja je naglasak na jednostavnosti i
korisnosti te sve to nema veze s tim je potrebno zadrati podalje od njega i suzdrati se od
nepotrebnog kienja i nagomilavanja estetskih detalja koji su sami sebi svrha. Ako vizaulni
elementi ne pomau toj jednostavnosti i korisnosti ne bi trebali biti implementirani.
Estetika web korisnikog suelja moe se podjeliti u nekoliko elemenata (Bearid, 2007):
Raspored i kompozicija - Postoje neki sastavni djelovi web suelja kao to su: logo,
navigacija, glavni sadraj, podnoje i prazan neispunjen prostor. Njihov omjer, organizacija
i raspored su vrlo bitni i uvelike ovise o tipu sadraja koji se prikazuje na tom rjeenju.
Boje - Paleta koritenih boja gotovo uvijek proizlazi iz vizualnog identiteta tvrtke.
Kombinacija boja bi trebala potivati dobru praksu i ne naruavati preglednost sadraja.
Tipine sheme slaganja boja su akromatine, monokromatine, analogne, komplementarne i
triadine. Glavna podjela boja je na tople i hladne boje.
Tipografija - Budui da se suelje veinom sastoji od tekstualnog sadraja - veliina, boja i
tip fonta ini veliku razliku u doivljaju i ugodi koritenja takvog suelja. Fontovi koji se
koriste na web-u moraju biti web-safe fontovi. Dijele se u dvije skupine: serifni i neserifni
fontovi. Za izlaze na ekran se preporua koritenje neserifnih fontova zbog njihove vee
preglednosti.
Fotografije O odluci da li neki foto materijal stavit na web treba se pitati da li je taj
materijal relevantan, da li je interesantan, da li je ugodan. Izvori fotografija mogu biti
izraeni u vlastitoj reiji, kupljeni na Internetu ili narueni od profesionalnog fotografa.
Teksture Predstavljaju sve ostale grafike elemente i uzorke koji se koriste u estetici
suelja; tokice, linije, okvire, krivulje itd. esto se isti koriste kao pozadinski elementi.
Njihovom kombinacijom, veliinom i odnosom, mogu se efikasno naglasiti eljeni elementi.
38
5.2. TEHNOLOGIJE ZA IMPLEMENTACIJU
5.2.1. HTML
HTML (Hyper Text Markup Language) je jezik za opisivanje web stranica
(W3schools.com, n.d.). Za razliku od mnogih tumaenja, HTML nije programski jezik,
nego jezik za oznaavanje (markup). To znai da se sastoji od kolekcije oznaka zvanih
tagovi pomou kojih se omoguuje definiranje prikaza sadraja na samoj stranici. Ve je
reeno kako je web stranica i HTML dokument ista stvar. Zadnji izraz je vie tehniki i
naglaava HTML tehnologiju koja je osnova za izradu web stranice.
HTML tagovi su kljune rijei okruene sa znakovima kao to je npr. tag .
Tagovi veinom dolaze u paru pa se tako govori o otvaranju taga i zatvara