10 pravidel šťastného kodera
Projektu už je dávno konec a koder stále ladí. Ještě webík přece nevychytal pro Arachne a HexaBit Junior.. nebo raději ne?
1. Kódujte na svých 100%
Kdo kóduje ten jede. Když už něco dělám, tak to dělám, jak nejlíp umím, protože mi za to koneckonců někdo platí, a tak mu chci dodat to nejlepší, co jsem v rámci rozpočtu schopen. Nic víc – nic míň. Výhodou tohoto prvního bodu je to, že když se podíváte na svůj 2 roky starý webík, tak víte, že tehdy to prostě líp nešlo.
2. Netrapte se DIVy
Div sem div tam. Vzhledem k neustále se zvyšující kapacitě datových linek je na většině webů úplně jedno, jestli v kódu bude jeden div, nebo tři. Nic se nemá přehánět, ale když tam ten div potřebuju dát proto a proto, tak ho tam dám. Na „profi“ fórech vám to sice „profi profíci“ zkritizují, ale oni vás koneckonců neplatí.
3. I přístupnost má své meze
Aneb ANO – přístupnost je důležitá a ANO – web by měl být přístupný pro všechny uživatele, ale NE za každou cenu. Např. věčný problém s kvalitním image replacementem, který by byl univerzálně přístupný – takový prostě NENÍ (Gilder/Levin Method je fajn, pokud je nahrazovaný obrázek mnohonásobně větší, jak text v něm – jinak je lepší Phark, protože přístupnostně to vyjde stejně blbě.. kdybyste někdo potřebovali seznam metod, tak zkuste Revised Image Replacement).
A designer na web ty obrázkové nadpisy chce. Je tedy třeba se zeptat – kolik lidí z cílovky daného webu bude browsovat s vypnutými obrázky a zapnutým CSS (což je asi nejhorší kombo webového uživatele)?
Trocha matematiky: Když to bude 0.1% lidí s vypnutými obrázky/zapnutým CSS a průměrná konverzní akce má pravděpodnost 1% (se ziskem řekněme 500 Kč) a na webu browsuje 100 lidí denně, tak jednoduchou matematikou zjistíte, že jste ztratili ročně 200 Kč. Nebo 2000, když budou čísla jiná. Nebo taky nic… nu a všichni víme, že za dobrý dyzajn se platí :-)
Další přístupnostní dilemata, která si musí koder (s designerem) vyřešit:
- jak moc by měl jít zvětšit text, než se web rozpadne? zaplatí někdo případné alternativní styly?
- jak moc dbát na kontrast barev?
- pro jaké prohlížeče web testovat?
- přidat na web relativně zbytečnou stránku „prohlášení přístupnosti“, nebo ne?
- designovat i pro 480×600?
4. To hell with bad browsers
Když má člověk starý prohlížeč, tak musí počítat s tím, že se mu budou weby rozpadat. A vzhledem k výše uvedené matematice prostě není ve většině případů rentabilní ladit i pro NN 4.0 a IE 3.0 (osobně neladím ani pro starší Opery a IE 5.5-). Kdo to dělá, má buď pevné nervy, nebo spoustu volného času.
5. Nevracejte se ke starým projektům
Dokázal bych redesignovat a překódovat všechny projekty, které jsem dokončil a spustil. Což mi dává docela slušné množství času, který raději strávím prací na nových projektech. Ano – teď by se dalo spousta věcí udělat líp, ale předtím to prostě nešlo. A do překódování většina klientů hned tak peníze nevrazí.
6. Dolaďte web až všichni ostatní skončí
Web je potřeba ladit v celém průběhu jeho tvorby – když si nakódujete homepage ve Firefoxu, tak je dobré ji hned projet a doladit i v IEčkách a Opeře. Ušetříte si pak práci s laděním ostatních stránek, která by byla neúměrně větší, než důkladně vytvořená homepage. Koder by měl projekt vždy opouštět jako poslední – doladit finální mršky, co nadělali programátoři, projekt předat a v ideálním případě už se k němu nevracet. V méně ideálních případech jdou ještě další 2 – 3 hodinky na ladění.
7. Kdo odstylovává rovněž stylovati musí
Což je důvod proč nepoužívat hvězdičkový selektor. Aneb, když už vynulujete všechny seznamy, nadpisy či další prvky webu, tak je musíte rovněž podruhé nastylovat,nebo zajistit, že je klient nebude moci využívat (a uvést klientovi skutečnost, že nebude). Často se zapomíná na číslovaný seznam, seznam definic, čáru či nadpisy nižší úrovně.
8. Kód má být takový, aby se v tom i prase za rok vyznalo
Správně odsazený (tedy v šabonách – ve frontendu webu je lepší komprese kódu do řádku) s hezky pojmenovanými třídami a případně i lehce prokomentovaný.
9. Komentujte s Mírou
Komentáře jako takové nejsou v HTML potřeba, pokud používáte správné názvy pro svoje DIVy. Aneb DIV s ID=menu značí, že v něm asi bude menu. DIV s ID=cernyvlevo potřebuje dodatečný komentář (co je či není lepší používat nechávám na čtenáři). Kaskádové styly se hodí prokomentovat maličko víc, nebo aspoň styl nadělit na související sekce.
10. A Filův blog stále upadá
Komentáře
Sice jsem programator a ne koder, ale nektere body (1, 8, 9) jsou naprosto vystizne i pro moji praci. :) Inu, stabni kultura musi byt. ;)
„když se podíváte na svůj 2 roky starý webík, tak víte, že tehdy to prostě líp nešlo“ – to je chytrýýý :] (od teď přestávám mít výčitky svědomí)
BROUZDÁ NĚKDO BEZ CSS?
Ano, roboti vyhledavačů. Vypnutím CSS je najednou krásně vidět na co
designer / kodér kladl důraz a na co nikoli. Pravda, někoho třeba správná
sémantika a SEO nezajímá, to je ale potom pouze jeho profesní omezenost.
NETRAPTE SE S DIVY
Tzn. sémantika dokumentu jde do hajzlu, poměr obsah / html kód také…
U velkého množství divů nikdy nebyl ani tak problém s rychlostí
internetového připojení.
Problém dělá především asmotné zobrazování v prohlížečích. Např.
Internet Explorer, který se při příliš složitém layoutu prostě občas
jen tak zbortí – i na celkem slušném HW.
KÓD MÁ BÝT TAKOVÝ ABY SE V NĚM VYZNALO?
Ano, vývojová verze určitě ano.
Ale publikovaná verze? Tam je to naopak na škodu. Samozřejmostí je, že si
vývojové verze zálohujete.
„designer na web ty obrázkové nadpisy chce“
A ptá se někdo uživatele jestli je chce? Možná by se pak designer divil
kolik lidí ho za to nenávidí.
Ikdyž v mnoha věcech nesouhlasím, musím pochválit podnětný článek. :-)
Tady to upadaaa, hrozne upadaaa :D A nejhorsi je, ze tenhle blog je jak kanagon, ze ctecky ho vyhodis, weblogama se ti vrati. ;)
[4] Díky za dlouhý komentář – mám k němu pár bodů..
- o brouzdání bez CSS v článku nepadlo ani slovo, o vyhledávačích také ne.. tuším, že [1] mluvil o tagu čáry..
- osobně divy přidávám většinou jen a kvůli IE :-) – přece si nenavrhnu nenakódovatelný design :-)
- myslím, že rozdíl mezi kódem v šablonách a tím, co dostane uživatel jsem také zmínil :-)
- ad designer – u mě je to jistá schizofrenie – neb si designuju i kóduju svoje weby.. a ty nadpisy tam vážně takto chci :-) – aspoň některé :-)
[5] návod pro vyřazení blogu z weblogy.cz href=„https://blog.filosof.biz/kouzlo-rss/“ rel=„nofollow“>https://blog.filosof.biz/kouzlo-rss/ ;-)
To lepidlo se jmenuje Kanagom nikoliv Kanagon (viz např. http://www.sevt.cz/…kt/41077400/).
Jinak pokud jde o procházení bez stylů, tak například uživatelé se zrakovým postižením v podstatě žádné styly nepoužívají. Dá se říct, že web vidí tak, jako by se na něj dívali v prohlížeči LYNX.
Pokud jde o DIVy, tak si myslím, že pokud nechci html kód parsovat nějakým jiným nástrojem než je prohlížeč internetu, tak nějaký ten DIV navíc (pokud ho prostě potřebuji mapříklad pro pravý sloupec) rozhodně sémantice nijak neuškodí. Naopak, přidáním DIVu vlastně říkám, že tohle je nějaký blok textu, který je nějak odlišný od ostatního textu. Takže by se dalo říct, že se tím sémantika jen zlepší (vím, je to hodně nadsazené).
ad 1) samozřejmost, kdo to tak nedělá, brzy se mu to vymstí
ad 2) souhlas a jsem přesně ten, který si v kritice do mnoha divů rád rýpne … je to ale jen věc praxe – kdo kóduje delší dobu a dělá to rád (baví ho to) začne časem uvažovat i o zbytečných divech
ad 3) ano, za pěkný design se platí, současně s kódovou stabilitou. Ve všech profesích se musí dělat kompromisy a tahle není výjimkou.
ad 4) osobně ladím pouze pro IE6, IE7, Operu9+ a Firefox. Když pak web jede např. v IE5.5 v pohodě, tak jsem jen rád, ale není to pro mne podmínkou. Mám sice nainstalovány IE3,4.1,5.1,5.5,6 a 7, ale to spíše jen z „frajeřinky“ :)
ad 5) „A do překódování většina klientů hned tak peníze nevrazí.“ … a když vrazí, tak se vracejme. Každý web je VŽDY poplatný době, kdy vznikal, tak to prostě je.
ad 6) U nás je postup jasný – nejdříve se udělá grafika, pak šablony a ty se už v průběhu testují (viz bod 4). Potom je velmi malá pravděpodobnost, že po napojení šablon na redakční systém by byl nějaký větší problém.
ad 7) hvězdičkový selektor je velmi diskutabilní téma :)
ad 8,9) osobně jsem rád, když je kód solidně nastylovaný i ve frontendu a myslím, že komentáře v HTML nejsou vůbec potřeba, pokud někdo nepojmenovává třídy apod. např. „h-l-v“ místo „horni-levy-vlevo“. Velikosti kódu to zase tak neublíží a hlavně je pak každému jasné o co jde.
bod tri a [4]
Každý div, ktorý má v kóde opodstatnenie, je normálny a určite ho treba použiť. Ak na príklad pri tvorbe faux columns s padding je treba použiť tri div-i, tak nech sa použijú. Samozrejme vnútri nich to musí byť sémanticky správne. Ale zbytočne „masturbovať“ nad tým, že človek nepoužil ani jeden div je zbytočné – vždy by mala byť snaha o použitie rozumne nutného počtu (proste aj web s 10 divami nemusí byť div-ný ;-) )
2. Netrapte se DIVy
Dlho som odporoval a snažil sa bez divov, ale pri poslednom redesigne som kapituloval. Pozná niekto spoľahlivejší a jednoduchší spôsob ako na flexibilný pexel-perfect design ak obalenie do šiestich divov?
ad bod 10
lol :D
ID=cernyvlevo není dobře pojmenovaný prvek, protože s je možné, že po
nějakém čase bude bílý a vlevo nebo žlutý a dole :)
já takovéto pojmenování používám jen pro prčvky, které se nebudou na
99% měnit jako patička, hlavička, košík či menu, na další
„layoutové“ oxíky používám písmena abecedy
[1] Ano, brouzdá se i bez CSS. Na widlích se to moc nevidí, ale tučnáci občas čtou weblogy bez zaplé grafiky.
[7][13] a k tomu tam je i názorný výpočet v bodu 3. Opravdu se to vyplatí?
Pro BOBOCOPa:
Kanagom je lidově kanagon :-)
Stejně jako BRANO je lidově BRAMO :)
Počítat s průměrným ziskem z jednoho uživatele může být ošidné: jsou firmy, které mají několik málo klientů ročně (a nejsou nutně ani malé, ani chudé) a takové by si neměly dovolit riskovat…
P.S.: Jaké zařízení má rozlišení obrazovky 480×600?
[16] Ano – na druhé straně jsou samozřejmě zvláštní případy, kdy je web nutné vychytávat i pro velmi minoritní skupinky – např. teď dělám na webu, který bude nezanedbatelná část uživatelů ovládat klávesnicí.. ale takové odchylky většinou odhalí analýza..
ad rozlišení – hodně starý monitor postavený na boku? :-)
v 9. kroku jsem uplně nepochopil, jak jinak než složit stránku z HTML a CSS, co se tíče pouze statické částy.
Co vím tak jestli zchlédnout zdroj Seznam.cz tak každý kóder by si asi nesed na židly ale rovnou na zem :-)
já jsem vymyslel ještě lepší řešení, teď jej začínám praktikovat ve firmě a začínáme tak dělat zhruba čtyřicítku webů – základní idea je, že je jedna xhtml šablona, stejně pojmenovaný prvky na stejných místech, a je jedno jestli je to jednoduchý webík, nebo ultrasložitý obchod.
Ad bod 3: zajímalo by mě, jestli jsou někomu k něčemu v kódu navíc přidávaná . Ano, hezky to vypadá když se vypne css, ale brouzdá někdo úplně bez css? Připadá mi to, jako zbytečný balast navíc, za který se akorát někdo poplácá po zádech a pochválí se, jak to udělal pěkně…