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. ivan.horvat@carnet.hr). 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