Hrvatski design showcase

[Sulien]

EDIT: link na site u pitanju je maknut kako bi se zaštitilo buduće poslovanje autora koji je savjete poslušao i ispravio većinu navedenog

Vidim da su neki već vidjeli site X ... ja sam prije pet minuta saznao putem del.icio.usa (courtesy of Red)

Dizajn nije loš, site nije loš, ali... kako netko može imati obraza promicati valid HTML i tableless dizajn showcase-om koji sam po sebi sadrži markup od kojeg i početnici padaju u nesvijest?

Sve fundamentalne osnove su prekršene: pogrešno korištenje nekih HTML tagova, pogrešno korištenje atributa, pogrešno korištenje CSS-a, loš accessibility...

Ja mislim da site koji ističe i promiče ljepotu pravilno izrađenih sajtova treba i sam slijediti neke principe i ispuniti barem minimum.

Što vi mislite?

Last edited by Sulien on 02.12.2006 14:15; edited 2 times in total

[Dead Man]

provukao sam tu stranicu kroz validator.. i vidim da je besprijekorna - možda su je ispravili umeđuvremenu..

ja sam ipak početnik pa ne znam koja su to "pravila" upotrebe css-a.. bilo bi mi korisno da objasniš malo detaljnije

inače - dobro je što postoji jedan takav sajt i na hr.. iako meni osobno je svejedno na kojem je jeziku

[Sulien]

Dead Man wrote:

provukao sam tu stranicu kroz validator.. i vidim da je besprijekorna

stvarno si početnik

[sinke]

Meni se nekako čini da je sve to sklepano nabrzaka.
Bacio sam oko na css i html source.... Ima dosta "krivih" stvari. Definitivno nije "na razini zadatka"
Na prvu sam primjetio: veličina fonta u px, imena klasa i id-jeva je koma, div elemenata ko u priči (bespotrebnih)... ko da su umjesto tr i td ubačeni div-ovi, puno <h1> na istoj stranici

Eto, neka 5minutna analiza

[ON AIR]

pune kese koda . moja 1 sec analiza

[Sulien]

Moja petominutna (ali je trebalo duže da se popiše):

Code:

<div id="logo"></div>

Logo je content, trebao bi biti kao IMG unutra. Ako ne to, trebao bi biti image replacement za title stranice (često H1). Ovako (kao CSS bg image) je očito namijenjen samo sighted userima sa uključenim slikama. U contentu stranice inače nigdje ne piše da se site zove "Site X".

Code:

<div id="galerija"><a href="index.php">&nbsp;</a></div> <div id="prijava"><a href="index.php?page=submit">&nbsp;</a></div>

Ovo je "galerija" i "prijavi stranicu", odnosno tabovi na vrhu. Ako zanemariš ID-eve, kako to možeš znati? Gdje se u contentu nalaze riječi "galerija" i "prijava"? Korištenje &nbsp; (non-breaking space entity) je pokazatelj nepoznavanja image replacement tehnika i nemar za accessibility. Također, ova dva linka ne bi trebali ići u zasebne DIV elemente nego u ordered listu jer je to ipak navigacija.

Code:

<a href="rss.php" accesskey="4" title="ALT+4">RSS</a></li>

Ovo nije pravila upotreba title atributa. Title nije namijenjen uputama kako aktivirati link pomoću tastature. Uz to, ovo je link na RSS feed, ali feed autodiscovery nije omogućen jer RSS nije linkan uz pomoć LINK taga u HEAD-u dokumenta.

Code:

<form action="index.php" method="post">   <div><input name="search" type="text" />   <input type="image" value="Ideš" src="images/ides.jpg" class="button" /></div> </form>

Ovo je search form. Po čemu se to može znati? Gdje je tekst, gdje je LABEL? Čak ni submit button nije tekstualan nego je image.

Code:

<div class="showcase">  <ul id="vis_64">   <li class="name"><a href="javascript:switcher('64')">Hotel Tiski Cvet</a></li>   <li>...</li>  </ul>  <ul id="info_64" style="display: none">   <li class="name"><a href="javascript:switcher('64')">Hotel Tiski Cvet</a></li>   <li class="info"><span>Autor: </span> ...</li>   ... </ul>

Ovo je (srezan) jedan item u showcase-u. Vidi se da je sve napravljeno pretjeranom upotrebom unordered lista i da autor ne zna što je definition lista (DL) i čemu služi. Također, ako malo bolje proučite source, vidjet ćete da javascript funkcionalnost ne degradira te da onaj sa isključenim javascriptom ili sa screen readerom ne može nikako vidjeti info za neki item jer je skriven sa "display:none" od početka.

Code:

<li><a href="javascript:sndReq('1','64','')" title="1 od 5" class="r1-unit">1</a></li>

Ovo je zvjezdica za glasanje. Također ne degradira. Bez javascripta ne možete glasati jer očito po autoru ne vrijedite kao ljudi koji ga imaju.

Code:

<div id="tmpRez_64" class="nmb">2.0</div>

Ovo je ocjena. Gdje to piše? Kako se to može znati?

Code:

<li class="nmb">1</li> <li class="nmb"><a href="index.php?p=2">2</a></li>

Ovo je paginacija, odnosno navigacija po stranicama galerije. Kako se to može znati? Što korisniku kaže link kojemu je tekst "1" ili "2"?

Code:

<h1>Naruči XHTML/CSS </h1>

Glavni title (H1) stranice glasi "Naruči XHTML/CSS". Sjetimo se da nigdje u contentu ne piše koji je to site, no glavno da ovo piše.

Na sponzorima se također očituje neznanje da postoji DL.

Ne mogu više ovo je sve bilo samo sa naslovne stranice, i sve što sam vidio samo nepažljivim pregledom... Jasno je vidljivo da autor također pati od DIVitisa i IDitisa, što je pokazatelj nespretnog baratanja HTML-om i CSS-om, no oprostivo je zbog toga što su to nesemantičke stvari, tj. štete jedino ljudima koji site kodiraju i održavaju te bandwidthu.

Last edited by Sulien on 09.11.2006 14:55; edited 1 time in total

[Dead Man]

korisno. tnx.

[ON AIR]

suli legenda

[nel`chee]

mislim da bi im netko trebao poslati link do ovog threada
inace, prvi put vidim sajt.

[niksy]

nel`chee wrote:

mislim da bi im netko trebao poslati link do ovog threada inace, prvi put vidim sajt.

Nekako mi se cini da ima sve vise CSS showcase siteova koji slijedi slican ili isti layout, ili sam to samo ja ...

[red]

Ha da, kvot suljo.
Dodao bi i da nisu ni svi fičrd sajtovi za jednu takvu galeriju. Ja ne bi ni svoj sajt stavio unutra jer nije dovršen ni iznutra ni izvana.
U prvi mah sam mislio, kul, bar neko nešto, a sad mislim da neću često posjećivati sajt jer mi je takvih showcaseova dosta.

[Sulien]

nel`chee wrote:

mislim da bi im netko trebao poslati link do ovog threada

svaki startup gleda referere

jest, showcase sajtovi su bili fun jedno vrijeme; sada kad više ne postoji drugi način da se rade sajtovi osim onog pravog nisu više fora, jer to drago kamenje web dizajna više nije rijetkost

ali neka im je hrvatski showcase, kod nas je tako i tako vrijeme unazad par godina samo šteta što promiču dobre stvari u web dizajnu a ni sami još nisu naučili i šteta što prodaju svoje usluge ako je rezultat na razini tog sajta

taj hype oko CSS designa, Ajaxa i ostalog je doveo do toga da svi pričaju o tome, svi to koriste, rade webove i Ajax framework-ove, ali malo tko se uopće sjeća što je uopće Ajax i čemu opće služi HTML markup i CSS

[abeja]

Sulien je stvarno zlata vrijedan

[demon cleaner]

red wrote:

Ha da, kvot suljo. Dodao bi i da nisu ni svi fičrd sajtovi za jednu takvu galeriju. Ja ne bi ni svoj sajt stavio unutra jer nije dovršen ni iznutra ni izvana. U prvi mah sam mislio, kul, bar neko nešto, a sad mislim da neću često posjećivati sajt jer mi je takvih showcaseova dosta.

nesto kao..not worthy of your presence...

[nel`chee]

danas se uclanio, prvi post i to bas u ovaj topik... njusim li ja to vlasnika doticnog showcase-a?

[demon cleaner]

nel`chee wrote:

danas se uclanio, prvi post i to bas u ovaj topik... njusim li ja to vlasnika doticnog showcase-a?

ma ne...ni govora...
dapache, vec se kojih desetak dana pokusavam registrirat...

ja samo malo reda podbadam...

[jojo]

ovdje ste mi pojasnili puno mojih grešaka koje radim u zadnje vrijeme. nakon sulienovog 5-minutnog pregleda sve mi je očito . thx

[Sulien]

Dakle, što smo naučili?

1. poznajte sve HTML elemente i njihove atribute, čemu služe i kad ih koristiti
   
2. dok kodirate markup, ne razmišljajte kako će to izgledati... razmišljajte što to znači
   
3. ne prilagođavajte markup CSS-u niti JavaScriptu (koliko je to moguće), radije obrnuto
   
4. ekstra DIV-ovi, ID-evi i classevi nisu potrebni kad znate iskoristiti do kraja CSS selectore, kaskadu i dobru organizaciju
   
5. razmišljajte kao da nema slika (sliijepi user ili robot), a slike (one iz contenta i one iz dizajna) smatrajte nečim što uljepšava site i doživljaj, a poboljšava komunikaciju
   
6. koristite headinge (H1, H2...) ali po levelima i sa smislom
   
7. neka site bude lijep i koristan i sa isključenim CSS-om

[lekke]

Ja sam naučio da nema tog community sitea a da MC Poseidon nije na njemu registriran.

[:cosmos:]

lekke wrote:

Ja sam naučio da nema tog community sitea a da MC Poseidon nije na njemu registriran.

LOL !!!
ma nije to nista naspram njegovog stava ko velikog gurua

[r3dsc0rpi0n]

Ideja za hrv showcase sajt mi se svida, sajt je vizualno dobar.
Smeta me sto textresize "ne radi".

[abeja]

Sulien wrote:

Dakle, što smo naučili? poznajte sve HTML elemente i njihove atribute, čemu služe i kad ih koristiti dok kodirate markup, ne razmišljajte kako će to izgledati... razmišljajte što to znači ne prilagođavajte markup CSS-u niti JavaScriptu (koliko je to moguće), radije obrnuto ekstra DIV-ovi, ID-evi i classevi nisu potrebni kad znate iskoristiti do kraja CSS selectore, kaskadu i dobru organizaciju razmišljajte kao da nema slika (sliijepi user ili robot), a slike (one iz contenta i one iz dizajna) smatrajte nečim što uljepšava site i doživljaj, a poboljšava komunikaciju koristite headinge (H1, H2...) ali po levelima i sa smislom neka site bude lijep i koristan i sa isključenim CSS-om

Ja sam jako sretna da su Sulien i slicni prisutni ovdje..naime moje iskustvo sa css-om je islo tako nekako...naucila sam raditi sa tablicama (jedva)...i dosla u firmu gdje mi je sef rekao da moram sve raditi bez tablica, sa divovim itd...(nije mi objasnio zasto:)
Kad sam tek pocela bilo mi je samo bitno da sve stoji na mjestu gdje bi trebalo biti..jer sam mislila da je to vec veliko umijece..i da jako puno znam ako mogu napravit sajt na taj nacin...nekako nisam uopce razmisljala zasto i cemu sve to...i jako mi je drago da sam polako pocela uvidjati smisao i svrhu svega toga, a ne samo da mi sajt izgleda lijepo...tek sam na pocetku, ali ucim:)

Zasto sam sve ovo pisala..neznam...ali doslo mi

[Sulien]

Nije samo vama bilo korisno. Javio mi se autor koji je već ispravio mnogo od navedenih stvari. Hop na stranicu da provjerite. Bravo!

Last edited by Sulien on 09.11.2006 14:56; edited 1 time in total

[dblchckd]

Odem baciti oko na stranicu od tog iks ipsilona: [url]site x[/url] pa sam uocio da mu se potkrala jedna zlocesta greska u pisanju . A kako sudeci po prijasnjem postu on cita ovaj thread evo upozoravam na nju: u meniju jedna rubrika nosi nasi naziv MISCLEANUS umjesto miscellaneous...

Last edited by dblchckd on 10.11.2006 17:32; edited 1 time in total

[Sulien]

No dobro, to je stvarno moglo ići private (na mail)