USTANOVA: Umjetnička akademija u Splitu

ODSJEK: Dizajn vizualnih komunikacija

KOLEGIJ: Web tehnologije 2

GODINA / SEMESTAR: II / IV

ANALIZA WEB STRANICA

MENTOR: STUDENT: prof. Ivica Mitrović, mr. sc. Luka Vidoš

Split, 22. travnja 2007.

2

Sadržaj: 1. (X)HTML .......................................................................................................3 1.1. http://www.markousluge.hr ................................................................3

1.2. http://www.hrzvv.hr ............................................................................5

2. (X)HTML + FLASH .......................................................................................7 2.1. http://web.burza.hr .............................................................................7

2.2. http://www.ignore.com.hr ...................................................................9

3. FLASH ..........................................................................................................11 3.1. http://www.hladnopivo.hr ...................................................................11

3.2. http://www.fotoas.com .......................................................................13

3.3. http://www.studioat.hr ........................................................................15

4. ZAKLJUČAK ................................................................................................17

3

1. (X)HTML

1.1. http://www.markousluge.hr

Sadržaj

Zašto baš ova web stranica. Iz nekoliko razloga - čist jednostavan i efikasan dizajn.

Prilagođeno svrsi kojoj je namijenjena. Sadržajno nije prebogata, već sadržava točno

informacije koje su krajnjem korisniku potrebne. Radi se o uslugama za prijevoz robe

u domaćem i međunarodnom transportu, te je urađena na dva jezika - hrvatskom i

engleskom. Informacije su jako dobro prezentirane, jasne i kategorizacija je uredna.

4

Oblikovno

Gledano sa oblikovnog stajališta nema zamjerki, dizajn je čist, pregledan. Boje

korištene su jasne, zadržane kroz cijelu stranicu, izvučene iz boje prijevoznih vozila i

logotipa. Ne narušava se pregled stranice. Jasna i čitljiva tipografija, te kvalitetno

odrađene fotografije.

Navigacija

Navigacija - jednostavna i dvosmjerna. Glavna navigacija se nalazi u zaglavlju, sa 4

osnovna izbora. Kada se nalazimo na toj stranici, strelica iznad naziva izbora i sam

tekst izbora bude jasno označen. Druga, sporedna navigacija nalazi se na desnoj

strani, koja nas odvede na galeriju i karakteristike vozila.

Tehnološka analiza

Kvalitetno odrađen XHTML, izrađen po svim standardima, dobro strukturiran,

identificiran i razrađen. CSS je izbacio nekoliko grešaka, no to je zbog ispravaka za

Internet Explorer 6 i neke starije browsere, tako da je to zanemarivo.

Godina proizvodnje: 2006.

Autor: web.burza

5

1.2. http://www.hrzvv.hr

6

Sadržaj

Na ovu sam stranicu naišao tražeći neke druge informacije, ali je stavljam kao primjer

nečega odrađenog relativno nedavno, u skladu sa standardima koji su već odavno

prethistorijski. Sam sadržaj je usko povezan za Hrvatski zavod za vinogradarstvo i

vinarstvo. Ima mogućnost dva jezika, i sasvim nelošu količinu informacija za svoju

kategoriju.

Oblikovno

No ako pogledamo dizajn. Za početak, ukoliko se gleda na nižoj rezoluciji,

podnošljivo je, no čim se pređe prag 800x600, vidi se da je desna strana potpuno

nebalansirana, lijeva pliva i sve skupa je odrađeno nezgrapno, i dizajnom kasne

barem 10 godina (gledajući godinu izrade). Neravnomjernosti kod izbora boja za

pozadinu novosti, nesklad i nepažnja na standardizaciju, te katastrofalna optimizacija

za slike koje sadržavaju tekst (posebno u naslovu i logotipu stranice) zaslužuje

zasebne kritike. Očito je da nitko nije pazio kod izrade stranice o standardima, o

nekakvoj jedinstvenosti, i da to na kraju uređuje netko tko nije upućen u to.

Navigacija

Navigacija još spada u najbolje riješen element, iskačući čisti izbornici, koji oblikovno

opet odskaču od ostatka stranice. Riješeno putem prastarih metoda i generirano sa

Sothink Widgets alatom.

Tehnološka analiza

Nekvalitetno odrađen HTML, bez doctypea, pravih <meta> tagova, skripte integrirane

u source umjesto u zaseban dokument i pozvano. Korištenje <blink> taga, <font>

taga, tablica u njihovoj najgoroj varijanti umetane jedna u drugu u nedogled,

enormnih nizanja praznih paragrafa za odvajanje prostora i popunjavanje. Sve u

svemu, gomila nabacanog koda bez ikakve pažnje za redundanciju nevažnog

materijala.

Godina proizvodnje: 2003.

Autor: agro-art d.o.o.

7

2. (X)HTML + FLASH

2.1. http://web.burza.hr

8

Sadržaj

Jedna od (po mom mišljenju) najboljih 5 tvrtki koje se bave izradom web stranica.

Osim što najveću pažnju posvećuju novim tehnologijama, unapređenju svojih

stranica, te konstantnom unapređenju vlastitoga CMS-a (Content Management

Systema) pod nazivom core.web, svoj web su radili gotovo godinu dana (dizajnersko

rješenje) i uspjeli su u namjeri da naprave nešto originalno i zanimljivo na hrvatskom

web prostoru. Na ovim se stranicama može pronaći cijeli niz informacija o njima,

njihovim projektima, najnovijim radovima, čak se i zabaviti na nekim dijelovima weba.

Oblikovno

Možda možemo za ovu stranicu reći i da je predizajnirano. Previše toga nabacano

dok se ne naviknemo, ali to je zbog jednog veoma važnog razloga, ovo je njihov

portal koji, ne samo prezentira njihove oblikovne mogućnosti, već prezentira i njihov

CMS, dakle cijeli sustav mogućnosti koje oni nude korisnicima. No, ujedno, zbog

same strukture stranice, oni ovdje jako dobro i jasno raščlanjuju hijerarhiju

informacija. Čak i kada ugasimo CSS, slike i sve druge oblikovne elemente, stranica

zadržava svoju primarnu funkciju i mogućnosti navigacije.

Navigacija

Navigacija je riješena na dva načina. Ukoliko postoji FLASH, vidjeti ćemo zanimljivu

navigaciju, atraktivno riješenu i jasnu. Doduše, potrebno je malo stati, i proučiti kako

funkcionira. Postoji glavna, horizontalna navigacija. Sporedna vertikalna koja daje

dodatne informacije i proširuje informacijske dijelove. No sve ovo funkcionira i bez

flasha i slika i svega jer je rađen po najnovijim standardima.

Tehnološka analiza

Kada se pogleda analiza koda, besprijekoran je XHTML, sa izvrsno odrađenim CSS-

om i mogućnostima za pregled u svim browserima. Ljudi svoj posao znaju. Da je još

uskladiti sve browsere, i ovakve stranice bi bile bez ikakvih grešaka kod validacije. U

svakom slučaju, odlično odrađena tehnička pozadina.

Godina proizvodnje: 2003.

Autor: web.burza

9

2.2. http://www.ignore.com.hr

Sadržaj

Kako sam za "kombinaciju" uzeo tvrtku koja se bavi izradom weba, malo sam

potražio slične tvrtke. Naletio sam na primjer koji sam htio prikazati kao loša

kombinacija FLASH i HTML. Zašto baš ovaj. Ovo je tipični primjer ljudi koji, za

početak ne znaju sebi osmislit stranicu, ali niti ne prate trendove.

Oblikovno

Prezentiraju sebe kao tvrtku koja radi atraktivan dizajn, a to je daleko od ikakvog

primjera dizajna. Osim što je zastario, što izgleda kao najobičniji template skinut sa

besplatnih stranica takve svrhe, i njihov portfolio je slične kvalitete. Iako ne koriste

tablice za svoj layout, koriste toliko zastarjelih tagova, i ne potenciraju mogućnosti

CSS-a za svoj layout, vec to rade na neadekvatan način. Koriste i javaskripte, iako im

nigdje ne vidim primjenu.

10

Navigacija

Navigacija je smještena u dnu, na mjestu gdje je najmanje uočljiva i praktična, te je

podređena dizajnu. Umjesto praktičnijeg načina - korištenjem neporedanih lista,

ovdje su samo nabacani linkovi, i zbog nepraktičnosti, zadnja su opcija koja se vidi (i

koju pretraživači vide).

Tehnološka analiza

Kada se zavuče u kod, vidi se pokušaji nekakvog rada bez tablica, ali miješanje

verzala u kodu neke zastarjele funkcije. Sve u svemu, moglo je biti višestruko bolje,

uz malo truda.

Godina proizvodnje: 2006.

Autor: ignore web dizajn studio.

11

3. FLASH

3.1. http://www.hladnopivo.hr

Sadržaj

Za top izbor FLASH sajtova, morao sam uzeti dvije kategorije za dobar sajt. Ova bi

prezentirala hi-bandwidth web sajt. Nastala je kada je Hladno Pivo potpisalo novi

ugovor sa Menartom, i nakon izdavanja novog albuma Knjiga žalbe. Stranica je

napravljena isključivo u FLASHu, i koristi sve njegove potencijale.

Oblikovno

Oblikovno i nema zamjerki, osim čiste i jasne navigacije, te odličnog novog identiteta

u skladu sa novim albumom, te iskorištavanja svih prednosti modernih brzih veza,

prezentira band i njegove karakteristike izvrsno. Animirani "karakteri" članova benda

12

na stranicama daju dodatnu dozu humora u cijeloj priči. Zamjerka s oblikovne strane

je što nisu do kraja riješili Fan Shop u istom stilu. Forum je ostao na originalnom

templateu, ali kako on i nije dio cjeline sajta (barem ne u ovom kontekstu) onda im je

taj dio oprošten.

Navigacija

Navigacija je čista, smještena je na vrhu, te jasno i jednostavno riješena. Dobro je

animirana i nije pretjerana. Drugi tip navigacije nalazimo u sadržajnom dijelu, no on

nam je također jasan i lako dostupan.

Tehnološka analiza

Dobro izvedeno, kvalitetna kompresija videa, iznimno brzo učitavanje na osnovnoj

brzini ADSL-a, iako, nema lake mogućnosti za korisnike modema, te ga zato stavljam

u hi-bandwidth sajtove. Pohvala s jedne strane je što je izrađeno tako da ako već

nema pristupa FLASH-u, da se dobiju novosti sve koje se nalaze na naslovnoj strani.

Godina proizvodnje: 2007.

Autori: Boris Barna (web) i Dinko Klobučar (video)

13

3.2. http://www.fotoas.com

Sadržaj

U drugu sam kategoriju stavio low-bandwidth web sajt, i to studija za reklamnu

fotografiju Željka Koprolčeca. Ovdje je on prezentirao svoje radove na vrlo

jednostavan i čist način.

Oblikovno

Jedan od rijetkih webova kojemu dizajn nije zagušio radove. Ovo je jedna online

posjetnica i web album i kao takva se treba tretirati. Radovi su jednostavni, efektni, i

istaknuti. Stranica je neprimjetne pozadine (koja se može shvatiti i kao studijske crne

pozadine za fotografiranje), te bijelom i žutom bojom je izdignut sadržaj od pozadine.

Po mom mišljenju jedno od najboljih rješenja za prezentaciju fotografija.

14

Navigacija

Navigacija čista i jednostavna, kretanje kroz fotografije je izrađeno odlično,

potencirano je kretanje put naprijed.

Tehnološka analiza

Jako dobro izvedeno, gdje god je potrebno učitavanje, to je naglašeno, gdje god je

nešto istaknuto, to je jasno, i sasvim uredno izvedeno. Možda nedostatak nekakvih

mogućnosti kada nema FLASHA bi bilo poželjno (barem kontakt informacije).

Godina proizvodnje: 2006.

Autor: blackduke (Tin Kadoić)

15

3.4. http://www.studioat.hr

Sadržaj

I kao "loš" primjer flasha, prezentirao bih stranicu koja je (ponovno) za web dizajn

tvrtku - studio:at. Ne zbog toga što im je web toliko loš, već zbog toga što očito mogu

bolje, i već neko vrijeme nisu radili na svom webu. Radeći u FLASH-u, imali su

nekoliko jako dobrih webova (gdje posebno ističem www.ibl.hr, www.oldbridgepub.hr,

www.unikom.hr), također HTML, no na svoj web nije obraćena prava pozornost.

I kao zadnju zamjerku stavljam to da portfolio, osim što nije vremenski sortiran, nije ni

pročišćen, dobrih radova ima dosta, ali loši opet narušavaju taj jedan profesionalan

dojam.

16

Oblikovno

Korištenje teksture papira u pozadini je jedna od zamjerki - bezefektno, i bez nekog

razloga. Zatim prvo što vidimo je clipart fotografija - pomislio sam da je to možda

autor weba sam slikavao, ali kasnije vidimo da je to vađeno iz nekih clipart selekcija.

Što automatski skida kredibilitet autoru. Osim pomičnih prozorčića, koji zamagle

fotografiju iza sebe, nema nekih većih mogućnosti.

Navigacija

Osnovna navigacija nije loše riješena, ali zamjerka dolazi kada dođemo do biranja

pod opcija, loše riješeni linkovi, ne postojanje označavanja :hover na linkovima.

Scrollbar ne pomiče materijal u realnom vremenu, što predstavlja velik problem kod

kretanja kroz vijesti ili portfolio.

Tehnološka analiza

Bugovi kod scrollbara stvaraju nervozu, neoznačavanje linkova još više. Sve je

minimalizirano, a nije baš puno praktično. Fotografije u pozadini su nepotrebne.

Nemogućnost previewa radova prije odlaska na njih je isto zamjerka.

Godina proizvodnje: 2006.

Autor: studio:at

17

4. ZAKLJUČAK Mali dodir sa velikim mogućnostima weba. Kod odabira stranica, zadržao sam se na

"domaćem terenu", tražio sam zapravo slične kategorije web stranica, i da su svi

napravljeni u zadnje četiri godine. Mislim da je presjek uspješan. Nisam gledao na

tematiku "dobro" vs. "loše" samo sa jedne strane. I dobri webovi imaju svoje loše

strane, kao što i loši imaju svoje dobre, pa sam pokušao sagledati to iz više kutova.