Izgradnja Web aplikacija - iwapitup.files.wordpress.com · 15 Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin Izgradnja Web aplikacija -FOI Proces razvoja Web

Izgradnja Web aplikacijaIzgradnja Web aplikacija

Prof. dr.sc. Dragutin KermekSveučilište u Zagrebu

Fakultet organizacije i informatike

Pavlinska 2, Varaždin 42000

[email protected]

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


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.


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.


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)


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).


9 Garrett-ovih stupova uspješnih web timova

http://www.webstyleguide.com/wsg3/1-process/3-web-teams.html



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.



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.



http://www.webstyleguide.com/wsg3/1-process/3-web-teams.html


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.


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.


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?


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?


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.


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.


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?



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



•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?



•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



•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


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.



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.



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.



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.



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


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



Struktura web mjesta treba odgovarati očekivanim korisnicima i mentalnim modelima koji oni stvaraju.

Strukturne teme web mjesta mogu biti:

• slijedovi

• hijerarhije

• paučine.


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.


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.


Hijerarhije

Hijerarhije odgovaraju organizaciji složenijih web mjesta. Počinju osnovnom stranicom koja sadrži veze na stranice izbora podkategorija.


Paučine

Paučina ne postavlja granice za korištenje informacija tako da veze dopuštaju slobodan tok ideja.


Strukture

http://www.webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html


Prezentiranje informacijske arhitekture

http://www.webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html

Razne verzije dijagrama web mjesta.




Žičani okvir web mjesta kao grubi proizvod dizajna korisničkog sučelja




Istraživači ljudskog sučelja pronašli su jasne skupove očekivanja o mjestu gdje se nalaze neke stavke na web stranicama





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.


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?


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.


Dizajn sučelja

http://www.webstyleguide.com/wsg3/4-interface-design/2-navigation.html


Dizajn sučelja

http://www.webstyleguide.com/wsg3/4-interface-design/2-navigation.html


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.


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.



Grafičko korisničko sučelje dizajnirano je da se ljudima pruža kontrolu nad njihovim osobnim računalima.

Jasna navigacijska potpora



Izbjegavati stranice u kojima nema veza (mrtva ulica)


Dizajn sučelja - konvencije

http://www.webstyleguide.com/wsg3/4-interface-design/3-interface-design.html



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



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



Navigacija

• Povratak i prijelaz na prethodnu i sljedeću stranicu

• Brži prijelaz na ciljnu stranicu kod velikog skupa stranica


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).



http://www.webstyleguide.com/wsg3/5-site-structure/2-semantic-markup.html



http://www.webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html








Struktura stranice i dizajn web mjesta

http://www.webstyleguide.com/wsg3/6-page-structure/3-site-design.html


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.


Predlošci stranica


S obzirom na mogući sadržaj stranica može se pripremiti više varijanti na bazi broja stupaca.


Predlošci stranica


S obzirom na mogući sadržaj stranica ili funkcionalnost može se pripremiti varijanta s minimalnim sučeljem.


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.


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.


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.


Dizajn stranice

http://www.webstyleguide.com/wsg3/7-page-design/2-document-design.html

Slijed elemenata u dokumentu treba pratiti njihovu važnost.


Dizajn stranice

http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html

Vizualni dizajn temelji se na funkcionalnim područjima



� Vizualna hijerarhija



� Kontrast


Dizajn stranice

http://www.webstyleguide.com/wsg3/7-page-design/3-visual-design.html

Konzistentnost je važna osobina dobrog dizajna



� Konzisentnost



� Dimenzije stranice



� Prostor stranice



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



� Rešetka dizajna stranice



Zaglavlja i podnožja:• Zaglavlja Web stranica daju identitet Web mjesta.

• Podnožja Web stranica daju informaciju o porijeklu i starosti stranice.



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


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.


Tipografija

Poravnanje tekstalnih blokova utječe na čitljivost.

http://www.webstyleguide.com/wsg3/8-typography/3-legibility.html


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


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


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.


Obrasci i aplikacije

Prikupljenje podataka od korisnika, autentikacija i sl.

http://www.webstyleguide.com/wsg3/10-forms-and-applications/3-designing-web-applications.html


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


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


Multimedija

Primjene Web multimedije:

•Samo audio

•Slide show

•Video

•Animacija


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.


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


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č


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.


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.


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.



Webalizer – mjesečna statistika na razini stranica, datoteka, pozivanja



Webalizer - mjesečna statistika na razini stranica, datoteka, pozivanja, korisnika


Korištena i dodatna literatura

http://www.webstyleguide.com/

Documents

Izgradnja Web aplikacija - iwapitup.files.wordpress.com · 15 Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin Izgradnja Web aplikacija -FOI Proces razvoja Web