🎯 Objetivo de aprendizaje
Al finalizar este tema, el estudiante será capaz de identificar las diferencias entre frontend y backend, comprender las funciones que realiza cada parte de una aplicación web y explicar cómo ambas trabajan conjuntamente para ofrecer una aplicación funcional.
🌐 ¿Qué son Frontend y Backend?
Cuando utilizamos una página web o una aplicación, normalmente podemos distinguir dos grandes áreas de desarrollo:
Frontend: es la parte de la aplicación con la que interactúa directamente el usuario.
Backend: es la parte que se ejecuta principalmente en el servidor y se encarga de procesar la información y aplicar la lógica de la aplicación.
🖥️ Frontend = lo que el usuario utiliza
⚙️ Backend = lo que hace que la aplicación funcione
Una aplicación web necesita que frontend y backend se comuniquen constantemente.
🎨 Frontend
El frontend comprende la parte de una aplicación web que se ejecuta en el navegador y que permite al usuario interactuar con el sistema.
Botones
Formularios
Menús
Imágenes
Tablas
Animaciones
Mensajes
Ventanas
Diseño y distribución de la información
🧰 Tecnologías principales
| Tecnología | Función |
| HTML | Define la estructura de la página |
| CSS | Define presentación, estilos y diseño |
| JavaScript | Permite agregar comportamiento e interacción |
También existen bibliotecas y frameworks como React, Angular, Vue, Bootstrap y Tailwind CSS.
💡 Ejemplo
┌───────────────────────────────┐
│ INICIAR SESIÓN │
│ │
│ Usuario: [______________] │
│ │
│ Contraseña: [____________] │
│ │
│ [ INICIAR SESIÓN ] │
└───────────────────────────────┘
Todo lo relacionado con cómo se muestra este formulario y cómo interactúa el usuario con él pertenece principalmente al frontend.
⚙️ Backend
El backend se encarga de procesar la información que recibe de los usuarios y ejecutar la lógica necesaria para generar una respuesta.
Procesar solicitudes
Validar información
Autenticar usuarios
Aplicar reglas de negocio
Consultar bases de datos
Registrar información
Modificar información
Generar respuestas
Proteger información y recursos
🧰 Tecnologías backend
PHP
Python
Java
C#
Ruby
JavaScript con Node.js
En esta asignatura trabajaremos principalmente con PHP 8.
🔄 ¿Cómo trabajan juntos?
Frontend y backend no son dos aplicaciones completamente independientes. Normalmente trabajan de manera coordinada.
👤 USUARIO
↓
🎨 FRONTEND
HTML + CSS + JS
↓
Solicitud HTTP
↓
⚙️ BACKEND
PHP 8
↓
🗄️ BASE DE DATOS
↓
⚙️ BACKEND
↓
Respuesta
↓
🎨 FRONTEND
↓
👤 USUARIO
🧠 La idea clave
El usuario normalmente no accede directamente a la base de datos. El frontend se comunica con el backend y el backend se encarga de realizar las operaciones necesarias.
🆚 Frontend vs Backend
| Característica | Frontend 🎨 | Backend ⚙️ |
| ¿Dónde trabaja principalmente? | Navegador | Servidor |
| ¿Quién lo utiliza directamente? | Usuario | Sistema/servidor |
| ¿Qué hace? | Interfaz e interacción | Procesamiento y lógica |
| Tecnologías | HTML, CSS, JavaScript | PHP, Python, Java, C#, etc. |
| Maneja interfaz | ✅ | ❌ |
| Maneja lógica de negocio | Limitadamente | ✅ |
| Accede directamente a BD | ❌ | ✅ |
| Autenticación | Interfaz del login | Verificación de credenciales |
| Ejemplo | Botón «Comprar» | Procesar la compra |
🛒 Ejemplo: una tienda en línea
🎨 Frontend
Muestra el producto.
Muestra su precio.
Permite seleccionar cantidad.
Muestra el botón Comprar.
Captura la interacción del usuario.
Envía la solicitud al backend.
⚙️ Backend
Recibe la solicitud.
Identifica al usuario.
Verifica el producto.
Consulta su precio.
Comprueba disponibilidad.
Calcula el total.
Registra la operación.
Devuelve una respuesta.
🗄️ Base de datos
La base de datos puede contener información como:
PRODUCTOS
——————————–
id | nombre | precio | stock
1 | Laptop | 15000 | 8
2 | Mouse | 500 | 25
3 | Teclado | 900 | 12
El backend es quien normalmente realiza las operaciones necesarias sobre estos datos.
🔐 Otro ejemplo: inicio de sesión
Usuario: Fredy
Contraseña: ********
Frontend
Mostrar los campos.
Permitir escribir.
Detectar el envío del formulario.
Enviar los datos al servidor.
Backend
Recibir los datos.
Validarlos.
Buscar al usuario.
Verificar la contraseña.
Determinar si puede acceder.
Crear una sesión.
Enviar una respuesta.
El frontend puede mostrar un formulario de login, pero el backend es quien debe determinar si el usuario realmente puede entrar.
🤝 Frontend y Backend: un equipo
Una buena analogía es imaginar un restaurante:
👤 CLIENTE
↓
🧑🍳 MESERO — FRONTEND
↓
Pedido
↓
👨🍳 COCINA — BACKEND
↓
Preparación
↓
🍽️ RESPUESTA
↓
👤 CLIENTE
El cliente interactúa principalmente con el mesero, pero la cocina realiza gran parte del trabajo necesario para preparar el pedido.
Frontend → Backend → Base de datos → Backend → Frontend
⚠️ Un error común
No debemos pensar:
❌ “Frontend = importante y Backend = secundario”
❌ “Backend = base de datos”
Son partes diferentes que cumplen funciones distintas. Una aplicación puede tener una interfaz espectacular, pero si su backend está mal diseñado, la aplicación puede ser lenta, insegura o incorrecta. De la misma manera, un backend excelente necesita una interfaz adecuada para que el usuario pueda utilizarlo fácilmente.
🧠 Frontend + Backend + Base de datos
🎨 FRONTEND
Interfaz de usuario
↓
⚙️ BACKEND
Lógica y procesamiento
↓
🗄️ BASE DE DATOS
Información
| Componente | Responsabilidad |
| Frontend | Presentar e interactuar. |
| Backend | Procesar y decidir. |
| Base de datos | Almacenar y recuperar información. |
🚀 ¿Y dónde entra PHP?
En esta asignatura:
HTML + CSS + JavaScript
↓
🎨 FRONTEND
↓ HTTP ↓
PHP 8
↓
⚙️ BACKEND
↓
MySQL/MariaDB
Durante el curso iremos construyendo cada una de estas piezas hasta llegar a aplicaciones web funcionales.
🧠 5 ideas que debes recordar
Frontend es la parte con la que interactúa directamente el usuario.
Backend procesa información y ejecuta la lógica de la aplicación.
El frontend y el backend se comunican mediante solicitudes y respuestas.
El backend puede comunicarse con una base de datos para almacenar y consultar información.
Una aplicación web completa necesita que sus diferentes componentes trabajen conjuntamente.
🧪 Actividad: ¿Quién hace qué?
🎯 Objetivo
Identificar qué tareas corresponden al frontend y cuáles al backend.
📋 Instrucciones
| Acción | ¿Frontend o Backend? |
| Mostrar un botón “Guardar” | ________________ |
| Verificar que un usuario existe | ________________ |
| Mostrar una tabla de productos | ________________ |
| Consultar el precio de un producto | ________________ |
| Crear un formulario | ________________ |
| Registrar un nuevo usuario en la BD | ________________ |
| Cambiar el color de un botón | ________________ |
| Validar las credenciales del usuario | ________________ |
| Mostrar un mensaje de bienvenida | ________________ |
| Actualizar el stock de un producto | ________________ |
💡 Reto
Después de clasificarlas, explica por qué asignaste cada acción a frontend o backend. Esto evita que el alumno simplemente memorice definiciones.
🎯 Mini reto de análisis
Piensa en una aplicación que utilices habitualmente, por ejemplo: YouTube, Facebook, Instagram, Mercado Libre, Netflix, una tienda en línea o un sistema escolar.
¿Qué elementos pertenecen al frontend?
¿Qué procesos probablemente realiza el backend?
¿Qué información podría almacenarse en una base de datos?
¿Cómo se comunican frontend y backend?
📚 Material de apoyo
📊 Presentación de clase
https://www.mediafire.com/file/bpm0y0tp27uz2k1/1.1.2_Frontend_vs_Backend.pdf/file
🎥 Videos recomendados
🔗 Recursos externos
AWS — Front End frente a Back End
https://aws.amazon.com/es/compare/the-difference-between-frontend-and-backend/