en CSS

Codificando XHTML y CSS más rapido con Zen-Coding

512

Zen Coding es un plugin que está disponible para casi todos los editores del mercado y con el que podras codificar HTML/XML/CSS a gran velocidad.

Este plugin nos ofrece dos funcionalidades:

  • Expansión de abreviaciones: con unas abreviaciones determinadas (muy sencillas, ya que son muy parecidas a los selectores de CSS) podremos generar gran cantidad código HTML/XML/CSS con una simple combinación de teclas.
  • Selección de bloques (pares de tags): Pudiendo realizar una serie de acciones como seleccionar pares de tags, ir a zonas editables de los tags, envolver (wrap) un bloque con otras abreviaciones, comentar/borrar bloques y más cosas.

Para que veais lo que se puede hacer con este plugin os dejo aquí un video.

También hay disponible una demo online desde la que podeis probar su funcionamiento via web (CTRL+E para expandir, requiere
Javascript)

Ejemplos

Veamos un ejemplo sencillo. Esta abreviación :

Nos generaria lo siguiente (con una combinación de teclas que
depende del editor, pero normalmente CTRL + ,)

Otro ejemplo mas completo. La siguiente abreviación:

Nos generaria el siguiente código:

Mola , eh?

Editores

Hay una serie de plugins oficiales (desarrollados por el equipo
de Zen Coding y con todas las caracteristicas de Zen Coding)

  • Aptana/Eclipse (crossplatform)
  • TextMate (Mac).
  • Coda (Mac)
  • Espresso (Mac)
  • Komodo Edit/IDE (crossplatform)
  • Notepad++ (Windows)
  • PSPad (Windows)

Posts Relacionados

Limpieza de floats en Internet Explorer 7 Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CS...
CSSEdit y las hojas de estilo bien organizadas  Releía esta mañana CSS Crib Sheet , un artículo de Dave Shea que podéis encontrar traducido al castellano gracias a la gente de Armonía y pensa...
Hojas de estilo para impresión Hoy vamos a hablar sobre cómo, mediante hojas de estilo, podemos optimizar nuestras páginas para ser impresas. Aún a dia de hoy es habitual enco...
  • http://www.graficopolis.com Cristopher Inostroza – Posicionamiento Web

    Buenísima herramienta. Jamás había utilizado una similar que tuviera tanta versatilidad de software.
    Es un gran recurso tanto para progamadores, como diseñadores web que se manejen con una cierta cantidad de código.
    Saludos y gracias.