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

2
00:00:01,390 --> 00:00:04,890
>> [Música tocando]

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

4
00:00:10,955 --> 00:00:12,580
DAVID J Malan: Todo ben, Benvido de volta.

5
00:00:12,580 --> 00:00:13,600
Este é CS50.

6
00:00:13,600 --> 00:00:15,540
Este é o fin de semana de sete.

7
00:00:15,540 --> 00:00:18,180
E é o final deste limpador
caza do conxunto de problemas de catro

8
00:00:18,180 --> 00:00:19,220
que pode lembrar.

9
00:00:19,220 --> 00:00:21,650
Tras recuperarse de todo
estes JPEGs de persoal,

10
00:00:21,650 --> 00:00:24,820
foi desafiado, se o desexa,
para fotografía-se co maior número

11
00:00:24,820 --> 00:00:25,981
daquelas persoas que poida.

12
00:00:25,981 --> 00:00:28,480
Temos unha morea de submissões
ao longo das últimas semanas,

13
00:00:28,480 --> 00:00:32,980
de feito, algunhas dereito bastante antes do mediodía
hoxe, algúns dos cales son aqueles aquí,

14
00:00:32,980 --> 00:00:37,670
pego aquí em-- parece como-- Annenberg
Salón en horario de oficina, un aquí

15
00:00:37,670 --> 00:00:39,530
en Lowell Casa con Nick.

16
00:00:39,530 --> 00:00:41,750
Velaquí Ramón ser pego no teléfono.

17
00:00:41,750 --> 00:00:43,870
Isto foi nunha CS50 xantar.

18
00:00:43,870 --> 00:00:46,840
Este foi Jason Skyping con
un compañeiro de clase máis creativo,

19
00:00:46,840 --> 00:00:48,280
que lle chamou desta forma.

20
00:00:48,280 --> 00:00:49,690
Non sabemos o que iso era.

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

22
00:00:51,940 --> 00:00:54,570
>> DAVID J Malan: Pero
que paga a pena un gigabyte.

23
00:00:54,570 --> 00:00:56,960
Aquí é Chang, que
literalmente, foi para fóra do escenario

24
00:00:56,960 --> 00:01:00,480
para evitar ser fotografado unha
día, pero foi finalmente capturado.

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

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

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

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

29
00:01:05,090 --> 00:01:07,670
E aquí é Alison abaixo polos campos.

30
00:01:07,670 --> 00:01:11,840
E Zamyla mesmo se atopou
nunha competición de salón.

31
00:01:11,840 --> 00:01:14,100
Entón imos pasar por
estas fotos, descubrir

32
00:01:14,100 --> 00:01:16,690
que presentou o maior
como mínimo, e recompensa

33
00:01:16,690 --> 00:01:20,662
un premio fabuloso, como
prometido na spec.

34
00:01:20,662 --> 00:01:23,120
E nós tamén imos seguir uns
o espazo que foi implicado.

35
00:01:23,120 --> 00:01:26,860
>> Unha parella de announcements-- tan xantar
é, de novo, este venres 13:15.

36
00:01:26,860 --> 00:01:30,420
Se desexa unirse a nós,
De RSVP en que dirección aquí.

37
00:01:30,420 --> 00:01:33,730
Jason aparece de novo aquí desde unha
das seccións de un par de anos

38
00:01:33,730 --> 00:01:35,510
volta, o que pasou
caer no Halloween.

39
00:01:35,510 --> 00:01:38,950
E, de feito, el se vestía como un
cabaza ese mesmo ano.

40
00:01:38,950 --> 00:01:42,700
Se asistir a esta sección
da súa sección desde 2011

41
00:01:42,700 --> 00:01:46,480
oito, se está curioso,
en CS50.tv, creo

42
00:01:46,480 --> 00:01:49,730
este foi o ano no que
súa bomba de aire estaba funcionando.

43
00:01:49,730 --> 00:01:52,490
>> Se, a continuación, asistir a
sección semellante en 2012,

44
00:01:52,490 --> 00:01:55,620
verás esta Jason moi baleirado,
xa que o feito xa non funcionaba,

45
00:01:55,620 --> 00:01:58,060
que é só para dicir
este venres, se

46
00:01:58,060 --> 00:02:02,720
quere esculpir unha cabaza con Daven
e Gabe e outros, RSVP para as cabezas

47
00:02:02,720 --> 00:02:04,480
no enderezo cs50.harvard.edu.

48
00:02:04,480 --> 00:02:06,200
Promete ser unha gran diversión.

49
00:02:06,200 --> 00:02:08,660
Daven, din, ten esculpido
cabazas toda a súa vida.

50
00:02:08,660 --> 00:02:11,930
Gabriel de Brasil nunca
esculpida unha cabaza para o Halloween.

51
00:02:11,930 --> 00:02:14,700
Entón, sexa alí con eles como aprende.

52
00:02:14,700 --> 00:02:16,830
>> Seminarios, meanwhile--
así que vai aprender pronto

53
00:02:16,830 --> 00:02:20,650
sobre o que as nosas expectativas son para
o proxecto final, que, esencialmente,

54
00:02:20,650 --> 00:02:23,150
vai se resumen a
deseño e implementación de

55
00:02:23,150 --> 00:02:26,440
máis calquera proxecto de interese para
ti, aínda suxeito á aprobación

56
00:02:26,440 --> 00:02:28,490
e orientación do seu compañeiro de ensino.

57
00:02:28,490 --> 00:02:32,110
Preto do fin do
semestre, nós introducimos un número

58
00:02:32,110 --> 00:02:35,610
de seminarios, que son clases opcionais
liderada polos compañeiros de ensino e Harvard

59
00:02:35,610 --> 00:02:38,570
persoal, os amigos do curso en todo
campus, sobre varios temas que

60
00:02:38,570 --> 00:02:41,470
son tanxenciais á
Syllabus do curso subxacente

61
00:02:41,470 --> 00:02:45,590
pero aínda así o caso, divertido, e
diferente para potenciais proxectos finais.

62
00:02:45,590 --> 00:02:49,530
>> Por exemplo, en primeiro lugar, se quere
para rexistrar, siga para a URL alí.

63
00:02:49,530 --> 00:02:53,010
E esta é a programación para
só seminarios deste ano.

64
00:02:53,010 --> 00:02:56,060
Pero entendemos que temos decenas de
seminarios de anos pasados, os cales

65
00:02:56,060 --> 00:02:59,774
están ligados no menú Seminarios
opción do sitio web do curso.

66
00:02:59,774 --> 00:03:02,190
Entón, se está a pensar en
indo alén da súa zona de confort

67
00:03:02,190 --> 00:03:05,060
ou incorporarse algunhas novas habilidades,
por exemplo, a programación iPhone

68
00:03:05,060 --> 00:03:08,100
aplicacións con Swift, unha nova linguaxe
Apple ou Objective-C

69
00:03:08,100 --> 00:03:11,230
ou Android Apps ou programación [? cue?]
lámpadas, ou calquera dos temas

70
00:03:11,230 --> 00:03:15,490
aquí enriba e máis, debido verificación
a páxina de inscrición.

71
00:03:15,490 --> 00:03:19,730
>> Entón comezamos e concluído en
Luns con mirando HTTP.

72
00:03:19,730 --> 00:03:22,675
Entón HTTP refresher-- rápida,
Hipertexto Transfer Protocol.

73
00:03:22,675 --> 00:03:24,045
Pero o que iso realmente significa?

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

75
00:03:26,805 --> 00:03:27,930
O que isto realmente significa?

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

77
00:03:30,665 --> 00:03:31,290
É que unha man?

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

79
00:03:33,074 --> 00:03:34,740
Sei que está só coçando a cabeza.

80
00:03:34,740 --> 00:03:36,400
Pero quere propoñer o que é HTTP?

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

82
00:03:37,792 --> 00:03:40,576
>> Audiencia: Como os computadores
comunicarse con [inaudível].

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

84
00:03:41,517 --> 00:03:43,100
DAVID J Malan: perdín a última parte.

85
00:03:43,100 --> 00:03:45,774
Como os computadores comunícanse com--

86
00:03:45,774 --> 00:03:47,325
>> Servidores de Internet: audiencia.

87
00:03:47,325 --> 00:03:50,450
DAVID J Malan: boa-- con internet
servidores e, especialmente, servidores web.

88
00:03:50,450 --> 00:03:53,533
Porque lembre, hai unha morea de
servizos en Internet, algúns dos cales

89
00:03:53,533 --> 00:03:57,349
usa probablemente diariamente entre chat
e de mensaxes, chat e web, correo electrónico,

90
00:03:57,349 --> 00:03:57,890
e semellantes.

91
00:03:57,890 --> 00:04:00,900
E HTTP é só o
protocolo que navegadores web

92
00:04:00,900 --> 00:04:03,750
falar ao comunicarse con
servidores web, e viceversa.

93
00:04:03,750 --> 00:04:05,580
E o analóxico en
mundo humano podería ser,

94
00:04:05,580 --> 00:04:08,730
Eu estendo a miña man para usar algúns
outro ser humano do e el ou ela

95
00:04:08,730 --> 00:04:11,970
recoñece, ampliando
a súa man tamén.

96
00:04:11,970 --> 00:04:13,970
Entón, iso é só un protocolo,
un conxunto de convencións.

97
00:04:13,970 --> 00:04:15,630
>> E o que de feito son esas convencións?

98
00:04:15,630 --> 00:04:18,640
Ben, iso só se reduce a
envío de mensaxes e cara atrás,

99
00:04:18,640 --> 00:04:19,770
como se describe aquí.

100
00:04:19,770 --> 00:04:22,520
E hai un par de formas en
cal pode enviar estas mensaxes.

101
00:04:22,520 --> 00:04:24,360
E quizais o máis
común é coñecido como get.

102
00:04:24,360 --> 00:04:26,510
E nós imos ver un contraste
para iso antes de tempo.

103
00:04:26,510 --> 00:04:30,010
>> Pero unha proposta get dende un navegador
ao servidor só se parece con isto.

104
00:04:30,010 --> 00:04:32,960
É unha chea de texto que pon
dentro dun sobre virtual.

105
00:04:32,960 --> 00:04:35,854
Na parte exterior do sobre que
ir algunhas pezas de información.

106
00:04:35,854 --> 00:04:37,770
Que ten que ir para a
sobre, por así dicir,

107
00:04:37,770 --> 00:04:41,820
a fin de obter unha proposta como
iso de min para un servidor web?

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

109
00:04:42,320 --> 00:04:43,270
>> Audiencia: O seu enderezo IP.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J Malan: O meu enderezo IP
no campo de, por así dicir,

111
00:04:45,890 --> 00:04:49,490
e, por suposto, o
enderezo IP do destinatario.

112
00:04:49,490 --> 00:04:52,710
Pero, no caso dun paquete de tea,
necesitamos un pouco máis de detalles

113
00:04:52,710 --> 00:04:55,254
Non é suficiente só para
enviar un sobre para un servidor,

114
00:04:55,254 --> 00:04:57,670
porque ese servidor pode ser
escoita a diferentes tipos

115
00:04:57,670 --> 00:04:59,180
do tráfico de Internet.

116
00:04:59,180 --> 00:05:01,370
Entón, o que máis necesitamos
ademais de IP do destinatario?

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

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

119
00:05:03,222 --> 00:05:04,241
>> Audiencia: É 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
>> Audiencia: Enderezo.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J Malan: Enderezo,
ou porta, como se chama.

124
00:05:09,340 --> 00:05:11,010
Preto, pero un número de porto TCP.

125
00:05:11,010 --> 00:05:12,220
E hai unha morea delas.

126
00:05:12,220 --> 00:05:14,310
Pero, certamente, o máis
familiarizado debería eventualmente

127
00:05:14,310 --> 00:05:17,590
ser de 80, que é o estándar
utilizado para o tráfico web.

128
00:05:17,590 --> 00:05:20,040
E outra familiarizado
unha breve estará 443,

129
00:05:20,040 --> 00:05:24,280
que se usa para seguro web
tráfico, URLs que comezan con https.

130
00:05:24,280 --> 00:05:26,650
>> Entón é iso que vai
dentro dese sobre.

131
00:05:26,650 --> 00:05:29,780
E obter / significa só, dar
me a páxina web estándar.

132
00:05:29,780 --> 00:05:32,700
Dáme a raíz do disco
dirixir no servidor web.

133
00:05:32,700 --> 00:05:36,050
E espero que, a web
servidor responderá con, OK

134
00:05:36,050 --> 00:05:39,630
eo número 200, que é só
unha convención di que, si, todo

135
00:05:39,630 --> 00:05:40,470
é realmente Aceptar.

136
00:05:40,470 --> 00:05:41,680
Aquí está a páxina.

137
00:05:41,680 --> 00:05:45,510
O tipo de páxina web vai
ser de texto, pero, máis en concreto, HTML,

138
00:05:45,510 --> 00:05:47,010
que estamos a piques de mergullo de volta para.

139
00:05:47,010 --> 00:05:49,877
E o dot dot dot só
medios, aquí está o HTML.

140
00:05:49,877 --> 00:05:51,710
E é aí onde nós
incorporarse á historia de hoxe,

141
00:05:51,710 --> 00:05:55,740
realmente escribir HTML,
Hipertexto Markup Language, que

142
00:05:55,740 --> 00:05:57,727
é a lingua en que
páxinas web son escritos.

143
00:05:57,727 --> 00:05:59,060
Non é unha linguaxe de programación.

144
00:05:59,060 --> 00:06:01,270
Non hai funcións
ou lazos ou condicións.

145
00:06:01,270 --> 00:06:03,800
É unha linguaxe de reserva,
ben de novo vemos hoxe,

146
00:06:03,800 --> 00:06:07,240
que permite que especifique
como estruturar e estilizar

147
00:06:07,240 --> 00:06:09,300
esteticamente unha páxina web.

148
00:06:09,300 --> 00:06:11,470
>> Polo tanto, este foi o único
e só páxina que realmente

149
00:06:11,470 --> 00:06:13,930
mirou, se breve, o luns.

150
00:06:13,930 --> 00:06:16,250
E teña en conta algúns
características máis saíntes.

151
00:06:16,250 --> 00:06:20,170
Hai unha morea de apertura angular
soporte e preto do soporte angular.

152
00:06:20,170 --> 00:06:23,160
Entre aqueles angular
corchetes son palabras.

153
00:06:23,160 --> 00:06:25,660
E nós imos comezar
chamando esas etiquetas palabras.

154
00:06:25,660 --> 00:06:28,800
Cabeza soporte de forma aberta
e soporte de cabeza pechada

155
00:06:28,800 --> 00:06:33,620
son as etiquetas abertas e pechadas,
ou as etiquetas de inicio e fin

156
00:06:33,620 --> 00:06:37,660
respectivamente, de un elemento HTML,
como imos chamalo, chamado cabeza.

157
00:06:37,660 --> 00:06:41,760
E o mesmo se aplica xerga
ao corpo en HTML e así por diante.

158
00:06:41,760 --> 00:06:43,970
>> E o que é bo é
HTML-- e, en realidade, nós imos

159
00:06:43,970 --> 00:06:47,187
pasar terriblemente pouco tempo con el,
porque vai na maior parte só descubrir

160
00:06:47,187 --> 00:06:49,770
cales as características que ten cando
realmente ten un problema concreto

161
00:06:49,770 --> 00:06:52,820
para solve-- vai descubrir que
un navegador é moi burro.

162
00:06:52,820 --> 00:06:56,450
El só vai fazer-- non ao contrario
un Computador-- o que diga a el para facer.

163
00:06:56,450 --> 00:06:59,279
E así, cando ten aberto
HTML soporte na parte superior

164
00:06:59,279 --> 00:07:01,320
alí, que, esencialmente
Significa só que, hey, navegador,

165
00:07:01,320 --> 00:07:04,090
aquí vén unha páxina web escritas en HTML.

166
00:07:04,090 --> 00:07:06,130
>> Cando se ve soporte aberto
cabeza, iso só significa que,

167
00:07:06,130 --> 00:07:10,350
hey, navegador, aquí vén a cabeza, ou
a parte superior da miña páxina web.

168
00:07:10,350 --> 00:07:14,192
Cando se ve un soporte pechado
cabeza, o que significa só, hey,

169
00:07:14,192 --> 00:07:15,150
iso é para a cabeza.

170
00:07:15,150 --> 00:07:16,420
Espera para outra cousa.

171
00:07:16,420 --> 00:07:18,878
E que outra cousa é
aparentemente será o corpo.

172
00:07:18,878 --> 00:07:22,630
E cando non ten unha marca, como
ten só Ola, coma, mundo,

173
00:07:22,630 --> 00:07:26,610
que só será un texto cru que
en definitiva, amósase na pantalla.

174
00:07:26,610 --> 00:07:29,220
>> Agora, vai notar tamén
a retirada aquí.

175
00:07:29,220 --> 00:07:32,160
Probablemente pódese inferir
como estamos estilizando-lo.

176
00:07:32,160 --> 00:07:34,850
Cada vez que eu abrir unha etiqueta,
por así dicir, eu recuar.

177
00:07:34,850 --> 00:07:38,540
E cada vez que eu peche
unha etiqueta, eu un-indent,

178
00:07:38,540 --> 00:07:40,690
similares en espírito á claves.

179
00:07:40,690 --> 00:07:43,470
E ademais, eu son do tipo
de utilizar o meu xuízo.

180
00:07:43,470 --> 00:07:48,380
Teña en conta que eu non me incomoda bater
Escriba dentro desa etiqueta título.

181
00:07:48,380 --> 00:07:48,990
Por que?

182
00:07:48,990 --> 00:07:51,920
Ben, eu só decidín que parecía un
pouco máis limpo para min, o ser humano,

183
00:07:51,920 --> 00:07:53,181
só para non incomodar a facelo.

184
00:07:53,181 --> 00:07:54,930
Entón, de novo, hai algúns
xuízo chama só

185
00:07:54,930 --> 00:07:57,670
como hai en C ou calquera outra linguaxe.

186
00:07:57,670 --> 00:08:04,110
>> Pero teña en conta tamén que este recuar
préstase a un modelo mental,

187
00:08:04,110 --> 00:08:05,670
para non complicar máis iso.

188
00:08:05,670 --> 00:08:07,020
Pero unha árbore, non?

189
00:08:07,020 --> 00:08:09,290
Se pensar nunha web
páxina aparentemente escrita

190
00:08:09,290 --> 00:08:12,050
así, como
ben recuado desa forma,

191
00:08:12,050 --> 00:08:17,390
case pode pensar o soporte aberto
HTML tag soporte pechado é demarcar

192
00:08:17,390 --> 00:08:21,380
a raíz dun nó, unha árbore da familia
nó de estilo ao estilo das árbores

193
00:08:21,380 --> 00:08:22,900
miramos para o pasado venres.

194
00:08:22,900 --> 00:08:27,630
>> E, de feito, temos á dereita aquí
o que imos chamar DON, D-O-M, un documento

195
00:08:27,630 --> 00:08:31,680
modelo de obxecto, un xeito elegante de dicir
unha árbore que representa ese HTML.

196
00:08:31,680 --> 00:08:36,140
E teña en conta que o HTML ten, imos dicir,
como unha árbore de familia, dous fillos.

197
00:08:36,140 --> 00:08:37,659
Á esquerda está a cabeza.

198
00:08:37,659 --> 00:08:39,179
Á dereita está o corpo.

199
00:08:39,179 --> 00:08:44,220
>> E así como un exercicio de pensamento irracional,
cabeza, por suposto, ten cantas nenos

200
00:08:44,220 --> 00:08:46,070
segundo esta estrutura?

201
00:08:46,070 --> 00:08:48,200
Así, só un, title--
e é por iso que temos

202
00:08:48,200 --> 00:08:50,580
a frecha que vai da cabeza ao título.

203
00:08:50,580 --> 00:08:55,110
Entón, é como se a persoa no
árbore de familia tiña só un fillo.

204
00:08:55,110 --> 00:08:58,230
E, a continuación propio título pode
pode dicir de ter un fillo tamén.

205
00:08:58,230 --> 00:09:01,780
>> Lembre que o HTML tiña
Ola, coma, mundo, abaixo dela.

206
00:09:01,780 --> 00:09:06,090
E eu simplemente tirado el dentro dunha
oval no canto de só un rectángulo

207
00:09:06,090 --> 00:09:10,559
para transmitir semanticamente que, aínda
é un nodo da árbore, por así dicir,

208
00:09:10,559 --> 00:09:12,100
é unha especie de fundamentalmente diferente.

209
00:09:12,100 --> 00:09:12,800
Non é unha etiqueta.

210
00:09:12,800 --> 00:09:14,780
Ou, máis propiamente, non é un elemento.

211
00:09:14,780 --> 00:09:16,590
É só un nó de texto, se quere.

212
00:09:16,590 --> 00:09:18,990
Pero estes son completamente
convencións humanas arbitrarias.

213
00:09:18,990 --> 00:09:23,180
Este é só agora a miña forma de
representando o que eu vou como un engadido

214
00:09:23,180 --> 00:09:24,340
chamar o documento.

215
00:09:24,340 --> 00:09:27,750
>> E como un aparte, a cousa en
o super esquina superior esquerda,

216
00:09:27,750 --> 00:09:32,080
soporte aberto punto de exclamación doc
tipo HTML, esta parece ser unha marca,

217
00:09:32,080 --> 00:09:35,560
pero é o caso canto estúpido onde
que é só alí, copiado e pegado

218
00:09:35,560 --> 00:09:38,460
para indicar os navegadores
esta é a versión 5 do HTML.

219
00:09:38,460 --> 00:09:41,540
O mundo segue a cambiar o que o
primeira liña de código nunha páxina debe ser.

220
00:09:41,540 --> 00:09:43,820
Isto só significa que a versión 5.

221
00:09:43,820 --> 00:09:45,950
Por iso, non chega a
parecido cos outros.

222
00:09:45,950 --> 00:09:48,120
>> Todo ben, entón, con que
dixo, agora vai apreciar

223
00:09:48,120 --> 00:09:50,767
esta bastante este estúpido
tatuaxe alguén ten.

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

225
00:09:51,990 --> 00:09:54,210
>> DAVID J Malan: Todo ben,
e agora imos realmente mergullo

226
00:09:54,210 --> 00:09:55,710
en facer algo con iso.

227
00:09:55,710 --> 00:09:58,610
Debe lembrar que a última vez
Abrín o Appliance CS50

228
00:09:58,610 --> 00:10:01,650
e eu fixen algo tan
simple como apertura gedit.

229
00:10:01,650 --> 00:10:05,190
E eu salvo o ficheiro, mesmo en
meu desktop-- sitio ningún especial--

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

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

232
00:10:07,100 --> 00:10:10,984
>> Entón deixe-me facelo
novamente-- hello.html Intro.

233
00:10:10,984 --> 00:10:13,900
E agora, neste ficheiro, eu vou
dalle replicar o que acabamos de

234
00:10:13,900 --> 00:10:18,850
doc saw-- tipo html Entón eu vou
facer aberto html soporte de soporte pechado.

235
00:10:18,850 --> 00:10:21,890
E entón eu vou preventivamente
abrir e pechar a etiqueta.

236
00:10:21,890 --> 00:10:22,390
Por que?

237
00:10:22,390 --> 00:10:23,598
Só eu non esquecer máis tarde.

238
00:10:23,598 --> 00:10:26,850
É só unha boa práctica, como apertura
e pechando claves dunha vez.

239
00:10:26,850 --> 00:10:28,900
>> E entón o que veu a continuación?

240
00:10:28,900 --> 00:10:30,582
Pode pensar a tatuaxe.

241
00:10:30,582 --> 00:10:31,450
>> Audiencia: A cabeza.

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

243
00:10:32,500 --> 00:10:36,020
E entón, aquí, eu
tiña o título, eu creo.

244
00:10:36,020 --> 00:10:39,886
E o título foi arbitrariamente,
Ola, título próximo mundo.

245
00:10:39,886 --> 00:10:42,760
E entón para acá, o corpo, de
course-- entón pechar a etiqueta body.

246
00:10:42,760 --> 00:10:45,660
E despois é só un pouco redundante,
Tiven o mesmo aquí en baixo.

247
00:10:45,660 --> 00:10:47,150
>> Entón, eu afirmo que esta é unha páxina web.

248
00:10:47,150 --> 00:10:49,050
Isto é algo que
agora podía vivir na web,

249
00:10:49,050 --> 00:10:51,925
aínda que, por suposto, é literalmente
vivindo no meu escritorio agora.

250
00:10:51,925 --> 00:10:55,837
Pero, en realidade, se eu minimizar gedit,
Vou ver no meu escritorio na súa icona.

251
00:10:55,837 --> 00:10:58,420
Aínda que este sexa o aparello,
pode facelo en Mac OS

252
00:10:58,420 --> 00:11:01,580
sen TextEdit ou
Windows co bloque de notas mesmo.

253
00:11:01,580 --> 00:11:06,115
>> E se eu ir adiante e dun dobre clic
que mesmo, e select-- ben, imos

254
00:11:06,115 --> 00:11:07,990
Non seleccione isto porque
Chrome non está abrindo.

255
00:11:07,990 --> 00:11:09,281
Imos adiante e abra o Chrome.

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

257
00:11:10,160 --> 00:11:14,040
E despois facer Command-O para abrir
E desprácese ata a zona de traballo

258
00:11:14,040 --> 00:11:15,320
e abrir o ficheiro.

259
00:11:15,320 --> 00:11:20,120
É así que un navegador interpreta
HTML, de arriba abaixo, de esquerda a dereita.

260
00:11:20,120 --> 00:11:21,314
Ei, aquí está o navegador HTML.

261
00:11:21,314 --> 00:11:21,980
Aquí está a cabeza.

262
00:11:21,980 --> 00:11:23,250
Aquí está o título.

263
00:11:23,250 --> 00:11:24,090
Aquí está o corpo.

264
00:11:24,090 --> 00:11:26,620
E, de feito, é así
fai esa páxina web.

265
00:11:26,620 --> 00:11:27,800
>> Pero teña en conta a URL.

266
00:11:27,800 --> 00:11:32,430
Ningún de vós pode puxar arriba este específico
páxina en seus portátiles agora,

267
00:11:32,430 --> 00:11:34,910
mesmo dentro do seu
aparello vía que URL,

268
00:11:34,910 --> 00:11:40,130
porque file: // indica que é, en realidade,
no meu sistema de ficheiros, o meu disco duro,

269
00:11:40,130 --> 00:11:40,990
non o seu.

270
00:11:40,990 --> 00:11:42,440
Entón iso non é todo o que útil.

271
00:11:42,440 --> 00:11:44,940
>> Imos agora avanzar
usando un servidor web real.

272
00:11:44,940 --> 00:11:48,309
E resulta que o CS50 Appliance
é máis que un ambiente onde

273
00:11:48,309 --> 00:11:51,100
pode escribir código C e compilar
e executa-lo como se está facendo.

274
00:11:51,100 --> 00:11:55,500
Tamén foi configurado pola
equipo para representar un típico web

275
00:11:55,500 --> 00:11:58,290
servidor que está en Internet,
un que pode pagar por

276
00:11:58,290 --> 00:12:00,210
ou un que está na chamada nube.

277
00:12:00,210 --> 00:12:02,600
>> E está correndo
estándar libre de código aberto

278
00:12:02,600 --> 00:12:06,160
software, por exemplo, algo
chámase Apache, que é quizais

279
00:12:06,160 --> 00:12:08,700
aínda o máis popular web
software de servidor no mundo

280
00:12:08,700 --> 00:12:11,030
que miles de sitios usan hoxe.

281
00:12:11,030 --> 00:12:13,420
E, el tamén ten aínda
software como MySQL,

282
00:12:13,420 --> 00:12:16,240
que é un servidor de base de datos
que vai finalmente chegar a,

283
00:12:16,240 --> 00:12:18,330
que é só para dicir
Podo comezar a tratar

284
00:12:18,330 --> 00:12:22,040
meu dispositivo como un servidor de pleno dereito
que eu non estou pagando a outro lugar.

285
00:12:22,040 --> 00:12:25,980
E só vive no meu propio portátil para
fins de desenvolvemento e de barrio.

286
00:12:25,980 --> 00:12:27,870
>> Entón, imos adiante e
sacar proveito desta.

287
00:12:27,870 --> 00:12:30,120
Eu estou indo a ir adiante e
abrir unha xanela de terminal.

288
00:12:30,120 --> 00:12:33,030
E eu estou indo a ir adiante e
move-- en realidade, primeiro eu son

289
00:12:33,030 --> 00:12:34,860
indo para navegar para o escritorio.

290
00:12:34,860 --> 00:12:36,400
Se eu fai ls, hai hello.html.

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

292
00:12:37,022 --> 00:12:38,730
E eu estou indo a ir
adiante e comezar a usar

293
00:12:38,730 --> 00:12:40,800
un novo directorio temos
non utilizado antes de hoxe.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- Vou mover
para ../vhosts para hosts-- virtual

295
00:12:46,840 --> 00:12:50,940
máis sobre iso no future-- e despois
nun directorio chamado localhost,

296
00:12:50,940 --> 00:12:54,420
que é o alcume dado a case
calquera ordenador, sexa un Mac, PC,

297
00:12:54,420 --> 00:12:57,560
ou Linux, e logo
especialmente nun directorio que nós,

298
00:12:57,560 --> 00:13:01,260
o persoal xa creado para vostede cando
baixou o aparello chamado

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

300
00:13:01,760 --> 00:13:04,551
E, como o propio nome suxire, nada
Engada aquí, en teoría,

301
00:13:04,551 --> 00:13:07,790
será agora
público, polo menos para a xente

302
00:13:07,790 --> 00:13:10,030
que teñen unha relación directa
conexión co meu ordenador.

303
00:13:10,030 --> 00:13:13,160
>> Entón, agora deixe-me ir adiante e
facer cd para ese mesmo directorio

304
00:13:13,160 --> 00:13:15,490
para que eu poida ver o que está
pasando e escriba ls.

305
00:13:15,490 --> 00:13:17,630
E, de feito, esta é a
único dentro.

306
00:13:17,630 --> 00:13:23,250
Eu afirmo agora que por que eu colocar este
arquivar hello.html dentro dun directorio

307
00:13:23,250 --> 00:13:26,940
chamado dentro dun directorio público
chamado localhost dentro dun directorio

308
00:13:26,940 --> 00:13:29,810
vhosts chamados, que
grazas ao persoal CS50

309
00:13:29,810 --> 00:13:34,390
foi pre-configurado para ser
a raíz do seu servidor web,

310
00:13:34,390 --> 00:13:36,900
Podo agora espero facelo.

311
00:13:36,900 --> 00:13:38,390
>> Vou abrir un separador novo.

312
00:13:38,390 --> 00:13:40,090
E eu estou indo a ir non file: //.

313
00:13:40,090 --> 00:13:44,520
Vou usar real
http / localhost, que

314
00:13:44,520 --> 00:13:47,470
unha vez máis, é o apelido
para o meu propio servidor.

315
00:13:47,470 --> 00:13:51,085
E entón eu estou indo a ir ao
nome do ficheiro, só para quedar claro?

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

317
00:13:52,680 --> 00:13:54,320
Onde está esta historia, probablemente, vai?

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
>> Polo tanto, noutras palabras, quero agora esta
é o meu propio ordenador, o meu propio dispositivo,

322
00:14:04,270 --> 00:14:05,660
como se fose un servidor real.

323
00:14:05,660 --> 00:14:07,490
O seu apelido é localhost.

324
00:14:07,490 --> 00:14:10,210
Pero pense como localhost como
Facebook.com google.com, o que sexa.

325
00:14:10,210 --> 00:14:11,600
É só o meu nome local.

326
00:14:11,600 --> 00:14:14,810
E, a continuación, a finais que quero é o
raíz do disco duro, por así dicir,

327
00:14:14,810 --> 00:14:17,729
ou a raíz do servidor web,
ergo a barra e, a continuación,

328
00:14:17,729 --> 00:14:18,770
o hello.html nome do ficheiro.

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

330
00:14:19,880 --> 00:14:21,930
>> Déixeme zoom e prema Intro.

331
00:14:21,930 --> 00:14:24,266
E, de feito, existe agora a miña páxina web.

332
00:14:24,266 --> 00:14:25,390
Por iso, é un pouco diferente.

333
00:14:25,390 --> 00:14:26,880
E é tan asombroso.

334
00:14:26,880 --> 00:14:27,904
Esta é a versión antiga.

335
00:14:27,904 --> 00:14:29,070
Déixeme encoller a fonte de volta.

336
00:14:29,070 --> 00:14:29,745
Este é o vello.

337
00:14:29,745 --> 00:14:30,890
Este é o novo.

338
00:14:30,890 --> 00:14:35,430
Pero o que está pasando fundamentalmente
agora é que HTTP está a ser usado.

339
00:14:35,430 --> 00:14:39,344
>> Imos facelo un pouco máis claro, ou,
se o desexa, un pouco máis complicado.

340
00:14:39,344 --> 00:14:41,760
Déixeme ir ao ángulo inferior dereito
canto do meu aparato.

341
00:14:41,760 --> 00:14:44,000
E entender que todo isto
tempo, houbo un número.

342
00:14:44,000 --> 00:14:47,330
Este é o enderezo único
do seu dispositivo CS50.

343
00:14:47,330 --> 00:14:50,800
É un enderezo privado,
como implica a 172,16,

344
00:14:50,800 --> 00:14:53,860
que significa que só fisicamente
Pode acceder a este servidor web.

345
00:14:53,860 --> 00:14:56,340
Todo pasa polo cortalumes e
ben protexido contra o resto

346
00:14:56,340 --> 00:14:58,130
do mundo por mor desta visión.

347
00:14:58,130 --> 00:15:01,920
>> E agora entende que se eu for a
Neste enderezo, non no meu dispositivo,

348
00:15:01,920 --> 00:15:04,340
pero en Mac OS-- vou
para volver para aquí.

349
00:15:04,340 --> 00:15:05,930
Este é o meu Mac agora.

350
00:15:05,930 --> 00:15:08,460
E agora eu vou abrir
esta versión de Chrome aquí.

351
00:15:08,460 --> 00:15:17,370
E eu estou indo a ir a http: //172.16.25
/ E eu esquezo o rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Entón eu vou te visitar o meu Mac
que o enderezo IP /hello.html Intro.

353
00:15:25,210 --> 00:15:29,850
E agora vexo o meu Mac
que o meu CS50 Appliance, que é

354
00:15:29,850 --> 00:15:32,600
Enderezo IP é que
número, é de feito comportándose

355
00:15:32,600 --> 00:15:34,320
como un servidor web en Internet.

356
00:15:34,320 --> 00:15:36,944
Non ten un bo fácil
lembrar do nome como Facebook.com,

357
00:15:36,944 --> 00:15:40,370
pero el está a usar HTTP
aparentemente, aínda Chrome

358
00:15:40,370 --> 00:15:43,560
é unha especie de simplificación do mundo
para nós, pero non nos mostra HTTP.

359
00:15:43,560 --> 00:15:46,210
Pero esta é realmente exactamente isto.

360
00:15:46,210 --> 00:15:48,470
Chrome é só aforrar algo
teclas escritas nos días de hoxe.

361
00:15:48,470 --> 00:15:50,530
E iso é o que vemos agora.

362
00:15:50,530 --> 00:15:51,890
>> Entón, iso é moi bo e correcto.

363
00:15:51,890 --> 00:15:53,740
Pero é unha páxina moi por baixo do esperado.

364
00:15:53,740 --> 00:15:56,230
Déixeme entrar e facer algo
un pouco diferente agora.

365
00:15:56,230 --> 00:15:57,910
Entón deixe-me volver a gedit.

366
00:15:57,910 --> 00:16:00,580
E no canto de Ola,
mundo, imos poñer unha imaxe.

367
00:16:00,580 --> 00:16:05,880
E eu reclamada antes-- déixeme ir
para o meu público directorio localhost.

368
00:16:05,880 --> 00:16:10,580
E deixe-me ir adiante e copiar un
todo morea de arquivos a partir de hoxe

369
00:16:10,580 --> 00:16:15,633
da miña carpeta Dropbox en aquí.

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

371
00:16:19,470 --> 00:16:21,680
>> Agora, se eu escribir ls, ollar
en todos estes arquivos

372
00:16:21,680 --> 00:16:24,940
que eu teña distribuído polo
sitio do curso con antelación de hoxe,

373
00:16:24,940 --> 00:16:26,830
unha das cales é aínda hello.html.

374
00:16:26,830 --> 00:16:27,830
Polo tanto, non hai que un.

375
00:16:27,830 --> 00:16:30,730
E lembrar este parvo
do último cat.jpg tempo--.

376
00:16:30,730 --> 00:16:34,550
Entón deixe-me tentar incorporar
cat.jpg dentro da miña páxina web.

377
00:16:34,550 --> 00:16:37,690
>> Eu estou indo a ir adiante
e facer cat.jpg, gardar.

378
00:16:37,690 --> 00:16:38,950
Déixeme volver para Chrome.

379
00:16:38,950 --> 00:16:41,140
E déixeme ampliar o
fonte e agora volver cargar.

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

381
00:16:43,090 --> 00:16:45,030
Oops, onde poño isto?

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

383
00:16:48,210 --> 00:16:51,520
Standby-- eu aínda teño o vello
versión da miña aberto escritorio.

384
00:16:51,520 --> 00:16:56,020
Entón deixe-me ir ao meu vhost, meu
localhost, o meu público, e hello.html.

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

386
00:16:57,320 --> 00:17:00,670
Entón, agora deixe-me ir adiante e
din cat.jpg interior do corpo

387
00:17:00,670 --> 00:17:02,830
onde quero que sexa
exhibido e actualizar.

388
00:17:02,830 --> 00:17:04,560
Por suposto, iso non é correcto.

389
00:17:04,560 --> 00:17:08,050
>> Entón eu teño que dicir ao navegador algo
máis deliberadamente o que quero que faga.

390
00:17:08,050 --> 00:17:10,210
Escriba o nome é
obviamente non é suficiente.

391
00:17:10,210 --> 00:17:15,134
Entón lembro que había outra
tag, imaxe, imaxe para breve.

392
00:17:15,134 --> 00:17:17,550
Isto é só porque os seres humanos
non me gusta das palabras cheas de tipos.

393
00:17:17,550 --> 00:17:19,050
E entón o que podemos facer source = "cat.jpg".

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

395
00:17:21,470 --> 00:17:23,550
>> E agora eu vou facer
unha cousa diferente aquí.

396
00:17:23,550 --> 00:17:25,390
A pesar de todos
nosas marcas, ata agora, ten

397
00:17:25,390 --> 00:17:28,086
tiña esa noción dun
tag de inicio e unha etiqueta final,

398
00:17:28,086 --> 00:17:30,210
que realmente non fai
sentido dunha imaxe, non?

399
00:17:30,210 --> 00:17:32,430
Unha imaxe pode existir ou non existe.

400
00:17:32,430 --> 00:17:36,650
E así os seres humanos teñen benvida
cunha convención simple.

401
00:17:36,650 --> 00:17:40,310
Cando ten unha marca que pode tanto
comezar e rematar na mesma tempo--

402
00:17:40,310 --> 00:17:43,790
pode estar baleira, entón a speak-- só
poñer a barra dentro da etiqueta

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

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

405
00:17:45,776 --> 00:17:47,150
Agora déixeme volver para o meu navegador.

406
00:17:47,150 --> 00:17:50,377
Hit Reload Porra, algo está mal.

407
00:17:50,377 --> 00:17:52,460
Probablemente xa viu iso
ocasionalmente na web,

408
00:17:52,460 --> 00:17:53,600
aínda que non foi a súa culpa.

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

410
00:17:54,766 --> 00:17:56,240
Que odes este indicaría?

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

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

413
00:17:58,009 --> 00:17:59,300
É aí que a imaxe pertence.

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

415
00:17:59,700 --> 00:18:01,560
>> Audiencia: Pero iso non acontece
ter acceso á imaxe.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J Malan: Non fai
ter acceso á imaxe.

417
00:18:03,070 --> 00:18:05,230
Iso, ou, peor aínda, se cadra
el nin sequera existe.

418
00:18:05,230 --> 00:18:06,729
A ver se non podemos diagnosticar iso.

419
00:18:06,729 --> 00:18:09,390
Teña en conta que a última vez que se
en Chrome, o aparello,

420
00:18:09,390 --> 00:18:11,870
ou incluso no seu Mac ou PC,
vai ao menú creador

421
00:18:11,870 --> 00:18:14,650
e ir as Ferramentas de Desenvolvemento
opción, que, probablemente, ten

422
00:18:14,650 --> 00:18:16,850
non moi usado ou nunca.

423
00:18:16,850 --> 00:18:20,780
E se eu for facer unha rede
e volva a páxina,

424
00:18:20,780 --> 00:18:24,110
imos realmente ollar para o HTTP
solicitudes que están sendo feitas.

425
00:18:24,110 --> 00:18:28,400
>> Parece que é hello.html
OK, en realidade, de aquí a 200.

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

427
00:18:30,630 --> 00:18:31,650
Polo tanto, non é un 404.

428
00:18:31,650 --> 00:18:33,490
Ficheiro probablemente existe.

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

430
00:18:35,250 --> 00:18:37,790
Entón, iso é un pouco confuso.

431
00:18:37,790 --> 00:18:42,340
Vou volver
a miña xanela de terminal.

432
00:18:42,340 --> 00:18:43,700
Déixeme achegar-se aquí.

433
00:18:43,700 --> 00:18:44,750
E deixe-me facer un ls.

434
00:18:44,750 --> 00:18:46,430
Hai eses mesmos arquivos.

435
00:18:46,430 --> 00:18:49,410
>> Agora déixeme facer un ls-l,
que probablemente

436
00:18:49,410 --> 00:18:53,350
utilizado antes de ollar para arquivo
tamaños quizais ou timestamps.

437
00:18:53,350 --> 00:18:55,590
E vemos unha morea de
información esmagadora.

438
00:18:55,590 --> 00:18:57,040
Pero teña en conta algúns detalles.

439
00:18:57,040 --> 00:19:01,660
Aquí está hello.html neste
remar aquí e aquí está cat.jpg.

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

441
00:19:02,934 --> 00:19:05,850
E iso é só o aparello a ser
user friendly, destacando JPEG

442
00:19:05,850 --> 00:19:07,380
en vermello como este.

443
00:19:07,380 --> 00:19:11,470
Pero o que máis é diferente xunto
o tamaño do arquivo eo nome do ficheiro?

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

445
00:19:13,438 --> 00:19:14,754
>> Audiencia: [inaudível].

446
00:19:14,754 --> 00:19:16,920
DAVID J Malan: Si, non hai
dous a máis ata aquí R.

447
00:19:16,920 --> 00:19:20,170
Teña en conta o que ten hello.html pasando.

448
00:19:20,170 --> 00:19:24,050
Así, verifícase que o nome de
ese público directorio é importante.

449
00:19:24,050 --> 00:19:26,400
Calquera cousa neste directorio
pretende ser público.

450
00:19:26,400 --> 00:19:28,790
Pero non é suficiente
só para soltar os ficheiros alí.

451
00:19:28,790 --> 00:19:31,480
Tamén cómpre cambiar
o modo de os arquivos,

452
00:19:31,480 --> 00:19:35,180
cambiar os permisos de
o arquivo de forma pro-activa non

453
00:19:35,180 --> 00:19:37,650
ser a configuración por defecto,
que é o que só podo ler

454
00:19:37,650 --> 00:19:39,220
e gravala-lo, eu sendo o propietario.

455
00:19:39,220 --> 00:19:43,540
Quero todo o mundo para todo o mundo
ser capaz de ler o meu ficheiro, por así dicir.

456
00:19:43,540 --> 00:19:44,950
Ler significa só visualiza-lo.

457
00:19:44,950 --> 00:19:49,780
>> E, de feito, como podes ver no problema
definir sete, que é o que significan estas de R.

458
00:19:49,780 --> 00:19:53,160
Media Estes dous de R deixar todo o mundo
o resto do mundo tamén lelo,

459
00:19:53,160 --> 00:19:55,300
sobre todo agora que
é neste directorio.

460
00:19:55,300 --> 00:19:59,620
Así, o xeito máis sinxelo de solucionar isto é
ir á miña rápido e facer chmod para o cambio

461
00:19:59,620 --> 00:20:05,580
xeito e, a continuación, facer a + r, en conxunto,
todos, todos, máis r para lectura,

462
00:20:05,580 --> 00:20:07,944
e despois cat.jpg Intro.

463
00:20:07,944 --> 00:20:10,360
Nada parece ocorrer, o que
normalmente significa algo bo.

464
00:20:10,360 --> 00:20:13,850
Entón ls-l novamente-- agora
imos ollar para cat.jpg.

465
00:20:13,850 --> 00:20:15,750
E esa autorización
parecen cambiado.

466
00:20:15,750 --> 00:20:18,670
Como un aparte, se fai unha
erro e, por exemplo,

467
00:20:18,670 --> 00:20:23,210
só fixo your-- Non sabe-- ensaio
accesible ao público por accidente,

468
00:20:23,210 --> 00:20:25,480
pode facer o contrario, chmod a-r.

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

470
00:20:25,909 --> 00:20:28,200
Aínda que, a verdade, non debería
estar no directorio público

471
00:20:28,200 --> 00:20:29,760
de calquera xeito, se esa é a preocupación.

472
00:20:29,760 --> 00:20:32,475
>> Entón agora imos voltar a
meu navegador e reload.

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

474
00:20:32,904 --> 00:20:34,820
E eu vou clic
o pequeno Ghostbusters

475
00:20:34,820 --> 00:20:38,030
símbolo para limpar a parte do
pantalla para que poidamos ver novas solicitudes.

476
00:20:38,030 --> 00:20:40,630
E, de feito, é aquí
Cat Grump de antes.

477
00:20:40,630 --> 00:20:43,010
Pero, máis importante,
tecnicamente, non hai

478
00:20:43,010 --> 00:20:45,565
o número 200, que
significa que chegamos Aceptar.

479
00:20:45,565 --> 00:20:47,190
Todo ben, o que é moi bo e correcto.

480
00:20:47,190 --> 00:20:48,940
Pero nós non estamos facendo
o mellor de sitios web,

481
00:20:48,940 --> 00:20:51,967
nin imos tratar demasiado duro para
facer o máis extravagante dos sitios hoxe.

482
00:20:51,967 --> 00:20:54,550
Pero imos polo menos facer algo
Super familiarizado antes de chocalho

483
00:20:54,550 --> 00:20:56,030
fóra algunhas outras etiquetas.

484
00:20:56,030 --> 00:20:58,470
Entón supoño que eu non quero só un gato aquí.

485
00:20:58,470 --> 00:21:02,530
Supoña que eu realmente quero que isto
gato para conectarse a algo.

486
00:21:02,530 --> 00:21:07,210
>> Podería, por exemplo,
facer algo así.

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

488
00:21:08,580 --> 00:21:12,890
unha para href referencia para
amiga equals-- referencia

489
00:21:12,890 --> 00:21:17,440
e imos facer algo
como www.google.com preto

490
00:21:17,440 --> 00:21:19,540
citar seguinte soporte.

491
00:21:19,540 --> 00:21:22,000
E agora buscar gatos.

492
00:21:22,000 --> 00:21:23,520
Pechar Referencia tag.

493
00:21:23,520 --> 00:21:26,760
Polo tanto, este ten só un tipo
de fundamentalmente novo detalle.

494
00:21:26,760 --> 00:21:28,190
A etiqueta por suposto, é diferente.

495
00:21:28,190 --> 00:21:31,770
É o nome dunha áncora para
referencia href ou amiga.

496
00:21:31,770 --> 00:21:35,269
>> Pero, máis importante, non hai
esta función sintáctica aquí.

497
00:21:35,269 --> 00:21:37,810
Isto é o que nós imos comezar a chamar
non unha marca, pero un atributo.

498
00:21:37,810 --> 00:21:40,830
E un atributo é algo que
modifica o comportamento dunha etiqueta.

499
00:21:40,830 --> 00:21:45,400
E ese atributo, href, medios
modificar o comportamento desta áncora

500
00:21:45,400 --> 00:21:48,430
para que, cando sexa premendo,
vai a este URL aquí.

501
00:21:48,430 --> 00:21:50,330
E, por suposto, que URL é Google.

502
00:21:50,330 --> 00:21:53,951
>> Mentres tanto, o que é iso
texto aquí vai ser?

503
00:21:53,951 --> 00:21:55,950
Ben, iso será
que o ser humano realmente

504
00:21:55,950 --> 00:21:58,470
ve como o subliñado
enlace, tan simple como iso.

505
00:21:58,470 --> 00:21:59,220
Entón, imos tentar iso.

506
00:21:59,220 --> 00:21:59,980
Déixeme salvalo.

507
00:21:59,980 --> 00:22:01,650
Eu aínda estou en hello.html.

508
00:22:01,650 --> 00:22:05,360
Pero, nas versións en liña, verás
os nomes de ficheiros reais que pre-preparados.

509
00:22:05,360 --> 00:22:06,805
Deixe-me ir adiante e actualizar.

510
00:22:06,805 --> 00:22:08,680
E agora é moi
páxina decepcionante aínda.

511
00:22:08,680 --> 00:22:10,910
Pero se eu pasar o rato sobre há--
e é un pouco pequeno,

512
00:22:10,910 --> 00:22:13,576
mas- podes ver na parte inferior
esquina esquerda da pantalla,

513
00:22:13,576 --> 00:22:15,242
el é de feito indo google.com.

514
00:22:15,242 --> 00:22:19,280
E se eu premer en que, será
bata me camiño á real Google.

515
00:22:19,280 --> 00:22:22,610
>> Pero teña en conta aquí unha oportunidade para
explotación, así como un aparte.

516
00:22:22,610 --> 00:22:25,150
E nós imos voltar a outra
cuestións de seguridade antes de tempo.

517
00:22:25,150 --> 00:22:29,290
¿Por que non hai esa dicotomía
entre onde vai eo que di,

518
00:22:29,290 --> 00:22:34,722
podería facer algo así
isto-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, e agora se eu actualizar
despois de gardar a páxina,

520
00:22:37,134 --> 00:22:38,800
parece que eu estou indo a ir a Google.

521
00:22:38,800 --> 00:22:40,966
Pero non hai ningunha razón que eu
ten que ir a Google, non?

522
00:22:40,966 --> 00:22:47,460
Podería realmente ir algo como
badguy.com, volva a páxina aquí.

523
00:22:47,460 --> 00:22:49,750
E noten, inda se parece con Google.

524
00:22:49,750 --> 00:22:52,020
E só se me está afiada
o suficiente para pasar o rato sobre aquí

525
00:22:52,020 --> 00:22:54,770
vexo que está mesmo indo a
ir a un lugar diferente.

526
00:22:54,770 --> 00:22:57,400
>> Entón, se xa gañou
un correo electrónico, especialmente

527
00:22:57,400 --> 00:22:59,610
un do Paypal, ou
aparentemente do Paypal

528
00:22:59,610 --> 00:23:01,830
pedindo que faga login
para a súa conta, este

529
00:23:01,830 --> 00:23:06,380
É por iso que nunca debe
nunca premer en ligazóns en correos electrónicos,

530
00:23:06,380 --> 00:23:07,930
francamente, todos os enlaces en correos electrónicos.

531
00:23:07,930 --> 00:23:10,380
Se sabe que ten real
diñeiro no Paypal ou Banco

532
00:23:10,380 --> 00:23:14,250
de América ou Fidelity ou en calquera
web, escriba o manual no.

533
00:23:14,250 --> 00:23:17,530
Porque mira como é doado
enganar alguén para presentar o que

534
00:23:17,530 --> 00:23:18,526
parécese unha ligazón.

535
00:23:18,526 --> 00:23:20,400
Pero, en realidade, podería
ir absolutamente en calquera lugar.

536
00:23:20,400 --> 00:23:23,301
>> E hai moito máis
ameazas que iso.

537
00:23:23,301 --> 00:23:25,300
En realidade, iso é un pouco
dunha tanxente agora, pero unha

538
00:23:25,300 --> 00:23:28,430
dos mellores que eu xa vin
que xa foi pechado,

539
00:23:28,430 --> 00:23:34,060
é alguén levou a xente
a-- entón iso pode dicir,

540
00:23:34,060 --> 00:23:37,660
click aquí para iniciar sesión na súa
conta, unha conta bancaria.

541
00:23:37,660 --> 00:23:40,985
E este foi o banco do oeste.

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

543
00:23:43,030 --> 00:23:44,250
>> Entón, alguén comprou iso.

544
00:23:44,250 --> 00:23:47,090
E é un pouco máis fácil de ver
lo nunha fonte mono espazos grande

545
00:23:47,090 --> 00:23:49,190
no nun proxector de 30 pés.

546
00:23:49,190 --> 00:23:51,720
Pero cando é pequena fonte nun
correo electrónico que está a recibir,

547
00:23:51,720 --> 00:23:54,690
isto parece bankofthewest.com,
non bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
que alguén pagara 10 dólares para mercar.

549
00:23:58,230 --> 00:24:00,840
E entón, o que levou-os para o
equivalente a algún sitio mal.

550
00:24:00,840 --> 00:24:05,540
>> E vai ver demasiado-- realmente podemos facer
isto-- se eu ir ao sitio real,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, de novo,
recordo a última vez

552
00:24:10,335 --> 00:24:13,210
que, se esta é a súa páxina web e
está curioso para saber como funciona,

553
00:24:13,210 --> 00:24:15,610
certamente pode ir
Ferramentas de creador de Chrome.

554
00:24:15,610 --> 00:24:18,890
E pode ver a
HTML cun formato alí.

555
00:24:18,890 --> 00:24:20,890
>> Pero, máis ao punto,
vostede cam-- imos pechar

556
00:24:20,890 --> 00:24:24,760
isto-- pode ir Eventos
Creador View Source.

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

558
00:24:25,770 --> 00:24:28,350
Por que non podo simplemente copiar
todo isto e entón eu

559
00:24:28,350 --> 00:24:31,630
pode entrar na miña ventá pouco gedit
aquí e facer a miña propia páxina web.

560
00:24:31,630 --> 00:24:33,210
Salva esta en hello.html.

561
00:24:33,210 --> 00:24:36,770
E, probablemente, que vai romper,
por que non é tan fácil normalmente.

562
00:24:36,770 --> 00:24:41,590
Pero agora, se eu actualizar a miña propia páxina en
miña propia CS50 Appliance e recarga bater,

563
00:24:41,590 --> 00:24:42,990
OK, algunhas cousas rompe.

564
00:24:42,990 --> 00:24:45,750
Pero eu estou moi preto de ter
o meu propio sitio web bancario, non?

565
00:24:45,750 --> 00:24:46,570
Todo isto HTML--

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

567
00:24:47,370 --> 00:24:49,210
>> DAVID J Malan: -Eu
non actually-- e

568
00:24:49,210 --> 00:24:52,210
sei que hai alguén aí fóra que
sería, en realidade, prema nestes enlaces tamén.

569
00:24:52,210 --> 00:24:54,864
Entón, claramente, algunhas cousas rompe.

570
00:24:54,864 --> 00:24:56,780
Pero iso vai levar
nos a unha discusión,

571
00:24:56,780 --> 00:25:00,810
innecesariamente agora, en canto ao que
CSS, follas de estilo en cascada, son,

572
00:25:00,810 --> 00:25:03,410
e como realmente
descargar outros arquivos HTML

573
00:25:03,410 --> 00:25:06,140
e JPEG arquivos GIF que
o sitio web pode estar a usar.

574
00:25:06,140 --> 00:25:07,960
Pero todo isto é realizábel.

575
00:25:07,960 --> 00:25:11,110
Pero realmente se reduce a
estes heurística moi sinxelo.

576
00:25:11,110 --> 00:25:14,450
>> Entón, agora imos percorrer un
par de outros exemplos de HTML

577
00:25:14,450 --> 00:25:16,680
só para lle dar un sentido
o que máis pode facer.

578
00:25:16,680 --> 00:25:18,670
Por exemplo, este é list.html.

579
00:25:18,670 --> 00:25:23,240
Supoña que eu quería facer unha páxina web
cunha lista de vivendas no quad.

580
00:25:23,240 --> 00:25:28,960
Eu podería usar a etiqueta ul para desordenada
lista e, a continuación, o neno elemento da lista

581
00:25:28,960 --> 00:25:33,760
e despois iterado over-- ou lista,
rather-- as casas en cuestión.

582
00:25:33,760 --> 00:25:36,080
>> E se eu abrir isto, imos facelo.

583
00:25:36,080 --> 00:25:40,670
Imos non hello.html,
pero para list.html.

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

585
00:25:42,160 --> 00:25:43,000
Como fago para solucionar isto?

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

587
00:25:45,679 --> 00:25:47,220
É o mesmo problema de antes, non?

588
00:25:47,220 --> 00:25:52,510
Entón deixe-me facer 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
E agora, se eu volver para o meu navegador
e prema en Cargar de, alí está el.

591
00:25:59,610 --> 00:26:02,360
Entón, se vostede sempre quixo facer
unha lista con viñetas, pode facelo.

592
00:26:02,360 --> 00:26:06,210
Se queres ser super chic e facer
unha lista ordenada, non unha lista non ordenada,

593
00:26:06,210 --> 00:26:10,170
cambiar aqueles para ol, volva a páxina e
Agora o navegador numerar por vostede.

594
00:26:10,170 --> 00:26:11,241
>> Que máis podemos facer?

595
00:26:11,241 --> 00:26:13,990
Ben, un par de outros- se
ten longos parágrafos de texto--

596
00:26:13,990 --> 00:26:15,698
por exemplo, algúns
Texto en latín como isto--

597
00:26:15,698 --> 00:26:20,730
e quere que en letras separadas,
aberto p, p preto da marca de parágrafo.

598
00:26:20,730 --> 00:26:22,010
E facelo de novo e de novo.

599
00:26:22,010 --> 00:26:26,600
E se eu agora abrir este ficheiro,
paragraphs.html, así, este

600
00:26:26,600 --> 00:26:27,570
está quedando aburrido.

601
00:26:27,570 --> 00:26:34,320
Entón, agora imos voltar para o meu
alerta, chmod a r r estrelas + .html--

602
00:26:34,320 --> 00:26:36,099
un bo comodín pouco por así dicir.

603
00:26:36,099 --> 00:26:37,890
Debe resolver todos
estes problemas para min.

604
00:26:37,890 --> 00:26:38,990
Imos actualizar.

605
00:26:38,990 --> 00:26:40,500
Hai tres parágrafos.

606
00:26:40,500 --> 00:26:42,930
>> E agora imos adiante
e abrir outro.

607
00:26:42,930 --> 00:26:44,310
Como sobre a mesa?

608
00:26:44,310 --> 00:26:46,440
Vai notar miradas de mesa
algo máis complexo.

609
00:26:46,440 --> 00:26:49,110
Pero é o mesmo idea--
tag aberta, etiqueta aberta,

610
00:26:49,110 --> 00:26:51,360
aberto, aberto, aberto, preto tag, tag aberta.

611
00:26:51,360 --> 00:26:54,410
E estes acontecen en repouso por
táboa, cuxa fronteira é aparentemente

612
00:26:54,410 --> 00:26:58,500
será espesor 1-- o que quere
que liña da táboa means--, mesa

613
00:26:58,500 --> 00:27:00,320
datos, o que supón unha célula.

614
00:27:00,320 --> 00:27:03,840
E se eu volver para o meu navegador
aquí e ir table.html,

615
00:27:03,840 --> 00:27:05,840
podes ver algo
así, hediondo.

616
00:27:05,840 --> 00:27:07,840
Pero nós imos chegar ao punto
onde podemos realmente

617
00:27:07,840 --> 00:27:09,260
facer as cousas máis bonitas do que iso.

618
00:27:09,260 --> 00:27:10,530
>> Entón deixe-me estipular de momento.

619
00:27:10,530 --> 00:27:11,870
Hai grupos de máis etiquetas.

620
00:27:11,870 --> 00:27:15,225
E HTML é marabilloso para incorporarse
porque, francamente, todo o que tes que facer

621
00:27:15,225 --> 00:27:17,600
é mirar para as páxinas web existentes
co cal está familiarizado.

622
00:27:17,600 --> 00:27:20,340
E vostede é como, oh, é así que
eles fixeron iso esteticamente.

623
00:27:20,340 --> 00:27:23,159
>> Ou pode buscar calquera liña
de recursos acerca de como funciona HTML,

624
00:27:23,159 --> 00:27:25,700
e verás que hai unha
todo o vocabulario doutras etiquetas.

625
00:27:25,700 --> 00:27:30,110
Pero co modelo mental simple
só que case calquera marca que abrir

626
00:27:30,110 --> 00:27:33,620
ten que ser pechado, realmente
é suficiente para ensinar a si mesmo

627
00:27:33,620 --> 00:27:36,950
HTML despois de entender
estas ideas básicas de marcas

628
00:27:36,950 --> 00:27:40,520
e atributos ea boa formación
que xa falamos sobre,

629
00:27:40,520 --> 00:27:44,697
nada de pechar para que poidamos abrir
para que non confunda un navegador.

630
00:27:44,697 --> 00:27:46,780
Entón, imos agora dar isto para
un nivel máis interesante

631
00:27:46,780 --> 00:27:48,100
indo ao real.

632
00:27:48,100 --> 00:27:51,095
E imos para o meu Mac
aquí, a google.com.

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

634
00:27:52,280 --> 00:27:54,020
E agora notice-- imos facelo.

635
00:27:54,020 --> 00:27:57,280
Estou gongo para ir
Configuración, Configuración de busca.

636
00:27:57,280 --> 00:28:01,070
Quero desactivar ese instante irritante
Resultados cousa onde se inmediatamente

637
00:28:01,070 --> 00:28:02,450
comeza respondendo a súa dixitación.

638
00:28:02,450 --> 00:28:05,300
Imos facelo de xeito máis vella escola
nós realmente ver o que está pasando.

639
00:28:05,300 --> 00:28:08,260
>> Entón, eu estou indo a salvar a miña
Configuración de Google aquí.

640
00:28:08,260 --> 00:28:11,160
E agora notice-- vou
buscar algo como gatos.

641
00:28:11,160 --> 00:28:14,500
E aínda está facendo auto
completa aquí, pero en base a cousas

642
00:28:14,500 --> 00:28:15,970
persoas escribiu no pasado.

643
00:28:15,970 --> 00:28:17,490
Pero teña en conta o que vai ocorrer.

644
00:28:17,490 --> 00:28:20,272
>> Na URL no momento
é iso, só google.com.

645
00:28:20,272 --> 00:28:22,650
E tecnicamente, é barra.

646
00:28:22,650 --> 00:28:25,910
Google acaba de salvar un personaxe
e non nos que amosar.

647
00:28:25,910 --> 00:28:30,400
Eles están nos amosando https, só
ser super reconfortante de que estamos

648
00:28:30,400 --> 00:28:32,850
nunha páxina segura ou criptografía.

649
00:28:32,850 --> 00:28:35,690
>> Entón deixe-me ir adiante e buscar gatos.

650
00:28:35,690 --> 00:28:37,670
Agora iso quedou moi
esmagadora rapidamente.

651
00:28:37,670 --> 00:28:39,470
Olle o tamaño desta URL.

652
00:28:39,470 --> 00:28:43,070
Pero parece que a maioría deste material
na URL é realmente moi inútil.

653
00:28:43,070 --> 00:28:45,320
Vou comezar a borrar
cousas que non entendo.

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

655
00:28:46,560 --> 00:28:47,360
Vexo gatos.

656
00:28:47,360 --> 00:28:48,470
Entendo gatos.

657
00:28:48,470 --> 00:28:50,380
Non sei por que os gatos están alí de novo.

658
00:28:50,380 --> 00:28:52,620
Realmente non sei
o que este absurdo é.

659
00:28:52,620 --> 00:28:56,030
Entón, eu estou indo só para manter
destacando e exclusión de material

660
00:28:56,030 --> 00:28:59,905
que eu non entendo,
Destilando a URL en só iso.

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

662
00:29:00,920 --> 00:29:02,270
>> Agora déixeme se introducir de novo.

663
00:29:02,270 --> 00:29:03,814
Parece que Google aínda traballa.

664
00:29:03,814 --> 00:29:06,980
Entón, por algún motivo, están engadindo un
chea de cousas para por defecto do seu URL.

665
00:29:06,980 --> 00:29:09,000
Pero non é estrictamente necesario.

666
00:29:09,000 --> 00:29:10,340
Entón, o que é bo sobre iso?

667
00:29:10,340 --> 00:29:13,630
Ben, deixe-me ir adiante e
abrir Inspector de Chrome.

668
00:29:13,630 --> 00:29:15,960
Hai un pouco de atallo do rato para iso.

669
00:29:15,960 --> 00:29:17,360
>> Vai á pestana Rede.

670
00:29:17,360 --> 00:29:19,340
E agora déixeme volver cargar
desta páxina unha vez máis.

671
00:29:19,340 --> 00:29:20,280
E eu estou me sostendo Shift.

672
00:29:20,280 --> 00:29:22,520
Como un aparte, navegadores
tenden a almacenar en caché ou gardar

673
00:29:22,520 --> 00:29:24,697
información só por mor da eficiencia.

674
00:29:24,697 --> 00:29:27,280
Pero, normalmente, sostendo a tecla Shift e
recarga obrigará todo

675
00:29:27,280 --> 00:29:28,994
que comezar de novo desde o principio.

676
00:29:28,994 --> 00:29:30,410
E iso é o que quero facer aquí.

677
00:29:30,410 --> 00:29:33,550
>> E teña en conta todos estes
liñas que só apareceron.

678
00:29:33,550 --> 00:29:37,920
Acontece que en calquera web
páxina, pode haber só un ficheiro

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- ou non
52 pode ser, como no presente caso.

680
00:29:43,500 --> 00:29:45,820
Cando visitar google.com,
Ao parecer, o meu navegador

681
00:29:45,820 --> 00:29:49,650
arrinca 52 solicitudes HTTP separadas.

682
00:29:49,650 --> 00:29:50,520
Por que?

683
00:29:50,520 --> 00:29:53,380
>> Ben, mire para o que está dentro
deste top web page up.

684
00:29:53,380 --> 00:29:55,620
Non hai só texto,
pero non hai imaxes reais

685
00:29:55,620 --> 00:29:57,130
de gatos máis á dereita.

686
00:29:57,130 --> 00:29:59,110
Hai un logotipo colorido aquí enriba á esquerda.

687
00:29:59,110 --> 00:30:01,750
Hai todos estes iconos
por un micrófono e así por diante.

688
00:30:01,750 --> 00:30:05,130
Hai unha morea de pezas, construíndo
bloques, pezas scratch, se quixeren,

689
00:30:05,130 --> 00:30:06,250
a esta páxina web.

690
00:30:06,250 --> 00:30:10,310
E o que o navegador está facendo encima
quedando o primeiro arquivo, que

691
00:30:10,310 --> 00:30:16,180
É esta liña aquí, é esencialmente
iteración sobre o cumio HTML

692
00:30:16,180 --> 00:30:19,880
abaixo, de esquerda a dereita, buscando
cousas como etiquetas de imaxe ou doutras marcas

693
00:30:19,880 --> 00:30:23,160
que están mencionando outros arquivos e
cando se ve, vai e busca-los

694
00:30:23,160 --> 00:30:26,050
vía HTTP, toda viable
metáfora sobre,

695
00:30:26,050 --> 00:30:29,670
e logo, exhibe os na
lugar adecuado na páxina web.

696
00:30:29,670 --> 00:30:33,370
>> Pero teña en conta aquí concentrarse en
os primeiros gatos tiro, busca,

697
00:30:33,370 --> 00:30:37,090
entender que, en realidade, está a usar HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
E, por desgraza, Google
Chrome agora na versión 39

699
00:30:41,690 --> 00:30:45,110
é o tipo de cousas emburrecimento e
non nos mostra as cabeceiras reais.

700
00:30:45,110 --> 00:30:49,680
Pero o que foi de feito enviado é unha solicitude
para non cortar, pero / search? q = gatos.

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

702
00:30:52,830 --> 00:30:54,340
>> Agora, por que isto é importante?

703
00:30:54,340 --> 00:30:57,110
Ben, eu estou indo a inferir
de aí que se Google

704
00:30:57,110 --> 00:31:01,520
soporta as consultas deste tipo, por que
eu non aplicar a miña propia investigación

705
00:31:01,520 --> 00:31:06,420
motor para CS50, pero só a parte dianteira
final, só a interface gráfica de usuario.

706
00:31:06,420 --> 00:31:09,610
E nós imos terceirizar o back-end,
a procura real resulta para Google.

707
00:31:09,610 --> 00:31:10,510
>> Entón, como podo facer iso?

708
00:31:10,510 --> 00:31:13,820
Ben, deixe-me ir gedit aquí.

709
00:31:13,820 --> 00:31:19,180
E deixe-me ir adiante e abrir
ata, digamos, un novo arquivo.

710
00:31:19,180 --> 00:31:22,280
E eu estou indo a gardar esta
temporalmente como búscase 0.html.

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

712
00:31:25,111 --> 00:31:27,860
E entón, finalmente, imos rápido
fronte ao que eu pre-preparados.

713
00:31:27,860 --> 00:31:30,190
>> E eu vou
rapidamente látego tipo doc

714
00:31:30,190 --> 00:31:33,840
html soporte aberto html
preto html soporte.

715
00:31:33,840 --> 00:31:38,390
Entón eu vou facer a cabeza
preto cabeza Título aberto CS50

716
00:31:38,390 --> 00:31:40,150
Buscar no canto de busca de Google.

717
00:31:40,150 --> 00:31:43,480
Aquí abaixo eu vou ter
o corpo, aquí preto do corpo.

718
00:31:43,480 --> 00:31:45,835
E agora eu teño CS50 Search.

719
00:31:45,835 --> 00:31:47,710
E, de feito, imos
construír esta forma incremental.

720
00:31:47,710 --> 00:31:51,043
Eu estou indo a ir adiante e pechar esta e
realmente poñelas no meu directorio público.

721
00:31:51,043 --> 00:31:52,730
Entón me dea só un momento.

722
00:31:52,730 --> 00:31:55,390
búscase 0.html-- vou
temporalmente chamalo search.html.

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

724
00:31:56,600 --> 00:31:59,750
Vou chmod un search.html + r.

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

726
00:32:01,072 --> 00:32:02,280
E agora eu vou abri-lo.

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

728
00:32:03,224 --> 00:32:04,390
Todo ben, de xeito que foi rápido.

729
00:32:04,390 --> 00:32:06,800
Pero o obxectivo era simplemente
para levarnos ao punto

730
00:32:06,800 --> 00:32:09,630
de ter este texto
ficheiro chamado search.html.

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

732
00:32:10,940 --> 00:32:12,790
Polo tanto, non hai moito para ollar aínda.

733
00:32:12,790 --> 00:32:16,970
En realidade, se eu for ao meu navegador, e
ir search.html, iso é todo o que é.

734
00:32:16,970 --> 00:32:17,720
Pero vostede sabe o que?

735
00:32:17,720 --> 00:32:19,000
Podo ser un pouco afeccionado.

736
00:32:19,000 --> 00:32:22,710
Lin nun libro que hai
unha rúbrica denominada etiqueta h1.

737
00:32:22,710 --> 00:32:26,100
E eu estou indo a ir adiante e
usar que h1 abrir e pechar h1.

738
00:32:26,100 --> 00:32:27,220
Actualizar a páxina.

739
00:32:27,220 --> 00:32:29,600
E agora é a maior e máis ousado,
nin todo o que interesante,

740
00:32:29,600 --> 00:32:32,399
pero polo menos estruturalmente
máis interesante.

741
00:32:32,399 --> 00:32:33,940
Pero agora deixe-me presentar outra etiqueta.

742
00:32:33,940 --> 00:32:36,500
Acontece por aí é unha etiqueta de formulario.

743
00:32:36,500 --> 00:32:38,400
E déixeme pechar a etiqueta.

744
00:32:38,400 --> 00:32:40,830
E verifícase que hai
unha marca de entrada que

745
00:32:40,830 --> 00:32:44,600
ten un atributo chamado tipo, que
é do tipo de campo de datos,

746
00:32:44,600 --> 00:32:45,200
se quere.

747
00:32:45,200 --> 00:32:47,050
E será do tipo texto.

748
00:32:47,050 --> 00:32:52,200
E o seu valor vai
ser CS50 Search.

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

750
00:32:53,850 --> 00:32:57,100
E non vai ser ningunha noción de
abrindo e pechando con marcas separadas.

751
00:32:57,100 --> 00:33:00,300
>> Déixeme volver para aquí e
ver o que está pasando, actualizar.

752
00:33:00,300 --> 00:33:01,380
Quedando interesante.

753
00:33:01,380 --> 00:33:02,950
Parece que é un campo de texto.

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

755
00:33:04,080 --> 00:33:06,999
E de feito, eu non quería
poñer un valor alí aínda.

756
00:33:06,999 --> 00:33:10,040
Déixeme volver aquí e realmente comezar
librar dese valor para mantelo simple.

757
00:33:10,040 --> 00:33:12,939
En vez de un valor, o que eu quería
para dar esa cousa era un nome.

758
00:33:12,939 --> 00:33:15,230
E eu non sei o que é,
entón eu vou volver a iso.

759
00:33:15,230 --> 00:33:18,270
>> Pero debaixo diso, quero
facer input type = someter.

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

761
00:33:19,840 --> 00:33:22,120
E este valor será CS50 Search.

762
00:33:22,120 --> 00:33:24,850
E imos ver por que eu
cambiou-se o valor para este.

763
00:33:24,850 --> 00:33:28,900
Cando actualizar, eu parezo ter agora
os inicios da miña propia investigación

764
00:33:28,900 --> 00:33:30,820
motor, super hediondo,
aínda que, a verdade, é

765
00:33:30,820 --> 00:33:34,260
non un lanzamento lonxe do que
Páxina estándar de Google parece.

766
00:33:34,260 --> 00:33:37,950
>> Se eu ir aquí e agora, podo escribir
gatos e esperamos prema Buscar.

767
00:33:37,950 --> 00:33:40,380
Pero eu non estou ben feito aínda,
porque eu non aplicaron,

768
00:33:40,380 --> 00:33:41,045
obviamente, unha base de datos.

769
00:33:41,045 --> 00:33:42,940
Non arrastrou o
web para resultados de busca.

770
00:33:42,940 --> 00:33:44,840
Entón eu teño terceirizar que para Google.

771
00:33:44,840 --> 00:33:46,290
Entón, como podo facer iso?

772
00:33:46,290 --> 00:33:49,170
>> Ben, primeiro de todo eu
que engadir e acción

773
00:33:49,170 --> 00:33:58,460
atribuír a miña forma de etiqueta que
é http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
E sei que só de ter
inferida polo ollar de preto

775
00:34:01,180 --> 00:34:02,505
na súa URL.

776
00:34:02,505 --> 00:34:03,380
E agora dar un palpite.

777
00:34:03,380 --> 00:34:09,090
O que debe este campo de texto probablemente
chamarse, desde onde nos vimos

778
00:34:09,090 --> 00:34:09,754
de antes?

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

780
00:34:11,896 --> 00:34:13,290
>> Audiencia :? Q.

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

782
00:34:14,370 --> 00:34:17,800
E nós realmente non precisa pregunta
marcalo saír, pero q é realmente iso,

783
00:34:17,800 --> 00:34:20,489
q para consulta probablemente por
defecto, só porque iso é

784
00:34:20,489 --> 00:34:23,060
o que Larry e Sergey
veu con anos.

785
00:34:23,060 --> 00:34:24,739
Entón, agora deixe-me recargue esta páxina.

786
00:34:24,739 --> 00:34:26,409
Non parece tan diferente.

787
00:34:26,409 --> 00:34:28,120
Pero agora mira o que acontece.

788
00:34:28,120 --> 00:34:32,360
>> Se eu escribir en gatos e prema
CS50 procura e deixar ir,

789
00:34:32,360 --> 00:34:35,770
entender que me levou
lonxe de real Google.

790
00:34:35,770 --> 00:34:38,150
Agora, Google está a ser un pouco
irritante en que son

791
00:34:38,150 --> 00:34:41,877
anexando un parámetro adicional,
se, ao URL.

792
00:34:41,877 --> 00:34:43,960
É todo o que está pasando
automaticamente na parte de Google.

793
00:34:43,960 --> 00:34:48,730
>> A parte importante é que eu parezo
xerar esta solicitude aquí.

794
00:34:48,730 --> 00:34:50,179
E, de feito, iso é o que pasa.

795
00:34:50,179 --> 00:34:53,040
Cando ten HTML que
parécese tanto, este

796
00:34:53,040 --> 00:34:57,620
é unha especie de desenvolvedores web notación
por dicir, vai adiante e crear un formulario

797
00:34:57,620 --> 00:34:59,990
que cando é sometido,
está indo a ir a esta URL.

798
00:34:59,990 --> 00:35:03,430
E cando a URL proporcionou
valores para cousas como q,

799
00:35:03,430 --> 00:35:05,440
non van só para este URL.

800
00:35:05,440 --> 00:35:08,210
De feito, vaia á cuestión
marca e entón q = gatos.

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

802
00:35:09,590 --> 00:35:13,060
Engada o parámetro, o
Parámetro HTTP así.

803
00:35:13,060 --> 00:35:15,590
>> E só para ser super precisa,
o que está a ser inferida aquí-

804
00:35:15,590 --> 00:35:18,130
pero eu vou ser máis explicit-- é
que o método que desexa usar

805
00:35:18,130 --> 00:35:22,270
é obter, no canto de algo como
post, que imos finalmente ver.

806
00:35:22,270 --> 00:35:27,710
Así, en breve, simplemente pola comprensión
HTML e usando algunhas etiquetas moi sinxelo,

807
00:35:27,710 --> 00:35:30,610
agora podemos comezar a crear
noso propio usuario final fronte

808
00:35:30,610 --> 00:35:32,850
de interface con unha busca
motor detrás del.

809
00:35:32,850 --> 00:35:34,800
>> Pero iso, claro, é moi hediondo.

810
00:35:34,800 --> 00:35:37,259
Entón deixe-me realmente abrir
unha versión un pouco mellor.

811
00:35:37,259 --> 00:35:39,800
Iso é o que eu preparado en
avanzar que ten algúns comentarios.

812
00:35:39,800 --> 00:35:41,900
Pero vai ver que eu
practicamente recriou.

813
00:35:41,900 --> 00:35:44,150
Polo tanto, este xa está dispoñible en liña.

814
00:35:44,150 --> 00:35:48,050
E eu fixen acontecer con cautelarmente
ir https só para mantelo simple.

815
00:35:48,050 --> 00:35:50,610
>> E agora imos abrir un
próxima iteração deste.

816
00:35:50,610 --> 00:35:52,510
É a versión 1 no canto de 0.

817
00:35:52,510 --> 00:35:55,315
O que salta á vista como algo
diferente neste exemplo?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> Audiencia: [inaudível].

820
00:36:00,440 --> 00:36:03,020
>> Si, non hai este centro align texto.

821
00:36:03,020 --> 00:36:04,590
Isto é un pouco raro por aquí.

822
00:36:04,590 --> 00:36:06,150
Pero esta é realmente novo.

823
00:36:06,150 --> 00:36:07,800
E quizais adiviñar o que vai ocorrer.

824
00:36:07,800 --> 00:36:11,730
Se eu ir ao meu navegador agora
e visitar búscase 1.html,

825
00:36:11,730 --> 00:36:13,090
é case o mesmo.

826
00:36:13,090 --> 00:36:15,705
Pero é un paso máis preto de
sendo un pouco máis fermosa.

827
00:36:15,705 --> 00:36:19,150
Aínda é feo, pero máis fermosa en que
polo menos, todo está agora centrado.

828
00:36:19,150 --> 00:36:23,470
>> Así, verifícase que o que eu estou a usar
é outra lingua completamente chamada

829
00:36:23,470 --> 00:36:25,680
CSS, follas de estilo en cascada.

830
00:36:25,680 --> 00:36:28,310
E CSS, a verdade, é unha especie
de, na miña opinión persoal,

831
00:36:28,310 --> 00:36:29,775
unha linguaxe atrozmente designado.

832
00:36:29,775 --> 00:36:33,110
É moi aburrido para recordar
todo varios detalles.

833
00:36:33,110 --> 00:36:38,479
Pero é o que estiliza a
toda web en todo o mundo hoxe.

834
00:36:38,479 --> 00:36:39,270
Eu ofendín a alguén.

835
00:36:39,270 --> 00:36:39,769
Todo correcto.

836
00:36:39,769 --> 00:36:43,180
Entón, imos voltar aquí para ver
como estamos realmente a usar iso.

837
00:36:43,180 --> 00:36:45,940
E ao parecer, polo menos é
en realidade, unha linguaxe moi sinxela.

838
00:36:45,940 --> 00:36:49,470
É só pares de valores clave, propiedades
e valores, propiedades e valores.

839
00:36:49,470 --> 00:36:52,080
De feito, aquí é un
tal propiedade e valor.

840
00:36:52,080 --> 00:36:55,890
>> Simplemente usando o estilo
atributo na miña tag corpo

841
00:36:55,890 --> 00:37:00,360
e dándolle un valor dun
colon palabra e outra palabra,

842
00:37:00,360 --> 00:37:03,730
ou unha propiedade e un valor,
I pode afectar a estética

843
00:37:03,730 --> 00:37:06,210
da páxina web, non
necesariamente da estrutura, con todo,

844
00:37:06,210 --> 00:37:07,550
pero a estética do mesmo.

845
00:37:07,550 --> 00:37:10,960
E só por buscar por aí, eu entendo
que as follas de CSS, de estilo en cascada,

846
00:37:10,960 --> 00:37:14,170
soporta unha propiedade chamada
text-align, cuxo valor pode

847
00:37:14,170 --> 00:37:16,980
ser á esquerda, dereita ou centro, por exemplo.

848
00:37:16,980 --> 00:37:19,990
>> Entón agora cando recargar
Nesta páxina, o que eu puiden

849
00:37:19,990 --> 00:37:22,730
era unha páxina centrada,
pero aínda así feo.

850
00:37:22,730 --> 00:37:25,770
Imos ir adiante e abrir
ata a versión 2 da Investigación.

851
00:37:25,770 --> 00:37:28,570
E agora entende que fixen un pouco máis.

852
00:37:28,570 --> 00:37:33,760
Lembra que até aquí dentro da cabeza
tag, pode haber máis que título.

853
00:37:33,760 --> 00:37:35,400
De feito, hai unha marca de estilo.

854
00:37:35,400 --> 00:37:38,630
E é aí que só queda un
pouco a ver CSS confuso ás veces.

855
00:37:38,630 --> 00:37:41,971
>> Teña en conta que me parece algo
que estruturalmente parece moi diferente.

856
00:37:41,971 --> 00:37:44,095
Pero aquí é o nome
tag Quero estilizado.

857
00:37:44,095 --> 00:37:47,570
Aquí están os nosos vellos amigos crespos
cintas e chaveta pechado.

858
00:37:47,570 --> 00:37:50,290
E entón aquí é que
propiedade eo seu valor.

859
00:37:50,290 --> 00:37:56,300
>> Se eu cargar este ficheiro, search2.html,
o resultado final é o mesmo.

860
00:37:56,300 --> 00:37:59,300
Pero é un paso cara a unha mellor deseño.

861
00:37:59,300 --> 00:38:04,560
Ao fatorar o presente CSS, eu teño
non mesturado co meu HTML.

862
00:38:04,560 --> 00:38:07,560
E, de feito, como veremos, eu podería
reutilizar estas propiedades e valores.

863
00:38:07,560 --> 00:38:10,420
Se eu quixese facer acios de
partes da miña páxina web centrada,

864
00:38:10,420 --> 00:38:13,630
Non teño que escribir style = text-align
centro de todo o lugar.

865
00:38:13,630 --> 00:38:16,580
Podo poñer nun só lugar
Quizais, como na parte superior.

866
00:38:16,580 --> 00:38:18,210
>> Pero aínda que non é o mellor deseño.

867
00:38:18,210 --> 00:38:21,720
De feito, unha das cousas que vai aprender
como gastar máis e máis tempo con

868
00:38:21,720 --> 00:38:25,730
programación web é que canto máis lle poida
modularizar cousas e factor de cousas

869
00:38:25,730 --> 00:38:30,610
como ficheiros .h nós imos factor material para fóra,
gusto helpers.c deixar-nos as cousas factor

870
00:38:30,610 --> 00:38:31,880
algunhas Serie de exercicios atrás.

871
00:38:31,880 --> 00:38:34,200
Do mesmo xeito, poderiamos
quere conseguir isto.

872
00:38:34,200 --> 00:38:37,920
>> Entón, observe na versión
tres de search.html teño

873
00:38:37,920 --> 00:38:40,610
limpa a cabeza de
a páxina e pode poñer

874
00:38:40,610 --> 00:38:43,320
nesta, unha etiqueta enlace, que
contrariamente ao nome,

875
00:38:43,320 --> 00:38:44,700
non lle dá un hipervínculo.

876
00:38:44,700 --> 00:38:49,150
Ela une a outro ficheiro a través de
un href cuxo valor, neste caso,

877
00:38:49,150 --> 00:38:51,586
é procura-3.css

878
00:38:51,586 --> 00:38:52,960
Entón eu entender que nós estamos indo rápido.

879
00:38:52,960 --> 00:38:54,600
Pero todo o que eu estou facendo é unha especie
de mover as cousas.

880
00:38:54,600 --> 00:38:55,760
Déixeme aberto búscase 3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Non é, nada realmente a el.

883
00:38:58,530 --> 00:39:02,270
Eu só copiei e colei nunha nova
ficheiro, así como nós consignado material para fóra

884
00:39:02,270 --> 00:39:03,509
noutros arquivos antes.

885
00:39:03,509 --> 00:39:05,300
E o result--
completamente underwhelming--

886
00:39:05,300 --> 00:39:06,730
será exactamente o mesmo.

887
00:39:06,730 --> 00:39:10,490
Pero estamos movendo toward-- non, non é.

888
00:39:10,490 --> 00:39:11,930
Oh, eu sei por que.

889
00:39:11,930 --> 00:39:13,790
>> Así, parece ser un erro.

890
00:39:13,790 --> 00:39:15,010
E é nalgún sentido.

891
00:39:15,010 --> 00:39:17,730
Pero déixeme abrir o meu guía Rede.

892
00:39:17,730 --> 00:39:19,660
Déixeme volver cargar a páxina.

893
00:39:19,660 --> 00:39:23,315
Ah, por que o CSS non sendo aplicado?

894
00:39:23,315 --> 00:39:26,920
Ben, o arquivo CSS, do mesmo xeito, ten
para ser lexible, por así dicir.

895
00:39:26,920 --> 00:39:28,440
E iso tamén está prohibido.

896
00:39:28,440 --> 00:39:33,760
Entón deixe-me facer un chmod a + r
da estrela dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
estamos CSS punto é só o
extensión de ficheiro para ficheiros CSS.

898
00:39:37,067 --> 00:39:38,900
Agora déixeme volver
meu navegador e reload.

899
00:39:38,900 --> 00:39:40,910
OK, un pouco mellor.

900
00:39:40,910 --> 00:39:42,282
>> Agora, deixe-me facer unha última cousa.

901
00:39:42,282 --> 00:39:42,990
En busca-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Eu teño unha versión que eu só pensaba
era moito máis legal, aínda que forma máis

904
00:39:48,220 --> 00:39:48,980
complicada.

905
00:39:48,980 --> 00:39:50,690
Vexamos o resultado primeiro.

906
00:39:50,690 --> 00:39:52,290
Pechar esta para dar máis espazo.

907
00:39:52,290 --> 00:39:54,275
Cambie isto para buscar-4, Intro.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> E agora unha chea de cousas están rotos.

910
00:39:57,200 --> 00:39:59,910
Vou volver
no meu directorio aquí.

911
00:39:59,910 --> 00:40:04,190
E agora eu estou indo só para facer
un chmod dun + r nun file--

912
00:40:04,190 --> 00:40:07,450
porque sei que exists-- chamado
logo.gif, que é unha imaxe.

913
00:40:07,450 --> 00:40:08,590
E agora actualizar.

914
00:40:08,590 --> 00:40:11,040
E wow-- entón agora eu son
ben preto, francamente,

915
00:40:11,040 --> 00:40:15,860
gusta da versión de 1999 de Google, e
francamente, a versión 2014 de Google,

916
00:40:15,860 --> 00:40:16,360
non?

917
00:40:16,360 --> 00:40:21,920
>> Por iso, agora vai para o seu sitio web,
en última instancia, se eu buscar gatos.

918
00:40:21,920 --> 00:40:23,900
E de feito é.

919
00:40:23,900 --> 00:40:26,410
Pero o que eu faría diferente
nesta versión 4?

920
00:40:26,410 --> 00:40:28,020
Polo tanto, non imos alongar moito sobre iso aquí.

921
00:40:28,020 --> 00:40:30,100
Verá que en problema
definir sete eventualmente.

922
00:40:30,100 --> 00:40:31,350
Pero repare que eu fixen algunhas cousas.

923
00:40:31,350 --> 00:40:33,690
>> Eu presentei unha div
tag, que é a división,

924
00:40:33,690 --> 00:40:35,450
semellante en espírito a un tag de parágrafo.

925
00:40:35,450 --> 00:40:38,220
Pero a división é igual, é aquí
unha rexión rectangular invisible

926
00:40:38,220 --> 00:40:39,150
da pantalla.

927
00:40:39,150 --> 00:40:41,680
Imos darlle unha única
identificador, un pé de páxina, só

928
00:40:41,680 --> 00:40:44,700
para que poidamos falar de
Lo noutro lugar no noso HTML.

929
00:40:44,700 --> 00:40:47,952
Aquí está outra div da páxina
cuxo ID será o contido.

930
00:40:47,952 --> 00:40:49,160
É o contido da páxina.

931
00:40:49,160 --> 00:40:51,090
E aquí é a cabeceira da páxina.

932
00:40:51,090 --> 00:40:54,960
>> Noutras palabras, eu teño
esencialmente HTML son mental

933
00:40:54,960 --> 00:40:57,700
ver esta páxina web como
tres compoñentes, unha cabeceira

934
00:40:57,700 --> 00:41:01,200
ata aquí con este rectángulo invisible,
o contido no medio, e, a continuación

935
00:41:01,200 --> 00:41:04,800
o pé por baixo, mesmo
aínda que non vemos isto.

936
00:41:04,800 --> 00:41:09,940
Porque quero na miña cabeza de
páxina aquí, ou nun ficheiro .css,

937
00:41:09,940 --> 00:41:11,460
Podo usar esta sintaxe.

938
00:41:11,460 --> 00:41:13,070
>> Header non é unha etiqueta.

939
00:41:13,070 --> 00:41:17,060
É unha ID para que se transforma
que facendo #header,

940
00:41:17,060 --> 00:41:20,840
Agora podo aplicar unha ou máis
Propiedades para a cabeceira.

941
00:41:20,840 --> 00:41:24,130
Podo facer o mesmo contido,
o mesmo ao contido aquí.

942
00:41:24,130 --> 00:41:27,230
>> Así, por exemplo, no rodapé, o aviso previo
todas estas propiedades estou engadindo.

943
00:41:27,230 --> 00:41:30,660
E sei que hai só pola lectura
se sobre a documentación para CSS.

944
00:41:30,660 --> 00:41:33,450
Tamaño da fonte será smaller--
de ningún xeito o tamaño da fonte relativa.

945
00:41:33,450 --> 00:41:34,741
O peso será ousado.

946
00:41:34,741 --> 00:41:37,340
Margin-- cantos píxeles
en torno ele-- é de 20 píxeles.

947
00:41:37,340 --> 00:41:38,590
E iso será centrado.

948
00:41:38,590 --> 00:41:40,256
>> Pero agora, a páxina se parece con isto.

949
00:41:40,256 --> 00:41:42,840
Se eu non está satisfeito con
miña copia alí,

950
00:41:42,840 --> 00:41:46,560
Podería facer algo parecido coa cor vermella.

951
00:41:46,560 --> 00:41:50,570
E entón podo gardar este, reload,
e agora eu teño estilizado rodapé.

952
00:41:50,570 --> 00:41:54,130
Polo tanto, esta é só insinuando o poder
do que se pode facer nunha páxina web

953
00:41:54,130 --> 00:41:55,510
para cambiar as cousas ao redor.

954
00:41:55,510 --> 00:41:59,080
>> E aínda máis frío do que iso, se quere
para bisbilhotar sitios reais,

955
00:41:59,080 --> 00:42:00,810
non pode muda-los permanentemente.

956
00:42:00,810 --> 00:42:03,640
Pero se eu abrir
Inspector de Chrome novo

957
00:42:03,640 --> 00:42:07,610
e eu non vaia á esquerda
aquí, o que demostra HTML de Facebook,

958
00:42:07,610 --> 00:42:11,380
pero mostra á dereita
lado todo o seu CSS,

959
00:42:11,380 --> 00:42:13,789
pode e
cambiar as cousas en tempo real.

960
00:42:13,789 --> 00:42:15,080
Entón deixe-me ir adiante e facelo.

961
00:42:15,080 --> 00:42:18,670
>> Deixe-me ir adiante e control
clic sobre esta palabra aleatoria aquí,

962
00:42:18,670 --> 00:42:21,230
asinar e prema en Inspect Element.

963
00:42:21,230 --> 00:42:25,130
Chrome salta moi cómodo para
tag h1 que Facebook está a usar.

964
00:42:25,130 --> 00:42:27,290
E teña en conta aquí Facebook
ten tipo de preguizosamente

965
00:42:27,290 --> 00:42:29,960
codificado tamaño da fonte como unha propiedade aquí.

966
00:42:29,960 --> 00:42:33,530
>> Entón, o legal é que
que se eu realmente entrar aquí

967
00:42:33,530 --> 00:42:39,560
e dicir, oh, Facebook, eu non me gusta que
64 píxeles, podemos agora cambiar Facebook.

968
00:42:39,560 --> 00:42:42,590
Por suposto, estamos só mudándose o
para min, persoalmente, no momento.

969
00:42:42,590 --> 00:42:45,150
Pero este é só un
ferramenta na nosa kit de ferramentas

970
00:42:45,150 --> 00:42:48,360
que vai permitir axustar
e descubrir e tamén diagnosticar

971
00:42:48,360 --> 00:42:49,729
cuestións nas nosas propias páxinas web.

972
00:42:49,729 --> 00:42:52,270
E poderiamos ir do mesmo xeito ao longo do
aquí, que é o mesmo.

973
00:42:52,270 --> 00:42:55,830
Se realmente quere comezar a fantasía, eu
É dicir, agora pode realmente transformar a páxina

974
00:42:55,830 --> 00:42:57,380
e facer cousas malucas.

975
00:42:57,380 --> 00:42:59,870
>> Entón, por que todo isto é útil?

976
00:42:59,870 --> 00:43:02,330
Ben, en definitiva, estamos
Vai querer ser

977
00:43:02,330 --> 00:43:07,110
capaz de crear páxinas web que
son movidos polos nosos propios fins de volta,

978
00:43:07,110 --> 00:43:10,520
non só por Google e
terceirização de back-end alí.

979
00:43:10,520 --> 00:43:13,510
Nós, en realidade, quere o
valor, por exemplo,

980
00:43:13,510 --> 00:43:18,830
da acción de noso buscador
asignar a ir non a outra persoa,

981
00:43:18,830 --> 00:43:24,270
pero para algo como search.php,
onde search.php é no noso propio servidor,

982
00:43:24,270 --> 00:43:25,670
non no doutra persoa.

983
00:43:25,670 --> 00:43:30,316
>> E así, para chegar alí, nós realmente
necesidade de introducir unha nova lingua.

984
00:43:30,316 --> 00:43:33,190
Entón nós xa mirou para un novo
linguaxe aquí, ou dous realmente, HTML

985
00:43:33,190 --> 00:43:33,700
e CSS.

986
00:43:33,700 --> 00:43:36,330
Pero realmente son só
linguaxes estruturais e estéticos.

987
00:43:36,330 --> 00:43:38,360
Eles non están programando
linguas per se.

988
00:43:38,360 --> 00:43:41,160
E iso é tanto formais
tempo que imos gastar con eles.

989
00:43:41,160 --> 00:43:44,910
Porque nós imos comezar agora
a transición ao PHP.

990
00:43:44,910 --> 00:43:48,160
>> Entón PHP é unha real
linguaxe de programación.

991
00:43:48,160 --> 00:43:50,750
É unha linguaxe de script
no sentido de que é

992
00:43:50,750 --> 00:43:52,855
pretende ser máis leve
do que algo como C.

993
00:43:52,855 --> 00:43:56,082
E é unha linguaxe interpretada,
o que significa que non está compilado.

994
00:43:56,082 --> 00:43:58,790
Así, en poucas palabras, o que significaba
cando usamos unha linguaxe como C

995
00:43:58,790 --> 00:44:00,290
e tivemos que recompila-lo?

996
00:44:00,290 --> 00:44:02,120
Que significa para
compilar o código fonte C?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
Audiencia: [inaudível].

999
00:44:04,780 --> 00:44:06,184
DAVID J Malan: Diga isto de novo?

1000
00:44:06,184 --> 00:44:07,100
Audiencia: [inaudível].

1001
00:44:07,100 --> 00:44:07,962

1002
00:44:07,962 --> 00:44:08,920
DAVID J Malan: Perfecto.

1003
00:44:08,920 --> 00:44:10,180
El transforma-lo en binario.

1004
00:44:10,180 --> 00:44:14,200
El transforma ceros e uns
a partir do código fonte inglés-like real.

1005
00:44:14,200 --> 00:44:16,424
E entón podemos realmente
realizar estes ceros e uns

1006
00:44:16,424 --> 00:44:18,840
pasando-os a través do
CPU cun dobre clic nun icono

1007
00:44:18,840 --> 00:44:19,980
ou executar un comando.

1008
00:44:19,980 --> 00:44:23,770
>> PHP e Python e Ruby
e Perl e JavaScript

1009
00:44:23,770 --> 00:44:26,250
e acios de outro
linguas son interpretadas

1010
00:44:26,250 --> 00:44:29,290
linguas, o que quere dicir
non recompila-los.

1011
00:44:29,290 --> 00:44:34,220
Pola contra, ten alimento-los como entrada para
un programa chamado un intérprete.

1012
00:44:34,220 --> 00:44:36,640
E iso intérprete,
que alguén escribiu,

1013
00:44:36,640 --> 00:44:40,930
le o código fonte superior para abaixo,
esquerda a dereita e só interpreta

1014
00:44:40,930 --> 00:44:43,000
estas liñas e fai o que di.

1015
00:44:43,000 --> 00:44:45,360
>> Entón, se atopa un
liña que di impresión,

1016
00:44:45,360 --> 00:44:48,660
iso non significa necesariamente converterse impresión
para os ceros e uns correspondentes.

1017
00:44:48,660 --> 00:44:51,910
El só ten ese intérprete como
un gran se a condición que di:

1018
00:44:51,910 --> 00:44:56,110
se a instrución do programador é
de impresión, logo faga o seguinte.

1019
00:44:56,110 --> 00:44:58,170
Por iso, interprétase o só
por tipo de razoamento

1020
00:44:58,170 --> 00:44:59,800
a través do que está dicindo que el faga.

1021
00:44:59,800 --> 00:45:01,320
>> E PHP é unha das linguas.

1022
00:45:01,320 --> 00:45:05,310
E PHP anos foi deseñado
precisamente para programación web.

1023
00:45:05,310 --> 00:45:08,160
E foi inicialmente un
linguaxe confusa moi desleixado.

1024
00:45:08,160 --> 00:45:10,940
E, de feito, hai unha enorme
cantidade de código PHP malo por aí.

1025
00:45:10,940 --> 00:45:13,520
Pero a propia linguaxe
madurou ó longo dos anos,

1026
00:45:13,520 --> 00:45:16,200
tanto que agora é
en realidade, un marabilloso seguinte paso

1027
00:45:16,200 --> 00:45:19,970
pedagoxicamente de C, porque é
tan enervante familiar para todo

1028
00:45:19,970 --> 00:45:22,380
acaba de ver nas últimas semanas.

1029
00:45:22,380 --> 00:45:25,724
>> A única diferenza inicial veremos
é que non hai función principal máis.

1030
00:45:25,724 --> 00:45:28,890
Cando comezar a escribir código, só
será executado, non importa o que,

1031
00:45:28,890 --> 00:45:30,220
como veremos en un momento.

1032
00:45:30,220 --> 00:45:33,320
Mentres tanto, aquí está o que un
variable parece en PHP.

1033
00:45:33,320 --> 00:45:35,840
É un pouco diferente,
pero só mal.

1034
00:45:35,840 --> 00:45:39,380
>> En PHP, non hai tipificação forte.

1035
00:45:39,380 --> 00:45:41,430
Hai semanas dixitación,
que significa que non

1036
00:45:41,430 --> 00:45:44,030
son tipos de datos como cordas
e números e outras cousas.

1037
00:45:44,030 --> 00:45:47,030
Pero non se molesta especificando
o que son máis.

1038
00:45:47,030 --> 00:45:48,980
PHP figuras-lo para ti.

1039
00:45:48,980 --> 00:45:52,030
O sinal de dólar é só unha decisión
que o pobo fixo PHP anos

1040
00:45:52,030 --> 00:45:54,890
detrás de tal forma que calquera variable en PHP
só comeza con un sinal de dólar.

1041
00:45:54,890 --> 00:45:58,130
Realmente tipo de útil na que
salta en ti un pouco máis.

1042
00:45:58,130 --> 00:46:01,315
>> Pero despois diso, este
é unha condición en PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
¿Que é diferente en relación C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Truco question-- nada,
que é realmente moi bo.

1047
00:46:09,600 --> 00:46:12,140
As expresións booleanas en PHP-- o mesmo.

1048
00:46:12,140 --> 00:46:19,354
As expresións booleanas con e contra
ou, interruptores, loops, loops, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
este é diferente.

1050
00:46:20,270 --> 00:46:22,660
>> Así, verifícase aí é un
par doutros recursos de PHP.

1051
00:46:22,660 --> 00:46:25,243
Un deles é realmente iso,
que é marabillosas cómodo.

1052
00:46:25,243 --> 00:46:29,250
Se $ números é unha matriz que ten
declarados previamente nun programa,

1053
00:46:29,250 --> 00:46:33,350
ten esa fantasía para cada construto
que en vez de facer todo isto

1054
00:46:33,350 --> 00:46:37,020
irritante I é igual a 0, I é
menos que iso, [? I ++?],

1055
00:46:37,020 --> 00:46:40,320
para cada un dos números como o número, onde cada
deses valores sinal de dólar é só

1056
00:46:40,320 --> 00:46:42,790
unha variable, e esta última
pode pensar como I.

1057
00:46:42,790 --> 00:46:44,290
Podería chamalo de calquera cousa que sexa.

1058
00:46:44,290 --> 00:46:45,770
Chameino a de número.

1059
00:46:45,770 --> 00:46:48,825
Isto vai iterado
a matriz de números de chamada.

1060
00:46:48,825 --> 00:46:51,200
E en cada iteración, é
vai actualizar automaticamente

1061
00:46:51,200 --> 00:46:54,340
para ti o número cifrão
variable para que constantemente

1062
00:46:54,340 --> 00:46:58,210
ter acceso á variable que desexe
sen ter que facer calquera corchete

1063
00:46:58,210 --> 00:47:00,980
notación ou a indexación nunha matriz.

1064
00:47:00,980 --> 00:47:04,950
>> Ademais, aínda temos cousas como
matrices, que parecen case o mesmo,

1065
00:47:04,950 --> 00:47:08,210
agás que é moi común, como veremos
ver, tanto en PHP e JavaScript

1066
00:47:08,210 --> 00:47:10,750
para pre arrincar unha matriz
usar corchetes.

1067
00:47:10,750 --> 00:47:12,040
C usa chaves.

1068
00:47:12,040 --> 00:47:15,330
Por iso, é un pouco diferente, aínda que
nós realmente non usar ese truco moito.

1069
00:47:15,330 --> 00:47:20,090
>> Pero aínda máis poderosa,
PHP ten matrices asociativas,

1070
00:47:20,090 --> 00:47:23,100
que é un xeito extravagante
de dicir táboas de hash.

1071
00:47:23,100 --> 00:47:31,610
En realidade, se quere declarar un hash
mesa en PHP, a diferenza de C-- cantos

1072
00:47:31,610 --> 00:47:34,775
liñas de código tardou para
realmente implementar unha táboa hash en C?

1073
00:47:34,775 --> 00:47:38,310
Ou cantas liñas de código é
tomando para aplicar unha táboa hash en C?

1074
00:47:38,310 --> 00:47:39,820
Por iso, pode ser moito, non?

1075
00:47:39,820 --> 00:47:41,680
É unha ducia, quizais 100 ou 200.

1076
00:47:41,680 --> 00:47:42,980
É trivial.

1077
00:47:42,980 --> 00:47:45,420
Ou que está a piques de ser, como
en breve vai ver, non trivial

1078
00:47:45,420 --> 00:47:48,080
para aplicar unha táboa hash
[Inaudível] e tamén un intento.

1079
00:47:48,080 --> 00:47:50,580
Pero en PHP-- e, francamente, eu
probablemente non debería dicir iso

1080
00:47:50,580 --> 00:47:53,630
ata Monday-- en PHP, se
quere unha mesa, feito.

1081
00:47:53,630 --> 00:47:56,431
Isto é un hash mesa-- así
cunha liña de código.

1082
00:47:56,431 --> 00:47:56,930
E

1083
00:47:56,930 --> 00:47:58,810
>> Unha morea de linguas facelo.

1084
00:47:58,810 --> 00:48:00,190
Disfrútao con pset cinco.

1085
00:48:00,190 --> 00:48:01,980
Entón, unha morea de linguas facelo.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
Eles dan-lle estas abstraccións
que outras persoas, outros programadores,

1088
00:48:06,140 --> 00:48:09,870
creamos para ti, de xeito que
pode estar nos seus ombreiros

1089
00:48:09,870 --> 00:48:13,290
e comezar a usar as ideas que son super
convincente, como táboas de hash e árbores

1090
00:48:13,290 --> 00:48:14,140
e tenta.

1091
00:48:14,140 --> 00:48:17,790
Pero non ten que necesariamente
aplicar estas cousas ti mesmo.

1092
00:48:17,790 --> 00:48:20,850
>> E así, en definitiva, o que
imos usar o PHP para

1093
00:48:20,850 --> 00:48:23,580
é potencialmente escribir programas
da liña de comandos chamada.

1094
00:48:23,580 --> 00:48:26,600
Poderiamos recrear cada programa
escribimos neste semestre, ata o momento,

1095
00:48:26,600 --> 00:48:30,410
agás, quizais, Breakout, que utiliza SPL,
o cal é específico para C no momento.

1096
00:48:30,410 --> 00:48:33,100
Pero todos os outros problemas definir,
certamente Mario e César

1097
00:48:33,100 --> 00:48:35,300
e Vigenère e
[? Crack?] E para adiante, nós

1098
00:48:35,300 --> 00:48:39,520
podería re-aplicar en PHP, e
probablemente un pouco máis facilmente.

1099
00:48:39,520 --> 00:48:43,050
>> Pero o que nós estamos indo en definitiva,
usar o PHP para programación web é.

1100
00:48:43,050 --> 00:48:46,420
E imos introducir próxima
semana un modelo mental, un paradigma chamado

1101
00:48:46,420 --> 00:48:49,610
MVC, controlador de vista do modelo,
que se ten feito a programación

1102
00:48:49,610 --> 00:48:51,610
antes en Python ou
Ruby ou noutro lugar,

1103
00:48:51,610 --> 00:48:54,112
podería saber desa equipo con
Rails e Django e afíns.

1104
00:48:54,112 --> 00:48:55,820
Pero se vostede é novo para
iso tamén, verás

1105
00:48:55,820 --> 00:48:59,652
que este é realmente un moi natural
extensión da fatoração

1106
00:48:59,652 --> 00:49:01,360
e do tipo de proxecto
de código que temos

1107
00:49:01,360 --> 00:49:04,670
feito en C. Nós imos agora
aplicar algunhas destas leccións para PHP

1108
00:49:04,670 --> 00:49:07,190
de xeito que, en definitiva, estamos
aplicar os nosos propios sitios.

1109
00:49:07,190 --> 00:49:09,080
E se é unha especie de
hipnotizado ou espantado

1110
00:49:09,080 --> 00:49:10,954
que nós imos facer
todo o tan axiña,

1111
00:49:10,954 --> 00:49:13,410
entender que case todo
semestre, preto de 90%

1112
00:49:13,410 --> 00:49:16,560
de estudantes CS50, incluíndo os
quen nunca programou antes,

1113
00:49:16,560 --> 00:49:20,329
acaban facendo proxectos finais que
están baseados en programación web.

1114
00:49:20,329 --> 00:49:23,120
E así vai ver que os retorno
son altos nas semanas que virán.

1115
00:49:23,120 --> 00:49:24,965
Entón, imos velo logo o luns.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> COLUMNA 1: E agora, o Deep
Pensamentos por Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
As táboas de hash.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [Risas]

1122
00:49:38,402 --> 00:49:38,902