¿Cómo se construye una web?

03

¿Cómo se construye una web?

Frontend, backend, fullstack — descubre los tres caminos del desarrollo web.

Hasta ahora sabes qué es la programación y por qué merece la pena aprenderla. Pero cuando alguien dice “voy a construir una web”, ¿qué significa exactamente? ¿Qué partes tiene una página web? ¿Quién se encarga de qué?

En este capítulo vamos a desglosar las tres grandes áreas del desarrollo web y a entender dónde encaja cada tecnología. Cuando termines de leer, vas a poder hablar de frontend, backend y fullstack sin que te suene a ciencia ficción.

Frontend: lo que ves

El frontend es todo lo que el usuario ve e interactúa en una página web. Cuando abres Instagram, Netflix o la web de tu banco, todo lo que aparece en tu pantalla es frontend.

Para entenderlo mejor, imagina que una página web es una casa. Para construirla necesitas tres cosas fundamentales:

HTML — Los ladrillos

Es la estructura de la página. Define qué elementos existen: títulos, párrafos, imágenes, botones, formularios… Sin HTML no hay casa, solo un terreno vacío.

CSS — La pintura y decoración

Le da estilo a la estructura. Colores, tipografías, tamaños, espaciados, animaciones… CSS convierte una casa de obra gris en un hogar bonito y acogedor.

JavaScript — La electricidad

Aporta interactividad. Que un menú se abra al hacer clic, que un formulario valide tus datos, que una imagen cambie automáticamente… Sin JavaScript la casa existe, pero no tiene luz ni enchufes.

Estas tres tecnologías son los pilares del frontend y las vas a aprender en este libro. Todo lo demás (React, Vue, Angular, Tailwind…) son herramientas construidas sobre estos tres pilares.

Consejo

No necesitas dominar las tres a la vez. Primero se aprende HTML, luego CSS y después JavaScript. Es un camino paso a paso, y en este libro lo vamos a recorrer juntos en ese orden.

¿Qué hace un desarrollador frontend?

Un desarrollador frontend se encarga de:

• Convertir un diseño visual en código que el navegador pueda mostrar.
• Hacer que la web se vea bien en móviles, tablets y ordenadores.
• Asegurarse de que los botones funcionen, los formularios envíen datos y la experiencia sea fluida.
• Optimizar la velocidad de carga para que nadie se desespere esperando.

Backend: lo que no ves

Si el frontend es lo que ves, el backend es todo lo que ocurre detrás del telón. Es la parte del desarrollo que se ejecuta en un servidor (un ordenador remoto) y que el usuario nunca ve directamente.

La analogía del restaurante

Piensa en un restaurante:

• El comedor es el frontend. Es lo que ves: las mesas, la decoración, el menú, el camarero que te atiende.
• La cocina es el backend. No la ves, pero es donde ocurre la magia. Los cocineros preparan tu plato, se aseguran de que los ingredientes estén frescos y de que el pedido salga correcto.
• El camarero es la API (ya hablaremos de esto). Lleva tu pedido del comedor a la cocina y trae tu plato de vuelta.

Sin la cocina, el restaurante no funciona. Sin el backend, la web tampoco.

¿Qué hace el backend?

El backend se encarga de:

• Almacenar datos en bases de datos (usuarios, productos, mensajes…).
• Procesar información (calcular precios, verificar contraseñas, generar reportes).
• Gestionar la seguridad (que nadie acceda a datos que no le corresponden).
• Enviar respuestas al frontend cuando este le pide información.

Lenguajes del backend

Mientras que el frontend usa principalmente HTML, CSS y JavaScript, en el backend hay más variedad:

• Node.js — JavaScript, pero en el servidor. Si ya sabes JS del frontend, puedes usarlo también aquí.
• Python — Muy popular, fácil de leer y usado en inteligencia artificial, ciencia de datos y web.
• PHP — El lenguaje detrás de WordPress y millones de webs. Sigue muy vivo.
• Java — Muy usado en grandes empresas, aplicaciones bancarias y sistemas robustos.

Nota

No necesitas aprender todos los lenguajes de backend. Con dominar uno ya puedes construir aplicaciones completas. Muchos desarrolladores eligen Node.js porque les permite usar JavaScript tanto en el frontend como en el backend.

Fullstack: las dos cosas

Un desarrollador fullstack es alguien que puede trabajar tanto en el frontend como en el backend. Es como un cocinero que también sabe atender mesas y decorar el comedor.

¿Suena a superhéroe? En realidad no es mejor ni peor que especializarse en una sola área. Simplemente es un camino diferente:

• Un especialista frontend conoce a fondo el diseño, la accesibilidad, las animaciones y la experiencia de usuario.
• Un especialista backend domina las bases de datos, la seguridad, la arquitectura de servidores y la optimización.
• Un fullstack tiene conocimientos de ambos lados, aunque quizá no tan profundos en cada uno.

Pro tip

Si estás empezando, no te preocupes por elegir ya. Aprende primero los fundamentos del frontend (que es lo que veremos en este libro) y después explora el backend. Con el tiempo, tú decides si quieres especializarte o abarcar ambos mundos.

Cómo hablan frontend y backend

Vale, el frontend muestra cosas y el backend las procesa. Pero, ¿cómo se comunican entre sí? Aquí es donde entran las APIs.

💡API (Application Programming Interface)

Una API es un conjunto de reglas que permite que dos programas se hablen entre sí. En la web, es el “sistema de pedidos” entre el frontend y el backend: el frontend pide datos, la API los transmite, y el backend responde.

En la web funciona así:

1. El frontend envía una petición al backend: “Dame la lista de productos”.
2. El backend busca esa información en la base de datos.
3. El backend responde con los datos en un formato que ambos entienden.

JSON: el idioma común

Ese formato compartido suele ser JSON (JavaScript Object Notation). Es una forma sencilla de estructurar datos que tanto el frontend como el backend pueden leer sin problemas.

Un ejemplo de JSON:

{
  "nombre": "María",
  "edad": 25,
  "ciudad": "Madrid"
}

No te preocupes si ahora mismo no lo entiendes del todo. Cuando lleguemos a JavaScript lo vas a ver con mucho más detalle. Por ahora solo necesitas saber que JSON es el idioma que usan frontend y backend para entenderse.

Nota

JSON se parece mucho a cómo escribirías una lista organizada. Tiene “claves” (como nombre) y “valores” (como "María"). Es legible tanto para humanos como para máquinas.

Tipos de desarrollador web

Ahora que conoces las áreas, veamos los roles más comunes en el desarrollo web:

Rol	Trabaja con	Enfoque
Frontend	HTML, CSS, JavaScript, frameworks como React o Vue	Lo que el usuario ve y toca
Backend	Node.js, Python, PHP, Java, bases de datos	Lógica del servidor, datos y seguridad
Fullstack	Todas las anteriores	Conectar ambos mundos
DevOps	Servidores, despliegues, automatización	Que todo funcione y no se caiga

Consejo

DevOps es un rol más avanzado que se encarga de la infraestructura: servidores, despliegues automáticos, monitorización… No es algo en lo que debas pensar ahora, pero está bien saber que existe.

Dónde encaja cada tecnología

Cuando estás empezando, es fácil perderse con tantos nombres. Esta tabla te sirve de mapa para ubicar cada tecnología:

Tecnología	Tipo	Se usa para
HTML	Frontend	Crear la estructura de la página
CSS	Frontend	Darle estilo y diseño visual
JavaScript	Frontend / Backend	Añadir interactividad (y lógica en el servidor con Node.js)
React	Frontend (librería)	Construir interfaces de usuario dinámicas
Node.js	Backend	Ejecutar JavaScript en el servidor
Bases de datos	Backend	Almacenar y consultar información (MySQL, PostgreSQL, MongoDB…)
Git	Herramienta	Controlar versiones del código y trabajar en equipo

Nota

No necesitas aprender todas estas tecnologías de golpe. Este libro se centra en HTML, CSS y JavaScript, que son la base de todo. Las demás las irás descubriendo a medida que avances en tu camino.

Resumen

Recapitulemos lo que hemos aprendido en este capítulo:

• Frontend es la parte visible de la web. Se construye con HTML (estructura), CSS (estilo) y JavaScript (interactividad).
• Backend es la parte invisible. Se encarga de servidores, bases de datos y lógica de negocio.
• Fullstack combina ambas áreas. No es mejor ni peor, es un camino diferente.
• Frontend y backend se comunican a través de APIs usando un formato llamado JSON.
• Hay distintos roles en el desarrollo web, y cada uno se especializa en áreas diferentes.
• Cada tecnología tiene su lugar: unas son de frontend, otras de backend y algunas sirven para ambos.

Lo más importante es que no necesitas saberlo todo desde el principio. Este libro te va a guiar paso a paso, empezando por lo fundamental.

Siguiente capítuloHerramientas del desarrolladorConoce las herramientas esenciales: DevTools, VS Code y extensiones.

→