Desarrollo Web Front-End

2 - Herramientas y recursos

2 – Herramientas y Recursos

El desarrollo web front-end es una disciplina que involucra la creación de la parte visible
de una página web o aplicación con la que los usuarios interactúan directamente. Se
basa en una combinación de habilidades en diseño y programación, y juega un papel
crucial en la experiencia del usuario, determinando cómo se siente, se ve, y funciona una
página web. Desde los primeros días de la web, con simples páginas está�cas, el front-
end ha evolucionado hacia experiencias interac�vas y dinámicas, convir�endo al
navegador en una potente plataforma de aplicaciones.
Esta evolución ha sido acompañada por una explosión en las herramientas y tecnologías
disponibles para los desarrolladores front-end. Los editores de código, bibliotecas,
frameworks y navegadores modernos ofrecen capacidades que hubieran sido
impensables hace una década. Las herramientas de desarrollo, como los editores de
código, han avanzado enormemente, permi�endo una mayor eficiencia y colaboración.
La posibilidad de previsualizar y modificar el diseño en �empo real, depurar código y
analizar el rendimiento son ahora estándar en la mayoría de los entornos de desarrollo.
En esta sección, exploraremos las herramientas y recursos esenciales que facilitan y
enriquecen este proceso, centrándonos en los aspectos prác�cos que los
desarrolladores front-end u�lizan diariamente. Desde la elección e instalación de un
editor de código, como Visual Studio Code, hasta el uso de las herramientas de
desarrollador integradas en los navegadores, estos recursos son fundamentales para
crear si�os web modernos, responsivos y atrac�vos. La comprensión y el dominio de
estas herramientas no solo mejoran la calidad del trabajo, sino que también permiten
una mayor crea�vidad y experimentación en el siempre cambiante mundo del desarrollo
web front-end.

1
 Desarrollo Web Front-End
2 - Herramientas y recursos

2.1 –Editor de Código

Los editores de código son fundamentales para cualquier desarrollo, y Visual Studio Code se ha
establecido como una opción popular entre los desarrolladores. A con�nuación, te guiaremos a
través de lo que es un editor de código y cómo instalar Visual Studio Code.

2.2 – Instalar Visual Studio Code

Visual Studio Code es un editor de código fuente libre y gratuito que ofrece diversas
caracterís�cas como resaltado de sintaxis, autocompletado y más. La instalación es sencilla, y
aquí te mostramos cómo hacerlo:

Descargar el Instalador: Accede al si�o web oficial. htps://code.visualstudio.com/

Ejecutar el Instalador: Sigue las instrucciones en pantalla.

Lanzar y Personalizar: Abre VS Code y explora las extensiones disponibles.

2
 Desarrollo Web Front-End
2 - Herramientas y recursos

• Instalar Paquete de Idiomas Español

Para u�lizar Visual Studio Code, te recomendamos instalar el paquete de idioma español. En este
caso vamos a hacerlo desde la paleta de comandos en Visual Studio Code.

Abrir Visual Studio Code: Inicia Visual Studio Code en tu

computadora.
Abrir la Paleta de Comandos:

Puedes abrir la paleta de comandos presionando

Ctrl+Shi�+P o F1.

También podés encontrarlo en “View/Command Palette” o

“Ver/Paleta de Comandos”

Buscar el Comando para Configurar el Idioma: Escribe

"Display Language" en la paleta de comandos y selecciona
"Configure Display Language".

Instalar el Paquete de Idioma Español: En la ventana que

aparece, deberías ver una lista de idiomas disponibles. Si el
español ya está instalado, lo verás en la lista superior. Si no,
puedes buscar "Spanish" en la lista de idiomas disponibles
para instalar y hacer clic en el icono de descarga (una flecha
hacia abajo) junto a "Spanish". Esto instalará el paquete de
idioma español.

Seleccionar Español como Idioma Predeterminado: Una vez

instalado, selecciona "Español" o "Spanish" de la lista de
idiomas instalados.
Reiniciar Visual Studio Code: Es posible que debas cerrar y
volver a abrir Visual Studio Code para que los cambios surtan
efecto.

3
 Desarrollo Web Front-End
2 - Herramientas y recursos

¡Ya está! Ahora VSCode ya esta en español.

U�lizar la paleta de comandos para instalar el paquete de idioma español es un método rápido
y conveniente, y te permite hacerlo directamente desde la interfaz de Visual Studio Code sin
tener que navegar por los menús o u�lizar la terminal.

Extensiones.
También podés instalar el paquete de idiomas español
para VSCode desde la sección de Extensiones en la
barra izquierda del programa o ingresa Ctrl + Shi� + X.

• Busca “Español”
• Clickea “Install”
• Reinicia VSCode

4
 Desarrollo Web Front-End
2 - Herramientas y recursos

2.3 – Crear la estructura de archivos de un Proyecto

Crear un proyecto en un entorno de edición adecuado es el primer paso hacia el desarrollo de
una aplicación web. Visual Studio Code ofrece un entorno de edición óp�mo para este propósito.

Aquí encontrarás una guía sobre cómo estructurar un proyecto y u�lizar las herramientas de
edición disponibles en Visual Studio Code.

• Estructura de Carpetas
proyecto/

─ index.html

─ imagenes/

─ paginas/

└── contacto.html

─ css/

└── es�lo.css

─ js/

└── script.js

• Crear y Editar Archivos

Crear y organizar una estructura de archivos dentro de Visual Studio Code es un proceso simple
y esencial para cualquier proyecto de desarrollo. Desde la vista del explorador en el lado
izquierdo de la ventana de Visual Studio Code, los usuarios pueden crear fácilmente nuevas
carpetas y archivos, simplemente haciendo clic derecho y seleccionando las opciones
correspondientes

Abrir la Carpeta: Ve a Archivo > Abrir Carpeta.

Navegar hasta la Carpeta: Una ventana de diálogo se abrirá.

En este caso yo tengo una carpeta llamada “Web” en mi
escritorio.

Seleccionar la Carpeta: Haz clic en la carpeta "web" y luego

en el botón "Seleccionar carpeta".

5
Desarrollo Web Front-End
2 - Herramientas y recursos

Explorar la Carpeta: Ahora deberías ver la carpeta "web" en

el panel del explorador de Visual Studio Code, en el lado
izquierdo de la ventana. Si haces clic en la carpeta, deberías
ver el archivo "index.html" dentro de ella.

Abrir el Archivo: Haz doble clic en "index.html" para abrirlo

en el editor. Ahora puedes comenzar a trabajar en el archivo
como lo harías normalmente.

Estructura de Archivos: Se recomienda tener una carpeta

para las imágenes (/imagenes o /images), así como también
una para los archivos de es�lo (/css) y una para los
JavaScripts (/js)

Puedes usar estos botones en el Explorador de VSCode para

crear carpetas y archivos.

6
 Desarrollo Web Front-End
2 - Herramientas y recursos

2.4 – Inspector y Herramientas de Desarrollador en Google

Chrome y otros buscadores

El desarrollo front-end va más allá de la simple escritura de código; requiere la capacidad

de inspeccionar, probar y depurar directamente dentro de los navegadores. Las
herramientas de desarrollador, integradas en navegadores modernos como Google
Chrome, son vitales en este aspecto y brindan una ventana a cómo los navegadores
interpretan el código.

¿Todavía no tienes Google Chrome?

Google Chrome es uno de los navegadores más
populares y versá�les, y es esencial para acceder a las
herramientas de desarrollador como el Inspector de
Código.
Bájalo desde: htps://www.google.com/chrome/

• ¿Qué es el Inspector de Código de Chrome?

El Inspector de Código de Chrome es una función integrada en Google Chrome que
permite a los desarrolladores inspeccionar, modificar y interactuar con el código
HTML/CSS y JavaScript de una página web. Funciona como un puente entre el código
fuente y su representación visual en el navegador.

• ¿Cómo Usarlo?

El Inspector de Código se puede abrir fácilmente

u�lizando el atajo de teclado Ctrl+Shi�+I o haciendo clic
derecho en la página y seleccionando "Inspeccionar".
Una vez abierto, las diferentes pestañas y paneles
ofrecen diversas funciones para inspeccionar y
modificar el código, monitorear la red y analizar el
rendimiento.

7
 Desarrollo Web Front-End
2 - Herramientas y recursos

• ¿Para Qué Sirve?

• Inspeccionar Elementos
Te permite ver y modificar el HTML y CSS en �empo real.

• Depuración de JavaScript
Facilita la iden�ficación y corrección de errores en el código JavaScript.

• Monitoreo de Red
Permite analizar las solicitudes y respuestas HTTP, ayudando en la
op�mización del rendimiento.

• Análisis de Rendimiento
Ayuda en la evaluación y mejora de la eficiencia del si�o web.
Podes ver la página web emulando dis�ntos disposi�vos móviles, para
verificar que se observe correctamente en celulares y tablets.
Las herramientas de desarrollador como el Inspector de Código de Chrome son
elementos centrales en el arsenal de cualquier desarrollador front-end moderno.
Proporcionan una visión profunda del funcionamiento interno de un si�o web y
permiten ajustes y depuraciones en �empo real.