SVEUILITE U ZAGREBU

GRAFIKI FAKULTET

MARKO AI

RAZVOJ NAPREDNIH KORISNIKIH

SUELJA U WEB 2.0 OKRUENJU

DIPLOMSKI RAD

Zagreb, 2012

MARKO AI

RAZVOJ NAPREDNIH KORISNIKIH

SUELJA U WEB 2.0 OKRUENJU

DIPLOMSKI RAD

Mentor: Student:

izv. prof. dr. sc. Nikola Mrvac Marko ai

Zagreb, 2012

Zahvaljujem se mentoru dr. sc. Nikoli Mrvcu i neposrednom voditelju Mili Matijeviu, dipl. ing. na strunim savjetima prilikom izrade ovog diplomskog rada.

SAETAK:

Moderne Web stranice i aplikacije zahtijevaju korisnika suelja koja

svojom naprednom tehnikom izvedbom dosljedno prate preporuke grafikog

oblikovanja u Web 2.0 okruenju. irenjem Interneta i razvojem Web

tehnologija, omoguena je postupna transformacija tekstualno orijentiranih Web

stranica u privlane multimedijske proizvode [1]. Obzirom na visoku razinu

potrebne interaktivnosti s korisnicima, prepoznata je potreba za grafikim

strunjacima, specijaliziranim u polju oblikovanja korisnikih suelja u skladu s

grafikim standardima Web 2.0 okruenja [2]. Stoga, ovaj diplomski rad

obrauje metode razvoja naprednih korisnikih suelja pomou modernih

programskih tehnologija, istrauje utjecaj pojedinih karakteristika Web 2.0

okruenja na njihovo grafiko i funkcionalno oblikovanje te daje pregled

tehnologija koje se tek razvijaju, a jo e vie naglasiti vanost grafike

komponente Web-a, to je od posebnog znaaja za grafike strunjake

specijalizirane u podruju multimedije. Praktian dio diplomskog rada prikazati

e postupak izrade Web orijentiranog korisnikog suelja u skladu s grafikim

standardima Web 2.0 okruenja, koje zahvaljujui naprednoj tehnikoj izvedbi

karakterizira visoka iskoristivost izvornog koda te mogunost prilagodbe

razliitim rezolucijama zaslona.

Kljune rijei: Web stranice, aplikacije, korisnika suelja, Web 2.0 okruenje, multimedija, grafiki standardi, tehnologije , tehnika izvedba

SADRAJ

1. UVOD .......................................................................................................................... 1

2. KORISNIKA SUELJA U WEB 2.0 OKRUENJU ................................................... 3

2.1. Povijest razvoja Web orijentiranih korisnikih suelja .......................................... 3

2.2. Specifinosti Web orijentiranih korisnikih suelja ............................................... 5

2.3. Web 2.0 okruenje ............................................................................................. 12

2.4. Karakteristike Web 2.0 okruenja ...................................................................... 16

2.4.1. Pravila grafikog i funkcionalnog oblikovanja u Web 2.0 okruenju ................ 17

2.4.2. Utjecaj karakteristika Web 2.0 okruenja na grafiko i funkcionalno oblikovanje

korisnikih suelja ..................................................................................................... 22

3. RAZVOJ NAPREDNIH KORISNIKIH SUELJA U WEB 2.0 OKRUENJU .......... 31

3.1. Razvojne tehnologije .......................................................................................... 31

3.1.1. HTML opisni jezik ............................................................................................ 31

3.1.2. CSS opisni jezik .............................................................................................. 33

3.1.3 JavaScript programski jezik ............................................................................. 35

3.1.4. PHP programski jezik ...................................................................................... 36

3.1.5. Tehnologije budunosti ................................................................................... 37

3.2. Praktian razvoj naprednog korisnikog suelja u Web 2.0 okruenju .............. 38

4. ZAKLJUAK ............................................................................................................. 60

5. LITERATURA ............................................................................................................ 62

POPIS PRILOGA .......................................................................................................... 65

POPIS OZNAKA I KRATICA ......................................................................................... 66

POPIS SLIKA ................................................................................................................ 67

POPIS TABLICA ........................................................................................................... 69

POPIS IZVORNIH KODOVA ......................................................................................... 70

1

1. UVOD

U vremenima kada Internet nije bio tako iroko dostupan kao danas,

podruje izrade Web stranica gotovo se u cijelosti smatralo poslom

informatiara, no razvojem tehnologije prepoznata je potreba za uvoenjem

grafikih strunjaka, specijaliziranih u polju oblikovanja atraktivnih suelja bez

kojih se danas ne moe zamisliti niti jedna ozbiljnija Web stranica ili

aplikacija [3]. Moderan Web postupno se transformirao iz prvobitno statinog

oblika u interaktivan multimedijski sustav koji omoguuje brzu razmjenu

informacija meu pojedinim korisnicima, a ne vie iskljuivo izmeu jednog

autora i zainteresirane publike [2]. Novi nain organizacije i uporabe sadraja na

Web-u, simbolino nazvan Web 2.0 trendom, nametnuo je niz pravila grafikog i

funkcionalnog oblikovanja korisnikih suelja kako bi se ostvarila potrebna

razina interaktivnosti i kvalitetan korisniki doivljaj (eng. user experience) [4].

U poetku, suelja navedenih karakteristika izraivali su gotovo iskljuivo

informatiki strunjaci zbog potrebe za programiranjem sloenih programskih

komponenti, no razvoj specijaliziranih paketa unaprijed definiranih programskih

funkcija omoguio je izgradnju naprednih korisnikih suelja na brz i

jednostavan nain [5, 6], pri emu se grafiki strunjak u najveoj mjeri moe

usmjeriti prema izradi kvalitetne grafike.

Unazad nekoliko godina, od pojave prvih pametnih telefona (eng. smart

phones) s kvalitetnim zaslonom s mogunou prikaza velikog broja boja,

prikaz grafike na Web-u poeo se znatno prilagoavati prikazu na mobilnim

ureajima. Danas, pri oblikovanju Web sadraja moramo svakako voditi rauna

o mogunostima prilagodbe suelja razliitim rezolucijama zaslona zbog velikog

broja razliitih formata mobilnih ureaja. Takoer, kako bi se postigla puna

dosljednost i profesionalan izgled te funkcionalnost, prilagoeno suelje mora

potovati iste opeprihvaene standarde Web 2.0 okruenja.

Razvoj Web tehnologija u bliskoj budunosti, a pogotovo dolazak HTML5

i CSS3 opisnih jezika kao novih, ope prihvaenih i implementiranih standarda,

2

omoguit e daljnji razvoj Web-a prema grafiki iznimno bogatoj, multimedijski

usmjerenoj platformi visoke razine interaktivnosti [7]

. Stoga, segment razvoja

korisnikih suelja u Web 2.0 okruenju potrebno je prepoznati i prihvatiti kao

novo, atraktivno i iznimno profitabilno podruje unutar grafike struke [2,8] te ga

poeti tretirati ravnopravno s tradicionalnim poslovima grafikih strunjaka.

Stoga, ovaj diplomski rad obrauje metode razvoja naprednih korisnikih

suelja pomou modernih programskih tehnologija, istrauje utjecaj pojedinih

karakteristika Web 2.0 okruenja na njihovo grafiko i funkcionalno oblikovanje

te daje pregled tehnologija koje se tek razvijaju.

Osim teoretske obrade navedene problematike, diplomski rad e istraiti

na koji nain pojedine karakteristike Web 2.0 okruenja utjeu na grafiko i

funkcionalno oblikovanje korisnikih suelja. Prvi dio istraivanja e

determinirati osnovne karakteristike Web 2.0 okruenja prouavanjem Web 2.0

aplikacija i relevantne literature te na temelju dobivenih podataka izdvojiti one

karakteristike koje bi se mogle primijeniti kao reference pri razvoju korisnikih

suelja. Drugi dio istraivanja e na temelju izdvojenih karakteristika analizirati

suelja nekoliko Web 2.0 aplikacija te odrediti u kojoj mjeri su odreene

karakteristike utjecale na njihovo grafiko i funkcionalno oblikovanje. Dobiveni

rezultati istraivanja primijenit e se pri izradi naprednog korisnikog suelja u

praktinom dijelu diplomskog rada.

3

2. KORISNIKA SUELJA U WEB 2.0 OKRUENJU

2.1. Povijest razvoja Web orijentiranih korisnikih suelja

Web je izvorno zamiljen kao Internet servis za objavljivanje znanstvenih

sadraja koji e se moi lako pretraivati i pregledavati od strane zainteresiranih

korisnika, odnosno drugih znanstvenika [9]

. U skladu s namjenom i tada

dostupnom tehnologijom, bio je izveden u cijelosti tekstualno, bez suvinih

grafikih elemenata koji bi odvlaili pozornost i nepotrebno optereivali prijenos

podataka [9, 10]. Jedini aktivni elementi korisnikih suelja prvih Web stranica

bile su tekstualne poveznice s drugim stranicama (eng. links) i jednostavni

formulari za pretragu sadraja prema upisanim kljunim rijeima (eng. search

forms), izvedeni pomou prve radne verzije HTML opisnog jezika (eng.

HyperText Markup Language) i Perl programskog jezika [10].

Nedugo zatim prepoznate su komercijalne mogunosti Web-a kao medija

za publikaciju reklamnih sadraja velikom broju potencijalnih kupaca, pri emu

se u sreditu zbivanja naao obian korisnik, a ne vie znanstvenik [9]

. Tada je

zapoeo brz razvoj Web-a prema globalnoj komunikacijskoj i prezentacijskoj

platformi. Sve vea dostupnost moderne tehnologije i razvoj brzina pristupa

Internetu, omoguile su transformaciju prvobitno tekstualno orijentiranih Web

stranica u multimedijske proizvode koji uspjeno objedinjuju sliku, tekst, pa ak i

zvuk. U to vrijeme dolazi do naglog razvoja Web orijentiranih tehnologija poput

CSS opisnog jezika (eng. Cascading Style Sheets) te novih, poboljanih verzija

HTML jezika [10]. No, pravu revoluciju u oblikovanju Web suelja zapoela je

tvrtka Netscape Communications razvojem JavaScript programskog jezika koji

je i danas jedan od najpopularnijih Web tehnologija [6]. Brojne Web stranice

koristile su razne interaktivne navigacijske trake, stilizirane satove i sline

atraktivne sitnice izvedene pomou JavaScript jezika, to je posebno

pridonosilo njihovoj vizualnoj upeatljivosti i prepoznatljivosti.

4

Tadanji model upravljanja sadrajem na Web-u uglavnom se bazirao na

protoku informacija izmeu jednog autora stranice i niza zainteresiranih

korisnika [11]. Meutim, uskoro je postalo jasno kako takav model nema

budunost, ve da je potrebno izbrisati stroge uloge i korisnicima omoguiti

stvaranje sadraja [11]

. Ope prihvaanje novog modela, simbolino nazvanog

Web 2.0, rezultiralo je razvojem velikog broja uspjenih on-line projekata poput

YouTube i Vimeo servisa za dijeljenje multimedijskih zapisa, zatim jedne od

najbre rastuih enciklopedija na Svijetu Wikipedije, brojnih servisa za

dijeljenje (eng. sharing) fotografija (Flickr, Panoramio), dokumenata (Box) i

raznih datoteka (DropBox, RapidShare) te svakako neizostavnih drutvenih on-

line okupljalita, poput svjetski popularnih Facebook i MySpace mrea. Nekada

obine, statine HTML stranice poele su se transformirati u sloene Web

aplikacije. Osim potpuno novog naina upravljanja sadrajem, tehnoloki

zahtjevi novih Web 2.0 orijentiranih projekata ubrzali su stvaranje cijelog niza

naprednih multimedijskih tehnologija [11, 12]

.

Jednostavnost, upotrebljivost (eng. usability) i vizualna atraktivnost

nametnuli su se kao standardi u oblikovanju modernih korisnikih suelja Web

aplikacija. Strunjaci i informatiki entuzijasti, okupljeni oko ideje slobodnog

softvera, razvili su niz alata poput jQuery JavaScript radnog okvira (eng.

framework) s namjerom da razvoj atraktivnih korisnikih suelja u velikoj mjeri

olakaju te ujedno njihovu kvalitetu podignu na viu razinu [13]

. U segmentu

planiranja, vizualnog oblikovanja i realizacije suelja modernih Web projekata,

prepoznata je potreba za strunim grafikim kadrom obrazovanim u podruju

primjene multimedije. Daljnjim razvojem Web tehnologija, a posebice dolaskom

HTML5 i CSS3 jezika koji obiluju mogunostima animacije i stiliziranja [7], u

potpunosti e se prepoznati znaaj grafike struke u podruju razvoja naprednih

korisnikih suelja u Web 2.0 okruenju.

5

2.2. Specifinosti Web orijentiranih korisnikih suelja

U svakodnevnom ivotu susreemo se s nizom razliitih korisnikih

suelja koji nam omoguavaju interakciju s ureajima. Moderni televizori,

telefoni, igrae konzole, automobili i niz drugih elektronikih ureaja isporuuju

se s ugraenim softverom za kontrolu i upravljanje od strane korisnika,

posredstvom paljivo projektiranog korisnikog suelja.

Popularizacija informatike i razvoj raunalne tehnologije potakli su

stvaranje velikog broja razliitih aplikacija za stolna (eng. desktop) raunala.

Prvobitni raunalni programi, aktualni u periodu izmeu 1950. i 1960. godine,

koristili su tzv. batch suelja ija je posebnost u tome da ne ostvaruju interakciju

s korisnikom ve se svi potrebni parametri definiraju prethodno procesiranju [14].

Tijekom procesiranja suelje vie ne nudi mogunost unosa novih parametara,

sve dok ne zaprimi rezultat i ponudi ponovno procesiranje. U periodu izmeu

1960. i 1990. godine razvijaju se interaktivna suelja, prvobitno u obliku

komandne linije, a zatim kao tekstualna suelja koja se razvojem mia kao nove

ulazne jedinice raunala, transformiraju u grafika korisnika suelja [14, 15].

1990. godine, u samim poecima razvoja Web-a, zapoinje i postupan razvoj

Web orijentiranih korisnikih suelja kao posrednika izmeu korisnika i Web

stranica, odnosno aplikacija u Web okruenju [10].

Korisnika suelja aplikacija u klasinom grafikom okruenju operativnih

sustava stolnih raunala i laptopa uvelike se razlikuju od Web orijentiranih

suelja, ponajprije zahvaljujui tehnikim karakteristikama pojedine platforme.

Tradicionalne, desktop aplikacije izvravaju se na raunalu korisnika i sve

potrebne datoteke prethodno su postavljene u memoriju raunala postupkom

instalacije, ime je osiguran brz i neometan rad jer nema potrebe za

uitavanjem novih datoteka. Web aplikacije prenose podatke korisniku po

pravilima HTTP protokola aplikativne razine Interneta, koji se bazira na ideji

request/response naina prijenosa podataka izmeu korisnika i posluitelja (eng.

server), odnosno raunala na mrei koji sadri traene podatke [16, 17].

6

Navedeni nain prijenosa podataka na Web-u uspostavljen je zbog potrebne

optimizacije veze izmeu korisnika i posluitelja, kako se resursi posluitelja ne

bi nepotrebno troili na odravanje stalne povezanosti (eng. connection) dok

korisnik pregledava trenutno generiranu stranicu. Izravna posljedica takvog

naina prijenosa podataka je stalno osvjeavanje (eng. refresh) prikaza, to nije

sluaj kod desktop aplikacija koje zbog toga odaju dojam fluidnosti i vee

atraktivnosti suelja.

Problem osvjeavanja najvie dolazi do izraaja kod Web aplikacija koje

zahtijevaju visoku razinu interakcije s korisnikom, a ne koriste nikakve metode

oblikovanja korisnikog suelja pomou JavaScript programskog jezika [13, 18]

koji se izvrava na strani korisnika, odnosno interpretira izravno u korisnikovom

Web pregledniku nakon to se stranica podataka prenijela s posluitelja.

Ukoliko Web aplikacija sadri interaktivne elemente koji ostvaruju

unaprijed predvidljiv rezultat interakcije, mogue ih je oblikovati tako da se svi

potrebni elementi i mogui rezultati prenesu u jednoj server request/response

sesiji, a konano ponaanje elementa definira pomou JavaScript jezika i

prikladno stilizira CSS (eng. Cascading Style Sheets) definicijama.

U suprotnom, svi elementi suelja koji su interaktivnog karaktera, pri

ostvarenoj interakciji s korisnikom morali bi pozivati odreene funkcije

posluitelja posredstvom URL (eng. Uniform Resource Locator) adrese i

prijenosom odreene vrijednosti varijable koja bi na server strani generirala

novu HTML (eng. Hypertext Markup Language) stranicu s rezultatom interakcije.

U sluaju velikih formulara za unos podataka iji raspored elemenata ovisi o

odabirima korisnika, navedeni problem uvelike bi oteao rad s aplikacijom, a

upravljanje unosom postalo bi vrlo komplicirano zbog prirode HTTP

protokola [16]. Programeri takve Web aplikacije morali bi izraditi kompliciran

sustav meuspremnika u koje bi pohranjivali podatke pri svakoj interakciji

korisnika s odreenim elementom. U suprotnom sav uneseni sadraj do toke

interakcije bio bi izgubljen zbog stalne potrebe za osvjeavanjem trenutne

HTML stranice. Stoga, dananja moderna suelja koriste napredne tehnike

7

kontrole interakcije korisnika i elemenata pomou JavaScript radnih okvira (eng.

framework), pri emu valja spomenuti jQuery JavaScript framework koji je

trenutno jedan od najpopularnijih i najkvalitetnijih [5, 6, 13].

Kako bi praktino ilustrirali kvalitetno rjeenje navedenog problema,

promotrimo primjer unosa sadraja kroz dinamini HTML formular ostvaren

pomou unaprijed definiranih funkcija jQuery radnog okvira. Primjerice, ukoliko

u CMS (eng. Content Management System) Web aplikaciji imamo mogunost

unosa vijesti i pripadajue multimedije, pri emu se moe unijeti samo jedna

vrsta multimedije slika ili video, korisniko suelje moemo lako i brzo

realizirati koritenjem metode oblikovanja suelja pomou JavaScript jezika i

pripadajuih CSS definicija.

Slika 2.1. Prikaz segmenta suelja stiliziranog HTML formulara za unos vijesti u CMS sustav

Prikazani dio formulara za unos sadraja sastoji se od HTML input

elemenata tipa text (Naslov vijesti), checkbox (Kratki text) i radio (Slika,

Video). Polje Naslov vijesti nije interaktivnog karaktera nego je statino

definirano i ne mijenja oblik pri interakciji s korisnikom, ve samo prihvaa

tekstualni unos. Klikom na polje Kratki tekst, bez osvjeavanja cijele prikazane

8

stranice prikazuje se dodatno polje za unos kratkog teksta vijesti. Kako ne

dolazi do osvjeavanja stranice, odnosno generiranja novog upita prema

posluitelju, ve se promjene dogaaju iskljuivo na strani korisnika, prethodno

uneseni podaci ostaju upisani u elemente sve do konane predaje ureenih

podataka posluitelju pritiskom submit gumba pri dnu formulara.

Slika 2.2. Prikaz segmenta suelja stiliziranog HTML formulara nakon odabira opcije Kratki

tekst

Ukoliko u prikazano textarea polje upiemo saetak, odnosno kratki tekst

vijesti i iskljuimo ga pritiskom na checkbox Kratki tekst, tekst e ostati upisan

u polje, no nee se prenijeti na posluitelj prilikom konane predaje formulara.

Navedena funkcionalnost izvedena je tako da je checkbox Kratki tekst prozvan

roditeljem (eng. parent) textarea polju pa pri obradi prenesenih podataka,

ukoliko roditelj nije oznaen (vrijednost postavljena na istina - true), vrijednost

polja djeteta se zanemaruje. Imenovanje pojedinih polja i dodjela pripadajuih

statinih vrijednosti izvodi se pomou name i value HTML atributa.

Kako prikazani formular omoguuje unos samo jedne vrste multimedije,

odnosno sliku ili video, nain unosa i prikaza pojedinih polja modificiran je na

9

nain da odabir jedne vrste multimedije skriva polja za unos druge vrste i

obratno. Polja su i u ovome sluaju izvedena kao roditelji i djeca da bi se

omoguila kontrola prenesenih podataka i odbacio viak, a vizualna izmjena

prikazanih polja realizirana je pomou jQuery funkcija show() i hide() te CSS

definicija potrebnih za poetno skrivanje interaktivnih elemenata pri prvom

ispisu formulara, dok jo nije odabrana niti jedna od ponuenih opcija suelja.

Primjerice, ukoliko odaberemo checkbox Slika, prikazat e se dodatno

polje za prijenos (eng. upload) slikovne datoteke, dok su elementi koje prikazuje

opcija Video i dalje skriveni.

Slika 2.3. Prikaz segmenta suelja stiliziranog HTML formulara nakon odabira opcije Slika

Ukoliko odaberemo checkbox Video, suelje e sakriti polje za odabir

slikovne datoteke i prikazati pripadajua polja za definiranje video parametara,

u ovome sluaju URL streaming video player-a i popratnu sliku.

Slika 2.4. Prikaz segmenta suelja stiliziranog HTML formulara nakon odabira opcije Video

Ispunjena polja prenose se na posluitelj klikom na submit gumb koji se

obino nalazi smjeten pri dnu formulara, nakon ega je poeljno ispisati poruku

10

o uspjeno ili neuspjeno izvrenoj operaciji kako bi korisnik znao treba li

ponoviti postupak unosa.

Slika 2.5. HTML submit gumb naziva Spremi i anchor gumb za ponitavanje trenutne akcije

Slika 2.6. jQuery UI dijaloki okvir (eng. dialog) s porukom o uspjeno obavljenoj akciji

Uz prikazane metode dinamikog oblikovanja suelja, pri izradi Web

orijentirane aplikacije koja zahtijeva odreen stupanj interakcije s korisnikom

poeljno je ugraditi sustav kontrole unosa podataka, prethodno zavrnoj predaji

podataka serveru [11, 13]. Naime, ukoliko korisnik na valjani nain ne ispuni sva

potrebna polja, odnosno ne ostvari minimalne nune preduvjete za uspjeno

izvrenje odreene akcije Web aplikacije, a poruka o greci prikae se tek

nakon predaje podataka serveru, svi uneseni podaci e biti izgubljeni, to je

poseban problem kod ispunjavanja veih formulara. Kvalitetno rjeenje

navedenog problema je implementacija tzv. JavaScript validacijskih sustava koji

na strani klijenta u realnom vremenu kontroliraju unose i odmah ispisuju poruku

o greci te onemoguuju predaju podataka serveru sve dok sva polja nisu

pravilno ispunjena [11, 13] .

Suelja Web aplikacija zbog prirode HTTP protokola moraju biti

kvalitetno optimizirana kako pri radu s aplikacijom ne bi dolazilo do usporavanja

veze s korisnikom [16]. Stoga, grafika suelja obino se pretvara u

11

optimizirani .jpeg ili .gif format, odnosno .png format ukoliko je potrebno zadrati

visoku kvalitetu uz odreenu razinu transparentnosti [19]. Takoer, pri

oblikovanju suelja poeljno je koristiti ujednaene grafike elemente i pri

osvjeavanju izmjenjivati tek nune dijelove izvornog koda (eng. source code)

kako bi se u to veoj mjeri koristio meuspremnik (eng. cache) Web

preglednika korisnika i tako vie puta iskoristila veina prethodno prenesenog

koda [3,4,7,19].

Navedene metode odnose se za prirodne (eng. native) Web aplikacije

izraene pomou native Web tehnologija, to vrijedi za HTML dokumente

oblikovane pomou HTML, CSS i JavaScript jezika. Web aplikacije izraene

pomou Adobe Flash alata ili bilo kojeg drugog rjeenja koje zahtijeva upotrebu

specijaliziranog player-a, obino se korisniku isporuuju kao nekoliko

meusobno povezanih veih datoteka pa se prijenos vee koliine podataka

izvrava odjednom u vie navrata. Takoer, takve aplikacije izraene su po

pravilima vlastitog razvojnog okruenja pa nije nuno potivanje klasinih

pravila oblikovanja u Web okruenju.

Unazad nekoliko godina, Web aplikacije sve vie prakticiraju asinkrono

uitavanje sadraja sa servera i tako uspjeno zaobilaze problem stalne

potrebe osvjeavanja [13, 18]. Naime, pomou AJAX (eng. Asynchronous

JavaScript and XML) tehnologije, ostvaruje se interakcija sa serverom u

pozadini aplikacije, to omoguuje slanje zahtjeva i primanje odgovora,

odnosno rezultata izvravanja odreene operacije, izravno na trenutno aktivnoj

HTML stranici, bez potrebe za osvjeavanjem sadraja [18]. Metoda je postala

popularna zbog svoje atraktivnosti jer iznimno pridonosi kvalitetnom

korisnikom doivljaju [4, 18], to posebno dolazi do izraaja u velikim

multimedijskim Web aplikacijama visokog stupnja potrebne interakcije, poput

Google Maps ili Google Gmail aplikacija. Nove verzije jQuery radnog okvira

dolaze s ugraenom AJAX podrkom [13], to je irokom krugu korisnika

12

omoguilo implementaciju navedene funkcionalnosti pomou tek nekoliko

jednostavnih linija koda.

Primjerice, ukoliko na Web stranici imamo kontakt formular, moemo ga

izraditi tako da korisniku ponudimo unos podataka u polja formulara kojemu

dodijelimo atribute id=kontakt-forma i name=kontakt-forma. Svako polje

takoer je oznaeno id i name atributom kako bi mogli jednostavno

implementirati kontrolu unosa te unesene vrijednosti kasnije procesirati pomou

AJAX metode. Pri unosu podataka, polja reagiraju na pogrene unose i kratkim

porukama obavjetavaju korisnika. Nakon to korisnik ispuni sva predviena

polja, omoguava se predaja podataka klikom submit gumba. Proslijeene

unose prihvaa jQuery $.ajax() metoda koja ih prilagoava daljnjoj obradi te

POST ili GET metodom usmjerava server side datoteci. Na strani servera,

odredina datoteka prihvaa vrijednosti i izvrava slanje poruke pomou

vlastitih funkcija. Nakon izvrenih svih operacija, ispisuje se poruka o uspjehu ili

neuspjehu, bez potrebe za osvjeavanjem trenutne HTML stranice s kontakt

formularom.

Na prikazane naine moderna Web orijentirana korisnika suelja

savladavaju ogranienja Web-a kao medija i pripadajueg HTTP protokola te po

upotrebljivosti (eng. usability), brzini izvravanja, vizualnom izgledu i opem

korisnikom iskustvu (eng. user experience, UX) konkuriraju sueljima

tradicionalnih desktop aplikacija [4, 13, 16, 18].

2.3. Web 2.0 okruenje

Web kao medij namijenjen brzoj razmjeni informacija, u svojim poecima

funkcionirao je kao klasina oglasna ploa. Takav statini model upravljanja

sadrajem bazirao se na jednosmjernom protoku informacija izmeu jednog

autora Web stranice i niza zainteresiranih korisnika. Meutim, uskoro je postalo

jasno kako Web u takvome obliku nema budunost, ve da je potrebno izbrisati

stroge uloge te korisnicima omoguiti meusobnu razmjenu informacija kroz

13

interakciju s Web stranicom [1, 11, 12]. Ope prihvaanje novog modela,

simbolino nazvanog Web 2.0, rezultiralo je razvojem velikog broja uspjenih

on-line projekata poput YouTube i Vimeo servisa za dijeljenje multimedijskih

zapisa, zatim jedne od najbre rastuih enciklopedija na Svijetu Wikipedije,

brojnih servisa za dijeljenje (eng. sharing) fotografija (Flickr, Panoramio),

dokumenata (Box) i raznih datoteka (DropBox, RapidShare) te svakako

neizostavnih drutvenih on-line okupljalita, poput svjetski popularnih Facebook

i MySpace mrea [20]. Nekada obine, statine HTML stranice poele su se

transformirati u sloene Web aplikacije visokog stupnja interaktivnosti. Osim

potpuno novog naina upravljanja sadrajem, tehnoloki zahtjevi novih Web 2.0

orijentiranih projekata ubrzali su stvaranje cijelog niza naprednih multimedijskih

tehnologija [7, 20]

.

Web 2.0 model bazira se na meuljudskoj komunikaciji kao temelju

stvaranja korisnog sadraja. Kako se koncept razmjene informacija u potpunosti

razlikuje od prethodnog Web 1.0 modela, stvorila se potreba za razvojem novih

metoda objave sadraja [1, 11, 12, 20, 21]. U poetku, Web stranice su se

izraivale tako to je autor posredstvom HTML editor-a izravno u kod stranice

unosio sadraj i poveznice te ih zatim fiziki prenosio na eljeni server. Web 2.0

model brie stroge uloge te korisniku omoguuje interakciju sa sueljem u svrhu

stvaranja sadraja [20, 21]. Postojee metode izrade Web stranica morale su se

unaprijediti na nain da konaan proizvod nije statinog ve interaktivnog

karaktera. Tada se uz razne forume pojavljuju i prvi sustavi koji omoguuju

pisanje vlastitih on-line dnevnika, tzv. blogovi, to je kovanica od rijei web i log.

Sadraj blog-a obino je organiziran tako da se autorovi tekstovi prikazuju u

vremenskom slijedu, a ispod svakog teksta omoguena je rasprava s drugim

korisnicima kroz objavu komentara. Time je u svojem osnovnom obliku

ostvarena mogunost brze i jednostavne razmjene miljenja meu korisnicima.

Danas svatko moe izraditi vlastiti blog ve za nekoliko minuta koritenjem

specijaliziranih servisa poput Google Blogger ili on-line WordPress platforme,

to je svakako velik doprinos globalnom informacijskom drutvu. Sadraji

14

blogova mogu se lako dijeliti s drugim Web stranicama i aplikacija posredstvom

RSS (eng. Really Simple Syndication) tehnologije [21], to je rezultiralo

stvaranjem agregatnih aplikacija koje prikupljaju specifine tematske sadraje i

na smislen nain prezentiraju ih vlastitim korisnicima. Posredstvom iste

tehnologije, korisnici ak mogu pratiti eljene sadraje vie razliitih blogova na

raznim mobilnim ureajima bez potrebe koritenja Web preglednika, ve kroz

jednostavan RSS ita.

RSS tehnologija pronala je veliku primjenu od strane novinskih i

informativnih portala. Naime, za razliku od novina u tiskanom formatu koje

izlaze jednom dnevno, portali s vijestima su stalno dostupni i uobiajeno svakih

nekoliko sati objavljuju novu informaciju. S vremenom, primjetilo se da

informacije kasno stiu do publike, to je osobit problem ukoliko se radi o

vanim obavijestima. Postalo je oito kako je potrebno pod hitno pronai i uvesti

valjan nain distribucije informacija osobama ili drugim web sjeditima kojima su

te vijesti od osobite vanosti. Obzirom da takav mehanizam distribucije mora

biti prilagodljiv razliitim nainima itanja (putem Web ili desktop suelja te

mobilnih ureaja), rjeenje je pronaeno upravo u RSS tehnologiji koja se

bazira na lako proirivom XML (eng. eXtensible Markup Language) jeziku [21].

Jednostavnost i konana smislenost prenesenih podataka osnovne su znaajke

RSS tehnologije koja je zahvaljujui svojim dobrim karakteristikama postala

opeprihvaeni standard za brzu razmjenu vijesti u Web okruenju.

Uz brzi protok informacija te razmjenu miljenja, vani imbenici Web 2.0

okruenja su drutveno umreavanje (eng. social networking), meusobna

suradnja (eng. colaboration) i dijeljenje sadraja (eng. content sharing) [12, 20,

21]. Milijuni korisnika svakodnevno koriste neku od opih (eng. general) ili

tematskih drutvenih mrea. Facebook, Twitter, Google Plus, Hi5 i LinkedIn

trenutno su najpopularnija virtualna okupljalita, to je prepoznato i od strane

brojnih investitora pa se esto moe uti kako vrijednost navedenih projekata

dostie ak milijarde USD. Zbog velikog broja stalnih korisnika, takvo okruenje

povoljno je za oglaavanje pa mnoge tvrtke objavljuju tzv. fan stranice svojih

15

proizvoda ili dogovaraju plaene oglase [20, 22]. Osim virtualnog druenja,

tematski projekti poput LinkedIn mree omoguuju povezivanje poslodavaca i

kvalitetnog kadra putem osobnih profila, a tzv. micro blogging servisi poput

Twitter-a ak omoguuju da saznamo trenutno aktualne dogaaje ve nekoliko

minuta nakon to se dogode, to je odlian korak prema stvaranju real time

trailice u budunosti.

Pojam meusobne suradnje korisnika (eng. user colaboration) osobito

dolazi do izraaja u raznim project management aplikacijama poput popularnog

Basecamp rjeenja te e-learning sustavima namijenjenim uenicima i

studentima [1, 11]. Takve aplikacije omoguuju razmjenu znanja i zadavanje

individualnih zadataka, olakavaju organiziranje timova te u bilo kojem trenutku

pruaju uvid u proizale rezultate. Meusobna suradnja korisnika ogleda se i u

oznaavanju objavljenog sadraja na Web-u prikladnim tagovima koji se zatim

organiziraju u smislene skupine i predoavaju na prikladan nain, to

omoguuje dinamiko razvrstavanje sadraja prema vrsti i temi [11, 12, 21].

Takav nain organizacije sadraja putem meusobne interakcije korisnika

naziva se folksonomy [11], to je kovanica od rijei folks (hrv. drutvo) i

taxonomy (hrv. metoda ureivanja).

Dijeljenje sadraja meu korisnicima temelj je poslovanja velikog broja

Web 2.0 servisa [11, 20, 21]. Glazbeni i video sadraji sve do unazad nekoliko

godina razmjenjivali su se gotovo iskljuivo posredstvom optikih medija i

analognih kazeta, dok je danas dovoljno imati tek prosjean prikljuak na

Internet pa da posredstvom nekog od popularnih servisa pogledamo

dugometrani film, glazbeni spot ili ak listu pjesama organiziranih u kategorije

od strane korisnika. Unato pravnim problemima, uz odreene kompromise s

organizacijama za borbu protiv piratstva, servisi za dijeljenje sadraja napreduju

iz dana u dan, a broj pogledanih i presluanih naslova mjeri se u milijunima.

Osim velike dostupnosti razliitog sadraja, servisi poput YouTube-a omoguili

16

su raznim anonimnim izvoaima besplatnu promociju, to je rezultiralo nizom

uspjenih pria [20, 21].

Ukoliko sagledamo sve navedeno, moemo zakljuiti kako je temelj Web

2.0 modela stvaranje okruenja koje svakodnevno producira koristan sadraj,

prua pravovremeno informiranje, potie suradnju meu korisnicima te raznim

tehnikama oznaavanja, grupiranja i organizacije omoguava postupnu

transformaciju Web-a prema globalnoj bazi korisnog znanja.

2.4. Karakteristike Web 2.0 okruenja

Unazad desetak godina, Web se transformirao iz obinog statinog

medija u interaktivnu multimedijsku platformu. Aplikacije su nekada bile

iskljuivo vezane uz tradicionalna okruenja desktop raunala, dok je Web

sluio tek kao statino sredstvo informiranja [12, 21]. U meuvremenu razvio se

cijeli niz naprednih informatikih i raunalnih tehnologija koje su omoguile

kvalitetno izvravanje aplikacija u Web okruenju. Implementacija novih

tehnologija rezultirala je stvaranjem velikog broja korisnih Web aplikacija poput

Google Maps, Google Gmail ili Scribd servisa gdje milijuni korisnika meusobno

dijele pisane sadraje poput raznih uputa, besplatnih asopisa i korisnih

dokumenata. Unazad nekoliko godina, od pojave prvih monih pametnih

telefona (eng. smart phones), mnoge Web aplikacije prilagodile su svoje usluge

koritenju pomou mobilnih ureaja. Primjerice, podaci o lokacijama upisani u

Google Maps sustav mogu se koristiti za GPS navigaciju, to je odlian primjer

integracije Web i mobilne aplikacije u svrhu ostvarenja korisne funkcionalnosti,

emu tei Web 2.0 model. Mnogi korisni sadraji na Web-u kategoriziraju se i

organiziraju posredstvom raznih servisa za prikupljanje sadraja od strane

korisnika, kao to su Reddit, Digg ili Newsvine. Milijuni korisnika dnevno

pregleda takve sadraje te ih pritom ocjenjuju, komentiraju i oznaavaju, to

vodi prema stvaranju globalnih baza korisnog sadraja, organiziranog prema

informativnosti i kvaliteti. Usluge modernih Web aplikacija obino su dostupne

programerskoj zajednici putem specijaliziranih API-a (eng. Application

17

Interfaces) [11, 21] kako bi se mogle lako implementirati u nove projekte, to

dovoljno govori o otvorenosti Web 2.0 sustava na korist ope populacije.

U skladu s navedenim te prema relevantnoj literaturi, moemo zakljuiti

kako su temeljne karakteristike Web 2.0 okruenja otvorenost, sloboda te

kolektivna inteligencija kao posljedica aktivnog sudjelovanja korisnika u

oblikovanju informacija [1, 11, 12, 21]. Visok stupanj potrebne interakcije s

korisnicima te potpuno drugaiji sustav kontrole i objave sadraja stvorio je

potrebu razvoja prikladnih korisnikih suelja. U skladu s potrebom, definiran je

niz pravila grafikog i funkcionalnog oblikovanja u Web 2.0 okruenju kako bi se

korisnika potaknulo na interakciju i tijekom cijelog procesa zadrao kvalitetan

korisniki doivljaj.

Stoga, u nastavku rada determinirat emo osnovne karakteristike Web

2.0 okruenja koje bi se mogle primijeniti kao reference pri razvoju korisnikih

suelja te prouavanjem nekoliko popularnih aplikacija i relevantne literature

definirati osnovna pravila grafikog i funkcionalnog oblikovanja u Web 2.0

okruenju.

2.4.1. Pravila grafikog i funkcionalnog oblikovanja u Web 2.0

okruenju

Web 2.0 okruenje potie korisnike na stvaranje i dijeljenje sadraja, to

zahtijeva visoku razinu potrebne interaktivnosti sa sueljem aplikacije [11, 21]. U

skladu s potrebom, definiran je niz pravila grafikog i funkcionalnog oblikovanja

u Web 2.0 okruenju kako bi se korisnika potaknulo na interakciju i tijekom

cijelog procesa zadrao kvalitetan korisniki doivljaj.

Prema relevantnoj literaturi iz podruja oblikovanja (eng. design) u Web

2.0 okruenju, definirane su ope karakteristike suelja modernih Web

aplikacija. Prouavanjem navedenih karakteristika te analizom suelja nekoliko

18

popularnih aplikacija, definirat emo opa pravila grafikog i funkcionalnog

oblikovanja u Web 2.0 okruenju.

Suelja modernih Web 2.0 aplikacija karakteriziraju slijedee osnovne

grafike i funkcionalne odlike:

a) Jednostavnost

Suelja aplikacija u Web 2.0 okruenju proeta su jednostavnou i

istoom, bez nepotrebnih detalja koji korisnika mogu omesti u postizanju

eljene interakcije. Pri oblikovanju suelja preporuuje se koritenje tek nunih

elemenata potrebnih za ostvarenje eljene funkcionalnosti, uz stalno

usmjeravanje korisnika pomou prikladno stiliziranih poruka. Osim pri izradi

suelja razliitih aplikacija, jednostavnost je prihvaena kao standard u

oblikovanju modernih Web stranica [2, 11, 19] pa zbog dosljednog potivanja

pravila esto moemo uti kako su to Web 2.0 stranice, iako su statinog

karaktera.

b) Jasno naglaene povrine od posebnog interesa

Povrinama od posebnog interesa smatramo dijelove suelja koji sadre

elemente potrebne za ostvarenje eljene interakcije s korisnikom. Primjerice,

ukoliko korisnika elimo navesti na ispunjavanje odreenog formulara, tada

emo sve ostale elemente podrediti konanom cilju na nain da povrinu od

posebnog interesa smjestimo na upeatljivo mjesto, vidljivo odmah pri

uitavanju HTML stranice. Osim rasporedom, naglaavanje odreene povrine

obino se postie i odabirom valjane boje pozadine, postizanjem kontrasta,

balansiranjem veliina pojedinih dijelova sadraja te ugradnjom posebnih

elemenata koji korisnika jednoznano upuuju na akciju [23, 24, 25].

19

c) Pregledan razmjetaj elemenata

Elementi suelja moraju biti pregledno razmjeteni i paljivo organizirani

kako se ne bi naruio tok procesa interakcije s korisnikom [24]. Ukoliko u prvih

nekoliko sekundi nakon uitavanja trenutne stranice nije jasno vidljiva svrha i cilj

pojedinih elemenata, velika je vjerojatnost da korisnik nee ostvariti interakciju

na eljeni nain [2, 24, 25], to svakako elimo izbjei. Paljivo planiranje

rasporeda elemenata u svrhu postizanja preglednosti i jednostavnosti posebice

dolazi do izraaja kod Web stranica koje se bave on-line prodajom.

d) Smislena i jednoznana navigacija

Loa navigacija frustrira korisnika i u potpunosti onemoguuje kvalitetnu

interakciju s aplikacijom te postizanje eljenih ciljeva [23, 24]. Kvalitetno rijeen

sustav navigacije kroz sadraj u svakom trenutku omoguuje korisniku

orijentaciju u ovisnosti o trenutnom poloaju te poduzimanje eljenih akcija.

Stoga, navigacija mora biti rijeena jednoznano, smisleno i jednostavno, a

trenutni poloaj korisnika u sustavu mora biti jasno vidljiv i naglaen u svakom

trenutku [23].

e) Jasno voenje korisnika kroz procese pomou sustava provjere unosa i

obavjetavanja u realnom vremenu

U svrhu pojednostavljenja, a time i olakanja procesa interakcije za

krajnjeg korisnika, Web 2.0 aplikacije imaju ugraen sloen sustav provjere

unosa i obavjetavanja u realnom vremenu, kako bi se odrao visok stupanj

korisnikog doivljaja i sprijeili eventualni problemi pri kasnijoj obradi podataka.

20

f) Atraktivno stilizirani elementi suelja

Suelja modernih Web 2.0 aplikacija karakteriziraju stilizirani elementi

proeti jednostavnou [23, 24]. Dojam atraktivnosti postie se zaobljenim

rubovima, blagim linijama, tonskim prijelazima (eng. gradient) i razliitim

tehnikama koje stvaraju dojam blage trodimenzionalnosti povrine, no uz

zadranu jednostavnost i s dozom dobrog ukusa.

g) Upeatljive, izraajne, pastelne boje

Snane, svijetle boje privlae poglede i doprinose stvaranju

profesionalnog opeg dojma. Stoga, Web stranice i aplikacije izraene po

pravilima Web 2.0 okruenja, obino koriste dvije do najvie tri primamljive

pastelne boje kako bi privukle znatieljne poglede i kod promatraa stvorile

osjeaj ugode [2, 23, 25]. Boje se koriste i za skretanje panje na odreenu

povrinu, razdvajanje sadraja te naglaavanje vanih elemenata.

h) Jasnoa i otrina

Pojam otrine odnosi se na kvalitetu pojedinih grafikih elemenata

ukomponiranih u konani dizajn elemenata Web stranice ili aplikacije. Pri izradi

grafike u grafikom ureivau (eng. editor) postoji mogunost pojave

zamagljenih (eng. blur) podruja, pogotovo na mjestima zaobljenih rubova.

Stoga, pri izradi grafike potrebno je koristiti opcije koje rubove ine jasnim i

otrim jer e se u protivnom zbog neuglednog izgleda pojedinih elemenata

naruiti opi grafiki dojam. Navedeni problem rjeava CSS3 jezik koji uvodi

mogunost generiranja zaobljenih rubova izravno kroz kod stranice [7, 23], bez

potrebe za vanjskim grafikim datotekama, no zbog trenutno slabe podrke od

strane Web preglednika, HTML5 i CSS3 tehnike jo nije preporuljivo koristiti.

21

i) Dosljednost

Dosljednost se odnosi na potivanje odabranih metoda i grafikih stilova

kroz cijeli dokument. Parametre poput veliine pojedinih elemenata, oblika i

veliine fonta, boja, margina te razmaka izmeu rijei i slova potrebno je

prethodno definirati i potivati ih tijekom cijelog procesa oblikovanja Web

stranice [2, 23, 24, 25], odnosno suelja aplikacije. U protivnom, konaan rezultat

odaje dojam neprofesionalnosti, to svakako elimo izbjei.

j) Prilagodljivost razliitim dimenzijama, odnosno rezolucijama zaslona

Unazad nekoliko godina, od pojave prvih pametnih telefona (eng. smart

phones) s dovoljno irokim i kvalitetnim zaslonom, Web 2.0 aplikacije poele su

se prilagoavati standardima novog medija optimizacijom suelja kako bi

kvalitetno mogle funkcionirati na zaslonima razliitih dimenzija. Navedeni

problem danas se obino rjeava tako da proizvoa aplikacije izradi vie

verzija suelja te zatim pomou dinamikog prepoznavanja vrste ureaja

prikae valjanu verziju [24, 26]. Jednostavnija suelja mogu se izraditi i na nain

da se dinamiki prilagoavaju razliitim dimenzijama, to se postie izradom

tekuih (eng. fluid) predloaka [26].

k) Kompatibilnost osnovnih funkcija s vodeim Web preglednicima

Kompatibilnost s vodeim Web preglednicima (eng. cross browser

compatibility) od iznimne je vanosti za Web 2.0 aplikacije zbog irokog kruga

korisnika kojima su namijenjene. Naime, odreene ugraene funkcionalnosti

aplikacije moda nisu podjednako podrane od strane svih vodeih preglednika

pa se moe dogoditi da rade polovino ili uope ne rade [7, 19, 23, 24]. Takoer,

odreeni elementi suelja mogu se drugaije prikazivati u razliitim

preglednicima pa je pri oblikovanju suelja potrebno postii odreeni kompromis

kako bi se konaan proizvod u svim preglednicima prikazao na priblino

podjednak nain sa zadranim svim potrebnim funkcionalnostima.

22

2.4.2. Utjecaj karakteristika Web 2.0 okruenja na grafiko i

funkcionalno oblikovanje korisnikih suelja

Prouavanjem relevantne literature te promatranjem Web 2.0 aplikacija

determinirali smo temeljne karakteristike korisnikih suelja u Web 2.0

okruenju. Slijedei korak je istraiti na koji nain se navedene karakteristike

manifestiraju u konkretnim primjerima suelja odabranih Web 2.0 aplikacija.

Kao predmet prouavanja odabrat emo dvije popularne Web 2.0 aplikacije te

po prethodno odreenim karakteristikama, koje su ujedno i preporuke

oblikovanja u Web 2.0 okruenju, utvrditi na koji nain i u kojoj mjeri je pojedina

preporuka ispotovana pri grafikom i funkcionalnom oblikovanju korisnikog

suelja.

Kao predmet prouavanja uzet emo Basecamp project management

aplikaciju i Stumbleupon sustav za preporuku web sadraja po unaprijed

definiranim interesima.

a) Basecamp

Slika 2.7. Prikaz poetne stranice suelja Basecamp project management aplikacije [27]

Basecamp je on-line aplikacija namijenjena voenju projekata [27], to je

po prirodi svakako kompliciran proces. Meutim, aplikacija je organizirana

krajnje jednostavno, a suelje je pregledno i kvalitetno osmiljeno. Povrine od

23

posebnog interesa i razne poruke koje nas navode kroz sustav jasno su

naglaene izraajnom pastelnom naranastom bojom, dok sueljem dominira

izrazito ugodna, blaga, svijetlo smea boja. Raspored elemenata je jasan i

pregledan, a navigacija kroz sadraj uvelike je olakana jasno naznaenim

obavijestima i prikladnim strjelicama koje nas navode na logian slijed radnji.

Slika 2.8. Basecamp project management aplikacija prikaz stranice projekta [27]

Osnovna navigacija rijeena je vrlo pregledno i jednostavno, u obliku

obinih HTML linkova koji se podcrtavaju prilikom prelaska kursora. Sadraji

veine stranica uitavaju se asinkrono pomou AJAX tehnologije, to je uklonilo

potrebu stalnog osvjeavanja stranica prilikom izmjene sadraja, ime se

odrao visok stupanj korisnikog doivljaja tijekom cijelog vremena koritenja

aplikacije.

24

Slika 2.9. Suelje Basecamp project management aplikacije prikaz polja za unos sadraja i

obavijesti o pogrenom unosu [27]

Polja za unos sadraja rijeena su jednostavno, no funkcionalno, uz

detalje poput stiliziranog submit gumba i unaprijed definiranog teksta u input

poljima koji nas navodi kroz unos potrebnih podataka. Provjera unosa rijeena

je tako da u realnom vremenu obavjetava korisnika o grekama, ispisom

prikladnih ikona. Na prikazanoj slici moe se vidjeti ikona s usklinikom koja

nam signalizira kako smo u polje predvieno za unos e-mail adrese upisali

samo rije bez specifinih karakteristika poput @ znaka i naziva domene.

Ukoliko greku ne popravimo, a podatke pokuamo predati serveru klikom na

submit gumb, sustav e oznaiti neispravan unos i ispisati dodatnu poruku, to

uklanja mogunost naknadnih problema.

Slika 2.10. Basecamp project management aplikacija prikaz dodatne poruke o neloginom

unosu [27]

25

Pisanje dokumenata vezanih uz pojedini projekt vri se kroz poseban

editor, stiliziran u skladu s vizualnim identitetom cijele aplikacije, ime je u cjelini

odrana dosljednost pri oblikovanju suelja.

Slika 2.11. Basecamp project management aplikacija prikaz suelja za pisanje projektne

dokumentacije [27]

Osim inaice za klasine zaslone velikih dimenzija, razvijena je i posebna

Basecamp Web aplikacija za mobilne ureaje. Vano je naglasiti kako to nije

prirodna (eng. native) aplikacija za pojedino mobilno okruenje ve Web

aplikacija prilagoenog suelja koja se izvrava izravno u Web okruenju pa

stoga mobilni ureaj pri koritenju mora biti povezan na Internet.

Slika 2.12. Prikaz Basecamp project management aplikacije na razliitim mobilnim

ureajima [27]

26

Obzirom na sve prethodno navedene znaajke, moemo zakljuiti kako

je Basecamp prava Web 2.0 aplikacija jer dosljedno prati preporuke oblikovanja

u Web 2.0 okruenju te posjeduje sve karakteristike moderne Web 2.0

aplikacije.

b) StumbleUpon

SumbleUpon je zanimljiva i inovativna aplikacija ija je osnovna ideja

prikaz razliitog sadraja obzirom na unaprijed definirane korisnikove

interese [28]. Servis je doivio veliki uspjeh zbog svoje zabavnosti, no i

korisnosti jer esto prikazuje zanimljive lanke i fotografije koje bi sami teko

pronali posredstvom klasinih pretraivaa. Suelje aplikacije je jednostavno i

kvalitetno rijeeno kako bi se korisniki doivljaj odrao na visokom stupnju kroz

cijelo vrijeme koritenja servisa.

Tok rada s aplikacijom podijeljen je u nekoliko jednostavnih cjelina, a to

su registracija, prijava na sustav, odabir interesa i pretraivanje, odnosno

izmjena relevantnih Web stranica na vrlo jednostavan nain, pomou tzv.

Stumble! gumba. Zanimljivo je kako pri registraciji sustav omoguava

povezivanje s Facebook profilom u svrhu automatske registracije, bez potrebe

za ispunjavanjem formulara, to krajnjem korisniku dodatno olakava cijeli

postupak.

27

Slika 2.13. StumbleUpon aplikacija prikaz polja za unos sadraja i mogunosti

registracije pomou osobnog Facebook rauna (eng. account) [28]

Formulari za unos sadraja rijeeni su jednostavno i funkcionalno, s

prikladnim detaljima poput stiliziranog submit gumba i onfocus efekta koji se

pojavljuje na trenutno oznaenom polju. Odabrani font je jasan i izraajan te se

bojom i oblikom dobro uklapa u elemente suelja. Pri neispravnom unosu,

sustav obavjetava korisnika prikladnom porukom ili promjenom boje

problematinih input polja.

Slika 2.14. StumbleUpon aplikacija obavjetavanje korisnika o neuspjenom unosu [28]

28

Odabir interesa rijeen je takoer jednostavno, pomou HTML liste iji se

elementi oznaavaju jednostavnim klikom, a konaan odabir potvruje pomou

stiliziranog Save Interests gumba.

Slika 2.15. StumbleUpon aplikacija prikaz suelja za odabir korisnikovih interesa [28]

Suelje glavnog dijela aplikacije izvedeno u obliku tanke trake i nalazi se

pri vrhu prikaza. Sastoji se od tzv. Stumble! gumba za izmjenu prikazanog

sadraja sukladno korisnikovim interesima, funkcija za ocjenjivanje u svrhu

optimizacije daljnjeg prikazivanja te funkcija za dijeljenje sadraja s drugim

korisnicima putem drutvenih mrea poput Facebook, Twitter i LinkedIn servisa.

Slika 2.16. StumbleUpon aplikacija prikaz suelja za izmjenu, ocjenjivanje i dijeljenje (eng.

sharing) prikazanog sadraja [28]

Osim navedenog, u krajnjem desnom kutu smjetene su osnovne

funkcije upravljanja profilom te vodi kroz aplikaciju, tzv. Help. Odjava iz

sustava vri se jednostavnim odabirom opcije Sign Out.

29

Slika 2.17. StumbleUpon aplikacija prikaz osnovnog izbornika s opcijama Pomo (eng.

Help), Postavke (eng. Settings) i Odjava (eng. Sign Out) [28]

StumbleUpon servis postoji i u inaici za mobilne ureaje, no za razliku

od Basecamp aplikacije, StumbleUpon dolazi kao prirodna (eng. native)

aplikacija za iOS, Android, Amazon Kindle i Barnes & Noble NOOK ureaje, to

dodatno podie kvalitetu same usluge. No, zbog prirode servisa, nuna je stalna

veza s Internetom kako bi se predloene stranice mogle neometano izmjenjivati.

Obzirom na navedene znaajke, StumbleUpon servis, jednako kao i

Basecamp dosljedno prati preporuke oblikovanja u Web 2.0 okruenju te

predstavlja dobar primjer kvalitetno zamiljene i realizirane aplikacije.

Slika 2.18. Prikaz StumbleUpon aplikacije na razliitim mobilnim ureajima [28]

30

U slijedeem poglavlju, praktino emo realizirati vlastito korisniko

suelje pratei viene dobre prakse grafikog i funkcionalnog oblikovanja u

Web 2.0 okruenju te implementirajui moderne informatike tehnologije.

31

3. RAZVOJ NAPREDNIH KORISNIKIH SUELJA U WEB 2.0

OKRUENJU

3.1. Razvojne tehnologije

Korisnika suelja aplikacija u Web 2.0 okruenju karakterizira niz

naprednih mogunosti koje se ostvaruju implementacijom modernih

informatikih tehnologija. Grafiko oblikovanje suelja obino zapoinje

planiranjem elemenata i funkcionalnosti te izradom skice prema kojoj se zatim

oblikuju pojedini segmenti pomou grafikog ureivaa (eng. editor), kao to je

primjerice Adobe Photoshop. Slijedei korak u izradi suelja je pretvorba

grafikog rjeenja u statian HTML dokument, na nain da se pojedinim HTML

elementima pridruuje grafika izraenog predloka, tzv. slicing/coding

procesom. Nakon uspjene izrade HTML dokumenta, suelje se na valjan nain

povezuje s funkcijama koje se izvravaju na strani servera. U konkretnom

primjeru, izradit emo napredan kontakt formular koji sa server side funkcijom

za slanje e-mail poruke komunicira posredstvom jQuery AJAX metode. Tako

emo se u najveoj mjeri usmjeriti prema tehnologijama koje se izvravaju na

strani korisnika, dok emo server side programiranje pomou PHP jezika

spomenuti tek zbog potrebe realizacije potrebne funkcije.

Prethodno praktinoj realizaciji suelja kontakt formulara, pruit e se

uvid u osnovne karakteristike potrebnih razvojnih tehnologija kako bi kvalitetno

sagledali i shvatili sve potrebne korake izrade. Takoer, osvrnut emo se na

tehnologije koje su ve prisutne, no tek e u budunosti dostii svoj puni

potencijal.

3.1.1. HTML opisni jezik

HTML (eng. HyperText Markup Language) je opisni jezik koji slui za

oblikovanje Web dokumenata. U osnovi, sastoji se od niza oznaka (eng. tags)

kojima se opisuje struktura pojedine Web stranice, odnosno dokumenta [7, 30].

32

Izraeni HTML dokument interpretira se u Web pregledniku korisnika (eng. Web

browser) prema odreenim standardima, ovisno o verziji HTML jezika koji se

koristio pri izradi. Kvaliteno izraen HTML dokument jednako e se interpretirati

u svim modernim Web preglednicima (npr. Microsoft Internet Explorer 8, Mozilla

Firefox, Google Chrome), odnosno vizualni doivljaj Web stranice biti e u

skladu s izvornom idejom bez obzira koji preglednik koristimo za pregledavanje

sadraja [7, 23, 24, 30].

Slijedi prikaz izvornog koda jednostavnog HTML dokumenta:

Jednostavna stranica Primjer teksta Primjer linka

Izvorni kod 3.1. Struktura jednostavnog HTML dokumenta

Kompletan sadraj HTML dokumenta, odnosno pojedine Web stranice

nalazi se unutar osnovnog taga koji interpreteru Web preglednika govori

kako se unutar njega nalazi HTML kod stranice. Sadraj unutar poetnog

() i zavrnog () HTML taga podijeljen je na dvije osnovne cjeline,

zaglavlje i tijelo stranice. Zaglavlje stranice definirano je tagom, a tijelo

tagom. U zaglavlje, odnosno unutar poetnog i zavrnog taga

smjetaju se informacije o stranici u obliku i tagova te poveznice

prema vanjskim CSS i JavaScript datotekama.

Osnovni sadraj Web stranice, odnosno sadraj koji e se korisniku

prikazati na zaslonu pri dovretku interpretacije na strani Web preglednika,

smjeta se unutar poetnog i zavrnog taga. Prikazani primjer

jednostavnog HTML dokumenta u tijelu stranice sadri tag koji oznaava

paragraf teksta te poveznicu, odnosno link koji se oznaava tagom.

Poveznica povezuje trenutni HTML dokument s drugim dokumentom, u

prikazanom primjeru s marko.html stranicom.

33

3.1.2. CSS opisni jezik

CSS (eng. Cascading Style Sheets) je opisni jezik koji se koristi za

grafiko stiliziranje HTML dokumenata [7, 30]. Osnovna ideja CSS jezika je

razdvajanje HTML strukture Web stranice i pripadajueg sadraja od vizualnih,

stilskih elemenata. Povezivanjem razliitih CSS datoteka ije su definicije na

valjan nain pridruene odreenim HTML tagovima unutar dokumenta, izgled

Web stranice (margine, raspored elemenata, boje, stilovi teksta) moe se u

potpunosti promijeniti. Stoga, zbog iznimne prilagodljivosti i jednostavnosti, CSS

je danas ope prihvaeni standard pri izradi grafikih suelja Web stranica [30].

Slijede primjeri stilizacije pomou CSS jezika.

CSS stilovi - u prikazanom primjeru pretpostavlja se kako su stilovi

upisani u pripadajuu CSS style sheet datoteku:

Primjer 1:

p { font-size: 12pt; font-style: italic; color: red; }

Izvorni kod 3.2. Primjer stiliziranja izravnim

vezanjem na HTML tag

Primjer 2: .paragrafTeksta { font-size: 18pt; font-weight: bold; color: #000000; }

Izvorni kod 3.3. Primjer stiliziranja

posredstvom CSS klase

Primjer 3: #plaviParagraf { font-size: 21pt; font-weight: bold color: #000000; }

Izvorni kod 3.4. Primjer stiliziranja posredstvom CSS identifikatora

Povezivanje prikazanih definicija s pripadajuim elementima u HTML

datoteci:

34

Primjer 1:

Naknadno povezivanje nije potrebno jer se izvrava automatski

zbog izravnog referenciranja na tag pripadajueg HTML dokumenta.

Primjer 2: Primjer teksta

Izvorni kod 3.5. Primjer povezivanja HTML taga i pripadajue CSS klase

Primjer 3:

Primjer teksta

Izvorni kod 3.6. Primjer povezivanja HTML taga i pripadajueg CSS identifikatora

U prvom primjeru povezivanje eljenih definicija s pripadajuim HTML

tagom provedeno je automatski, referenciranjem stila na tag unutar HTML

dokumenta. Drugi i trei primjer prikazuju povezivanje pomou CSS klase i CSS

identifikatora. Razlika izmeu ta dva naina je u dozvoljenom broju njihovog

ponavljanja unutar HTML dokumenta. Naime, identifikatori (eng. id) se smiju

iskoristiti samo jednom unutar pojedinog HTML dokumenta, dok se klase (eng.

class) mogu upotrijebiti neogranieno mnogo puta.

CSS kod koji se nalazi u vanjskoj CSS datoteci povezuje se s HTML

dokumentom slijedeim HTML kodom koji se dodaje unutar zaglavlja Web

stranice, odnosno izmeu poetnog i zavrnog taga:

Izvorni kod 3.7. Primjer definiranja vanjske CSS datoteke pomou HTML link taga

U prikazanoj liniji koda, href atribut definira putanju i naziv CSS datoteke,

a media odreuje vrstu medija za koji su stilovi prilagoeni (moe biti i npr.

print).

35

Osim na prikazani nain, CSS stilovi se mogu dodati i izravno u eljeni

HTML tag, tzv. inline stiliziranjem:

Primjer teksta

Izvorni kod 3.8. Primjer inline stiliziranja odabranog HTML taga

3.1.3 JavaScript programski jezik

JavaScript je skriptni programski jezik koji se izvrava na strani klijenta,

odnosno u Web pregledniku korisnika [6, 13]. Razvila ga je tvrtka Netscape iji

je Web preglednik Netscape Navigator devedesetih godina prolog stoljea bio

dominantan na tritu, s udjelom od ak 90%. JavaScript je sintaksom vrlo

slian jeziku Java, no Java je za razliku od JavaScript-a objektno orijentirani

jezik.

U poetku JavaScript se uglavnom koristio za dekorativne sitnice na Web

stranicama, poput razliitih satova, stiliziranih kursora i navigacijskih traka. No,

napretkom tehnologije stvorio se niz zanimljivih mogunosti poput izravne

komunikacije JavaScript programa s posluiteljskim tehnologijama, to je

omoguilo asinkrono pokretanje funkcija na posluitelju (eng. server) i

dinamiko prihvaanje dobivenih rezultata. Navedena tehnologija naziva se

AJAX, odnosno eng. Asynchronous JavaScript and XML [5, 13, 18].

Jednako tako, vano je spomenuti niz JavaScript radnih okvira (eng.

framework) koji su se pojavili, a uvelike olakavaju izvravanje sloenih funkcija

koje bi samostalno bilo teko realizirati. Naime, radni okvir, odnosno framework,

sadri niz unaprijed definiranih mogunosti koje se jednostavno pozivaju i slau

u eljeni proizvod [5, 13], to je osobito korisno pri izgradnji sloenih sustava jer

skrauje vrijeme, trud i trokove izrade.

36

U praktinom primjeru realizacije suelja kontakt formulara, koristit emo

jQuery radni okvir u svrhu provjere unosa te asinkrone komunikacije sa server

side funkcijom za slanje e-mail poruke.

3.1.4. PHP programski jezik

PHP (eng. PHP: Hypertext Preprocessor) je moderan programski jezik

prvenstveno namijenjen izvravanju u Web okruenju, na strani posluitelja

(eng. server side) [31]. Razvio ga je Rasmus Lerdorf, s osnovnom zamisli da

pomou njega na svojoj osobnoj stranici broji posjete. U poetku, to je bio skup

skripti napisanih u Perl jeziku, no poslije kada je dolo do potrebe za vie

funkcija, napisao je potpuno novu verziju u programskom jeziku C. U to vrijeme,

PHP je koristilo oko 50 000 Web stranica, to je tek oko 1% ukupnog broja Web

stranica na Internetu u to vrijeme, dok je danas PHP najpopularniji i najee

koriteni programski jezik na Web-u [31]. Tvorac jezika odluio je PHP ponuditi

svijetu kao slobodan softver, odnosno kao tehnologiju otvorenog koda, to je

uvelike pomoglo njegovu razvoju i postizanju trenutne razine popularnosti i

rairenosti na Web-u.

PHP kod se moe pisati u obliku skripte te po objektno orijentiranim

principima, to ga ini posebno monim jezikom. Takoer, vano je spomenuti

kako je trenutno besplatno dostupan niz kvalitetnih PHP radnih okvira (eng.

frameworks) koji omoguuju brzu izradu sloenih Web aplikacija po Web 2.0

principima.

Slijedi primjer PHP koda koji unutar otvorenog i zatvorenog taga

ispisuje odreeni tekst ovisno da li varijabla $broj sadri paran ili neparan broj:

37

else { echo 'Broj '.$broj.' nije paran'; } ?>

Izvorni kod 3.9. Primjer PHP koda koji unutar HTML paragrafa ispisuje odreeni tekst ovisno o

parnosti vrijednosti spremljene u varijablu $broj

PHP kod ograen je poetnim PHP tagom. Varijable

se u PHP jeziku oznaavaju s dolar znakom pa se stoga naa varijabla naziva

broj pie kao $broj. Ispitivanje parnosti vri se pomou if provjere koja dijeli broj

spremljen u varijablu $broj s brojem dva te usporeuje dobiveni ostatak

dijeljenja s nulom. Ako ostatka nema, broj je djeljiv s brojem dva, odnosno

paran je, a ako nije, program prelazi na else uvijet. Ukoliko je broj paran,

naredba echo ispisuje poruku da je broj paran, a ako nije, ispisuje se poruka

unutar else uvjeta.

U konkretno prikazanom primjeru, ako pregledavamo kod generirane

Web stranice, vidimo slijedee:

Broj 2 je paran

Izvorni kod 3.10. Prikaz konanog ispisa u Web pregledniku, nakon izvravanja Izvornog koda 3.9.

3.1.5. Tehnologije budunosti

Tehnologijama budunosti obino se prozivaju nove verzije HTML i CSS

opisnih jezika, odnosno HTML5 i CSS3 [7, 23]. Navedeni jezici implementiraju

brojne napredne mogunosti koje smo do sada mogli samo imitirati pomou

grafikih elemenata i prikladnog JavaScript koda. Primjerice, zaobljeni rubovi,

refleksije i razne sjene obino se izrauju u grafikom editoru, a zatim u

svojstvu pozadine odreenog HTML elementa prenose u strukturu Web stranice.

Novi CSS jezik dolazi s implementiranom podrkom za sve navedeno te

38

omoguuje postizanje jednakih efekata izravnom modifikacijom CSS definicija,

to je posebno korisno i praktino jer vie nemamo potrebu koritenja nekoliko

razliitih programa i metoda [7]. Takoer, sve vizualne izmjene na tako

realiziranoj Web stranici brzo se izvravaju jednostavnom izmjenom CSS

parametara. Novi tagovi HTML5 jezika takoer imaju velik potencijal, a

zanimljivo je spomenuti i kako YouTube servis ve nudi mogunost koritenja

HTML5 video player-a, umjesto dosadanje Flash verzije.

Slubena specifikacija HTML5 i CSS3 jezika jo nije dovrena od strane

W3C (eng. World Wide Web Consortium) organizacije pa trenutno dostupne

metode navedenih tehnologija podravaju tek noviji Web preglednici meu

kojima su vodei Mozilla Firefox i Google Chrome [7]. Korisno je spomenuti

kako su trenutne mogunosti radnih verzija HTML5 i CSS3 jezika realizirane na

nain da se izvravaju u preglednicima koji ih podravaju, dok se u ostalima

zanemaruju bez eventualnih kolizija s postojeim elementima. Navedeni princip

je odlino vidljiv u primjeni zaobljenih rubova produciranih pomou CSS3 jezika.

Naime, ukoliko tako stiliziranu stranicu pregledavamo pomou preglednika koji

podrava navedenu opciju, vidjet emo element sa zaobljenim rubom, dok e

ostali preglednici prikazati isti element bez zaobljenih rubova, no sa zadranom

temeljnom funkcionalnou. Stoga, zbog rastue HTML5 i CSS3 podrke u

modernim preglednicima te rasprostranjenosti Mozilla Firefox i Google Chrome

rjeenja, uporaba CSS3 stilova postaje sve ea praksa.

3.2. Praktian razvoj naprednog korisnikog suelja u Web 2.0

okruenju

Praktian dio ovog diplomskog rada demonstrirat e izradu funkcionalnog

suelja za slanje poruka, tzv. kontakt formulara (eng. contact form), prema

pravilima i standardima Web 2.0 okruenja. Kontakt formulari se esto koriste

na statinim Web stranicama u svrhu ostvarenja komunikacije s posjetiteljima,

poput primjerice rezervacije termina, upita u vezi proizvoda ili odreene vrste

39

anketiranja o uslugama. Osim klasinih, statinih Web stranica, kontakt

formulari se u odreenom obliku pojavljuju i u sklopu velikih Web aplikacija.

Primjerice, Claroline aplikacija za e-uenje (eng. e-learning) ima ugraen sustav

komunikacije meu korisnicima koji poruke dostavlja u vlastitom on-line

okruenju, a kopije prosljeuje izravno na registrirane e-mail adrese.

Suelje za slanje poruka koje emo izraditi u svrhu demonstracije,

dosljedno e pratiti preporuke grafikog i funkcionalnog oblikovanja u Web 2.0

okruenju. Posebne efekte, viene pri analizi Basecamp i Stumbleupon servisa,

ostvarit emo koritenjem trenutno podranih CSS3 tehnika te odreenim

funkcijama jQuery radnog okvira, dok e specifini grafiki elementi biti izraeni

pomou Adobe Photoshop grafikog ureivaa (eng. editor). Struktura

formulara bazirat e se na XHTML 1.0 Strict jeziku kako bi se zadrala

kompatibilnost s veinom trenutno dostupnih Web preglednika.

Izraeni kontakt formular zaista e biti funkcionalan, odnosno slati e

poruke na unaprijed definiranu e-mail adresu. Navedenu funkcionalnost

moemo ostvariti jedino koritenjem server side tehnologija pa emo stoga

izraditi jednostavnu PHP skriptu koja e prihvatiti upisane podatke i mail()

funkcijom poslati ih na valjanu destinaciju. Kako bi se tijekom cijelog vremena

koritenja suelja odrao visok stupanj korisnikog doivljaja (eng. user

experience) podaci e se server side datoteci prosljeivati AJAX metodom

pomou valjane funkcije jQuery radnog okvira.

Prikaz konano izraenog suelja prilagoavat e se karakteristikama

korisnikovog ureaja pomou Modernizr JavaScript biblioteke (eng. library) koja

nudi mogunost detekcije tzv. touch znaajki (eng. features) Web preglednika,

to je osnovna karakteristika mobilnih ureaja.

Prvi korak pri izradi suelja je planiranje i grafiko oblikovanje pojedinih

elemenata te definiranje svrhe, cilja i konanih funkcionalnosti.

Slijedi prikaz planiranih karakteristika suelja:

40

Tablica 3.1. Prikaz planiranih grafikih i funkcionalnih karakteristika suelja kontakt formulara

Naziv suelja / aplikacije Kontakt formular

Svrha Slanje e-mail poruka na unaprijed odreenu

adresu, posredstvom Web suelja

Ope karakteristike

Jednostavnost

Vizualna atraktivnost

Visok stupanj korisnikog doivljaja (eng.

UX)

Dosljednost u koritenju grafikih elemenata

i posebnih funkcionalnosti

Kompatibilnost s modernim Web

preglednicima

Prilagoavanje prikaza karakteristikama

zaslona mobilnih ureaja

Tehnike karakteristike

Oblikovanje bez uporabe tablica (eng.

tableless design)

Izvorni kod (eng. source code) baziran na

XHTML 1.1 Strict i CSS 2.1 jeziku

Uporaba posebnih stilskih CSS3 definicija

(zaobljeni rubovi, sjene)

Uporaba jQuery v 1.7.2 radnog okvira (eng.

framework) i Modernizr biblioteke (eng.

library)

Provjera korisnikovih unosa (eng. input

validation) pomou vlastitih JavaScript

funkcija i funkcija jQuery radnog okvira

Prosljeivanje upisanih vrijednosti formulara

server side datoteci posredstvom jQuery

41

AJAX funkcije, POST metodom

Detekcija touch znaajki (eng. features)

korisnikovog Web preglednika u svrhu

prilagodbe irine pojedinih elemenata

suelja

Raspored elemenata

suelja

Zaglavlje sadri naziv suelja / aplikacije

Sadraj:

Formular sadri slijedee elemente:

Paragraf:

Naziv polja (label)

Polje za unos (input ili textarea)

Obavijest (span)

Paragraf:

Gumb za konanu predaju

podataka (input type=submit)

Nazivi polja za unos,

kratak opis i vrsta

pripadajueg polja

Ime input type=text

Korisnikovo ime, ime i prezime ili

nadimak

E-mail input type=text

Korisnikova e-mail adresa

Telefon input type=text

Korisnikov broj telefona

Adresa input type=text

Korisnikova fizika adresa

Web site input type=text

Adresa korisnikovog Web site-a

Poruka textarea

Korisnikova poruka

42

Poalji input type=submit

Gumb (eng. button) za prosljeivanje

unesenih podataka server side datoteci

Obavezna polja

Ime

E-mail

Poruka

Izgled obaveznog polja i

pripadajue poruke u

poetnom stanju

Izgled obaveznog polja i

pripadajue poruke pri

neuspjeno provedenoj

provjeri unosa

Izgled obaveznog polja i

pripadajue poruke pri

uspjeno provedenoj

provjeri unosa

Parametri provjere unosa Prazna polja

Neispravna e-mail adresa

Parametri ovisni o vrsti

ureaja

irina (eng. width) osnovnog div kontejnera

klase sadrzaj

irina (eng. width) submit gumba (eng.

submit button) kontakt formulara

43

Slijedi idejno grafiko rjeenje suelja izraeno pomou Adobe

Photoshop grafikog ureivaa (eng. editor):

Slika 3.1. Prikaz grafikog idejnog rjeenja korisnikog suelja kontakt formulara, izraeno pomou Adobe Photoshop grafikog ureivaa (eng. editor)

44

Prikazano statino grafiko rjeenje potrebno je pretvoriti u funkcionalan

HTML dokument. Stoga, slijedei korak je izdvajanje pozadina i analiza

pojedinih segmenata suelja u svrhu definiranja osnovne HTML strukture i

pripadajuih CSS definicija.

Izradu funkcionalnog formulara zapoinjemo zadavanjem osnovne

strukture HTML dokumenta, bez pripadajuih stilova.

Slika 3.2. Prikaz osnovne strukture suelja kontakt formulara, bez apliciranih CSS stilskih definicija

Slijedi HTML kod prikazane HTML stranice:

Kontakt formular Kontakt formular

45

Ime: * Obavezno! E-mail: * Obavezno! Telefon: Adresa: Web site: Poruka: * Obavezno!

Izvorni kod 3.11. Prikaz HTML koda osnovne strukture suelja kontakt formulara

Iz priloenog izvornog koda moemo vidjeti kako je cijeli sadraj stranice

smjeten u kontejner kako bi mogli jednostavno

ugraditi sustav automatske prilagodbe sadraja veliini zaslona korisnikovog

ureaja. Kontakt formular smo formirali pomou prethodno definiranih ,

46

, i elemenata te odreena polja oznaili prikladnim id="" i name="" atributima u svrhu kasnije implementacije potrebnih funkcionalnosti.

Slijedei korak je odreivanje CSS stilova u skladu s grafikim idejnim

rjeenjem. Postupak oblikovanja suelja zapoet emo oblikovanjem zaglavlja

(eng. header) stranice. Prema predloku, zaglavlje treba imati oblik prikazan

slijedeom slikom:

Slika 3.3. Prikaz grafikog idejnog rjeenja zaglavlja stranice

Struktura zaglavlja definirana je slijedeim HTML kodom:

Kontakt formular

Izvorni kod 3.12. Prikaz HTML koda zaglavlja stranice

U svrhu postizanja eljenog grafikog oblika, klasi zaglavlje

(class="zaglavlje") potrebno je dodijeliti slijedei CSS kod:

.zaglavlje { padding: 15px; line-height: 45px; text-shadow: 1px 1px 1px white; background: #66b723; border-top-left-radius: 10px; border-top-right-radius: 10px; height: 45px; } h1 { text-shadow: 1px 1px 1px #2A2A2A; color: #FFF; }

Izvorni kod 3.13. Prikaz CSS definicija zaglavlja stranice

47

Prikazani kod upisujemo u style.css datoteku koju definiramo u

segmentu stranice na slijedei nain:

Izvorni kod 3.14. Definiranje vanjske style.css datoteke pomou HTML link taga

Slijedei korak je definiranje CSS stilova za pojedine elemente formulara:

form { background: url('img/top-content-bg.png') repeat-x top; padding: 15px 15px 0 15px; } p { padding-bottom: 15px; color: #777; } label { padding-bottom: 10px; display: block; color: #614b30; } input[type="text"], textarea { width: 100%; padding: 10px; -moz-border-radius: 3px; border-radius: 3px; } input[type="submit"] { width: 100%; height: 40px; color: #FFF; font-weight: bold; border: none; cursor: hand; background: url('img/button-bg.png') repeat-x top; -moz-border-radius: 5px; border-radius: 5px; } input[type="submit"]:hover { background:#483621; }

48

textarea { height: 100px; } .obavijest { display: block; padding: 5px 0 5px 0; font-size: 8pt; } .crveno { color: #C61B1B; } .normalno { border: solid 1px #999; background: url('img/input-bg.png') repeat-x top; color: #555; } .greska { border: 1px solid #C00; background: #FCF0EF url('img/error-bg.png') repeat-x top; color: #C00; } .uspjeh { border: 1px solid #9DB832; background: #F3F8E0 url('img/uspjeh-bg.png') repeat-x top; color: #9DB832; } .poruka { width: auto; height: 45px; line-height: 45px; color: #417814; margin-top: 15px; padding-left: 15px; -moz-border-radius: 5px; border-radius: 5px; }

Izvorni kod 3.15. Definiranje CSS stilova pojedinih elemenata kontakt formulara

Osim prikazanog koda, u CSS datoteku potrebno je dodati i definicije

koje formatiraju stranicu, definiraju eljeni font te ponitavaju zadane (eng.

default) postavke HTML elemenata.

49

* { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; } body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } .sadrzaj { margin: 0 auto; padding: 15px 15px 0 15px; }

Izvorni kod 3.16. Definiranje CSS stilova za ponitavanje zadanih (eng. default) postavki HTML

elemenata te formatiranje osnovnog div kontejnera klase sadrzaj

Klasa normalno (.normalno) definira poetno stanje input polja formulara, pa ju je potrebno povezati s pripadajuim poljima na slijedei nain:

Izvorni kod 3.17. Povezivanje input polja formulara sa eljenom klasom naziva normalno

Nakon apliciranja prikazanih CSS definicija, stranica s kontakt

formularom poprima slijedei izgled:

50

Slika 3.4. Prikaz HTML dokumenta s pripadajuim kontakt formularom nakon apliciranja eljenih CSS definicija

51

Slijedei korak je izrada sustava provjere upisanih vrijednosti, to emo

izvesti izradom vlastitih JavaScript funkcija, uz pomo jQuery radnog okvira

(eng. framework).

Kako bi mogli koristiti mogunosti jQuery radnog okvira, u

segmentu stranice moramo definirati putanju (eng. path) do jquery.js datoteke

na slijedei nain:

Izvorni kod 3.18. Definiranje putanje jquery.js datoteke, u head segmentu HTML stranice

Navedenu datoteku preuzeli smo sa slubenog Web site-a jQuery

projekta (http://code.jquery.com/jquery-1.7.2.js) te u svrhu dobre organizacije

potrebnih datoteka smjestili ju u js direktorij.

Slijedei korak je izrada kontakt-formular.js datoteke u koju emo

smjestiti cjelokupan JavaScript kod potreban za provjeru unosa i kasniju

predaju podataka server side datoteci. Putanju do navedene datoteke takoer

je potrebno upisati u segment stranice na prikazani nain:

Izvorni kod 3.19. Definiranje putanje kontakt-formular.js datoteke, u head segmentu HTML

stranice

Osim klasinih parametara, u prikazani kod ukljuen je i atribut

charset="utf-8" kako bi se posebni znakovi upisani u datoteku prikazali na

valjani nain. Navedeno se posebno odnosi na dijakritike znakove , , , ,

. U svrhu valjanog prikaza dijakritikih znakova u svim segmentima stranice,

charset je potrebno definirati i kao meta (hrv. opisni) tag na slijedei nain:

Izvorni kod 3.20. Definiranje UTF-8 charseta posredstvom opisnog (eng. meta) taga

52

Meta tagovi se definiraju u segmentu HTML stranice.

Slijedi prikaz JavaScript koda potrebnog za provjeru unosa:

$(document).ready(function() { function validateEmail(email){ var a = document.getElementById(email).value; var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; if(filter.test(a)){ return true; } else{ return false; } } var obavijest = $('.obavijest'); obavijest.html("* Obavezno!"); $('#posalji').click(function() { var hasError = false; obavijest.html("* Obavezno!"); var ime = $("input#ime"); if ((ime.val() == "") || (ime.val() == "Ime")) { ime.removeClass('uspjeh').addClass('greska').focus(); isFocus=1; hasError = true; ime.next().html("Polje je obavezno!"); return false; } else { ime.addClass('uspjeh').focus(); } var email = $("input#email"); if ((email.val() == "") || (email.val() == "Email")) { email.removeClass('uspjeh').addClass('greska').focus(); isFocus=1; hasError = true; email.next().html("Polje je obavezno!"); return false; } else {

53

email.addClass('uspjeh').focus(); } if(!validateEmail('email')) { email.removeClass('uspjeh').addClass('greska').focus(); isFocus=1; email.next().html("Neispravan format email adrese!").fadeIn(1500); hasError = true; return false; } var poruka = $("textarea#poruka"); if ((poruka.val() == "") || (poruka.val() == "Poruka")) { poruka.removeClass('uspjeh').addClass('greska').focus(); isFocus=1; hasError = true; poruka.next().html("Polje je obavezno!"); return false; } else { poruka.addClass('uspjeh').focus(); } return false; }); });

Izvorni kod 3.21. Prikaz JavaScript koda potrebnog za provjeru unosa (eng. input validation)

Apliciranjem prikazanog JavaScript koda, kontakt formular je poprimio

eljene funkcije provjere unosa.

U poetnom stanju, sva obavezna polja su slijedeeg izgleda:

Slika 3.5. Prikaz input type=text polja formulara u poetnom stanju

Ukoliko jedno ili vie obaveznih polja pri predaji podataka ne sadri

potreban unos, odnosno nije ispunjeno, sustav aplicira klasu crveno (.crveno) problematinom polju i ispisuje prikladnu obavijest.

54

Slika 3.6. Prikaz input type=text polja formulara nakon detekcije pogreke

Polje e-mail podlijee dodatnoj provjeri valjanosti upisane e-mail adrese.

Naime, sustav ne doputa predaju podataka sve dok e-mail adresa ne sadri

sve potrebne karakteristine parametre, kao to su naziv primaoca, monkey

znak (@), toka (.), naziv domene i vrna domena, odnosno upisana adresa

mora biti oblika primaoc@naziv-domene.vrna-domena (npr. marko.cacic

@gmail.com).

Slika 3.7. Prikaz input type=text e-mail polja formulara nakon detekcije pogreke

Nakon to se prepoznate greke isprave, pri ponovnoj predaji podataka,

oznaenim poljima se uklanja klasa crveno (.crveno) i aplicira klasa zeleno (.zeleno) pa stoga poprimaju slijedei izgled:

Slika 3.8. Prikaz input type=text polja formulara nakon ispravke pogreke

Slijedei korak je izrada sustava za predaju unesenih podataka server

side datoteci i konano slanje na odabranu e-mail adresu.

Navedenu funkcionalnost emo ostvariti koritenjem jQuery AJAX

funkcije, na slijedei nain:

if(!hasError) { var dataString = 'ime='+ $('#kontakt-formular #ime').val() + '&email=' + $('#kontakt-formular #email').val() + '&telefon=' + $('#kontakt-formular #telefon').val() + '&adresa=' + $('#kontakt-formular #adresa').val() + '&website=' + $('#kontakt-formular

55

#website').val() + '&poruka=' + $('#kontakt-formular #poruka').val() + '&website='; $.ajaxSetup ({ cache: false }); var url = 'php/mail.php' $.ajax({ type: 'POST', url: url, data: dataString, success: function(){ $('div.poruka-uspjeh').fadeIn(); $('#kontakt-formular').slideUp("slow", function() { $(this).before('Hvala! Poruka je uspjeno poslana!'); }); }, }); } Izvorni kod 3.22. Prikaz JavaScript koda za predaju unesenih podataka server side datoteci

Prikazani kod funkcionira tako to provjerava postoji li greka u unosu

posredstvom varijable hasError te ukoliko ne postoji, prilagoava prikupljene

podatke i POST metodom ih prosljeuje server side datoteci naziva mail.php,

koju emo pri izradi smijesiti u php direktorij. Ukoliko se komunikacija s mail.php

datotekom uspjeno provede, formular nestaje popraen animacijom sporog

povlaenja (.slideUp("slow")) te se ispisuje poruka o uspjehu.

Server side datoteka izraena je pomou PHP programskog jezika te

sadri slijedei kod:

56

$poruka_slanje.= "E-mail: ".$email."\r\n"; $poruka_slanje.= "Telefon: ".$telefon."\r\n"; $poruka_slanje.= "Adresa: ".$adresa."\r\n"; $poruka_slanje.= "Website: ".$website."\r\n\n"; $poruka_slanje.= "Poruka: \n".$poruka."\r\n\n"; $poruka_slanje.= "Lijep pozdrav,\r\n"; $poruka_slanje.= $ime; $zaglavlje = 'MIME-Version: 1.0' . "\r\n"; $zaglavlje.= 'Content-type: text/plain; charset=UTF-8' . "\r\n"; mail($prima, $tema, $poruka_slanje, $zaglavlje); ?>

Izvorni kod 3.23. Prikaz PHP koda za prihvat unosa formulara i slanje na konanu e-mail

adresu

Prikazani kod prikuplja unose proslijeene AJAX POST metodom i

sprema ih u varijable prikladnog naziva. Konaan izgled poruke generira se

pridruivanjem prikladnog teksta i vrijednosti pojedinih varijabli u jedinstvenu

varijablu naziva $poruka_slanje. Konana poruka alje se mail() funkcijom na

adresu definiranu $prima varijablom, u prikazanom sluaju na

marko.cacic@gmail.com.

Pri uspjenom slanju poruke posredstvom izraenog formulara, sustav

prikazuje poruku o uspjehu, uz zadran prikaz zaglavlja stranice, dok su polja

formulara uklonjena prikladnom animacijom.

Slika 3.9. Prikaz obavijesti o uspjeno poslanoj e-mail poruci

Slijedi konaan izgled pristigle e-mail poruke:

57

Slika 3.10. Izgled pristigle e-mail poruke

Kako bi konano izraeno suelje u potpunosti odgovaralo standardima

modernog Web 2.0 okruenja, kvaliteta prikaza i korisnikog doivljaja mora biti

podjednaka na to je mogue vie razliitih ureaja. Stoga, koristei Modernizr

JavaScript biblioteku, potrebno je implementirati mogunost provjere tzv. touch

znaajki korisnikovog Web preglednika, to je osnovna karakteristika modernih

mobilnih ureaja.

Stoga, kako bi mogli koristiti mogunosti Modernizr biblioteke, u

segmentu stranice moramo definirati putanju (eng. path) do

modernizr.js datoteke na slijedei nain:

Izvorni kod 3.24. Definiranje putanje modernizr.js datoteke, u head segmentu HTML stranice

Navedenu datoteku preuzeli smo sa slubenog Web site-a Modernizr

projekta (http://modernizr.com/downloads/modernizr-2.5.3.js) te ju smjestili u js

direktorij.

Slijedi ugradnja funkcije koja e prepoznati touch znaajke i ovisno o vrsti

korisnikovog ureaja, odnosno Web preglednika, aplicirati width (hrv. irina)

parametar na eljene elemente suelja. Kako bi praktinije mogli upravljati

irinom div kontejnera klase sadraj, uklonit emo trenutnu definiciju irine

definiranu u CSS datoteci.

58

Slijedi prikaz koda kojim upravljamo irinom eljenih elemenata ovisno o

tou