TÉCNICAS DE PROGRAMAÇÃO

PARA INTERNET I
(INFORMÁTICA)
1. INTRODUÇÃO AOS NAVEGADORES WEB
1. INTRODUÇÃO AOS NAVEGADORES WEB;

•Principais navegadores
•Funcionalidades
•Estruturas
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.
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.
PRINCIPAIS NAVEGADORES

Fonte: http://html5accessibility.com/
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).
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 Fonte: Google Imagens

Yang David Filo
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).
• 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.
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
 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.

Fonte: https://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about
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.
EXEMPLO DE FLUXO

Fonte: https://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about
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.
• 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.
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.
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)
FERRAMENTAS
DO
DESENVOLVEDOR
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.
FERRAMENTAS DO DESENVOLVEDOR MOZILA FIREFOX
• 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/
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.
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.
 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
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/
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