June 5th, 2010

Podmíněné komentáře efektivně

Filed under: Coding — Ondřej Válka @ 12:00

Ani ten nejlepší kodér se bez nich neobejde. Podmíněné komentáře jsou mocný nástroj k ladění kaskádových stylů pro Internet Explorer. Rád bych zde předvedl, jak je efektivně používat.

Metoda Obelix

Klasický způsob použití podmíněných komentářů spočívá v připojení zvláštního kaskádového stylu v hlavičce HTML dokumentu (pro libovolné IE, pro vybranou verzi IE, příp. pro skupinu verzí).

<!--[if IE 7]>
   <link rel="stylesheet" href="ie7.css" media="screen">
<![endif]-->
<!--[if lte IE 6]>
   <link rel="stylesheet" href="ie6.css" media="screen">
<![endif]-->

Metoda Asterix

Pojďme to nyní zkusit trochu jinak. Na tento způsob jsem narazil kdysi kdesi. Popsán je také v SitePoint CSS Reference.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>Podmíněné komentáře efektivně</title>
     </head>
     <!--[if IE 6]><body id="ie6" class="ie non-ie7 non-ie8"><![endif]-->
     <!--[if IE 7]><body id="ie7" class="ie non-ie6 non-ie8"><![endif]-->
     <!--[if IE 8]><body id="ie8" class="ie non-ie6 non-ie7"><![endif]-->
     <!--[if !IE]>-->
          <body id="non-ie" class="non-ie non-ie6 non-ie7 non-ie8">
     <!--<![endif]-->

          ...

     </body>
</html>

Veškerý obsah webu tímto obalíme do jakéhosi kontejneru, který obdrží třídy a identifikátor podle použitého prohlížeče. S kouzelným HTML nápojem tak přichází velká CSS síla.

     input.checkbox { position: relative; top: 3px; }

#ie6 input.checkbox { top: 1px; }
#ie7 input.checkbox,
#ie8 input.checkbox { top: -1px; }

Prakticky tak vzniká podmínka, s níž lze jakoukoliv CSS definici uplatnit pouze pro danou verzi IE. V praxi použito např. na webu ABS Jets.

Co s tím, Panoramixi?

Takto použité podmíněné komentáře zvyšují udržovatelnost a přehlednost kaskádových stylů.

  • Nemusím pamatovat na vytvoření zvlášních stylopisů. Mám je k dispozici, jakmile potřebuji začít ladit.
  • Veškěrý kód k jednomu prvku zůstává na jednom místě a netříští se do více souborů. Odpadá nutnost editace a správy takových souborů.
  • Snadnost použití umocňuje aplikace na prvek <body>, jakožto prvek nejvyšší úrovně – podmíněný selektor díky tomu podmínkou vždy začíná. Sémantický kód není narušen nadbytečným <div>.
  • Vyjadřovací síla podmíněných komentářů dostává další rozměr – lze ji uplatnit např. při použití jQuery. Zacílit lze i např. všechny prohlížeče kromě IE 7.

May 25th, 2010

Web site design process

Filed under: Web — Ondřej Válka @ 09:07

Just a few notes on the Web site design process. Try to get all the books mentioned and go through them.

Notes on Pain Free Design Sign Off

Filed under: Design — Ondřej Válka @ 08:51

Great talk named Pain Free Design Sign Off on handling Web site design process and clients and by Paul Boag at SXSW. Full length video is available via Boagworld.

  • Client knows his users and business. Ask him about it.
  • Client should like the web site.
  • Confrontation to collaboration.
  • Client searches for problems, designer finds the solutions.
  • Do have a strong methodology.
  • Include client early and often.
  • Educate the client why do you work in such a way.

May 24th, 2010

Návrh GUI komunitního webu

Filed under: UI, Web — Ondřej Válka @ 16:13

Dopsal jsem bakalářku. V textu nazvaném Návrh GUI komunitního webu se zabývám metodami uživatelského výzkumu, technikami návrhu webu a kódováním šablon. Plné znění mé bakalářské práce (PDF, 9 MB) zde dávám k dispozici, přílohy jsou na Flickru.

April 26th, 2010

What Would Jacob Do?

Filed under: UI — Ondřej Válka @ 09:48

We know what’s under the hood. And we know how to polish the hood.

Pavel Maček and I were giving a short talk at UXCamp.cz last Saturday, 24th April. Delighted to announce the slides we recommend you viewing it via the SlideShare if you want to see the original version of the slides.

Thanks Optimal Workshop for the naming inspiration.