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

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