( sunmao | 2012. 01. 02., h – 15:59 )

Szép munkát végeztél. Számomra nagyon érdekes volt, hogy sok olyan dolgot olvastam aminek nem tudtam a nevét, vagy hogy ez egy szabály csak zsigerből úgy csináltam. Például a munkahelyemen mi is datepickert használunk és itt is a belekattintós módszer volt, de én úgy éreztem, hogy a felhasználónak valahogyan a tudtára kell adni, hogy ez nem egy egyszerű text field, ezért oda raktam egy kis calendar icont. Szerintem sok minden abból amit leírtál az "ráérzés", érzék kérdése, de ugyanakkor simán tanulható is.

A probléma az szokott lenni (és néha nalunk is ezt látom), hogy aki igazán jó a business logic/backend fejlesztésében az a frontendnél szörnyű dolgokat művel.. :)
Illetve még mindig isszuk a levét a régi táblás berögződésnek.

Lentebb írtad:

"Kevesellem a class-okat. Az lenne az elv, hogy mindenrol leirjuk class-ba, hogy ez micsoda, mire valo. Egyfajta objektummodellt epitunk a bongeszonek, hogy szia, figyu, ez az oldal, ez all egy keresoreszbol, egy resultlistabol... Majd a CSS-ben megmondjuk, hogy ezt hogy kell skinelni. Itt szinte mindennek id-je van csak, az is - gondolom - fokent a JS-hez. (Amit - a layout helyett - rakj ki kulon js fajlba, btw)"

E mellé még szeretném megjegyezni, hogy sokan nagyon sokszor indokolatlanul használnak div tageket illetve, rossz helyen használják azokat és keverik azt is, hogy hol kell inline és box elemeket használni. A class-ok nagyon fontosak de talán az még beszédesebb, ha olyan beszédes html tageket használjunk az adott helyen ami oda illik és tényleg azt a feladatot látja el.

Pl: Ha van egy "címed" akkor nem berakod span tag-be és után félkövérré formázod és megnöveled a betűméretet, margin-t, hanem például h1 tag-ot használsz.

Kötelező olvasmány:
http://dev.opera.com/articles/view/1-bevezeto-a-webes-szabvanyokba/

Hasznos lehet:
http://www.w3.org/TR/CSS2/selector.html#pattern-matching
http://weblabor.hu/cikkek/cssalapjai1
http://www.hotdesign.com/seybold/everything.html

Kis szórakozás:
http://lohere.net/ikm/index.php/Webdesign

ui: Érdekesség, hogy mikor bemutatsz egy munkát egy hozzá nemértő személynek, akkor egyből a részletekben fog elveszni...
"Miért van ez oda igazítva?"
"Ez miért félkövér?"
"Ez a gomb miért zöld?"

Tehát nagyon fontos az első benyomás, az hogy a programod kinézzen valahogy, legalább olyan fontos mint hogy jól működjön. Természetesen írd meg az alsóbb rétegekhez tartozó kódot, de utána mindenképp csináld meg a CSS design-t is és a html layoutot is. Mert, hogyha van két program és az egyik kicsivel kevesebbet tud, de sokkal jobban néz ki (könyebben érthető, kezelhető), jobb első benyomást tett a főnökre, akkor azt fogják választani és még csak okolni sem lehet őket, mert ez nem tudatos választás lesz hanem belülről jön majd.

Egyébként én néha legalább annyira élvezem a layout-al való bohóckodást mint a tényleges kódolást. Mert ott is ki lehet élni alkotói vágyunkat.
Felhasználói szemmel nézve a GUI-dat még elég sivár, de lesz ez még jobb is. Sok ötletet tudnék még (szeretnék) adni, de most épp munkaidőbe vagyok.. :)

Csak pár példát említve:
Táblázatot jól fel lehet dobni "even odd-al", persze nem piros kék háttérrel, hanem valami lightos árnyalattal.
Szerezz be valamilyen igényes icon szettet, mert azt imádják ha van icon és néha beszédesebb is mint a gombok. Ha így teszel azért mindig rakj a képnek title-t, hogy ha felhasználó fölé viszi az egeret akkor tudja miről van szó.
Ha a felhasználó valamilyen tevékenységet végezz, jelezz neki vissza, hogy tudja mi van, ezt teheted popup-okkal vagy egy ízléses message csíkkal a header alatt.

Amúgy a desgin-al kapcsolatban, szerintem nem szégyen ha megnézel más oldalakat is, mert onnan lehet venni ihletet, mert tényleg nincs új a nap alatt már. De ez szerintem nem lopás. Nem azt mondom, hogy szedd le egy oldal CSS kódját és egy az egybe vágd be, hanem ha valami megtetszik azt másold le és formáld a te oldaladhoz, építsd bele.

szerk: Nem tudom használsz e firebugot, de design-hoz és js-hez elengedhetetlen. A chrome és az IE beépített változata vacak az fb-hez képest.