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

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

 

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

Google       Google       9. 11. 2011       8 793×

Již podruhé se společně pokusíme dosáhnout osvícení skrze Zen Coding. Ukážeme si tvorbu dalších, složitějších struktur, různé modifikátory a mnoho postupů pro rychlejší a efektivnější kódování. A začneme rovnou tam, kde jsme minule skončili.

Reklama
Reklama

Práce s výchozím textem

Kolikrát při tvorbě stránky máte před sebou podobnou strukturu?

<ul>
  <li id="menu-1"><a href="#" title="Domů">Domů</a></li>
  <li id="menu-2"><a href="#" title="O nás">O nás</a></li>
  <li id="menu-3"><a href="#" title="Ceník">Ceník</a></li>
  <li id="menu-4"><a href="#" title="Kontakt">Kontakt</a></li>
</ul>

Pokud je vaše odpověď mezi 1 a ∞, pak vás Zen Coding zase osvobodí od zbytečného psaní. Ukážeme si, jak k této struktuře dojít pomocí jednoho řádku, ale pojďme hezky popořadě.

Vkládání textu

Od verze 0.7 je možné v Zen Codingu vkládat mezi elementy i text. Stačí jej umístit do množinových závorek { a }.

p{text}                  →     <p>text</p>
p>a{text odkazu}         →     <p><a href="">text odkazu</a></p>
p>{klikněte }+a{zde}     →     <p>klikněte <a href=““>zde</a></p>

Některé elementy (a, p, input, label aj.) se vždy píší na jeden řádek (inline - viz druhý a třetí řádek předchozího příkladu). Můžeme však vynutit jejich napsání na řádek nový takto:

p{}+a

Místo klasického napsání elementů na jeden řádek bude výsledkem:

<p>
  <a href=““></a>
</p>

Práce s již napsaným textem

Zen Coding má v oficiálně podporovaných editorech funkci „wrap with abbreviation“, což je něco jako „obalení“ již napsaného textu nebo kódu kódem dalším. Představme si, že budujeme navigaci. Nebylo by jednodušší vypsat si jenom kategorie a nechat ZEN, ať za nás udělá zbytek? Bylo - a tak to taky uděláme. Stačí nám tedy na samostatný řádek napsat nějaké položky, např. tyto:

Domů
O nás
Ceník
Kontakt

Pro použití musíme nejdříve celý text označit. Poté můžeme použít dříve zmiňovanou funkci. Zkratka pro tuto funkci je jiná než zkratka pro bězné expandování kódu. Je tedy třeba podívat se do nastavení nebo dokumentace pro příslušný editor. Po stisknutí příslušné zkratky nám vyskočí dialogové okno, do kterého napíšeme kód, který má být použit na vybrané elementy.

ul>li*>a

Znak * říká, že se má kód několikrát opakovat. Kolikrát, to si Zen automaticky zjistí podle počtu vybraných řádků. Pokud máme vybrány čtyři řádky, použije se tento kód na každý z nich. Vybraný text se vždy vkládá dovnitř posledního napsaného tagu. Výsledkem tedy bude:

<ul>
  <li><a href="">Domů</a></li>
  <li><a href="">O nás</a></li>
  <li><a href="">Ceník</a></li>
  <li><a href="">Kontakt</a></li>
</ul>

Máte rádi statistiky? Pak vás bude zajímat, že jsme museli napsat pouze 23 % kódu, který nám nakonec vzniknul.

Použití pseudoproměnných

Možnosti použití nám stále narůstají - a ještě dlouho budou. Každý řádek textu, který máme vybraný, se ukládá do speciální proměnné $#, kterou je pak možné opakovaně použít. Dobrým příkladem jsou např. obrázky - často je jejich atribut alt shodný s atributem title. Abychom nemuseli kód psát dvakrát, můžeme použít pseudoproměnnou. Mějme tedy např. tento výchozí text:

Obrázek města
Obrázek krajiny

Nyní si musíme tyto dva řádky označit a použít funkci „wrap with abbreviation“. Do dialogu napíšeme následující kód:

img[alt=$# title=$#]*+{}

Pro jistotu si popíšeme, co jsme právě udělali. Máme element img, kterému nastavujeme atributy alt a title tak, jak jsme si ukazovali v minulém díle - tedy pomocí hranatých závorek. Obsahem obou těchto hodnot bude pseudoproměnná $#, která na obě místa doplní text z vybraného řádku. Nesmíme zapomenout na hvězdičku na konci, která říká, že se má tato syntaxe několikrát opakovat. Jako poslední máme přidané prázdné množinové závorky, díky kterým se oba elementy napíšou na samostatný řádek. Kdyby tam tento doplněk nebyl, byly by oba elementy na řádku stejném. Náš výsledek vypadá takto:

<img src="" alt="Obrázek města" title="Obrázek města">
<img src=““ alt="Obrázek krajiny" title="Obrázek krajiny">

Pseudoproměnnou lze vkládat také místo textu, tedy dovnitř { a } (viz příklad na konci článku).

Modifikátory

Modifikátory - jak již název napovídá - nám nějakým způsobem mění vlastnosti elementů, se kterými jsou společně použity. Pro přehlednost si je rozdělíme na modifikátory obecné a konkrétní.

Obecné modifikátory

U tohoto typu je naprosto jedno, v jakém kontextu je použijeme. Stále dělají to samé, ať jsou použity jakkoliv - více pochopíte později. Modifikátory jsou vždy aplikovány pouze na element, za kterým bezprostředně následují.

Modifikátor '*'

Začneme starou dobrou hvězdičkou *, na kterou jsme již narazili. Jedná se o prosté násobení. Pokud nepoužíváme funkci „wrap with abbreviation“, pak musíme za hvězdičku napsat číslo - kolikrát se má element opakovat. Tento modifikátor se zvláště hodí pro tvorbu listů (navigace, seznam atd.).

ul>li*3>a

Výsledkem nám bude:

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

Modifikátor '$'

Jedná se v podstatě o další pseudo-proměnnou, ale je zmíněna mezi modifikátory, neboť se vždy používá ve spojení s *.

Společně s * se za $ dosadí číslo elementu. Viz příklad:

ul>li#menu-item-$*3>a

Dostaneme:

<ul>
  <li id="menu-item-1"><a href=""></a></li>
  <li id="menu-item-2"><a href=""></a></li>
  <li id="menu-item-3"><a href="></a></li>
</ul>

Toto se zvláště hodí, pokud chceme přiřadit jedinečné identifikátory tak, jak vidíme v příkladu. Můžeme použít také více znaků $ v řadě, kdy se pak místo dalšího čísla za $ doplňují nuly a je tak možné získat trochu jiný formát číslování. Kdybychom v našem příkladu místo jednoho $ použili $$$, vznikne nám následující:

<ul>
  <li id="menu-item-001"><a href=""></a></li>
  <li id="menu-item-002"><a href=""></a></li>
  <li id="menu-item-003"><a href=""></a></li>
</ul>

Specifické modifikátory

Nazval jsem je specifickými proto, že se vždy vážou k určitému danému prvku a mohou mít pouze některé předem dané hodnoty. Pro tyto modifikátory je společný znak : (dvojtečka), za kterou pak dosazujeme specifické hodnoty. Možností je mnoho, proto zde budou zmíněné jen ty nejpoužívanější. Podpora těchto modifikátorů se navíc napříč editory liší, proto nemusí modifikátor vždy fungovat.

html:[5, 4t, 4s, xt, xs, xxs]

Začneme elementem html, který vytvoří základní strukturu dokumentu. Za dvojtečku si dosazujeme verzi doctype. Po napsání např. html:5 dostaneme následující:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
</body>
</html>

Místo html:5 lze použít také např. html:4t nebo html:4s pro HTML4 Transitional resp. HTML4 strict, nicméně v době HTML5 už použití těchto doctypů ztrácí význam.

input:[submit, radio, color, range, checkbox, ...]

U elementu input za dvojtečku dosazujeme typ (můžeme vybírat z klasických možností, jako button, submit, radio aj.). Bez modifikátoru se automaticky dosadí type="text".

input           →   <input type="text">
input:button    →   <input type="button">

script:[src]

Určuje, zda ke scriptu přidat atribut src.

script        →    <script type="text/javascript"></script>
script:src    →    <script type="text/javascript" src=""></script>

a:[link, mail]

Modifikátor může upravit hodnotu, která bude předepsaná v atributu href.

a         →    <a href=""></a>
a:link    →    <a href="http://"></a>
a:mail    →    <a href="mailto:"></a>

cc:[ie6, ie, noie]

Vytvoří podmínku, která slouží k zaměření prohlížeče. cc je použitelný pouze dohromady s některým z modifikátorů.

cc:ie     →   <!--[if IE]><![endif]-->
cc:ie6    →   <!--[if lte IE 6]><![endif]-->
cc:noie   →   <!--[if !IE]><!--><!--<![endif]-->

Dokončení příkladu ze začátku

Po přečtení tohoto článku byste měli alespoň tušit, jak vytvořit strukturu zmíněnou na začátku. Podívejme se ale na řešení společně. Nejlepší bude použít funkci „wrap with abbreviation“. Napíšeme si tedy jednotlivé kategorie pod sebe:

Domů
O nás
Ceník
Kontakt

Poté použijeme příslušnou zkratku spolu s následujícím kódem:

ul>li#menu-$*>a[href=# title=$#]{$#}

Rozebereme si nyní krok po kroku, co jsme udělali. Máme element ul, který bude mít nějaké potomky li. Tyto elementy li budou mít přiřazeno unikátní id ve tvaru "menu-" a číslo elementu (tj. 1 až 4), které reprezentuje pseudoproměnná $. Poté následuje hvězdička, která značí, že se má kód provést pro každý označený řádek. Uvnitř nalezneme odkaz, který má nastaveny dva atributy - href, který je pro všechny "#", a také title, který má jako hodnotu vždy označený text na daném řádku. Jako poslední musíme ještě určit, jaký text bude uvnitř odkazu, což uděláme uzavřením naší pseudoproměnné do množinových závorek.

Závěr

Znovu zde přikládám odkaz na editor CodeMirror, ve kterém si můžete nově nabyté poznatky vyzkoušet bez toho, abyste museli Zen Coding instalovat. http://zen-coding.ru/codemirror/

Dnes jsme pokryli další významnou část Zen Codingu. Stále však máme před sebou ještě jeden díl, kde se dozvíme jak si upravit nastavení, jak přidat vlastní snippety (tj. kusy kódu) či jak použít tzv. filtry, které nám výsledný kód ještě nějak upraví. Můžete se také těšit na interaktivní test, který prověří vaše znalosti.

Pokud máte nějaký dotaz, rád jej zodpovím v komentářích. Pro tuto chvíli se s vámi loučím a doufám, že vám Zen Coding pomohl a již nepíšete HTML "špatně".

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

1 názor  —  1 nový  
Hlasování bylo ukončeno    
14 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 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.

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

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

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ý