Autor Zpráva
Chamurappi
Profil
Na Webylonu jsem ve čtvrtek vydal článek Strážce technické příčetnosti, v němž kriticky nahlížím na kreslicí vlastnosti z CSS 3.
Martin Michálek reagoval článkem Konec éry potrhlého uživání bitmap — tentokrát ryze prakticky.
Já nyní na reakci zareagoval článkem Ryze praktická potrhlost.

Během soboty se na Twitteru vyrojilo několik dalších příspěvků k debatě:
@benAbraham: „Český způsob oddělení práce kodéra a grafika nemusí být jediná, správná a mimo naši kotlinu rozšířená cesta.
@koucik: „Zařízení se liší rozlišením, hustotou px, rozměry atd. Obrázek se tomu nepřizpůsobí, CSS ano. Bez CSS3 by kodéři zešíleli.
@lefiath: „Koukám že naprosto zkreslené představy o tom co má dělat webdesignér nemají jen zákazníci, ale i kodéři.
@benAbraham se také ptal: „Dá se k tomu někde diskutovat?“ — Dá. Tady. (Na ostatní tweety zde odpovím později.)

Jaký je váš názor?
Taurus
Profil
Nadpis typu „Konec éry potrhlého…“ na mě působí bulvárně, extrémisticky. Ne, nejsem suchar… Kreativní nadpisy mám rád.

Kodér je člověk, který dostane obrázek nebo PSD a ten přepracuje na fungující web. Jestli si vypomůže css nebo obrázky, to je jeho věc a starost, pokud technologie využije v odůvodněné míře, na správných místech a nezapomene na přístupnost a použitelnost. Správný kodér by měl aspoň lehce grafice rozumět, což platí i obráceně.

Proč nevyužít kulatý roh nebo stín pro objekt, kde není složitá grafika; a na druhou stranu – proč skládat 12cípou hvězdu z css, když si ji můžu pěkně nakreslit se složitější grafikou na pozadí? Ale možná neodpovídám přímo na otázku, třeba ji úplně nechápu.
Petr ZZZ
Profil
Osobně se v kratším kódu orientuji lépe než v dlouhém a něco mi říká, že nebudu sám. Je-li kód s obrázkem kratší, nevidím důvod použít jiné řešení. Samozřejmě do únosné datové velikosti obrázku, ale tady bych čistě od boku střelil, že i datově by obrázková varianta měla být úspornější než alternativa pomocí CSS (je-li obrázek složitý, bude o to delší i alternativní kód, a je-li obrázek jednoduchý, je zas datově malý).

Takže v tom čichám spíš marketingově oblbovací strategii některých kodérů, používajících vždy nejnovější technologie a zamlčujících zadavateli prostý fakt, že starší postupy mívají z přirozenosti věci širší a spolehlivější podporu než ty nové. Tak tomu vždy bylo a vždycky bude, protože odstřelit zpětnou kompatibilitu je nejlepší metodou odstřelit prohlížeč. A protože hlídat zpětnou kompatibilitu je snazší než programovat do prohlížeče nové funkce, budou se prohlížeče vždycky lišit víc v podpoře nových funkcí než v podpoře starých kodérských postupů.
shaggy
Profil
Pri článku Konec éry potrhlého uživání bitmap — tentokrát ryze prakticky je to veľmi pekne zhrnuté v komentári od Miloslava Ponkráca (k tomu je zbytočné niečo dodávať).
Páči sa mi, ako tí, ktorí zvládajú obidve činnosti "perfektne" (rozumej, v ani jednej nie sú dobrí) píšu články o konci vytvárania grafických podkladov v Photoshope a o budúcnosti "dizajnovania" priamo v prehliadači. Píšu o tom tak, ako keby sme to nerobili už dávno (ak mi niektoré detaily nesedia, tak nebežím hneď za grafikom, ale upravujem si to napríklad cez firebug) a hlavne, ako keby všetci koderi/programátori mali grafické cítenie a vedeli si navrhnúť dizajn stránky sami (vieme, ako to väčšinou dopadá, stačí sa pozrieť napr. na webylon :-) ).

Nie som zaslepený zástanca Chamurappiho, mám svoju hlavu a súhlasím s ním, keď si myslím, že má pravdu.
Ale mrzí ma, že niektorí ľudia, ktorí sa môžu javiť ako autority a odborníci v tejto oblasti (Pixy), sa vyjadrujú celkom hanlivo na adresu Chamurappiho a pritom sú to práve oni, ktorých mylné názory boli časom a praxou vyvrátené (by ma zaujímalo, či stále používa to hyperpokrokové XHTML).
Petr ZZZ
Profil
Reaguji na shaggyho:
„...ako keby všetci koderi/programátori mali grafické cítenie a vedeli si navrhnúť dizajn stránky sami (vieme, ako to väčšinou dopadá, stačí sa pozrieť napr. na webylon :-)“

Jsme tak trochu v oftopíku, ale osobně nemám grafice Webylonu co vytknout. Dobře, to červené pozadí mě moc nebere, ale ty stránky jsou přehledné, přístupné, flexibilní, formátování citátů umožňuje okamžité rozlišení citátu od vlastního textu atd. Přímo nadšený jsem z ilustračních obrázků v úvodu každé stránky – co obrázek, to perla, vystihující v geniální zkratce podstatu článku. Nějak nevím, co víc řešit graficky na stránkách, věnovaných technickému povídání o webových technologiích.
shaggy
Profil
Petr ZZZ:
nemám grafice Webylonu co vytknout
To, čo som napísal, tak tomu sa vraví irónia na odľahčenie textu :-)
_NN_
Profil *
Článku niet čo vytknúť, ukážka na bubline je trefná, viem si živo predstaviť aj požiadavku na inú "šípku" bubliny – napr.: http://www.clker.com/cliparts/F/R/G/X/h/E/speech-bubbles-7.svg

Pobavila aj zmena grafiky ikonky http://www.webylon.info/B.20 a pozdrav od Pixiho.


http://www.webylon.info/B.20.img vs http://www.webylon.info/B.20.MM :-D
Str4wberry
Profil
Otázka je, kde má být ta hranice, kdy používání CSS už je kreslení. Rámeček pomocí čáry je OK, rámeček s bradavkou už je kreslení. Co třeba background-color? Proč nepoužít obrázek? Grafik si dovymyslí ornament na jednolitém pozadí a nemá který obrázek přepsat.

Co se týče odměřování všemožných parametrů v editoru, tak lze očekávat, že se editory naučí příslušné údaje generovat, takže to jako takový problém nevidím.

Kol zdejší otázky mi přijde ideální zůstat někde mezi. Pokud vezmeme příklad bublinky, tak v případě, že ji budu potřebovat na webu v proměnlivých výškách a šířkách a v několika různých barvách, tak bude CSS řešení nejspíš výhodnější než skládání několika CSS spritů. A jindy je zase vhodnější potrhle použít bitmapu.
Chamurappi
Profil
Reaguji na @benAbrahama:
Nedomnívám se, že jde o speciální český způsob. Firem, které nabízejí manuální převod PSD do HTML/CSS šablony, existují všude po světě mraky, takže bych neřekl, že v zahraničí se to hemží všeuměly.


Reaguji na @koucika:
Zařízení se liší rozlišením, hustotou px, rozměry atd.
Rozdíly v hustotě pixelů nejsou tak dramaticky velké, aby si je běžný uživatel uvědomoval. Jinak ale uznávám, že to je dobrý argument pro vektorovou grafiku.

Obrázek se tomu nepřizpůsobí, CSS ano.
SVG obrázek se přizpůsobí. Bitmapu jde naservírovat iPadům 3 a iPhonům 4 ve vyšším rozlišení. Pokud ji grafik dodá.


Reaguji na Taura:
Kodér je člověk, který dostane obrázek nebo PSD a ten přepracuje na fungující web.
Na školení o snadnějším životě na front-endu by ses dozvěděl, že Kodér 2012 už lidským převodníkem z PSD do HTML není. Příliš nechápu, co s tím mají společného HTML 5 a CSS 3, ale v zájmu klidného průběhu kurzu se ho raději nezúčastním.


Reaguji na Str4wberryho:
Otázka je, kde má být ta hranice, kdy používání CSS už je kreslení.
Přesně tak. Právě náznak dogmatického posouvání této hranice mě přiměl k dloubnutí do tohoto tématu.

lze očekávat, že se editory naučí příslušné údaje generovat
Fireworks prý již něco nativně umí. Opět je pak otázka, proč by grafik s (polo)vektorovým editorem neměl generovat rovnou vektorové obrázky.

Přijde mi trochu divné mít generátory na CSS, protože na stylopisy koukám jako na zdroj (pokud možno lidsky srozumitelný), ne jako na produkt z nějakého algoritmu (kterému je srozumitelnost i redundance fuk) — se srozumitelností pak souvisí i ty zmiňované náklady na údržbu. Ostatně generátory HTML si také nevypěstovaly moc dobrou reputaci.

Stejně jako na CSS můžu mít i generátor na procedurálně stavěné bitmapy. Vzpomínám si na jeden web, který měl jako background-image bloků JavaScriptem nastavovaný PHP skript, který generoval obrázek s pěkným ohraničením v daných rozměrech. Stejným způsobem by šlo strojově generovat i různobarvené bubliny.

tak bude CSS řešení nejspíš výhodnější než skládání několika CSS spritů
Vypadá chudě ve starších Explorerech a Opeře Mini a nehezky v levných Androidech. Přínos kreslení přes CSS pro návštěvníka by musel být podstatně vyšší, aby vyvážil tyto nevýhody.
Martin Michálek
Profil *
Procedurální grafika do CSS patří! :) Samozřejmě — jak která, jak kdy a jak pro koho.

Pojďme vzít postupně tři konkrétní situace:
a) Nakreslení lampy pomocí CSS
b) Poskládání tooltip bubliny
c) Užití CSS pro zakulacení rohů nebo vytvoření stínu

Ad. a) Lampu lze ocenit jako ukázku možností technologií. Ve webdesignérské praxi by to bylo trochu jako malovat hasákem po plátně. :)

Ad. b) Tooltip bublina bez bitmap – jak kde. Projekt, pro který jsem ji navrhoval, má celkovou návštěvnost skrze MSIE7+8 za poslední měsíc 3,59 %. Bublina na různých místech projektu mění svou výšku. Design projektu se iteruje. Pokud by některý z těchto parametrů byl nastavený jinak, hledal bych jinou cestu a skončil buď u řešení, které se i v Chamurappiho-prohlížeči-pro-testování-CSS3-webů zobrazí fajn nebo zůstal u bitmapy.

Ad. c) Zakulacení rohů nebo vytvoření stínu — i tady samozřejmě existují scénáře kdy CSS3 prostě použít nelze. Pokud děláte interní systém pro banku kde vše běží na IE6 a postupy v týmu nastavené tak, že kóder design poprvé uvidí týden po schválení nejvyšším z nejvyšších schvalovačů a pak ho musí nějak (rychle!:)) převést do HTML/CSS, pak ok. Jako kolečku v tomhle soukolí vám border-radius nepomůže.

Jestli se zakulacování rohů nebo vytvoření stínu pomocí CSS3 hodí pro jeho způsob práce a jeho typ projektů, ať si rozhodne každý sám. Zkusím sesumírovat proč se hodí mě:

1) Šetří energii — většina mých projektů se zhusta iteruje, mění se drobnosti v barvách, rozměrech elementů atd. I po spuštění se do nich často zasahuje. Přegenerovávání bitmap po každé změně by nebylo nic příjemného.
2) Je vizuálně flexibilní – Jak jinak ošetřit různá ppi, například na Retina displejích nebo různé rozměry elementů v responzivních layoutech? Vektory, ano. Ale ty v použitelné podobě prohlížeče neumí. :) Zmenšovat bitmapy v prohlížečích sice lze, ale u grafiky webu bývají výsledky tristní.
3) Uživateli šetří requesty a objem stahovaných dat, což je třeba na mobilních webech zásadní. Jindy samozřejmě ne a je pravda, že na druhou stranu může CSS3 zatěžovat procesor náročnějším vykreslováním.

CSS3 samozřejmě nejsou jen kulaté rohy a stíny. Jednotlivé vlastnosti se pohybují na škále od "s rozumem můžeme docela v pohodě používat" (např. font-face, media-queries) až po "bacha na ně" (gradienty, animace). Tápajícímu dá určitou odpověď třeba HTML5 Please: http://html5please.com/
Chamurappi
Profil
Reaguji na Martina Michálka:
Bublina na různých místech projektu mění svou výšku.
Moje bitmapová bublina je také natahovatelná — zkus si změnit velikost písma. Nastavovat blokům s víceslovným obsahem pevně oba rozměry je fuj.
Udělat natahovatelnou šířku by šlo samozřejmě také, žádná velká věda.

Přegenerovávání bitmap po každé změně by nebylo nic příjemného.
Teď přegenerováváš CSS, v tom nevidím moc velký rozdíl. Jakmile se podkladová grafika vymkne schopnostem použitého CSS, musíš buď hledat na malování jiný hasák, nebo také přesedlat na bitmapy.

Jak jinak ošetřit různá ppi, například na Retina displejích
Retiny mají dohromady mnohem menší tržní podíl než starší Explorerové, v nichž celkový vzhled obětuješ mnohem výrazněji.

Zmenšovat bitmapy v prohlížečích sice lze, ale u grafiky webu bývají výsledky tristní.
Současné prohlížeče již zmenšují dost dobře. I roztahují. Gradient udělaný obrázkem bývá skoro vždy datově úspornější než to prefixované zvěrstvo, které si generuješ nyní.

Tápajícímu dá určitou odpověď třeba HTML5 Please
Momentálně jsem v Exploreru 7 a na odkázané stránce mi nejdou rozklikávat jednotlivé položky, takže se k obsahu nemám šanci proklikat. „Use the new and shiny responsibly“ — jdou příkladem :-)
Martin Michálek
Profil *
Odpověď Chamurappimu:

"Teď přegenerováváš CSS, v tom nevidím moc velký rozdíl."

To máš pravdu jen v malém procentu situací — třeba u CSS3 gradientů. U kulatých rohů, stínů nebo dejme tomu transitions se žádné "přegenerovávání CSS" neděje. Syntaxe je i s prefixy docela snesitelná. Syntaxe kulatých rohů vypadá nějak takhle (viz CSS3please.com):

-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */

Nikdo netvrdí, že zrovna CSS3 gradienty je rozumné používat vždy a všude. Tam je aktuálně potřebný kód poměrně šílený je na pováženou jestli je to v obvyklých kóderských situacích dobré řešení.

"Retiny mají dohromady mnohem menší tržní podíl než starší Explorerové…"

Jasnačka, ale weby děláme pro dnešek, pro zítřek a pro období za dva až tři roky. Důležité je si uvědomit, že pro včerejšek ne. :) Jak to bude na konci životnosti u tvých jednorázově vyráběných projektů na dva roky těžko říct, protože to záleží na cílové skupině.

V případě projektu pro cílovou skupinu frikulínů mezi 20-30 lety s polovičním podílem přístupů z MSIE oproti normálu kde životnost kódu bude minimálně 4-5 let a často se do něj bude sahat prostě vsadím na to, že se mi současná příprava na Retinu a snadnější spravovatelnost pomocí CSS3 vrátí daleko dříve než ke konci životnosti.

U každého projektu je míra užitečnosti CSS3 jiná.

"Současné prohlížeče již zmenšují dost dobře."

Fotky ano. Zkoušel jsi bitmapovou grafiku typu ikony?

"HTML5 Please — Momentálně jsem v Exploreru 7 a na odkázané stránce mi nejdou rozklikávat jednotlivé položky, takže se k obsahu nemám šanci proklikat."

To rozhodně. Takhle by se to dělat nemělo.
Chamurappi
Profil
Reaguji na Martina Michálka:
Syntaxe kulatých rohů vypadá nějak takhle
Chybí ti tam -moz-verze pro čtyři procenta brouzdalů se starším Firefoxem.

Jasnačka, ale weby děláme pro dnešek, pro zítřek a pro období za dva až tři roky. Důležité je si uvědomit, že pro včerejšek ne.
Většinu vad na kráse bys mohl hájit určitou hypotetickou budoucností. Weby dělám pro dnešek, zítřek neznám. Můžu ho částečně odhadnout, ale jít domnělé představě aktivně naproti by bylo pošetilé (ať je jakkoliv lákavá). Zejména u projektů vyvíjených dlouhodobě nemá smysl přilnout ke konkrétní vizi budoucnosti, protože se kdykoliv můžeš skutečným potřebám doby přizpůsobit.

Zkoušel jsi bitmapovou grafiku typu ikony?
Zkoušel. V mobilním prostředí běžně používám velké ikony zmenšené do malých rozměrů — právě kvůli různé hustotě prohlížečových pixelů.

u tvých jednorázově vyráběných projektů
Já takové projekty nedělám (leda ze zvědavosti). Mluvím o nich, protože mi připadá, že je okázale přehlížíš a démonizuješ nemalou část stávající praxe jako cosi ošklivého a překonaného.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: