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


20 comentarios

  1.   mafuns dijo

    Me parece superinteresante!

    Voy a probarlo seguro!

  2.   mafuns dijo

    Una pregunta, la forma “head>body” no deberia crear body dentro de head? Para conseguir lo que queremos no deberiamos poner “head+body”?

    Si estoy confudido lo siento!

    Gracias

    1.    nano dijo

      Sí, cualquier nombre de etiqueta antecedido por un “>” indica que esta va dentro de la etiqueta antes nombrada; en tal caso, como dices, head>body indica que body iría dentro de head, cosa que sabemos es incorrecto.

      Y sí, head mas body es como concatenar, le dices que van dentro de otra etiqueta pero que ninguna de las dos va dentro de la otra, en este caso html>head+body

  3.   Asuarto dijo


    Amén

  4.   103 dijo

    Muy, muy bueno, en lo personal prefiero usar editores de texto plano para este tipo de cosas y Zen Coding pues es lo mejor que he visto para HTML.

    Esto me gustó mucho: html:xt y para los que se quieren adelantar htlm:5

  5.   AurosZx dijo

    Hmm, pues yo nunca he usado de verdad programas tipo Dreamweaver, tengo que probar esto del Zen Coding…

    PD: Ese wallpaper que tienes… de casualidad es el que hice yo?

    1.    nano dijo

      Sí pero el de DesdeLinux

  6.   Ezael dijo

    Muy bueno, siempre me han gustado los editores de texto ligeros, el que utilizo ahora es Geany y ver que está soportado para la tetera mágica seguro que me anima a probarlo

  7.   Lupin III dijo

    Bueno, lo de programar no es lo mio, lo que me ha flipado ha sido el escritorio, que usas, gnome 3 o unity, que tema es? esta muy muy chulo, a ver si dejo el mio parecido
    Si no te es molestia responderme estaria muy agradecido 😀
    P.D: si, estoy desde windows, es lo que tiene la Universidad xD

    1.    nano dijo

      Unity, con el tema elementary y bajada la opacidad del panel.

      1.    Neomito dijo

        Yo también en el trabajo estoy con windows, déjame felicitarte tu escritorio esta muy chulo.

  8.   JaszAndre dijo

    Muy interesante el artículo… le veo una gran utilidad. Por cierto, la instalación del plugin Zen Coding para Gedit me tomó algo desprevenido y es que hay que descargar el paquete adecuado para Gedit3. En el sitio oficial de Zen coding se ofrecen los links del plugin para Gedit, pero está desactualizado pues es para Gedit 2 lo cual hace imposible usarlo en la versión actual Gedit3 según las instrucciones de instalacion.

    Los plugins de Gedit escritos para la version 2 no funcionan en la nueva version 3, ya que usa GTK3, mientras que Gedit2 usa GTK2. Para usar algún plugin en Gedit3 hay que tomar en cuenta lo siguiente:

    Nuevo Directorio: ~/.local/share/gedit/plugins
    La extension .gedit-plugin debe ser renombrada .plugin
    Abrir el archivo y editar el encabezado [Gedit Plugin], y cambiarlo por [Plugin]
    Tambien cambiar IAge=2 por IAge=3

    Aquellos que usen Gedit3 pueden descargar el plugin Zen Coding del siguiente enlace:

    https://github.com/mtrovo/zen-coding-gedit3

    Espero les sea de utilidad.
    Saludos.

    1.    zad dijo

      GRACIAS , tenía exactamente ese problema !!

    2.    Alex-m7 dijo

      Excelente le diste al problema que tenia! GRAX!

  9.   Elynx dijo

    Muy util, aunque para esto de edicion en html o cualquier lenguaje orientado a la web y demas prefiero el BlueFish o el Aptana Studio.

    Saludos!

    1.    nano dijo

      Bluefish falla en un par de cosas como poder personalizar atajos de teclado y esas cosas, y que hasta el sol de hoy no logro hacer que se autocompleten las comillas, y eso me saca muchos problemas de encima por luego olvidarme de cerrar un par.

      Aptana, sencillamente es un asco para mi, simplemente está escrito en Java y tiene dependencias que ponen en peligro mi sistema… sin mencionar que para mi (entiendase muy bien, PARA MI) Java = mierda.

  10.   v3on dijo

    ya llevo usándolo desde hace rato, recomendado!

  11.   Rafael dijo

    Hola, exelene articulo…
    no quiero sentirme un maestro Zen :-), pero la expancion que propones:

    html>head>title+meta+body>ul#lista_ordenada>li.listilla*5
    (que falla al expanderse)

    se puede hacer correctamente con parentesis para agrupar, algo asi:

    html>(head>title+meta)+(body>ul#lista_ordenada>li.listilla*5)
    esto se expande como lo esperao

    saludos

  12.   Felipe dijo

    este plugin está descontinuado y fue reemplazado por emmet (http://emmet.io/)

  13.   Ulises dijo

    ¿Alguien sabe como lo instalo en Archlinux para kate? Gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *