izgradnja web aplikacija - iwapitup.files.wordpress.com · 15 prof.dr.sc. d.kermek, fakultet...
TRANSCRIPT
Izgradnja Web aplikacijaIzgradnja Web aplikacija
Prof. dr.sc. Dragutin KermekSveučilište u Zagrebu
Fakultet organizacije i informatike
Pavlinska 2, Varaždin 42000
6. dio
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin2Izgradnja Web aplikacija - FOI
Osnovni izvor: http://www.webstyleguide.com/
Patrick J. Lynch and Sarah Horton: Web Style Guide, 3rd Edition
Stil dizajna i razvoj Web mjesta
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin3Izgradnja Web aplikacija - FOI
Proces dizajna.
Prvi korak u dizajniranju Web mjesta je definiranje ciljeva.
Bez jasno postavljene misije i svrhe-ciljeva projekt može zalutati, zapeti ili nastaviti nakon prikladne točke kraja.
Pažljivo planiranje i jasna svrha-namjera ključni su u izgradnji Web mjesta, posebno kada se posao obavlja u timu.
Planiranje Web mjesta je proces s dva dijela:
1. Sakupljanje partnera, analiza potreba i ciljeva, rad na dotjerivanju vlastitih planova
2. Kreiranje dokumenta sa specifikacijom koji sadrži detalje o tome štose misli raditi i zašto, koja tehnologija je potrebna, koji sadržaji su potrebni, trajanje procesa, troškovi, kako će se procjeniti rezultati provedenih napora. Taj dokument je posebno bitan za kreiranje uspješnog Web mjesta te je nacrt-plan procesa i mjerilo koje će se koristiti za fokusiranje projekta prema dogovorenim ciljevima i isporukama.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin4Izgradnja Web aplikacija - FOI
Web razvojni tim
Web projekt nije projekt jedne osobe nego cijelog tima.
Ključne vještine za web razvojni tim su:
• strategija i planirane
• upravljanje projektom
• informacijska arhitektura i dizajn korisničkog sučelja
• grafički dizajn za web
• Web tehnologija
• produkcija web mjesta.
Kod manjih projekata neke vještine pokrivat će jedna osoba, dok će kod specijaliziranih područja vještina taj doprinos dolaziti od vanjskih suradnika projektnog tima.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin5Izgradnja Web aplikacija - FOI
Uloge i odgovornosti web razvojnog tima
Ključne uloge i odgovornosti web tima kod velikih web projekata su:
• dionik projekta ili sponzor
• voditelj Web projekta
• računovođa
• tester osiguranja kvalitete
• voditelj za korisnosti/upozrebljivost
• informacijski arhitekt
• umjetnički direktor
• web grafički dizajner
• dizajner interaktivnih elemenatar (Flash, JavaScript, Ajax)
• specijalist medija (fotografija, ilustracije, audiovizujalni elementi, Adobe Flash)
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin6Izgradnja Web aplikacija - FOI
Uloge i odgovornosti web razvojnog tima
• voditelj web tehnologije
• web aplikacijski programer (.Net, Java, php/Perl, Ruby)
• inženjer web stranice (xhtml, css, JavaScript, Ajax)
• administrator baza podataka
• webmaster
• voditelj produkcije mjesta
• sastavljač (koder) html stranice
• urednik mjesta
• voditelj autorskih prava za mjesto
• ekspert domene (koordinacija sadržaja, istraživanja).
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin7Izgradnja Web aplikacija - FOI
9 Garrett-ovih stupova uspješnih web timova
http://www.webstyleguide.com/wsg3/1-process/3-web-teams.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin8Izgradnja Web aplikacija - FOI
9 Garrett-ovih stupova uspješnih web timova
1. Istraživanje korisnika: korisniku usmjeren dizajna znači razumijeti što korisnici trebaju, kako oni razmišljaju i kako se ponašaju – i uključivanje tog razumijevanja u svaki aspekt procesa. Korisničko istraživanje pruža sirova promatranja koja hrani taj pogled na ljude koje treba posluživati web mjesto.
2. Strategija mjesta: određivanje vlastitih ciljeva za mjesto može biti teško. Počinje od zajedničkog razumijevanja svrhe web mjesta za organizaciju, kako će se postaviti prioriteti različitih ciljeva web mjesta i sredstva putem kojih će se mjeriti uspjeh web mjesta.
3. Tehnološka strategija: web mjesta tu tehološki složena i s vremenom postaju sve zamršenija. Identificiranje tehnološke strategija za mjesto (platforma, standardi, tehologije i kako one mogu djelovati) bitno je da se izbjegnu skupe pogreške.
4. Strategija sadržaja: sadržaj je obično razlog zašto korisnici dolaze na web mjesto. Koji sadržaj treba ponuditi da se zadovolje očekivanja korisnika? Koliko je sadržaj prikladan i koj oblik treba imati? Koji stil ili ton treba imati? Prije nego što se proizvede sadržaj, potrebno je odgovoriti na temeljena pitanja strategije sadržaja.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin9Izgradnja Web aplikacija - FOI
9 Garrett-ovih stupova uspješnih web timova
5. Apstraktni dizajn: informacijska arhitektura i dizajn interakcije prevode strateške ciljeve u konceptualni okvir za krajnje korisničko iskustvo. Te dolazeće discipline koje se odnose na apstraktni dizajn ubrzano su prepoznate zbog svoje vrijednosti u procesu web razvoja.
6. Tehnološka implementacija: izgradnja tehničkih sustava uključuje mnogo teškog rada i specijalizirana znanja: jezici i protokoli, programiranje i pronalaženje i ispravljenje pogrešaka, testiranje i pročišćavanje. Što je složenije mjesto, važnija postaje kompetencija u tehnološkoj implementaciji.
7. Proizvodnja sadržaja: nije dovoljno znanje koji sadržaj je potreban. Treba znati kako ga proizvesti. Sakupljenje sirovih informacija, pisanje i uređivanje, određivanje uredničkog radnog tijeka i odobravanje, sve su djelovi prozvodnje sadržaja.
8. Konkretni dizajn: prije nego što apstraktni dizajn postane potpuno realizirano korisničko iskustvo, potrebno je odrediti specifične detalje cučelja, navigacije, informacijskog dizajna i vizualnog dizajna. Ovo područje konkretnog dizajna bitno je za kreiranje konačnog proizvoda.
9. Upravljanje projektom: mjesto koje zajedno povezuje sve taktičke kompetencije kao i motor koji vodi projekt prema završetku, upravljenje projektom zahtjeva visokospecijalizirani skup vještina za sebe. Zanemativanje tog područja često završi u prekoračenju rokova i troškova.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin10Izgradnja Web aplikacija - FOI
9 Garrett-ovih stupova uspješnih web timova
http://www.webstyleguide.com/wsg3/1-process/3-web-teams.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin11Izgradnja Web aplikacija - FOI
Planiranje
Web mjesta razvijani su od grupa osoba koje ispunjavaju potrebe drugih grupa osoba.
Web projektima se, na žalost, često pristupa kao “tehnologijskom problemu” tako da su projekti od samog početka obojeni entuzijazmom za pojedinačnu Web tehniku ili umetcima pregledika (flash, Ajax, XML, baze podataka i dr).
Zbog toga nisu dominantne ljudske ili poslovne potrebe.
Ljudi su ključ uspješnih Web projekata.
Za kreiranje složenog Web mjesta potrebni su eksperti za sastavljanje sadržaja, pisci, informacijski arhitekti, grafički dizajneri, tehnički eksperti, producent ili voditelj odbora koji je zadužen za nadgledavanje projekta do završetka.
Premda ocjenu uspješnosti projekta daju njegovi stvarni korisnici, njih se vrlo rijetko uključuje u postupak dizajniranja i izgradnje.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin12Izgradnja Web aplikacija - FOI
Planiranje / 2.
Temelj dizajna Web mjesta treba biti kratka izjava kojom se identificira 2 do 3 cilja. Izjava treba sadržavati specifične strategije oko kojih će se dizajnirati Web mjesto, trajanje dizajna, konstrukcije i evaluacije, specifične kvantitativne i kvalitativne mjere kako će se procijeniti uspjeh projekta.
Potrebno je identificirati potencijalne čitatelje/korisnike Web mjesta na temelju čega se može strukturirati dizajn Web mjesta tako da ispune želje i očekivanja.Dizajn Web mjesta treba gledati s pozicije njegovih korisnika.
Slijedi procjena sadržaja koji su potrebni za realizaciju planova.
Sastavljanje sadržaja je najteži i vremenski najzahtjevniji dio razvojnog projekta Web mjesta.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin13Izgradnja Web aplikacija - FOI
Razvoj specifikacije Web mjesta
Specifikacija Web mjesta sažeta je izjava tima za planiranje u kojem se navode glavni ciljevi, vrijednosti i namjera da se pruža konačna smjernica za sve što slijedi.
Kao minimum, dobra specifikacija treba definirati doseg sadržaja, budžet, raspored i tehničke aspekte Web mjesta.
Ciljevi i strategije:
•Koja je misija organizacije?
•Kako će kreiranje Web mjesta podržati misiju?
•Koja su 2-3 najvažnija ciljeva za Web mjesta?
•Tko je primarna publika za Web mjesta?
•Što želite da publika misli ili učini nakon što razgleda Web mjesta?
•Koje će se Web usmjerene strategije koristiti za postizanje ciljeva?
•Kako će se mjeriti uspjeh Web mjesta?
•Kako će se održavati završeno Web mjesto?
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin14Izgradnja Web aplikacija - FOI
Razvoj specifikacije Web mjesta / 2.
Produkcijski problemi:
•Koliko će stranica sadržavati Web mjesto?
•Koji je maksimalno prihvatljivi broj stranica unutar budžeta?
•Koji su potrebni posebni tehnički ili funkcijske zahtjevi?
•Koji je buđet za Web mjesta?
•Koji je proizvodni raspored za Web mjesto, uključujući posredne prekretnice i datume?
•Tko su osobe ili dobavljači u razvojnom timu i koje su njihoveodgovornosti?
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin15Izgradnja Web aplikacija - FOI
Proces razvoja Web mjesta
Svaki značajni Web projekt sadrži jedinstvene izazove ali opći proces razvoja složenog Web mjestaa generalno slijedi sljedeće 6 faze:
1. Definiranje i planiranje Web mjesta
2. Informacijska arhitektura
3. Dizajn Web mjesta
4. Konstrukcija Web mjesta
5. Marketing Web mjesta
6. Praćenje, ocjena i održavanje.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin16Izgradnja Web aplikacija - FOI
Definiranje i planiranje Web mjesta
To je inicijalna faza u kojoj se određuju ciljevi i svrhe Web mjesta te se počinje sa sakupljanjem i analizom informacija koje su potrebne za pravdanje budžeta i potrebnih resursa.
Definira se područje sadržaja Web mjesta, interaktivna funkcionalnost i potrebna tehnološka podrška, dubina i širina informacijskih resursa koji će biti potrebni za punjenje Web mjesta i ispunjenje čitateljevih očekivanja.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin17Izgradnja Web aplikacija - FOI
Definiranje i planiranje Web mjesta / 2.
Proizvodnja:
•Hoće li tim biti sastavljen od ljudi iz kuće, vajskih osoba pod ugovorom ili miješano?
•Tko će upravljati procesom?
•Tko su primarni eksperti za sadržaj?
•Tko će biti veza za vanjske ugovaratelje?
•Tko će dugoročno biti webmaster ili stariji urednik Web mjesta?
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin18Izgradnja Web aplikacija - FOI
Definiranje i planiranje Web mjesta / 3.
Tehnologija:
•Koje će preglednike i operacijske sustave podržavati Web mjesto?
•Windows, UNIX, Linux, Mac
•Netscape Navigator, IExplorer, Opera
•Širina mrežnog pojasa prosječnog posjetitelja?
•Interna publika ili dominantno vanjska publika
•Ethernet ili jako-brze veze tipične za korporacijske urede
•ISDN ili DSL srednje brze veze tipične za obiteljske kuće
•Modemske veze za ruralnu, međunarodnu ili siromašniju publiku
•Dinamički HTML i napredne osobine?
•Treba JavaScript
•Treba Java applet-e, Flash i sl.
•Treba stilske upute (CSS)
•Treba umetke za preglednike
•Treba posebne osobine za UNIX-a ili Windows NT serverske okoline
•Treba posebnu zaštitu ili povjerljive osobine
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin19Izgradnja Web aplikacija - FOI
Definiranje i planiranje Web mjesta / 4.
•Kako će čitatelji kontaktirati osoblje za podršku?
•Email poruke
•Brbljaonice, forumi, help desk, telefon
•Baza podataka?
•Potrebna je autentikacija korisnika za ulaz u bilo koje područje Web mjesta
•Potrebni su upitnici?
•Potrebno je pretraživanje iz baze podataka?
•Audiovizualni sadržaj?
•Video ili audio produkcije?
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin20Izgradnja Web aplikacija - FOI
Definiranje i planiranje Web mjesta / 5.
•Potpora Web poslužitelja?
•Vlastiti Web poslužitelj ili prebačeno kod ISP
•Jednoznačnost naziva domena
•Diskovni prostor ili promet Web mjesta ili dodatni troškovi
•Dovoljni kapaciteti da zadovolje zahtjeve prometa
•24/7 podrška i održavanje
•Statistika korisnika i prometa Web mjesta
•Analiza dnevnika poslužitelja: vlastita ili vanjska
•Prikladnost pretraživača za sadržaj
•Raspoloživa podrška za CGI, programiranje, baze podataka
•Podrška za bazu podataka ili koordinacija s osobljem iz tvrtke
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin21Izgradnja Web aplikacija - FOI
Definiranje i planiranje Web mjesta / 6.
•Budžet•Plaće i koristi od osoblja razvoja (kratko trajanje) i osoblja uredništva i podrške (dugo trajanje)
•HW i SW za članove vlastitog razvojnog tima
•Trening osoblja za korištenje Web-a, baza podataka, Web marketinga, Web dizajna
•Naknade za vanjske suradnike
•Dizajn i razvoj Web mjesta
•Tehničko konzultiranje
•Razvoj baze podataka
•Merketing Web mjesta.
•Osoblje za podršku Web mjesta (u dolasku)
•Urednik ili webmaster
•Podrška za poslužitelj i tehnička pitanje
•Novi razvoj sadržaja i ažuriranje
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin22Izgradnja Web aplikacija - FOI
Informacijska arhitektura
U kontekst web dizajna informacijska arhitektura opisuje cjelokupne konceptualne modele i opće dizajne koji se koriste za planiranje, strukturiranje i sastavljenje web mjesta.
Svako web mjesto ima informacijsku arhitekturu, ali tehnike informacijske arhitekture posebno su važne kod velikih, složenih web mjesta gdje su primarni ciljevi:
• organizirati sadržaj web mjesta u taksonomije (klasifikacije) i hijerarhije informacija
• prenijeti konceptualne prikaze i cjelokupnu organizaciju web mjesta timu za dizajn i klijentima
• postaviti standarde i specifikacije za html semantičko označavanje, te formatiranje i rad s tekstualnim sadržajem
• dizajnirati i implementirati standarde i strategije za optimizaciju pretraživanja.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin23Izgradnja Web aplikacija - FOI
Informacijska arhitektura
Informacijska arhitektura uključuje široko područje disciplina dizajna i planiranja, a granice između informacijske arhitekture, tehničkog dizajna, korisničkog sučelja i grafičkog dizajna zamučene su potrebom da svi ti dijelovi prakse surađuju u proizvodnji kohezivnog i konzistentnog ispustva za korisnike web mjesta.
Arhitekture je prikladna metafora za sastavljanje višedimenzionalnog prostora informacija kojeg dijele mnogi korisnici pri čemu temeljna struktura infomacija treba biti prvo postavljena prije nego što specifičnije discipline kao dizajna sučelja i grafički dizajn mogu efikasno djelovati.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin24Izgradnja Web aplikacija - FOI
Informacijska arhitektura
U velikom web projektu uloga informacijskog arhitekta vjerojatno će biti popunjena osobom s dugim iskustvom u organiziranju i prezentiranju informacija, posebno za web. U mnogim projektima informacijska arhitektura web mjesta postaje zajednički projekt timova za dizajn, uredništvo i tehniku.
Bez obzira kako se uloga popunjava, zadaci informacijske arhitekture čine važan planski most između opće diskusije o ciljevima i publici, te specifičnog dizajna, korisničkog sučelja i tehničkih rješenja koja će se koristiti u završenim dizajnima.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin25Izgradnja Web aplikacija - FOI
Informacijska arhitektura
Osnovni koraci u organiziranju informacija:
• inventura sadržaja: što se ima? što je potrebno?
• uspostavljenje hijerarhijskog izgleda za sadržaj i kreiranje kontroliranog rječnika tako da se glavni sadržaj, struktura mjesta i elementi navigacije uvijek mogu konzistentno identificirati
• cjepanje – podijeli sadržaj u logičke cjeline s konzistentnom modularnom strukturom
• nacrtaj dijagrame koji prikazuju strukturu mjesta i grubo skiciraj stranice s listom glavnih navigacijskih veza
• analiziraj sustav kroz interaktivno testiranje organizacije sa stvarnim korisnicima, revidiraj po potrebi.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin26Izgradnja Web aplikacija - FOI
Informacijska arhitektura
U ovoj fazi potrebno je odrediti detalje sadržaja i organizacije Web mjesta. Tim treba popisati sav postojeći sadržaj, opisati koji se novi sadržaj zahtjeva i definirati organizacijsku strukturu Web mjesta.
Nakon skiciranja arhitekture sadržaja mogu se razvijati mali prototipovi dijelova Web mjesta s ciljem testiranja kako će se osjećati tijekom dizajna.
Razvoj prototipova Web mjesta korisno je iz dva razloga:
1. Oni su najbolji za testiranje navigacije i razvoja korisničkog sučelja
2. Kreiranje prototipova dopušta dizajnerima da razviju odnose između izgleda Web mjesta i kako navigacijsko sučelje podržava informacijski dizajn
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin27Izgradnja Web aplikacija - FOI
Informacijska arhitektura / 2.
Tipični rezultati ili ugovorene isporuke na kraju ove faze uključuju:
• Detaljnu specifikaciju dizajna Web mjesta
• Detaljni opis sadržaja Web mjesta
• Mape Web mjesta, natuknice, kratki pregled, sadržaj
• Detaljnu specifikaciju tehničku podrške
• Podržanu tehnologiju preglednika
• Podržanu brzinu veze
• Resurse Web poslužitelja i ostalih posluđitelja
• Preporuke za programiranje ili tehnologiju za podršku specifičnih osobina Web mjesta
• Raspored za implementaciju dizajna Web mjesta
• Jedan ili više prototipova s više stranica
• Više skica grafičkih dizajna i dizajna sučelja
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin28Izgradnja Web aplikacija - FOI
Informacijska arhitektura
Struktura web mjesta treba odgovarati očekivanim korisnicima i mentalnim modelima koji oni stvaraju.
Strukturne teme web mjesta mogu biti:
• slijedovi
• hijerarhije
• paučine.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin29Izgradnja Web aplikacija - FOI
Slijedovi
Najjednostavniji oblik. Slijedno uređivanje može biti kronološko, logički slijed aktivnosti, abecedno i sl.
Odgovara za trening ili edukacijska mjesta, npr. kada se od korisnika očekuje napredak kroz fiksni skup materijala i veze koje postoje samo podržavaju putanju linearne navigacije.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin30Izgradnja Web aplikacija - FOI
Slijedovi
Složenija web mjesta mogu biti organizirana u logičke slijedove s time da svaka stranica u slijedu može imati jednu ili više stranica za digresije, usputnih informacija ili informacija na drugim web mjestima.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin31Izgradnja Web aplikacija - FOI
Hijerarhije
Hijerarhije odgovaraju organizaciji složenijih web mjesta. Počinju osnovnom stranicom koja sadrži veze na stranice izbora podkategorija.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin32Izgradnja Web aplikacija - FOI
Paučine
Paučina ne postavlja granice za korištenje informacija tako da veze dopuštaju slobodan tok ideja.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin33Izgradnja Web aplikacija - FOI
Strukture
http://www.webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin34Izgradnja Web aplikacija - FOI
Prezentiranje informacijske arhitekture
http://www.webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Razne verzije dijagrama web mjesta.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin35Izgradnja Web aplikacija - FOI
Prezentiranje informacijske arhitekture
http://www.webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Žičani okvir web mjesta kao grubi proizvod dizajna korisničkog sučelja
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin36Izgradnja Web aplikacija - FOI
Prezentiranje informacijske arhitekture
http://www.webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Istraživači ljudskog sučelja pronašli su jasne skupove očekivanja o mjestu gdje se nalaze neke stavke na web stranicama
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin37Izgradnja Web aplikacija - FOI
Prezentiranje informacijske arhitekture
http://www.webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin38Izgradnja Web aplikacija - FOI
Dizajn sučelja
U knjizi The Image of the City (1960), Kevin Lynch iskovao je pojam “traženje puta” (wayfinding) za opis svog koncepta okolišne čitljivosti (environmental legibility) kojeg čine elementi izgrađenog okoliša koji nam omogućavaju da se uspješno snalazimo (navigiramo) kroz složene prostore kao što su gradovi.
Kako je temeljna metafora WWW navigacija kroz prostor popunjen mjestima koje nazivamo web mjesta, stoga metafora traženje puta izvrsno odgovara razmišljanju o web navigaciji.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin39Izgradnja Web aplikacija - FOI
Dizajn sučelja
Traženje puta ima 4 temeljne komponente:
• orijentacija: gdje sam sada?
• odluke o rutama: mogu li pronaći put do kamo želim doći?
• mentalni povezivanje: da li su moja iskustva dovoljno konzistentna i razumljiva da znam gdje sam bio i da mogu predvidjeti kamo trebam ići?
• zatvaranje: mogu li prepoznati da sam stigao na pravo mjesto?
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin40Izgradnja Web aplikacija - FOI
Dizajn sučelja
Principi za traženje puta na web mjestu:
• putanje: kreiraj konzistentne, dobro ozačenje navigacijske putove
• područja: kreiraj jedinstvane ali povezane identitete za svako područje
• čvorovi: ne zbunjuj korisnika s previše izbora na osnovnoj stranici ili na glavnim izborničkim stranicama
• znakovi: koristi konzistentne znakove u navigaciji web mjesta i grafiku za orijentaciju korisnika.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin41Izgradnja Web aplikacija - FOI
Dizajn sučelja
http://www.webstyleguide.com/wsg3/4-interface-design/2-navigation.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin42Izgradnja Web aplikacija - FOI
Dizajn sučelja
http://www.webstyleguide.com/wsg3/4-interface-design/2-navigation.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin43Izgradnja Web aplikacija - FOI
Dizajn sučelja
Korisnici Web dokumenata ne promatraju informaciju, oni međudjeluju s njima na potpuno novi način koji nema prethodnike u dizajnu papirnatih dokumenata.
Dizajn Web stranice prema konvencionalnom dizajnu dokumenta.
Koncept strukturiranja informacija najvećim dijelom danas proizlazi iz tiskanih knjiga, periodika i bibliotečnih indeksa i kataloških sustava koji su razvijeni oko tiskanih dokumenata.
Svaka osobina knjige, od sadržaja do indeksa razvijala se kroz stoljeća tako da su čitatelji raznih knjiga imali neke od sličnih organizacijskih problema koje danas imaju korisnici hipermedijskih dokumenata.
Web dokumenti prolaze fazu evolucije i standardizacije.
Web stranice razlikuju se od knjiga po tome što svakoj stranici može pristupati bez predgovora. Zbog toga Web stranica treba biti samostalnija od knjige pa će zaglavlja i podnožja biti informativnija od tiskanih stranica.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin44Izgradnja Web aplikacija - FOI
Dizajn sučelja / 2.
Najbolja strategija dizajna odnosi se na konzistentnu primjenu nekoliko temeljnih principa dizajna dokumenta u svakoj Web stranici koja se kreira.
Ti osnovni elementi dokumenta nisu složeni i nemaju gotovo ništa s Internet tehnologijom:
• Tko
• Što
• Kada
• Gdje.
Svaka Web stranica treba:
• Informativni naslov
• Identitet kreatora (autor ili institucija)
• Najmanje jednu vezu na polaznu stranicu ili stranicu izbornika
• URL polazne stranice na glavnim stranicima izbornika Web mjesta.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin45Izgradnja Web aplikacija - FOI
Dizajn sučelja / 3.
Grafičko korisničko sučelje dizajnirano je da se ljudima pruža kontrolu nad njihovim osobnim računalima.
Jasna navigacijska potpora
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin46Izgradnja Web aplikacija - FOI
Dizajn sučelja / 4.
Izbjegavati stranice u kojima nema veza (mrtva ulica)
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin47Izgradnja Web aplikacija - FOI
Dizajn sučelja - konvencije
http://www.webstyleguide.com/wsg3/4-interface-design/3-interface-design.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin48Izgradnja Web aplikacija - FOI
Dizajn sučelja / 5.
Direktni pristup
• Korisnik želi dobiti informaciju u što je manje moguće koraka
Širina pojasa i interakcija
• Korisnik neće tolerirati dugo čekanje
Jednostavnost i konzistentnost
Integritet i stabilnost dizajna
Povratna veza i dijalog
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin49Izgradnja Web aplikacija - FOI
Dizajn sučelja / 6.
Pristupačnost
• Neovisno o fizičkoj i tehnološkoj spremnosti
• Alternativna verzija (bez slika, okvira i sl)
• Korištenje CSS-a
• Smjernice pristupačnosti
• Dostojanstvena degradacija
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin50Izgradnja Web aplikacija - FOI
Dizajn sučelja / 7.
Navigacija
• Povratak i prijelaz na prethodnu i sljedeću stranicu
• Brži prijelaz na ciljnu stranicu kod velikog skupa stranica
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin51Izgradnja Web aplikacija - FOI
Struktura web mjesta
Pravilno strukturirani html (ili xhtml) dokumenti mogu sadržavati sljedeče elemente:
• strukturu html dokumenta (<head>, <body>, <div>, <span>)
• tekstualni sadržaj
• semantičko ozačavanje za prijenos značenja i strukture sadržaja (naslovi, tekst odjeljaka, liste, citati)
• vizualna prezentacija (css) da sadržaj izgleda na određeni način
• veze na audiovizualni sadržaj (gif, jpeg, ili png grafika, QuickTime ili druge medijske datoteke)
• interaktivno ponašanje (JavaScript, Ajax elementi, ili druge programske tehnike).
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin52Izgradnja Web aplikacija - FOI
Struktura web mjesta
http://www.webstyleguide.com/wsg3/5-site-structure/2-semantic-markup.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin53Izgradnja Web aplikacija - FOI
Struktura web mjesta
http://www.webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin54Izgradnja Web aplikacija - FOI
Struktura web mjesta
http://www.webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin55Izgradnja Web aplikacija - FOI
Struktura web mjesta
http://www.webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin56Izgradnja Web aplikacija - FOI
Struktura stranice i dizajn web mjesta
http://www.webstyleguide.com/wsg3/6-page-structure/3-site-design.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin57Izgradnja Web aplikacija - FOI
Predlošci stranica
http://www.webstyleguide.com/wsg3/6-page-structure/4-page-templates.html
Uvijek se počinje s radom na predlošcima internih stranica, a na kraju s početnom.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin58Izgradnja Web aplikacija - FOI
Predlošci stranica
http://www.webstyleguide.com/wsg3/6-page-structure/4-page-templates.html
S obzirom na mogući sadržaj stranica može se pripremiti više varijanti na bazi broja stupaca.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin59Izgradnja Web aplikacija - FOI
Predlošci stranica
http://www.webstyleguide.com/wsg3/6-page-structure/4-page-templates.html
S obzirom na mogući sadržaj stranica ili funkcionalnost može se pripremiti varijanta s minimalnim sučeljem.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin60Izgradnja Web aplikacija - FOI
Dizajn stranice
Traže se jasnoća, uređenost i pouzdanost u informacijskim izvorima bez obzira radi li se o tradicionalnim papirnatim dokumentima ili Web stranicama. Efektivni dizajn stranice može pribaviti to povjerenje. Prostorna organizacija grafike i teksta na Web stranici može zaokupiti čitatelje grafičkim utjecajem, usmjeriti njihovu pažnju, prioritizirati informacije koje vide te učiniti njihovu interakciju s Web stranicom ugodnijom i efikasnijom.
Grafički dizajn kreira vizualnu logiku i traži optimalni balans između vizualna dojma i grafičke informacije. Bez vizualnog utjecaja oblika, boje i kontrasta, stranice su grafički neinteresantne i neće motivirati gledatelja.
Gusti tekstualni dokumenti bez kontrasta i vizualne pomoći također se teže čitaju, posebno na ekranima relativno male rezolucije.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin61Izgradnja Web aplikacija - FOI
Dizajn stranice / 2.
Ali bez dubine i složenosti teksta, stranice s mnogo grafike također mogu razočarati korisnika zbog lošeg balansa vizualnog dojma, informacija u tekstu i interaktivnih hipermedijskih veza.
U traženju tog idealnog balansa, primarni pritisak na dizajn predstavljaju ograničenja HTML-a i granice propusnosti korisničkog pristupa, koji može biti u rasponu od sporih modema do vrlo brzih veza kao što su Ethernet ili DSL.
Vizualna i funkcionalna kontinuiranost u organizaciji Web stranice, grafičkom dizajnu i tipografiji bitni su za uvjeravanje publike da im Web mjesto nudi pravovremene, točne i korisne informacije. Pažljiv, sistematički pristup dizajnu Web stranice može pojednostaviti navigaciju, smanjiti pogreške korisnika i čitateljima učiniti jednostavnije dobijanje prednosti od informacija i osobina Web mjesta.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin62Izgradnja Web aplikacija - FOI
Dizajn stranice
http://www.webstyleguide.com/wsg3/7-page-design/2-document-design.html
Važno je prilagoditi dizajn prema osobinama korisničkog uređaja.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin63Izgradnja Web aplikacija - FOI
Dizajn stranice
http://www.webstyleguide.com/wsg3/7-page-design/2-document-design.html
Slijed elemenata u dokumentu treba pratiti njihovu važnost.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin64Izgradnja Web aplikacija - FOI
Dizajn stranice
http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html
Vizualni dizajn temelji se na funkcionalnim područjima
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin65Izgradnja Web aplikacija - FOI
Dizajn stranice / 3.
� Vizualna hijerarhija
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin66Izgradnja Web aplikacija - FOI
Dizajn stranice / 4.
� Kontrast
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin67Izgradnja Web aplikacija - FOI
Dizajn stranice
http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html
Konzistentnost je važna osobina dobrog dizajna
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin68Izgradnja Web aplikacija - FOI
Dizajn stranice / 5.
� Konzisentnost
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin69Izgradnja Web aplikacija - FOI
Dizajn stranice / 6.
� Dimenzije stranice
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin70Izgradnja Web aplikacija - FOI
Dizajn stranice / 7.
� Prostor stranice
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin71Izgradnja Web aplikacija - FOI
Dizajn stranice / 8.
Duljina stranice:
• Za određivanje pravilne duljine svake Web stranice treba balansirati 4 faktora:
1. Odnos između stranice i veličine ekrana
2. Sadržaj dokumenta
3. Očekuje li čitatelj da online pregledava sadržaj ili ispisuje na pisaču ili preuzima dokument za kasnije čitanje
4. Brzina veza kod publike.
• Pitanje kretanja po Web stranici:
• scroll – kretanje po sadržaju s pogledom u veličini ekrana
• indeks elemenata
• skok na početak, kraj
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin72Izgradnja Web aplikacija - FOI
Dizajn stranice / 9.
� Rešetka dizajna stranice
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin73Izgradnja Web aplikacija - FOI
Dizajn stranice / 10.
Zaglavlja i podnožja:• Zaglavlja Web stranica daju identitet Web mjesta.
• Podnožja Web stranica daju informaciju o porijeklu i starosti stranice.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin74Izgradnja Web aplikacija - FOI
Dizajn stranice / 11.
Izgled:
• Fleksibilnost dizajna
• CSS vrlo koristan način postavljanja osobina elemenata Web stranice
• Tablični oblik je najčešći način postavljanja izgleda stranice
• Duljina linije
• Margine
• Stupci i njihovi razmaci
• Obrub
• Odabir između fiksnog i fleksibilnog
• Razmak i poravnanje
• Bojanje pozadine
• Rad sa slikama
• Okviri
• Problem prijenosa na razne platforme
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin75Izgradnja Web aplikacija - FOI
Tipografija
Tipografija je balans i međuigra oblika slova na stranici, verbalna i vizualna jednadžba koja pomaže čitatelju da razumije oblik i upije bit sadržaja stranice.
Tipografija igra dualnu ulogu, kao verbalna i vizualna komunikacija.
Važna je uloga CSS-a.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin76Izgradnja Web aplikacija - FOI
Tipografija
Poravnanje tekstalnih blokova utječe na čitljivost.
http://www.webstyleguide.com/wsg3/8-typography/3-legibility.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin77Izgradnja Web aplikacija - FOI
Tipografija
Odnos poravnanja naslova i poravnanja bloka teksta nema veliki utjecaj na čitljivost no smatra se da je najbolje lijevo poravnanja naslova s lijevim poravnanjem bloka teksta.
http://www.webstyleguide.com/wsg3/8-typography/3-legibility.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin78Izgradnja Web aplikacija - FOI
Tipografija / 2.
� Čitljivost Izbor vrste fonta, veličine fonta, velika/mala slova, naglašavanje (bold, italic, potcrtano, boja)
Uvlačenje prvog retka u odjeljku Razmak između riječi, slova, redaka, odjeljaka Problemi prijenosa na drugu platformu
» Relativna veličina fonta» Vrsta fonta
Grafika slova» antialiased
Grafika umjesto teksta
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin79Izgradnja Web aplikacija - FOI
Urednički stil
Struktura stranice.
Naslovi i podnaslovi.
Formatitanje Web dokumenta.
Veze (naglašeno, podcrtano i sl..
Postavljanje veza.
Metoda preokrenute piramide - metoda prezentacija informacija u kojoj se najvažnije informacije, koje predstavljaju bazu piramide, prve predstavljaju, a najmanje važne (preporuke i sl. ) posljednje.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin80Izgradnja Web aplikacija - FOI
Obrasci i aplikacije
Prikupljenje podataka od korisnika, autentikacija i sl.
http://www.webstyleguide.com/wsg3/10-forms-and-applications/3-designing-web-applications.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin81Izgradnja Web aplikacija - FOI
Obrasci i aplikacije
Registracija i prijavljivanje korisnika uobičajeni su pa se mogu smatrati predlošcima.
http://www.webstyleguide.com/wsg3/10-forms-and-applications/4-design-process.html
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin82Izgradnja Web aplikacija - FOI
Grafika
Osobine Web grafike:
•Ekran u boji
•Broj piksela i dubina boje.
•Rezolucija
•Gamma (stupanj kontrasta između srednjih sivih vrijednosti na slici.)
•Grafika i brzina prijenosa.
•Formati grafičkih datoteka:
• GIF (običan, transparentni i animirani)
• JPEG
• PNG
•Mapa slike
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin83Izgradnja Web aplikacija - FOI
Multimedija
Primjene Web multimedije:
•Samo audio
•Slide show
•Video
•Animacija
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin84Izgradnja Web aplikacija - FOI
Dizajn Web mjesta
U ovoj fazi projekt dobija svoj izgled i osjećaj, dizajn stranice, kreiraju se i odobravaju opći standardi grafičkog dizajna.
Nabavljaju se i kreiraju ilustracije, fotografije i ostali grafički ili audiovizualni sadržaji.
Provodi se istraživanje, pisanje, organiziranje, sastavljanje i uređivanje tekstualnog sadržaja.
Obavlja se programiranje, dizajn baze podataka, dizajn pretraživača.
Cilj je da se proizvedu sve komponente sadržaja i funkcionalno prograniranje tako da će sve biti spremno za konačnu proizvodnu fazu: konstrukciju stvarnih Web stranica.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin85Izgradnja Web aplikacija - FOI
Dizajn Web mjesta / 2.
Tipični rezultati ili ugovorene isporuke na kraju ove faze uključuju:
Komponente sadržaja, detaljna organizacija i sastavljanje:
• Uređen i provjeren tekst
• Specifikacije grafičkog dizajna za sve tipove stranica
• Završeno grafičko sučelje za sve predloške stranica
• Grafičke elementi zaglavlja i podnožja, logotipovi, gumbi, pozadine
• Detaljne kompozicije stranice ili završeni primjeri ključnih stranica
• Priručnik za grafičke standarde kod velikih i složenih Web mjesta
• Završeni dizajn sučelja i mreža predlošaka glavne stranice
• Završeni predlošci HTML stranica
• Ilustracije
• Fotografije
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin86Izgradnja Web aplikacija - FOI
Dizajn Web mjesta / 3.
Funkcionalne i logičke komponente
• Dizajn JavaScript-a, Java appleta, Flash
• Završene tablice baze podataka s programiranjem, interakcijski prototiovi
• Dizajnirani i testirani pretraživač
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin87Izgradnja Web aplikacija - FOI
Konstrukcija Web mjesta
Samo u ovoj zreloj fazi projekta provodi se kontrukcija većine Web stranica Web mjesta koje se pune sa sadržajem.
Čekajući do sada dobila se detaljna arhitektura Web mjesta, zrele komponente sadržaja i uglađena specifikacija dizajna stranica.
To će minimizirati ramještaj sadržaja, redundantne napore u razvoju i bačenu energiju koja neizbježno rezultira kod žurbe za kreiranjem stranica.
Treba biti pripremljen za uglađivanje dizajna kada se navigira kroz rastuće Web mjesto i otkrivaju slaba mjesta i mogućnosti poboljšanja navigacije ili sadržaja.
Nakon konstrukcije Web mjesta, sa završenim svim stranicama i povezanim svim komponentama baze podataka i programiranja, slijedi beta testiranje.
Ono treba biti primarno obavljano od čitatelja izvan razvojnog tima koji su spremni pružati kritičke informacije o programskim nedostacima, tipografskim pogreškama, kritiku općeg dizajna i efektnosti Web mjesta.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin88Izgradnja Web aplikacija - FOI
Marketing Web mjesta
Web mjesto treba biti integralni dio svih marketinških kampanja i programa korporacijskih komunikacija.
URL treba se pojaviti na svakom dijelu korespondencije i marketinških dodataka koje generira organizacija.
Za širu publiku važno je pojavljivanje u standardnim Web indeksima, Google, Yahoo, Infoseek i dr.
Treba iskoristiti šanse za međusobne promocije s udruženim poslovima , profesionalnim organizacijama, medijima (tiskanim, elektroničkim i dr), lokalnim informacijskim agencijama, trgovinama nekretnima, uslugama premještanja i dr.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin89Izgradnja Web aplikacija - FOI
Praćenje, ocjena i održavanje
Softver Web servera može zapisivati ogromne količine raznih podataka o posjetiteljima.
U najskromnijoj varijanti radi se o broju jedinstvenih korisnika koji su postetili Web mjesto unutar nekog vremena, koliko stranica je zahtjevano za pogled, koja stranica je najpopularnija, geografsku lokaciju čitatelja i dr.
Mnogi popularni softverski paketi dizajnirani su da proizvode jednostavan, čitljiv izvještaj o prometu, zajedno s grafikom i koji će pomoći u analizi podataka.
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin90Izgradnja Web aplikacija - FOI
Praćenje, ocjena i održavanje
Webalizer – mjesečna statistika na razini stranica, datoteka, pozivanja
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin91Izgradnja Web aplikacija - FOI
Praćenje, ocjena i održavanje
Webalizer - mjesečna statistika na razini stranica, datoteka, pozivanja, korisnika
Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin92Izgradnja Web aplikacija - FOI
Korištena i dodatna literatura
http://www.webstyleguide.com/