Zen Coding – Uma nova e ágil maneira de escrever HTML e CSS

10set 2010, às 17:16

Publicado em Ferramentas add-ons | Deixe o seu comentário (2) »

publicado por: Magno Valdetaro

Nas minhas perambulações na web o Zen Coding cruzou o meu caminho e fez meus olhos brilharem. Conheça este brilhante plugin para os mais populares editores HTML; que faz para o HTML o que o jQuery tem feito para o javascript.

Com o conceito de agilizar a escrita do código HTML/CSS, o Zen Coding, desenvolvido por Sergey Chikuyonok do Smash Magazine elimina a tarefa de escrever divs e seus conteúdos e classes, por uma simples sintaxe CSS que com um simples comando por atalho de teclado é expandida transformasse como passe de mágica (não é magia é tecnologia!) na estrutura HTML com suas devidas classes e ids.

Assista o vídeo de como funciona o Zen Coding:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Excelente, não?

Tudo muito simples e rápido, após a digitação de uma sintaxe simples, como esta:

   1: div#menu>ul>li*5>a

Selecione está linha e pressione o devido atalho onde padrão é “Ctrl +,” mas pode variar de aplicativo para aplicativo, no caso do Aptana que explicarei a seguir como instalar, o atalho será “Ctrl+e”. A sintaxe se expandirá na estrutura HTML, abaixo:

< div id="menu">
    < 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>

Como instalar o Zen Coding no Aptana (Windows)

Ainda não comentei sobre o Aptana aqui, mas em breve farei um post sobre esse poderoso IDE. Vamos ao que interessa dá um trabalhinho, mas é moleza, você vai precisar do seguinte: Aptana studio e do Plugin Zen Coding

Com o Aptana studio instalado e o Zen Coding em mãos, crie um novo projeto: File > New > Other > Web > Default Web Project.

Na tela seguinte de o nome do projeto de zencoding.

aptana-project

Clique com o botão direito sobre o projeto criado intitulado zencoding, no menu flutuante siga: New > Folder; nomeia a pasta como scripts.

Extraia o conteúdo do arquivo Zen.Coding-Aptana.v0.6.0.1.zip, copie (Ctrl+c) todo o conteúdo extraído e cole (Ctrl+v) na pasta scripts do projeto zencoding

O resultado será este:

aptana-zen-coding

Agora na barra de menu no item Scripts, você terá acesso as ações do Zen Coding, veja a imagem:

aptana-scripts-zen-coding

Pronto! O Zen Coding está instalado, pratique que com certeza valerá a pena. Caso não funcione reinicie o Aptana.

O atalho não funciona (ou não existe)!

Caso tenha problemas com atalho de expandir a sintaxe no Aptana ou ele não venha ativado, basta fazer o seguinte:

Na pasta script do projeto zencoding, encontre o arquivo Expand Abbreviation.js e altere o valor do item Key para M3+E (onde M3 é a tecla Alt). Veja o exemplo:

/*
 * 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
 * 

Mais detalhes sobre o Zen Coding sobre o Aptana Studio: AptanaHowToEn(em inglês)

Editores com suporte oficial

Estes editores tem suporte total ao Zen Coding: Aptana/Eclipse, TextMate, Coda, Espresso, Komodo Edit/IDE, Notepad++, PSPad, ,editArea.

Outros editores:

Estes editores não tem garantia de suporte a todos os recurso do Zen Coding: Adobe Dreamweaver, Sublime Text, UltraEdit, TopStyle, GEdit, BBEdit/TextWrangler, Visual Studio, EmEditor, Sakura Editor.

Zen Coding no Dreamweaver:

Basta baixar e instalar a extensão: Zen.Coding-Dreamweaver. Não fiz testes em quais versões do Dreamweaver o Zen Coding funciona.

Mais informações sobre o Zen Coding: Zen Coding a new way to write html code(em inglês)

Ainda estou experimentando o Zen Coding, mas pelo que vi até agora me pareceu realmente fantástico. Experimente também e não deixe de me contar o que achou.