• Zen

    Zen Coding: La Forma Mas Rápida de Escribir Código HTML (Video)

    Zen Coding es un complemento que se instala en tu editor de textos y que te permite crear contenido HTML utilizando el sistema de selectores de CSS, acelerando drasticamente el tiempo que nos toma escribir código HTML.

    Demostración (Video)

    En esta ocasión he preparado un video de corta duración (3min) en donde les doy una breve explicación y demostración del uso de Zen Coding:

    Instalación

    La pagina oficial de ZC es esta aqui encontraras informacion adicional, ejemplos y la lista de editores soportados. En la pagina de descargas encontraras los paquetes de instalación de cada uno de los editores, normalmente en el paquete se incluye un .txt con las instrucciones de instalación.

    Editores Soportados

    ZC soporta la siguiente lista de editores de forma oficial, la segunda lista tambien es compatible con ZC pero su implementación ha sido desarrollada por terceros, por tanto no se asegura que mantenga todas sus facultades originales.

    Oficiales

    • Aptana/Zend Studio/Eclipse(Multiplataforma)
    • TextMate(Mac)
    • Coda(Mac)
    • Espresso(Mac)
    • Komodo Edit/IDE(Multiplataforma)
    • Notepad++ (Windows)
    • PSPad (Windows)

    Extraoficiales

    • Dreamweaver (Windows, Mac)
    • Sublime Text (Windows)
    • Sublime Text 2 (Multiplataforma)
    • UltraEdit (Windows)
    • TopStyle (Windows)
    • GEdit (Multiplataforma)
    • BBEdit/TextWrangler (Mac)
    • Visual Studio (Windows)
    • EmEditor (Windows)
    • Sakura Editor (Windows)
    • NetBeans (Multiplataforma)

    En mi experiencia personal he logrado instalar Zen Coding de forma satisfactoria en Dreamweaver, Notepad++, TextMate, Expresso y Sublime Text 2.

    Uso

    El uso de ZC en detalle lo pueden ver en el video que puse al principio, sin embargo Zen Coding se podría resumir a que podemos convertir esto:

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

    En esto:

    <div id="page">
            <div class="logo"></div>
            <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>

    En una fracción de segundo.

    Sin mas espero realmente que este plugin te sirva tanto como a mi, si tienes alguna duda sobre como instalar o usar Zen Coding no dudes en escribirmela en los comentarios.

  • Josue Ochoa

    Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

  • Tal vez te interese
Code School
Acerca de

WebTursos es un blog de tutoriales, articulos y recursos para diseñadores y desarrolladores web. mas...

Suscribete

Suscríbete para recibir los últimos posts directamente en tu bandeja de entrada: