Relatório de Pesquisa: Fundamentos de Desenvolvimento Web

O que é Git?

O Git é um sistema de controle de versão distribuído (VCS). Ele permite que você rastreie as mudanças feitas em um código-fonte ao longo do tempo.

Funções Principais do Git

• Histórico de versões: Registra todas as alterações no projeto.
• Branching e Merging: Permite que desenvolvedores trabalhem em funcionalidades separadas de forma segura.
• Colaboração: Facilita o trabalho em equipe.

O que é GitHub?

O GitHub é uma plataforma de hospedagem de código para controle de versão usando o Git. É um serviço na nuvem que permite a colaboração de desenvolvedores em projetos.

O GitHub não é a mesma coisa que o Git, mas utiliza o Git para funcionar.

Referência: Documentação oficial do GitHub

2. Protocolos de Rede e Comunicação

Os protocolos de rede são conjuntos de regras que permitem a comunicação entre computadores e dispositivos.

HTTP (Hypertext Transfer Protocol)

• O que é: Protocolo fundamental para a comunicação entre navegadores e servidores.
• Para que serve: Transferir dados como páginas web, imagens e arquivos.
• Porta padrão: 80.

HTTPS (Hypertext Transfer Protocol Secure)

• O que é: Versão segura do HTTP que utiliza criptografia SSL/TLS.
• Para que serve: Proteger dados sensíveis e garantir a privacidade da navegação.
• Porta padrão: 443.

WebSockets

• O que é: Protocolo que estabelece uma conexão persistente e bidirecional.
• Para que serve: Habilitar comunicação em tempo real, como em chats e jogos online.
• Porta padrão: Geralmente 80 ou 443.

FTP (File Transfer Protocol)

• O que é: Protocolo para transferência de arquivos entre computadores.
• Para que serve: Fazer upload ou download de arquivos em um servidor.
• Porta padrão: 21.

SSH (Secure Shell)

• O que é: Protocolo criptografado para comunicação segura.
• Para que serve: Acessar e gerenciar servidores remotamente.
• Porta padrão: 22.

SSL/TLS (Secure Sockets Layer/Transport Layer Security)

• O que é: Protocolos criptográficos que garantem a segurança e integridade de dados.
• Para que serve: Criptografar a comunicação, sendo a base do HTTPS.
• Porta padrão: Não têm porta própria; funcionam sobre outros protocolos, como a porta 443 do HTTPS.

Referência: Documentação de HTTP na MDN Web Docs

3. Arquitetura Cliente-Servidor

• O que é: Modelo que separa a comunicação entre cliente (quem solicita) e servidor (quem responde).
• Para que serve: Organizar e centralizar a troca de informações na web.
• Exemplo de uso: Seu navegador (cliente) envia uma requisição para o servidor de um site, que responde enviando a página que você quer visualizar.

Referência: Cliente-Servidor, uma estrutura lógica para a computação centralizada

4. Funcionamento do DNS e de Proxies

DNS (Domain Name System)

• O que é: O "sistema de nomes de domínio" que traduz nomes de sites para endereços IP. Quando a gente digita um endereço no navegador, o DNS atua como uma lista telefônica, encontrando o endereço IP correto do site para que o computador possa se conectar a ele.
• Para que serve: Permite acessar sites usando nomes fáceis de lembrar, como facebook.com, em vez de endereços numéricos como 31.13.78.36.

Referência: O que é DNS? | Como o DNS funciona

Proxies (Servidores Proxy)

• O que é: Um servidor intermediário que atua como ponte entre o usuário e a internet. Uma empresa pode usar um servidor proxy para bloquear o acesso a redes sociais, ou para guardar uma cópia das páginas mais acessadas e carregá-las mais rapidamente para todos os funcionários.
• Para que serve: Pode ser usado para segurança (filtrando sites), acelerar o carregamento de páginas (com cache) ou garantir o anonimato da navegação.

Referência: O que é um servidor proxy? Como funciona?

5. Diferenças entre HTTP e HTTPS

A principal diferença entre HTTP e HTTPS é a segurança.

• HTTP: É o protocolo original, que transfere dados sem criptografia. Pense nele como uma carta aberta enviada pelo correio: qualquer um que a interceptar pode ler o conteúdo.

• HTTPS: Adiciona uma camada de criptografia SSL/TLS, tornando a comunicação privada e segura. Pense nisso como colocar a carta dentro de um cofre com cadeado, que só o destinatário consegue abrir.

Todo site que lida com dados pessoais, como bancos e lojas online, utiliza HTTPS. A presença do cadeado na barra de endereço do navegador é o principal indicador.

Referência: Diferença entre HTTP e HTTPS

6. Principais Categorias de Códigos HTTP e Verbos de Requisição

Os códigos HTTP são respostas do servidor que informam o status de uma requisição.

• Códigos 1xx (Informativos): A requisição foi recebida e está em progresso. Exemplo: 100 Continue.
• Códigos 2xx (Sucesso): Indicam que a requisição foi bem-sucedida. Exemplo: 200 OK.
• Códigos 3xx (Redirecionamento): O cliente precisa tomar uma ação adicional. Exemplo: 301 Moved Permanently.
• Códigos 4xx (Erro do Cliente): Indicam um erro na requisição do cliente. Exemplo: 404 Not Found.
• Códigos 5xx (Erro do Servidor): Indicam um erro que ocorreu no servidor. Exemplo: 500 Internal Server Error.

Referência: Códigos de status de respostas HTTP

Os verbos de requisição definem a ação que o cliente quer realizar. Eles são a base para interagir com dados em uma aplicação web, seguindo o padrão CRUD (Criar, Ler, Atualizar, Deletar).

• GET (Read): Solicita dados de um recurso. Usado para carregar páginas, imagens ou listas. Então quando a gente clica no link para o perfil de um amigo em uma rede social. Seu navegador envia uma requisição GET para o servidor para pedir todas as informações daquele perfil (foto, nome, posts, etc.) nisso o servidor responde com esses dados, e a página é carregada na sua tela.

• POST (Create): Envia dados para o servidor para criar um novo recurso, como um post ou um novo usuário. Então quando escrevemos uma nova publicação em um rede social e apertamos no botão "Publicar". O navegador envia uma requisição POST com o conteúdo do texto para o servidor, que então cria a nova publicação no banco de dados.

• PUT (Update): Envia dados para o servidor para atualizar ou substituir completamente um recurso. Então quando decidimos mudar a foto do perfil. A gente clica para editar a foto e faz o upload de uma nova imagem. A requisição PUT é enviada para o servidor com a nova imagem, que substitui totalmente a foto anterior. Se o perfil tiver uma biografia e um nome, a requisição PUT substituiria tudo, incluindo a biografia e o nome, mesmo que eles não tenham sido alterados.

• DELETE (Delete): Solicita a remoção de um recurso específico do servidor. Quando a gente vê um comentário antigo e decide apagá-lo. Ao clicar no botão "Excluir", o navegador envia uma requisição DELETE para o servidor, que remove aquele comentário do banco de dados.

• PATCH (Update): Envia dados para atualizar parcialmente um recurso. Então quando queremos atualizar o número de telefone do nosso perfil. A gente clica em "Editar Perfil", muda apenas o número e clica em "Salvar". O navegador envia uma requisição PATCH para o servidor, contendo apenas a informação do novo número de telefone. O servidor atualiza somente aquele campo, mantendo o restante do perfil intacto.

• HEAD e OPTIONS: Verbos menos comuns, usados para obter informações sobre um recurso sem transferir o conteúdo completo.

• HEAD - Um desenvolvedor precisa verificar se um arquivo grande foi atualizado em um servidor. Em vez de baixar o arquivo inteiro com o GET, ele envia uma requisição HEAD para o mesmo endereço. O servidor responde apenas com os cabeçalhos do arquivo (que contêm a data de modificação), permitindo a verificação rápida sem desperdiçar tempo e banda.

• OPTIONS - Um programador está desenvolvendo um aplicativo que se conecta a uma API. Para saber quais ações (verbos) ele pode realizar em um recurso específico (por exemplo, um post), ele pode enviar uma requisição OPTIONS para a URL do post. O servidor responderá informando quais verbos são permitidos naquele recurso, como GET, PUT, DELETE, etc.

Referência: Métodos de requisição HTTP

7. Principais Tags do HTML

O HTML usa tags para estruturar o conteúdo de uma página web.

• Estrutura da página:

<html> - A tag principal que engloba toda a página.

<head> - Contém informações sobre a página (metadados), como o título, links para arquivos CSS e scripts.

<body> - Contém todo o conteúdo visível da página (textos, imagens, links, etc.).

• Títulos e parágrafos: <h1> a <h6> e <p>.

• Listas:

<ul> - Para criar uma lista não ordenada (com bolinhas).

<ol> - Para criar uma lista ordenada (com números).

<li> - Define um item dentro de uma lista

• Links e imagens: <a> e <img>.

• Tags semânticas: <header>, <nav>, <main>, <section>, <article>, <footer>.

Referência: Elementos HTML

8. Seletores de CSS

Os seletores de CSS são usados para aplicar estilos a elementos HTML.

• Seletor de Tipo: p { ... } - Seleciona todos os parágrafos.

• Seletor de Classe: Seleciona todos os elementos que têm um atributo de classe com um nome específico. A classe é definida no HTML com class="nome-da-classe" e no CSS com um ponto (.). Exemplo: .destaque { ... } - estiliza qualquer elemento com a classe "destaque".

• Seletor de ID: Seleciona um único elemento com um ID específico. O ID é único para cada elemento na página. É definido no HTML com id="nome-do-id" e no CSS com um hashtag (#). Exemplo: #menu-principal { ... } - estiliza o elemento com o ID "menu-principal".

Referência: Seletores CSS

9. O que é uma Webview

Uma Webview é um componente que permite exibir conteúdo da web dentro de um aplicativo nativo.

• Exemplo: Quando um aplicativo de rede social abre uma notícia sem sair do próprio aplicativo.

Referência: O que é um aplicativo WebView e como funciona?