Este artículo es parte del Curso Arquitectura Web. No olvides ver todo el programa y acceder a cada uno de los capítulos desde aquí.

Este es tal vez uno de los temas en los que la mayoría de los que desarrollan páginas web tienen dudas. ¿Qué pasa entre mi navegador en casa y el servidor web? Es una pregunta de alto calibre como “¿De dónde vienen los bebés mamá?” Este es el momento de que conozcan un poco más acerca de este tema.

Te sentaste y escribiste “google.com” en tu navegador, aparece la imagen colorida de google. Así de simple.

Algún tipo de fuerza mística o mágica hace que la señal invisible de tu wireless o el cable que llega a la pared permita ver esa imagen y permitirte “navegar en la web”.

Hoy vamos a dejar de creer en la magia y en lo místico y vamos a desenmascarar una parte de esa cruda realidad, será solo un poco ya que iremos por etapas, para no abrumarlos con mucha complejidad.

Aproximación al mundo real

En este gráfico voy a presentar de forma muy abreviada cómo funciona la comunicación entre el  PC de casa y Google.

navegador_servidor_web_2

Una aproximación acerca de lo que sucede cuando navegamos en la red para ir a google.

Esto solo con el fin de quitarles la imagen de “magia” de la mente y darles la bienvenida al mundo real. O pueden seguir creyendo en la Matrix.

Entre el navegador e internet

Usted inicia su petición: “google.com” El navegador a través de su conexión de red arma un paquete de datos con su solicitud e IP y la envía a través de la red donde un DNS (que explicaré más adelante) traduce el nombre de “google.com” a su dirección IP 173.194.42.104 y reenvia la petición exactamente a esa dirección en internet, donde, el servidor web de google generará una respuesta y la devolverá a la IP de origen (nuestra computadora).

navegador_servidor_web_3

Así es, el Navegador se encarga de tomar esa petición de “google.com” y arma un paquete con información acerca de esa solicitud, el cual viaja por internet llega al servidor web, el cual lo procesa y genera una respuesta, la respuesta viaja el camino inverso hasta tu computadora.

En la respuesta vienen muchos archivos, el anvegador, como hablamos en el capítulo anterior, es el encargado de traducir el contenido e imágenes de esos archivos en algo visible.

Aún podríamos extender más esta explicación, pero eso será más adelante.

El juego del teléfono descompuesto

telefono_descompuesto

En mi infancia teníamos un juego llamado “teléfono descompuesto” una hilera de chicos se sienta uno junto a otro. En uno de los extremos se dice un mensaje en el oído del chico que se tiene al lado, ese mensaje se transmite sucesivamente del mismo modo a través de cada chico hasta el ultimo, quien debe decir el mensaje tal cual lo recibió.

Algo similar sucede con lo que pasa entre su navegador e internet. Es como si usted hiciera una pregunta, su pregunta es “google.com”, alguien escucha esa pregunta y la transmite a alguien más hasta que llega al final donde regresa una respuesta.

Tal como en el juego, suele pasar que alguno de los miembros que transmite el mensaje lo hace mal o no está disponible, incluso alguno en un acto de maldad cambia el mensaje y la respuesta que obtenemos no es la que esperamos (como cuando tenemos problemas con internet).

También pudimos equivocarnos y en vez de preguntar por “google.com” queríamos decir “facebook.com” y obviamente la respuesta que esperamos obtener no será la adecuada.

Si lo vemos bien, esto se trata de un tema de comunicación, Yo pregunto por algo, eso se redirige a otra parte, alguien sabe de que se trata y finalmente alguno responde mi petición.

Más adelante seguiremos aprendiendo sobre esto.

¿Qué son los puertos 80 y 443?

A que no sabías que el puerto por defecto para navegar por internet es el 80. ¿Y qué carajos es un puerto?

Bueno, en el mundo de las computadoras y específicamente en todo lo relacionado con redes, existen los conceptos de “puerto”, “socket”, “tcp/ip” y otro montón de términos que de primera mano pueden resultarles complejos, trataré de explicarles el concepto de “puerto” a través de el siguiente ejemplo.

puertos_orejasImaginen a un hombre con muchas orejas, digamos que tiene 6 orejas, una a una por toda su cabeza o en el mismo lado de la cabeza. Puede sonar aterrador pero algo así pasa en una computadora, tiene muchas orejas por donde escucha.

La cualidad de nuestro hombre con muchas orejas es que, solo puede escuchar un determinado idioma en cada una, es decir, por la primera oreja escucha español, por la segunda portugués, por la tercera alemán, por la cuarta chino y así sucesivamente…

Está claro que, si le hablamos en Alemán a la oreja que escucha en Portugués, nuestro hombre no entenderá nada, pero si le hablas portugués a la oreja que escucha portugués entonces podrás establecer una comunicación.

Del mismo modo funcionan los puertos. Cada puerto tiene un número y está destinado a un propósito. Específicamente el puerto 80 es el encargado de la comunicación web y por ejemplo el 443 se encarga también de la comunicación web, pero con una encriptación en SSL es decir, que es una comunicación encriptada (securizada).

Para entender mejor el tema de la encriptación, imaginen que le hablamos Español a la oreja que escucha Español. Pero de antemano hacemos un acuerdo de un juego de palabras (como los juegos de los chicos “el idioma chu, fa” u otro parecido) por ejemplo:

Chu – Pe Fa -rro, Chu -Bo, Fa-nito = Perro Bonito

Sigue siendo español, pero con un código pre establecido que solo podrá ser decodificado por el que sepa de qué se trata.

Observen como se agregan las palabras “Chu” y “Fa” que no significan nada, solo tratan de “ocultar el mensaje”, algo más complejo sucede en el proceso de encriptación, pero como dije, es para hacerse a la idea.

¿Cómo ver los puertos abiertos en nuestra computadora?

Muy sencillo, en Linux:

En Windows:

La salida de estos comandos les mostrarán algunos de los puertos abiertos en sus computadoras. Tal vez no lo comprendan del todo en este momento, pero más adelante lo harán, lo prometo.

También pueden obtener ayuda ejecutando:

Headers “cabeceras” y métodos POST, GET

¿Recuerdan el gráfico anterior? Como describí antes, nosotros preguntábamos algo y obteníamos una respuesta.

navegador_servidor_web_3

Bien, pues básicamente esa “pregunta – respuesta” es la que viene contenida dentro del protocolo HTTP. Observen por ejemplo:

http://www.google.com

Ese comienzo “http” es el protocolo de transferencia de hipertexo “Hypertext Transfer Protocol” y las cabeceras son parte de la estructura interna de este método de comunicación.

POST y GET son métodos que se utilizan dentro de las cabeceras (aunque hay muchos otros y podemos crear métodos propios) de una forma simple “POST” envía datos y “GET” obtiene datos.

Una cabecera define la “pregunta – respuesta” que viaja a través de HTTP, cuando escriben “http://www.google.com” esto es lo que sucede en el lenguaje de la web:

Para entender más acerca del funcionamiento de “/” y “*” como raíz y comodines, sigan el curso introductorio de Linux.

La explicación es bastante simple:

  • GET / (Get del inglés “obtener” y la barra “/”) son el inicio de una operación. La barra significa la raíz del sitio “la página principal”, explicando de forma simple cuando decimos “GET /” estamos diciendo “Tráeme la página principal”
  • User-Agent: Es el agente con el que consultamos la web, un agente puede ser cualquier programa que lea HTTP, por ejemplo los navegadores (Chrome, Mozilla, Opera, Iceweasel) o programas como CURL o WGET. Si leen bien esa segunda línea, podrán ver que yo utilizo wget.
  • Accept: Define qué tipo de contenido aceptaremos, aquí los asteriscos son “comodines” y lo que dice es que traerá todo lo que venga de la barra y lo que le siga.
  • Host: El host que solicitamos “google.com”
  • Connection: Controla la conexión entre el origen-destino.

Y todo esto ha sucedido tan solo con solicitar “www.google.com” a través del navegador. Pueden conocer muchas cabeceras disponibles revisando este enlace de Wikipedia.