5 dic. 2012

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


5 comentarios:

  1. por cierto una web entera con todos estos elementos en html4 (si queréis 5 cambiad el :4t por un 5

    html:4t>head+body>ul#mimenu>table>tr*5>td*3+li.miclase$*10

    ResponderEliminar
    Respuestas
    1. Amigo, gracias por el comando, solo tengo una duda, al ejecutarlo duplica las etiquetas head y body, sabes por que sucede eso ?? Lo estoy ejecuntando con netbeans por si acaso...

      Eliminar
    2. si, es fallo mío.
      No hace falta poner el head y el body (mejor todavía)
      así que sería:
      html:4t>ul#mimenu>table>tr*5>td*3+li.miclase$*10

      Eliminar
    3. Excelenteee..... muchas gracias... hasta ahora conozco de este fantastico plugin... es una ayuda genial..!!

      Eliminar