Zen-Coding – criando HTML como um ninja!

Hoje trago até vocês uma coisinha muito da legal: o Zen-Coding, apresentado a mim pelo meu amigo implementador Bernard de Luna.

O que é o Zen-Coding?

Segundo o próprio site:

Zen Coding é um plugin de editores para codificar e
editar HTML, XML, XSL (or any other structured code format) em alta
velocidade. O “núcleo” dessa ferramenta é um sistema de abreviação
poderoso que te permite expandir expressões (parecidas com a de CSS) em
HTML válido e organizado.

Zen Coding is an editor plugin for high-speed HTML,
XML, XSL (or any other structured code format) coding and editing. The
core of this plugin is a powerful abbreviation engine which allows
you to expand expressions – similar to CSS selectors – into HTML code.

Como assim? O que ele faz?

Com o Zen-Coding, você digita isto no seu editor:

div#page>div.logo+ul#navigation>li*5>a

… aperta uma combinação de teclas, normalmente CTRL+E, e isso é automaticamente transformado em:

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<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>

Editores com suporte ao Zen-Coding

Você pode baixar o plugin do Zen-Coding no site oficial para os seguintes editores:

Aptana/Eclipse, TextMate (Mac)
Coda (Mac)
Espresso
(Mac)
Komodo Edit/IDE
Notepad++ (Windows)
PSPad (Windows)
<textarea> (browser)
editArea (browser)
CodeMirror (browser)
Dreamweaver (Windows, Mac)
Sublime Text (Windows)
UltraEdit (Windows)
TopStyle (Windows)
GEdit, BBEdit/TextWrangler (Mac)
Visual Studio
(Windows)
EmEditor (Windows)
Sakura Editor (Windows)
NetBeans
IntelliJ IDEA/WebStorm/PHPStorm
Emacs
Vim
Visual Studio

Nem todos são plugins oficiais, mas a maioria sim.

O que mais ele faz?

Vejam um exemplo que criei para vocês…

Você pode expandir a seguinte linha:

html>(head>title+meta[name="description" content]+meta[name="keywords" content])+(body>(header+(#body>#content+aside#sidebar))+footer)

Em um template de site completo:

<html>
	<head>
		<title></title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
	</head>
	<body>
		<header></header>
		<div id="body">
			<div id="content"></div>
			<aside id="sidebar"></aside>
		</div>
		<footer></footer>
	</body>
</html>

Esse é um bom exemplo do que ele é capaz de fazer… Mas não é um uso
comum dele… A ideia é você fazer HTML muito rápido, por exemplo quando
você digita #menu>ul>li*5>a e “expande”, você ganha tempo por não ter que escrever (e organizar/identar) isso tudo:

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

Espero que vocês tenham gostado dessa ferramenta! Ela não é novidade, mas sei que nem todo mundo conhece.

Lembre-se: quanto menos tempo você gastar fazendo as tarefas que vive fazendo, mais tempo você terá pra ganhar mais dinheiro!

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: