• Blog
    • Tecnologia
    • Música
  • Rodrigo Rodrigues
    • Currículo
    • Bandas
    • Portifólio
    • Contato
  • Blog
    • Tecnologia
    • Música
  • Rodrigo Rodrigues
    • Currículo
    • Bandas
    • Portifólio
    • Contato
Programação

ZenCoding, o HTML com turbo!

Rodrigo Rodrigues 8 de junho de 2010 Nenhum comentário
ZenCoding, o HTML com turbo!
Rodrigo Rodrigues 8 de junho de 2010
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Email

O ZenCoding é um plugin para editores de texto com o fim de tornar a escrita do html mais rápida. Trata-se de uma forma de abreviar o código que se expande em um bloco pronto para você por o conteúdo.

Se você trabalha com html, certamente já está acostumado com vários padrões que sempre utiliza e, as vezes, faz um copy/paste de algum outro arquivo aberto para ganhar tempo, afinal escrever tags similares repetidamente não é a tarefa mais agradável do mundo.

Com o ZenCoding você só precisa escrever uma expressão, que será expandida para a estrutura desejada, por fim você também poderá criar suas próprias abreviações personalizadas.

Se você conhece bem html o entendimento da sintaxe deve ser trivial, então vamos aos exemplos :

A linha abaixo:

div#header>div.menu>ul>li.selected+li*5

Resulta em:

<div id="header">
<div class="menu">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

Muito legal, não é mesmo? Então vamos sofisticar um pouco mais:

div#leftmenu>img.logo+h1+(ul.menu$*3>li#item$*6)+p.copyright

Se transforma em:

<div id="leftmenu">

<img src="" alt="" class="logo" />
<h1></h1>
<ul class="menu1">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<ul class="menu2">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<ul class="menu3">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<p class="copyright"></p>
</div>

Mais exemplos com os fontes e detalhes de instalação podem ser encontrados no site oficial.

Edit: o Zen Coding foi renomeado como Emmet, e a página oficial do projeto possui os plugins e código fonte para download. O Emmet já vem instalado por padrão em alguns editores de texto, como o Visual Studio e VS Code.

O github do projeto também vale a visita.

Comentários
código HTML produtividade web
  • Share This:
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Email
Next NAS: Network Attached Storage – O que é? E para que serve?
Rodrigo Rodrigues
Related Posts
Restaurar o Ubiquiti Unifi Controller sem Backup 17 de maio de 2020
Café Quentinho Hardware Header
Café com IoT: Arduino e ESP8266 #cafeQuentinho 16 de novembro de 2016
Less, Coffee, Sass, bundle e outros no Visual Studio 2015 8 de maio de 2015
Comparando algorítimos de compressão na prática: LZMA, LZMA2, PPMd, BZip2, RAR, RAR5 e ZIP. 14 de março de 2014

AdSense

Social Accounts

  • Facebook
  • Email
  • Twitter
  • Linkedin
  • Youtube
  • Instagram
Rodrigo Rodrigues ©