Cómo funciona la web

La web está en todas partes

La usamos más de lo que lo hacíamos antes – también en muchos lugares en los que no se ve. Porque «la web» es algo más que los sitios web que se visitan introduciendo una URL en el navegador.

No importa si revisa sus correos electrónicos en su teléfono móvil o si está enviando un tweet: está utilizando Internet (es decir, «la web»).

¿Cómo funciona todo eso? ¿Qué tecnologías están implicadas y qué necesitas aprender (y hasta qué punto) si quieres convertirte en un desarrollador web?

CSS – La Guía Completa

Únete a este completo curso de más de 20 horas para dominar CSS y aprender a crear hermosos sitios web.



JavaScript – La Guía Completa

¡Aprenda JavaScript desde cero para construir sitios web altamente interactivos y dinámicos en este curso práctico!

# Cómo Funcionan los Sitios Web

Comencemos con la forma más obvia de usar Internet: Usted visita un sitio web como academind.com.

En el momento en que introduces esta dirección en tu navegador y pulsas ENTER, suceden muchas cosas diferentes:

1. La URL se resuelve
2. Se envía una petición al servidor del sitio web
3. Se analiza la respuesta del servidor
4. Se renderiza la página y se muestra

En realidad, cada paso podría dividirse en otros múltiples pasos, pero para tener una buena visión general de cómo funciona todo, eso es algo que podemos ignorar aquí. Echemos un vistazo a los cuatro pasos.

Paso 1 – La URL se resuelve

El código del sitio web obviamente no está almacenado en su máquina y por lo tanto necesita ser recuperado de otra computadora donde está almacenado. Este «otro ordenador» se llama «servidor». Porque sirve a algún propósito, en nuestro caso, sirve al sitio web.

Entras en «academind.com» (eso se llama «un dominio») pero en realidad, el servidor que aloja el código fuente de un sitio web, se identifica a través de direcciones IP (= Protocolo de Internet). El navegador envía una «petición» (véase el paso 2) al servidor con la dirección IP que usted introdujo (indirectamente – usted, por supuesto, introdujo «academind.com»).

Una dirección IP suele tener este aspecto: 172.56.180.5 (aunque también hay una forma más «moderna» llamada IPv6 – pero vamos a ignorar eso por ahora). Puedes aprender más sobre las direcciones IP en Wikipedia.

¿Cómo se traduce el dominio «academind.com» a su dirección IP?

Hay un tipo especial de servidor en Internet – no sólo uno sino muchos servidores de ese tipo. Un llamado «servidor de nombres» o «servidor DNS» (donde DNS = «Domain Name System»).

El trabajo de estos servidores DNS es traducir dominios a direcciones IP. Puedes imaginar esos servidores como enormes diccionarios que almacenan tablas de traducción: Dominio => dirección IP.

Cuando usted introduce «academind.com», el navegador, por tanto, obtiene primero la dirección IP de dicho servidor DNS.

Por si se lo pregunta: El navegador conoce las direcciones de estos servidores de dominio de memoria, están programadas en el navegador por así decirlo.

Una vez conocida la dirección IP, avanzamos al paso 2.

Paso 2 – Se envía la petición

Con la dirección IP resuelta, el navegador se adelanta y hace una petición al servidor con esa dirección IP.

«Una petición» no es sólo un término. Realmente es una cosa técnica que ocurre entre bastidores.

El navegador agrupa un montón de información (¿Cuál es la URL exacta? ¿Qué tipo de solicitud debe hacerse? ¿Deben adjuntarse metadatos?) y envía ese paquete de datos a la dirección IP.

Los datos se envían a través del «Protocolo de Transferencia de Hipertexto» (conocido como «HTTP»), un protocolo estandarizado que define qué aspecto debe tener una solicitud (y una respuesta), qué datos pueden incluirse (y en qué forma) y cómo se enviará la solicitud. Puede obtener más información sobre HTTP aquí.

Como todo el proceso y el formato está estandarizado, no hay que adivinar cómo tiene que leer esa petición el servidor.

El servidor entonces maneja la petición adecuadamente y devuelve una llamada «respuesta». De nuevo, una «respuesta» es una cosa técnica y algo similar a una «petición». Se podría decir que es básicamente una «solicitud» en la dirección opuesta.

Al igual que una solicitud, una respuesta puede contener datos, metadatos, etc. Cuando se solicita una página como academind.com, la respuesta contendrá el código necesario para renderizar la página en la pantalla.

¿Qué ocurre en el servidor?

Eso lo definen los desarrolladores web. Al final, hay que enviar una respuesta. Esa respuesta no tiene que contener «un sitio web». Puede contener cualquier dato – incluyendo archivos o imágenes.

Algunos servidores están programados para generar sitios web dinámicamente en base a la solicitud (por ejemplo, una página de perfil que contiene sus datos personales), otros servidores devuelven páginas HTML pregeneradas (por ejemplo, una página de noticias). O se hacen ambas cosas, para diferentes partes de una página web. También hay una tercera alternativa: Páginas web pregeneradas pero que cambian su apariencia y datos en el navegador.

Para nuestro caso sencillo tenemos un servidor que devuelve el código para mostrar un sitio web. Así que vamos a continuar con el paso 3.

Paso 3 – La respuesta es analizada

El navegador recibe la respuesta enviada por el servidor. Esto por sí solo, no muestra nada en la pantalla sin embargo.

En cambio, el siguiente paso es que el navegador analiza la respuesta. Al igual que el servidor lo hizo con la solicitud. De nuevo, la estandarización impuesta por HTTP ayuda, por supuesto.

El navegador comprueba los datos y metadatos que se incluyen en la respuesta. Y basándose en eso, decide qué hacer.

Es posible que hayas tenido casos en los que un PDF se haya abierto en tu navegador. Eso ocurrió porque la respuesta informó al navegador de que los datos no son un sitio web, sino un documento PDF. Y el navegador trata de elegir el mejor mecanismo de manejo para cualquier tipo de datos que detecta.

Volviendo a nuestro escenario del sitio web.

En ese caso, la respuesta contendría una pieza específica de metadatos, que le dice al navegador que los datos de la respuesta son del tipo text/html.

Esto permite al navegador analizar los datos reales que se adjuntan a la respuesta como código HTML.

HTML es el principal «lenguaje de programación» (técnicamente, no es un lenguaje de programación – no se puede escribir ninguna lógica con él) de la web. HTML significa «Hyper Text Markup Language» y describe la estructura de una página web.

El código se parece a esto:

<h1>Breaking News!</h1><p>Websites work because browser understand HTML!</p>

<h1> y <p> son las llamadas «etiquetas HTML» y si quieres aprender más sobre HTML, esta serie es un gran lugar para ir.

Cada etiqueta HTML tiene algún significado semántico que el navegador entiende, porque HTML también está estandarizado. Por lo tanto, no hay que adivinar lo que significa una etiqueta <h1>.

El navegador sabe cómo analizar HTML y ahora simplemente recorre todos los datos de respuesta (también llamados «el cuerpo de la respuesta») para renderizar el sitio web.

Paso 4 – La página se muestra

Como se ha mencionado, el navegador recorre los datos HTML devueltos por el servidor y construye un sitio web basado en ellos.

Aunque es importante saber, que el HTML no incluye ninguna instrucción sobre el aspecto que debe tener el sitio (es decir, cómo debe tener estilo). En realidad, sólo define la estructura e indica al navegador qué contenido es un título, qué contenido es una imagen, qué contenido es un párrafo, etc. Esto es especialmente importante para la accesibilidad: los lectores de pantalla obtienen toda la información útil de la estructura HTML.

Una página que sólo incluya HTML tendría el siguiente aspecto:

No es tan bonito, ¿verdad?

Por eso hay otra tecnología importante (otro «lenguaje de programación», que no es realmente un lenguaje de programación): CSS («Cascading Style Sheets»).

CSS consiste en añadir estilo al sitio web. Eso se hace a través de «reglas CSS»:

h1 { color: blue;}

Esta regla colorearía todas las etiquetas <h1> de azul.

Reglas como esa pueden añadirse dentro del código HTML pero, normalmente, forman parte de archivos .css separados que se solicitan por separado.

Sin entrar en demasiados detalles aquí, eso tiene una implicación importante: Un sitio web puede estar formado por algo más que los datos de la primera respuesta que recibimos.

En la práctica, los sitios web obtienen muchos datos adicionales (a través de peticiones y respuestas adicionales) que se ponen en marcha una vez que ha llegado la primera respuesta.

¿Cómo funciona eso?

Bueno, el código HTML de la primera respuesta simplemente contiene instrucciones para obtener más datos a través de nuevas solicitudes – y el navegador entiende estas instrucciones:

<link rel="stylesheet" href="/page-styles.css" />

Junto con CSS, el navegador es capaz de mostrar páginas web como esta:

En realidad hay otro lenguaje de programación involucrado (esta vez, ¡es realmente un lenguaje de programación!): JavaScript.

No siempre es visible, pero todo el contenido dinámico que se encuentra en un sitio web (por ejemplo, pestañas, superposiciones, etc.) sólo es posible gracias a JavaScript. Permite a los desarrolladores web definir código que se ejecuta en el navegador (no en el servidor), por lo que JavaScript puede utilizarse para cambiar el sitio web mientras el usuario lo está viendo.

Como antes, si quiere aprender más, consulte nuestros recursos de JavaScript, por ejemplo nuestro curso completo.

Estos son los cuatro pasos que siempre están involucrados cuando entras en una dirección de página como academind.com y a partir de ahí ves el contenido de la web en tu navegador.

# Server-side vs Browser-side

Desde los cuatro pasos anteriores, has aprendido que podemos diferenciar dos «lados» principales cuando hablamos de la web: Lado del Servidor y Lado del Navegador (o: Lado del Cliente ya que también podemos acceder a Internet sin un navegador – ¡ver más abajo!).

Si estás interesado en convertirte en un desarrollador web, es importante saber que se utilizan diferentes tecnologías y lenguajes de programación para estos lados.

Lado del servidor

Necesitas lenguajes de programación del lado del servidor – es decir, lenguajes que no funcionan en el navegador pero que pueden ejecutarse en un ordenador normal (un servidor es al final un ordenador normal).

Los ejemplos serían:

• Node.js
• PHP
• Python

Importante: Con la excepción de PHP, también puede utilizar estos lenguajes de programación para otros fines que el desarrollo web.

Mientras que Node.js se utiliza principalmente para la programación del lado del servidor (aunque técnicamente no se limita a eso), Python también es muy popular para la ciencia de datos y el aprendizaje automático.

Lado del navegador

En el navegador, hay exactamente tres lenguajes/tecnologías que necesitas aprender. Pero mientras que los lenguajes del lado del servidor fueron alternativas, estos tres lenguajes del lado del navegador son todos obligatorios de conocer y entender:

• HTML (para la estructura)
• CSS (para el estilo)
• JavaScript (para el contenido dinámico)

# «Behind the Scenes» Internet

Hasta ahora, hemos hablado de sitios web. Es decir, el caso en el que introduces una URL (por ejemplo, «academind.com/aprender») en el navegador y obtienes un sitio web a cambio.

Pero Internet es más que eso. De hecho, lo utilizas para algo más que eso cada día.

La idea central de peticiones y respuestas es siempre la misma. Pero no todas las respuestas son necesariamente un sitio web. Y no todas las solicitudes quieren un sitio web.

Los metadatos que se adjuntan a las solicitudes y a las respuestas controlan qué datos se quieren y se devuelven. Por supuesto, ambas partes involucradas (es decir, el cliente y el servidor) necesitan apoyar a los solicitantes y los datos enviados.

No se puede solicitar un PDF de "academind.com" por ejemplo. Usted podría enviar una solicitud de este tipo, pero no obtendría de vuelta un PDF – simplemente porque no apoyamos este tipo de datos solicitados para esta URL específica.

Pero hay muchos servidores que se especializan en proporcionar URLs que devuelven ciertas piezas de datos. Estos servicios también se denominan «APIs» («Application Programming Interface»).

Por ejemplo, las aplicaciones móviles envían peticiones HTTP «invisibles» a dichas APIs (a URLs específicas que conocen) para obtener o almacenar datos. Por ejemplo, Twitter obtiene el feed de tweets.

Incluso en las páginas web se envían estas peticiones «invisibles». Si se suscribe a nuestro boletín de noticias (¡que por supuesto debería!), no se cargará ninguna página nueva. Porque los datos se intercambian entre bastidores. Aunque el cliente sea el navegador en este caso, la petición que se envía no quiere ninguna página web a cambio. Y la URL del servidor que la recibe no ofrece ningún sitio web – en su lugar, el servidor sabe cómo manejar su dirección de correo electrónico.

Podríamos entrar en mucho más detalle aquí, pero esto ya es un artículo largo. Ahora debe tener una buena comprensión de cómo funciona la web y qué tecnologías básicas están involucradas.