Como os sites funcionam

"Criar meu web site / Fazer minha home-page / Com quantos gigabytes / Se faz uma jangada / Um barco que veleje". Peço licença ao mestre Gilberto Gil para introduzir este artigo com um trecho de sua música e tentar assim dar um pouco de leveza a um texto cujo tema soa puramente técnico.

Esta é uma matéria voltada para o segmento de Webdesign e para pessoas que ainda não tem conhecimento técnico sobre o tema e, antes de explicar de fato como funciona um site, é bom primeiro tentar definir o que ele é exatamente. Site é uma palavra que vem do inglês e, como diz a tradução, é um sítio, que, no caso deste contexto, é virtual e com o qual nós só podemos ter contato visualmente, através da tela do computador. Num sítio real, podemos ter nosso direito de propriedade, podemos convidar as pessoas a entrar e a conhecer seu conteúdo. Num sítio virtual, também, respeitados seus limites. Um site, portanto, é um local digital onde podemos expor informações que nos interessa divulgar - podendo ser textos, fotos e vídeos - e que são construídos em determinadas linguagens - podendo estas ser estáticas ou dinâmicas - e onde as pessoas podem visitar assim que sentirem necessidade. O termo correto em inglês para um site deveria ser website, pois é um sítio na web e não em um local físico, real. E, talvez, pelo fato de ser virtual, o termo "sítio" que é a tradução equivalente à palavra "site" em português, não pegou no Brasil. Aqui a associação do termo "sítio" com o sítio real - aquela casinha que fica no campo e que é utilizada, geralmente, para nosso lazer - é muito forte, sendo assim, por enquanto, continuamos com o estrangeirismo da palavra site.

Desambiguações

Por incrível que pareça, sites são diferentes de blogs, e-commerces e redes sociais. Tecnicamente, são construídos da mesma maneira, porém suas características particulares, suas funcionalidades e a forma como o público interage com eles é relativamente diferente. Sites expõem informações do criador ou contratante e são mais formais. Os blogs são mais informais, de atualização mais constante e permitem comentários. E-commerces tem caráter exclusivamente comercial e, redes sociais não tem nenhum princípio comercial (a não ser para seus criadores), e quem as realmente movimenta com postagem de conteúdo (para fins diversos) é o público. As explicações aqui dadas sobre funcionamento, porém, são extensivas a todas as variantes de sistemas web, incluindo hotsites, intranets e buscadores.

É bom sinalizar também que web e internet não são a mesma coisa: a world wide web diz respeito ao protocolo HTTP (Hiper Text Transfer Protocol) enquanto que a internet abrange vários protocolos e comporta diversos tipos de transmissão de dados como sistemas de e-mail (SMTP), hipertexto (HTTP), chats, comunicadores instantâneos, transferência direta de arquivos (FTP), telnet, etc. A web, portanto, está contida na internet e diz respeito à comunicação apenas através de hipertexto, ou seja, as habituais páginas HTML dos sites que acessamos. Criada por volta de 1989/1990 por Tim Berners-Lee, se tornou concreta em 1991 (com o primeiro site do mundo), gerando a partir desse momento uma grande revolução na comunicação do planeta. Pessoas que hoje tem 20 anos de idade não podem imaginar como o mundo poderia existir sem internet e seus websites, fontes de novidades, informação e divertimento, e, em diversas vezes, totalmente gratuitos.

Uma pixelada sobre a internet

Esta complicada rede de transmissão de dados iniciou-se em 1960 nos Estados Unidos como um sistema fechado, se concretizando, porém, em meados da década de 1980 e, finalmente, se tornando pública - quando pessoas e empresas passaram a utilizá-la - na década de 1990. A internet é um sistema descentralizado, ou seja, não depende de uma empresa ou órgão para funcionar, mas dois dos elementos chave para a existência dela que são o IP (Internet Protocol) e os DNS (Domain Name System) são controlados pela americana ICANN.
IPs dizem respeito à nossa identificação na internet, sendo que nossos IPs particulares são dinâmicos e são atribuídos pelo provedor de acesso quando conectamos, enquanto que IPs de sites são fixos e estão diretamente ligados ao DNS. O sistema IPv4 é um conjunto de quatro números de até três algarismos, algo como 177.99.38.102, e o sistema IPv6, mais moderno, corresponde a um conjunto de 6 números de até três algarismos. Dois computadores só podem trocar informação se cada um deles tiver seu próprio IP.
Nomes de domínio dizem respeito aos endereços amigáveis (URLs) na internet e correspondem a um número de IP fixo. Por exemplo, www.visuarea.com.br é um nome de domínio e seu número de IP corresponde ao servidor onde está hospedado. Um domínio deve ser registrado em um provedor específico para isso e é a alma de um site: quem tem a propriedade do domínio tem o poder total sobre este site. Aqui no Brasil, o registrador oficial de domínios de extensão .br é o http://registro.br.

Onde ficam os sites

Pois bem, os websites, propriamente ditos, são pastas alocadas nos servidores de internet, que, por sua vez, ficam nos provedores de hospedagem. Provedores são as empresas e servidores são aqueles computadores enormes - que ficam dentro dessas empresas - que permitem a comunicação entre os milhões de outros computadores que existem no planeta. Nos servidores o controle de entrada e saída de dados é feito pelos chamados programas servidores de internet, a exemplo do Apache e do IIS (Internet Information Services). Para cada pasta raiz pertencente a um site, o provedor atribui um nome de domínio, que, na verdade, é uma máscara para um IP fixo. Assim, quando um usuário tenta acessar um nome de domínio, esta solicitação percorre diversos servidores até encontrar onde este site está alocado. A partir daí é estabelecida uma conexão direta entre seu computador e o site solicitado. Por isso, às vezes, você tenta acessar um site e essa conexão demora um pouco a ser estabelecida. Depois que acontece, tudo funciona mais rápido.
Cada pasta de site deve possuir um arquivo de inicialização padrão. Este arquivo pode se chamar index (para sistemas Linux) ou default ou index (para sistemas Windows). Assim, para o site VISUAREA ser localizado ele deve ter uma pasta no servidor com um nome específico como "/visuarea/" e, dentro desta pasta, um arquivo chamado index.php (poderia ser também index.htm, index.asp ou index.html, dentre outros). Caso esse arquivo não exista, todo o conteúdo da pasta é exibido. Por isto, quando você acessa alguns endereços de sites ou páginas, é exibida uma lista de arquivos, isso porque essa pasta não possui arquivo index. Colocar arquivos index, inclusive, é uma forma de impedir que usuários indesejados acessem os conteúdos de determinadas pastas. Ele só vai poder acessar se souber o endereço direto do arquivo, a exemplo:

http://www.visuarea.com.br/imagens/visuarea-marca.png.

Um detalhe interessante é que sistemas *nix como Linux e Unix são sistemas "case sensitive" ou "sensíveis à caixa", ou seja, faz diferença para eles tentarmos acessar arquivos escritos na caixa errada. Exemplos abaixo:

http://www.visuarea.com.br/imagens/visuarea-marca.png é diferente de
http://www.visuarea.com.br/imagens/Visuarea-Marca.png.

Isto quer dizer que, quando tentamos acessar o segundo exemplo, o sistema acusa um erro pois só reconhece os arquivos escritos nas caixas correspondentes. Por isto, é possível, também, manter vários arquivos com o mesmo nome em sistemas com hospedagem Linux, apenas alterando suas caixas. Para sistemas com hospedagem Windows, isto não faz diferença. Mas, por padrão, o correto é escrever tudo em caixa baixa (minúsculas).
Uma estrutura física de arquivos num site pode ficar assim:

/visuarea/
/visuarea/index.asp
/visuarea/imagens/index.htm
/visuarea/imagens/imagem1.jpg
/visuarea/imagens/imagem2.png

Note que quando digitamos www.visuarea.com.br, automaticamente o servidor nos leva para a pasta /visuarea/ e carrega seu arquivo index, que é o arquivo de carregamento padrão. Se digitarmos www.visuarea.com.br/imagens/ retornamos ao início do site, porque nesta pasta há um arquivo index que redireciona o usuário para fora dela. Portanto, usuários não autorizados só podem acessar os conteúdos de pastas protegidas como essa se souberem o caminho completo dos arquivos contidos nelas. Há outras formas de proteção onde apenas o sistema acessa as pastas e não o usuário, ou casos onde esse acesso só é permitido mediante a colocação de uma senha em um formulário.
Tenhamos em mente que apesar de podermos ter arquivos de páginas em diversos tipos de linguagem, as informações exibidas no browser do usuário sempre chegam em formato HTML. Isto porque apesar das linguagens principais utilizadas na construção de sites hoje em dia serem as chamadas linguagens dinâmicas (PHP, ASP, CFM, Ruby, etc), o resultado do processamento dessas páginas (que é feito no servidor) precisa estar em um formato que seja entendido pelo navegador. Esse formato é justamente o HTML. Lembro que, normalmente, um site trabalha também com outras linguagens de browser (ver artigo A internet e as linguagens de programação) que são as CSS e o JavaScript e quase nunca HTML puro. 
É importante, também, não confundir site dinâmico com site animado. Sites dinâmicos permitem interação com usuário, como postagem de comentários, por exemplo. Sites animados, obviamente, possuem animações de diversos tipos e não, necessariamente, são dinâmicos. 
Enfim, a partir das informações acima podemos entender que a navegação em um site se dá por hierarquias: acessamos a raiz do site e depois as pastas e subpastas ou arquivos, como nos exemplos abaixo:

http://www.visuarea.com.br
http://www.visuarea.com.br/artigos/
http://www.visuarea.com.br/artigos/design

Segundo estes exemplos, artigos seria uma pasta e design seria uma subpasta. Note que a pasta raiz visuarea não aparece para o internauta, mas sim o domínio do site (visuarea.com.br - também conhecido como TLD ou Top Level Domain), que corresponde justamente à pasta raiz do site no servidor.
Este, na verdade, já é um raciocínio um pouco antigo. De uns anos para cá, os sites passaram a ter sua hierarquia de navegação definida por um recurso chamado URLs amigáveis (Friendly URLs). Este recurso consiste em simular a navegação por pastas fazendo-se a reescrita da URL através de diretrizes impostas ao servidor por um arquivo .htaccess. Este arquivo que fica na raiz da pasta principal não tem nome, apenas uma extensão e, em conjunto com uma linguagem de programação como PHP, ele mascara a navegação, fazendo com que a gente tenha a impressão de estar navegando por pastas físicas no servidor. É uma maneira mais complicada de se fazer mas muito mais inteligente pois, as divisões na URL que parecem pastas, na verdade são categorias e postagens cadastradas no banco de dados dos sites e que permitem a acesso às informações desta postagem através de slugs (que são termos refeitos para que sejam utilizados no acesso ao banco de dados). Um exemplo de slug pode ser encontrado na matéria "Logomarca x Preconceito". Quando foi cadastrado seu título, foi cadastrado também um termo transformado para "logomarca-x-preconceito". Note que ele obedece a um padrão de ter todas as letras em minúsculas, sem acentos nem caracteres especiais. A postagem foi cadastrada também em uma categoria específica chamada "Artigos", que já possuía seu slug "artigos". Dessa forma, quando acessamos a URL http://www.visuarea.com.br/artigos/logomarca-x-preconceito estamos, sem perceber, enviando para a página solicitada o slug "logomarca-x-preconceito", que é a chave de recuperação dos dados do banco que a página terá que exibir. Complicado, não? Mas é assim que funciona.

Estrutura de uma página HTML

Páginas de sites tem que obedecer a uma estrutura básica de construção de código. Isto porque as informações que estão estruturadas numa página interagem com o navegador no que diz respeito à sua renderização e interagem com os buscadores no que diz respeito à sua localização, importância e relação com o tema buscado, sendo, portanto, essencial que a estruturação do código seja feita de forma correta. Segue exemplo abaixo:

<html>
<head>
<title>Visuarea</title>
</head>
<body>

Aqui entra o conteúdo a ser visualizado pelo usuário

</body>
</html>

Este é um exemplo simples de código de um arquivo HTML. Se você colar o código acima no Bloco de Notas do Windows e salvar o arquivo como "index.htm" vai ter a sua primeira página de internet. Uma página HTML é basicamente formada por tags (etiquetas) que são palavras envoltas pelos símbolos matemáticos de menor e maior. Exemplo: a tag de abertura indica que conteúdo que fica entre ela e a tag de fechamento será o conteúdo a ser exibido para o usuário. "body", na verdade, é um elemento HTML, que quando envolto pelos sinais <> chama-se "tag" ou "etiqueta". Existe uma infinidade de elementos que podem ser incorporados em uma página, sendo uns obrigatórios, outros opcionais. Estes elementos têm diversas funções como enviar dados de navegação aos servidores, definir conteúdo em uma página, fornecer informações sobre a página aos buscadores, proporcionar interação com o usuário, incorporar arquivos externos, etc. A incorporação deles numa página vai depender da necessidade do desenvolvedor (conhecido também como front-end developer).

Tipos de arquivo

Arquivos de páginas de site são escritos em linguagens de script. São linguagens interpretadas por outros programas (navegadores e interpretadores server side) em tempo de execução, ou seja, no momento em que o arquivo é solicitado/acessado pelo internauta. Assim são HTML, CSS, JS, PHP, CFM, ASP, etc. Na verdade, são arquivos de texto simples, como os digitados no Bloco de Notas do Windows. Outros tipos de arquivo não fazem parte das páginas e precisam ser incorporados através de tags específicas a exemplo do Flash, Java Aplets, sons, vídeo e imagens (JPG, GIF e PNG - estas especialmente desenvolvidas para a Web).

Sites em dispositivos diversos

Há algum tempo atrás sites funcionavam apenas em computadores e notebooks. Com a evolução da tecnologia, dispositivos móveis (mobile devices) também passaram a entendê-los e a renderizá-los com a mesma qualidade dos computadores grandes. Seu porém é a conexão oferecida pelos provedores de acesso. Afora este problema, graças a um recurso chamado "responsividade" os sites atuais estão sendo feitos já de forma a se adaptarem aos diversos tamanhos de tela dos dispositivos, se utilizando para isso de um outro recurso das CSS (já mencionadas anteriormente), as chamadas "media queries". Assim, quando se faz um site hoje, seu leiaute já deve ser previsto para ser acessado por computadores desktop, tablets e smartphones. Perceba que, quando você acessa o VISUAREA de qualquer dispositivo, ele está sempre adaptado às dimensões do monitor.

Envio ao servidor

Para fazer com que um site apareça na web é necessário transferir os arquivos de seu computador para um servidor de internet/hospedagem utilizando para isso um programa de FTP (File Transfer Protocol). Com ele, nos conectamos diretamente ao provedor e enviamos os arquivos e pastas que forem necessários. Vale lembrar que o peso de uma página nada tem a ver com a quantidade nem o peso dos arquivos que foram enviados ao servidor, mas sim com o peso dos arquivos que estão sendo acessados naquele momento, sejam páginas, scripts, imagens, documentos, sons ou vídeos.
Também, com o programa de FTP podemos facilmente fazer o download de todos os arquivos de um site para back-up. Num programa de FTP podemos criar pastas, mudar permissões de pastas/arquivos e deletar arquivos também, além de podermos fazer o controle de sites hospedados em vários provedores diferentes.

Conclusão

Em resumo, um site nada mais é do que uma pasta com arquivos e subpastas alocados em um servidor de internet, exatamente como ficam no seu computador. Para que um site exista é preciso, basicamente, cinco coisas: um cliente (que vai solicitar o serviço), um designer (que vai criar a interface e a concepção visual), um programador (que vai codificar o site), um domínio registrado (que vai apontar para o servidor de hospedagem) e uma conta de hospedagem (que é onde vão ficar os arquivos relativos ao site).

Um site deve ser montado e testado primeiro no computador do desenvolvedor (computador este que, através de programas específicos, é transformado em um servidor de internet local) e depois enviado ao servidor remoto (o servidor definitivo) através do protocolo FTP. Lá, deve ser testado novamente, e, dando tudo certo, ser aberto ao público. Quando acessado, através de sua URL, são feitos processamentos no servidor que retornam resultados em HTML para serem interpretados pelo navegador que, finalmente, renderiza os dados recebidos para mostrar o site ao usuário da maneira como foi projetado. 

Na verdade, existem muito mais detalhes em relação à construção e funcionamento de um sítio web que, se fossem todos pormenorizados aqui, iriam deixar este artigo bastante cansativo. Para quem se interessar mais pode pesquisar na internet pois existe muito material de qualidade relacionado ao tema. E para quem não se interessar, pode apenas usufruir, acessando regularmente os artigos do nosso site visual baiano, o VISUAREA.