SummArg | Cursos y recursos para webmasters

Zen Coding: Una forma rápida de escribir HTML y CSS

Zen Coding es un plugin disponible para una amplia gama de editores de código que ayuda a acelerar la escritura de código (y a minimizar errores de tipeo, dicho sea de paso). Su escructura se parece mucho a los selectores CSS, y con pocos caracteres podemos obtener varias líneas de marcado HTML. Por ejemplo, si escribimos:

div#page>div.logo+ul#navigation>li*5>a

Al presionar CTRL + E para expandir el código, obtendemos:

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

Asimismo, si queremos iniciar un documento HTML 5, podemos hacerlo de la siguiente forma:

html:5>header+section+footer

Al expandir obtendremos:

<!DOCTYPE HTML> 
<html lang="es_ES"> 
<head> 
   <meta charset="UTF-8"> 
   <title></title> 
</head> 
<body> 
   <header></header> 
   <section></section> 
   <footer></footer> 
</body> 
</html>

También lo podemos utilizar para ahorrar tiempo en la escritura de nuestro CSS, para lo cual les recomendamos descargarse un machete conteniendo todas las abreviaturas de uso frecuente desde este link.

Zen Coding está disponible para:

  • Aptana/Eclipse
  • TextMate
  • Coda
  • Espresso
  • Komodo Edit/IDE
  • Notepad++
  • PSPad
  • Dreamweaver
  • Sublime Text
  • UltraEdit
  • Top Style
  • GEdit
  • BBEdit/TestWrangler
  • Visual Studio
  • EmEditor
  • Sakura Editor
  • NetBeans

Y se puede descargar gratuitamente desde code.google.com/p/zen-coding

Dejar un comentario

  1. Aparte de la sintaxis de Zen Coding (Ahora denominado Emmet) merece mucho la pena echar un vistazo a las acciones para editar texto. Seleccionar o deseleccionar el contenido de una etiqueta, su etiqueta padre, etc… Otra forma de ponerle el turbo a la edición de código. Recomendadísimo.

Dejar un comentario