En cualquier tipo de especialidad a la que nos dediquemos, algo que tratamos de no desperdiciar es el tiempo invertido. En el caso de alguien que se dedique al desarrollo o diseño web sabrá lo tedioso e incómodo que es andar abriendo y cerrando etiquetas escribiendo a mano decenas de líneas en HTML y CSS en sus plantillas web.
Actualmente contamos con varias aplicaciones y plugins que en cierto modo nos ayudan a hacer toda esta labor más sencilla. Los hay de tipo WYSIWYG (What You See Is What You Get) que visualmente y sin necesidad de saber mucho de código HTML y CSS nos permiten crear gráficamente plantillas web, pero a la vez usualmente te cargan de código innecesario lo que podría afectar al rendimiento de la web. La otra manera es hacer uso de nuestras habilidades al escribir HTML y CSS, y crear las plantillas web por nuestra propia cuenta usando un editor de texto sencillo, buenos plugins, dedos rápidos, y también Zen Coding para ahorrarte bastante tiempo de escritura.
Zen Coding no es más que un método de abreviación de código que se escribe con una sintáxis similar a la de CSS, por lo que si conoces este lenguaje y HTML, vas a adorar este plugin ya que, citando un ejemplo, te permitirá crear hasta 19 líneas de código en sólo 1 línea escrita en código Zen.
Zen Coding es un plugin creado en Javascript y actualmente está disponible para muchos de los editores más populares como Notepad++, UltraEdit, GEdit, NetBeans, Bluefish, Komodo, Dreamweaver, Emacs, entre otros más, y en las tres plataformas (Mac, Windows y Linux).
Aquí otro ejemplo en el cual con la siguiente línea:
html:xt>header+ul#mi_lista>li.item*7
y presionando las teclas CTRL + E (en el editor GEdit) generamos todo el siguiente código:
Expliquemos un poco la línea de código usada para generar el bloque HTML de la imagen:
- Primero ponemos la etiqueta html con el parámetro xt, esto va a generar todo el bloque principal de la plantilla compuesto por las etiquetas head, meta, title y body.
- Usamos el signo de "mayor que" (>) el cual indicará que el tag anterior posee tags hijos, con esto le indicas cuáles etiquetas van a estar dentro de la anterior.
- El signo de (+) sirve para crear tags hermanos, en nuestro ejemplo le estamos indicando que header y ul son dos etiquetas distintas y que ninguna de ellas está contenida dentro de la otra.
- Si sabes algo de CSS habrás notado el símbolo (#), ese signo sirve para crear ID's por lo cual #mi_lista crearía un ID llamado mi_lista dentro de ul.
- A su vez, podemos notar que el tag ul es padre del tag li. Allí hemos usado un punto (.) que sirve para crear clases, por lo que .item crea una clase llamada item dentro del tag li
- Finalmente, también se puede observar el uso del asterisco (*) con el fin de multiplicar un tag, así li*7 crea 7 tags li
Como mencioné anteriormente, en el editor GEdit que usé para el ejemplo, la combinación de teclas CTRL + E llamada "Expand abbreviation" permite generar el código. Ahora, imagina que quieras añadir nuevo código Zen, entonces para ello existe una opción muy interesante llamada "Expand with abbreviation" (CTRL + ALT + E en el editor GEdit) que abrirá una pequeña barra en la cual podremos insertar el nuevo código Zen y ver los resultados al instante, sólo no olvides primero ubicar el cursor en el lugar donde añadirás el nuevo código antes de usar dicha opción.
Descargar Zen Coding
Tal y como mencioné anteriormente el plugin Zen Coding se encuentra disponible para una gran cantidad de editores de texto en las tres plataformas (Mac, Windows y Linux). Ingresa al siguiente link para ir al sitio oficial:
Elige tu editor de textos y descarga el plugin respectivo.
Plugin Zen Coding para GEdit3
Si eres usuario de Linux y usas el editor GEdit, no olvides verificar si usas GEdit2 o GEdit3. En el sitio oficial de Zen Coding se ofrecen los links del plugin para GEdit, pero está desactualizado pues se encuentra el plugin sólo para GEdit2 lo cual hace imposible usarlo en la versión actual Gedit3 según las instrucciones de instalación. Por lo tanto, aquellos que usen GEdit3 pueden descargar el plugin Zen Coding del siguiente enlace:
Aprender más de Zen Coding
Les dejo el link en donde podrán descargar el CheatSheet oficial en formato PDF y ODT, una referencia rápida de la sintáxis usada en Zen Coding:
0 comentarios