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.

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>
<li class="enlace2"></li>
<li class="enlace3"></li>
<li class="enlace4"></li>
<li class="enlace5"></li>

Separando elementos con ()

Con estos selectores creamos grupos de etiquetas
ul>(li>a)*3 +TECLA_EXPANSION genera:

<ul>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<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))

Mas informacion

Si os ha gustado este tutorial, seguro que os interesa el
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.