[Powered by Google Translate] [Semaine 7, suite]
[David J. Malan, Université de Harvard]
[C'est CS50.] [CS50.TV]
Très bien. Welcome Back. C'est CS50,
et c'est la fin de la semaine 7.
Ainsi, l'une de ces petites choses stupides qui va autour de l'Internet
et nous slurped en place, et il faut maintenant faire un peu de bon sens geek pour vous.
Eh bien, c'était drôle à ce mec qu'elle ne l'était à vous les gars.
En parlant de, eh bien, les gars,
Aujourd'hui, c'est l'anniversaire de Nate.
Pour vous donner une idée à quel point une bonne Nate et moi-même sommes
au développement web basée sur la classe de lundi et basé aujourd'hui à ce sujet,
Je pensais tirer vers le haut la page d'accueil de Nate, si vous ne l'avez pas encore vu.
Ce code HTML ici ia Nate.
Alors voir son code source si vous voulez voir comment faire cela, et Nate,
si nous pouvions vous embarrasser brièvement, le personnel a un petit quelque chose
si vous souhaitez partager un dessert avec certains des enfants de la classe ici.
Si vous voulez allez vers le bas.
Vous avez tous applaudissent et sont très gentils, mais personne n'est assis n'importe où près de Nate,
pour une raison quelconque, dans cette zone arrière.
Alors peut-être vous pouvez trouver des gens à profiter de ceux-ci avec.
Joyeux anniversaire, Nate.
>> Bonjours supplémentaires: Nous avons montré un clips en couple de nos étudiants CS50x.
Si vous souhaitez voir qui d'autre est dans le monde
qui a suivi jusqu'ici, vous pouvez vous diriger vers cette adresse URL,
où Joseph, l'un de nos FO, a mis en place un montage de toutes sortes
de tous ceux qui ont été soumis ces vidéos, dont Rick Astley.
Et si vous faites défiler ceux-ci, c'est vraiment très inspirant
de voir la diversité des pays et des villes à partir de laquelle les gens sont venus.
Donc, si vous voulez jeter un oeil à ce que sera en place jusqu'à la fin du semestre.
Aujourd'hui, nous continuons notre regard sur le Web, la programmation web, HTML et autres,
et nous avons aussi le déjeuner à venir ce vendredi
si vous le souhaitez, et en particulier, n'ont pas fait avant.
Thème de ce vendredi sera l'anniversaire de Nate,
si vous souhaitez mettre un déjeuner d'anniversaire avec Nate
et d'autres, certains de nos amis de l'industrie,
s'il vous plaît tête à cette URL là-bas.
L'espace, comme toujours, est limitée. En outre, si vous avez oublié,
se rendre compte que la semaine prochaine est la date limite pour le problème mis en chasse au trésor 4'S,
lequel après avoir récupéré l'ensemble de ces fichiers JPEG à partir card.raw,
vous et vos camarades de section, si vous le souhaitez, pouvez essayer de photographier
plus grand nombre de chercheurs en informatique de cette carte mémoire que possible,
et vous et votre section sera ensuite gagner un prix fabuleux.
Reportez-vous à pset 4 du cahier des charges de ce qu'il faut présenter et à quel moment.
Aussi, si vous souhaitez avoir votre ouvrage immortalisé
sur le site Web du cours et son histoire du vêtement,
sachez que vous êtes les bienvenus maintenant pour commencer à soumettre dessins
pour cette année, T-shirts et sweat-shirts et autres.
Nous ferons de notre mieux pour inclure autant que nous le pouvons,
mais nous avons quelques membres du personnel examine tous les dessins
afin de s'assurer qu'ils sont conformes aux spécifications,
et nous avons ensuite prendre généralement une poignée d'entre eux à être exposés.
Donc, si vous êtes le type de construction, il suffit de savoir que les exigences
pour les graphiques PNG sont, au moins 200 DPI,
ils ne doivent pas être plus de 4000 x 4000 pixels,
et pas plus de 10 Mo, mais vous êtes les bienvenus pour utiliser des choses comme
Photoshop ou GIMP ou divers programmes graphiques, les
tout ce que vous avez à votre disposition.
>> Aussi à l'horizon est le projet final. Le projet final est vraiment le point culminant de 50 ans,
laquelle de toutes les affectations dans le cours,
c'est votre chance de vraiment faire votre propre chose.
Et cela peut être tout simplement de faire quelque chose pour le plaisir,
il peut être de résoudre certains problèmes pressants votre groupe d'étudiants a,
pour certains nouveau site web, un mécanisme de collecte de données pour les données.
Il peut s'agir d'une application mobile pour Android, iOS.
Vraiment, le ciel est la limite, et au cours des prochaines semaines,
lors de la transition de C à ces langues de niveau supérieur telles que PHP et JavaScript
vous vous trouverez en plus familiarisés avec des techniques du monde réel,
certains outils du monde réel, et de la compléter,
savoir que le cours a une histoire de séminaires,
où au cours des prochaines semaines, une partie du personnel enseignant
et de nos amis sur le campus du offrira des séminaires optionnels
qui vont au-delà de ce qui se fait habituellement dans la section
de vous présenter les choses comme la programmation Android,
pour vous présenter des choses comme iOS programmation
ou plus avancés de développement Web techniques.
Il ya toute une histoire de ces déjà en ligne.
Si vous allez à cs50.net/seminars, nous avons fait cela pendant pas mal d'années,
et vous verrez que archivés ici avec les fichiers PDF et les vidéos et autres
des vidéos de plusieurs dizaines de séminaires.
L'année dernière, par exemple, nous avons eu un séminaire sur acing vos entretiens techniques,
si vous êtes en train de regarder pour aller faire un stage ou à temps plein concert.
Développement de Windows Mobile, Android, développement, Google Maps,
API, CSS, en développant pour le BlackBerry, Emacs.
Vraiment, vous êtes invités à jeter un oeil à l'un de ces séminaires à votre convenance.
Et nous allons tenir quelques nouvelles de ce semestre, aussi bien.
>> Alors, quelle est l'avant avec le projet final?
Eh bien, tout d'abord, même si cette date est un peu imminente,
c'est vraiment juste une occasion de commencer à penser à la finale du projet tout à fait réaliste.
Nous savons que les débuts de certains de ce que nous allons encore être couvrant en cours,
HTML, PHP, etc, mais vous êtes tous familiers avec le Web,
et je biais de cette conversation vers le Web seulement parce que
la plupart des gens finissent par faire des projets Web finaux,
mais ce n'est pas du tout nécessaire.
Utilisation de C est bien, Objective C, Java,
n'importe quelle langue que vous connaissez ou que vous voulez savoir, c'est tout à fait bien.
Mais pour obtenir le jus qui coule d'abord, nous allons attendre la présentation d'une proposition préliminaire
qui, par le PDF sur le site Web, qui est maintenant à cs50.net,
et en haut à gauche, vous verrez final du projet
est la spécification pour le projet final,
et il existe en plus de détails sur la préproposition et analogues.
Elle se résume assez bien vers le bas à un e-mail à votre adjoint à l'enseignement
juste pour entamer une conversation avec lui à propos de ce que vous pensez.
Sur projects.cs50.net est un référentiel d'idées de gens sur le campus
si vous avez du mal à trouver une idée,
et manual.cs50.net/APIs est un répertoire de liens vers des API.
>> Que, cependant, est une API?
Qu'est-ce qu'un API? Je l'ai dit au moins deux fois,
selon les transcriptions de ces dernières semaines.
Qu'est-ce que c'est? [Étudiant, inintelligible]
>> Très bien. Ainsi, l'interface de programmation quelque chose.
Interface de programmation d'application, ce qui peut prendre plusieurs formes,
mais ce que cela revient vraiment à est le code
que quelqu'un d'autre hs données écrites ou que quelqu'un d'autre a recueillies
qui est mis à votre disposition en quelque sorte programmatique.
Vous pouvez écrire du code en C, PHP, Python, Ruby,
quelle que soit la langue de votre choix est généralement,
et vous pouvez en quelque sorte s'appuyer sur quelqu'un d'autre fonctionnalité
ou quelqu'un d'autre ensemble de données.
Par exemple, si je vais à ce lien ici,
et vous verrez une paire de liens sur la page suivante
où nous avons propres API CS50, qui sont très Harvard-centrique, puis API tierces.
Parmi les API tiers sont des choses vraiment utiles
comme être en mesure d'envoyer des gens à la SMS,
être en mesure de recevoir des messages texte SMS des gens.
Et ce genre de choses que vous pourriez avoir aucune idée de comment mettre en œuvre vous-même,
mais grâce à des services, certains, gratuitement ou non commerciale
vous pouvez construire au sommet de celles-ci et faire quelque chose de vous intéresser.
Parmi les API CS50 sont ces choses campus axées comme
Cours de Harvard, de l'énergie, des événements, des aliments, des cartes, des nouvelles, des tweets et Shuttleboy son propre,
et ce sont les API qui ont l'air un petit quelque chose comme ça.
>> Permettez-moi de tirer vers le haut l'API HarvardFood.
Si vous avez déjà été sur le site de HUD, vous avez probablement été là
juste voir ce qu'il ya pour le dîner ou pour voir quelles sont les heures sont pour certains d-hall.
Eh bien, ce n'est pas particulièrement facile à naviguer,
et si ce que nous avons été il ya quelque temps, nous avons écrit un logiciel,
il arrive à être en PHP, qui fait écran gratte l'intégralité du site Internet de HUD.
Pour dépister quelque chose gratter signifie d'écrire un programme dans un langage comme le PHP
qui prétend être un navigateur, même si vous pouvez l'exécuter à l'invite de commande,
qui prétend être un navigateur, se connecte à un site Web,
télécharge le HTML, le langage dans lequel il est écrit,
puis lit, ou plus précisément, il analyse
de haut en bas, de gauche à droite.
Et ce que nous avons été, nous avons écrit notre code de façon à ce que
tout moment, nous avons vu quelque chose dans ce que HTML ressemblait à quelque chose sur le menu,
comme hamburger, nous serions alors importer ce dans notre propre base de données.
Et chaque fois que nous avons vu le contenu nutritionnel, nous l'importer dans notre propre base de données.
Et ce que nous faisions était exploiter le fait que le site web de HUD,
même si cela peut être un peu un défi pour nous les humains pour naviguer
sous le capot, l'ensemble de l'HTML est généré par leurs propres programmes informatiques.
Ainsi, la totalité de leur code HTML, même si cela peut sembler malpropre,
comme la plupart des sites Internet sous le capot il suit un modèle.
Donc, nous venons de passer quelques heures figurant sur ce modèle
de sorte qu'en fin de compte, on jette tout le code HTML désordonné,
tout de l'esthétique du parement en gras et en italique et autres,
et ce que nous sommes alors en mesure de le faire est d'exposer ces mêmes données.
Par exemple, de cette façon.
Nous avons donc, d'après la documentation ici,
ont informé le monde que si vous demandez une URL
qui ressemble à ceci, food.cs50.net / quelque chose,
et de vous fournir certains paramètres, que nous allons parler aujourd'hui,
comme date de fin de temps, date de début du temps, de repas et ainsi de suite,
ce que nos serveurs reviendrai à vous, par exemple,
est un fichier CSV, comma separted valeurs comme un fichier Excel,
contenant tout pour le petit déjeuner à cette date particulière en Mars de l'année dernière
quand il m'arrivait de rédiger ce document.
>> Pour ceux qui connaissent, CSV n'est pas le seul format de fichier.
Il ya un autre format qui est d'autant plus polyvalent
appelé JSON, JavaScript Object Notation.
Les données peuvent revenir dans ce format.
Ainsi, l'emporter ici est que si vous plongez dans cette API
ou de toute autre CS50 ou quoi que ce soit là-bas sur l'Internet,
ou pas du tout, se rendre compte que le monde a de plus en plus commencé à normaliser
comment les machines communiquent entre eux.
Nous utilisons des formats de données tels que CSV ou JSON.
Et qu'est-ce que cela signifie pour vous est que vous pouvez écrire la partie intéressante d'un programme
qui permet à l'utilisateur de votre recherche d'un menu salle à manger,
qui leur permet de créer des listes de favoris qui leur permet de recevoir des alertes texte
lorsque leur repas préféré est sur le point d'être servi dans une salle d-
en utilisant des ensembles de données de quelqu'un d'autre et le renforcement au-dessus de leurs API.
Donc, plus de détails dans la forme de séminaires et de la documentation que vous avez ici en ligne.
Donc, ce sont donc les API.
>> Cela nous ramène au format HTML. Bref récapitulatif.
Qu'est-ce que HTML?
[Étudiant, inintelligible] Bon >>. HyperText Markup Language.
Quelqu'un d'autre, ce qui est Hypertext Markup Language?
HyperText Markup Language.
D'accord. Donc, HTML, Hypertext.
HyperText se réfère simplement à l'Internet, la plupart du temps.
Markup signifie que ce n'est pas vraiment un langage de programmation, HTML.
Ce n'est pas une langue que vous pouvez exprimer la logique po
Il n'a pas de boucles. Il n'a pas de conditions.
Il n'a pas de fonctions, en soi.
Plutôt, il a ces choses appelées balises, ou plus exactement, des éléments.
Et ces éléments ont balises de début et de fin,
ou balises d'ouverture et les étiquettes fermées, et ce que ces mots signifient généralement un navigateur doit être,
commencer à faire quelque chose et puis arrêter de faire quelque chose, mais il ya des exceptions.
Parfois, c'est juste «mettre un saut de ligne ici, par exemple.
Et nous avons vu des exemples de ce que l'autre jour, entre parement gras,
les sauts de ligne, et puis un couple de d'autres balises.
Donc HTML est le langage dans lequel les pages Web sont écrites.
Donc, si je vais à quelque chose comme Google.com
et tirez simplement leur page d'accueil,
Rappelons que si vous faites un clic droit ou de contrôler cliquez sur
et consulter le code source vue, généralement
c'est un désordre complet ces jours-ci sous le capot, mais c'est parce que
ordinateurs ne se soucient pas d'espace blanc, donc ce n'est pas pour faire joli.
Mais si l'on zoomer sur des parties de celui-ci,
remarquerez que Chrome, il suffit d'être gentil, a un code couleur des choses.
En effet, c'est la première étiquette que nous avons vu dans une page Web.
Et encore une fois, HTML 5, la dernière version de ce langage,
ne ont cette chose au début,
<! Doctype html, que ce soit en minuscules ou en majuscules,
mais c'est juste une sorte de norme qui dit: hey monde, voici un fichier HTML dans la version 5.
>> La partie intéressante commence ici. Donc <html, et puis il y avait deux enfants
des éléments HTML dernière fois.
Quels sont ces deux enfants majeurs?
Tête et corps, tout comme le gars avec le tatouage il ya un instant.
Il ya deux parties de la page Web, la tête et le corps,
et le rappel, alors, que peut-être la page web le plus simple que nous pourrions faire ressemble à ceci.
Et je l'ai découpée juste pour être une sorte de propre et bien rangé avec mon code,
mais ce qui est vraiment important ici, c'est qu'il ya une certaine hiérarchie pour cela.
Et tout tag que j'ai ouvert, j'ai fermé et qu'il ya donc cette symétrie
à tout le balisage que j'ai créé.
Donc, la dernière fois que nous avons commencé l'écriture de pages web sur mon propre ordinateur portable.
J'ai ouvert l'édition de texte, j'ai enregistré le fichier comme hello.html,
J'ai ensuite fait glisser le fichier sur mon navigateur, et voila, j'ai eu une page sur Internet.
Maintenant, ce n'est pas tout à fait le cas, j'avais une page sur mon disque dur,
et j'étais littéralement la seule personne dans le monde qui veut voir cette page Web dans un navigateur.
>> Donc, aujourd'hui, nous introduisons un serveur Web réel
et la notion de fait au service de contenus sur Internet
et comment tout cela commence à monter.
Ainsi, il s'avère que tout ce temps dans l'appareil CS50
vous avez eu un serveur Web sur votre ordinateur.
Nous avons, en toute justice, ne l'ai utilisé pour gedit, par Clang, pour GDB et autres,
mais aussi installés par nos soins pour vous dans l'appareil est un serveur web,
et que le serveur web se trouve à être libre, open source,
l'un des plus populaires au monde, appelé Apache.
Son nom technique est plus HTTPd, le d étant pour le démon ici,
qui est un terme technique pour un serveur.
Donc, installé dans l'appareil CS50 est un serveur web, et ça veut dire quoi?
Eh bien, un serveur web est, conceptuellement, un serveur sur Internet qui sert de contenu Web.
Lorsqu'on lui a demandé pour un fichier, elle recrache le code HTML qui compose ce fichier, et le tour est joué.
Vous voyez une page d'accueil site web.
Mais un serveur est, plus précisément, un morceau de logiciel.
Il n'a pas besoin d'être sur une machine physique, il doit juste être un morceau de fonctionnement du logiciel.
Ainsi, l'appareil CS50, bien sûr, est un morceau de logiciel
même si c'est un peu semblant d'être une machine.
Il fait semblant d'être un ordinateur à l'intérieur d'un ordinateur,
mais cela signifie simplement que l'appareil peut certainement tourner les choses comme les serveurs Web.
Il peut effectivement fonctionner les serveurs de messagerie.
Nous pourrions lancer un serveur de messagerie instantanée dans l'appareil, si nous le voulions,
et en effet, nous courons un autre type de serveur, appelé serveur de base de données mySQL.
Mais plus à ce sujet la semaine prochaine.
Cela signifie que je peux réellement visiter les pages Web
à l'intérieur de mon appareil à l'aide d'un navigateur à l'intérieur de l'appareil
ou même sur mon propre ordinateur portable, mon Mac ou mon PC.
Alors qu'est-ce que cela signifie? Il s'avère que chaque fois que vous utilisez un ordinateur sous Linux,
son surnom est "hôte local".
Il n'a pas de nom de domaine car nous n'avons pas acheté un nom de domaine
quelque chose comme l'appareil, de sorte que son nom par défaut est l'hôte local.
>> Mais afin d'obtenir l'appareil pour commencer à purger des pages web,
nous devons les créer.
Alors faisons-le. Laissez-moi aller dans une fenêtre de terminal ici
et remarquez que je suis à mon prompt typique John Harvard.
Permettez-moi aller de l'avant et tapez ls, et nous verrons des choses familières de ce semestre,
bureau, téléchargements, la sélection et ainsi de suite,
mais maintenant nous commençons à tourner notre attention vers un couple.
Sur de nombreux serveurs web Linux, il ya ce dossier appelé html public,
mais nous allons ignorer que l'un pour l'instant et se concentrer sur ce vhosts,.
Tout le monde sait ce qu'est un vhost est?
Tout le jargon stupide pour l'hôte virtuel,
et ce que cela signifie, c'est que sur un serveur classique
vous pouvez réellement héberger plusieurs sites Web.
Vous pouvez acheter un nom de domaine comme foo.com, et vous pouvez l'héberger sur un serveur.
Mais vous pouvez également acheter bar.com et l'héberger sur le même serveur.
La raison étant, les navigateurs sont assez intelligents pour informer le serveur
quand un utilisateur demande une page Web, ce nom de domaine que l'utilisateur veut la page d'accueil.
Donc, ce qui est bien à ce sujet est que vous n'avez pas besoin d'un serveur physique
ou un CS50 appareil pour chaque site Web que vous pouvez créer.
Vous pouvez utiliser le même serveur et de développer une centaine de sites Internet différents.
Et en effet, si vous êtes une personne essayant de démarrer un site Web,
que ce soit pour le plaisir ou pour les affaires, en général, vous allez aller sur l'Internet,
et vous aurez à payer quelqu'un dix dollars par mois, une centaine de dollars par mois
pour héberger votre site pour vous.
Et la façon dont fonctionne est qu'ils sont en charge d'autres personnes
dix dollars par mois, soit une centaine de dollars par mois
pour héberger des sites web d'autres personnes sur leur serveur même.
La raison pour laquelle ils peuvent le faire à cause de cette fonctionnalité appelée bhosts,
mais plus sur cela quand vient le temps pour les projets finaux.
>> Pour l'instant, disons simplement plonger là-dedans. Donc vhosts cd, et si je tape ls maintenant,
remarquerez qu'il ya un dossier là-bas appelé hôte local.
C'est parce que, par défaut, les chiffres appareils
vous allez jamais faire fonctionner un site web sur un appareil.
Ce n'est pas vraiment le monde réel, ce n'est pas un serveur web dans le monde réel.
Alors laissez-moi aller dans l'hôte local, et maintenant nous allons voir là-dedans
un répertoire appelé HTML dernier.
Donc, c'est un peu profonde, la hiérarchie, mais si et quand
vous décidez de commencer à développer plusieurs sites Web dans les mois ou les années à venir n,
ce type de structure de dossier tend à être utile.
Maintenant, nous allons passer en HTML que je viens de faire,
tapez ls, et rien n'est là.
Alors maintenant, nous allons aller de l'avant et de le faire. Permettez-moi d'ouvrir Chrome
à l'intérieur de l'appareil, et me laisser aller à http://localhost.
Donc littéralement le nom de mon appareil, entrez, et je reçois index of /.
Ce n'est pas vraiment me montrer quelque chose d'intéressant,
mais il s'avère que ce que nous voyons est ce dossier, HTML.
Il n'y a rien dans ce dossier en ce moment,
si au contraire, ce que je vais devoir faire, c'est d'abord créer un fichier.
Créez un fichier HTML comme nous l'avons fait le lundi, mais cette fois-ci mis à l'intérieur de l'appareil.
Pour ceux d'entre vous qui cherchent à suivre avec les ordinateurs portables maintenant,
permettez-moi de faire une part qui va être couvert dans le pset basé sur le Web,
mais pour que cela fonctionne pour la première fois,
vous allez avoir à exécuter cette commande: sudo service httpd start.
Et ce, encore une fois, sera répété dans le pset dernier,
mais si vous accompagnez à la maison maintenant, le serveur Web
est activé sur l'appareil, et en ce que les de manière à ne pas saper la RAM
et la mémoire pendant 7 semaines sur le semestre quand nous n'avons pas besoin.
Donc, vous devez exécuter cette commande une fois, et vous obtiendrez une sortie comme ça.
Ensuite, vous devriez être en mesure de jouer le jeu ici.
Maintenant, nous allons revenir dans ce dossier.
Ce dossier est vide, alors permettez-moi de commencer à créer un fichier,
gedit hello.html.
>> Très bien. Gedit est ouvert, comme d'habitude. Permettez-moi de faire doctype, html,
html, permettez-moi de prendre de l'avance sur moi-même et commencer à fermer mes tags à l'avance.
Maintenant, j'ai la tête. Permettez-moi aller de l'avant et fermer la tête,
permettez-moi de faire le titre de la page, bonjour tout le monde comme la dernière fois,
Titre proche, maintenant laissez-moi faire un corps.
Ici, je vais lui dire bonjour, monde, avec quelque exclams
à préciser que c'est une chaîne différente.
Fermer corps, et maintenant laissez-moi aller de l'avant et déposer sauver.
Permettez-moi de revenir à ma fenêtre de terminal, et si je tape ls,
Je devrais, sans doute, reportez-vous hello.html. Et je le fais.
Alors maintenant, revenons à mon navigateur, cliquez sur recharger,
et vous pouvez voir que nous sommes bien à l'intérieur de ce dossier HTML.
Je ne vois pas encore une page web, ce qui est Apache, le serveur web,
juste me montrer le contenu de ce répertoire liste.
Tout comme Mac OS ou Windows seraient normalement faire sur votre propre disque dur local.
Donc, si je veux voir cette page web, je peux cliquer sur ce lien ici peu, hello.html,
et en effet, c'est ce que je m'attendais à voir.
Maintenant, encore une fois, ce n'est pas une URL que l'un de vous pouvez visiter dès maintenant,
parce que pour vous, l'hôte local, si vous avez un ordinateur portable ici,
il se réfère à votre propre instance de l'appareil.
Il s'agit de mon appareil personnel,
mais c'est un peu idiot pour moi d'avoir, d'avoir
un utilisateur comme moi cliquez sur hello.html de voir réellement le contenu de cette page.
Il s'avère que les serveurs Web comme Apache vous permettent de disposer d'un fichier par défaut pour tous les serveurs web.
Nous avons ici hello.html.
Quelle est la commande sous Linux pour renommer un fichier?
>> MV, pour le déménagement. Alors laissez-moi faire,
et permettez-moi de renommer hello.html à index.html.
Permettez-moi de taper ls pour confirmer qu'il a été renommé.
Maintenant cela va - si je retourne à l'hôte local,
remarque maintenant que je suis automatiquement voir cette page web.
Ceci est identique à mon train de faire / index.html,
mais la bonne chose est que maintenant que le serveur Web a déterminer,
oh, si vous avez un fichier qui, par les conventions de l'homme, est nommé index.html,
permettez-moi de montrer à l'utilisateur que le fichier par défaut
plutôt que d'une inscription dans l'annuaire stupide qui n'est pas du tout convivial.
En effet, la plupart des sites que vous visitez sur Internet n'ont pas une liste de fichiers à cliquer sur,
ils ont juste vous montrer le contenu. C'est comme ça que nous pouvons faire cela, index.html.
Donc, c'est tous les amusement et bonne, mais ceci est une page web assez simple.
Permettez-moi aller de l'avant et d'ouvrir index.html dans mes vhosts,
les hôtes locaux, les répertoires html, et nous allons ajouter quelque chose de plus grand intérêt.
Donc, il ya Bonjour tout le monde, nous allons plutôt dire «C'est CS50, Harvard College. . .
Ainsi, le début de la description de catalogue de cours en quelque sorte là-bas.
Maintenant, si je recharge, je le vois dans ma page d'accueil.
D'accord, et je ne vois, mais supposons que je veux maintenant lister le contenu un peu plus dans ce fichier.
Je pourrais continuer ici-bas et dire, aucun pré-requis,
même si certains d'entre vous sont probablement comme «Ha ha ha, aucune condition préalable.
Mais - officiellement. Donc, recharger, et maintenant nous avons la bizarrerie même que nous avons vu la dernière fois.
Mais pourquoi est-ce? C'était une solution simple.
Pourquoi cette page cassé?
[Étudiant, inintelligible] >> Oui, nous avons résolu ce avant
par lui dire explicitement navigateur «mettre un saut de ligne ici.
Et c'est parce que, encore une fois, un navigateur va seulement faire
explicitement ce que le langage de balisage lui dit de faire,
donc même si vous avez pu appuyez sur Entrée une fois ou deux ou même dix fois,
ça va combiner que tous en un seul espace, juste par convention.
Donc, si vous voulez vraiment un saut de ligne, vous devez utiliser la balise br,
et maintenant préavis, comme lundi, je mets l'intérieur / de cette balise,
seulement parce que ce n'est tout simplement pas sentir
pour commencer un saut de ligne, puis l'arrêter avec rien entre les deux.
>> Ainsi, la convention en HTML est d'ouvrir et de fermer une balise simultanément.
Soit dit en passant, vous verrez beaucoup de sites Web dans les livres ne font pas cela.
Il est juste de faire ou de ne pas le faire, mais nous sommes d'avis
que la conception-sage et stylistiquement, il s'agit juste d'une meilleure
car alors chaque balise est à la fois ouvert et fermé en quelque sorte.
Alors maintenant, nous allons sauvegarder et recharger. Retour à la page du navigateur, ok.
Maintenant, nous faisons des progrès, mais ce n'est pas assez.
Allons de l'avant et commencer à taper dans certains corps plus long du texte.
Donc, disons, «Un renard brun rapide saute par-dessus un chien paresseux. '
Et maintenant, laissez-moi vous suffit de copier et coller ceci plusieurs fois
de sorte que nous avons un paragraphe de texte.
Permettez-moi de revenir ici. Donc ce n'est pas de très bon augure.
J'ai un saut de ligne, si tout va bien,
mais maintenant, une fois que nous sommes arrivés au point d'avoir une page web
qui a beaucoup de contenu et des lignes simples non seulement pour démontrer HTML,
nous pouvons commencer à penser à ces choses, que les points réels.
Et nous pouvons commencer à structurer notre page web un peu plus propre.
Et en effet, ce que je peux faire est d'aller ici à l'intérieur de ma balise body,
et vous savez quoi, si «C'est CS50. . . demarks vraiment le début d'un paragraphe,
eh bien, disons étiqueter comme tel.
Permettez-moi de indenter le texte, juste par convention, laissez-moi vous dire
que ce paragraphe se termine ici,
et puis au lieu de faire ce saut de ligne, laissez-moi vous dire
que cela fait partie là-bas et comme un nouveau paragraphe,
et je vais rapidement tiret par tout démolir tous ces trucs.
>> Alors maintenant, nous avons un paragraphe indenté là,
et maintenant notre balisage commence à être un peu plus
sémantiquement cohérent avec ce que nous essayons de faire.
Nous disposons d'un paragraphe, nous allons donc appeler cela un paragraphe avec la balise p.
Nous avons un deuxième paragraphe, nous allons donc appeler cela un paragraphe avec la balise p.
Et maintenant, que le navigateur va généralement faire
est juste comme dans un livre anglais ou un essai,
où vous avez l'habitude voir des sauts de ligne entre les paragraphes.
Navigateurs fera pour vous automatiquement.
Nous avons donc maintenant deux paragraphes et nous pouvons continuer cela.
Mais, bien sûr, sur le Web, lorsque vous avez des corps de texte
ce n'est pas typiquement de taches énormes de texte.
Il ya souvent des liens hypertextes à l'intérieur.
Donc, si nous voulons, par exemple, inclure des liens là-bas,
suppose que ce qui pourrait être d'intérêt pour n'importe quelle page web, je crée ici, c'est -
me laisser aller à Google.com,
et laissez-moi chercher un rapide renard brun.
Aller à Google images, et, que diriez-vous - c'est mignon.
Nous irons avec cela. Nous avons donc ici un renard brun rapide saut sur un chien paresseux.
Donc ce que je vais faire ici, juste pour le plaisir de la démonstration,
est supposer que cette image était sur mon serveur,
et j'avais été la création de ces images.
Ce que je viens n'a été faire un clic droit ou de contrôler clic sur l'image,
et ce que vous verrez dans la plupart des navigateurs est un petit menu -
arrêter de faire ça - un petit menu qui vous permet de choisir l'emplacement copiez le lien ou copier l'URL.
Permettez-moi de revenir maintenant à mon HTML, et supposons que je veux
à ce lien hypertexte vers une autre page Web.
>> Quelle a été la balise nommée pour cela?
[Étudiant, inintelligible] >> Oui. Donc a href pour référence hyper.
Permettez-moi aller de l'avant et de le coller po
Il s'agit d'une URL assez long, alors laissez-moi un zoom arrière.
Crochets de fermeture, de sorte remarque maintenant que je suis en venant ici
parce que l'URL qui est arrivé à être assez long.
Permettez-moi de faire défiler ici à la fin de quick brown fox,
et laissez-moi fermer cette balise avec </ a,
où j'ai fermé uniquement le nom de la balise.
Maintenant, laissez-moi aller de l'avant et enregistrez ce fichier, recharger la page Web,
et maintenant, par défaut, que va être soulignés en bleu pour moi,
mais en fait, je peux maintenant cliquer sur cette question et le tour est joué. Il ya cette image.
Et il n'a pas besoin d'être une image, il aurait pu liés
à un autre site Web hasard sur Internet.
Je pourrais le faire, par exemple, avec CS50, donc un dernier exemple ici.
«C'est CS50» pourrait être judicieux d'aller, href =
http://www.cs50.net, citant proche, ancre près.
Alors maintenant que c'est une URL plus courte même, et cette fois nous n'allons pas mettre un lien vers une image.
Nous allons plutôt un lien vers une autre page.
Maintenant, nous avons une image ici.
J'ai l'impression que nous pouvons faire un peu mieux que juste un lien vers une image.
Que faire si nous voulons vraiment l'incarner dans notre propre page Web?
>> Eh bien, ce que je peux faire ici, plutôt que de lien vers ce graphique,
laissez-moi plutôt couper l'URL, et nous débarrasser de cet hyperlien et de nettoyer tout ça.
Et nous allons descendre ici et de se débarrasser de cela.
Nous n'avons pas vraiment besoin de toutes ces phrases maintenant, permettez-moi de raccourcir la page un peu.
Et puis ici me laisser aller de l'avant dans un nouveau paragraphe,
dire que je ne veux texte maintenant, je veux une image dont la source va être cette URL.
Une image, comme un saut de ligne, c'est là ou il n'est pas.
Permettez-moi donc de fermer immédiatement cette balise.
Permettez-moi maintenant aller de l'avant et fermez le paragraphe que je suis à l'intérieur,
et si tout va bien avec Bonjour, monde, si je recharge maintenant,
J'ai, en effet, voir à droite à l'intérieur de ma propre page web une image.
Nous avons donc maintenant une balise d'image, une balise d'ancrage et autres,
et pour faire bonne mesure, permettez-moi de faire une autre chose qui est souvent négligé
sur les sites Internet de nos jours: Offrons un texte descriptif pour cette image
pour les personnes qui sont sur un appareil mobile
et pourrait donc ne pas être en mesure de télécharger cette image très rapidement,
pour les personnes qui sont aveugles et ne pas être en mesure de voir l'image
mais ils pourraient avoir un lecteur d'écran qui peut leur dire ce que cette image est de.
Et pour ce faire, il existe un autre attribut pour les balises images
alt appelé, pour le texte de remplacement.
Et ce que je peux faire ici est de dire: «C'est un renard brun rapide.
De sorte que même si l'homme ne peut pas voir l'image sur l'écran,
il ou elle peut au moins entendre, comme avec un morceau de logiciel,
ce qui est réellement là-bas sur l'écran.
>> Cela ne changera pas l'esthétique de la page,
mais il est certainement de bonnes pratiques pour les utilisateurs.
Bon, laissons cette page Web sous sa forme actuelle,
mais nous allons voir si nous ne pouvons maintenant introduire
certaines approches mieux à la rédaction de ces pages Web,
quelques leçons qui vont nous servir ainsi que nos pages deviennent de plus en plus complexe.
Qu'est-ce que nous n'allons pas le faire au cours des prochaines semaines
qui vous guidera à travers toutes les balises HTML de plusieurs dizaines qui y sont.
Tout comme dans zéro de retour à la semaine 0, il suffira sans doute
de donner un aperçu de haut niveau de quelques-uns des concepts,
un rapide tour d'horizon de quelques-uns des blocs vous étiez probablement en mesure,
assez confortablement, de naviguer sur vos propres, les différentes pièces du puzzle.
Et ce qui va se passer à nouveau en HTML, le plus probable,
où il ya de vastes ressources sur le Web que nous vous mettrons à,
divers manuels, si vous préférez lire un manuel,
qui vous guidera à travers toutes les différentes choses que vous pouvez faire avec HTML,
mais en réalité, nous avons vu jusqu'à présent en HTML plupart des concepts fondamentaux.
Nous avons la notion de balises étant ouverts, les étiquettes étant fermée.
Certaines balises qui sont à la fois ouverts et fermés
dans le sens où elles sont vides; rien ne devrait l'intérieur d'eux
comme une balise d'image ou un saut de ligne, qui sont juste là.
Nous avons également examiné déjà à l'idée d'un attribut, comme alt ou la source.
Notez que ces mots ont tendance, par convention, pour être court et concis.
>> Nous n'avons pas de pouvoir discrétionnaire sur ce que ces choses sont dites,
quelqu'un d'autre qui a inventé HTML est venu avec ces noms.
Donc, il vous suffit de commencer à connaître ou rechercher, chaque fois que vous en avez besoin,
quels sont les noms sont ces balises et attributs.
Dans le cas de ces attributs, attribue généralement
modifier le comportement de certaines balises.
Dans ce cas, l'attribut source indique la balise d'image
quelle est la source de l'image devrait être.
L'attribut href indique la balise d'ancrage ce qui doit en fait être le lien.
Mais en termes de la structure d'une page Web, même si Facebook
et Google et le regard comme comme un désordre complet
sous le capot, à première vue, si vous commencez à lire à travers elle
plus méthodiquement, ils suivent tous cette base, la structure de base.
Mais nous pouvons améliorer la stylisation de ces choses.
Alors laissez-moi aller à quelques exemples que j'ai préparés à l'avance.
Permettez-moi aller de l'avant et de les copier dans un autre dossier ici
et les mettre dans ce répertoire.
À l'avance, ce que j'ai fait préparer quelques fichiers:
search0, recherche1, recherche2, et search3 et 4.
Permettez-moi aller de l'avant et d'ouvrir la première de ces fichiers,
et nous allons voir si nous ne pouvons pas commencer à créer notre propre moteur de recherche.
Au sommet de ce fichier, comme c'est habituellement le cas dans la classe, juste un tas de commentaires.
En HTML, cependant, les moyens par lesquels vous commencez un commentaire
est <-! et puis vous êtes à l'intérieur d'un commentaire, d'un commentaire multi-ligne.
Lorsque vous êtes prêt à arrêter ce commentaire, vous pouvez le faire ->.
Donc, tout en haut en bleu, c'est juste un commentaire.
>> C'est ma déclaration doctype, qui encore une fois,
il vous suffit de copier et coller sur la foi, pour l'instant.
Cela indique simplement le navigateur, 'Voici quelques-unes HTML 5.
En dessous, sur la ligne 14, est le premier de mes tags réelles,
et cela dit tout simplement, comme avant, voici un peu de HTML,
voici la tête de ma page, voici le titre,
puis, à l'inverse, c'est tout pour le titre, c'est tout pour la tête.
Voici venir maintenant le corps de ma page.
Donc deux balises h1 nouvelles maintenant: est pour la rubrique 1.
Il s'agit d'une tradition en HTML depuis de nombreuses années en arrière
d'avoir différentes tailles de texte.
Et retour dans la journée, chacun voulait dire, en général, tout gros et gras.
Mais il ya aussi h2, qui est grande, mais pas tout à fait aussi gros et gras.
Il ya h3, ce qui est assez grande, mais pas aussi gros et gras,
et ainsi de suite, tout le chemin jusqu'à h6.
Ces jours-ci, cependant, h1, h2 et h3 sont vraiment destinées
pour avoir un sens plus sémantique pour eux,
où h1 est vraiment un titre: le titre d'une page Web,
le titre d'une colonne ou quelque chose comme ça de texte.
J'ai donc dit délibérément h1 CS50 recherche> h1
pour spécifier que c'est vraiment le titre, le titre de ma page.
Pas le titre dans le sens barre de titre,
mais le titre que vous voyez à la page web elle-même, dans le corps.
Maintenant, vous pouvez probablement le deviner ce qu'elle est,
même si nous avons quelques nouvelles pièces de la syntaxe.
Il s'agit d'un formulaire. Ainsi, le Web devient vraiment intéressant
lorsque des sites Web prennent suggestions des utilisateurs.
Dans cette classe, le problème posé sur la programmation web,
nous n'allons pas faire un site web, en soi,
avec un contenu statique qui montre des photos que vous avez prises,
ou c'est mon CV, et les choses autour de moi,
parce que ces choses sont relativement faciles à mettre ensemble.
Il est difficile de faire de belles choses sur le Web,
mais au moins de mettre en place le contenu est assez trivial.
Mais les choses deviennent vraiment intéressantes quand on peut visiter votre site Web
et fournir des commentaires et peut remplir des formulaires,
pouvez cocher les cases à cocher et peut interagir avec votre site web.
Et en effet, probablement tous les sites que vous aimez
ces jours-ci, dans le détail, est en quelque sorte interactif.
Facebook, Google, etc, qui prennent entrée de l'utilisateur
et produire une sortie spécifique.
>> Donc, nous allons commencer à le faire maintenant. Faisons maintenant la transition
d'un peu aide HTML pour le balisage du contenu statique
que la place d'un mécanisme de distribution pour le contenu dynamique.
Et à cette fin, nous allons mettre en œuvre notre propre moteur de recherche.
Faisons-le comme suit. Voici la balise form.
L'attribut action spécifie que lorsque l'utilisateur remplit ce formulaire
avec leur clavier, il sera soumis à cette URL ici.
Donc, je suis une sorte de tricherie. Ça va nous prendre un peu plus longtemps
d'une classe à mettre en œuvre l'ensemble des moteurs de recherche,
donc nous allons simplement faire l'avant, pour ainsi dire.
Nous ferons le cadre qui permet la recherche des utilisateurs, et nous allons régler de botté de dégagement à Google
la partie la plus difficile de trouver des résultats de la recherche,
mais, précisément, je vais parler au serveur Web de Google
en utilisant une des deux méthodes très populaires.
L'une étant d'obtenir, un autre, que nous finirons par voir, étant de poste,
bien qu'il y en a d'autres qui sont moins souvent utilisés.
Donc obtenir tout évoque l'idée d', je veux obtenir un certain contenu, obtenir des résultats de recherche.
Cela, vous pouvez peut-être deviner ce qu'il fait.
C'est une sorte d'entrée, il est, en fait, va ressembler à un champ de texte,
et le nom de cette entrée, le nom de la variable, pour ainsi dire,
va être q pour la requête par convention.
Et encore, le type de cette entrée ne va pas être une case à cocher;
ça ne va pas être un menu, il va y avoir un champ de texte
comme indiqué par cet attribut ici, et cette zone de texte,
comme un saut de ligne, soit là ou non.
Nous avons donc un élément vide avec la barre oblique à l'intérieur de cette balise.
Alors je vais mettre un saut de ligne, et vous pouvez peut-être deviner ce que cela va faire.
C'est une autre sorte de formulaire de saisie.
>> Celui-ci va être utilisé pour soumettre le formulaire.
Donc cela va être le gros bouton que l'utilisateur peut cliquer pour envoyer le formulaire,
et l'étiquette de ce bouton sera 'CS50 Recherche.
Fermez Formulaire, corps fin, gros HTML.
Voyons ce que nous avons sous la forme de cette page web.
Alors laissez-moi aller à mon navigateur,
laissez-moi aller, encore, à l'hôte local.
C'est encore index.html, donc si je veux voir ce fichier appelé search0,
Je peux simplement faire / search0.html, entrez -
et le premier de mes erreurs.
Que se passe-t-il? J'ai clairement n'avez pas la permission
d'accéder à ce fichier, pour une raison quelconque.
Mais c'est parce que, contrairement au travail que nous avons accompli à ce jour en C,
où les programmes que vous écrivez sont supposés être runable par vous,
exécutable par vous, ce n'est pas vraiment le cas sur le Web,
où, parfois, vous voudrez peut-être créer des fichiers sur un serveur,
mais vous ne voulez pas que le monde entier puisse les voir.
Au contraire, vous voulez que le monde de voir certains fichiers
mais pas d'autres, juste pour l'amour de la vie privée.
Donc, il s'agit plus d'une base opt-in lorsque vous faites des choses sur le Web.
Et permettez-moi de taper ls fait ici,
et vous voyez les fichiers que j'ai, mais rappelons que si je fais ls-l pour longtemps,
Je vais prendre une longue liste qui me donne quelques détails sur ces fichiers
qui sont maintenant, vraiment, pour la première fois pertinent pour nous.
Notez que sur l'extrême droite sont les noms de mes fichiers,
puis l'heure à laquelle ils ont été modifiés ou copiés.
Ce nombre ici, c'est quoi? Vous souvenez-vous?
La taille en octets, la taille du fichier est.
>> Donc, il me semble avoir une sorte de logo ici qui est plus grand que tous les autres fichiers.
Voilà qui je suis, c'est ce que je suis et ce que je suis dedans groupe
Mais alors, là-bas sur la gauche est un peu cryptique de la séquence,
et nous avons parlé, je crois, bref à ce sujet dans le passé,
mais cela a à voir avec les permissions.
Et même si c'est un peu flou,
RW signifie probablement lire et écrire.
Ainsi, il s'avère que ces traits dénotent des ensembles d'autorisations différentes pour différentes personnes.
Et la tendance est, pour l'essentiel, comme suit.
Lorsque vous voyez une séquence de tirets ici, ils regardent comme suit.
Il s'agit d'un tableau de bord, puis il ya encore trois tirets,
puis, il ya trois autres, puis il ya un autre trois.
La première est soit un tableau de bord ou son annonce pour le répertoire.
Alors que l'on est assez facile. Si c'est un dossier, il est dit d, sinon c'est un trait d'union.
Il ya un couple d'autres cas, mais pour l'instant nous allons juste prendre soin sur les fichiers et les répertoires.
Ces trois prochaines tirets - et j'ai inséré artificiellement les espaces.
Ils étaient, de toute évidence, pas là quand nous les avons vus tout à l'heure.
Ce sont les autorisations du propriétaire du fichier,
et de rappeler d'une part, qu'il ya été lire et écrire.
C'était parce que, comme la personne qui a créé ce fichier il ya un instant,
Moi, tout simplement par défaut, sur un ordinateur Linux,
ont la capacité de continuer à lire et à écrire dans ce fichier.
>> Ainsi, le système d'exploitation me donne juste RW automatiquement.
Celles du milieu en relation avec mon groupe, celui des étudiants,
qui est une sorte de sens sur l'appareil parce que je suis la seule personne à utiliser l'appareil.
Alors permettez-moi de saluer mes mains là pour l'instant.
Mais les derniers sont les plus importants pour le Web.
C'est tout le monde dans le monde, et le fait
que cela est --- signifie que personne d'autre dans le monde
a toutes les autorisations pour ce dossier.
Clairement un problème, donc j'ai besoin de résoudre ce problème
en quelque sorte par donner au monde ce? Lire et écrire?
C'est probablement stupide, non? Je ne veux pas que quiconque sur le Web
pour aller visiter ma page et changer quelque chose à ce fichier,
même si elles ne pouvaient pas vraiment avec un fichier HTML,
mais seulement en principe, probablement veux juste qu'ils soient en mesure de le lire.
Qu'est-ce que cela signifie de le lire? Cela ne signifie pas qu'ils vont se soucier de l'HTML réel,
mais le navigateur doit être capable d'analyser que langage de balisage,
de haut en bas, de gauche à droite.
Donc, quelqu'un sur le Web doit être capable de le lire, donc je peu besoin de lui donner r.
Je peux le faire de plusieurs façons différentes, mais peut-être
le plus simple est d'exécuter cette commande ici.
Chmod, changement de mode, alors a + r donc tout à tous, dans le monde + lire,
puis le nom du fichier, search0.html.
>> Et si je fais ls-l nouveau, noter que ce fichier a changé,
et en effet, j'ai allumé r pour tout le monde.
Je l'ai aussi mis en marche pour mon groupe, mais c'est très bien,
parce que si je me suis tourné dans le tout le monde, mon groupe est un sous-ensemble de cela.
Donc, c'est très bien aussi. Cela signifie simplement que l'ordinateur a maintenant rendu lisible.
Maintenant, permettez-moi de revenir à mon navigateur, cliquez sur recharger.
Ah-ha. Nous avons maintenant CS50 Recherche.
J'ai zoomé dans un peu artificiellement - moteur de recherche assez hideux.
Mais nous allons voir si cela fonctionne réellement.
Tout d'abord, permettez-moi de faire un test de cohérence rapide, permettez-moi de contrôler et de visualiser cliquez source de la page.
Notez que dans Chrome nous voyons maintenant le même code HTML que j'ai créé moi-même.
Ne vous trompez pas ici, cependant. Je ne peux pas commencer à changer le code ici,
parce que le navigateur dispose d'une vue en lecture seule de ce code.
Le navigateur vient de demander à l'hôte local pour un fichier appelé search0.html.
Il est maintenant pure coïncidence que l'appareil
se trouve être sur le même ordinateur que mon navigateur.
Je pouvais avoir, de façon équivalente, ont tapé dans www.facebook.com/search0.html,
et si Facebook était un fichier appelé, je serait alors de voir leur code HTML.
Et, bien sûr, je ne peux pas changer le fichier qui revient de Facebook, que ce soit.
Alors maintenant, nous sommes en quelque sorte brouiller les lignes.
L'appareil est à la fois un serveur, servir des pages web,
mais c'est aussi un client dans le sens que je suis en utilisant un navigateur
à réellement parler à ce serveur.
Alors voyons voir si mon moteur de recherche Google fonctionne.
Laissez-moi aller de l'avant et chercher quick brown fox, entrez.
Et voila, j'ai maintenant mon propre moteur de recherche.
>> Mais comment ça marche?
Peu exagéré, mais - et maintenant vous ne pouvez pas voir, précisément, la partie qui est d'intérêt.
Remarquez ce qui se passe.
Notez l'URL. Il s'avère que cette méthode,
appelée obtenir, c'est super simple.
Lorsque vous spécifiez dans une forme que vous souhaitez «faire» les résultats de certains serveurs,
ce qu'il va faire est de prendre tout ce que vous avez tapé dans le formulaire
et le mettre dans l'URL.
Il va normaliser la façon dont il se mettre dans l'URL comme suit.
Notez que ceci est l'URL qui est la valeur de mon attribut action.
C'est là que je voulais le formulaire pour finir.
Mais remarquez ce point d'interrogation.
Il s'agit d'une convention sur le Web de façon à fournir saisie de l'utilisateur
à un site Web, vous devez spécifier l'URL d'un point d'interrogation,
et puis vous avez tout un tas de paires clé-valeur.
Le nom d'une touche, autrement connu en tant que paramètre dans le Web,
alors vous avez un signe égal, alors vous avez la valeur de ce paramètre.
Donc, il s'agit essentiellement d'un nom de variable et une valeur variable,
mais les noms de ceux des variables et des valeurs venue du formulaire HTML.
Pourquoi les points positifs là, pensez-vous?
Parce que je n'ai pas taper + entre mes mots.
[Étudiant, inintelligible]
>> Ouais, c'est juste pour l'espacement. Les chances sont, chaque fois que vous avez vu une URL,
il n'y a jamais eu des espaces, si ce n'est que parce
s'il y avait, on ne pouvait pas vraiment copier et le coller
dans un IM ou dans un courriel, car il allait se briser.
Vous voulez que le tout soit une chaîne de caractères contigus.
>> Ainsi, le navigateur est assez intelligent pour se rendre compte, uh-uh.
Ne vous contentez pas de mettre un espace là-bas. Permettez-moi de coder l'espace d'une certaine façon standard.
L'une des conventions de le faire est d'avoir le navigateur
automatiquement mis a + où vous auriez un espace.
Alors maintenant, avis Google a été un peu conviviaux.
Je n'ai certainement pas créer cette page web,
mais ils ont prérempli leur domaine propre texte
avec ce qui, précisément, j'ai tapé po
Supposons que je veux à la recherche de quelque chose d'autre, comme un chien paresseux.
Je peux simplement taper ceci ici, la re-cherche.
Notez que l'URL change ici,
mais remarque alors que je peux réellement chercher ce que je veux
tout en comprenant comment fonctionnent les URL.
Je pourrais faire chat paresseux, entrez,
et remarquez maintenant, je vais avoir un très paresseux - faut-il? Je me sens comme nous le devrions.
Je reçois un chat très paresseux.
Très bien. C'est l'une des choses les plus stupides que nous avons fait.
Mais c'est un chat paresseux.
Quoi qu'il en soit, ce qui est la clé ici à emporter?
Maintenant, nous sommes en quelque sorte de jouer dans le monde de HTTP.
HTML est juste ce langage de balisage, balise ouverte, balise de fermeture,
qui indique au navigateur comment afficher du contenu sur une page Web.
Mais quand vous commencez la transmission de données sur Internet
entre le navigateur et le serveur, c'est là que ce protocole
connu sous le nom HyperText Transfer Protocol prend le relais.
C'est le genre de convention humaine, quand Sam et j'ai serré la main lundi,
à partir d'une connexion, puis la fermeture d'une connexion, même idée ici.
Comment les résultats de Google me revient?
Comment mon formulaire de soumission aller sur Google?
Eh bien, rappelle l'autre jour que ce qui se passe réellement
sous le capot lorsque vous demandez une page web est,
votre navigateur envoie un message quelque peu cryptique comme
GET / HTTP/1.1 pour la page d'accueil par défaut.
>> Ou, dans ce cas, parce que j'ai spécifiquement demandé plus tôt
search0.html, ce serait alors le message quelque peu cryptique
que mon navigateur envoie à l'appareil.
Ou, dans ce cas de Google, ce qui est réellement envoyé
est une requête pour / de recherche, et alors? q = chat paresseux, avec un plus bas.
Donc, ce message, que je suis l'homme, je ne suis jamais taper,
mais est envoyé par mon navigateur, voici comment se passe HTTP.
C'est l'équivalent de nos mains après avoir secoué.
Il s'agit de la demande, et le serveur est sur le point d'envoyer une réponse.
Donc, nous allons jeter un oeil à ce sous le capot.
Comme précédemment, nous pouvons ouvrir ce domaine particulier dans un navigateur.
Voir page, inspecter des éléments.
Ainsi, sous l'inspection élément, vous remarquerez que ce qui s'est passé dans Chrome,
et IE et Firefox ont des mécanismes similaires,
nous avons ces outils de développement qui nous sont accessibles.
Les gens normaux ne pas utiliser ces onglets.
Mais nous, maintenant, sont intéressés par ce qui se passe
sous le capot au niveau du réseau.
Donc, si je m'arrête au niveau du réseau ici,
laissez-moi aller de l'avant et d'élargir cette fenêtre,
ouvrir cette entrée ici, et regardez les en-têtes.
Donc ce qui arrive lorsque je demande un fichier à partir d'un serveur Web
est mon navigateur envoie tout un tas de choses.
Et laissez-moi voir la source. Ainsi, en vertu têtes de la requête,
Et ce n'est que Chrome me montrant une sortie de diagnostic,
un peu comme un débogueur de quelque sorte,
remarquerez que ce que j'ai souligné ici, c'est précisément ce que
Chrome envoie au serveur pour demander un fichier appelé search0.html.
Il est révélateur du serveur ce qu'il pense est son nom,
Grâce à ce domaine du côlon hôte, puis il ya une certaine
trucs assez ésotérique ici, comme quelque chose à voir avec les dates et heures,
quelque chose à voir avec les langues que le navigateur comprend,
mais les lignes sont vraiment importantes ces deux premiers ici.
>> Qu'est-ce que le serveur répond avec? Eh bien, si nous défiler vers le bas ici
et voir la source de cette chose, notez que le serveur
a répondu avec un message quelque peu abscons ainsi, 304 non modifiés.
C'est un peu étrange, permettez-moi de vraiment essayer de résoudre ce problème.
Laisse-moi tenir la touche MAJ enfoncée et cliquez sur recharger ici
pour forcer le navigateur pour effectivement faire cette demande pour la première fois.
Alors laissez-moi un zoom avant, et nous allons voir maintenant que le serveur de réponse,
parce que je tenais quart de travail, est de 200 OK.
Donc, vous avez probablement jamais vu le numéro 200
en nombre du contexte de l'Internet, mais ce
avez-vous vu parfois de manière inattendue un serveur?
404, fichier non trouvé, 403, interdit, 500, erreur de serveur.
Donc, il ya ces codes numériques que le monde utilise dans le Web
pour signifier des erreurs, tout comme les fonctions C
peut retourner des erreurs et principal peut retourner des codes de sortie.
200, cependant, on voit rarement parce que cela signifie que tout va bien.
Et 304 vous n'avez probablement jamais voir parce que ce qui est le signifiant?
Que rien n'a - nous allons voir si nous pouvons simuler ce nouveau -
Oh, ce n'est pas coopérant. 304 dit pas modifié,
alors pourquoi le serveur a été encore répondre?
Eh bien, pour une efficacité, un serveur Web automatiquement pour vous,
si le fichier n'a pas changé, il ne sera pas retransmettre l'intégralité du fichier HTML.
Il vous reste plus qu'à indiquer au navigateur qu'il n'a pas changé.
Il suffit d'utiliser la copie que vous avez déjà.
Donc, il ya cette notion de mise en cache sur le Web
de la performance, de sorte que vous ne perdez pas de temps et de bande passante déchets
téléchargement de fichiers encore et encore inutilement.
>> Mais cette page web, maintenant, était super simple,
et il ne montre que le HTML qui est revenue.
Nous allons en fait utiliser l'onglet réseau maintenant pour faire une recherche Google comme quick brown fox.
Permettez-moi puis cliquez CS50 recherche,
et maintenant, vous remarquerez en bas ici tout un tas de choses revient
parce que quand je visite un site réel, comme Google.com,
ils ont des images, ils ont écrit, ils ont un langage appelé JavaScript là.
Ainsi, chaque ligne de ce tableau ici-bas
représente quelque chose que Google cracher en réponse à ma demande unique.
La je me soucie, mais, est-ce la première.
Et si je vais à la recherche, demande, cliquez ici voir la source,
constater que, en effet, le message énigmatique que mon navigateur a envoyé
Google a ces deux lignes ici,
suivie de quelques informations arcanes ici que nous allons ignorer pour l'instant.
Mais notez aussi que Chrome est très pratique avec,
il est aussi en me montrant la chaîne de requête qui a été envoyé en
Ainsi, plutôt que de me montrer ce qui a été littéralement envoyé,
si je le voir décodé, Chrome, uniquement à des fins de débogage,
pour les développeurs comme nous, c'est juste en me montrant une version conviviale des -
ce n'est pas la façon dont vous épeler le renard, apparemment.
Je suis juste remarquer à présent - mais c'est ce que je vous montre, apparemment, dactylographiée.
Pendant ce temps, la réponse qui est revenue sur le serveur est de nouveau 200 OK.
Mais inclus dans cette réponse, bien sûr,
si l'on fait voir HTML de la page -
désolé, c'est un peu raccourci clavier qui a mal tourné aujourd'hui.
>> Je m'occuperai de cela plus tard. Donc, si nous avons effectivement voir la source de la page,
que je peux faire ici en cliquant réponse,
c'est ce qui a été fait recracher, en plus de celle cryptique 200 message OK à partir du serveur.
Un peu cryptique, mais où est tout cela vient-il?
Eh bien, nous allons faire autre chose ici. Une autre commande un peu cryptique,
mais un peu celui de soigné en ce qu'elle nous révèle exactement ce qui se passe sous le capot.
Donc, je suis de retour sur mon Mac ici, j'ai connecté
par l'intermédiaire d'un programme appelé SSH, Secure Shell, vers un autre serveur
parce que la plupart des ordinateurs de Harvard bloquer la commande que nous sommes sur le point de lancer
parce qu'il ya cette commande sur certains serveurs traceroute appelé
qui vous permet de suivre la route entre les points a et b,
et jusqu'à présent nous avons été complètement prise pour acquis
que je peux taper dans Google.com et en quelque sorte récupérer des données
de l'autre bout du pays ou à l'autre bout du monde.
Avec traceroute nous pouvons plonger dans un peu plus
quant à la façon dont l'Internet fonctionne, et voir ce qui se passe sous le capot.
Donc, nous allons aller de l'avant et arbitrairement tracer une route à, disons, Stanford.edu,
qui est dans tout le pays, et appuyez sur Entrée.
Cette commande peut être ultra-rapide ou super-lente,
mais ce que nous voyons maintenant, ligne par ligne,
est chacune des étapes ou de houblon entre nous et Palo Alto, ou Stanford,
où ils ont leur serveur web.
Alors qu'est-ce que chacune de ces lignes représentent plus concrètement, si?
Un morceau de jargon de l'Internet? [Étudiant, inintelligible]
>> Qu'est-ce que c'est? [Étudiant, inintelligible]
>> Oh, il ya des moments, mais qu'est-ce que chaque rangée - qu'est-ce que je veux dire par-hop?
>> Eh bien, il ya ces choses sur Internet appelés routeurs.
Et routeurs, comme son nom l'indique, l'information itinéraire à partir du point a au point b.
Mais il ya plusieurs points au-delà de a et b.
Il est c et d, e et f entre la ligne 1,
qui se trouve être l'adresse IP de mon ordinateur,
ou mon adresse numérique qui identifie de manière unique mon ordinateur,
et l'étape 15, qui est en fait le serveur web sixième,
apparemment, que je inférer de ceci, ou la version 6 de son serveur web à Stanford.
Mais ce qui est plutôt drôle, c'est que nous pouvons voir le chemin
que mon 0 et 1 sont la prise de mon ordinateur à Stanford.
Ainsi, l'étape 1 est l'adresse de mon propre ordinateur.
Chaque ordinateur connecté à l'Internet possède un identifiant unique qui ressemble à ceci.
Number.number.number.number.
Quelque part sur ce campus, probablement dans le centre de la science,
est un routeur appelé passerelle Core 2-te83, quoi que cela signifie,
c'est donc l'un des grands routeurs de Harvard fantaisie qui achemine une grande partie de leur trafic.
Voici une autre de routeurs de Harvard, celui-ci est Border Gateway,
sens frontière, c'est probablement à la périphérie du campus quelque part.
Ensuite, il ya nox une, ligne 4, qui est Carrefour du Nord,
qui est un grand fournisseur d'accès Internet, fournisseur de services Internet,
que des endroits comme Harvard connecter jusqu'à.
Mais alors les choses deviennent un peu plus intéressant à la ligne 6.
Où sont mes morceaux tout d'un coup? Kansas.
Le monde a l'habitude d'utiliser des codes d'aéroport dans beaucoup de ces choses,
ou au moins des abréviations pour les États ou villes,
de sorte qu'il ressemble, en seulement 60 ms,
un paquet d'informations, 0 et 1 au niveau de mon ordinateur portable
eu tout le chemin vers le Kansas, et encore une fois, en 60 ms.
>> Par ailleurs, après le Kansas, ils ont pris un tour à travers Houston, probablement,
comme le suggère le nom de ce serveur.
Ainsi, tout comme un serveur sur Internet doit avoir une adresse numérique,
il peut aussi, éventuellement, avoir une adresse un peu plus humaine de l'environnement que les humains ont proposé.
Maintenant, à l'étape 8, nous ne savons pas ce que c'est.
Parfois, les routeurs juste aimable à vous ignorer,
et ils n'ont tout simplement pas répondu aux questions, c'est très bien.
L'un après l'étape 8 est apparemment où? L.A.
Notez que dans seulement 78 ms, ce qui nous prend des êtres humains comme 6 + heures pour faire physiquement,
prend des paquets d'information sur l'Internet 78 ms pour voyager aussi loin.
Etape 10 est à Los Angeles ainsi, et l'étape 11 semble avoir disparu au nord, jusqu'à près de Stanford.
Il s'agit de leur routeur de bordure, ou un routeur frontière.
Quelques étapes de Stanford qui nous ignorent,
et enfin, nous atteignons le serveur Web en seulement 87 ms.
Maintenant, tous ces chiffres, soit dit en passant,
juste vous dire combien de temps il faut pour que les données à obtenir de moi
à chacun de ces routeurs, et ce n'est pas cumulatif.
Qu'est-ce que ce programme ne sont, il envoie d'abord un message, pour l'essentiel, au premier routeur.
Puis une seconde au routeur, puis une troisième au routeur,
mesurer à chaque fois. Donc, en théorie, ces moments seront de plus en plus
ou au moins très proches l'une de l'autre,
et, en effet, ceux qui sont ici sur le campus sont de très petite taille.
Dès que vous commencez à aller à travers le pays, il faut des données
un peu plus de temps pour voyager, près de 100 ms, donner ou prendre.
Mais allons l'autre sens maintenant. Que diriez-vous l'Université de Cambridge au Royaume-Uni?
Permettez-moi, au lieu de fonctionner traceroute de www.cam de Cambridge,
. Ca pour les universitaires,. Fr, ici et appuyez sur Entrée.
C'était sacrément rapide.
Mes données littéralement allé à Cambridge, en Angleterre, dans cette fraction de seconde de temps.
>> Voyons donc le chemin qu'il a pris.
Harvard, Harvard, Harvard, Carrefour du Nord,
qui est un FAI, et alors c'est Carrefour du Nord, et puis bam.
Qu'est-ce que, entre les étapes 6 et 7, 6 et 7 du routeur?
L'océan Atlantique. Et nous déduire ceci du fait que
nous passons de 20 ms à 80 ms ici là.
Donc, quelque chose a 60 ms, donner ou prendre, pour obtenir plus.
Et ce fut sans doute un grand corps d'eau.
Ce qui se passe après? Eh bien, nous voici à Londres,
seulement 88 ms plus tard. Plus London, Londres plus,
ne savez pas où c'est, mais nous allons supposer que c'est en dehors de Londres,
Cambridge ici, et finalement nous - littéralement, Université de Cambridge
. Something.net, et puis, finalement, à la ligne 16,
leur serveur Web est apparemment appelé Scorpius
sous le capot, même si nous savons que c'est www.
Sorte de mind-blowing, je pense. La première fois que j'ai fait cela, il totalement soufflé mon esprit.
Malheureusement, Harvard bloque ce type de trafic, en général, sur le réseau.
Donc, vous ne pouvez pas le faire super-facile.
Réaliser, cependant, ce n'est ici possible.
Très bien. Prenons notre 5 minutes de pause ici. Nous reviendrons et de se plonger plus profondément.
Donc, nous sommes de retour et nous avons chevauché genre de propos dans quelques directions différentes ici.
Donc, résumons exactement ce qui se passe ici.
Nous avons commencé la conversation parle cette langue appelé HTML.
Encore une fois, pas un langage de programmation. C'est juste un langage de balisage
c'est en grande partie sur l'esthétique et la structuration du contenu sous la forme d'une page Web.
Mais HTML, par conséquent, besoin d'une sorte de mécanisme de
pour les déplacements entre le navigateur et le serveur.
HTML donc sorte de tours au-dessus de cette autre langue,
ou, plus exactement, un protocole, appelé protocole HTTP.
>> Et HTTP, comme nous l'avons vu jusqu'ici,
est une sorte de semblable à cette convention de serrer la main de l'homme.
Lorsqu'un navigateur veut demander une page à partir d'un serveur,
il envoie cette «get» demande à partir du navigateur au serveur,
puis le serveur répond avec un nombre comme 200, tout va bien,
ainsi que le code HTML ou un mauvais numéro, comme 404, fichier non trouvé.
Mais en attendant, HTTP lui-même n'est pas l'Internet, en tant que tel.
HTTP est un simple service, une caractéristique de l'Internet
un peu comme le chat G est un autre service, un peu comme e-mail est un autre service.
Il ya toutes sortes de choses que nous pouvons faire sur Internet.
HTTP est juste une de ces applications.
Donc, en plus de - HTTP est au-dessus de quelque chose d'autre
que nous n'avons pas mentionné par son nom, vous avez pu entendre de par son nom, le protocole TCP / IP.
Donc l'histoire que nous venons de dire il est tout au sujet
comment les données se déplace du point a au point b.
Et dans ce cas, nous l'avons vu à un niveau très bas
routeur à routeur à routeur à routeur,
comment les données sont réellement en cours de transmission.
Mais en chemin, il va rencontrer des obstacles différents.
En dehors de ces routeurs, il ya ce qu'on appelle les pare-feu sur l'Internet,
et ainsi de données, comme celle dont nous venons de transmission
de moi à Stanford, de moi à Cambridge,
est envoyé, à ce niveau, quelque chose qui s'appelle une adresse IP.
Nous l'avons vu tout à l'heure, et une adresse IP
est une adresse numérique de la forme w.x.y.z,
où chacun d'eux est entre les deux, plus ou moins, 0 et 255,
si vous ne pouvez pas tout à fait utiliser tous ces chiffres.
Mais chacun de ces espaces réservés est un nombre entre 0 et 255.
Ainsi, une adresse IP de nos jours est de 32 bits.
>> Maintenant, cela nous donne des adresses IP combien possible dans le monde?
Environ 4 milliards de dollars, parce que chaque fois que nous comptons en puissances de 2
tout le chemin jusqu'à 32 de quelque chose, qui donne habituellement nous 4 milliards.
C'est donc un grand nombre d'adresses IP, mais vous auriez pu lire,
ou vous pouvez maintenant constater dans la presse populaire,
une poussée vers une nouvelle version d'IP appelée IPv6.
À l'heure actuelle, nous utilisons la version 4.
Il n'a pas vraiment été une version 5, nous sommes juste de sauter à droite à 6.
La version 6 va utiliser 128 bits pour les adresses IP, ce qui est freaking énorme.
Nous ne devrions pas manquer pour un certain temps maintenant,
mais nous avons commencé à manquer d'adresses IP version 4,
parce que nous avons tous des choses non seulement comme les ordinateurs portables et ordinateurs de bureau,
beaucoup d'entre nous ont des téléphones, beaucoup d'entre nous ont d'autres appareils
comme TiVo et autres, qui ont des adresses IP eux-mêmes.
Harvard a elle-même des dizaines de milliers d'ordinateurs.
Ainsi, le monde est vraiment à court d'adresses IP, du moins de ce formulaire.
Ainsi, au cours des prochaines années, vous allez voir les adresses
sur vos propres ordinateurs probablement changer lentement
que les sociétés de plus en plus et les universités commencent à soutenir la nouvelle version.
Mais une adresse IP n'est pas suffisante pour l'ordinateur d'un à demander des données à l'ordinateur b.
Parce que l'ordinateur b peut être un serveur,
et un serveur, comme je l'ai mentionné plus tôt, peut faire des bouquets de choses.
Il peut héberger des pages Web, il peut être un serveur de messagerie,
il peut s'agir d'un serveur Skype, il peut être un serveur de chat G.
>> Tous ces différents services qui peuvent être fournis sur un serveur
pourrions tous, physiquement, être sur la même machine.
Donc, en plus des adresses IP,
le monde a des choses appelées ports sur l'Internet.
Un port est juste un nombre, donc il ya un numéro unique pour le protocole HTTP.
Son numéro est le 80.
HTTP utilise également le numéro 443, mais plus précisément, pour HTTPS cryptées.
Lorsque vous voyez l'art, pour sûr, ça aide un nombre différent.
Il ya d'autres chiffres, comme 25, utilisés pour quelque chose appelé SMTP, autrement connu comme email.
Il ya quelque chose qui s'appelle 22 pour SSH,
et il ya tout un tas d'autres ports sur le marché.
Maintenant, nous, les humains voient rarement ces chiffres.
Toutefois, lorsque vous tapez une adresse de type http://www.facebook.com,
le navigateur est secrètement insertion 80, parce que vous utilisez le protocole HTTP.
Si vous, en revanche, de type HTTPS, il est secrètement insertion 443.
Et nous pouvons voir ce genre de main si je tire un brower
et aller à http://www.facebook.com:80.
Par conséquent explicitement en invoquant non seulement le nom du site
mais le port que je veux parler, et appuyez sur Entrée.
Notez qu'il disparaisse, parce que le navigateur suppose,
oh, 80, je ne vais même pas prendre la peine de vous montrer que.
Mais la raison en est que si je voulais envoyer un e-mail à quelqu'un,
Je voudrais vraiment être leur envoyant sur le port 25, qui est SMTP.
Un peu d'une simplification excessive, mais certains d'entre vous ont des amis
qui travaillent effectivement sur Facebook, et ils, de même, avoir des serveurs qui reçoivent un courriel.
>> Chaque fois que vous envoyez un e-mail, gmail ce qui est fait pour vous
ou Outlook ou n'importe quel programme que vous utilisez,
c'est une sorte de secret d'insérer ce numéro ainsi, 25 ans, dans ce cas.
C'est cette combinaison d'adresse IP et le numéro qui identifie de manière unique
un ordinateur connecté à Internet et d'un service spécifique sur cet ordinateur.
Maintenant, bien sûr, la plupart d'entre nous n'ont probablement jamais tapé manuellement une adresse IP.
Peut-être que vous avez dans l'appareil, mais dans le monde réel, pas tellement.
Pourquoi ne pas saisir les adresses IP dans les navigateurs?
Il travaillerait, en effet, nous pouvons voir cela; laissez-moi vous montrer
une commande autre qui devrait fonctionner presque partout sur le campus de Harvard sur un Mac ou un PC.
Il ya cette commande nslookup appelé, recherche serveur de noms.
Si je lève les yeux www.cnn.com, il s'avère que CNN a - oh, intéressant.
CNN a commencé à utiliser Amazon Web Services.
Vous savez peut-être du cloud computing, l'un d'Amazon des grands acteurs de l'informatique en nuage.
Ce que je viens n'a été, j'ai dit: «Donnez-moi l'adresse du serveur web de CNN,"
mais il s'avère que le serveur web de CNN est géré par Amazon,
Amazon Web Services, ce qui suggère.
Et l'adresse de serveur qui est ici présent.
Donc, je ne sais pas si cela va fonctionner, parce qu'ils n'ont pas l'habitude d'utiliser Amazon.
Mais nous allons essayer cela; http://, adresse IP, entrez, et -
est ce que ça va fonctionner?
Oui. Il va travailler. Internet est super lent aujourd'hui.
Mais, dans un moment, vous verrez une histoire de nouvelles.
Nous y voilà. Bank of America est poursuivi en justice. Très bien.
>> C'est parce que cette adresse IP se trouve juste en synonyme de www.cnn.com.
Bien sûr, il serait commercialisation horrible à dire, visitez notre site Internet à l'adresse 50.112.94.127.
Vous n'auriez jamais se souvenir. Ainsi, même de nos jours vous pouvez vous rappeler des choses
comme 1-800-COLLECT ou mnémoniques dans le monde est venu avec des numéros de téléphone.
Qui, avant que les téléphones cellulaires, ont été plutôt difficile de se rappeler
jusqu'à ce que vous pouvez simplement taper et oubliez-le.
Ainsi, le Web, elle aussi, cette convention des noms et des adresses IP,
et il ya ces choses là-bas appelé serveurs DNS,
domaine des systèmes de serveurs de noms, qui traduisent les adresses IP en noms et vice-versa.
C'est donc ce qui se passe sous le capot.
En fin de compte, nous avons TCP / IP, qui est le protocole de très bas niveau
que, vraiment, obtient juste des 0 et des 1 à travers l'Internet,
et il le fait en les mettant dans une enveloppe virtuelle,
si vous voulez, et de l'écriture à l'extérieur de l'enveloppe
l'adresse IP de la destination, ainsi que le numéro de port numérique
du service sur cette destination qu'il veut parler.
Pendant ce temps, sur l'enveloppe, il ya aussi quelque chose de connu comme adresse de retour,
qui est votre adresse IP, de sorte que lorsque CNN reçoit un paquet d'informations de votre part,
ouvre cette enveloppe virtuelle, veille à ce que vous voulez que la page d'accueil,
elle sait à partir de la partie qui envoie cette enveloppe virtuelle qui envoyer le dos HTML.
Donc, nous allons jeter un coup d'oeil à cela en détail un peu plus.
Il s'agit d'une compagnie appelée Ericson, de quelques années en arrière.
Et ils ont pris quelques libertés avec la façon dont l'Internet fonctionne réellement,
mais elle donne une image beaucoup plus visuelle que la craie simple ici.
Donc, je vous donne "Un peu de l'Internet."
>> [Narrateur] Pour la première fois dans l'histoire,
les personnes et les machines travaillent ensemble, réaliser un rêve.
A force unificatrice qui ne connaît pas de frontières géographiques.
Sans distinction de race, de croyance ou de couleur.
Une nouvelle ère où la communication apporte vraiment les gens.
C'est
L'aube de l'Internet.
Vous voulez savoir comment cela fonctionne? Cliquez ici pour commencer votre voyage dans le Net.
Maintenant, c'est exactement ce qui s'est passé lorsque vous avez cliqué sur ce lien?
Vous avez commencé un flux d'informations.
Cette information se déplace vers le bas dans votre salle de courrier personnel
où les paquets IP Mr. il, il marque, et l'envoie sur son chemin.
Chaque paquet est limité dans ses dimensions.
La salle du courrier doit décider comment diviser les informations
et comment l'emballer.
Maintenant, le paquet a besoin d'une étiquette contenant des informations importantes
telles que l'adresse de l'expéditeur, l'adresse du destinataire, et le type de paquet, il est.
Parce que ce paquet particulier est de sortir sur Internet,
il obtient également une adresse pour le serveur proxy,
qui a une fonction particulière, comme nous le verrons plus tard.
Le paquet est maintenant lancé sur votre réseau local ou LAN.
Ce réseau est utilisé pour connecter tous les ordinateurs locaux »
routeurs, imprimantes, etcetera, pour l'échange d'informations entre les murs physiques de l'immeuble.
Le LAN est un endroit assez sauvage, et, malheureusement,
les accidents peuvent arriver.
La route de la LAN est emballé avec toutes sortes d'informations.
Ce sont des paquets IP, Novell paquets, paquets AppleTalk.
Ils vont à l'encontre de la circulation, comme d'habitude.
Le routeur local lit l'adresse et, le cas échéant,
soulève le paquet à un autre réseau.
Ah, le routeur. Un symbole de contrôle dans un monde apparemment désorganisé.
[Routeur marmonnant et en parlant à lui-même]
>> [Narrateur] Il est là, systématique, insensible, méthodique,
conservatrice, et parfois pas tout à fait à la hauteur.
Mais au moins, il est exact, la plupart du temps.
Comme les paquets quittent le routeur, ils font leur chemin dans l'Internet d'entreprise
et la tête pour le commutateur routeur.
Un peu plus efficace que le routeur, le commutateur routeur joue double jeu avec les paquets IP,
habilement les acheminer sur leur chemin.
Un «Pinball Wizard,« numérique si vous voulez.
[Switch routeur parlant à lui-même]
[Narrateur] Lorsque les paquets arrivent à destination,
ils sont captés par l'interface réseau,
prêts à être envoyés à l'étape suivante.
Dans ce cas, la procuration.
Le proxy est utilisé par de nombreuses entreprises comme une sorte d'un homme d'âge
afin de réduire la charge sur la connexion Internet
et pour des raisons de sécurité, aussi bien.
Comme vous pouvez le voir, les paquets sont tous de tailles différentes en fonction de leur contenu.
Le proxy ouvre le paquet et recherche l'adresse Web ou URL.
Selon que l'adresse est acceptable,
le paquet est envoyé à l'Internet.
Il ya, cependant, quelques adresses qui ne répondent pas à l'approbation de la procuration.
C'est-à-dire, directives de l'entreprise ou de la gestion.
Celles-ci sont traitées sommairement.
Nous aurons rien de tout cela.
Pour ceux qui le font, c'est sur la route.
>> Prochaine étape, le pare-feu.
Le pare-feu d'entreprise sert à deux fins.
Il empêche certaines choses plutôt désagréables de l'Internet de venir pour l'Intranet,
et il peut également empêcher informations sensibles des entreprises ne soient transmises sur Internet.
Après avoir traversé le pare-feu, un routeur ramasse le paquet
et le place sur une route beaucoup plus étroite, ou de bande passante, comme on dit.
De toute évidence, la route n'est pas assez large pour tous.
Maintenant, vous demandez peut-être ce qui arrive à tous les paquets qui ne le font pas en cours de route.
Eh bien, quand M. IP ne reçoit pas un accusé de réception
qu'un paquet a été reçu en temps voulu,
il envoie simplement un paquet de remplacement.
Nous sommes maintenant prêts à entrer dans le monde de l'Internet.
Une toile d'araignée de réseaux interconnectés qui couvrent tout le globe entier.
Ici, les routeurs et les commutateurs d'établir des liens entre les réseaux.
Maintenant, le Net est un environnement totalement différent de celui que vous trouverez
l'intérieur des murs de protection de votre réseau local.
Ici, c'est le Far West.
Beaucoup d'espace, beaucoup de possibilités,
beaucoup de choses à explorer et endroits à visiter.
Merci à très peu de contrôle et de régulation,
trouver de nouvelles idées sol fertile de repousser les limites de leurs possibilités.
Mais à cause de cette liberté, certains dangers se cachent aussi.
Vous ne savez jamais quand vous allez rencontrer le ping de la mort redoutée,
une version spéciale d'une table de ping requête normale,
un idiot qui pensait jusqu'à gâcher hôtes sans méfiance.
Le chemin de nos paquets prennent peut-être par satellite,
lignes téléphoniques, sans fil ou câblés voire transocéaniques.
Ils ne prennent pas toujours les itinéraires les plus rapides ou plus court possible,
mais ils vont y arriver un jour.
Peut-être que c'est pourquoi il est parfois appelé «Le World Wide Wait».
Mais quand tout fonctionne sans heurts,
vous pouvez contourner le monde cinq fois plus à la baisse d'un chapeau, littéralement.
Et tout cela pour le coût d'un appel local ou moins.
Vers la fin de notre destination, nous allons trouver un autre pare-feu.
>> En fonction de votre point de vue comme un paquet de données,
le pare-feu pourrait être un bastion de la sécurité ou un adversaire redoutable.
Tout dépend de quel côté vous vous trouvez et quelles sont vos intentions.
Le pare-feu est conçu pour laisser passer uniquement les paquets qui répondent à ses critères.
Ce pare-feu fonctionne sur les ports 80 et 25.
Toutes les tentatives pour entrer par d'autres ports sont fermés au public.
Le port 25 est utilisé pour les paquets de courrier,
tandis que le port 80 est l'entrée de paquets à partir de l'Internet vers le serveur Web.
A l'intérieur du pare-feu, les paquets sont examinés de manière plus approfondie.
Certains paquets de le faire facilement à travers les douanes,
tandis que d'autres cherchent juste un peu douteuse.
Maintenant, l'agent pare-feu n'est pas dupe,
notamment lorsque cela ping de la mort paquet essaie de se faire passer pour un paquet ping normal.
[Officier de pare-feu parler aux paquets]
[Narrateur] Pour les paquets qui ont la chance de le faire jusque-là,
le voyage est presque terminée.
C'est juste une ligne sur l'interface à prendre place sur le serveur Web.
De nos jours, un serveur Web peut fonctionner sur beaucoup de choses,
à partir d'un ordinateur central à une webcam à l'ordinateur de votre bureau.
Pourquoi pas votre frigo?
Avec la bonne configuration, vous pouvez savoir si vous avez l'étoffe
pour Poulet cacciatore, ou si vous devez aller faire du shopping.
Rappelez-vous, c'est l'aube du net.
Presque tout est possible.
Un par un, les paquets sont reçus,
ouvert, et déballé.
Les informations qu'ils contiennent, c'est-à votre demande de renseignements,
est envoyé sur le serveur d'applications Web.
Le paquet lui-même est recyclé,
prêt à être utilisé à nouveau, et rempli avec vos informations demandées,
adressé et envoyé sur son chemin de nouveau à vous.
Retour passé le pare-feu, des routeurs, et le moyen de l'Internet.
Retour à travers votre pare-feu d'entreprise
et sur votre interface,
prêt à fournir votre navigateur avec les informations que vous avez demandé.
Autrement dit, ce film.
Satisfaits de leurs efforts, et faire confiance à un monde meilleur,
nos paquets de données fidèles rouler hors béatement dans le coucher du soleil du jour suivant,
sachant pertinemment qu'ils ont servi leurs maîtres bien.
Maintenant, n'est-ce pas une fin heureuse?
[Malan] Bon, ça suffit. Nous vous verrons la semaine prochaine.
[CS50.TV]