Cuando abrimos un sitio web, todo parece sencillo: la página se carga, los botones funcionan, las imágenes están en su lugar. Pero detrás de esto hay una verdadera magia de interacción entre frontend y backendUno es responsable de lo que ves en la pantalla, el otro de lo que lo que sucede entre bastidores. Para entender cómo funciona la web moderna, analicemos estos roles con palabras sencillas.
El cliente es lo que ve el usuario.
Imagina que has entrado en la web de una tienda online. Botones, imágenes, campos de entrada, cesta: todo esto front-end (frontend). Es responsable de cómo se ve y se siente sitio web.
Se puede decir que el frontend es cara del sitio, su diseño, la lógica del lado del navegador y la interacción con el usuario.
HTML — esqueleto de la página (estructura)
CSS — apariencia (colores, sangrías, fuentes)
JavaScript — lógica e interactividad (animaciones, botones, ventanas emergentes)
Todo esto se hace en el navegador — en tu dispositivo.
El servidor y el backend son el «cerebro» de la aplicación
Ahora imagina que has hecho clic en «Añadir a la cesta». Alguien tiene que guardar tu elección, calcular el precio y preparar el pedido. Esto es lo que hace backend (backend).
El backend es lo que funciona en el servidor, «entre bastidores». Recibe solicitudes del cliente, las procesa y devuelve el resultado.
Ejemplo:
El cliente (navegador) envía una solicitud: "Añadir el producto n.º 123 al carrito del usuario n.º 45"
El backend acepta la solicitud
Registra los cambios en la base de datos
Envía la respuesta: «¡Listo! Producto añadido»
Tecnologías principales de backend:
Idiomas: Python, JavaScript (Node.js), Go, PHP, Java, C#
Bases de datos: PostgreSQL, MySQL, MongoDB
Marcos: Django, Express, Laravel, NestJS, Spring Boot
Cómo se comunican
Hay un intercambio constante de datos entre el front-end y el back-end a través de Solicitudes HTTP. Imagínalo como una conversación:
Cliente: «¡Hola, servidor! ¡Dame una lista de productos!»
Servidor: «¡Aquí tienes el JSON con los datos!»
El formato JSON es solo texto con datos:
{
"products": [
{ "name": "Laptop", "price": 99000 },
{ "name": "Mouse", "price": 2500 }
]
}
Dónde vive el servidor
Un servidor no es magia, sino un ordenador normal (a menudo potente y en algún lugar de un centro de datos). Está constantemente encendido y esperando solicitudes. Cuando visitas un sitio web, tu navegador se conecta a este servidor a través de Internet.
Introduce en el navegador:
codik.appDNS traduce el nombre en una dirección IP
El navegador envía una solicitud al servidor
El servidor responde con una página → el navegador muestra el resultado
Ejemplo de interacción
Acción | Frontend | Backend |
|---|---|---|
El usuario introduce su nombre de usuario y contraseña | Recopila datos y los envía al servidor | Los comprueba en la base de datos |
El usuario añade el producto al carrito | Muestra una animación de que el producto se ha añadido | Guarda el producto en la cesta del usuario |
El usuario abre la página «Perfil» | Muestra la interfaz y rellena los datos | Envía información sobre el usuario |
Por qué es importante entender la diferencia
Si quieres convertirte en desarrollador web, conocer la frontera entre el front-end y el back-end es clave. Comprenderás quién es responsable de qué, cómo se dividen las tareas en el equipo y dónde buscar un error si algo no funciona.
El front-end hace que la interfaz cobre vida.
El backend hace que los datos sean reales.
Y juntos crean la magia de Internet ✨
Si te ha gustado la explicación, te damos la bienvenida a Kodik ❤️
En el anexo Kodik puedes aprender paso a paso:
frontend (HTML, CSS, JavaScript);
backend (Python, Node.js);
e incluso hacer tu primer miniproyecto con un cliente y un servidor.
Y también tenemos Canal de Telegram, dónde estamos:
analizamos los temas de los artículos con palabras sencillas;
discutimos noticias de TI;
y bromeamos sobre la vida de los desarrolladores.
Únete - Canal de Telegram