🌍 Cómo funciona Internet
Módulo 1 - Capítulo 2 | Fundamentos de la Web
¿Alguna vez te has preguntado qué sucede en el segundo entre que escribes una URL y ves la página en tu pantalla? En este capítulo, descubrirás la fascinante tecnología que hace posible que Internet funcione. Entender estos conceptos te dará una base sólida para comprender cómo funcionan las páginas web que pronto estarás creando.
Internet: La red de redes
Antes de entender cómo funciona la web, necesitamos entender qué es Internet. Internet es una red global de computadoras conectadas entre sí que pueden comunicarse e intercambiar información.
💡 Piénsalo así:
Internet es como el sistema de carreteras del mundo: una infraestructura masiva que conecta ciudades (computadoras) entre sí. La World Wide Web (WWW) es como los vehículos que viajan por esas carreteras transportando información.
📌 Diferencia importante
Internet es la infraestructura física (cables, routers, servidores).
La Web es un servicio que funciona sobre Internet (páginas web, enlaces, navegadores).
Otros servicios que usan Internet incluyen: email, streaming de video, videollamadas, juegos online, etc.
Cliente y Servidor: Los dos protagonistas
El funcionamiento de la web se basa en un modelo simple pero poderoso: Cliente-Servidor. Cada vez que usas Internet, estás participando en esta danza entre clientes y servidores.
¿Qué es un Cliente?
Un cliente es cualquier dispositivo que solicita información. En el contexto de la web, el cliente más común es tu navegador web (Chrome, Firefox, Safari, etc.) ejecutándose en tu computadora, tablet o smartphone.
🖥️ El cliente:
- Solicita información a los servidores
- Muestra la información al usuario
- Interpreta el código HTML, CSS y JavaScript
- Gestiona la interacción del usuario
¿Qué es un Servidor?
Un servidor es una computadora potente que almacena páginas web y las entrega a los clientes cuando las solicitan. Los servidores están siempre conectados y disponibles para responder peticiones.
🌐 El servidor:
- Almacena archivos de páginas web (HTML, CSS, imágenes, etc.)
- Escucha peticiones de los clientes
- Procesa las solicitudes
- Envía la información solicitada de vuelta al cliente
💡 Una analogía perfecta:
Cliente: Eres tú en un restaurante (el comensal)
Servidor: Es la cocina del restaurante
Petición: Tu orden al mesero
Respuesta: El plato que te traen
Tú (cliente) pides comida (datos), la cocina (servidor) prepara tu orden y te la entrega.
¿Qué sucede cuando visitas una página web?
Ahora viene la parte más interesante: entender el viaje completo que hace tu petición. Vamos a desglosar paso a paso qué sucede cuando escribes www.ejemplo.com en tu navegador y presionas Enter.
El viaje de una petición web:
Escribes la URL
Introduces la dirección web (URL) en tu navegador: https://www.ejemplo.com
Resolución DNS
Tu navegador necesita saber dónde está el servidor. El DNS (Domain Name System) traduce el nombre de dominio "www.ejemplo.com" a una dirección IP como "192.168.1.1". Es como buscar la dirección física de un restaurante usando su nombre.
Establecimiento de conexión
Tu navegador establece una conexión con el servidor en esa dirección IP. Si la URL comienza con "https://", se crea una conexión segura y encriptada.
Envío de petición HTTP
Tu navegador envía una petición HTTP al servidor pidiendo la página web. Esta petición incluye información sobre tu navegador, idioma preferido, etc.
El servidor procesa la petición
El servidor recibe tu petición, la procesa y busca los archivos necesarios (HTML, CSS, imágenes, etc.).
El servidor envía la respuesta
El servidor envía de vuelta los archivos solicitados. Primero envía el archivo HTML, luego el navegador solicita los recursos adicionales (CSS, imágenes, etc.).
Tu navegador renderiza la página
Tu navegador recibe todos los archivos, interpreta el código HTML y CSS, y finalmente muestra la página web en tu pantalla.
⚡ Dato impresionante
Todo este proceso sucede en menos de un segundo (a menudo en milisegundos). Miles de computadoras pueden estar involucradas en el camino, y tu petición puede viajar miles de kilómetros, ¡pero sigue siendo casi instantáneo!
Entendiendo las URLs
La URL (Uniform Resource Locator) es la dirección única de cada recurso en Internet. Aprender a leer una URL te ayudará a entender mejor cómo está organizada la web.
Anatomía de una URL:
https://www.ejemplo.com:443/blog/articulo?id=123#seccion2
Protocolo:
https://
Cómo se comunicarán cliente y servidor (http o https)
Subdominio:
www
Subdivisión del dominio principal
Dominio:
ejemplo.com
El nombre único del sitio web
Puerto:
:443
Número de puerto (generalmente oculto, 443 para HTTPS)
Ruta:
/blog/articulo
Ubicación específica dentro del sitio
Parámetros:
?id=123
Información adicional para el servidor
Fragmento:
#seccion2
Sección específica dentro de la página
Navegadores web: Tu ventana a Internet
El navegador web es el software que usas para acceder a Internet. Es una de las aplicaciones más complejas y sofisticadas que usas regularmente.
¿Qué hace un navegador?
🔧 Funciones principales:
- Solicita páginas web a los servidores
- Interpreta el código HTML, CSS y JavaScript
- Renderiza (dibuja) la página en tu pantalla
- Gestiona el historial, marcadores y cookies
- Proporciona herramientas de desarrollo (que usarás pronto)
- Protege tu seguridad y privacidad
Los navegadores principales
Google Chrome
El más popular y con excelentes herramientas de desarrollo
Mozilla Firefox
De código abierto, enfocado en privacidad
Safari
Navegador de Apple, optimizado para Mac e iOS
Microsoft Edge
Basado en Chromium, integrado con Windows
💻 Para este curso:
Recomendamos usar Google Chrome o Firefox por sus excelentes herramientas de desarrollo. Estas herramientas te permitirán inspeccionar el código, probar cambios y depurar problemas fácilmente.
HTTP vs HTTPS: Seguridad en la web
Has visto que las URLs comienzan con "http://" o "https://". Esta pequeña letra "s" hace una gran diferencia.
| Característica | HTTP | HTTPS |
|---|---|---|
| Seguridad | No encriptado | Encriptado (SSL/TLS) |
| Datos | Visibles en tránsito | Protegidos |
| Autenticación | No verifica identidad | Verifica identidad del servidor |
| Indicador | "No seguro" en navegador | Candado 🔒 en navegador |
| Uso recomendado | Ya no se recomienda | Estándar actual |
🔒 Importante para desarrolladores
Hoy en día, todos los sitios web deberían usar HTTPS. Los navegadores marcan los sitios HTTP como "No seguro", y Google penaliza su posición en búsquedas. Cuando publiques tus proyectos, asegúrate de usar HTTPS.
Conceptos adicionales importantes
Cookies
Las cookies son pequeños archivos de texto que los sitios web guardan en tu navegador para recordar información sobre ti (sesiones, preferencias, carrito de compras, etc.).
Caché
El caché es una copia temporal de archivos web guardada en tu dispositivo. Cuando vuelves a visitar un sitio, el navegador puede cargar archivos desde el caché en lugar de descargarlos nuevamente, haciendo que la página cargue más rápido.
Código de estado HTTP
Cuando un servidor responde, envía un código de estado que indica qué sucedió:
- 200: OK - Todo salió bien
- 404: Not Found - Página no encontrada
- 500: Internal Server Error - Error del servidor
- 301/302: Redirección - Te envía a otra URL
Cierre
Ahora entiendes la magia detrás de Internet. Cada vez que visitas una página web, participas en esta increíble danza entre clientes y servidores, donde miles de computadoras trabajan juntas para entregarte información en milisegundos.
Este conocimiento no es solo teórico: cuando empieces a crear tus propias páginas web, entender este proceso te ayudará a crear mejores sitios, optimizar su rendimiento y solucionar problemas cuando algo no funcione como esperabas.
✨ Lo que has aprendido
- Cómo funciona el modelo cliente-servidor
- Qué sucede cuando visitas una página web
- Cómo interpretar y entender las URLs
- El papel crucial de los navegadores web
- La importancia de HTTPS para la seguridad
Próximo paso: En el siguiente capítulo, prepararemos tu entorno de desarrollo. Instalarás las herramientas necesarias y configurarás tu espacio de trabajo para empezar a crear páginas web. ¡Lo emocionante apenas comienza!
