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. PRIMEIRO NAVEGADOR:
No Ano de 1993, o primeiro Browser
ou melhor, Navegador, foi criado por
Marc Andreessen e outros estudantes
do NCSA (National Center for
Supercomputing Applications) 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
Jerry Yang e seu colega David Filo criaram um website que
apresentava um diretório de outros sites. Seu nome oficial
era "Jerry's Guide to the World Wide Web" (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
David Filo

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;
• Documentos PDF;
• 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 maneira que os browser (navegadores) interpretam e exibem os arquivos
HTML é apresentadas conforme as especificações de HTML e CSS. Essas
especificações são mantidas pelo W3C (Consórcio World Wide Web), 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
Uma função dos Navegadores é renderizar, ou seja, exibir os conteúdos
solicitados na tela do navegador.
Por padrão, o mecanismo de renderização pode exibir documentos e imagens
HTML e XML. Ele pode exibir outros formatos por meio de plug-ins (ou
extensões do navegador). Por exemplo, é possível exibir um PDF por meio de
um plug-in do navegador para visualização de PDFs. No entanto, neste
capítulo, nosso foco estará no uso principal: a exibição de HTML e de imagens
formatadas com CSS.

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

14. PLUGINS DOS NAVEGADORES
Módulo de extensão (também conhecido por plug-in, add-in, add-on) é
um programa 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, plugins diferem de extensões. Plugins
geralmente são externos, componentes binários usando o Netscape Plugin API
(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, plugins e 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 (Portable Document Format).
• 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, Quick Time 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 DevTools para 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:
•Selecione More Tools > Developer Tools no menu do Google Chrome.
•Clique com o botão direito em um elemento da página e selecione Inspect
•Use os atalhos de teclado Ctrl+Shift+I (Windows) ou Cmd+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 útil para conhecer e melhorar o código enquanto está desenvolvendo.

20. FERRAMENTAS DO DESENVOLVEDOR MOZILA FIREFOX

22. • Neste endereço o Mozila Firefox 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ém podem
personalizar o navegador como plano de fundo, 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:
• Criar atalhos com site favoritos
• Privacidade e segurança
• Limpar histórico de navegação (importante não deixar senhas 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: claytonn_Souza@Hotmail.com
Site pessoal (em breve): www.claytondeasouza.com.br