sveuČiliŠte u zagrebu grafiČki fakulteteprints.grf.unizg.hr/930/1/db104_Čačić_marko.pdf ·...
TRANSCRIPT
-
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
http://code.jquery.com/jquery-1.7.2.js
-
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 [email protected] (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
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.
http://modernizr.com/downloads/modernizr-2.5.3.js
-
58
Slijedi prikaz koda kojim upravljamo iri