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 178×

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

Obrázek ke článku NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

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 © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý