Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Como Funciona a Internet e a World Wide Web - do enter do teclado a exibição da página

Como Funciona a Internet e a World Wide Web - do enter do teclado a exibição da página

Muitas profissionais e entusiastas de desenvolvimento web não sabem como funciona a Internet e a World Wide Web e entender o seu funcionamento é importante para todo bom profissional. Apresentaremos o que acontece desde o enter do teclado até a exibição de uma página web no seu navegador. Abordaremos, de maneira didática, conceitos como redes de computadores, cliente-servidor, DNS, TCP/IP, HTTP e HTML fundamentando o conceito de Internet, World Wide Web e quais são as diferenças.

52711e2157a6fed933b0361cc06a6953?s=128

Marcel dos Santos

July 21, 2017
Tweet

Transcript

  1. Marcel Gonçalves dos Santos @marcelgsantos do enter do teclado a

    exibição da página Como funciona a Internet e a World Wide Web
  2. pensandonaweb.com.br desenvolvedor web full-stack Marcel Gonçalves dos Santos @marcelgsantos

  3. None
  4. @femugsp sp.femug.com

  5. @phpsp phpsp.org.br

  6. O que é Internet e Word Wide Web?

  7. Internet
 rede que interconecta computadores e outros dispositivos em escala

    global para a transferência de dados entre eles
  8. World Wide Web
 aplicação onde páginas são interligadas através de

    links e que se utiliza da Internet para funcionar
  9. Mas isso não é o suficiente! Precisamos de mais detalhes…

  10. Redes de 
 Computadores

  11. é interconexão entre computadores que permite a comunicação de dados

    entre si
  12. comunicação pode ser feita através de cabos ou sem fios

  13. Caso de Uso
 acesso a uma página da web

  14. vamos imaginar que iremos acessar a página inicial do Pensando

    na Web
  15. www.pensandonaweb.com.br

  16. Endereço IP e portas

  17. os computadores possuem um endereço numérico único chamado endereço IP

  18. e possuem também inúmeras portas por onde as aplicações e

    processos se comunicam
  19. antes, é necessário estabelecer uma conexão

  20. chamaremos, a partir de agora, o seu computador de cliente

    e o computador onde a página está hospedada de servidor
  21. cliente servidor

  22. cliente
 177.178.79.80 65000 servidor
 185.186.87.88
 80

  23. como o cliente sabe o endereço IP e a porta

    no servidor que deve conectar?
  24. DNS e portas conhecidas

  25. um computador em rede está configurado para um servidor especial

    chamado servidor de nomes ou servidor DNS
  26. o servidor DNS funciona como uma lista telefônica

  27. as portas disponíveis num computador são conhecidas de acordo com

    o serviço que oferecem
  28. 21 - FTP 22 - SSH 25 - SMTP 80

    - servidor web 443 - SSL
  29. e as portas podem ser alteradas?

  30. O servidor DNS funciona como uma lista telefônica para encontrar

    o endereço IP da URL solicitada. Já as portas são conhecidas de acordo com os serviços oferecidos.
  31. TCP/IP como os computadores 
 se comunicam

  32. uma vez conhecido o endereço IP e a porta de

    de destino, é necessário estabelecer uma conexão
  33. cliente
 177.178.79.80 65000 servidor
 185.186.87.88
 80 Boa tarde 185.186.87.88, posso

    me conectar na porta 80? Boa tarde 185.186.87.88, pode conectar. Ok, iniciarei a conexão.
  34. Este tipo de conexão utiliza o protocolo TCP ou Transmission

    Control Protocol…
  35. …é através deste protocolo que o cliente e o servidor

    conversam entre si
  36. e através desta conexão ocorre o envio de pacotes, fragmentos

    menores dos dados que serão trafegados
  37. ponto-a-ponto a comunicação pode ser feita em duas vias (o

    cliente fala com o servidor e o servidor fala com o cliente)
  38. garantia de entrega todos os pacotes que saem da origem

    possuem a garantia de que chegarão ao destino, de forma ordenada e sem modificações
  39. controle de fluxo controla a quantidade de pacotes enviados ou

    recebidos aumentando ou diminuindo de acordo com a necessidade
  40. O TCP é um protocolo de rede que permite a

    comunicação entre computadores e uma conexão deve ser estabelecida antes do início do envio de pacotes…
  41. …ele é um protocolo ponto-a-ponto, possui garantia de entrega de

    pacotes de forma ordenada e sem modificações e possui controle de fluxo.
  42. Mas o que acontece quando a conexão é estabelecida?

  43. HTTP o idioma dos navegadores e servidores web!

  44. existe uma aplicação conhecida como servidor web que recebe e

    manipula todos os pacotes que vem pela porta 80
  45. os navegadores e os servidores web conversam utilizando o idioma

    HTTP
  46. é através do HTTP que navegador informa ao servidor web

    qual a sua versão, qual o seu idioma, se aceita conteúdo compactado ou não e qual página foi solicitada…
  47. …e que o servidor web informa ao navegador se a

    página solici- tada existe, qual o formato, se a página enviada foi compactada e, principalmente, o conteúdo da página solicitada
  48. requisição quando o navegador solicita uma página web

  49. GET / HTTP/1.1 Host: www.pensandonaweb.com.br Connection: keep-alive Cache-Control: no-cache Accept:

    text/html,application/xhtml+xml,application/ xml;q=0.9,image/webp,*/*;q=0.8 Pragma: no-cache 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 Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8,es;q=0.6,pt;q=0.4
  50. resposta quando o servidor web envia a página web solicitada

    de volta para o navegador
  51. HTTP/1.1 200 OK Date: Mon, 31 Mar 2014 22:01:16 GMT

    Server: Apache Content-Type: text/html Cache-Control: no-store Pragma: no-cache Vary: Accept-Encoding,User-Agent Content-Encoding: gzip Connection: close Transfer-Encoding: chunked <!doctype html> <html lang=“pt-br"> <head> <meta charset="UTF-8"> <title>Pensando na Web</title> ... </head> <body> ... </body> </html>
  52. as requisições realizada pelo navegador são independentes umas das outras

  53. ou seja, o HTTP é considerado um protocolo sem estado

    ou stateless
  54. a abordagem que os sites e aplicações web utilizam é

    conhecida como arquitetura cliente-servidor
  55. None
  56. o HTTP tem se tornado um “idioma” amplamente falado e

    é utilizado por outros programas: curl, wget, linguagens de programação
  57. HTML os blocos de construção de uma página web

  58. a resposta é divida em cabeçalho da resposta e conteúdo

    da resposta
  59. o conteúdo da resposta é um documento HTML

  60. o documento HTML é analisado pelo navegador

  61. outros recursos como folhas de estilo, scripts e imagens são

    solicitados e o navegador renderiza a página web
  62. o HTML foi criado por Tim Berners-Lee, que criou também

    o protocolo HTTP e a World Wide Web
  63. no início suportava apenas elementos de texto e links

  64. Por quê entender tudo isso?

  65. permite conhecer melhor o funcionamento de nossas aplicações

  66. Referência https://tableless.com.br/como-funciona- internet-e-world-wide-web/

  67. Avalie!

  68. Perguntas?

  69. Obrigado. @marcelgsantos speakerdeck.com/marcelgsantos