O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Introdução básica aos Navegadores de Internet

644 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Introdução básica aos Navegadores de Internet

  1. 1. TÉCNICAS DE PROGRAMAÇÃO PARA INTERNET I (INFORMÁTICA) 1. INTRODUÇÃO AOS NAVEGADORES WEB
  2. 2. 1. INTRODUÇÃO AOS NAVEGADORES WEB; •Principais navegadores •Funcionalidades •Estruturas
  3. 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. 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. 5. PRINCIPAIS NAVEGADORES Fonte: http://html5accessibility.com/
  6. 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. 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. 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. 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. 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. 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. 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. 13. EXEMPLO DE FLUXO Fonte: https://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about
  14. 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. 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. 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. 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. 18. FERRAMENTAS DO DESENVOLVEDOR
  19. 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. 20. FERRAMENTAS DO DESENVOLVEDOR MOZILA FIREFOX
  21. 21. • 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/
  22. 22. 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.
  23. 23. 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.
  24. 24. 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
  25. 25. 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/
  26. 26. 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

×