Cómo funciona la Web, Parte II: Qué sucede cuando visitas una URL

Publicado: 2016-12-06

En la publicación anterior, hablamos sobre cómo surgió la Web. En esta publicación, daremos un paseo y veremos qué sucede cuando visitas una URL con tu navegador. También echaremos un vistazo a las tecnologías contemporáneas que se utilizan en la Web y cómo encajan todas juntas.

Las tecnologías involucradas, desde el momento en que presiona el botón Entrar hasta que ve una página web, son numerosas. En nuestra publicación anterior, hablamos sobre Hipertexto y HTTP, pero esto fue solo el comienzo:

Los servidores web (como apache2 y nginx) implementan el protocolo HTTP junto con algunas otras funciones que permiten a los navegadores web conectarse, solicitar y recibir datos web. HTTP es el canal por el cual los mensajes, las páginas web, las imágenes y los recursos “viajan” entre un servidor web y un navegador.

La web moderna es bastante exigente y los servidores web modernos han estado a la altura de ese desafío. La escalabilidad y la seguridad son las dos principales preocupaciones del mundo actual. Los servidores web modernos son altamente escalables (capaces de manejar más de 10,000 conexiones simultáneas), brindan múltiples opciones para el equilibrio de carga, admiten SSL/TLS y HTTP/2. La mejora clave de HTTP/2 sobre HTTP/1.1 es, sin duda, la gestión superior de transmisión de paquetes. La transmisión de video es omnipresente en la actualidad y HTTP/1.1 no pudo manejar adecuadamente las necesidades de todos los diferentes dispositivos, capacidades de red y cantidad de usuarios de Internet en la actualidad.

HTML (HyperText Markup Language) es un lenguaje que utiliza etiquetas para representar documentos de hipertexto estructurados que pueden ser entendidos por su navegador web.

Su encarnación más reciente, HTML5, introdujo muchas mejoras y limpiezas en el idioma, pero las adiciones más impresionantes fueron el soporte nativo de video y audio, gráficos 2D y 3D, así como el almacenamiento de bases de datos locales. Estas mejoras efectivamente dejaron obsoletas tecnologías multimedia como Flash y Silverlight.

CSS (hojas de estilo en cascada) es una tecnología utilizada por los diseñadores web para facilitar los cambios visuales en muchas páginas web.

El código CSS puede residir dentro de HTML o, como suele ser el caso, son archivos separados a los que hace referencia la página HTML. La utilidad de CSS es que separa el contenido de la presentación, brindando a los diseñadores web una herramienta poderosa para administrar de manera centralizada todos los detalles estéticos de un sitio web.

El back-end (por ejemplo, PHP o Java) es un código mezclado con HTML, que el servidor web ejecuta cuando finaliza el cálculo.

Hoy en día todos los sitios web son dinámicos; lo que significa que ya no se sirven archivos .html simples al navegador. Todos los lenguajes modernos, con la adición de bibliotecas de software llamadas marcos web, se pueden usar como una solución de back-end para un sitio web. El reciente lanzamiento de PHP 7 y las brillantes mejoras de rendimiento y características que introdujo, así como HHVM de Facebook, han llevado todo el proceso al siguiente nivel.

El front-end (Javascript) es un código que también se mezcla con HTML, pero se ejecuta localmente en su computadora, mediante su navegador web.

Quizás el desarrollo más asombroso e impresionante en la web moderna ha sido Javascript. Pasó de ser el hermano menor simplón de Java, utilizado para hacer menús y mostrar ventanas emergentes, a un poderoso lenguaje de programación utilizado tanto en el cliente como en el servidor. En estos días, puede hacer cualquier cosa en un navegador web y con gran velocidad. El motor Javascript V8 de Google ha sido un cambio tecnológico importante.

Qué sucede cuando visitas una URL

La Web es una cornucopia de diferentes tecnologías, pero hay dos conceptos cuya función básica se ha mantenido inalterada incluso hoy en día. El navegador web y el servidor web. Estos operan en el modelo de cliente/servidor "antiguo" que es el siguiente: un cliente se conecta a un servidor usando una dirección (una IP o un nombre) y solicita algo. El servidor, entonces, responde al cliente y así sucesivamente. Los clientes se conectan a los servidores, pero no al revés. Aunque la tecnología web actual ha alterado significativamente este modelo, lo usaremos para explicar el proceso de manera simplificada.

Entonces, enciende su navegador favorito y visita una página web. Desde el momento en que presiona la tecla Intro hasta que finalmente ve la página mostrada, sucede lo siguiente:

Su navegador primero llama a un módulo de software llamado resolución de DNS que está configurado en su computadora y solicita la dirección IP que corresponde a la URL que ingresó.
DNS (Sistema de nombres de dominio) es un servicio central de Internet que mapea los nombres de las computadoras (como www.pressidium.com ) en direcciones IP. Las direcciones IP son lo que las computadoras conectadas a Internet entienden y pueden conectarse. Exploraremos qué es y cómo funciona en nuestra próxima publicación.
Su navegador, entonces, inicia una conexión a esa dirección IP, utilizando el puerto 80 o 443.
La dirección IP significa el servidor, mientras que el número de puerto se refiere al servicio al que desea conectarse. Todos los servidores web se ejecutan de forma predeterminada en el puerto 80, mientras que el puerto 443 se utiliza para conexiones web seguras.
El servidor web procesa la URL que ingresó y le da el control al back-end. El código de back-end genera la página HTML y la entrega al servidor web. El servidor web, finalmente, envía la página HTML al navegador, a través del canal HTTP.
Están sucediendo muchas cosas en los milisegundos que tarda el servidor web en devolver el HTML. El código de back-end en un sitio web generalmente se conecta a una base de datos, ejecuta consultas, recupera datos, contacta con otros servicios de back-end y finalmente ensambla todo en un documento HTML. No es realmente un archivo discreto lo que está solicitando sino un recurso dinámico , que se genera sobre la marcha utilizando una amplia variedad de tecnologías y componentes diferentes.
Su navegador web recibe la página HTML, cierra la conexión con el servidor web y luego la muestra en su pantalla. Ejecuta el código Javascript presente en el diseño web HTML.Modern sigue un enfoque llamado diseño receptivo. Este enfoque utiliza HTML, CSS y Javascript para adaptar dinámicamente el diseño de una página web, según el dispositivo que utilice para navegar. Esto se ha vuelto muy importante en estos días con el crecimiento explosivo de los dispositivos móviles y tabletas.

¿Que sigue?

Hasta ahora, hemos abordado brevemente una variedad de tecnologías web modernas y lo que sucede cuando visita una URL. Sin duda, las tecnologías web son complejas y numerosas, y no pueden cubrirse satisfactoriamente en un solo artículo. Con esta serie de publicaciones, nuestro principal objetivo es brindarle una vista panorámica de Internet y la Web.
En la próxima entrega de esta interesante serie, visitaremos otra importante infraestructura de Internet, el Sistema de Nombres de Dominio. ¡Sin él nada funcionaría realmente! (al menos para nosotros los humanos).