🎯 Objetivo del tema
El administrador aún no ha insertado un video para esta sección.
🗺️ Mapa del tema
Recorrerás 35 años de historia en orden cronológico. Cada bloque separa un cambio técnico importante. El cierre te dejará listo para explicarle a cualquier persona — en una entrevista o a tu familia — qué es un FullStack y por qué importa.
Por qué la web dejó de ser solo leer y pasó a ser interactuar, generar y confiar.
HTML, CSS y JavaScript: tres lenguajes, tres responsabilidades.
Quién hace qué del lado del cliente y del servidor.
SQL y NoSQL, cuándo usar cada una.
El mercado laboral y la realidad de los proyectos modernos.
1.1.1 De la Web 1.0 a la 4.0
En 1991 Tim Berners-Lee encendió el primer servidor web en el CERN. Era texto plano con hipervínculos. Lo que parecía un experimento académico terminó cambiando la humanidad. Entender esa historia te ayuda a entender por qué hoy existen tantas herramientas, frameworks y roles.
Web 1.0 (1991–2004): La web de leer
Eran páginas estáticas. El usuario solo leía. Pocos publicaban, muchos consumían. HTML era el centro. CSS empezó a usarse para separar presentación. JavaScript era un capricho para validar formularios.
Web 2.0 (2004–2015): La web de interactuar
Aparecen Gmail, Facebook, YouTube, Wikipedia, Twitter. El usuario ya no solo lee: escribe, sube fotos, comenta, comparte. AJAX permite actualizar partes de la página sin recargar todo. JavaScript se vuelve protagonista. jQuery domina. Después llega Angular, React, Vue. Nacen Node.js (2009) y el concepto de FullStack JavaScript.
Web 3.0 (2015–2023): La web de los datos y los dispositivos
Smartphones, tablets, smartwatches. Una página debe verse bien en una pantalla de 4 pulgadas y en una TV de 65. Aparece el diseño responsive, las Progressive Web Apps (PWA) y los marcos de trabajo como React, Vue, Angular. Las bases de datos NoSQL (MongoDB) y los servicios en la nube se masifican.
Web 4.0 (2024–): La web inteligente y descentralizada
La IA generativa (ChatGPT, Copilot, Gemini) se integra al flujo de trabajo. WebAssembly lleva lenguajes como Rust y C++ al navegador. Blockchain y Web3 prometen devolver el control al usuario. La accesibilidad ya no es opcional: es ley en muchos países.
El administrador aún no ha insertado un video para esta sección.
1.1.2 Anatomía de una página web: HTML, CSS, JavaScript
Una página web es como una casa. HTML son los muros y el techo (estructura). CSS es la pintura, los pisos y la decoración (presentación). JavaScript es la electricidad, las tuberías y los interruptores (comportamiento). Sin una de las tres, la casa no funciona bien.
HTML — el esqueleto
HyperText Markup Language. Define QUÉ hay en la página: títulos, párrafos, imágenes, enlaces, formularios, botones. No define cómo se ven. Es semántico: cada etiqueta describe el significado del contenido.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body>
<h1>Hola, mundo</h1>
<p>Esta es una página HTML5 válida.</p>
</body>
</html>Ejemplo mínimo de HTML5
CSS — la piel
Cascading Style Sheets. Define CÓMO se ve la página: colores, tamaños, tipografías, espacios, animaciones, diseño responsive. Permite separar presentación de contenido, lo que facilita el mantenimiento.
h1 {
color: #333;
font-size: 2.5rem;
text-align: center;
}
p {
color: #666;
line-height: 1.6;
max-width: 60ch;
margin: 0 auto;
}Ejemplo de CSS3 básico
JavaScript — el cerebro
Lenguaje de programación que se ejecuta en el navegador. Define CÓMO se comporta la página: valida formularios, muestra menús desplegables, carga datos del servidor sin recargar, anima elementos, etc. Hoy se usa también del lado del servidor (Node.js) y hasta en bases de datos (MongoDB).
const boton = document.querySelector("#miBoton");
const contador = document.querySelector("#contador");
let clics = 0;
boton.addEventListener("click", () => {
clics = clics + 1;
contador.textContent = `Has hecho ${clics} clics`;
});JavaScript: contador de clics en el navegador
El administrador aún no ha insertado un video para esta sección.
1.1.3 Frontend, Backend y FullStack
Una aplicación web moderna tiene dos lados claramente diferenciados. Entender dónde termina uno y empieza el otro es fundamental para no perderse cuando el código crezca.
Frontend (lado del cliente)
Es todo lo que el usuario ve y toca en su navegador. Se ejecuta en su computadora o teléfono. Tecnologías principales: HTML, CSS, JavaScript, y frameworks como React, Vue o Angular. Su trabajo: mostrar datos de forma bonita y responder a las acciones del usuario.
Backend (lado del servidor)
Es la parte que el usuario no ve. Se ejecuta en un servidor remoto. Tecnologías principales: PHP, Python (Django/Flask), Java (Spring), Node.js (Express), Ruby (Rails), C# (.NET). Su trabajo: recibir peticiones, validar datos, aplicar reglas de negocio, consultar bases de datos y devolver respuestas.
FullStack (ambos lados)
Es el desarrollador que trabaja tanto en Frontend como en Backend. Puede no ser experto en todo, pero entiende cómo encajan las piezas y puede defenderse en cualquier capa. En este curso te convertirás en FullStack: primero con PHP + MySQL, después con Node.js + Express + MongoDB/PostgreSQL.
Frontend
- Se ejecuta en el navegador del usuario
- HTML, CSS, JavaScript, React, Vue
- Ve los datos, no la lógica de negocio
- Más visual, más creativo
Backend
- Se ejecuta en un servidor remoto
- PHP, Node.js, Python, Java, C#
- Aplica la lógica y guarda datos
- Más abstracto, más lógico
El administrador aún no ha insertado un video para esta sección.
1.1.4 Bases de datos: la memoria del sistema
Si el backend es el cerebro, la base de datos es la memoria. Sin ella, cada vez que el servidor se apague se perdería todo: usuarios, productos, mensajes, configuraciones. Existen dos familias principales: SQL (relacionales, tablas) y NoSQL (documentos, grafos, clave-valor).
Bases de datos SQL (relacionales)
Organizan los datos en tablas con filas y columnas, relacionadas entre sí. Usan un lenguaje estándar llamado SQL para consultar, insertar, actualizar y borrar. Ejemplos: MySQL, PostgreSQL, MariaDB, SQL Server. Son ideales cuando los datos son estructurados y las relaciones importan: un usuario tiene muchos pedidos, un pedido tiene muchos productos.
Bases de datos NoSQL (no relacionales)
Almacenan datos en formatos flexibles: documentos JSON (MongoDB), clave-valor (Redis), grafos (Neo4j), columnas anchas (Cassandra). Son ideales cuando los datos son semi-estructurados o cambian de forma frecuente: redes sociales, catálogos de productos con atributos variables, sesiones de usuario.
¿Cuándo usar cada una?
| Característica | SQL | NoSQL |
|---|---|---|
| Estructura | Tablas con esquema fijo | Documentos flexibles |
| Escalabilidad | Vertical (más CPU/RAM) | Horizontal (más servidores) |
| Transacciones | ACID garantizado | Eventual (BASE) |
| Ejemplo típico | Sistema bancario | Red social, IoT |
| Curva de aprendizaje | Media | Media-baja |
El administrador aún no ha insertado un video para esta sección.
1.1.5 Por qué hoy se necesita un Desarrollador FullStack
Hace quince años la web era más simple: páginas estáticas con un formulario. Hoy una sola aplicación puede tener panel administrativo, API pública, app móvil, integración con pasarelas de pago, envío de correos, analytics y machine learning. Las empresas necesitan gente que entienda todo el rompecabezas.
El mercado laboral en 2024–2025
Las ofertas de empleo para 'Desarrollador Web FullStack' crecieron un 35% entre 2022 y 2024 según LinkedIn. Los sueldos juniors en México van de $12,000 a $22,000 MXN mensuales; mid level, de $25,000 a $45,000. Los perfiles que saben frontend y backend, y que además entienden bases de datos, despliegue y herramientas de IA, son los más buscados.
El perfil 'T-shaped'
El desarrollador FullStack ideal tiene forma de T: tiene un conocimiento amplio (la barra horizontal) en todas las capas, y un conocimiento profundo (la barra vertical) en una o dos. Por ejemplo: fuerte en backend pero sabe defenderse en frontend, o fuerte en frontend pero sabe levantar una API.
- Saber HTML, CSS y JavaScript moderno (ES6+)
- Conocer al menos un framework de frontend (React, Vue o Angular)
- Saber al menos un lenguaje de backend (Node.js, PHP, Python)
- Entender SQL y al menos una base NoSQL
- Manejar Git y GitHub para trabajo en equipo
- Conocer conceptos de despliegue (Vercel, Netlify, Railway, Supabase)
- Saber usar IA como copiloto sin perder la capacidad de razonar
El administrador aún no ha insertado un video para esta sección.
📚 Contenido ampliado
Material adicional, referencias externas verificadas y ejemplos extendidos.
🤖 AI Mission
La IA es tu copiloto, no tu piloto. Aprende a pedir, no a copiar.
Misión: Pídele a una IA (ChatGPT, Copilot o Gemini) que te explique la diferencia entre Web 1.0, 2.0, 3.0 y 4.0 con un ejemplo de página web de cada época. Después escribe la respuesta tú mismo en tu cuaderno, sin mirar lo que la IA te dio. Compara ambas versiones y anota qué añadiste tú que la IA no captó.
Pasos sugeridos
- Piensa 3 minutos antes de abrir la IA: ¿qué entiendes tú por Web 2.0? Anótalo en tu cuaderno.
- Abre la IA y pídele el resumen. No copies y pegues: léelo, interprétalo y vuelve a escribirlo con tus palabras.
- Compara tu versión inicial con la versión final. ¿Qué detalle te faltó? ¿Qué expresaste mejor tú?
- Anota en tu cuaderno, bajo el título 'Lo que la IA no me dijo': las cosas que tú descubriste por tu cuenta.
📓 Entregable: Una página de tu cuaderno con: tu definición inicial, la versión pulida y una lista de 'detalles que la IA no mencionó'.
🚫 Errores típicos de razonamiento
Por qué: Ningún desarrollador serio sabe todo al 100%. El perfil T-shaped te dice que midas en qué eres fuerte y en qué te defiendes. Decir 'soy FullStack' no es decir 'soy experto en todo', es 'puedo trabajar en cualquier capa'.
Por qué: React es una biblioteca de JavaScript. Angular y Vue son frameworks. JavaScript es el lenguaje. Si dices 'programo en React' en una entrevista, el entrevistador escucha 'no tengo claros los fundamentos'. Cuida tu precisión verbal.
Por qué: La IA te hace más rápido, pero también sube el listón de lo que se espera de un junior. Ya no basta con 'sintaxis'; ahora se espera que entiendas arquitectura, que sepas revisar lo que la IA produce, y que sepas cuándo no usarla. Tu valor está en el razonamiento, no en la velocidad de tecleo.
Por qué: Es el error clásico del principiante. Si no entiendes que JavaScript puede correr en el navegador Y en el servidor (Node.js), vas a pasar horas depurando un problema que está en otra capa. Aprende a preguntar: ¿esto corre en el cliente o en el servidor? antes de escribir una línea.
🧪 Laboratorio práctico
Escribe primero, instala después. Lee 30 minutos, programa 60 minutos.
Laboratorio: Mapa conceptual de la web en una hoja
Objetivo: Crear un mapa visual en una hoja de tu cuaderno (o en una herramienta digital) que conecte todas las piezas del stack: cliente, servidor, base de datos, IA, despliegue. Sin código, solo conceptos y flechas.
Pasos
- Dibuja un recuadro central con la palabra 'APLICACIÓN WEB'.
- A la izquierda, dibuja una caja 'CLIENTE (navegador)'. Escribe dentro: HTML, CSS, JavaScript, React.
- A la derecha, dibuja una caja 'SERVIDOR (backend)'. Escribe dentro: PHP / Node.js, lógica de negocio, validaciones.
- Abajo del servidor, dibuja una caja 'BASE DE DATOS'. Escribe dentro: SQL (MySQL, PostgreSQL) y NoSQL (MongoDB).
- Conecta las cajas con flechas etiquetadas: 'petición HTTP' del cliente al servidor, 'consulta SQL/NoSQL' del servidor a la BD, 'respuesta JSON' del servidor al cliente.
- Agrega dos cajas externas: 'IA' (conectada al servidor como copiloto) y 'Despliegue' (Vercel, Railway, Supabase).
- Debajo del mapa, escribe en 5 líneas: 'Mi aplicación hace X. El usuario hace Y. El servidor responde Z.'
📓 Entregable: Foto o escaneo de tu mapa conceptual. Si lo hiciste en digital, exporta como PNG. Guárdalo en la carpeta del tema.