en CSS, HTML, Workflow

Zen Coding, codificando XHTML y CSS a velocidad de crucero

Actualización 13/05/2015: Este project ahora se llama  http://emmet.io/

Zen Coding es un plugin que está disponible para casi todos los editores del mercado y con el que podras codificar HTML/XML/CSS a gran velocidad.

Este plugin nos ofrece dos funcionalidades:

  • Expansión de abreviaciones: con unas abreviaciones determinadas (muy sencillas, ya que son muy parecidas a los selectores de CSS) podremos generar gran cantidad código HTML/XML/CSS con una simple combinación de teclas.
  • Selección de bloques (pares de tags): Pudiendo realizar una serie de acciones como seleccionar pares de tags, ir a zonas editables de los tags, envolver (wrap) un bloque con otras abreviaciones, comentar/borrar bloques y más cosas.

Para que veais lo que se puede hacer con este plugin os dejo aquí un video.

También hay disponible una demo online desde la que podeis probar su funcionamiento via web

Ejemplos

Veamos un ejemplo sencillo. Esta abreviación :

 div#page>div.logo+ul#navigation>li*5>a

Nos generaria lo siguiente (con una combinación de teclas que depende del editor, pero normalmenteCTRL + , )

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</div>

Otro ejemplo mas completo. La siguiente abreviación:

 html:xs>(div#header.header>img.logo[src="http://www.google.es" title="logo" alt="logo"])+(div#content.content>h1+p*5)+(div#footer.footer>ul>li*5>a[href="./"])

Nos generaria el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="header" class="header"><img src="http://www.google.es" alt="logo" class="logo" title="logo"></div>
    <div id="content" class="content">
        <h1></h1>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div id="footer" class="footer">
        <ul>
            <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>
</body>
</html>

Mola , eh?

Editores

Hay una serie de plugins oficiales (desarrollados por el equipo
de Zen Coding y con todas las caracteristicas de Zen Coding)

  • Aptana/Eclipse (crossplatform)
  • TextMate (Mac).
  • Coda (Mac)
  • Espresso (Mac)
  • Komodo Edit/IDE (crossplatform)
  • Notepad++ (Windows)
  • PSPad (Windows)
  • editArea (browser-based)

Pero ademas hay plugins desarrollados por terceros (en los que no se garantiza que esten disponibles todas las funcionalidades de Zen Coding) como pueden ser los de Dreamweaver o los de Vim

Puedes acceder a todos los plugins disponibles para los editores desde aquí o desde aquí

Enlaces y mas

En definitiva, esta es una herramienta de las que dices “¿Dónde has estado toda mi vida?”. Se acostumbra uno muy rapido a utilizarla ya que te ahorra muuuuuucho tiempo a la hora de codificar HTML/XML/CSS. Dentro de poco os vereis haciendo «CTRL + ,» en cualquier editor de textos 😉

¿Qué os parece esta herramienta? ¿La conocíais? ¿Conoceis alguna herramienta similar?

Esperamos vuestros comentarios.

Post Anterior
Post Siguiente

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)