Zen Coding: Como escrever HTML/CSS mais rápido
Postado por: Pedro Rogério emZen Coding é um plugin, criado por Sergey Chikuyonok para Aptana, TextMate, Coda e Espresso, baseado em JavaScript (para o Aptana) ou Python (restante dos Scripts) que utiliza uma lógica avançada para a construção do HTML e CSS.
A idéia deste projeto é usar a lógica da sintaxe do CSS para escrever gandes blocos de código:
div#content.wide.column>h1+ul#nav>li.item$*5>a
O resultado da declaração acima você vê abaixo:
<div id="content" class="wide column">
<h1></h1>
<ul id="nav">
<li class="item1"><a href=""></a></li>
<li class="item2"><a href=""></a></li>
<li class="item3"><a href=""></a></li>
<li class="item4"><a href=""></a></li>
<li class="item5"><a href=""></a></li>
</ul>
</div>
Para criar um novo documento XHTML Strict, basta digitar o seguinte código:
html:xs
Ele irá gerar o seguinte código:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
</body>
</html>
Basta conferir a lista de elementos Zen dedicados a HTML, e também a lista Zen de seletores HTML.
Download
- Aptana
- Coda, via TEA for Coda
- Espresso, via TEA for Espresso
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Estou planejando usar outras ferramentas de desenvolvimento (hj uso quase sempre o DW). Quem sabe esta seja uma boa alternativa…
Fala Pedro, blz?
Ótima dica, realmente muito produtiva.
Já baixei a versão para CODA e já estou estudando.
Abraço.
Isso é demais, HTML já é simples o suficiente pra não precisar de ajuda pra escrever. Pra quem usa textmate tem os bundles nele que já ajudam no que precisa.
Ispertaummmm, pensa bem no que você falo…
não entendi como faço a utilização dele… adorei a forma de escrever o html, mais como usa-lo não entendi! baixei e veio arquivos que fique perdido!
Evandro,
Após instalado o plugin, crie o bloco de código e de um Ctrl + , para que ele crie o bloco de código HTML final.
putz, vão acabar me fazendo comprar um mac, ai meu bolso, po só funfiona no aptana pra ruinDOWS…
Renie,
Descobri que existe também uma versão para o Dreamweaver CS4, você pode baixá-la aqui:
http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Dreamweaver.v0.4.zip&can=2&q=
boooooa vo testar a noite ( o coisa de nerd, ao inves de sair beber vai testar plugin hahaha )
Baixei a versão para Dreamweaver e também Aptana para windows e não funcionou por aqui, se alguem tiver um resultado positivo no windows comenta aí…
1. Instalar a extensão no Dreamweaver,
2. Reiniciar o Dreamweaver,
3. Use: Commands>Expand Abbreviation. para ver funcionar a conversão da linka de codigo
Como criar atalho do ZenCoding para Dreamweaver:
Para criar o atalho Ctrl +,
1. Edit > Keyboard Shortcuts
2. Duplicar o atual conjunto de atalhos de teclado (o primeiro mini-ícone da esquerda no topo da caixa de diálogo)
3. Expanda “Commands”
4. Role para baixo para Expand Abbreviation
5. Em “Press Key” selecione o ‘CTRL’, ‘. mas alguma tecla que queira usar como atalho, caso já exista alguma utilizada clique em ‘Change’ e de OK
Eu preferi usar a tecla “CTRL + \” , pois além de próximas não estão sendo usadas em outro atalho
e este é para o Aptana
http://jyoseph.com/zen-coding-how-to-install-Aptana-Eclipse/
Pois é Pedro, você pegou o Plugin, mas não ensinou como utiliza-lo.
Abraços,
ow nem precisa ensinar, o video eh auto explicativo
como eu instalo ele no aptana?
Carlos,
Nesse link você pode ver um tutorial de como instalar o Zen Conding no Aptana: http://jyoseph.com/zen-coding-how-to-install-Aptana-Eclipse/
Descobri: http://www.hallofbrightcarvings.com/install-zen-coding-snippets-for-aptana/
Pedro.. em todo projeto.. vou ter que usar essa pasta?
Bakana!
alguem sabe na onde tem “coda” versão windowns?
@Mario Sérgio
Coda é apenas para MAC.
Muito bacana este plugin em…. gostei demais.
Sai a versão nova para Dreamweaver, mas ainda assim não estou conseguindo fazer funcionar, será que é pq estou utilizando a versão CS4?
Tony,
Utilizo o mesmo no Dreamweaver CS4 e funciona perfeitamente.
Cara, depois de uma certa briga com o Dreamweaver, funcionou legal. Valeu a dica Pedro e também o Fábio Sardinha.
Cara, no meu DW CS4 não aparece a opção “Expand Abbreviation”. Já instalei várias vezes e reiniciei e nada aparece.
Alguém sabe se tem algo que possa ser feito ?
Valeu!
Só uma duvida… alguem teve o seguinte problema no aptana:
Instalo e funciona normalmente no entanto algumas das letras que são utilizadas pelo script, scripts > zen coding, não funcionam na hora de escrever o codigo para isso tive que mudar a chave http://docs.aptana.com/docs/index.php/Eclipse_Monkey_scripting_with_Ruby#Adding_metadata_to_your_script apenas para saber se alguem passou por isso.
Esse tal de Aptana é o que? Um plugin para o Eclipse? No site deles http://www.aptana.org/php esta falando que o Aptana PHP não esta mais incluído no Aptana Studio 2.0 e agora só esta disponível o Eclipse PDT (PHP Development Tools) , tem como eu instalar o plugin Zen Coding no eclipse usando o PHPDT?
Consegui fazer funcionar no DW 8.