Nessa aula você vai aprender os conceitos básicos que são fundamentais pra se tornar um desenvolvedor. Aprenda o que é web, como funciona a arquitetura cliente x servidor, como funciona o DNS, protocolo HTTP, TCP e outros conceitos.

Imagine um simples ato de abrir seu navegador e digitar um endereço, como por exemplo google.com.br. A princípio, a gente vê apenas a página principal do Google abrindo. 

Mas nesse simples ato de abrir um site, acontecem vários processos importantes, que devemos conhecer como profissionais da web.

Nesse endereço que abrimos passamos algumas informações importantes como o protocolo que funciona mais ou menos como o idioma falado entre o navegador e o servidor que o site está (https).

Depois a gente vê a localização do site “google.com.br” (DNS), a porta que vamos usar pra pegar o conteúdo desse site (porta 80), que apesar de não estar visível, mas sempre que a gente digita o site e dá enter sem indicar um número de porta no final do endereço (ex.: google.com.br:8080), significa que vai ser usada a porta padrão da web, a porta 80.  

Além disso passamos também a página do site que queremos abrir, ela é indicada logo depois da “/” no final do nome do site. Nesse caso como não escrevemos o nome da página, o sistema entenderá que a página que buscamos  do site é a página principal, a página conhecida como index.

Cliente x servidor

Para entender melhor tudo isso, pense basicamente que existem 2 lados nessa história toda: O lado chamado cliente, e o lado chamado servidor.

O lado cliente nada mais é do que nosso computador, nosso celular, enfim, nosso aparelho conectado à internet, usando um navegador para acessar as páginas de um site.

O lado servidor é o computador que se encontra o site que você tá acessando. Todo e qualquer site que você acessa na internet, está localizado em algum computador no mundo, ligado a internet.

De forma resumida, podemos entender que a world wide web (conhecida por www) ou simplesmente web mesmo, é a interação entre um lado que solicita conteúdos através do navegador, e o lado que oferece o conteúdo ao navegador.

Dns

Cada computador conectado a internet seja ele cliente ou servidor, tem um endereço, um número que faz com que ele seja encontrado na rede chamado IP.

A dúvida é: Como a gente digita o nome do site tipo “google.com.br” e caímos exatamente no endereço que ele se encontra?

A resposta é simples, o DNS

Dns é uma sigla em inglês que significa Domain Name System (Sistema de Nomes e Domínios). 

Um Domínio nada mais é do que o nome que registramos para nosso site, e esse nome será sempre associado ao endereço ip que nosso site se encontra, como por exemplo “frontend.com.br”. 

Imagine se você tivesse que gravar um endereço ip complicado como por exemplo: 192.168.1.32 para cada site que você quisesse acessar, ao invés de simplesmente gravar o nome dele? No mínimo você teria que criar uma tabela com o nome do site e ao lado o endereço ip desse site, como se fosse uma agenda telefônica.

Servidor DNS

O Servidor DNS existe pra facilitar nossa vida, e pra você não precisar fazer isso! é um sistema que associa o domínio do site que você digitou, ao endereço ip que o site se encontra.

Então quando você registra um domínio, você informa ao servidor DNS responsável pelo registro que, sempre que alguém acessar o seu domínio ele deve informar o endereço ip que o seu site se encontra.

A grosso modo, quando você digita google.com.br, caso o navegador ainda não conheça o endereço ip desse site ainda, ele vai perguntar ao servidor dns “qual o endereço ip que esse domínio está associado?” O servidor dns vai se encarregar de procurar e informar ao navegador o endereço ip solicitado.

Indo um pouco mais a fundo sobre servidor dns, ele é um conjunto de servidores espalhados pela internet, e cada tipo de domínio como por exemplo domínios terminados com “.com”, domínios terminados com “.br”, ou “.org” tem um servidor responsável  por ele, um servidor que guarda o endereço que aquele domínio está ligado. 

Servidor Raiz

Só que além desses servidores existe o servidor Raiz, que é o primeiro a ser consultado quando um navegador quer saber o endereço ip de um domínio.

Por exemplo, quando o navegador pergunta o endereço de um site ao servidor DNS, primeiramente ele pergunta ao servidor raiz.

O servidor raiz vai analisar o final do nome do domínio, se for por exemplo “.br” o servidor raíz vai dizer “olha não sei o endereço do site que você procura, mas conheço alguém que sabe” e vai informar o endereço do servidor responsável pelos domínios “.br”. 

Em seguida vamos perguntar ao servidor responsável pelos domínios “.br” o endereço ip do site que digitamos, e ele vai informar “Esse site tá lá no ip tal”.

Agora que o navegador já sabe onde está o site através do ip, ele já pode digamos “bater na porta” do servidor e pedir o conteúdo do site que digitamos, para mostrar na tela aos usuários.

A questão agora é: 

1. Em qual porta do servidor bater?

2. Como deve pedir esse conteúdo?

3. como esse conteúdo vai ser transportado?

portas do servidor web

1. Um servidor web tem várias portas, e cada porta é responsável por um tipo de serviço. Tem porta que cuida das páginas web, dos e-mails, enfim…

Vamos ficar apenas com a porta responsável pela web, a porta 80.

Como vimos no início dessa aula, quando a gente digita um endereço no navegador e não informamos o número da porta ao final do domínio, a conexão do navegador com o servidor acontece na porta 80.

Geralmente essa porta é reservada no servidor pra ser a porta padrão da web, a porta que permite a conexão do navegador com o servidor. E nessa conexão o servidor oferece ao navegador uma cópia de todo o conteúdo da página que solicitamos.

2. A segunda questão de “Como devo pedir esse conteúdo?”: O lado cliente através do navegador precisa falar a mesma língua do lado servidor, esse “idioma” é chamado protocolo http, que é um conjunto de regras de comunicação que faz com que ambos os lados se entendam bem sobre a transferência do conteúdo da página.

O lado que pede (que é o lado cliente) faz uma requisição falando por exemplo “oi servidor, tô precisando da página index do site google.com.br”.

E o lado servidor escuta essa requisição e envia uma resposta dizendo “ok, tenho ela aqui amigão, tome aqui ela”.

3. Então agora que já temos o conteúdo da página disponível, alguém precisa carregar esse conteúdo, fazer o frete dessa bagagem do servidor pra o navegador.

Quem se encarrega por toda a logística de transportar esse conteúdo de um lado a outro é o TCP, um protocolo que controla a transmissão de dados entre cliente x servidor.

TCP

O TCP trabalha dividindo o conteúdo em pacotes menores para serem transportados com facilidade pela rede, e garantir que esses pacotes sejam entregues por completo (sem perdas e na ordem correta), para quando chegar no lado cliente o navegador montar todos esses pacotes e formar o conteúdo, que é o site como enxergamos.

Esse conteúdo é chamado de hipertexto. É um documento que contém tudo que vemos na tela como imagens, textos, vídeos, etc, e também coisas que não vemos na tela como por exemplo códigos HTML e CSS, o HTML responsável por estruturar a página e o CSS por organizar a aparência.

Todo esse conteúdo dentro de um único texto.

daí você pode pensar: “como esse texto tendo mil e uma coisas consegue se tornar o site que vemos?”

O HTML entra em ação

O HTML vai se encarregar de organizar e estruturar todo o conteúdo na tela.

Ele consegue diferenciar para o navegador o que será título, parágrafo, imagem, link, vídeo, e tudo mais, e o navegador vai mostrar pra gente conforme o HTML informa.

Mas o HTML por si só, vai apenas dar uma estrutura, um esqueleto para a página, mas não vai deixar ela com uma aparência legal com cores, tamanhos de textos diferenciados, e tudo mais.

Quem se encarrega deixar o site mais elegante é CSS, linguagem que diz ao navegador todo o estilo visual da página. A cor de cada elemento, tamanho, alinhamento, e várias outras coisas possíveis.

Dessa forma o navegador consegue reproduzir aos visitantes o site da forma correta, como o desenvolvedor web deseja. Porém, o que pode acontecer é o site não abrir em um navegador da forma que desejamos, para isso é importante falarmos sobre padronizações.

W3C

Quando a gente desenvolve uma página web, pode ser que essa página seja mostrada de um jeito em um navegador, e seja mostrada diferente em outro navegador.

Isso acontecia principalmente a um tempo atrás com as versões antigas do Internet Explorer, e que de certa forma era uma dor de cabeça para o desenvolvedor, pois ele precisava fazer alguns malabarismos para o site ficar igual em todos os navegadores.

Então é uma questão de lógica que a web precisa de uma padronização, para melhorar sempre a compatibilidade dos sites entre os navegadores.

Padrões web

Pensando nessa padronização que criaram uma entidade internacional chamada W3C, que trabalha em função de padronizar o funcionamento da web. 

Ela é responsável por criar recomendações que devem ser seguidas tanto para nós desenvolvedores, quando vamos criar os códigos de nosso site, quanto para os navegadores interpretarem os códigos seguindo padrões, pra que os sites sejam mostrados iguais, independente do navegador que o usuário queira usar.

Isso tudo pensando em tornar a web cada vez mais uniforme e compatível com as diversas tecnologias.

A entidade tem uma grande preocupação também quanto a acessibilidade, ela faz recomendações pra que os sites pensem sempre nas pessoas com deficiências que vão acessar o site, deficiências como por exemplo cegueira, surdez e dificuldades de aprendizagem. 

É fundamental que o seu conteúdo fique acessível também pra essas pessoas, seguindo as diretrizes da W3C.