¿Qué es la Web?
La web es una red global de documentos y recursos interconectados a través de URLs y accesibles mediante navegadores. Permite a los usuarios interactuar con texto, imágenes, aplicaciones y servicios distribuidos.
La Web no es magia. Es un conjunto de tecnologías que permiten que desde un navegador puedas acceder a información y servicios distribuidos por todo el planeta. Como desarrollador Frontend, tu trabajo es construir experiencias dentro de ese ecosistema. Pero para hacerlo bien, necesitas entenderlo.
Dominios y DNS
Cada vez que visitas una web, lo que haces es pedir un recurso a través de una URL.
Por ejemplo, cuando escribes https://frontendleap.com, tu navegador:
- Pregunta a un servidor DNS qué dirección IP corresponde a ese dominio.
- Se conecta a esa IP usando el protocolo HTTPS.
- Solicita un documento HTML al servidor.
DNS (Domain Name System) actúa como la guía telefónica de Internet: convierte nombres legibles (frontendleap.com) en direcciones IP que las máquinas pueden entender.
El viaje completo (visual)
graph TD
A[Tu navegador] --> B[Router local]
B --> C[Proveedor]
C --> D[Internet]
D --> E[Servidor DNS]
E --> F[IP encontrada]
F --> G[Conexión directa]
G --> H[Servidor web]
H --> I[Respuesta HTML]
I --> J[Tu pantalla]
¿Quieres verlo en directo?
Puedes probar estos comandos en tu terminal para ver cómo funciona la Web "por debajo":
traceroute frontendleap.com # Muestra el camino que recorren los paquetes
curl -I https://frontendleap.com # Muestra los headers de respuesta HTTP
dig frontendleap.com # Consulta qué IP devuelve el DNS
En Windows: usa tracert y nslookup en lugar de traceroute y dig.
¿Qué significa "el camino que recorren los paquetes"?
Cuando usas traceroute, ves por cuántos nodos de red (routers) pasa una petición antes de llegar al servidor.
Cada línea es un "salto" (hop): primero tu router local, luego tu proveedor, luego la red troncal de Internet... hasta el destino.
traceroute frontendleap.com
Ejemplo:
1 192.168.1.1 # Tu router
2 10.x.x.x # Red del proveedor
5 madrid.as6453.net # Nodo en Madrid
9 frankfurt.as6453.net # Nodo en Frankfurt
...
Este camino es real y puede cambiar dependiendo de tu ubicación.
Verlo en directo te ayuda a entender que cada visita a una web es un viaje físico a través de la red.
Nota: Algunos nodos pueden no responder y aparecer como * * *. No significa que haya error, sino que están configurados para no contestar.
¿Qué devuelve dig?
❯ dig frontendleap.com
...
;; ANSWER SECTION:
frontendleap.com. 60 IN A 139.59.153.69
Esto significa que el dominio frontendleap.com apunta a la IP 139.59.153.69.
Ese es el número real que tu navegador necesita para iniciar la conexión.
Así es como funciona DNS: traduce un nombre a una dirección IP para que la Web funcione.
Verlo con tus propios ojos te ayuda a entender que detrás de cada visita hay una traducción y un viaje.
Client vs Server
Todo lo que haces en la Web implica una conversación entre dos partes:
- Cliente (Client): el navegador del usuario. Es donde vive tu código Frontend (HTML, CSS, JS).
- Servidor (Server): el backend. Es quien responde a las peticiones con datos o páginas.
Un ejemplo clásico:
// Send login data to backend
fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
headers: { 'Content-Type': 'application/json' }
})
Esa petición se envía al servidor, que procesa la lógica (comprobar credenciales, generar tokens, etc.) y responde. Tu código Frontend solo ve el resultado.
El flujo completo de una petición
graph TD
A[Cliente] --> B[HTTP Request]
B --> C[Servidor]
C --> D[Procesamiento]
D --> E[HTTP Response]
E --> F[Cliente]
¿Qué pasa en cada paso?
- Tu JS ejecuta fetch(): Crea una petición HTTP con método, headers y body.
- HTTP Request: Viaja por la red hasta el servidor.
- Servidor procesa: Ejecuta lógica, consulta una base de datos, etc.
- HTTP Response: Servidor envía respuesta con status code y datos.
-
Tu JS recibe: Puedes manejar el resultado con
.then()oawait.
¿Qué es el Backend?
Aunque aquí te formas como Frontend Developer, no puedes ignorar qué ocurre al otro lado:
- El backend gestiona la lógica de negocio, bases de datos, autenticación, envío de correos, pagos, etc.
- Usa tecnologías como Node.js, Python, Ruby, PHP, Java, etc.
- Es quien construye las API que tu Frontend consume.
Ejemplo: si haces una app de recetas, el Frontend muestra las recetas; el Backend las guarda, las busca, las actualiza o las elimina.
Hoy en día puedes usar servicios como Firebase, Supabase o servicios de terceros (Auth0, Stripe, etc.) para delegar parte del Backend sin implementarlo tú mismo. Esto se conoce como BaaS (Backend as a Service).
¿Entonces qué es "la Web"?
En términos simples:
La Web es un sistema distribuido de documentos y servicios conectados mediante enlaces e identificados por URLs.
Tu navegador los solicita. El servidor responde. Tú construyes lo que se ve.
URL vs URI (y por qué importa)
A veces verás los términos URL y URI usados como si fueran lo mismo. No lo son, aunque en la práctica moderna, URL es el más común.
- URI (Uniform Resource Identifier): identifica un recurso.
- URL (Uniform Resource Locator): identifica y localiza un recurso en la red.
Por ejemplo:
<https://frontendleap.com/roadmap>
Esto es una URL, porque no solo identifica el recurso (una página), sino que indica cómo acceder a él (https) y dónde (frontendleap.com).
En resumen:
Toda URL es una URI, pero no toda URI es una URL.
Como Frontend Developer, lo importante es que te acostumbres a usar "URL" cuando hables de direcciones web. Pero saber que hay una diferencia muestra que entiendes los fundamentos técnicos reales.
Ver definición técnica en RFC 3986
Ejercicios prácticos para consolidar
1. Investiga tu propia conexión
curl ifconfig.me
traceroute google.com
nslookup google.com
2. Analiza una web real
- Ve a cualquier web con DevTools abierto (Network tab).
- Identifica: HTML principal, CSS, JS, imágenes, APIs.
- ¿Cuántas peticiones se hacen en total?.
- ¿Cuál es la más lenta? ¿Por qué?.
3. Experimenta con APIs (con JS)
// Dummy API
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data));
¿Qué headers incluye la respuesta?. ¿Qué status code devuelve?.
Por qué importa para ti
Como Frontend Developer, entender cómo funciona la Web te permite:
- Escribir código que se adapta al medio (responsive, accesible, eficiente).
- Comunicarte mejor con backend y DevOps.
- Depurar errores reales de red, no solo de código.
- Optimizar carga, SEO, estructura... desde el conocimiento técnico, no la intuición.
- Usar herramientas AI de forma inteligente, sabiendo cuándo sus sugerencias tienen sentido.
No eres solo un maquetador. Eres parte de un sistema complejo. Entenderlo es el primer paso para dominarlo.
