"El diseño es el embajador silencioso de tu marca"
- Paul Brand

¿Qué es Emmet?

Si lo tuyo es el diseño web y entras en blogs y foros de este tema, seguramente habrás escuchado hablar de Emmet o de Zen-coding, los dos se refieren a lo mismo (solo que el proyecto comenzó llamandose Zen-coding y ahora se llama Emmet).

¿Para que vale?

Es ni más ni menos que un plugin de diseño que se adapta a los editores de texto mas populares y nos permite escribir nuestro código HTML de forma abreviada, es cierto que hoy en dia existen los snippets que nos permiten generar pequeños fragmentos de código que para nosotros es reusable, pero Emmet va mas allá, no tienes que generarte tus fragmentos de codigo o snippets y luego recordar como los fuiste llamando y que hacia cada uno (ojo que los snippets tambien son un puntazo y en algunos casos conviene usarlos), con Emmet tienes ya todo predefinido, aprende a escribir el codigo de forma abreviada y Emmet ya genera el resto, olvidate de andar creando plantillas de codigo y luego exportandolas si cambias de equipo o de editor, con Emmet instalas el plugin y a correr.

¿Como funciona?

La forma de escribir para que el plugin haga su trabajo sigue las sintaxis de HTML y CSS de manera que no es que tengas que escribir instrucciones extrañas para que genere el código que ya conoces, para que veas lo sencillo que es generar estructuras complejas con una linea de código mira este ejemplo:

nav.menuNav>ul>li.menuNav-item*8>a{Apartado $}

En apariencia es una linea de texto en el que distinguimos elementos html, en concreto vemos la nueva etiqueta de html5 de navegacion nav los elementos de una lista no ordenada ul y li y tambien los enlaces a.
Sin embargo estan escritos todos pegados y sin formato de etiqueta como se esperaria en HTML, es decir que como programadores identificamos cosas pero no esperamos que haga nada, sin embargo esto es una linea que el plugin de emmet transformaria automaticamente en esto:

<nav class="menuNav">
    <ul>
        <li class="menuNav-item"><a href="">Apartado 1</a></li>
        <li class="menuNav-item"><a href="">Apartado 2</a></li>
        <li class="menuNav-item"><a href="">Apartado 3</a></li>
        <li class="menuNav-item"><a href="">Apartado 4</a></li>
        <li class="menuNav-item"><a href="">Apartado 5</a></li>
        <li class="menuNav-item"><a href="">Apartado 6</a></li>
        <li class="menuNav-item"><a href="">Apartado 7</a></li>
        <li class="menuNav-item"><a href="">Apartado 8</a></li>
    </ul>
</nav>

Como bien sabemos ya emmet, nos permite escribir de forma abreviada el html, y eso fue lo que ha pasado, detengamonos a examinar de nuevo la linea en cuestion, era asi…

nav.menuNav>ul>li.menuNav-item*8>a{Apartado $}

nav.menuNav genera una etiqueta nav y le asigna la clase menuNav
> es un separador
ul genera una etiqueta ul que es una lista no ordenada
> es un separador
li.menuNav-item*8 genera 8 elementos li y les asigna la clase menuNav-item
> es un separador
a{Apartado $} genera dentro de cada uno de esos elementos un enlace con el texto Apartado y el número del elemento.

 

emmet1

 

¿Donde lo encuentro?

Ahora ya vemos que tiene más sentido, el codigo que genera lo entendemos a la perfección, y su utilidad es más que evidente ¿Cúanto tiempo tardas en picar esa linea de texto? y ¿Cúanto tiempo tardarías en picar todo el código html que este genera?…

Pues esta es la ventaja de este fantástico plugin, ¿donde lo podemos encontrar y para que editores de texto?

La respuesta es muy sencilla daros un paseo por la Página oficial y comenzar a probarlo en vuestro editor de texto favorito, como se aprecia en la imagen que tienes justo encima, se integra con los que la mayoría usamos (Dreamweaver, Sublime, Notepad++, Brackets…) y por si fuera poco es gratuito, asi que no tienes excusa.

Recuerda simpre que tu tiempo es oro, y por extensión todo este tipo de herramientas orientadas a ahorrártelo tambien lo son.

Si estás buscando información acerca de como usarlo este tutorial se te queda muy corto, pero en su página te dan todo lo que necesitas puedes acceder a la documentación oficial pinchando aqui

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)