Baixar para ler offline
AULA 02 - COMO FUNCIONA A WEB - INTRO.pptx
- 1. Introdução à Web Prof.Jesiel Viana Como a web funciona?
- 2. Componentes da Web ●Servidor ● Cliente ● Internet ● HTTP ● DNS ● Navegador 2
- 3. Web… Para começar precisamos entendero conceito de cliente e servidor. 3
- 4. 4 Chamaremos de clienteo seu dispositivo de acesso a web e de servidor o computador onde a página web está hospedada.
- 5.
- 6. Endereços e Portas ▪Computadorespossuem um endereço numérico único chamado endereço IP. ▪Além do endereço IP possuem também inúmeras portas por onde as aplicações e processos se comunicam. ▪Para que você acesse a página desejada, de fato, o seu computador precisa antes estabelecer uma conexão com o computador onde a página solicitada está hospedada. 6 192.168.1.102
- 7. Portas Conhecidas ● FTPpode ser encontrado na porta 21. ● SSH estará na porta 22. ● SSMTP estará na porta 25. ● Serviço de entrega de páginas web por padrão estará na porta 80 (http) e 443 (https). 7
- 8.
- 9. DNS - DomainName System Domain Name System (DNS) são como listas de endereços para sites. Quando você digita um endereço web no seu navegador, este procura o real endereço da página web no servidor DNS antes de poder lhe entregar a página. O navegador precisa encontrar em qual servidor web a página está hospedada, para que ele mande mensagens HTTP para o lugar certo (veja abaixo). Isso é como pesquisar o endereço e o telefone da loja para que você possa entrar em contato (MOZILLA, 2018). 9
- 10. 10 Protocolo de transferência dedados na Web
- 11. HTTP - HypertextTransfer Protocol ● O "idioma" dos navegadores e servidores web! ● É através deste "idioma" que o seu navegador informa ao servidor web: ○ sua versão; ○ seu idioma; ○ página solicitada. ● É através deste "idioma" que o servidor web informa ao seu navegador: ○ se a página solicitada existe; ○ seu formato; ○ o conteúdo da página solicitada. 11
- 12. 12 Quando o navegadorsolicita uma página web chamamos de requisição (request) e quando o servidor web envia a página web solicitada de volta para o navegador é chamado de resposta (response).
- 13. HTTPS HTTPS (Hypertext TransferProtocol Secure - protocolo de transferência de hipertexto seguro) é uma implementação do protocolo HTTP sobre uma camada adicional de segurança que utiliza o protocolo SSL/TLS. Essa camada adicional permite que os dados sejam transmitidos por meio de uma conexão criptografada e que se verifique a autenticidade do servidor e do cliente por meio de certificados digitais (Wikipedia, 2016). 13
- 14.
- 15.
- 16.
- 17. Navegador Um navegador,também conhecido pelos termos em inglês web browser ou simplesmente browser, é um programa de computador que habilita seus usuários a interagirem com documentos virtuais da Internet, também conhecidos como páginas da web 17
- 18. O que éum navegador web? 18 Basicamente, os navegadores interpretam as páginas codificadas em HyperText Markup Language (HTML) para uma visualização compreensível para o usuário comum. O HTML é um padrão de marcação de hipertexto (textos, imagem, vídeo e áudio) que define como os elementos de uma página devem ser exibidos.
- 19. Quiz 5 Análogo aocatálogo de uma lista telefônica? 1. TCP 2. DNS 3. HTTP 19
- 20. Quiz 7 É oprotocolo utilizado para comunicação entre navegadores e servidores web, também conhecido como "idioma" dos navegadores e servidores web. 1. DNS 2. Navegador 3. HTTP 20
- 21. Atividade 1 21 1. Definainternet. 2. Defina web. 3. Explique a diferença entre internet e web. 4. Descreva navegador web.
- 22. Fluxo completo deum acesso à uma página web por meio do navegador. 22
- 23.
- 24.
- 25. Vejam 25 ● https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_ the_web/Como_a_Web_funciona (Leitura obrigatória) ●http://www.evolutionoftheweb.com/static (Evolução da Web) ● http://archive.org/web/ (Ver site em datas anteriores)
- 26. Referências ▪http://tableless.com.br/como-funciona-internet-e-world-wide-web ▪http://www.tecmundo.com.br/internet/57947-internet-diferenca-entre-protocolos-udp-tcp.htm ▪https://pt.wikipedia.org/wiki/Hyper_Text_Transfer_Protocol_Secure ▪GARSIEL, Tali; IRISH,Paul. How browsers work: Behind the scenes of modern web browsers. Google Project, August, 2011. ▪https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_fun ciona 26
- 27.
Notas do Editor
- #14 Este é um exemplo de requisição HTTP GET, usada para solicitar recursos (como páginas web) de um servidor. Vamos analisar linha por linha: 1. GET / HTTP/1.1 GET: Método HTTP usado para requisitar dados do servidor (sem modificar). /: Indica a raiz do site (ex: www.pensandonaweb.com.br/). HTTP/1.1: Versão do protocolo HTTP utilizada. 2. Host: www.pensandonaweb.com.br Especifica o nome do host (site) a ser acessado. Essencial em servidores que hospedam múltiplos sites (virtual hosts). 3. Connection: keep-alive Pede ao servidor para manter a conexão aberta após esta requisição, permitindo outras requisições sem novo handshake (mais rápido). 4. Cache-Control: no-cache Indica que o navegador não quer usar dados em cache, pedindo que o servidor envie uma nova versão do recurso. 5. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Informa ao servidor quais formatos de resposta o cliente aceita: text/html: páginas HTML application/xhtml+xml: versão XML do HTML application/xml: XML genérico (com qualidade 0.9) image/webp: imagens no formato WebP */*: qualquer tipo (com qualidade 0.8) O q=... indica preferência (quanto maior, mais preferido). 6. Pragma: no-cache Similar ao Cache-Control, mas mais antigo. É usado para forçar a não utilização de cache, principalmente em HTTP/1.0. 7. User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.116 Safari/537.36 Identifica o navegador e sistema operacional do cliente. Neste caso: Chrome 34 no macOS 10.9.2. 8. Accept-Encoding: gzip,deflate,sdch Indica que o cliente aceita respostas comprimidas usando os algoritmos: gzip, deflate e sdch (uma compressão mais antiga do Google). Isso reduz o tráfego e acelera o carregamento. 9. Accept-Language: en-US,en;q=0.8,es;q=0.6,pt;q=0.4 Indica os idiomas preferidos para o conteúdo: en-US (inglês americano) é o mais preferido. pt (português) tem a menor prioridade, mas ainda é aceito.
- #15 HTTP/1.1 200 OKVersão do protocolo: HTTP/1.1Código de status: 200 significa que a requisição foi bem-sucedida.Mensagem: OK indica sucesso. 2. Date: Mon, 31 Mar 2014 22:01:16 GMTData e hora (em GMT) em que o servidor gerou a resposta. 3. Server: ApacheInforma o servidor web utilizado — nesse caso, o Apache. 4. Content-Type: text/htmlIndica o tipo de conteúdo retornado: HTML, para ser interpretado por navegadores. 5. Cache-Control: no-storeDiz que o conteúdo não deve ser armazenado em cache, nem pelo navegador nem por proxies. 6. Pragma: no-cacheCompatível com HTTP/1.0, também diz para não armazenar em cache. 7. Vary: Accept-Encoding, User-AgentIndica que a resposta pode variar dependendo do navegador (User-Agent) ou do tipo de compactação aceita (Accept-Encoding). 8. Content-Encoding: gzipO conteúdo da resposta está comprimido com gzip, para reduzir o tamanho da transferência. 9. Connection: closeApós enviar a resposta, o servidor irá encerrar a conexão com o cliente. 10. Transfer-Encoding: chunkedIndica que o conteúdo HTML será enviado em blocos (chunks), útil quando o servidor não sabe o tamanho total da resposta ao iniciar o envio. Início do Código HTML (linhas 12 a 23): 12. <!doctype html>Declaração do tipo de documento: HTML5. 13. <html lang="en">Início do documento HTML com idioma definido como inglês (en). 14. <head>Início da seção de metadados da página (título, codificação etc.). 15. <meta charset="UTF-8">Define a codificação de caracteres como UTF-8 (suporta acentos e símbolos especiais). 16. <title>Pensando na Web</title>Define o título da aba/navegador ao acessar essa página. 18. </head>Fim da seção de metadados. 19. <body>Início do corpo da página — onde aparece o conteúdo visível ao usuário. 22. </body>Fim do corpo da página. 23. </html>Fim do documento HTML.