Post original en JASoft.org: http://www.jasoft.org/Blog/post/Zen-Coding-escribiendo-HTML-a-la-velocidad-de-la-luz.aspx

Escribir HTML para dar forma a un documento Web es un absoluto aburrimiento. Al menos a mi me lo parece. Por ello trato de reducir el tiempo que paso haciéndolo al máximo posible. Gracias a entornos avanzados de edición como WebStorm, Expression Web, Sublime o el propio Visual Studio, la velocidad puede aumentar mucho ya que estos entornos se encargan automáticamente de cerrar etiquetas, indentar el código, etc… Sin embargo yo quiero más. Quiero reducir a la mínima expresión el código que debo escribir. Y es ahí precisamente en donde entra en juego Zen-Coding, una gran idea que cada vez se utiliza más.

Zen-Coding es un tipo de sintaxis especial para generar HTML y otros lenguajes estructurados (XML y similares) que es muy similar a los selectores que usamos para CSS, pero que nos permite generar de manera rápida y concisa código HTML.

Gracias a Zen-Coding podrás crear complejas estructuras HTML con una sola línea de código y sin tener que preocuparte de generar correctamente el código, indentarlo, ordenarlo, etc…

Por ejemplo, una expresión como esta en Zen-Coding:

   1: #content>#header.Main>ul>li*3>a.menu{Menu $$}

Nos genera este código HTML equivalente:

   1: <div id="content">

   2:     <div id="header" class="Main">

   3:         <ul>

   4:             <li><a href="" class="menu">Menu 01</a></li>

   5:             <li><a href="" class="menu">Menu 02</a></li>

   6:             <li><a href="" class="menu">Menu 03</a></li>

   7:         </ul>

   8:     </div>

   9: </div>

La sintaxis de Zen-Coding, aunque pueda parecer compleja a simple vista, es realmente sencilla y la podemos aprender en unos pocos minutos, ganando mucha productividad en el futuro.

La sintaxis de Zen-Coding está soportada por multitud de editores de HTML, y si no existen plugins para la mayor parte de los editores del mercado. En su página puedes encontrarlos.

Este post va a ser fundamentalmente práctico y enseñaré mediante el siguiente vídeo (del estilo de los que hay en los cursos de campusMVP, los cuales combinan teoría y prácticas cortas en vídeo como esta), cómo utilizar Zen-Coding con Visual Studio. Lo aprendido en el vídeo es válido para cualquier otro editor que soporte Zen-Coding, pero he usado Visual Studio por ser el más utilizado por los visitantes de este blog.

Antes de nada te va a venir bien esta tabla resumen que he elaborado con los diferentes caracteres utilizados en Zen-Coding y su significado:

Con esta tabla delante y el vídeo que te enseño a continuación podrás estar generando código HTML a toda velocidad dentro de 15 minutos 🙂

¡Espero que te sea útil!

Nota: Por cierto, existe una evolución de Zen-Coding, llamada a sustituirlo, llamada Emmet que se usa de la misma forma pero añade algunas características más. De momento no tiene soporte explícito en Visual Studio, pero la extensión de Zen-Coding de Web Essentials que muestro en el vídeo en realidad soporta ya la mayoría de las mejoras de Emmet para HTML, como el poder subir niveles con ^, la generación de “Lorem Ipsum” o diversos tipos de HTML. Hay algunas cosas que seguramente le irán añadiendo en el futuro, pero prácticamente todo lo importante está ahí ya. No se soporta de momento la sintaxis para generar CSS, aunque en VS esto es poco importante dado el soporte que ofrece de serie. Otros editores, como Sublime, NOtepad++ o WebStorm, por citar unos pocos, tienen soporte para Emmet.

Nota 2: Me dicen los amigos de JetBrains que con Resharper tienes Zen-Coding incluido de serie también, algo que desconocía, pero dada lo extendido que está este producto y lo potente que es me parece interesante resaltarlo aquí.