Zen Coding es una herramienta que nos ayudara en acelerar la escritura de nuestro código HTML y CSS utilizando una sintaxis muy intuitiva que nos generara automáticamente con presionar ctrl+, la estructura real de nuestro código.

Esta Herramienta esta disponible online, de manera que no necesitamos instalar nada para probar su funcionalidad.

Si usamos algún IDE para codificar como: Aptana, Coda, Espresso, podemos descargar plugins para integrarlo con estos programas.

Este video nos muestra de que muestra la manera rápida de codificar y obtener el resultado sea código HTML o CSS.

Expandir Abreviación

La funcion de expandir abreviación tranforma los selectores que digitamos en codigo HTML, esta es una lista de algunas de las abreviaturas mas usadas.

• E: Nombre del elemento (div, span, p, h1).
• E#id : Elemento con identificador (div#content, p#intro).
• E.class : Elemento con clase (div.menu, spam.error).
• E#id.class : Se pueden combinar atributos de un elemento ( div#top.header, span#close.blue).
• E>N : Crear un elemento padre con hijo (div>p, span>a).
• E+N : Crear dos elementos juntos: (div#header+div#content+div#footer).
• E*N : Crear elementos multiples (div*5, span*2).
• E$*N : Elementos numerados (ul>li.item$*5).

Atajos de Teclado

• Ctrl+, : Expandir Abreviación.
• Ctrl+M: Convinar pares.
• Ctrl+H: Envolver con abreviatura.
• Shift+Ctrl+M: Combinar lineas.
• Ctrl+Shift+←: Anterior elemento.
• Ctrl+Shift+→: Siguiente elemento.
• Ctrl+Shift+↑: Ir a elemento padre o hijo.

Testear Zen Coding online.

Ver Demo

Plugins con todas las funcionalidades.

• Aptana (Multiplataforma)
• Coda (Mac)
• Espresso (Mac)

Plugins con solo: “Expandir Abreviación”.

• TextMate (Mac y Windows)
• TopStyle
• Sublime Text
• GEdit
• editArea online editor

Más información : SmashingMagazine.