¿Qué es la web?

01

¿Qué es la web?

Descubre cómo funciona internet y qué pasa cada vez que visitas una página web.

Cada vez que abres una página web, ocurre algo fascinante. En menos de un segundo, tu navegador envía un mensaje a un computador que puede estar al otro lado del mundo, ese computador procesa tu petición, prepara una respuesta y te la envía de vuelta. Todo eso sucede tan rápido que ni siquiera lo notas.

¿No te parece increíble? Millones de personas hacen esto mismo cada segundo, todos los días, y todo funciona gracias a un sistema elegante que vamos a entender juntos en este capítulo.

No necesitas saber programar para entender lo que viene. Solo necesitas curiosidad. Vamos a ello.

---

Clientes y servidores

Para entender cómo funciona la web, imagina que entras a un restaurante.

Tú eres el cliente. Te sientas en una mesa, abres el menú y decides qué quieres pedir. En el mundo web, tu navegador (Chrome, Firefox, Safari…) es ese cliente. Es quien hace las peticiones.

La cocina del restaurante es el servidor. Es donde se prepara lo que pediste. En la web, un servidor es simplemente un computador que está encendido las 24 horas del día, esperando recibir peticiones y responderlas.

¿Y el mesero? El mesero es la red, el intermediario que lleva tu pedido a la cocina y trae tu plato de vuelta.

Veamos el flujo completo:

  TÚ (Cliente/Navegador)
        |
        |  1. "Quiero ver www.ejemplo.com"
        |     (Petición / Request)
        ▼
  ┌─────────────┐
  │   INTERNET   │  ← El mesero que lleva y trae
  └─────────────┘
        |
        |  2. La petición llega al servidor
        ▼
  SERVIDOR (Computador remoto)
        |
        |  3. El servidor prepara la respuesta
        |     (HTML, CSS, imágenes...)
        ▼
  ┌─────────────┐
  │   INTERNET   │  ← El mesero vuelve con tu plato
  └─────────────┘
        |
        |  4. Tu navegador recibe la respuesta
        ▼
  TÚ VES LA PÁGINA WEB 🎉

Así de simple. Cada vez que visitas una página web, tu navegador (el cliente) le pide algo a un servidor, y el servidor le responde. A esto se le llama el modelo cliente-servidor, y es la base de toda la web.

💡Modelo cliente-servidor

Tu navegador (cliente) envía peticiones a un computador remoto (servidor), y el servidor responde con el contenido solicitado. Cuando alguien dice “mi página se cayó”, generalmente significa que el servidor dejó de responder.

---

URLs descompuestas

Cada vez que visitas un sitio web, escribes algo en la barra de direcciones de tu navegador. Eso que escribes se llama URL (Uniform Resource Locator), que en español sería algo como “localizador uniforme de recursos”. Suena complicado, pero es simplemente una dirección.

Piensa en una dirección postal:

• País: te dice en qué país buscar.
• Ciudad y calle: te acercan al lugar exacto.
• Número de casa: te llevan a la puerta correcta.

Una URL funciona igual, pero para encontrar cosas en internet. Vamos a desarmar una:

https://www.ejemplo.com/blog/mi-primer-articulo
  │         │                │
  │         │                └── Ruta (path)
  │         │                    "La habitación específica"
  │         │
  │         └── Dominio (domain)
  │              "La dirección de la casa"
  │
  └── Protocolo (protocol)
       "El idioma que se usa para comunicarse"

Protocolo: https://

El protocolo le dice al navegador cómo debe comunicarse con el servidor. Es como elegir el idioma de la conversación.

• http:// — HyperText Transfer Protocol. El protocolo básico de la web.
• https:// — La versión segura de HTTP. La “s” significa secure. Los datos viajan cifrados, como si enviaras tu carta en un sobre sellado en vez de una postal abierta.

Precaución

Hoy en día, si un sitio web usa http:// en vez de https://, tu navegador te mostrará una advertencia de “sitio no seguro”. Esto es especialmente importante en páginas donde ingresas contraseñas o datos personales.

Dominio: www.ejemplo.com

El dominio es el nombre del sitio web. Es la parte que memorizas y compartes con tus amigos: “entra a google.com”, “búscalo en wikipedia.org”.

Un dominio tiene partes:

• www — Es un subdominio. Hoy en día es opcional en la mayoría de sitios.
• ejemplo — El nombre del sitio.
• .com — La extensión o dominio de nivel superior (TLD). Hay muchas: .com, .org, .net, .dev, .es, .mx…

Ruta: /blog/mi-primer-articulo

La ruta indica qué página específica quieres ver dentro del sitio. Si el dominio es la dirección de un edificio, la ruta es el número de departamento.

• / — La página principal (como la entrada del edificio).
• /blog — La sección del blog.
• /blog/mi-primer-articulo — Un artículo específico dentro del blog.

Pro tip

Practica identificando las partes de estas URLs:

• https://www.youtube.com/watch?v=dQw4w9WgXcQ
• https://developer.mozilla.org/es/docs/Web
• https://github.com/tu-usuario/mi-proyecto

¿Puedes señalar el protocolo, el dominio y la ruta en cada una?

---

HTTP en 5 minutos

Ya sabes que tu navegador habla con servidores. Pero, ¿en qué idioma hablan? En HTTP (HyperText Transfer Protocol).

HTTP es simplemente un conjunto de reglas que definen cómo un cliente y un servidor se comunican. Funciona con dos conceptos muy simples: peticiones (requests) y respuestas (responses).

¿Qué es una petición (request)?

Cuando escribes una URL y presionas Enter, tu navegador envía una petición HTTP al servidor. Es como enviar una carta que dice:

“Hola, servidor. Soy el navegador de Carlos. Me gustaría ver la página /blog/mi-primer-articulo, por favor. Hablo español y acepto HTML.”

Técnicamente, una petición incluye:

• Método: qué quieres hacer (GET para pedir información, POST para enviar datos).
• URL: qué recurso quieres.
• Headers: información extra (qué idioma prefieres, qué tipo de contenido aceptas…).

¿Qué es una respuesta (response)?

El servidor recibe tu petición, la procesa y te envía una respuesta HTTP. Es como recibir la carta de vuelta:

“Hola, navegador. Todo bien, aquí tienes la página que pediste. Es un documento HTML con 5,342 bytes. ¡Que lo disfrutes!”

La respuesta incluye:

• Código de estado: un número que te dice si todo salió bien o si hubo un problema.
• Headers: información sobre la respuesta (tipo de contenido, fecha, tamaño…).
• Body: el contenido en sí (el HTML, las imágenes, etc.).

Códigos de estado: la respuesta rápida del servidor

Los códigos de estado son como las expresiones faciales del servidor. Con un solo número, te dice cómo le fue:

Código	Significado	Analogía
200	OK — Todo salió bien	😊 “Aquí tienes tu plato, ¡buen provecho!”
301	Movido permanentemente	📦 “Ese plato ya no está en el menú, pero te llevo al nuevo”
404	No encontrado	🤷 “No tenemos eso en el menú”
500	Error del servidor	🔥 “Se incendió la cocina, disculpa”

💡Códigos de estado HTTP

Los códigos que empiezan con 2xx significan éxito. Los que empiezan con 3xx son redirecciones. Los 4xx son errores tuyos (pediste algo que no existe). Los 5xx son errores del servidor (el servidor tuvo un problema interno).

Nota

El famoso error 404 que ves cuando una página no existe no es un fallo de tu computador. Es simplemente el servidor diciéndote: “Busqué lo que me pediste, pero no lo encontré”. Muchos sitios web diseñan páginas 404 creativas y divertidas. ¡Busca “best 404 pages” en Google para ver algunos ejemplos!

---

DNS: la guía telefónica de internet

Aquí viene una pregunta interesante: cuando escribes www.google.com, ¿cómo sabe tu navegador a cuál computador del mundo conectarse?

La respuesta es el DNS (Domain Name System), que funciona exactamente como la lista de contactos de tu teléfono.

Piensa en esto: cuando quieres llamar a tu amigo Luis, no marcas su número de memoria. Abres tus contactos, buscas “Luis” y tu teléfono marca el número por ti. Tú recuerdas nombres, tu teléfono conoce los números.

En internet pasa lo mismo:

• Tú recuerdas nombres de dominio: google.com, youtube.com, github.com.
• Los computadores se identifican con direcciones IP, que son números como 142.250.80.46.

El DNS es el sistema que traduce nombres a números. Cuando escribes google.com, esto es lo que pasa:

  TÚ escribes: google.com
        |
        ▼
  Tu navegador pregunta al DNS:
  "¿Cuál es la IP de google.com?"
        |
        ▼
  El DNS responde:
  "google.com → 142.250.80.46"
        |
        ▼
  Tu navegador se conecta a 142.250.80.46
        |
        ▼
  ¡Ves la página de Google!

Consejo

¿Quieres comprobarlo? Abre la terminal de tu computador y escribe ping google.com. Verás la dirección IP real a la que se traduce el dominio. No te preocupes si no sabes usar la terminal todavía, lo aprenderemos más adelante.

Sin el DNS, tendrías que memorizar números como 142.250.80.46 para visitar Google. Imagina tener que recordar una IP diferente para cada sitio web que visitas. El DNS hace que internet sea usable para los seres humanos.

Nota

Cuando registras un dominio (como miempresa.com), parte del proceso es configurar a qué dirección IP apunta ese nombre. Es como agregar un contacto nuevo a la guía telefónica global de internet.

---

⌨️Ejercicio: espía tu navegador

Ahora que entiendes la teoría, vamos a verla en acción. Tu navegador tiene una herramienta secreta llamada DevTools (herramientas de desarrollo) que te permite ver todas las peticiones HTTP que hace en tiempo real.

Es como tener una ventana a la cocina del restaurante para ver todo lo que está pasando.

1. Abre tu navegador favorito

   Chrome o Firefox funcionan perfectamente. Si usas otro navegador, los pasos serán muy similares.

2. Abre las DevTools

   Presiona F12 en tu teclado, o usa el atajo Ctrl + Shift + I (en Windows/Linux) o Cmd + Option + I (en Mac). Se abrirá un panel, generalmente en la parte derecha o inferior de tu pantalla.

3. Ve a la pestaña “Network” (Red)

   En la parte superior del panel de DevTools, verás varias pestañas. Haz clic en “Network” (o “Red” si tu navegador está en español).

4. Visita cualquier sitio web

   Con las DevTools abiertas, escribe una URL en la barra de direcciones (por ejemplo, https://www.wikipedia.org) y presiona Enter.

5. Observa las peticiones que aparecen

   Verás una lista de peticiones que se llenan como una cascada. Cada línea es una petición HTTP diferente. Tu navegador no solo pidió el HTML, sino también archivos CSS, imágenes, fuentes tipográficas, scripts de JavaScript y más.

6. Encuentra los códigos de estado

   Busca la columna “Status”. Verás números como 200, 301, 304. Ahora ya sabes lo que significan. Si ves un 200, el servidor respondió “todo bien”. Si ves un 301, hubo una redirección.

Pro tip

¿Te sorprende la cantidad de peticiones? Una página web moderna puede hacer decenas o incluso cientos de peticiones HTTP para cargar completamente. Cada imagen, cada archivo de estilo, cada script es una petición independiente. Haz clic en cualquiera de las peticiones de la lista para ver los detalles: headers, respuesta, contenido recibido y más.

---

Resumen

Has recorrido un camino importante en este primer capítulo. Recapitulemos lo que ahora sabes:

• La web funciona con el modelo cliente-servidor. Tu navegador (cliente) hace peticiones a computadores remotos (servidores), y estos le responden con el contenido que pediste.

• Una URL es una dirección web compuesta por tres partes principales: el protocolo (https://), el dominio (www.ejemplo.com) y la ruta (/pagina).

• HTTP es el protocolo de comunicación que usan clientes y servidores. Cada interacción es un ciclo de petición y respuesta.

• Los códigos de estado son la forma rápida en que el servidor te dice cómo le fue: 200 (todo bien), 404 (no encontrado), 500 (error interno).

• El DNS traduce nombres de dominio a direcciones IP, para que no tengas que memorizar números. Es la guía telefónica de internet.

• Las DevTools de tu navegador te permiten observar todas las peticiones HTTP en tiempo real, una herramienta que usarás constantemente como desarrollador web.

Estos conceptos son los cimientos de todo lo que construirás como desarrollador web. Cada vez que crees una página, configures un servidor o depures un error, volverás a estos fundamentos.

Siguiente capítuloTu primera página webVamos a pasar de la teoría a la práctica: vas a crear tu primera página web.

→