Franko Anticevic - Dizajn Web Stranice

  • View
    290

  • Download
    7

Embed Size (px)

DESCRIPTION

Dizajn web stranice

Text of Franko Anticevic - Dizajn Web Stranice

  • 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