Buena parte de código que escribimos cuando estamos diseñando la interfaz de un sitio web mediante HTML y CSS, resulta estar en cierto modo preestablecido, es decir que líneas enteras de código son de uso común, lo que varía son detalles puntuales en los valores de algunas propiedades, pero no se requiere de mayor análisis para crear estas instrucciones, a diferencia de lo que ocurre en la programación, que si es más analítica, por lo tanto parte del proceso puede volverse tedioso y repetitivo.
Por ejemplo la mayor parte de los elementos HTML deben poseer una etiqueta de inicio y otra de cierre, las cuales están encerradas por corchetes triangulares (<>) y en el caso de la de cierre debe contener un slash (/). Para minimizar el tiempo de escritura de este código, los editores cuentan con la opción del autocompletado de código, que ayuda a agilizar el proceso, sin embargo puede ser las eficiente aun el uso de un metalenguaje, que permita reducir la cantidad de palabras y símbolos que escribe el diseñador y que el propio editor el que se encargue de escribir el código correspondiente en lenguaje HTML y CSS.
¿Qué es EMMET?
Precisamente esa es la estrategia que emplea EMMET, que es un plugin instalable en diversos editores de código fuente, anteriormente llamado Zen Coding, que ofrece al usuario un metalenguaje simplificado, en el cual se pueden escribir las instrucciones para que el propio editor, por medio de este plugin, vaya transcribiendo esas órdenes en código HTML y CSS casi que en tiempo real, de tal modo que el periodo que tarda el usuario en escribir esas sentencias que se encuentran predefinidas se reduzca drásticamente y el diseñador enfoque su análisis sobre las partes del código más variantes, como lo son los valores de los atributos y elementos por el estilo.
Editores de código compatibles con EMMET
Entre los editores de código fuente que son compatibles con este plugin, se encuentran los más destacados como lo son Sublime Text, Atom, Brackets, Notepad++, TextMate, Eclipse, NetBeans, Dremweaver, Aptana, Coda y otros. Así que no se requiere de un editor en particular para poder utilizarlo y aprovecharlo, sean cual sea la plataforma en la que nos desempeñemos, es decir si trabajamos sobre Windows, GNU/Linux o macOS.
Modo de uso de EMMET
Por supuesto que para sacar el adecuado provecho de este plugin, es necesario comprender correctamente en metalenguaje que emplea para definir como se escriben las estructuras de código que son propias de HTML y CSS, sin embargo es sumamente sencillo este lenguaje y para un desarrollador cualquiera es por demás intuitivo. Por ejemplo la escritura de las etiquetas HTML se realiza tan solo escribiendo la palabra que las titula, es decir la que va entre corchetes (<>), luego al presionar la tecla Tab, es remplazado ese meta-código por el correspondiente HTML.
Para la creación de clases en una etiqueta, se antepone un ponto al título de la clase y no se escribe la palabra “class” pues ella será colocada automáticamente al presionar Tab, de igual forma ocurre con los identificadores, en ese caso se utiliza el símbolo numeral (#) y se obvia la palabra “id”. Así como estos ejemplos son muchos los atajos que ofrece este plugin para hacer más rápida la codificación de páginas web mediante HTML y CSS, por lo que es necesario hacer un breve estudio del metalenguaje empleado y ponerlo en práctica durante el desarrollo para gradualmente ir obteniendo la destreza necesario para agilizar significativamente el diseño web.
Instalación de EMMET en un editor de código
Descargar e instalar este plugin es muy sencillo, solo deberemos dirigirnos a su sitio web oficial, allí encontraremos las diferentes versiones que podemos obtener, las cuales corresponden a cada uno de los programas de edición de código que lo soportan y las indicaciones correspondientes para su instalación en cada uno de ellos.
