Comunidad de diseño web y desarrollo en internet

Zen Coding: Escribiendo HTML y CSS como un Maestro Zen

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

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate