🛠️ 1.2 · Configuración del entorno de desarrollo

🎯 Objetivo del tema

🗺️ Mapa del tema

Vamos paso a paso. Primero entiendes qué es un entorno de desarrollo y por qué importa. Después instalas las cinco herramientas básicas. Al final, creas tu primer proyecto y lo sirves en tu navegador. Si te pierdes, vuelve al inicio del mapa y avanza de nuevo.

1.2.1 ¿Qué es un entorno de desarrollo?

Un entorno de desarrollo es el conjunto de herramientas que usas todos los días para escribir, probar y depurar tu código. No es solo el editor: es todo el ecosistema. Un buen entorno te hace 3 veces más rápido. Un mal entorno te frustra a diario.

Las cinco herramientas indispensables

• Editor de código (VS Code) — donde escribes tu código.
• Navegador con DevTools (Chrome o Firefox) — donde ves y depuras tu código ejecutándose.
• Node.js y npm — para correr JavaScript fuera del navegador y gestionar librerías.
• Git — para guardar versiones de tu código y trabajar en equipo.
• Terminal (PowerShell en Windows, Terminal en macOS/Linux) — para ejecutar comandos.

1.2.2 Editor de código: Visual Studio Code

VS Code (Visual Studio Code) es el editor más usado del mundo según la encuesta Stack Overflow 2024. Es gratuito, de Microsoft, multiplataforma y muy extensible. Hay alternativas (Sublime Text, Atom, WebStorm), pero VS Code es el estándar de la industria para desarrollo web.

Instalación

Ve a https://code.visualstudio.com/ y descarga el instalador de tu sistema operativo (Windows, macOS o Linux). Instálalo con las opciones por defecto. En Windows, asegúrate de marcar 'Add to PATH'.

Extensiones recomendadas para empezar

Atajos que vas a usar todos los días

• Ctrl + S — Guardar.
• Ctrl + P — Abrir archivo por nombre (sin buscar en carpetas).
• Ctrl + Shift + P — Paleta de comandos: cualquier acción escribiéndola.
• Alt + flecha arriba/abajo — Mover línea arriba o abajo.
• Ctrl + D — Seleccionar la siguiente ocurrencia de la palabra.
• Ctrl + / — Comentar/descomentar línea.
• Alt + Shift + F — Formatear todo el documento.

1.2.3 Navegador con DevTools: tu microscopio

El navegador no es solo para ver páginas. Es tu herramienta principal de depuración. Con las DevTools (herramientas de desarrollador) puedes ver el HTML, modificar el CSS en vivo, ejecutar JavaScript, ver las peticiones de red y diagnosticar problemas de rendimiento.

Cómo abrir DevTools

• F12 — Abre DevTools directamente.
• Ctrl + Shift + I — Igual que F12.
• Clic derecho > 'Inspeccionar' — Abre DevTools enfocado en el elemento que clickeaste.
• Ctrl + Shift + J — Abre solo la consola (ideal para escribir JavaScript rápido).

Las cinco pestañas que vas a usar

Tu primer experimento con la consola

> console.log("Hola, soy la consola")
Hola, soy la consola

> 2 + 2
4

> alert("Esto lo verás en una ventana emergente")

Abre la Consola y prueba estas líneas

1.2.4 Node.js y npm: JavaScript fuera del navegador

Node.js es el motor de JavaScript de Chrome (V8) pero empaquetado para correr fuera del navegador. Permite usar JavaScript en el servidor, crear herramientas de línea de comandos, automatizar tareas y mucho más. npm (Node Package Manager) es el gestor de paquetes: te permite descargar librerías de código abierto con un solo comando.

Instalación

Ve a https://nodejs.org/ y descarga la versión LTS (Long Term Support). Es la más estable y la recomendada para producción. En Windows, el instalador añade automáticamente Node y npm al PATH. Para verificar, abre la terminal y escribe:

node --version
v20.11.1

npm --version
10.2.4

Verifica la instalación

¿Qué es npm?

npm es como una tienda de aplicaciones para programadores. Cualquiera puede publicar un paquete (paquete = librería de código) y cualquiera puede instalarlo. Hoy hay más de 2 millones de paquetes. Los frameworks más usados del ecosistema JavaScript (React, Express, Next.js, Vite) se instalan con npm.

Tu primer comando npm

# Crear carpeta de proyecto
mkdir mi-primer-proyecto
cd mi-primer-proyecto

# Inicializar proyecto con npm
npm init -y

# Instalar una librería popular (live-server)
npm install -g live-server

# Ver lo que se creó
ls -la

Inicializa un proyecto e instala live-server globalmente

1.2.5 Git y GitHub: tu máquina del tiempo

Git es un sistema de control de versiones: registra cada cambio que haces en tu código. Puedes volver a una versión anterior, comparar versiones, trabajar en equipo sin pisarte los cambios. GitHub es una plataforma en la nube que hospeda tus repositorios Git y te permite colaborar con otros programadores. Es tu carta de presentación profesional.

Los tres estados de un archivo en Git

• Modified (modificado) — cambiaste el archivo pero no lo guardaste en Git.
• Staged (preparado) — marcaste el archivo para el próximo guardado.
• Committed (confirmado) — el cambio quedó guardado en el historial de Git.

Los seis comandos que vas a usar el 90% del tiempo

# Ver el estado de tu proyecto
git status

# Añadir archivos al área de preparación
git add archivo.txt
git add .                # añade todos los archivos modificados

# Confirmar los cambios con un mensaje descriptivo
git commit -m "Agrego el menú de navegación"

# Ver el historial de cambios
git log --oneline

# Subir cambios al repositorio remoto (GitHub)
git push

# Traer cambios del repositorio remoto
git pull

Comandos Git esenciales

Configuración inicial (solo la primera vez)

git config --global user.name "Tu Nombre Completo"
git config --global user.email "tu.correo@ejemplo.com"
git config --global init.defaultBranch main

Configura tu identidad en Git

1.2.6 Tu primer proyecto: Hola, mundo

Es hora de juntar todo. Vamos a crear un proyecto real, escribir nuestra primera página HTML, servirla con un servidor local y verla en el navegador. Si esto te funciona, el resto del curso es pan comido.

Paso 1: crea la carpeta del proyecto

mkdir mi-primer-sitio
cd mi-primer-sitio

Crear carpeta del proyecto

Paso 2: crea el archivo HTML

Abre VS Code en esa carpeta (code . desde la terminal). Crea un archivo llamado index.html y escribe este contenido:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi primer sitio web</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 720px;
      margin: 60px auto;
      padding: 0 20px;
      background: #fafafa;
      color: #222;
    }
    h1 { color: #333; }
    .tarjeta {
      background: white;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin: 16px 0;
    }
    button {
      background: #333;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Hola, mundo</h1>
  <div class="tarjeta">
    <p>Esta es mi primera página web del curso.</p>
    <p>Has hecho <span id="contador">0</span> clics en el botón.</p>
    <button onclick="incrementar()">Hacer clic</button>
  </div>
  <script>
    let clics = 0;
    function incrementar() {
      clics = clics + 1;
      document.getElementById("contador").textContent = clics;
    }
  </script>
</body>
</html>

Archivo index.html

Paso 3: sirve el archivo en local

Tienes dos opciones. La más simple es abrir el archivo con doble clic en tu explorador (se abre con file://). La más profesional es usar la extensión Live Server de VS Code: clic derecho sobre el archivo > 'Open with Live Server'. Tu página se abrirá en http://127.0.0.1:5500 y se recargará cada vez que guardes cambios.

Paso 4: verifica en el navegador

• Abre la página en el navegador (Chrome o Firefox).
• Verás tu 'Hola, mundo' centrado, con la tarjeta blanca y el botón.
• Haz clic en el botón: el contador debe subir.
• Abre DevTools (F12) > pestaña 'Elements'. Verás tu HTML.
• Abre la pestaña 'Console'. Escribe document.title y presiona Enter.

📚 Contenido ampliado

Material adicional, referencias externas verificadas y ejemplos extendidos.