October 7th, 2010

WebExpo 2010: Den zúčtování

Filed under: Events — Ondřej Válka @ 09:37

Krutopřísné, místy až démonicky skvělé. Jen mi to přišlo letos nějaké krátké a rychlé. Ani nebyl čas si se všemi pořádně popovídat. Tak snad napřesrok!

Přednášet na WebExpo byla velká pocta a silný zážitek. Cílem naší přednášky bylo předat nadšení z myšlenky Responsive Web Design, což se doufám povedlo.

Velký dík patří nejen Danovi Srbovi (v roli editora), Vaškovi Stoupovi (v roli investora) a Lukáši Churému (v roli soft-skills poradce) ale především Honzovi Sládkovi, bez kterého by přednáška nevznikla a se kterým jsem do toho mohl jít.

A díky za skvělé fotky od Dušana Šimonoviče a Honzy Martínka.

Poznatky z přednášení

  • Jistotu mi při přednášení dodává pohyb. Uklidňuje mne to. To samé však nemůžu říct o Honzovi, kterého moje tanečky notně znervózňovaly. Holt přednášet ve dvou je úplně jiné, než přednášet sám.
  • Pokud nevíte, co s rukama, pořiďte se dálkové ovládání a držte se ho.
  • Připravit dobrou přednášku vezme moře času. Pěkné slajdy proto nejsou na škodu, protože zesílí vnímání předávané informace. Navíc je to často jedinné, co po přednášce zbude. Připojte i poznámky k přednášení a rázem máte ze slajdů velmi pěkný článek.
  • Tréninku není nikdy dost. Je dobré si přednášku několikrát kompletně vyzkoušet, změřit si čas, zaměřit se na problémy s vyjadřováním nebo gestikulací. Trénovali jsme dvakrát, ale doporučuji rozhodně vícekrát (myslím si, že pětkrát je optimální).
  • Přednáška je může být velká show. V takových případech použijte tzv. obrázkové slajdy a hlídejte si načasování při přepínání slajdů. Mít takových slajdů hodně je skvělé, ale může klást to vyšší nároky na synchronizaci se slajdy.
  • Nebojte se, máte-li co říct. Pak už potřebujete jen trénovat.

Organizace akce

Nejel jsem se na WebExpo najíst a napít. Nicméně výtky mnohých zcela chápu.

Na viděnou

October 5th, 2010

Web designerʼs guide to the Web

Filed under: Talks — Ondřej Válka @ 18:18

Stage time again!

Honza Sládek and I were giving a talk at conference WebExpo 2010. We’ve been both pleased and excited by the time at the stage. Hopefully, the message has been received.

If you like the illustrations used in our presentation (a PDF file), just help yourself. I’d love to hear, if you find it useful. And thanks.

August 4th, 2010

Celostránkové třídy a identifikátory

Filed under: Know-how — Ondřej Válka @ 14:57

Pište HTML kód jako znovupoužitelné komponenty, víceméně nezávislé na rodičovských prvcích.

V HTML kódu často přidávám prvku <body> (nebo některému jinému vysoko posazenému prvku) nějakou třídu nebo identifikátor. Označím tímto tak např. stránku s unikátním obsahem nebo třeba šablonu podstránky.

Využívám toho k odlišnému stylování vybraných částí layoutu – jejich vzhled upravuji podle toho na které stránce nebo ve které šabloně se nacházejí.

<body class="layout-subpage" id="page-about">
    …
</body>

Na první pohled to vypadá docela prakticky.

Nevýhody tohoto přístupu se objeví, jakmile vyvíjíte složitější web. Pokud layout prochází změnami, bývá nutné překydávat kusy kódu sem a tam. Celý koncept se pak stává nepraktickým a je třeba sáhnout po flexibilnějším řešení.

June 5th, 2010

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

Filed under: Know-how — 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 lte 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: Essays — 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.