Estructura tu sitio web con 1 línea de código


Si eres programador web y usas Sublime Text en tus proyectos, sabrás que este es el
uno de los mejores editores de texto avanzado para programar no sólo en la web, sino en casi todos los lenguajes de programación.

Gracias a su arquitectura modular, que permite agregar funcionalidades fácilmente utilizando plugins, es posible hacer maravillas en este editor usando solo unas pocas líneas de código, en este caso, utilizaremos solo una .

En este artículo le doy la bienvenida a Emmet, un plugin desarrollado para Sublime Text 2.0 que es la evolución del famoso plugin Zen Coding. Emmet te permite escribir código tanto html como css de forma muy rápida y concisa gracias a la gran cantidad de snippets con que cuenta, por ejemplo, en CSS podrás hacer cosas con siquiera la mitad del código que escribías antes, para ilustrarlo, un ejemplo.

Figura 1: Código CSS sin usar EMMET

sublime_1

Figura 2: Código CSS usando EMMET

sublime_2

En la Figura 2, luego de escribir cada línea presionas la tecla TAB ó Ctrl + E para obtener el mismo código que la figura 1.

La línea #2 le dice a emmet que se quiere un margin de 20 unidades, pero como por defecto la unidad de medida es px no es necesario escribirlo, no sucediendo así en la línea #3, donde se especifica que esas 10 unidades debe estar dada en porciento, utilizando el carácter %. Si deseas utilizar otros snippets, sólo pruébalos presionando la primera inicial de la propiedad para ver qué te sugiere el editor , ejemplo: f12 + Tab se traducirá en font-size: 12px;

Ahora bien, las mismas bondades se tienen en HTML, y como ejemplo, podrás hacer un maquetado básico de tu sitio web con una sola línea de código.

Supongamos que queremos crear la siguiente estructura:

Figura 3: Maquetación que se desea crear

sublime_3

Acá queremos crear un div con clase container, y dentro 4 elementos (header, section, aside y footer). Observa que el elemento header contendrá el banner del sitio y la barra de navegación con sus links correspondientes. Observa además que el cursor actualmente se encuentra en el atributo alt de la imagen, lo que significa que al crear la línea de código que genere esta estructura, automáticamente se pondrá el link en esa posición para darle un título a la imagen y el detalle es que no necesitamos decirle a Emmet que ponga ese atributo en la imagen, el mismo Sublime lo hace automáticamente para los atributos de esta etiquetas (tanto alt como src, pero como a src le asignamos un valor, es necesario decírselo a Emmet explícitamente).

Bueno, al fin, la famosa línea de código que tanto has esperado y que logra un resultado idéntico al anterior es la siguiente:

sublime text >

Vamos por partes, lo primero, el símbolo de mayor que (>) especifica que lo que viene después de la etiqueta actual estará contenido dentro de esta, y el símbolo de suma (+) especifica que la etiqueta actual será hermana de la etiqueta que se escriba después del +. Los paréntesis indican que todo lo que esté dentro de ellos se aplica a la etiqueta actual, lo que significa que todo lo que está entre el primer par de paréntesis, son nodos hijos del div con clase container, donde la palabra div no se especifica porque Emmet lo toma como la etiqueta por defecto en caso de no especificarse una. Entre corchetes ([]) se especifican los atributos de la etiqueta actual ya sea para asignarle una clase y/o un id a un elemento, un href a un link, etc. Las llaves indican el texto que tendrá el elemento, así, li{Texto} formará la etiqueta:

<li>Texto</li>

Incluso podremos crear tantos elementos deseemos utilizando solamente una operación matemática, por lo que si multiplicamos por 10 el li anterior se crearán 10 etiquetas idénticas a la que se desea crear ( li{Texto } *10 ).

Como puedes ver, Emmet te será de mucha ayuda en tus proyectos, y para instalar este plugin puedes utilizar el Package Control o puedes descargarlo desde su sitio oficial.

Emmet – Sitio Oficial