En la lección anterior viste qué es JavaScript y dónde se ejecuta. Ahora toca lo práctico: preparar el puesto de trabajo. Un buen entorno no te hace mejor programador, pero un mal entorno sí te hace perder horas en problemas que no tienen nada que ver con programar. En esta lección instalarás y configurarás las cuatro herramientas que usarás durante todo el curso —navegador, editor, Node.js y control de versiones—, aprenderás a organizar las carpetas de un proyecto web y dejarás creado el esqueleto de Nómada Tareas, la aplicación de Taller Nómada.

1. Qué necesitas y por qué
2. El navegador y sus herramientas de desarrollo
3. El editor de código: Visual Studio Code
4. Live Server: ver los cambios al instante
5. Node.js y npm
6. La estructura de carpetas de un proyecto web
7. Crear el esqueleto de Nómada Tareas
8. Git: una nota introductoria sobre control de versiones
9. Errores Comunes y Consejos
10. Ejercicios
11. Conclusión

Estas son las piezas del entorno y el papel de cada una:

Buena noticia: todo es gratuito y multiplataforma (Windows, macOS y Linux). No necesitas un ordenador potente.

Cualquier navegador moderno sirve. En este curso los ejemplos y las capturas de menús se describen con Google Chrome, pero Firefox y Edge tienen herramientas equivalentes con nombres casi idénticos.

Las DevTools (herramientas de desarrollo) son el panel donde inspeccionas la página y ejecutas JavaScript. Para abrirlas:

Para ir directamente a la consola: Ctrl + Mayús + J (Windows/Linux) o Cmd + Opción + J (macOS).

Las DevTools tienen muchas pestañas. Estas son las tres que importan ahora:

Console es tu banco de trabajo. Puedes escribir JavaScript directamente ahí y pulsar Intro para ejecutarlo:

Un detalle que despista al principio: si escribes una expresión, la consola muestra su resultado; si escribes console.log(...), muestra lo que le pases. Además, la consola marca con < o ← el valor devuelto, para distinguirlo de lo que tú imprimes.

Sources te sirve para una comprobación de oro: si tu js/app.js no aparece en el árbol de ficheros, es que el navegador no lo ha cargado y por eso "no funciona nada". Casi siempre es una ruta mal escrita.

Network confirma lo mismo desde otro ángulo. Si recargas la página con la pestaña abierta y ves tu fichero en rojo con estado 404, la ruta está mal.

Estas tres pestañas se presentan aquí solo como orientación. La depuración seria —puntos de interrupción, ejecución paso a paso, inspección de variables— se estudia en Depuración de JavaScript.

El navegador guarda copias de los ficheros para ir más rápido. A veces guardas un cambio, recargas y sigues viendo el código antiguo. Soluciones:

• Recarga forzada: Ctrl + Mayús + R (o Cmd + Mayús + R en macOS).
• En DevTools, pestaña Network, marca la casilla Disable cache y déjala abierta mientras trabajas.

Podrías escribir JavaScript en el Bloc de notas, pero sería como cocinar sin fuego. Visual Studio Code (VS Code) es gratuito, ligero y el estándar de facto.

1. Descárgalo de code.visualstudio.com.
2. Instálalo con las opciones por defecto.
3. En Windows, acepta la opción "Añadir a PATH" para poder abrirlo desde la terminal con code ..

Se instalan desde el icono de extensiones de la barra lateral (o Ctrl + Mayús + X):

Más adelante añadirás herramientas de estilo y calidad de código como ESLint y Prettier, pero eso se ve en Calidad de Código: ESLint, Prettier y Convenciones. Por ahora, cuanto más ligero sea el entorno, mejor.

Abre los ajustes con Ctrl + , y busca estas opciones:

Un hábito importante: abre la carpeta del proyecto, no ficheros sueltos (Archivo → Abrir carpeta...). VS Code necesita conocer la carpeta raíz para resolver rutas, buscar en todo el proyecto y que Live Server funcione bien.

Puedes abrir un index.html haciendo doble clic sobre él, pero entonces la dirección será file:///C:/.... Ese modo tiene limitaciones reales: los módulos de JavaScript no cargan, las peticiones a servidores fallan por seguridad y ciertas APIs del navegador se desactivan.

Live Server resuelve esto: monta un servidor local y sirve tu proyecto en http://127.0.0.1:5500.

Para usarlo:

1. Abre la carpeta del proyecto en VS Code.
2. Clic derecho sobre index.html → Open with Live Server.
3. Se abre el navegador. Cada vez que guardes un fichero, la página se recargará sola.

Usa siempre Live Server. Te evitará errores incomprensibles más adelante.

Node.js es un entorno que permite ejecutar JavaScript fuera del navegador, directamente en tu ordenador. npm (Node Package Manager) viene incluido con él y sirve para instalar herramientas y librerías.

Dos usos concretos, y conviene no confundirlos:

1. Ejecutar ficheros .js sueltos desde la terminal. Cuando quieras probar una idea sin montar una página web, escribes node prueba.js y ves el resultado en la terminal. Es rapidísimo para practicar.
2. Instalar herramientas de desarrollo. A partir del Módulo 8 usarás Jest para pruebas y Cypress para pruebas de extremo a extremo. Esas herramientas se instalan con npm.

Lo que no vas a hacer todavía es programar un servidor con Node.js. Aquí es solo una herramienta auxiliar.

1. Ve a nodejs.org y descarga la versión LTS (Long Term Support), que es la estable y recomendada.
2. Instálala con las opciones por defecto.
3. Cierra y vuelve a abrir la terminal (si no, no encontrará el comando).

Abre una terminal (en VS Code: Ctrl + ñ o Terminal → Nueva terminal) y ejecuta:

Deberías ver dos números de versión, algo como v22.11.0 y 10.9.0. Los números concretos no importan mientras Node sea versión 18 o superior.

Si te responde "command not found" o "no se reconoce como un comando", la instalación no ha añadido Node al PATH: reinicia la terminal y, si persiste, reinstala marcando la opción correspondiente.

No necesitas ser experto en terminal, pero cuatro comandos te bastarán:

Y el que más usarás:

Aviso: node ejecuta el fichero desde la carpeta en la que estés. Si te dice "Cannot find module", casi siempre es que estás en la carpeta equivocada. Comprueba dónde estás antes de culpar al código.

Un proyecto web sencillo tiene una estructura muy convencional. Respetarla te ahorra problemas y hace tu código comprensible para cualquier otra persona.

Las reglas prácticas:

• index.html va en la raíz. Es el nombre que los servidores buscan por defecto al abrir una carpeta.
• Una carpeta por tipo de recurso: css/, js/, y más adelante img/ para imágenes.
• Nombres en minúsculas, sin espacios, sin acentos y sin eñes. Usa guiones para separar palabras: lista-tareas.js, nunca Lista Tareas.js ni gestión.js. Los servidores web distinguen mayúsculas de minúsculas y los caracteres raros dan problemas en las URLs.
• Rutas relativas desde index.html: js/app.js significa "la carpeta js que está junto a este HTML".

Vamos a dejar montado el proyecto de Taller Nómada. Lo irás ampliando durante todo el curso.

Puedes hacerlo con el explorador de archivos o desde la terminal:

En Windows, con PowerShell:

Después, ábrela en VS Code (Archivo → Abrir carpeta..., o code . desde la terminal).

Crea index.html en la raíz con este contenido:

Repasemos las líneas que importan:

• <!DOCTYPE html> le dice al navegador que use el estándar moderno. Sin esto, entra en un modo de compatibilidad antiguo.
• lang="es" indica el idioma del contenido: útil para buscadores y lectores de pantalla.
• <meta charset="UTF-8"> permite acentos y eñes. Si te lo saltas, verás "Nómada" en lugar de "Nómada".
• <link rel="stylesheet" href="css/estilos.css"> carga la hoja de estilos.
• <script src="js/app.js"></script> carga tu JavaScript. Fíjate en que la etiqueta se cierra con </script> aunque esté vacía: es obligatorio.

En la próxima lección verás en detalle por qué el <script> va ahí y qué alternativas existen.

Unos estilos mínimos para que la página no dé pena. No es un curso de CSS, así que basta con esto:

Y ahora la pieza que nos interesa:

1. Clic derecho sobre index.html → Open with Live Server.
2. En el navegador, abre las DevTools (F12) y ve a la pestaña Console.
3. Deberías leer: Nómada Tareas: entorno listo.

Si ves ese mensaje, tu entorno está montado: el editor guarda, el servidor sirve, el navegador ejecuta y la consola informa. Si no lo ves, comprueba en la pestaña Network si app.js aparece con estado 404 (ruta mal escrita) y revisa que la carpeta se llame exactamente js.

Git es un sistema de control de versiones: guarda fotografías del estado de tu proyecto para que puedas consultar el historial, comparar cambios y volver atrás cuando rompas algo. Y romperás cosas: forma parte del oficio.

Sin Git, la gestión de versiones acaba siendo app.js, app_v2.js, app_final.js, app_final_BUENO.js. Con Git, tienes un historial ordenado con un mensaje explicativo por cada cambio.

Descarga Git de git-scm.com e instálalo. Después, configúrate una sola vez:

El flujo mental es sencillo:

Hay carpetas que nunca deben guardarse en el historial, sobre todo node_modules/ (donde npm instala las dependencias: miles de ficheros que se regeneran solos). Crea un fichero llamado .gitignore en la raíz:

Con esto, Git ignorará esos ficheros aunque existan en tu carpeta.

Git da para un curso entero (ramas, fusiones, repositorios remotos, GitHub). Aquí te basta con crear el repositorio y hacer un commit al terminar cada módulo. Es un hábito excelente y te dará una red de seguridad desde el día uno.

Errores comunes

• Abrir el HTML con doble clic en lugar de con Live Server. La dirección file:// bloquea módulos y peticiones. Si algo "funciona en los ejemplos pero no en tu máquina", esto es lo primero que hay que mirar.
• Rutas mal escritas en src. js/app.js no es lo mismo que JS/app.js ni que /js/app.js. En muchos servidores las mayúsculas importan. Comprueba siempre en la pestaña Network.
• Olvidar <meta charset="UTF-8">. Los acentos y eñes se muestran como símbolos raros. Es el primer sospechoso cuando "Nómada" se ve como "Nómada".
• Escribir <script src="..."> sin la etiqueta de cierre. <script src="js/app.js" /> no funciona en HTML: hay que cerrar con </script>.
• Instalar Node.js y no reiniciar la terminal. El comando no se reconoce hasta que abres una terminal nueva.
• Poner el proyecto en una ruta con espacios o acentos. Una carpeta como C:\Mis Proyectos\Programación\ causa problemas con algunas herramientas. Usa rutas simples: C:\dev\nomada-tareas.
• Guardar node_modules/ en Git. Miles de ficheros inútiles en el historial. Para eso está .gitignore.

Consejos

• Deja las DevTools abiertas mientras programas. Si un error aparece y no estás mirando la consola, para ti no ha ocurrido.
• Trabaja siempre con la carpeta del proyecto abierta en VS Code, nunca con ficheros sueltos.
• Haz un commit al final de cada módulo del curso. Tendrás un historial de tu propio aprendizaje.
• Aprende cuatro atajos de VS Code y te cambiará la vida: Ctrl + P (abrir fichero por nombre), Ctrl + Mayús + F (buscar en todo el proyecto), Alt + ↑/↓ (mover una línea), Ctrl + / (comentar).
• No instales veinte extensiones el primer día. Cada una añade ruido y opiniones. Empieza con Live Server y añade el resto cuando sepas qué te falta.

Realiza estas comprobaciones y anota el resultado de cada una:

1. Abre las DevTools de tu navegador y localiza las pestañas Console, Sources y Network.
2. En la consola, ejecuta 12 * 3 y comprueba que responde 36.
3. En una terminal, ejecuta node --version y npm --version.
4. En una terminal, ejecuta git --version.
5. Ejecuta console.log('Hola, Taller Nómada') en la consola del navegador.

Si alguna falla, resuélvela antes de continuar: el resto del curso depende de ello.

Crea desde cero la estructura del proyecto:

1. Una carpeta nomada-tareas con las subcarpetas css y js.
2. Un index.html en la raíz con el idioma en español, el juego de caracteres UTF-8, el título "Nómada Tareas · Taller Nómada", un <h1> y los enlaces a css/estilos.css y js/app.js.
3. Un css/estilos.css con al menos una regla.
4. Un js/app.js que imprima por consola el mensaje: Nómada Tareas: entorno listo. Equipo: Marta, Iván y Lucía.
5. Ábrelo con Live Server y comprueba el mensaje en la consola.

Provoca deliberadamente estos tres fallos, observa qué ocurre y explica cómo lo detectarías:

1. Cambia src="js/app.js" por src="js/aplicacion.js" y recarga.
2. Elimina la línea <meta charset="UTF-8" /> y recarga.
3. Escribe en app.js la línea console.log('sin cerrar); (falta la comilla final) y recarga.

Para cada caso responde: ¿qué se ve en la página? ¿qué se ve en la consola? ¿en qué pestaña de las DevTools lo confirmarías?

Ejercicio 1

Los resultados esperados:

El undefined que aparece bajo el mensaje desconcierta a mucha gente. console.log imprime un texto pero no devuelve ningún valor, y la consola muestra siempre el valor devuelto. No es un error.

Ejercicio 2

Estructura final:

Contenido de js/app.js:

Y el index.html sería el mostrado en el apartado 7.2. La comprobación de éxito es leer el mensaje en la pestaña Console tras abrir con Live Server.

Ejercicio 3

La lección importante del caso 3: un error de sintaxis impide que se ejecute el fichero entero, no solo la línea defectuosa. El navegador tiene que leer todo el fichero antes de ejecutarlo, y si no lo entiende, no ejecuta nada.

Ya tienes un puesto de trabajo profesional. Sabes abrir las DevTools y para qué sirven las pestañas Console, Sources y Network; tienes VS Code con Live Server y unas cuantas extensiones útiles; has instalado Node.js y npm y sabes ejecutar un fichero con node fichero.js; conoces la estructura de carpetas convencional de un proyecto web (index.html en la raíz, css/ y js/); y has dado tus primeros pasos con Git creando un repositorio y un primer commit.

Y, lo más importante, tienes creado el esqueleto de Nómada Tareas, el proyecto de Taller Nómada que crecerá contigo durante todo el curso. Ahora mismo solo imprime un mensaje en la consola, pero ya es un proyecto real con su HTML, su CSS y su JavaScript.

En la siguiente lección, Tu Primer Programa en JavaScript, pasarás de "el entorno funciona" a "he escrito un programa": verás en detalle console.log, las distintas formas de incluir un script en una página (y qué significan defer y async), cómo ejecutar código con Node.js y cómo leer un mensaje de error sin asustarte. Tu primer programa imprimirá el resumen de una tarea de Taller Nómada.