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

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       13 218×

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.

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 Stavebnice umělé inteligence 1

Stavebnice umělé inteligence 1

Článek popisuje první část stavebnice umělé inteligence. Obsahuje lineární a plošnou optimalizaci.  Demo verzi je možné použít pro výuku i zájmovou činnost. Profesionální verze je určena pro vývojáře, kteří chtějí integrovat popsané moduly do svých systémů.

Obrázek ke článku Hybridní inteligentní systémy 2

Hybridní inteligentní systémy 2

V technické praxi využíváme často kombinaci různých disciplín umělé inteligence a klasických výpočtů. Takovým systémům říkáme hybridní systémy. V tomto článku se zmíním o určitém typu hybridního systému, který je užitečný ve velmi složitých výrobních procesech.

Obrázek ke článku Jak vést kvalitně tým v IT oboru: Naprogramujte si ty správné manažerské kvality

Jak vést kvalitně tým v IT oboru: Naprogramujte si ty správné manažerské kvality

Vedení týmu v oboru informačních technologií se nijak zvlášť neliší od jiných oborů. Přesto však IT manažeři čelí výzvě v podobě velmi rychlého rozvoje a tím i rostoucími nároky na své lidi. Udržet pozornost, motivaci a efektivitu týmu vyžaduje opravdu pevné manažerské základy a zároveň otevřenost a flexibilitu pro stále nové výzvy.

Obrázek ke článku Síla týmů se na home office může vytrácet. Odborníci radí, jak z pracovních omezení vytěžit maximum

Síla týmů se na home office může vytrácet. Odborníci radí, jak z pracovních omezení vytěžit maximum

Za poslední rok se podoba práce zaměstnanců změnila k nepoznání. Především plošné zavedení home office, které mělo být zpočátku jen dočasným opatřením, je pro mnohé už více než rok každodenní realitou. Co ale dělat, když se při práci z domova ztrácí motivace, zaměstnanci přestávají komunikovat a dříve fungující tým se rozpadá na skupinu solitérů? Odborníci na personalistiku dali dohromady několik rad, jak udržet tým v chodu, i když pracovní podmínky nejsou ideální.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý