Navegadores

01. O que é um Navegador?

📌 Definição

🌐 Exemplos

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Safari
• Opera
• Brave

📖 Como funciona?

Usuário
   ↓
Navegador
   ↓
Internet
   ↓
Servidor
   ↓
Arquivos do site
   ↓
Navegador
   ↓
Página exibida

02. Google Chrome

🌐 Principais características

• Ferramentas de desenvolvimento completas.
• Suporte a HTML, CSS e JavaScript.
• Grande quantidade de extensões.
• Sincronização com serviços do Google.
• Ferramentas para testes responsivos.
• Console para execução e análise de JavaScript.
• Ferramentas para analisar desempenho e rede.

👨‍💻 Para desenvolvimento

03. Microsoft Edge

🌐 Principais características

• Ferramentas de desenvolvimento.
• Compatibilidade com tecnologias modernas da web.
• Suporte a extensões.
• Integração com serviços da Microsoft.
• Ferramentas para análise de páginas.
• Modo responsivo para testes.

04. Mozilla Firefox

🌐 Recursos

• Ferramentas de desenvolvedor.
• Inspetor de elementos.
• Console JavaScript.
• Monitoramento de rede.
• Ferramentas de acessibilidade.
• Ferramentas para desenvolvimento responsivo.

05. Safari

🍎 Onde encontramos?

• macOS
• iOS
• iPadOS

06. Opera

🌐 Exemplos de recursos

• Gerenciamento de abas.
• Personalização da interface.
• Recursos de privacidade.
• Ferramentas de produtividade.
• Suporte a tecnologias modernas da web.

07. Brave

🔐 Características

• Recursos de privacidade.
• Bloqueio de determinados rastreadores.
• Compatibilidade com tecnologias baseadas em Chromium.
• Ferramentas de desenvolvimento.

08. Comparando os Principais Navegadores

09. Entendendo a URL

🌐 Exemplo

https://www.exemplo.com.br/produtos/index.html

📖 Dividindo a URL

https://
   ↓
Protocolo

www.exemplo.com.br
   ↓
Domínio

/produtos/
   ↓
Caminho

index.html
   ↓
Recurso

10. HTTP e HTTPS

🔒 Exemplo

http://exemplo.com

https://exemplo.com

11. Trabalhando com Abas

⌨️ Atalhos importantes

Ctrl + T
Nova aba

Ctrl + W
Fechar aba

Ctrl + Shift + T
Reabrir aba fechada

Ctrl + Tab
Próxima aba

Ctrl + Shift + Tab
Aba anterior

12. Favoritos

⌨️ Atalho

Ctrl + D

📝 Passo a passo

1. Abra uma página que deseja guardar.
2. Pressione Ctrl + D.
3. Escolha o nome do favorito.
4. Escolha uma pasta, se necessário.
5. Confirme.

13. Histórico de Navegação

⌨️ Atalho

Ctrl + H

📝 Passo a passo

1. Abra o navegador.
2. Pressione Ctrl + H.
3. Observe as páginas registradas.
4. Pesquise por uma página específica.

14. Downloads

⌨️ Atalho

Ctrl + J

📝 Passo a passo

1. Faça o download de um arquivo permitido e confiável.
2. Pressione Ctrl + J.
3. Observe a lista de downloads.
4. Localize o arquivo no computador.

15. Cache do Navegador

📖 Por que o cache existe?

🧪 Quando o cache pode atrapalhar?

Durante o desenvolvimento, você pode alterar um arquivo CSS ou JavaScript e perceber que o navegador parece continuar mostrando a versão anterior.

⌨️ Atualização forçada

Ctrl + F5

16. Cookies

🍪 Exemplos de utilização

• Manter determinadas preferências.
• Identificar uma sessão.
• Guardar determinadas configurações.
• Auxiliar no funcionamento de sistemas web.

17. Navegação Privada

⌨️ Atalho comum

Ctrl + Shift + N

18. O que são as Ferramentas do Desenvolvedor?

👨‍💻 O que podemos analisar?

• HTML
• CSS
• JavaScript
• Imagens
• Arquivos carregados
• Requisições HTTP
• Cookies
• Armazenamento
• Desempenho
• Responsividade
• Erros JavaScript

⌨️ Como abrir?

F12

ou

Ctrl + Shift + I

19. Inspecionando o HTML

📝 Passo a passo

1. Abra um site.
2. Pressione F12.
3. Abra a área Elements.
4. Localize o código HTML.
5. Procure por elementos como div, h1, p e button.
6. Clique em um elemento.
7. Observe a parte da página correspondente.

20. Alterando CSS em Tempo Real

📝 Passo a passo

1. Abra uma página.
2. Pressione F12.
3. Abra Elements.
4. Selecione um elemento.
5. Observe a área de estilos.
6. Localize uma propriedade CSS.
7. Altere o valor.
8. Observe a mudança imediatamente.

💻 Exemplos de propriedades

color
background
font-size
margin
padding
width
height
display

21. Selecionando um Elemento da Página

📝 Passo a passo

1. Abra o DevTools.
2. Procure pelo ícone de seleção de elemento.
3. Clique nesse ícone.
4. Mova o mouse sobre a página.
5. Clique em um elemento.
6. Observe o HTML selecionado.
7. Observe os estilos aplicados.

22. Console JavaScript

📝 Passo a passo

1. Abra uma página.
2. Pressione F12.
3. Localize a aba Console.
4. Clique na área de comandos.
5. Digite um comando JavaScript.
6. Pressione Enter.

💻 Exemplo

console.log("Olá, mundo!");

23. Identificando Erros no Navegador

📝 Passo a passo

1. Abra sua página.
2. Pressione F12.
3. Abra o Console.
4. Observe mensagens de erro ou aviso.
5. Clique no erro quando houver um link para o código.
6. Analise o arquivo e a linha indicada.

24. Testando a Responsividade

📱 Como testar?

1. Abra o DevTools.
2. Localize o botão de dispositivo.
3. Ative o modo responsivo.
4. Selecione diferentes dispositivos.
5. Altere a largura da tela.
6. Observe o comportamento da página.

⌨️ Atalho comum

Ctrl + Shift + M

25. Aba Network — Rede

🌐 O que podemos encontrar?

• Arquivos HTML.
• Arquivos CSS.
• Arquivos JavaScript.
• Imagens.
• Fontes.
• Requisições para APIs.
• Códigos de resposta HTTP.
• Tempo de carregamento.

📝 Passo a passo

1. Abra uma página.
2. Pressione F12.
3. Abra Network.
4. Recarregue a página.
5. Observe os arquivos carregados.
6. Clique em um recurso.
7. Observe suas informações.

26. Códigos de Status HTTP

27. Armazenamento do Navegador

📦 Exemplos

• Cookies
• Local Storage
• Session Storage
• Cache Storage

💻 Exemplo JavaScript

localStorage.setItem("nome", "Aluno");

localStorage.getItem("nome");

28. Zoom da Página

⌨️ Atalhos

Ctrl + +

Aumentar

Ctrl + -

Diminuir

Ctrl + 0

Restaurar

29. Atalhos Essenciais dos Navegadores

30. Pesquisando Dentro de uma Página

⌨️ Atalho

Ctrl + F

📝 Passo a passo

1. Abra uma página com bastante conteúdo.
2. Pressione Ctrl + F.
3. Digite uma palavra.
4. Observe os resultados encontrados.
5. Utilize Enter para avançar pelos resultados.

31. Copiando e Compartilhando uma URL

📝 Passo a passo

1. Clique na barra de endereço.
2. Pressione Ctrl + L.
3. Pressione Ctrl + C.
4. Abra outro local.
5. Pressione Ctrl + V.

⌨️ Atalho importante

Ctrl + L

32. O Navegador como Ferramenta de Desenvolvimento

👨‍💻 O desenvolvedor utiliza o navegador para:

• Visualizar páginas.
• Testar HTML.
• Testar CSS.
• Executar JavaScript.
• Identificar erros.
• Verificar responsividade.
• Observar requisições.
• Analisar armazenamento.
• Investigar desempenho.
• Testar diferentes situações.

VS Code
   ↓
Escrever código
   ↓
Salvar projeto
   ↓
Navegador
   ↓
Testar
   ↓
DevTools
   ↓
Investigar
   ↓
Corrigir código
   ↓
Testar novamente

33. 🧪 Laboratório 01 — Conhecendo o DevTools

📝 Faça passo a passo

1. Abra o Google Chrome.
2. Acesse qualquer página de estudo.
3. Pressione F12.
4. Abra a área Elements.
5. Localize um título da página.
6. Selecione esse elemento.
7. Observe o código HTML.
8. Observe os estilos CSS.
9. Altere temporariamente o tamanho da fonte.
10. Altere temporariamente uma cor.
11. Observe o resultado.
12. Atualize a página.
13. Observe o que acontece com as alterações.

34. 🧪 Laboratório 02 — Testando JavaScript

📝 Passo a passo

1. Abra o navegador.
2. Abra o DevTools com F12.
3. Abra a aba Console.
4. Digite:

console.log("Olá, mundo!");

5. Pressione Enter.
6. Observe o resultado.

🧪 Segundo teste

2 + 3

Pressione Enter.

🧪 Terceiro teste

document.title

35. 🧪 Laboratório 03 — Testando Responsividade

📝 Passo a passo

1. Abra uma página.
2. Pressione F12.
3. Ative o modo responsivo.
4. Selecione um dispositivo móvel.
5. Observe a página.
6. Selecione outro tamanho.
7. Teste uma largura diferente.
8. Observe menus, textos, imagens e botões.

36. 🧪 Laboratório 04 — Investigando a Rede

📝 Passo a passo

1. Abra uma página.
2. Pressione F12.
3. Abra Network.
4. Recarregue a página.
5. Observe a lista de requisições.
6. Procure por um arquivo CSS.
7. Procure por um arquivo JavaScript.
8. Procure por imagens.
9. Observe os códigos de status.
10. Observe o tempo de carregamento.

37. 🧪 Laboratório 05 — Entendendo o Cache

📝 Passo a passo

1. Abra um projeto HTML.
2. Abra o arquivo CSS.
3. Altere uma propriedade visual.
4. Salve com Ctrl + S.
5. Volte para o navegador.
6. Atualize a página.
7. Se necessário, utilize Ctrl + F5.
8. Observe novamente o resultado.

38. Compatibilidade entre Navegadores

🌐 Teste básico

1. Abra seu projeto no Chrome.
2. Teste a página.
3. Abra o mesmo projeto no Edge.
4. Teste novamente.
5. Compare os resultados.
6. Quando possível, faça testes em outros navegadores.

39. Segurança durante a Navegação

🔐 Boas práticas

• Verifique o endereço do site.
• Tenha cuidado com links desconhecidos.
• Evite baixar arquivos de fontes suspeitas.
• Mantenha o navegador atualizado.
• Utilize senhas fortes e diferentes quando apropriado.
• Não compartilhe senhas.
• Observe alertas de segurança do navegador.

40. Boas Práticas para Desenvolvedores

• Testar o projeto no navegador.
• Utilizar o DevTools para investigar problemas.
• Testar a responsividade.
• Observar erros no Console.
• Verificar arquivos na aba Network.
• Testar diferentes navegadores.
• Manter o navegador atualizado.
• Não confiar em links desconhecidos.
• Utilizar atalhos para aumentar a produtividade.

🏆 Desafio Final — Investigando uma Página Web

🎯 Etapa 01 — Navegação

1. Abra o Google Chrome.
2. Acesse uma página indicada pelo professor.
3. Abra uma nova aba.
4. Adicione a página aos favoritos.
5. Abra o histórico.

🎯 Etapa 02 — DevTools

1. Abra o DevTools utilizando F12.
2. Localize a área Elements.
3. Encontre um título.
4. Encontre um parágrafo.
5. Encontre um botão.

🎯 Etapa 03 — CSS

1. Selecione um elemento.
2. Localize os estilos CSS.
3. Altere temporariamente uma cor.
4. Altere o tamanho da fonte.
5. Altere uma margem ou espaçamento.

🎯 Etapa 04 — JavaScript

1. Abra o Console.
2. Execute:

console.log("Teste realizado com sucesso!");

🎯 Etapa 05 — Responsividade

1. Ative o modo responsivo.
2. Teste uma tela de celular.
3. Teste uma tela de tablet.
4. Teste uma tela maior.
5. Observe o comportamento do layout.

🎯 Etapa 06 — Network

1. Abra a aba Network.
2. Recarregue a página.
3. Localize um arquivo CSS.
4. Localize um arquivo JavaScript.
5. Localize uma imagem.
6. Observe os códigos de status.

🎯 Etapa 07 — Relatório

Registre o que você encontrou durante a investigação.

• Qual navegador foi utilizado?
• Qual página foi analisada?
• Quantos arquivos CSS foram encontrados?
• Quantos arquivos JavaScript foram encontrados?
• Foi encontrado algum erro no Console?
• A página é responsiva?
• O que você conseguiu alterar pelo DevTools?
• Qual foi a principal descoberta durante a atividade?