Muchos perfiles de diseño gráfico están ampliando sus conocimientos orientándose al diseño UI y al desarrollo web. Lo que ocurre es que las herramientas que se utilizan en gráfico, como por ejemplo Adobe Illustrator, no tienen nada que ver con lo que se necesita para hacer realidad tus diseños y crear una página web.

Para construir una interfaz web se necesita escribir texto siguiendo unas normas de sintaxis, es decir, la estructura y los estilos de tu diseño se dibujan con lenguajes como HTML y CSS.

Una de las principales herramientas que se utiliza para escribir este código se llama Visual Studio Code, que es un editor que se usa para muchos trabajos, no solo la maquetación con HTML y CSS, sino todo tipo de programación como JavaScript o Python.

Es normal que el paso de una interfaz llena de paneles e iconos, como las de Adobe, al editor de texto de Visual pueda ser dura. Pero si en algo se diferencia este editor del resto es en la cantidad de ayudas que tiene desde el principio, además de que puedes personalizarlo y ponerlo a tu gusto con las extensiones.

Vamos a ver algunas extensiones que le darán color a tu editor y a tu código para que no le tengas miedo, y te ayuden con la programación.

Temas de color en Visual Studio Code

Los temas de color nos permiten colorear las distintas partes de la sintaxis del lenguaje que utilizamos. Es un aspecto importante porque este código de color nos permite localizar errores.

Aunque la elección de un tema es algo personal, te aconsejo que utilices uno que tenga bastantes colores para cada parte del HTML y CSS. Que puedas diferenciar bien los atributos y las propiedades. Por otro lado, todos los temas de color suelen tener su versión clara y oscura, aunque suele ser habitual la oscura para facilitar la lectura. Algunos temas de color recomendados son:

• GitHub Theme
• Drácula
• Atom One Dark Theme
• Electron Color Theme
• Night Owl
• SynthWave ’84

Iconos

Gestionar los distintos archivos que forman parte del proyecto es muy importante en diseño web. Visual Studio Code incluye un gestor de carpetas y archivos al que puedes poner iconos para reconocer cada tipo.

Algunos temas de iconos son los siguientes:

• vscode-icons
• Catppuccin Icons
• Sweet vscode Icons
• Material Icon

Peacock

Si además de darle color a tu código y poner iconos a los distintos archivos quieres elegir un color para toda la interfaz de Visual Studio Code, puedes hacerlo fácil con Peacock.

Indent-rainbow

Cuando escribimos HTML tenemos que envolver unas partes con otras, como capas de una cebolla. Para ver de forma fácil qué envuelve a qué se utiliza el «indentado», es decir, el tabulador. La extensión Indent-rainbow nos colorea con distintos colores cada tabulación para que podamos reconocer el principio y el final de cada grupo de etiquetas.

HMTL End Tag Labels

Como veíamos en el apartado anterior, los grupos de etiquetas HTML que envuelven a otras pueden tener varias capas de profundidad. Eso hace que el cierre de cada grupo pueda quedar muy abajo en el documento y perderse de vista. Para señalizarlos ayuda añadir un comentario y así reconocer a quién pertenece cada cierre. Bien, pues la extensión HTML End Tag Labels creará un comentario de manera automática usando el atributo clase que hayas usado en la apertura.

Image Preview

Cuando en nuestra web tenemos que usar iconos e imágenes se vinculan como un recurso externo, pero en el editor solo vemos la ruta. La extensión Image Preview nos ayuda a reconocer qué imagen tenemos vinculada poniendo una mini-imagen en el margen. Lo hace en el HTML y en el CSS con mapa de bits y vectores. Puede servirnos para saber si es la imagen que queríamos y si está bien vinculada.

Margin Colours

Parecido a lo que hace la extensión anterior tenemos Margin Colours. Con esta extensión lo que vamos a poder ver en el margen es un cuadrito que representa el color que hemos utilizado en una propiedad CSS. No es una utilidad de vital importancia, pero puede ayudar a localizar algunas líneas de estilo o simplemente hacerte el trabajo más ameno.