¿Cuantas veces habeis escrito y reescrito las mismas etiquetas Html en vuestro código? ¿Cuánto tiempo habeis perdido con ello? ¿Cuántas veces os habéis equivocado al cerrar una etiqueta o al asignarle un atributo erroneo?

No mintáis, son afirmativas todas …

Pues espero que no lo volvais a hacer nunca más. Emmet es un plugin para resolvernos la vida a programadores, desarrolladores y diseñadores generando código fuente a partir de abreviaturas.

Instación del plugin en Sublime

Nuestro primer paso será instalar el plugin Emmet en Sublime ( que es en el que mejor funciona)

En la página de descargas podeis ver para qué IDEs podeis usarlo y los pasos para instarlarlo  (Eclipse, NetBeans, Notepad++ … )   http://emmet.io/download/

En Sublime, los pasos para instalarlo son muy sencillos

1.  Preferences / Package Control : Vamos a usar el control de paquetes para instalar el plugin dentro del Menu Preferencias
2.  Installa Package: Le indicamos que queremos instalar un nuevo paquete seleccionando la opcion «Install Package»
3.  Emmet CSS Snippets: Buscamos el paquete a instalar

Aprendiendo a usar Emmet

Ya estamos listos para aplicar Emmet a nuestro código

Emmet nos va a permitir generar grandes cantidades de código a partir de un par de abreviaturas. Os cuento  las más útiles

• operador «>»  : nos va a permitir generar una estructura de etiquetas con hijos
• operador «+» : nos va a permitir generar una estructura de etiquetas al mismo nivel
• operador «*» : nos va a permitir indicar cuantas veces queremos incluir un elemento
• operador «()» : igual que en matemáticas para agrupar el resto de operadores
• aplicando atributos  «[]» : nos permite añadir atributos a las etiquetas
• añadiendo texto «{}» : nos permite añadir texto a las etiquetas

Para aplicar los ejemplos que os pongo a continuación, solo hace falta pulsar la tecla Tabulador sobre la abreviatura y Emmet hará el resto. Se puede configurar la tecla o teclas para transformar la abreviatura en código Html.

Es necesario que vuestro documento sea un documento .html

div>table>tr>td

Este sería el resultado de aplicar la abreviatura anterior

<div>
   <table>
      <tr>
         <td></td>
      </tr>
   </table>
</div>

div+p+span

<div></div>
<p></p>
<span></span>

a[href=»www.cantabriatic.com»]{Enlace}

<a href="www.cantabriatic.com">Enlace</a>

ul>li*10

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

Rizando el rizo

div>(header>ul.claseLista>li*2>a)+footer>p[title=»Hello world»]>{Pincha}+a[href=»http://www.cantabriatic.com»]{aqui}+{ para continuar}

<div>
   <header>
      <ul class="claseLista">
         <li><a href=""></a></li>
         <li><a href=""></a></li>
      </ul>
   </header>
   <footer>
      <p title="Hello world">Pincha</p>
      <a href="http://www.cantabriatic.com">aqui</a>
      para continuar
   </footer>
</div>

Podeis consultar el resto de operadores, atributos y abreviaturas  en el cheat-sheet de la página de Emmet

http://docs.emmet.io/cheat-sheet/

Post By Rocio Muñoz (37 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect

Calidad en Desarrollo, Desarrollo Web, Diseño Web, HTML5