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:
1: < div id="menu">
2: < ul>
3: < li>< a href="">a>li>
4: < li>< a href="">a>li>
5: < li>< a href="">a>li>
6: < li>< a href="">a>li>
7: < li>< a href="">a>li>
8: ul>
9: 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.
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:
Agora na barra de menu no item Scripts, você terá acesso as ações do Zen Coding, veja a imagem:
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:
1: /*
2: * Menu: Zen Coding > Expand Abbreviation
3: * Kudos: Sergey Chikuyonok (http://chikuyonok.ru)
4: * License: EPL 1.0
5: * Key: M3+E
6: * DOM: http://download.eclipse.org/technology/dash/update/org.eclipse.eclipsemonkey.lang.javascript
7: *
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,
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.
