Emmet para principiantes.

Por Emmanuel Ulloa.

Hay cosas que uno aprende que eventualmente se vuelven útiles en la vida diaria.

En el colegio cuando me tocó llevar la materia técnica (en el año de 1993) tenía que escoger entre mecanografía y contabilidad.

Dado que no teníamos un buen profesor de conta y sí teníamos una muy buena profe de meca, me decidí por la última.

Cuando en el 98 empecé a hacer mis primeras páginas web lo hacía todo en Notepad y mi jefe (un excelente desarrollador llamado Alexander) no me dejaba usar ninguno de los software que se se podían utilizar en aquel tiempo: MS FrontPage o Adobe PageMill.

Esto me permitió conocer HTML a profundidad y aprenderme las etiquetas de memoria, junto con la velocidad que adquirí en mecanografía me sentía un “web designer” (recuerden es 1998) competente.

Eventualmente me moví a Allaire Homesite que me introdujo al “autocomplete”. Homesite (junto con ColdFusion) sería luego adquirido por Macromedia (que luego sería consumida por Adobe) por lo que empecé a usar Dreamweaver.  Esto me alejó un tiempo del teclado y me acercó al “drag and drop” de los WYSIWYG.

Emmet en Sublime

Ahora el panorama es muy diferente y existen muchos IDE’s (tanto de pago como gratuitos) para desarrollar.  Sin embargo ya no es nada elegante usar “templates” y “wizards” de los IDE’s de los 2000.  Por lo cual sentí que estaba retrocediendo.

Eso hasta que conocí el plug-in Emmet.

Emmet (originalmente conocido como ZenCoding) es una filosofía-software para el desarrollo de html que aumenta la productividad y velocidad a la hora de construir páginas web.

El presente tutorial tiene como objetivo introducir de manera muy básica a los desarrolladores que aún siguen aprendiendo (como yo) a una nueva herramienta para su arsenal.

Emmet puede ser utilizado en casi cualquier editor.  Utilizaré Sublime Text para este tutorial.  Sublime Text es un editor de texto que aunque no es gratuito permite ser usado sin necesidad de pago.

Puede bajarlo en  http://www.sublimetext.com 

Package Control

Ahora bien Sublime tiene una metodología muy flexible para instalar software de terceros por lo cual necesitará instalar el plug-in “Package Control” que le permitirá instalar otros plug-ins (sí yo también me confundí).

Siga las instrucciones de esta página: https://packagecontrol.io/installation 

El procedimiento en general es copie el código de instalación vaya a Sublime y en el menú de View>Show Console pegue el texto y presione Enter.

Ahora ya tiene Package Control instalado.

Instalar Emmet

Presione la combinación de teclas Command+Shift+P.  

Deberá salirle un menú, empiece a escribir “Emmet” hasta que le salga ese paquete como primera opción.  Selecciónelo y presione Enter para instalarlo.

Reinicie Sublime (cierre y vuelva a abrir) y ahora sí manos al código.

Comandos básicos

Guarde el archivo nuevo con extensión .html.

La idea básica de Emmet es generar código a partir de abreviaturas (y dado que las abreviaturas están basadas en los selectores de CSS usted notará lo fácil que es desarrollar con este plug-in).

Escriba “!” (sin las comillas) y presione tab o Ctrl+E y verá que le genera un código HTML (igual se pudo haber usado “html:5”).

Ahora bien posiciónese dentro del <body></body> y escriba:

h1

(recuerde presionar tab al final de cada comando para extender el texto)

Si quisiéramos escribir un encabezado, seguido de un párrafo y luego un enlace:

h1+p+a

Nótese que usamos el operador “+” para indicar “un elemento a la par del siguiente”.

¿que tal si quisiéramos un elemento dentro de otro?

p>span>a

El operador “>” indica que el siguiente elemento es hijo del anterior.

Y si quiero poner contenido en los textos se pueden usar paréntesis de llave:

h1>{hola mundo}

Se pueden incluso combinar operadores para generar código más complicado:

h1>{hola mundo}^p{mi párrafo}>span>{haga click}>a>{aquí}

El operador “^” significa “subir un nivel” de esta forma p no queda dentro del h1

Ya en este momento era cuando yo me preguntaba ¿cómo viví mi vida laboral sin esto?

Pero se pone mejor.  Como los divs son el pan nuestro de cada día Emmet permite que con solo escribir algo parecido a un selector de CSS pueda generar la estructura de divs como lo necesito con su respectivo classname:

.pais>.provincia>.distrito

O por Id:

#CostaRica>#Heredia>#Belen

O una combinación de ambos:

.pais#CostaRica>.provincia#Heredia>.distrito#Belen

Se pone mas tuanis cuando tenemos que hacer elementos repetitivos:

ul.cantones>li#canton$*80

¡El operador “*” funciona como en matemática para multiplicar y “$” sirve como número!

Incluso cosas tan simples como:

lorem

le ponen a uno una sonrisa en la cara.

Este tutorial es sólo la punta del iceberg de lo que se puede hacer con Emmet ya que también se puede utilizar para facilitar el desarrollo de CSS.

Vaya a Google y busque artículos y tutoriales mejor redactados y continúe aprendiendo sobre lo que puede hacer este plug-in salvatandas.  Y si quiere entrarle directo al asunto probablemente encuentre más útil leer la hojita de “forro”: http://docs.emmet.io/cheat-sheet/ 

Espero que hayan encontrado útil este tutorial.  Yo por mi parte me voy a actualizar el CV.