Bem vindo ao SOS Designers

Faça o seu cadastro gratuito no Portal SOS Designers e tenha um acesso personalizado.

Empresas

Cadastre gratuitamente suas vagas, crie sua propria Lista de Curriculos Favoritos, e tenha um acesso personalizado.

Usuarios

Cadastre gratuitamente seu curriculo, crie sua propria Lista de Noticias Favoritas e tenha um acesso personalizado.

Área de Empresas | Vagas

Área de acesso a empresas cadastradas que desejam postar vagas de empregos no Portal e pesquisar curriculos.

Cadastre-se gratuitamente
Esqueceu a sua senha?

Área de Usuarios | Curriculos

Área do Usuario que deseja cadastrar seu curriculo e pesquisar vagas.



Cadastre-se gratuitamente
Esqueceu a sua senha?


Redes Sociais
Siga o Portal SOS Designers no Twitter Siga o Portal SOS Designers no Facebook

SEO


Você está aqui: Home » SEO » Zen-Coding – Criando HTML como um ninja!

Zen-Coding – Criando HTML como um ninja!


Pesquisar no Portal SOS Designers





Tempo Real



Siga o SOS Designers








SOS Designers

Fala pessoal! Finalmente de volta com o blog. :)

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:


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

Sobre o Colunista:

Thiago Belem


Profissão: Desenvolvedor PHP, WebMaster e Geek

Descrição: Sou WebMaster e Desenvolvedor PHP há cinco anos, trabalho no Jornal do Brasil, estou cursando o 3º período de Ciência da Computação na Unicarioca e atuo como Desenvolvedor Freelancer na Clio Interactive. Estudo programação desde os 12 anos de idade e trabalho com PHP e MySQL voltados para o desenvolvimento WEB desde o fim de 2006. Atualmente mantenho meu blog sobre PHP, MySQL, jQuery e Desenvolvimento WEB e sou colunista do portal iMasters, onde também sou moderador do Fórum de PHP e do Fórum Oficial de CakePHP (Brasil).
Thiago Belem

Deixe seu comentário:





© Copyright 2002-2018
Portal SOS Designers
Webmaster: Luiz Antonio Bovi