ZenHTML – Kódolj egyszerűbben, gyorsabban

A ZenHTML egy plugin, különböző szerkesztőkhöz és arra hivatott, hogy HTML, XML, CSS kód írásában segítse, gyorsítsa munkánkat. Maga a használata nagyon egyszerű, és a népszerű szerkesztőkhöz (pl Eclipse/Aptana, Coda, Notepad++, PSPad) elkészült és letölthető plugin formájában.

Konkrét példán keresztül nézzük az alábbi sort:

1

div>ul>li*5>a

Ez mindösszesen annyit csinál nekünk hogy az alábbi formában létrehozza a következő kódrészletet:

1
2
3
4
5
6
7
8
9

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

Látható, hogy a használata egyszerű, és adja magát, minden túlmagyarázás nélkül is. A használata egyszerű és gyorsan megtanulható. Szerkesztőkben  könnyen rendelhetünk valami billentyűzet kombinációt és akkor pillanatok alatt elsajátíthatjuk a működését.

További lehetőségek:

Az oldalt felépítő elemeinket elláthatjuk ID vagy Class névvel is:

1

div.listbox>ul#element>li*5>a

Melynek a végeredményét így kapjuk meg:

1
2
3
4
5
6
7
8
9

<div class=”listbox”>
  <ul id="element">
   <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

A kisebb blokkokat  a fenti módszerek segítségével létrehozhatjuk. Emellett lehetőségünk van nagyobb összetettebb struktúrát is létrehozni, ami csak annyiban különbözik, hogy zárójelekkel különítjük el az összetartozó részeket, és plusz jellel összekapcsoljuk őket. Ezután a fenti példából kiindulva, az alábbi módon tehetjük meg:

1

div#wrap>(header>nav>ul>li*3>a>span)+(div.content>)+(aside>p*2>a)+footer>ul>li*5>a)

Ezzel létre is hoztunk egy kisebb oldalt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div id="wrap">
  <header>
    <nav>
      <ul>
        <li><a href=""><span></span></a></li>
        <li><a href=""><span></span></a></li>
        <li><a href=""><span></span></a></li>
      </ul>
    </nav>
  </header>
  <div class="content">
 
  </div>
  <aside>
    <p><a href=""></a></p>
    <p><a href=""></a></p>
  </aside>
  <footer>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </footer>
</div>

Mint az elején említettem, több támogatott szerkesztő is van, ahol pluginként egyszerűen munkára foghatjuk a ZenHTML-t.  A honlapján, minden információt, és verziót letölthetünk, a wiki oldalon összegyűjtve láthatjuk, hogy a népszerű szerkesztőkhöz hogyan tudjuk a plugint telepíteni. A végére pedig egy remek video, ami megmutatja a benne rejlő lehetőségeket, működés közben is.