Co bych zlepšil na Weblogy.cz?

Vytvořit agregátor jakéhokoliv internetového obsahu se jeví jako poměrně snadný úkol („To dáš da večer, woe.” – Vláďa, programátor, 16 let) a technicky tomu tak do jisté míry je.

Jenže agregátory by neměly obsah jen triviálně seskupovat, ale také o něm přemýšlet. Kromě náznaků u Facebooku jsem neviděl žádný co by to uměl dobře. A to včetně agregátoru co provozuji. Předkládám tedy na pohled Weblogy.cz sice kritický, ale snad také konstruktivní.

Problém Weblogů před redesignem jsem neviděl ve vzhledu (i když ten nový je mi subjektivně příjemnější), ale v práci s obsahem, jeho rozlišování a třídění. Weblogům chybí editorský pohled člověka nebo alespoň chytrý algoritmus, který by takovou práci zčásti zastal. Změnil bych tři konkrétní věci:

1) Detailnější rozpoznávání kvality

Ano, je sice pravda, že systém Weblogů u každého zdroje umožňuje určit zda je kvalitní a jeho posty se pak odlišují. Jenže zvýraznit zajímavé posty v záplavě jiných tak jak jdou v čase za sebou není dobrý nápad. Když jsme si jistí, že obsah je kvalitní, neměl by za pár hodin zmizet z čelních pozic vytlačený nekvalitními zprávami, jež mají jedinou výhodu — byly vydány později.

A pak — je skutečně každý článek „kvalitního zdroje” kvalitní? Nemyslím, že by všechny články Vzhůru dolů kvalitní byly a naopak PHP triky do Weblogů neposlaly jediný výborný článek. Rozlišovací lupu je myslím potřeba zaměřit na konkrétní články, nikoliv celé zdroje.

2) Rozlišování typů článků

Typy obsahu, jež Weblogy.cz zobrazují bez odlišení vedle sebe, staví uživatele před těžké rozhodování. Třeba: Zdroják zde rozumně publikuje jen články, zatímco Intervalu na Weblogy.cz vychází každá přežvýkaná zprávička ze zahraničního webu. Vsadím se, že neexistuje čtenář, který by se uměl a chtěl rozhodovat, který článek Intervalu bude „zprávička” a který pak „článek”. Zřejmě pak bude tenhle zdroj ignorovat.

3) Třídění obsahu

Weblogy navštěvuje sice určitá konkrétní skupina lidí (web-geekové), ale ta se dále dělí do menších skupin, jejichž témata se překrývají jen částečně. Webové podnikatele, marketéry, programátory, grafiky … všechny zajímají trochu jiná témata.

Na zmiňovaném agregátoru jsem zkoušel automatické třídění obsahu do ručně vytvářených kategorií, které šlo dále kombinovat tak, že čtenář může odebírat jen obsah, který ho skutečně zajímá. Pokud by ji autoři Weblogů zvládli lépe, je to další zajímavá funkce, sice náročná ale dávající existenci agregátoru smysl.

Jsem přesvědčen, že vytvořit a spravovat dobrý agregátor lze, ale ne v nadšeneckých podmínkách nebo jako „bokovku”. Podobně jako u jiných „chytrých” webových služeb, potřebujete spoustu energie, dobrý vývojářský tým nebo editora s vizí a množstvím času. Weblogy.cz i po kosmetické změně tváře bohužel zůstávají na začátku cesty.

Na obranu IE6

Málo věcí je ve webdesignu tak jednoznačných jako image Microsoft Internet Exploreru verze 6 mezi vývojáři. Lze to považovat za kolorit, asi jako nadávky na politiku před volbami. Dvě obvyklá trvzení vývojářů mě ovšem nutí stavět se do opozice ustáleného názoru:

1. „IE6 je tak málo rozšířený, že jej mohu již nyní směle ignorovat.”
2. „Ladění webů pro IE6 vyžaduje nadlidské množství nepříjemné práce.”

Obávám se totiž, že jsou často produktem lidské liknavosti, která našla obhajobu ve většinově přijímaném názoru. Takže brousím modré „é”, sundávám brýle a vyrážím na pomoc drahému staříkovi…

V článku uvažujeme v intencích HTML/CSS vrstvy prezentačních webů, v případě aplikací a Javascriptu bude situace jiná.

Tumblr nebo Posterous? Nejdřív jeden a pak druhý

Na Tumblr publikuji aktuální verzi Vzhůru dolů a mám za sebou řadu nasazení pro klienty Shortcat. Dnes jsem konečně pořádně prošel také Posterous. Oba blogovací systémy jsou srovnávány a i když na otázku „Který vybrat?” asi neodpovím všem, několik postřehů bych měl…

Předně — je chybou oba porovnávat jako aplikace pro stejné použití. Tumblr se skvěle hodí pro lidi, kteří chějí publikovat tumblelog, tedy něco mezi blogem a mikroblogem s velkým množstvím multimediálního obsahu. Posterous je čistě blogovací systém, tedy konkurence spíše pro Wordpress nebo dnes už přežitý Blogger.

Posterous je proto nabitý funkcemi, Tumblr jich má myslím trošku méně, ale zato (nebo proto) má výrazně lépe zvládnuté rozhraní. Je to krásně vidět na dashboardu, kde se v případě Posterous dostavuje známý pocit pohledu na řídící panel Temelína, ale „nástěnce” Tumbleru hned rozumíte.

Tumblr tak na první pohled bude srozumitelnější — promiňte to spojení — „obyčejným lidem”. Geeky, kteří se chtějí chlubit počtem zatržítek zatržených během dne, osloví Posterous. :-)

Tumblr mě proto připadá daleko lepší pro ty, co s publikování začínají nebo od blogovací aplikace očekávají hlavně jednoduchost. Tady se opravdu nebudete muset moc učit.

Pokud vám Tumblr začne být malý, nebudete mít problém k Posterous přejít. Ten totiž umí obsah vašeho tumblelogu kompletně importovat a to včetně šablon, pokud je máte vyrobené na míru.

Dirk Jesse, autor YAML, o CSS frameworcích

Zvládnete němčinu? Kvůli téhle prezentaci byste mohli. :-) Autor YAML v ní představuje svůj pohled na CSS frameworky.

Několik vzájemně nesouvisejících poznámek…

Dirk zmiňuje také nevýhody resetovacích CSS: Meyerova a YUI. Dá se souhlasit s tím, že reset, který mění nativní způsob zobrazování prvků (neboldový nebo seznamy zbavené odrážek) nám trošku přidává práci.

Ostatně, nic takového mě neťuklo, což bude tím, že všechny CSS frameworky, které jsem dosud použil, tyto vyresetované vlastnosti vracely zase zpět. Taky zde slyšíte absurdno a humor?

Neměl jsem tušení, že jeho YAML využívají takhle velké německé weby — Stern, ZDF … To je slušný úlovek! Ale při proklikání webu jeho frameworku vám to dojde — je zde uplatněna zásada, že nikoliv zdrojový kód, ale dokumentace a informační ekosystém dělí technologie na úspěšné a neúspěšné.

Závěrečný výkřik k prezentaci zní: Forma! Vážně — dělal ji člověk, který ví, že forma a obsah se nesmí rozcházet a z každé slídy je patrná (až se chce klišovitě říct německá) preciznost a hlavně úcta a empatie vůči publiku a jeho tužbě nikoliv jen vzdělávací ale také emocionální. Tuzemští prezentující, zamyslete se nad tím. .-)

Manuál stylopisů (a jednoduchost CSS můžeme zase chválit)

Jak se ve změti CSS pravidel webového projektu dobrat systému, který bude snadno přenositelný na jiného člověka? Jak to udělat s technologií, jejíž esencí je jednoduchost? Supergeeky proklínaná a amatéry zbožňovaná vlastnost kaskádových stylů.

Jednoduchost technologie špatný kód neospravedlňuje

„Ach, kdyby jen specifikace CSS obsahovala proměnné!” a další geekovské povzdechy si můžeme odpustit, protože a) právě teď nic takového CSS neobsahuje a b) není jisté, že by to CSS bordelářům skutečně pomohlo. Myslím si, že jednoduchost je velmi dobrá vlastnost jakékoliv technologie, CSS nevyjímaje.

Hezky to dříve popsal Honza Sládek, takže pro argumenty zajděte k němu. My můžeme pokračovat směrem k návrhu řešení palčivé otázky.

Jak z jednotlivých opakujících se pravidel extrahovat informaci o typech písem, barvách či layoutu obecně používaném na webu tak, aby stylopisy splňovaly alespoň základní parametr udržovatelnosti — že jim bude rozumět sám autor, když se ke své práci za tři měsíce vrátí?

Jelikož se snažím se upřednostňovat jednoduchá řešení a vyhýbat se vrstvení technologií, z našich úvah vyřazuji CSS preprocesory jako LESS, čímž ale neříkám, že pro ně nevidím uplatnění.

Poněkud tupý, přesně takový jaký jej chceme — manuál stylopisu

Po mnoha pokusech se mi nakonec obrovsky osvědčila úplně nejtupější varianta — manuál v externím souboru. V adresáři se stylopisy u každého svého projektu najdu soubor README.txt, ve kterém všechny potřebné informace jsou. Kdykoliv pak na webu vytvářím nový prvek, podívám se sem a zjistím jaké by měl mít vlastnosti.

Obsah manuálu

Pojďme se podívat co takový manuál stylopisu může obsahovat.

• Kontakty na autora
• Seznam souborů a jejich obsah
• Písma a jejich varianty 
• Index z-indexů
• Barvy a jejich varianty
• Rozměry opakujících se prvků laoyutu
  

Než plýtvat detaily, odkážu vás na tři své manuály stylopisu, které jsou součástí projektů vyrobených v Shortcat studiu.

BioOKO Pražské jaro Hipposdesign.com

Jedna část manuálu tedy nahrazuje velmi málo se vyskytující manuály designu a také vizuální identity. Další část supluje nedokonalost CSS jako technologie — například pro varianty barev  budeme moci brzy začít široce využívat RGBa. Index z-indexů a varianty písem zase sjednocují na jedno místo informace, které bývají rozptýlené po různých pravidlech ve stylopisu.

Manuál stylopisu v žádném případě nenahradí dobře organizovaný, komentovaný a srozumitelně psaný CSS kód. Přidává vrstvu abstrakce, kterou kaskádové styly neumožňují.

Milí čtenáři, více než jindy zde ocením váš feedback a vlastní zkušenosti se správou CSS.

Cufón nebo Typeface.js — který vybrat?

Než budeme moci v prohlížečích začít široce používat @font-face, Typekit a další písně typografické budoucnosti, musíme se rozhodnout mezi třemi hlavními technologiemi sloužícími k nahrazení písma přímo v prohlížeči. sIFR, Cufón a nebo Typeface.js.

sIFR díky komplikovanému nastavování a velmi špatné rychlosti při načítání stránky postupně nahrazujeme jeho současnějšími sourozenci. Oba používají k náhradě canvas, respektive VML v Internet Explorerech a vypadají velmi podobně.

Který z nich zvolit? Na základě dostupných informací se rozhoduje jen těžce. Rozhodl jsem se pro vlastní hloubkový průzkum.

Názvy tříd v CSS a přehnaná láska k sémantice

„Sémantický web” je prý v kolizi s pojmenováváním tříd v CSS podle vzhledu prvku. Vážení sémantičtí maniaci, ukážu vám případ kdy vaše náboženství neplatí.

Cituji z článku Roberta Nymana o objektovém CSS:

As you might be aware of, using good semantics is very important to me, and when it comes to both elements being used as well as the naming of CSS classes, I believe it should contain a meaning for what it will contain. OOCSS contains class names like .leftCol, .rightCol, .body, .h1, .h2 etc. And to me, and what I believe is to be in line with the notion of the semantic web, is that one of the fundamentals with CSS class names is to not use class names which describes the actual presentation/layout, but rather what it will contain.
…
But, I suggested using other names that would have more meaning and be easy to understand at the same time, like .main-heading, .complementary etc. The reply I got was that she had tried it, but “It was too hard for people to remember it”. And that I’m mot just buying. Sure, .rightCol might be a tad easier to remember, but just going the easiest route time doesn’t always make it right.

Všimněme si, že autoři se při argumentaci k používání obsahově popisných názvů tříd zaštiťují správností a odkazem na sématických web. Ale co je správné, pro koho a v jaké situaci, že?

Myšlenka sémantického webu — jako světa kde stejný typ informací je stejným způsobem označen — je samozřejmě ve velkém množství situací užitečná. Musí ale usnadňovat orientaci v kódu za účelem pochopení obsahu nejen strojům, ale především lidem.

Nicolle Sullivan, autorka OOCSS, se rozhodla, že názvy tříd v jejím CSS frameworku budou blíže vizuálnímu vnímání (říká hezky „vizuální sémantika”) než klasicky vnímané sémantice obsahové. Tedy .leftCol raději než .complementary.

Být autorem CSS frameworku — tedy technologie jejíž použití vnímám nikoliv univerzálně, ale velmi specificky — rozhodnu se stejně.

Argumentem mi bude právě čitelnost a zapamatovatelnost. Vždyť jak jinak bych chtěl svůj framework rozšířit mezi lidi! Jak jinak bych chtěl, aby jej bez manuálu v knižním vydání a vyfintěných PDF-taháků na populárních webdesignérských serverech používal také někdo jiný než autor sám?

V HTML/CSS kódu psaném na míru obsahu dávám vždy přednost pojmenování tříd takovému, aby co nejvíce odpovídaly významu obsahu, ale v konkrétních případech je lepší dát přednost popisu vizuální prezentace.

Nedělejme ze sémantiky univerzálně platné náboženství. Žádné takové neexistuje ani ve webdesignu.