¿Qué pasa cuando tecleas una URL? ¡Un viaje como el de Earl Hickey!

Mon Nov 11 2024

Desarrollo

¡Hola Chiquis!👋🏻 ¿Alguna vez te has preguntado qué sucede detrás de escena cuando tecleas esa larga cadena de letras y números en tu navegador y, ¡zas!, aparece la página web que buscas? Es como uno de esos viajes de redención de Earl Hickey, pero en lugar de tachar cosas de una lista, tu navegador está buscando tesoros digitales.

La lista de la redención digital Imagina que tu navegador es Earl Hickey, el protagonista de “My Name is Earl”. Earl tiene una lista de cosas por hacer para mejorar su karma, y cada vez que escribes una URL en tu navegador, es como si le dieras a Earl una nueva tarea para completar. Aquí te explico el proceso paso a paso con ejemplos:

La Lista de Earl (La Barra de Direcciones): Cuando escribes una URL en la barra de direcciones, es como si le dieras a Earl una nueva misión. Por ejemplo, escribes “www.example.com” y Earl anota en su lista: “Visitar www.example.com”.

const url = "www.example.com";
console.log(`Earl's new task: Visit ${url}`);

El primer paso: ¡La llamada! Cuando presionas Enter, es como si tu navegador estuviera haciendo una llamada telefónica a un enorme directorio telefónico mundial. Este directorio se llama DNS (Sistema de Nombres de Dominio) y su trabajo es traducir nombres como por ejemplo: Escribes “www.wikipedia.org” en la barra de direcciones, a direcciones numéricas que las computadoras entienden.
La travesía en carretera: Una vez que el DNS encuentra la dirección, tu navegador emprende un viaje por la autopista de internet. Es como cuando Earl y Randy iban en su coche destartalado, pero en vez de buscar un tesoro, están buscando un servidor web.
Randy, el Hermano de Earl (El DNS): Earl no puede hacer todo solo, así que llama a su hermano Randy para que le ayude a encontrar la dirección correcta. Randy es como el DNS (Sistema de Nombres de Dominio), que traduce la URL en una dirección IP, algo así como encontrar la dirección de una casa en un mapa. Ejemplo: Randy traduce “www.wikipedia.org” a la dirección IP “208.80.154.224”.

const dns = require('dns');

dns.lookup('www.example.com', (err, address) => {
    if (err) throw err;
    console.log(`Randy found the IP address: ${address}`);
});

Joy, la Exesposa de Earl (El Servidor Web): Una vez que Randy encuentra la dirección, Earl se dirige a Joy, quien representa el servidor web. Joy tiene todos los recursos que Earl necesita, como páginas HTML, imágenes y archivos CSS. Earl le pide a Joy que le entregue la página web que corresponde a la URL. Ejemplo: Joy busca en su almacén y encuentra la página principal de Wikipedia, lista para ser enviada.

const http = require('http');

http.get('http://www.example.com', (response) => {
    let data = '';

    response.on('data', (chunk) => {
        data += chunk;
    });

    response.on('end', () => {
        console.log('Joy delivered the webpage:', data);
    });
}).on('error', (err) => {
    console.log('Error:', err.message);
});

Crabman, el Amigo de Earl (El Protocolo HTTP/HTTPS): Crabman es el encargado de asegurarse de que la comunicación entre Earl y Joy sea clara y segura. Si están usando HTTPS, Crabman se asegura de que todo esté encriptado y protegido. Ejemplo: Crabman verifica que la conexión a “https://www.wikipedia.org” sea segura y encriptada.

const https = require('https');

https.get('https://www.example.com', (response) => {
    let data = '';

    response.on('data', (chunk) => {
        data += chunk;
    });

    response.on('end', () => {
        console.log('Crabman ensured a secure delivery:', data);
    });
}).on('error', (err) => {
    console.log('Error:', err.message);
});

Catalina, la Camarera (El Navegador): Finalmente, Catalina, la camarera del bar, es como el navegador que muestra la página web en tu pantalla. Ella se asegura de que todo esté bien presentado y fácil de entender para ti. Ejemplo: Catalina recibe la página de Wikipedia y la muestra en tu pantalla, con todos los textos, imágenes y enlaces en su lugar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
</head>
<body>
    <h1>Welcome to Example.com</h1>
    <p>This is a sample webpage delivered by Catalina.</p>
</body>
</html>

El Karma (La Experiencia del Usuario): Si todo sale bien y la página se carga correctamente, el karma de Earl mejora, y tú tienes una experiencia de usuario satisfactoria. Si algo falla, como un error 404, el karma de Earl baja, y tendrás que intentar de nuevo. Ejemplo: La página de Wikipedia se carga sin problemas, y puedes leer sobre cualquier tema que te interese. Si escribes mal la URL y obtienes un error 404, Earl tendrá que trabajar un poco más para encontrar la página correcta.

if (response.statusCode === 200) {
    console.log('Earl's karma improved: Page loaded successfully!');
} else {
    console.log(`Earl's karma dropped: Error ${response.statusCode}`);
}

La búsqueda del tesoro: Al llegar al servidor, tu navegador pide el tesoro: la página web que solicitaste. El servidor, amablemente, empaqueta toda la información (texto, imágenes, videos) en un paquete y lo envía de vuelta. ¡Eureka! El paquete llega a tu computadora y tu navegador comienza a desempaquetarlo y mostrarlo en la pantalla. ¡Voilà! Ya estás navegando por la web.

Los obstáculos en el camino Pero no todo es tan sencillo como parece. A veces, en el camino, pueden surgir algunos obstáculos:

El servidor está ocupado: Es como cuando Earl y Randy llegaban a un restaurante y todas las mesas estaban ocupadas. Tendrás que esperar un poco.
La página web está perdida: A veces, las páginas web se mudan o desaparecen. Es como cuando Earl buscaba a su ex-novia y descubría que se había ido a vivir a otro estado.
Un virus en el camino: ¡Cuidado con los peligros de internet! Al igual que Earl tenía que lidiar con los matones del barrio, tu navegador debe protegerte de los virus y hackers.

¡Y colorín colorado, este cuento se ha acabado! Así que la próxima vez que estés navegando por internet, recuerda que detrás de cada página web hay un complejo proceso que involucra a miles de computadoras trabajando juntas. ¡Es como una gran aventura!

¡Gracias por leer y déjame tus comentarios! 👇🏻

🚀 ¿Te ha gustado? Comparte tu opinión. Artículo completo, visita: https://lnkd.in/ewtCN2Mn https://lnkd.in/eAjM_Smy 👩💻 https://lnkd.in/eKvu-BHe https://dev.to/orlidev https://lnkd.in/ecHHabTD https://pin.it/2BuZ9N4n8 https://linktr.ee/orlidevs ¡No te lo pierdas!

Referencias: Imágenes creadas con: Copilot ( microsoft.com )

#PorUnMillóndeAmigos #MakeYourselfVisible

¿Qué pasa cuando tecleas una URL? ¡Un viaje como el de Earl Hickey!

https://my-million-friend-blog.vercel.app/blog/post-148/