Zen Coding para escribir HTML/CSS a la velocidad de la luz
Zen Coding es un conjunto de plugins para programar en HTML o CSS a la velocidad de la luz (casi literalmente). Estas magníficas herramientas te permiten escribir un selector de CSS y expandirlo en su representación del DOM y mucho más.
Un ejemplo básico
Si queremos crear la estructura más básica de un documento XHTML transicional. Solo tenemos que poner lo siguiente.
html:xtY al presionar un shortcut o un click tendremos esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
</body>
</html>Y eso es solo el comienzo de la magia de Zen Coding.
Un segundo ejemplo
Si queremos crear un elemento cualquiera, digamos un DIV con un ID header, entonces escribimos lo que sería un selector CSS:
div#headerY esto se convertiría en:
<div id="header"></div>Sencillo y útil ¿verdad?
Un ejemplo complejo
Supongamos que queremos crear un documento HTML con varios DIVs, un menu de UL con varios LI con IDs diferente. Esto también podemos hacerlos en una sola línea:
html:xt>div#header+div#content>ul#menu>li.opcion-$*10Esto sería igual a:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="header"></div>
<div id="content">
<ul id="menu">
<li id="item-1"></li>
<li id="item-2"></li>
<li id="item-3"></li>
<li id="item-4"></li>
<li id="item-5"></li>
<li id="item-6"></li>
<li id="item-7"></li>
<li id="item-8"></li>
<li id="item-9"></li>
<li id="item-10"></li>
</ul>
</div>
</body>
</html>De seguro esto nos ahorrará bastante la creación de documentos HTML, les dejo el enlace para que puedan descargarlo y prueben las demás extensiones fabulosas.
Nota, esta extensión está disponible para Aptana, TextMate, NetBeans entre otros IDEs. Espero que lo disfruten y me den su opinión.
Felicidades already open Mariuzzo.com
Wao, gracias muy práctico. Por eso él es el maestro, yo el estudiante
mèsi Rubens!
Gracias Rubén!