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

2
00:00:01,390 --> 00:00:04,890
>> [REPRODUCCIÓ DE MÚSICA]

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

4
00:00:10,955 --> 00:00:12,580
DAVID J Malan: Molt bé, benvingut de nou.

5
00:00:12,580 --> 00:00:13,600
Això és CS50.

6
00:00:13,600 --> 00:00:15,540
Aquest és el cap de setmana de set.

7
00:00:15,540 --> 00:00:18,180
I és al final d'aquest carronyer
caça del problema va fixar 04:00

8
00:00:18,180 --> 00:00:19,220
que es pot recordar.

9
00:00:19,220 --> 00:00:21,650
Després de la recuperació de tots
els arxius JPEG de personal,

10
00:00:21,650 --> 00:00:24,820
que van ser impugnades, si ho desitja,
per fotografiar a tu mateix amb el major nombre

11
00:00:24,820 --> 00:00:25,981
d'aquestes persones com puguis.

12
00:00:25,981 --> 00:00:28,480
Tenim un munt de presentacions
durant les últimes setmanes,

13
00:00:28,480 --> 00:00:32,980
de fet, un bon nombre a la dreta abans del migdia
avui en dia, alguns dels quals són els que són aquí,

14
00:00:32,980 --> 00:00:37,670
atrapat aquí en-- veu com-- Annenberg
Hall en hores d'oficina, un aquí

15
00:00:37,670 --> 00:00:39,530
a Lowell Casa amb Nick.

16
00:00:39,530 --> 00:00:41,750
Aquí està Ramon està atrapat en el telèfon.

17
00:00:41,750 --> 00:00:43,870
Això va ser en un dinar CS50.

18
00:00:43,870 --> 00:00:46,840
Aquest va ser Jason Skyping amb
un company de classe més creativa,

19
00:00:46,840 --> 00:00:48,280
qui ho va cridar per telèfon aquesta manera.

20
00:00:48,280 --> 00:00:49,690
No sabem de què es tractava.

21
00:00:49,690 --> 00:00:51,940
>> [El]

22
00:00:51,940 --> 00:00:54,570
>> DAVID J Malan: Però
això és digne d'un gigabyte.

23
00:00:54,570 --> 00:00:56,960
Aquí és Chang, qui
literalment va córrer fora de l'escenari

24
00:00:56,960 --> 00:01:00,480
per evitar ser fotografiat 1
dia, però finalment va ser capturat.

25
00:01:00,480 --> 00:01:02,050
Aquí és Nick.

26
00:01:02,050 --> 00:01:03,480
Aquí és Nick.

27
00:01:03,480 --> 00:01:04,080
Aquí és Nick.

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

29
00:01:05,090 --> 00:01:07,670
I aquí és Alison pels camps.

30
00:01:07,670 --> 00:01:11,840
I Zamyla fins i tot es va trobar
en un concurs de ball.

31
00:01:11,840 --> 00:01:14,100
Així que anem a anar a través de
aquestes fotos, esbrinar

32
00:01:14,100 --> 00:01:16,690
qui va presentar el més
la primera, i la recompensa

33
00:01:16,690 --> 00:01:20,662
un premi fabulós, com
promès en l'especificació.

34
00:01:20,662 --> 00:01:23,120
I nosaltres també posarem sobre
l'espai que va estar involucrat.

35
00:01:23,120 --> 00:01:26,860
>> Un parell de announcements-- així dinar
és, de nou, aquest divendres a les 13:15.

36
00:01:26,860 --> 00:01:30,420
Per unir-se a nosaltres,
Confirmar la seva assistència a aquesta URL aquí.

37
00:01:30,420 --> 00:01:33,730
Jason torna a aparèixer aquí d'un
de les seccions d'un parell d'anys

38
00:01:33,730 --> 00:01:35,510
de nou, el que va succeir
a caure en Halloween.

39
00:01:35,510 --> 00:01:38,950
I, en efecte, es va vestir com un
carbassa aquest any en particular.

40
00:01:38,950 --> 00:01:42,700
Si vostè mira aquesta secció
de la seva secció a partir del 2011

41
00:01:42,700 --> 00:01:46,480
08:00, si vostè és curiós,
en CS50.tv, crec

42
00:01:46,480 --> 00:01:49,730
aquest va ser l'any en el qual
la seva bomba d'aire estava funcionant.

43
00:01:49,730 --> 00:01:52,490
>> Si a continuació, veure el
secció semblant el 2012,

44
00:01:52,490 --> 00:01:55,620
veurà aquest Jason molt desinfla,
des del vestit ja no funcionava,

45
00:01:55,620 --> 00:01:58,060
que no és més que dir
aquest divendres, si ho

46
00:01:58,060 --> 00:02:02,720
agradaria tallar una carbassa amb Daven
i Gabe i altres, als caps de RSVP

47
00:02:02,720 --> 00:02:04,480
en direcció cs50.harvard.edu.

48
00:02:04,480 --> 00:02:06,200
Promet ser molt divertit.

49
00:02:06,200 --> 00:02:08,660
Daven, se'ns diu, s'ha forjat
carbasses del tot de la seva vida.

50
00:02:08,660 --> 00:02:11,930
Gabriel de Brasil mai té
tallat una carbassa per Halloween.

51
00:02:11,930 --> 00:02:14,700
Així que ser-hi amb ells a mesura que aprèn.

52
00:02:14,700 --> 00:02:16,830
>> Seminaris, meanwhile--
pel que vostè aprendrà aviat

53
00:02:16,830 --> 00:02:20,650
sobre el que les nostres expectatives són per
el projecte final, que en essència

54
00:02:20,650 --> 00:02:23,150
es redueixen a
el disseny i implementació

55
00:02:23,150 --> 00:02:26,440
la majoria de qualsevol projecte d'interès per a
que, si bé subjecte a l'aprovació

56
00:02:26,440 --> 00:02:28,490
i l'orientació del seu company d'ensenyament.

57
00:02:28,490 --> 00:02:32,110
Cap al final de la
semestre, presentem una sèrie

58
00:02:32,110 --> 00:02:35,610
de seminaris, que són les classes opcionals
liderat pels becaris d'ensenyament i de Harvard

59
00:02:35,610 --> 00:02:38,570
el personal, els amics del curs a través de
campus, sobre diversos temes que

60
00:02:38,570 --> 00:02:41,470
són tangencial a la
programa subjacent del curs

61
00:02:41,470 --> 00:02:45,590
però no obstant aplicable, diversió, i
diferent per als projectes finals potencials.

62
00:02:45,590 --> 00:02:49,530
>> Per exemple, en primer lloc, si vol
per registrar-se, vagi a aquesta URL allà.

63
00:02:49,530 --> 00:02:53,010
I aquesta és l'alineació per
seminaris sols d'aquest any.

64
00:02:53,010 --> 00:02:56,060
Però s'adonen que tenim desenes de
seminaris de l'any passat, tots els quals

65
00:02:56,060 --> 00:02:59,774
estan vinculats al menú Seminaris
opció de la pàgina web del curs.

66
00:02:59,774 --> 00:03:02,190
Així que si vostè està pensant en
anant més enllà de la seva zona de confort

67
00:03:02,190 --> 00:03:05,060
o recollir algunes noves habilitats,
per exemple, la programació d'iPhone

68
00:03:05,060 --> 00:03:08,100
aplicacions amb Swift, un nou idioma
d'Apple o d'Objective-C

69
00:03:08,100 --> 00:03:11,230
o aplicacions d'Android o de programació [? cue?]
bombetes, o qualsevol dels temes

70
00:03:11,230 --> 00:03:15,490
fins aquí i més, a causa xec
a la pàgina de registre.

71
00:03:15,490 --> 00:03:19,730
>> Així que vam començar i concloure en
Dilluns amb mirar HTTP.

72
00:03:19,730 --> 00:03:22,675
Així HTTP refresher-- ràpida,
Protocol de transferència d'hipertext.

73
00:03:22,675 --> 00:03:24,045
Però, què significa això realment?

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

75
00:03:26,805 --> 00:03:27,930
Què significa això realment?

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

77
00:03:30,665 --> 00:03:31,290
És això una mà?

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

79
00:03:33,074 --> 00:03:34,740
Sé que estàs rascant el cap.

80
00:03:34,740 --> 00:03:36,400
Però vostè vol proposar el que HTTP és?

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

82
00:03:37,792 --> 00:03:40,576
>> Com els ordinadors: Públic
comunicar-se amb [inaudible].

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

84
00:03:41,517 --> 00:03:43,100
DAVID J Malan: em vaig perdre l'última part.

85
00:03:43,100 --> 00:03:45,774
Com es comuniquen els ordinadors con--

86
00:03:45,774 --> 00:03:47,325
>> Servidors d'Internet: audiència.

87
00:03:47,325 --> 00:03:50,450
DAVID J Malan: Good-- amb internet
servidors, i en concret, els servidors web.

88
00:03:50,450 --> 00:03:53,533
Perquè recordo, hi ha un munt de
serveis a Internet, alguns dels quals

89
00:03:53,533 --> 00:03:57,349
utilitza probablement tots els dies entre el xat
i el missatge, el xat i web, i correu electrònic,

90
00:03:57,349 --> 00:03:57,890
i similars.

91
00:03:57,890 --> 00:04:00,900
I és només l'HTTP
protocol que els navegadors web

92
00:04:00,900 --> 00:04:03,750
parlar quan es comunica amb
servidors web, i viceversa.

93
00:04:03,750 --> 00:04:05,580
I l'anàleg al
món humà que sigui,

94
00:04:05,580 --> 00:04:08,730
Estenc la meva mà per estrènyer algunes
una altra d'humà i ell o ella

95
00:04:08,730 --> 00:04:11,970
reconeix mitjançant l'ampliació
la seva mà també.

96
00:04:11,970 --> 00:04:13,970
Així que això és només un protocol,
un conjunt de convencions.

97
00:04:13,970 --> 00:04:15,630
>> I el que en veritat són aquests convenis?

98
00:04:15,630 --> 00:04:18,640
Bé, només es redueix a
l'enviament de missatges d'anada i tornada,

99
00:04:18,640 --> 00:04:19,770
com hem representat aquí.

100
00:04:19,770 --> 00:04:22,520
I hi ha un parell de maneres en
que pot enviar aquests missatges.

101
00:04:22,520 --> 00:04:24,360
I potser el més
comú es coneix com GET.

102
00:04:24,360 --> 00:04:26,510
I veurem un contrast
a això abans d'hora.

103
00:04:26,510 --> 00:04:30,010
>> No obstant això, una sol·licitud GET des d'un navegador
al servidor només són aquestes.

104
00:04:30,010 --> 00:04:32,960
És un munt de text que posa
dins d'un sobre virtual.

105
00:04:32,960 --> 00:04:35,854
A l'exterior d'aquest sobre
anar un parell de peces de detalls.

106
00:04:35,854 --> 00:04:37,770
El que ha d'anar a la
sobre, per així dir-ho,

107
00:04:37,770 --> 00:04:41,820
a fi d'obtenir una petició com
això de mi a un servidor web?

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

109
00:04:42,320 --> 00:04:43,270
>> AUDIÈNCIA: La seva adreça IP.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J Malan: La meva adreça IP
en el camp, per així dir-ho,

111
00:04:45,890 --> 00:04:49,490
i, per descomptat, la
l'adreça IP del destinatari.

112
00:04:49,490 --> 00:04:52,710
Però en el cas d'un paquet de web,
necessitem una mica més de detall

113
00:04:52,710 --> 00:04:55,254
No n'hi ha prou per
enviar un sobre a un servidor,

114
00:04:55,254 --> 00:04:57,670
perquè aquest servidor podria ser
escoltar per a diferents tipus

115
00:04:57,670 --> 00:04:59,180
del tràfic d'Internet.

116
00:04:59,180 --> 00:05:01,370
Llavors, ¿què més necessitem
a més d'IP del destinatari?

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

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

119
00:05:03,222 --> 00:05:04,241
>> AUDIÈNCIA: És TCP?

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

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

122
00:05:06,470 --> 00:05:07,340
>> AUDIÈNCIA: Direcció.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J Malan: Direcció,
o el port, com se l'anomena.

124
00:05:09,340 --> 00:05:11,010
Prop, però un número de port TCP.

125
00:05:11,010 --> 00:05:12,220
I hi ha un munt d'ells.

126
00:05:12,220 --> 00:05:14,310
Però sens dubte el més
ha de familiaritzar-se amb el temps

127
00:05:14,310 --> 00:05:17,590
sigui 80, que és el valor per defecte
que s'utilitza per al trànsit d'Internet.

128
00:05:17,590 --> 00:05:20,040
I una altra familiaritzat
un aviat hi haurà 443,

129
00:05:20,040 --> 00:05:24,280
que s'utilitza per a web segur
el trànsit, les adreces URL que comencen amb https.

130
00:05:24,280 --> 00:05:26,650
>> Així que això és el que passa
dins d'aquest sobre.

131
00:05:26,650 --> 00:05:29,780
I obtenir / només significa, donar
Me la pàgina web per defecte.

132
00:05:29,780 --> 00:05:32,700
Dóna'm la arrel del disc
conduir en aquest servidor web.

133
00:05:32,700 --> 00:05:36,050
I és d'esperar, el web
servidor respondrà amb, OK

134
00:05:36,050 --> 00:05:39,630
i el número 200, que està just
una convenció dient, sí, tot

135
00:05:39,630 --> 00:05:40,470
és de fet bé.

136
00:05:40,470 --> 00:05:41,680
Aquí hi ha la pàgina.

137
00:05:41,680 --> 00:05:45,510
El tipus de la pàgina web va a
ser text, però més específicament, HTML,

138
00:05:45,510 --> 00:05:47,010
que estem a punt de submergir-se de nou en.

139
00:05:47,010 --> 00:05:49,877
I el punt punt punt just
mitjans, aquí hi ha el codi HTML.

140
00:05:49,877 --> 00:05:51,710
I aquí és on estem
recollir la història d'avui,

141
00:05:51,710 --> 00:05:55,740
realment escriure HTML,
HyperText Markup Language, que

142
00:05:55,740 --> 00:05:57,727
és l'idioma en el qual
pàgines web estan escrites.

143
00:05:57,727 --> 00:05:59,060
No és un llenguatge de programació.

144
00:05:59,060 --> 00:06:01,270
No hi ha funcions
o bucles o condicions.

145
00:06:01,270 --> 00:06:03,800
És un llenguatge de marcat,
així de nou veure avui en dia,

146
00:06:03,800 --> 00:06:07,240
que li permet especificar
com estructurar i estilitzar

147
00:06:07,240 --> 00:06:09,300
estèticament una pàgina web.

148
00:06:09,300 --> 00:06:11,470
>> Així que aquest era l'únic
i només la pàgina que realment

149
00:06:11,470 --> 00:06:13,930
mirat, encara que breument, dilluns.

150
00:06:13,930 --> 00:06:16,250
I notar alguns
característiques excel·lents.

151
00:06:16,250 --> 00:06:20,170
Hi ha un munt d'angle obert
suport i prop del suport en angle.

152
00:06:20,170 --> 00:06:23,160
Entre aquells en angle
parèntesi són paraules.

153
00:06:23,160 --> 00:06:25,660
I anem a començar
cridar a aquestes etiquetes de les paraules.

154
00:06:25,660 --> 00:06:28,800
Així cap suport obert
i el cap del suport tancat

155
00:06:28,800 --> 00:06:33,620
són les etiquetes d'obertura i tancament,
o les etiquetes d'inici i fi

156
00:06:33,620 --> 00:06:37,660
respectivament, d'un element HTML,
com ho anomenem, anomenada cap.

157
00:06:37,660 --> 00:06:41,760
I s'aplica la mateixa argot
al cos en HTML i així successivament.

158
00:06:41,760 --> 00:06:43,970
>> I el que és interessant és
HTML-- i, de fet, anem a

159
00:06:43,970 --> 00:06:47,187
passar terriblement poc temps en ell,
perquè vas a la majoria només esbrinar

160
00:06:47,187 --> 00:06:49,770
quines característiques té quan
realment tenen un problema concret

161
00:06:49,770 --> 00:06:52,820
a solve-- trobareu que
un navegador és bastant ximple.

162
00:06:52,820 --> 00:06:56,450
És només va a fer-- no gaire diferent
1 computer-- el que vostè li diu que faci.

163
00:06:56,450 --> 00:06:59,279
I així, quan vostè té obert
HTML suport a la part superior

164
00:06:59,279 --> 00:07:01,320
allà, que essencialment
només vol dir, bé, navegador,

165
00:07:01,320 --> 00:07:04,090
aquí ve una pàgina web escrit en HTML.

166
00:07:04,090 --> 00:07:06,130
>> Quan es veu el suport obert
cap, que només significa,

167
00:07:06,130 --> 00:07:10,350
escolta, navegador, aquí ve el cap, o
la part superior de la meva pàgina web.

168
00:07:10,350 --> 00:07:14,192
Quan es veu un suport tancat
cap, que només significa, bé,

169
00:07:14,192 --> 00:07:15,150
això és tot pel cap.

170
00:07:15,150 --> 00:07:16,420
En espera d'alguna cosa més.

171
00:07:16,420 --> 00:07:18,878
I aquesta cosa més és
pel que sembla serà el cos.

172
00:07:18,878 --> 00:07:22,630
I quan vostè no té una etiqueta, igual que
Té tot just hola, coma, món,

173
00:07:22,630 --> 00:07:26,610
que només va a ser text sense format que
en última instància, es visualitza a la pantalla.

174
00:07:26,610 --> 00:07:29,220
>> Ara, vostè notarà massa
la indentació aquí.

175
00:07:29,220 --> 00:07:32,160
Vostè probablement pot inferir
com estem estilitzar ella.

176
00:07:32,160 --> 00:07:34,850
Cada vegada que obro una etiqueta,
per així dir-ho, em sagnia.

177
00:07:34,850 --> 00:07:38,540
I cada vegada que tancar
una etiqueta, jo no-guió,

178
00:07:38,540 --> 00:07:40,690
similar a la de les claus.

179
00:07:40,690 --> 00:07:43,470
I més enllà d'això, estic una mica
d'utilitzar el meu judici.

180
00:07:43,470 --> 00:07:48,380
Tingueu en compte que no em vaig molestar a copejar
Introduïu l'interior d'aquesta etiqueta del títol.

181
00:07:48,380 --> 00:07:48,990
Per què?

182
00:07:48,990 --> 00:07:51,920
Bé, jo vaig decidir que semblava un
poc més net per a mi, l'ésser humà,

183
00:07:51,920 --> 00:07:53,181
per no molestar a fer això.

184
00:07:53,181 --> 00:07:54,930
Així que de nou, hi ha una mica de
diu judici just

185
00:07:54,930 --> 00:07:57,670
com existeix en C o en qualsevol idioma.

186
00:07:57,670 --> 00:08:04,110
>> Però cal notar també que aquesta sagnia
es presta a un model mental,

187
00:08:04,110 --> 00:08:05,670
no sobre el compliquen.

188
00:08:05,670 --> 00:08:07,020
Però un arbre, no?

189
00:08:07,020 --> 00:08:09,290
Si vostè pensa en un web
pàgina, pel que sembla escrit

190
00:08:09,290 --> 00:08:12,050
així, com
bé sagnia d'aquesta manera,

191
00:08:12,050 --> 00:08:17,390
gairebé es pot pensar en el suport obert
HTML tag suport tancat es delimiten

192
00:08:17,390 --> 00:08:21,380
l'arrel d'un node, un arbre de família
node d'estil en l'estil dels arbres

193
00:08:21,380 --> 00:08:22,900
vam veure divendres passat.

194
00:08:22,900 --> 00:08:27,630
>> I, de fet, tenim a la dreta aquí
el que anem a trucar a un DOM, D-O-M, document

195
00:08:27,630 --> 00:08:31,680
model d'objectes, una forma elegant de dir
un arbre que representa que l'HTML.

196
00:08:31,680 --> 00:08:36,140
I noti que HTML té, anem a dir,
com un arbre de família, dos fills.

197
00:08:36,140 --> 00:08:37,659
A l'esquerra hi ha el cap.

198
00:08:37,659 --> 00:08:39,179
A la dreta hi ha el cos.

199
00:08:39,179 --> 00:08:44,220
>> I així com un exercici de pensament sense sentit,
cap, per descomptat, té quants nens

200
00:08:44,220 --> 00:08:46,070
d'acord amb aquesta estructura?

201
00:08:46,070 --> 00:08:48,200
Així que només un, títol--
i és per això que tenim

202
00:08:48,200 --> 00:08:50,580
la fletxa que va des del cap fins al títol.

203
00:08:50,580 --> 00:08:55,110
Així que és com si aquesta persona en el
arbre de la família tenia només una cria.

204
00:08:55,110 --> 00:08:58,230
I a continuació, el títol en si pot
es diu que té un nen també.

205
00:08:58,230 --> 00:09:01,780
>> Recordem que l'HTML tenia
hola, coma, món sota d'ella.

206
00:09:01,780 --> 00:09:06,090
I he simplement dibuixat dins d'un
ovalada en lloc de només un rectangle

207
00:09:06,090 --> 00:09:10,559
transmetre semànticament que encara que
es tracta d'un node en l'arbre, per així dir-ho,

208
00:09:10,559 --> 00:09:12,100
és una espècie de fonamentalment diferent.

209
00:09:12,100 --> 00:09:12,800
No és una etiqueta.

210
00:09:12,800 --> 00:09:14,780
O més aviat, no és un element.

211
00:09:14,780 --> 00:09:16,590
És només un node de text, si es vol.

212
00:09:16,590 --> 00:09:18,990
Però aquests són completament
convencions humanes arbitràries.

213
00:09:18,990 --> 00:09:23,180
Això és només ara la meva manera de
que representa el que vaig com un agregat

214
00:09:23,180 --> 00:09:24,340
anomenar el document.

215
00:09:24,340 --> 00:09:27,750
>> I com un part, la cosa a la
súper de la cantonada superior esquerra,

216
00:09:27,750 --> 00:09:32,080
suport obert signe d'exclamació doc
tipus HTML, això s'assembla a una etiqueta,

217
00:09:32,080 --> 00:09:35,560
però és el cas estúpid cantonada on
això és just allà, copiar i enganxar

218
00:09:35,560 --> 00:09:38,460
per indicar els navegadors
aquesta és la versió de HTML 5.

219
00:09:38,460 --> 00:09:41,540
El món no deixa de canviar el que el
primera línia de codi en una pàgina ha de ser.

220
00:09:41,540 --> 00:09:43,820
Això només vol dir que la versió 5.

221
00:09:43,820 --> 00:09:45,950
Pel que no prou
assemblar-se als altres.

222
00:09:45,950 --> 00:09:48,120
>> Molt bé, així que amb això
Vas dir, podràs apreciar ara

223
00:09:48,120 --> 00:09:50,767
aquesta força aquest estúpid
tatuatge algú va aconseguir.

224
00:09:50,767 --> 00:09:51,990
>> [El]

225
00:09:51,990 --> 00:09:54,210
>> DAVID J Malan: Molt bé,
i ara anem a realment busseig

226
00:09:54,210 --> 00:09:55,710
a fer alguna cosa amb això.

227
00:09:55,710 --> 00:09:58,610
Vostè recordarà que l'última vegada
Vaig obrir la Appliance CS50

228
00:09:58,610 --> 00:10:01,650
i jo vaig fer alguna cosa com
simple com obrir gedit.

229
00:10:01,650 --> 00:10:05,190
I he salvat l'arxiu, fins i tot en
la meva desktop-- enlloc especial--

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

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

232
00:10:07,100 --> 00:10:10,984
>> Així que permetin-me fer això
nou-- hello.html Intro.

233
00:10:10,984 --> 00:10:13,900
I ara en aquest arxiu, que vaig a
seguir endavant i repetir el que acabem de

234
00:10:13,900 --> 00:10:18,850
saw-- tipus doc html Llavors vaig a
fer oberta html suport suport tancat.

235
00:10:18,850 --> 00:10:21,890
I després vaig a preventivament
obrir i tancar l'etiqueta.

236
00:10:21,890 --> 00:10:22,390
Per què?

237
00:10:22,390 --> 00:10:23,598
Només perquè no m'oblido més tard.

238
00:10:23,598 --> 00:10:26,850
És només una bona pràctica, de la mateixa manera que l'obertura
i el tancament de claus tots alhora.

239
00:10:26,850 --> 00:10:28,900
>> I llavors, què va venir després?

240
00:10:28,900 --> 00:10:30,582
Vostè pot pensar en el tatuatge.

241
00:10:30,582 --> 00:10:31,450
>> AUDIÈNCIA: El cap.

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

243
00:10:32,500 --> 00:10:36,020
I després aquí, jo
tenia el títol, crec.

244
00:10:36,020 --> 00:10:39,886
I el títol va ser arbitràriament,
hola, a prop del títol mundial.

245
00:10:39,886 --> 00:10:42,760
I després aquí baix, el cos, de
descomptat-- llavors tanquem l'etiqueta body.

246
00:10:42,760 --> 00:10:45,660
I a continuació, només una mica redundant,
Vaig tenir la mateixa cosa aquí baix.

247
00:10:45,660 --> 00:10:47,150
>> Així que jo sostinc que aquesta és una pàgina web.

248
00:10:47,150 --> 00:10:49,050
Això és una cosa que
ara podrien viure a la web,

249
00:10:49,050 --> 00:10:51,925
encara que, per descomptat, que és, literalment,
vivint en el meu escriptori en aquest moment.

250
00:10:51,925 --> 00:10:55,837
Però de fet, si puc minimitzar gedit,
Vaig a veure en el meu escriptori en el seu icona.

251
00:10:55,837 --> 00:10:58,420
Tot i que aquest és l'aparell,
vostè pot fer això en Mac OS

252
00:10:58,420 --> 00:11:01,580
sense TextEdit o
Bloc de notes de Windows amb fins i tot.

253
00:11:01,580 --> 00:11:06,115
>> I si em vaig per davant i feu doble clic
que, fins i tot, i select-- bé, anem a

254
00:11:06,115 --> 00:11:07,990
No has de seleccionar que a causa
Chrome no s'ha obrint.

255
00:11:07,990 --> 00:11:09,281
Seguirem endavant i obrir Chrome.

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

257
00:11:10,160 --> 00:11:14,040
I després fer Comando + O per obrir
I navegar al meu escriptori

258
00:11:14,040 --> 00:11:15,320
i obrir aquest arxiu.

259
00:11:15,320 --> 00:11:20,120
Així és com interpreta un navegador
HTML, de dalt a baix, d'esquerra a dreta.

260
00:11:20,120 --> 00:11:21,314
Ei, aquí hi ha el navegador HTML.

261
00:11:21,314 --> 00:11:21,980
Aquí hi ha el cap.

262
00:11:21,980 --> 00:11:23,250
Aquí hi ha el títol.

263
00:11:23,250 --> 00:11:24,090
Aquí hi ha el cos.

264
00:11:24,090 --> 00:11:26,620
I, de fet, així és com
que fa que la pàgina web.

265
00:11:26,620 --> 00:11:27,800
>> Però noti la URL.

266
00:11:27,800 --> 00:11:32,430
Cap de vosaltres podria aixecar aquest específic
pàgina en els seus ordinadors portàtils en aquests moments,

267
00:11:32,430 --> 00:11:34,910
fins i tot en l'interior del seu
aparell a través d'aquesta URL,

268
00:11:34,910 --> 00:11:40,130
perquè file: // indica que és en realitat
en el meu sistema d'arxius, el disc dur,

269
00:11:40,130 --> 00:11:40,990
no el teu.

270
00:11:40,990 --> 00:11:42,440
Així que això no és del tot útil.

271
00:11:42,440 --> 00:11:44,940
>> Ara anem a avançar cap a
utilitzant un servidor web real.

272
00:11:44,940 --> 00:11:48,309
I resulta que el CS50 Appliance
és quelcom més que un entorn en el

273
00:11:48,309 --> 00:11:51,100
vostè pot escriure codi en C i compilar
i executar com que has estat fent.

274
00:11:51,100 --> 00:11:55,500
També s'ha configurat pel
personal per representar una xarxa típica

275
00:11:55,500 --> 00:11:58,290
servidor que està a l'Internet,
un que podria pagar per

276
00:11:58,290 --> 00:12:00,210
o un que està en l'anomenat núvol.

277
00:12:00,210 --> 00:12:02,600
>> I s'està executant
lliure de codi obert estàndard

278
00:12:02,600 --> 00:12:06,160
programari, per exemple, alguna cosa
anomenat Apache, que és potser

279
00:12:06,160 --> 00:12:08,700
encara la web més popular
programari de servidor en el món

280
00:12:08,700 --> 00:12:11,030
que milers de llocs web utilitzen avui en dia.

281
00:12:11,030 --> 00:12:13,420
I també té fins i tot
programari com MySQL,

282
00:12:13,420 --> 00:12:16,240
que és un servidor de bases de dades
que amb el temps anem a arribar,

283
00:12:16,240 --> 00:12:18,330
que no és més que dir
Puc començar a tractar

284
00:12:18,330 --> 00:12:22,040
el meu aparell com un servidor de ple dret
que jo no estic pagant per altra banda.

285
00:12:22,040 --> 00:12:25,980
Només viu en el meu propi ordinador portàtil per
amb fins de desenvolupament i de conveniència.

286
00:12:25,980 --> 00:12:27,870
>> Així que anem a seguir endavant i
prendre avantatge d'això.

287
00:12:27,870 --> 00:12:30,120
Vaig a seguir endavant i
obrir una finestra de terminal.

288
00:12:30,120 --> 00:12:33,030
I jo vaig a seguir endavant i
move-- realitat, en primer lloc jo sóc

289
00:12:33,030 --> 00:12:34,860
anar a navegar al meu escriptori.

290
00:12:34,860 --> 00:12:36,400
Si faig ls, hi ha hello.html.

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

292
00:12:37,022 --> 00:12:38,730
I jo vaig a anar
endavant i començar a utilitzar

293
00:12:38,730 --> 00:12:40,800
un nou directori que hem
no s'utilitza abans d'avui.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- vaig a moure
a ../vhosts per hosts-- virtuals

295
00:12:46,840 --> 00:12:50,940
més sobre això en el futur-- i després
en un directori anomenat localhost,

296
00:12:50,940 --> 00:12:54,420
que és el sobrenom donat a gairebé
qualsevol ordinador, ja sigui un Mac, PC,

297
00:12:54,420 --> 00:12:57,560
o Linux, i després
específicament en un directori que nosaltres,

298
00:12:57,560 --> 00:13:01,260
el personal ja creat per a vostè quan
va descarregar l'aparell anomenat

299
00:13:01,260 --> 00:13:01,760
públic.

300
00:13:01,760 --> 00:13:04,551
I com el seu nom suggereix, res
Em vaig posar en aquesta carpeta, en teoria,

301
00:13:04,551 --> 00:13:07,790
serà ara
públic, almenys a les persones

302
00:13:07,790 --> 00:13:10,030
que tenen una directa
connexió amb l'ordinador.

303
00:13:10,030 --> 00:13:13,160
>> Així que ara em deixis anar per davant i
cd a aquest mateix directori

304
00:13:13,160 --> 00:13:15,490
perquè jo pugui veure el que hi ha
passant i ls tipus.

305
00:13:15,490 --> 00:13:17,630
I, de fet, aquesta és la
L'únic que hi ha.

306
00:13:17,630 --> 00:13:23,250
Afirmo ara que ja he posat aquest
hello.html presentar dins d'un directori

307
00:13:23,250 --> 00:13:26,940
anomenat públic dins d'un directori
anomenat localhost a l'interior d'un directori

308
00:13:26,940 --> 00:13:29,810
anomenats vhosts, que
gràcies al personal CS50

309
00:13:29,810 --> 00:13:34,390
ha estat pre-configurat per a ser
l'arrel del seu servidor web,

310
00:13:34,390 --> 00:13:36,900
Puc espere fer ara això.

311
00:13:36,900 --> 00:13:38,390
>> Vaig a obrir una nova pestanya.

312
00:13:38,390 --> 00:13:40,090
I jo vaig a anar a no presentar: //.

313
00:13:40,090 --> 00:13:44,520
Vaig a utilitzar real
http / localhost, que

314
00:13:44,520 --> 00:13:47,470
de nou, és el sobrenom
per al meu propi servidor.

315
00:13:47,470 --> 00:13:51,085
I després em vaig a anar al
el nom de l'arxiu, només per ser clars?

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

317
00:13:52,680 --> 00:13:54,320
On és aquesta història probablement va?

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
>> Així que en altres paraules, vull ara això
és el meu propi ordinador, el meu propi aparell,

322
00:14:04,270 --> 00:14:05,660
com si es tracta d'un servidor real.

323
00:14:05,660 --> 00:14:07,490
El seu sobrenom és localhost.

324
00:14:07,490 --> 00:14:10,210
Però pensar en localhost com com
Facebook.com google.com, el que sigui.

325
00:14:10,210 --> 00:14:11,600
És només el meu nom local.

326
00:14:11,600 --> 00:14:14,810
I després la final el que vull és a la
arrel del disc dur, per així dir-ho,

327
00:14:14,810 --> 00:14:17,729
o l'arrel del servidor web,
ergo la barra diagonal i després

328
00:14:17,729 --> 00:14:18,770
el nom del fitxer hello.html.

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

330
00:14:19,880 --> 00:14:21,930
>> Permetin-me Allunyar i prem enter.

331
00:14:21,930 --> 00:14:24,266
I, en efecte, no és ara la meva pàgina web.

332
00:14:24,266 --> 00:14:25,390
Així que és una mica diferent.

333
00:14:25,390 --> 00:14:26,880
I és igual de decebedor.

334
00:14:26,880 --> 00:14:27,904
Aquesta és la versió antiga.

335
00:14:27,904 --> 00:14:29,070
Deixeu-me reduir la mida del tipus de lletra esquena.

336
00:14:29,070 --> 00:14:29,745
Aquesta és l'edat.

337
00:14:29,745 --> 00:14:30,890
Aquesta és la nova.

338
00:14:30,890 --> 00:14:35,430
Però el que està succeint, fonamentalment,
ara és que s'està utilitzant HTTP.

339
00:14:35,430 --> 00:14:39,344
>> Anem a fer això una mica més clar o,
si es vol, una mica més complicat.

340
00:14:39,344 --> 00:14:41,760
Déjame anar a la part inferior dreta
cantonada de la meva aparell.

341
00:14:41,760 --> 00:14:44,000
I adonar-se que tot això
temps, hi ha hagut un nombre.

342
00:14:44,000 --> 00:14:47,330
Aquesta és l'adreça única
de la seva Appliance CS50.

343
00:14:47,330 --> 00:14:50,800
És una adreça privada,
com es dedueix de la 172.16,

344
00:14:50,800 --> 00:14:53,860
que només vol dir que vostè només físicament
pot accedir a aquest servidor web.

345
00:14:53,860 --> 00:14:56,340
Tot és un tallafocs i
molt ben protegida de la resta

346
00:14:56,340 --> 00:14:58,130
del món a causa d'aquest adreçament.

347
00:14:58,130 --> 00:15:01,920
>> I ara noti encara que si vaig a
aquesta direcció, no al meu aparell,

348
00:15:01,920 --> 00:15:04,340
però en Mac OS-- vaig
tornar per aquí.

349
00:15:04,340 --> 00:15:05,930
Aquest és el meu Mac ara.

350
00:15:05,930 --> 00:15:08,460
I ara vaig a obrir
aquesta versió de Chrome aquí.

351
00:15:08,460 --> 00:15:17,370
I jo vaig a anar a http: //172.16.25
/ I em oblit de la rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Així que vaig a visitar de la meva Mac
que l'adreça IP /hello.html Intro.

353
00:15:25,210 --> 00:15:29,850
I ara que veig des de la meva Mac
que el meu CS50 Appliance, que és

354
00:15:29,850 --> 00:15:32,600
Adreça IP és que
nombre, és, en efecte comportant-

355
00:15:32,600 --> 00:15:34,320
com un servidor web a l'Internet.

356
00:15:34,320 --> 00:15:36,944
No té un bonic fàcil
recordar el nom com Facebook.com,

357
00:15:36,944 --> 00:15:40,370
però s'està utilitzant HTTP
pel que sembla, tot i que Chrome

358
00:15:40,370 --> 00:15:43,560
és una espècie de simplificació del món
per a nosaltres, però no ens mostra HTTP.

359
00:15:43,560 --> 00:15:46,210
Però això és de fet exactament això.

360
00:15:46,210 --> 00:15:48,470
Chrome s'acaba salvant alguns
pulsacions en aquests dies.

361
00:15:48,470 --> 00:15:50,530
I això és el que ara veiem.

362
00:15:50,530 --> 00:15:51,890
>> Així que això és tot bé i bo.

363
00:15:51,890 --> 00:15:53,740
Però és una pàgina bastant decebedora.

364
00:15:53,740 --> 00:15:56,230
Déjame anar i fer alguna cosa
una mica diferent ara.

365
00:15:56,230 --> 00:15:57,910
Així que permetin-me tornar a gedit.

366
00:15:57,910 --> 00:16:00,580
I en comptes de hola,
món, anem a posar una imatge.

367
00:16:00,580 --> 00:16:05,880
I jo vaig reclamar des abans-- deixar-me anar
en el meu directori públic localhost.

368
00:16:05,880 --> 00:16:10,580
I m'ho dius a mi anar endavant i copio 1
tota munt d'arxius a partir d'avui

369
00:16:10,580 --> 00:16:15,633
de la meva carpeta de Dropbox a aquí.

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

371
00:16:19,470 --> 00:16:21,680
>> Ara bé, si escric ls, mirar
en tots aquests arxius

372
00:16:21,680 --> 00:16:24,940
que he distribuït per la
el lloc web del curs abans d'avui en dia,

373
00:16:24,940 --> 00:16:26,830
un dels quals és encara hello.html.

374
00:16:26,830 --> 00:16:27,830
Així que cal un.

375
00:16:27,830 --> 00:16:30,730
I recordar aquest ximple
d'última cat.jpg temps--.

376
00:16:30,730 --> 00:16:34,550
Així que vaig a tractar d'integrar
cat.jpg dins de la meva pàgina web.

377
00:16:34,550 --> 00:16:37,690
>> Vaig a seguir endavant
i fer cat.jpg, estalviar.

378
00:16:37,690 --> 00:16:38,950
Permetin-me tornar a Chrome.

379
00:16:38,950 --> 00:16:41,140
I permetin-me zoom a la
font i ara recarregar.

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

381
00:16:43,090 --> 00:16:45,030
Vaja, on poso això?

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

383
00:16:48,210 --> 00:16:51,520
Standby-- Encara tinc l'edat
versió del meu escriptori obert.

384
00:16:51,520 --> 00:16:56,020
Així que em deixis anar al meu amfitrió virtual, el meu
localhost, el meu públic, i hello.html.

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

386
00:16:57,320 --> 00:17:00,670
Així que ara em deixis anar per davant i
dir cat.jpg interior del cos

387
00:17:00,670 --> 00:17:02,830
on jo vull que sigui
mostrat i tornar a carregar.

388
00:17:02,830 --> 00:17:04,560
Per descomptat, això no és correcte.

389
00:17:04,560 --> 00:17:08,050
>> Així que he de dir-li al navegador una mica
més deliberadament el que jo vull que faci.

390
00:17:08,050 --> 00:17:10,210
Simplement escrivint el nom és
òbviament no suficient.

391
00:17:10,210 --> 00:17:15,134
Així que recorda que hi havia un altre
etiqueta, imatge, img, per abreujar.

392
00:17:15,134 --> 00:17:17,550
Això és simplement perquè els éssers humans
no els agrada les paraules plenes de tipus.

393
00:17:17,550 --> 00:17:19,050
I després podem fer font = "cat.jpg".

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

395
00:17:21,470 --> 00:17:23,550
>> I ara me'n vaig a fer
una cosa diferent aquí.

396
00:17:23,550 --> 00:17:25,390
Tot i que tots
les nostres etiquetes fins al moment tenen

397
00:17:25,390 --> 00:17:28,086
tingut aquesta noció d'un
començar l'etiqueta i una etiqueta final,

398
00:17:28,086 --> 00:17:30,210
que en realitat no fan
sentit d'una imatge, oi?

399
00:17:30,210 --> 00:17:32,430
Una imatge és o existeix o no existeix.

400
00:17:32,430 --> 00:17:36,650
I pel que els éssers humans han arribat
amb una convenció més simple.

401
00:17:36,650 --> 00:17:40,310
Quan vostè té una etiqueta que pot tant
començar i acabar al mateix temps--

402
00:17:40,310 --> 00:17:43,790
pot estar buit, de manera que només speak--
posar la barra diagonal dins de l'etiqueta

403
00:17:43,790 --> 00:17:44,710
al final.

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

405
00:17:45,776 --> 00:17:47,150
Ara vaig a tornar al meu navegador.

406
00:17:47,150 --> 00:17:50,377
Hit Recarregar Maleïda sigui, alguna cosa està malament.

407
00:17:50,377 --> 00:17:52,460
Vostè probablement ha vist això
de tant en tant a la web,

408
00:17:52,460 --> 00:17:53,600
encara que no ha estat culpa teva.

409
00:17:53,600 --> 00:17:54,766
És culpa del servidor web.

410
00:17:54,766 --> 00:17:56,240
Què odes aquest sembla indicar?

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

412
00:17:57,450 --> 00:17:58,009
És trencat.

413
00:17:58,009 --> 00:17:59,300
Aquí és on la imatge pertany.

414
00:17:59,300 --> 00:17:59,700
Sí?

415
00:17:59,700 --> 00:18:01,560
>> AUDIÈNCIA: Però no ho fa
tenir accés a la imatge.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J Malan: No
tenir accés a la imatge.

417
00:18:03,070 --> 00:18:05,230
Això, o pitjor encara, potser
que ni tan sols existeix.

418
00:18:05,230 --> 00:18:06,729
Anem a veure si no podem diagnosticar això.

419
00:18:06,729 --> 00:18:09,390
Recordem de l'última vegada que si
a Chrome, en l'aparell,

420
00:18:09,390 --> 00:18:11,870
o fins i tot en el teu Mac o PC,
vas al menú de desenvolupador

421
00:18:11,870 --> 00:18:14,650
i anar a les Eines de desenvolupament
opció, que probablement tens

422
00:18:14,650 --> 00:18:16,850
no s'utilitza molt o mai.

423
00:18:16,850 --> 00:18:20,780
I si vaig a la xarxa
i tornar a carregar la pàgina,

424
00:18:20,780 --> 00:18:24,110
anem a veure la realitat d'HTTP
peticions que s'estan realitzant.

425
00:18:24,110 --> 00:18:28,400
>> Sembla que és hello.html
de fet bé, per tant, el 200.

426
00:18:28,400 --> 00:18:30,630
Però cat.jpg és un 403.

427
00:18:30,630 --> 00:18:31,650
Així que no és un 404.

428
00:18:31,650 --> 00:18:33,490
File probablement existeix.

429
00:18:33,490 --> 00:18:35,250
403 significa prohibit.

430
00:18:35,250 --> 00:18:37,790
Així que això és una mica confús.

431
00:18:37,790 --> 00:18:42,340
Vaig a tornar
al meu finestra de terminal.

432
00:18:42,340 --> 00:18:43,700
Permetin-me acostar-se fins aquí.

433
00:18:43,700 --> 00:18:44,750
I m'ho dius a mi fer un ls.

434
00:18:44,750 --> 00:18:46,430
Hi ha aquests mateixos arxius.

435
00:18:46,430 --> 00:18:49,410
>> Ara m'ho dius a mi fer un ls-l,
que vostè probablement

436
00:18:49,410 --> 00:18:53,350
utilitzat abans de mirar arxiu
mides o potser les marques de temps.

437
00:18:53,350 --> 00:18:55,590
I veiem un munt de
informació aclaparadora.

438
00:18:55,590 --> 00:18:57,040
Però notar alguns detalls.

439
00:18:57,040 --> 00:19:01,660
Aquí està hello.html en aquest
remar aquí i aquí està cat.jpg.

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

441
00:19:02,934 --> 00:19:05,850
I és només l'aparell sent
fàcil d'utilitzar, posant de relleu JPEG

442
00:19:05,850 --> 00:19:07,380
en porpra com aquest.

443
00:19:07,380 --> 00:19:11,470
Però quina altra cosa és diferent al costat
la mida del fitxer i el nom del fitxer?

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

445
00:19:13,438 --> 00:19:14,754
>> AUDIÈNCIA: [inaudible].

446
00:19:14,754 --> 00:19:16,920
DAVID J Malan: Sí, hi ha
dos aquí R més.

447
00:19:16,920 --> 00:19:20,170
Noti el que ha hello.html passant.

448
00:19:20,170 --> 00:19:24,050
Així que resulta que el nom de
aquest directori públic és important.

449
00:19:24,050 --> 00:19:26,400
Qualsevol cosa en aquest directori
està destinat a ser públic.

450
00:19:26,400 --> 00:19:28,790
Però no n'hi ha prou
només per deixar anar els arxius en allà.

451
00:19:28,790 --> 00:19:31,480
També cal canviar
la manera dels arxius,

452
00:19:31,480 --> 00:19:35,180
canviar els permisos de
l'arxiu en forma proactiva no

453
00:19:35,180 --> 00:19:37,650
ser la configuració per defecte,
que és que només puc llegir

454
00:19:37,650 --> 00:19:39,220
i escriure, jo sent el propietari.

455
00:19:39,220 --> 00:19:43,540
Vull que tot el món a tot el món
ser capaç de llegir el meu arxiu, per així dir-ho.

456
00:19:43,540 --> 00:19:44,950
Llegir només significa veure-ho.

457
00:19:44,950 --> 00:19:49,780
>> I, de fet, com es veurà en el problema
estableix set, això és el que hi ha d'aquests R.

458
00:19:49,780 --> 00:19:53,160
Signifiquen aquests dos R que tothom
una altra part del món també llegir-lo,

459
00:19:53,160 --> 00:19:55,300
sobretot ara que
que és en aquest directori.

460
00:19:55,300 --> 00:19:59,620
Així que la forma més senzilla de fer això és
anar al meu ràpida i fer chmod per al canvi

461
00:19:59,620 --> 00:20:05,580
manera i després fan un + r, en conjunt,
tots, tots, a més de r per a lectura,

462
00:20:05,580 --> 00:20:07,944
i després cat.jpg Retorn.

463
00:20:07,944 --> 00:20:10,360
Res sembla succeir, que
en general significa una bona cosa.

464
00:20:10,360 --> 00:20:13,850
Així ls-l nou-- ara
donem una ullada a cat.jpg.

465
00:20:13,850 --> 00:20:15,750
I aquest permís
semblen haver canviat.

466
00:20:15,750 --> 00:20:18,670
Com acotació al marge, si vostè fa una
error i que, per exemple,

467
00:20:18,670 --> 00:20:23,210
Acabo de fer tu-- No sé-- assaig
públicament accessible per accident,

468
00:20:23,210 --> 00:20:25,480
vostè pot fer el contrari, chmod a-r.

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

470
00:20:25,909 --> 00:20:28,200
Encara que, francament, no hauria
estar al directori públic

471
00:20:28,200 --> 00:20:29,760
de totes maneres, si aquesta és la preocupació.

472
00:20:29,760 --> 00:20:32,475
>> Així que ara anem a tornar a
meu navegador i recàrrega.

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

474
00:20:32,904 --> 00:20:34,820
I jo vaig a fer clic
el petit Cazafantasmas

475
00:20:34,820 --> 00:20:38,030
símbol per esborrar la part de la
pantalla perquè puguem veure noves sol·licituds.

476
00:20:38,030 --> 00:20:40,630
I, de fet, aquí hi ha
Gat rondinaire d'abans.

477
00:20:40,630 --> 00:20:43,010
Però el més important,
tècnicament, no és

478
00:20:43,010 --> 00:20:45,565
el número 200, que
vol dir que vam aconseguir a D'acord.

479
00:20:45,565 --> 00:20:47,190
Molt bé, així que això és tot bé i bo.

480
00:20:47,190 --> 00:20:48,940
Però no estem fent
el millor dels llocs web,

481
00:20:48,940 --> 00:20:51,967
ni anem a provar massa difícil
fer el més luxós dels llocs web d'avui en dia.

482
00:20:51,967 --> 00:20:54,550
Però anem a almenys fer alguna cosa
súper familiaritzats abans sotragueig

483
00:20:54,550 --> 00:20:56,030
fora d'algunes altres etiquetes.

484
00:20:56,030 --> 00:20:58,470
Així que suposo que no només vull un gat aquí.

485
00:20:58,470 --> 00:21:02,530
Suposem que realment vull això
gat per enllaçar a alguna cosa.

486
00:21:02,530 --> 00:21:07,210
>> Jo podria, per exemple,
fer alguna cosa com això.

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

488
00:21:08,580 --> 00:21:12,890
una per a href àncora per
equals-- referència hiper

489
00:21:12,890 --> 00:21:17,440
i farem alguna cosa
com www.google.com prop

490
00:21:17,440 --> 00:21:19,540
citar claudàtor de tancament.

491
00:21:19,540 --> 00:21:22,000
I ara buscar gats.

492
00:21:22,000 --> 00:21:23,520
Tancar etiqueta d'ancoratge.

493
00:21:23,520 --> 00:21:26,760
Així que això té només una espècie
de fonamentalment nou detall.

494
00:21:26,760 --> 00:21:28,190
L'etiqueta, per descomptat, és diferent.

495
00:21:28,190 --> 00:21:31,770
És el nom d'una de àncora
referència href o hiper.

496
00:21:31,770 --> 00:21:35,269
>> Però el més important, no hi ha
aquesta característica sintàctica aquí.

497
00:21:35,269 --> 00:21:37,810
Això és el que anem a començar a cridar
no una etiqueta, sinó un atribut.

498
00:21:37,810 --> 00:21:40,830
I un atribut és una cosa que
modifica el comportament d'una variable.

499
00:21:40,830 --> 00:21:45,400
I aquest atribut, href, mitjans
modificar el comportament d'aquest ancoratge

500
00:21:45,400 --> 00:21:48,430
de manera que quan es fa clic,
que va a aquesta URL aquí.

501
00:21:48,430 --> 00:21:50,330
I, per descomptat, que la URL és Google.

502
00:21:50,330 --> 00:21:53,951
>> Mentrestant, ¿què és això
text aquí serà?

503
00:21:53,951 --> 00:21:55,950
Bé, això serà
el que la realitat humana

504
00:21:55,950 --> 00:21:58,470
veu com el subratllat
enllaç, tan simple com això.

505
00:21:58,470 --> 00:21:59,220
Així que anem a provar això.

506
00:21:59,220 --> 00:21:59,980
Permetin-me guardar-lo.

507
00:21:59,980 --> 00:22:01,650
Encara estic en hello.html.

508
00:22:01,650 --> 00:22:05,360
No obstant això, en les versions en línia, veuràs
els noms dels arxius reals que prèviament preparada.

509
00:22:05,360 --> 00:22:06,805
Déjame anar per davant i tornar a carregar.

510
00:22:06,805 --> 00:22:08,680
I ara és un molt
pàgina decebedor encara.

511
00:22:08,680 --> 00:22:10,910
Però si hi ha sobre allà--
i que és una mica petita,

512
00:22:10,910 --> 00:22:13,576
però- es pot veure a la part inferior
cantonada esquerra de la pantalla,

513
00:22:13,576 --> 00:22:15,242
que ha fet d'anar a google.com.

514
00:22:15,242 --> 00:22:19,280
I si faig clic en això, ho farà
em bata camí a la real Google.

515
00:22:19,280 --> 00:22:22,610
>> Però cal notar aquí una oportunitat per
l'explotació, així com un part.

516
00:22:22,610 --> 00:22:25,150
I tornarem a una altra
temes de seguretat d'aquí a poc.

517
00:22:25,150 --> 00:22:29,290
Perquè no aquesta dicotomia
entre el lloc on vas i el que vostè diu,

518
00:22:29,290 --> 00:22:34,722
vostè podria fer alguna cosa com
esto-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
Bé, i ara si torno a carregar
després de guardar aquesta pàgina,

520
00:22:37,134 --> 00:22:38,800
sembla que em vaig a anar a Google.

521
00:22:38,800 --> 00:22:40,966
Però no hi ha cap raó per la qual
haver d'anar a Google, no?

522
00:22:40,966 --> 00:22:47,460
De fet, em podria anar a una cosa així com
badguy.com, torneu a carregar la pàgina aquí.

523
00:22:47,460 --> 00:22:49,750
I fixeu-vos, encara es veu com Google.

524
00:22:49,750 --> 00:22:52,020
I només si estic fort
prou per treure per aquí

525
00:22:52,020 --> 00:22:54,770
puc veure que és fins i tot anar a
anar a un lloc diferent.

526
00:22:54,770 --> 00:22:57,400
>> Així que si alguna vegada has ficat
un correu electrònic, especialment

527
00:22:57,400 --> 00:22:59,610
un Paypal, o
aparentment de PayPal

528
00:22:59,610 --> 00:23:01,830
demanant-li que ingressi
en el seu compte, aquesta

529
00:23:01,830 --> 00:23:06,380
és per això que mai ha
mai feu clic a enllaços en correus electrònics,

530
00:23:06,380 --> 00:23:07,930
francament, els enllaços en els correus electrònics.

531
00:23:07,930 --> 00:23:10,380
Si vostè sap que té real
diners a Paypal o Banc

532
00:23:10,380 --> 00:23:14,250
d'Amèrica o fidelitat o qualsevol
lloc web, escriure manualment en.

533
00:23:14,250 --> 00:23:17,530
A causa de que es vegi el fàcil que és
enganyar algú en la presentació del que

534
00:23:17,530 --> 00:23:18,526
s'assembla a un enllaç.

535
00:23:18,526 --> 00:23:20,400
Però el que realment podia
anar absolutament en qualsevol lloc.

536
00:23:20,400 --> 00:23:23,301
>> I hi ha molt més
amenaces que això.

537
00:23:23,301 --> 00:23:25,300
De fet, aquest és una mica
d'una tangent ara, però un

538
00:23:25,300 --> 00:23:28,430
dels millors que he vist
que ja s'ha tancat,

539
00:23:28,430 --> 00:23:34,060
és algú portat a la gent
A-- pel que aquest podria dir,

540
00:23:34,060 --> 00:23:37,660
feu clic aquí per accedir al seu
compte, un compte bancari.

541
00:23:37,660 --> 00:23:40,985
I aquest va ser el Banc d'Occident.

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

543
00:23:43,030 --> 00:23:44,250
>> Així que algú va comprar això.

544
00:23:44,250 --> 00:23:47,090
I és una mica més fàcil de veure
que en una font mico espaiada zoom

545
00:23:47,090 --> 00:23:49,190
en en un projector de 30 peus.

546
00:23:49,190 --> 00:23:51,720
Però quan és petita font en un
adreça de correu electrònic que vostè està rebent,

547
00:23:51,720 --> 00:23:54,690
això sembla bankofthewest.com,
no bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
que algú havia pagat $ 10 a comprar.

549
00:23:58,230 --> 00:24:00,840
I llavors el que els va portar a la
equivalent a una mala pàgina web.

550
00:24:00,840 --> 00:24:05,540
>> I veuràs també- realitat que podem fer
esto-- si vaig a la pàgina web real,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, de nou,
el record de l'última vegada

552
00:24:10,335 --> 00:24:13,210
que si aquesta és la seva pàgina web i
vostè és curiós pel que fa a com funciona,

553
00:24:13,210 --> 00:24:15,610
que sens dubte pot anar a
Eines per a desenvolupadors de Chrome.

554
00:24:15,610 --> 00:24:18,890
I vostè pot veure tota la
HTML amb un format agradable allà.

555
00:24:18,890 --> 00:24:20,890
>> Però més al punt,
vostè CAM-- Tanquem

556
00:24:20,890 --> 00:24:24,760
esto-- vostè pot anar per Veure
Desenvolupador Mostra la font.

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

558
00:24:25,770 --> 00:24:28,350
Per què no puc simplement copio
tot això i llavors jo

559
00:24:28,350 --> 00:24:31,630
pot entrar en la meva petita finestra gedit
aquí i fer la meva pròpia pàgina web.

560
00:24:31,630 --> 00:24:33,210
Guardeu això en hello.html.

561
00:24:33,210 --> 00:24:36,770
I probablement això va a trencar,
perquè no és tan fàcil en general.

562
00:24:36,770 --> 00:24:41,590
Però ara si torno a carregar la meva pròpia pàgina en
la meva pròpia CS50 Appliance i recàrrega colpejar,

563
00:24:41,590 --> 00:24:42,990
Bé, algunes coses es va trencar.

564
00:24:42,990 --> 00:24:45,750
Però estic bastant a prop de tenir
el meu propi lloc web bancari, oi?

565
00:24:45,750 --> 00:24:46,570
Tot això HTML--

566
00:24:46,570 --> 00:24:47,370
>> [El]

567
00:24:47,370 --> 00:24:49,210
>> DAVID J Malan: --Jo
no actually-- i vostè

568
00:24:49,210 --> 00:24:52,210
saben que hi ha algú per aquí que
seria realment feu clic en aquests enllaços també.

569
00:24:52,210 --> 00:24:54,864
Així que clarament, algunes coses es va trencar.

570
00:24:54,864 --> 00:24:56,780
Però això va a conduir
nosaltres en una discussió,

571
00:24:56,780 --> 00:25:00,810
innecessàriament en aquest moment, pel que fa al
CSS, fulls d'estil en cascada, són,

572
00:25:00,810 --> 00:25:03,410
i com a realitat
descarregar els altres arxius HTML

573
00:25:03,410 --> 00:25:06,140
i JPEG arxius GIF que
el lloc web podria estar utilitzant.

574
00:25:06,140 --> 00:25:07,960
Però tot això és realitzable.

575
00:25:07,960 --> 00:25:11,110
Però el que realment es redueix a
aquestes molt simples heurístiques.

576
00:25:11,110 --> 00:25:14,450
>> Així que ara anem a llegir-lo a través d'un
parell d'altres exemples d'HTML

577
00:25:14,450 --> 00:25:16,680
només per donar-li un sentit
de què més es pot fer.

578
00:25:16,680 --> 00:25:18,670
Per exemple, aquest és list.html.

579
00:25:18,670 --> 00:25:23,240
Suposem que jo volia fer una pàgina web
amb una llista de cases al pati.

580
00:25:23,240 --> 00:25:28,960
Podria utilitzar l'etiqueta ul per desordenada
llista i llavors el nen element de la llista

581
00:25:28,960 --> 00:25:33,760
i després iterar over-- o llista,
rather-- les cases en qüestió.

582
00:25:33,760 --> 00:25:36,080
>> I si obro això, farem això.

583
00:25:36,080 --> 00:25:40,670
Anem a no hello.html,
però a list.html.

584
00:25:40,670 --> 00:25:42,160
Maleïda sigui.

585
00:25:42,160 --> 00:25:43,000
Com puc solucionar això?

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

587
00:25:45,679 --> 00:25:47,220
És el mateix problema que abans, oi?

588
00:25:47,220 --> 00:25:52,510
Així que m'ho dius a mi fer oops-- chmod--
chmod a + r de list.html.

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

590
00:25:54,610 --> 00:25:59,610
I ara si em vaig de tornada al meu navegador
i feu clic a Actualitza, aquí està.

591
00:25:59,610 --> 00:26:02,360
Així que si alguna vegada has volgut fer
una llista amb vinyetes, es pot fer això.

592
00:26:02,360 --> 00:26:06,210
Si vols ser super luxós i fer
una llista ordenada, no una llista desordenada,

593
00:26:06,210 --> 00:26:10,170
canviar aquells ol, torneu a carregar la pàgina, i
ara el navegador numerar per vostè.

594
00:26:10,170 --> 00:26:11,241
>> Què més podem fer?

595
00:26:11,241 --> 00:26:13,990
Bé, un parell de altres-- si
tens llargs paràgrafs de text--

596
00:26:13,990 --> 00:26:15,698
Per exemple, alguns
Text llatí com esto--

597
00:26:15,698 --> 00:26:20,730
i vol que en paràgrafs separats,
p obert, prop de p per a l'etiqueta de paràgraf.

598
00:26:20,730 --> 00:26:22,010
I fer-ho una i altra vegada.

599
00:26:22,010 --> 00:26:26,600
I si ara obro aquest arxiu,
paragraphs.html, bé, això

600
00:26:26,600 --> 00:26:27,570
és cada vegada molest.

601
00:26:27,570 --> 00:26:34,320
Així que ara anem a tornar a la meva
ràpida, chmod a + r r estrella .html--

602
00:26:34,320 --> 00:26:36,099
un petit comodí per dir-ho.

603
00:26:36,099 --> 00:26:37,890
S'ha de solucionar tots
aquests problemes per a mi.

604
00:26:37,890 --> 00:26:38,990
Anem a tornar a carregar.

605
00:26:38,990 --> 00:26:40,500
Hi ha tres paràgrafs.

606
00:26:40,500 --> 00:26:42,930
>> I ara anem a seguir endavant
i obrir un altre.

607
00:26:42,930 --> 00:26:44,310
Què hi ha de taula?

608
00:26:44,310 --> 00:26:46,440
Es donarà compte de les mirades de taula
una mica més complex.

609
00:26:46,440 --> 00:26:49,110
Però és la mateixa idea--
etiqueta oberta, etiqueta oberta,

610
00:26:49,110 --> 00:26:51,360
obert, obert, obert, prop de l'etiqueta, etiqueta oberta.

611
00:26:51,360 --> 00:26:54,410
I això passa en repòs durant
taula, la frontera és aparentment

612
00:26:54,410 --> 00:26:58,500
serà un gruix 1-- qualsevol
que significa: fila de la taula, taula

613
00:26:58,500 --> 00:27:00,320
dades, el que significa una cèl·lula.

614
00:27:00,320 --> 00:27:03,840
I si torno al meu navegador
aquí i anar a table.html,

615
00:27:03,840 --> 00:27:05,840
es pot veure alguna cosa
així, horrible.

616
00:27:05,840 --> 00:27:07,840
Però anem a arribar al punt
on puguem realment

617
00:27:07,840 --> 00:27:09,260
fer les coses més boniques que això.

618
00:27:09,260 --> 00:27:10,530
>> Així que permetin-me estipulo per ara.

619
00:27:10,530 --> 00:27:11,870
Hi ha raïms de més etiquetes.

620
00:27:11,870 --> 00:27:15,225
I HTML és meravellós per recollir
perquè, francament, tot el que ha de fer

621
00:27:15,225 --> 00:27:17,600
és mirar a les pàgines web existents
amb el qual està familiaritzat.

622
00:27:17,600 --> 00:27:20,340
I vostè és com, oh, així com
ho van fer estèticament.

623
00:27:20,340 --> 00:27:23,159
>> O vostè pot buscar qualsevol línia
de recursos pel que fa a com funciona l'HTML,

624
00:27:23,159 --> 00:27:25,700
i veuràs que hi ha una
tot el vocabulari d'altres etiquetes.

625
00:27:25,700 --> 00:27:30,110
Però amb el model mental senzill
només que gairebé qualsevol etiqueta s'obre

626
00:27:30,110 --> 00:27:33,620
ha de ser tancat, el que realment
no és suficient per ensenyar a un mateix

627
00:27:33,620 --> 00:27:36,950
HTML després d'entendre
aquestes idees bàsiques d'etiquetes

628
00:27:36,950 --> 00:27:40,520
i atributs i la bona formació
que hem parlat,

629
00:27:40,520 --> 00:27:44,697
res de tancar perquè puguem obrir
perquè no confonguem un navegador.

630
00:27:44,697 --> 00:27:46,780
Així que anem a prendre ara aquesta a
un nivell més interessant

631
00:27:46,780 --> 00:27:48,100
per anar a la real.

632
00:27:48,100 --> 00:27:51,095
I anem a anar al meu Mac
aquí, a google.com.

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

634
00:27:52,280 --> 00:27:54,020
I ara notice-- farem això.

635
00:27:54,020 --> 00:27:57,280
Estic gong per anar a
Configuració, Configuració de cerca.

636
00:27:57,280 --> 00:28:01,070
Vull desactivar aquesta instantània molest
resultats cosa on immediatament

637
00:28:01,070 --> 00:28:02,450
comença responent a la seva escriptura.

638
00:28:02,450 --> 00:28:05,300
Anem a fer aquesta escola més vell, així
veiem realment el que està passant.

639
00:28:05,300 --> 00:28:08,260
>> Així que em vaig a salvar la meva
La configuració de Google aquí.

640
00:28:08,260 --> 00:28:11,160
I ara notice-- vaig a
buscar alguna cosa com gats.

641
00:28:11,160 --> 00:28:14,500
I encara està fent acte
completa aquí, però sobre la base de les coses

642
00:28:14,500 --> 00:28:15,970
la gent ha escrit en el passat.

643
00:28:15,970 --> 00:28:17,490
Però adonar-se del que passarà.

644
00:28:17,490 --> 00:28:20,272
>> A l'adreça URL en el moment
és això, només google.com.

645
00:28:20,272 --> 00:28:22,650
I tècnicament, és barra.

646
00:28:22,650 --> 00:28:25,910
Google acaba de salvar a un personatge
i no nosaltres que mostrar.

647
00:28:25,910 --> 00:28:30,400
Ells ens estan mostrant https, només
a ser super tranquil·litzador que estem

648
00:28:30,400 --> 00:28:32,850
en una pàgina segura o xifrada.

649
00:28:32,850 --> 00:28:35,690
>> Així que m'ho dius a mi anar per davant i la recerca dels gats.

650
00:28:35,690 --> 00:28:37,670
Ara bé, això es va posar molt
aclaparadora ràpidament.

651
00:28:37,670 --> 00:28:39,470
Mira la longitud d'aquesta URL.

652
00:28:39,470 --> 00:28:43,070
Però resulta que la major part d'aquest material
a l'URL és en realitat bastant inútil.

653
00:28:43,070 --> 00:28:45,320
Vaig a començar a esborrar
coses que no entenc.

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

655
00:28:46,560 --> 00:28:47,360
Veig gats.

656
00:28:47,360 --> 00:28:48,470
Entenc gats.

657
00:28:48,470 --> 00:28:50,380
No sé per què els gats són allà de nou.

658
00:28:50,380 --> 00:28:52,620
Realment no ho sé
el que és aquesta tonteria.

659
00:28:52,620 --> 00:28:56,030
Així que només vaig a mantenir
destacant i eliminació de la matèria

660
00:28:56,030 --> 00:28:59,905
que jo no entenc,
destil·lació de la URL en només això.

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

662
00:29:00,920 --> 00:29:02,270
>> Ara vaig a aconseguir entrar de nou.

663
00:29:02,270 --> 00:29:03,814
Sembla que Google segueix funcionant.

664
00:29:03,814 --> 00:29:06,980
Així que, per alguna raó, estan agregant un
munt de coses que per defecte de la seva URL.

665
00:29:06,980 --> 00:29:09,000
Però no és estrictament necessari.

666
00:29:09,000 --> 00:29:10,340
Així que el que és bo sobre això?

667
00:29:10,340 --> 00:29:13,630
Bé, deixa anar per davant i
obrir l'inspector de Chrome.

668
00:29:13,630 --> 00:29:15,960
Hi ha una petita drecera de ratolí per a això.

669
00:29:15,960 --> 00:29:17,360
>> Anar a la fitxa Xarxa.

670
00:29:17,360 --> 00:29:19,340
I ara permetin-me recàrrec
aquesta pàgina una vegada més.

671
00:29:19,340 --> 00:29:20,280
I jo estic sostenint Shift.

672
00:29:20,280 --> 00:29:22,520
Com acotació al marge, navegadors
tendeixen a emmagatzemar en memòria cau o desar

673
00:29:22,520 --> 00:29:24,697
informació només pel bé de l'eficiència.

674
00:29:24,697 --> 00:29:27,280
Però en general, Shift i la celebració de
recàrrega obligarà a tot el

675
00:29:27,280 --> 00:29:28,994
per començar de nou des del principi.

676
00:29:28,994 --> 00:29:30,410
I això és el que vull fer aquí.

677
00:29:30,410 --> 00:29:33,550
>> I compte tots aquests
files que només apareixien.

678
00:29:33,550 --> 00:29:37,920
Resulta que en qualsevol web determinada
pàgina, pot ser que hi hagi un sol arxiu

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- o no
podria ser 52, com en aquest cas.

680
00:29:43,500 --> 00:29:45,820
Quan visito google.com,
pel que sembla, el meu navegador

681
00:29:45,820 --> 00:29:49,650
arrenca 52 peticions HTTP separades.

682
00:29:49,650 --> 00:29:50,520
Perquè és això?

683
00:29:50,520 --> 00:29:53,380
>> Bé, mira el que hi ha dins
d'aquesta pàgina web fins a la part superior.

684
00:29:53,380 --> 00:29:55,620
No hi ha només text,
però no hi ha imatges reals

685
00:29:55,620 --> 00:29:57,130
de gats de més a la dreta.

686
00:29:57,130 --> 00:29:59,110
Hi ha un logotip colorit fins aquí a l'esquerra.

687
00:29:59,110 --> 00:30:01,750
Hi ha tots aquests icones
per a un micròfon i així successivament.

688
00:30:01,750 --> 00:30:05,130
Hi ha una gran quantitat de peces, construcció de
blocs, peces d'esgarrapades, si es vol,

689
00:30:05,130 --> 00:30:06,250
a aquesta pàgina web.

690
00:30:06,250 --> 00:30:10,310
I el que el navegador està fent en
aconseguint el primer arxiu, que

691
00:30:10,310 --> 00:30:16,180
és aquesta fila aquí, és essencialment
iteració en la part superior d'HTML

692
00:30:16,180 --> 00:30:19,880
a baix, d'esquerra a dreta, a la recerca de
coses com les etiquetes d'imatge o altres etiquetes

693
00:30:19,880 --> 00:30:23,160
que estan esmentant altres arxius i
quan se'ls veu, va i els va a buscar

694
00:30:23,160 --> 00:30:26,050
a través d'HTTP, tota viable
metàfora sobre,

695
00:30:26,050 --> 00:30:29,670
i després els mostra a la
ubicació adequada en la pàgina web.

696
00:30:29,670 --> 00:30:33,370
>> Però cal notar aquí si em centre en
els primers gats tir, recerca,

697
00:30:33,370 --> 00:30:37,090
adonar que, de fet, està utilitzant HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
I, per desgràcia, Google
Chrome ara en la versió 39

699
00:30:41,690 --> 00:30:45,110
és una espècie d'embrutiment i coses
no ens mostra les capçaleres reals.

700
00:30:45,110 --> 00:30:49,680
Però el que en veritat és enviat una sol·licitud
per no retallar, però / recerca? q = gats.

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

702
00:30:52,830 --> 00:30:54,340
>> Ara, per què és tan important?

703
00:30:54,340 --> 00:30:57,110
Bé, jo vaig a deduir
d'això que si Google

704
00:30:57,110 --> 00:31:01,520
dóna suport a les consultes d'aquesta manera, per què
No puc implementar la meva pròpia recerca

705
00:31:01,520 --> 00:31:06,420
motor per al CS50, però només la part davantera
final, només la interfície gràfica d'usuari.

706
00:31:06,420 --> 00:31:09,610
I anem a externalitzar la part de darrere,
la recerca real dóna lloc a Google.

707
00:31:09,610 --> 00:31:10,510
>> Llavors, ¿com puc fer això?

708
00:31:10,510 --> 00:31:13,820
Bé, deixa anar en gedit aquí.

709
00:31:13,820 --> 00:31:19,180
I m'ho dius a mi anar per davant i obro
fins, diguem, un nou arxiu.

710
00:31:19,180 --> 00:31:22,280
I em vaig a guardar aquest
temporalment com a recerca 0.html.

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

712
00:31:25,111 --> 00:31:27,860
I després, finalment, anem ràpid
endavant a la qual jo ja preparats.

713
00:31:27,860 --> 00:31:30,190
>> I jo vaig a
assotar ràpidament tipus doc

714
00:31:30,190 --> 00:31:33,840
html suport obert html
a prop suport html.

715
00:31:33,840 --> 00:31:38,390
Llavors em vaig a fer cap
prop del cap del títol obert CS50

716
00:31:38,390 --> 00:31:40,150
Cercar en lloc de la cerca de Google.

717
00:31:40,150 --> 00:31:43,480
Aquí sota tindré
el cos, aquí baix a prop del cos.

718
00:31:43,480 --> 00:31:45,835
I ara necessito CS50 Cerca.

719
00:31:45,835 --> 00:31:47,710
I, de fet, anem a
construir aquesta manera incremental.

720
00:31:47,710 --> 00:31:51,043
Vaig a seguir endavant i tancar això i
en realitat el va posar en el meu directori públic.

721
00:31:51,043 --> 00:31:52,730
Així que em donen només un moment.

722
00:31:52,730 --> 00:31:55,390
recerca-0.html-- vaig a
temporalment dir-search.html.

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

724
00:31:56,600 --> 00:31:59,750
Vaig a chmod 1 search.html + r.

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

726
00:32:01,072 --> 00:32:02,280
I ara me'n vaig a obrir-lo.

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

728
00:32:03,224 --> 00:32:04,390
Molt bé, així que això va ser ràpid.

729
00:32:04,390 --> 00:32:06,800
Però l'objectiu era simplement
per dur-nos al punt

730
00:32:06,800 --> 00:32:09,630
d'haver aquest text
arxiu anomenat search.html.

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

732
00:32:10,940 --> 00:32:12,790
Així que no hi ha molt a veure encara.

733
00:32:12,790 --> 00:32:16,970
De fet, si em vaig al meu navegador, i
anar a search.html, això és tot el que és.

734
00:32:16,970 --> 00:32:17,720
Però saps què?

735
00:32:17,720 --> 00:32:19,000
Puc ser una mica més luxós.

736
00:32:19,000 --> 00:32:22,710
Vaig llegir en un llibre que hi ha
una etiqueta de capçalera anomenat h1.

737
00:32:22,710 --> 00:32:26,100
I jo vaig a seguir endavant i
utilitzar aquest h1 h1 s'obren i tanquen.

738
00:32:26,100 --> 00:32:27,220
Actualitzar la pàgina.

739
00:32:27,220 --> 00:32:29,600
I ara és més gran i més audaç,
no tan interessant,

740
00:32:29,600 --> 00:32:32,399
però almenys estructuralment
més interessant.

741
00:32:32,399 --> 00:32:33,940
Però ara permetin-me presentar a una altra etiqueta.

742
00:32:33,940 --> 00:32:36,500
Resulta que hi ha una etiqueta de formulari.

743
00:32:36,500 --> 00:32:38,400
I permetin-me tancar aquesta etiqueta.

744
00:32:38,400 --> 00:32:40,830
I resulta que hi ha
una etiqueta d'entrada que

745
00:32:40,830 --> 00:32:44,600
té un atribut anomenat tipus, que
és el tipus de dades del camp,

746
00:32:44,600 --> 00:32:45,200
si es vol.

747
00:32:45,200 --> 00:32:47,050
I serà de tipus text.

748
00:32:47,050 --> 00:32:52,200
I el seu valor es va
ser CS50 Cercar.

749
00:32:52,200 --> 00:32:53,850
Tancar la etiqueta.

750
00:32:53,850 --> 00:32:57,100
I no hi haurà cap noció de
obertura i tancament amb separar les etiquetes.

751
00:32:57,100 --> 00:33:00,300
>> Permetin-me tornar aquí i
veure el que està passant, torneu a carregar.

752
00:33:00,300 --> 00:33:01,380
Aconseguir interessant.

753
00:33:01,380 --> 00:33:02,950
Sembla que es tracta d'un camp de text.

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

755
00:33:04,080 --> 00:33:06,999
I en realitat, jo no volia
per posar un valor encara.

756
00:33:06,999 --> 00:33:10,040
Permetin-me tornar aquí i realment obtinc
desfer-se d'aquest valor perquè sigui senzill.

757
00:33:10,040 --> 00:33:12,939
En lloc d'un valor, el que volia
per donar aquesta cosa era un nom.

758
00:33:12,939 --> 00:33:15,230
I jo no sé el que és,
així que vaig a tornar a això.

759
00:33:15,230 --> 00:33:18,270
>> Però sota d'això, vull
fer input type = enviar.

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

761
00:33:19,840 --> 00:33:22,120
I aquest valor serà CS50 Cerca.

762
00:33:22,120 --> 00:33:24,850
I anem a veure per què
mogut el valor a aquest.

763
00:33:24,850 --> 00:33:28,900
Quan torno a carregar, em sembla que ara tenen
els inicis de la meva pròpia recerca

764
00:33:28,900 --> 00:33:30,820
motor, super horrible,
encara que, francament, és

765
00:33:30,820 --> 00:33:34,260
no un tir lluny del que
Pàgina per defecte de Google s'assembla.

766
00:33:34,260 --> 00:33:37,950
>> Si vaig aquí ara, jo puc escriure
gats i tant de bo feu clic a Cerca.

767
00:33:37,950 --> 00:33:40,380
Però no estic molt fet encara,
perquè no he implementat,

768
00:33:40,380 --> 00:33:41,045
òbviament, una base de dades.

769
00:33:41,045 --> 00:33:42,940
No he rastrejat la
Web de resultats de cerca.

770
00:33:42,940 --> 00:33:44,840
Així que he de subcontractar que Google.

771
00:33:44,840 --> 00:33:46,290
Llavors, ¿com ho faig?

772
00:33:46,290 --> 00:33:49,170
>> Bé, en primer lloc em
que hagi de afegir i acció

773
00:33:49,170 --> 00:33:58,460
atribuir a la meva forma d'etiqueta que
és http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
I sé que només per tenir
inferida per mirar de prop

775
00:34:01,180 --> 00:34:02,505
en la seva URL.

776
00:34:02,505 --> 00:34:03,380
I ara prendre una conjectura.

777
00:34:03,380 --> 00:34:09,090
Què li dec aquest camp de text, probablement,
ser cridat, sobre la base d'on venim

778
00:34:09,090 --> 00:34:09,754
des d'abans?

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

780
00:34:11,896 --> 00:34:13,290
>> AUDIÈNCIA :? Q.

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

782
00:34:14,370 --> 00:34:17,800
I en realitat no necessitem pregunta
marcar resulta, però q és de fet,

783
00:34:17,800 --> 00:34:20,489
q per a consulta probablement per
Per defecte, només perquè això és

784
00:34:20,489 --> 00:34:23,060
el que Larry i Sergey
se li va ocórrer fa anys.

785
00:34:23,060 --> 00:34:24,739
Així que ara m'ho dius a mi tornar a carregar aquesta pàgina.

786
00:34:24,739 --> 00:34:26,409
No es veu tan diferent.

787
00:34:26,409 --> 00:34:28,120
Però ara observin el que passa.

788
00:34:28,120 --> 00:34:32,360
>> Si escric en gats i clic
CS50 Buscar i deixar anar,

789
00:34:32,360 --> 00:34:35,770
noto si portar
distància a real Google.

790
00:34:35,770 --> 00:34:38,150
Ara, Google està sent una mica
molest en què estan

791
00:34:38,150 --> 00:34:41,877
afegint un paràmetre addicional,
si es vol, a l'adreça URL.

792
00:34:41,877 --> 00:34:43,960
Això és tot succés
de forma automàtica a la banda de Google.

793
00:34:43,960 --> 00:34:48,730
>> La part important és que em sembla
haver generat aquesta petició aquí.

794
00:34:48,730 --> 00:34:50,179
I, en efecte, això és el que passa.

795
00:34:50,179 --> 00:34:53,040
Quan vostè ha de HTML
són aquestes, aquest

796
00:34:53,040 --> 00:34:57,620
és una espècie de notació dels desenvolupadors web
per dir, seguir endavant i crear un formulari

797
00:34:57,620 --> 00:34:59,990
que quan es va presentar,
que va a anar a aquesta adreça URL.

798
00:34:59,990 --> 00:35:03,430
I quan la URL ha proporcionat
valors per a coses com q,

799
00:35:03,430 --> 00:35:05,440
no anar sol a aquesta adreça URL.

800
00:35:05,440 --> 00:35:08,210
En realitat, passi a la pregunta
marca i llavors q = gats.

801
00:35:08,210 --> 00:35:09,590

802
00:35:09,590 --> 00:35:13,060
Annexar el paràmetre, el
Paràmetre HTTP així.

803
00:35:13,060 --> 00:35:15,590
>> I només per ser super exacte,
el que està sent inferir aquí--

804
00:35:15,590 --> 00:35:18,130
però vaig a estar més explicit-- és
que el mètode que vull fer servir

805
00:35:18,130 --> 00:35:22,270
és aconseguir, en lloc d'alguna cosa com
ja, que finalment ens veurem.

806
00:35:22,270 --> 00:35:27,710
Així que en resum, només per la comprensió
HTML i l'ús d'algunes etiquetes bastant simples,

807
00:35:27,710 --> 00:35:30,610
ara podem començar a crear
nostre propi usuari final front

808
00:35:30,610 --> 00:35:32,850
interfície amb una recerca
motor darrere d'ell.

809
00:35:32,850 --> 00:35:34,800
>> Però això, és clar, és bastant horrible.

810
00:35:34,800 --> 00:35:37,259
Així que m'ho dius a mi en realitat obro
una mica millor versió.

811
00:35:37,259 --> 00:35:39,800
Aquest és el que jo vaig preparar a
endavant que sempre ha alguns comentaris.

812
00:35:39,800 --> 00:35:41,900
Però veuràs que jo
més o menys recreat.

813
00:35:41,900 --> 00:35:44,150
Així que això ja està disponible en línia.

814
00:35:44,150 --> 00:35:48,050
I va ser així que de forma preventiva
anar a https només per mantenir les coses simples.

815
00:35:48,050 --> 00:35:50,610
>> I ara anem a obrir un
següent iteració d'aquest.

816
00:35:50,610 --> 00:35:52,510
És la versió 1 en lloc de 0.

817
00:35:52,510 --> 00:35:55,315
El que salta a la vista com a poc
diferent en aquest exemple?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> AUDIÈNCIA: [inaudible].

820
00:36:00,440 --> 00:36:03,020
>> Sí, hi ha un centre d'alineació de text.

821
00:36:03,020 --> 00:36:04,590
Això és una mica estrany aquí.

822
00:36:04,590 --> 00:36:06,150
Però això és realment nou.

823
00:36:06,150 --> 00:36:07,800
I potser d'endevinar el que passarà.

824
00:36:07,800 --> 00:36:11,730
Si vaig a la meva navegador ara
i visitar recerca-1.html,

825
00:36:11,730 --> 00:36:13,090
és gairebé la mateixa cosa.

826
00:36:13,090 --> 00:36:15,705
Però és un pas més a prop de
sent una mica més bonic.

827
00:36:15,705 --> 00:36:19,150
Encara és lleig, però més bonic que
almenys tot el que ara està centrat.

828
00:36:19,150 --> 00:36:23,470
>> Així que resulta que el que estic fent servir
és un altre idioma per complet anomenat

829
00:36:23,470 --> 00:36:25,680
CSS, fulls d'estil en cascada.

830
00:36:25,680 --> 00:36:28,310
I CSS, francament, és una espècie
de, en la meva opinió personal,

831
00:36:28,310 --> 00:36:29,775
un llenguatge dissenyat atroçment.

832
00:36:29,775 --> 00:36:33,110
És molt molest per recordar
tots els diversos detalls.

833
00:36:33,110 --> 00:36:38,479
Però és el que estilitza la
a tot el web a tot el món avui en dia.

834
00:36:38,479 --> 00:36:39,270
He ofès algú.

835
00:36:39,270 --> 00:36:39,769
Bé.

836
00:36:39,769 --> 00:36:43,180
Així que anem a tornar aquí i veure
com en realitat estem fent servir això.

837
00:36:43,180 --> 00:36:45,940
I resulta que, almenys és
en realitat un llenguatge bastant simple.

838
00:36:45,940 --> 00:36:49,470
És només parells de valors clau, propietats
i valors, propietats i valors.

839
00:36:49,470 --> 00:36:52,080
De fet, aquí està un
aquesta propietat i el valor.

840
00:36:52,080 --> 00:36:55,890
>> Simplement usant l'estil
atribuir al meu cos de l'etiqueta

841
00:36:55,890 --> 00:37:00,360
i que li dóna un valor d'un
de còlon paraula i una altra paraula,

842
00:37:00,360 --> 00:37:03,730
o una propietat i un valor,
Puc afectar l'estètica

843
00:37:03,730 --> 00:37:06,210
de la pàgina web, no
necessàriament l'estructura, però,

844
00:37:06,210 --> 00:37:07,550
però l'estètica de la mateixa.

845
00:37:07,550 --> 00:37:10,960
I amb només buscar a Google voltant, m'adono
que les fulles CSS, d'estil en cascada,

846
00:37:10,960 --> 00:37:14,170
dóna suport a una propietat anomenada
text-align, el valor pot

847
00:37:14,170 --> 00:37:16,980
ser esquerra, dreta o centre, per exemple.

848
00:37:16,980 --> 00:37:19,990
>> Així que ara, quan torno a carregar
aquesta pàgina, el que em va fer arribar

849
00:37:19,990 --> 00:37:22,730
era una pàgina centrat,
però tot i així és bastant lleig.

850
00:37:22,730 --> 00:37:25,770
Seguirem endavant i obrir
fins a la versió 2 de Cerca.

851
00:37:25,770 --> 00:37:28,570
I ara noto que he fet una mica més.

852
00:37:28,570 --> 00:37:33,760
Cal notar que fins aquí dins del cap
etiqueta, no pot haver-hi més de títol.

853
00:37:33,760 --> 00:37:35,400
De fet, hi ha una etiqueta d'estil.

854
00:37:35,400 --> 00:37:38,630
I aquí és on s'acaba de crear una
poc CSS visió desordenada de vegades.

855
00:37:38,630 --> 00:37:41,971
>> Recordeu que em sembla que tenen alguna cosa
que estructuralment es veu molt diferent.

856
00:37:41,971 --> 00:37:44,095
Però aquí hi ha el nom de
l'etiqueta vull estilitzat.

857
00:37:44,095 --> 00:37:47,570
Aquí hi ha els nostres vells amics arrissat
aparells ortopèdics i claudàtor tancat.

858
00:37:47,570 --> 00:37:50,290
I llavors aquí és que
propietat i el seu valor.

859
00:37:50,290 --> 00:37:56,300
>> Si em carrega aquest arxiu, search2.html,
el resultat final és idèntic.

860
00:37:56,300 --> 00:37:59,300
Però és un pas cap a un millor disseny.

861
00:37:59,300 --> 00:38:04,560
Per factoritzar aquest CSS, tinc
no barrejada amb el meu HTML.

862
00:38:04,560 --> 00:38:07,560
I, de fet, com veurem, que podia
reutilitzar aquestes propietats i valors.

863
00:38:07,560 --> 00:38:10,420
Si jo volia fer rams de
parts de la meva pàgina web centrats,

864
00:38:10,420 --> 00:38:13,630
Jo no he d'escriure style = text-align
centre de tot el lloc.

865
00:38:13,630 --> 00:38:16,580
Puc posar en un sol lloc
Potser, com en la part superior.

866
00:38:16,580 --> 00:38:18,210
>> Però fins i tot això no és el millor disseny.

867
00:38:18,210 --> 00:38:21,720
De fet, una de les coses que vostè aprendrà
a mesura que passen més i més temps amb

868
00:38:21,720 --> 00:38:25,730
programació web és que com més es pot
modularitzar les coses i les coses de factors fora

869
00:38:25,730 --> 00:38:30,610
com arxius .h deixar-nos factor de matèria cap a fora,
helpers.c agradaria deixar que ens coses de factors fora

870
00:38:30,610 --> 00:38:31,880
Fa un parell de conjunts de processadors.

871
00:38:31,880 --> 00:38:34,200
De la mateixa manera, podríem
desitgi per aconseguir això.

872
00:38:34,200 --> 00:38:37,920
>> Així que notar en la versió
tres search.html tinc

873
00:38:37,920 --> 00:38:40,610
netejat el cap de
la pàgina i només cal posar

874
00:38:40,610 --> 00:38:43,320
en aquest, una etiqueta d'enllaç, que
Malgrat el nom,

875
00:38:43,320 --> 00:38:44,700
no et dóna un enllaç.

876
00:38:44,700 --> 00:38:49,150
Vincula a un altre arxiu a través de
1 href el valor en aquest cas,

877
00:38:49,150 --> 00:38:51,586
és la recerca-3.css

878
00:38:51,586 --> 00:38:52,960
Llavors m'adono que anem ràpidament.

879
00:38:52,960 --> 00:38:54,600
Però tot el que estic fent és una espècie
de moure les coses.

880
00:38:54,600 --> 00:38:55,760
Déjame obert recerca 3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Aquí està, res realment a ella.

883
00:38:58,530 --> 00:39:02,270
Acabo de copiar i enganxar en un nou
arxiu, igual que ens factorizada coses fora

884
00:39:02,270 --> 00:39:03,509
en altres arxius abans.

885
00:39:03,509 --> 00:39:05,300
I el result--
completament underwhelming--

886
00:39:05,300 --> 00:39:06,730
serà exactament el mateix.

887
00:39:06,730 --> 00:39:10,490
Però ens estem movent toward-- no, no ho és.

888
00:39:10,490 --> 00:39:11,930
Oh, jo sé per què.

889
00:39:11,930 --> 00:39:13,790
>> Per tant, sembla ser un error.

890
00:39:13,790 --> 00:39:15,010
I és en algun sentit.

891
00:39:15,010 --> 00:39:17,730
Però permetin-me obrir el meu fitxa Xarxa.

892
00:39:17,730 --> 00:39:19,660
Permetin-me tornar a carregar la pàgina.

893
00:39:19,660 --> 00:39:23,315
Ah, per què no s'està aplicant la CSS?

894
00:39:23,315 --> 00:39:26,920
Bé, l'arxiu CSS, de la mateixa manera, té
per a ser llegible món, per dir-ho.

895
00:39:26,920 --> 00:39:28,440
I també està prohibit.

896
00:39:28,440 --> 00:39:33,760
Així que m'ho dius a mi fer un chmod a + r
d'estrella dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
estem CSS punt és només el
extensió d'arxiu per als arxius CSS.

898
00:39:37,067 --> 00:39:38,900
Ara vaig a tornar a
meu navegador i recàrrega.

899
00:39:38,900 --> 00:39:40,910
Bé, una mica millor.

900
00:39:40,910 --> 00:39:42,282
>> Ara m'ho dius a mi fer una última cosa.

901
00:39:42,282 --> 00:39:42,990
A la recerca-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Tinc una versió que m'acaba d'ocórrer
era manera més freda, encara que de forma més

904
00:39:48,220 --> 00:39:48,980
complicat.

905
00:39:48,980 --> 00:39:50,690
Vegem el resultat en primer lloc.

906
00:39:50,690 --> 00:39:52,290
Tancar aquesta per donar-nos més espai.

907
00:39:52,290 --> 00:39:54,275
Canviar aquesta a la recerca-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> I ara un munt de coses estan trencades.

910
00:39:57,200 --> 00:39:59,910
Vaig a tornar
en el meu directori aquí.

911
00:39:59,910 --> 00:40:04,190
I ara només faré
1 chmod de a + r en un file--

912
00:40:04,190 --> 00:40:07,450
perquè sé que exists-- diu
logo.gif, que és una imatge.

913
00:40:07,450 --> 00:40:08,590
I ara recarregar.

914
00:40:08,590 --> 00:40:11,040
I wow-- així que ara estic
molt a prop, francament,

915
00:40:11,040 --> 00:40:15,860
de la mateixa manera que la versió 1999 de Google, i
francament, la versió 2014 de Google,

916
00:40:15,860 --> 00:40:16,360
Oi?

917
00:40:16,360 --> 00:40:21,920
>> Així que és ara anar al seu lloc web,
en última instància, si la recerca per als gats.

918
00:40:21,920 --> 00:40:23,900
I de fet ho és.

919
00:40:23,900 --> 00:40:26,410
Però ho vaig fer de manera diferent
en aquesta versió 4?

920
00:40:26,410 --> 00:40:28,020
Així que no anem a insistir-hi gaire aquí.

921
00:40:28,020 --> 00:40:30,100
Vostè veurà això en un problema
establir 07:00 eventualment.

922
00:40:30,100 --> 00:40:31,350
Però noto que vaig fer un parell de coses.

923
00:40:31,350 --> 00:40:33,690
>> Jo vaig presentar un div
etiqueta, que és la divisió,

924
00:40:33,690 --> 00:40:35,450
similar a la de una etiqueta de paràgraf.

925
00:40:35,450 --> 00:40:38,220
Però una divisió és igual, aquí està
una regió rectangular invisible

926
00:40:38,220 --> 00:40:39,150
de la pantalla.

927
00:40:39,150 --> 00:40:41,680
Anem a donar-li un únic
identificador, un peu de pàgina, només

928
00:40:41,680 --> 00:40:44,700
perquè puguem parlar de
en el nostre HTML en un altre lloc.

929
00:40:44,700 --> 00:40:47,952
Hi ha un altre div de la pàgina
el ID serà contingut.

930
00:40:47,952 --> 00:40:49,160
És el contingut de la pàgina.

931
00:40:49,160 --> 00:40:51,090
I fins aquí és la capçalera de la pàgina.

932
00:40:51,090 --> 00:40:54,960
>> En altres paraules, no tinc
essencialment en HTML sóc mentalment

933
00:40:54,960 --> 00:40:57,700
visualització d'aquesta pàgina web com
tres components, una capçalera

934
00:40:57,700 --> 00:41:01,200
fins aquí amb aquest rectangle invisible,
el contingut en el medi, i després

935
00:41:01,200 --> 00:41:04,800
el peu de pàgina a baix, fins i tot
encara que no veiem aquestes coses.

936
00:41:04,800 --> 00:41:09,940
Perquè vull en el meu cap de
La pàgina d'aquí, o en un arxiu .css,

937
00:41:09,940 --> 00:41:11,460
Puc fer servir aquesta sintaxi.

938
00:41:11,460 --> 00:41:13,070
>> Capçalera no és una etiqueta.

939
00:41:13,070 --> 00:41:17,060
És una identificació perquè es posi
que fent #header,

940
00:41:17,060 --> 00:41:20,840
Ara puc aplicar un o més
propietats a la capçalera.

941
00:41:20,840 --> 00:41:24,130
Jo puc fer el mateix contingut,
el mateix per al contingut aquí.

942
00:41:24,130 --> 00:41:27,230
>> Així, per exemple, al peu de pàgina, avís
totes aquestes propietats que estic afegint.

943
00:41:27,230 --> 00:41:30,660
I sé que hi ha només per la lectura
amunt a la documentació per al CSS.

944
00:41:30,660 --> 00:41:33,450
Mida de la font serà smaller--
pel que alguns mida de la font relativa.

945
00:41:33,450 --> 00:41:34,741
El pes serà audaços.

946
00:41:34,741 --> 00:41:37,340
Margin-- quants píxels
voltant it-- és de 20 píxels.

947
00:41:37,340 --> 00:41:38,590
I estarà centrat.

948
00:41:38,590 --> 00:41:40,256
>> Però en aquest moment, la pàgina són aquestes.

949
00:41:40,256 --> 00:41:42,840
Si no estic satisfet amb
la meva còpia allà mateix,

950
00:41:42,840 --> 00:41:46,560
Jo podria fer alguna cosa com color vermell.

951
00:41:46,560 --> 00:41:50,570
I llavors puc guardar aquest, torneu a carregar,
i ara he stylized el peu de pàgina.

952
00:41:50,570 --> 00:41:54,130
Així que això és només insinuant el poder
del que pot fer en una pàgina web

953
00:41:54,130 --> 00:41:55,510
de canviar les coses.

954
00:41:55,510 --> 00:41:59,080
>> I fins i tot més fred que això, si vostè vol
a furgar amb els llocs web reals,

955
00:41:59,080 --> 00:42:00,810
no es pot canviar permanentment.

956
00:42:00,810 --> 00:42:03,640
Però si obro
Inspector de Chrome de nou

957
00:42:03,640 --> 00:42:07,610
i jo no vaig a l'esquerra
aquí, el que mostra el codi HTML de Facebook,

958
00:42:07,610 --> 00:42:11,380
però mostra a la dreta
banda tota la seva CSS,

959
00:42:11,380 --> 00:42:13,789
vostè pot i
canviar les coses sobre la marxa.

960
00:42:13,789 --> 00:42:15,080
Així que me n'aniré endavant i fer això.

961
00:42:15,080 --> 00:42:18,670
>> Déjame anar per davant i control
feu clic en aquesta paraula a l'atzar aquí,

962
00:42:18,670 --> 00:42:21,230
signar, i feu clic a inspeccionar Element.

963
00:42:21,230 --> 00:42:25,130
Chrome salta molt convenientment a
l'etiqueta h1 que Facebook està fent servir.

964
00:42:25,130 --> 00:42:27,290
I notar aquí Facebook
té tipus de mandrosament

965
00:42:27,290 --> 00:42:29,960
codificat mida de la font com una propietat aquí.

966
00:42:29,960 --> 00:42:33,530
>> Així que la cosa fresca, tot i que és
que si jo realment vaig aquí

967
00:42:33,530 --> 00:42:39,560
i diuen, oh, Facebook, no m'agrada que
64 píxels, que ara poden canviar de Facebook.

968
00:42:39,560 --> 00:42:42,590
Per descomptat, només estem canviant
per a mi personalment en el moment.

969
00:42:42,590 --> 00:42:45,150
Però això és només un altre
eina a la nostra caixa d'eines

970
00:42:45,150 --> 00:42:48,360
que permetrà a nosaltres per a modificar
i esbrinar i també diagnosticar

971
00:42:48,360 --> 00:42:49,729
assumptes en les nostres pròpies pàgines web.

972
00:42:49,729 --> 00:42:52,270
I de la mateixa manera podríem anar més
aquí, que és la mateixa cosa.

973
00:42:52,270 --> 00:42:55,830
Si realment voleu aconseguir la suposició, jo
dir, ara que realment pot mutar la pàgina

974
00:42:55,830 --> 00:42:57,380
i fer coses boges.

975
00:42:57,380 --> 00:42:59,870
>> Per què és tot això útil?

976
00:42:59,870 --> 00:43:02,330
Doncs bé, en última instància, estem
voldrà ser

977
00:43:02,330 --> 00:43:07,110
capaç de crear pàgines web que
són impulsats pels nostres propis fins d'esquena,

978
00:43:07,110 --> 00:43:10,520
no només per Google i
l'externalització de la final de tornada allà.

979
00:43:10,520 --> 00:43:13,510
En realitat volem que el
valor, per exemple,

980
00:43:13,510 --> 00:43:18,830
de l'acció del nostre motor de cerca
atribuir a anar no a una altra persona,

981
00:43:18,830 --> 00:43:24,270
sinó a alguna cosa com search.php,
on search.php està en el nostre propi servidor,

982
00:43:24,270 --> 00:43:25,670
no en una altra persona.

983
00:43:25,670 --> 00:43:30,316
>> I així, per arribar-hi, que en realitat
que hagi d'introduir un nou llenguatge.

984
00:43:30,316 --> 00:43:33,190
Així que ja hem vist en un nou
idioma aquí, o dos realment, HTML

985
00:43:33,190 --> 00:43:33,700
i CSS.

986
00:43:33,700 --> 00:43:36,330
Però el que realment són només
idiomes estructurals i estètiques.

987
00:43:36,330 --> 00:43:38,360
No estan programant
idiomes per se.

988
00:43:38,360 --> 00:43:41,160
I això és el més formal,
temps que passarem sobre ells.

989
00:43:41,160 --> 00:43:44,910
Com que anem a començar ara
per a la transició a PHP.

990
00:43:44,910 --> 00:43:48,160
>> Així que PHP és un real
llenguatge de programació.

991
00:43:48,160 --> 00:43:50,750
És un llenguatge de scripting
en el sentit que és

992
00:43:50,750 --> 00:43:52,855
destinat a ser un pes més lleuger
que alguna cosa com C.

993
00:43:52,855 --> 00:43:56,082
I és un llenguatge interpretat,
el que significa que no està compilat.

994
00:43:56,082 --> 00:43:58,790
Així que en poques paraules, què significava
quan fem servir un llenguatge com C

995
00:43:58,790 --> 00:44:00,290
i vam haver de compilar?

996
00:44:00,290 --> 00:44:02,120
Què significa per a
compilar el codi font en C?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
AUDIÈNCIA: [inaudible].

999
00:44:04,780 --> 00:44:06,184
DAVID J Malan: Digui-ho una altra vegada?

1000
00:44:06,184 --> 00:44:07,100
AUDIÈNCIA: [inaudible].

1001
00:44:07,100 --> 00:44:07,962

1002
00:44:07,962 --> 00:44:08,920
DAVID J Malan: Perfecte.

1003
00:44:08,920 --> 00:44:10,180
Es converteix en binari.

1004
00:44:10,180 --> 00:44:14,200
Es converteix en zeros i uns
a partir del codi font Anglès-com a real.

1005
00:44:14,200 --> 00:44:16,424
I llavors podem realment
executar aquests zeros i uns

1006
00:44:16,424 --> 00:44:18,840
fent-los passar a través de la
CPU fent doble clic a una icona

1007
00:44:18,840 --> 00:44:19,980
o executar una ordre.

1008
00:44:19,980 --> 00:44:23,770
>> PHP i Python i Ruby
i Perl i JavaScript

1009
00:44:23,770 --> 00:44:26,250
i raïms d'un altre
llengües s'interpreten

1010
00:44:26,250 --> 00:44:29,290
llengües, el que és dir
no compila ells.

1011
00:44:29,290 --> 00:44:34,220
Més aviat, els dónes de menjar com a entrada a
un programa que es diu un intèrpret.

1012
00:44:34,220 --> 00:44:36,640
I aquest intèrpret,
que algú més va escriure,

1013
00:44:36,640 --> 00:44:40,930
llegeix el codi font de dalt a baix,
esquerra a dreta i només interpreta

1014
00:44:40,930 --> 00:44:43,000
aquestes línies i fa el que diu.

1015
00:44:43,000 --> 00:44:45,360
>> Així que si et trobes amb un
línia que diu d'impressió,

1016
00:44:45,360 --> 00:44:48,660
no converteix necessàriament impressió
als zeros i uns corresponents.

1017
00:44:48,660 --> 00:44:51,910
Només té aquest intèrpret com
si un estat gran que diu:

1018
00:44:51,910 --> 00:44:56,110
si les instruccions del programador és
impressió, i després fer el següent.

1019
00:44:56,110 --> 00:44:58,170
Per tant, l'interpreta només
per tipus de raonament

1020
00:44:58,170 --> 00:44:59,800
a través del que vostè està dient que faci.

1021
00:44:59,800 --> 00:45:01,320
>> I PHP és un d'aquests idiomes.

1022
00:45:01,320 --> 00:45:05,310
I fa anys PHP va ser dissenyat
precisament per a la programació web.

1023
00:45:05,310 --> 00:45:08,160
I va ser inicialment un
llenguatge desordenat molt descuidat.

1024
00:45:08,160 --> 00:45:10,940
I, en efecte, hi ha una enorme
quantitat de mal codi PHP per aquí.

1025
00:45:10,940 --> 00:45:13,520
Però la pròpia llengua
ha madurat amb els anys,

1026
00:45:13,520 --> 00:45:16,200
tant és així que ara és
en realitat un meravellós pas següent

1027
00:45:16,200 --> 00:45:19,970
pedagògicament de C perquè és
tan condemnadament familiar per a tot

1028
00:45:19,970 --> 00:45:22,380
vostè acaba de veure en les últimes setmanes.

1029
00:45:22,380 --> 00:45:25,724
>> L'única diferència inicial ja veurem
és que no hi ha funció principal ja.

1030
00:45:25,724 --> 00:45:28,890
En iniciar l'escriptura de codi, és només
aconseguirà executat tant i fa,

1031
00:45:28,890 --> 00:45:30,220
com veurem en un moment.

1032
00:45:30,220 --> 00:45:33,320
Mentrestant, això és el que un
la variable es veu com en PHP.

1033
00:45:33,320 --> 00:45:35,840
És una mica diferent,
però només tot just.

1034
00:45:35,840 --> 00:45:39,380
>> En PHP, no hi ha tipatge fort.

1035
00:45:39,380 --> 00:45:41,430
No hi ha setmana escrivint,
que només vol dir que hi ha

1036
00:45:41,430 --> 00:45:44,030
són els tipus de dades, com les cadenes
i els números i altres coses.

1037
00:45:44,030 --> 00:45:47,030
Però no et molestis especificant
el que són més.

1038
00:45:47,030 --> 00:45:48,980
PHP s'ho imagina per a vostè.

1039
00:45:48,980 --> 00:45:52,030
El signe del dòlar és només una decisió
que les persones fan de PHP anys

1040
00:45:52,030 --> 00:45:54,890
fa de tal manera que qualsevol variable en PHP
només comença amb un signe de dòlar.

1041
00:45:54,890 --> 00:45:58,130
És en realitat una mica útil, ja que
que salta a la vista una mica més.

1042
00:45:58,130 --> 00:46:01,315
>> Però després d'això, aquest
és una condició en PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Què és diferent en comparació amb C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Truc pregunta-- res,
que és realment agradable.

1047
00:46:09,600 --> 00:46:12,140
Expressions booleanes en PHP-- la mateixa.

1048
00:46:12,140 --> 00:46:19,354
Expressions booleanes amb i davant
o, els interruptors, els bucles, els bucles, loops-- Acceptar,

1049
00:46:19,354 --> 00:46:20,270
aquest és diferent.

1050
00:46:20,270 --> 00:46:22,660
>> Així que resulta que hi ha un
parell d'altres funcions en PHP.

1051
00:46:22,660 --> 00:46:25,243
Un d'ells és en realitat aquest,
que és meravellosament còmoda.

1052
00:46:25,243 --> 00:46:29,250
Si $ nombres és una matriu que tens
declarat prèviament en un programa,

1053
00:46:29,250 --> 00:46:33,350
vostè té aquesta fantasia per a cada construcció
que en lloc de fer tot això

1054
00:46:33,350 --> 00:46:37,020
em molesta és igual a 0, I és
menys que això, [? I ++?],

1055
00:46:37,020 --> 00:46:40,320
per a cada un dels números com el nombre, on cada
d'aquests valors de signe de dòlar és simplement

1056
00:46:40,320 --> 00:46:42,790
una variable, i el segon
vostè pot pensar com jo

1057
00:46:42,790 --> 00:46:44,290
Se li podria dir el que vulguis.

1058
00:46:44,290 --> 00:46:45,770
El vaig trucar nombre.

1059
00:46:45,770 --> 00:46:48,825
Això va a iterar sobre
la matriu flama nombres.

1060
00:46:48,825 --> 00:46:51,200
I en cada iteració, és
va a actualitzar de forma automàtica

1061
00:46:51,200 --> 00:46:54,340
perquè el nombre de la mostra de dòlar
variable de manera que vostè constantment

1062
00:46:54,340 --> 00:46:58,210
tenir accés a la variable que desitja
sense haver de fer cap claudàtor

1063
00:46:58,210 --> 00:47:00,980
la notació o la indexació en una matriu.

1064
00:47:00,980 --> 00:47:04,950
>> Més enllà d'això, fins i tot tenim coses com
matrius, que semblen gairebé el mateix,

1065
00:47:04,950 --> 00:47:08,210
excepte que és molt comú, com veurem
veure, tant en PHP i JavaScript

1066
00:47:08,210 --> 00:47:10,750
de comprovar la validesa inicialitzar una matriu
utilitzant claudàtors.

1067
00:47:10,750 --> 00:47:12,040
C utilitza claus.

1068
00:47:12,040 --> 00:47:15,330
Així que és lleugerament diferent, encara que
nosaltres no ho fem servir molt aquest truc.

1069
00:47:15,330 --> 00:47:20,090
>> Però fins i tot amb més força,
PHP té matrius associatives,

1070
00:47:20,090 --> 00:47:23,100
que és una forma elegant
de dir les taules hash.

1071
00:47:23,100 --> 00:47:31,610
De fet, si vostè vol declarar un hash
taula en PHP, a diferència d'en quants C--

1072
00:47:31,610 --> 00:47:34,775
línies de codi es triga a
realment implementar una taula hash en C?

1073
00:47:34,775 --> 00:47:38,310
O el nombre de línies de codi és
prendre per implementar una taula hash en C?

1074
00:47:38,310 --> 00:47:39,820
Així que és probable que sigui molt, oi?

1075
00:47:39,820 --> 00:47:41,680
És unes poques dotzenes, potser 100 o 200.

1076
00:47:41,680 --> 00:47:42,980
És trivial.

1077
00:47:42,980 --> 00:47:45,420
O es tracta de ser, com
aviat veuràs, no trivial

1078
00:47:45,420 --> 00:47:48,080
per implementar una taula hash
[Inaudible] i també una oportunitat.

1079
00:47:48,080 --> 00:47:50,580
Però en PHP-- i francament,
probablement no hauria de dir això

1080
00:47:50,580 --> 00:47:53,630
fins Monday-- en PHP, si
vols una taula, fet.

1081
00:47:53,630 --> 00:47:56,431
Això és un hash table-- així
amb una línia de codi.

1082
00:47:56,431 --> 00:47:56,930
I

1083
00:47:56,930 --> 00:47:58,810
>> Una gran quantitat d'idiomes que fer.

1084
00:47:58,810 --> 00:48:00,190
Diverteix-te amb pset 05:00.

1085
00:48:00,190 --> 00:48:01,980
Així que una gran quantitat d'idiomes fer això.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Et donen aquestes abstraccions
que altres persones, altres programadors,

1088
00:48:06,140 --> 00:48:09,870
han creat per a vostè de manera que
vostè pot estar aturat sobre les seves espatlles

1089
00:48:09,870 --> 00:48:13,290
i començar a utilitzar les idees que són super
convincent, com taules i arbres de hash

1090
00:48:13,290 --> 00:48:14,140
i tracta.

1091
00:48:14,140 --> 00:48:17,790
Però vostè no té necessàriament que
posar en pràctica aquestes coses per tu mateix.

1092
00:48:17,790 --> 00:48:20,850
>> I així, en última instància, el que
farem servir PHP per

1093
00:48:20,850 --> 00:48:23,580
està potencialment escriure programes
de la crida de línia d'ordres.

1094
00:48:23,580 --> 00:48:26,600
Podríem recrear cada programa
hem escrit aquest semestre fins al moment,

1095
00:48:26,600 --> 00:48:30,410
excepte potser Breakout que utilitza SPL,
que és específic a C en el moment.

1096
00:48:30,410 --> 00:48:33,100
Però tots els altres problemes configurat,
sens dubte Mario i César

1097
00:48:33,100 --> 00:48:35,300
i Vigenère i
[? Esquerda?] I des d'ara, ens

1098
00:48:35,300 --> 00:48:39,520
podria tornar a posar en pràctica en PHP,
probablement una mica més fàcilment.

1099
00:48:39,520 --> 00:48:43,050
>> Però el que estem en última instància, va
utilitzar PHP per a programació web és.

1100
00:48:43,050 --> 00:48:46,420
I anem a introduir proper
setmana un model mental, un paradigma anomenat

1101
00:48:46,420 --> 00:48:49,610
MVC, controlador de vista de model,
que si has fet la programació

1102
00:48:49,610 --> 00:48:51,610
abans en Python o
Rubí o en un altre lloc, vostè

1103
00:48:51,610 --> 00:48:54,112
podria saber d'aquest equip amb
Rails i Django i similars.

1104
00:48:54,112 --> 00:48:55,820
Però si sou nou en
això també, vostè veurà

1105
00:48:55,820 --> 00:48:59,652
que aquest és en realitat una molt natural
extensió de la factorització

1106
00:48:59,652 --> 00:49:01,360
i el tipus de disseny
de codi que hem

1107
00:49:01,360 --> 00:49:04,670
estat fent en C. Anem a ara
aplicar algunes d'aquestes lliçons a PHP

1108
00:49:04,670 --> 00:49:07,190
per la qual cosa, en última instància, som
la implementació dels nostres propis llocs web.

1109
00:49:07,190 --> 00:49:09,080
I si vostè és una espècie de
hipnotitzat o sorprès

1110
00:49:09,080 --> 00:49:10,954
que farem
tot el tan ràpidament,

1111
00:49:10,954 --> 00:49:13,410
adonar-se que gairebé tots els
semestre, gairebé el 90%

1112
00:49:13,410 --> 00:49:16,560
d'estudiants CS50, inclosos els
que mai han programat abans,

1113
00:49:16,560 --> 00:49:20,329
acabar fent projectes finals que
es basen en la programació web.

1114
00:49:20,329 --> 00:49:23,120
I pel que veurà que els retorns
són alts en les pròximes setmanes.

1115
00:49:23,120 --> 00:49:24,965
Així que anem a veure a continuació, dilluns.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> ALTAVEU 1: I ara, Deep
Pensaments d'Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Les taules hash.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [El]

1122
00:49:38,402 --> 00:49:38,902