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, la diferencia entre frontend y backend, y cómo configurar tu entorno local con XAMPP.

¿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 (usuarios, productos, etc.)
  • Seguridad: validación de formularios, sesiones, prevención de ataques

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

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.

¿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:

  • ✅ Todos los ejercicios resueltos paso a paso
  • ✅ Códigos listos para copiar y probar
  • ✅ Explicaciones profundas de seguridad y buenas prácticas
  • ✅ Acceso a actualizaciones futuras
Comprar en Amazon →

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios!