icono_twiter
Jose Manuel Sánchez Suárez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-11-26

Tutorial visitado 6.645 veces Descargar en PDF
Zen-coding: una nueva forma de escribir código HTML.

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"></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

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2010-12-01-14:02:00

Autor: jcarmonaloeches

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,