Probablemente el título suene capcioso pues los Maestros Zen no se dedicarían a este tipo de cosas, pero si lo hiciera, estoy seguro que no gastarían sus valiosos segundos escribiendo a mano decenas de líneas en HTML y CSS sino que aplicarían el Zen Coding.
Zen Coding no es más que un método de abreviación de código que se escribe con una sintaxis muy similar a la de CSS, por lo que si conoces este y HTML, estás casi preparado para comenzar a facilitar tu vida.
Ejemplos de código creado con Zen Coding
Antes de empezar me gustaría presentarles este Demo online de Zen Coding, en el cual podrán probar los siguientes ejemplos o por si simplemente desean "jugar".
En un caso práctico, si quisiéramos crear el marcado para un menú tendríamos claro que necesitamos un tag de navegación y luego una lista, esto supondría mínimo unas 7 líneas de código escritas a mano, pero podrían reducirse a menos de 15 caracteres con Zen Coding del siguiente modo (para el cual solo bastaría presionar Ctrl+, para expandir):
Código :
nav>ul>li.item*5>a
Código :
<nav> <ul> <li class="item"><a href=""></a></li> <li class="item"><a href=""></a></li> <li class="item"><a href=""></a></li> <li class="item"><a href=""></a></li> <li class="item"><a href=""></a></li> </ul> </nav>
Donde nav, ul, li y a son los nombres de los tags tal y como los conocemos; el signo de mayor que (>) indica que el tag anterior posee tags hijos, en este caso nav es padre de ul, así como ul es padre de li.
El uso del punto (.) sirve para crear clases, por lo que .item crea una clase llamada ítem, del mismo modo en que el signo de gato (#) sirve para crear ids por lo cual #main crearía un id llamado main.
También se puede observar el uso del asterisco (*) con el fin de multiplicar un tag, asi li*5>a crea 5 tags li que contienen a su vez cada uno un link. Asimismo es posible agregarle el signo de dólar ($) al nombre de clase o id para enumerar los ítems, usando el ejemplo anterior:
Código :
nav>ul>li.item$*5>a
Código :
<nav> <ul> <li class="item1"><a href=""></a></li> <li class="item2"><a href=""></a></li> <li class="item3"><a href=""></a></li> <li class="item4"><a href=""></a></li> <li class="item5"><a href=""></a></li> </ul> </nav>
Crearía el mismo marcado salvo porque los ítems ahora tendrán números consecutivos como item1, item2…
Algunos pensarán que es más tardado ahora dar click en el espacio vacío para rellenarlo, pero no es necesariamente así, pues puedes generar código envolviendo texto. En el caso de tener la lista de ítems del menú como la siguiente:
Inicio
Portfolio
Contacto
Portfolio
Contacto
Solo bastaría seleccionar todo y presionar Ctrl+H y escribir la siguiente abreviatura:
Código :
nav>ul>li.item$*>a
Código :
<nav> <ul> <li class="item1"><a href="">Inicio</a></li> <li class="item2"><a href="">Portfolio</a></li> <li class="item3"><a href="">Contacto</a></li> </ul> </nav>
Lo anterior envolvería a cada ítem con su respectivo li y a en una lista de menú. Se aprecia que sólo se elimina la cantidad de ítems a generar pues eso lo decidirá Zen Coding al momento de generar la lista.
Poniendo otro ejemplo, por lo general el marcado básico de una página se compone por un tag html que contiene un head y un body, el cual a su vez contiene header, section y footer, para crear el marcado con Zen Coding sólo es necesaria una línea como la siguiente:
Código :
html:5>header+section+footer
Código :
<!DOCTYPE HTML> <html lang="es_ES"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <header></header> <section></section> <footer></footer> </body> </html>
Con la cual aprendemos además que el signo de mas (+) sirve para crear tags hermanos y que Zen Coding obvia por nosotros el crear todo el marcado “obligatorio” que se compone de html, head y body; incluso creando el doctype y meta necesarios.
Descargar Zen Coding
Zen Coding está disponible para una gran cantidad de Editores, entre ellos los más comunes en las tres plataformas (Mac, Windows y Linux), entre los cuales destacan los siguientes por ser desarrollados directamente por el equipo detrás de Zen Coding puesto que cuentan con todas las características posibles:
- Aptana/Eclipse
- TextMate
- Coda
- Espresso
- Komodo Edit/IDE
- Notepad++
- PSPad
Pero también es posible obtenerlos de desarrolladores ajenos, lo cual no brinda una garantía de funcionamiento completo pero por lo general deberían de funcionar bien, como es el caso de los plugins para:
- Dreamweaver
- Sublime Text
- UltraEdit
- Top Style
- GEdit
- BBEdit/TestWrangler
- Visual Studio
- EmEditor
- Sakura Editor
- NetBeans
Todos los anteriores pueden ser descargados desde el sitio oficial de Zen Coding en Google Code.
Donde aprender más de Zen Coding
Probablemente te interese seguir leyendo la wiki oficial del proyecto, o una deliciosa "chuleta" (cheatsheet) con las abreviaciones de Zen Coding.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por cierto, disculpa que haya tardado en pasar esto a portada, quería que saliera para Enero, donde tenemos más tráfico que en diciembre. Muy buen tip.
Por Tyrbok el 04 de Enero de 2011
En general uso yasnippet (también basado en una funcionalidad de textmate). Para html me hice unas cuantas macros (a parte de las que ya lleva) con lo que más uso y voy bastante más rápido que con zencoding (tampoco tiro demasiado html, pero siempre se agradece).
De todas formas, me encanta ver artículos sobre productividad, que hay demasiada gente que se piensa que el editor sólo sirve para poner colorines al código
Por Harold el 04 de Enero de 2011
Obviamente ZenCoding no es para volver a hacer la estructura de paginas una y mil veces, yo preferiría también dependiendo el trabajo armar un framework genérico y especializarlo hacia el proyecto actual, para lo cual también te podría ayudar ZenCoding, pues puedes crear fragmentos de código relativamente largos en escasos caracteres.
Freddie descuida y gracias
Por Onizukar el 04 de Enero de 2011
Ahora estoy mirando un proyecto basado en Zen Coding, llamado Sparkup. Se ve muy interesante
No esta del todo completo pero funciona para lo básico y cuando trabajo con XML.
Por leoncitoamx el 04 de Enero de 2011
Hubo un detalle que me descorazonó
El atajo ctrl+E se ha vuelto mi nuevo amigo (antes era Ctrl+Enter)
Por cristian_cena el 23 de Mayo de 2011
Por taz el 01 de Diciembre de 2011
Por ivanovich el 26 de Enero de 2013