Zen-coding: una nueva forma de escribir código HTML

1
14742

Zen-coding: una nueva forma de escribir código HTML.

Índice de contenidos:


1. Introducción

Zen coding es un plugin para editores e IDEs que permite generar código HTML, XML, XSL e incluso JSF (soporta cualquier lenguaje de marcas) de una forma bastante ágil y rápida, sobre todo si estás acostumbrado
a trabajar con selectores CSS. Para aquellos a los que les gusta escribir su propio HTML/XHTML y no delegar su escritura a un programa tipo Dreamweaver, kompozer,…
les puede resultar bastante interesante.

Como comentaba, se basa en algo muy parecido a la sintaxis de los selectores css para generar el código correspondiente al selector de una manera muy secilla.
Esa generación de código la realiza un motor de abreviaturas que permite expandir las expresiones en el lenguaje de marcas correspondiente.

La licencia es MIT, que nos permite realizar modificaciones y adaptaciones en el código mientras se distribuya el copyright y no es viral.


2. Instalación

Zen condig es un plugin que está disponible para una serie de editores de forma oficial, para otros tantos a raíz de aportaciones de terceros y tiene también
implementaciones no oficiales.

Las versiones de los plugins se pueden descargar desde aquí http://code.google.com/p/zen-coding/downloads/list

En este tutorial vamos a ver cómo hacer uso del mismo en PSPad para windows y en Eclipse multiplataforma.


2.1. PSPad.

Lo primero es descargarnos el plugin de la dirección antes comentada, se trata de un zip que contiene un fichero javascript: zencoding.js. Tenemos que copiar dicho fichero
javascript en el directorio \PSPad editor\Script\JScript.

Al arrancar de nuevo el PSPad tendremos disponible la funcionalidad de zen coding, pulsando sobre ctrl+, (control + más + coma) o accediendo a la siguiente opción del menú
superior:

zen-coding pspad


2.2. Eclipse.

La instalación es como la de cualquier plugin en Eclipse (Help > Install new software ) asignando el siguiente site: http://zen-coding.ru/eclipse/updates/. Yo lo he probado con la vesión Helios.

Las abreviaturas se expanden con Tab aunque se pueden personalizar los shortcuts.

zen-coding eclipse


3. Escribiendo código ágil-mente

Zen coding, básicamente, lo que te permite es escribir este código:

div#layout>div.banner+div#menu>ul#navigation>li*5>a

y tener la posibilidad de expandirlo, generando de forma automática el siguiente código:

<div id="layout">
        <div class="banner">&lt/div>
        <div id="menu">
        	<ul id="navigation">
                	<li><a href=""></a></li>
                	<li><a href=""></a></li>
                	<li><a href=""></a></li>
                	<li><a href=""></a></li>
                	<li><a href=""></a></li>
                </ul>
        </div>
</div>

A parte de los plugins para editores, dispone de una librería javascript que te permite añadir el motor de abreviaturas a un componente de tipo textarea de html, lo que
nos va a permitir realizar las siguientes pruebas:

El código se generará si te posicionas al final de cada línea
y pulsas cmd + E en Mac o ctrl + E en Windows. Pulsa aquí para ver las instrucciones.

Soporta los atributos id y class y atributos propios, multiplicidad, numerado automático de tags en la generación múltiple,… para más info, el proyecto está alojado en
http://code.google.com/p/zen-coding/ y han elaborado una
cheat sheet con las principales features.


4. Referencias


5. Conclusiones

Es un buen método de escribir menos código y generar lo mismo que solemos hacer manualmente, pero con menos esfuerzo; ya os digo, para aquellos que prefieren
escribir su propio HTML de una manera ágil.

Espero que también haya resultado de vuestro interés.

Un saludo.

Jose

jmsanchez@autentia.com

1 COMENTARIO

  1. Es interesante, está relacionado con la productividad basada en la mecanización de tareas diarias… creo que este tipo de técnicas permiten desarrollar aplicaciones de mayor calidad en menor tiempo… produciendo además un efecto de aprendizaje constante por parte del desarrollador. Muy interesante,

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad