Emmet es un asistente de contenidos por el cual podemos utilizar métodos abreviados para escribir nuestro código con menos trabajo y con apenas unas combinaciones de teclas.
Les Recomiendo instalen el plugin Emmet antes Zen Coding en Sublime text 2 u otros editores compatibles.
¿Por que? , es simple porque te va a simplificar las cosas a la hora de codificar ademas que ahorraras muchísimo tiempo.
Un pequeño ejemplo de Zen Coding, ahora Emmet:
div#page>div.logo+ul#navigation>li*5>a
Resultado:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
VÍDEO TUTORIAL DE INSTALACIÓN
CÓDIGO PARA LA INSTALACIÓN:
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')
Que se puede hacer con emmet(zen Coding):Generar mas rápidamente todo el esqueleto html, solo escribiendo html:5 y pulsando la tecla tab.
Y tendremos algo como esto
Si quisiéramos crear una lista con 20 items por ejemplo, simplemente haríamos algo como esto.
El * multiplica los elementos en el numero que establecemos.
Y pulsando la tecla tab quedaría así:
También podemos asignarles id's y nombres de clases
Al igual que en css, el símbolo sharp o numeral (#) indica el id del objeto, y el punto la clase.
Entrar a http://emmet.io/ para conocer mas a fondo este plugin.