Zen Coding – Vai mudar sua vida se você usa HTML

Imagine escrever uma linha com uns poucos comandos e obter um arquivo HTML todo formatado e já preparado para receber seu texto.

Isto é o Zen-Coding: http://code.google.com/p/zen-coding/

Bom, melhor que falar é mostrar a mágica:

 
html>(head>title+script+style)+body>div#jqt>(div#main>(div.toolbar>
h1+a.back)+span#tempo+span#tentativas+table>tr*4>td*4>img#id[onclick])+
(div#about>(div.toolbar>h1+a.back)+div.sobre>
a[href=http://wwww.netfilter.com.br])

E com um comando (Control-E) obter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
	<head>
		<title></title>
		<script type="text/javascript"></script>
		<style type="text/css"></style>
	</head>
	<body>
		<div id="jqt">
			<div id="main">
				<div class="toolbar">
					<h1></h1>
					<a href="" class="back"></a>
				</div>
				<span id="tempo"></span>
				<span id="tentativas"></span>
				<table>
					<tr>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
					</tr>
					<tr>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
					</tr>
					<tr>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
					</tr>
					<tr>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
						<td><img src="" alt="" id="id" onclick="" /></td>
					</tr>
				</table>
			</div>
			<div id="about">
				<div class="toolbar">
					<h1></h1>
					<a href="" class="back"></a>
				</div>
				<div class="sobre"><a href="http://wwww.netfilter.com.br"></a></div>
			</div>
		</div>
	</body>
</html>

Esta mágica é feita pelo Zen-Coding, um plugin genial. gratuito e disponível para a maior parte dos editores.

É o tipo da coisa que você só vai valorizar depois de testar. Se ainda está em dúvida veja o vídeo abaixo:


Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

O Zeletron já sugeriu algumas mudanças para fazer o Zen-Coding mais poderoso, você pode sugerir também: http://code.google.com/p/zen-coding/issues/detail?id=159

Comments on this entry are closed.