Aprende a ser un maestro Zen del markup

El markup o marcado, se refiere a lenguajes de marcado o etiquetado como lo son HTML y CSS, y todos sabemos lo doloroso que es todo esto de andar abriendo y cerrando etiquetas una por una para poder crear alguna plantilla web…

Claro que existen soluciones para esto, una de ellas es el autocompletado con IDE’s como Dreamweaver mierda Bluegriffon fastidioso si no le compras plugins o Komodo edit bien pesado… la cuestión es que, los IDE’s o editores de código demasiado cargados de opciones terminan muchas veces entorpeciendo el trabajo de maneras inimaginables; tal es el caso de Dreamweaver que te llena de código basura lo que generes gráficamente y es pesado, caro y feo. Bluegriffon es mas que todo fastidioso porque es libre, gratuito, pero la mitad de las opciones están reservadas a los usuarios pagos… eso no es divertido. Y por último tenemos a Komodo-edit, que es bastante bueno, potente y lleno de opciones pero es pesado (100mb en iddle) y configurarlo es fastidioso.

La mejor arma de un desarrollador web o de un diseñador web no son los IDE’s al estilo tanque de guerra con mil armas encima, es un sencillo editor de texto, algunos plugins y la capacidad de teclear como un enfermo… a eso agregunele la magia de Zen Coding y tendrán en sus dedos la mejor herramienta para el marcado jamás creada (al menos para mi).

Pero… ¿Qué diablos es el Zen Coding?

Simple, es un plugin especial que sirve como capa de abstracción desplegable para HTML y CSS creado en Javascript y dispobible para muchos de los editores más famosos (notepad++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, etc).

Ajá, sigo sin entender ni pepina idea de lo que dices…

Entonces te lo muestro con un ejemplo simple; ¿Recuerdas lo de abstracción desplegable? Bueno, cámbialo por contracción, imagina que puedes tomar una línea de código HTML/CSS contraído en una línea y desplegarlo como una cortina o volverlo a plegar… ¿Quieres ver como? Sólo tienes que asegurarte de tener dos cosas para que funcione:

Tener Zen Coding instalado en tu editor.
Conocer los comandos y la sintaxis para usarlo.

Bien, dedos al código:

html>head+body

¿Ven esa línea de código? pues esa es la sintaxis para HTML, es simple:

Primero pones el nombre de la etiqueta (html) luego le indicas que etiquetas van a estar dentro de esa etiqueta (>) y luego el nombre de las etiquetas que van dentro de esa etiqueta (head y body). El signo de ‘+’ indica que head y body son dos etiquetas distintas y que ninguna está contenida dentro de la otra, es como decirle «juntas pero no revueltas«… entonces, veamos que nos genera esa línea de código al presionar las teclas mágicas (en mi caso CTRL+E):

Exacto, 4 líneas de código hechas en una sola, que aparecen mágicamente al presionar la combinación de teclas correcta… y pueden ser muchas más; por ejemplo:

html>head+body>ul#lista_ordenada>li.listilla*5

Misma sintaxis, pero le agregamos algo más… si conoces algo de CSS te darás cuenta que estamos agregando un ID, clases y, algo que seguro no conocías; multiplicadores… ¿¡Qué es todo esto!? ¡joder me confundes!

Calma, esto es bastante sencillo, a lo anterior le dijimos que dentro de body ingrese una etiqueta «ul», nada raro, esto lo expliqué arriba, luego, le asignamos un ID, que si sabes CSS entenderás que estos se identifican con el signo ‘#’, y dentro de esa lista desordenada (ul) agregamos cinco etiquetas con la clase (class) listilla, les explico brevemente esto. De hecho es muy simple, ‘#’ denota que es un ID, luego ‘li.listilla’ dice que hay que crear una etiqueta «li» con la clase listilla «li class=listilla» y luego, le decimos «repite eso último cinco veces«. Lo que nos da como resultado:

Doce líneas de código escritas en una sola línea y en mucho menos tiempo 😉

Y eso se puede hacer también con CSS, aunque no alargaré el artículo mostrando lo obvio (abajo les pasaré una lista entera de cheats para Zen Coding).

Tengo que destacar que esto no funciona para hacer chorrocientasmil lineas en una sola, oh no, esto tiene un límite y una manera de usarse. Si por ejemplo queremos hacer algo como esto:

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

Qué, en teoría debería darnos esto (fijarse en la linea resaltada de la ultima imagen):

Nos va a dar esto:

Lo que demuestra que tampoco se puede hacer magia con esto; recuerden que un maestro Zen del código debe ser preciso y rápido, y hacer cosas mal hechas quita velocidad y tiempo, por lo cual, la técnica correcta para escribir rápido y con Zen Coding sería esta:

html>head>body>ul#lista_ordenada>li.listilla*5

Expandes y dentro de la etiqueta head:

title+meta

Lo cual te daría el código correcto:

Aunque el Zen Coding tiene muchas mas cosas por mostrarte y quizá tener que escribir dentro de head otra línea de comandos no sea lo mejor, por lo cual usamos otro comando, «expand with abreviation» en mi caso ctrl+alt+e que nos abrirá una pequeña barra en donde podremos ir escribiendo código Zen y ver como aparece en tiempo real. Ojo, no recomiendo escribir todo con esto sino escribir dentro de las estructuras ya creadas, osea, crea primero las estructuras grandes y luego vas detallando dentro de ellas con esta opción.

Y existe una multitud de comandos súper interesantes dentro del Zen Coding, la cosa es que los investigues una vez que los instales y los aprendas a usar; con este plugin no necesitarás autocompletado ni snippets para css o html, de hecho, con esto te darás cuenta que esas opciones son una total perdida de tiempo dentro de estos dos lenguajes de programación 😉

Y para los interesados, acá les dejo la CheatSheet oficial del Zen Coding, pueden verla en formato ODF o PDF justo AQUI