VS2012–Zend Coding en nuestro Visual Studio 2012 :)

image

Esta es una muy buena noticia, algo que otros editores ya incluían nativamente o como plugin,  tales como Notepad++  o Sublime entre otros,  que es el Zend Coding, que es una sintaxis que nos permite generar  de mucho más rápido código  HTML/XML/XSL. Puedes revisar más documentación sobre Zend Coding acá http://code.google.com/p/zen-coding/.

Y ahora es el turno de Visual Studio 2012, en el cual podemos instalarle esta característica como parte del Web Essentials 2012 desde acá http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

Una vez instalado podemos probarlo, voy a crear una nueva página HTML, y vamos a generar una lista no ordenada:

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>

<head>

    <meta charset=”utf-8″ />

    <title></title>

</head>

<body>

    <!– Escribe esto y apreta Tab al final –>

    ul[data-bind=”foreach:personas”]>li*4>span{Persona $$}

 

    <!– Obtienes esto –>

    <ul data-bind=”foreach:personas”>

        <li><span>Persona 01</span></li>

        <li><span>Persona 02</span></li>

        <li><span>Persona 03</span></li>

        <li><span>Persona 04</span></li>

    </ul>

</body>

</html>

Podemos concatenar algunas combinaciones interesantes que  si las dominamos, pueden acelerar nuestra escritura de código, por ejemplo si necesito un botón con Id, clase css, values y con un atributo customizado, podemos escribir (recuerda presionar la tecla tab al final):

button[data-icon=”gear”]#IdBoton.clase{Titulo Boton}

y obtendremos lo siguiente:

<button id=”IdBoton” data-icon=”gear” class=”clase”>Titulo Boton</button>

Sigamos con los ejemplos, si necesitamos crear un elemento input con ciertas propiedades, dentro de un div que se llama datos, dentro de un footer, escribimos:

  footer>div#datos>input[placeholder=”IngreseNombre” type=”text” required=true].csstexto

Obtenemos:

<footer>

   <div id=”datos”>

      <input type=”text” value=”” placeholder=”IngreseNombre”
           
 required=”true” class=”csstexto”
/>

    </div>

 </footer>

Muy bueno!, pero hay muchos más ejemplos que podemos revisar, mira está página para que veas posibilidades interesantes.

http://www.johnpapa.net/zen-coding-in-visual-studio-2012/

Puedes buscar más información en :

Saludos

@chalalo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *