Děláte to špatně? - Zen Coding - část 1/3
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

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

Google       Google       31. 10. 2011       13 537×

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.

Reklama
Reklama

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>
Z původních 43 se nám kód roztáhl na 154 znaků, což je o 350 % více! Toto už může znamenat znatelnou úsporu času. Jistě si dokážete představit, že čím delší a složitější struktura bude, tím více času ušetříte! Podívejme se teď na to, jak psát takovýto kód.

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 idclass. Co ale v případě, kdy chceme přidat jiný atribut, například widthheight 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
dostaneme:
<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
bude tedy rozšířen na:
<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
Vznikne nám:
<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 (), 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
Máme tedy element article, který má jako přímého potomka vše, co se nachází v závorce. Znak + pak říká, že element div má být na stejné úrovni jako celá závorka. A protože je celá závorka potomkem elementu article, je jím logicky i onen div. Kdybychom tam závorku nedali, byl by div na stejné úrovni jako elementy pa.

<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.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
18 hlasů
Google
(fotka) Jiří HeczkoAutor se věnuje zejména programování webových aplikací. Snaží se inovovat klasický přístup k jejich vývoji a docílit maximální možné efektivity. Rád používá nestandardní řešení, pokud s nimi může dosáhnout lepších výsledků. V současnosti autor realizuje projekt nodejs.cz
Web     Twitter     Facebook     LinkedIn    

Nové články

Reklama
Reklama
Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý