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.

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
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
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