Zen-Coding – Um novo jeito de escrever HTML

Uma coisa que desenvolvedores web sabem, é que não há nada mais demorado e cansativo do que escrever HTML. Diferente de linguagens de programação, um código HTML (e também XML e seus derivados) é pouco intuitivo e muito repetitivo, e mesmo as melhores IDEs do mercado não ajudam muito.

Já que nenhum desenvolvedor web que se preze utiliza Dreamweaver ou outros editores WYSIWYG, devido aos códigos sujos e de difícil manutenção gerados, uma ótima solução é utilizar o Zen-Coding.

O Zen-Coding não se trata de uma nova IDE, mas sim de um plugin, ou melhor, uma coleção de scripts, disponível para uma grande quantidade de IDEs, incluindo Eclipse e NetBeans, que permite a digitação rápida de HTML, XML e XSL, por meio de abreviações, muito semelhantes a seletores CSS, o que torna a curva de aprendizagem realmente pequena.

Com o Zen-Coding você digita algo como:

div#page>div.logo+ul#navigation>li*5>a

E obtém:

<div id="page">
    <ul id="navigation">
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ul>
</div>

Para conhecer a sua sintaxe, visite a lista de seletores HTML do Zen-Coding.

Agora vamos a um breve tutorial para instalar e utilizar o Zen-Coding no Eclipse (o que inclui ZendStudio for Eclipse e Aptana Studio).

1. Primeiramente, será necessário instalar o plugin Eclipse Monkey, que pode ser instalado pelo Update Manager, a partir do update site http://download.eclipse.org/technology/dash/update.
2. Crie um projeto em sua worspace com o nome zencoding.
3. Crie um diretório scripts em seu projeto recém criado.
4. Baixe o pacote Zen Coding for Aptana da página de downloads do projeto e descompacte seu conteúdo no diretório scrips.

   

5. Reinicie o Eclipse.

Agora você deve ter um menu scripts, com o sub-menu zencoding nele. Para transformar as abreviações em códigos HTML, basta utilizar a opção Expand Abbreviation após digitá-las.

Para cada opção no menu zencoding será exibido o respectivo atalho ao lado desta. Caso algum dos atalhos não esteja visível, provavelmente é porque o Eclipse já tem aquele atalho definido para outro comando. Para resolver isso há duas opções: Alterar o atalho do Eclipse (Window -> Preferences -> General -> Keys) ou alterar o atalho do Zen-Coding.

Para a segunda opção, localize o script da função que deseja alterar o atalho na pasta scripts que você criou e edite o atalho no comentário do script, na linha escrito * Key:.

Ex:

/*
 * Menu: Zen Coding > Expand Abbreviation
 * Kudos: Sergey Chikuyonok (http://chikuyonok.ru)
 * License: EPL 1.0
 * Key: M3+E
 * DOM: http://download.eclipse.org/technology/dash/update/org.eclipse.eclipsemonkey.lang.javascript
 *
 * @include "/EclipseMonkey/scripts/monkey-doc.js"
 * @include "lib/core.js"
 * @include "settings.js"
 */

Após salvar, o novo atalho já estará disponível.

Fonte: http://code.google.com/p/zen-coding/wiki/AptanaHowToEn