Desarrolla mas rapido con Zen Conding

Todos sabemos la importancia de agilizar nuestro trabajo y mas cuando uno se encuentra de manera independiente y tienes que estar desarrollando proyectos de una manera ágil y rápida, Un buen metodo para esto es usar los beneficios que nos otorgan algunos snippets y bundles que son una buena manera de acelerar nuestra escritura y nuestro código al empezar un proyecto web, ¿Pero que les parece si llevamos esto un poco mas lejos y transformamos una compleja estructura html en algo tan simple con un selector de CSS? gracias al proyecto llamado Zen Coding agilizaremos nuestra manera de escribir nuestras etiquetas de una manera eficaz y rápida sin tener que invertir tanto tiempo en escritura en etiquetas que muchas veces también son las que siempre usamos en nuestros proyectos de paginas web.

¿Que es Zen Coding?

Zen Coding es un plugin para tu editor de texto web (Notepad++,Dreamweaver, Textmate, NetBeans, Coda y muchos mas) este plugin nos permite generar HTML/XML/XSL de una forma eficaz y rápida.

¿Como me ayudara?

Zend Coding nos ayudara a escribir HTML haciendo que no sea necesario abrir y cerrar tags tecleando todos los carácteres esto mediante el uso de abreviaciones cortas, aquí les mostrare unos ejemplos en cuanto al uso de este fabuloso plugin.

Imagina que la estructura de tu nuevo proyecto se ve así:

0. <div id="header">
1.     <ul id="menu">
2.     <li><a href=""></a></li>
3.     <li><a href=""></a></li>
4.     <li><a href=""></a></li>
5.     <li><a href=""></a></li>
6.   </ul>
7. </div>

Con ZenCoding podemos utilizar estas abreviaciones y tener nuestro codigo rapido y eficaz:

0. div#header>ul#menu>li*4>a

O imagina que quieres crear algo asi:

0. <div id="header"></div>
1. <div id="content"></div>
2. <div id="footer"></div>

Con tan solo crear esta linea y apretar Expand Abbreviation en tu menu commands lo optienes agilmente, (tambien puedes elegir los atajos que por default vienen como (Ctrl+,) para el Expand abbreviation o en tu editor adaptarlos a tus necesidades en las preferencias de keyword shortcuts)

0. div#header+div#content+div#footer

¿Como Funciona?

Zen Coding funciona expandiendo abreviaciónes y transformando los selectores que digitamos en codigo Html, aqui te muestros a continuacion las abreviaturas mas usadas.

• > : Crea un elemento padre con hijo (div#header>ul#menu>li).
• + : Crea dos elementos juntos: (div#header+div#content+div#footer).
• * : Crea elementos multiples (ul#menu>li*4>a)..
• $* : Crea elementos numerados (ul>li.menu$*5).

Espero que esta herramienta les sea de gran ayuda como lo ha sido para mi.

Para mayor información el proyecto se encuentra alojado en Google Code y dispone de una gran cantidad de plugins para una buena gama de editores web, elige el que uses y empieza a optimizar la manera en que haces tu codigo aqui