1
00:00:00,000 --> 00:00:02,620
[Powered by Google Translate] [Semaine 7, suite]

2
00:00:02,620 --> 00:00:05,090
[David J. Malan, Université de Harvard]

3
00:00:05,090 --> 00:00:07,780
[C'est CS50.] [CS50.TV]

4
00:00:07,780 --> 00:00:09,810
Très bien. Welcome Back. C'est CS50,

5
00:00:09,810 --> 00:00:12,100
et c'est la fin de la semaine 7.

6
00:00:12,100 --> 00:00:15,460
Ainsi, l'une de ces petites choses stupides qui va autour de l'Internet

7
00:00:15,460 --> 00:00:24,080
et nous slurped en place, et il faut maintenant faire un peu de bon sens geek pour vous.

8
00:00:24,080 --> 00:00:28,330
Eh bien, c'était drôle à ce mec qu'elle ne l'était à vous les gars.

9
00:00:28,330 --> 00:00:32,619
En parlant de, eh bien, les gars,

10
00:00:32,619 --> 00:00:42,550
Aujourd'hui, c'est l'anniversaire de Nate.

11
00:00:42,550 --> 00:00:46,630
Pour vous donner une idée à quel point une bonne Nate et moi-même sommes

12
00:00:46,630 --> 00:00:50,140
au développement web basée sur la classe de lundi et basé aujourd'hui à ce sujet,

13
00:00:50,140 --> 00:00:53,170
Je pensais tirer vers le haut la page d'accueil de Nate, si vous ne l'avez pas encore vu.

14
00:00:53,170 --> 00:00:57,020
Ce code HTML ici ia Nate.

15
00:00:57,020 --> 00:00:59,380
Alors voir son code source si vous voulez voir comment faire cela, et Nate,

16
00:00:59,380 --> 00:01:02,250
si nous pouvions vous embarrasser brièvement, le personnel a un petit quelque chose

17
00:01:02,250 --> 00:01:06,080
si vous souhaitez partager un dessert avec certains des enfants de la classe ici.

18
00:01:06,080 --> 00:01:10,150
Si vous voulez allez vers le bas.

19
00:01:10,150 --> 00:01:14,350
Vous avez tous applaudissent et sont très gentils, mais personne n'est assis n'importe où près de Nate,

20
00:01:14,350 --> 00:01:17,560
pour une raison quelconque, dans cette zone arrière.

21
00:01:17,560 --> 00:01:24,020
Alors peut-être vous pouvez trouver des gens à profiter de ceux-ci avec.

22
00:01:24,020 --> 00:01:33,380
Joyeux anniversaire, Nate.

23
00:01:33,380 --> 00:01:37,660
>> Bonjours supplémentaires: Nous avons montré un clips en couple de nos étudiants CS50x.

24
00:01:37,660 --> 00:01:39,710
Si vous souhaitez voir qui d'autre est dans le monde

25
00:01:39,710 --> 00:01:41,850
qui a suivi jusqu'ici, vous pouvez vous diriger vers cette adresse URL,

26
00:01:41,850 --> 00:01:45,780
où Joseph, l'un de nos FO, a mis en place un montage de toutes sortes

27
00:01:45,780 --> 00:01:50,290
de tous ceux qui ont été soumis ces vidéos, dont Rick Astley.

28
00:01:50,290 --> 00:01:53,010
Et si vous faites défiler ceux-ci, c'est vraiment très inspirant

29
00:01:53,010 --> 00:01:56,890
de voir la diversité des pays et des villes à partir de laquelle les gens sont venus.

30
00:01:56,890 --> 00:02:00,830
Donc, si vous voulez jeter un oeil à ce que sera en place jusqu'à la fin du semestre.

31
00:02:00,830 --> 00:02:05,370
Aujourd'hui, nous continuons notre regard sur le Web, la programmation web, HTML et autres,

32
00:02:05,370 --> 00:02:08,280
et nous avons aussi le déjeuner à venir ce vendredi

33
00:02:08,280 --> 00:02:11,360
si vous le souhaitez, et en particulier, n'ont pas fait avant.

34
00:02:11,360 --> 00:02:13,630
Thème de ce vendredi sera l'anniversaire de Nate,

35
00:02:13,630 --> 00:02:15,700
si vous souhaitez mettre un déjeuner d'anniversaire avec Nate

36
00:02:15,700 --> 00:02:17,500
et d'autres, certains de nos amis de l'industrie,

37
00:02:17,500 --> 00:02:19,300
s'il vous plaît tête à cette URL là-bas.

38
00:02:19,300 --> 00:02:22,510
L'espace, comme toujours, est limitée. En outre, si vous avez oublié,

39
00:02:22,510 --> 00:02:26,460
se rendre compte que la semaine prochaine est la date limite pour le problème mis en chasse au trésor 4'S,

40
00:02:26,460 --> 00:02:30,070
lequel après avoir récupéré l'ensemble de ces fichiers JPEG à partir card.raw,

41
00:02:30,070 --> 00:02:32,880
vous et vos camarades de section, si vous le souhaitez, pouvez essayer de photographier

42
00:02:32,880 --> 00:02:36,100
plus grand nombre de chercheurs en informatique de cette carte mémoire que possible,

43
00:02:36,100 --> 00:02:39,070
et vous et votre section sera ensuite gagner un prix fabuleux.

44
00:02:39,070 --> 00:02:44,470
Reportez-vous à pset 4 du cahier des charges de ce qu'il faut présenter et à quel moment.

45
00:02:44,470 --> 00:02:47,650
Aussi, si vous souhaitez avoir votre ouvrage immortalisé

46
00:02:47,650 --> 00:02:51,400
sur le site Web du cours et son histoire du vêtement,

47
00:02:51,400 --> 00:02:54,010
sachez que vous êtes les bienvenus maintenant pour commencer à soumettre dessins

48
00:02:54,010 --> 00:02:57,180
pour cette année, T-shirts et sweat-shirts et autres.

49
00:02:57,180 --> 00:02:59,200
Nous ferons de notre mieux pour inclure autant que nous le pouvons,

50
00:02:59,200 --> 00:03:01,440
mais nous avons quelques membres du personnel examine tous les dessins

51
00:03:01,440 --> 00:03:04,180
afin de s'assurer qu'ils sont conformes aux spécifications,

52
00:03:04,180 --> 00:03:07,500
et nous avons ensuite prendre généralement une poignée d'entre eux à être exposés.

53
00:03:07,500 --> 00:03:10,620
Donc, si vous êtes le type de construction, il suffit de savoir que les exigences

54
00:03:10,620 --> 00:03:14,030
pour les graphiques PNG sont, au moins 200 DPI,

55
00:03:14,030 --> 00:03:16,520
ils ne doivent pas être plus de 4000 x 4000 pixels,

56
00:03:16,520 --> 00:03:19,010
et pas plus de 10 Mo, mais vous êtes les bienvenus pour utiliser des choses comme

57
00:03:19,010 --> 00:03:22,430
Photoshop ou GIMP ou divers programmes graphiques, les

58
00:03:22,430 --> 00:03:24,590
tout ce que vous avez à votre disposition.

59
00:03:24,590 --> 00:03:28,280
>> Aussi à l'horizon est le projet final. Le projet final est vraiment le point culminant de 50 ans,

60
00:03:28,280 --> 00:03:30,560
laquelle de toutes les affectations dans le cours,

61
00:03:30,560 --> 00:03:33,170
c'est votre chance de vraiment faire votre propre chose.

62
00:03:33,170 --> 00:03:35,280
Et cela peut être tout simplement de faire quelque chose pour le plaisir,

63
00:03:35,280 --> 00:03:38,160
il peut être de résoudre certains problèmes pressants votre groupe d'étudiants a,

64
00:03:38,160 --> 00:03:40,980
pour certains nouveau site web, un mécanisme de collecte de données pour les données.

65
00:03:40,980 --> 00:03:43,420
Il peut s'agir d'une application mobile pour Android, iOS.

66
00:03:43,420 --> 00:03:46,030
Vraiment, le ciel est la limite, et au cours des prochaines semaines,

67
00:03:46,030 --> 00:03:50,900
lors de la transition de C à ces langues de niveau supérieur telles que PHP et JavaScript

68
00:03:50,900 --> 00:03:55,150
vous vous trouverez en plus familiarisés avec des techniques du monde réel,

69
00:03:55,150 --> 00:03:57,800
certains outils du monde réel, et de la compléter,

70
00:03:57,800 --> 00:04:00,170
savoir que le cours a une histoire de séminaires,

71
00:04:00,170 --> 00:04:02,880
où au cours des prochaines semaines, une partie du personnel enseignant

72
00:04:02,880 --> 00:04:06,160
et de nos amis sur le campus du offrira des séminaires optionnels

73
00:04:06,160 --> 00:04:08,540
qui vont au-delà de ce qui se fait habituellement dans la section

74
00:04:08,540 --> 00:04:11,090
de vous présenter les choses comme la programmation Android,

75
00:04:11,090 --> 00:04:13,450
pour vous présenter des choses comme iOS programmation

76
00:04:13,450 --> 00:04:15,950
ou plus avancés de développement Web techniques.

77
00:04:15,950 --> 00:04:17,970
Il ya toute une histoire de ces déjà en ligne.

78
00:04:17,970 --> 00:04:25,000
Si vous allez à cs50.net/seminars, nous avons fait cela pendant pas mal d'années,

79
00:04:25,000 --> 00:04:28,740
et vous verrez que archivés ici avec les fichiers PDF et les vidéos et autres

80
00:04:28,740 --> 00:04:33,090
des vidéos de plusieurs dizaines de séminaires.

81
00:04:33,090 --> 00:04:37,380
L'année dernière, par exemple, nous avons eu un séminaire sur acing vos entretiens techniques,

82
00:04:37,380 --> 00:04:40,980
si vous êtes en train de regarder pour aller faire un stage ou à temps plein concert.

83
00:04:40,980 --> 00:04:43,450
Développement de Windows Mobile, Android, développement, Google Maps,

84
00:04:43,450 --> 00:04:47,700
API, CSS, en développant pour le BlackBerry, Emacs.

85
00:04:47,700 --> 00:04:52,610
Vraiment, vous êtes invités à jeter un oeil à l'un de ces séminaires à votre convenance.

86
00:04:52,610 --> 00:04:57,080
Et nous allons tenir quelques nouvelles de ce semestre, aussi bien.

87
00:04:57,080 --> 00:04:59,020
>> Alors, quelle est l'avant avec le projet final?

88
00:04:59,020 --> 00:05:01,090
Eh bien, tout d'abord, même si cette date est un peu imminente,

89
00:05:01,090 --> 00:05:06,460
c'est vraiment juste une occasion de commencer à penser à la finale du projet tout à fait réaliste.

90
00:05:06,460 --> 00:05:10,550
Nous savons que les débuts de certains de ce que nous allons encore être couvrant en cours,

91
00:05:10,550 --> 00:05:13,470
HTML, PHP, etc, mais vous êtes tous familiers avec le Web,

92
00:05:13,470 --> 00:05:16,270
et je biais de cette conversation vers le Web seulement parce que

93
00:05:16,270 --> 00:05:18,380
la plupart des gens finissent par faire des projets Web finaux,

94
00:05:18,380 --> 00:05:20,260
mais ce n'est pas du tout nécessaire.

95
00:05:20,260 --> 00:05:22,260
Utilisation de C est bien, Objective C, Java,

96
00:05:22,260 --> 00:05:25,350
n'importe quelle langue que vous connaissez ou que vous voulez savoir, c'est tout à fait bien.

97
00:05:25,350 --> 00:05:29,370
Mais pour obtenir le jus qui coule d'abord, nous allons attendre la présentation d'une proposition préliminaire

98
00:05:29,370 --> 00:05:33,520
qui, par le PDF sur le site Web, qui est maintenant à cs50.net,

99
00:05:33,520 --> 00:05:36,080
et en haut à gauche, vous verrez final du projet

100
00:05:36,080 --> 00:05:38,920
est la spécification pour le projet final,

101
00:05:38,920 --> 00:05:41,470
et il existe en plus de détails sur la préproposition et analogues.

102
00:05:41,470 --> 00:05:44,760
Elle se résume assez bien vers le bas à un e-mail à votre adjoint à l'enseignement

103
00:05:44,760 --> 00:05:48,450
juste pour entamer une conversation avec lui à propos de ce que vous pensez.

104
00:05:48,450 --> 00:05:52,510
Sur projects.cs50.net est un référentiel d'idées de gens sur le campus

105
00:05:52,510 --> 00:05:54,480
si vous avez du mal à trouver une idée,

106
00:05:54,480 --> 00:06:01,140
et manual.cs50.net/APIs est un répertoire de liens vers des API.

107
00:06:01,140 --> 00:06:06,710
>> Que, cependant, est une API?

108
00:06:06,710 --> 00:06:09,790
Qu'est-ce qu'un API? Je l'ai dit au moins deux fois,

109
00:06:09,790 --> 00:06:12,640
selon les transcriptions de ces dernières semaines.

110
00:06:12,640 --> 00:06:17,050
Qu'est-ce que c'est? [Étudiant, inintelligible]

111
00:06:17,050 --> 00:06:19,340
>> Très bien. Ainsi, l'interface de programmation quelque chose.

112
00:06:19,340 --> 00:06:22,710
Interface de programmation d'application, ce qui peut prendre plusieurs formes,

113
00:06:22,710 --> 00:06:25,850
mais ce que cela revient vraiment à est le code

114
00:06:25,850 --> 00:06:29,660
que quelqu'un d'autre hs données écrites ou que quelqu'un d'autre a recueillies

115
00:06:29,660 --> 00:06:33,670
qui est mis à votre disposition en quelque sorte programmatique.

116
00:06:33,670 --> 00:06:36,630
Vous pouvez écrire du code en C, PHP, Python, Ruby,

117
00:06:36,630 --> 00:06:38,760
quelle que soit la langue de votre choix est généralement,

118
00:06:38,760 --> 00:06:42,240
et vous pouvez en quelque sorte s'appuyer sur quelqu'un d'autre fonctionnalité

119
00:06:42,240 --> 00:06:44,440
ou quelqu'un d'autre ensemble de données.

120
00:06:44,440 --> 00:06:47,210
Par exemple, si je vais à ce lien ici,

121
00:06:47,210 --> 00:06:50,750
et vous verrez une paire de liens sur la page suivante

122
00:06:50,750 --> 00:06:56,093
où nous avons propres API CS50, qui sont très Harvard-centrique, puis API tierces.

123
00:06:56,930 --> 00:06:59,300
Parmi les API tiers sont des choses vraiment utiles

124
00:06:59,300 --> 00:07:01,780
comme être en mesure d'envoyer des gens à la SMS,

125
00:07:01,780 --> 00:07:04,690
être en mesure de recevoir des messages texte SMS des gens.

126
00:07:04,690 --> 00:07:08,160
Et ce genre de choses que vous pourriez avoir aucune idée de comment mettre en œuvre vous-même,

127
00:07:08,160 --> 00:07:10,440
mais grâce à des services, certains, gratuitement ou non commerciale

128
00:07:10,440 --> 00:07:14,000
vous pouvez construire au sommet de celles-ci et faire quelque chose de vous intéresser.

129
00:07:14,000 --> 00:07:16,990
Parmi les API CS50 sont ces choses campus axées comme

130
00:07:16,990 --> 00:07:21,480
Cours de Harvard, de l'énergie, des événements, des aliments, des cartes, des nouvelles, des tweets et Shuttleboy son propre,

131
00:07:21,480 --> 00:07:23,940
et ce sont les API qui ont l'air un petit quelque chose comme ça.

132
00:07:23,940 --> 00:07:26,990
>> Permettez-moi de tirer vers le haut l'API HarvardFood.

133
00:07:26,990 --> 00:07:30,620
Si vous avez déjà été sur le site de HUD, vous avez probablement été là

134
00:07:30,620 --> 00:07:35,410
juste voir ce qu'il ya pour le dîner ou pour voir quelles sont les heures sont pour certains d-hall.

135
00:07:35,410 --> 00:07:38,000
Eh bien, ce n'est pas particulièrement facile à naviguer,

136
00:07:38,000 --> 00:07:41,100
et si ce que nous avons été il ya quelque temps, nous avons écrit un logiciel,

137
00:07:41,100 --> 00:07:47,270
il arrive à être en PHP, qui fait écran gratte l'intégralité du site Internet de HUD.

138
00:07:47,270 --> 00:07:51,400
Pour dépister quelque chose gratter signifie d'écrire un programme dans un langage comme le PHP

139
00:07:51,400 --> 00:07:55,270
qui prétend être un navigateur, même si vous pouvez l'exécuter à l'invite de commande,

140
00:07:55,270 --> 00:07:58,180
qui prétend être un navigateur, se connecte à un site Web,

141
00:07:58,180 --> 00:08:01,480
télécharge le HTML, le langage dans lequel il est écrit,

142
00:08:01,480 --> 00:08:04,300
puis lit, ou plus précisément, il analyse

143
00:08:04,300 --> 00:08:06,140
de haut en bas, de gauche à droite.

144
00:08:06,140 --> 00:08:08,870
Et ce que nous avons été, nous avons écrit notre code de façon à ce que

145
00:08:08,870 --> 00:08:12,910
tout moment, nous avons vu quelque chose dans ce que HTML ressemblait à quelque chose sur le menu,

146
00:08:12,910 --> 00:08:16,470
comme hamburger, nous serions alors importer ce dans notre propre base de données.

147
00:08:16,470 --> 00:08:20,410
Et chaque fois que nous avons vu le contenu nutritionnel, nous l'importer dans notre propre base de données.

148
00:08:20,410 --> 00:08:23,090
Et ce que nous faisions était exploiter le fait que le site web de HUD,

149
00:08:23,090 --> 00:08:27,280
même si cela peut être un peu un défi pour nous les humains pour naviguer

150
00:08:27,280 --> 00:08:32,559
sous le capot, l'ensemble de l'HTML est généré par leurs propres programmes informatiques.

151
00:08:32,559 --> 00:08:35,159
Ainsi, la totalité de leur code HTML, même si cela peut sembler malpropre,

152
00:08:35,159 --> 00:08:38,026
comme la plupart des sites Internet sous le capot il suit un modèle.

153
00:08:38,260 --> 00:08:40,799
Donc, nous venons de passer quelques heures figurant sur ce modèle

154
00:08:40,799 --> 00:08:44,240
de sorte qu'en fin de compte, on jette tout le code HTML désordonné,

155
00:08:44,240 --> 00:08:47,340
tout de l'esthétique du parement en gras et en italique et autres,

156
00:08:47,340 --> 00:08:52,350
et ce que nous sommes alors en mesure de le faire est d'exposer ces mêmes données.

157
00:08:52,350 --> 00:08:54,870
Par exemple, de cette façon.

158
00:08:54,870 --> 00:08:56,840
Nous avons donc, d'après la documentation ici,

159
00:08:56,840 --> 00:08:59,190
ont informé le monde que si vous demandez une URL

160
00:08:59,190 --> 00:09:03,310
qui ressemble à ceci, food.cs50.net / quelque chose,

161
00:09:03,310 --> 00:09:07,220
et de vous fournir certains paramètres, que nous allons parler aujourd'hui,

162
00:09:07,220 --> 00:09:11,780
comme date de fin de temps, date de début du temps, de repas et ainsi de suite,

163
00:09:11,780 --> 00:09:14,090
ce que nos serveurs reviendrai à vous, par exemple,

164
00:09:14,090 --> 00:09:18,740
est un fichier CSV, comma separted valeurs comme un fichier Excel,

165
00:09:18,740 --> 00:09:23,140
contenant tout pour le petit déjeuner à cette date particulière en Mars de l'année dernière

166
00:09:23,140 --> 00:09:25,450
quand il m'arrivait de rédiger ce document.

167
00:09:25,450 --> 00:09:27,870
>> Pour ceux qui connaissent, CSV n'est pas le seul format de fichier.

168
00:09:27,870 --> 00:09:30,610
Il ya un autre format qui est d'autant plus polyvalent

169
00:09:30,610 --> 00:09:32,670
appelé JSON, JavaScript Object Notation.

170
00:09:32,670 --> 00:09:34,770
Les données peuvent revenir dans ce format.

171
00:09:34,770 --> 00:09:38,110
Ainsi, l'emporter ici est que si vous plongez dans cette API

172
00:09:38,110 --> 00:09:41,170
ou de toute autre CS50 ou quoi que ce soit là-bas sur l'Internet,

173
00:09:41,170 --> 00:09:45,560
ou pas du tout, se rendre compte que le monde a de plus en plus commencé à normaliser

174
00:09:45,560 --> 00:09:47,670
comment les machines communiquent entre eux.

175
00:09:47,670 --> 00:09:50,660
Nous utilisons des formats de données tels que CSV ou JSON.

176
00:09:50,660 --> 00:09:54,320
Et qu'est-ce que cela signifie pour vous est que vous pouvez écrire la partie intéressante d'un programme

177
00:09:54,320 --> 00:09:56,580
qui permet à l'utilisateur de votre recherche d'un menu salle à manger,

178
00:09:56,580 --> 00:10:00,010
qui leur permet de créer des listes de favoris qui leur permet de recevoir des alertes texte

179
00:10:00,010 --> 00:10:02,480
lorsque leur repas préféré est sur le point d'être servi dans une salle d-

180
00:10:02,480 --> 00:10:07,090
en utilisant des ensembles de données de quelqu'un d'autre et le renforcement au-dessus de leurs API.

181
00:10:07,090 --> 00:10:13,600
Donc, plus de détails dans la forme de séminaires et de la documentation que vous avez ici en ligne.

182
00:10:13,600 --> 00:10:16,450
Donc, ce sont donc les API.

183
00:10:16,450 --> 00:10:18,900
>> Cela nous ramène au format HTML. Bref récapitulatif.

184
00:10:18,900 --> 00:10:22,920
Qu'est-ce que HTML?

185
00:10:22,920 --> 00:10:25,000
[Étudiant, inintelligible] Bon >>. HyperText Markup Language.

186
00:10:25,000 --> 00:10:31,300
Quelqu'un d'autre, ce qui est Hypertext Markup Language?

187
00:10:31,300 --> 00:10:37,340
HyperText Markup Language.

188
00:10:37,340 --> 00:10:40,330
D'accord. Donc, HTML, Hypertext.

189
00:10:40,330 --> 00:10:43,100
HyperText se réfère simplement à l'Internet, la plupart du temps.

190
00:10:43,100 --> 00:10:45,730
Markup signifie que ce n'est pas vraiment un langage de programmation, HTML.

191
00:10:45,730 --> 00:10:48,120
Ce n'est pas une langue que vous pouvez exprimer la logique po

192
00:10:48,120 --> 00:10:50,710
Il n'a pas de boucles. Il n'a pas de conditions.

193
00:10:50,710 --> 00:10:52,820
Il n'a pas de fonctions, en soi.

194
00:10:52,820 --> 00:10:56,680
Plutôt, il a ces choses appelées balises, ou plus exactement, des éléments.

195
00:10:56,680 --> 00:10:59,970
Et ces éléments ont balises de début et de fin,

196
00:10:59,970 --> 00:11:04,300
ou balises d'ouverture et les étiquettes fermées, et ce que ces mots signifient généralement un navigateur doit être,

197
00:11:04,300 --> 00:11:09,270
commencer à faire quelque chose et puis arrêter de faire quelque chose, mais il ya des exceptions.

198
00:11:09,270 --> 00:11:12,480
Parfois, c'est juste «mettre un saut de ligne ici, par exemple.

199
00:11:12,480 --> 00:11:15,150
Et nous avons vu des exemples de ce que l'autre jour, entre parement gras,

200
00:11:15,150 --> 00:11:17,430
les sauts de ligne, et puis un couple de d'autres balises.

201
00:11:17,430 --> 00:11:19,880
Donc HTML est le langage dans lequel les pages Web sont écrites.

202
00:11:19,880 --> 00:11:23,760
Donc, si je vais à quelque chose comme Google.com

203
00:11:23,760 --> 00:11:26,180
et tirez simplement leur page d'accueil,

204
00:11:26,180 --> 00:11:29,690
Rappelons que si vous faites un clic droit ou de contrôler cliquez sur

205
00:11:29,690 --> 00:11:32,140
et consulter le code source vue, généralement

206
00:11:32,140 --> 00:11:34,420
c'est un désordre complet ces jours-ci sous le capot, mais c'est parce que

207
00:11:34,420 --> 00:11:38,170
ordinateurs ne se soucient pas d'espace blanc, donc ce n'est pas pour faire joli.

208
00:11:38,170 --> 00:11:40,240
Mais si l'on zoomer sur des parties de celui-ci,

209
00:11:40,240 --> 00:11:43,460
remarquerez que Chrome, il suffit d'être gentil, a un code couleur des choses.

210
00:11:43,460 --> 00:11:48,460
En effet, c'est la première étiquette que nous avons vu dans une page Web.

211
00:11:48,460 --> 00:11:51,750
Et encore une fois, HTML 5, la dernière version de ce langage,

212
00:11:51,750 --> 00:11:53,830
ne ont cette chose au début,

213
00:11:53,830 --> 00:11:57,820
<! Doctype html, que ce soit en minuscules ou en majuscules,

214
00:11:57,820 --> 00:12:03,580
mais c'est juste une sorte de norme qui dit: hey monde, voici un fichier HTML dans la version 5.

215
00:12:03,580 --> 00:12:08,920
>> La partie intéressante commence ici. Donc <html, et puis il y avait deux enfants

216
00:12:08,920 --> 00:12:11,640
des éléments HTML dernière fois.

217
00:12:11,640 --> 00:12:14,630
Quels sont ces deux enfants majeurs?

218
00:12:14,630 --> 00:12:17,170
Tête et corps, tout comme le gars avec le tatouage il ya un instant.

219
00:12:17,170 --> 00:12:19,640
Il ya deux parties de la page Web, la tête et le corps,

220
00:12:19,640 --> 00:12:23,750
et le rappel, alors, que peut-être la page web le plus simple que nous pourrions faire ressemble à ceci.

221
00:12:23,750 --> 00:12:27,460
Et je l'ai découpée juste pour être une sorte de propre et bien rangé avec mon code,

222
00:12:27,460 --> 00:12:30,710
mais ce qui est vraiment important ici, c'est qu'il ya une certaine hiérarchie pour cela.

223
00:12:30,710 --> 00:12:35,420
Et tout tag que j'ai ouvert, j'ai fermé et qu'il ya donc cette symétrie

224
00:12:35,420 --> 00:12:38,300
à tout le balisage que j'ai créé.

225
00:12:38,300 --> 00:12:41,620
Donc, la dernière fois que nous avons commencé l'écriture de pages web sur mon propre ordinateur portable.

226
00:12:41,620 --> 00:12:45,470
J'ai ouvert l'édition de texte, j'ai enregistré le fichier comme hello.html,

227
00:12:45,470 --> 00:12:50,190
J'ai ensuite fait glisser le fichier sur mon navigateur, et voila, j'ai eu une page sur Internet.

228
00:12:50,190 --> 00:12:53,110
Maintenant, ce n'est pas tout à fait le cas, j'avais une page sur mon disque dur,

229
00:12:53,110 --> 00:12:58,260
et j'étais littéralement la seule personne dans le monde qui veut voir cette page Web dans un navigateur.

230
00:12:58,260 --> 00:13:00,670
>> Donc, aujourd'hui, nous introduisons un serveur Web réel

231
00:13:00,670 --> 00:13:02,750
et la notion de fait au service de contenus sur Internet

232
00:13:02,750 --> 00:13:04,970
et comment tout cela commence à monter.

233
00:13:04,970 --> 00:13:08,350
Ainsi, il s'avère que tout ce temps dans l'appareil CS50

234
00:13:08,350 --> 00:13:11,590
vous avez eu un serveur Web sur votre ordinateur.

235
00:13:11,590 --> 00:13:16,560
Nous avons, en toute justice, ne l'ai utilisé pour gedit, par Clang, pour GDB et autres,

236
00:13:16,560 --> 00:13:21,000
mais aussi installés par nos soins pour vous dans l'appareil est un serveur web,

237
00:13:21,000 --> 00:13:23,940
et que le serveur web se trouve à être libre, open source,

238
00:13:23,940 --> 00:13:26,580
l'un des plus populaires au monde, appelé Apache.

239
00:13:26,580 --> 00:13:31,340
Son nom technique est plus HTTPd, le d étant pour le démon ici,

240
00:13:31,340 --> 00:13:34,110
qui est un terme technique pour un serveur.

241
00:13:34,110 --> 00:13:38,690
Donc, installé dans l'appareil CS50 est un serveur web, et ça veut dire quoi?

242
00:13:38,690 --> 00:13:43,740
Eh bien, un serveur web est, conceptuellement, un serveur sur Internet qui sert de contenu Web.

243
00:13:43,740 --> 00:13:48,630
Lorsqu'on lui a demandé pour un fichier, elle recrache le code HTML qui compose ce fichier, et le tour est joué.

244
00:13:48,630 --> 00:13:51,370
Vous voyez une page d'accueil site web.

245
00:13:51,370 --> 00:13:54,970
Mais un serveur est, plus précisément, un morceau de logiciel.

246
00:13:54,970 --> 00:13:59,190
Il n'a pas besoin d'être sur une machine physique, il doit juste être un morceau de fonctionnement du logiciel.

247
00:13:59,190 --> 00:14:01,980
Ainsi, l'appareil CS50, bien sûr, est un morceau de logiciel

248
00:14:01,980 --> 00:14:04,270
même si c'est un peu semblant d'être une machine.

249
00:14:04,270 --> 00:14:06,960
Il fait semblant d'être un ordinateur à l'intérieur d'un ordinateur,

250
00:14:06,960 --> 00:14:11,140
mais cela signifie simplement que l'appareil peut certainement tourner les choses comme les serveurs Web.

251
00:14:11,140 --> 00:14:13,260
Il peut effectivement fonctionner les serveurs de messagerie.

252
00:14:13,260 --> 00:14:16,440
Nous pourrions lancer un serveur de messagerie instantanée dans l'appareil, si nous le voulions,

253
00:14:16,440 --> 00:14:20,780
et en effet, nous courons un autre type de serveur, appelé serveur de base de données mySQL.

254
00:14:20,780 --> 00:14:22,620
Mais plus à ce sujet la semaine prochaine.

255
00:14:22,620 --> 00:14:26,400
Cela signifie que je peux réellement visiter les pages Web

256
00:14:26,400 --> 00:14:30,480
à l'intérieur de mon appareil à l'aide d'un navigateur à l'intérieur de l'appareil

257
00:14:30,480 --> 00:14:33,600
ou même sur mon propre ordinateur portable, mon Mac ou mon PC.

258
00:14:33,600 --> 00:14:37,780
Alors qu'est-ce que cela signifie? Il s'avère que chaque fois que vous utilisez un ordinateur sous Linux,

259
00:14:37,780 --> 00:14:40,910
son surnom est "hôte local".

260
00:14:40,910 --> 00:14:43,370
Il n'a pas de nom de domaine car nous n'avons pas acheté un nom de domaine

261
00:14:43,370 --> 00:14:46,590
quelque chose comme l'appareil, de sorte que son nom par défaut est l'hôte local.

262
00:14:46,590 --> 00:14:50,470
>> Mais afin d'obtenir l'appareil pour commencer à purger des pages web,

263
00:14:50,470 --> 00:14:52,270
nous devons les créer.

264
00:14:52,270 --> 00:14:55,200
Alors faisons-le. Laissez-moi aller dans une fenêtre de terminal ici

265
00:14:55,200 --> 00:14:58,190
et remarquez que je suis à mon prompt typique John Harvard.

266
00:14:58,190 --> 00:15:01,670
Permettez-moi aller de l'avant et tapez ls, et nous verrons des choses familières de ce semestre,

267
00:15:01,670 --> 00:15:04,580
bureau, téléchargements, la sélection et ainsi de suite,

268
00:15:04,580 --> 00:15:07,540
mais maintenant nous commençons à tourner notre attention vers un couple.

269
00:15:07,540 --> 00:15:11,530
Sur de nombreux serveurs web Linux, il ya ce dossier appelé html public,

270
00:15:11,530 --> 00:15:15,630
mais nous allons ignorer que l'un pour l'instant et se concentrer sur ce vhosts,.

271
00:15:15,630 --> 00:15:18,850
Tout le monde sait ce qu'est un vhost est?

272
00:15:18,850 --> 00:15:21,110
Tout le jargon stupide pour l'hôte virtuel,

273
00:15:21,110 --> 00:15:23,850
et ce que cela signifie, c'est que sur un serveur classique

274
00:15:23,850 --> 00:15:26,810
vous pouvez réellement héberger plusieurs sites Web.

275
00:15:26,810 --> 00:15:31,500
Vous pouvez acheter un nom de domaine comme foo.com, et vous pouvez l'héberger sur un serveur.

276
00:15:31,500 --> 00:15:36,100
Mais vous pouvez également acheter bar.com et l'héberger sur le même serveur.

277
00:15:36,100 --> 00:15:40,250
La raison étant, les navigateurs sont assez intelligents pour informer le serveur

278
00:15:40,250 --> 00:15:45,880
quand un utilisateur demande une page Web, ce nom de domaine que l'utilisateur veut la page d'accueil.

279
00:15:45,880 --> 00:15:48,760
Donc, ce qui est bien à ce sujet est que vous n'avez pas besoin d'un serveur physique

280
00:15:48,760 --> 00:15:52,040
ou un CS50 appareil pour chaque site Web que vous pouvez créer.

281
00:15:52,040 --> 00:15:55,520
Vous pouvez utiliser le même serveur et de développer une centaine de sites Internet différents.

282
00:15:55,520 --> 00:15:58,770
Et en effet, si vous êtes une personne essayant de démarrer un site Web,

283
00:15:58,770 --> 00:16:02,100
que ce soit pour le plaisir ou pour les affaires, en général, vous allez aller sur l'Internet,

284
00:16:02,100 --> 00:16:04,650
et vous aurez à payer quelqu'un dix dollars par mois, une centaine de dollars par mois

285
00:16:04,650 --> 00:16:06,670
pour héberger votre site pour vous.

286
00:16:06,670 --> 00:16:11,060
Et la façon dont fonctionne est qu'ils sont en charge d'autres personnes

287
00:16:11,060 --> 00:16:13,160
dix dollars par mois, soit une centaine de dollars par mois

288
00:16:13,160 --> 00:16:17,200
pour héberger des sites web d'autres personnes sur leur serveur même.

289
00:16:17,200 --> 00:16:20,740
La raison pour laquelle ils peuvent le faire à cause de cette fonctionnalité appelée bhosts,

290
00:16:20,740 --> 00:16:23,790
mais plus sur cela quand vient le temps pour les projets finaux.

291
00:16:23,790 --> 00:16:28,360
>> Pour l'instant, disons simplement plonger là-dedans. Donc vhosts cd, et si je tape ls maintenant,

292
00:16:28,360 --> 00:16:31,370
remarquerez qu'il ya un dossier là-bas appelé hôte local.

293
00:16:31,370 --> 00:16:33,440
C'est parce que, par défaut, les chiffres appareils

294
00:16:33,440 --> 00:16:36,160
vous allez jamais faire fonctionner un site web sur un appareil.

295
00:16:36,160 --> 00:16:38,970
Ce n'est pas vraiment le monde réel, ce n'est pas un serveur web dans le monde réel.

296
00:16:38,970 --> 00:16:41,690
Alors laissez-moi aller dans l'hôte local, et maintenant nous allons voir là-dedans

297
00:16:41,690 --> 00:16:44,290
un répertoire appelé HTML dernier.

298
00:16:44,290 --> 00:16:47,080
Donc, c'est un peu profonde, la hiérarchie, mais si et quand

299
00:16:47,080 --> 00:16:51,230
vous décidez de commencer à développer plusieurs sites Web dans les mois ou les années à venir n,

300
00:16:51,230 --> 00:16:54,370
ce type de structure de dossier tend à être utile.

301
00:16:54,370 --> 00:16:56,560
Maintenant, nous allons passer en HTML que je viens de faire,

302
00:16:56,560 --> 00:16:59,010
tapez ls, et rien n'est là.

303
00:16:59,010 --> 00:17:01,390
Alors maintenant, nous allons aller de l'avant et de le faire. Permettez-moi d'ouvrir Chrome

304
00:17:01,390 --> 00:17:07,300
à l'intérieur de l'appareil, et me laisser aller à http://localhost.

305
00:17:07,300 --> 00:17:14,440
Donc littéralement le nom de mon appareil, entrez, et je reçois index of /.

306
00:17:14,440 --> 00:17:18,290
Ce n'est pas vraiment me montrer quelque chose d'intéressant,

307
00:17:18,290 --> 00:17:23,400
mais il s'avère que ce que nous voyons est ce dossier, HTML.

308
00:17:23,400 --> 00:17:25,770
Il n'y a rien dans ce dossier en ce moment,

309
00:17:25,770 --> 00:17:28,750
si au contraire, ce que je vais devoir faire, c'est d'abord créer un fichier.

310
00:17:28,750 --> 00:17:33,530
Créez un fichier HTML comme nous l'avons fait le lundi, mais cette fois-ci mis à l'intérieur de l'appareil.

311
00:17:33,530 --> 00:17:36,830
Pour ceux d'entre vous qui cherchent à suivre avec les ordinateurs portables maintenant,

312
00:17:36,830 --> 00:17:42,040
permettez-moi de faire une part qui va être couvert dans le pset basé sur le Web,

313
00:17:42,040 --> 00:17:44,280
mais pour que cela fonctionne pour la première fois,

314
00:17:44,280 --> 00:17:49,830
vous allez avoir à exécuter cette commande: sudo service httpd start.

315
00:17:49,830 --> 00:17:52,670
Et ce, encore une fois, sera répété dans le pset dernier,

316
00:17:52,670 --> 00:17:55,460
mais si vous accompagnez à la maison maintenant, le serveur Web

317
00:17:55,460 --> 00:17:58,660
est activé sur l'appareil, et en ce que les de manière à ne pas saper la RAM

318
00:17:58,660 --> 00:18:01,960
et la mémoire pendant 7 semaines sur le semestre quand nous n'avons pas besoin.

319
00:18:01,960 --> 00:18:05,190
Donc, vous devez exécuter cette commande une fois, et vous obtiendrez une sortie comme ça.

320
00:18:05,190 --> 00:18:07,920
Ensuite, vous devriez être en mesure de jouer le jeu ici.

321
00:18:07,920 --> 00:18:10,330
Maintenant, nous allons revenir dans ce dossier.

322
00:18:10,330 --> 00:18:12,770
Ce dossier est vide, alors permettez-moi de commencer à créer un fichier,

323
00:18:12,770 --> 00:18:16,360
gedit hello.html.

324
00:18:16,360 --> 00:18:20,930
>> Très bien. Gedit est ouvert, comme d'habitude. Permettez-moi de faire doctype, html,

325
00:18:20,930 --> 00:18:25,270
html, permettez-moi de prendre de l'avance sur moi-même et commencer à fermer mes tags à l'avance.

326
00:18:25,270 --> 00:18:28,380
Maintenant, j'ai la tête. Permettez-moi aller de l'avant et fermer la tête,

327
00:18:28,380 --> 00:18:32,450
permettez-moi de faire le titre de la page, bonjour tout le monde comme la dernière fois,

328
00:18:32,450 --> 00:18:34,790
Titre proche, maintenant laissez-moi faire un corps.

329
00:18:34,790 --> 00:18:38,130
Ici, je vais lui dire bonjour, monde, avec quelque exclams

330
00:18:38,130 --> 00:18:40,550
à préciser que c'est une chaîne différente.

331
00:18:40,550 --> 00:18:45,800
Fermer corps, et maintenant laissez-moi aller de l'avant et déposer sauver.

332
00:18:45,800 --> 00:18:48,470
Permettez-moi de revenir à ma fenêtre de terminal, et si je tape ls,

333
00:18:48,470 --> 00:18:51,830
Je devrais, sans doute, reportez-vous hello.html. Et je le fais.

334
00:18:51,830 --> 00:18:55,070
Alors maintenant, revenons à mon navigateur, cliquez sur recharger,

335
00:18:55,070 --> 00:18:58,930
et vous pouvez voir que nous sommes bien à l'intérieur de ce dossier HTML.

336
00:18:58,930 --> 00:19:02,310
Je ne vois pas encore une page web, ce qui est Apache, le serveur web,

337
00:19:02,310 --> 00:19:04,670
juste me montrer le contenu de ce répertoire liste.

338
00:19:04,670 --> 00:19:08,260
Tout comme Mac OS ou Windows seraient normalement faire sur votre propre disque dur local.

339
00:19:08,260 --> 00:19:12,730
Donc, si je veux voir cette page web, je peux cliquer sur ce lien ici peu, hello.html,

340
00:19:12,730 --> 00:19:15,160
et en effet, c'est ce que je m'attendais à voir.

341
00:19:15,160 --> 00:19:18,080
Maintenant, encore une fois, ce n'est pas une URL que l'un de vous pouvez visiter dès maintenant,

342
00:19:18,080 --> 00:19:20,760
parce que pour vous, l'hôte local, si vous avez un ordinateur portable ici,

343
00:19:20,760 --> 00:19:23,050
il se réfère à votre propre instance de l'appareil.

344
00:19:23,050 --> 00:19:25,900
Il s'agit de mon appareil personnel,

345
00:19:25,900 --> 00:19:29,080
mais c'est un peu idiot pour moi d'avoir, d'avoir

346
00:19:29,080 --> 00:19:34,480
un utilisateur comme moi cliquez sur hello.html de voir réellement le contenu de cette page.

347
00:19:34,480 --> 00:19:42,590
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.

348
00:19:42,590 --> 00:19:44,640
Nous avons ici hello.html.

349
00:19:44,640 --> 00:19:48,410
Quelle est la commande sous Linux pour renommer un fichier?

350
00:19:48,410 --> 00:19:50,870
>> MV, pour le déménagement. Alors laissez-moi faire,

351
00:19:50,870 --> 00:19:55,870
et permettez-moi de renommer hello.html à index.html.

352
00:19:55,870 --> 00:19:58,610
Permettez-moi de taper ls pour confirmer qu'il a été renommé.

353
00:19:58,610 --> 00:20:03,250
Maintenant cela va - si je retourne à l'hôte local,

354
00:20:03,250 --> 00:20:06,710
remarque maintenant que je suis automatiquement voir cette page web.

355
00:20:06,710 --> 00:20:11,740
Ceci est identique à mon train de faire / index.html,

356
00:20:11,740 --> 00:20:14,740
mais la bonne chose est que maintenant que le serveur Web a déterminer,

357
00:20:14,740 --> 00:20:18,830
oh, si vous avez un fichier qui, par les conventions de l'homme, est nommé index.html,

358
00:20:18,830 --> 00:20:21,200
permettez-moi de montrer à l'utilisateur que le fichier par défaut

359
00:20:21,200 --> 00:20:25,290
plutôt que d'une inscription dans l'annuaire stupide qui n'est pas du tout convivial.

360
00:20:25,290 --> 00:20:28,900
En effet, la plupart des sites que vous visitez sur Internet n'ont pas une liste de fichiers à cliquer sur,

361
00:20:28,900 --> 00:20:34,040
ils ont juste vous montrer le contenu. C'est comme ça que nous pouvons faire cela, index.html.

362
00:20:34,040 --> 00:20:37,000
Donc, c'est tous les amusement et bonne, mais ceci est une page web assez simple.

363
00:20:37,000 --> 00:20:41,640
Permettez-moi aller de l'avant et d'ouvrir index.html dans mes vhosts,

364
00:20:41,640 --> 00:20:47,620
les hôtes locaux, les répertoires html, et nous allons ajouter quelque chose de plus grand intérêt.

365
00:20:47,620 --> 00:20:56,120
Donc, il ya Bonjour tout le monde, nous allons plutôt dire «C'est CS50, Harvard College. . .

366
00:20:56,120 --> 00:21:00,000
Ainsi, le début de la description de catalogue de cours en quelque sorte là-bas.

367
00:21:00,000 --> 00:21:03,780
Maintenant, si je recharge, je le vois dans ma page d'accueil.

368
00:21:03,780 --> 00:21:09,560
D'accord, et je ne vois, mais supposons que je veux maintenant lister le contenu un peu plus dans ce fichier.

369
00:21:09,560 --> 00:21:15,160
Je pourrais continuer ici-bas et dire, aucun pré-requis,

370
00:21:15,160 --> 00:21:18,740
même si certains d'entre vous sont probablement comme «Ha ha ha, aucune condition préalable.

371
00:21:18,740 --> 00:21:24,320
Mais - officiellement. Donc, recharger, et maintenant nous avons la bizarrerie même que nous avons vu la dernière fois.

372
00:21:24,320 --> 00:21:26,240
Mais pourquoi est-ce? C'était une solution simple.

373
00:21:26,240 --> 00:21:31,440
Pourquoi cette page cassé?

374
00:21:31,440 --> 00:21:34,170
[Étudiant, inintelligible] >> Oui, nous avons résolu ce avant

375
00:21:34,170 --> 00:21:37,440
par lui dire explicitement navigateur «mettre un saut de ligne ici.

376
00:21:37,440 --> 00:21:39,440
Et c'est parce que, encore une fois, un navigateur va seulement faire

377
00:21:39,440 --> 00:21:42,610
explicitement ce que le langage de balisage lui dit de faire,

378
00:21:42,610 --> 00:21:45,730
donc même si vous avez pu appuyez sur Entrée une fois ou deux ou même dix fois,

379
00:21:45,730 --> 00:21:49,870
ça va combiner que tous en un seul espace, juste par convention.

380
00:21:49,870 --> 00:21:52,770
Donc, si vous voulez vraiment un saut de ligne, vous devez utiliser la balise br,

381
00:21:52,770 --> 00:21:56,840
et maintenant préavis, comme lundi, je mets l'intérieur / de cette balise,

382
00:21:56,840 --> 00:22:00,090
seulement parce que ce n'est tout simplement pas sentir

383
00:22:00,090 --> 00:22:02,990
pour commencer un saut de ligne, puis l'arrêter avec rien entre les deux.

384
00:22:02,990 --> 00:22:07,740
>> Ainsi, la convention en HTML est d'ouvrir et de fermer une balise simultanément.

385
00:22:07,740 --> 00:22:11,050
Soit dit en passant, vous verrez beaucoup de sites Web dans les livres ne font pas cela.

386
00:22:11,050 --> 00:22:14,240
Il est juste de faire ou de ne pas le faire, mais nous sommes d'avis

387
00:22:14,240 --> 00:22:17,430
que la conception-sage et stylistiquement, il s'agit juste d'une meilleure

388
00:22:17,430 --> 00:22:20,540
car alors chaque balise est à la fois ouvert et fermé en quelque sorte.

389
00:22:20,540 --> 00:22:23,370
Alors maintenant, nous allons sauvegarder et recharger. Retour à la page du navigateur, ok.

390
00:22:23,370 --> 00:22:26,680
Maintenant, nous faisons des progrès, mais ce n'est pas assez.

391
00:22:26,680 --> 00:22:33,210
Allons de l'avant et commencer à taper dans certains corps plus long du texte.

392
00:22:33,210 --> 00:22:40,610
Donc, disons, «Un renard brun rapide saute par-dessus un chien paresseux. '

393
00:22:40,610 --> 00:22:42,700
Et maintenant, laissez-moi vous suffit de copier et coller ceci plusieurs fois

394
00:22:42,700 --> 00:22:45,040
de sorte que nous avons un paragraphe de texte.

395
00:22:45,040 --> 00:22:47,780
Permettez-moi de revenir ici. Donc ce n'est pas de très bon augure.

396
00:22:47,780 --> 00:22:50,000
J'ai un saut de ligne, si tout va bien,

397
00:22:50,000 --> 00:22:52,140
mais maintenant, une fois que nous sommes arrivés au point d'avoir une page web

398
00:22:52,140 --> 00:22:55,640
qui a beaucoup de contenu et des lignes simples non seulement pour démontrer HTML,

399
00:22:55,640 --> 00:22:58,570
nous pouvons commencer à penser à ces choses, que les points réels.

400
00:22:58,570 --> 00:23:01,590
Et nous pouvons commencer à structurer notre page web un peu plus propre.

401
00:23:01,590 --> 00:23:05,120
Et en effet, ce que je peux faire est d'aller ici à l'intérieur de ma balise body,

402
00:23:05,120 --> 00:23:09,400
et vous savez quoi, si «C'est CS50. . . demarks vraiment le début d'un paragraphe,

403
00:23:09,400 --> 00:23:11,310
eh bien, disons étiqueter comme tel.

404
00:23:11,310 --> 00:23:13,570
Permettez-moi de indenter le texte, juste par convention, laissez-moi vous dire

405
00:23:13,570 --> 00:23:15,710
que ce paragraphe se termine ici,

406
00:23:15,710 --> 00:23:18,320
et puis au lieu de faire ce saut de ligne, laissez-moi vous dire

407
00:23:18,320 --> 00:23:23,300
que cela fait partie là-bas et comme un nouveau paragraphe,

408
00:23:23,300 --> 00:23:27,610
et je vais rapidement tiret par tout démolir tous ces trucs.

409
00:23:27,610 --> 00:23:30,660
>> Alors maintenant, nous avons un paragraphe indenté là,

410
00:23:30,660 --> 00:23:33,510
et maintenant notre balisage commence à être un peu plus

411
00:23:33,510 --> 00:23:37,070
sémantiquement cohérent avec ce que nous essayons de faire.

412
00:23:37,070 --> 00:23:40,130
Nous disposons d'un paragraphe, nous allons donc appeler cela un paragraphe avec la balise p.

413
00:23:40,130 --> 00:23:43,370
Nous avons un deuxième paragraphe, nous allons donc appeler cela un paragraphe avec la balise p.

414
00:23:43,370 --> 00:23:45,850
Et maintenant, que le navigateur va généralement faire

415
00:23:45,850 --> 00:23:48,490
est juste comme dans un livre anglais ou un essai,

416
00:23:48,490 --> 00:23:51,280
où vous avez l'habitude voir des sauts de ligne entre les paragraphes.

417
00:23:51,280 --> 00:23:53,720
Navigateurs fera pour vous automatiquement.

418
00:23:53,720 --> 00:23:56,680
Nous avons donc maintenant deux paragraphes et nous pouvons continuer cela.

419
00:23:56,680 --> 00:23:58,770
Mais, bien sûr, sur le Web, lorsque vous avez des corps de texte

420
00:23:58,770 --> 00:24:01,370
ce n'est pas typiquement de taches énormes de texte.

421
00:24:01,370 --> 00:24:04,040
Il ya souvent des liens hypertextes à l'intérieur.

422
00:24:04,040 --> 00:24:07,250
Donc, si nous voulons, par exemple, inclure des liens là-bas,

423
00:24:07,250 --> 00:24:10,760
suppose que ce qui pourrait être d'intérêt pour n'importe quelle page web, je crée ici, c'est -

424
00:24:10,760 --> 00:24:12,780
me laisser aller à Google.com,

425
00:24:12,780 --> 00:24:16,540
et laissez-moi chercher un rapide renard brun.

426
00:24:16,540 --> 00:24:22,150
Aller à Google images, et, que diriez-vous - c'est mignon.

427
00:24:22,150 --> 00:24:27,420
Nous irons avec cela. Nous avons donc ici un renard brun rapide saut sur un chien paresseux.

428
00:24:27,420 --> 00:24:30,560
Donc ce que je vais faire ici, juste pour le plaisir de la démonstration,

429
00:24:30,560 --> 00:24:32,950
est supposer que cette image était sur mon serveur,

430
00:24:32,950 --> 00:24:35,240
et j'avais été la création de ces images.

431
00:24:35,240 --> 00:24:38,720
Ce que je viens n'a été faire un clic droit ou de contrôler clic sur l'image,

432
00:24:38,720 --> 00:24:42,370
et ce que vous verrez dans la plupart des navigateurs est un petit menu -

433
00:24:42,370 --> 00:24:48,800
arrêter de faire ça - un petit menu qui vous permet de choisir l'emplacement copiez le lien ou copier l'URL.

434
00:24:48,800 --> 00:24:52,750
Permettez-moi de revenir maintenant à mon HTML, et supposons que je veux

435
00:24:52,750 --> 00:24:56,420
à ce lien hypertexte vers une autre page Web.

436
00:24:56,420 --> 00:24:58,640
>> Quelle a été la balise nommée pour cela?

437
00:24:58,640 --> 00:25:01,650
[Étudiant, inintelligible] >> Oui. Donc a href pour référence hyper.

438
00:25:01,650 --> 00:25:04,660
Permettez-moi aller de l'avant et de le coller po

439
00:25:04,660 --> 00:25:07,290
Il s'agit d'une URL assez long, alors laissez-moi un zoom arrière.

440
00:25:07,290 --> 00:25:09,950
Crochets de fermeture, de sorte remarque maintenant que je suis en venant ici

441
00:25:09,950 --> 00:25:11,960
parce que l'URL qui est arrivé à être assez long.

442
00:25:11,960 --> 00:25:15,180
Permettez-moi de faire défiler ici à la fin de quick brown fox,

443
00:25:15,180 --> 00:25:18,830
et laissez-moi fermer cette balise avec </ a,

444
00:25:18,830 --> 00:25:21,280
où j'ai fermé uniquement le nom de la balise.

445
00:25:21,280 --> 00:25:24,470
Maintenant, laissez-moi aller de l'avant et enregistrez ce fichier, recharger la page Web,

446
00:25:24,470 --> 00:25:27,880
et maintenant, par défaut, que va être soulignés en bleu pour moi,

447
00:25:27,880 --> 00:25:31,980
mais en fait, je peux maintenant cliquer sur cette question et le tour est joué. Il ya cette image.

448
00:25:31,980 --> 00:25:33,990
Et il n'a pas besoin d'être une image, il aurait pu liés

449
00:25:33,990 --> 00:25:36,270
à un autre site Web hasard sur Internet.

450
00:25:36,270 --> 00:25:39,610
Je pourrais le faire, par exemple, avec CS50, donc un dernier exemple ici.

451
00:25:39,610 --> 00:25:42,730
«C'est CS50» pourrait être judicieux d'aller, href =

452
00:25:42,730 --> 00:25:50,340
http://www.cs50.net, citant proche, ancre près.

453
00:25:50,340 --> 00:25:53,990
Alors maintenant que c'est une URL plus courte même, et cette fois nous n'allons pas mettre un lien vers une image.

454
00:25:53,990 --> 00:25:57,880
Nous allons plutôt un lien vers une autre page.

455
00:25:57,880 --> 00:25:59,840
Maintenant, nous avons une image ici.

456
00:25:59,840 --> 00:26:02,970
J'ai l'impression que nous pouvons faire un peu mieux que juste un lien vers une image.

457
00:26:02,970 --> 00:26:05,760
Que faire si nous voulons vraiment l'incarner dans notre propre page Web?

458
00:26:05,760 --> 00:26:09,290
>> Eh bien, ce que je peux faire ici, plutôt que de lien vers ce graphique,

459
00:26:09,290 --> 00:26:14,690
laissez-moi plutôt couper l'URL, et nous débarrasser de cet hyperlien et de nettoyer tout ça.

460
00:26:14,690 --> 00:26:17,190
Et nous allons descendre ici et de se débarrasser de cela.

461
00:26:17,190 --> 00:26:20,910
Nous n'avons pas vraiment besoin de toutes ces phrases maintenant, permettez-moi de raccourcir la page un peu.

462
00:26:20,910 --> 00:26:24,530
Et puis ici me laisser aller de l'avant dans un nouveau paragraphe,

463
00:26:24,530 --> 00:26:30,100
dire que je ne veux texte maintenant, je veux une image dont la source va être cette URL.

464
00:26:30,100 --> 00:26:33,100
Une image, comme un saut de ligne, c'est là ou il n'est pas.

465
00:26:33,100 --> 00:26:35,900
Permettez-moi donc de fermer immédiatement cette balise.

466
00:26:35,900 --> 00:26:39,440
Permettez-moi maintenant aller de l'avant et fermez le paragraphe que je suis à l'intérieur,

467
00:26:39,440 --> 00:26:43,010
et si tout va bien avec Bonjour, monde, si je recharge maintenant,

468
00:26:43,010 --> 00:26:45,520
J'ai, en effet, voir à droite à l'intérieur de ma propre page web une image.

469
00:26:45,520 --> 00:26:48,570
Nous avons donc maintenant une balise d'image, une balise d'ancrage et autres,

470
00:26:48,570 --> 00:26:51,320
et pour faire bonne mesure, permettez-moi de faire une autre chose qui est souvent négligé

471
00:26:51,320 --> 00:26:55,900
sur les sites Internet de nos jours: Offrons un texte descriptif pour cette image

472
00:26:55,900 --> 00:26:58,090
pour les personnes qui sont sur un appareil mobile

473
00:26:58,090 --> 00:27:00,640
et pourrait donc ne pas être en mesure de télécharger cette image très rapidement,

474
00:27:00,640 --> 00:27:03,310
pour les personnes qui sont aveugles et ne pas être en mesure de voir l'image

475
00:27:03,310 --> 00:27:06,480
mais ils pourraient avoir un lecteur d'écran qui peut leur dire ce que cette image est de.

476
00:27:06,480 --> 00:27:09,100
Et pour ce faire, il existe un autre attribut pour les balises images

477
00:27:09,100 --> 00:27:11,290
alt appelé, pour le texte de remplacement.

478
00:27:11,290 --> 00:27:14,650
Et ce que je peux faire ici est de dire: «C'est un renard brun rapide.

479
00:27:14,650 --> 00:27:17,650
De sorte que même si l'homme ne peut pas voir l'image sur l'écran,

480
00:27:17,650 --> 00:27:20,560
il ou elle peut au moins entendre, comme avec un morceau de logiciel,

481
00:27:20,560 --> 00:27:23,080
ce qui est réellement là-bas sur l'écran.

482
00:27:23,080 --> 00:27:25,040
>> Cela ne changera pas l'esthétique de la page,

483
00:27:25,040 --> 00:27:27,640
mais il est certainement de bonnes pratiques pour les utilisateurs.

484
00:27:27,640 --> 00:27:31,760
Bon, laissons cette page Web sous sa forme actuelle,

485
00:27:31,760 --> 00:27:33,890
mais nous allons voir si nous ne pouvons maintenant introduire

486
00:27:33,890 --> 00:27:36,210
certaines approches mieux à la rédaction de ces pages Web,

487
00:27:36,210 --> 00:27:39,980
quelques leçons qui vont nous servir ainsi que nos pages deviennent de plus en plus complexe.

488
00:27:39,980 --> 00:27:42,220
Qu'est-ce que nous n'allons pas le faire au cours des prochaines semaines

489
00:27:42,220 --> 00:27:46,810
qui vous guidera à travers toutes les balises HTML de plusieurs dizaines qui y sont.

490
00:27:46,810 --> 00:27:49,800
Tout comme dans zéro de retour à la semaine 0, il suffira sans doute

491
00:27:49,800 --> 00:27:52,120
de donner un aperçu de haut niveau de quelques-uns des concepts,

492
00:27:52,120 --> 00:27:54,530
un rapide tour d'horizon de quelques-uns des blocs vous étiez probablement en mesure,

493
00:27:54,530 --> 00:27:58,240
assez confortablement, de naviguer sur vos propres, les différentes pièces du puzzle.

494
00:27:58,240 --> 00:28:00,460
Et ce qui va se passer à nouveau en HTML, le plus probable,

495
00:28:00,460 --> 00:28:04,320
où il ya de vastes ressources sur le Web que nous vous mettrons à,

496
00:28:04,320 --> 00:28:06,920
divers manuels, si vous préférez lire un manuel,

497
00:28:06,920 --> 00:28:10,560
qui vous guidera à travers toutes les différentes choses que vous pouvez faire avec HTML,

498
00:28:10,560 --> 00:28:16,100
mais en réalité, nous avons vu jusqu'à présent en HTML plupart des concepts fondamentaux.

499
00:28:16,100 --> 00:28:19,900
Nous avons la notion de balises étant ouverts, les étiquettes étant fermée.

500
00:28:19,900 --> 00:28:22,100
Certaines balises qui sont à la fois ouverts et fermés

501
00:28:22,100 --> 00:28:24,620
dans le sens où elles sont vides; rien ne devrait l'intérieur d'eux

502
00:28:24,620 --> 00:28:27,490
comme une balise d'image ou un saut de ligne, qui sont juste là.

503
00:28:27,490 --> 00:28:32,330
Nous avons également examiné déjà à l'idée d'un attribut, comme alt ou la source.

504
00:28:32,330 --> 00:28:36,410
Notez que ces mots ont tendance, par convention, pour être court et concis.

505
00:28:36,410 --> 00:28:39,140
>> Nous n'avons pas de pouvoir discrétionnaire sur ce que ces choses sont dites,

506
00:28:39,140 --> 00:28:42,060
quelqu'un d'autre qui a inventé HTML est venu avec ces noms.

507
00:28:42,060 --> 00:28:44,710
Donc, il vous suffit de commencer à connaître ou rechercher, chaque fois que vous en avez besoin,

508
00:28:44,710 --> 00:28:47,160
quels sont les noms sont ces balises et attributs.

509
00:28:47,160 --> 00:28:49,510
Dans le cas de ces attributs, attribue généralement

510
00:28:49,510 --> 00:28:52,900
modifier le comportement de certaines balises.

511
00:28:52,900 --> 00:28:55,710
Dans ce cas, l'attribut source indique la balise d'image

512
00:28:55,710 --> 00:28:57,940
quelle est la source de l'image devrait être.

513
00:28:57,940 --> 00:29:04,460
L'attribut href indique la balise d'ancrage ce qui doit en fait être le lien.

514
00:29:04,460 --> 00:29:06,800
Mais en termes de la structure d'une page Web, même si Facebook

515
00:29:06,800 --> 00:29:09,680
et Google et le regard comme comme un désordre complet

516
00:29:09,680 --> 00:29:12,560
sous le capot, à première vue, si vous commencez à lire à travers elle

517
00:29:12,560 --> 00:29:16,950
plus méthodiquement, ils suivent tous cette base, la structure de base.

518
00:29:16,950 --> 00:29:19,660
Mais nous pouvons améliorer la stylisation de ces choses.

519
00:29:19,660 --> 00:29:24,180
Alors laissez-moi aller à quelques exemples que j'ai préparés à l'avance.

520
00:29:24,180 --> 00:29:27,280
Permettez-moi aller de l'avant et de les copier dans un autre dossier ici

521
00:29:27,280 --> 00:29:29,380
et les mettre dans ce répertoire.

522
00:29:29,380 --> 00:29:32,210
À l'avance, ce que j'ai fait préparer quelques fichiers:

523
00:29:32,210 --> 00:29:35,670
search0, recherche1, recherche2, et search3 et 4.

524
00:29:35,670 --> 00:29:38,740
Permettez-moi aller de l'avant et d'ouvrir la première de ces fichiers,

525
00:29:38,740 --> 00:29:42,570
et nous allons voir si nous ne pouvons pas commencer à créer notre propre moteur de recherche.

526
00:29:42,570 --> 00:29:46,530
Au sommet de ce fichier, comme c'est habituellement le cas dans la classe, juste un tas de commentaires.

527
00:29:46,530 --> 00:29:49,760
En HTML, cependant, les moyens par lesquels vous commencez un commentaire

528
00:29:49,760 --> 00:29:55,640
est <-! et puis vous êtes à l'intérieur d'un commentaire, d'un commentaire multi-ligne.

529
00:29:55,640 --> 00:29:59,800
Lorsque vous êtes prêt à arrêter ce commentaire, vous pouvez le faire ->.

530
00:29:59,800 --> 00:30:02,380
Donc, tout en haut en bleu, c'est juste un commentaire.

531
00:30:02,380 --> 00:30:04,620
>> C'est ma déclaration doctype, qui encore une fois,

532
00:30:04,620 --> 00:30:07,080
il vous suffit de copier et coller sur la foi, pour l'instant.

533
00:30:07,080 --> 00:30:10,410
Cela indique simplement le navigateur, 'Voici quelques-unes HTML 5.

534
00:30:10,410 --> 00:30:13,600
En dessous, sur la ligne 14, est le premier de mes tags réelles,

535
00:30:13,600 --> 00:30:16,900
et cela dit tout simplement, comme avant, voici un peu de HTML,

536
00:30:16,900 --> 00:30:19,460
voici la tête de ma page, voici le titre,

537
00:30:19,460 --> 00:30:23,900
puis, à l'inverse, c'est tout pour le titre, c'est tout pour la tête.

538
00:30:23,900 --> 00:30:26,460
Voici venir maintenant le corps de ma page.

539
00:30:26,460 --> 00:30:31,040
Donc deux balises h1 nouvelles maintenant: est pour la rubrique 1.

540
00:30:31,040 --> 00:30:33,850
Il s'agit d'une tradition en HTML depuis de nombreuses années en arrière

541
00:30:33,850 --> 00:30:37,990
d'avoir différentes tailles de texte.

542
00:30:37,990 --> 00:30:41,980
Et retour dans la journée, chacun voulait dire, en général, tout gros et gras.

543
00:30:41,980 --> 00:30:45,860
Mais il ya aussi h2, qui est grande, mais pas tout à fait aussi gros et gras.

544
00:30:45,860 --> 00:30:49,320
Il ya h3, ce qui est assez grande, mais pas aussi gros et gras,

545
00:30:49,320 --> 00:30:52,380
et ainsi de suite, tout le chemin jusqu'à h6.

546
00:30:52,380 --> 00:30:55,550
Ces jours-ci, cependant, h1, h2 et h3 sont vraiment destinées

547
00:30:55,550 --> 00:30:57,980
pour avoir un sens plus sémantique pour eux,

548
00:30:57,980 --> 00:31:01,100
où h1 est vraiment un titre: le titre d'une page Web,

549
00:31:01,100 --> 00:31:04,210
le titre d'une colonne ou quelque chose comme ça de texte.

550
00:31:04,210 --> 00:31:09,030
J'ai donc dit délibérément h1 CS50 recherche> h1

551
00:31:09,030 --> 00:31:12,640
pour spécifier que c'est vraiment le titre, le titre de ma page.

552
00:31:12,640 --> 00:31:14,850
Pas le titre dans le sens barre de titre,

553
00:31:14,850 --> 00:31:18,960
mais le titre que vous voyez à la page web elle-même, dans le corps.

554
00:31:18,960 --> 00:31:20,990
Maintenant, vous pouvez probablement le deviner ce qu'elle est,

555
00:31:20,990 --> 00:31:23,110
même si nous avons quelques nouvelles pièces de la syntaxe.

556
00:31:23,110 --> 00:31:25,930
Il s'agit d'un formulaire. Ainsi, le Web devient vraiment intéressant

557
00:31:25,930 --> 00:31:28,770
lorsque des sites Web prennent suggestions des utilisateurs.

558
00:31:28,770 --> 00:31:31,700
Dans cette classe, le problème posé sur la programmation web,

559
00:31:31,700 --> 00:31:33,880
nous n'allons pas faire un site web, en soi,

560
00:31:33,880 --> 00:31:37,570
avec un contenu statique qui montre des photos que vous avez prises,

561
00:31:37,570 --> 00:31:40,010
ou c'est mon CV, et les choses autour de moi,

562
00:31:40,010 --> 00:31:42,450
parce que ces choses sont relativement faciles à mettre ensemble.

563
00:31:42,450 --> 00:31:44,400
Il est difficile de faire de belles choses sur le Web,

564
00:31:44,400 --> 00:31:46,390
mais au moins de mettre en place le contenu est assez trivial.

565
00:31:46,390 --> 00:31:49,380
Mais les choses deviennent vraiment intéressantes quand on peut visiter votre site Web

566
00:31:49,380 --> 00:31:52,260
et fournir des commentaires et peut remplir des formulaires,

567
00:31:52,260 --> 00:31:55,800
pouvez cocher les cases à cocher et peut interagir avec votre site web.

568
00:31:55,800 --> 00:31:57,780
Et en effet, probablement tous les sites que vous aimez

569
00:31:57,780 --> 00:32:00,710
ces jours-ci, dans le détail, est en quelque sorte interactif.

570
00:32:00,710 --> 00:32:03,110
Facebook, Google, etc, qui prennent entrée de l'utilisateur

571
00:32:03,110 --> 00:32:05,100
et produire une sortie spécifique.

572
00:32:05,100 --> 00:32:07,780
>> Donc, nous allons commencer à le faire maintenant. Faisons maintenant la transition

573
00:32:07,780 --> 00:32:11,150
d'un peu aide HTML pour le balisage du contenu statique

574
00:32:11,150 --> 00:32:14,790
que la place d'un mécanisme de distribution pour le contenu dynamique.

575
00:32:14,790 --> 00:32:17,350
Et à cette fin, nous allons mettre en œuvre notre propre moteur de recherche.

576
00:32:17,350 --> 00:32:20,820
Faisons-le comme suit. Voici la balise form.

577
00:32:20,820 --> 00:32:24,090
L'attribut action spécifie que lorsque l'utilisateur remplit ce formulaire

578
00:32:24,090 --> 00:32:28,400
avec leur clavier, il sera soumis à cette URL ici.

579
00:32:28,400 --> 00:32:31,230
Donc, je suis une sorte de tricherie. Ça va nous prendre un peu plus longtemps

580
00:32:31,230 --> 00:32:33,780
d'une classe à mettre en œuvre l'ensemble des moteurs de recherche,

581
00:32:33,780 --> 00:32:35,880
donc nous allons simplement faire l'avant, pour ainsi dire.

582
00:32:35,880 --> 00:32:38,650
Nous ferons le cadre qui permet la recherche des utilisateurs, et nous allons régler de botté de dégagement à Google

583
00:32:38,650 --> 00:32:40,950
la partie la plus difficile de trouver des résultats de la recherche,

584
00:32:40,950 --> 00:32:43,520
mais, précisément, je vais parler au serveur Web de Google

585
00:32:43,520 --> 00:32:46,710
en utilisant une des deux méthodes très populaires.

586
00:32:46,710 --> 00:32:50,000
L'une étant d'obtenir, un autre, que nous finirons par voir, étant de poste,

587
00:32:50,000 --> 00:32:52,660
bien qu'il y en a d'autres qui sont moins souvent utilisés.

588
00:32:52,660 --> 00:32:56,440
Donc obtenir tout évoque l'idée d', je veux obtenir un certain contenu, obtenir des résultats de recherche.

589
00:32:56,440 --> 00:32:58,440
Cela, vous pouvez peut-être deviner ce qu'il fait.

590
00:32:58,440 --> 00:33:01,900
C'est une sorte d'entrée, il est, en fait, va ressembler à un champ de texte,

591
00:33:01,900 --> 00:33:05,200
et le nom de cette entrée, le nom de la variable, pour ainsi dire,

592
00:33:05,200 --> 00:33:08,610
va être q pour la requête par convention.

593
00:33:08,610 --> 00:33:11,700
Et encore, le type de cette entrée ne va pas être une case à cocher;

594
00:33:11,700 --> 00:33:13,890
ça ne va pas être un menu, il va y avoir un champ de texte

595
00:33:13,890 --> 00:33:18,060
comme indiqué par cet attribut ici, et cette zone de texte,

596
00:33:18,060 --> 00:33:20,680
comme un saut de ligne, soit là ou non.

597
00:33:20,680 --> 00:33:24,480
Nous avons donc un élément vide avec la barre oblique à l'intérieur de cette balise.

598
00:33:24,480 --> 00:33:28,050
Alors je vais mettre un saut de ligne, et vous pouvez peut-être deviner ce que cela va faire.

599
00:33:28,050 --> 00:33:30,210
C'est une autre sorte de formulaire de saisie.

600
00:33:30,210 --> 00:33:32,350
>> Celui-ci va être utilisé pour soumettre le formulaire.

601
00:33:32,350 --> 00:33:36,140
Donc cela va être le gros bouton que l'utilisateur peut cliquer pour envoyer le formulaire,

602
00:33:36,140 --> 00:33:40,800
et l'étiquette de ce bouton sera 'CS50 Recherche.

603
00:33:40,800 --> 00:33:44,170
Fermez Formulaire, corps fin, gros HTML.

604
00:33:44,170 --> 00:33:46,280
Voyons ce que nous avons sous la forme de cette page web.

605
00:33:46,280 --> 00:33:48,260
Alors laissez-moi aller à mon navigateur,

606
00:33:48,260 --> 00:33:50,360
laissez-moi aller, encore, à l'hôte local.

607
00:33:50,360 --> 00:33:54,650
C'est encore index.html, donc si je veux voir ce fichier appelé search0,

608
00:33:54,650 --> 00:33:59,710
Je peux simplement faire / search0.html, entrez -

609
00:33:59,710 --> 00:34:01,880
et le premier de mes erreurs.

610
00:34:01,880 --> 00:34:04,400
Que se passe-t-il? J'ai clairement n'avez pas la permission

611
00:34:04,400 --> 00:34:06,430
d'accéder à ce fichier, pour une raison quelconque.

612
00:34:06,430 --> 00:34:10,170
Mais c'est parce que, contrairement au travail que nous avons accompli à ce jour en C,

613
00:34:10,170 --> 00:34:14,340
où les programmes que vous écrivez sont supposés être runable par vous,

614
00:34:14,340 --> 00:34:17,590
exécutable par vous, ce n'est pas vraiment le cas sur le Web,

615
00:34:17,590 --> 00:34:21,010
où, parfois, vous voudrez peut-être créer des fichiers sur un serveur,

616
00:34:21,010 --> 00:34:23,310
mais vous ne voulez pas que le monde entier puisse les voir.

617
00:34:23,310 --> 00:34:25,469
Au contraire, vous voulez que le monde de voir certains fichiers

618
00:34:25,469 --> 00:34:27,730
mais pas d'autres, juste pour l'amour de la vie privée.

619
00:34:27,730 --> 00:34:30,730
Donc, il s'agit plus d'une base opt-in lorsque vous faites des choses sur le Web.

620
00:34:30,730 --> 00:34:32,810
Et permettez-moi de taper ls fait ici,

621
00:34:32,810 --> 00:34:37,440
et vous voyez les fichiers que j'ai, mais rappelons que si je fais ls-l pour longtemps,

622
00:34:37,440 --> 00:34:41,520
Je vais prendre une longue liste qui me donne quelques détails sur ces fichiers

623
00:34:41,520 --> 00:34:45,139
qui sont maintenant, vraiment, pour la première fois pertinent pour nous.

624
00:34:45,139 --> 00:34:47,840
Notez que sur l'extrême droite sont les noms de mes fichiers,

625
00:34:47,840 --> 00:34:50,690
puis l'heure à laquelle ils ont été modifiés ou copiés.

626
00:34:50,690 --> 00:34:54,370
Ce nombre ici, c'est quoi? Vous souvenez-vous?

627
00:34:54,370 --> 00:34:56,400
La taille en octets, la taille du fichier est.

628
00:34:56,400 --> 00:34:59,520
>> Donc, il me semble avoir une sorte de logo ici qui est plus grand que tous les autres fichiers.

629
00:34:59,520 --> 00:35:03,610
Voilà qui je suis, c'est ce que je suis et ce que je suis dedans groupe

630
00:35:03,610 --> 00:35:07,430
Mais alors, là-bas sur la gauche est un peu cryptique de la séquence,

631
00:35:07,430 --> 00:35:10,040
et nous avons parlé, je crois, bref à ce sujet dans le passé,

632
00:35:10,040 --> 00:35:12,050
mais cela a à voir avec les permissions.

633
00:35:12,050 --> 00:35:14,020
Et même si c'est un peu flou,

634
00:35:14,020 --> 00:35:17,270
RW signifie probablement lire et écrire.

635
00:35:17,270 --> 00:35:22,560
Ainsi, il s'avère que ces traits dénotent des ensembles d'autorisations différentes pour différentes personnes.

636
00:35:22,560 --> 00:35:24,730
Et la tendance est, pour l'essentiel, comme suit.

637
00:35:24,730 --> 00:35:27,650
Lorsque vous voyez une séquence de tirets ici, ils regardent comme suit.

638
00:35:27,650 --> 00:35:30,450
Il s'agit d'un tableau de bord, puis il ya encore trois tirets,

639
00:35:30,450 --> 00:35:33,390
puis, il ya trois autres, puis il ya un autre trois.

640
00:35:33,390 --> 00:35:36,800
La première est soit un tableau de bord ou son annonce pour le répertoire.

641
00:35:36,800 --> 00:35:40,220
Alors que l'on est assez facile. Si c'est un dossier, il est dit d, sinon c'est un trait d'union.

642
00:35:40,220 --> 00:35:44,080
Il ya un couple d'autres cas, mais pour l'instant nous allons juste prendre soin sur les fichiers et les répertoires.

643
00:35:44,080 --> 00:35:48,090
Ces trois prochaines tirets - et j'ai inséré artificiellement les espaces.

644
00:35:48,090 --> 00:35:50,490
Ils étaient, de toute évidence, pas là quand nous les avons vus tout à l'heure.

645
00:35:50,490 --> 00:35:52,900
Ce sont les autorisations du propriétaire du fichier,

646
00:35:52,900 --> 00:35:55,840
et de rappeler d'une part, qu'il ya été lire et écrire.

647
00:35:55,840 --> 00:35:58,560
C'était parce que, comme la personne qui a créé ce fichier il ya un instant,

648
00:35:58,560 --> 00:36:01,250
Moi, tout simplement par défaut, sur un ordinateur Linux,

649
00:36:01,250 --> 00:36:03,910
ont la capacité de continuer à lire et à écrire dans ce fichier.

650
00:36:03,910 --> 00:36:07,170
>> Ainsi, le système d'exploitation me donne juste RW automatiquement.

651
00:36:07,170 --> 00:36:10,840
Celles du milieu en relation avec mon groupe, celui des étudiants,

652
00:36:10,840 --> 00:36:14,590
qui est une sorte de sens sur l'appareil parce que je suis la seule personne à utiliser l'appareil.

653
00:36:14,590 --> 00:36:16,620
Alors permettez-moi de saluer mes mains là pour l'instant.

654
00:36:16,620 --> 00:36:19,190
Mais les derniers sont les plus importants pour le Web.

655
00:36:19,190 --> 00:36:21,580
C'est tout le monde dans le monde, et le fait

656
00:36:21,580 --> 00:36:24,600
que cela est --- signifie que personne d'autre dans le monde

657
00:36:24,600 --> 00:36:26,680
a toutes les autorisations pour ce dossier.

658
00:36:26,680 --> 00:36:29,180
Clairement un problème, donc j'ai besoin de résoudre ce problème

659
00:36:29,180 --> 00:36:33,830
en quelque sorte par donner au monde ce? Lire et écrire?

660
00:36:33,830 --> 00:36:35,850
C'est probablement stupide, non? Je ne veux pas que quiconque sur le Web

661
00:36:35,850 --> 00:36:38,530
pour aller visiter ma page et changer quelque chose à ce fichier,

662
00:36:38,530 --> 00:36:40,800
même si elles ne pouvaient pas vraiment avec un fichier HTML,

663
00:36:40,800 --> 00:36:44,110
mais seulement en principe, probablement veux juste qu'ils soient en mesure de le lire.

664
00:36:44,110 --> 00:36:47,910
Qu'est-ce que cela signifie de le lire? Cela ne signifie pas qu'ils vont se soucier de l'HTML réel,

665
00:36:47,910 --> 00:36:51,820
mais le navigateur doit être capable d'analyser que langage de balisage,

666
00:36:51,820 --> 00:36:53,720
de haut en bas, de gauche à droite.

667
00:36:53,720 --> 00:36:57,990
Donc, quelqu'un sur le Web doit être capable de le lire, donc je peu besoin de lui donner r.

668
00:36:57,990 --> 00:37:00,240
Je peux le faire de plusieurs façons différentes, mais peut-être

669
00:37:00,240 --> 00:37:03,080
le plus simple est d'exécuter cette commande ici.

670
00:37:03,080 --> 00:37:10,860
Chmod, changement de mode, alors a + r donc tout à tous, dans le monde + lire,

671
00:37:10,860 --> 00:37:13,830
puis le nom du fichier, search0.html.

672
00:37:13,830 --> 00:37:18,310
>> Et si je fais ls-l nouveau, noter que ce fichier a changé,

673
00:37:18,310 --> 00:37:21,440
et en effet, j'ai allumé r pour tout le monde.

674
00:37:21,440 --> 00:37:23,350
Je l'ai aussi mis en marche pour mon groupe, mais c'est très bien,

675
00:37:23,350 --> 00:37:27,150
parce que si je me suis tourné dans le tout le monde, mon groupe est un sous-ensemble de cela.

676
00:37:27,150 --> 00:37:31,480
Donc, c'est très bien aussi. Cela signifie simplement que l'ordinateur a maintenant rendu lisible.

677
00:37:31,480 --> 00:37:34,430
Maintenant, permettez-moi de revenir à mon navigateur, cliquez sur recharger.

678
00:37:34,430 --> 00:37:36,330
Ah-ha. Nous avons maintenant CS50 Recherche.

679
00:37:36,330 --> 00:37:39,830
J'ai zoomé dans un peu artificiellement - moteur de recherche assez hideux.

680
00:37:39,830 --> 00:37:41,930
Mais nous allons voir si cela fonctionne réellement.

681
00:37:41,930 --> 00:37:45,880
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.

682
00:37:45,880 --> 00:37:50,780
Notez que dans Chrome nous voyons maintenant le même code HTML que j'ai créé moi-même.

683
00:37:50,780 --> 00:37:55,420
Ne vous trompez pas ici, cependant. Je ne peux pas commencer à changer le code ici,

684
00:37:55,420 --> 00:37:59,420
parce que le navigateur dispose d'une vue en lecture seule de ce code.

685
00:37:59,420 --> 00:38:06,060
Le navigateur vient de demander à l'hôte local pour un fichier appelé search0.html.

686
00:38:06,060 --> 00:38:09,490
Il est maintenant pure coïncidence que l'appareil

687
00:38:09,490 --> 00:38:13,480
se trouve être sur le même ordinateur que mon navigateur.

688
00:38:13,480 --> 00:38:20,470
Je pouvais avoir, de façon équivalente, ont tapé dans www.facebook.com/search0.html,

689
00:38:20,470 --> 00:38:23,830
et si Facebook était un fichier appelé, je serait alors de voir leur code HTML.

690
00:38:23,830 --> 00:38:27,360
Et, bien sûr, je ne peux pas changer le fichier qui revient de Facebook, que ce soit.

691
00:38:27,360 --> 00:38:29,360
Alors maintenant, nous sommes en quelque sorte brouiller les lignes.

692
00:38:29,360 --> 00:38:32,130
L'appareil est à la fois un serveur, servir des pages web,

693
00:38:32,130 --> 00:38:34,870
mais c'est aussi un client dans le sens que je suis en utilisant un navigateur

694
00:38:34,870 --> 00:38:37,630
à réellement parler à ce serveur.

695
00:38:37,630 --> 00:38:39,610
Alors voyons voir si mon moteur de recherche Google fonctionne.

696
00:38:39,610 --> 00:38:44,930
Laissez-moi aller de l'avant et chercher quick brown fox, entrez.

697
00:38:44,930 --> 00:38:47,540
Et voila, j'ai maintenant mon propre moteur de recherche.

698
00:38:47,540 --> 00:38:51,460
>> Mais comment ça marche?

699
00:38:51,460 --> 00:38:55,380
Peu exagéré, mais - et maintenant vous ne pouvez pas voir, précisément, la partie qui est d'intérêt.

700
00:38:55,380 --> 00:38:57,370
Remarquez ce qui se passe.

701
00:38:57,370 --> 00:39:00,430
Notez l'URL. Il s'avère que cette méthode,

702
00:39:00,430 --> 00:39:02,780
appelée obtenir, c'est super simple.

703
00:39:02,780 --> 00:39:10,270
Lorsque vous spécifiez dans une forme que vous souhaitez «faire» les résultats de certains serveurs,

704
00:39:10,270 --> 00:39:13,200
ce qu'il va faire est de prendre tout ce que vous avez tapé dans le formulaire

705
00:39:13,200 --> 00:39:15,290
et le mettre dans l'URL.

706
00:39:15,290 --> 00:39:18,580
Il va normaliser la façon dont il se mettre dans l'URL comme suit.

707
00:39:18,580 --> 00:39:22,290
Notez que ceci est l'URL qui est la valeur de mon attribut action.

708
00:39:22,290 --> 00:39:24,730
C'est là que je voulais le formulaire pour finir.

709
00:39:24,730 --> 00:39:26,950
Mais remarquez ce point d'interrogation.

710
00:39:26,950 --> 00:39:30,230
Il s'agit d'une convention sur le Web de façon à fournir saisie de l'utilisateur

711
00:39:30,230 --> 00:39:35,320
à un site Web, vous devez spécifier l'URL d'un point d'interrogation,

712
00:39:35,320 --> 00:39:38,330
et puis vous avez tout un tas de paires clé-valeur.

713
00:39:38,330 --> 00:39:42,380
Le nom d'une touche, autrement connu en tant que paramètre dans le Web,

714
00:39:42,380 --> 00:39:46,380
alors vous avez un signe égal, alors vous avez la valeur de ce paramètre.

715
00:39:46,380 --> 00:39:49,810
Donc, il s'agit essentiellement d'un nom de variable et une valeur variable,

716
00:39:49,810 --> 00:39:54,250
mais les noms de ceux des variables et des valeurs venue du formulaire HTML.

717
00:39:54,250 --> 00:39:56,250
Pourquoi les points positifs là, pensez-vous?

718
00:39:56,250 --> 00:39:59,340
Parce que je n'ai pas taper + entre mes mots.

719
00:39:59,340 --> 00:40:01,430
[Étudiant, inintelligible]

720
00:40:01,430 --> 00:40:05,080
>> Ouais, c'est juste pour l'espacement. Les chances sont, chaque fois que vous avez vu une URL,

721
00:40:05,080 --> 00:40:07,320
il n'y a jamais eu des espaces, si ce n'est que parce

722
00:40:07,320 --> 00:40:09,440
s'il y avait, on ne pouvait pas vraiment copier et le coller

723
00:40:09,440 --> 00:40:12,700
dans un IM ou dans un courriel, car il allait se briser.

724
00:40:12,700 --> 00:40:15,420
Vous voulez que le tout soit une chaîne de caractères contigus.

725
00:40:15,450 --> 00:40:18,450
>> Ainsi, le navigateur est assez intelligent pour se rendre compte, uh-uh.

726
00:40:18,450 --> 00:40:22,610
Ne vous contentez pas de mettre un espace là-bas. Permettez-moi de coder l'espace d'une certaine façon standard.

727
00:40:22,610 --> 00:40:25,170
L'une des conventions de le faire est d'avoir le navigateur

728
00:40:25,170 --> 00:40:29,350
automatiquement mis a + où vous auriez un espace.

729
00:40:29,350 --> 00:40:32,140
Alors maintenant, avis Google a été un peu conviviaux.

730
00:40:32,140 --> 00:40:34,380
Je n'ai certainement pas créer cette page web,

731
00:40:34,380 --> 00:40:37,200
mais ils ont prérempli leur domaine propre texte

732
00:40:37,200 --> 00:40:39,490
avec ce qui, précisément, j'ai tapé po

733
00:40:39,490 --> 00:40:43,090
Supposons que je veux à la recherche de quelque chose d'autre, comme un chien paresseux.

734
00:40:43,090 --> 00:40:45,340
Je peux simplement taper ceci ici, la re-cherche.

735
00:40:45,340 --> 00:40:47,730
Notez que l'URL change ici,

736
00:40:47,730 --> 00:40:51,390
mais remarque alors que je peux réellement chercher ce que je veux

737
00:40:51,390 --> 00:40:53,610
tout en comprenant comment fonctionnent les URL.

738
00:40:53,610 --> 00:40:56,840
Je pourrais faire chat paresseux, entrez,

739
00:40:56,840 --> 00:41:01,370
et remarquez maintenant, je vais avoir un très paresseux - faut-il? Je me sens comme nous le devrions.

740
00:41:01,370 --> 00:41:09,900
Je reçois un chat très paresseux.

741
00:41:09,900 --> 00:41:11,930
Très bien. C'est l'une des choses les plus stupides que nous avons fait.

742
00:41:11,930 --> 00:41:17,160
Mais c'est un chat paresseux.

743
00:41:17,160 --> 00:41:19,730
Quoi qu'il en soit, ce qui est la clé ici à emporter?

744
00:41:19,730 --> 00:41:22,830
Maintenant, nous sommes en quelque sorte de jouer dans le monde de HTTP.

745
00:41:22,830 --> 00:41:26,050
HTML est juste ce langage de balisage, balise ouverte, balise de fermeture,

746
00:41:26,050 --> 00:41:29,490
qui indique au navigateur comment afficher du contenu sur une page Web.

747
00:41:29,490 --> 00:41:32,850
Mais quand vous commencez la transmission de données sur Internet

748
00:41:32,850 --> 00:41:36,290
entre le navigateur et le serveur, c'est là que ce protocole

749
00:41:36,290 --> 00:41:39,370
connu sous le nom HyperText Transfer Protocol prend le relais.

750
00:41:39,370 --> 00:41:42,630
C'est le genre de convention humaine, quand Sam et j'ai serré la main lundi,

751
00:41:42,630 --> 00:41:48,300
à partir d'une connexion, puis la fermeture d'une connexion, même idée ici.

752
00:41:48,300 --> 00:41:53,100
Comment les résultats de Google me revient?

753
00:41:53,100 --> 00:41:55,290
Comment mon formulaire de soumission aller sur Google?

754
00:41:55,290 --> 00:41:58,160
Eh bien, rappelle l'autre jour que ce qui se passe réellement

755
00:41:58,160 --> 00:42:02,150
sous le capot lorsque vous demandez une page web est,

756
00:42:02,150 --> 00:42:04,860
votre navigateur envoie un message quelque peu cryptique comme

757
00:42:04,860 --> 00:42:09,510
GET / HTTP/1.1 pour la page d'accueil par défaut.

758
00:42:09,510 --> 00:42:13,000
>> Ou, dans ce cas, parce que j'ai spécifiquement demandé plus tôt

759
00:42:13,000 --> 00:42:17,340
search0.html, ce serait alors le message quelque peu cryptique

760
00:42:17,340 --> 00:42:20,040
que mon navigateur envoie à l'appareil.

761
00:42:20,040 --> 00:42:23,090
Ou, dans ce cas de Google, ce qui est réellement envoyé

762
00:42:23,090 --> 00:42:33,740
est une requête pour / de recherche, et alors? q = chat paresseux, avec un plus bas.

763
00:42:33,740 --> 00:42:36,790
Donc, ce message, que je suis l'homme, je ne suis jamais taper,

764
00:42:36,790 --> 00:42:40,620
mais est envoyé par mon navigateur, voici comment se passe HTTP.

765
00:42:40,620 --> 00:42:43,240
C'est l'équivalent de nos mains après avoir secoué.

766
00:42:43,240 --> 00:42:46,320
Il s'agit de la demande, et le serveur est sur le point d'envoyer une réponse.

767
00:42:46,320 --> 00:42:48,560
Donc, nous allons jeter un oeil à ce sous le capot.

768
00:42:48,560 --> 00:42:55,320
Comme précédemment, nous pouvons ouvrir ce domaine particulier dans un navigateur.

769
00:42:55,320 --> 00:42:58,720
Voir page, inspecter des éléments.

770
00:42:58,720 --> 00:43:01,550
Ainsi, sous l'inspection élément, vous remarquerez que ce qui s'est passé dans Chrome,

771
00:43:01,550 --> 00:43:04,160
et IE et Firefox ont des mécanismes similaires,

772
00:43:04,160 --> 00:43:07,370
nous avons ces outils de développement qui nous sont accessibles.

773
00:43:07,370 --> 00:43:09,630
Les gens normaux ne pas utiliser ces onglets.

774
00:43:09,630 --> 00:43:11,940
Mais nous, maintenant, sont intéressés par ce qui se passe

775
00:43:11,940 --> 00:43:13,890
sous le capot au niveau du réseau.

776
00:43:13,890 --> 00:43:16,130
Donc, si je m'arrête au niveau du réseau ici,

777
00:43:16,130 --> 00:43:18,510
laissez-moi aller de l'avant et d'élargir cette fenêtre,

778
00:43:18,510 --> 00:43:21,840
ouvrir cette entrée ici, et regardez les en-têtes.

779
00:43:21,840 --> 00:43:26,010
Donc ce qui arrive lorsque je demande un fichier à partir d'un serveur Web

780
00:43:26,010 --> 00:43:29,410
est mon navigateur envoie tout un tas de choses.

781
00:43:29,410 --> 00:43:32,390
Et laissez-moi voir la source. Ainsi, en vertu têtes de la requête,

782
00:43:32,390 --> 00:43:35,250
Et ce n'est que Chrome me montrant une sortie de diagnostic,

783
00:43:35,250 --> 00:43:37,340
un peu comme un débogueur de quelque sorte,

784
00:43:37,340 --> 00:43:40,500
remarquerez que ce que j'ai souligné ici, c'est précisément ce que

785
00:43:40,500 --> 00:43:47,060
Chrome envoie au serveur pour demander un fichier appelé search0.html.

786
00:43:47,060 --> 00:43:50,160
Il est révélateur du serveur ce qu'il pense est son nom,

787
00:43:50,160 --> 00:43:52,210
Grâce à ce domaine du côlon hôte, puis il ya une certaine

788
00:43:52,210 --> 00:43:56,950
trucs assez ésotérique ici, comme quelque chose à voir avec les dates et heures,

789
00:43:56,950 --> 00:43:59,720
quelque chose à voir avec les langues que le navigateur comprend,

790
00:43:59,720 --> 00:44:02,850
mais les lignes sont vraiment importantes ces deux premiers ici.

791
00:44:02,850 --> 00:44:05,490
>> Qu'est-ce que le serveur répond avec? Eh bien, si nous défiler vers le bas ici

792
00:44:05,490 --> 00:44:08,510
et voir la source de cette chose, notez que le serveur

793
00:44:08,510 --> 00:44:13,700
a répondu avec un message quelque peu abscons ainsi, 304 non modifiés.

794
00:44:13,700 --> 00:44:16,030
C'est un peu étrange, permettez-moi de vraiment essayer de résoudre ce problème.

795
00:44:16,030 --> 00:44:18,670
Laisse-moi tenir la touche MAJ enfoncée et cliquez sur recharger ici

796
00:44:18,670 --> 00:44:22,460
pour forcer le navigateur pour effectivement faire cette demande pour la première fois.

797
00:44:22,460 --> 00:44:25,700
Alors laissez-moi un zoom avant, et nous allons voir maintenant que le serveur de réponse,

798
00:44:25,700 --> 00:44:28,950
parce que je tenais quart de travail, est de 200 OK.

799
00:44:28,950 --> 00:44:31,170
Donc, vous avez probablement jamais vu le numéro 200

800
00:44:31,170 --> 00:44:33,300
en nombre du contexte de l'Internet, mais ce

801
00:44:33,300 --> 00:44:36,760
avez-vous vu parfois de manière inattendue un serveur?

802
00:44:36,760 --> 00:44:42,010
404, fichier non trouvé, 403, interdit, 500, erreur de serveur.

803
00:44:42,010 --> 00:44:44,890
Donc, il ya ces codes numériques que le monde utilise dans le Web

804
00:44:44,890 --> 00:44:47,870
pour signifier des erreurs, tout comme les fonctions C

805
00:44:47,870 --> 00:44:51,030
peut retourner des erreurs et principal peut retourner des codes de sortie.

806
00:44:51,030 --> 00:44:54,160
200, cependant, on voit rarement parce que cela signifie que tout va bien.

807
00:44:54,160 --> 00:44:59,000
Et 304 vous n'avez probablement jamais voir parce que ce qui est le signifiant?

808
00:44:59,000 --> 00:45:03,330
Que rien n'a - nous allons voir si nous pouvons simuler ce nouveau -

809
00:45:03,330 --> 00:45:07,170
Oh, ce n'est pas coopérant. 304 dit pas modifié,

810
00:45:07,170 --> 00:45:09,170
alors pourquoi le serveur a été encore répondre?

811
00:45:09,170 --> 00:45:12,550
Eh bien, pour une efficacité, un serveur Web automatiquement pour vous,

812
00:45:12,550 --> 00:45:16,570
si le fichier n'a pas changé, il ne sera pas retransmettre l'intégralité du fichier HTML.

813
00:45:16,570 --> 00:45:19,150
Il vous reste plus qu'à indiquer au navigateur qu'il n'a pas changé.

814
00:45:19,150 --> 00:45:21,220
Il suffit d'utiliser la copie que vous avez déjà.

815
00:45:21,220 --> 00:45:22,650
Donc, il ya cette notion de mise en cache sur le Web

816
00:45:22,650 --> 00:45:25,840
de la performance, de sorte que vous ne perdez pas de temps et de bande passante déchets

817
00:45:25,840 --> 00:45:29,160
téléchargement de fichiers encore et encore inutilement.

818
00:45:29,160 --> 00:45:31,460
>> Mais cette page web, maintenant, était super simple,

819
00:45:31,460 --> 00:45:34,980
et il ne montre que le HTML qui est revenue.

820
00:45:34,980 --> 00:45:40,940
Nous allons en fait utiliser l'onglet réseau maintenant pour faire une recherche Google comme quick brown fox.

821
00:45:40,940 --> 00:45:43,010
Permettez-moi puis cliquez CS50 recherche,

822
00:45:43,010 --> 00:45:46,950
et maintenant, vous remarquerez en bas ici tout un tas de choses revient

823
00:45:46,950 --> 00:45:49,900
parce que quand je visite un site réel, comme Google.com,

824
00:45:49,900 --> 00:45:53,520
ils ont des images, ils ont écrit, ils ont un langage appelé JavaScript là.

825
00:45:53,520 --> 00:45:55,940
Ainsi, chaque ligne de ce tableau ici-bas

826
00:45:55,940 --> 00:46:01,490
représente quelque chose que Google cracher en réponse à ma demande unique.

827
00:46:01,490 --> 00:46:04,160
La je me soucie, mais, est-ce la première.

828
00:46:04,160 --> 00:46:08,420
Et si je vais à la recherche, demande, cliquez ici voir la source,

829
00:46:08,420 --> 00:46:11,300
constater que, en effet, le message énigmatique que mon navigateur a envoyé

830
00:46:11,300 --> 00:46:15,010
Google a ces deux lignes ici,

831
00:46:15,010 --> 00:46:18,420
suivie de quelques informations arcanes ici que nous allons ignorer pour l'instant.

832
00:46:18,420 --> 00:46:20,890
Mais notez aussi que Chrome est très pratique avec,

833
00:46:20,890 --> 00:46:24,540
il est aussi en me montrant la chaîne de requête qui a été envoyé en

834
00:46:24,540 --> 00:46:27,410
Ainsi, plutôt que de me montrer ce qui a été littéralement envoyé,

835
00:46:27,410 --> 00:46:30,800
si je le voir décodé, Chrome, uniquement à des fins de débogage,

836
00:46:30,800 --> 00:46:34,270
pour les développeurs comme nous, c'est juste en me montrant une version conviviale des -

837
00:46:34,270 --> 00:46:36,390
ce n'est pas la façon dont vous épeler le renard, apparemment.

838
00:46:36,390 --> 00:46:40,520
Je suis juste remarquer à présent - mais c'est ce que je vous montre, apparemment, dactylographiée.

839
00:46:40,520 --> 00:46:45,340
Pendant ce temps, la réponse qui est revenue sur le serveur est de nouveau 200 OK.

840
00:46:45,340 --> 00:46:47,930
Mais inclus dans cette réponse, bien sûr,

841
00:46:47,930 --> 00:46:51,920
si l'on fait voir HTML de la page -

842
00:46:51,920 --> 00:46:55,440
désolé, c'est un peu raccourci clavier qui a mal tourné aujourd'hui.

843
00:46:55,440 --> 00:46:59,020
>> Je m'occuperai de cela plus tard. Donc, si nous avons effectivement voir la source de la page,

844
00:46:59,020 --> 00:47:02,990
que je peux faire ici en cliquant réponse,

845
00:47:02,990 --> 00:47:10,080
c'est ce qui a été fait recracher, en plus de celle cryptique 200 message OK à partir du serveur.

846
00:47:10,080 --> 00:47:12,520
Un peu cryptique, mais où est tout cela vient-il?

847
00:47:12,520 --> 00:47:15,570
Eh bien, nous allons faire autre chose ici. Une autre commande un peu cryptique,

848
00:47:15,570 --> 00:47:20,530
mais un peu celui de soigné en ce qu'elle nous révèle exactement ce qui se passe sous le capot.

849
00:47:20,530 --> 00:47:22,530
Donc, je suis de retour sur mon Mac ici, j'ai connecté

850
00:47:22,530 --> 00:47:25,980
par l'intermédiaire d'un programme appelé SSH, Secure Shell, vers un autre serveur

851
00:47:25,980 --> 00:47:28,940
parce que la plupart des ordinateurs de Harvard bloquer la commande que nous sommes sur le point de lancer

852
00:47:28,940 --> 00:47:31,640
parce qu'il ya cette commande sur certains serveurs traceroute appelé

853
00:47:31,640 --> 00:47:34,810
qui vous permet de suivre la route entre les points a et b,

854
00:47:34,810 --> 00:47:37,020
et jusqu'à présent nous avons été complètement prise pour acquis

855
00:47:37,020 --> 00:47:40,170
que je peux taper dans Google.com et en quelque sorte récupérer des données

856
00:47:40,170 --> 00:47:43,530
de l'autre bout du pays ou à l'autre bout du monde.

857
00:47:43,530 --> 00:47:45,810
Avec traceroute nous pouvons plonger dans un peu plus

858
00:47:45,810 --> 00:47:49,370
quant à la façon dont l'Internet fonctionne, et voir ce qui se passe sous le capot.

859
00:47:49,370 --> 00:47:54,440
Donc, nous allons aller de l'avant et arbitrairement tracer une route à, disons, Stanford.edu,

860
00:47:54,440 --> 00:47:57,150
qui est dans tout le pays, et appuyez sur Entrée.

861
00:47:57,150 --> 00:47:59,380
Cette commande peut être ultra-rapide ou super-lente,

862
00:47:59,380 --> 00:48:02,010
mais ce que nous voyons maintenant, ligne par ligne,

863
00:48:02,010 --> 00:48:08,060
est chacune des étapes ou de houblon entre nous et Palo Alto, ou Stanford,

864
00:48:08,060 --> 00:48:11,010
où ils ont leur serveur web.

865
00:48:11,010 --> 00:48:16,600
Alors qu'est-ce que chacune de ces lignes représentent plus concrètement, si?

866
00:48:16,600 --> 00:48:19,100
Un morceau de jargon de l'Internet? [Étudiant, inintelligible]

867
00:48:19,100 --> 00:48:21,570
>> Qu'est-ce que c'est? [Étudiant, inintelligible]

868
00:48:21,570 --> 00:48:25,390
>> Oh, il ya des moments, mais qu'est-ce que chaque rangée - qu'est-ce que je veux dire par-hop?

869
00:48:25,390 --> 00:48:29,140
>> Eh bien, il ya ces choses sur Internet appelés routeurs.

870
00:48:29,140 --> 00:48:33,020
Et routeurs, comme son nom l'indique, l'information itinéraire à partir du point a au point b.

871
00:48:33,020 --> 00:48:36,920
Mais il ya plusieurs points au-delà de a et b.

872
00:48:36,920 --> 00:48:40,010
Il est c et d, e et f entre la ligne 1,

873
00:48:40,010 --> 00:48:43,480
qui se trouve être l'adresse IP de mon ordinateur,

874
00:48:43,480 --> 00:48:46,890
ou mon adresse numérique qui identifie de manière unique mon ordinateur,

875
00:48:46,890 --> 00:48:50,300
et l'étape 15, qui est en fait le serveur web sixième,

876
00:48:50,300 --> 00:48:54,640
apparemment, que je inférer de ceci, ou la version 6 de son serveur web à Stanford.

877
00:48:54,640 --> 00:48:56,680
Mais ce qui est plutôt drôle, c'est que nous pouvons voir le chemin

878
00:48:56,680 --> 00:49:00,480
que mon 0 et 1 sont la prise de mon ordinateur à Stanford.

879
00:49:00,480 --> 00:49:02,500
Ainsi, l'étape 1 est l'adresse de mon propre ordinateur.

880
00:49:02,500 --> 00:49:05,760
Chaque ordinateur connecté à l'Internet possède un identifiant unique qui ressemble à ceci.

881
00:49:05,760 --> 00:49:08,150
Number.number.number.number.

882
00:49:08,150 --> 00:49:10,370
Quelque part sur ce campus, probablement dans le centre de la science,

883
00:49:10,370 --> 00:49:16,780
est un routeur appelé passerelle Core 2-te83, quoi que cela signifie,

884
00:49:16,780 --> 00:49:20,590
c'est donc l'un des grands routeurs de Harvard fantaisie qui achemine une grande partie de leur trafic.

885
00:49:20,590 --> 00:49:24,640
Voici une autre de routeurs de Harvard, celui-ci est Border Gateway,

886
00:49:24,640 --> 00:49:28,310
sens frontière, c'est probablement à la périphérie du campus quelque part.

887
00:49:28,480 --> 00:49:32,790
Ensuite, il ya nox une, ligne 4, qui est Carrefour du Nord,

888
00:49:32,790 --> 00:49:35,070
qui est un grand fournisseur d'accès Internet, fournisseur de services Internet,

889
00:49:35,070 --> 00:49:37,740
que des endroits comme Harvard connecter jusqu'à.

890
00:49:37,740 --> 00:49:40,760
Mais alors les choses deviennent un peu plus intéressant à la ligne 6.

891
00:49:40,760 --> 00:49:45,960
Où sont mes morceaux tout d'un coup? Kansas.

892
00:49:45,960 --> 00:49:49,300
Le monde a l'habitude d'utiliser des codes d'aéroport dans beaucoup de ces choses,

893
00:49:49,300 --> 00:49:52,900
ou au moins des abréviations pour les États ou villes,

894
00:49:52,900 --> 00:49:56,490
de sorte qu'il ressemble, en seulement 60 ms,

895
00:49:56,490 --> 00:49:59,420
un paquet d'informations, 0 et 1 au niveau de mon ordinateur portable

896
00:49:59,420 --> 00:50:03,210
eu tout le chemin vers le Kansas, et encore une fois, en 60 ms.

897
00:50:03,210 --> 00:50:08,180
>> Par ailleurs, après le Kansas, ils ont pris un tour à travers Houston, probablement,

898
00:50:08,180 --> 00:50:10,140
comme le suggère le nom de ce serveur.

899
00:50:10,140 --> 00:50:13,310
Ainsi, tout comme un serveur sur Internet doit avoir une adresse numérique,

900
00:50:13,310 --> 00:50:18,360
il peut aussi, éventuellement, avoir une adresse un peu plus humaine de l'environnement que les humains ont proposé.

901
00:50:18,360 --> 00:50:20,510
Maintenant, à l'étape 8, nous ne savons pas ce que c'est.

902
00:50:20,510 --> 00:50:22,550
Parfois, les routeurs juste aimable à vous ignorer,

903
00:50:22,550 --> 00:50:25,010
et ils n'ont tout simplement pas répondu aux questions, c'est très bien.

904
00:50:25,010 --> 00:50:29,290
L'un après l'étape 8 est apparemment où? L.A.

905
00:50:29,290 --> 00:50:35,290
Notez que dans seulement 78 ms, ce qui nous prend des êtres humains comme 6 + heures pour faire physiquement,

906
00:50:35,290 --> 00:50:40,110
prend des paquets d'information sur l'Internet 78 ms pour voyager aussi loin.

907
00:50:40,110 --> 00:50:45,890
Etape 10 est à Los Angeles ainsi, et l'étape 11 semble avoir disparu au nord, jusqu'à près de Stanford.

908
00:50:45,890 --> 00:50:48,750
Il s'agit de leur routeur de bordure, ou un routeur frontière.

909
00:50:48,750 --> 00:50:51,240
Quelques étapes de Stanford qui nous ignorent,

910
00:50:51,240 --> 00:50:55,610
et enfin, nous atteignons le serveur Web en seulement 87 ms.

911
00:50:55,610 --> 00:50:57,760
Maintenant, tous ces chiffres, soit dit en passant,

912
00:50:57,760 --> 00:51:00,640
juste vous dire combien de temps il faut pour que les données à obtenir de moi

913
00:51:00,640 --> 00:51:03,530
à chacun de ces routeurs, et ce n'est pas cumulatif.

914
00:51:03,530 --> 00:51:06,960
Qu'est-ce que ce programme ne sont, il envoie d'abord un message, pour l'essentiel, au premier routeur.

915
00:51:06,960 --> 00:51:09,490
Puis une seconde au routeur, puis une troisième au routeur,

916
00:51:09,490 --> 00:51:12,610
mesurer à chaque fois. Donc, en théorie, ces moments seront de plus en plus

917
00:51:12,610 --> 00:51:14,860
ou au moins très proches l'une de l'autre,

918
00:51:14,860 --> 00:51:18,090
et, en effet, ceux qui sont ici sur le campus sont de très petite taille.

919
00:51:18,090 --> 00:51:20,820
Dès que vous commencez à aller à travers le pays, il faut des données

920
00:51:20,820 --> 00:51:24,830
un peu plus de temps pour voyager, près de 100 ms, donner ou prendre.

921
00:51:24,830 --> 00:51:28,330
Mais allons l'autre sens maintenant. Que diriez-vous l'Université de Cambridge au Royaume-Uni?

922
00:51:28,330 --> 00:51:32,540
Permettez-moi, au lieu de fonctionner traceroute de www.cam de Cambridge,

923
00:51:32,540 --> 00:51:36,710
. Ca pour les universitaires,. Fr, ici et appuyez sur Entrée.

924
00:51:36,710 --> 00:51:38,830
C'était sacrément rapide.

925
00:51:38,830 --> 00:51:43,300
Mes données littéralement allé à Cambridge, en Angleterre, dans cette fraction de seconde de temps.

926
00:51:43,300 --> 00:51:45,340
>> Voyons donc le chemin qu'il a pris.

927
00:51:45,340 --> 00:51:47,520
Harvard, Harvard, Harvard, Carrefour du Nord,

928
00:51:47,520 --> 00:51:52,690
qui est un FAI, et alors c'est Carrefour du Nord, et puis bam.

929
00:51:52,690 --> 00:51:58,320
Qu'est-ce que, entre les étapes 6 et 7, 6 et 7 du routeur?

930
00:51:58,320 --> 00:52:02,040
L'océan Atlantique. Et nous déduire ceci du fait que

931
00:52:02,040 --> 00:52:06,530
nous passons de 20 ms à 80 ms ici là.

932
00:52:06,530 --> 00:52:10,050
Donc, quelque chose a 60 ms, donner ou prendre, pour obtenir plus.

933
00:52:10,050 --> 00:52:12,910
Et ce fut sans doute un grand corps d'eau.

934
00:52:12,910 --> 00:52:15,250
Ce qui se passe après? Eh bien, nous voici à Londres,

935
00:52:15,250 --> 00:52:18,860
seulement 88 ms plus tard. Plus London, Londres plus,

936
00:52:18,860 --> 00:52:21,730
ne savez pas où c'est, mais nous allons supposer que c'est en dehors de Londres,

937
00:52:21,730 --> 00:52:26,390
Cambridge ici, et finalement nous - littéralement, Université de Cambridge

938
00:52:26,390 --> 00:52:29,500
. Something.net, et puis, finalement, à la ligne 16,

939
00:52:29,500 --> 00:52:31,720
leur serveur Web est apparemment appelé Scorpius

940
00:52:31,720 --> 00:52:35,500
sous le capot, même si nous savons que c'est www.

941
00:52:35,500 --> 00:52:38,790
Sorte de mind-blowing, je pense. La première fois que j'ai fait cela, il totalement soufflé mon esprit.

942
00:52:38,790 --> 00:52:41,670
Malheureusement, Harvard bloque ce type de trafic, en général, sur le réseau.

943
00:52:41,670 --> 00:52:44,340
Donc, vous ne pouvez pas le faire super-facile.

944
00:52:44,340 --> 00:52:48,500
Réaliser, cependant, ce n'est ici possible.

945
00:52:48,500 --> 00:52:53,630
Très bien. Prenons notre 5 minutes de pause ici. Nous reviendrons et de se plonger plus profondément.

946
00:52:53,630 --> 00:53:00,850
Donc, nous sommes de retour et nous avons chevauché genre de propos dans quelques directions différentes ici.

947
00:53:00,850 --> 00:53:03,700
Donc, résumons exactement ce qui se passe ici.

948
00:53:03,700 --> 00:53:07,990
Nous avons commencé la conversation parle cette langue appelé HTML.

949
00:53:07,990 --> 00:53:10,680
Encore une fois, pas un langage de programmation. C'est juste un langage de balisage

950
00:53:10,680 --> 00:53:15,490
c'est en grande partie sur l'esthétique et la structuration du contenu sous la forme d'une page Web.

951
00:53:15,490 --> 00:53:19,220
Mais HTML, par conséquent, besoin d'une sorte de mécanisme de

952
00:53:19,220 --> 00:53:22,870
pour les déplacements entre le navigateur et le serveur.

953
00:53:22,870 --> 00:53:28,360
HTML donc sorte de tours au-dessus de cette autre langue,

954
00:53:28,360 --> 00:53:31,280
ou, plus exactement, un protocole, appelé protocole HTTP.

955
00:53:31,280 --> 00:53:33,730
>> Et HTTP, comme nous l'avons vu jusqu'ici,

956
00:53:33,730 --> 00:53:37,140
est une sorte de semblable à cette convention de serrer la main de l'homme.

957
00:53:37,140 --> 00:53:39,940
Lorsqu'un navigateur veut demander une page à partir d'un serveur,

958
00:53:39,940 --> 00:53:43,450
il envoie cette «get» demande à partir du navigateur au serveur,

959
00:53:43,450 --> 00:53:48,040
puis le serveur répond avec un nombre comme 200, tout va bien,

960
00:53:48,040 --> 00:53:53,290
ainsi que le code HTML ou un mauvais numéro, comme 404, fichier non trouvé.

961
00:53:53,290 --> 00:53:58,220
Mais en attendant, HTTP lui-même n'est pas l'Internet, en tant que tel.

962
00:53:58,220 --> 00:54:01,550
HTTP est un simple service, une caractéristique de l'Internet

963
00:54:01,550 --> 00:54:05,530
un peu comme le chat G est un autre service, un peu comme e-mail est un autre service.

964
00:54:05,530 --> 00:54:09,180
Il ya toutes sortes de choses que nous pouvons faire sur Internet.

965
00:54:09,180 --> 00:54:12,670
HTTP est juste une de ces applications.

966
00:54:12,670 --> 00:54:17,210
Donc, en plus de - HTTP est au-dessus de quelque chose d'autre

967
00:54:17,210 --> 00:54:21,750
que nous n'avons pas mentionné par son nom, vous avez pu entendre de par son nom, le protocole TCP / IP.

968
00:54:21,750 --> 00:54:25,160
Donc l'histoire que nous venons de dire il est tout au sujet

969
00:54:25,160 --> 00:54:28,720
comment les données se déplace du point a au point b.

970
00:54:28,720 --> 00:54:30,950
Et dans ce cas, nous l'avons vu à un niveau très bas

971
00:54:30,950 --> 00:54:33,060
routeur à routeur à routeur à routeur,

972
00:54:33,060 --> 00:54:35,390
comment les données sont réellement en cours de transmission.

973
00:54:35,390 --> 00:54:40,510
Mais en chemin, il va rencontrer des obstacles différents.

974
00:54:40,510 --> 00:54:43,770
En dehors de ces routeurs, il ya ce qu'on appelle les pare-feu sur l'Internet,

975
00:54:43,770 --> 00:54:46,680
et ainsi de données, comme celle dont nous venons de transmission

976
00:54:46,680 --> 00:54:49,720
de moi à Stanford, de moi à Cambridge,

977
00:54:49,720 --> 00:54:54,560
est envoyé, à ce niveau, quelque chose qui s'appelle une adresse IP.

978
00:54:54,560 --> 00:54:57,340
Nous l'avons vu tout à l'heure, et une adresse IP

979
00:54:57,340 --> 00:55:02,480
est une adresse numérique de la forme w.x.y.z,

980
00:55:02,480 --> 00:55:08,070
où chacun d'eux est entre les deux, plus ou moins, 0 et 255,

981
00:55:08,070 --> 00:55:10,080
si vous ne pouvez pas tout à fait utiliser tous ces chiffres.

982
00:55:10,080 --> 00:55:14,220
Mais chacun de ces espaces réservés est un nombre entre 0 et 255.

983
00:55:14,220 --> 00:55:16,820
Ainsi, une adresse IP de nos jours est de 32 bits.

984
00:55:16,820 --> 00:55:20,780
>> Maintenant, cela nous donne des adresses IP combien possible dans le monde?

985
00:55:20,780 --> 00:55:24,420
Environ 4 milliards de dollars, parce que chaque fois que nous comptons en puissances de 2

986
00:55:24,420 --> 00:55:27,760
tout le chemin jusqu'à 32 de quelque chose, qui donne habituellement nous 4 milliards.

987
00:55:27,760 --> 00:55:30,160
C'est donc un grand nombre d'adresses IP, mais vous auriez pu lire,

988
00:55:30,160 --> 00:55:32,410
ou vous pouvez maintenant constater dans la presse populaire,

989
00:55:32,410 --> 00:55:36,020
une poussée vers une nouvelle version d'IP appelée IPv6.

990
00:55:36,020 --> 00:55:38,290
À l'heure actuelle, nous utilisons la version 4.

991
00:55:38,290 --> 00:55:41,060
Il n'a pas vraiment été une version 5, nous sommes juste de sauter à droite à 6.

992
00:55:41,060 --> 00:55:46,760
La version 6 va utiliser 128 bits pour les adresses IP, ce qui est freaking énorme.

993
00:55:46,760 --> 00:55:49,430
Nous ne devrions pas manquer pour un certain temps maintenant,

994
00:55:49,430 --> 00:55:52,980
mais nous avons commencé à manquer d'adresses IP version 4,

995
00:55:52,980 --> 00:55:56,110
parce que nous avons tous des choses non seulement comme les ordinateurs portables et ordinateurs de bureau,

996
00:55:56,110 --> 00:55:58,700
beaucoup d'entre nous ont des téléphones, beaucoup d'entre nous ont d'autres appareils

997
00:55:58,700 --> 00:56:01,600
comme TiVo et autres, qui ont des adresses IP eux-mêmes.

998
00:56:01,600 --> 00:56:03,720
Harvard a elle-même des dizaines de milliers d'ordinateurs.

999
00:56:03,720 --> 00:56:07,970
Ainsi, le monde est vraiment à court d'adresses IP, du moins de ce formulaire.

1000
00:56:07,970 --> 00:56:10,340
Ainsi, au cours des prochaines années, vous allez voir les adresses

1001
00:56:10,340 --> 00:56:12,870
sur vos propres ordinateurs probablement changer lentement

1002
00:56:12,870 --> 00:56:16,740
que les sociétés de plus en plus et les universités commencent à soutenir la nouvelle version.

1003
00:56:16,740 --> 00:56:22,770
Mais une adresse IP n'est pas suffisante pour l'ordinateur d'un à demander des données à l'ordinateur b.

1004
00:56:22,770 --> 00:56:24,950
Parce que l'ordinateur b peut être un serveur,

1005
00:56:24,950 --> 00:56:27,600
et un serveur, comme je l'ai mentionné plus tôt, peut faire des bouquets de choses.

1006
00:56:27,600 --> 00:56:29,940
Il peut héberger des pages Web, il peut être un serveur de messagerie,

1007
00:56:29,940 --> 00:56:32,310
il peut s'agir d'un serveur Skype, il peut être un serveur de chat G.

1008
00:56:32,310 --> 00:56:35,870
>> Tous ces différents services qui peuvent être fournis sur un serveur

1009
00:56:35,870 --> 00:56:38,330
pourrions tous, physiquement, être sur la même machine.

1010
00:56:38,330 --> 00:56:40,380
Donc, en plus des adresses IP,

1011
00:56:40,380 --> 00:56:43,250
le monde a des choses appelées ports sur l'Internet.

1012
00:56:43,250 --> 00:56:47,830
Un port est juste un nombre, donc il ya un numéro unique pour le protocole HTTP.

1013
00:56:47,830 --> 00:56:50,280
Son numéro est le 80.

1014
00:56:50,280 --> 00:56:55,870
HTTP utilise également le numéro 443, mais plus précisément, pour HTTPS cryptées.

1015
00:56:55,870 --> 00:57:00,030
Lorsque vous voyez l'art, pour sûr, ça aide un nombre différent.

1016
00:57:00,030 --> 00:57:06,580
Il ya d'autres chiffres, comme 25, utilisés pour quelque chose appelé SMTP, autrement connu comme email.

1017
00:57:06,580 --> 00:57:09,620
Il ya quelque chose qui s'appelle 22 pour SSH,

1018
00:57:09,620 --> 00:57:11,850
et il ya tout un tas d'autres ports sur le marché.

1019
00:57:11,850 --> 00:57:14,460
Maintenant, nous, les humains voient rarement ces chiffres.

1020
00:57:14,460 --> 00:57:21,970
Toutefois, lorsque vous tapez une adresse de type http://www.facebook.com,

1021
00:57:21,970 --> 00:57:26,560
le navigateur est secrètement insertion 80, parce que vous utilisez le protocole HTTP.

1022
00:57:26,560 --> 00:57:30,630
Si vous, en revanche, de type HTTPS, il est secrètement insertion 443.

1023
00:57:30,630 --> 00:57:35,180
Et nous pouvons voir ce genre de main si je tire un brower

1024
00:57:35,180 --> 00:57:41,850
et aller à http://www.facebook.com:80.

1025
00:57:41,850 --> 00:57:44,550
Par conséquent explicitement en invoquant non seulement le nom du site

1026
00:57:44,550 --> 00:57:47,650
mais le port que je veux parler, et appuyez sur Entrée.

1027
00:57:47,650 --> 00:57:50,170
Notez qu'il disparaisse, parce que le navigateur suppose,

1028
00:57:50,170 --> 00:57:53,360
oh, 80, je ne vais même pas prendre la peine de vous montrer que.

1029
00:57:53,360 --> 00:57:56,400
Mais la raison en est que si je voulais envoyer un e-mail à quelqu'un,

1030
00:57:56,400 --> 00:58:02,340
Je voudrais vraiment être leur envoyant sur le port 25, qui est SMTP.

1031
00:58:02,340 --> 00:58:04,890
Un peu d'une simplification excessive, mais certains d'entre vous ont des amis

1032
00:58:04,890 --> 00:58:09,290
qui travaillent effectivement sur Facebook, et ils, de même, avoir des serveurs qui reçoivent un courriel.

1033
00:58:09,290 --> 00:58:12,610
>> Chaque fois que vous envoyez un e-mail, gmail ce qui est fait pour vous

1034
00:58:12,610 --> 00:58:14,960
ou Outlook ou n'importe quel programme que vous utilisez,

1035
00:58:14,960 --> 00:58:19,270
c'est une sorte de secret d'insérer ce numéro ainsi, 25 ans, dans ce cas.

1036
00:58:19,270 --> 00:58:24,490
C'est cette combinaison d'adresse IP et le numéro qui identifie de manière unique

1037
00:58:24,490 --> 00:58:29,190
un ordinateur connecté à Internet et d'un service spécifique sur cet ordinateur.

1038
00:58:29,190 --> 00:58:33,460
Maintenant, bien sûr, la plupart d'entre nous n'ont probablement jamais tapé manuellement une adresse IP.

1039
00:58:33,460 --> 00:58:37,340
Peut-être que vous avez dans l'appareil, mais dans le monde réel, pas tellement.

1040
00:58:37,340 --> 00:58:42,750
Pourquoi ne pas saisir les adresses IP dans les navigateurs?

1041
00:58:42,750 --> 00:58:45,860
Il travaillerait, en effet, nous pouvons voir cela; laissez-moi vous montrer

1042
00:58:45,860 --> 00:58:50,000
une commande autre qui devrait fonctionner presque partout sur le campus de Harvard sur un Mac ou un PC.

1043
00:58:50,000 --> 00:58:53,970
Il ya cette commande nslookup appelé, recherche serveur de noms.

1044
00:58:53,970 --> 00:58:59,960
Si je lève les yeux www.cnn.com, il s'avère que CNN a - oh, intéressant.

1045
00:58:59,960 --> 00:59:03,180
CNN a commencé à utiliser Amazon Web Services.

1046
00:59:03,180 --> 00:59:06,380
Vous savez peut-être du cloud computing, l'un d'Amazon des grands acteurs de l'informatique en nuage.

1047
00:59:06,380 --> 00:59:10,240
Ce que je viens n'a été, j'ai dit: «Donnez-moi l'adresse du serveur web de CNN,"

1048
00:59:10,240 --> 00:59:14,090
mais il s'avère que le serveur web de CNN est géré par Amazon,

1049
00:59:14,090 --> 00:59:16,030
Amazon Web Services, ce qui suggère.

1050
00:59:16,030 --> 00:59:19,680
Et l'adresse de serveur qui est ici présent.

1051
00:59:19,680 --> 00:59:22,350
Donc, je ne sais pas si cela va fonctionner, parce qu'ils n'ont pas l'habitude d'utiliser Amazon.

1052
00:59:22,350 --> 00:59:32,830
Mais nous allons essayer cela; http://, adresse IP, entrez, et -

1053
00:59:32,830 --> 00:59:35,690
est ce que ça va fonctionner?

1054
00:59:35,690 --> 00:59:39,280
Oui. Il va travailler. Internet est super lent aujourd'hui.

1055
00:59:39,280 --> 00:59:43,680
Mais, dans un moment, vous verrez une histoire de nouvelles.

1056
00:59:43,680 --> 00:59:48,360
Nous y voilà. Bank of America est poursuivi en justice. Très bien.

1057
00:59:48,360 --> 00:59:54,000
>> C'est parce que cette adresse IP se trouve juste en synonyme de www.cnn.com.

1058
00:59:54,000 --> 00:59:59,920
Bien sûr, il serait commercialisation horrible à dire, visitez notre site Internet à l'adresse 50.112.94.127.

1059
00:59:59,920 --> 01:00:02,370
Vous n'auriez jamais se souvenir. Ainsi, même de nos jours vous pouvez vous rappeler des choses

1060
01:00:02,370 --> 01:00:07,210
comme 1-800-COLLECT ou mnémoniques dans le monde est venu avec des numéros de téléphone.

1061
01:00:07,210 --> 01:00:09,540
Qui, avant que les téléphones cellulaires, ont été plutôt difficile de se rappeler

1062
01:00:09,540 --> 01:00:11,800
jusqu'à ce que vous pouvez simplement taper et oubliez-le.

1063
01:00:11,800 --> 01:00:15,730
Ainsi, le Web, elle aussi, cette convention des noms et des adresses IP,

1064
01:00:15,730 --> 01:00:17,770
et il ya ces choses là-bas appelé serveurs DNS,

1065
01:00:17,770 --> 01:00:23,870
domaine des systèmes de serveurs de noms, qui traduisent les adresses IP en noms et vice-versa.

1066
01:00:23,870 --> 01:00:26,340
C'est donc ce qui se passe sous le capot.

1067
01:00:26,340 --> 01:00:29,540
En fin de compte, nous avons TCP / IP, qui est le protocole de très bas niveau

1068
01:00:29,540 --> 01:00:32,570
que, vraiment, obtient juste des 0 et des 1 à travers l'Internet,

1069
01:00:32,570 --> 01:00:36,030
et il le fait en les mettant dans une enveloppe virtuelle,

1070
01:00:36,030 --> 01:00:38,820
si vous voulez, et de l'écriture à l'extérieur de l'enveloppe

1071
01:00:38,820 --> 01:00:43,930
l'adresse IP de la destination, ainsi que le numéro de port numérique

1072
01:00:43,930 --> 01:00:47,520
du service sur cette destination qu'il veut parler.

1073
01:00:47,520 --> 01:00:51,060
Pendant ce temps, sur l'enveloppe, il ya aussi quelque chose de connu comme adresse de retour,

1074
01:00:51,060 --> 01:00:55,600
qui est votre adresse IP, de sorte que lorsque CNN reçoit un paquet d'informations de votre part,

1075
01:00:55,600 --> 01:00:58,710
ouvre cette enveloppe virtuelle, veille à ce que vous voulez que la page d'accueil,

1076
01:00:58,710 --> 01:01:04,630
elle sait à partir de la partie qui envoie cette enveloppe virtuelle qui envoyer le dos HTML.

1077
01:01:04,630 --> 01:01:07,470
Donc, nous allons jeter un coup d'oeil à cela en détail un peu plus.

1078
01:01:07,470 --> 01:01:11,370
Il s'agit d'une compagnie appelée Ericson, de quelques années en arrière.

1079
01:01:11,370 --> 01:01:14,780
Et ils ont pris quelques libertés avec la façon dont l'Internet fonctionne réellement,

1080
01:01:14,780 --> 01:01:18,920
mais elle donne une image beaucoup plus visuelle que la craie simple ici.

1081
01:01:18,920 --> 01:01:26,690
Donc, je vous donne "Un peu de l'Internet."

1082
01:02:26,660 --> 01:02:29,840
>> [Narrateur] Pour la première fois dans l'histoire,

1083
01:02:29,840 --> 01:02:35,260
les personnes et les machines travaillent ensemble, réaliser un rêve.

1084
01:02:35,260 --> 01:02:38,910
A force unificatrice qui ne connaît pas de frontières géographiques.

1085
01:02:38,910 --> 01:02:43,230
Sans distinction de race, de croyance ou de couleur.

1086
01:02:43,230 --> 01:02:47,770
Une nouvelle ère où la communication apporte vraiment les gens.

1087
01:02:47,770 --> 01:02:50,070
C'est

1088
01:02:50,070 --> 01:02:54,980
L'aube de l'Internet.

1089
01:02:54,980 --> 01:03:04,640
Vous voulez savoir comment cela fonctionne? Cliquez ici pour commencer votre voyage dans le Net.

1090
01:03:04,640 --> 01:03:07,890
Maintenant, c'est exactement ce qui s'est passé lorsque vous avez cliqué sur ce lien?

1091
01:03:07,890 --> 01:03:10,150
Vous avez commencé un flux d'informations.

1092
01:03:10,150 --> 01:03:13,310
Cette information se déplace vers le bas dans votre salle de courrier personnel

1093
01:03:13,310 --> 01:03:18,500
où les paquets IP Mr. il, il marque, et l'envoie sur son chemin.

1094
01:03:18,500 --> 01:03:20,960
Chaque paquet est limité dans ses dimensions.

1095
01:03:20,960 --> 01:03:23,880
La salle du courrier doit décider comment diviser les informations

1096
01:03:23,880 --> 01:03:26,070
et comment l'emballer.

1097
01:03:26,070 --> 01:03:29,550
Maintenant, le paquet a besoin d'une étiquette contenant des informations importantes

1098
01:03:29,550 --> 01:03:35,570
telles que l'adresse de l'expéditeur, l'adresse du destinataire, et le type de paquet, il est.

1099
01:03:51,700 --> 01:03:54,980
Parce que ce paquet particulier est de sortir sur Internet,

1100
01:03:54,980 --> 01:03:57,720
il obtient également une adresse pour le serveur proxy,

1101
01:03:57,720 --> 01:04:01,520
qui a une fonction particulière, comme nous le verrons plus tard.

1102
01:04:01,520 --> 01:04:06,650
Le paquet est maintenant lancé sur votre réseau local ou LAN.

1103
01:04:06,650 --> 01:04:10,160
Ce réseau est utilisé pour connecter tous les ordinateurs locaux »

1104
01:04:10,160 --> 01:04:15,900
routeurs, imprimantes, etcetera, pour l'échange d'informations entre les murs physiques de l'immeuble.

1105
01:04:15,900 --> 01:04:20,290
Le LAN est un endroit assez sauvage, et, malheureusement,

1106
01:04:20,290 --> 01:04:23,950
les accidents peuvent arriver.

1107
01:04:31,190 --> 01:04:34,710
La route de la LAN est emballé avec toutes sortes d'informations.

1108
01:04:34,710 --> 01:04:38,900
Ce sont des paquets IP, Novell paquets, paquets AppleTalk.

1109
01:04:38,900 --> 01:04:41,270
Ils vont à l'encontre de la circulation, comme d'habitude.

1110
01:04:41,270 --> 01:04:44,260
Le routeur local lit l'adresse et, le cas échéant,

1111
01:04:44,260 --> 01:04:48,520
soulève le paquet à un autre réseau.

1112
01:04:48,520 --> 01:04:54,270
Ah, le routeur. Un symbole de contrôle dans un monde apparemment désorganisé.

1113
01:04:54,270 --> 01:05:05,480
[Routeur marmonnant et en parlant à lui-même]

1114
01:05:05,480 --> 01:05:10,030
>> [Narrateur] Il est là, systématique, insensible, méthodique,

1115
01:05:10,030 --> 01:05:14,150
conservatrice, et parfois pas tout à fait à la hauteur.

1116
01:05:14,150 --> 01:05:17,680
Mais au moins, il est exact, la plupart du temps.

1117
01:05:32,270 --> 01:05:36,820
Comme les paquets quittent le routeur, ils font leur chemin dans l'Internet d'entreprise

1118
01:05:36,820 --> 01:05:40,830
et la tête pour le commutateur routeur.

1119
01:05:40,830 --> 01:05:46,250
Un peu plus efficace que le routeur, le commutateur routeur joue double jeu avec les paquets IP,

1120
01:05:46,250 --> 01:05:48,920
habilement les acheminer sur leur chemin.

1121
01:05:48,920 --> 01:05:52,130
Un «Pinball Wizard,« numérique si vous voulez.

1122
01:05:52,130 --> 01:06:04,270
[Switch routeur parlant à lui-même]

1123
01:06:09,830 --> 01:06:12,150
[Narrateur] Lorsque les paquets arrivent à destination,

1124
01:06:12,150 --> 01:06:14,740
ils sont captés par l'interface réseau,

1125
01:06:14,740 --> 01:06:18,040
prêts à être envoyés à l'étape suivante.

1126
01:06:18,040 --> 01:06:21,010
Dans ce cas, la procuration.

1127
01:06:21,010 --> 01:06:25,040
Le proxy est utilisé par de nombreuses entreprises comme une sorte d'un homme d'âge

1128
01:06:25,040 --> 01:06:27,630
afin de réduire la charge sur la connexion Internet

1129
01:06:27,630 --> 01:06:32,240
et pour des raisons de sécurité, aussi bien.

1130
01:06:32,240 --> 01:06:38,750
Comme vous pouvez le voir, les paquets sont tous de tailles différentes en fonction de leur contenu.

1131
01:06:55,210 --> 01:07:01,890
Le proxy ouvre le paquet et recherche l'adresse Web ou URL.

1132
01:07:01,890 --> 01:07:04,950
Selon que l'adresse est acceptable,

1133
01:07:04,950 --> 01:07:08,000
le paquet est envoyé à l'Internet.

1134
01:07:13,890 --> 01:07:19,630
Il ya, cependant, quelques adresses qui ne répondent pas à l'approbation de la procuration.

1135
01:07:19,630 --> 01:07:25,680
C'est-à-dire, directives de l'entreprise ou de la gestion.

1136
01:07:25,680 --> 01:07:30,580
Celles-ci sont traitées sommairement.

1137
01:07:30,580 --> 01:07:32,410
Nous aurons rien de tout cela.

1138
01:07:32,410 --> 01:07:36,350
Pour ceux qui le font, c'est sur la route.

1139
01:07:46,850 --> 01:07:53,310
>> Prochaine étape, le pare-feu.

1140
01:07:53,310 --> 01:07:57,410
Le pare-feu d'entreprise sert à deux fins.

1141
01:07:57,410 --> 01:08:02,420
Il empêche certaines choses plutôt désagréables de l'Internet de venir pour l'Intranet,

1142
01:08:02,420 --> 01:08:10,280
et il peut également empêcher informations sensibles des entreprises ne soient transmises sur Internet.

1143
01:08:10,280 --> 01:08:12,980
Après avoir traversé le pare-feu, un routeur ramasse le paquet

1144
01:08:12,980 --> 01:08:18,180
et le place sur une route beaucoup plus étroite, ou de bande passante, comme on dit.

1145
01:08:18,180 --> 01:08:23,720
De toute évidence, la route n'est pas assez large pour tous.

1146
01:08:23,720 --> 01:08:29,319
Maintenant, vous demandez peut-être ce qui arrive à tous les paquets qui ne le font pas en cours de route.

1147
01:08:29,319 --> 01:08:32,270
Eh bien, quand M. IP ne reçoit pas un accusé de réception

1148
01:08:32,270 --> 01:08:35,000
qu'un paquet a été reçu en temps voulu,

1149
01:08:35,000 --> 01:08:39,890
il envoie simplement un paquet de remplacement.

1150
01:08:39,890 --> 01:08:44,760
Nous sommes maintenant prêts à entrer dans le monde de l'Internet.

1151
01:08:44,760 --> 01:08:49,370
Une toile d'araignée de réseaux interconnectés qui couvrent tout le globe entier.

1152
01:08:49,370 --> 01:08:56,050
Ici, les routeurs et les commutateurs d'établir des liens entre les réseaux.

1153
01:08:56,050 --> 01:08:59,200
Maintenant, le Net est un environnement totalement différent de celui que vous trouverez

1154
01:08:59,200 --> 01:09:01,569
l'intérieur des murs de protection de votre réseau local.

1155
01:09:01,569 --> 01:09:04,060
Ici, c'est le Far West.

1156
01:09:04,060 --> 01:09:06,359
Beaucoup d'espace, beaucoup de possibilités,

1157
01:09:06,359 --> 01:09:09,760
beaucoup de choses à explorer et endroits à visiter.

1158
01:09:09,760 --> 01:09:12,760
Merci à très peu de contrôle et de régulation,

1159
01:09:12,760 --> 01:09:18,300
trouver de nouvelles idées sol fertile de repousser les limites de leurs possibilités.

1160
01:09:18,300 --> 01:09:22,330
Mais à cause de cette liberté, certains dangers se cachent aussi.

1161
01:09:22,330 --> 01:09:27,000
Vous ne savez jamais quand vous allez rencontrer le ping de la mort redoutée,

1162
01:09:27,000 --> 01:09:29,890
une version spéciale d'une table de ping requête normale,

1163
01:09:29,890 --> 01:09:35,720
un idiot qui pensait jusqu'à gâcher hôtes sans méfiance.

1164
01:09:35,720 --> 01:09:39,130
Le chemin de nos paquets prennent peut-être par satellite,

1165
01:09:39,130 --> 01:09:43,090
lignes téléphoniques, sans fil ou câblés voire transocéaniques.

1166
01:09:43,090 --> 01:09:46,520
Ils ne prennent pas toujours les itinéraires les plus rapides ou plus court possible,

1167
01:09:46,520 --> 01:09:50,290
mais ils vont y arriver un jour.

1168
01:09:50,290 --> 01:09:55,230
Peut-être que c'est pourquoi il est parfois appelé «Le World Wide Wait».

1169
01:09:55,230 --> 01:09:57,980
Mais quand tout fonctionne sans heurts,

1170
01:09:57,980 --> 01:10:03,800
vous pouvez contourner le monde cinq fois plus à la baisse d'un chapeau, littéralement.

1171
01:10:03,800 --> 01:10:08,230
Et tout cela pour le coût d'un appel local ou moins.

1172
01:10:08,230 --> 01:10:15,070
Vers la fin de notre destination, nous allons trouver un autre pare-feu.

1173
01:10:15,070 --> 01:10:18,420
>> En fonction de votre point de vue comme un paquet de données,

1174
01:10:18,420 --> 01:10:23,730
le pare-feu pourrait être un bastion de la sécurité ou un adversaire redoutable.

1175
01:10:23,730 --> 01:10:28,530
Tout dépend de quel côté vous vous trouvez et quelles sont vos intentions.

1176
01:10:28,530 --> 01:10:34,990
Le pare-feu est conçu pour laisser passer uniquement les paquets qui répondent à ses critères.

1177
01:10:34,990 --> 01:10:39,360
Ce pare-feu fonctionne sur les ports 80 et 25.

1178
01:10:39,360 --> 01:10:46,630
Toutes les tentatives pour entrer par d'autres ports sont fermés au public.

1179
01:10:57,660 --> 01:11:03,480
Le port 25 est utilisé pour les paquets de courrier,

1180
01:11:03,480 --> 01:11:10,720
tandis que le port 80 est l'entrée de paquets à partir de l'Internet vers le serveur Web.

1181
01:11:10,720 --> 01:11:15,080
A l'intérieur du pare-feu, les paquets sont examinés de manière plus approfondie.

1182
01:11:15,080 --> 01:11:17,970
Certains paquets de le faire facilement à travers les douanes,

1183
01:11:17,970 --> 01:11:21,420
tandis que d'autres cherchent juste un peu douteuse.

1184
01:11:21,420 --> 01:11:24,060
Maintenant, l'agent pare-feu n'est pas dupe,

1185
01:11:24,060 --> 01:11:32,120
notamment lorsque cela ping de la mort paquet essaie de se faire passer pour un paquet ping normal.

1186
01:11:32,120 --> 01:11:37,520
[Officier de pare-feu parler aux paquets]

1187
01:11:37,520 --> 01:11:40,510
[Narrateur] Pour les paquets qui ont la chance de le faire jusque-là,

1188
01:11:40,510 --> 01:11:45,730
le voyage est presque terminée.

1189
01:11:45,730 --> 01:11:52,130
C'est juste une ligne sur l'interface à prendre place sur le serveur Web.

1190
01:11:52,130 --> 01:11:55,440
De nos jours, un serveur Web peut fonctionner sur beaucoup de choses,

1191
01:11:55,440 --> 01:11:59,230
à partir d'un ordinateur central à une webcam à l'ordinateur de votre bureau.

1192
01:11:59,230 --> 01:12:01,720
Pourquoi pas votre frigo?

1193
01:12:01,720 --> 01:12:04,870
Avec la bonne configuration, vous pouvez savoir si vous avez l'étoffe

1194
01:12:04,870 --> 01:12:08,390
pour Poulet cacciatore, ou si vous devez aller faire du shopping.

1195
01:12:08,390 --> 01:12:11,760
Rappelez-vous, c'est l'aube du net.

1196
01:12:11,760 --> 01:12:17,310
Presque tout est possible.

1197
01:12:17,310 --> 01:12:20,440
Un par un, les paquets sont reçus,

1198
01:12:20,440 --> 01:12:26,320
ouvert, et déballé.

1199
01:12:26,320 --> 01:12:31,200
Les informations qu'ils contiennent, c'est-à votre demande de renseignements,

1200
01:12:31,200 --> 01:12:34,830
est envoyé sur le serveur d'applications Web.

1201
01:12:41,540 --> 01:12:47,140
Le paquet lui-même est recyclé,

1202
01:12:47,140 --> 01:12:57,570
prêt à être utilisé à nouveau, et rempli avec vos informations demandées,

1203
01:12:57,570 --> 01:13:03,340
adressé et envoyé sur son chemin de nouveau à vous.

1204
01:13:03,340 --> 01:13:13,250
Retour passé le pare-feu, des routeurs, et le moyen de l'Internet.

1205
01:13:13,250 --> 01:13:21,020
Retour à travers votre pare-feu d'entreprise

1206
01:13:21,020 --> 01:13:24,180
et sur votre interface,

1207
01:13:24,180 --> 01:13:31,180
prêt à fournir votre navigateur avec les informations que vous avez demandé.

1208
01:13:31,180 --> 01:13:39,840
Autrement dit, ce film.

1209
01:13:39,840 --> 01:13:43,550
Satisfaits de leurs efforts, et faire confiance à un monde meilleur,

1210
01:13:43,550 --> 01:13:50,250
nos paquets de données fidèles rouler hors béatement dans le coucher du soleil du jour suivant,

1211
01:13:50,250 --> 01:13:56,880
sachant pertinemment qu'ils ont servi leurs maîtres bien.

1212
01:13:56,880 --> 01:14:02,560
Maintenant, n'est-ce pas une fin heureuse?

1213
01:14:02,560 --> 01:14:07,040
[Malan] Bon, ça suffit. Nous vous verrons la semaine prochaine.

1214
01:14:07,040 --> 01:14:10,040
[CS50.TV]