Introdução básica aos Navegadores de Internet

Conceitos básicos dos Browsers, suas particularidades, funcionalidades e recursos

1. TÉCNICAS DE PROGRAMAÇÃO
PARA INTERNET I
(INFORMÁTICA)
1. INTRODUÇÃO AOS NAVEGADORES WEB

2. 1. INTRODUÇÃO AOS NAVEGADORES WEB;
•Principais navegadores
•Funcionalidades
•Estruturas

3. PRIMEIRONAVEGADOR:
No Ano de 1993, o primeiro Browser
ou melhor, Navegador, foi criado por
Marc Andreessene outros estudantes
do NCSA (NationalCenter for
SupercomputingApplications) na
Universidade de Illinois. O nome do
Navegador era MOSAICO.

4. Este primeiro navegador funcionava também no modo gráfico, exibia imagens
e podia operar em PCs Macintosh e em máquinas Unix. Os browsers dos dias
de hoje são capazes de reproduzir sons, músicas, vídeos, cenários
tridimensionais e possuem muito mais recursos para a interatividade com o
usuário, como jogos por exemplo, além de estar presente também em vários
modelos e tipos de Smartphones e computadores.

5. PRINCIPAIS NAVEGADORES
Fonte: http://html5accessibility.com/

6. Os quatro principais navegadores em uso: Internet Explorer, Firefox, Safari,
Google Chrome e Opera. Os exemplos dados serão relacionados aos
navegadores em código aberto –Firefox, Google Chrome e Safari (que é
parcialmente em código aberto).

7. JERRY YANG E DAVID FILO
JerryYangeseu colega David Filo criaram um website que
apresentava um diretório de outros sites. Seu nome oficial
era "Jerry'sGuidetotheWorld WideWeb" (em inglês, o
guia de Jerry para a WWW), mas logo foi renomeado
para "Yahoo!".
Era o primeiro website que apenas organizava alguns links
de páginas espalhadas pela rede em hierarquia e pastas,
como se fossem os arquivos de um computador.
Fonte: Google Imagens Jerry
Yang
Fonte: Google Imagens
DavidFilo

8. FUNCIONALIDADE
•Browser ou Navegadores são Softwares cuja a finalidade principal é apresentar os
recurso da web escolhido pelo usuário através da solicitação ao servidor e exibição
na janela do mesmo. Os recurso geralmente são:
•Documentos HTML;
•DocumentosPDF;
•Uma imagem ou outro tipo de arquivo;
O local desses recursos é especificado pelo usuário por meio de um URI (Identificador
Uniforme de Recursos).

9. •A maneiraque os browser (navegadores) interpretam e exibem os arquivos
HTML é apresentadas conforme as especificações de HTML e CSS. Essas
especificações são mantidas peloW3C (Consórcio World WideWeb), a
organização que controla os padrões para a web.

10. INTERFACES
Entre os elementos comuns das interfaces do usuário destaca-se:
•Barra de endereço para inserção do URI (exemplo: http://www.google.com)
•Botões voltar e avançar
•Opções para adicionar favoritos
•Botões atualizar e parar para atualizar e parar o carregamento dos documentos
atuais
•Botão Início que o leva à página inicial

11. Fonte: https://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about
O navegador precisa salvar dados
de diversos tipos no disco rígido,
como cookies. A nova especificação
HTML (HTML5) define "banco de
dados da web", que é um banco de
dados completo (embora leve) no
navegador.

12. RENDERIZAÇÃO
UmafunçãodosNavegadoresérenderizar,ouseja,exibirosconteúdos
solicitadosnateladonavegador.
Porpadrão,omecanismoderenderizaçãopodeexibirdocumentoseimagens
HTMLeXML.Elepodeexibiroutrosformatospormeiodeplug-ins(ou
extensõesdonavegador).Porexemplo,épossívelexibirumPDFpormeiode
umplug-indonavegadorparavisualizaçãodePDFs.Noentanto,neste
capítulo,nossofocoestaránousoprincipal:aexibiçãodeHTMLedeimagens
formatadascomCSS.

13. EXEMPLO DE FLUXO
Fonte: https://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about

14. PLUGINSDOS NAVEGADORES
Módulo de extensão(também conhecido porplug-in,add-in,add-on) é
umprograma de computador usado para adicionar funções a outros
programas maiores, provendo alguma funcionalidade especial ou muito
específica. Geralmente pequeno e leve, é usado somente sob demanda.

15. •No que diz respeito aos navegadores, pluginsdiferem de extensões. Plugins
geralmente são externos, componentes binários usando o Netscape PluginAPI
(ou ActiveX no Microsoft Internet Explorer) para lidar com novos tipo de
multimídia. Extensões, por outro lado, geralmente são integradas com a
lógica da aplicação do browser, isto é, a interface do próprio navegador. Já
que ambos, pluginse extensões, aumentam a utilidade da aplicação original,
o Mozilla utiliza o termo "add-on" como uma categoria inclusiva de módulos
de reposição que consiste de plugins, temas e ferramentas de busca.

16. EXEMPLOS:
•Adobe Acrobat Reader: visualização de arquivos PDF (PortableDocumentFormat).
•Crescendo: inserção de arquivos MIDI em páginas, na Internet.
•Macromedia Flash: visualização de páginas feitas parcialmente ou inteiramente em
Flash.
•QuickTime, QuickTime Alternativo: visualização de vídeos em vários formatos,
inclusive o mov.
•Real Player Alternativo: execução de sons e vídeos em tempo real.

17. CHROME DEVTOOLS
O Chrome DevToolsé um conjunto de ferramentas de autoria e depuração de
Web incorporado ao Google Chrome. Use o DevToolspara iterar, depurar e
criar o perfil do seu site. Outros navegadores como Firefox também possui
ferramentas para auxiliar e melhorar o trabalho do Desenvolvedor Web como
por exemplo o Firebug.
Para abrir a ferramenta no basta:
•SelecioneMore Tools>DeveloperToolsno menu do Google Chrome.
•Clique com o botão direito em um elemento da página e selecione Inspect
•Use osatalhos de tecladoCtrl+Shift+I(Windows) ouCmd+Opt+I(Mac)

18. FERRAMENTAS
DO
DESENVOLVEDOR

19. Na Imagem abaixo uma página web e os recursos utilizados como HTML, Folha de Estilo CSS, Script etc.
Muitoútilparaconheceremelhorarocódigo enquanto está desenvolvendo.

20. FERRAMENTAS DODESENVOLVEDOR MOZILAFIREFOX

22. •Neste endereço o MozilaFirefox apresenta todas as ferramentas úteis de
acordo com a necessidade de cada usuário, como as extensões e plug-ins
como comentado anteriormente.
•https://addons.mozilla.org/pt-BR/firefox/extensions/

23. NO NAVEGADOR INTERNET EXPLORER EDGE...
•Para acessar a ferramenta de desenvolvedor no navegador Internet Explore
Edge, basta acessar o menu no canto superior próximo a barra de endereço
e procurar a opção: “ferramentas do desenvolvedor” ou se preferir utiliza-se
a tecla de atalho F12.

26. CONFIGURAÇÕES BÁSICAS
•Além das ferramentas de desenvolvimento, os usuários tambémpodem
personalizar onavegadorcomoplanodefundo, fonte e outros recursos
visuais. Para isso basta clicar no Menu, em seguida configurações e depois
em Aparência, assim poderá alterar o tamanho e tipo das fontes, cores de
fundo, mecanismos de pesquisas etc.

27. TODOS OS NAVEGADORES POSSUEM
FERRAMENTAS PARA CONFIGURAÇÕES
•Outras configurações básicas são:
•Criaratalhoscomsitefavoritos
•Privacidade e segurança
•Limparhistóricodenavegação(importantenãodeixarsenhas e formulários salvas,
por questão de segurança)
•Acessibilidade
•Download
•Escolha do idiomas e etc

29. BIBLIOGRAFIA E REFERENCIA
•Fontes:
https://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/#The_bro
wsers_we_will_talk_about
http://html5accessibility.com/
https://getfirebug.com/releases/lite/chrome/

30. OBRIGADO!
Clayton de Almeida Souza
Graduado em Sistemas de Informação pela Universidade Bandeirantes de São
Paulo –UNIBAN e Especialista em Sistemas e Desenvolvimento Web pela
Universidade Nove de Julho –UNINOVE.
Contatos:
Blog:http://professorclaytonsouza.blogspot.com
E-mail: [email protected]
Site pessoal (em breve): www.claytondeasouza.com.br