ZenHTML – Kódolj egyszerűbben, gyorsabban


ZenHTML - hatékony kódolás 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.

Kapcsolódó bejegyzések:
  • A navigációnál használt tab-os/füles megoldások egy problémája szokott lenni, hogy hiába állítjuk be a css-ben, hogy az aktív tab-nak hogy kellene kinéznie, katt …

  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • Ezt a tag-et azért találták ki, hogy stílust olyan elemeknek, szövegrészeknek is lehessen adni, amelyek beállítására hagyományosan más mód nincsen. Használhatjuk …

  • Felmerült a lehetőség itt a lapon is, hogy mi lenne ha a hozzászólók linkjeit nem a névre tennénk rá hivatkozásként, hanem a név mellett vagy alatt lenne kiiratv …

  • Most találtam ezt a remek kis cuccot amivel lehet gyorsítani a sitebuildeléskor kicsit a folyamatokat. A lényege, hogy amikor megírtad a HTML kódot, akkor a forr …

A cikket beküldte: iTyu ()

1 hozzászólás

  1. Fefy says:

    Hasznos kis plugin. Egyébként ha valakit érdekel, akkor itt van az összes elérhető “parancs”: http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn

Szólj hozzá
a ZenHTML – Kódolj egyszerűbben, gyorsabban c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>