Zen Coding es un complemento que se instala en tu editor de textos y que te permite crear contenido HTML utilizando el sistema de selectores de CSS, acelerando drasticamente el tiempo que nos toma escribir código HTML.
Demostración (Video)
En esta ocasión he preparado un video de corta duración (3min) en donde les doy una breve explicación y demostración del uso de Zen Coding:
Instalación
La pagina oficial de ZC es esta aqui encontraras informacion adicional, ejemplos y la lista de editores soportados. En la pagina de descargas encontraras los paquetes de instalación de cada uno de los editores, normalmente en el paquete se incluye un .txt con las instrucciones de instalación.
Editores Soportados
ZC soporta la siguiente lista de editores de forma oficial, la segunda lista tambien es compatible con ZC pero su implementación ha sido desarrollada por terceros, por tanto no se asegura que mantenga todas sus facultades originales.
Oficiales
- Aptana/Zend Studio/Eclipse(Multiplataforma)
- TextMate(Mac)
- Coda(Mac)
- Espresso(Mac)
- Komodo Edit/IDE(Multiplataforma)
- Notepad++ (Windows)
- PSPad (Windows)
Extraoficiales
- Dreamweaver (Windows, Mac)
- Sublime Text (Windows)
- Sublime Text 2 (Multiplataforma)
- UltraEdit (Windows)
- TopStyle (Windows)
- GEdit (Multiplataforma)
- BBEdit/TextWrangler (Mac)
- Visual Studio (Windows)
- EmEditor (Windows)
- Sakura Editor (Windows)
- NetBeans (Multiplataforma)
En mi experiencia personal he logrado instalar Zen Coding de forma satisfactoria en Dreamweaver, Notepad++, TextMate, Expresso y Sublime Text 2.
Uso
El uso de ZC en detalle lo pueden ver en el video que puse al principio, sin embargo Zen Coding se podrÃa resumir a que podemos convertir esto:
div#page>div.logo+ul#navigation>li*5>a
En esto:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
En una fracción de segundo.
Sin mas espero realmente que este plugin te sirva tanto como a mi, si tienes alguna duda sobre como instalar o usar Zen Coding no dudes en escribirmela en los comentarios.
Muy bueno, gracias Josue. Con este video te acabas de ganar otro lector.
Gracias por tu comentario Henry, pudiste instalara Zen Coding con exito?
Si Josue, pude instalarlo. Tu tutorial más otro que và fueron la combinación perfecta para terminar de entenderlo.
Ahora me estoy involucrando con «css frameworks» 960 Grid system. Que opinas sobre ellos?
Son muy utiles, en combinación con ZC puedes crear cosas bastante rápidas, lo unico que tienes que tener en cuenta es acordarte los nombres de las clases(.container_12, .grid_12, .omega, etc). Yo personalmente uso http://960.gs/ y me va muy bien otra cosa que te recomiendo checar(en el futuro hare un videotutorial de como usarlo/instalarlo) son los pre-procesadores de CSS como http://sass-lang.com/ o http://lesscss.org/.
Buen aporte, se agradece, saludos!
Excelente recurso, generalmente gastamos mucho tiempo escribiendo HTML, esto junto con jQuery y lesscss son cosas simples pero vanguardistas que nos ayudarán a terminar proyectos web en menos tiempo.
Gracias por compartir ^_^
div.page>div.wrapper>div.content+div.footer jejejej que rápido 😀
Una consulta…A mi me encanta hacer todo con el concepto inicial, por ejemplo todo lo que sé lo aprendà solo y mirando el concepto inicial me he introducido en lo que son framework y script de otros y son muy buenos y la verdad el trabajo es reducido en gran manera…bien mi pregunta es ¿hasta donde es justo con el precio que ofrecemos o haciendo un trabajo a conciencia limpia si utilizamos un framework o script que otro creo haciendonos el trabajo más rápido pero a conciencia sabemos que fue solo copiar y pegar?
Los frameworks o plugins que nos ayudan a acelerar nuestro trabajo no son de ninguna manera algo que copias y pegas, es muy distinto por ejm copiar y pegar el codigo de otra persona sin dar credito o algo por el estilo, hoy en dia estamos viendo un boom de herramientas y framework bastante utiles que desde mi punto de vista no hacen otra cosa mas que ayudarnos a crear paginas mucho mas rapido, por consiguiente entregarlas mas rapido y ganar mas.
No se debe reducir de ninguna manera el precio que ofrecemos, inclusive se puede ofrecer la rapidez de entrega como un beneficio adicional.
BuenÃsimo recurso!, como siempre, muy útil. Muchas gracias
como instalo en zen coding en sublime text para mac? me estoy volviendo loco todo por no saber ingles..
muchas gracias
Mira, yo lo instale asi en ST2 para Mac:
Primero Instale esto (se trata de un plugin que te facilita la instalacion de otros plugins), luego con ese programa instale ZC.
Excelente aporte, justo lo que necesitaba!!
Tenia tiempo sin visitar tu blog igual que la primer ves que lo encontre me encanto jeje saludos Josue muchas gracias por tus aportes
Gracias por pasar y comentar Manuel, suscribete al Feed, asi cada vez que se publique algo nuevo se te notificara 🙂
Apenas di con esta pagina y la informacion muy clara….. me sirvio mucho…
Buenas, muy bueno tu vÃdeo pero cual seria el atajo de teclado de sublime text2.
Tab.
Muy buen post… ¿Dónde se descarga el plugin para Aptana? Y ¿cómo se instala el plugin para Dreamweaver?
Para Aptana:
https://github.com/sergeche/eclipse-zencoding
Para DW:
http://code.google.com/p/zen-coding/downloads/detail?name=Zen%20Coding%20v.0.7.5.mxp
Para instalarlo en DW necesitas el Adobe Extensions Manager.
Gracias mil gracias
Buen vÃdeo gracias por el aporte pero la opción de ZencCoding no me sale :s. Instale el package de Twitter Bootstrap y funciona bien pero nada que aparece ZenCoding
ah es en Sublime Text 2.
Tienes http://wbond.net/sublime_packages/package_control?
Si eso fue lo primero que hice.
Ve a Preferencias > Package Control > List Packages, si alli no te sale Zen Coding es porque no lo instalaste o no instalaste bien.
Desde que conocà el Zen Coding soy un enamorado de el aumento de productividad que le da a los diseñadores. Ahora el proyecto Zen Coding se llama Emmet y merece mucho la pena ver sus nuevas funciones, sobre todo los atajos de teclado para la edición de código.
Toda la razón, Emmet es más poderoso que Zen Coding. Me ayuda mucho al crear reglas CSS, intenten escribir una abreviatura para CSS y despues coloquen el signo «+», expande la regla CSS incluyendo el «shorthand» de la misma. «bg+»
Gracias por compartir el zen coding es una ayuda muy grande a la hora de mejorar nuestra productividad!!!
Para mi ha sido una excelente herramienta y junto a Sublime Text 2 (Que ya esta en beta la versión 3) han acelerado mi desempeño y reducido los tiempo de manera increÃble en mis proyectos tanto como en mi trabajo.
Para actualizar, el proyecto de Zen Coding ha cambiado de nombre a Emmet con una increÃble documentación y muchÃsimas más funciones que simplemente se convierten en las herramientas de desarrollo definitivas.
http://docs.emmet.io/
Soporta DW CS6?
Si: https://github.com/emmetio/dreamweaver#readme
Hola Josué, una consulta por favor: Tengo una página web promocionando un producto y para ello he creado páginas de aterrizajes con un botón con mi enlace de afiliado que lleva a la página del producto. Ahora tengo una cantidad de usuarios en mi página web que también quieren usar mis páginas de aterrizajes con sus propios enlaces. La idea es poner un casillero o varios casilleros donde ellos puedan editar mis paginas de aterrizaje a su gusto, por decir algunas imágenes, texto y lo principal que editen su enlace de afiliado. Por favor espero respuesta y coordinar el costo de sus servicios. Algún correo donde escribirle o número de celular; puede escribirme a: huarixfree@gmail.com . Gracias.
Hola buenas, acabo de instalarme el Notepad++ para introducirme en las pà ginas webs, me he instalado el plugin Zen coding – Python, me ha pedido que pusiera tambien el plugin Python Script parece que todo esta instalado correctamente, pero no funciona, he cambiado el Acceso directo a Ctrl + E, pero no funciona de ninguna manera.
He guardado primero el archivo como html, y despues he pusto html:5 y no funciona.
Me puedes ayudar?
Muchas gracias