Como os sites funcionam, um vislumbre do ciclo de vida de solicitação/resposta (iniciante!)

1. Understand e entenda a vida de um projeto de vida de pedido/resposta (para iniciantes!): Olá e bem-vindo à compreensão de sites. Neste curso, vamos dar uma olhada em como sites falam com o seu computador e como o seu computador fala com um site. Não vamos escrever nenhum código hoje, mas vamos explorar solicitações e respostas, mas vamos explorar solicitações e respostas, que é basicamente a comunicação entre o seu computador e um site e como ele meio baixa arquivos de um servidor e, em seguida, coloca-os juntos e exibe seu site. Olá, meu nome é Caleb Pauline. Eu sou um desenvolvedor web sênior. Sou um instrutor de revestimento premium. Ensinei mais de 300 mil alunos a programar. E hoje serei seu instrutor. No final deste curso, você aprenderá como explorar suas solicitações e encontrar suas respostas no navegador. Então você vai ser capaz de ver como seu computador ou como seu navegador está se comunicando com um site, o que um site está enviando de volta para o seu computador. Se isso lhe interessa, recomendo vivamente que faça este curso. Esta é uma informação muito, muito vital para quem está em desenvolvimento web, mesmo que você seja novo, é muito bom entender como isso funciona. Então, se isso é algo em que você está interessado, por favor, entre e nós vamos começar imediatamente. 2. O que é um navegador?: Tudo bem, primeiro, vamos dar uma olhada no que é um navegador. Então, o que é um navegador? Um navegador é um programa que pede informações a um site. Esta solicitação é chamada de solicitação, e quando a solicitação é concluída, o site retorna e resposta chamada de resposta. É como quando você pega o telefone e liga para sua mãe, seu pai ou seu melhor amigo, eles pegam o telefone, eles dizem olá, essa é a resposta. Agora a resposta tem dados na forma de HTML, CSS e JavaScript. Você também pode incluir coisas como imagens e outras formas de dados. Mas não vamos tocar muito no que isso é. Mas realmente você só precisa saber que a resposta tem essa coisa chamada carga útil e ele envia de volta arquivos. E então seu computador faz o download de todos esses pequenos arquivos. E seu navegador é o programa que os lê, as peças completamente, e faz seu belo site. Agora, quando ele junta as coisas, isso é chamado de renderização. Então ele vai tentar renderizar a saída final. Agora existem quatro navegadores principais. Na verdade, existem milhares e milhares de navegadores por aí. Mas há quatro grandes. Google Chrome, Mozilla, Firefox, Apple Safari e Microsoft Edge. Mas, novamente, há centenas, se não milhares de navegadores menores e menos conhecidos disponíveis. Seu telefone pode até vir com um diferente que não seja um desses quatro. 3. O que faz seu navegador?: O que o seu navegador faz? Assim, seu navegador coleta informações e seu trabalho é exibi-las. Saber quando ele coleta informações é realmente apenas perguntar ao servidor, hey, eu posso ter alguma informação? O servidor diz, sim, você pode ter essa informação, envia os arquivos em seu computador do que baixa-los ou seu navegador vai baixá-los, juntá-los todos de uma maneira agradável e chute começa todo o código. E esse tipo de cria seu site interativo agradável. Nem todos os navegadores são iguais. Isso deveria dizer que não, não agora. Nem todos os navegadores são iguais. Então, o que funciona em um navegador pode não funcionar necessariamente em outro navegador. Então, se você alguma vez tropeçar em um site que parece quebrado e vamos dizer Google Chrome vai tentar abri-lo no Firefox ou vice-versa, ou Apple Safari ou Microsoft Edge, basta tentar em outro navegador porque alguns, às vezes os mecanismos de renderização nos bastidores não funcionam exatamente o mesmo que deveriam, mas nem sempre funcionam. trabalho do seu navegador também é comunicar. É responsável pelas transações de barra de comunicação entre o seu computador e o site. E novamente, é como pegar o telefone e ligar para o seu melhor amigo. Você precisa esperar que eles atendam o telefone, digam olá, e então você pode começar uma conversa. 4. O que são solicitações na web?: O que são solicitações da Web? Solicitações é simplesmente pedir informações. Assim, as solicitações da Web são quando você pede informações de um site, você está simplesmente pedindo os arquivos que você precisa para exibir o site. E muitas vezes isso é chamado de aperto de mão. Então vamos dar uma olhada em como isso funciona. Começa indo a um site como Google.com. Em seguida, seu navegador solicita ao Google.com os dados necessários para exibir a página com facilidade. Agora todo esse processo é chamado de solicitação. E, na verdade, quando ele envia a informação de volta, é chamado de resposta, mas vamos abordar isso em apenas um pouquinho. As solicitações podem ter tamanhos também, portanto, ou uma solicitação pode ser literalmente qualquer tamanho. Google.com é um pequeno pedido. Ou realmente qualquer site. Só estamos indo para o site e dizendo: “Ei, podemos ter os arquivos e então o site determina o que ele deve enviar de volta. Mas que o primeiro pedido, o primeiro aperto de mão é geralmente muito pequeno. Agora, se você carregar algo como Instagram.com, cada imagem será uma nova solicitação. Então, à medida que você percorre seu feed instantâneo, ele vai carregar mais e mais imagens e isso vai ser uma nova solicitação a cada vez. Ou se você for no Facebook.com, cada comentário que você faz, cada link que você clica, são todos pedidos. É um tipo diferente de pedido. E mais uma vez, vamos entrar nisso em apenas um pouquinho. Mas todos esses são chamados de Solicitações. Sempre que você enviar um pequeno pedaço de dados para um site para pedir informações ou até mesmo para pedir para excluir informações ou atualizar informações ou para salvar informações. Esses são todos os pedidos e estes são chamados de tipos de solicitação. Por isso, às vezes, o nosso pedido vem sob a forma de pedir informações. E isso é chamado de solicitação GET, mas também pode ser na forma de pedir para salvar informações. Agora, tecnicamente, esses são chamados de pedidos postais. Há também uma solicitação de exclusão para excluir informações e uma solicitação put ou patch para atualizar informações. E mais uma vez, um aperto de mão normal é apenas um pedido GET e esse é o mais comum. E isso está realmente entrando em APIs RESTful. Agora, se você está interessado em API é que eu tenho um curso sobre APIs RESTful. Sinta-se livre para ir e dar uma olhada nisso depois deste curso. Agora uma coisa para notar que tudo tem que viajar através da internet. Pedidos e respostas menores significam menos largura de banda. Isso significa que ele pode viajar através da internet, através dos fios que são enviados para todo o mundo através do seu Wi-Fi e pode servir isso muito mais rápido porque é muito menor e muito parecido com isso. Pense na última vez que você teve que baixar um arquivo de um gigabyte em vez de baixar um arquivo de um kilobyte, certo? O arquivo de um gigabyte demora um pouco. Pode levar várias horas dependendo da velocidade da internet. Mas em um arquivo kilobyte, mesmo que você tenha internet bastante lenta, ainda é um download muito, muito rápido. Os pedidos são exatamente a mesma coisa. 5. O ciclo de vida de um pedido: O ciclo de vida da solicitação. Vamos dar uma olhada em como isso começa quando você pede informações de um site, você está realmente fazendo muito mais do que isso. Quando você pergunta, digamos que meu site, Caleb dot IO para obter informações, há o mapeamento de domínio por trás dele. Então Caleb dot IO na verdade aponta para um endereço IP e esse endereço IP se conecta ao meu servidor. Então você não está realmente solicitando informações diretamente de Caleb dot IO. É apenas uma espécie de mascarar para que você não tenha que se lembrar de endereços IP. E então como termina. O servidor vai aceitar o meu pedido ou o seu pedido. Ele vai entender o que é suposto para a saída e envia arquivos como HTML, CSS, imagens JavaScript, todas as outras coisas que fazem o seu site parecer bom nesta coisa chamada resposta. Por último, o navegador baixa esses arquivos e os salva em seu computador. E se ele baixou mais de uma vez, às vezes ele usa apenas os arquivos antigos, antigos, e isso é chamado de cache. Ele vai então juntar todos esses arquivos e renderizar seu conteúdo. 6. O que são respostas de servidor?: O que o nosso servidor responde de qualquer maneira. Assim, uma resposta acontece quando o servidor responde à sua solicitação web. Uma resposta acontece depois que a solicitação é feita, então ele sempre vai solicitação e, em seguida, resposta. E as respostas podem ser praticamente qualquer formato, mas normalmente é HTML, CSS, JavaScript ou texto simples ou JSON para como uma API. Se você não sabe o que é uma API, honestamente, tudo bem. Você pode ignorar essa parte. Mas se você estiver interessado em aprender um pouco mais sobre APIs, há alguns casos em que uma API, também conhecida como interface de programação de aplicativos, enviará dados formatados em XML ou JSON. Normalmente, isto é, é tipo texto simples. Texto. Não é muito especializado. Mark para baixo demais. Tem algumas regras, mas não muitas regras. Mas a coisa boa sobre isso é porque é uma espécie de texto simples. Isso significa que não há muito o que interpretar. E seu navegador pode lidar com isso muito mais rápido. Ou seu servidor até poderia lidar com isso muito mais rápido e, em seguida, renderizar HTML, CSS, JavaScript, o que quer que ele precise fazer. Saber muitas vezes Javascript ou uma linguagem de programação de servidor como Python vai lidar com essas respostas API. Mais uma vez, se você não sabe muito sobre APIs, se você é novo em desenvolvimento web. Não se preocupe com essa parte agora. Então, como exemplo, quando você carrega o Instagram.com, você está fazendo uma solicitação para o site para carregar os dados iniciais. À medida que você rolar para baixo, ele carrega mais e mais imagens dinamicamente para que a primeira solicitação possa sempre ser pequena e rápida em o, ele realmente só mostra ou tenta obter como duas ou três imagens, mas não vai salvar 1000 imagens ou vai pedir 1000 imagens porque isso vai ser muito lento para carregar. O seu pedido vai ser uma carga muito pequena. E essa resposta também vai ser uma carga de resposta bastante pequena. E isso só significa que, por exemplo, Instagram.com pode carregar muito, muito rápido. Agora, à medida que você rola a página para baixo, você verá que mais em imagens aparecem e às vezes é tão rápido, você nem percebe que a segunda solicitação, terceira solicitação, quarta solicitações, quando você clica em carregar mais em qualquer ou você rolar para baixo no Instagram, geralmente um endpoint de API que retorna JSON ou XML. E a razão é porque ambos são muito mais leves do que HTML. Em seguida, seu navegador lê a resposta JSON. Por exemplo, JavaScript assume o controle e diz, oh, eu preciso exibir mais fotos. E cria dinamicamente a sua estrutura HTML para você e adiciona-a à página. E assim que ele é adicionado à página, seu navegador, em seguida, assume o comando para JavaScript e diz, Oh, eu preciso fazer outro pedido. E então o ciclo se repete. O servidor diz, Oh, há um pedido vindo para esta imagem em particular, servir essa imagem. Agora sobre o tema de imagens e outros recursos como imagens, cada um provavelmente será seu próprio pedido. O navegador cria uma nova solicitação para que cada arquivo de imagem seja baixado. O servidor envia uma solicitação com os dados da imagem. E novamente, seu navegador exibe essa imagem. Embora tecnicamente existam maneiras de agrupar respostas para uma resposta de carga útil única mais rápida. Desta forma, você pode simplesmente perguntar ao servidor uma vez e ele enviará todas as imagens ao mesmo tempo. Então não tem que ir um por um. E, novamente, isso só torna a carga de resposta mais rápida. E a razão para isso é porque se você pensar em dirigir de e para o trabalho ou de e para o hospital para e de sua casa. Há muito tempo de viagem na internet. E assim, se você pode reduzir o tempo de viagem e apenas carregar todas as imagens em uma carga, então vai ser muito mais rápido. 7. Interpretando HTML, CSS, e JavaScript: Interpretação de HTML, CSS e JavaScript. Portanto, estes são os tipos de dados de resposta mais comuns. Então, quando você faz uma solicitação e recebe uma resposta de um servidor, é provável que você esteja recebendo HTML, CSS e JavaScript. trabalho do seu navegador é baixar cada um desses arquivos. Mas o navegador também tem essas coisas chamadas motores. E assim esses mecanismos têm certas regras para HTML. Eles têm regras diferentes para CSS e eles têm regras diferentes para JavaScript. Se o seu navegador achar que está abrindo um arquivo JavaScript, ele usará o mecanismo JavaScript para ler, interpretar e tornar seus sites interativos. Da mesma forma com CSS e HTML, o percebe que há um arquivo CSS, um arquivo de folha de estilo em cascata. Ou seja, ele vai tentar interpretar isso e fazer o seu site parecer bom. E assim eles têm propósitos diferentes. Uma vez que todos os arquivos são baixados da melhor forma possível, ele vai juntá-los todos. E novamente, ele vai tentar exibir seu site ou ele vai executar uma renderização. Mas em algum momento que JavaScript vai assumir o navegador apenas porque o navegador tem um propósito particular, mas JavaScript também tem seu próprio propósito. Então, após a resposta inicial ser renderizada ou exibida em seu navegador, na maioria das vezes, JavaScript vai assumir, não o tempo todo. E às vezes há alguma cooperação entre JavaScript e seu navegador. Javascript pode dizer ao navegador para fazer mais solicitações no flyby, adicionando dinamicamente links, imagens e outros ativos à sua página ou comunicando diretamente com o navegador e criando novas solicitações. Assim, JavaScript pode fazer sua própria solicitação, mas seu navegador também pode fazer solicitações para. 8. Como visualizar suas solicitações e respostas: Exibindo suas solicitações e respostas. Então, para ver qualquer tipo de solicitação e resposta, você precisará de um navegador moderno. Recomendo Chrome ou Firefox para isso. E então eu vou demonstrar em apenas um segundo como eu posso ver todas as respostas de um site como Google.com. Então você vai querer prestar muita atenção porque você vai estar tentando isso no próximo vídeo. Então eu só vou sair dessa e ir para Google.com. E então este é apenas o site comum do Google. E o que posso fazer é clicar com o botão direito do mouse ir para Inspecionar. E você vai ver essas opções aqui. Agora o seu pode ser um modo de cor clara, então eu tenho o modo escuro ligado, e isso pode realmente aparecer no lado direito ou no lado esquerdo. Mas de qualquer maneira você vai ver um tipo de opções aqui. Para nós. Vamos querer ir até a guia da rede e não vamos ver nada aqui. E eu tenho o meu não filtrado por CSS já. Vamos em frente e filtrar isso por todos. E se não vir nada, tudo bem. Isso vai processar todas as solicitações que estão chegando agora desde o momento em que você abrir isso para qualquer momento que você fechá-lo. Então vamos em frente e clique em Atualizar. E podemos ver que todos esses pedidos estavam chegando. E então há um monte de coisas diferentes aqui. Temos um documento que é HTML. Temos que P&G, isso é uma imagem. Web P, isso também é uma imagem. Temos um texto simples aqui. Temos um texto, HTML, temos um script aqui também. Temos todo o tipo de coisas que podemos ver que talvez o que eu faça é fazer com que isto seja um pouco maior. Então, se quiséssemos ver uma imagem, poderíamos clicar com o botão direito do mouse e, em seguida, ir para abrir em nova guia. E essa é a imagem que carregou. Então, agora sabemos que o Google fez um pedido para o seu próprio logotipo. Vamos dar uma olhada em outro aqui. Clique com o botão direito em abrir em uma nova guia. E isso é o que é chamado de sprite. Então é uma grande imagem com todos esses pequenos símbolos nela. E, em seguida, ele usa CSS para classificar de exibir as imagens como apenas uma parte particular dela. Então, como apenas o sinal de notificação. Agora o benefício de fazer isso é fazer um pedido para a imagem. Em vez de fazer 12345678910, eu não sei, 2025 pedidos para todas essas imagens diferentes. Só tem que fazer um. E isso é significativamente mais rápido e é assim que o Google carrega tão rápido é que realmente otimiza esses ciclos de vida de resposta à solicitação. Agora você também pode filtrar por JavaScript. Então vamos ver o que acontece quando eu digitar aqui, k, b. E você pode ver aqui que ele está fazendo uma busca por q é igual a kx. Q é igual a K, Q é igual a K, L, e à medida que ele digita, ele faz uma nova solicitação cada vez. Agora isso é tudo JavaScript. Este não é o seu navegador. Isso é JavaScript fazendo isso. E isso está usando uma coisa chamada ajax ou a API de busca JavaScript. Se não sabe o que são, está tudo bem. Podemos olhar para apenas solicitações JavaScript. Então estes são os arquivos que solicitamos do JavaScript. Não solicitamos nenhum CSS no momento. Não sei por que isso não parece certo. Acho que não há CSS lá. Isso provavelmente significa que se entrarmos aqui, clicar com o botão direito e ver a fonte da página, vamos ver todo o CSS aqui. E aí está. Todo esse CSS está na página. Portanto, ele não estava carregando nenhum arquivo CSS que veio com o documento HTML. Interessante. Nós também podemos ver todas as imagens diferentes, fontes de mídia, documentos, web sockets manifesta todas essas outras coisas. Agora também podemos ver se eu apenas voltar para todo o tempo que levou para obter o tamanho do arquivo. Podemos filtrar pelo tamanho do arquivo aqui. Podemos ver que o maior arquivo aqui foi o documento em si, que é a página inteira. Era cerca de 61 kilobytes e levou 140 milissegundos para chegar. E novamente, a idéia aqui é que eu fui para Google.com. Google.com vai apontar para alguma forma de endereço IP que vai se conectar a algum servidor que eles têm. Que os servidores, em seguida, vão dizer, OK, bem, servir este documento HTML e servir todos esses outros ativos com ele também. Então, essencialmente, eu pedi um monte de informações. Eu nem sabia que ia pedir tudo isso, mas pedi um monte de informações do Google. O Google determinou que informações precisava me dar. E então, como uma resposta disse, aqui, tem todos esses arquivos aqui. E é assim que você visualiza seus pedidos e suas respostas. Novamente, você não precisa usar o Google Chrome. Eu só estava usando o Chrome porque essa é a ferramenta que eu gosto de usar quando estou fazendo coisas assim. Mas você também pode usar o Firefox Safari edge. Realmente qualquer navegador será capaz de fazer isso. 9. Seu projeto: Seu projeto. Então aqui está o que eu gostaria que você fizesse. Quero que abra seu navegador favorito. Pode ser Chrome, Firefox, Safari edge. Carregue meu site. Apenas como exemplo, vá para Caleb dot IO, clique com o botão direito do mouse na página e, em seguida, inspecione e, em seguida, clique na guia Rede e, em seguida, atualize sua página se você não vir nada como fizemos no último vídeo. E então eu quero que você seja capaz de filtrar suas respostas por documentos. Assim como HTML, CSS, imagens ou JavaScript e apenas meio que ver o tipo de coisas que meu site vai tentar atendê-lo. Encontre uma imagem e, em seguida, abra essa imagem em uma nova guia e, em seguida, faça uma captura de tela do painel de rede, apenas o painel inteiro, não a imagem em si, mas faça uma captura de tela do painel de rede enquanto ele estiver aberto com todos os as diferentes solicitações e respostas lá e compartilhá-lo em sua seção de projeto. Agora não se preocupe, qualquer coisa que você está fazendo aqui é que não vai quebrar seu navegador. Ele não vai prejudicar o seu computador, não vai fazer nada que você não pode desfazer simplesmente clicando no botão de atualização no seu navegador. Então sinta-se livre para experimentar. É completamente seguro fazer isso. Vá em frente e dê uma chance. Faça uma captura de tela do painel de rede enquanto ele estiver aberto, compartilhado na seção do projeto. E uma vez que você tenha feito isso, você completou este curso. Obrigado por dedicar um tempo para assistir a este curso. Espero que aprenda algo novo e excitante. Novamente, isso é realmente importante quando se trata de desenvolvimento web. E se você quiser saber mais sobre HTML, CSS, APIs JavaScript, qualquer coisa que, qualquer coisa assim. Sinta-se sempre à vontade para ver o meu perfil. Já tenho cursos sobre todos esses assuntos. Obrigado novamente, e espero vê-lo em outro curso.