Cliente x servidor, entendendo tudo

Fala dev, nesse post nós vamos aprender tudo sobre o modelo cliente e servidor, desde como ele funciona até tecnologias usadas tanto no cliente quanto no servidor.

No modelo cliente x servidor, o cliente (como um PC ou celular) faz uma requisição solicitando um serviço, e o servidor, que permanece ativo continuamente, recebe essa requisição, processa e devolve uma resposta.

Esse fluxo caracteriza o ciclo de requisição e resposta, permitindo que o usuário acesse funcionalidades e dados de forma remota.

Para organizar melhor o sistema, essa arquitetura evoluiu para o modelo em camadas, no qual cada parte tem uma responsabilidade bem definida.

Inicialmente existia o modelo de duas camadas, onde o cliente cuidava da interface e da lógica de negócio, enquanto o servidor era responsável pelos dados.

Com o crescimento das aplicações, surgiu o modelo de três ou quatro camadas, separando apresentação, lógica de negócio e dados.

Nesse modelo mais moderno, o cliente precisa apenas de um navegador, o servidor web cuida da interface e da comunicação, o servidor de aplicação centraliza as regras de negócio e o servidor de dados armazena as informações.

Essa separação facilita manutenção, escalabilidade e atualização do sistema.

O ambiente web

No ambiente web, baseado no modelo de quatro camadas, o cliente não precisa instalar softwares adicionais: a interface da aplicação é fornecida pelo servidor web e executada diretamente no navegador ou em aplicativos mobile.

Além dele, existem servidores específicos para lógica de aplicação e dados, que podem estar juntos ou distribuídos, sem que o cliente perceba essa separação.

Com a evolução das redes internas para a internet, as aplicações passaram a ser acessadas por diversos dispositivos, permitindo que usuários consumam serviços a partir de navegadores e apps.

A comunicação entre cliente e servidor acontece principalmente por meio do protocolo HTTP, seguindo o modelo de requisição (request) e resposta (response), podendo também incluir comunicações iniciadas pelo servidor, como notificações push.

Nesse contexto, falamos em client side para tudo que é processado no dispositivo do usuário e em server side para o que é executado no servidor, mantendo responsabilidades bem definidas e facilitando a escalabilidade das aplicações.

Demonstração prática da arquitetura cliente x servidor

Segue um exemplo passo a passo, do momento em que você acessa um site até receber a resposta, no modelo cliente x servidor.

• Você digita o endereço do site (URL) no navegador e pressiona Enter
• O navegador (cliente) consulta o DNS para descobrir qual é o endereço IP do servidor daquele site
• Com o IP em mãos, o navegador abre uma conexão com o servidor web pela internet
• O navegador envia uma requisição HTTP (request) solicitando a página
• O servidor web recebe a requisição
• Se necessário, o servidor web encaminha a requisição para o servidor de aplicação
• O servidor de aplicação executa a lógica de negócio (valida dados, regras, permissões, etc.)
• Caso precise de informações, o servidor de aplicação consulta o servidor de dados (banco de dados)
• O servidor de dados retorna as informações solicitadas
• O servidor de aplicação processa os dados e monta a resposta
• O servidor web recebe essa resposta e gera o conteúdo final (HTML, CSS, JS ou JSON)
• O servidor envia a resposta HTTP (response) de volta ao navegador
• O navegador interpreta a resposta e renderiza a página para o usuário

Esse fluxo acontece em milissegundos e se repete várias vezes enquanto você navega pelo site.

Visão geral de interface de usuários

Interfaces de usuário são a ponte entre pessoas e aplicações.

Uma boa interface precisa ser clara, intuitiva e oferecer boa usabilidade, garantindo uma experiência positiva para o usuário.

Esse conceito está diretamente ligado à Interação Humano-Computador (IHC), área que estuda como pessoas interagem com sistemas computacionais.

No início, o foco era o hardware e o software, exigindo que o usuário se adaptasse ao sistema.

Com a popularização dos computadores e, principalmente, dos smartphones, o foco passou a ser o inverso: adaptar o sistema ao usuário.

A interface do lado do cliente

Do ponto de vista da usabilidade, a interface do cliente deve seguir os princípios de design responsivo, permitindo que aplicações web se adaptem a diferentes dispositivos e tamanhos de tela sem perda de informação.

Dados de utilização de tamanhos de tela (abril/2019 a abril/2020) mostram a diversidade de dispositivos que precisam ser considerados:

Tamanho da tela (px)	Uso
360 x 640	10,11%
1366 x 768	9,69%
1920 x 1080	8,4%
375 x 667	4,24%
414 x 896	3,62%
1536 x 864	3,57%

Esses números reforçam a importância de interfaces flexíveis, pensadas desde o início para múltiplos contextos de uso.

Design responsivo

Com o surgimento de dispositivos com diferentes tamanhos de tela, surgiu o design responsivo, cujo objetivo é adaptar páginas e aplicações web ao dispositivo do usuário, oferecendo melhor experiência.

Segundo Knight (2011), design responsivo é a abordagem em que design e desenvolvimento respondem ao comportamento e ao ambiente do usuário, considerando tamanho de tela, plataforma e orientação.

Na prática, isso evita a criação de múltiplas versões de uma mesma aplicação para dispositivos diferentes.

Layout fixo x layout fluido

Para entender o design responsivo, é importante conhecer seu oposto: o layout fixo.

• Layout fixo - Utiliza unidades fixas (como pixels) para definir dimensões. Os elementos não se adaptam a diferentes tamanhos de tela.
• Layout fluido (responsivo) - Utiliza unidades flexíveis, permitindo adaptação ao tamanho da tela.

As unidades mais comuns são:

• %(percentual)
• EM: relativo ao tamanho da fonte do elemento pai
• REM: relativo ao tamanho da fonte do elemento raiz (html)

Media queries

As media queries permitem aplicar estilos condicionais conforme características do dispositivo.

No exemplo abaixo, um menu lateral é ocultado em telas menores que 360px:

@media (max-width:360px) {
.menu_lateral {
display: none;
  }
}

A condição será verdadeira quando a largura da tela for inferior a 360px. Caso contrário, o CSS será ignorado.

Scripts

No lado cliente, scripts são linguagens executadas no navegador, sendo o JavaScript o principal exemplo.

Ele permite adicionar interatividade à página, como:

• Atualização dinâmica de conteúdo
• Controle de multimídia
• Animações
• Manipulação de eventos e dados

Design responsivo x design adaptativo

• Design responsivo - ****Utiliza media queries e scripts para criar layouts fluidos que se adaptam dinamicamente.
• Design adaptativo - ****Trabalha com layouts estáticos baseados em pontos de quebra, carregando versões específicas conforme o tamanho da tela.

De forma geral, o design responsivo é mais flexível, enquanto o adaptativo tende a ser mais trabalhoso e menos dinâmico.

Mobile first

O mobile first é uma abordagem muito utilizada no design responsivo atual.

Ela propõe que o design seja pensado primeiro para dispositivos móveis e, depois, expandido para telas maiores.

Esse modelo segue o conceito de progressive enhancement, adicionando recursos conforme o tamanho e a capacidade do dispositivo aumentam.

Em contraste, o modelo tradicional segue a graceful degradation, onde o site é pensado para telas grandes e depois adaptado para dispositivos menores.

Na prática, mobile first significa priorizar limitações e recursos dos dispositivos móveis, como tamanho de tela, largura de banda e funcionalidades específicas (ex: localização).

As tecnologias HTML

HTML (HyperText Markup Language) é a linguagem usada para estruturar páginas web.

Trata-se de uma linguagem de marcação simples, composta por tags que dão significado a textos e outros conteúdos.

Além de marcar conteúdo, o HTML define a estrutura lógica do documento, como cabeçalho, menu de navegação, seções e rodapé.

As tags podem ser classificadas em:

• Estruturais – Em conjunto com o DocType, formam a estrutura básica e obrigatória da página.
• De conteúdo – Marcam o conteúdo de acordo com seu tipo (texto, imagem, links, etc.).
• Semânticas – Organizam o conteúdo em seções com significado, de acordo com sua função no documento.

Apesar do HTML5 permitir alguns ajustes visuais, o CSS é a ferramenta mais adequada para controlar estilo e identidade visual, especialmente em aplicações com múltiplas páginas.

CSS

CSS (Cascading Style Sheets) é uma linguagem declarativa responsável pela apresentação visual das páginas web.

Enquanto o HTML cuida da estrutura e do conteúdo, o CSS define cores, layout, tipografia e responsividade.

Dominar sua sintaxe e aplicação é essencial para criar interfaces consistentes e reutilizáveis.

JS

JavaScript é uma linguagem de programação interpretada pelo navegador e amplamente utilizada no desenvolvimento web.

Ela é multiparadigma (orientada a objetos, funcional, baseada em protótipos) e tem como principal objetivo adicionar interatividade às páginas.

O JavaScript permite comunicação assíncrona com o servidor e atualização dinâmica de conteúdo, evitando recarregamentos completos da página.

Nesse ponto, vale estudar sua sintaxe, manipulação do DOM e até bibliotecas como jQuery, dependendo do contexto do projeto.

Tecnologias no lado do servidor: o PHP

PHP é uma linguagem de programação utilizada no lado do servidor, assim como Java ou Python, e muito aplicada no desenvolvimento web.

Com PHP é possível processar requisições de clientes, integrar aplicações a bancos de dados e trabalhar com diferentes paradigmas, incluindo orientação a objetos.

Por ser uma linguagem interpretada, o PHP precisa de um servidor web para ser executado.

Um ponto fundamental é que o código PHP é processado no servidor e convertido em HTML, de forma que o usuário final visualiza apenas o resultado gerado, nunca o código fonte original.

PHP (Hypertext Preprocessor) é open source e focada principalmente na criação de aplicações web dinâmicas.

Como o PHP funciona

O funcionamento do PHP ocorre inteiramente no servidor:

1. O código PHP é interpretado pelo servidor web.
2. O resultado é convertido em HTML.
3. O HTML gerado é enviado e exibido no navegador.

Isso garante que o código fonte PHP permaneça oculto no lado cliente.

Além disso, o PHP é multiplataforma e compatível com diversos servidores web, como Apache, Nginx e IIS.

Páginas dinâmicas e acesso a dados

Com a evolução da web, surgiu a necessidade de gerar conteúdo de forma dinâmica, como acontece em redes sociais, e-commerces, sistemas bancários e plataformas de streaming.

Páginas dinâmicas permitem que usuários interajam com a aplicação, enviando e recebendo dados em tempo real.

Em um blog, por exemplo, comentários, curtidas e conteúdos podem ser processados e armazenados dinamicamente.

A combinação de tecnologias do lado cliente com tecnologias do lado servidor é o que torna possíveis as páginas dinâmicas.

Nesse modelo, os dados podem ser recebidos, processados, armazenados e reutilizados sempre que necessário.

Acesso a dados

Além do cliente e do servidor, o ambiente web inclui o banco de dados, responsável por armazenar informações de forma estruturada.

No lado servidor, o PHP atua como intermediário entre a aplicação e o banco de dados, permitindo salvar, recuperar e manipular informações que sustentam o funcionamento de aplicações web modernas.