ZenCoding, o HTML com turbo!
- junho 8th, 2010
- By rodrigo
- Write comment

Se você trabalha com html provavelmente já está acostumado com vários padrões pessoais de estruturas que utiliza sempre e as vezes faz um copy/paste de algum outro arquivo aberto para ganhar tempo, afinal escrever tags similares repetidamente não é a tarefa mais agradável do mundo.
O Zencoding é um plugin para editores de texto escrito em python que torna a escrita do html incrivelmente mais rápida, trata-se de uma forma de abreviar o código, que com o pressionar de um atalho se transforma em um gigantesco bloco de código identado e correto, pronto para você por o seu conteúdo.
Abstrato demais? Se você conhece bem html o entendimento da sintaxe deve ser trivial, então vamos aos exemplos…
A linha abaixo:
div#header>div.menu>ul>li.selected+li*5
Resulta em:
<div id="header">
<div class="menu">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
(Devia estar identado mas o WP me sacaneia)
Muito legal, não é? Vamos sofisticar um pouco mais:
div#leftmenu>img.logo+h1+(ul.menu$*3>li#item$*6)+p.copyright
Se transforma em:
<div id="leftmenu">
<img src="" alt="" class="logo" />
<h1></h1>
</div>
<ul class="menu1">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<ul class="menu2">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<ul class="menu3">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<p class="copyright"></p>
Mais exemplos estão disponíveis no vídeo abaixo. Os fontes e detalhes de instalação estão no site oficial: http://code.google.com/p/zen-coding/
Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

