Zen Coding: HTML ninja en sengundos.

A veces te llega alguien que te dice que el hace webs con dreamweaver, "qués mu bueno", te dicen, y por dentro ya estás intentando clasificarlo en una subespecie de patán.

"Dreamweaver es muy rápido para hacer tablas, o para hacer listas, le das a este botón y ya está"

Entonces sacas tu pendrive con tu Notepad++ portable, por que si, por que eres así de Geek y le dices ¿una tabla? ¿con 5 filas y 3 columnas?¿si? y escribes

table>tr*5>td*3

pulsas ctrl+alt+enter

y se transforma en esto

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


Con el orgullo herido el patán te puede mentir diciendo que el tarda lo mismo, entonces dices si? vamos a hacer una lista que tenga un id "mimenu" y 10 elementos li cada uno con una clase que sea miclase1, miclase2 hasta 10 ¿vale? pues el reloj empieza a correr AHORA!

ul#mimenu>li.miclase$*10

Incluso si tecleas con los índices no debes tardar más de 10 segundos en escribir esto para obtener esto

<ul id="mimenu">
<li class="miclase1"></li>
<li class="miclase2"></li>
<li class="miclase3"></li>
<li class="miclase4"></li>
<li class="miclase5"></li>
<li class="miclase6"></li>
<li class="miclase7"></li>
<li class="miclase8"></li>
<li class="miclase9"></li>
<li class="miclase10"></li>
</ul>

desglose de la expresión Zen para hacer esto

• ul = etiqueta ul
• # = id
• mimenu = valor del id
• > contiende
• li = etiqueta li
• . = con la clase
• miclase = valor de la clase
• $ = variable que se incrementa, sumado al punto anterior: miclase1, miclase2...
• *10 = repite este elemento diez veces

Se pueden hacer muchas cosas más con Zen coding, como que te ponga el doctype y demás, aquí tenéis la ayuda oficial y es muuuy sencillo.

Para instalarlo en el notepad++:

Plugins->Plugin Manager->show plugin manager->marcáis Zen Coding->install

Os dice que necesita otro, le decís que si a todo y reiniciáis . Ya estáis preparados para hacerle todo un ZETOB a cualquier patán como el de batman y robin