Ahorra tiempo codificando, utilia Zen Codding

Muchos pensareis que esto del Zen Coding es un poco extraño, pero la verdad es que la idea no es mala, incluso me atrevería a decir que una vez que te acostumbras ya no buscarás otra cosa.

Entrando en materia, el Zen Coding es una herramienta para optimizar el tiempo de desarrollo tanto a nivel de HTML como de CSS expandiendo las etiquetas mediante unas abreviaturas muy concretas e inventado por Sergey Chikuyonok.

Para que os podáis hacer a la idea y de lo potente que puede llegar a ser, si tenemos un editor con el plugin instalado, simplemente con poner:

ul#menu>li

el plugin nos lo convierte en código HTML de la siguiente manera:

Esto es un ejemplo sencillo de lo que se puede realizar, pero imaginaros por un momento el tiempo que os costaría teclear todas las líneas de código, ahora mismo sería poca la diferencia pero aprovechando toda la potencia se puede ahorrar mucho tiempo.

Otro ejemplo un poco más complejo, es el de crear una página HTML desde 0. Nosotros tendríamos que escribir todos los elementos del header y del body, sin embargo con la siguiente línea:

html:5>header+section+footer

Se obtiene el siguiente resultado:

Como podeis observar se empiezan a incrementar las llíneas de código generado mientras que nosotros seguimos escribiendo una simple linea. Ahora os estareis preguntando "eso está muy bien, pero... ¿si necesito crear más de un elemento igual?" tampoco existiría mayor problema, es más se podrían generar hasta números correlativos sin necesidad de escribirlos, por ejemplo, un caso más real, necesitamos realizar un listado de enlaces el cual correspondería a nuestro mapa del sitio y sabemos que vamos a tener que crear 8 enlaces escribiendo la siguiente línea:

ul.enlaces>li>a[href="#"]*8

Se obtiene el código generado que estábamos buscando:

Como se puede observar, se han generado automáticamente los 8 elementos que necesitábamos con sus respectivos enlaces sin tener que escribir más que una única línea de código. Esto también es aplicable al tema de tablas, pero eso ya os lo dejo a vosotros para que vayais probando.

¿Como lo descargo?

Zen Coding está disponible para la mayoría de editores, entre los que se encuentran los siguientes (para Windows, Mac y Linux) por ser desarrollados directamente por el equipo de Zen Coding:

• Aptana / Eclipse
• TextMate
• Coda
• Espresso
• Komodo Edit
• Notepad++
• PSPad
• editarea
• etc ...

Existe también la posibilidad de poderlos obtener mediante desarrolladores externos a los cuales les ha gustado y han desarrollado plugins específicos para los distintos programas como:

• Sublime Text
• UltraEdit
• Dreamweaver
• NetBeans
• Visual Studio
• etc ...

¿Dónde puedo aprender más?

En dónde mayor información vas a poder encontrar es en la página oficial de Zen Coding.

También podemos bajarnos la documentación en PDF de cuales son todas las abreviaturas que se pueden utilizar en este programa.

Y por último y para terminar, una vez leida la teoría podemos pasar a la práctica mediante este editor de texto para que podáis hacer vuestros propios ejemplos.