Tecnologías y Aplicaciones Web · Sesión 5
Frontend y Backend
en Aplicaciones Web
Comprende cómo se divide una aplicación web moderna entre la parte visual y la lógica del servidor.
Interfaz
Servidor
Datos
Comunicación
Objetivos
¿Qué aprenderemos hoy?
🎨
Arquitectura Frontend
Entender la capa visual y de interacción con el usuario.
⚙️
Lógica Backend
Comprender el procesamiento de datos y seguridad en el servidor.
🛠️
Tecnologías
Identificar lenguajes y herramientas para cada sección.
🔄
Flujo y BD
Analizar cómo se conectan y dónde se guarda la información.
La Capa Visual
¿Qué es el Frontend?
Es la parte con la que el usuario interactúa directamente desde su navegador.
- Botones y menús interactivos
- Diseño visual y tipografía
- Formularios y animaciones
- Estructura de la información
Se ejecuta principalmente en el navegador del usuario (Client-side), utilizando los recursos de su propio dispositivo.
Casos de uso
Frontend en el día a día
| Aplicación | Elemento Frontend (Lo que ves) |
|---|
| YouTube | Reproductor de video y lista de comentarios |
| Netflix | Catálogo interactivo de películas |
| Moodle | Panel de cursos y entrega de archivos |
| Amazon | Borrador de búsqueda y carrito de compras |
La Capa Lógica
¿Qué es el Backend?
Es el "cerebro" de la aplicación que procesa la información en los servidores.
🔐
Seguridad
Validación de usuarios y permisos.
🧠
Lógica
Cálculos y procesamiento de datos complejos.
📦
Persistencia
Gestión de bases de datos.
⚠️ El usuario normalmente no ve el backend directamente, pero siente sus funciones.
Procesamiento
Tareas del Backend
| Acción del Usuario | Función del Backend (Lo que ocurre detrás) |
|---|
| Iniciar sesión | Valida correo y contraseña con la base de datos |
| Comprar un producto | Procesa el pago y registra el pedido |
| Ver recomendados | Algoritmo que genera sugerencias basadas en perfil |
| Guardar tarea | Almacena el archivo y lo asocia al alumno |
Herramientas
Stack Frontend
HTML5
Estructura y contenido semántico.
CSS3
Diseño visual, colores y layouts (Flex/Grid).
JavaScript
Interactividad y lógica del lado del cliente.
React / Vue
Frameworks para interfaces dinámicas modernas.
Tendencias
Frontend Moderno
Las aplicaciones actuales son mucho más que simples páginas estáticas.
- SPA: Navegación sin recargar la página.
- Responsive: Se adapta a móviles y tablets.
- PWA: Webs que parecen apps instalables.
Gmail, Gmail, Discord Web y Google Maps son ejemplos de interfaces de alta complejidad.
El Lado del Servidor
Stack Backend
Node.js
JavaScript en el servidor (V8 Engine).
Laravel
Framework elegante para PHP moderno.
Django
Potente framework basado en Python.
.NET / Spring
Soluciones robustas empresariales (C#/Java).
Almacenamiento
Bases de Datos
Donde vive la información persistente de la aplicación.
Estructuradas en tablas fijas.
MySQLPostgreSQLSQLite
Flexibles y basadas en documentos.
MongoDBFirebaseRedis
El Puente
¿Cómo se comunican?
A través del protocolo HTTP y formatos como JSON.
Petición (Request)
Respuesta (Response)
El Camino del Dato
Flujo de una Petición
1
Usuario abre la página y hace clic.
2
Navegador envía solicitud al servidor.
3
Servidor (Backend) consulta la Base de Datos.
4
Frontend recibe datos y actualiza la vista.
Caso Real
Sistema Escolar
Frontend
Interfaz para ver notas, subir tareas y navegar clases.
Backend
Valida que seas alumno, guarda tus archivos y calcula promedios.
Base de Datos
Tablas de Alumnos, Maestros, Materias y Calificaciones.
Práctica
Actividad: Análisis Web
Selecciona dos aplicaciones web (ej. YouTube, Spotify) y analiza:
Frontend
¿Qué botones o menús ves?
Backend
¿Qué acciones procesa el servidor?
Datos
¿Qué información se está guardando?
Tecnología
¿Cuáles crees que se utilizan?
Resumen
Conclusión
- Frontend: Lo que vemos e interactuamos.
- Backend: Lo que procesa y protege la información.
- Bases de Datos: Donde guardamos todo.
- Colaboración: Ninguna parte funciona sola; el éxito depende de su comunicación.
"El desarrollo web moderno nace de la integración perfecta entre cliente y servidor."