Predlošci + HTML

četvrtak, 09.11.2006.

Uskoro

Kalup za dizajn je gotov, sad samo trebam nacrtati slike u PS i blog opet kreće!

09.11.2006. u 22:46 • 12 Komentara • Print • #

ponedjeljak, 06.11.2006.

Blog ponovo u funkciji!

Blog je ponovno u funkciji ali i u rekonstrukciji :D

06.11.2006. u 21:51 • 4 Komentara • Print • #

utorak, 10.10.2006.

Rad s Pop-up prozorima

Ufeng shuiu web dizajna pop-up prozori usporedivi su s čudno oblikovanim kutnim ormarićem koji nigdje ne paše. Mnogi ih korisnici istinski mrze. Kao ja :). Međutim, pop-up prozori nekoć su bili korisni. Koristili su za prikaz poruka sustava pomoći, brzih definicija, dodatnih opisa i drugih korisnih pratećih informacija. Uz ispravnu upotrebu pop-up prozora navigacijska shema izgledala je bolje organizirana i kompaktnija.
Međutim, pop-up prozore su prisvojavali koristoljubivi oglašavači koji su ih uspjeli pretvoriti u napast usporedivu sa spamom. Ubrzo je Web bio preplavljen svjetlucavim sporoučitavajućim prozorima irelevantnog sadržaja koje niste trebali, tražili ni željeli. Posljedica toga je bio velik pad kredibiliteta pop-up prozora i zato ih dizajneri više ne koriste kao nekad.
Ako ste spremni na preodgajanje posjetitelja i pokoji ljutiti e-mail, još uvijek možete obogatiti sjedište pop-up prozorima. Oni su jednako korisni za prika pratećeg sadržaja kao na vrhuncu svoje popularnosti. Oni mogu neugledan dizajn učiniti intuitivnijim.

Tajna je u učinkovitoj upotrebi pop-up prozora. Slijedi nekoliko smjernica:

Ř Neka budu mail. To se odnosi na dimenzije pop-up prozora (koje možete kontrolirati) i količinu njihovog sadržaja. Nemojte ih preopteretiti, Veliki pop-up prozori s mnogo slika i složenim rasporedom predugo se učitavaju, zbog čega posjetitelji s razlogom mogu pretpostaviti da slijedi trepteća gnjavaža.
Ř Neka im sadržaj bude sažet. Tekst u pop-up prozorima treba biti kratak. Ako se zbog velike količine teksta pop-up prozoru pojave klizne trake vjerojatno biste trebali ponovno razmotriti svoj pristup. Imajte u vidu da su za pop-up prozore najprikladniji kratki odlomci pratećeg sadržaja. Velike količine informacija spadaju na glavne stranice sjedišta.
Ř Nemojte se oslanjati na njih. Budući da neki se korisnici neće potruditi pogledati čak ni najbezazleniji, brižno dizajniran pop-up prozor, nemojte u pop-up prozorima ključne informacije. Za to služe glavne stranice. Pop-up prozori imaju više smilsa kao prateći elementi; primjerice, kao brze stranice sustava pomoći.
Ř Omogućite posjetiteljima kontrolu. Nemojte zadati automatsko učitavanje pop-up prozora! Pop-up prozor bi se trebao otvoriti samo kada posjetitelj klikne odgovarajući gumb ili link. Usto, trebali biste omogućiti jednostavno zatvaranje pop-up prozora.

STVARANJE POP-UP PROZORA

Pop-up prozore je zapravo web stranica kao bilo koja druga. Sadržaj pop-up proora spremate u HTML datoteku kao da je riječ o običnoj web stranici, a link koji vodi do njega možete dodati bilo gdje na svom sjedištu. Međutim, umjest da, za običan link, specificirate putanju koja vodi na stranicu:

<a href= "popup.html ">Otvori pop-up prozor</a>

pretraživač usmjeravate na jednostavnu JavaScript funkciju:

<a href= "javascript:doPopup(´popup.html´);">Otvori pop-up prozor</a>
Ova funkcija naređuje pretraživaču da otvori stranicu u zasebnom prozoru, a ne u glavnom prozoru. Možete sami napisati JavaScript funkciju koja obavlja taj zadatak, a možete i upotrebiti ovu:,

<script language="JavaScript"><br /> function doPopup(popupPath) {<br /> window.open(popupPath), ´ime´ ,<br /> ´width=400,height:=200,scrollbars=YES´);<br /> }<br /> </script>

To je sve. Naredba window.open pobrinut će se za sve ako funkciju pošaljete pravu putanju. Dakle, ako se HTML datoteka pop-up prozora ne nalai u istoj mapi kao stranica koja sadrži link na nju, link bli trebao izgledati otprilike ovako:

<a href="javascript:doPopup)´../pomoc/info.htm´);">Pomoć </a>

NASTAVLJA SE...

10.10.2006. u 21:38 • 10 Komentara • Print • #

ponedjeljak, 09.10.2006.

Novi dizajn

Evo novi dizajn. Ovo je beta verzija. Header je napravljen u Photoshopu CS2 i Fireworksu8.
Ovo je napravljeno sa žurbom pa nije baš nekaj, no kao što sam rekao ovo je beta :)

09.10.2006. u 12:35 • 3 Komentara • Print • #

subota, 07.10.2006.

Postizanje ravnoteže

Ravnoteža je važan činbenik koji trebate uzeti u obzir pri dizajniranju web stranica. Ako nije uravnotežćen, raspored izgleda neuredno, kao što možete vidjeti na slici 2.1. Međutim, kad uravno težite raspored, kao na slici 2.2, svi elementi dizajna izgledaju kao da su na pravom mjestu, a to opušta posjetitelje.

...........................2.1...........................

...........................2.2...........................

Smisao uravnoteživanja dizajna nije samo opuštenje posjetitelja. Iravnoteženje rasporeda je upotrebljiviji od neuravnoteženog i izgleda organiziranije, što posjetiteljima olakšava pronalaženje informacija. Obratite pozornost na neuravnotežene stupce na slici 2.3. Budući da je lijei stupac znatno kraći od desnog, posjetitelji vjerojatno neće upotrijebiti klizne trake i pronaći navigacijske gumbe pri dnu web stranice (v 2.4). Upotreba web stranice ne bi trebala sličiti igri skrivača. Kada uravnotežite stupce, kao na slici 2.5, sam raspored ukazuje na to da je se dio sadržaja stranice nalazi izvan ekrana.
Uravnoteživanje je subjektivno – morate se osloniti na svoj instink da biste procjenili što funkcionira, a što ne. Bit će vam lakše ako skicirate raspored u kojem geometrijski likovi predstavljaju elemente dizajna. Apstraknija verzija pomaže vam da se umjesto na same elemente dizajna usredotočite na ravnotežu rasporeda. Ako0 neki dio rasporeda izgleda krupnije od drugog, samo prerasporedite likove tako da postignete uravnotežen izgled.
Znam da svi ocekujete HTML kodove, no moram vas prvo naučiti osnone upotrebljivosti dizajna :(

07.10.2006. u 21:42 • 9 Komentara • Print • #

petak, 06.10.2006.

Dizajniranje klikatibilnih grafika

Ovo je važni post za početnike pa bi bil dobro da ga pročitate.
Pretvaranje slika u hiperlinkove u HTML-u vrlo je jednostavno. Dovoljno je umetnuti tag img između početnog i završnog taga a:

<a href="index.html"><img src="/slike/logo.gif"></a>

Uočite da pretraživač automatski dodaje rub slici pretvorenoj u hiperlink, kao na slici dolje.

.....

Boja ruba je ista kao boja tekstualnih hiperlinkova . Vaš dobri stari web pretraživač ispravno zaključuje da posjetiteljima želite dati vizualni indikator kako je riječ o klikabilnoj slici. Rub olakšava razlikovanje klikabilne slike od (neklikatibilnih) slika na stranici.
Međutim, koliko ste klikabilnih slika s podrazumjevanjim rubom vidjeli na webu? Vjerojatno ne mnogo. Rub je nezgrapan, ružan i narušava vizualnui kontinuitet stranice. Zato većina web dizajnera isključuje prikaz ruba:

<a href="index.html"><img src="/slike/logo.gif" border="0"></a>

Dodjeljivanje vrijednosti 0 atribut border rješava jedan problem, ali stvara drugi, kao što možete vidjeti na slici dolje.

.....
Možete ukloniti podrazumjevani rub klikabilne slike, ali tada se ona neće razlikovati od neklikatibilnih slika.

Slika s hiperlinkom još je uvijek klikatibilna, ali bez ruba posjetitelji ne mogu razlikovati koja je slika klikatibilna, a koja nije ako ne postave pokazivač miša iznad svih slika na stranici. Posjetitelji vam to neće oprostiti. Sve što zbog čega moraju zastati i razmisliti može predstavljati razlog za napuštanje vašeg sjedišta.
Dakle, trebali biste postići da klikatibilna slika izgleda klikatibilno bez upotrebe ruba. U tome vam mogu pomoći dvije tehnike:
Stavljanje u odgovarajući kontekst i upotreba vizualnih indikatora (afordansi).
Stavljanje klikatibilnih slika u odgovarajući kontekst na web stranici možete naglasiti činjenicu da je riječ o klikatibilnim elementima. Da bi posjetitelj cijelo vrijeme bili usredotočeni na vaše sjdeište, probajte im ponuditi inteligentniji raspored kao na slici dolje.

Odvajanjem klikatibilnih slika od neklikatibilnih na stranici stvarate malo sučelje koje ukazuje na klikatibilnost.
Katkad stavljanjema slika u odgovarajući kontekst nije dovoljno. U takvim su situacijama korisni vizualni indikatori.

Vizualni indikatori ( afordanse ) su vizualne natuknice i dizajnu elemnta koje ukazuje na njegovoj funkciji. Podrazumjevani rub slike s hiperlinkom možda nije lijep, ali je odličan vizualni indikator jer posjetitelju sugerira da je slici dodijeljen hiperlink
Jedan od najuobičajenih vizualnih indikatora na Webu je metafora gumba. Ona je toliko uobičajena da mnogi dizajneri pojmove gumb i klikatibilna slika koriste jedan umjesto drugoga. Ako slika izgleda kao gumb, asocira na akciju pritiskanja i zato potičeposjetitelja da je klikne.

Na slici gore :D možete vidjeti što se događa kada thumbnaile iz predhodnog primjera pretvrorite u gumbe. Uočite kako je učinkovito uklonjena nedoumica koje su slike klikatibilne, a koje nisu. Dizajn gumba olakšava njihovo razlikovanje od neklikatibilnih slika, a oblik potiče na klik mišem.
Iako su gumbi tako moćni, nemojte ih uzimati zdravo za gotovo. Od gumba nema velike koristi ako ih posjetitelji ne mogu pronaći. Posjetitelji bi trebali imati utisak da vladaju sučeljem .
Upotrebom simbola u stilu kontrola DVD ili CD playera u pravilu je prilično sigurna. Isto vrijedi i za ikonu koša za smeće koja označava uklanjanje stavke ili ikonu lista papira smpreklopljenim kutom koja označava stvaranje novog dokumenta.
Ikone olovke na nekim sjedištima sjedištima označava stvaranje novog objekta,a na nekim uređivanje.
Međutim ako je riječ o ikonama, vrijedi sljedeće pravilo:
ako postoji bilo kakva nedoumica vezana uz značenje ikone, nemojte je upotrijebiti.
To bi bilo sve za danas. Mislim da ste se stvarno načitali, ali i puno naučili :).

06.10.2006. u 22:56 • 0 Komentara • Print • #

četvrtak, 05.10.2006.

Dizajn koji olakšava navigaciju

Smisao web dizajna nije samo u tome da posjetiteljima ponudi nešto lijepo za gledanje. Mnogo je važnija njegova uloga u postizanju dojma jedinstvene lokacije. Dobar dizajn unificira stranice sjedišta jer njegovom zaslugom pojedinačne stranice izgledaju kao da čine jednu cjelinu. Drugim riječima, činbenik koji niz stranica čini sjedištem upravo je dizajn. Dizajn povlači nevidljivu granicu oko web stranica koja naznačuje da one čine cjelinu.
Dojam jedinstvene lokacije postiže se dosljednom upotrebom elementa dizajna na svim stranicama sjedišta. Stvari kao što su raspored, shema boja i stil teksta trebao bi biti vizualno usklađen na svim stranicama. Ako svaku stranicu sjedišta dizajnirate drukčije, bez obzira na efektnost pojedinačne stranice, rezultat će biti lokacija usporediva sa sajmištem, gdje su štadovi poslagani poslagani bez ikakvog smisla i logike. To je vizualna katastrofa.. Međutim ako isti dizajn koristite dosljedno na svim stranicama, rezultati će biti lokacija usporediva s otmjenom robnom kućom. Profinjenost stranice će porasti, a to privlači sofisticiraniju klijentelu. Tijekom pregledavanja dosljedno dizajniranog sjedišta posjetitelji imaju osjećaj kao da se kreću s kata na kat i iz jednog u drugi odjel, a sve ispod istog krova. I još bolje od toga, način na koji koristite dizajn može pomoći posjetiteljima da prepoznaju u kojem se odjelu trenutačno nalaze, a da ne moraju tražiti tlocrt pokraj dizala.
Evo kako to funkcijonira. Sadržaj mnogih sjedišta organiziran je prema određenoj hijerarhiji ili logičkoj strukturi, što znači da web dizajneri razvrstavljaju prezentirane informacije prema kategorijama i podkategorijama, primjerice ovako:

o Glazba

o Rock
o Punk
o Pop
o Rap
............................................
o Igre

o PC
o Konzole

Ako dizajnirate ovakvo sjedište, hijerarhijska struktura obavlja veći dio posla umjesto vas. Glavne stavke popisa ( Glazba, Igre ) možete pretvoriti u navigacijske gumbe, ka na slici.

Razvedno je da za svaku glavnu kategoriju trebate napraviti jednu web stranicu.
Ovo je samo mali uvod. Sutra se nastavlja s «uvodom u HTML».

Objavio: tutor4you