Spravovatelnost — o důvod víc proč využít CSS3

Dobře, toto sice je blog vývojářského frikulína — ale telelícího se radostí, že vám konečně může ukázat jak používání CSS3 a dalších nových front-end není akt frikulínství. Je to akt úspornosti. Šetření vlastní energie a klientovy peněženky kromě jiného pomocí lepší spravovatelnosti projektu.

Pojďme si to ukázat na zjednodušeném příkladu kolovrátku (znáte jako preloader nebo spinner). Konvenční příprava pro použití na webu vypadá asi takto — navštívíte Ajaxload, vyberete typ a barvy a necháte si vygenerovat animovaný gif.

Na jiném místě webu potřebujete jinou velikost a tak si vygenerujete nový gif.

A pak ještě potřebujete dvě variany pro jinou barvu pozadí. Přidáte třetí a čtvrtý gif. Pak i pátý a šestý.

Za týden si designér prohlédne web a upraví barevné schéma.

Hledá se kóderský talent!

Tohle může být zajímavé pro ty z vás co se už nějaký čas zabýváte front-end kódeřinou, HTML a CSS máte docela v malíku, vaše nadšení do webdesignu nepolevilo a chtěli byste nabrat nové zkušenosti se zajímavými klienty a zajímavými technologickými postupy (mobilní webdesign, progressive enhancement…).

Hlásím stav, ve kterém musím odmítat i sympatické zakázky a potřebu se teď chvíli více věnovat jiným radostem. Pojďte se mnou vytvořit dvoučlenný kóderský tým! ;)

Výhodu mají kluci a holky s nějakým technologickým přesahem (Javascript, Django, PHP…) a baví je pracovat na zajímavých projektech kolem kultury.

Vibrujete zvědavostí? Hurá! Pošlete mi ukázky prací a představu o hodinové sazbě na michalek@shortcat.cz.

CSS řešení: fotogalerie se zvětšením po najetí myši

Tohle řešení není žádná věda, ale můžete si tady hezky osvojit principy progressive enhancement a taky se třeba naučit obrázky s kulatými rohy. ;-)

Demo >

Základní funkčnost je jednoduchá: Absolutně pozicovaný element (zelený .photo) leží uvnitř relativně pozicovaného (fialového .photo_contai­ner):

Web nevypadá ve všech prohlížečích stejně. Jak to vidí návštěvník a jak kodér?

Nejdříve se podívejme jak vidí Scuk.cz návštěvník s MSIE8:

Vidí vizuální chybu? Dobře, vy byste určitě nějakou našli :), ale návštěvník nebude nad vzhledem webu příliš přemýšlet.

Pohroma ale nastane, pokud se na Scuk podíváte jako webový vývojář. Pak jej vidíte asi takto:

„Vidím chybu! Vždyť ta lišta co vypadá dobře v Chrome, Firefoxu, je v MSIE chybná — kde jsou kulaté rohy, kde gradient na pozadí?!”

Napadlo vás to? :) Pak vítejte ve světě, kde kodéři při ladění webů napříč prohlížeči nevyjí zoufale na měsíc, protože vědí, že web nemusí v každém prohlížeči vypadat stejně.

Kontext „grafického zadání” a citlivost na rozdíly v jednotlivých prohlížečích v jakém my vývojáři posuzujeme vzhled prvků webu je pohledem, kterého se musíme zbavit.

Lidé, kteří naše weby používají, jej neznají. Vzhled prvků webu vnímají v kontextu celého webu. Proč by jim mělo vadit, že lišta nemá kulaté rohy, když náš pohled neznají?