William Luis

0 %
William Luis
Fullstack Developer
  • Residence:
    Canada
  • City:
    Toronto
  • Age:
    26
French
English
Spanish
html
CSS
Js
PHP
WordPress
  • Bootstrap, Materialize
  • Stylus, Sass, Less
  • Gulp, Webpack, Grunt
  • GIT knowledge

Zen Coding, um jeito diferente de escrever HTML

13 de fevereiro de 2011

A base da Web, o HTML, mesmo depois de revisões e otimizações, continua parecido com o que era quando foi inventado. Uma linguagem de marcação simples, que permite “desenhar” páginas para a Web. Vieram editores, passamos pela era negra dos layouts em tabela feitos no FrontPage/Dreamweaver, depois veio a glória com os padrões Web. Tirando os editores WYSIWYG, quem escreve HTML não percebeu muitas melhorias ao longo dos anos.
Mas isso está prestes a mudar graças a uma técnica batizada de Zen Coding. Ela utiliza uma padrão lógico para construir sentenças que, com o pressionar de uma tecla de atalho, transforma-se em trechos enormes de código, prontos, identados indentados, bonitinhos. Parece mágica.
Digamos que o desenvolvedor queira criar uma tabela lista. No modelo tradicional, ele escreve os itens, ajudado pela área de transferência, mas ainda assim, dá uma trabalheira escrever tudo isso na unha:

<div id=”header”>
<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>

Com o Zen Coding, dá para escrever tudo isso numa linha só, assim:

div#header>ul>li*5>a


Funciona! E funciona muito bem!
Abaixo, um vídeo dos desenvolvedores, mostrando algumas das várias possibilidades do Zen Coding:

[vimeo http://www.vimeo.com/7405114 w=600&h=375]

No site oficial, estão disponíveis vários plugins para os principais editores HTML do mercado, cada um com instruções de instalação anexas. Aqui, testei com o Notepad++, e correu tudo bem.
Se você trabalha com HTML, o Zen Coding merece uma chance. Pode demorar um pouquinho para aprender a sintaxe e pegar o jeito, mas com algum tempo de prática, o ganho em tempo é enorme.

Posted in Dicas, JQuery, PluginsTags:
Write a comment