Děláte to špatně? - Zen Coding - část 1/3

Psaní HTML kódu je vysoce neefektivní proces – nejdříve musíte tag otevřít, poté specifikovat atributy a nakonec ho zase zavřít. Pro několik málo tagů to není velký problém, ale jakmile se dokument zvětšuje a tagy přibývají, zjistíte, že 90 % času se stále opakujete. Záchranou vám však může být projekt nazvaný Zen Coding, který umožňuje vytvořit celou strukturu dokumentu během sekund namísto minut.

Pořád píšete HTML klasicky? Pak mám pro vás novinku – děláte to špatně. V tomto článku se dozvíte, jak to dělat lépe a jak si ušetřit moře času s projektem Zen Coding. Pusťme se do toho!

Hned v úvodu musím zmínit, že Zen Coding není obvykle součástí editorů kódu – jedná se o plugin, který je třeba stáhnout a nainstalovat. Veškeré podklady naleznete na konci článku. Zen Coding je v podstatě speciální varianta text expanderu. To znamená, že nám stačí napsat pouze nějaké klíčové slovo a po stisknutí určité zkratky kód roztáhne v něco delšího. Pro Zen Coding jsou těmi klíčovými slovy názvy HTML elementů. Za pomoci těchto klíčových slov a CSS selektorů tak můžeme vytvořit velmi dlouhou a komplexní strukturu webové stránky bez toho, abychom se upsali. Nejlepší bude ukázat si vše na praktickém příkladu.

div#kontejner>div.logo+ul#navigation>li*3>a

Tento kód po expandování vytvoří celou následující strukturu:

<div id="kontejner">
   <div class="logo"></div>
   <ul id="navigation">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
   </ul>
</div>

Tvorba samostatných elementů

Začneme hezky popořadě. Samotný element s otevírací a zavírací značkou vytvoříme tak, že napíšeme jednoduše jeho jméno. Pokud má daný element nějaké povinné atributy (alt či src u obrázku, nebo třeba href u odkazu), automaticky se napíší po expandování také. Zkratku pro expandování najdete v dokumentaci plug-inu pro daný editor. Zde můžete vidět, co nám z některých elementů vznikne.

div 		→ 	<div></div>
section 	→ 	<section></section>
img 		→ 	<img src="" alt="">

Velmi jednoduché, že? Dále můžeme přidávat elementům atributy class (a to i vícenásobně) a id následovně:

div.menu	→	<div class="menu"></div>
img#logo	→	<img src="" alt="" id="logo">
a#logo.odkaz	→	<a id="logo" class="odkaz" href=""></a>
a.odkaz.blue	→	<a class="odkaz blue" href=""></a>

Nyní už víme, jak přidávat nejčastější atributy, tedy id a class. Co ale v případě, kdy chceme přidat jiný atribut, například width a height u obrázku? Stačí pouze umístit vlastní atributy do hranatých závorek. Více atributů jednoduše napíšeme za sebe a oddělíme mezerou. Pokud se jedná o víceslovnou hodnotu (např. několikaslovná hodnota v atributu title), musíme dát text do uvozovek.

img[width=10]			→	<img src="" alt="" width="10">
img[width=10 height=20] 	→	<img src="" alt="" width="10" height="20">
a[title='víceslovný text']	→	<a href="" title="víceslovný text">
a[href=stranka.html]		→	<a href="stranka.html"></a>

Tvorba složitějších struktur

Ukázali jsme si, jak tvořit jednotlivé elementy a jak nastavovat jejich vlastnosti. Co ale udělat, pokud chceme vytvořit složitější strukturu, jako třeba celé menu?

Souřadné elementy

K vytváření více elementů stejné úrovně použijeme selektor +. Po expandování struktury

div+section+a

<div></div>
<section></section>
<a href=""></a>

Podřadné elementy

Pokud chceme vytvořit element uvnitř jiného elementu, použijeme k tomu selektor >, který označuje přímého potomka daného elementu.

Zápis

div>section>a

<div> 
  <section>
    <a href=""></a>
  </section>
</div>

Kombinování elementů

Nyní se můžeme pustit do něčeho lehce složitějšího, a to do kombinace prvků s různými poměry mezi sebou. Začneme jednoduchým příkladem:

article>header+footer>p+a

<article>
  <header></header>
  <footer>
    <p></p>
    <a href=""></a>
  </footer>
</article>

Můžete si všimnout toho, že při tvorbě kódu pokračujeme pořád hlouběji a hlouběji do struktury dokumentu. Vycházejme nyní z kódu v předchozím příkladu. Co kdybychom chtěli přidat další element, který je přímým potomkem elementu article? Toto nemůžeme udělat, neboť jsme nyní „uvnitř“ elementu footer. Nemůžeme takto mezi elementy skákat. Jak to tedy vyřešit? Musíme použít klasické závorky ( a ), které nám oddělí jednotlivé struktury. Cokoliv pak napíšeme za závorku se bude vztahovat ke kódu napsanému před závorkou. Pro nyní nastíněný příklad by vypadal kód takto:

article>(header+footer>p+a)+div#pridany

<article>
  <header></header>
  <footer>
    <p></p>
    <a href=""></a>
  </footer>
  <div id="pridany"></div>
</article>

Kde získat plugin?

Zen Coding si můžete zdarma stáhnout na oficiálních stránkách projektu: http://code.google.com/p/zen-coding/

Předtím, než se rozhodnete si Zen Coding nainstalovat, můžete si ho chtít někde vyzkoušet. Pro to slouží následující stránka, která vám dovolí vyzkoušet si všechny možnosti Zen Codingu přímo v prohlížeči: http://zen-coding.ru/codemirror/

Je to všechno?

Ani náhodou! Nedostali jsme se ani do poloviny toho tématu. Zen Coding toho umí rozhodně mnohem víc. Aby bylo možné bez problémů zpracovat všechny nové informace, rozdělil jsem článek do tří částí. Již během několika dnů se můžete těšit na pokračování.

Je mi také potěšením přivítat vás u prvního ze série článků, které budou mít za úkol přinést čtenářům jiný pohled na web development. Poněkud provokativní název "Děláte to špatně" byl vybrán záměrně, neboť lehce upoutá pozornost a možná vám pomůže naučit se něco nového. Rozhodně není cílem jakkoliv čtenáře urazit. Toto téma bude jistě terčem velké kritiky, která nám na druhou stranu může přinést plodnou diskusi.

Společně se tak podíváme na vámi velmi žádaná témata jako NoSQL databáze (aneb proč pohřbít MySQL), Node.js (aneb 70× vyšší výkon než PHP), MVC (proč by měl přijít také na stranu klienta) a mnoho dalších témat, o která jste si psali. Klasické (a řekl bych až zastaralé) schéma LAMP (Linux, Apache, MySQL a PHP) nahradíme (alespoň v této sérii) schématem novým (Linux, Node, NoSQL a JavaScript), které má větší potenciál a který dosud zůstával zatvrzele ignorován.