Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Introdução básica aos Navegadores de Internet

590 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×