Transcription
1. Comprendre le fonctionnement des sites Web qui fonctionne: Bonjour et bienvenue à comprendre les sites Web. Dans ce cours, nous allons examiner comment les
sites Web parlent à votre ordinateur et comment votre ordinateur parle à un site Web. Nous n'allons pas écrire de code aujourd'hui, mais nous allons explorer les demandes et les réponses, qui est fondamentalement la communication entre votre ordinateur et un site Web et comment il télécharge des fichiers à partir d'un serveur et les met ensuite ensemble et affiche votre site Web. Dites bonjour à Caleb Pauline. Je suis un développeur web senior. Je suis instructeur de revêtement haut de gamme. J' ai appris à plus de 300 000 étudiants à coder. Et aujourd'hui, je vais être votre instructeur. À la fin de ce cours, vous apprendrez à explorer vos demandes et à
trouver vos réponses à partir de votre navigateur. Vous allez donc être en mesure de voir comment votre ordinateur ou comment votre navigateur communique avec un site Web, ce qu'un site Web renvoie à votre ordinateur. Si cela vous intéresse, je vous recommande vivement de suivre ce cours. C' est une information très, très vitale pour tous ceux qui sont en développement web, même si vous êtes tout nouveau, il est vraiment bon de comprendre comment cela fonctionne. Donc, si c'est quelque chose qui vous intéresse, s'il vous plaît entrez et nous commencerons tout de suite.
2. Qu'est-ce qu'un navigateur ?: D' abord, jetons un coup d'oeil à ce qu'est un navigateur. Alors qu'est-ce qu'un navigateur ? Un navigateur est un programme qui demande des informations à un site Web. Cette demande est appelée une demande, et lorsque la demande est terminée, le site Web retourne et la réponse appelée une réponse. C' est comme quand vous décrochez le téléphone et que vous appelez votre mère ou votre père ou votre meilleur ami, ils prennent le bout du téléphone, ils disent bonjour, c'est la réponse. Maintenant, la réponse a des données sous la forme de HTML, CSS et JavaScript. Vous pouvez également inclure des éléments tels que des images et, et d'autres formes de données. Mais nous n'allons pas vraiment nous intéresser trop à ce que c'est. Mais vraiment, vous avez juste besoin de savoir que la réponse a cette chose appelée une charge utile et elle renvoie des fichiers. Et puis votre ordinateur télécharge tous ces petits fichiers. Et votre navigateur est le programme qui les lit, les morceaux tout à fait, et fait votre beau site Web. Maintenant, quand ça coupe les choses ensemble, c'est ce qu'on appelle le rendu. Donc, il va essayer de rendre la sortie finale. Maintenant, il y a quatre principaux navigateurs. Il y a en fait des milliers et des milliers de navigateurs là-bas. Mais il y en a quatre. Google Chrome, Mozilla, Firefox, Apple Safari et Microsoft Edge. Mais encore une fois, il y a des centaines, voire des milliers de navigateurs Web plus petits et moins
connus disponibles. Votre téléphone pourrait même venir avec un autre qui n'est pas l'un de ces quatre.
3. Que votre navigateur fait-il de votre navigateur ?: Que fait votre navigateur ? Ainsi, votre navigateur recueille des informations et son travail est de les afficher. Savoir quand il recueille des informations est en fait juste demander au serveur, hey, puis-je avoir quelques informations ? Le serveur dit, oui, vous pouvez avoir cette information, envoie les fichiers sur votre ordinateur que les télécharge ou votre navigateur les téléchargera, les morceaux tous ensemble d'une manière agréable et kick démarre tout le code. Et ce genre de crée votre site web interactif agréable. Tous les navigateurs ne sont pas les mêmes. Cela devrait dire non, pas maintenant. Tous les navigateurs ne sont pas les mêmes. Donc, ce qui fonctionne dans un navigateur peut ne pas nécessairement fonctionner sur un autre navigateur. Donc, si jamais vous tombez sur un site Web qui semble cassé et disons Google Chrome va essayer de l'ouvrir dans Firefox ou vice versa, ou Apple Safari ou Microsoft Edge, essayez
simplement dans un autre navigateur parce que certains, parfois les moteurs de rendu dans les coulisses ne fonctionnent pas exactement comme ils sont censés, mais ils ne fonctionnent pas toujours. Le travail de votre navigateur est également de communiquer. Il est responsable des
transactions de slash de communication entre votre ordinateur et le site Web. Et encore une fois, c'est comme prendre le téléphone et composer votre meilleur ami. Vous devez attendre qu'ils répondent réellement au téléphone, disent bonjour, puis vous pouvez commencer une conversation.
4. Quelles sont les demandes de web ?: Que sont les requêtes Web ? Demandes, c'est simplement demander des informations. Ainsi, les demandes Web sont lorsque vous demandez des informations à partir d'un site Web, vous demandez simplement les fichiers dont vous avez besoin pour afficher le site Web. Et souvent, cela s'appelle une poignée de main. Jetons donc un coup d'oeil à comment cela fonctionne. Il commence par aller sur un site Web comme Google.com. Votre navigateur demande ensuite à Google.com les données dont il a besoin pour afficher la page correctement. Maintenant, tout ce processus est appelé une requête. Et en fait, quand il vous renvoie l'information, ça s'appelle réponse, mais nous y reviendrons dans un petit peu. Les demandes peuvent aussi avoir des tailles, donc ou une demande peut être littéralement n'importe quelle taille. Google.com est une petite demande. Ou vraiment n'importe quel site web. On va juste sur le site et dire, Hey, peut-on avoir les fichiers et ensuite le site détermine ce qu'il devrait renvoyer. Mais que cette première demande, cette première poignée de main est généralement assez petite. Maintenant, si vous chargez quelque chose comme Instagram.com, chaque image sera une nouvelle requête. Ainsi, lorsque vous faites défiler votre flux instantané, il va charger de plus en plus d'images et ce sera une nouvelle requête à chaque fois. Ou si vous allez sur Facebook.com, chaque commentaire que vous faites, chaque lien sur lequel vous cliquez, sont toutes des demandes. C' est un autre type de demande. Et encore une fois, nous allons entrer dans ça dans un petit peu. Mais toutes ces demandes sont appelées Requêtes. Chaque fois que vous envoyez un petit morceau de données à un site Web pour demander des informations ou
même pour demander de supprimer des informations ou de mettre à jour des informations ou pour enregistrer des informations. Ce sont toutes des demandes et ce sont des types de requête. Parfois, notre demande se présente sous la forme d'une demande d'information. Et cela s'appelle une requête GET, mais cela peut également être sous la forme de demander à enregistrer des informations. Maintenant techniquement, ce sont des demandes de poste. Il existe également une demande de suppression pour supprimer des informations et une demande de mise à jour ou de mise à jour des informations. Et encore une fois, une poignée de main normale est juste une requête GET et c'est la plus courante. Et cela est en fait entrer dans les API RESTful. Maintenant, si vous êtes intéressé par l'API est j'ai un cours sur les API RESTful. N' hésitez pas à aller jeter un coup d'oeil à cela après ce cours. Maintenant, une chose à remarquer que tout doit voyager à travers Internet. Des demandes et des réponses plus petites signifient moins de bande passante. Cela signifie qu'il peut voyager à travers Internet, à travers les fils qui sont envoyés partout dans le monde via votre Wi-Fi un peut servir beaucoup plus rapidement parce qu'il est beaucoup plus petit et c'est beaucoup comme ça. Pensez à la dernière fois que vous avez dû télécharger un fichier d'un gigaoctet au téléchargement d'un fichier d'un kilo-octet, n'est-ce pas ? Le fichier d'un gigaoctet prend un peu de temps. Cela peut prendre plusieurs heures en fonction de votre vitesse Internet. Mais à un fichier kilo-octets, même si vous avez Internet assez lent, est toujours un téléchargement très, très rapide. Les demandes sont exactement la même chose.
5. Le cycle de vie de la demande: Cycle de vie de la demande. Jetons un coup d'oeil à la façon dont cela commence lorsque vous demandez des informations à partir d'un site Web, vous faites en fait beaucoup plus que cela. Quand vous demandez, disons que mon site Web, Caleb dot IO pour des informations, il y a le mappage de domaine derrière lui. Donc, Caleb point IO pointe en fait vers une adresse IP et cette adresse IP se connecte à mon serveur. Donc, vous ne demandez pas d'informations directement à Caleb dot IO. C' est juste une sorte de masquer pour que vous n'ayez pas à vous souvenir des adresses IP. Et puis comment ça finit. Le serveur va accepter ma demande ou votre demande. Il va comprendre ce qu'il est censé sortir et envoie des fichiers comme HTML, CSS, images
JavaScript, toutes ces autres choses qui rendent votre site Web bien dans cette chose appelée une réponse. Enfin, le navigateur télécharge ces fichiers et les enregistre sur votre ordinateur. Et s'il a téléchargé plus d'une fois, il utilisera
parfois les anciens,
anciens, fichiers et c'est ce qu'on appelle un cache. Il va ensuite assembler tous ces fichiers et rendre votre contenu.
6. Quelles sont les réponses du serveur ?: Ce que notre serveur répond de toute façon. Ainsi, une réponse se produit lorsque le serveur répond à votre requête Web. Une réponse se produit après que la demande est faite, donc il va toujours demander puis répondre. Et les réponses peuvent être à peu près n'importe quel format, mais généralement c'est HTML, CSS ,
JavaScript, ou texte brut ou JSON pour comme une API. Si vous ne savez pas ce qu'est une API, honnêtement, c'est bon. Tu peux juste ignorer ce morceau. Mais si vous êtes intéressé à en apprendre un peu plus sur les API, il y a des cas où une API, également connue sous le nom d'interface de programmation d'application, enverra des données au format XML ou JSON. Maintenant, c'est typiquement, c'est un peu comme du texte brut. Texte. Ce n'est pas vraiment spécialisé. Marquez trop. Il a quelques règles, mais pas trop de règles. Mais la bonne chose à ce sujet, c'est parce que c'est une sorte de textes simples. Cela signifie qu'il n'y a pas grand-chose à interpréter. Et votre navigateur peut faire face à cela beaucoup plus rapidement. Ou votre serveur pourrait même traiter cela beaucoup plus rapidement et ensuite rendre HTML,
CSS, JavaScript, tout ce qu'il doit faire. Savoir souvent Javascript ou un
langage de programmation serveur comme Python va gérer ces réponses API. Encore une fois, si vous n'en savez pas trop sur les API, si vous êtes tout nouveau dans le développement web. Ne vous inquiétez pas pour cette partie en ce moment. Par exemple, lorsque vous chargez Instagram.com, vous faites une demande au site Web pour charger les données initiales. Lorsque vous faites défiler vers le bas, il charge de plus en plus d'images dynamiquement afin que la première requête puisse toujours être petite et rapide à o, elle ne vous montre vraiment que ou essaie d'obtenir comme deux ou trois images, mais cela ne va pas enregistrer un 1000 images ou c'est ne va pas demander 1000 images parce que ça va être vraiment lent à charger. Votre demande va être une charge utile de demande assez petite. Et cette réponse sera également une charge utile de réponse assez faible. Et cela signifie juste que, par exemple, Instagram.com peut charger vraiment, vraiment rapide. Maintenant que vous faites défiler la page vers le bas, vous allez voir que plus d'images apparaissent et parfois c'est si rapide, vous ne remarquez même pas que la deuxième requête, la
troisième requête, la quatrième demande, lorsque vous cliquez sur charger plus sur n'importe quel ou vous faites défiler vers le bas sur Instagram, généralement un point de terminaison API qui renvoie JSON ou XML. Et la raison en est que les deux sont beaucoup plus légers que le HTML. Ensuite, votre navigateur lit la réponse JSON. Par exemple, JavaScript prend le relais et il dit, oh, j'ai besoin d'afficher plus de photos. Et il crée dynamiquement votre structure HTML pour vous et l'ajoute à la page. Et dès qu'il est ajouté à la page, votre navigateur prend ensuite le relais pour JavaScript et dit, Oh, je dois faire une autre demande. Et puis le cycle se répète. Le serveur dit, Oh, il y a une requête pour cette image particulière, servir cette image. Maintenant, sur le sujet des images et d'autres actifs comme les images, chacun est susceptible d'être sa propre demande. Le navigateur crée une nouvelle demande pour chaque fichier image à télécharger. Le serveur envoie une requête avec les données de l'image. Et encore une fois, votre navigateur affiche alors cette image. Bien que techniquement, il existe des moyens de regrouper les réponses pour une réponse de charge utile unique plus rapide. De cette façon, vous pouvez simplement demander au serveur une fois et il enverra toutes les images en même temps. Donc ça n'a pas à aller un par un. Et encore une fois, cela rend juste cette charge utile de réponse plus rapide. Et la raison en est parce que si vous pensez à conduire au travail ou à l'hôpital vers et en provenance de votre maison. Il y a beaucoup de temps de voyage sur Internet. Et donc si vous pouvez réduire le temps de trajet et simplement transporter toutes les images en une seule charge, alors va être beaucoup plus rapide.
7. Interpréter HTML, CSS, et JavaScript: Interprétation de HTML, CSS et JavaScript. Ce sont donc les types de données de réponse les plus courants. Donc, lorsque vous faites une demande et que vous obtenez une réponse d'un serveur, vous allez probablement obtenir HTML, CSS et JavaScript. Le travail de votre navigateur est de télécharger chacun de ces fichiers. Mais le navigateur a aussi ces choses appelées moteurs. Et donc ces moteurs ont certaines règles pour HTML. Ils ont des règles différentes pour CSS et ils ont des règles différentes pour JavaScript. Si votre navigateur pense qu'il ouvre un fichier JavaScript, il utilisera le moteur JavaScript pour lire et interpréter et rendre vos sites Web interactifs. De même avec CSS et HTML, l'se rend compte qu'il y a un fichier CSS, un fichier de feuille de style en cascade. Autrement dit, il va essayer d'interpréter cela et de rendre votre site Web bien paraître. Et donc ils ont des buts différents. Une fois que tous les fichiers sont téléchargés le mieux possible, il va les assembler tous ensemble. Et encore une fois, il va essayer d'afficher votre site Web ou il va effectuer un rendu. Mais à un moment donné, JavaScript va prendre le
contrôle du navigateur juste parce que le navigateur a un but particulier, mais JavaScript a aussi son propre but. Donc, après que la réponse initiale est rendue ou affichée dans votre navigateur, la
plupart du temps, JavaScript va prendre le relais, pas tout le temps. Et parfois, il y a une certaine coopération entre JavaScript et votre navigateur. Javascript peut demander au navigateur de faire plus de demandes sur le flyby, en ajoutant dynamiquement des liens, des images et d'autres ressources à votre page ou en communiquant
directement avec le navigateur et en créant de nouvelles requêtes. Donc JavaScript peut faire sa propre requête, mais votre navigateur peut également faire des requêtes à.
8. Voir vos demandes et vos réponses: Affichage de vos demandes et réponses. Donc, pour afficher n'importe quel type de demande et de réponse, vous allez avoir besoin d'un navigateur moderne. Je recommande Chrome ou Firefox pour cela. Et puis je vais montrer en une seconde comment je peux voir toutes les réponses d'un site Web comme Google.com. Donc tu vas faire attention parce que tu vas essayer ça dans la prochaine vidéo. Donc je vais juste m'en sortir et aller sur Google.com. Et c'est donc juste le site Web régulier de Google. Et ce que je peux faire est de cliquer avec le bouton droit de la souris sur Inspecter. Et vous allez voir ces options ici. Maintenant, le vôtre pourrait être un mode de couleur claire, donc j'ai le mode sombre activé, et cela pourrait apparaître sur le côté droit ou sur le côté gauche. Mais de toute façon, vous allez voir une sorte de ces options ici. Pour nous. Nous allons vouloir passer à l'onglet réseau et nous ne verrons rien ici. Et j'ai mon non filtré par CSS déjà. Allons-y et filtrons ça par tous. Et si tu ne vois rien, c'est très bien. Cela va traiter toutes les demandes qui arrivent en ce moment à
partir du moment où vous ouvrez ceci jusqu'à chaque fois que vous le fermez. Alors allons de l'avant et cliquez simplement sur actualiser. Et nous pouvons voir toutes ces demandes arrivaient. Et donc il y a beaucoup de choses différentes ici. Nous avons un document qui est HTML. Il faut P&G, c'est une image. Web P, c'est aussi une image. Nous en avons un texte clair ici. Nous avons un texte, HTML, nous avons aussi un script ici. Nous avons toutes sortes de choses que nous pouvons voir que peut-être ce que je vais faire, c'est juste que je vais faire une touche plus grande. Donc, si nous voulions voir une image, nous pourrions cliquer avec le bouton droit de la souris, puis aller à ouvrir dans un nouvel onglet. Et c'est l'image qu'il a chargée. Donc, nous savons maintenant que Google a fait une demande pour son propre logo. Jetons un coup d'oeil à un autre ici. Cliquez avec le bouton droit de la souris pour ouvrir un nouvel onglet. Et c'est ce qu'on appelle un sprite. Donc c'est une grande image avec tous ces petits symboles dedans. Et puis il utilise CSS pour afficher les images comme juste une partie particulière de celui-ci. Donc comme juste le signe de notification. Maintenant, l'avantage à faire ceci est qu'il fait une demande pour l'image. Au lieu de faire 12345678910, je ne sais pas, 2025 demandes pour toutes ces images différentes. Il a juste à faire l'un. Et c'est donc beaucoup plus rapide et c'est ainsi que Google se charge si vite qu'il optimise vraiment ces cycles de vie de réponse aux demandes. Maintenant, vous pouvez également filtrer par JavaScript. Donc, voyons ce qui se passe quand je tape ici, k, b. Et vous pouvez voir ici qu'il fait une recherche pour q est égal à kx. Q est égal à K, Q est égal à K, L, et à mesure qu'il tape, il fait une nouvelle requête à chaque fois. Maintenant, c'est tout JavaScript. Ce n'est pas votre navigateur. C' est JavaScript qui fait cela. Et cela utilise une chose appelée ajax ou l'API fetch JavaScript. Si vous ne savez pas ce que c'est, c'est honnêtement OK. Nous pouvons regarder seulement les requêtes JavaScript. Ce sont donc les fichiers que nous avons demandés à JavaScript. Nous n'avons pas demandé de CSS pour le moment. Je ne sais pas pourquoi ça ne semble pas juste. Je suppose qu'il n'y a pas de CSS là-dedans. Cela signifie probablement que si nous allons ici, clic
droit et voir la source de la page, nous allons voir tous les CSS ici. Et c'est là. Tout ce CSS est dans la page. Donc, il ne chargeait aucun fichier CSS fourni avec le document HTML. Intéressant. Nous pouvons également voir toutes les différentes images, polices des médias, documents, sockets web manifeste toutes ces autres choses. Maintenant, nous pouvons également voir si je reviens à tout le temps qu'il a fallu pour obtenir quelle est la taille du fichier. Nous pouvons filtrer par la taille du fichier ici. Nous pouvons voir que le plus gros fichier ici était le document lui-même, c'est la page entière. Il était d'environ 61 kilo-octets et il a fallu 140 millisecondes pour obtenir. Et encore une fois, l'idée ici est que je suis allé sur Google.com. Google.com va pointer vers une forme d' adresse
IP qui va se connecter à un serveur qu'ils ont. Que les serveurs vont alors dire, OK, eh bien, servir ce document HTML et servir tous ces autres actifs avec lui aussi. Et donc essentiellement, j'ai demandé un tas d'informations. Je ne savais même pas que j'allais demander tout ça, mais j'ai demandé un tas d'informations à Google. Google a déterminé quelles informations il avait besoin pour me donner. Et puis comme une réponse l'a dit, ici, avez tous ces fichiers ici. Et c'est ainsi que vous visualisez vos demandes et vos réponses. Encore une fois, vous n'avez pas besoin d'utiliser Google Chrome. J' utilisais juste Chrome parce que c'est l'outil que j' aime utiliser quand je fais des choses comme ça. Mais vous pouvez également utiliser Firefox Safari edge. Vraiment n'importe quel navigateur sera en mesure de le faire.
9. Votre projet: Votre projet. Voilà ce que j'aimerais que vous fassiez. Je veux que tu ouvres ton navigateur préféré. Peut être Chrome, Firefox, Safari edge. Chargez mon site web. Par exemple, allez à Caleb point IO, cliquez avec le bouton droit sur la page, puis inspectez, puis cliquez sur l'onglet Réseau, puis
actualisez votre page si vous ne voyez rien comme nous l'avons fait dans la dernière vidéo. Et puis je veux que vous puissiez filtrer vos réponses par documents. Donc comme HTML, CSS, images ou JavaScript et juste un peu voir ce genre de choses mon site Web va essayer de vous servir. Trouvez une image, puis ouvrez cette image dans un nouvel onglet, puis prenez une capture d'écran de votre panneau réseau, juste le panneau entier, pas l'image elle-même, mais prenez une capture d'écran de votre panneau réseau alors qu'il est ouvert avec tous les les différentes demandes et réponses et partagez-les dans la section de votre projet. Ne vous inquiétez pas, tout ce que vous faites ici, c'est qu'il ne va pas casser votre navigateur. Il ne va pas blesser votre ordinateur, ne
va pas faire quoi que ce soit que vous ne pouvez pas annuler en cliquant simplement sur le bouton d'actualisation de votre navigateur. Alors n'hésitez pas à expérimenter. C' est complètement sûr de le faire. Allez-y et donnez un coup de feu. Prenez une capture d'écran de votre panneau réseau lorsqu'il est ouvert, partagé dans la section de votre projet. Et une fois que vous avez fait cela, vous avez terminé ce cours. Merci d'avoir pris le temps de suivre ce cours. J' espère que vous apprendrez quelque chose de nouveau et d'excitant. Encore une fois, c'est vraiment important quand il s'agit de développement web. Et si vous voulez en savoir plus sur HTML, CSS, API
JavaScript, tout ce qui, quoi que ce soit comme ça. N' hésitez pas à voir mon profil. J' ai déjà des cours sur tous ces sujets. Merci encore, et j'espère vous voir dans un autre cours.
Kalob Taulien, Web Development Teacher
