1
00:00:00,000 --> 00:00:01,390

2
00:00:01,390 --> 00:00:04,890
>> [Přehrávání hudby]

3
00:00:04,890 --> 00:00:10,955

4
00:00:10,955 --> 00:00:12,580
DAVID J Malan: Dobře, vítej zpátky.

5
00:00:12,580 --> 00:00:13,600
To je CS50.

6
00:00:13,600 --> 00:00:15,540
To je konec týdne sedm.

7
00:00:15,540 --> 00:00:18,180
A to je konec tohoto mrchožrout
lov z problému nastavit čtyři

8
00:00:18,180 --> 00:00:19,220
které by vás mohly vyvolat.

9
00:00:19,220 --> 00:00:21,650
Po uzdravení všech
tyto JPEG zaměstnanců,

10
00:00:21,650 --> 00:00:24,820
jsi vyzval, pokud byste chtěli,
fotografovat se s co nejvíce

11
00:00:24,820 --> 00:00:25,981
z těch lidí, jak můžete.

12
00:00:25,981 --> 00:00:28,480
Máme spoustu příspěvků
v posledních několika týdnech,

13
00:00:28,480 --> 00:00:32,980
opravdu, docela málo těsně před polednem
dnes, z nichž některé jsou zde,

14
00:00:32,980 --> 00:00:37,670
zde chytil in-- vypadá like-- Annenberg
Hall v úředních hodinách, jeden zde

15
00:00:37,670 --> 00:00:39,530
v Lowell dům s Nickem.

16
00:00:39,530 --> 00:00:41,750
Zde je Ramon byl chycen na telefonu.

17
00:00:41,750 --> 00:00:43,870
To bylo na CS50 oběd.

18
00:00:43,870 --> 00:00:46,840
To byl Jason Skyping se
více kreativní spolužák,

19
00:00:46,840 --> 00:00:48,280
který mu volal tímto způsobem.

20
00:00:48,280 --> 00:00:49,690
Nevíme, co to je.

21
00:00:49,690 --> 00:00:51,940
>> [SMÍCH]

22
00:00:51,940 --> 00:00:54,570
>> DAVID J Malan: Ale
že to stojí za gigabyte.

23
00:00:54,570 --> 00:00:56,960
Zde je Chang, který
doslova utekl jeviště

24
00:00:56,960 --> 00:01:00,480
aby se vyhnuli fotografoval jeden
den, ale byl nakonec chycen.

25
00:01:00,480 --> 00:01:02,050
Tady je Nick.

26
00:01:02,050 --> 00:01:03,480
Tady je Nick.

27
00:01:03,480 --> 00:01:04,080
Tady je Nick.

28
00:01:04,080 --> 00:01:05,090

29
00:01:05,090 --> 00:01:07,670
A tady je Alison podle oblasti.

30
00:01:07,670 --> 00:01:11,840
A Zamyla dokonce bylo zjištěno,
u tanečního sálu soutěže.

31
00:01:11,840 --> 00:01:14,100
Tak jsme se projít
tyto fotografie, přijít na to,

32
00:01:14,100 --> 00:01:16,690
kteří podali nejvíce
nejdříve, a odměna

33
00:01:16,690 --> 00:01:20,662
jeden báječný cena, as
slíbil ve spec.

34
00:01:20,662 --> 00:01:23,120
A budeme také sledovat informace o
prostor, který byl zapojen.

35
00:01:23,120 --> 00:01:26,860
>> Pár announcements-- tak oběd
je opět tento pátek v 13:15.

36
00:01:26,860 --> 00:01:30,420
Pokud byste se k nám připojit,
Odpověz na této adrese zde.

37
00:01:30,420 --> 00:01:33,730
Znovu se objeví Jason zde z jednoho
sekcí pár let

38
00:01:33,730 --> 00:01:35,510
zpět, což se stalo
padnout na Halloween.

39
00:01:35,510 --> 00:01:38,950
A skutečně, se převlékl za
dýně daném roce.

40
00:01:38,950 --> 00:01:42,700
Pokud se budete dívat této sekci
jeho od roku 2011 sekce

41
00:01:42,700 --> 00:01:46,480
osm, pokud jste zvědaví,
na CS50.tv, myslím, že

42
00:01:46,480 --> 00:01:49,730
to byl rok, ve kterém
Jeho vzduchové čerpadlo pracoval.

43
00:01:49,730 --> 00:01:52,490
>> Máte-li tedy sledovat
podobný oddíl v roce 2012,

44
00:01:52,490 --> 00:01:55,620
uvidíte tuto Jasona moc vypuštěná,
protože oblek již fungoval,

45
00:01:55,620 --> 00:01:58,060
což je pouze říci
tento pátek, pokud chcete

46
00:01:58,060 --> 00:02:02,720
chtěl vyřezat dýni s Daven
a Gabe a jiní, RSVP k hlavám

47
00:02:02,720 --> 00:02:04,480
na cs50.harvard.edu adresu.

48
00:02:04,480 --> 00:02:06,200
To slibuje, že bude skvělá zábava.

49
00:02:06,200 --> 00:02:08,660
Daven, nám bylo řečeno, má vyřezávané
Dýně celý svůj život.

50
00:02:08,660 --> 00:02:11,930
Gabriel z Brazílie má nikdy
vyřezávané dýně na Halloween.

51
00:02:11,930 --> 00:02:14,700
Takže se tam s nimi, jak se učí.

52
00:02:14,700 --> 00:02:16,830
>> Semináře, meanwhile--
takže se dozvíte brzy

53
00:02:16,830 --> 00:02:20,650
o tom, co naše očekávání jsou
závěrečný projekt, který v podstatě

54
00:02:20,650 --> 00:02:23,150
se redukuje na
navrhování a provádění

55
00:02:23,150 --> 00:02:26,440
většina jakýkoli projekt zajímat
vy, i když s výhradou schválení

56
00:02:26,440 --> 00:02:28,490
a vedení ze svého učitelského kolegy.

57
00:02:28,490 --> 00:02:32,110
Ke konci
semestr, jsme představili řadu

58
00:02:32,110 --> 00:02:35,610
seminářů, které jsou nepovinné třídy
pod vedením výukových kolegy a Harvard

59
00:02:35,610 --> 00:02:38,570
zaměstnanci, přátelé kurzu přes
kampus, na různá témata, které

60
00:02:38,570 --> 00:02:41,470
jsou tečné k
hřiště je základní osnova

61
00:02:41,470 --> 00:02:45,590
nicméně platí, zábava a
jiný potenciální závěrečných prací.

62
00:02:45,590 --> 00:02:49,530
>> Například, první, pokud budete chtít
zaregistrovat, zamiřte do tamté URL.

63
00:02:49,530 --> 00:02:53,010
A to je sestava pro
Letošní semináře sám.

64
00:02:53,010 --> 00:02:56,060
Ale provádíme máme desítky
semináře z let minulých, z nichž všechny

65
00:02:56,060 --> 00:02:59,774
jsou spojeny v menu semináře
Možnost webových stránek stránce kurzu je.

66
00:02:59,774 --> 00:03:02,190
Takže pokud uvažujete o
přesahuje svou zónu pohodlí

67
00:03:02,190 --> 00:03:05,060
nebo vyzvednout nějaké nové dovednosti,
Například, programování iPhone

68
00:03:05,060 --> 00:03:08,100
aplikace s Swift, nový jazyk
od Apple nebo Objective-C

69
00:03:08,100 --> 00:03:11,230
nebo Android nebo programování [? cue?]
žárovky, nebo na kteroukoli témat

70
00:03:11,230 --> 00:03:15,490
tady a více, díky kontrola
z registrační stránce.

71
00:03:15,490 --> 00:03:19,730
>> Tak jsme začali, a dospěl k závěru o
Pondělí se při pohledu na HTTP.

72
00:03:19,730 --> 00:03:22,675
Tak rychle refresher-- HTTP,
HyperText Transfer Protocol.

73
00:03:22,675 --> 00:03:24,045
Ale co to vlastně znamená?

74
00:03:24,045 --> 00:03:26,805

75
00:03:26,805 --> 00:03:27,930
Co to vlastně znamená?

76
00:03:27,930 --> 00:03:30,665

77
00:03:30,665 --> 00:03:31,290
Je to ruka?

78
00:03:31,290 --> 00:03:33,074

79
00:03:33,074 --> 00:03:34,740
Vím, že jste právě poškrábání vaší hlavě.

80
00:03:34,740 --> 00:03:36,400
Ale chcete navrhnout, co HTTP je?

81
00:03:36,400 --> 00:03:37,792

82
00:03:37,792 --> 00:03:40,576
>> Diváků: Jak počítače
komunikovat s [neslyšitelné].

83
00:03:40,576 --> 00:03:41,517

84
00:03:41,517 --> 00:03:43,100
DAVID J Malan: Stýskalo se mi poslední část.

85
00:03:43,100 --> 00:03:45,774
Komunikaci počítačů with--

86
00:03:45,774 --> 00:03:47,325
>> Diváků: internetové servery.

87
00:03:47,325 --> 00:03:50,450
DAVID J Malan: Good-- s internetem
servery, a zejména, webové servery.

88
00:03:50,450 --> 00:03:53,533
Vzhledem k tomu, odvolání, je tu banda
služby na internetu, z nichž některé

89
00:03:53,533 --> 00:03:57,349
Používáte pravděpodobně denně mezi chatu
a zprávy, chat, a web a e-mail,

90
00:03:57,349 --> 00:03:57,890
a podobně.

91
00:03:57,890 --> 00:04:00,900
A HTTP je jen
Protokol, který webové prohlížeče

92
00:04:00,900 --> 00:04:03,750
mluví při komunikaci s
webové servery, a vice versa.

93
00:04:03,750 --> 00:04:05,580
A analog v
Lidský svět může být,

94
00:04:05,580 --> 00:04:08,730
I rozšířit mou ruku se třást některé
další člověk je, a on nebo ona

95
00:04:08,730 --> 00:04:11,970
bere na vědomí, rozšířením
jeho nebo její ruku stejně.

96
00:04:11,970 --> 00:04:13,970
Tak to je jen protokol,
soubor konvencí.

97
00:04:13,970 --> 00:04:15,630
>> A co vlastně jsou ty konvence?

98
00:04:15,630 --> 00:04:18,640
No, je to jen scvrkává na
odesílání zpráv tam a zpět,

99
00:04:18,640 --> 00:04:19,770
jak vidíte na obrázku.

100
00:04:19,770 --> 00:04:22,520
A je tu několik způsobů, jak
které můžete posílat tyto zprávy.

101
00:04:22,520 --> 00:04:24,360
A snad nejvíce
společné je známý jako get.

102
00:04:24,360 --> 00:04:26,510
A uvidíme kontrast
to netrvalo dlouho.

103
00:04:26,510 --> 00:04:30,010
>> Ale požadavek dostat z prohlížeče
na server jen vypadá takhle.

104
00:04:30,010 --> 00:04:32,960
Je to banda textu, který klade
uvnitř virtuálního obálky.

105
00:04:32,960 --> 00:04:35,854
Na vnější straně tohoto krytí
jít pár kousků detailů.

106
00:04:35,854 --> 00:04:37,770
Co je potřeba jít dál
obálka, abych tak řekl,

107
00:04:37,770 --> 00:04:41,820
s cílem získat žádost jako
to ode mne na webový server?

108
00:04:41,820 --> 00:04:42,320
Jo.

109
00:04:42,320 --> 00:04:43,270
>> Diváků: Vaše IP adresa.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J Malan: Moje IP adresa
V poli Od, abych tak řekl,

111
00:04:45,890 --> 00:04:49,490
a samozřejmě,
IP adresa příjemce.

112
00:04:49,490 --> 00:04:52,710
Avšak v případě, že webové paketu,
potřebujeme trochu více detailů

113
00:04:52,710 --> 00:04:55,254
Nestačí jen
poslat obálku na server,

114
00:04:55,254 --> 00:04:57,670
protože server může být
poslechu pro různé typy

115
00:04:57,670 --> 00:04:59,180
internetového provozu.

116
00:04:59,180 --> 00:05:01,370
Tak co ještě potřebujeme
kromě příjemce IP?

117
00:05:01,370 --> 00:05:02,723

118
00:05:02,723 --> 00:05:03,222
Jo?

119
00:05:03,222 --> 00:05:04,241
>> Diváků: Je to TCP?

120
00:05:04,241 --> 00:05:05,074
DAVID J Malan: Dobrý.

121
00:05:05,074 --> 00:05:06,470
TCP--

122
00:05:06,470 --> 00:05:07,340
>> Diváků: adresa.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J Malan: Adresa,
nebo port, jak se to jmenuje.

124
00:05:09,340 --> 00:05:11,010
Blízko, ale číslo portu TCP.

125
00:05:11,010 --> 00:05:12,220
A je tu spoustu z nich.

126
00:05:12,220 --> 00:05:14,310
Ale určitě nejvíce
obeznámeni by nakonec

127
00:05:14,310 --> 00:05:17,590
80, což je výchozí nastavení
který se používá pro webového provozu.

128
00:05:17,590 --> 00:05:20,040
A další povědomý
brzo bude 443,

129
00:05:20,040 --> 00:05:24,280
který se používá pro bezpečné webu
provoz, adresy URL, které začínají řetězcem https.

130
00:05:24,280 --> 00:05:26,650
>> Tak tohle je, co se děje
uvnitř této obálky.

131
00:05:26,650 --> 00:05:29,780
A dostat se / prostě znamená, dát
me výchozí webové stránky.

132
00:05:29,780 --> 00:05:32,700
Dej mi kořen tvrdý
pohon na tomto serveru.

133
00:05:32,700 --> 00:05:36,050
A doufejme, web
server odpoví, OK

134
00:05:36,050 --> 00:05:39,630
a číslo 200, který je jen
konvence říká, ano, všechny

135
00:05:39,630 --> 00:05:40,470
je opravdu OK.

136
00:05:40,470 --> 00:05:41,680
Zde je stránka.

137
00:05:41,680 --> 00:05:45,510
Typ webové stránky, bude
být text, ale konkrétněji, HTML,

138
00:05:45,510 --> 00:05:47,010
které se chystáme potápět zpět do.

139
00:05:47,010 --> 00:05:49,877
A dot dot dot jen
znamená, tady je HTML.

140
00:05:49,877 --> 00:05:51,710
A to je místo, kde jsme
vyzvednout příběh dnes,

141
00:05:51,710 --> 00:05:55,740
vlastně psaní HTML,
HyperText Markup Language, což

142
00:05:55,740 --> 00:05:57,727
je jazyk, ve kterém
Webové stránky jsou psány.

143
00:05:57,727 --> 00:05:59,060
Není to programovací jazyk.

144
00:05:59,060 --> 00:06:01,270
Tam je žádné funkce
nebo smyčky nebo podmínek.

145
00:06:01,270 --> 00:06:03,800
Je to značkovací jazyk,
stejně zase vidím dnes,

146
00:06:03,800 --> 00:06:07,240
který umožňuje určit
jak strukturovat a stylizovat

147
00:06:07,240 --> 00:06:09,300
esteticky webové stránky.

148
00:06:09,300 --> 00:06:11,470
>> Tak tohle byl ten,
a jen stránky opravdu

149
00:06:11,470 --> 00:06:13,930
Podíval se na, je-li krátce, v pondělí.

150
00:06:13,930 --> 00:06:16,250
A všimněte si pár
charakteristickými rysy.

151
00:06:16,250 --> 00:06:20,170
Je tu spousta otevřených úhlový
držák a zavřete úhlový držák.

152
00:06:20,170 --> 00:06:23,160
Mezi těmi, úhlový
držáky jsou slova.

153
00:06:23,160 --> 00:06:25,660
A jdeme na začátek
volá tato slova tagy.

154
00:06:25,660 --> 00:06:28,800
Tak otevřený držák hlavice
a uzavřený držák hlavice

155
00:06:28,800 --> 00:06:33,620
jsou otevřené a uzavřené tagy,
nebo počáteční a koncové značky

156
00:06:33,620 --> 00:06:37,660
respektive elementu HTML,
jak budeme říkat, volal hlavu.

157
00:06:37,660 --> 00:06:41,760
A platí stejný žargon
k tělu v HTML a tak dále.

158
00:06:41,760 --> 00:06:43,970
>> A co je pěkné je
HTML-- a opravdu, budeme

159
00:06:43,970 --> 00:06:47,187
strávit strašně málo času na to,
protože budete většinou jen přijít na to,

160
00:06:47,187 --> 00:06:49,770
jaké funkce to má, když vás
vlastně mít konkrétní problém

161
00:06:49,770 --> 00:06:52,820
na solve-- zjistíte, že
prohlížeč je dost hloupé.

162
00:06:52,820 --> 00:06:56,450
Je to jen tak do-- není na rozdíl od
computer--, co řeknete, že to udělat.

163
00:06:56,450 --> 00:06:59,279
A tak, když máte otevřeno
držák HTML na samém vrcholu

164
00:06:59,279 --> 00:07:01,320
tam, že v podstatě
prostě znamená, hej, prohlížeč,

165
00:07:01,320 --> 00:07:04,090
Zde je webová stránka napsána v HTML.

166
00:07:04,090 --> 00:07:06,130
>> Když to vidí otevřený držák
hlava, to jen znamená,

167
00:07:06,130 --> 00:07:10,350
hey, prohlížeč, tady je hlava, nebo
nejvyšší část mé webové stránky.

168
00:07:10,350 --> 00:07:14,192
Když to vidí uzavřený držák
hlava, to jen znamená, hej,

169
00:07:14,192 --> 00:07:15,150
to je na hlavu.

170
00:07:15,150 --> 00:07:16,420
Pohotovostní režim na něco jiného.

171
00:07:16,420 --> 00:07:18,878
A to něco je
zřejmě bude tělo.

172
00:07:18,878 --> 00:07:22,630
A když nemáte značku, jako je
máte jen ahoj, čárka, svět,

173
00:07:22,630 --> 00:07:26,610
to je jen bude raw text
nakonec se zobrazí na obrazovce.

174
00:07:26,610 --> 00:07:29,220
>> Teď si možná všimnete, příliš
odsazení zde.

175
00:07:29,220 --> 00:07:32,160
Můžete si asi odvodit
jak jsme to stylizace.

176
00:07:32,160 --> 00:07:34,850
Pokaždé, když otevřete záznam,
abych tak řekl, jsem odsadit.

177
00:07:34,850 --> 00:07:38,540
A pokaždé, když zavřu
tag jsem un-odrážka,

178
00:07:38,540 --> 00:07:40,690
svým duchem podobat složených závorek.

179
00:07:40,690 --> 00:07:43,470
A za to, že jsem typ
použití můj úsudek.

180
00:07:43,470 --> 00:07:48,380
Všimněte si, že jsem se neobtěžoval bít
Zadejte uvnitř tohoto názvu značky.

181
00:07:48,380 --> 00:07:48,990
Proč?

182
00:07:48,990 --> 00:07:51,920
No, prostě jsem se rozhodl, že to vypadalo
malý vysavač pro mě, člověka,

183
00:07:51,920 --> 00:07:53,181
jen neobtěžoval dělat, že.

184
00:07:53,181 --> 00:07:54,930
Takže znovu, je tu nějaký
rozsudek zavolala

185
00:07:54,930 --> 00:07:57,670
jako je v C nebo jakémkoli jazyce.

186
00:07:57,670 --> 00:08:04,110
>> Ale všimněte si také, že tento zářez
půjčuje sebe k duševní modelu,

187
00:08:04,110 --> 00:08:05,670
, aby se příliš komplikovat.

188
00:08:05,670 --> 00:08:07,020
Ale strom, ne?

189
00:08:07,020 --> 00:08:09,290
Pokud si myslíte, že na webu
Stránka zřejmě psaný

190
00:08:09,290 --> 00:08:12,050
takhle, jako
pěkně členité, že tak,

191
00:08:12,050 --> 00:08:17,390
můžete téměř myslet na otevřeném držáku
HTML uzavřený držák tag je vymezení

192
00:08:17,390 --> 00:08:21,380
kořen uzlu, rodokmen
styl uzel ve stylu stromů

193
00:08:21,380 --> 00:08:22,900
jsme se podívali na minulý pátek.

194
00:08:22,900 --> 00:08:27,630
>> A skutečně, máme na tady
co zavoláme DOM, D-O-M, dokument

195
00:08:27,630 --> 00:08:31,680
objektový model, ozdobný způsob, jak říkat
strom, který prohlašuje, že HTML.

196
00:08:31,680 --> 00:08:36,140
A všimněte si, že HTML má, budeme říkat,
jako rodokmen, má dvě děti.

197
00:08:36,140 --> 00:08:37,659
Na levé straně je hlava.

198
00:08:37,659 --> 00:08:39,179
Na pravé straně je tělo.

199
00:08:39,179 --> 00:08:44,220
>> A stejně jako bezduché myšlenky cvičení,
hlava, má samozřejmě, kolik dětí

200
00:08:44,220 --> 00:08:46,070
Podle této struktury?

201
00:08:46,070 --> 00:08:48,200
Takže jen jeden, title--
a to je důvod, proč máme

202
00:08:48,200 --> 00:08:50,580
šipkou od hlavy až k titulu.

203
00:08:50,580 --> 00:08:55,110
Takže je to jako by tato osoba ve
rodokmen měl jen jednu potomky.

204
00:08:55,110 --> 00:08:58,230
A pak samotný název může
se říci, že mít dítě taky.

205
00:08:58,230 --> 00:09:01,780
>> Připomeňme, že HTML měla
Dobrý den, čárka, svět pod ním.

206
00:09:01,780 --> 00:09:06,090
A já jsem prostě čerpané v rámci
oválný místo obdélníku právě

207
00:09:06,090 --> 00:09:10,559
zprostředkovat sémanticky, že i když
je to uzel ve stromu, abych tak řekl,

208
00:09:10,559 --> 00:09:12,100
je to něco zásadně liší.

209
00:09:12,100 --> 00:09:12,800
Není to tag.

210
00:09:12,800 --> 00:09:14,780
Nebo přesněji řečeno, není to prvek.

211
00:09:14,780 --> 00:09:16,590
Je to jen textový uzel, chcete-li.

212
00:09:16,590 --> 00:09:18,990
Ale to jsou zcela
libovolné lidské konvence.

213
00:09:18,990 --> 00:09:23,180
To je teď můj způsob, jak
představuje, co budu jako souhrn

214
00:09:23,180 --> 00:09:24,340
zavolejte dokument.

215
00:09:24,340 --> 00:09:27,750
>> A jako stranou, věci na
Super levém horním rohu,

216
00:09:27,750 --> 00:09:32,080
otevřený držák vykřičník doc
typ HTML, tohle vypadá jako značku,

217
00:09:32,080 --> 00:09:35,560
ale je to hloupé roh případ, kdy
to je jen tam, zkopírovat a vložit

218
00:09:35,560 --> 00:09:38,460
ukázat prohlížečů
toto je HTML verze 5.

219
00:09:38,460 --> 00:09:41,540
Svět se neustále mění, co se
První řádek kódu do stránky by měly být.

220
00:09:41,540 --> 00:09:43,820
To prostě znamená, verze 5.

221
00:09:43,820 --> 00:09:45,950
Takže to není úplně
vypadají jako ostatní.

222
00:09:45,950 --> 00:09:48,120
>> Dobře, tak s tím
řekl, budete nyní ocenit

223
00:09:48,120 --> 00:09:50,767
to docela to hloupý
tetování někdo dostal.

224
00:09:50,767 --> 00:09:51,990
>> [SMÍCH]

225
00:09:51,990 --> 00:09:54,210
>> DAVID J Malan: Tak jo,
a teď se to vlastně skok

226
00:09:54,210 --> 00:09:55,710
aby dělali něco s tím.

227
00:09:55,710 --> 00:09:58,610
Vzpomeňte si, že naposled
Otevřel jsem nahoru CS50 Appliance

228
00:09:58,610 --> 00:10:01,650
a já jsem něco jako
jednoduché, jak otevírá gedit.

229
00:10:01,650 --> 00:10:05,190
A zachránil jsem soubor, i na
můj desktop-- nikde special--

230
00:10:05,190 --> 00:10:05,870
jako hello.html.

231
00:10:05,870 --> 00:10:07,100

232
00:10:07,100 --> 00:10:10,984
>> Takže dovolte mi, abych to udělal
again-- hello.html Enter.

233
00:10:10,984 --> 00:10:13,900
A teď v tomto souboru, budu
pokračovat a opakovat to, co jsme právě

234
00:10:13,900 --> 00:10:18,850
saw-- doc typu html Pak jdu
dělat otevřený držák html uzavřený držák.

235
00:10:18,850 --> 00:10:21,890
A pak budu preventivně
otevřít a zavřít tag.

236
00:10:21,890 --> 00:10:22,390
Proč?

237
00:10:22,390 --> 00:10:23,598
Jen tak jsem se nezapomeňte později.

238
00:10:23,598 --> 00:10:26,850
Je to prostě dobré praxe, jako je otevření
a pravou složenou závorkou najednou.

239
00:10:26,850 --> 00:10:28,900
>> A co pak přišel další?

240
00:10:28,900 --> 00:10:30,582
Můžete myslet na tetování.

241
00:10:30,582 --> 00:10:31,450
>> Diváků: hlava.

242
00:10:31,450 --> 00:10:32,500
>> DAVID J Malan: hlava.

243
00:10:32,500 --> 00:10:36,020
A pak tady, jsem
měl titul, myslím.

244
00:10:36,020 --> 00:10:39,886
A titul byl svévolně,
ahoj, svět blízko titulu.

245
00:10:39,886 --> 00:10:42,760
A pak tady dole, tělo, z
course-- pak zavřete značku těla.

246
00:10:42,760 --> 00:10:45,660
A pak už jen poněkud redundantní,
Měl jsem to samé tady dole.

247
00:10:45,660 --> 00:10:47,150
>> Tak jsem se tvrdí, že se jedná o webové stránky.

248
00:10:47,150 --> 00:10:49,050
To je něco, co
by nyní živě na webu,

249
00:10:49,050 --> 00:10:51,925
i když samozřejmě, je to doslova
žít na mém desktopu právě teď.

250
00:10:51,925 --> 00:10:55,837
Ale opravdu, když jsem minimalizovat gedit,
Podívám se na mém desktopu jeho ikonu.

251
00:10:55,837 --> 00:10:58,420
I přesto, že se jedná o zařízení,
toto mohl dělat na Mac OS

252
00:10:58,420 --> 00:11:01,580
bez TextEdit nebo
Windows Poznámkový blok i.

253
00:11:01,580 --> 00:11:06,115
>> A když jsem do toho pusťte a poklepejte
že dokonce i vyberte-- dobře, pojďme

254
00:11:06,115 --> 00:11:07,990
nelze vybrat, které z důvodu
Chrome není otevření.

255
00:11:07,990 --> 00:11:09,281
Pojďme dál a otevřete Chrome.

256
00:11:09,281 --> 00:11:10,160

257
00:11:10,160 --> 00:11:14,040
A pak to Command-O pro otevřené
A přejděte na mém desktopu

258
00:11:14,040 --> 00:11:15,320
a tento soubor otevřít.

259
00:11:15,320 --> 00:11:20,120
To je, jak prohlížeč interpretuje
HTML, shora dolů, zleva doprava.

260
00:11:20,120 --> 00:11:21,314
Hele, tady je HTML prohlížeč.

261
00:11:21,314 --> 00:11:21,980
Zde je hlava.

262
00:11:21,980 --> 00:11:23,250
Tady je titul.

263
00:11:23,250 --> 00:11:24,090
Zde je tělo.

264
00:11:24,090 --> 00:11:26,620
A skutečně, to je jak
to činí, že webové stránky.

265
00:11:26,620 --> 00:11:27,800
>> Ale všimněte si URL.

266
00:11:27,800 --> 00:11:32,430
Nikdo z vás by mohl vytáhnout tomto konkrétním
strana na své notebooky právě teď,

267
00:11:32,430 --> 00:11:34,910
dokonce i uvnitř vašich
zařízení prostřednictvím této adresy URL,

268
00:11:34,910 --> 00:11:40,130
protože soubor: // ukáže, že to je ve skutečnosti
na mém souborovém systému, můj pevný disk,

269
00:11:40,130 --> 00:11:40,990
není vaše.

270
00:11:40,990 --> 00:11:42,440
Takže to není všechno, že užitečné.

271
00:11:42,440 --> 00:11:44,940
>> Pojďme se nyní přesunout k
použitím skutečné webový server.

272
00:11:44,940 --> 00:11:48,309
A ukázalo se, na CS50 Appliance
je více než jen prostředí, kde

273
00:11:48,309 --> 00:11:51,100
můžete psát kód v C a sestavit
a spusťte jej, jako jsi dělal.

274
00:11:51,100 --> 00:11:55,500
To také byl konfigurován
Zaměstnanci představují typickou web

275
00:11:55,500 --> 00:11:58,290
server, který je na internetu,
ten, který byste mohli platit za

276
00:11:58,290 --> 00:12:00,210
nebo ten, který je v tzv cloudu.

277
00:12:00,210 --> 00:12:02,600
>> A je to běh
standardní open source

278
00:12:02,600 --> 00:12:06,160
Software, například, něco
s názvem Apache, což je možná

279
00:12:06,160 --> 00:12:08,700
stále nejpopulárnější web
Server software na světě

280
00:12:08,700 --> 00:12:11,030
že tisíce webových stránek, používají i dnes.

281
00:12:11,030 --> 00:12:13,420
A také má dokonce
software, jako je MySQL,

282
00:12:13,420 --> 00:12:16,240
což je databázový server
že budeme nakonec dostat,

283
00:12:16,240 --> 00:12:18,330
což je pouze říci
Můžu začít léčbu

284
00:12:18,330 --> 00:12:22,040
Můj spotřebič jako plnohodnotného serveru
že nejsem platit za jinde.

285
00:12:22,040 --> 00:12:25,980
Je to prostě žije na svém vlastním notebooku pro
vývoj a pohodlí účely.

286
00:12:25,980 --> 00:12:27,870
>> Tak pojďme do toho a
využít tohoto.

287
00:12:27,870 --> 00:12:30,120
Chystám se jít dopředu a
otevřít okno terminálu.

288
00:12:30,120 --> 00:12:33,030
A já jdu dál a
move-- vlastně poprvé jsem

289
00:12:33,030 --> 00:12:34,860
bude navigovat na mém desktopu.

290
00:12:34,860 --> 00:12:36,400
Pokud se mi ls, je tu hello.html.

291
00:12:36,400 --> 00:12:37,022

292
00:12:37,022 --> 00:12:38,730
A já jdu
dopředu a začít používat

293
00:12:38,730 --> 00:12:40,800
nový adresář máme
nepoužíval před dnes.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- budu pohybovat
na ../vhosts pro virtuální hosts--

295
00:12:46,840 --> 00:12:50,940
o tom více v future-- a pak
do adresáře s názvem localhost,

296
00:12:50,940 --> 00:12:54,420
což je přezdívka daná téměř
jakýkoliv počítač, ať už je to Mac, PC,

297
00:12:54,420 --> 00:12:57,560
nebo Linux počítač, a pak
konkrétně do adresáře, který jsme my,

298
00:12:57,560 --> 00:13:01,260
Zaměstnanci již vytvořili pro vás, když
jste si přístroj s názvem

299
00:13:01,260 --> 00:13:01,760
veřejná.

300
00:13:01,760 --> 00:13:04,551
A jak již název napovídá, cokoliv
Dal jsem v této složce, v teorii,

301
00:13:04,551 --> 00:13:07,790
bude nyní
veřejnosti, alespoň pro lidi

302
00:13:07,790 --> 00:13:10,030
kteří mají přímý
připojení k počítači.

303
00:13:10,030 --> 00:13:13,160
>> Takže teď nech mě jít dopředu a
dělat cd téhož adresáře

304
00:13:13,160 --> 00:13:15,490
tak vidím, co je
děje a typu ls.

305
00:13:15,490 --> 00:13:17,630
A vskutku, to je
Jediné, co tam je.

306
00:13:17,630 --> 00:13:23,250
Tvrdím nyní, že proto, že jsem si tohle
soubor hello.html uvnitř adresáře

307
00:13:23,250 --> 00:13:26,940
nazývá veřejná uvnitř adresáře
s názvem localhost uvnitř adresáře

308
00:13:26,940 --> 00:13:29,810
tzv vhosts, které
díky zaměstnancům CS50

309
00:13:29,810 --> 00:13:34,390
byl pre-nakonfigurován tak, aby je
kořen webového serveru,

310
00:13:34,390 --> 00:13:36,900
Nyní mohu snad udělat.

311
00:13:36,900 --> 00:13:38,390
>> Jdu otevřít novou kartu.

312
00:13:38,390 --> 00:13:40,090
A já jdu ne file: //.

313
00:13:40,090 --> 00:13:44,520
Chystám se použít skutečný
http / localhost, což

314
00:13:44,520 --> 00:13:47,470
znovu, je přezdívka
pro mou vlastní server.

315
00:13:47,470 --> 00:13:51,085
A pak jsem jít s tím, co
název souboru, jen aby bylo jasno?

316
00:13:51,085 --> 00:13:52,680

317
00:13:52,680 --> 00:13:54,320
Je-li tento příběh asi bude?

318
00:13:54,320 --> 00:13:56,066

319
00:13:56,066 --> 00:13:56,565
hello.html.

320
00:13:56,565 --> 00:13:58,350

321
00:13:58,350 --> 00:14:04,270
>> Takže jinými slovy, chci teď tohle
je můj vlastní počítač, moje vlastní zařízení,

322
00:14:04,270 --> 00:14:05,660
jako by je to skutečné serveru.

323
00:14:05,660 --> 00:14:07,490
Jeho přezdívka je localhost.

324
00:14:07,490 --> 00:14:10,210
Ale myslet na localhost jako jako
Facebook.com google.com, cokoliv.

325
00:14:10,210 --> 00:14:11,600
Je to jen můj místní název.

326
00:14:11,600 --> 00:14:14,810
A pak finále chci, je v
kořen pevného disku, abych tak řekl,

327
00:14:14,810 --> 00:14:17,729
nebo kořen webového serveru,
ergo lomítko a pak

328
00:14:17,729 --> 00:14:18,770
název souboru hello.html.

329
00:14:18,770 --> 00:14:19,880

330
00:14:19,880 --> 00:14:21,930
>> Dovolte mi, abych oddálit a stiskněte klávesu Enter.

331
00:14:21,930 --> 00:14:24,266
A opravdu, tam je teď moje webové stránky.

332
00:14:24,266 --> 00:14:25,390
Takže je to trochu jinak.

333
00:14:25,390 --> 00:14:26,880
A to je jen jako nezaujatý.

334
00:14:26,880 --> 00:14:27,904
Toto je stará verze.

335
00:14:27,904 --> 00:14:29,070
Dovolte mi, abych zmenšit písmo zpět.

336
00:14:29,070 --> 00:14:29,745
To je starý.

337
00:14:29,745 --> 00:14:30,890
To je nová.

338
00:14:30,890 --> 00:14:35,430
Ale co je v podstatě děje
nyní je, že HTTP je používán.

339
00:14:35,430 --> 00:14:39,344
>> Udělejme to trochu jasnější, nebo
chcete-li, trochu komplikovanější.

340
00:14:39,344 --> 00:14:41,760
Nech mě jít na pravém dolním rohu
v pravém horním rohu mého zařízení.

341
00:14:41,760 --> 00:14:44,000
A všimněte si, že to všechno
čas, tam bylo mnoho.

342
00:14:44,000 --> 00:14:47,330
To je jedinečná adresa
vašeho CS50 Appliance.

343
00:14:47,330 --> 00:14:50,800
Je to soukromá adresa,
Jak vyplývá z 172,16,

344
00:14:50,800 --> 00:14:53,860
což prostě znamená jen fyzicky
přístup k této webový server.

345
00:14:53,860 --> 00:14:56,340
Vše je firewallem a
pěkně chráněn od zbytku

346
00:14:56,340 --> 00:14:58,130
světa protože toto řešení.

347
00:14:58,130 --> 00:15:01,920
>> A teď si všimnout ale když půjdu do
tato adresa není v mém zařízení,

348
00:15:01,920 --> 00:15:04,340
ale Mac OS-- jdu
vrátit se sem.

349
00:15:04,340 --> 00:15:05,930
To je můj Mac nyní.

350
00:15:05,930 --> 00:15:08,460
A teď jdu otevřít
tato verze Chrome zde.

351
00:15:08,460 --> 00:15:17,370
A já jdu na http: //172.16.25
/ A jsem zapomenout na rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Takže jdu na návštěvu z mého počítače Mac
že IP adresa /hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
A teď vidím z mého počítače Mac
že mé CS50 Appliance, který je

354
00:15:29,850 --> 00:15:32,600
IP adresa je, že
číslo, skutečně chová

355
00:15:32,600 --> 00:15:34,320
jako webový server na internetu.

356
00:15:34,320 --> 00:15:36,944
Nemá pěkný snadné
zapamatovatelný název jako Facebook.com,

357
00:15:36,944 --> 00:15:40,370
ale je to pomocí HTTP
Zdá se, že i když chrom

358
00:15:40,370 --> 00:15:43,560
je druh zjednodušení svět
pro nás, ale nám to ukazuje HTTP.

359
00:15:43,560 --> 00:15:46,210
Ale je to opravdu přesně to.

360
00:15:46,210 --> 00:15:48,470
Chrome je jen ukládání některých
úhozů v těchto dnech.

361
00:15:48,470 --> 00:15:50,530
A to je to, co vidíme.

362
00:15:50,530 --> 00:15:51,890
>> Tak to je vše v pořádku a dobré.

363
00:15:51,890 --> 00:15:53,740
Ale je to docela nezaujatý stránku.

364
00:15:53,740 --> 00:15:56,230
Nech mě jít a něco udělat
dnes trochu jinak.

365
00:15:56,230 --> 00:15:57,910
Tak nech mě jít zpátky do gedit.

366
00:15:57,910 --> 00:16:00,580
A místo toho, ahoj,
svět, pojďme dát obrázek.

367
00:16:00,580 --> 00:16:05,880
A já jsem tvrdil, ze before-- nech mě jít
do mé localhost adresáře veřejnosti.

368
00:16:05,880 --> 00:16:10,580
A nech mě jít napřed a kopírování
celá parta souborů od dnešního dne

369
00:16:10,580 --> 00:16:15,633
z mého Dropbox složky na zde.

370
00:16:15,633 --> 00:16:19,470

371
00:16:19,470 --> 00:16:21,680
>> Nyní, když jsem typ LS, podívejte se
na všech těchto souborech

372
00:16:21,680 --> 00:16:24,940
že jsem distribuované
Webová stránka hřiště je v předstihu dnes,

373
00:16:24,940 --> 00:16:26,830
z nichž jeden je ještě hello.html.

374
00:16:26,830 --> 00:16:27,830
Takže tam je to jedno.

375
00:16:27,830 --> 00:16:30,730
A připomínají tuto hloupou jeden
z minulého time-- cat.jpg.

376
00:16:30,730 --> 00:16:34,550
Tak zkusím vložit
cat.jpg uvnitř mé webové stránky.

377
00:16:34,550 --> 00:16:37,690
>> Chystám se jít dopředu
a to cat.jpg, zachránit.

378
00:16:37,690 --> 00:16:38,950
Nech mě jít zpátky do Chromu.

379
00:16:38,950 --> 00:16:41,140
A dovolte mi přiblížit
písmo a teď znovu.

380
00:16:41,140 --> 00:16:43,090

381
00:16:43,090 --> 00:16:45,030
Jejda, kde jsem si to?

382
00:16:45,030 --> 00:16:48,210

383
00:16:48,210 --> 00:16:51,520
Standby-- pořád mám ten starý
verze z mého stolního Open.

384
00:16:51,520 --> 00:16:56,020
Tak nech mě jít do mého VHOST, můj
localhost, můj veřejný a hello.html.

385
00:16:56,020 --> 00:16:57,320

386
00:16:57,320 --> 00:17:00,670
Takže teď nech mě jít dopředu a
říkají cat.jpg uvnitř těla

387
00:17:00,670 --> 00:17:02,830
tam, kde chci, aby to bylo
Zobrazí se a znovu.

388
00:17:02,830 --> 00:17:04,560
Samozřejmě, že to není správné.

389
00:17:04,560 --> 00:17:08,050
>> Tak musím říct, prohlížeče malý
více záměrně, co chci, aby to dělat.

390
00:17:08,050 --> 00:17:10,210
Jednoduše napsáním název
samozřejmě není dostačující.

391
00:17:10,210 --> 00:17:15,134
Tak připomenout, že tam byl další
tag, obraz, img krátkosti.

392
00:17:15,134 --> 00:17:17,550
Je to jen proto, že lidé
nelíbí typu Plný slova.

393
00:17:17,550 --> 00:17:19,050
A pak můžeme udělat zdroj = "cat.jpg".

394
00:17:19,050 --> 00:17:21,470

395
00:17:21,470 --> 00:17:23,550
>> A teď budu dělat
Jedna věc tu jiný.

396
00:17:23,550 --> 00:17:25,390
I když všechny
Naše značky, doposud

397
00:17:25,390 --> 00:17:28,086
měl tento pojem
začít tag a koncový tag,

398
00:17:28,086 --> 00:17:30,210
že není opravdu
smysl pro obrázek, ne?

399
00:17:30,210 --> 00:17:32,430
Obraz je buď tam, nebo tam není.

400
00:17:32,430 --> 00:17:36,650
A tak lidé přišli
s jednodušší úmluvy.

401
00:17:36,650 --> 00:17:40,310
Máte-li značku, která může jak
začínat a končit ve stejném time--

402
00:17:40,310 --> 00:17:43,790
to může být prázdný, tak se speak-- jen
vložit lomítko uvnitř tagu

403
00:17:43,790 --> 00:17:44,710
na samém konci.

404
00:17:44,710 --> 00:17:45,776

405
00:17:45,776 --> 00:17:47,150
Nyní mi dovolte vrátit se k mému prohlížeči.

406
00:17:47,150 --> 00:17:50,377
Hit Reload Sakra, něco je špatně.

407
00:17:50,377 --> 00:17:52,460
Pravděpodobně jste viděl
občas na webu,

408
00:17:52,460 --> 00:17:53,600
i když to není tvoje vina.

409
00:17:53,600 --> 00:17:54,766
Je to chyba webového serveru.

410
00:17:54,766 --> 00:17:56,240
Co ódy to naznačují?

411
00:17:56,240 --> 00:17:57,450

412
00:17:57,450 --> 00:17:58,009
Je to rozbité.

413
00:17:58,009 --> 00:17:59,300
To je místo, kde se obraz patří.

414
00:17:59,300 --> 00:17:59,700
Jo?

415
00:17:59,700 --> 00:18:01,560
>> Diváků: Ale to není
mají přístup k obrazu.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J Malan: Nezáleží
mají přístup k obrazu.

417
00:18:03,070 --> 00:18:05,230
Že, nebo ještě hůře, možná
není ani neexistuje.

418
00:18:05,230 --> 00:18:06,729
Uvidíme, jestli se nemůžeme diagnostikovat, že.

419
00:18:06,729 --> 00:18:09,390
Připomeňme si z poslední doby, že pokud
Chrome, v zařízení,

420
00:18:09,390 --> 00:18:11,870
nebo dokonce i na vašem počítači Mac nebo PC,
jdete do menu pro vývojáře

421
00:18:11,870 --> 00:18:14,650
a přejděte na Nástroje pro vývojáře
možnost, která pravděpodobně nemáš

422
00:18:14,650 --> 00:18:16,850
moc nepoužívá, nebo vůbec.

423
00:18:16,850 --> 00:18:20,780
A když půjdu k síti
a znovu načtěte stránku,

424
00:18:20,780 --> 00:18:24,110
pojďme se vlastně podívat na HTTP
požadavky, které jsou vyrobeny.

425
00:18:24,110 --> 00:18:28,400
>> Vypadá to, že je hello.html
opravdu v pořádku, tedy 200.

426
00:18:28,400 --> 00:18:30,630
Ale cat.jpg je 403.

427
00:18:30,630 --> 00:18:31,650
Takže to není 404.

428
00:18:31,650 --> 00:18:33,490
Soubor pravděpodobně existuje.

429
00:18:33,490 --> 00:18:35,250
403 znamená zakázáno.

430
00:18:35,250 --> 00:18:37,790
Tak to je trochu matoucí.

431
00:18:37,790 --> 00:18:42,340
Chystám se vrátit
k mému terminálovém okně.

432
00:18:42,340 --> 00:18:43,700
Dovolte mi, abych přiblížení tady.

433
00:18:43,700 --> 00:18:44,750
A dovolte mi udělat ls.

434
00:18:44,750 --> 00:18:46,430
Je tu tytéž soubory.

435
00:18:46,430 --> 00:18:49,410
>> Nyní mi dovolte udělat ls-l,
které jste pravděpodobně

436
00:18:49,410 --> 00:18:53,350
používá před podívat se na soubor
Velikosti možná nebo časová razítka.

437
00:18:53,350 --> 00:18:55,590
A vidíme spoustu
zdrcující informace.

438
00:18:55,590 --> 00:18:57,040
Ale všimněte si, že pár detailů.

439
00:18:57,040 --> 00:19:01,660
Zde je hello.html v tomto
řádku tady a tady je cat.jpg.

440
00:19:01,660 --> 00:19:02,934

441
00:19:02,934 --> 00:19:05,850
A to je právě spotřebičem
uživatelsky přívětivý zvýrazněním JPEG je

442
00:19:05,850 --> 00:19:07,380
ve fialové takhle.

443
00:19:07,380 --> 00:19:11,470
Ale co jiného se liší u
velikost souboru a název souboru?

444
00:19:11,470 --> 00:19:13,438

445
00:19:13,438 --> 00:19:14,754
>> Diváků: [neslyšitelné].

446
00:19:14,754 --> 00:19:16,920
DAVID J Malan: Jo, je tu
více dvě R je tady.

447
00:19:16,920 --> 00:19:20,170
Všimněte si, co hello.html se děje.

448
00:19:20,170 --> 00:19:24,050
Tak to dopadá, že jména
tento adresář veřejnost je důležité.

449
00:19:24,050 --> 00:19:26,400
Vše, co v tomto adresáři
má být veřejná.

450
00:19:26,400 --> 00:19:28,790
Ale to nestačí
jen přesouvat soubory tam.

451
00:19:28,790 --> 00:19:31,480
Také je potřeba změnit
způsob souborů,

452
00:19:31,480 --> 00:19:35,180
změnit oprávnění
soubor, který chcete aktivně ne

453
00:19:35,180 --> 00:19:37,650
je výchozí nastavení,
což je to, že jen umím číst

454
00:19:37,650 --> 00:19:39,220
a psát, já jako vlastník.

455
00:19:39,220 --> 00:19:43,540
Chci celý svět všechny v
moci přečíst můj soubor, abych tak řekl.

456
00:19:43,540 --> 00:19:44,950
Přečtěte si prostě znamená zobrazení.

457
00:19:44,950 --> 00:19:49,780
>> A skutečně, jak uvidíte v problému
nastavit sedm, to je to, co znamenají, že takovýto R je.

458
00:19:49,780 --> 00:19:53,160
Tyto dvě R je průměrná nechat všechny
jinde ve světě i přečíst,

459
00:19:53,160 --> 00:19:55,300
zvlášť teď,
je to v tomto adresáři.

460
00:19:55,300 --> 00:19:59,620
Takže nejjednodušší způsob, jak to napravit, je
jít do mého řádku a to chmod ke změně

461
00:19:59,620 --> 00:20:05,580
Režim a potom proveďte + R, dohromady,
všichni, všichni, a r pro čtení,

462
00:20:05,580 --> 00:20:07,944
a pak cat.jpg Enter.

463
00:20:07,944 --> 00:20:10,360
Se zdánlivě nic neděje, což
obvykle znamená dobrou věc.

464
00:20:10,360 --> 00:20:13,850
Takže ls-l again-- nyní
Pojďme se podívat na cat.jpg.

465
00:20:13,850 --> 00:20:15,750
A toto oprávnění
Zdá se, že se změnily.

466
00:20:15,750 --> 00:20:18,670
Mimochodem, pokud uděláte
chyba a vy, například,

467
00:20:18,670 --> 00:20:23,210
právě udělal your-- nemám víš-- esej
veřejně přístupné náhodou,

468
00:20:23,210 --> 00:20:25,480
můžete dělat pravý opak, chmod a-R.

469
00:20:25,480 --> 00:20:25,909

470
00:20:25,909 --> 00:20:28,200
I když upřímně řečeno, to by nemělo
ve veřejném seznamu

471
00:20:28,200 --> 00:20:29,760
stejně, jestli je to problém.

472
00:20:29,760 --> 00:20:32,475
>> Takže teď se vraťme do
můj prohlížeč a Obnovit.

473
00:20:32,475 --> 00:20:32,904

474
00:20:32,904 --> 00:20:34,820
A já jdu na tlačítko
malý Ghostbusters

475
00:20:34,820 --> 00:20:38,030
symbol jasné, že část
obrazovky, takže můžeme vidět nové požadavky.

476
00:20:38,030 --> 00:20:40,630
A skutečně, zde je
Bručoun Cat před rokem.

477
00:20:40,630 --> 00:20:43,010
Ale mnohem důležitější je,
technicky, je

478
00:20:43,010 --> 00:20:45,565
číslo 200, která
znamená, že to mám v pořádku.

479
00:20:45,565 --> 00:20:47,190
Dobře, tak to je vše v pořádku a dobré.

480
00:20:47,190 --> 00:20:48,940
Ale my ne dělat
to nejlepší z webových stránek,

481
00:20:48,940 --> 00:20:51,967
ani se budeme snažit příliš těžké
aby nejmódnější webových stránek dnes.

482
00:20:51,967 --> 00:20:54,550
Ale pojďme aspoň něco
Super seznámit před chrastící

483
00:20:54,550 --> 00:20:56,030
mimo několika dalších značek.

484
00:20:56,030 --> 00:20:58,470
Takže předpokládám, že nemám jen chcete kočku zde.

485
00:20:58,470 --> 00:21:02,530
Dejme tomu, že vlastně chci to
kočka odkazy na něco.

486
00:21:02,530 --> 00:21:07,210
>> Bych mohl, například
něco takového.

487
00:21:07,210 --> 00:21:08,580

488
00:21:08,580 --> 00:21:12,890
pro kotevní překlad pro
hyper reference equals--

489
00:21:12,890 --> 00:21:17,440
a řekněme něco
jako www.google.com konci

490
00:21:17,440 --> 00:21:19,540
citovat zavřít držák.

491
00:21:19,540 --> 00:21:22,000
A nyní hledat pro kočky.

492
00:21:22,000 --> 00:21:23,520
Close kotva tag.

493
00:21:23,520 --> 00:21:26,760
Takže to má jen jeden druh
ze zcela nové detail.

494
00:21:26,760 --> 00:21:28,190
Tag samozřejmě, je jiný.

495
00:21:28,190 --> 00:21:31,770
Je to název pro kotvu
href nebo hyper reference.

496
00:21:31,770 --> 00:21:35,269
>> Ale mnohem důležitější je, že je
tento syntaktický funkce zde.

497
00:21:35,269 --> 00:21:37,810
To je to, co začneme volat
ne tag, ale atribut.

498
00:21:37,810 --> 00:21:40,830
A atribut je něco, co
mění chování značky.

499
00:21:40,830 --> 00:21:45,400
A tento atribut href, prostředky
změnit chování tohoto kotvy

500
00:21:45,400 --> 00:21:48,430
tak, že když je to klikli,
to jde na tuto adresu URL zde.

501
00:21:48,430 --> 00:21:50,330
A samozřejmě, že URL je Google.

502
00:21:50,330 --> 00:21:53,951
>> Mezitím, co je to
text zde bude?

503
00:21:53,951 --> 00:21:55,950
No, že to bude
co vlastně lidské

504
00:21:55,950 --> 00:21:58,470
vidí jako podtržený
odkaz, tak jednoduché, jak to.

505
00:21:58,470 --> 00:21:59,220
Takže zkusme to.

506
00:21:59,220 --> 00:21:59,980
Dovolte mi, abych ji uložíte.

507
00:21:59,980 --> 00:22:01,650
Jsem stále v hello.html.

508
00:22:01,650 --> 00:22:05,360
Ale ve verzích pro on-line, uvidíte
skutečné názvy souborů jsme předem připravených.

509
00:22:05,360 --> 00:22:06,805
Nech mě jít dopředu a znovu.

510
00:22:06,805 --> 00:22:08,680
A teď je to velmi
nezaujatý strana stále.

511
00:22:08,680 --> 00:22:10,910
Ale když jsem se vznášet se nad there--
a je to trochu malé,

512
00:22:10,910 --> 00:22:13,576
ale- můžete vidět na spodní části
levém rohu obrazovky,

513
00:22:13,576 --> 00:22:15,242
to opravdu bude google.com.

514
00:22:15,242 --> 00:22:19,280
A když jsem klepněte na to, že to bude
metla mi cestu k vlastnímu Google.

515
00:22:19,280 --> 00:22:22,610
>> Ale všimněte zde příležitost pro
vykořisťování, stejně jako stranou.

516
00:22:22,610 --> 00:22:25,150
A vrátíme se k jiným
otázky bezpečnosti před dlouho.

517
00:22:25,150 --> 00:22:29,290
Vzhledem k tomu, že je tato dichotomie
mezi, kam jít, a to, co říkáte,

518
00:22:29,290 --> 00:22:34,722
byste mohli udělat něco jako
tohle-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, a teď když jsem znovu
po uložení tuto stránku,

520
00:22:37,134 --> 00:22:38,800
to vypadá, že půjdu na Google.

521
00:22:38,800 --> 00:22:40,966
Ale neexistuje žádný důvod, proč jsem
jít na Google, ne?

522
00:22:40,966 --> 00:22:47,460
Mohl bych opravdu jít do něčeho, jako je
badguy.com, znovu načtěte stránku sem.

523
00:22:47,460 --> 00:22:49,750
A oznámení, stále vypadá jako Google.

524
00:22:49,750 --> 00:22:52,020
A pouze v případě, že jsem ostrý
dost vznášet se nad zde

525
00:22:52,020 --> 00:22:54,770
Nevidím to dokonce jít
jít na jiné místo.

526
00:22:54,770 --> 00:22:57,400
>> Takže pokud jste někdy dostali
e-mail, a to zejména

527
00:22:57,400 --> 00:22:59,610
jeden z Paypal, nebo
zdánlivě z Paypal

528
00:22:59,610 --> 00:23:01,830
s výzvou k přihlášení
na váš účet, to

529
00:23:01,830 --> 00:23:06,380
je důvod, proč byste měli nikdy
někdy na odkazy v e-mailech,

530
00:23:06,380 --> 00:23:07,930
upřímně řečeno, všechny odkazy v e-mailech.

531
00:23:07,930 --> 00:23:10,380
Pokud víte, že máte skutečný
peníze na Paypal nebo bankou

532
00:23:10,380 --> 00:23:14,250
Ameriky nebo Fidelity nebo na kteroukoli
webové stránky, ručně zadejte ji.

533
00:23:14,250 --> 00:23:17,530
Vzhledem k tomu, podívejte se, jak snadné je
přimět někoho do prezentovat to, co

534
00:23:17,530 --> 00:23:18,526
vypadá jako odkaz.

535
00:23:18,526 --> 00:23:20,400
Ale ve skutečnosti šlo
jít naprosto kdekoli.

536
00:23:20,400 --> 00:23:23,301
>> A je tu mnohem větší
hrozby, než tohle.

537
00:23:23,301 --> 00:23:25,300
Ve skutečnosti, je to trochu
tečny nyní, ale jeden

538
00:23:25,300 --> 00:23:28,430
z těch nejlepších, co jsem kdy viděl
která od té doby byla uzavřena,

539
00:23:28,430 --> 00:23:34,060
je někdo vedl lidé
to-- tak to by mohl říct,

540
00:23:34,060 --> 00:23:37,660
Klikněte zde pro přihlášení do vašeho
účet, bankovní účet.

541
00:23:37,660 --> 00:23:40,985
A to byla Bank of the West.

542
00:23:40,985 --> 00:23:43,030

543
00:23:43,030 --> 00:23:44,250
>> Takže někdo koupil tohle.

544
00:23:44,250 --> 00:23:47,090
A je to trochu lépe vidět
je v mono rozloženy písmo zvětšovat

545
00:23:47,090 --> 00:23:49,190
v na 30 stop projektorem.

546
00:23:49,190 --> 00:23:51,720
Ale když je to malé písmo
e-mail, že jste příjem,

547
00:23:51,720 --> 00:23:54,690
to vypadá jako bankofthewest.com,
ne bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
které někdo zaplatil 10 dolarů koupit.

549
00:23:58,230 --> 00:24:00,840
A pak to vedlo je, aby
ekvivalent nějaké špatné webové stránky.

550
00:24:00,840 --> 00:24:05,540
>> A uvidíte too-- vlastně můžeme udělat
tohle-- když půjdu na aktuální webové stránky,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, opět,
stažení z poslední doby

552
00:24:10,335 --> 00:24:13,210
že pokud je to jejich webové stránky a
jste zvědaví, jak to funguje,

553
00:24:13,210 --> 00:24:15,610
můžete samozřejmě jít do
Vývojářské nástroje Chrome.

554
00:24:15,610 --> 00:24:18,890
A můžete vidět všechny
HTML tam pěkně formátovaný.

555
00:24:18,890 --> 00:24:20,890
>> Ale více k věci,
jste cam-- pojďme uzavřít

556
00:24:20,890 --> 00:24:24,760
tohle-- můžete jít Zobrazit
Developer Zobrazit zdrojový kód.

557
00:24:24,760 --> 00:24:25,770

558
00:24:25,770 --> 00:24:28,350
Proč jsem jen kopírovat
to vše a pak jsem

559
00:24:28,350 --> 00:24:31,630
může jít do mého malého gedit okně
tady a vytvořit svůj vlastní webové stránky.

560
00:24:31,630 --> 00:24:33,210
Uložte na tuto hello.html.

561
00:24:33,210 --> 00:24:36,770
A pravděpodobně to bude zlomit,
protože to není tak snadné obvykle.

562
00:24:36,770 --> 00:24:41,590
Ale teď, když znovu načíst svou vlastní stránku na
moje vlastní CS50 Appliance a stiskněte Obnovit,

563
00:24:41,590 --> 00:24:42,990
OK, některé věci zlomil.

564
00:24:42,990 --> 00:24:45,750
Ale jsem dost blízko, aby s
moje vlastní bankovní webové stránky, ne?

565
00:24:45,750 --> 00:24:46,570
To vše HTML--

566
00:24:46,570 --> 00:24:47,370
>> [SMÍCH]

567
00:24:47,370 --> 00:24:49,210
>> DAVID J Malan: --I
ani actually-- a

568
00:24:49,210 --> 00:24:52,210
vím, že je to někdo, kdo
by ve skutečnosti klikněte na tyto odkazy také.

569
00:24:52,210 --> 00:24:54,864
Tak jasně, některé věci zlomil.

570
00:24:54,864 --> 00:24:56,780
Ale to povede
nám do diskuze,

571
00:24:56,780 --> 00:25:00,810
zbytečně právě teď, na to, co
CSS, kaskádové styly, jsou,

572
00:25:00,810 --> 00:25:03,410
a jak jste vlastně
stáhnout další soubory HTML

573
00:25:03,410 --> 00:25:06,140
a JPEG soubory GIF soubory, které
Webové stránky by mohly být pomocí.

574
00:25:06,140 --> 00:25:07,960
Ale to všechno je proveditelný.

575
00:25:07,960 --> 00:25:11,110
Ale je to opravdu scvrkává
Tyto velmi jednoduché heuristiky.

576
00:25:11,110 --> 00:25:14,450
>> Takže teď pojďme jen prolistovat
Několik dalších příkladů HTML

577
00:25:14,450 --> 00:25:16,680
jen aby vám pocit
co jiného můžete dělat.

578
00:25:16,680 --> 00:25:18,670
Například, to je list.html.

579
00:25:18,670 --> 00:25:23,240
Dejme tomu, že jsem chtěl, aby se webové stránky
se seznamem domů v quad.

580
00:25:23,240 --> 00:25:28,960
Mohl bych použít tag ul pro neuspořádaný
seznam a pak položka seznamu dítě

581
00:25:28,960 --> 00:25:33,760
a pak opakovat over-- nebo seznamu,
rather-- domy v otázce.

582
00:25:33,760 --> 00:25:36,080
>> A když jsem to otevřít se, jdeme na to.

583
00:25:36,080 --> 00:25:40,670
Pojďme není hello.html,
ale list.html.

584
00:25:40,670 --> 00:25:42,160
Sakra.

585
00:25:42,160 --> 00:25:43,000
Jak mohu tento problém vyřešit?

586
00:25:43,000 --> 00:25:45,679

587
00:25:45,679 --> 00:25:47,220
Je to stejný problém jako předtím, ne?

588
00:25:47,220 --> 00:25:52,510
Tak mě nech dělat chmod-- oops--
chmod + r list.html.

589
00:25:52,510 --> 00:25:54,610

590
00:25:54,610 --> 00:25:59,610
A teď když jsem se vrátit do svého prohlížeče
a klepněte na tlačítko Načíst znovu, tady to je.

591
00:25:59,610 --> 00:26:02,360
Takže pokud jste někdy chtěli, aby
seznam s odrážkami, můžete to udělat.

592
00:26:02,360 --> 00:26:06,210
Chcete-li být super fantazie a vytvořit
uspořádaného seznamu, není neuspořádaný seznam,

593
00:26:06,210 --> 00:26:10,170
změnit ty, ol, znovu načtěte stránku, a
Nyní prohlížeč bude počítat za vás.

594
00:26:10,170 --> 00:26:11,241
>> Co jiného můžeme dělat?

595
00:26:11,241 --> 00:26:13,990
No, pár others-- pokud
máte dlouhé odstavců text--

596
00:26:13,990 --> 00:26:15,698
Například, některé
Latinský text jako tohle--

597
00:26:15,698 --> 00:26:20,730
a budete chtít v samostatných odstavcích,
open p, v blízkosti p tagu odstavce.

598
00:26:20,730 --> 00:26:22,010
A to znovu a znovu.

599
00:26:22,010 --> 00:26:26,600
A když jsem teď otevřít tento soubor,
paragraphs.html, dobře, to

600
00:26:26,600 --> 00:26:27,570
je stále nepříjemné.

601
00:26:27,570 --> 00:26:34,320
Takže teď pojďme se vrátit k mému
výzva, chmod a + r r hvězda .html--

602
00:26:34,320 --> 00:26:36,099
pěkný malý divoká karta, abych tak řekl.

603
00:26:36,099 --> 00:26:37,890
To by měly stanovit všechny
tyto problémy pro mě.

604
00:26:37,890 --> 00:26:38,990
Pojďme znovu.

605
00:26:38,990 --> 00:26:40,500
K dispozici jsou tři body.

606
00:26:40,500 --> 00:26:42,930
>> A teď pojďme do toho
a otevřít jednu další.

607
00:26:42,930 --> 00:26:44,310
Jak se o stůl?

608
00:26:44,310 --> 00:26:46,440
Určitě jste si všimli stolní vzhled
trochu složitější.

609
00:26:46,440 --> 00:26:49,110
Ale je to stejné idea--
open tag, open tag,

610
00:26:49,110 --> 00:26:51,360
open, open, open, close tag, open tag.

611
00:26:51,360 --> 00:26:54,410
A to se stalo, stát
stůl, jehož hranice je zřejmě

612
00:26:54,410 --> 00:26:58,500
Bude tloušťku 1-- cokoliv
že means-- řádek tabulky, tabulka

613
00:26:58,500 --> 00:27:00,320
dat, což znamená buňku.

614
00:27:00,320 --> 00:27:03,840
A když jsem se vrátit do svého prohlížeče
tady a jít do table.html,

615
00:27:03,840 --> 00:27:05,840
můžete vidět něco
takhle, odporná.

616
00:27:05,840 --> 00:27:07,840
Ale dostaneme do bodu,
kde můžeme skutečně

617
00:27:07,840 --> 00:27:09,260
dělat věci hezčí než to.

618
00:27:09,260 --> 00:27:10,530
>> Dovolte mi tedy stanovit nyní.

619
00:27:10,530 --> 00:27:11,870
Je tu svazky více značek.

620
00:27:11,870 --> 00:27:15,225
A HTML je úžasné vyzvednout
protože upřímně řečeno, vše, co potřebujete udělat,

621
00:27:15,225 --> 00:27:17,600
se podívat na stávajících webových stránek
s nimiž jste se seznámili.

622
00:27:17,600 --> 00:27:20,340
A ty jsi jako, oh, to je jak
dělali to esteticky.

623
00:27:20,340 --> 00:27:23,159
>> Nebo se můžete podívat na všechny on-line
zdroje o tom, jak funguje HTML,

624
00:27:23,159 --> 00:27:25,700
a uvidíte, že tam je
Celý slovník dalších značek.

625
00:27:25,700 --> 00:27:30,110
Ale s jednoduchým mentálním modelu
sám, že téměř jakýkoli štítek otevření

626
00:27:30,110 --> 00:27:33,620
musí být uzavřeny, je to opravdu
se stačí naučit sám

627
00:27:33,620 --> 00:27:36,950
HTML po porozumět
tyto základní myšlenky značek

628
00:27:36,950 --> 00:27:40,520
a atributy a dobře formedness
že jsme mluvili o tom,

629
00:27:40,520 --> 00:27:44,697
zavřít něco, co bychom mohli otevřít
takže nemáme plést prohlížeč.

630
00:27:44,697 --> 00:27:46,780
Takže pojďme se teď to
zajímavější úrovně

631
00:27:46,780 --> 00:27:48,100
tím, že půjdete na aktuální.

632
00:27:48,100 --> 00:27:51,095
A pojďme na mém Macu
zde, na google.com.

633
00:27:51,095 --> 00:27:52,280

634
00:27:52,280 --> 00:27:54,020
A teď notice-- pojďme to udělat.

635
00:27:54,020 --> 00:27:57,280
Jsem gong jít
Nastavení, Nastavení hledání.

636
00:27:57,280 --> 00:28:01,070
Chci vypnout tento nepříjemný okamžik
Výsledky věc, okamžitě tam, kde

637
00:28:01,070 --> 00:28:02,450
začne reagovat na vaše psaní.

638
00:28:02,450 --> 00:28:05,300
Pojďme to udělat starší školu tak
jsme skutečně vidět, co se děje.

639
00:28:05,300 --> 00:28:08,260
>> Takže já jdu, abych si zachránil
Nastavení zde Google.

640
00:28:08,260 --> 00:28:11,160
A teď notice-- budu
hledat něco jako kočky.

641
00:28:11,160 --> 00:28:14,500
A je to stále dělá auto
Kompletní tady, ale na základě věcí,

642
00:28:14,500 --> 00:28:15,970
lidé zadali v minulosti.

643
00:28:15,970 --> 00:28:17,490
Povšimněme si ale, co se bude dít.

644
00:28:17,490 --> 00:28:20,272
>> V URL v okamžiku, kdy
je to jen google.com.

645
00:28:20,272 --> 00:28:22,650
A technicky je to lomítko.

646
00:28:22,650 --> 00:28:25,910
Google právě ukládání znak
a není nám to ukazuje.

647
00:28:25,910 --> 00:28:30,400
Jsou nám ukazuje https, jen
být super uklidňující, že jsme

648
00:28:30,400 --> 00:28:32,850
v zabezpečeném nebo šifrované stránky.

649
00:28:32,850 --> 00:28:35,690
>> Tak nech mě jít dopředu a hledat pro kočky.

650
00:28:35,690 --> 00:28:37,670
Teď to byl opravdu
ohromující rychle.

651
00:28:37,670 --> 00:28:39,470
Podívejte se na délce této adresy URL.

652
00:28:39,470 --> 00:28:43,070
Ale ukazuje se, že většina z těchto věcí
v URL je vlastně k ničemu.

653
00:28:43,070 --> 00:28:45,320
Chystám se začít mazat
věci nerozumím.

654
00:28:45,320 --> 00:28:46,560

655
00:28:46,560 --> 00:28:47,360
Vidím kočky.

656
00:28:47,360 --> 00:28:48,470
Chápu kočky.

657
00:28:48,470 --> 00:28:50,380
Nevím, proč kočky jsou tam znovu.

658
00:28:50,380 --> 00:28:52,620
Já opravdu nevím,
co to nesmysl je.

659
00:28:52,620 --> 00:28:56,030
Tak jsem jen tak, aby
zvýraznění a mazání věci

660
00:28:56,030 --> 00:28:59,905
že nechápu,
destilace URL do právě tento.

661
00:28:59,905 --> 00:29:00,920

662
00:29:00,920 --> 00:29:02,270
>> Nyní mi dovolte si znovu zadávat.

663
00:29:02,270 --> 00:29:03,814
Vypadá to, že Google stále pracuje.

664
00:29:03,814 --> 00:29:06,980
Takže z nějakého důvodu, že přidáváte
spousta věcí na jejich adresy URL ve výchozím nastavení.

665
00:29:06,980 --> 00:29:09,000
Ale to není nezbytně nutné.

666
00:29:09,000 --> 00:29:10,340
Takže to, co je hezké o tom?

667
00:29:10,340 --> 00:29:13,630
No, nech mě jít dopředu a
otevřít Chrome Inspector.

668
00:29:13,630 --> 00:29:15,960
Tam je to trochu zkratka myš pro něj.

669
00:29:15,960 --> 00:29:17,360
>> Přejděte na kartu Síť.

670
00:29:17,360 --> 00:29:19,340
A teď mi dovolte znovu
Tato stránka ještě jednou.

671
00:29:19,340 --> 00:29:20,280
A já stisknutou klávesou Shift.

672
00:29:20,280 --> 00:29:22,520
Mimochodem, prohlížečů
mají tendenci do mezipaměti nebo uložit

673
00:29:22,520 --> 00:29:24,697
informace jen kvůli účinnosti je.

674
00:29:24,697 --> 00:29:27,280
Ale obvykle, držení Shift a
překládka donutí vše

675
00:29:27,280 --> 00:29:28,994
začít znovu od začátku.

676
00:29:28,994 --> 00:29:30,410
A to je to, co chci dělat.

677
00:29:30,410 --> 00:29:33,550
>> A všimněte si všechny tyto
řádky, které právě objevil.

678
00:29:33,550 --> 00:29:37,920
Ukazuje se, že v daném web
strana, může tam být jen jeden soubor

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- nebo tam
může být 52, jako v tomto případě.

680
00:29:43,500 --> 00:29:45,820
Když jsem se navštívit google.com,
zdá se, že můj prohlížeč

681
00:29:45,820 --> 00:29:49,650
začíná 52 jednotlivé HTTP požadavky.

682
00:29:49,650 --> 00:29:50,520
Proč tomu tak je?

683
00:29:50,520 --> 00:29:53,380
>> No, podívejte se na to, co je uvnitř
této webové stránky do horní části.

684
00:29:53,380 --> 00:29:55,620
K dispozici je nejen text,
ale je tu skutečné obrazy

685
00:29:55,620 --> 00:29:57,130
koček více než na pravé straně.

686
00:29:57,130 --> 00:29:59,110
K dispozici je barevné logo tady na levé straně.

687
00:29:59,110 --> 00:30:01,750
Je tu vše z těchto ikon
pro mikrofon a tak dále.

688
00:30:01,750 --> 00:30:05,130
Je tu hodně kusů, stavební
bloky, stírací kousky, chcete-li,

689
00:30:05,130 --> 00:30:06,250
na této webové stránce.

690
00:30:06,250 --> 00:30:10,310
A co je na tom prohlížeč na
dostat úplně první soubor, který

691
00:30:10,310 --> 00:30:16,180
je tento řádek zde, jak se v podstatě
iterace přes vrchol HTML

692
00:30:16,180 --> 00:30:19,880
dolů, zleva doprava, hledá
věci, jako je image značky nebo jiné značky

693
00:30:19,880 --> 00:30:23,160
které se zmínit další soubory a
když to vidí, jde a načte je

694
00:30:23,160 --> 00:30:26,050
přes HTTP, životaschopný celek
obálka metafora,

695
00:30:26,050 --> 00:30:29,670
a pak se zobrazí v
vhodné umístění na webové stránce.

696
00:30:29,670 --> 00:30:33,370
>> Ale všimněte zde, pokud se zaměřím na
První hod, vyhledávání koček,

697
00:30:33,370 --> 00:30:37,090
Všimněte si, že ve skutečnosti je to pomocí protokolu HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
A bohužel, Google
Chrome právě teď ve verzi 39

699
00:30:41,690 --> 00:30:45,110
je druh dumbing věci dolů a
Není nám ukazuje skutečné záhlaví.

700
00:30:45,110 --> 00:30:49,680
Ale to, co se skutečně poslal, je požadavek
za to, lomítko, ale / search? q = kočky.

701
00:30:49,680 --> 00:30:52,830

702
00:30:52,830 --> 00:30:54,340
>> Nyní, proč je to tak důležité?

703
00:30:54,340 --> 00:30:57,110
No, já jdu k odvození
z toho, že pokud Google

704
00:30:57,110 --> 00:31:01,520
podporuje dotazy tohoto formuláře, proč
ne mám implementovat své vlastní hledání

705
00:31:01,520 --> 00:31:06,420
motor CS50, ale jen přední
konec, jen grafické uživatelské rozhraní.

706
00:31:06,420 --> 00:31:09,610
A budeme zadávat zadní část,
výsledky skutečné hledání na Google.

707
00:31:09,610 --> 00:31:10,510
>> Tak jak to mám udělat?

708
00:31:10,510 --> 00:31:13,820
No, nech mě jít do gedit sem.

709
00:31:13,820 --> 00:31:19,180
A nech mě jít napřed a otevřít
up, řekněme, nový soubor.

710
00:31:19,180 --> 00:31:22,280
A já jdu zachránit tento
dočasně jako hledání-0.html.

711
00:31:22,280 --> 00:31:25,111

712
00:31:25,111 --> 00:31:27,860
A nakonec, budeme rychle
vpřed na kterou jsem předem připravených.

713
00:31:27,860 --> 00:31:30,190
>> A já jdu
rychle vybičovat typu doc

714
00:31:30,190 --> 00:31:33,840
html otevřený držák html
v blízkosti držák html.

715
00:31:33,840 --> 00:31:38,390
Pak budu dělat hlavu
v blízkosti hlavy otevřené titul CS50

716
00:31:38,390 --> 00:31:40,150
Hledat místo vyhledávání Google.

717
00:31:40,150 --> 00:31:43,480
Tady budu mít
tělo, tady blízko těla.

718
00:31:43,480 --> 00:31:45,835
A teď musím CS50 hledání.

719
00:31:45,835 --> 00:31:47,710
A vlastně, pojďme
stavět to postupně.

720
00:31:47,710 --> 00:31:51,043
Chystám se jít dopředu a zavřete to a
skutečně dát to v mém veřejném seznamu.

721
00:31:51,043 --> 00:31:52,730
Tak mi dej jen jeden okamžik.

722
00:31:52,730 --> 00:31:55,390
search-0.html-- Chystám se
časově říkají search.html.

723
00:31:55,390 --> 00:31:56,600

724
00:31:56,600 --> 00:31:59,750
Chystám se chmod to + r search.html.

725
00:31:59,750 --> 00:32:01,072

726
00:32:01,072 --> 00:32:02,280
A teď jdu otevřít.

727
00:32:02,280 --> 00:32:03,224

728
00:32:03,224 --> 00:32:04,390
V pořádku, takže to bylo rychle.

729
00:32:04,390 --> 00:32:06,800
Ale cílem prostě bylo
abychom se dostali do bodu,

730
00:32:06,800 --> 00:32:09,630
mít tento text
Soubor s názvem search.html.

731
00:32:09,630 --> 00:32:10,940

732
00:32:10,940 --> 00:32:12,790
Takže není moc na pohled, ale.

733
00:32:12,790 --> 00:32:16,970
Ve skutečnosti, když půjdu do svého prohlížeče, a
přejít na search.html, to je vše, co je.

734
00:32:16,970 --> 00:32:17,720
Ale víte co?

735
00:32:17,720 --> 00:32:19,000
I může být trochu milovník.

736
00:32:19,000 --> 00:32:22,710
Četl jsem v knize, že je tu
tag záhlaví s názvem h1.

737
00:32:22,710 --> 00:32:26,100
A já jdu dál a
používat tuto open H1 a zavřít h1.

738
00:32:26,100 --> 00:32:27,220
Znovu načtete stránku.

739
00:32:27,220 --> 00:32:29,600
A teď je to větší a odvážnější,
není tak zajímavé,

740
00:32:29,600 --> 00:32:32,399
ale aspoň strukturálně
zajímavější.

741
00:32:32,399 --> 00:32:33,940
Ale teď mi dovolte představit jinou značku.

742
00:32:33,940 --> 00:32:36,500
Ukazuje se, že je to tag formuláře.

743
00:32:36,500 --> 00:32:38,400
A dovolte mi ukončit tento tag.

744
00:32:38,400 --> 00:32:40,830
A ukázalo se, je tu
vstupní tag, který

745
00:32:40,830 --> 00:32:44,600
má atribut s názvem typu, který
je datový typ pole,

746
00:32:44,600 --> 00:32:45,200
chcete-li.

747
00:32:45,200 --> 00:32:47,050
A bude typu textu.

748
00:32:47,050 --> 00:32:52,200
A jeho hodnota se děje
být CS50 hledání.

749
00:32:52,200 --> 00:32:53,850
Close tag.

750
00:32:53,850 --> 00:32:57,100
A tam to bude bez pojem
otevírání a zavírání s oddělenými tagy.

751
00:32:57,100 --> 00:33:00,300
>> Dovolte mi, abych se vrátit sem a
zjistit, co se děje, znovu.

752
00:33:00,300 --> 00:33:01,380
Začíná být zajímavé.

753
00:33:01,380 --> 00:33:02,950
Vypadá to, že je to textové pole.

754
00:33:02,950 --> 00:33:04,080

755
00:33:04,080 --> 00:33:06,999
A vlastně, já jsem nechtěl
dát hodnotu tam ještě.

756
00:33:06,999 --> 00:33:10,040
Nech mě jít zpátky a skutečně dostat
zbavit této hodnoty, aby to jednoduché.

757
00:33:10,040 --> 00:33:12,939
Místo toho, aby hodnoty, co jsem chtěl
aby tuto věc byl název.

758
00:33:12,939 --> 00:33:15,230
A já nevím, co to je,
tak se vrátím k tomu.

759
00:33:15,230 --> 00:33:18,270
>> Ale pod tím chci
dělat input type = odeslat.

760
00:33:18,270 --> 00:33:19,840

761
00:33:19,840 --> 00:33:22,120
A tato hodnota bude CS50 hledání.

762
00:33:22,120 --> 00:33:24,850
A uvidíme, proč jsem
přesunul hodnotu tohoto.

763
00:33:24,850 --> 00:33:28,900
Když jsem se znovu, se mi zdá nyní
Počátky mé vlastní vyhledávání

764
00:33:28,900 --> 00:33:30,820
motor, super odporná,
ale upřímně řečeno, je to

765
00:33:30,820 --> 00:33:34,260
ne daleko dohodil od toho, co
Výchozí stránka Google vypadá.

766
00:33:34,260 --> 00:33:37,950
>> Pokud jdu teď tady, můžu zadat
kočky a doufejme, klepněte na tlačítko Hledat.

767
00:33:37,950 --> 00:33:40,380
Ale já nejsem zcela neskončil,
proto, že jsem neprovedl,

768
00:33:40,380 --> 00:33:41,045
Je zřejmé, že databáze.

769
00:33:41,045 --> 00:33:42,940
Nemám lezl
web na výsledky vyhledávání.

770
00:33:42,940 --> 00:33:44,840
Tak jsem třeba zadávat, že pro Google.

771
00:33:44,840 --> 00:33:46,290
Tak jak to mám udělat?

772
00:33:46,290 --> 00:33:49,170
>> No, v první řadě bych
je třeba přidat a akce

773
00:33:49,170 --> 00:33:58,460
připisovat mé formě tagu, který
je http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
A vím, že jen z nutnosti
dovodit bližším pohledu

775
00:34:01,180 --> 00:34:02,505
v jejich URL.

776
00:34:02,505 --> 00:34:03,380
A teď hádejte.

777
00:34:03,380 --> 00:34:09,090
Co by měl tento text pole pravděpodobně
nazvat, podle toho, kde jsme přišli

778
00:34:09,090 --> 00:34:09,754
před rokem?

779
00:34:09,754 --> 00:34:11,896

780
00:34:11,896 --> 00:34:13,290
>> Diváků:? Q.

781
00:34:13,290 --> 00:34:14,370
>> DAVID J Malan:? Q.

782
00:34:14,370 --> 00:34:17,800
A už vůbec se skutečně potřebují otázku
označit to dopadá, ale q je skutečně to,

783
00:34:17,800 --> 00:34:20,489
q na dotaz, pravděpodobně
default, jen proto, že to je

784
00:34:20,489 --> 00:34:23,060
co Larry a Sergey
přišel s lety.

785
00:34:23,060 --> 00:34:24,739
Takže teď mi dovolte znovu načtěte tuto stránku.

786
00:34:24,739 --> 00:34:26,409
Nevypadá to tak odlišné.

787
00:34:26,409 --> 00:34:28,120
Ale teď sledujte, co se stane.

788
00:34:28,120 --> 00:34:32,360
>> Kdybych zadejte koček a klepněte na tlačítko
CS50 Hledání a pustit,

789
00:34:32,360 --> 00:34:35,770
Všiml jsem si bleskurychle
od skutečné Google.

790
00:34:35,770 --> 00:34:38,150
Nyní Google je, že je trochu
nepříjemné v tom, že jsou

791
00:34:38,150 --> 00:34:41,877
připojí další parametr,
chcete-li, na adresu URL.

792
00:34:41,877 --> 00:34:43,960
To je vše děje
automaticky na straně Google.

793
00:34:43,960 --> 00:34:48,730
>> Důležitou součástí je, že se zdá
aby přinesly tuto žádost zde.

794
00:34:48,730 --> 00:34:50,179
A opravdu, to, co se stane.

795
00:34:50,179 --> 00:34:53,040
Máte-li HTML, které
vypadá to, toto

796
00:34:53,040 --> 00:34:57,620
je druh webové vývojáře zápisu
že to říkám, jděte do toho a vytvořit formulář

797
00:34:57,620 --> 00:34:59,990
že když je předložen,
to bude jít na tuto adresu URL.

798
00:34:59,990 --> 00:35:03,430
A když URL poskytl
hodnoty pro věci, jako je Q,

799
00:35:03,430 --> 00:35:05,440
nechodí jen na tuto adresu URL.

800
00:35:05,440 --> 00:35:08,210
Vlastně, přejděte na otázku
značka a pak q = kočky.

801
00:35:08,210 --> 00:35:09,590

802
00:35:09,590 --> 00:35:13,060
Připojit parametr,
Parametr HTTP takhle.

803
00:35:13,060 --> 00:35:15,590
>> A právě být super přesné,
to, co je odvodit here--

804
00:35:15,590 --> 00:35:18,130
ale budu víc explicit-- je
že metoda, kterou chcete použít

805
00:35:18,130 --> 00:35:22,270
je dostat, místo něčeho jako
příspěvek, který budeme nakonec vidět.

806
00:35:22,270 --> 00:35:27,710
Takže ve zkratce, jednoduše tím, že pochopení
HTML a používat některé docela jednoduché tagy,

807
00:35:27,710 --> 00:35:30,610
nyní můžeme začít vytvářet
naše přední koncový uživatel

808
00:35:30,610 --> 00:35:32,850
rozhraní s vyhledávání
Motor za ním.

809
00:35:32,850 --> 00:35:34,800
>> Ale to je samozřejmě docela odporná.

810
00:35:34,800 --> 00:35:37,259
Dovolte mi tedy vlastně otevírají
o něco lepší verze.

811
00:35:37,259 --> 00:35:39,800
To je ten, I připravené v
předem, že má nějaké připomínky.

812
00:35:39,800 --> 00:35:41,900
Ale uvidíte, že já
do značné míry znovu ji.

813
00:35:41,900 --> 00:35:44,150
Tak to je on-line již k dispozici.

814
00:35:44,150 --> 00:35:48,050
A já jsem náhodou preventivně
jít na https jen, aby to jednoduché.

815
00:35:48,050 --> 00:35:50,610
>> A teď pojďme otevřít
další iterace tohoto.

816
00:35:50,610 --> 00:35:52,510
Je verze 1 místo 0.

817
00:35:52,510 --> 00:35:55,315
Co vyskočí na vás jako mírně
různé v tomto příkladu?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> Diváků: [neslyšitelné].

820
00:36:00,440 --> 00:36:03,020
>> Jo, je tu tento text align centrum.

821
00:36:03,020 --> 00:36:04,590
To je trochu divný tady.

822
00:36:04,590 --> 00:36:06,150
Ale tohle je opravdu nový.

823
00:36:06,150 --> 00:36:07,800
A možná hádejte, co se bude dít.

824
00:36:07,800 --> 00:36:11,730
Pokud jdu do svého prohlížeče nyní
a navštívit search-1.html,

825
00:36:11,730 --> 00:36:13,090
je to skoro totéž.

826
00:36:13,090 --> 00:36:15,705
Ale je to krok blíže
je trochu hezčí.

827
00:36:15,705 --> 00:36:19,150
Je to stále ošklivá, ale hezčí v tom, že
alespoň všechno je teď ve středu.

828
00:36:19,150 --> 00:36:23,470
>> Tak se ukáže, že to, co jsem pomocí
je jiný jazyk úplně volal

829
00:36:23,470 --> 00:36:25,680
CSS, kaskádové styly.

830
00:36:25,680 --> 00:36:28,310
A CSS, upřímně řečeno, je druh
na, podle mého osobního názoru,

831
00:36:28,310 --> 00:36:29,775
otřesně navržený jazyk.

832
00:36:29,775 --> 00:36:33,110
To je velmi nepříjemné na paměti
všechny různé detaily.

833
00:36:33,110 --> 00:36:38,479
Ale to je to, co stylizuje
Celý celosvětově web dnes.

834
00:36:38,479 --> 00:36:39,270
Jsem urazil někoho.

835
00:36:39,270 --> 00:36:39,769
Dobrá.

836
00:36:39,769 --> 00:36:43,180
Takže pojďme zpátky a vidět
jak jsme vlastně používat to.

837
00:36:43,180 --> 00:36:45,940
A ukázalo se, alespoň, že je to
vlastně docela jednoduchý jazyk.

838
00:36:45,940 --> 00:36:49,470
Je to jen dvojice klíčů hodnota, vlastnosti
a hodnoty, vlastnosti a hodnoty.

839
00:36:49,470 --> 00:36:52,080
Opravdu, tady je jeden
takový majetek a hodnotu.

840
00:36:52,080 --> 00:36:55,890
>> Jednoduše pomocí stylu
atribut mého těla tagu

841
00:36:55,890 --> 00:37:00,360
a dávat to hodnotu
Slovo tlustého střeva a další slovo,

842
00:37:00,360 --> 00:37:03,730
nebo vlastnost a hodnotu,
Mohu ovlivnit estetiku

843
00:37:03,730 --> 00:37:06,210
webové stránky, ne
ještě nutně struktura,

844
00:37:06,210 --> 00:37:07,550
ale estetika ní.

845
00:37:07,550 --> 00:37:10,960
A právě Googling kolem, jsem si uvědomil,
že CSS, kaskádové styly,

846
00:37:10,960 --> 00:37:14,170
podporuje vlastnost nazvanou
text-align, jehož hodnota může

847
00:37:14,170 --> 00:37:16,980
se doleva, doprava nebo na střed, například.

848
00:37:16,980 --> 00:37:19,990
>> Takže teď, když jsem se znovu
Tato stránka, co jsem si

849
00:37:19,990 --> 00:37:22,730
byl střed stránky,
ale stále dost ošklivé.

850
00:37:22,730 --> 00:37:25,770
Pojďme dál a otevřete
up verze 2 Hledat.

851
00:37:25,770 --> 00:37:28,570
A teď Všiml jsem si udělal trochu víc.

852
00:37:28,570 --> 00:37:33,760
Všimněte si, že se zde uvnitř hlavy
tag, může existovat více než titul.

853
00:37:33,760 --> 00:37:35,400
Ve skutečnosti, tam je tag styl.

854
00:37:35,400 --> 00:37:38,630
A to je místo, kde to jen dostane
Trochu chaotický vidění CSS někdy.

855
00:37:38,630 --> 00:37:41,971
>> Všimněte si, že jsem se zdá, že mají něco
že strukturálně vypadá úplně jinak.

856
00:37:41,971 --> 00:37:44,095
Ale tady je název
tag chci stylizované.

857
00:37:44,095 --> 00:37:47,570
Zde jsou naše staré přátele kudrnaté
šle a uzavřené složená závorka.

858
00:37:47,570 --> 00:37:50,290
A pak je, že
majetku a jeho hodnota.

859
00:37:50,290 --> 00:37:56,300
>> Kdybych načíst tento soubor, search2.html,
Konečný výsledek je stejný.

860
00:37:56,300 --> 00:37:59,300
Ale je to krok směrem k lepšímu designu.

861
00:37:59,300 --> 00:38:04,560
Vytknutím tuto CSS, jsem
ne smíšeny s mým HTML.

862
00:38:04,560 --> 00:38:07,560
A skutečně, jak uvidíme, mohl bych
znovu použít tyto vlastnosti a hodnoty.

863
00:38:07,560 --> 00:38:10,420
Kdybych chtěl, aby se kytice
části mé webové stránky na střed,

864
00:38:10,420 --> 00:38:13,630
Nemám psát style = text-align
centrum všude.

865
00:38:13,630 --> 00:38:16,580
Můžu dát na jednom místě
Možná, rád se nahoře.

866
00:38:16,580 --> 00:38:18,210
>> Ale ani to není nejlepší návrh.

867
00:38:18,210 --> 00:38:21,720
Ve skutečnosti, jedna z věcí, se dozvíte
jak budete trávit víc a víc času s

868
00:38:21,720 --> 00:38:25,730
web programování je, že čím více si můžete
modularizovat věcí a faktorů věci

869
00:38:25,730 --> 00:38:30,610
jako .h soubory dejte nám faktoru věci ven,
Líbí se helpers.c dejte nám faktorů věci

870
00:38:30,610 --> 00:38:31,880
několika psets lety.

871
00:38:31,880 --> 00:38:34,200
Stejně tak bychom mohli
chcete dosáhnout.

872
00:38:34,200 --> 00:38:37,920
>> Takže si všimnout ve verzi
tři search.html jsem

873
00:38:37,920 --> 00:38:40,610
vyčistit hlavu
stránky a jen dát

874
00:38:40,610 --> 00:38:43,320
v tomto, tag link, který
na rozdíl od jména,

875
00:38:43,320 --> 00:38:44,700
nedává hypertextový odkaz.

876
00:38:44,700 --> 00:38:49,150
To odkazuje na jiný soubor prostřednictvím
href, jehož hodnota je v tomto případě,

877
00:38:49,150 --> 00:38:51,586
je search-3.css

878
00:38:51,586 --> 00:38:52,960
Tak jsem si uvědomit, že budeme rychle.

879
00:38:52,960 --> 00:38:54,600
Ale všechno, co dělám, je druh
pohybujících se věci kolem.

880
00:38:54,600 --> 00:38:55,760
Dovolte mi, abych otevřít Search-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Tady to je, opravdu nic k tomu.

883
00:38:58,530 --> 00:39:02,270
Jen jsem zkopírovat a vložit ji do nové
souboru, stejně jako my zapracovány věci z

884
00:39:02,270 --> 00:39:03,509
do jiných souborů před.

885
00:39:03,509 --> 00:39:05,300
A result--
zcela underwhelming--

886
00:39:05,300 --> 00:39:06,730
bude úplně stejný.

887
00:39:06,730 --> 00:39:10,490
Ale jdeme toward-- ne, to ne.

888
00:39:10,490 --> 00:39:11,930
Oh, já vím proč.

889
00:39:11,930 --> 00:39:13,790
>> Takže se zdá, že se tuto chybu.

890
00:39:13,790 --> 00:39:15,010
A to je v nějakém smyslu.

891
00:39:15,010 --> 00:39:17,730
Ale dovolte mi, abych otevřela svou kartu Síť.

892
00:39:17,730 --> 00:39:19,660
Dovolte mi, abych znovu načtete stránku.

893
00:39:19,660 --> 00:39:23,315
Ach, proč je CSS nepoužívají?

894
00:39:23,315 --> 00:39:26,920
No, soubor CSS, podobně, má
být svět čitelný, abych tak řekl.

895
00:39:26,920 --> 00:39:28,440
A taky je v současné době zakázané.

896
00:39:28,440 --> 00:39:33,760
Dovolte mi tedy dělat chmod + R
hvězdy dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
jsme tečka CSS je jen
Přípona souboru CSS souborů.

898
00:39:37,067 --> 00:39:38,900
Nyní mi dovolte vrátit se
můj prohlížeč a Obnovit.

899
00:39:38,900 --> 00:39:40,910
OK, trochu lépe.

900
00:39:40,910 --> 00:39:42,282
>> Nyní mi dovolte udělat jednu poslední věc.

901
00:39:42,282 --> 00:39:42,990
Ve vyhledávání-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Mám verzi, že jsem si myslel,
byla cesta chladnější, i když mnohem více

904
00:39:48,220 --> 00:39:48,980
komplikované.

905
00:39:48,980 --> 00:39:50,690
Pojďme se podívat na výsledek jako první.

906
00:39:50,690 --> 00:39:52,290
Zavřete to nám více prostoru.

907
00:39:52,290 --> 00:39:54,275
Změnit to hledat-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> A teď spoustu věcí, jsou rozbité.

910
00:39:57,200 --> 00:39:59,910
Chystám se vrátit
do mého seznamu zde.

911
00:39:59,910 --> 00:40:04,190
A teď jsem jen dělat
chmod o + r na file--

912
00:40:04,190 --> 00:40:07,450
protože vím, že exists-- nazývá
logo.gif, což je obraz.

913
00:40:07,450 --> 00:40:08,590
A teď znovu.

914
00:40:08,590 --> 00:40:11,040
A wow-- tak teď jsem
docela blízko, upřímně řečeno,

915
00:40:11,040 --> 00:40:15,860
rád verzi Google 1999, a
upřímně řečeno, verze Google 2014

916
00:40:15,860 --> 00:40:16,360
že jo?

917
00:40:16,360 --> 00:40:21,920
>> Takže to teď bude na své webové stránky,
nakonec, když jsem hledat pro kočky.

918
00:40:21,920 --> 00:40:23,900
A skutečně je.

919
00:40:23,900 --> 00:40:26,410
Ale to, co jsem udělal jinak
V této verzi 4?

920
00:40:26,410 --> 00:40:28,020
Takže nebudeme zabývat příliš mnoho na to zde.

921
00:40:28,020 --> 00:40:30,100
Uvidíte to v problému
nastavit sedm nakonec.

922
00:40:30,100 --> 00:40:31,350
Povšimněme si ale udělal jsem si pár věcí.

923
00:40:31,350 --> 00:40:33,690
>> Představil jsem div
tag, což je divize,

924
00:40:33,690 --> 00:40:35,450
svým duchem podobat tagu odstavce.

925
00:40:35,450 --> 00:40:38,220
Ale rozdělení je, stejně jako, tady je
obdélníkový neviditelný region

926
00:40:38,220 --> 00:40:39,150
obrazovky.

927
00:40:39,150 --> 00:40:41,680
Pojďme dát jedinečný
identifikátor, zápatí, jen

928
00:40:41,680 --> 00:40:44,700
takže můžeme hovořit o
je v našem HTML jinde.

929
00:40:44,700 --> 00:40:47,952
Zde je další div stránky
jehož číslo bude spokojen.

930
00:40:47,952 --> 00:40:49,160
Je to obsah stránky.

931
00:40:49,160 --> 00:40:51,090
A tady je hlavička stránky.

932
00:40:51,090 --> 00:40:54,960
>> Jinými slovy, jsem
v podstatě v HTML jsem mentálně

933
00:40:54,960 --> 00:40:57,700
prohlížení této webové stránky, jako
tři složky, hlavičkové

934
00:40:57,700 --> 00:41:01,200
sem s touto neviditelnou obdélník,
obsah ve středu, a poté

935
00:41:01,200 --> 00:41:04,800
zápatí dole, a to i
když nevidíme ty věci.

936
00:41:04,800 --> 00:41:09,940
Protože chci, aby v mé hlavě
strana zde, nebo v souboru CSS,

937
00:41:09,940 --> 00:41:11,460
Mohu použít tuto syntaxi.

938
00:41:11,460 --> 00:41:13,070
>> Header není tag.

939
00:41:13,070 --> 00:41:17,060
Je to číslo, takže se ukáže,
na to, že tím, že dělá #header,

940
00:41:17,060 --> 00:41:20,840
Nyní mohu použít jeden nebo více
vlastnosti do hlavičky.

941
00:41:20,840 --> 00:41:24,130
Mohu dělat stejný obsah,
stejný za obsah zde.

942
00:41:24,130 --> 00:41:27,230
>> Tak například, v zápatí, oznámení
Všechny tyto vlastnosti jsem přidávání.

943
00:41:27,230 --> 00:41:30,660
A já vím, že existují jen tím, že čtení
se na dokumentaci pro CSS.

944
00:41:30,660 --> 00:41:33,450
Velikost písma bude smaller--
takže některé relativní velikost písma.

945
00:41:33,450 --> 00:41:34,741
Hmotnost bude tučně.

946
00:41:34,741 --> 00:41:37,340
Margin-- kolik pixelů
kolem to-- je 20 pixelů.

947
00:41:37,340 --> 00:41:38,590
A to bude ve středu.

948
00:41:38,590 --> 00:41:40,256
>> Ale teď, stránka vypadá takto.

949
00:41:40,256 --> 00:41:42,840
Pokud nejsem spokojen s
moje kopie právě tam,

950
00:41:42,840 --> 00:41:46,560
Mohl jsem udělat něco jako červenou barvou.

951
00:41:46,560 --> 00:41:50,570
A pak jsem si to uložit, načíst,
a teď jsem stylizované zápatí.

952
00:41:50,570 --> 00:41:54,130
Takže je to jen naznačuje na napájení
o tom, co můžete udělat na webové stránce

953
00:41:54,130 --> 00:41:55,510
změnit věci kolem.

954
00:41:55,510 --> 00:41:59,080
>> A dokonce chladnější než to, pokud chcete
tropit si s aktuální webové stránky,

955
00:41:59,080 --> 00:42:00,810
nelze je trvale změnit.

956
00:42:00,810 --> 00:42:03,640
Ale když otevřu
Znovu Chrome Inspector

957
00:42:03,640 --> 00:42:07,610
a jdu ne na levé straně
tu, která ukazuje Facebooku HTML,

958
00:42:07,610 --> 00:42:11,380
ale ukazuje na pravé straně
na pravé straně všechny své CSS,

959
00:42:11,380 --> 00:42:13,789
můžete buď a
změnit věci v reálném čase.

960
00:42:13,789 --> 00:42:15,080
Tak nech mě jít dopředu a to.

961
00:42:15,080 --> 00:42:18,670
>> Nech mě jít napřed a kontrola
Kliknutím na této náhodné slovo zde,

962
00:42:18,670 --> 00:42:21,230
podepsat, a klepněte na tlačítko Zkontrolovat prvek.

963
00:42:21,230 --> 00:42:25,130
Chrome velmi výhodnou skočí na
tag h1, že Facebook používá.

964
00:42:25,130 --> 00:42:27,290
A všimněte si zde Facebook
má trochu líně

965
00:42:27,290 --> 00:42:29,960
pevně dané velikosti písma jako vlastnost zde.

966
00:42:29,960 --> 00:42:33,530
>> Takže super věc však je,
že když jsem vlastně jít sem

967
00:42:33,530 --> 00:42:39,560
a říkají, oh, Facebook, nelíbí se mi, že
64 pixelů, můžeme nyní změnit Facebook.

968
00:42:39,560 --> 00:42:42,590
Samozřejmě, že jsme jen jej změnit
pro mě osobně v tuto chvíli.

969
00:42:42,590 --> 00:42:45,150
Ale to je jen další
nástrojem v našem sadě nářadí

970
00:42:45,150 --> 00:42:48,360
, co se děje, aby nám vylepšit
a přijít na to, a také diagnostikovat

971
00:42:48,360 --> 00:42:49,729
problémy v našich vlastních webových stránkách.

972
00:42:49,729 --> 00:42:52,270
A mohli bychom podobně projít
tady, což je totéž.

973
00:42:52,270 --> 00:42:55,830
Pokud se opravdu chcete dostat fantazie, jsem
znamenat, nyní můžete skutečně mutovat stránku

974
00:42:55,830 --> 00:42:57,380
a dělat šílené věci.

975
00:42:57,380 --> 00:42:59,870
>> Tak proč je to všechno užitečné?

976
00:42:59,870 --> 00:43:02,330
No, nakonec jsme
bude chtít být

977
00:43:02,330 --> 00:43:07,110
schopen vytvořit webové stránky, které
jsou poháněny vlastními zadních koncích,

978
00:43:07,110 --> 00:43:10,520
ne jen Google a
outsourcing back-end tam.

979
00:43:10,520 --> 00:43:13,510
Vlastně chceme
hodnoty, například,

980
00:43:13,510 --> 00:43:18,830
akce našeho vyhledávače
atribut jít ne na někoho jiného,

981
00:43:18,830 --> 00:43:24,270
ale něco jako search.php,
kde search.php je na našem vlastním serveru,

982
00:43:24,270 --> 00:43:25,670
ne na někoho jiného.

983
00:43:25,670 --> 00:43:30,316
>> A tak se tam dostat, jsme vlastně
je třeba zavést nový jazyk.

984
00:43:30,316 --> 00:43:33,190
Tak už jsme se podíval na jeden nový
Jazyk zde, nebo dva opravdu, HTML

985
00:43:33,190 --> 00:43:33,700
a CSS.

986
00:43:33,700 --> 00:43:36,330
Ale ve skutečnosti jsou jen
konstrukční a estetické jazyky.

987
00:43:36,330 --> 00:43:38,360
Nejsou to programování
jazyky samy o sobě.

988
00:43:38,360 --> 00:43:41,160
A to je asi tak formální
čas jako budeme trávit na nich.

989
00:43:41,160 --> 00:43:44,910
Vzhledem k tomu, začneme nyní
přejít na PHP.

990
00:43:44,910 --> 00:43:48,160
>> PHP, takže je aktuální
programovací jazyk.

991
00:43:48,160 --> 00:43:50,750
Je to skriptovací jazyk
v tom smyslu, že je to

992
00:43:50,750 --> 00:43:52,855
má být lehčí
než něco jako C

993
00:43:52,855 --> 00:43:56,082
A to je interpretovaný jazyk,
což znamená, že to není kompilován.

994
00:43:56,082 --> 00:43:58,790
Takže ve zkratce, co to znamená,
když jsme použili jazyk C

995
00:43:58,790 --> 00:44:00,290
a museli jsme ho sestavit?

996
00:44:00,290 --> 00:44:02,120
Co to znamená
kompilovat C zdrojový kód?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
Diváků: [neslyšitelné].

999
00:44:04,780 --> 00:44:06,184
DAVID J Malan: Řekni to znovu?

1000
00:44:06,184 --> 00:44:07,100
Diváků: [neslyšitelné].

1001
00:44:07,100 --> 00:44:07,962

1002
00:44:07,962 --> 00:44:08,920
DAVID J Malan: Perfect.

1003
00:44:08,920 --> 00:44:10,180
Ukazuje to na binární.

1004
00:44:10,180 --> 00:44:14,200
Ukazuje to do nuly a ty
z aktuální anglicky jako zdrojový kód.

1005
00:44:14,200 --> 00:44:16,424
A pak můžeme skutečně
spustit tyto nuly a ty

1006
00:44:16,424 --> 00:44:18,840
průchodem
CPU poklepáním na ikonu

1007
00:44:18,840 --> 00:44:19,980
nebo spuštěním příkazu.

1008
00:44:19,980 --> 00:44:23,770
>> PHP a Python a Ruby
a Perl a JavaScript

1009
00:44:23,770 --> 00:44:26,250
a kytice ostatní
jazyky jsou interpretovány

1010
00:44:26,250 --> 00:44:29,290
jazyky, což znamená,
nemáte sestaví z nich.

1011
00:44:29,290 --> 00:44:34,220
Spíše, krmit jako vstup do
program s názvem tlumočníka.

1012
00:44:34,220 --> 00:44:36,640
A to interpret,
který někdo napsal,

1013
00:44:36,640 --> 00:44:40,930
čte zdrojový kód shora dolů,
zleva doprava a jen interpretů

1014
00:44:40,930 --> 00:44:43,000
tyto řádky a dělá to, co říkáte.

1015
00:44:43,000 --> 00:44:45,360
>> Takže pokud narazíte na
řádek, který říká, že tisk,

1016
00:44:45,360 --> 00:44:48,660
nemusí to nutně převést tisk
s odpovídajícími nul a jedniček.

1017
00:44:48,660 --> 00:44:51,910
Je to jen má tuto tlumočníka jako
big-li podmínka, která říká,

1018
00:44:51,910 --> 00:44:56,110
pokud instrukce programátora je
tisk, proveďte následující kroky.

1019
00:44:56,110 --> 00:44:58,170
Tak to interpretuje právě
podle druhu uvažování

1020
00:44:58,170 --> 00:44:59,800
tím, co říkáte to udělat.

1021
00:44:59,800 --> 00:45:01,320
>> A PHP je jedním z těchto jazyků.

1022
00:45:01,320 --> 00:45:05,310
A před PHP lety byl navržen tak,
Právě pro programování pro web.

1023
00:45:05,310 --> 00:45:08,160
A to bylo zpočátku
velmi nedbalý chaotický jazyk.

1024
00:45:08,160 --> 00:45:10,940
A opravdu, je tu obrovský
Množství špatné PHP kódu tam.

1025
00:45:10,940 --> 00:45:13,520
Ale jazyk sám
dozrála v průběhu let,

1026
00:45:13,520 --> 00:45:16,200
natolik, že teď je to
ve skutečnosti nádherný další krok

1027
00:45:16,200 --> 00:45:19,970
pedagogicky z C, protože je to
tak zatraceně povědomě vše

1028
00:45:19,970 --> 00:45:22,380
jste právě viděli v posledních několika týdnech.

1029
00:45:22,380 --> 00:45:25,724
>> Jeden počáteční rozdíl uvidíme
je není hlavní funkcí už.

1030
00:45:25,724 --> 00:45:28,890
Když začnete psát kód, je to jen
bude vykonán bez ohledu na to,

1031
00:45:28,890 --> 00:45:30,220
jak uvidíme za chvíli.

1032
00:45:30,220 --> 00:45:33,320
Mezitím, tady je to, co
proměnná vypadá v PHP.

1033
00:45:33,320 --> 00:45:35,840
Je to trochu jinak,
ale jen stěží.

1034
00:45:35,840 --> 00:45:39,380
>> V PHP, že to není silný psaní.

1035
00:45:39,380 --> 00:45:41,430
Je tu týden psaní,
která se právě zde znamená,

1036
00:45:41,430 --> 00:45:44,030
jsou datové typy, jako jsou řetězce
a čísla a dalších věcí.

1037
00:45:44,030 --> 00:45:47,030
Ale nemusíte se obtěžovat s uvedením
to, co oni jsou už ne.

1038
00:45:47,030 --> 00:45:48,980
PHP čísla je pro vás.

1039
00:45:48,980 --> 00:45:52,030
Znak dolaru je jen rozhodnutí
že PHP lid let

1040
00:45:52,030 --> 00:45:54,890
Před tak, že všechny proměnné v PHP
právě začíná znakem dolaru.

1041
00:45:54,890 --> 00:45:58,130
Je to vlastně trochu užitečný v tom, že
vyskočí na vás trochu víc.

1042
00:45:58,130 --> 00:46:01,315
>> Ale po tom, toto
je stav, v PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
To, co je ve srovnání s C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Trick question-- nic,
což je ve skutečnosti opravdu pěkné.

1047
00:46:09,600 --> 00:46:12,140
Booleovské výrazy v PHP-- stejné.

1048
00:46:12,140 --> 00:46:19,354
Booleovské výrazy se a oproti
nebo přepínače, smyčky, smyčky, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
to je jiný.

1050
00:46:20,270 --> 00:46:22,660
>> Tak to dopadá, že je
pár dalších funkcí v PHP.

1051
00:46:22,660 --> 00:46:25,243
Jedním z nich je ve skutečnosti to,
který je úžasně pohodlné.

1052
00:46:25,243 --> 00:46:29,250
Je-li $ čísel je pole, které jste
deklarován dříve v programu,

1053
00:46:29,250 --> 00:46:33,350
Máte tento chuť na každý konstrukt
že namísto toho, aby to vše

1054
00:46:33,350 --> 00:46:37,020
nepříjemné I = 0, I je
méně než to, [? I ++?]

1055
00:46:37,020 --> 00:46:40,320
pro každý čísel jako čísla, kde každý
z těchto znamení hodnoty dolaru je jen

1056
00:46:40,320 --> 00:46:42,790
variabilní, a druhý
si můžete myslet jako já

1057
00:46:42,790 --> 00:46:44,290
Dalo by se to nazvat, co chcete.

1058
00:46:44,290 --> 00:46:45,770
Zavolal jsem to číslo.

1059
00:46:45,770 --> 00:46:48,825
To bude iterovat přes
pole volaných čísel.

1060
00:46:48,825 --> 00:46:51,200
A v každé iteraci, je to
bude automaticky aktualizovat

1061
00:46:51,200 --> 00:46:54,340
pro tebe číslo znak dolaru
variabilní, takže si neustále

1062
00:46:54,340 --> 00:46:58,210
mají přístup k proměnné, kterou chcete
aniž by bylo nutné dělat žádné hranatou závorku

1063
00:46:58,210 --> 00:47:00,980
notace nebo indexovací do matice.

1064
00:47:00,980 --> 00:47:04,950
>> Kromě toho, máme dokonce věci, jako je
pole, které vypadají téměř stejně,

1065
00:47:04,950 --> 00:47:08,210
kromě toho, že je to velmi časté, jak jsme to
vidět, jak v PHP a JavaScriptu

1066
00:47:08,210 --> 00:47:10,750
provést předběžnou inicializaci pole
pomocí hranatých závorek.

1067
00:47:10,750 --> 00:47:12,040
C používá složené závorky.

1068
00:47:12,040 --> 00:47:15,330
Takže je to trochu odlišné, i když
jsme se opravdu použít ten trik moc.

1069
00:47:15,330 --> 00:47:20,090
>> Ale ještě mocněji,
PHP je asociativní pole,

1070
00:47:20,090 --> 00:47:23,100
což je ozdobný způsob, jak
říkat hash tabulky.

1071
00:47:23,100 --> 00:47:31,610
Ve skutečnosti, pokud chcete deklarovat hash
Tabulka v PHP, na rozdíl od C- kolik

1072
00:47:31,610 --> 00:47:34,775
řádků kódu trvalo
skutečně realizovat hash tabulky v C?

1073
00:47:34,775 --> 00:47:38,310
Nebo kolik řádků kódu je to z
při provádění hash tabulky v C?

1074
00:47:38,310 --> 00:47:39,820
Takže je to asi hodně, že?

1075
00:47:39,820 --> 00:47:41,680
Je to několik desítek, možná 100 nebo 200.

1076
00:47:41,680 --> 00:47:42,980
To je netriviální.

1077
00:47:42,980 --> 00:47:45,420
Nebo je to o tom, že, jak
budete brzy vidět, netriviální

1078
00:47:45,420 --> 00:47:48,080
realizovat hash tabulky
[Neslyšitelné] a také vyzkoušet.

1079
00:47:48,080 --> 00:47:50,580
Ale v PHP-- a upřímně řečeno, já
asi neměl ti to říct,

1080
00:47:50,580 --> 00:47:53,630
až Monday-- v PHP, pokud
chcete tabulku, hotovo.

1081
00:47:53,630 --> 00:47:56,431
To je hash table-- tak
s jedním řádkem kódu.

1082
00:47:56,431 --> 00:47:56,930
A

1083
00:47:56,930 --> 00:47:58,810
>> Mnoho jazyků udělat.

1084
00:47:58,810 --> 00:48:00,190
Bavte se s pset pět.

1085
00:48:00,190 --> 00:48:01,980
Takže hodně jazyků udělat.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Dávají vám tyto abstrakce
že jiní lidé, jiné programátory,

1088
00:48:06,140 --> 00:48:09,870
vytvořili pro vás tak, že
můžete postavit na svých bedrech

1089
00:48:09,870 --> 00:48:13,290
a začít používat myšlenky, které jsou super
přesvědčivé, jako hash tabulky a stromy

1090
00:48:13,290 --> 00:48:14,140
a snaží se.

1091
00:48:14,140 --> 00:48:17,790
Ale nemusíte nutně
provádět ty věci sami.

1092
00:48:17,790 --> 00:48:20,850
>> A tak nakonec to, co
budeme používat PHP pro

1093
00:48:20,850 --> 00:48:23,580
je potenciálně psaní programů
z tzv příkazového řádku.

1094
00:48:23,580 --> 00:48:26,600
Mohli bychom se znovu každý program
jsme napsal tento semestr tak daleko,

1095
00:48:26,600 --> 00:48:30,410
snad s výjimkou Breakout, který využívá SPL,
která je specifická pro C v současné době.

1096
00:48:30,410 --> 00:48:33,100
Ale každý jiný problém nastavit,
určitě Mario a Caesar

1097
00:48:33,100 --> 00:48:35,300
a Vigenere a
[? Crack?] A dál jsme

1098
00:48:35,300 --> 00:48:39,520
mohla znovu zavést v PHP, a
asi trochu snadněji.

1099
00:48:39,520 --> 00:48:43,050
>> Ale co my nakonec bude
PHP používat je web programování.

1100
00:48:43,050 --> 00:48:46,420
A budeme zavádět další
týden mentální model, vzor nazvaný

1101
00:48:46,420 --> 00:48:49,610
MVC, pohled modelu regulátor,
které, pokud jste udělali programování

1102
00:48:49,610 --> 00:48:51,610
předtím v Pythonu nebo
Ruby nebo jiném místě, budete

1103
00:48:51,610 --> 00:48:54,112
možná víte, tento tým se
Kolejnice a Django a podobně.

1104
00:48:54,112 --> 00:48:55,820
Ale pokud jste novým
to taky, uvidíte

1105
00:48:55,820 --> 00:48:59,652
že je to ve skutečnosti velmi přirozený
rozšíření faktorizace

1106
00:48:59,652 --> 00:49:01,360
a druh konstrukce
kódu, který máme

1107
00:49:01,360 --> 00:49:04,670
dělal v C. Budeme nyní
použít některé z těchto lekcí do PHP

1108
00:49:04,670 --> 00:49:07,190
takže nakonec jsme
provádění našich vlastních webových stránek.

1109
00:49:07,190 --> 00:49:09,080
A pokud jste trochu
uchvácen nebo ohromen

1110
00:49:09,080 --> 00:49:10,954
že budeme dělat
všechny tak rychle,

1111
00:49:10,954 --> 00:49:13,410
Uvědomuji si, že téměř každý
semestr, téměř 90%

1112
00:49:13,410 --> 00:49:16,560
studentů CS50, včetně těch,
kteří nikdy naprogramováno,

1113
00:49:16,560 --> 00:49:20,329
skončit dělat závěrečné projekty, které
jsou založeny na webovém programování.

1114
00:49:20,329 --> 00:49:23,120
A tak uvidíte, že se vrátí
jsou vysoko v následujících týdnech.

1115
00:49:23,120 --> 00:49:24,965
Tak jsme vás vidět a pak v pondělí.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> SPEAKER 1: A teď, Hluboká
Myšlenky od Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Hash tabulky.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [SMÍCH]

1122
00:49:38,402 --> 00:49:38,902