Fala pessoal! Bem vindos ao blog do programador,esse é nosso primeiro post.Estaremos abordando sempre assuntos relacionados a programação web principalmente com tutoriais, artigos e dicas.Espero que gostem.
Hoje trago até vocês uma coisinha muito da legal: o Zen-Coding, apresentado à 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 isso 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 e Visual StudioNem 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 idéia é 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!
Artigo originalmente publicado em 17 de janeiro de 2011 por Thiago Belem: Zen-Coding – Criando HTML como um ninja!
0 comentários:
Postar um comentário