February 2012
1 post
5 tags
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í...
January 2012
2 posts
3 tags
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...
4 tags
Luke Wroblewski: Mobile First (recenze knihy)
Zeldmanovo vydavatelství A Book Apart tohle umí – krátké časové období ve vývoji některé části webdesignu vloží do hrnce a uvaří vývar. Hodně silný vývar.
Pokud však obor denně sledujete, výsledek vás i přes hustotu vývaru může zklamat stejně jako se to stalo mě s průvodci po HTML5 a CSS3.
V případě mobilního webdesignu nemůže být zklamaných. Kolik z nás má několikaleté zkušenosti s návrhem...
December 2011
1 post
2 tags
Luke Wroblewski k dilematu nativní app vs. web
Je jasné, že dilema je falešné, ale nikdo to zatím neformuloval lépe než pan Mobile First:
As mobile strategist Jason Grigsby is fond of pointing out, “Web links don’t open apps, they go to web pages”. Whether it’s through search, email, social networks, or on web pages, if you have content online, people will find and share links to it. Not having a mobile web solution means anyone that...
November 2011
1 post
4 tags
CSS řešení: fotogalerie se zvětšením po najetí...
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_container):
.photos .photo_container {
position: relative;
float: left;
width: 150px;
height:...
October 2011
1 post
3 tags
Perch, redakční systém pro nepřizpůsobivé...
Musíte řešení designu webu přizpůsobovat redakčnímu systému? Většina z nás asi na limity CMS nenarazí, ale jsou mezi námi designéři co se odvážně vrhají do vln neobvyklých řešení. A pro ty je Perch.
Představte si projekt, který vyžaduje důraz na vizuální atraktivitu a obsah si říká o šití designu na míru. Třeba portfolio architektonického studia s výrazným rukopisem.
Designér rád chytne...
September 2011
2 posts
4 tags
„Křápy“ first
Na Webexpo přednášce nebyl čas tuhle myšlenku rozvést. Tady je i s konkrétní technickou aplikací.
Metodu Mobile first a její platnost asi není potřeba dále rozvádět. Luke Wroblewski přes pochyby běží tryskem a nechává jen spálenou zemi. ;)
Designér co navrhuje rozhraní metodou „jeden web“ by v prvé řadě měl myslet na horší zařízení a řešení pro lepší koncipovat jako rozšiřující.
Proto nejdříve...
2 tags
„Kdy při návrhu webů začít počítat s mobilními...
Vy jste ještě nezačali?
„Nemá to zatím smysl, protože z nich na weby klientů přichází jen 2-3 % návštěvníků. Jsou pod pětiprocentní hranici. To bychom rovnou mohli optimalizovat pro IE4!”
Navrhujete dneska weby pro rok 2011 nebo pro 2013, kdy mobily v počtu přístupů na web pravděpodobně desktop sežerou i s klávesnící?
„Ano, ale vždycky to můžeme udělat zpětně. Stačí vložit pár řádků kódu, ne?”
...
August 2011
3 posts
3 tags
Mobilní webdesign jako krize „neúsporného...
Bruce Lawson se mi na na Zdrojáku trefil do aktuálních myšlenek:
… mobilní uživatelé spěchají; neustále jsou zaměstnaní, takže chtějí vykonat jeden specifický úkol a pak skončit. … Omyl spočívá v předpokladu, že uživatelé desktopových počítačů nejsou zaměření na vykonávání úkolů a mají čas nazbyt, který rádi věnují plnému estetickému prožitku. Pravda je, že všichni uživatelé spěchají.
Chudák...
2 tags
“I would in fact prefer, instead of <H1>, <H2> etc for headings (…)...”
– Poznáváte úryvek z diskuze o document outline v HTML5?
Nikoliv! To Tim Bernes-Lee uvažuje o první verzi HTML v jedné z prvních zmínek v říjnu 1991. Některé otázky hold zůstávají i po dvou dekádách nezodpovězené.
Pokud slavíte 20 let World Wide Webu, nezapomeňte na panáka pro HyperText Markup...
3 tags
“In particular, you should not view the large iPad screen as an invitation to...”
– — iOS Human Interface Guidelines
A když půjdeme dále, měli bychom takto uvažovat i o webdesignu na desktopu.
June 2011
1 post
4 tags
Proč je Gmail pro tvůrce newsletterů větší...
Povzdech uondaného kodéra na Twitteru…
…doprovodily reakce co by se daly shrnout do věty: „Navrhovat newslettery pro Gmail sice je nepříjemné, ale daleko větší nadělení je renderovací jádro MS Outlooku 2007”.
Jasně, MS Word jádro Outlooku 2007 je vážně zastaralé a usilovně se brání všem snahám o náročnější vzhled nebo layout. Jenže Outlook 2007 na rozdíl od Gmailu (a dalších, minimálně...
January 2011
1 post
1 tag
Principy vývoje Chrome
Prezentace Anthonyho Laforge zajímavá pro každého, kdo se zabývá vývojem software (včetně webů).
Oceňuji zejména přenos myšlenek z jednoho kontextu do jiného. Nemáte-li čas, podívejte se jen na slajdy 2 a 3.
Think of any major website… do they have version numbers? We took the same approach to our client software as an online web service.
A ještě jednu hezkou citaci na závěr:
...
December 2010
3 posts
2 tags
Vývojáři, buď při tom!
Výjimečně se stane, že vezmu zakázku nepocházející od klientů Shortcat a navlékám ochranný oblek vývojáře, jež se nechává najímat. A vždy je to zajímavá perspektiva pro mé obvyklé pracovní prostředí s relativně stálými klienty a dlouhodobým hledáním optimálních pracovních postupů v týmu.
Při poslední bokovce šlo o práci na dočasném webu hotelu pro jedno výborné grafické studio, jež s webem...
3 tags
3 tags
YAML soubor jako alternativa redakčního systému...
S obsluhou obsahu pro prezentační weby na míru je potíž. Všichni v oboru víme, že neexistuje univerzální řešení. Někdy je neefektivní nebo z různých důvodů dokonce nemožné jakýkoliv redakční systém nasadit.
Často pak my vývojáři přistupujeme k vytvoření stránek staticky v HTML. Výhody naprogramovaného webu jsou ale pryč a každá úprava bývá náročná na čas i technické znalosti správce.
Přátelé...
November 2010
1 post
“…co je normální v běžném životě, (např. při správě a úklidu domácnosti) nebývá...”
– Ondřej Válka o redesignu webu na Zdrojáku
October 2010
6 posts
2 tags
“… existují i firmy, které vám jsou schopné naúčtovat pěkný roční paušál za...”
– František Štorm shrnuje aktuální stav vývoje webfont řešení. :) Pravdivý pohled zvenčí. Mimochodem, Storm Type Foundry má nový web a používá @font-face s vlastním chlebovým písmem (!) JohnSansWeb. Jejich licenční podmínky jsou pak nově vkládání písem pomocí @font-face více než nakloněny. Kdo bude...
2 tags
Klonované submity útočí (jednotný vzhled...
Potřebujete někdy nastylovat odesílací tlačítko ve formuláři v rozměrech a na pozici pixelově perfektních? Mám pro vás řešení. Není jednoduché, obsahuje magii, které nerozumím, a nefunguje dokonale ve všech prohlížečích. :-)
Ještě čtete? Dobře děláte, protože na druhou stranu je široce použitelné a vůbec ho mám rád tak ušmudlané jaké je, protože mě od té doby už několikrát pomohlo.
Navíc —...
3 tags
“Descendant selectors like .content .sidebar are problematic because to determine...”
– „Why we don’t have a parent selector” — čtete celé, Jonathan Snook válí!
5 tags
Web nevypadá ve všech prohlížečích stejně. Jak to...
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...
2 tags
Jednodušší vzhled pro komentáře Disqus
Když jsem naposledy vyráběl vlastní CSS pro Disqus, za dva měsíce chlapci nasadili nové HTML a můj stylopis zůstal osamocený uprostřed webové louky pro srandu králíkům. :-) Říkal jsem si, že už to znovu dělat nebudu.
Jenže potřeba hezkých komentářů zvítězila. Zde tedy přikládám minimalistický stylopis pro aktuální téma Narcissus komentářové služby Disqus. Co přesně umí?
Vypíná funkce, které...
1 tag
CSS trik: Element z buňky umístěný mimo pozici...
Aktualizujeme v těchto dnech sekci Cykly a festivaly na webu holešovického kina OKO a objevil se přitom zajímavý kodérský oříšek — jak umístit element nacházející se v buňce tabulky mimo její tělo?
Následuje rozlousknutí. Není to žádná věda a bude to krátké, slibuji.
Cílem je stav viditelný na první obrázku. (Naživo můžete vidět na stránce filmu, teď třeba Muziky.)
Strážce sémantiky...
September 2010
2 posts
4 tags
Ještě ke štítkování zastarávajících CSS deklarací
Navážeme na článek ze Zdrojáku a následnou zajímavou diskuzi, kde laskaví čtenáři nalezli několik slabin nabízeného řešení štítkování v CSS pomocí štítku [OBSOLETE?]. Prošel jsem stylopis Scuku a shledal ho nabitým příklady k podrobnější demonstraci nabízené metody.
Pro potřeby článku jsem je zbavil deklarací, která nás v kontextu problematiky nezajímají. Aby to někomu nebylo líto, kompletní...
2 tags
“Iframes are the most costly element to add to a given page. They block the page...”
– Jedna z drobných technických zajímavostí, které mě dříve nanapadly a kterých je plný dokument Isobar Code Standards. Mezi autory třeba Paul Irish (Modernizr) nebo Nathan Smith (960.gs). Vezměte si domů a čtěte. Pokud znáte jiné veřejně dostupné interní front-endové standardy, boxík pro komentáře se...
August 2010
1 post
Příliš velké, příliš myšlenkově chudé
“(…) paneláková sídliště nejsou plnohodnotným městem. Jsou myšlenkově chudá tím, že tak velké celky vznikly v hlavně jednoho architekta, případně jednoho týmu. (…) Opravdové město je střetem velkého množství různých názorů, pokud možno během velmi dlouhé doby. Je to poutavě vyprávěný příběh čitelný různými směry, který má svou dynamiku, mnohovrstevnatost a svá tajemství.”
— Vlado Milunič o...
July 2010
4 posts
1 tag
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...
4 tags
Dejte stylopis pro všechna média do jednoho...
Mám rád princip tumblelogu. Skvěle funguje pro šíření myšlenek napříč webem. Do blogu si skrze vlastní ego nikdo cizí nápady neprotlačí. Vzhůru dolů je tumblelog. :-)
Mít blog, nemůžu celý post postavit na myšlence Nicolase Gallaghera…
Don’t see the point of setting media queries in the HTML (on ) when setting them in your CSS file is more flexible and informative.
For example, if...
3 tags
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:
„IE6 je tak málo rozšířený, že jej mohu již nyní směle
ignorovat.”
„Ladění webů pro IE6 vyžaduje nadlidské množství...
1 tag
Podtržený hover v Cufónu
Vypadá to superjednoduše, ale není to tak. Chcete-li zmiňovaný efekt zajistit i mimo Firefox, nejdříve totiž musíte povolit hover stav, který Cufón z výkonnostních důvodů defaultně vypíná…
Cufon.set('hover', true)
Metodu set() musíte volat ještě před replace().
Druhý problém je, že CSS vlastnost text-decoration: underline Cufón (ve verzi 1.09) na hover stav nepodporuje.
Pomůže tedy jedině...
June 2010
1 post
2 tags
“Using a browser detect means that you have to constanly maintain the site that...”
– … píše Mark Pilgrim v článku The dangers of browser detect z roku 2006. Neuškodí si ho jednou za rok přečíst. U sebe mám odsledováno, že potřeba a chuť detekovat prohlížeče a jejich verze pro potřeby CSS se ke mě cyklicky vrací.
Mark Pilgrim má samozřejmě pravdu, ale znáte to … prvek...
May 2010
4 posts
3 tags
“Just because you can use a script font to display your primary content doesn’t...”
– Na Mashable shrnují základní fakta o Web Fonts. Díky Google je teď velmi snadné na web vlastní fonty nasadit, ale dávejte moc velký pozor v případě „chlebového” písma (písma pro delší texty). V naší kotlině jsem na takovýto nešťastný způsob použití narazil u Klábosení, které je na zařízeních bez...
2 tags
Webfonts jsou díky Google zase blíže lidem. Jen ne...
Co ale my webdesignéři uděláme s těmi cca 20% lidí, kteří nemají zapnutý antialiasing (například Firefox na WinXP)? Těm Google Webfonts nepomohou. Buď je všechny navedeme k jednomu zatržítku :-) nebo najdeme cestu jak detekovat uživatele bez antialiasingu a nabídneme jim alternativu.
3 tags
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...
2 tags
April 2010
1 post
4 tags
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.
Layout Frameworks im professionellen WebdesignView more presentations from djesse.
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ů...
February 2010
3 posts
4 tags
Jak v Internet Exploreru zjistit, zda prvek má...
javascript:alert(id_hledaneho_prvku.currentStyle.hasLayout);
Občas se může zdát, že MSIE bug, který právě proklínáte, nemůže ze špatného nastavení vlastnosti hasLayout vycházet, protože ji má určitě nastavenou správně. Ověřte to vždycky raději tímhle způsobem v adresním poli prohlížeč, nejspíš se totiž mýlíte. Vím o čem mluvím. .-)
3 tags
Manuál stylopisů (a jednoduchost CSS můžeme zase...
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,...
2 tags
Otcovsky o organizaci času
Toto je skutečný příběh. :-)
Jedna z věcí, o které mě narození syna obohatilo, je zvýšená
ostražitost k neúčelnému trávení vlastního času. Ne tak jak se to
říká v knížkách nebo školeních GTD, myslím doopravdy. Jako rodiče mě
Honzík vybavil kruhy pod očima a výborným čichem na infiltraci blbostí do
času stráveného prací.
Spousta lidí má proti blbostem dobrý imunitní systém. Jenže...
January 2010
6 posts
2 tags
“Apple si definoval zariadenie, ktoré nebude vyhovovať montérom so skrutkovačom,...”
– Spravodaj.Madaj.sk o iPadu
5 tags
WatchSquarespace — aplikace, která vám vezme práci :-)
Zatím nejpropracovanější webCMS, jaké jsem viděl a také učebnice uživatelskému rozhraní webové aplikace. Doporučuji přihlásit se a učit se, učit se, učit se.
Titulek je samozřejmě nadsazený. Nicméně jsem přesvědčený, že je tady doba, kdy klienti přestanou s poptávkou na prezentační web chodit za námi webdesignéry a budou si nás pouze najímat...
7 tags
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...
4 tags
1 tag
“When we filed for our IPO, we attached to the document a statement about how we...”
– Eric Schmidt vysvětluje více než sympatický fakt, že Google se nerozhoduje vždy jen na základě byznys cílů a akcionáři s tím musí počítat.
2 tags
“There’s never really a great way to apologize, but there are plenty of terrible...”
– Jason Fried má s omlouváním jisté zkušenosti. Citace z jeho příspěvku do ebooku Setha Godina What Matters Now.
December 2009
8 posts
3 tags
„Ne, web nemusí vypadat stejně ve všech...
Client: “I saw the design on Sam’s IE7 today and she doesn’t see the rounded corners or shadows. Can IE not ‘do’ those?” Me: “No. IE uses very old technology. I can hack the site to use lots of images and other things, but that will likely slow the site down for everyone. Plus it means that I will tie the HTML to the visual layout, making the site less flexible (and expensive) to update in...
2 tags
5 tags
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...
3 tags
“Flickr is somewhat unique in that it uses a code repository with no branches;...”
– O vlastním způsobu uvádění funkcí do produkčního prostředí píší vývojáři Flickru na svém Development Blogu. Taky vás to překvapuje? Flickr stále používá Subversion, takže možná nemusí. Článek je zajímavý i pro ty z nás, kdo používají verzovací systém, kde je větvení a spojování vývojových větví bez...
2 tags
