Antes de empezar

🚀 Clases en Vivo — Inicio: Domingo 6 de Septiembre ($200 MXN / clase). Aprende a programar desde cero con acompañamiento directo y construye el proyecto ShortURL.

Apartar mi Lugar en las Clases en Vivo

Desarrollar software nunca había sido tan accesible como hoy. Cada día contamos con más herramientas que eliminan las barreras técnicas para resolver problemas complejos. Gracias a la inteligencia artificial, muchas personas creen erróneamente que ya no es necesario aprender a programar; sin embargo, quienes estamos en la industria sabemos que la IA es un copiloto extraordinario, pero requiere que tú seas el director de orquesta con una base sólida de fundamentos.

Este taller está diseñado como una experiencia formativa semanal estructurada en sesiones intensivas de 4 horas, donde combinaremos teoría dialogada, programación interactiva en vivo, análisis de errores y proyectos prácticos.

🗺️ Estructura de la Sesión

Cada una de nuestras sesiones semanales sigue una metodología pedagógica dividida en 5 fases:

Estructura de la Sesión
├── ☕ Fase 1: Rompehielos, Expectativas y Metodología
├── 🎯 Fase 2: Introducción al Tema y Fundamentos
├── 💻 Fase 3: Práctica Asistida en Vivo
├── 🗣️ Fase 4: Exposición, Debate y Debugging
└── 🏠 Fase 5: Reto Semanal y Práctica en Casa

☕ Fase 1: Rompehielos, Expectativas y Metodología

Comenzamos la sesión conociéndonos, alineando objetivos personales y derribando los mitos más comunes sobre la programación.

1. La Mentalidad de Inicio: Superando el Síndrome del Impostor

Aprender a programar es exactamente como aprender a tocar un instrumento musical o dominar un nuevo idioma. No se trata de tener un “talento innato para las matemáticas”, sino de entrenar a tu mente para razonar en pasos lógicos y tolerar la frustración inicial.

La computadora no te juzga: Cuando un programa falla, la computadora no está molesta contigo; simplemente te está diciendo “no entendí esta instrucción específica”.
El código se aprende escribiendo código: Nadie aprende a nadar leyendo un libro de natación. Aquí escribiremos código desde el primer día.

2. Requisitos Técnicos del Taller

Para este curso no necesitas comprar software costoso ni disponer de una supercomputadora:

Computadora con cualquier sistema operativo: Windows 10/11, macOS o cualquier distribución de Linux.
Navegador web moderno: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari o Brave (puedes consultar una comparativa de navegadores en este artículo de referencia).
Conexión a internet estable: Para acceder a las herramientas en la nube y participar en las sesiones.

3. El Mapa de Ruta: Tu Viaje de 12 Semanas

Para no perderte en el camino, nuestro viaje está organizado de forma progresiva:

Antes de empezar (L1): Fundamentos del software, la web y tus primeras líneas de código en consola.
Conceptos básicos (L2): Variables, tipos de datos, operadores, condicionales, bucles y funciones.
Language Tour (L3): Recorrido completo por la sintaxis moderna de JavaScript.
Paradigmas (L4): Programación estructurada, orientada a objetos, funcional y asíncrona.
Stacks (L5): Arquitectura web e inicio del proyecto hilo conductor: ShortURL.
Frontend (L6): Maquetación e interactividad visual con HTML, CSS y JS.
Backend (L7): Creación de APIs y servidores web con Node.js.
Base de datos (L8): Persistencia y almacenamiento relacional con SQLite.
Uso de terminal (L9): Comandos esenciales para dominar la línea de comandos.
Control de versiones (L10): Git y GitHub para gestionar tus proyectos colaborativamente.
Sistemas operativos (L11): Variables de entorno, procesos y arquitectura del sistema.
DevOps (L12): Despliegue en la nube y publicación oficial de tu aplicación en internet.

🎯 Fase 2: Introducción al Tema y Fundamentos

En esta fase entenderemos qué ocurre detrás de la pantalla cada vez que usas una aplicación y cómo las computadoras procesan nuestras órdenes.

1. ¿Qué es realmente el Software?

Una computadora es, en esencia, una máquina increíblemente veloz pero completamente ciega e incapaz de pensar por sí misma. Solo sabe hacer dos cosas básicas:

Almacenar electricidad en forma de ceros y unos (0 = apagado, 1 = encendido) en sus circuitos de memoria.
Ejecutar operaciones matemáticas a la velocidad de la luz en el procesador central (CPU).

Para comunicarnos con esta máquina sin tener que escribir manualmente millones de ceros y unos en código binario, la humanidad inventó los lenguajes de programación.

Lenguajes de alto nivel (como JavaScript o Python): Utilizan palabras en inglés y símbolos familiares (if, console.log, +, { }) para que los humanos podamos expresar ideas lógicas complejas de manera legible.
El Intérprete / Motor de ejecución: Es el traductor simultáneo que toma nuestras palabras en JavaScript y las convierte al instante en las señales eléctricas binarias que el chip de la computadora comprende.

2. El Viaje de un Clic: ¿Qué pasa cuando abres una página web?

Cuando abres tu navegador, escribes https://desde0.com y presionas Enter, ocurre una fascinante coreografía en menos de medio segundo:

[Tu Computadora: Cliente]
       │  (1. Petición: "Quiero ver la página")
       ▼
[La Red Internet / Servidores DNS]
       │  (2. Busca la dirección IP en el mundo)
       ▼
[Servidor Remoto: Backend]
       │  (3. Empaqueta archivos HTML, CSS y JS)
       ▼
[Tu Navegador Web: Renderizado en Pantalla]

Tu navegador (El Cliente): Envía una solicitud por internet diciendo: “Hola, quiero ver la página de Desde0”.
Los Servidores de Nombres (DNS): Actúan como la libreta de contactos de internet, traduciendo el nombre del dominio a la dirección IP numérica del servidor.
El Servidor (Backend): Es una computadora encendida 24/7 en un centro de datos. Recibe tu solicitud, empaqueta los archivos de la página y te los envía de vuelta en paquetes de datos.
Tu Navegador procesa los archivos: Descarga tres lenguajes esenciales y los dibuja en tu monitor: HTML, CSS y JavaScript.

3. La Trinidad de la Web: HTML, CSS y JavaScript

Toda página o aplicación web moderna —desde un blog hasta Netflix, Spotify o Instagram— está construida combinando exactamente estos tres lenguajes:

Lenguaje	Rol en la Web	Analogía de la Casa	Analogía del Auto	Analogía del Cuerpo
HTML (HyperText Markup)	Estructura y Contenido	Los cimientos, ladrillos, vigas y puertas.	El chasis, la carrocería, asientos y ruedas.	El esqueleto óseo y los órganos.
CSS (Cascading Style Sheets)	Diseño y Estética	La pintura, los azulejos, colores y decoración.	El color de la pintura, rines y tapizado.	La piel, los ojos, el peinado y la ropa.
JavaScript	Comportamiento e Inteligencia	El sistema eléctrico, timbres y sensores.	El motor, la transmisión, frenos y GPS.	El sistema nervioso, músculos y cerebro.

🔍 Experimento en Vivo: Desarmando una Página Web Real

Para ver cómo interactúan estos tres lenguajes, vamos a hacer un experimento juntos:

Abramos una página real: Entra a un sitio web con mucho contenido (por ejemplo, Wikipedia en Español o esta misma página de Desde0).
Quitémosle el CSS (La estética y el maquillaje):
- Si desactivamos los estilos visuales, verás cómo la página se transforma al instante en un documento de texto plano de los años 90: las tipografías modernas desaparecen, los colores se apagan y todo se alinea a la izquierda.
- ¿Qué quedó? Solo el HTML puro (el esqueleto).
Apaguemos JavaScript (El cerebro y los reflejos):
- Si desactivamos JavaScript en el navegador, la página se seguirá viendo bonita gracias a CSS, pero si intentas hacer clic en el buscador interactivo, en el menú desplegable o en el botón de modo oscuro… nada responderá.
- ¿Qué aprendimos? Una página sin JavaScript es como una fotografía: se ve bien, pero no puede reaccionar ni interactuar con las personas.

4. La Consola: Tu Laboratorio de Pruebas Inmediato

Muchas personas asumen erróneamente que para aprender a programar se necesita instalar programas pesados, terminales intimidantes o software de pago desde el primer día. Esto es un mito.

Tu navegador web ya incluye un motor de JavaScript profesional de nivel industrial (por ejemplo, Google Chrome y Microsoft Edge usan el motor V8, desarrollado por Google):

Al abrir las Herramientas de Desarrollador (DevTools) y pasar a la pestaña Consola, nos conectamos directamente a ese motor en tiempo real.
La consola funciona bajo el ciclo REPL (Read-Eval-Print Loop):
1. Read (Lee): Lee la instrucción que escribes.
2. Eval (Evalúa): Procesa el cálculo en la memoria de la computadora.
3. Print (Imprime): Muestra el resultado de inmediato en pantalla.
4. Loop (Repite): Vuelve a quedar esperando tu siguiente instrucción.

💻 Fase 3: Práctica Semanal Asistida en Vivo

Ha llegado el momento de poner las manos en el teclado. Realizaremos juntos 3 retos prácticos progresivos directamente en la consola de tu navegador.

Paso 0: Abrir las Herramientas de Desarrollador

En esta misma ventana de tu navegador, haz clic derecho sobre cualquier espacio vacío de la página.
Selecciona la opción “Inspeccionar” (o Inspect).
En el panel que se abre, haz clic en la pestaña superior llamada “Consola” (o Console).

🧩 Reto 1: La Consola como Panel de Control y Calculadora Inteligente

Objetivo: Dominar el comando de salida console.log() y entender cómo la computadora procesa operaciones matemáticas y textos.

Paso 1.1: Tu primer mensaje formal

Escribe en la consola junto al cursor parpadeante (>) y presiona la tecla Enter:

console.log("¡Hola Mundo! Estoy iniciando mi carrera en Desde0.");

console: Es el objeto del sistema que representa el panel de control.
.log(): Es la función que le ordena “muestra lo que está dentro de los paréntesis”.
Las comillas (""): Indican que el contenido es un texto literal (String).

Paso 1.2: Cálculos matemáticos y precedencia de operadores

Escribe estas operaciones una por una y presiona Enter tras cada una:

// Suma y resta directa
1500 + 350 - 120

// Multiplicación y división
25 * 4 / 2

// Uso de paréntesis para controlar qué se calcula primero
(100 - 15) * 1.16

// ¿Cuántas horas hay en un año normal de 365 días?
365 * 24

🧩 Reto 2: Diálogos Interactivos con el Usuario (`alert` y `prompt`)

Objetivo: Crear un programa que capture información ingresada por una persona, la procese en memoria y muestre una respuesta personalizada.

Paso 2.1: El saludo emergente interactivo

Escribe las siguientes líneas una por una en la consola:

// 1. Enviamos un aviso en ventana emergente
alert("¡Bienvenido al sistema interactivo de Desde0!");

// 2. Pedimos el nombre del usuario y lo guardamos en una variable con let
let nombreUsuario = prompt("¿Cuál es tu nombre?");

// 3. Respondemos usando el nombre capturado mediante concatenación (+)
alert("¡Mucho gusto, " + nombreUsuario + "! Tu primer programa interactivo está funcionando.");

Paso 2.2: Mini-Desafío en Vivo (La Calculadora de Suma)

¿Qué pasa si queremos pedirle dos números al usuario y sumarlos?

// Pedimos el primer número y lo convertimos a valor numérico con Number()
let numero1 = Number(prompt("Ingresa el primer número:"));

// Pedimos el segundo número
let numero2 = Number(prompt("Ingresa el segundo número:"));

// Realizamos el cálculo
let totalSuma = numero1 + numero2;

// Mostramos el resultado
alert("La suma de " + numero1 + " + " + numero2 + " es igual a: " + totalSuma);

🧩 Reto 3: Modificando una Página Web en Tiempo Real (DOM)

Objetivo: Comprender que las páginas web son dinámicas y que JavaScript puede alterar en vivo el texto, los colores y la estructura de lo que ves.

El navegador nos da acceso a un objeto global llamado document, que representa la página web actual.

Ejecuta estas instrucciones en la consola mientras observas esta misma pestaña:

// 1. Cambia el título de la pestaña de tu navegador
document.title = "🚀 ¡Página hackeada por mí con JavaScript!";

// 2. Cambia el color de fondo de toda la pantalla
document.body.style.backgroundColor = "#0F172A";

// 3. Cambia el color de todos los textos para que contrasten en blanco
document.body.style.color = "#F8FAFC";

// 4. Cambia el texto del título principal (h1) de esta página
document.querySelector('h1').innerText = "¡He tomado el control con JavaScript!";

🗣️ Fase 4: Exposición de Resultados, Debate y Debugging

En esta fase abrimos micrófonos, compartimos pantalla y analizamos los errores comunes ocurridos durante la práctica.

🐞 Anatomía de un Error: Cómo leer la Consola sin Miedo

Cuando estás programando, cometer errores es parte natural del trabajo diario. Los mensajes en rojo de la consola son diagnósticos precisos que te indican qué falló y en qué línea.

1. `Uncaught SyntaxError: Invalid or unexpected token`

¿Qué significa? Violaste una regla gramatical del lenguaje. Casi siempre ocurre por olvidar cerrar unas comillas (") o un paréntesis ).
Ejemplo erróneo: console.log("Hola Mundo);
Cómo solucionarlo: Revisa que cada símbolo abierto tenga su respectivo cierre en el lugar correcto.

2. `Uncaught ReferenceError: [nombre] is not defined`

¿Qué significa? Intentaste usar una variable o función que JavaScript no conoce. Recuerda que JavaScript es estrictamente sensible a mayúsculas y minúsculas (case-sensitive).
Ejemplo erróneo: Console.log("Hola"); o console.Log("Hola");
Cómo solucionarlo: Escríbelo exactamente en minúsculas: console.log(...).

3. El error de concatenación accidental (`"10" + 5 = "105"`)

¿Qué significa? prompt() siempre entrega datos en formato de texto (String). Si sumas texto con números sin usar Number(), JavaScript los junta como palabras en lugar de sumarlos como cantidades.
Solución: Envuelve siempre la entrada con Number(prompt(...)).

🏠 Fase 5: Definición de Práctica en Casa / Reto Semanal

Para afianzar los conceptos aprendidos hoy y prepararte para la Lección 2, realizarás un proyecto completo en casa.

🏆 Proyecto Semanal: “El Generador de Biografía y Tiempo de Vida”

Objetivo: Desarrollar un script interactivo en la consola del navegador que recopile datos de una persona y genere un reporte biográfico completo con cálculos de tiempo de vida.

Especificaciones del Script:

Mensaje de bienvenida: Mostrar un alert("Bienvenido al Generador de Biografía Desde0");.
Captura de datos con prompt():
- Nombre completo.
- Ciudad de residencia.
- Año de nacimiento (ej. 1998).
- Profesión u ocupación actual.
Cálculos matemáticos:
- Calcular la edad aproximada: 2026 - añoNacimiento.
- Calcular los meses aproximados vividos: edad * 12.
- Calcular los días aproximados vividos: edad * 365.
- Calcular las horas aproximadas vividas: días * 24.

Salida final formateada: Mostrar una ventana de alerta o imprimir en la consola un texto estructurado como este:

========================================
👤 REPORTE BIOGRÁFICO DE [NOMBRE]
========================================
• Residencia: [Ciudad]
• Profesión: [Profesión]
• Edad aproximada: [Edad] años
• Tiempo en el planeta:
  - [Meses] meses
  - [Días] días
  - [Horas] horas de vida
========================================
¡Gracias por usar nuestro programa!

📚 Recursos y Videos Recomendados

Para acompañar tu estudio en casa con explicaciones visuales y amenas, te recomendamos estos videos esenciales:

¿Qué es la programación? Explicación didáctica sobre cómo se comunican los humanos y las computadoras a través del código.

¿Qué es JavaScript y qué es el código? Introducción técnica de MDN a los fundamentos y el rol del código en el desarrollo de software.

Fundamentos de Programación y Lógica Guía interactiva sobre los principios para descomponer y resolver problemas paso a paso.

Guía de Introducción a JavaScript Panorama general de Mozilla sobre el funcionamiento de los lenguajes de programación modernos.

🚀 Conclusión y Próximos Pasos

¡Felicidades por completar tu primera sesión intensiva de 4 horas! Has roto el miedo a programar, dominas las herramientas de desarrollo del navegador y has creado tus primeros programas interactivos en JavaScript.

En la próxima sesión construiremos las estructuras lógicas de cualquier aplicación: Lección 2: Conceptos básicos (L2), donde aprenderemos a guardar datos con variables, evaluar condiciones lógicas con if/else, automatizar repeticiones con bucles y encapsular lógica en funciones reutilizables.