Zen Coding – ótimo plugin para desenvolver HTML/CSS

Zen Coding é um plugin que agiliza as coisas na hora de escrever o html/css. Ao invés de escrever todo conteúdo de uma div ou suas classes, você pode simplesmente através de um simples comando, montar todas elas.
Veja um video de como ele funciona :

Empolgado?
Veja como instalar ele no windows usando o Aptana ou Dreamweaver

Instalando no Aptana

Para usar o zen coding você precisa instalar:
Aptana studio (http://www.aptana.org/studio )
Plugin Zen Coding (http://code.google.com/p/zen-coding/downloads/list [zen coding for aptana V x. x.x]). o arquivo é um .zip

1- Com o aptana aberto crie um novo projeto web – FILE > NEW > OTHER > WEB > DEFAULT WEB PROJECT. Salve o projeto com o nome Zen Coding.

2- Clique com o botão direito em cima do projeto e coloque NEW > FOLDER – salve a pasta com o nome scripts (tem que ser “scripts”, não “script” porque no singular não funciona).

3- Extraia o arquivo .zip do zen coding para uma pasta. Copie(CTRL+C) todos os arquivos e pasta, exceto a pasta __MACOSX (que é para o MAC, óbvio).  Agora cole esses arquivos dentro da pasta scripts do aptana.

Deve estar exatamente assim:

Vá em Scripts, menu ao lado do Run e você verá o Zen coding:

Agora é só digitar algo para testar.

Abra o index.html e digite div#header, aperte ALT+E e Pronto, já está funcionando.

OBS:  Você não precisa copiar o zen coding e nem criar uma pasta script em todo o projeto que for criar, basta manter o projeto Zen Coding salvo e criar um novo projeto web.

Se após fazer isso não funcionar, vá em  FILE > RESTART.  Se ainda não funcionar reveja os passos acima.

Funciona no eclipse com aptana plugin.

Instalando no Dreamweaver

Para instalar o Zen Coding no Dreamweaver no Windows ou no Mac, você precisa:
baixar o plugin para o DW (http://code.google.com/p/zen-coding/downloads/list [Zen Coding for Dreamweaver vx.x].

Nesse exemplo estou utilizando o DW CS4 (foi o único DW que testei o zen coding)

Descompacte o .zip em uma pasta do seu computador e abra o arquivo Zen Coding v0.6.mxp. (Você vai precisar ter o extension manager instalado)

Feito isso basta aceitar os termos para instalar a extensão do Zen Coding.

Problemas conhecidos da instalação no DW

# No Windows Vista ou no Windows 7, você precisa desligar o controle de conta do usuário (painel de controle > usuários) para que o Zen Coding funcione.

# No caso do Windows Vista ou 7, o arquivo descompactado não pode ser colocado na pasta do usuário. coloque diretamente no C: ou em outra partição

Após a instalação o menu comandos no DW deverá estar assim:

Note que o atalho da foto está diferente do seu atalho pois eu mudei.

Tags: aptana, css, dreamweaver, html, windows, zen coding

Escrito 17 de dezembro de 2009 as 14:43, na categoria Web Design. Você pode acompanhar as respostas a este tópico por RSS 2.0 feed. Você pode deixar um comentário, ou trackback a partir do seu site.