en CSS

Zen Coding, codificando XHTML y CSS a velocidad de crucero

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

Ejemplos

Veamos un ejemplo sencillo. Esta abreviación :

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

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)
  • editArea (browser-based)

Pero ademas hay plugins desarrollados por terceros (en los que no se garantiza que esten disponibles todas las funcionalidades de Zen Coding) como pueden ser los de Dreamweaver o los de Vim

Puedes acceder a todos los plugins disponibles para los editores desde aquí o desde aquí

Enlaces y mas

En definitiva, esta es una herramienta de las que dices “¿Dónde has estado toda mi vida?”. Se acostumbra uno muy rapido a utilizarla ya que te ahorra muuuuuucho tiempo a la hora de codificar HTML/XML/CSS. Dentro de poco os vereis haciendo “CTRL + ,” en cualquier editor de textos 😉

¿Qué os parece esta herramienta? ¿La conocíais? ¿Conoceis alguna herramienta similar?

Esperamos vuestros comentarios.

UPDATE 13/05/2015: This project has moved to http://emmet.io/

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.