📚 Módulo 1 - Fundamentos

Fundamentos del desarrollo web: frontend vs backend

¿Quieres empezar en el mundo del desarrollo web pero no sabes por dónde comenzar? En esta guía te explico los conceptos clave para entender cómo funciona una aplicación web.

⏱️ ~8 min de lectura 🎯 Nivel: Principiante ✅ Con ejemplos prácticos

El desarrollo web es el proceso de crear aplicaciones y sitios que funcionan a través de internet. A diferencia de las apps de escritorio o móviles, las aplicaciones web se ejecutan en navegadores como Chrome, Firefox o Edge.

Están compuestas por varias capas que trabajan juntas para entregar una experiencia al usuario.

¿Qué es el desarrollo web?

El desarrollo web es el proceso de crear aplicaciones y sitios que funcionan a través de internet. A diferencia de las apps de escritorio o móviles, las aplicaciones web se ejecutan en navegadores como Chrome, Firefox o Edge.

Están compuestas por varias capas que trabajan juntas para entregar una experiencia al usuario.

Frontend vs Backend: ¿Cuál es la diferencia?

Todo proyecto web se divide en dos partes principales:

🔹 Frontend (la capa visible)

Es todo lo que el usuario ve y con lo que interactúa:

  • HTML5: estructura del contenido
  • CSS3: estilos y diseño visual
  • JavaScript: interactividad (botones, formularios, animaciones)

Se ejecuta en el navegador del usuario.

🔹 Backend (la lógica oculta)

Es el "cerebro" de la aplicación, donde ocurren los procesos importantes:

  • PHP: lenguaje de servidor que procesa datos
  • MySQL: base de datos que almacena información
  • Seguridad: validación, sesiones, prevención de ataques

Se ejecuta en un servidor (como XAMPP o un hosting).

💡 Consejo profesional

No necesitas dominar todo al mismo tiempo. Empieza con frontend para ver resultados rápidos, luego avanza al backend cuando te sientas cómodo con lo básico.

Cómo configurar tu entorno local con XAMPP

Para practicar sin necesidad de internet, puedes instalar XAMPP en tu computadora. Es un paquete gratuito que incluye:

  • Apache (servidor web)
  • MySQL (base de datos)
  • PHP (lenguaje)
  • phpMyAdmin (interfaz para gestionar bases de datos)

Pasos para instalar XAMPP:

  1. Descarga XAMPP desde apachefriends.org
  2. Ejecuta el instalador como administrador
  3. Selecciona los módulos: Apache, MySQL y phpMyAdmin
  4. Instala en C:\xampp (recomendado)
  5. Abre el panel de control y inicia Apache y MySQL
  6. Abre tu navegador y ve a http://localhost

¡Listo! Ahora tienes un servidor local para probar tus proyectos.

⚠️ Nota importante

En macOS y Linux, XAMPP se instala en /opt/lampp por defecto. Asegúrate de usar sudo para iniciar los servicios si es necesario.

¿Qué sigue después de los fundamentos?

Este es solo el primer paso. En el próximo módulo, aprenderás a crear interfaces modernas con HTML5, CSS3 y Bootstrap.

← Volver a la Guía Full-Stack

📚 ¿Quieres la versión completa del libro?

Esta guía es una versión resumida del libro "Programación Full-Stack", que incluye ejercicios resueltos, códigos listos y explicaciones profundas.

Comprar en Amazon →

¿Tienes dudas sobre frontend o backend? ¡Déjalas en los comentarios! 👇