Tutorial de ZenCoding

Tutorial de ZenCoding (Emmet)
Zen coding (Emmet) es una herramienta para editores web que nos permite generar
código de forma ágil y rápida, acelerando el maquetado de nuestros diseños en HTML y
CSS.
Esta ejecución de código es generada por un motor de abreviaturas que permite que las
expresiones sean expandidas.
Si os gusta escribir vuestro código desde cero, ZenCoding es sin duda la herramienta
perfecta para crear vuestros proyectos de forma productiva.
Descarga
ZenCoding está disponible para un gran numero de editores web como NotePad++,
Sublime Text,
Coda, PSPad …
Las diferentes versiones de esta herramienta podeis descargarlas desde el siguiente

enlace:
ZenCoding Downloads
Instalación en Notepad++
Para instalar ZenCoding en NotePad++ accedemos a Plugins > Plugin_Manager >
Show_Plugin_Manager y seleccionamos Zend Coding – Python.
Como alternativa podemos descargarlo desde el siguiente enlace:
Zen Coding for Notepad++

y copiar el contenido del archivo .zip en la carpeta plugins, que se encuentra en el
directorio de instalación de Notepad++
Instalación en Sublime Text

Para instalar ZenCoding en Sublime Text pulsamos CTRL+SHIFT+P o accedemos a
Preferences > Package Control > Install Package, escribimos Emmet para buscarlo y lo
instalamos posteriormente.
Si no teneis acceso es porque no teneis instalado el Package Controll, la instalación es

muy sencilla, puedes ver como se hace desde el siguiente enlace:
Package Controll INSTALLATION
La página está en inglés, básicamente es acceder a View>Show Console, pegar el

código Python que nos ofrecen en la página según la versión de nuestro Sublime Text y
pulsar Enter.
También nos ofrece la posibilidad de instalarlo manualmente.
Manual de ZenCoding para HTML

Como funciona
Veamos como funciona la sintaxis de abreviaturas de ZenCoding, comenzamos por
crear un archivo HTML5, abrimos nuestro editor, escribimos
html:5
y pulsamos el comando de expansión,

(El comando de expansión puede ser Ctrl+E o Ctrl+Alt+Enter o tecla de tabulación, la
tecla de tabulación suele ser la tecla de expansión por defecto, si teneis problemas para
expandir el codigo, revisar los atajos de teclado, en NotePad++, por ejemplo, los
podemos encontrar en Configuración > Gestor de atajos de teclado.
Automaticamente nos aparece:
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
Ahora podemos empezar a generar etiquetas, podemos generar cualquier etiqueta por su
nombre, asignarle un identificador con “#” o una clase con “.”, la clase o el identificador
se pueden definir en el código o dejarlo en blanco, veamos algunos ejemplos:
div+ TECLA_EXPANSION genera
<div></div>
div.+ TECLA_EXPANSION genera
<div class=""></div>
div.didesweb+ TECLA_EXPANSION genera
<div class="didesweb"></div>
De la misma forma podemos crear etiquetas con un identificador

footer#piedepagina +TECLA_EXPANSION genera
<footer id="piedepagina"></footer>
Y con un identificador y una clase
h1#titulo.encabezados +TECLA_EXPANSION genera
<h1 id="titulo" class="encabezados"></h1>
Asignar varias clases

div.unaclase.otraclase.otramas +TECLA_EXPANSION genera
<div class="unaclase otraclase otramas"></div>
Selector >
Con este selector podemos generar etiquetas anidadas de la siguiente forma:
nav>ul>li>a +TECLA_EXPANSION genera:
<nav>
<ul>
<li>
<a href=""></a>
</li>
</ul>
</nav>
Selector +
Con este selector generamos etiquetas separadas, a diferencia del selector
anterior genera una etiqueta que ira junto a otra, no dentro de ella.
section+article+aside +TECLA_EXPANSION genera
<section>
</section>
<article>
</article>
<aside>
</aside>
Selector *
Con el selector de multiplicación generamos etiquetas multiples
a*5 +TECLA_EXPANSION genera
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
Selector $
Este selector permite añadir numeradores automáticos de manera que podemos
concatenar textos con numeradores, junto al selector * podemos crear listas de codigo
numeradas de esta forma:
li.enlace$*5 +TECLA_EXPANSION genera:
<li class="enlace1"></li>
Separando elementos con ()

Con estos selectores creamos grupos de etiquetas
ul>(li>a)*3 +TECLA_EXPANSION genera:
<ul>
<li><a href=""></a></li>
</ul>
Escribiendo texto con {}

Con estos selectores insertamos texto dentro de las etiquetas generadas
p{Lorem Ipsum} +TECLA_EXPANSION genera:
<p>
Lorem Ipsum
</p>
El selector :
A algunas etiquetas como la etiqueta input podemos asignarle atributos específicos con
el selector :
input:submit +TECLA_EXPANSION genera
<input type="submit" value="">
La etiqueta a también puede usar este parámetro para link y mail

a:link+a:mail +TECLA_EXPANSION genera
<a href="http://"></a><a href="mailto:"></a>
Otras sintaxis de abreviaturas

link:css
<link rel="stylesheet" href="style.css">
link:rss
<link rel="alternate" type="application/rss+xml" title="RSS"
href="rss.xml>
script:src
<script src=""></script>
El selector + en etiquetas especiales

Anteriormente vimos que el selector + podíamos usarlo para insertar una etiqueta a
continuación de otra, pero este selector también podemos usarlo en algunos elementos
como ul, table o dl
(ul+)+(table+)+(dl+) +TECLA_EXPANSION genera
<ul>
<li></li>
</ul>
<table>
<tr>
<td></td>
</tr>
</table>
<dl>
<dt></dt>
<dd></dd>
</dl>
Combinando los selectores

Si habeis leido todo el tutorial, os habreis dado cuenta de la potencia de ZenCoding y la
productividad que ofrece, ahora vamos a crear un documento más extenso:
html:5>(header#cabecera>h1#titulo)+(section>article>(h2.encabezados+p.parrafos
))
Esta simple linea genera todo este codigo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header id="cabecera">
<h1 id="titulo"></h1>
</header>
<section>
<article>
<h2 class="encabezados"></h2>
<p class="parrafos"></p>
</article>
</section>
</body>
</html>
A continuación os dejo unas líneas más elaboradas que podeis probar en vuestro editor
de código:
html:5>(nav>ul>(li>a.links{Enlace$})*5)+(header#cabecera>h1#titulo{Lorem
Ipsum})+(section#seccion$*5>(article>(h2.encabezados+p.parrafos{Lorem Ipsum
sit
amet})))+(aside>(div>h3{sidebar}+ul>(li>a.links_footer{Enlace$})*8))+(footer>(ul
>(li>a.links_footer{Enlace$})*3))
m + TECLA_EXPANSION genera:
margin: ;
p + TECLA_EXPANSION genera:
padding: ;
bg + TECLA_EXPANSION genera:
background: #000;
d + TECLA_EXPANSION genera:
display: block;
bd + TECLA_EXPANSION genera:
border: ;
Como habreis podido comprobar, la forma en que abreviamos la sintaxis es muy

intuitiva, en algunos casos hay que tener cuidado por el parecido:
fs + TECLA_EXPANSION genera:
font-style: italic;
fz + TECLA_EXPANSION genera:
font-size: ;
Selector +
Al igual que en HTML usamos este selector para añadir etiquetas, en CSS el selector +
nos sirve para añadir propiedades, veamos un ejemplo:
m+p+bg+cl+f + TECLA_EXPANSION genera:
margin: ;
padding: ;
background: #000;
clear: both;
font: ;
El selector + nos sirve además como complemento en algunas propiedades:

bg+ + TECLA_EXPANSION genera:
background: #fff url() 0 0 no-repeat;
bd+ + TECLA_EXPANSION genera:

border: 1px solid #000;
f+ + TECLA_EXPANSION genera:
font: 1em Arial,sans-serif;
Propiedades más específicas

Hemos visto como se expande la propiedad margin, pero las propiedades pueden ser
expandidas de modo más específico:
mt+mb+ml+mr + TECLA_EXPANSION genera:
margin-top: ;
margin-bottom: ;
margin-left: ;
margin-right: ;
Propiedades y valores
No solo podemos expandir código CSS con sus dos puntos, su punto y coma listo para
escribir su valor, además podemos pasarle el valor directamente desde la abreviatura.
Sintaxis:
propiedad:valor + TECLA_EXPANSION
Ejemplos
td:n + TECLA_EXPANSION genera:
text-decoration: none;lis:n + TECLA_EXPANSION genera:
list-style: none;ov:s + TECLA_EXPANSION genera:
overflow: scroll;
Es importante destacar que el valor siempre lo expandimos despues del selector “:”
para no confundir la sintaxis
mt + TECLA_EXPANSION genera:
margin-top: ;
mt:a + TECLA_EXPANSION genera:

margin-top: auto;
m:a + TECLA_EXPANSION genera:

margin: auto;
Aplicando los estilos
Imaginemos que queremos dar los siguientes estilos a un elemento:
float:left;
font:1em Arial,sans-serif;
border:1px solid #000;
background-color:#FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;
Esto lo hubieramos generado con ZenCoding con el siguiente código:
fl:l+(f+)+(bd+)+bgc+bxz:bb
Como mencionamos anteriormente, las abreviaturas que incluyen el signo “+” son
abreviaturas especiales que expanden todos los valores posibles que se pueden incluir en
esa propiedad, son expandidas de forma ordenada por lo que solo debemos de
preocuparnos por modificar sus valores.
La mayor parte del tiempo trabajamos con ZenCoding (Emmet) en CSS escribiendo
propiedades y valores sencillos, ya hemos visto lo que podemos expandir con el signo
“+”, algunas abreviaturas que posee este plugin son más completas que un simple
“propiedad:valor”, a continuación os dejo aquí algunas abreviaturas que os serán de
gran utilidad:
@i
@import url();
@f
@media print {
}
m:a!
margin: auto !important;
op:ms
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
fw:b
font-weight: bold;
pl:25
padding-left: 25px;
ovx:h
overflow-x: hidden;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',
sizingMethod='crop');
bxsh
-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
Tutorial de ZenCoding para CSS

Podeis descargar la referencia completa en PDF y ODT en el siguiente enlace
Cheat sheets for Zen Coding syntax and abbreviations.

Tutorial de ZenCoding

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial de ZenCoding

Cargado por

Copyright:

Formatos disponibles

Tutorial de ZenCoding (Emmet)

Las diferentes versiones de esta herramienta podeis descargarlas desde el siguiente

Como alternativa podemos descargarlo desde el siguiente enlace:

Zen Coding for Notepad++

Instalación en Sublime Text

Si no teneis acceso es porque no teneis instalado el Package Controll, la instalación es

Package Controll INSTALLATION

La página está en inglés, básicamente es acceder a View>Show Console, pegar el

Manual de ZenCoding para HTML

y pulsamos el comando de expansión,

Automaticamente nos aparece:

div+ TECLA_EXPANSION genera

div.+ TECLA_EXPANSION genera

div.didesweb+ TECLA_EXPANSION genera

De la misma forma podemos crear etiquetas con un identificador

<h1 id="titulo" class="encabezados"></h1>

Asignar varias clases

<div class="unaclase otraclase otramas"></div>

Separando elementos con ()

Escribiendo texto con {}

<input type="submit" value="">

La etiqueta a también puede usar este parámetro para link y mail

<a href="http://"></a><a href="mailto:"></a>

Otras sintaxis de abreviaturas

<link rel="stylesheet" href="style.css">

El selector + en etiquetas especiales

Combinando los selectores

Esta simple linea genera todo este codigo:

Como habreis podido comprobar, la forma en que abreviamos la sintaxis es muy

m+p+bg+cl+f + TECLA_EXPANSION genera:

El selector + nos sirve además como complemento en algunas propiedades:

bd+ + TECLA_EXPANSION genera:

Propiedades más específicas

mt+mb+ml+mr + TECLA_EXPANSION genera:

mt:a + TECLA_EXPANSION genera:

m:a + TECLA_EXPANSION genera:

Tutorial de ZenCoding para CSS

También podría gustarte