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.
Plugins con todas las funcionalidades.
Plugins con solo: “Expandir Abreviación”.
- TextMate (Mac y Windows)
- TopStyle
- Sublime Text
- GEdit
- editArea online editor
Más información : SmashingMagazine.
[…] es una utilidad para escribir código más rápido. La descubrí en SmashingMagazine[en] y en Craftyman.net[es] y quise usarla en seguida con Dreamveaver […]
Comments are closed.