Como a Web funciona, Parte II: O que acontece quando você visita uma URL

Publicados: 2016-12-06

No post anterior, falamos sobre como a Web surgiu. Neste post, vamos dar uma volta e ver o que acontece quando você visita uma URL com seu navegador. Também veremos as tecnologias contemporâneas usadas na Web e como todas elas se encaixam.

As tecnologias envolvidas, desde o momento em que você pressiona o botão Enter até a visualização de uma página da web, são inúmeras. Em nosso post anterior falamos sobre Hipertexto e HTTP, mas isso foi apenas o começo:

Servidores da Web (como apache2 e nginx) implementam o protocolo HTTP junto com algumas outras funções, que permitem que os navegadores da Web se conectem, solicitem e recebam dados da Web. HTTP é o canal pelo qual mensagens, páginas web, imagens e recursos “viajam” entre um servidor web e um navegador.

A web moderna é bastante exigente e os servidores web modernos estão à altura desse desafio. Escalabilidade e segurança são as duas principais preocupações do mundo de hoje. Os servidores web modernos são altamente escaláveis (capazes de lidar com mais de 10.000 conexões simultâneas), oferecem várias opções para balanceamento de carga, suportam SSL/TLS e HTTP/2. A principal melhoria do HTTP/2 sobre o HTTP/1.1 é, sem dúvida, o gerenciamento superior de streaming de pacotes. O streaming de vídeo é difundido hoje e o HTTP/1.1 não conseguiu lidar adequadamente com as necessidades de todos os diferentes dispositivos atuais, capacidades de rede e quantidade de usuários da Web online.

HTML (HyperText Markup Language) é uma linguagem que usa tags para representar documentos de hipertexto estruturados que podem ser entendidos pelo seu navegador da web.

Sua mais nova encarnação, HTML5, introduziu muitas melhorias de linguagem e limpeza, mas as adições mais impressionantes foram o suporte nativo de vídeo e áudio, gráficos 2D e 3D, bem como armazenamento de banco de dados local. Essas melhorias efetivamente obsoletas tecnologias multimídia como Flash e Silverlight.

CSS (Cascading Style-sheets) é uma tecnologia usada por web designers para facilitar as mudanças visuais em muitas páginas da web.

O código CSS pode residir em HTML ou, como geralmente é o caso, são arquivos separados, sendo referenciados pela página HTML. A utilidade do CSS é que ele separa o conteúdo da apresentação, dando aos web designers uma ferramenta poderosa para gerenciar centralmente todos os detalhes estéticos de um site.

Back-end (por exemplo PHP ou Java) é um código misturado com HTML, que é executado pelo servidor web quando a computação termina.

Hoje em dia todos os sites são dinâmicos; significando que não há mais nenhum arquivo .html simples servido ao navegador. Todas as linguagens modernas, com a adição de bibliotecas de software chamadas estruturas da Web, podem ser usadas como uma solução de back-end para um site. O recente lançamento do PHP 7 e as brilhantes melhorias de desempenho e recursos que ele introduziu, bem como o HHVM do Facebook, levaram todo o processo para o próximo nível.

Front-end (Javascript) é um código também misturado com HTML, mas é executado localmente no seu computador, pelo seu navegador web.

Talvez o desenvolvimento mais surpreendente e impressionante na web moderna tenha sido o Javascript. Ele deixou de ser o irmão mais novo simplório do Java, usado para fazer menus e exibir pop-ups, para uma poderosa linguagem de programação usada tanto no cliente quanto no servidor. Hoje em dia, ele pode fazer qualquer coisa em um navegador da Web e com grande velocidade. O mecanismo Javascript V8 do Google tem sido um grande divisor de águas tecnológico.

O que acontece quando você visita um URL

A Web é uma cornucópia de diferentes tecnologias, mas há dois conceitos cuja função básica permaneceu inalterada até hoje. O navegador da web e o servidor da web. Eles operam no modelo cliente/servidor “antigo” que é o seguinte: Um cliente se conecta a um servidor usando um endereço (um IP ou um nome) e solicita algo. O servidor, então, responde ao cliente e assim por diante. Os clientes se conectam aos servidores, mas não o contrário. Embora a tecnologia da web atual tenha alterado significativamente esse modelo, usaremos isso para explicar o processo de maneira simplificada.

Então, você abre seu navegador favorito e visita uma página da web. Desde o momento em que você pressiona a tecla Enter até quando finalmente vê a página exibida, as seguintes coisas acontecem:

Seu navegador primeiro chama um módulo de software chamado resolvedor de DNS que está configurado em seu computador e solicita o endereço IP que corresponde ao URL que você digitou.
DNS (Domain Name System) é um serviço central da Internet que mapeia nomes de computador (como www.pressidium.com ) em endereços IP. Os endereços IP são o que os computadores conectados à Internet entendem e podem se conectar. Vamos explorar o que é e como funciona em nosso próximo post.
Seu navegador, então, inicia uma conexão com esse endereço IP, usando a porta 80 ou 443.
O endereço IP significa o servidor, enquanto o número da porta se refere ao serviço ao qual você deseja se conectar. Todos os servidores web são executados por padrão na porta 80, enquanto a porta 443 é usada para conexões seguras da web.
O servidor web processa a URL que você digitou e dá o controle ao back-end. O código de back-end gera a página HTML e a entrega ao servidor web. O servidor web, então, finalmente envia a página HTML para o navegador, através do canal HTTP.
Há um monte de coisas acontecendo nos milissegundos que leva para o servidor da web enviar de volta o HTML. O código de back-end em um site geralmente se conecta a um banco de dados, executa consultas, obtém dados de volta, contata outros serviços de back-end e, finalmente, reúne tudo em um documento HTML. Não é realmente um arquivo discreto que você está solicitando, mas um recurso dinâmico , que é gerado em tempo real usando uma ampla variedade de diferentes tecnologias e componentes.
Seu navegador da Web recebe a página HTML, fecha a conexão com o servidor da Web e a renderiza na tela. Ele executa o código Javascript presente no HTML. O web design moderno segue uma abordagem chamada Design Responsivo. Essa abordagem usa HTML, CSS e Javascript para adaptar dinamicamente o layout de uma página da Web, dependendo de qual dispositivo você usa para navegar. Isso se tornou muito importante nos dias de hoje com o crescimento explosivo de dispositivos móveis e tablets.

Qual é o próximo?

Até agora, abordamos brevemente uma variedade de tecnologias modernas da Web e o que acontece quando você visita um URL. Sem dúvida, as tecnologias web são complexas e numerosas, e não podem ser satisfatoriamente abordadas em apenas um artigo. Com esta série de posts, visamos principalmente dar a você uma visão “olho de águia” da Internet e da Web.
No próximo capítulo desta interessante série, visitaremos outra importante infraestrutura da Internet, o Domain Name System. Sem ele nada realmente funcionaria! (pelo menos para nós humanos).