Mogui koraci razvoja velikih web sjedita Koraci razvoja

Mogući koraci razvoja velikih web sjedišta

Koraci razvoja web sjedišta lzrada koncepta i istraživanje Organizacija i izrada sadržaja Grafičko uređivanje lzrada prototipa Testiranje Pokretanje lokacije Održavanje 2

lzrada koncepta i istraživanje 3

ØSvaka Web lokacija počinje od ideje. ØIdeja je rezultat nečije želje da nešto postavi na Web - u osobne ili poslovne svrhe. ØU ovoj fazi se na papiru prave popisi i skice. ØŠto će lokaciju učiniti zanimljivom? ØŠto će biti na početnoj strani? ØMnoge firme za Web dizajn i razvoj troše više vremena na istraživanje i uočavanje potreba klijenata nego na bilo koji drugi dio izrade lokacije. ØKad se prave velike lokacije, detaljno se istražuje tržište, ØPostoje firme koje se bave samo razvojem Web strategije za nove ili etablirane kompanije. 4

j Opći opis lo kacije a rž Ovo je mali skup pitanja koja treba razmotriti i o kojima valja prodiskutirati s klijentirna tokom istiaživačke faze dizajna Web lokacije rsi ate Što treba razmotriti prije nego se počne? su Str Re gija d a S lj i C na p u r a g Opći izgled lokacije 5

j Opći opis lo kacije a rž d a S a gija ate Str rsi n ilj su Re • Zašto pravite Web lokaciju? Što očekujete da postignete? • Što nudite svojoj publici? • Što želite da korisnici rade na lokaciji? A što kada je napuste? • Zbog čega će se korisnici vratiti na a lokaciju? up gr C Opći izgled lokacije 6

j Opći opis lo kacije a rž d a S na lj i C p u r gija ate rsi Str su Re • Tko je odgovoran za izradu sadržaja? • Kako će se vama taj sadržaj dostavljati (proces i format)? • Koliko često će se infomacije ažurirati (jednom dnevno, tjedno, mjesečno)? a g Opći izgled lokacije 7

j Opći opis lo kacije a rž d a S Str ate gija rsi su Re • Kojeg tipa je lokacija? (Čisto promotivna, za prikupljanje informacija, prodaju, objavljivanje informacija? ) • Kakve mogućnosti će pružati lokacija? • Koje su vaše najvažnije poruke? • Tko su vam konkurenti? Što to oni dobro rade? Što možete da poboljšate? na lj i C p u r a g Opći izgled lokacije 8

j Opći opis lo kacije a rž d a S Re n ilj a gija ate Str rsi su • Kojim resursima raspolažete (budžet, osoblje, vrijeme)? • Da li je za lokaciju neophodan kompletan sistem za upravljanje sadržajem? • Može li održavanje da se prepusti klijentu? Imate li server za svoju lokaciju? • Da li ste registrirali ime domena za lokaciju? pa u r g C Opći izgled lokacije 9

j Opći opis lo kacije a rž d a S Re gija ate Str rsi su • Koja je vaša ciljna grupa? • Koliko je ona vješta u korištenju Interneta? Kolikoje tehnički pismena? • Što mislite, koliko često će korisnici posjećivati vašu lokaciju? Koliko vremena će oni u prosjeku provoditi na njoj? • Putem kojih sve uređaja će pristupati stranicama (PC, tablet, smartphone)? pa u gr a n j l Ci Opći izgled lokacije 10

j Opći opis lo kacije a rž d a S Re gija ate Str rsi su • Znate li kakav će biti opći izgled lokacije? • Da li već imate neke standardne elemente, kao što su logotip i boje, s kojima morate usklađivati izgled strana? • Da li je lokacija dio veće lokacije ili grupe lokacija sa standardiziranim dizajnom koji morate da poštujete? • Kako izgledaju druge web lokacije koje vam se sviđaju? Što vam se na njima sviđa? Koje upa gr lokacije vam se ne sviđaju? a n j l Ci Opći izgled lokacije 11

lzrada i organizacija sadržaja 12

a or Da nešto kupi, . . . M N a m j e n a da vr im Svi pričaju o tehnologijama i alatkama, glavna Svak stvar na Internetu a l okac bio je i ostao ija sadržaj. a n ij eš ed to no Najvažniji dio Web lokacije je njezin sadržaj! Nešto korisnik može da radi Čak i ako radite kao slobodnjak, nikada ne zaboravite da je dobar sadržaj najvažniji. Sadržaj za čitanje 13

Izrada i organizacija sadržaja Izrada samog sadržaja U idealnom slučaju klijent je odgovoran za sadržaj lokacije: Klijent dolazi sa puno ideja i malo rješenja Kada pravite lokaciju za klijenta, na samom početku morate da utvrdite ko je odgovoran za izradu sadržaja te lokacije. Očekuje od vas da sem izrade lokacije napravite i sadržaj Klijent treba da osigura i sredstva za izradu lokacije Kvalitetno napisan sadržaj je garant uspjeha lokacije 14

Izrada i organizacija sadržaja Dizajn informacija Kada imate sadržaj, ili bar jasnu ideju o tome kakav će on biti, potrebno je organizovati taj sadržaj tako da mu publika lako pristupa Na velikim lokacijama, dizajnom informacija se bave specijalisti za arhitekturu informacija. Za taj dio posla zadužen tim koji čine dizajneri i klijent U ovoj fazi posla nema ništa bez sveske i spiskova Odlučite što ide na početnu stranu, a što u koji dio lokacije. Što će vaši korisnici očekivati da nađu na lokaciji Rezultat faze dizajna informacija je nacrt ili skicu lokacije. 15

Izrada i organizacija sadržaja Dizajn informacija – skica lokacije 16

Osmišljavanje općeg izgleda lokacije 17

Opći izgled lokacije čini njen grafički dizajn Opći izgled (engl. look and feel) lokacije čine njen grafički dizajn i ukupan vizuelni doživljaj S a d r ž a j V iz ue uk lni lj d uč ož uj iv e lj aj Stil slika (fotografije, ilustracije. . . ) Fontove Šemu boja 18

Osmišljavanje općeg izgleda lokacije Pravljenje skica Gdje god da se radi dimenzije skice trebaju biti jednake veličini prozora Interaktivnost se prikazuje pomoću dugmadi Uzeti bilježnicu i olovku ili svoje ideje razraditi u Photoshopu? Treba biti kreativn. Rezultat rada biće jedna ili više skica. Pojedini dizajneri crtaju skicu u Photoshopu i pri tom koriste sloj koji se može uključivati i isključivati i tako simuliraju dati efekat. U nekim slučajevima biće neophodno napraviti prototip početne strane u HTML-u da biste prikazali interaktivne funkcije i animacije, Faza likovnog uređivanja služi za istraživanje izgleda lokacije, pa su obične grafičke datoteke bez slojeva najčešće sasvim dovoljne 19

Osmišljavanje općeg izgleda lokacije Likovne uređenje Web lokacije Nekad se dodaje i dizajn višeg nivo da se pokaže sljedeće: Grafičkom dizajneru se daje lista onoga što mora da se pojavi na strani Od profesionalca, klijent najčešće dobija dvije ili tri skice početne strane u raznim vizuelnim stilovima. Možda će se tu naći i šema funkcionalnosti, koju je napravio dizajner okruženja (interfejsa) Nekada ćete morati da osmišljavate rješenja na licu mjesta klijent pregleda skice, bira jednu i često zahtjeva određene izmjene 20

Izrada radnog prototipa 21

Ø Nakon što je dizajnersko rješenje odobreno. Ø Nakon što je sadržaj spreman za unošenje. Ø Web lokacija ulazi u fazu izrade. 1. Kod malih lokacija, time može da se bavi jedna osoba. 2. Kod komercijalnih ovim poslom se bave timovi Ijudi zaduženih za određene poslove. 3. Umjetničko odjeljenje koristi grafičke programe da pripremi sve slike za lokaciju. 4. Produkcijsko odjeljenje označava sadržaj u HTML-u i formatira tekst pomoću CSS-a. 5. Programeri pišu skripte i aplikacije koji se izvršavaju na serverskoj strani da bi lokacija mogla da funkcionira onako kako je zamišljeno. 22

Ø U jednom trenutku, svi pomenuti dijelovi se spajaju u funkcionalnu Web lokaciju. Ø To ne mora uvijek da bude zaseban korak; najčešće se radi o procesu. Ø Kao i projektovanju softvera, prvi prototip se obično zove alfa verzija i najvjerovatnije će moći da ga vide samo dijelovi tima zaduženi za kontrole i revizije prije nego što se lokacija pošalje klijentu. Ø Poslije unijetih izmjena objavljuje se drugo izdanje - beta verzija. Ako ne prije, onda sigurno u ovoj fazi, trebalo bi da učestvuje i klijent. Ø Ni tu nije kraj razvoja. Ø Beta verzija je nekada dostupna svim korisnicima, a nekada samo odabranim. 23

Testiranje 24

ü Sve Web lokacije moraju da se ispitaju prije konačnog objavljivanja. ü Formalno ili neformalno, treba ispitati da li lokacije rade kako treba, kako se ponašaju u različitim Web čitačima i koliko lako se koriste. ü Lokaciju možete testirati lokalno (na svm računalu) prije slanja na Web server ü Nekada je dobro postaviti i skrivenu lokaciju za testiranje na samom serveru. 25

Osnovna provjera kvaliteta v U najmanju ruku, uvijek treba provjeriti da li lokacija radi. v Pitanja koja slijede tiču se minimalnih zahtjeva koje lokacija treba da ispuni prije objavljivanja na Webu. 1 Da li je sav sadržaj tu? 2 Ima li slovnih, pravopisnih ili gramatičkin grešaka? 3 Da li sve veze funkcioniraju? 4 Da li se sve slike prikazuju? 26

1 Testiranje u Web preglednicima Kako strana izgleda u pitanja različitim preglednicima? 2 Kako lokacija funkcionira u različitim preglednicima? 3 što se dešava sa stranama kada se prozor preglednika poveća ili smanji? Može li lokacija da se koristi u čisto tekstualnom Web čitaču? 4 5 Da li je lokacija upotrebljiva kada su slike isključene? 6 Što se dešava kada korisnik ne može da vidi multimedijalne elemente? 27

Korisničko testiranje v Pozovite ljude da sjednu za računalo i koriste vašu lokaciju, kako biste vidjeli s kojom lakoćom pregledaju lokaciju i pronalaze informacije na njoj. 1 Može li korisnik na prvi pogled da zaključi o čemu je lokacija? 2 Postoje li prepreke do ostvarenja ciljeva? Da li korisnik može brzo da nađe ključne informacije ili kupi proizvod? 3 Da li učesnik testa uživa dok koristi lokaciju? 4 Ima li zadataka ili dijelova lokacije koji zbunjuju mnoge korisnike? 28

Pokretanje lokacije 29

Ø Kada ste sve dotjerali i provjerili, vrijeme je da lokaciju pošaljete na server i predstavite je svijetu. Ø Tada je dobro uraditi još jedan krug testiranja, kako biste bili sigurni da je sve uspješno prebačeno na server i da strane funkcioniraju bez problema. Ø Možda vam se ovo čini kao suvišan posao, ali znajte da će vaš ugled i ugled vaše (ili klijentove) firme zavisiti od uspjeha Web lokacije. Zato nijedan detalj ne smijete da preskočite. 30

Održavanje lokacije 31

q Web lokacija nikada zapravo nije završena. q Iako je održavanje trajan proces koji počinje nakon izrade lokacije, odluke o održavanju bi trebalo donositi još na početku razvojnog procesa. q Razmislite i o životnom vijeku lokacije. Ako je njena uloga da promovira određeni događaj, što ćete s njom kada taj događaj prođe? q Poslije određenog vremena, neophodno je osvježiti dizajn čak i lokacija s planiranim dugim životnim vijekom, kako bi se uskladio s promjenama sadržaja i aktuelnom praksom u oblasti objavljivanja na Webu. 32

Samostalni razvoj 33

Un es ii zm je Ako radite samostalno, vaš proizvodni proces bi mogao da izgleda otprilike ovako: ne Ponovi korake ap ra Spoji sve to Skicir aj str anu N vi M T H L Posta vi loka ci serve ju na r e jen m z i i Snim 34

Un es Skicirajte strukturu početne strane i strana drugog nivoa. Napravite jednostavne skice na parčetu papira, ili radite detaljno, u nekom programu kao što je Photoshop. Posta vi loka ci serve ju na r ii zm je ne korake ap ra Spoji sve to Ponovi Skicir aj str anu N vi M T H L e jen m z i i Snim 35

Un es Napravite odgovarajuće HTML dokumente i slike. Ako primjenjujete opise stilova, sada je vrijeme da ih započnete. Isto važi i za skriptove. ii zm je ne Ponovi korake ap ra Spoji sve to Skicir aj str anu N vi M T H L Posta vi loka ci serve ju na r e jen m z i i Snim 36

Un es Spojite sve to i pogledajte dobijenu stranu u Web pregledniku. Ukoliko koristite neki WYSIWYG program za izradu Web strana, trebalo bi da otvorite stranu u Web pregledniku, pošto prikazi u tim programima nisu uvijek precizni. Određeni stilovi i ponašanja mogu Post se ispitati samo u pregledniku avi lo kaciju na serve r ii zm je ne korake ap ra Spoji sve to Ponovi Skicir aj str anu N vi M T H L e jen m z i i Snim 37

Un es Unesite neophodne izmjene u HTML dokumente, slike, stilove i skriptove. ii zm je ne korake ap ra Spoji sve to Ponovi Skicir aj str anu N vi M T H L Posta vi loka ci serve ju na r e jen m z i i Snim 38

ap ra Spoji sve to Un es Snimite izmjene i ponovo učitajte strane u Web preglednik. ii zm je ne Ponovi Skicir korake aj str anu N vi M T H L Posta vi loka ci serve ju na r e jen m z i i Snim 39

ap ra Spoji sve to Un es Ponavljajte korake 4 i 5 dok strane ne budu gotove. ii zm je ne Ponovi Skicir korake aj str anu N vi M T H L Posta vi loka ci serve ju na r e jen m z i i Snim 40

ap ra Spoji sve to Un es Pošaljite lokaciju na server i ponovo je testirajte. ii zm je ne Ponovi Skicir korake aj str anu N vi M T H L Posta vi loka ci serve ju na r e jen m z i i Snim 41

Provjerite svoje znanje 42

1. Čemu služi šema lokacije? U kom ćete trenutku tokom procesa napraviti šemu? 2. Što je studija izgleda lokacije? 3. Navedite tri stvari koje treba uraditi ili odlučiti prije izrade prvog HTML dokumenta. 4. Što je beta verzija? Ko će imati prilike da je vidi? 5. Navedite četiri stvari na koje treba testirati svaku Web lokaciju 43

1. Čemu služi šema lokacije? U kom ćete trenutku tokom procesa napraviti šemu? Šema lokacije je korisna za planiranje i vizuelizaciju organizacije informacija na lokaciji. Treba je nacrtati na početku procesa dizajniranja, čim odredite sadržaj i način funkcionisanja lokacije. Šema lokacije je korisna cijelom timu koji radi na lokaciji. 44

2. Što je studija izgleda lokacije? Studija o općem izgledu je jedna ili više skica s predloženim grafičkim stilom lokacije. Studija se bavi izgledom lokacije, a ne njenim funkcioniranjem. 45

3. Navedite tri stvari koje treba uraditi ili odlučiti prije izrade prvog HTML dokumenta. Ima mnogo stvari koje treba riješiti prije nego što počnete s radom. Tu spadaju odgovori na Što treba razmotriti prije nego što počnete, ali kao opće poslove možemo da izdvojimo: određivanje ideje i strategije lokacije, prikupljanje informacija o korisnicima, izrada sadržaja, organiziranje sadržaja, izrada šeme lokacije s naznačenom organizacijom sadržaja i funkcijama na lokaciji, te osmišljavanje općeg izgleda. 46

4. Što je beta verzija? Ko će imati prilike da je vidi? Beta verzija sadrži promjene unijete u prvu, alfa verziju, i mnogo je bliža radnoj verziji lokacije. Obavezno se nudi klijentu da pogleda beta verziju, a veoma često se objavljuje kako bi i korisnici mogli da je isprobaju. 47

5. Navedite četiri stvari na koje treba testirati svaku Web lokaciju Minimalno treba uraditi sljedeće: provjeriti da li je kompletan sadržaj postavljen i dostupan, ima li slovnih i drugih grešaka, da li sve veze funkcioniraju, da li se slike vide i rade li skriptovi i aplikacije. Poslije toga je važno testirati izgled i funkcioniranje lokacije u što većem broju preglednika i pod što više uvjeta. 48