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).
- 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.
- Crie um projeto em sua worspace com o nome zencoding.
- Crie um diretório scripts em seu projeto recém criado.
- Baixe o pacote Zen Coding for Aptana da página de downloads do projeto e descompacte seu conteúdo no diretório scrips.
- 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



Últimos Comentários