Zen Coding: Acelera la escritura de HTML/CSS

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.

Plugins con solo: “Expandir Abreviación”.

Más información : SmashingMagazine.

jfdghjhthit45

También te puede interesar

One Comment

  1. Zen Coding para Dreamweaver CS3 | saltar intro
    nov 30, 2009 @ 15:46:13

    [...] 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 [...]