Fundamentos Essenciais da Web
Apresentação
Olá caro leitor, aqui vai uma breve apresentação sobre o post que você vai ler a seguir e sobre quem vos fala. Me chamo Eduardo do Carmo, e estou na reta final do primeiro período de Sistemas para Internet no IFTM. Na grade curricular do curso, eu tenho uma matéria chamada Fundamentos de Sistemas para Internet (o que seria a matéria de Redes de Computadores em uma faculdade tradicional), e dentro de alguns dias vou fazer a avaliação final para poder prosseguir no meu curso. Com essa tarefa em mente, eu fiz um "resumão" de tudo que sei relacionado ao funcionamento da web, seja sua história, práticas e padrões. Alguns conceitos são consistentes até hoje, como protocolos de endereço e segurança, enquanto outros vão se modificar, como padrões de desenvolvimento, tecnologias etc.
Nota: Entenda que eu não sou um especialista, minha interpretação pode estar errada sobre algum conceito e eu estou aberto a esse tipo de crítica, afinal, sou um estudante. Também espero que para os iniciantes nessa área assim como eu possam tirar algum proveito do conteúdo que estou produzindo aqui, tento focar na qualidade e em ser claro, também espero críticas quanto a isso e lerei todas atentamente. Dito isso vamos lá!
(TEXTO NÃO GERADO POR IA! TODAS AS FONTES ESTARÃO DISPONÍVEIS AO FINAL DO POST)
1. 🌐 Internet e Comunicação
O que é Internet e Intranet
- Internet é uma rede global de computadores interconectados, no qual permite a troca de informações e recursos. É pública e acessível globalmente.
- A Intranet se diferencia, sendo uma rede privada, voltada para organizações privadas, como o setor militar, o governo, empresas privadas, etc.
Histórico e evolução da Web (Web 1.0, 2.0, 3.0)
- Web 1.0 (1990-2004): Era read-only, focada em sites estáticos, com pouca interação do usuário. Conteúdo fornecido por empresas e organizações no geral.
- Web 2.0 (2004 - Atual): Era read/write, tem como foco na interação do usuário, por meio de redes sociais, blogs, wikis. Os usuários também podem criar conteúdo, sendo chamado de UGC(Conteúdo gerado pelo usuário).
- Web 3.0 (Em desenvolvimento): Conceito de "Web Semântica" e "Web descentralizada". Busca tornar a web mais inteligente, com dados interconectados e compreensíveis pelas máquinas. Inclui tecnologias como blockchains, IA e realidade virtual.
Endereçamento IP (IPv4 e IPv6)
- IP(Internet Protocol): Identificador numérico único atribuído a cada dispositivo conectado à internet.
- IPv4: Formato em 32 bits(ex: 192.168.1.1). Suporta cerca de 4.3 bilhões de endereços únicos. Está se esgotando, o que levou a criação do IPv6.
- IPv6: Formato em 128 bits(ex: 2001:0db8:85a3:0000:0000:8a2e:0370:7334). Suporta um número virtualmente ilimitado de endereços, projetado para substituir o IPv4.
Nomes de domínio e DNS
- Nome de domínio: Endereço legível por humanos de um site (ex: google.com). Mais fácil de memorizar do que um endereço IP.
- DNS(Domain Name System): Sistema que traduz nomes de domínio para endereços IP. É como uma "lista telefônica" da internet. Quando você digita um domínio, o DNS o encontra e te direciona ao servidor correto.
Provedores de acesso e backbone da internet
- (ISP - Internet Service Provider): Empresas que fornecem acesso à internet para usuários finais (Ex: Vivo, Claro)
- Backbone da Internet: É basicamente a "espinha dorsal" da internet, sendo uma infraestrutura principal e de alta capacidade de internet, composta por linhas de transmissão de dados de alta velocidade (cabos de fibra óptica) que conectam grandes redes e regiões.
2. 📡 Protocolos de Comunicação
Modelo OSI (camadas e funções)
- Modelo OSI (Open Systems Interconnection) -> Um modelo conceitual que descreve como os dados são transmitidos em uma rede. Divide o processo em 7 camadas lógicas, cada uma com funções específicas:
- Física: Transmissão de bits brutos (cabos, conectores).
- Enlace de Dados: Detecção e correção de erros, controle de acesso ao meio (endereço MAC).
- Rede: Endereçamento lógico (IP) e roteamento.
- Transporte: Segmentação, multiplexação, controle de fluxo e erro (TCP/UDP).
- Sessão: Gerenciamento de sessões de comunicação.
- Apresentação: Formatação, criptografia/descriptografia, compressão.
- Aplicação: Interação com o usuário e aplicações de rede (HTTP, FTP, SMTP).
Modelo TCP/IP (camadas reais)
- O modelo que a internet usa, mais prático e com 4 ou 5 camadas:
- Acesso à Rede (ou Enlace): Combina Física e Enlace de Dados do OSI.
- Internet: Corresponde à camada de Rede do OSI (IP).
- Transporte: Corresponde à camada de Transporte do OSI (TCP/UDP).
- Aplicação: Combina Sessão, Apresentação e Aplicação do OSI (HTTP, FTP, SMTP, DNS).
Protocolos principais:
HTTP / HTTPS
- HTTP(Hypertext Transfer Protocol): Protocolo para a transferência de documentos hipertexto (páginas web).
- HTTPS (HTTP Secure): Versão segura do HTTP, que utiliza criptografia SSL/TLS para proteger a comunicação entre navegador e o servidor. Essencial para a segurança em transações online.
TCP vs UDP
- TCP: Confiável, orientado a conexão, garante a entrega dos dados na ordem correta. Usado para navegação web, e-mail. Tecnicamente mais lento, pois exige confirmação de recebimento.
- UDP: Não confiável, sem conexão, não garante a entrega nem a ordem. Usado para streaming de vídeo/áudio, jogos online. Tecnicamente mais rápido, pois não há sobrecarga de confirmação.
FTP, SMTP, POP, IMAP, DNS:
- FTP (File Transfer Protocol): Usado para transferir arquivos entre computadores em uma rede.
- SMTP (Simple Mail Transfer Protocol): Usado para enviar e-mails.
- POP (Post Office Protocol): Usado para baixar e-mails do servidor para o dispositivo local, geralmente removendo-os do servidor.
- IMAP (Internet Message Access Protocol): Usado para acessar e-mails diretamente no servidor, mantendo-os sincronizados em vários dispositivos.
- DNS (Domain Name System): Já abordado no item 1, mas é um protocolo fundamental.
3. 🧱 Estrutura de Sistemas Web
Diferença entre cliente e servidor
- Cliente -> Geralmente o navegador web (Chrome, Firefox, Edge) no dispositivo do usuário que faz requisições.
- Servidor: Um computador ou programa que "serve" recursos (páginas web, dados) em responde às requisições do cliente.
O que é frontend vs backend
- Frontend: A parte da aplicação web com o qual o usuário interage diretamente. Inclui tudo o que você vê e clica no navegador (HTML, CSS, JavaScript). Podemos considerar como a "face" da aplicação.
- Backend: A parte da aplicação que roda no servidor. Lida com a lógica de negócios, banco de dados, autenticação e comunicação com outros serviços. É o "cérebro" por trás da aplicação.
Requisição e resposta HTTP
- Requisição HTTP: Quando o cliente (navegador) solicita um recurso ao servidor (ex: digita um URL). Contém o método (GET, POST), URL, cabeçalhos, corpo (este sendo opcional porque nem todas as operações exigem dados adicionais sendo enviados ao servidor).
- Resposta HTTP: O que o servidor envia de volta ao cliente em resposta a uma requisição. Contém código de status, cabeçalhos e o corpo da resposta (ex: a página HTML solicitada).
O que é um servidor web
- Um programa de software (como Apache ou Nginx (Serão abordados posteriormente)) que escuta requisições HTTP na internet, processa-as e envia as respostas correspondentes, geralmente arquivos HTML, CSS, JavaScript, imagens, etc.
Códigos de status HTTP (200, 404, 500…):
- São códigos numéricos que indicam o resultado de uma requisição HTTP.
- 200 OK: Requisição bem-sucedida.
- 404 Not Found: O recurso solicitado não foi encontrado no servidor.
- 500 Internal Server Error: O servidor encontrou uma condição inesperada que o impediu de atender à requisição.
4. 💻 Tecnologias para Web
HTML básico (estrutura de página)
- HTML (HyperText Markup Language): A linguagem de marcação padrão para criar páginas web. Define a estrutura e o conteúdo da página usando tags.
CSS básico (estilização e layout)
- CSS (Cascading Style Sheets): Usado para estilizar a aparência e o layout de documentos HTML. Controla cores, fontes, espaçamento, posicionamento. É o "design" da página.
JavaScript (comportamento dinâmico básico)
- JavaScript: Uma linguagem de programação que permite adicionar interatividade e comportamento dinâmico às páginas web. Manipula o HTML e CSS, valida formulários, faz requisições assíncronas.
Responsividade e Mobile First
- Responsividade: O design de sites que se adaptam e exibem bem em diferentes tamanhos de tela e dispositivos (desktops, tablets, smartphones).
- Mobile First: Uma abordagem de design onde o desenvolvimento começa focando na experiência para dispositivos móveis, para depois expandir para telas maiores. Garante uma boa experiência para a maioria dos usuários atuais.
Acessibilidade (WCAG – conceito básico)
- Acessibilidade Web: O conceito de tornar os sites e aplicações web utilizáveis por todas as pessoas, incluindo aquelas com deficiências (visuais, auditivas, motoras, cognitivas).
- WCAG (Web Content Accessibility Guidelines): Conjunto de diretrizes internacionais desenvolvidas pelo W3C para garantir a acessibilidade do conteúdo web. Foca em princípios como perceptibilidade, operabilidade, compreensibilidade e robustez.
5.🛠️ Hospedagem e Servidores
Tipos de hospedagem (compartilhada, dedicada, VPS, cloud)
- Compartilhada: Vários sites dividem o mesmo servidor e seus recursos. Mais barata, ideal para sites pequenos.
- Dedicada: Um servidor inteiro é alocado para um único site/aplicação. Oferece controle total e alto desempenho. Mais cara.
- VPS (Virtual Private Server): Um servidor físico é dividido em vários servidores virtuais independentes. Oferece mais controle e recursos que a compartilhada, a um custo intermediário.
- Cloud (Nuvem): Os recursos são distribuídos em uma rede de servidores. Oferece escalabilidade, flexibilidade e pagamento por uso. Pode ser considerada a mais moderna e flexível (varia em caso de uso).
O que é Apache / Nginx:
- Apache HTTP Server: Um dos servidores web mais antigos e populares. Robusto e flexível.
- Nginx: Um servidor web de alto desempenho, conhecido por sua eficiência e capacidade de lidar com muitas conexões simultâneas. Frequentemente usado como proxy reverso e balanceador de carga.
Como registrar um domínio
- Escolher um nome de domínio disponível e registrá-lo através de um registrador de domínios (ex: GoDaddy, Registro.br, Hostinger). Você paga uma taxa anual para usar o domínio.
Como apontar um DNS
- Após registrar um domínio e contratar uma hospedagem, você precisa configurar os servidores de nomes (nameservers) do seu domínio para apontar para os servidores da sua hospedagem. Isso é feito no painel de controle do registrador de domínios.
Hospedagem gratuita (ex: GitHub Pages, Render, etc.)
- Plataformas que oferecem hospedagem web sem custo, geralmente com algumas limitações. Boas para projetos pessoais, portfólios, ou para aprender, como:
- GitHub Pages: Hospeda sites estáticos diretamente de repositórios do GitHub.
- Render: Oferece hospedagem para diversos tipos de aplicações, incluindo sites estáticos e dinâmicos, com um plano gratuito limitado.
6. 🔒 Segurança Web (Introdução)
HTTPS e certificados SSL
- HTTPS (HTTP Secure): (Já abordado no item 2, mas essencial para segurança).
- Certificados SSL/TLS: Pequenos arquivos de dados que criam um link criptografado entre um servidor web e um navegador. Essenciais para ativar o HTTPS.
SQL Injection e como evitar
- SQL Injection: Uma vulnerabilidade de segurança onde um atacante insere código SQL malicioso em um campo de entrada de dados (ex: formulário de login) para manipular o banco de dados.
- Como evitar: Usar consultas parametrizadas (prepared statements) ou ORMs (Object-Relational Mappers), validar e sanear todas as entradas de usuário.
XSS e boas práticas de input
- XSS (Cross-Site Scripting): Uma vulnerabilidade que permite a um atacante injetar scripts maliciosos (geralmente JavaScript) em páginas web visualizadas por outros usuários.
- Boas práticas de input: Sanitizar (limpar) e escapar (codificar) todas as entradas de usuário antes de exibi-las em uma página web. Não é uma garantia, mas geralmente ajuda em evitar que códigos maliciosos sejam executados em uma aplicação.
Autenticação e sessões
- Autenticação: O processo de verificar a identidade de um usuário (geralmente com nome de usuário e senha).
- Sessões: Mecanismo para manter o estado de um usuário logado em múltiplas requisições HTTP (que são "stateless"). Geralmente envolve o uso de cookies ou tokens para identificar o usuário. Ajuda a manter o usuário logado enquanto navega pelo site.
Fontes
Livros Didáticos
- "Redes de Computadores e a Internet: Um Top-Down Approach"
- "Redes de Computadores" de Andrew S. Tanenbaum e David Wetherall
Sites
- W3C (World Wide Web Consortium): Para HTML, CSS, Acessibilidade (WCAG) e padrões da web em geral. O site do W3C é a fonte oficial para as especificações dessas tecnologias. -(https://www.w3.org)
- IETF (Internet Engineering Task Force): Para protocolos de internet (IP, TCP, UDP, HTTP, DNS, etc.). Os RFCs (Request for Comments) são os documentos oficiais que definem esses protocolos. Embora técnicos, são a fonte primária. - (https://www.ietf.org)
- Mozilla Developer Network (MDN Web Docs) - (https://developer.mozilla.org/pt-BR/)
- Google Developers - (https://developers.google.com/?hl=pt-br)
- Wikipedia - (https://pt.wikipedia.org/wiki/Rede_de_computadores)
Conclusão
Enfim, espero que esse conteúdo tenha sido útil de alguma maneira. Continuarei compartilhando o conhecimento que for adquirindo conforme for estudando.
Contatos
- Linkedin - https://www.linkedin.com/in/eduardo-do-carmodev/
- Github - https://github.com/EduardoDev0706