...
...
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.
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.
Segue um exemplo passo a passo, do momento em que você acessa um site até receber a resposta, no modelo cliente x servidor.
Esse fluxo acontece em milissegundos e se repete várias vezes enquanto você navega pelo site.
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.
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.
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.
Para entender o design responsivo, é importante conhecer seu oposto: o layout fixo.
As unidades mais comuns são:
html)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.
No lado cliente, scripts são linguagens executadas no navegador, sendo o JavaScript o principal exemplo.
Ele permite adicionar interatividade à página, como:
De forma geral, o design responsivo é mais flexível, enquanto o adaptativo tende a ser mais trabalhoso e menos dinâmico.
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).
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:
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 (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.
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.
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.
O funcionamento do PHP ocorre inteiramente no servidor:
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.
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.
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.
#client