Idiomas

Como a Internet funciona?

Nota do tradutor: Embora alguns possam achar que este artigo trata mais da Web que da Internet propriamente dita, manterei o título como a tradução do original "How does the Internet Work?"

As vezes, você começa a observar as engrenagens e correias das ventoinhas por trás da ação. Hoje é seu dia de sorte. Eu vou lhe mostrar os bastidores de uma das mais notáveis tecnologias com as quais você já está familiarizado: a World Wide Web. Que comece o tema musical.

Este artigo cobre as tecnologias principais para o funcionamento da World Wide Web:

  • Linguagem de Marcação de Hipertexto (HTML)
  • Protocolo de Transferência de Hipertexto (HTTP)
  • Sistema de Nomes de Domínios (DNS)
  • Servidores e navegadores web
  • Conteúdo estático e dinâmico

Todas essas coisas são bastante fundamentais — enquanto a maior parte do que está coberto aqui não irá lhe ajudar a construir um web site melhor, isso te dará um vocabulário adequado para usar quando falar com clientes e outras pessoas sobre a web. É como a sábia freira-que-virou-babá disse uma vez em A Noviça Rebelde: “Quando nós lemos, nós começamos com ABC. Quando nós cantamos, nós começamos com Do Ré Mi.”. Neste artigo, irei mostrar brevemente como os computadores se comunicam usando HTTP e TCP/IP, então veremos as diferentes linguagens que se usam para criar as páginas web que fazem a Internet. O conteúdo deste artigo é o seguinte:

Como os computadores se comunicam pela Internet?

Felizmente, nós mantemos as coisas simples nos computadores. Quando estamos falando de World Wide Web, a maioria das páginas é escrita usando a mesma linguagem, HTML, que é passada adiante usando um protocolo comum — HTTP (Protocolo de Transferência de Hipertexto). O HTTP é o dialeto (especificação) comum na Internet, permitindo, por exemplo, que uma máquina Windows cante em harmonia com uma máquina usando a última grande versão do Linux (Do Ré Mi!). Através do uso de um navegador web — uma peça especial de software que interpreta HTTP e apresenta HTML em uma forma legível para humanos — páginas feitas em HTML em qualquer tipo de computador podem ser lidas em qualquer lugar, incluindo telefones, PDAs e até mesmo consoles populares de vídeo-games.

Mesmo que estejam falando a mesma língua, os vários dispositivos que acessam a web precisam seguir algumas regras para serem capazes de falar com os outros — é como aprender a levantar sua mão para fazer uma pergunta na sala de aula. O HTTP define as regras básicas para a Internet. Por causa do HTTP, uma máquina cliente (como o seu computador) sabe que ela é quem tem que iniciar uma requisição de uma página para um servidor. Um servidor é um computador onde ficam os web sites — quando você digita um endereço em seu navegador, um servidor recebe seu pedido, encontra a página que você quer, e a envia de volta ao seu computador para ser mostrada em seu navegador.

Dissecando um ciclo pedido/resposta

Agora que nós vimos todas as partes que permitem que os computadores se comuniquem através da Internet, vamos ver mais detalhadamente um ciclo de requisição/resposta HTTP. Existem alguns passos numerados abaixo, para que eu possa lhe mostrar alguns dos conceitos de forma mais eficiente.

  1. Cada pedido/resposta começa digitando um Localizador de Recursos Universal (URL) na barra de endereços do seu navegador, algo como http://dev.opera.com. Abra um navegador e faça isso.

    Agora, uma coisa que talvez você não saiba é que os navegadores não usam exatamente as URLs para requisitarem web sites aos servidores; eles usam o Protocolo de Internet ou endereço IP (que são basicamente como números de telefones ou códigos postais que identificam os servidores). Por exemplo, o endereço IP de http://dev.opera.com é 213.236.208.98.

  2. Tente abrir uma nova aba ou janela do seu navegador, digitar http://www.apple.com e teclar enter; então digite http://17.149.160.10 e pressione enter — você irá para o mesmo lugar. Tente digitar http://213.236.208.98 na barra de endereços e pressione enter — você irá para o mesmo servidor que você foi no passo 1, no entanto você vai obter um erro 403 “Acesso Negado” — isso é porque você não tem permissão de acessar a verdadeira pasta raiz deste servidor.

    http://www.apple.com está agindo basicamente como um atalho para http://17.149.160.10/, mas por que, e como? Isso é porque as pessoas são melhores em lembrar palavras que longas sequências de números. O sistema que faz isso funcionar é chamado de Sistema de Nome de Domínios (DNS), que é essencialmente um grande diretório automático de todas as máquinas conectadas à Internet. Então quando você coloca http://dev.opera.com em sua barra de endereços e aperta enter, este endereço é enviado para um servidor de nomes que tenta associá-lo ao seu endereço IP correspondente. Há uma tonelada de máquinas conectadas à Internet, e nem todos os servidores de DNS têm uma lista de cada máquina online, portanto há um sistema em que seu pedido pode ser redirecionado para o servidor certo que pode completá-lo.

    Então o sistema de DNS procura o site www.opera.com, vê que ele está localizado em 17.149.160.10, e envia este endereço IP de volta para seu navegador.

    Sua máquina envia um pedido para a máquina do endereço IP especificado e espera receber de volta uma resposta. Se tudo ocorrer bem, a máquina servidora envia de volta para o cliente uma mensagem curta dizendo que está tudo ok (veja a Figura 1), seguida da página web propriamente dita. Este tipo de mensagem está contida em um cabeçalho HTTP.

    Cliente: 213.236.208.98, Me mostre sua página inicial. Servidor: HTTP 200 - OK, Aqui vai: <HTML>...
    Figura 1: Neste caso, está tudo certo, e o servidor retorna a página correta.

    Se alguma coisa estiver errada, por exemplo você digitou uma URL incorreta, você irá receber um erro HTTP em seu navegador — o abominável erro 404 “Página não encontrada” é o exemplo mais comum que você vai encontrar.

  3. Tente entrar em http://dev.opera.com/jonelegal.html — a página não existe, então você receberá um erro 404. Tente isso com algumas páginas, em diferentes web sites, que não existam, e você verá uma variedade de páginas diferentes. Isso é porque alguns desenvolvedores web apenas deixam o servidor devolver as páginas de erro padrões, e outros fizeram páginas de erro personalizadas para aparecerem quando você solicitar uma página não existente. Isto é uma técnica avançada que não será coberta neste curso, mas esperamos que seja abordada em um artigo separado no dev.opera.com futuramente.

    Finalmente, uma nota sobre URLs — normalmente a primeira URL que você entra em um site não tem um verdadeiro nome de arquivo em seu final (exemplo: http://www.meusite.com/), e as páginas subsequentes as vezes têm e as vezes não têm. Você estará sempre acessando arquivos reais, mas as vezes o desenvolvedor web configurou o servidor para não exibir os nomes dos arquivos na URL — isso normalmente torna as URLs mais elegantes, o que leva a uma melhor experiência para o usuário de seu site. Nós não vamos abordar como fazer isso neste curso, já que novamente, isto é bastante avançado; nós cobriremos como subir arquivos para um servidor e estrutura de diretórios de arquivos/pastas em um artigo mais tarde.

Tipos de conteúdo

Agora que eu lhe mostrei um pedido/resposta HTTP, irei direcionar sua atenção aos diferentes tipos de conteúdo que você esperará ver na Internet. Eu os agrupei em 4 tipos — texto puro, padrões web, páginas dinâmicas, e formatos que necessitam de outros aplicativos ou plugins.

Texto puro

Nos primórdios da Internet, antes de quaisquer padrões web ou plugins aparecerem, a Internet foi basicamente apenas imagens e texto puro — arquivos com uma extensão .txt ou similar. Quando um arquivo de texto puro é encontrado na Internet, o navegador apenas o mostrará como ele é, sem qualquer processamento envolvido. Você normalmente ainda encontrará arquivos de texto puro em sites de universidades.

Padrões Web

Os módulos básicos para construir a World Wide Web são os três principais padrões web — HTML (ou XHTML, vou ser indiferente quanto a eles aqui para nossos propósitos), CSS e JavaScript.

Linguagem de Marcação de Hipertexto é realmente um bom nome, pois demonstra bem sua função. HTML é o que é utilizado para dividir um documento, especificar seu conteúdo e estrutura, e definir o significado de cada parte (ele que contém todo o texto que você vê em web sites). Ele usa elementos para identificar os diferentes componentes da página.

Folha de Estilo em Cascata lhe dá controle total sobre como um elemento é exibido. É fácil, usando declarações de estilo, alterar todos os parágrafos para dobrarem o espaçamento (line-height: 2em;), ou para tornar todos os cabeçalhos de segundo nível verdes (color: green;). Existe uma série de vantagens em separar a estrutura da formatação, e nós veremos isto em mais detalhes no próximo artigo. Para demonstrar o poder do HTML e CSS usados juntos, a Figura 2 mostra um HTML simples na esquerda, sem nenhuma formatação, enquanto na direita você vê exatamente o mesmo HTML com alguns estilos CSS aplicados.


Figura 2: HTML puro na esquerda, HTML com CSS na direita.

Finalmente, JavaScript confere funções dinâmicas para seu web site. Você pode escrever pequenos programas em JavaScript que rodarão no computador do cliente, não sendo necessário nenhum software especial instalado no servidor. JavaScript lhe permite adicionar algumas funcionalidades básicas e interatividade em seu web site, mas tem suas limitações, o que nos leva às linguagens de programação para servidores e páginas dinâmicas.

Páginas dinâmicas

As vezes, quando estiver navegando na Internet, você irá encontrar páginas que não tenham a extensão .html — elas podem ter um extensão .php, .asp, .aspx, .jsp, ou outras. Estes são todos exemplos de tecnologias de páginas dinâmicas, que podem ser usadas para criar páginas web que contenham seções dinâmicas — códigos que exibem diferentes resultados dependendo dos valores que lhe são dados, por exemplo, a partir de bancos de dados, formulários, ou outras fontes de dados. Nós iremos tratar deste tipo de página na seção Sites estáticos vs. Dinâmicos abaixo.

Formatos que necessitam de outros aplicativos ou plugins

Como os navegadores são equipados para interpretarem e exibirem apenas certas tecnologias como padrões web, se você acessar uma URL que leva a qualquer formato de arquivo mais complexo, ou uma página contendo tecnologia que necessita de plugins, ele será baixado para seu computador ou aberto usando o plugin necessário se o navegador o tiver instalado. Por exemplo:

Se você encontrar um documento Word, arquivo do Excel, PDF, arquivo compactado (ZIP, ou SIT, por exemplo), arquivo de imagem complexa como um PSD do Photoshop, ou outro arquivo complexo que o navegador não entende, ele normalmente irá lhe perguntar se você quer baixar ou abrir o arquivo. Ambas as opções normalmente têm resultados similares, exceto que a última fará com que o arquivo seja baixado e aberto por um programa compatível, se algum estiver instalado.

Se você encontrar uma página contendo um filme em Flash, um MP3 ou outro formato de música, um MPEG ou outro formato de vídeo, o navegador irá reproduzi-lo usando um plugin instalado, se houver algum. Se não, você receberá um link para instalar o plugin necessário, ou o arquivo será baixado e verá se seu computador tem algum programa para rodá-lo.

Claro que existem alguns casos a parte — por exemplo, o SVG é um padrão web que funciona nativamente em alguns navegadores, como o Opera, mas não em outros, como o Internet Explorer — o IE precisa de um plugin para entender o SVG. Alguns navegadores virão com alguns plugins pré-instalados, então você não saberá exatamente se o conteúdo está sendo exibido através de um plugin e não nativamente no navegador.

Sites estáticos vs. Dinâmicos

Então o que são web sites estáticos e dinâmicos, e qual é a diferença entre eles? Assim como numa caixa de chocolates, a diferença está no recheio:

Um site estático é um site onde o conteúdo, o HTML e as imagens, são sempre estáticos — eles são enviados sempre os mesmos para todos os visitantes, ao menos que a pessoa que tenha criado o site decida alterar manualmente a cópia dele no servidor — isto é exatamente o que foi visto na maior parte deste artigo.

Em um site dinâmico, por outro lado, o conteúdo no servidor é o mesmo, mas em vez de ser apenas HTML, ele também contém código dinâmico, que pode exibir diferentes informações de acordo com os dados que você der ao site. Vamos ver um exemplo — vá até www.amazon.com em seu navegador, e procure por 5 produtos diferentes. A Amazon não lhe envia 5 páginas diferentes, ela lhe envia a mesma página 5 vezes, mas com diferentes informações dinamicamente preenchidas a cada envio. Essas informações são mantidas em um banco de daos, que puxa a informação relevante quando solicitado, e a fornece para o servidor para que ele possa inserí-la em uma página dinâmica.

Outra coisa a se lembrar é que um software especial deve ser instalado no servidor para criar um site dinâmico. Enquanto arquivos HTML estáticos são salvos com a extensão .html, estes arquivos contém códigos dinâmicos especiais além do HTML, e são salvos com uma extensão específica para que o servidor saiba que eles precisam ser processados antes de serem enviados para o cliente (tais como ter os dados inseridos do banco de dados) — arquivos PHP por exemplo têm normalmente uma extensão .php.

Existem várias linguagens dinâmicas para escolher — eu já mencionei o PHP, e outros exemplos inclui Python, Ruby on Rails, ASP.NET e Coldfusion. No fim, todas essas linguagens têm basicamente as mesmas capacidades, como falar com bancos de dados, validar informações digitadas em formulários, etc, mas elas fazem as coisas de formas levemente diferentes, e têm algumas vantagens e desvantagens. Tudo se resume a escolher aquela que for melhor para você.

Nós não iremos cobrir linguagens dinâmicas neste curso, mas eu providenciei uma lista de leituras aqui caso você queira saber mais sobre algum desses assuntos:

Nota do tradutor: Como todos os links e livros estão em inglês, eu apenas os manti como no artigo original, com excessão da documentação do PHP, que tem uma versão em português. Se você conhece boas referências em português sobre esses assuntos, não deixe de me avisar.

Rails: The Rails Way. Addison-Wesley Professional Ruby Series. — Obie Fernandez (2007).
Rails screencasts
PHP: PHP Solutions: Dynamic web development made easy, friends of ED. — David Powers (2006).
PHP documentação online
ASP.NET: ASP.NET 2.0 Revealed. Apress. — Patrick Lorenz (2003).
ASP.NET: online ASP.NET documentation and tutorials

Resumo

Isso é tudo da nossa viagem pelos bastidores de como a Internet funciona. Este artigo apenas arranha a superfície de todos os assuntos abordados, mas é interessante como ele põe todos eles em uma perspectiva de cada um dos outros, mostrando como ele se relacionam e trabalham juntos. Ainda há muito que aprender sobre as síntaxe que faz as linguagens HTML, CSS e JavaScript, e é isso que nós iremos ver no próximo artigo — ele será focado no modelo "padrões web" de desenvolvimento com HTML, CSS e JavaScript, e mostrará um código de uma página web.

Exercícios

  • Dê uma breve definição de HTML e HTTP e explique a diferença entre os dois.
  • Explique a função de um navegador.
  • Dê uma olhada na Internet por uns 5-10 minutos e tente encontrar alguns diferentes tipos de conteúdo — texto puro, imagens, HTML, páginas dinâmicas como PHP e .NET (.aspx), PDFs, documentos do Word, animações em Flash etc. Acesse alguns deles e note como seu computador os exibe para você.
  • Qual é a diferença entre uma página estática e uma página dinâmica?
  • Encontre uma lista de códigos de erro HTTP, liste 5 deles e explique o que cada um significa.

Artigo anterior — A história da Internet e da web, e a evolução dos padrões web
Próximo artigo — O modelo dos padrões web — HTML, CSS e JavaScript
Índice

Sobre o autor

Foto do autor do artigo Jonathan Lane

Jonathan Lane é o Presidente a Industry Interactive — uma companhia de desenvolvimento de aplicações web localizada em Mayne Island, British Columbia, Canadá. Ele começou a trabalhar com desenvolvimento no Centro de Recriação de Currículo da Universitade de Lethbridge como coordenador de projetos web por vários anos.

Ele bloga no Flyingtroll e atualmente está desenvolvendo o Mailmanagr, uma interface de e-mail para a aplicação de gerenciamento de projetos Basecamp.

Este artigo está licenciado sob uma licença Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5.

Discuta este artigo (No Dev Opera, em inglês).

Comentários

Enviado por frank em

Opa, muito bom o site, bela iniciativa, nao sou desenvolvedor profissional, mas já fiz alguns sites, somente garimpando informações excelentes como estas do seu site na internet. Obrigado e parabéns

Enviado por Tiago em

Artigo simples e objetivo, deu pra ter uma boa visão de como funciona a internet. Parabéns!

Enviado por Roberto da Conc... em

Excelente texto, não fiz nenhum dos testes propostos, porque sou iniciante e fiquei com medo de não saber retornar. Um abraço Roberto Magalhães, Porto Alegre/RS.

Comentar