1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Semana 9, continuación]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Harvard University]

3
00:00:05,160 --> 00:00:07,020
[Esta é CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Este é CS50. Este é o fin da semana 9. Moitas grazas.

5
00:00:13,340 --> 00:00:15,310
Finalmente. Semana 9. Eu teño.

6
00:00:15,310 --> 00:00:18,590
Hoxe imos continuar a nosa conversa sobre programación web

7
00:00:18,590 --> 00:00:21,660
con un ollo para o proxecto final non, porque ten que facer algo baseado na web

8
00:00:21,660 --> 00:00:25,610
para proxectos finais, senón porque tanto para proxectos finais ou despois CS50

9
00:00:25,610 --> 00:00:29,000
Esta é certamente a dirección en que o software moderno está indo.

10
00:00:29,000 --> 00:00:31,770
E aínda non é realmente unha cousa fácil.

11
00:00:31,770 --> 00:00:35,040
En realidade, unha das cousas máis difíciles de facer é o aspecto do deseño.

12
00:00:35,040 --> 00:00:38,600
>> Por exemplo, o proxecto, queremos dicir realmente empezando a interface de usuario

13
00:00:38,600 --> 00:00:40,420
ou a experiencia do usuario correcto.

14
00:00:40,420 --> 00:00:43,200
Eu ouso dicir - e sabemos que a partir dun conxunto de problemas recentes

15
00:00:43,200 --> 00:00:45,960
cando algúns de vostedes foi ao ar súas queixas sobre algún anaco de software

16
00:00:45,960 --> 00:00:49,000
ou hardware que enfurece ti, sexa no campus ou fóra -

17
00:00:49,000 --> 00:00:51,930
Hai unha morea de sitios por aí, hai unha morea de hardware aí fóra,

18
00:00:51,930 --> 00:00:53,900
que tipo de drogas.

19
00:00:53,900 --> 00:00:58,730
Pero a realidade é que facer cousas que son fáciles de usar, pero non deixan de ser poderoso

20
00:00:58,730 --> 00:01:00,550
É un reto moi difícil.

21
00:01:00,550 --> 00:01:03,680
Entón, para hoxe eu pedín José e Tommy a unirse a min aquí

22
00:01:03,680 --> 00:01:06,680
para que poidamos ter unha conversa, tanto sobre o proxecto

23
00:01:06,680 --> 00:01:09,090
e que tipo de procesos de pensamento que comezar a pasar pola súa cabeza

24
00:01:09,090 --> 00:01:12,040
Cando se crea os seus proxectos finais, os seus futuros proxectos.

25
00:01:12,040 --> 00:01:15,040
E entón, coa axuda de Tommy veremos algúns dos detalles de implementación.

26
00:01:15,040 --> 00:01:18,440
Como pode ter unha visión en papel ou na súa mente

27
00:01:18,440 --> 00:01:20,760
que pode executar programaticamente

28
00:01:20,760 --> 00:01:24,030
usando algunhas das tecnoloxías e técnicas que acaba de comezar a falar,

29
00:01:24,030 --> 00:01:29,080
ou sexa, JavaScript e algo aínda máis recente, ou sexa, AJAX, asynchronous JavaScript.

30
00:01:29,080 --> 00:01:32,950
Isto permite que cree os dinámica máis dunha interface de usuario

31
00:01:32,950 --> 00:01:35,780
obtendo máis e máis datos, progresivamente a partir dun servidor.

32
00:01:35,780 --> 00:01:38,560
Entón, imos ver algúns deses fragmentos ben hoxe.

33
00:01:38,560 --> 00:01:41,800
Como un aparte, se vostede está interesado en se concentrar en ciencia da computación

34
00:01:41,800 --> 00:01:45,010
ou minoring en ciencia da computación, sabe que este venres ao mediodía

35
00:01:45,010 --> 00:01:48,750
Maxwell en Dworkin 221 haberá un evento de pizza

36
00:01:48,750 --> 00:01:50,780
onde podes aprender un pouco máis sobre a ciencia da computación.

37
00:01:50,780 --> 00:01:54,860
No seu camiño cara a fóra do porto, hoxe vai ser capaz de incorporarse unha guía non-oficial de CS en Harvard.

38
00:01:54,860 --> 00:01:57,290
Imos poñelo en latas de lixo fóra á altura da cintura

39
00:01:57,290 --> 00:01:59,750
de xeito que, se quere incorporarse iso e aprender un pouco máis sobre CS,

40
00:01:59,750 --> 00:02:02,480
que vai estar alí para ti como foi a semana 0.

41
00:02:02,480 --> 00:02:06,500
Ademais, se quere unirse a nós para CS50 xantar onte ás 1:15 pm,

42
00:02:06,500 --> 00:02:09,800
cabeza para cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Sen máis delongas, eu darlle ensino compañeiro José ONG.

44
00:02:13,260 --> 00:02:19,190
Oi [Aplausos]

45
00:02:19,190 --> 00:02:20,770
Grazas.

46
00:02:20,770 --> 00:02:24,780
A primeira vez que eu aprendín sobre o proxecto estaba nunha clase aquí chamado CS179.

47
00:02:24,780 --> 00:02:28,040
>> O profesor da vez nos contou a historia sobre outro profesor

48
00:02:28,040 --> 00:02:31,640
que fora para un hotel e usou as billas.

49
00:02:31,640 --> 00:02:35,630
Alguén me pode dicir o que os dous botóns do lado esquerdo e dereito facer?

50
00:02:35,630 --> 00:02:39,080
[Alumno] quente e fría. >> Quente e fría. Bo

51
00:02:39,080 --> 00:02:41,430
O que normalmente espera, non?

52
00:02:41,430 --> 00:02:46,960
Este profesor despois de usar a billa quere tomar un baño, e pasa a usar isto.

53
00:02:46,960 --> 00:02:51,310
El cre que a esquerda e os lados dereito son para quente e frío, non?

54
00:02:51,310 --> 00:02:55,470
Pero alguén me pode dicir o que estes realmente facer?

55
00:02:55,470 --> 00:02:58,060
Calquera mans?

56
00:02:58,060 --> 00:03:01,740
[Resposta do alumno inaudível] >> Unha suxestión é?

57
00:03:01,740 --> 00:03:05,860
[Resposta do alumno inaudível] Temperatura? >>

58
00:03:05,860 --> 00:03:10,460
Entón un deles controla a temperatura e os outros controis? >> [Alumno] presión da auga.

59
00:03:10,460 --> 00:03:12,350
Presión da auga. Bo

60
00:03:12,350 --> 00:03:15,100
Este profesor camiña para iso e, pensando que eles están controlando quente e fría,

61
00:03:15,100 --> 00:03:21,470
transforma a un dereito que el pensa que é para quente, todo o camiño ata

62
00:03:21,470 --> 00:03:23,560
porque el quere tomar un baño quente.

63
00:03:23,560 --> 00:03:28,100
Ben, estes realmente non combinan, así que comeza esta experiencia non moi divertido

64
00:03:28,100 --> 00:03:31,110
de estar en un baño de auga fría, e todos sabemos o que sente.

65
00:03:31,110 --> 00:03:33,620
Este é un exemplo dun fallo de deseño.

66
00:03:33,620 --> 00:03:37,040
O que quero dicir con isto é a súa expectativa da billa

67
00:03:37,040 --> 00:03:39,420
non atopa o que saíu do baño,

68
00:03:39,420 --> 00:03:41,780
que é unha especie de infelices para el.

69
00:03:41,780 --> 00:03:44,990
Polo tanto, este é un exemplo de un fallo de deseño que ocorre na vida real.

70
00:03:44,990 --> 00:03:48,020
Pero vemos todo tipo de outras tamén.

71
00:03:48,020 --> 00:03:50,390
Non somos probablemente os fans do sistema MBTA.

72
00:03:50,390 --> 00:03:55,560
Este é un sistema de metro, en realidade, en Londres, que di: "Este botón non está en uso."

73
00:03:55,560 --> 00:04:00,220
Por que é mesmo alí? Por que lle importa?

74
00:04:00,220 --> 00:04:02,810
Cando eu era neno, sendo a tecnoloxía ilustrado na casa,

75
00:04:02,810 --> 00:04:05,050
sempre que o ordenador podería fallar, miña nai veu a min,

76
00:04:05,050 --> 00:04:07,060
mostrando-me esta pantalla e me pregunta o que pasou.

77
00:04:07,060 --> 00:04:09,210
>> Aínda que eu non sei o que iso significa.

78
00:04:11,890 --> 00:04:14,700
[Risas] O que?

79
00:04:16,950 --> 00:04:18,019
[Risas]

80
00:04:18,720 --> 00:04:23,050
Ás veces nos sentimos como os desenvolvedores de software son só corrico nós.

81
00:04:23,050 --> 00:04:28,460
Como usuarios, somos como, "O que está a suceder? Alguén nos dicir."

82
00:04:28,460 --> 00:04:32,140
Isto todo se reduce a unha cuestión de deseño.

83
00:04:32,140 --> 00:04:34,650
Deseño, como podemos ver, non é puramente sobre a estética,

84
00:04:34,650 --> 00:04:37,230
non é sobre como as cousas son.

85
00:04:37,230 --> 00:04:41,720
Vemos aquí que este pequeno emerxente por aquí, en realidade, parece moi bo.

86
00:04:41,720 --> 00:04:45,290
El ten unha sombra no fondo, ten raios de fronteira en curso.

87
00:04:45,290 --> 00:04:47,550
É unha especie de bonito.

88
00:04:47,550 --> 00:04:51,480
Non está moi ben deseñado, porque non é moi agradable.

89
00:04:51,480 --> 00:04:54,920
Que pouco emerxente que xorde realmente non me dar calquera información

90
00:04:54,920 --> 00:04:58,450
sobre o que está a suceder, iso non me di nada de como o usuario

91
00:04:58,450 --> 00:05:01,400
sobre como recuperar dese erro.

92
00:05:01,400 --> 00:05:05,190
Queremos pensar sobre as cousas que o deseño non é.

93
00:05:05,190 --> 00:05:06,670
En primeiro lugar, non é estética.

94
00:05:06,670 --> 00:05:10,800
Tampouco é encher o seu programa con toneladas de características innecesarias.

95
00:05:10,800 --> 00:05:14,890
Se vostede é un restaurante tailandés, probablemente non quere ser dentista, ao mesmo tempo.

96
00:05:14,890 --> 00:05:17,720
E con preguntas do Facebook non, que moitas persoas usaron

97
00:05:17,720 --> 00:05:21,130
e non era realmente o cerne do que eles estaban construíndo.

98
00:05:21,130 --> 00:05:24,200
E por iso é bo pensar non sobre tanto a cantidade das cousas

99
00:05:24,200 --> 00:05:26,390
que está poñendo a súa aplicación, pero a calidade

100
00:05:26,390 --> 00:05:28,910
e como está facendo que a experiencia do usuario mellor

101
00:05:28,910 --> 00:05:32,540
por realmente mellorar enriba do que xa ten.

102
00:05:32,540 --> 00:05:37,040
>> En poucas palabras, o proxecto di-nos o que debemos construír.

103
00:05:37,040 --> 00:05:41,950
Por exemplo, se nós estamos construíndo algo que imos buscar as cousas,

104
00:05:41,950 --> 00:05:45,970
como Google, por exemplo, que temos que facer as cousas dun xeito

105
00:05:45,970 --> 00:05:48,950
que require que o usuario tomar moitos click para chegar ao que eles queren,

106
00:05:48,950 --> 00:05:52,580
ou debemos facelo de forma, por exemplo, en Google Instant ou autocomplete

107
00:05:52,580 --> 00:05:54,970
que nos permite chegar aos nosos resultados máis rápidos?

108
00:05:54,970 --> 00:05:58,740
Enxeñaría implica, como Tommy ha amosar-lle, en realidade construíndo.

109
00:05:58,740 --> 00:06:01,890
Hai moitos tipos de deseño.

110
00:06:01,890 --> 00:06:06,070
Por exemplo, se está construíndo algo para implantar algo

111
00:06:06,070 --> 00:06:09,770
nun país do Terceiro Mundo, onde non hai moita electricidade ou que a tecnoloxía moito,

112
00:06:09,770 --> 00:06:11,440
ten que proxectar o que está construíndo

113
00:06:11,440 --> 00:06:14,210
dun xeito que permite o acceso doado para as persoas.

114
00:06:14,210 --> 00:06:18,290
Pero que tipo de outras decisións de proxecto podería haber

115
00:06:18,290 --> 00:06:21,850
ou pode ser envolto en algo así?

116
00:06:23,690 --> 00:06:25,660
Si Eu vexo unha man.

117
00:06:25,660 --> 00:06:37,200
[Resposta do alumno inaudível] Dereito. >> Exactamente. Accesibilidade é unha cousa.

118
00:06:37,200 --> 00:06:40,870
Moita xente non pensa: "O que os meus usuarios?"

119
00:06:40,870 --> 00:06:43,160
como os extremos dun ou outro espectro.

120
00:06:43,160 --> 00:06:47,770
Teño usuarios que poden ter deficiencia de que eu non estou a pensar sobre

121
00:06:47,770 --> 00:06:50,590
e eu só estou pensando en proxecto para o usuario en xeral.

122
00:06:50,590 --> 00:06:52,630
Internet é accesible por todos hoxe en día,

123
00:06:52,630 --> 00:06:54,870
e eu debería estar designado para esas persoas tamén.

124
00:06:54,870 --> 00:06:58,620
Que tipo de outras decisións de proxecto que podería facer?

125
00:06:58,620 --> 00:07:00,690
Si >> [Alumno] custe.

126
00:07:00,690 --> 00:07:02,680
Custo. Moi bo.

127
00:07:02,680 --> 00:07:08,060
Outra cousa que pode basearse nosas decisións de deseño son en custo.

128
00:07:08,060 --> 00:07:13,130
Se somos unha empresa, quere construír algo que non ten custo moito máis para producir

129
00:07:13,130 --> 00:07:17,720
pero pode vender a un custo particularmente elevado ou pode levar moito beneficio.

130
00:07:17,720 --> 00:07:21,540
>> Estes son todos os distintos tipos de deseño, pero cando estamos construíndo algo en internet

131
00:07:21,540 --> 00:07:25,120
ou cando estamos construíndo algo que probablemente non custa moito para construír-se, agora,

132
00:07:25,120 --> 00:07:28,630
como aplicacións de Internet - non tes que xogar moito capital para el

133
00:07:28,630 --> 00:07:30,900
a fin de facer algo que realmente funciona -

134
00:07:30,900 --> 00:07:33,490
o que está máis preocupado é a experiencia do usuario.

135
00:07:33,490 --> 00:07:36,390
Chamamos este proxecto centrado no usuario.

136
00:07:36,390 --> 00:07:41,550
Esencialmente, o que implica proxecto centrado no usuario é poñer-se no lugar dos seus usuarios.

137
00:07:41,550 --> 00:07:44,870
Se alguén se rexistrar para o que eu estou construíndo,

138
00:07:44,870 --> 00:07:48,250
eles, obviamente, vir a miña aplicación en particular con un obxectivo en mente,

139
00:07:48,250 --> 00:07:50,280
con unha tarefa que pretende completar.

140
00:07:50,280 --> 00:07:53,650
E o seu traballo non é só para axudalos a completar a tarefa

141
00:07:53,650 --> 00:07:57,930
pero para axudalos a completar a tarefa de forma que sexa eficiente, intuitivo,

142
00:07:57,930 --> 00:08:01,900
e, como unha persoa dixo alí, accesible.

143
00:08:01,900 --> 00:08:03,750
O que significa eficiencia?

144
00:08:03,750 --> 00:08:08,050
Eficiencia significa a rapidez que o meu usuario completar a tarefa dada a miña interface.

145
00:08:08,050 --> 00:08:11,650
Leva moitos click para eles para ir dun lugar a outro?

146
00:08:11,650 --> 00:08:14,630
É tedioso? Será que eles teñen que facer moitas tarefas repetitivas?

147
00:08:14,630 --> 00:08:17,140
Queremos facer o proceso o máis eficiente posible

148
00:08:17,140 --> 00:08:20,070
para que non ten que facer eses tipos de cousas.

149
00:08:20,070 --> 00:08:24,230
En canto a intuición, é dicir, por exemplo, se un usuario mira para o meu interfaz,

150
00:08:24,230 --> 00:08:27,240
é máis doado para eles para ir dun lugar a outro?

151
00:08:27,240 --> 00:08:30,390
É doado para eles para descubrir o que eles ten que premer no meu interface

152
00:08:30,390 --> 00:08:33,770
a fin de que para acadar a meta ou tarefa que eles queren alcanzar?

153
00:08:33,770 --> 00:08:37,520
>> E, finalmente, como unha persoa dixo alí, a accesibilidade é moi importante.

154
00:08:37,520 --> 00:08:39,640
[Orador masculino] El vén coa accesibilidade para cousas como visión,

155
00:08:39,640 --> 00:08:42,740
gusto de como realmente proxecto algo para alguén que é cego?

156
00:08:42,740 --> 00:08:46,460
Oh Para as persoas que non poden ver en todo, temos algo chamado lectores de pantalla.

157
00:08:46,460 --> 00:08:49,070
O que ten que facer é que ten que construír o seu sitio web de forma

158
00:08:49,070 --> 00:08:52,020
que, por exemplo, tecnoloxías específicas que chamamos -

159
00:08:52,020 --> 00:08:53,590
Hai moitas cousas agora.

160
00:08:53,590 --> 00:08:55,660
Eu creo que hai lectores de pantalla Jaws chamados.

161
00:08:55,660 --> 00:08:58,410
Moitas destas cousas confiar no que chamamos regras área

162
00:08:58,410 --> 00:09:02,010
, Co fin de ler para o usuario que está presente na páxina.

163
00:09:02,010 --> 00:09:05,480
Para aquelas persoas que non poden ver, ten que estar seguro de que estes lectores de pantalla

164
00:09:05,480 --> 00:09:09,130
Pode realmente incorporarse o contido da páxina, e pode realmente mostrar aos seus usuarios,

165
00:09:09,130 --> 00:09:13,630
Se non pode ver, polo menos aínda pode entender o contido da páxina.

166
00:09:13,630 --> 00:09:16,190
Si Okay.

167
00:09:16,190 --> 00:09:23,410
Chega a falar dun bo deseño. Imos falar sobre o deseño malo.

168
00:09:23,410 --> 00:09:25,220
Estas son cousas que non debe facer.

169
00:09:25,220 --> 00:09:27,890
Alguén me pode dicir sobre as súas experiencias con Craigslist

170
00:09:27,890 --> 00:09:32,190
eo que eles pensan que non é tan grande sobre este proxecto?

171
00:09:33,690 --> 00:09:36,430
Si >> [Alumno] Eu creo que hai moitas palabras nunha zona.

172
00:09:36,430 --> 00:09:39,350
Moitas palabras, non? Completamente esmagadora.

173
00:09:39,350 --> 00:09:42,400
Vostede chegou a esta páxina e se depara con unha morea de cousas aquí

174
00:09:42,400 --> 00:09:43,860
que pode ata non importa para ti.

175
00:09:43,860 --> 00:09:47,010
Por exemplo, vostede vive nun estado que non comece con esta letra.

176
00:09:47,010 --> 00:09:48,690
Imos dicir que vive en Texas ou algo así.

177
00:09:48,690 --> 00:09:53,790
>> Ten que percorrer todo o camiño ata a páxina para chegar ao lugar que está.

178
00:09:53,790 --> 00:10:00,320
Eu son de Boston, entón deixe-me ollar en Massachusetts. Onde está Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Ah, aquí mesmo. Ah, e Boston. Okay.

180
00:10:03,270 --> 00:10:09,070
Imos ollar para Boston. [Risas]

181
00:10:09,070 --> 00:10:12,250
Moi impresionante, non?

182
00:10:12,250 --> 00:10:16,400
Cousas embaraçosas alí. [Risas]

183
00:10:17,320 --> 00:10:19,470
Imos dicir que eu estou buscando un lugar para vivir.

184
00:10:19,470 --> 00:10:24,130
Cantas persoas realmente usa Craigslist? Toneladas de ti.

185
00:10:24,130 --> 00:10:30,960
Hai formas moi malo de ollar para iso, pero imos ollar para iso.

186
00:10:35,130 --> 00:10:38,970
Cal é a diferenza entre img e pic? Alguén me pode dicir?

187
00:10:41,350 --> 00:10:42,830
Hai, de feito, non hai diferenza.

188
00:10:42,830 --> 00:10:47,710
Eles queren dicir exactamente a mesma cousa, pero eles teñen etiquetas diferentes para eles por algún motivo.

189
00:10:48,980 --> 00:10:53,560
Se eu premer en ten imaxe, non pasa nada na páxina.

190
00:10:53,560 --> 00:10:57,490
En realidade, eu teño que faga clic en Buscar de novo para que algo aconteza.

191
00:10:57,490 --> 00:11:02,430
O que podería ser unha mellor decisión de proxecto que podería ser feito alí?

192
00:11:03,820 --> 00:11:08,030
Se eu estou facendo clic sobre ese filtro, eu probablemente quere filtrar esa acción en particular

193
00:11:08,030 --> 00:11:09,970
ou categoría que particular.

194
00:11:09,970 --> 00:11:14,450
Entón, en vez de ter que premer Busca novo, eu podería só automaticamente facer a filtrado

195
00:11:14,450 --> 00:11:17,060
tipo de estilo de Google, onde facelo inmediatamente.

196
00:11:17,060 --> 00:11:20,440
[Malan] Pero non se forma, como vimos ata agora, ten que ser fisicamente presentado

197
00:11:20,440 --> 00:11:23,170
por bater Introduza polo menos, ou premendo nun botón?

198
00:11:23,170 --> 00:11:26,830
Como viu ata agora, realmente ten que premer en Enviar a facer isto.

199
00:11:26,830 --> 00:11:30,090
>> Pero, como Tommy vai amosar nun segundo, en realidade existen formas de ti

200
00:11:30,090 --> 00:11:33,010
de tal forma que cando fai clic en que a cousa pode enviar automaticamente

201
00:11:33,010 --> 00:11:38,840
o que chamamos unha solicitude de AJAX e obter datos de volta e filtrar os resultados instantaneamente.

202
00:11:38,840 --> 00:11:41,340
Hai toneladas de cousas que están erradas con esta interface.

203
00:11:41,340 --> 00:11:43,530
[Malan] Pode procurar Cambridge?

204
00:11:43,530 --> 00:11:47,030
Hai algo lixeiramente anómala aquí onde se preocupa Cambridge

205
00:11:47,030 --> 00:11:54,790
e aínda está recibindo Westford, Spring Hill, West Newton e outros.

206
00:11:54,790 --> 00:11:57,930
Probablemente non é o ideal. >> Probablemente non ideal.

207
00:11:57,930 --> 00:12:03,900
Como eu podería ser capaz de facer a experiencia do usuario mellor sobre esta páxina particular?

208
00:12:03,900 --> 00:12:07,340
Si >> [Alumno] Instrucións.

209
00:12:07,340 --> 00:12:09,500
Okay. Instrucións en que tipo de sentimento?

210
00:12:09,500 --> 00:12:14,630
[Estudante] Por exemplo, unha cousa para usuarios principiantes, que nin sequera saben o que é Craigslist

211
00:12:14,630 --> 00:12:17,320
ou non sabe o que é suposta facer.

212
00:12:17,320 --> 00:12:20,150
Dereito. Entón, explicando o Craigslist está nesta páxina é importante.

213
00:12:20,150 --> 00:12:23,490
Podemos realmente dicir aos usuarios que esta páxina é realmente a.

214
00:12:23,490 --> 00:12:27,090
Se eu estou só a visitar este, eu vexo unha morea de lugares. Eu non sei mesmo o que significan.

215
00:12:27,090 --> 00:12:29,730
Pero o máis importante, só de ollar para esa interface,

216
00:12:29,730 --> 00:12:35,530
lembro que eu tiña que rolar unha tonelada de cousas para atopar unha determinada comunidade

217
00:12:35,530 --> 00:12:37,560
que realmente se preocupaba con este.

218
00:12:37,560 --> 00:12:39,820
¿Que é unha maneira máis rápida que eu podería facelo? Si

219
00:12:39,820 --> 00:12:43,290
[Alumno] dividídelos en rexións leste, oeste. Ok >>.

220
00:12:43,290 --> 00:12:47,460
Eu podería dividídelos en categorías máis que podería me axudar a determinar canto

221
00:12:47,460 --> 00:12:49,820
como chegar a ese lugar específico.

222
00:12:49,820 --> 00:12:54,510
[Alumno] Pon unha lista desplegable. >> Dereito. Okay.

223
00:12:54,510 --> 00:12:58,240
Eu podería usar un menú desplegable, porque temos un conxunto fixo de cousas

224
00:12:58,240 --> 00:13:00,100
e podemos amosalos nun menú desplegable.

225
00:13:00,100 --> 00:13:02,240
Desta forma, non ocupa moito espazo na pantalla.

226
00:13:02,240 --> 00:13:05,630
Pero aínda mellor do que iso, o que podemos facer?

227
00:13:05,630 --> 00:13:09,220
Si >> [Resposta do alumno inaudível] >> Pode dicir iso de novo? >> [Alumno] caixa de busca.

228
00:13:09,220 --> 00:13:11,260
Si, unha caixa de busca. Isto é óptimo.

229
00:13:11,260 --> 00:13:16,430
O que podemos realmente facer é miramos cara atrás na caixa de busca diapositivas,.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Xeito moi doado de buscar os resultados que vostede sabe que está nun conxunto.

231
00:13:21,520 --> 00:13:25,980
Se eu comezar a escribir BO, só me amosar todos os resultados que ten dentro BO deles.

232
00:13:25,980 --> 00:13:29,030
Desta forma, podo facilmente atopar o camiño particular, quero ir a

233
00:13:29,030 --> 00:13:32,390
en vez de ter que percorrer esta lista moi grande.

234
00:13:32,390 --> 00:13:37,450
>> Estes son todos os tipos de realidade froito maduro que alguén que está a aplicar Craigslist

235
00:13:37,450 --> 00:13:42,500
Pode realmente facer para facer a experiencia na páxina web moito mellor para o seu usuario en particular.

236
00:13:42,500 --> 00:13:46,370
Okay. Chega de conversa sobre sitios malas.

237
00:13:46,370 --> 00:13:49,410
Imos falar sobre Facebook.

238
00:13:50,880 --> 00:13:54,390
Cando o Facebook foi lanzado, e fotos especialmente de Facebook,

239
00:13:54,390 --> 00:13:57,870
había moitos outros servizos no momento en que podería facer exactamente as mesmas cousas.

240
00:13:57,870 --> 00:14:00,740
Poden organizar as súas fotos en álbums.

241
00:14:00,740 --> 00:14:03,360
O que podes facer é que pode organiza-los en grupos tamén.

242
00:14:03,360 --> 00:14:06,070
Pode organiza-los por data. Podes facer todas estas cousas particulares.

243
00:14:06,070 --> 00:14:11,710
Pero alguén sabe o que fixo fotos de Facebook explotar no momento en que foi lanzado?

244
00:14:11,710 --> 00:14:15,080
Si >> [Estudantes] etiquetas. Etiquetas. >> Exactamente.

245
00:14:15,080 --> 00:14:21,300
Temos Milo aquí, que é o noso mascota can con bandana que CS50.

246
00:14:21,300 --> 00:14:24,810
Podes ver que temos este recurso de reserva no medio.

247
00:14:24,810 --> 00:14:28,240
E o que fixo as fotos do Facebook tan interesante desde o punto de vista de usabilidade

248
00:14:28,240 --> 00:14:34,130
é que realmente permitiu que as persoas con este para involucrar os seus amigos nas súas fotos.

249
00:14:34,130 --> 00:14:37,680
Para Facebook, xa que o seu sitio é particularmente social,

250
00:14:37,680 --> 00:14:40,750
é sobre como crear este tipo de atmosfera social.

251
00:14:40,750 --> 00:14:42,620
Isto mellorou a experiencia de fotos moito máis

252
00:14:42,620 --> 00:14:46,390
porque eles poderían realmente comezar a dicir: "Estas son as conexións entre as persoas,

253
00:14:46,390 --> 00:14:49,220
e estas son fotos sobre persoas que realmente lle gusta. "

254
00:14:49,220 --> 00:14:52,200
Parte do problema é tamén o narcisismo tipo.

255
00:14:52,200 --> 00:14:54,980
A xente quere ser marcado en fotos e cousas así.

256
00:14:54,980 --> 00:14:58,510
Mentres tanto non é necesariamente unha boa característica humana,

257
00:14:58,510 --> 00:15:01,910
ao mesmo tempo, el está baseado en decisións de bo deseño

258
00:15:01,910 --> 00:15:04,860
porque a xente realmente se preocupan con cousas como esta.

259
00:15:04,860 --> 00:15:07,190
Entón esta é as fotos de Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Pero imos falar de Facebook en xeral.

261
00:15:09,800 --> 00:15:13,400
Estou seguro de que moitas persoas aquí teñen opinións sobre o Facebook,

262
00:15:13,400 --> 00:15:16,430
ambos boas decisións de deseño e decisións de deseño malo.

263
00:15:16,430 --> 00:15:20,270
Entón imos desabafar ou ser feliz.

264
00:15:23,480 --> 00:15:26,450
Imos. Sei todo de usar Facebook.

265
00:15:26,450 --> 00:15:30,970
Alguén ten que ter algo de malo que dicir ou algo de bo que dicir sobre iso. Si

266
00:15:30,970 --> 00:15:35,060
[Alumno] no comentario de noticias, hai unha morea de cousas que eu realmente non me importa.

267
00:15:35,060 --> 00:15:37,740
O comentario de noticias non amosar unha morea de cousas que pode non preocupar.

268
00:15:37,740 --> 00:15:41,660
Ten amigos en Facebook que non se atoparon por 2 ou 3 anos

269
00:15:41,660 --> 00:15:43,860
e ve os seus resultados de noticias aparecendo no seu comentario de noticias

270
00:15:43,860 --> 00:15:45,870
e realmente non me importa con iso.

271
00:15:45,870 --> 00:15:48,700
Facebook ten realmente feito un esforzo para facelo mellor,

272
00:15:48,700 --> 00:15:53,150
e realmente intentaron empurrar resultados relevantes para o cumio do comentario de noticias como de tarde

273
00:15:53,150 --> 00:15:58,300
para que realmente ve as cousas por amigos que son relevantes para vostede ou os seus amigos máis próximos.

274
00:15:58,300 --> 00:16:01,110
Algo máis? Si

275
00:16:01,110 --> 00:16:06,400
[Resposta do alumno inaudível] >> Pode dicir iso de novo?

276
00:16:06,400 --> 00:16:10,140
[Alumno] Os anuncios son relativamente discreto. >> En que sentido?

277
00:16:10,140 --> 00:16:16,370
[Resposta do alumno inaudível] Eles non teñen luz na pantalla, como banners.

278
00:16:16,370 --> 00:16:17,760
Okay. Isto é bo.

279
00:16:17,760 --> 00:16:25,030
Se se lembrar de Internet a partir dos anos 90 - >> [Malan] eu estaba alí. >> El estaba alí. [Risas]

280
00:16:25,030 --> 00:16:29,210
Pode lembrar de fondos piscando GIFs, brillantes cousas,

281
00:16:29,210 --> 00:16:31,570
Geocities tipo estilo de cousas.

282
00:16:31,570 --> 00:16:34,080
Isto non é realmente un exemplo dun bo proxecto

283
00:16:34,080 --> 00:16:36,690
porque é realmente unha distracción do contido.

284
00:16:36,690 --> 00:16:39,590
O sitio de arte Yale adoitaba ter GIFs animados como o seu fondo

285
00:16:39,590 --> 00:16:41,800
e non podería ler calquera cousa na páxina,

286
00:16:41,800 --> 00:16:44,870
pero eu creo que alguén realmente falar con eles e agora é un pouco diferente.

287
00:16:44,870 --> 00:16:48,940
[Malan] É moito mellor agora. >> É moito mellor agora, como se pode ver. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Só grande, só - É. Okay.

289
00:16:56,020 --> 00:17:00,560
>> Parte dela tamén está facendo a súa páxina posiblemente moi minimalista e moi comprensible

290
00:17:00,560 --> 00:17:05,690
así cousas sobre o fluxo de páxina de unha maneira que é moi lóxico e non quedan no camiño do outro.

291
00:17:05,690 --> 00:17:11,849
Que tipo de outras cousas son boas ou malas sobre o Facebook sobre o Facebook?

292
00:17:11,849 --> 00:17:15,730
Imos ter unha conversa proxecto aquí.

293
00:17:19,470 --> 00:17:21,339
Oh Onde? Si

294
00:17:21,339 --> 00:17:25,640
[Alumno] O sistema novo programa permite buscar o perfil da persoa sobre o seu pasado.

295
00:17:25,640 --> 00:17:28,119
Ooh, Timeline.

296
00:17:28,119 --> 00:17:30,280
Liña do Tempo é unha gran cousa, porque permite que perseguir os seus amigos

297
00:17:30,280 --> 00:17:33,300
cando eles estaban na escola.

298
00:17:35,160 --> 00:17:38,060
Timeline é bo porque permite que filtre a través de contidos moito máis rápido,

299
00:17:38,060 --> 00:17:41,500
el permite que atopar cousas que doutra forma tería levado moito tempo para atopar

300
00:17:41,500 --> 00:17:45,840
só a rolagem para arriba e para abaixo, para arriba, arriba, arriba, arriba, arriba, como volver no tempo.

301
00:17:45,840 --> 00:17:48,910
Pero despois hai tamén unha especie de desvantaxe para que en termos de experiencia do usuario.

302
00:17:48,910 --> 00:17:51,190
O que pode ser iso?

303
00:17:51,190 --> 00:17:56,780
Gran palabra que comeza con P-R. >> [Alumno] de privacidade. Privacidade >>, non?

304
00:17:56,780 --> 00:17:59,970
Privacidade é un asunto de enorme experiencia do usuario.

305
00:17:59,970 --> 00:18:07,190
Esta é unha das cousas que eu máis odio sobre o Facebook agora. [Risas]

306
00:18:07,190 --> 00:18:09,000
[Malan] Como eu agora.

307
00:18:09,000 --> 00:18:11,380
David non sabía que iso realmente aconteceu ata onte.

308
00:18:11,380 --> 00:18:14,560
Entón agora sabe que cada vez que eu falar el sei que está me ignorando.

309
00:18:14,560 --> 00:18:16,880
[Malan] A parte estraña é que eu estaba realmente ignore-lo,

310
00:18:16,880 --> 00:18:21,040
e eu non sabía que el sabía que eu estaba ignorando-o. [Risas]

311
00:18:21,040 --> 00:18:24,030
A privacidade é un enorme problema.

312
00:18:24,030 --> 00:18:28,670
Alguén aquí me pode dicir o que pode ser malo sobre o Facebook privacidade

313
00:18:28,670 --> 00:18:32,270
Ademais do feito de que eles fan cousas como esta?

314
00:18:32,270 --> 00:18:37,240
O que é particularmente difícil de facer en relación ao Facebook privacidade?

315
00:18:37,240 --> 00:18:40,340
Este tipo de é unha cuestión de liderado.

316
00:18:41,680 --> 00:18:43,930
Si >> [Alumno] Ocultar as súas fotos de certas persoas.

317
00:18:43,930 --> 00:18:46,170
Dereito. Exactamente, para ocultar as súas fotos de certas persoas.

318
00:18:46,170 --> 00:18:51,290
Teñen este botón pequeno, pouco na esquina superior dereita que permite cambiar a privacidade dunha foto.

319
00:18:51,290 --> 00:18:56,360
As súas opcións de privacidade son moi variados entre distintos tipos de menús.

320
00:18:56,360 --> 00:18:59,510
>> Eles quedaron moito mellor sobre iso recentemente, pero que adoitaba ser o caso

321
00:18:59,510 --> 00:19:04,870
que sempre que quería evitar que os seus amigos a partir de fotografías de ver,

322
00:19:04,870 --> 00:19:08,280
que tería que pasar por un proceso moi complicado de 5-paso de ser como,

323
00:19:08,280 --> 00:19:11,150
deixe-me faga clic nesta ligazón agora déixeme prema de novo, deixe-me prema de novo,

324
00:19:11,150 --> 00:19:13,420
Deixe-me indicar que as persoas non poden ver as miñas fotos.

325
00:19:13,420 --> 00:19:17,250
Isto non é particularmente boa por parte do Facebook

326
00:19:17,250 --> 00:19:20,530
porque tanto sobre a experiencia do usuario é realmente dar-lles a liberdade

327
00:19:20,530 --> 00:19:22,460
para controlar o que a xente pode ver.

328
00:19:22,460 --> 00:19:25,550
Chamamos iso de Control de Usuario e liberdade.

329
00:19:25,550 --> 00:19:31,090
Se vostede non está permitindo que os seus usuarios fan isto de forma que sexa eficaz e intuitiva,

330
00:19:31,090 --> 00:19:34,570
entón a súa experiencia de usuario que non é realmente grande en todo.

331
00:19:34,570 --> 00:19:38,200
 Será que vostedes quere dicir calquera cousa sobre o Facebook?

332
00:19:38,700 --> 00:19:41,420
¿Como desactivar isto?

333
00:19:41,420 --> 00:19:46,290
[Ong] Non pode desactivar isto, e iso é un fallo enorme usabilidade por parte de Facebook.

334
00:19:46,290 --> 00:19:49,410
Este recurso - En realidade, eu olhei para el onte -

335
00:19:49,410 --> 00:19:53,940
é tanto que non pode facer iso ou está enterrado nalgún lugar moi, moi profundo

336
00:19:53,940 --> 00:19:58,050
nos recessos do Facebook, porque eu non podo descubrir como desactivar esta funcionalidade en todo.

337
00:19:58,050 --> 00:20:00,400
[Malan] Pero ás veces esas decisións non son obvias

338
00:20:00,400 --> 00:20:03,890
porque vostedes deron-nos unha gran cantidade de información útil sobre varias aplicacións CS50

339
00:20:03,890 --> 00:20:05,710
e sitios que o curso utiliza.

340
00:20:05,710 --> 00:20:10,260
Non aplicou todos eses peticións e suxestións.

341
00:20:10,260 --> 00:20:14,550
>> Parte do que é para recibir peticións de moitos que é unha función do tempo,

342
00:20:14,550 --> 00:20:17,070
pero ás veces nós só tomar unha decisión consciente, como,

343
00:20:17,070 --> 00:20:19,830
"Grazas pola suxestión, pero discordamos."

344
00:20:19,830 --> 00:20:24,350
Así como realmente decidir o que ten que facer os seus usuarios creo que debería facer algo

345
00:20:24,350 --> 00:20:28,110
mesmo se non necesariamente?

346
00:20:28,110 --> 00:20:32,360
É un bo equilibrio entre verdade escoitando o que os usuarios din

347
00:20:32,360 --> 00:20:35,840
e realmente ter algún tipo de liña que di,

348
00:20:35,840 --> 00:20:37,750
"Nós non imos facer o que eses usuarios din."

349
00:20:37,750 --> 00:20:42,520
E, en particular, creo que houbo unha cita de Henry Ford que resume isto moi ben.

350
00:20:42,520 --> 00:20:47,130
"Se eu tivese preguntado á xente o que eles querían, eles terían dito que querían cabalos máis rápidos."

351
00:20:47,130 --> 00:20:51,840
Alguén pode clasificar de destrinçar o que esa frase realmente significa?

352
00:20:51,840 --> 00:20:56,060
Non é só o que os usuarios saben o que queren,

353
00:20:56,060 --> 00:20:59,180
pero é máis que -

354
00:20:59,180 --> 00:21:02,720
[Alumno] Eles non saben o que é posible.

355
00:21:02,720 --> 00:21:06,140
En parte, eles non saben o que é posible.

356
00:21:07,880 --> 00:21:11,440
Tease que, ademais de un pouco máis. O que quere dicir con iso?

357
00:21:11,440 --> 00:21:21,340
[Resposta do alumno inaudível]

358
00:21:21,340 --> 00:21:25,770
Isto é bo. O que eu creo que nós estamos tentando dicir aquí é que as persoas saben o que queren.

359
00:21:25,770 --> 00:21:28,050
Eles queren que os cabalos máis rápidos.

360
00:21:28,050 --> 00:21:29,840
O que realmente queren é a capacidade de se mover máis rápido,

361
00:21:29,840 --> 00:21:32,310
pero eles non saben realmente o medio polo cal a conseguir isto.

362
00:21:32,310 --> 00:21:36,330
Cando vén para os seus usuarios e os seus usuarios lle dicir unha cousa

363
00:21:36,330 --> 00:21:39,700
e din: "Queremos eses recursos e eses recursos e eses recursos",

364
00:21:39,700 --> 00:21:42,650
non quere necesariamente pensar, "Deixe-me ir adiante

365
00:21:42,650 --> 00:21:44,720
"E aplicar o que di explicitamente"

366
00:21:44,720 --> 00:21:48,610
pero o que quere pensar é: "Que tipo de ideas podo conseguir con iso?"

367
00:21:48,610 --> 00:21:50,450
O que realmente queren?

368
00:21:50,450 --> 00:21:55,560
>> E a partir de aí o que podes facer é crear algo que satisfaga as solicitudes

369
00:21:55,560 --> 00:22:00,340
pero non necesariamente de xeito que o usuario espera que sexa satisfeita.

370
00:22:00,340 --> 00:22:03,830
Así, para algo así como proxectos finais, en termos reais,

371
00:22:03,830 --> 00:22:07,900
o que é unha heurística útil cando se trata de facer algo mellor,

372
00:22:07,900 --> 00:22:10,630
especialmente se o deseñador ten esa arrogancia sobre el

373
00:22:10,630 --> 00:22:14,360
polo cal especie de saber o que é mellor, pode aproveitar a entrada dos seus usuarios,

374
00:22:14,360 --> 00:22:16,580
pero como realmente ir sobre a obtención de que o producto?

375
00:22:16,580 --> 00:22:21,610
En proxectos finais, moi concretamente, o que produce mellores resultados aquí?

376
00:22:21,610 --> 00:22:25,030
O que produce os mellores resultados - e vou pasar por riba isto nun segundo -

377
00:22:25,030 --> 00:22:29,190
É este proceso de desenvolvemento e, a continuación, probar e, a continuación, a iteração.

378
00:22:29,190 --> 00:22:32,020
O que quero dicir coa proba é xeralmente cando proxectar algo

379
00:22:32,020 --> 00:22:36,970
Pensas que é moi bo, como, "Eu son como un deseñador excelente. Todo o mundo vai adorar iso."

380
00:22:36,970 --> 00:22:41,600
E despois de poñer-lo alí fóra, e as persoas realmente non me gusta diso por algún motivo.

381
00:22:41,600 --> 00:22:46,820
O que ten que facer é que ten que tomar as partes de cousas que as persoas fan como

382
00:22:46,820 --> 00:22:49,180
e renovar as cousas que a xente non quere.

383
00:22:49,180 --> 00:22:53,080
Soa como un proceso moi evidente, pero este proceso de constante interactuar

384
00:22:53,080 --> 00:22:55,980
encima do que xa construíu é un proceso que axuda a

385
00:22:55,980 --> 00:22:59,730
non só refinar súas habilidades de deseño propio, senón que tamén axuda a refinar o proxecto

386
00:22:59,730 --> 00:23:03,790
para que a xente realmente Apreciamos o seu produto aínda máis que antes.

387
00:23:03,790 --> 00:23:07,390
>> Vou pasar por riba de máis exemplos concretos do que realmente pode facer.

388
00:23:07,390 --> 00:23:11,390
Como unha especie de último exemplo dun produto, imos ollar para Educativas.

389
00:23:11,390 --> 00:23:14,970
Educativas cando saíu era moi, moi popular.

390
00:23:14,970 --> 00:23:18,760
Alguén pode adiviñar por que?

391
00:23:18,760 --> 00:23:20,950
Cales son os tipos de cousas que lle gusta sobre iso se te-lo usado

392
00:23:20,950 --> 00:23:23,990
ou cales son os tipos de cousas que non gusta?

393
00:23:23,990 --> 00:23:31,590
Si >> [Resposta do alumno inaudível] >> Okay.

394
00:23:31,590 --> 00:23:34,730
Isto é parte do que é deixar o usuario ten unha consulta que é máis expansivo

395
00:23:34,730 --> 00:23:38,150
dunha forma moi restritiva como, "Ten que escoller a súa data de inicio

396
00:23:38,150 --> 00:23:39,810
"E ten que escoller a súa data de finalización".

397
00:23:39,810 --> 00:23:44,910
Na verdade, el permite que sexa flexible sobre iso e dá-lle todos os voos nese intervalo.

398
00:23:44,910 --> 00:23:46,730
Algo máis?

399
00:23:46,730 --> 00:23:50,530
[Alumno] Eles inclúen as taxas no prezo.

400
00:23:50,530 --> 00:23:53,330
Non inclúen as taxas no prezo.

401
00:23:53,330 --> 00:23:56,720
Os impostos e as cousas realmente van directo para que o prezo na esquina superior esquerda

402
00:23:56,720 --> 00:24:00,710
entón non está enganado en pensar que está realmente pagando por un voo $ 240

403
00:24:00,710 --> 00:24:03,280
cando é realmente $ 330.

404
00:24:03,280 --> 00:24:06,200
Algo máis? Si

405
00:24:06,200 --> 00:24:10,140
[Resposta do alumno inaudível]

406
00:24:10,140 --> 00:24:14,610
Eu non estou seguro se realmente deixar facer iso.

407
00:24:14,610 --> 00:24:18,310
Eu podo estar errado.

408
00:24:18,310 --> 00:24:23,360
Isto pode ser unha cousa interesante, se quere poñer máis peso en especial filtros

409
00:24:23,360 --> 00:24:27,000
de xeito que xa empurran os resultados relacionados con este filtro para o cumio.

410
00:24:27,000 --> 00:24:31,920
Pero alguén me pode dicir o que hai de tan especial sobre este lado esquerdo?

411
00:24:31,920 --> 00:24:39,540
Como tradicionalmente buscar un voo en un servizo de Internet antes diso?

412
00:24:41,600 --> 00:24:44,650
>> Si >> [Resposta do alumno inaudível] >> Pode dicir que -

413
00:24:44,650 --> 00:24:47,530
[Alumno] Cada compañía aérea. Si >>. Cada compañía aérea ten o seu propio sitio web.

414
00:24:47,530 --> 00:24:50,110
Iso consolida as cousas. E?

415
00:24:50,110 --> 00:24:52,190
[Alumno] Vostede sabe exactamente o tempo que está saíndo.

416
00:24:52,190 --> 00:24:54,460
Vostede sabe exactamente o que tempo está saíndo,

417
00:24:54,460 --> 00:24:59,380
pero relacionada cos filtros, en particular.

418
00:25:00,710 --> 00:25:03,540
Deixe-me puxar arriba Educativas.

419
00:25:11,490 --> 00:25:14,020
Oh Deus, pop-ups. Mala experiencia do usuario.

420
00:25:14,020 --> 00:25:17,230
O que acontece cando eu pasar ese control?

421
00:25:17,230 --> 00:25:21,010
[Alumno] actualizacións automáticas. >> [] Ong actualizacións automáticas.

422
00:25:21,010 --> 00:25:23,440
Iso é algo que é moi importante.

423
00:25:23,440 --> 00:25:25,380
Antes diso, sempre que quería buscar un voo,

424
00:25:25,380 --> 00:25:28,410
tiña que poñer no seu lugar de entrada, o seu lugar de saída, investigación de prensa,

425
00:25:28,410 --> 00:25:31,190
debe procesar isto e mostrar os seus resultados.

426
00:25:31,190 --> 00:25:34,120
Se queres cambiar a súa consulta, que tería que premer para atrás dúas veces,

427
00:25:34,120 --> 00:25:39,770
entrar nunha nova consulta a partir de cero, e despois facer todo de novo e de novo.

428
00:25:39,770 --> 00:25:43,910
O agradable sobre algo así é que usa unha cousa moi [inintelixible] no medio.

429
00:25:43,910 --> 00:25:46,230
Sempre que fai algo como isto, el dispara unha proposta

430
00:25:46,230 --> 00:25:48,420
e retorna todos os resultados inmediatamente.

431
00:25:48,420 --> 00:25:51,680
Este tipo de feedback inmediato é algo que fixo kayak popular

432
00:25:51,680 --> 00:25:55,910
porque é moi doado para min só cambiar a miña consulta

433
00:25:55,910 --> 00:25:58,890
e descubrir as cousas que están en torno a un determinado intervalo

434
00:25:58,890 --> 00:26:01,950
sen ter que ir cara atrás e cara adiante, cara atrás e cara adiante, cara atrás e cara adiante.

435
00:26:01,950 --> 00:26:05,200
Entón, eses son todos os tipos de cousas que quere pensar sobre cando está designado o seu sitio.

436
00:26:05,200 --> 00:26:08,930
Como podo facer iso moi eficiente para os meus usuarios que pasar por todo o que está a traballar

437
00:26:08,930 --> 00:26:13,010
e para chegar ao seu obxectivo final o máis rápido posible?

438
00:26:13,010 --> 00:26:16,430
[Malan] E a punto de José anterior sobre os usuarios non necesariamente saber o que eles queren,

439
00:26:16,430 --> 00:26:18,640
con base no que vostedes xa sabe HTML

440
00:26:18,640 --> 00:26:22,780
e ten caixas, botóns de radio, menús de selección, campos de entrada e similares,

441
00:26:22,780 --> 00:26:26,140
como é que aplicar a noción de elixir un horario de inicio para un voo?

442
00:26:26,140 --> 00:26:30,030
>> Cal destes mecanismos UI varios usaría?

443
00:26:30,030 --> 00:26:34,100
Se só sabe a cantidade de HTML que foi ensino antes

444
00:26:34,100 --> 00:26:39,070
e vostede sabe que as entradas son botóns de radio, caixas, menús suspendidos, e caixa de entrada,

445
00:26:39,070 --> 00:26:43,320
cal sería a súa elección natural ser para escoller datas?

446
00:26:43,320 --> 00:26:48,670
[Alumno] Entrada. Entrada. >> Ou quizais ata un desplegable con todas as datas, non?

447
00:26:48,670 --> 00:26:53,170
Así, con mecanismos de interface de usuario máis complexas como esta do lado esquerdo que pode implementar,

448
00:26:53,170 --> 00:26:55,500
pode facer este proceso moito máis intuitivo cun control deslizante

449
00:26:55,500 --> 00:27:01,020
porque o tempo é continuo, e as persoas xeralmente non pensan en termos de anacos discretos.

450
00:27:01,020 --> 00:27:04,950
Todo ben. Última cousa.

451
00:27:04,950 --> 00:27:07,370
Dez heurísticas de usabilidade.

452
00:27:07,370 --> 00:27:10,820
Todas as cousas que falamos probablemente caer nunha destas categorías.

453
00:27:10,820 --> 00:27:14,420
Se vai a este enlace, que os locais serán publicadas en liña,

454
00:27:14,420 --> 00:27:18,900
vai realmente ser capaz de, como proxectar seu sitio web, manter esas heurísticas presente

455
00:27:18,900 --> 00:27:21,330
e esas regras de ouro.

456
00:27:21,330 --> 00:27:26,610
Para os seus proxectos, o que eu suxiro que fagas, a fin de proxectar a súa aplicación mellor

457
00:27:26,610 --> 00:27:28,850
é facer prototipos de papel en primeiro lugar.

458
00:27:28,850 --> 00:27:32,150
Cando está a pensar sobre a súa aplicación, moi rapidamente esbozar o que quere que se parece

459
00:27:32,150 --> 00:27:36,230
e comproba se todas as caixas están dispostas de xeito que é moi intuitiva para o usuario a usar

460
00:27:36,230 --> 00:27:39,820
e mesmo mostrar os prototipos de papel para os seus amigos e comezar a grupos de foco.

461
00:27:39,820 --> 00:27:44,230
Basta chegar 2 ou 3 persoas e lles pedir para simplemente tocar neses prototipos de papel,

462
00:27:44,230 --> 00:27:47,650
e amosar-lles novas pantallas para ver se realmente entender o que está a suceder.

463
00:27:47,650 --> 00:27:50,680
>> O que quere facer é darlles unha tarefa, motivar esta tarefa,

464
00:27:50,680 --> 00:27:53,270
e só darlles o app e deixalos usalo.

465
00:27:53,270 --> 00:27:56,530
Non lles dea instrucións ademais.

466
00:27:56,530 --> 00:28:00,920
Quere realmente deixar los interactuar coa súa aplicación de forma que permite que vexa

467
00:28:00,920 --> 00:28:03,870
como eles ían usalo se non estivese ao lado deles.

468
00:28:03,870 --> 00:28:05,250
E iso é moi importante.

469
00:28:05,250 --> 00:28:08,780
Isto vai dar moitas ideas como a xente desplazarse cousas particulares

470
00:28:08,780 --> 00:28:10,560
dun xeito que eu non tiña a intención de que?

471
00:28:10,560 --> 00:28:14,680
Eles están usando mecanismos de interface de usuario na pantalla

472
00:28:14,680 --> 00:28:17,490
de forma que é unha especie de hacky?

473
00:28:17,490 --> 00:28:22,020
Eu non tiña a intención de que eles fagan iso desa forma.

474
00:28:22,020 --> 00:28:23,940
E unha vez que fixo que, o que quere facer?

475
00:28:23,940 --> 00:28:26,010
Rochas do seu proxecto, non?

476
00:28:26,010 --> 00:28:29,600
O que quere facer é que quere desenvolver e, a continuación, facer o proceso de novo.

477
00:28:29,600 --> 00:28:32,110
Así, mostra aos amigos unha vez que desenvolveu, proba-lo,

478
00:28:32,110 --> 00:28:36,630
desenvolver, probar, desenvolver, probar, repetir, sobre e sobre e para adiante.

479
00:28:36,630 --> 00:28:39,720
Deseño é un proceso iterativo moito neste sentido.

480
00:28:39,720 --> 00:28:43,280
Vostede realmente ten que construír algo e despois entender cousas sobre el

481
00:28:43,280 --> 00:28:46,520
que non entendeu antes e volver e mellorar con iso.

482
00:28:46,520 --> 00:28:50,890
Agora, en canto a parte de desenvolvemento, isto é o que Tommy vai amosar-lle despois do intervalo

483
00:28:50,890 --> 00:28:53,220
e como pode ser capaz de aplicar algo como autocomplete

484
00:28:53,220 --> 00:28:56,610
de forma que é moi sinxelo.

485
00:28:57,440 --> 00:28:59,550
[Malan] Como Tommy defínese aquí, unha pregunta entón.

486
00:28:59,550 --> 00:29:03,780
Moitos dos primeiros sitios - e cando dixo José 1990 web estilo,

487
00:29:03,780 --> 00:29:07,640
era implementacións onde se quería para seleccionar unha data de inicio e un tempo final,

488
00:29:07,640 --> 00:29:10,380
francamente, de volta ao día, e mesmo nalgúns sitios hoxe,

489
00:29:10,380 --> 00:29:13,220
a forma de facelo é incorporarse unha hora de un desplegable,

490
00:29:13,220 --> 00:29:15,910
escolle minutos dun desplegable, quizais escoller AM, PM

491
00:29:15,910 --> 00:29:17,440
e despois fai iso tres veces máis.

492
00:29:17,440 --> 00:29:19,920
E así, con 6 click e pode que algúns de desprazamento

493
00:29:19,920 --> 00:29:24,000
o usuario pode realmente proporcionar algún tipo de data e / ou intervalo de tempo neste sentido.

494
00:29:24,000 --> 00:29:27,920
>> Entón, en definitiva, de calidade inferior e, polo tanto, aínda agora vimos ningunha capacidades expresivas

495
00:29:27,920 --> 00:29:30,330
en calquera das linguas nós miramos para facer algo máis sexy

496
00:29:30,330 --> 00:29:32,620
como ese control deslizante de tempo de inicio e fin.

497
00:29:32,620 --> 00:29:36,290
Pero se pensas que volta a semana 0 cando falamos sobre Scratch,

498
00:29:36,290 --> 00:29:39,080
alí tamén había elementos que só fixo certas cousas.

499
00:29:39,080 --> 00:29:42,700
Realmente só estes fundamentos como loops e condicións e similares.

500
00:29:42,700 --> 00:29:46,910
Entón tipo de só pensar moito abstractamente agora, independente dos elementos HTML,

501
00:29:46,910 --> 00:29:51,260
o que realmente está a suceder con algo como data de inicio e Slider tempo do fin?

502
00:29:51,260 --> 00:29:54,960
Cando pasar meu rato e clic en que o símbolo de cenoria pouco á esquerda

503
00:29:54,960 --> 00:29:59,220
e comezar a arrastrar, por medio de programación, que é o que quere ser capaz de aplicar

504
00:29:59,220 --> 00:30:01,000
para que isto ocorre?

505
00:30:01,000 --> 00:30:04,920
Que preguntas, o que expresións booleanas que quere ser capaz de facer?

506
00:30:04,920 --> 00:30:06,930
O que está realmente a suceder? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Estudante] Onde está a posición do cursor? >> Boa. Onde é a posición do cursor?

508
00:30:10,080 --> 00:30:11,970
Iso foi algo que precisaba expresar volta Scratch,

509
00:30:11,970 --> 00:30:14,690
se foi con base no lugar ou mesmo a cor ou similar.

510
00:30:14,690 --> 00:30:18,410
Pode lembrar sempre así momentaneamente o luns, había todas estas cousas chamadas eventos

511
00:30:18,410 --> 00:30:22,370
no mundo web, e por iso hai cousas como onclick e onkeypress

512
00:30:22,370 --> 00:30:25,960
e onkeyup e onmouseover e onmouseout.

513
00:30:25,960 --> 00:30:29,130
Entón, entender que incluso estas cousas que estamos tomando para concedida na web

514
00:30:29,130 --> 00:30:32,190
con sitios como Facebook e Gmail, mesmo se non ten idea

515
00:30:32,190 --> 00:30:34,890
como posiblemente aplicar iso porque non hai nada aínda así en charla

516
00:30:34,890 --> 00:30:38,570
ou conxunto de problemas 7, entender que, con eses fundamentos exactamente o mesmo,

517
00:30:38,570 --> 00:30:41,090
con HTTP e os parámetros e GET e POST,

518
00:30:41,090 --> 00:30:44,010
cos insumos básicos de HTML que nós miramos ata agora

519
00:30:44,010 --> 00:30:47,690
e nun momento cos mecanismos programáticos que Tommy está a piques de introducir

520
00:30:47,690 --> 00:30:51,300
pode comezar a expresarse, tal como fixo a semana 0

521
00:30:51,300 --> 00:30:53,800
por moito intuitivamente arrastrando e soltando.

522
00:30:53,800 --> 00:30:58,950
>> Así, co que dixo, Tommy MacWilliam e algunhas pezas do puzzle novas para nós para a web.

523
00:30:58,950 --> 00:31:03,450
Todo ben. O meu nome é Tommy e eu vou estar fala de JavaScript.

524
00:31:03,450 --> 00:31:07,150
Só unha renuncia: Eu son da opinión de que o JavaScript é a mellor linguaxe de programación

525
00:31:07,150 --> 00:31:09,010
en todo o mundo.

526
00:31:09,010 --> 00:31:11,940
Hai moitas persoas que discordan de min, pero é simplemente fantástico.

527
00:31:11,940 --> 00:31:16,330
Unha vez que volver para a C, se ten que escribir C para outra clase ou doutras linguaxes,

528
00:31:16,330 --> 00:31:19,780
É realmente frustrante en todos os detalles de baixo nivel que ten que estar Atol dentro

529
00:31:19,780 --> 00:31:23,050
Entón, se está sempre sentindo triste sobre como é chat C é escribir,

530
00:31:23,050 --> 00:31:25,130
só volver, escribir algún JavaScript. É o nirvana.

531
00:31:25,130 --> 00:31:27,980
Vai sentirse moito mellor sobre o seu día malo.

532
00:31:27,980 --> 00:31:31,900
Unha boa parte da maxia de Javascript vén da súa capacidade de manipular as cousas

533
00:31:31,900 --> 00:31:33,730
que xa están na páxina.

534
00:31:33,730 --> 00:31:38,520
Cando escribimos os nosos scripts PHP, foron executados no servidor,

535
00:31:38,520 --> 00:31:42,270
e, finalmente, que o script PHP probablemente mostrará algunhas HTML.

536
00:31:42,270 --> 00:31:45,860
HTML que foi enviado ao cliente, e entón foi iso.

537
00:31:45,860 --> 00:31:50,180
Se o PHP quería engadir un botón de páxina, por exemplo, non pode realmente facer iso.

538
00:31:50,180 --> 00:31:54,350
El tería que prestar un novo ficheiro HTML e toda enviar o seu navegador.

539
00:31:54,350 --> 00:31:57,840
Con Javascript sabemos que podemos actualizar as cousas mentres eles xa están na páxina,

540
00:31:57,840 --> 00:32:00,840
e por iso podemos proporcionar un feedback máis inmediato,

541
00:32:00,840 --> 00:32:06,150
que realmente vai mellorar a experiencia do usuario no noso sitio.

542
00:32:06,150 --> 00:32:09,330
Só un rápido resumo de seletores de JavaScript.

543
00:32:09,330 --> 00:32:11,590
Nós sabemos que cando a descarga dunha páxina HTML,

544
00:32:11,590 --> 00:32:13,890
que vai ser representado no DOM.

545
00:32:13,890 --> 00:32:19,340
>> O don lembro é só unha árbore tan grande, onde os elementos están relacionados nesta xerarquía grande.

546
00:32:19,340 --> 00:32:21,810
Cando traballamos con bases de datos en pset 7,

547
00:32:21,810 --> 00:32:26,280
unha das primeiras cousas que necesitabamos para saber como facer era consultar a base de datos.

548
00:32:26,280 --> 00:32:29,060
Temos esta táboa de usuarios grande, e ás veces nós só quero dicir,

549
00:32:29,060 --> 00:32:33,260
"Eu só quero algúns deses usuarios que corresponden algunha condición".

550
00:32:33,260 --> 00:32:36,020
Do mesmo xeito, cando temos o don necesitamos algunha forma de consulta-lo.

551
00:32:36,020 --> 00:32:39,490
Necesitamos algunha forma de dicir: "Eu quero que todos os botóns que se asemellan a este

552
00:32:39,490 --> 00:32:41,860
"Ou de todas as imaxes na páxina."

553
00:32:41,860 --> 00:32:44,330
E eses seletores nos permiten facelo.

554
00:32:44,330 --> 00:32:45,690
Entón, basta unha rápida recapitulação.

555
00:32:45,690 --> 00:32:50,770
Este primeiro aquí, este # presentar, que é o que vai escoller? Alguén se lembra?

556
00:32:50,770 --> 00:32:54,880
[Resposta do alumno inaudível] >> Si, exactamente.

557
00:32:54,880 --> 00:32:59,510
Isto vai seleccionar un elemento na páxina que ten unha identificación de enviar.

558
00:32:59,510 --> 00:33:03,470
E para que hash tag di que este selector vai traballar con IDs.

559
00:33:03,470 --> 00:33:07,630
Como preto de un segundo, iso. Centrado, o que será que escoller?

560
00:33:11,360 --> 00:33:15,180
Si >> [Alumno] Clase. >> Exactamente. Iso agora vai seleccionar por clase.

561
00:33:15,180 --> 00:33:18,840
A diferenza entre o ID e clase aquí é xeralmente o ID debe ser único

562
00:33:18,840 --> 00:33:20,820
dentro de calquera espazo que está a buscar máis.

563
00:33:20,820 --> 00:33:23,080
Entón, se buscar unha páxina web enteira,

564
00:33:23,080 --> 00:33:27,740
o que realmente debe ter só un elemento con ID correcto, polo tanto, neste caso de presentar.

565
00:33:27,740 --> 00:33:31,330
Con clases, por outra banda, pódese ter máis dun elemento na mesma páxina

566
00:33:31,330 --> 00:33:33,130
coa mesma clase.

567
00:33:33,130 --> 00:33:36,580
Isto pode ser útil para dicir quero seleccionar todo o que está centrado na páxina

568
00:33:36,580 --> 00:33:38,450
en vez de só unha cousa.

569
00:33:38,450 --> 00:33:40,310
>> E, finalmente, este último aquí é un pouco máis complicado,

570
00:33:40,310 --> 00:33:43,890
pero o que é que isto vai seleccionar a partir da DON?

571
00:33:46,650 --> 00:33:48,810
[Resposta do alumno inaudível] >> ¿Que é iso?

572
00:33:48,810 --> 00:33:53,250
[Alumno] Todo o que é unha etiqueta. >> Temos dúas partes aquí.

573
00:33:53,250 --> 00:33:58,070
A segunda parte vai dicir que quero seleccionar esas etiquetas cunha marca de entrada,

574
00:33:58,070 --> 00:34:00,730
polo tanto, calquera elemento que sexa unha marca de entrada.

575
00:34:00,730 --> 00:34:03,080
Pero eu non quero só seleccionar todas as entradas

576
00:34:03,080 --> 00:34:05,170
porque algo así como un botón de envío podería ser unha entrada

577
00:34:05,170 --> 00:34:08,409
é algo así como unha caixa de texto podería ser unha entrada.

578
00:34:08,409 --> 00:34:11,909
Así, con estes corchetes Eu estou dicindo que eu só quero seleccionar os elementos

579
00:34:11,909 --> 00:34:14,110
que son do tipo texto.

580
00:34:14,110 --> 00:34:17,400
En algún lugar na miña tag HTML eu teño un atributo chamado tipo,

581
00:34:17,400 --> 00:34:19,750
é o valor de atributo, que ten que ser texto.

582
00:34:19,750 --> 00:34:21,340
Así como sobre esta primeira parte aquí?

583
00:34:21,340 --> 00:34:25,489
A primeira palabra deste selector é a forma, entón eu teño un espazo e entón esta parte de entrada.

584
00:34:25,489 --> 00:34:29,620
O que isto fai, poñendo a forma fronte a ela?

585
00:34:33,409 --> 00:34:35,860
Isto vai basicamente limitar a nosa consulta.

586
00:34:35,860 --> 00:34:38,510
Podería ser o caso de que temos algunhas entradas na páxina

587
00:34:38,510 --> 00:34:41,080
que non son descendentes dun formulario.

588
00:34:41,080 --> 00:34:46,150
O que isto vai facer é que vou dicir que eu só quero as marcas de entrada que teñen algún lugar por riba deles

589
00:34:46,150 --> 00:34:49,030
algún elemento pai dun formulario.

590
00:34:49,030 --> 00:34:52,100
E así, desta forma podemos facer esas consultas máis xerárquicas

591
00:34:52,100 --> 00:34:55,000
de xeito que non só ten que seleccionar todo combinando un selector dado.

592
00:34:55,000 --> 00:35:00,760
Podemos tipo de limitar o ámbito da consulta que a outra cousa.

593
00:35:00,760 --> 00:35:04,000
Polo tanto, agora que sabemos como seleccionar elementos na páxina,

594
00:35:04,000 --> 00:35:06,780
imos falar un pouco sobre AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX é un acrónimo aínda moi de moda que significa asynchronous JavaScript e XML.

596
00:35:12,270 --> 00:35:15,640
O que pasa é que o XML é só un xeito de representar algúns datos.

597
00:35:15,640 --> 00:35:20,920
>> Este tipo de popularidade perdida recentemente, de xeito que o X en AJAX non é usado en todo momento.

598
00:35:20,920 --> 00:35:26,220
Basicamente, o que AJAX nos permite facer é facer solicitudes HTTP

599
00:35:26,220 --> 00:35:28,620
do contexto de JavaScript.

600
00:35:28,620 --> 00:35:32,310
Cando estamos no noso navegador web e estamos navegando polas páxinas e facer clic nun enlace,

601
00:35:32,310 --> 00:35:37,790
o que o noso navegador vai facer é facer unha solicitude HTTP para calquera ligazón que premer.

602
00:35:37,790 --> 00:35:41,670
Pero iso non sempre é ideal, porque se ese é o caso, entón, como David estaba dicindo:

603
00:35:41,670 --> 00:35:45,220
Nós sempre temos que facer os usuarios facer clic nun botón Enviar ou facer clic nun enlace

604
00:35:45,220 --> 00:35:50,380
, A fin de facer calquera cousa acontecer, que vai implicar unha solicitude HTTP.

605
00:35:50,380 --> 00:35:54,160
Así, con AJAX podemos facer esas solicitudes en nome de JavaScript.

606
00:35:54,160 --> 00:35:57,020
Isto significa que cada vez que o usuario interactúa coa páxina ou ocorrer algo,

607
00:35:57,020 --> 00:36:01,780
podemos realmente facer un pedido programático para algún ficheiro PHP outra na nosa web

608
00:36:01,780 --> 00:36:06,280
ou calquera outra cousa e recuperar os datos que o ficheiro cospe para fóra.

609
00:36:06,280 --> 00:36:09,860
Imos dar un ollo a un exemplo de AJAX.

610
00:36:09,860 --> 00:36:16,140
Esta é a nosa páxina de Finanzas CS50 co cal espero que algúns de nós está familiarizado.

611
00:36:16,140 --> 00:36:21,790
Se olharmos para o código HTML da páxina, vemos aquí que eu engade algunhas cousas,

612
00:36:21,790 --> 00:36:23,820
un dos que eu teño dado esta forma unha identificación.

613
00:36:23,820 --> 00:36:26,480
Eu xa dixen id = "formulario de cotización".

614
00:36:26,480 --> 00:36:31,910
Eu fixen iso só porque vai facelo un pouco máis fácil de seleccionar a partir do DOM

615
00:36:31,910 --> 00:36:35,090
dende que eu podo só facer unha consulta moi sinxela.

616
00:36:35,090 --> 00:36:38,960
O que quero facer aquí é que quero corrixir algún problema coa CS50 Finanzas.

617
00:36:38,960 --> 00:36:41,550
Entón, se imos para finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
cada vez que quero obter unha cotización, eu teño que facer clic nese botón de Cita Get,

619
00:36:45,700 --> 00:36:48,960
e que Get botón Cita a continuación, leva-me a outra páxina enteira.

620
00:36:48,960 --> 00:36:52,400
E se eu queira outra cita, eu teño que premer o botón Atrás e introduza a

621
00:36:52,400 --> 00:36:54,480
Eu recibín unha cita, e eu bati o botón Atrás.

622
00:36:54,480 --> 00:36:56,840
Isto realmente non é a mellor experiencia do usuario.

623
00:36:56,840 --> 00:37:01,570
Quen podería realmente usar o sitio, se é que lento para os prezos das accións?

624
00:37:01,570 --> 00:37:05,630
Entón, o que queremos facer con AJAX é eliminar esa etapa de ir a unha páxina separada

625
00:37:05,630 --> 00:37:08,410
, A fin de ver os resultados.

626
00:37:08,410 --> 00:37:11,240
>> O que estamos realmente só pedindo é que o prezo realmente pequeno,

627
00:37:11,240 --> 00:37:14,240
e iso é só unha cantidade moi pequena de datos.

628
00:37:14,240 --> 00:37:17,400
Polo tanto, non hai necesidade de ir a outra páxina enteira HTML,

629
00:37:17,400 --> 00:37:20,670
Descarga de un novo lote de HTML, pode baixar algunhas imaxes,

630
00:37:20,670 --> 00:37:24,410
algúns outros arquivos CSS só para min para responder a esta pregunta moi simple

631
00:37:24,410 --> 00:37:27,810
de canto custa ese stock.

632
00:37:27,810 --> 00:37:31,000
Con AJAX podemos facelo moito máis fácil.

633
00:37:31,000 --> 00:37:36,400
Vemos aquí que eu estou conectando nun arquivo JavaScript chamado quote.js.

634
00:37:36,400 --> 00:37:40,140
Imos realmente abrir o ficheiro. Non hai.

635
00:37:42,610 --> 00:37:45,860
Todos os meus arquivos JavaScript van ser localizado en HTML

636
00:37:45,860 --> 00:37:47,630
para que o seu navegador poida acceder a ela.

637
00:37:47,630 --> 00:37:50,330
Entón temos un directorio separado aquí para JavaScript,

638
00:37:50,330 --> 00:37:54,340
e agora aquí é quote.js.

639
00:37:54,340 --> 00:38:00,930
No cume deste arquivo iso di aquí que quero esperar por toda a páxina a cargar

640
00:38:00,930 --> 00:38:04,830
antes de tentar facer algo. Por que iso é necesario?

641
00:38:04,830 --> 00:38:08,650
Acontece que a próxima cousa que eu vou facer aquí é comezar a ollar para un elemento

642
00:38:08,650 --> 00:38:10,810
que coincide con algún selector.

643
00:38:10,810 --> 00:38:15,600
Se este Javascript é sempre realizada antes de este elemento é cargado na páxina,

644
00:38:15,600 --> 00:38:17,820
entón, todo o que eu intento facer é non ir traballar

645
00:38:17,820 --> 00:38:20,580
porque eu estou indo a tentar seleccionar algo que non está alí aínda.

646
00:38:20,580 --> 00:38:23,780
Entón esta liña enriba di que quero que espera ata que todo estea cargado

647
00:38:23,780 --> 00:38:28,030
por iso estamos garantir que todos os elementos que eu estou buscando son realmente na páxina.

648
00:38:29,730 --> 00:38:34,310
Este sinal dólar aquí significa que eu estou usando a biblioteca chamada jQuery.

649
00:38:34,310 --> 00:38:38,570
Esta biblioteca jQuery permítenos usar estes seletores que só mirou.

650
00:38:38,570 --> 00:38:44,010
Ao dicir $ continuación, pasando como un argumento este # formulario de cotización,

651
00:38:44,010 --> 00:38:47,910
Agora estou seleccionando esa forma que só deu un ollo.

652
00:38:47,910 --> 00:38:52,290
Agora eu teño unha representación desa forma en memoria de algunha maneira.

653
00:38:52,290 --> 00:38:56,760
>> Nesta obxecto agora, esta representación da forma,

654
00:38:56,760 --> 00:38:58,890
Agora está a usar unha función chamada.

655
00:38:58,890 --> 00:39:02,710
O que esta función fai é que vai engadir un manipulador de eventos.

656
00:39:02,710 --> 00:39:06,310
O evento que imos escoitar é o evento submit.

657
00:39:06,310 --> 00:39:08,890
Así, cando o usuario preme neste botón Enviar ou prema Intro,

658
00:39:08,890 --> 00:39:11,730
este evento vai ó lume.

659
00:39:11,730 --> 00:39:16,390
Ao chamar a iso, eu agora pode substituír o comportamento por defecto do formulario.

660
00:39:16,390 --> 00:39:19,770
Sen esta JavaScript, a forma submeteria a calquera arquivo PHP

661
00:39:19,770 --> 00:39:22,110
usan ese atributo action.

662
00:39:22,110 --> 00:39:25,440
Pero en vez diso, eu estou dicindo agora, espera, espera, espera, eu non quero que realmente facelo.

663
00:39:25,440 --> 00:39:31,140
Eu quero que isto ocorre antes de ir e intentar someter a algún arquivo PHP.

664
00:39:31,140 --> 00:39:32,870
Agora o que quero facer?

665
00:39:32,870 --> 00:39:39,270
Neste punto, quero usar AJAX para cargar algunha forma no que o prezo das accións é.

666
00:39:39,270 --> 00:39:44,170
A primeira cousa que eu teño que saber o que stock usuario está mirando cara arriba.

667
00:39:44,170 --> 00:39:46,760
Para iso eu vou usar outro selector.

668
00:39:46,760 --> 00:39:49,020
Este é o terceiro selector vimos antes.

669
00:39:49,020 --> 00:39:54,460
Este di que quero comezar este elemento forma cun ID de formulario de cotización.

670
00:39:54,460 --> 00:39:58,440
Entón, en algún lugar dentro desa forma, ten que haber un elemento de entrada

671
00:39:58,440 --> 00:40:01,270
que ten un nome de símbolo.

672
00:40:01,270 --> 00:40:05,460
Se miramos para o noso HTML, vimos que tiña unha entrada [name = símbolo].

673
00:40:05,460 --> 00:40:12,380
Isto significa que este está indo a seleccionar a caixa de texto que o usuario está escribindo en.

674
00:40:12,380 --> 00:40:13,870
Isto é bo. Temos a caixa de texto.

675
00:40:13,870 --> 00:40:17,360
Agora só necesitamos saber o que hai dentro del.

676
00:40:17,360 --> 00:40:20,290
Para iso, podemos chamar ese método aquí, este val.,

677
00:40:20,290 --> 00:40:23,240
e este di que eu sei o que ten caixa de texto.

678
00:40:23,240 --> 00:40:28,160
Eu quero que me diga o que é o usuario introduciu na caixa de texto que.

679
00:40:28,160 --> 00:40:34,440
Agora temos unha cadea chamada símbolo que é igual a todo o que o usuario introduciu dentro

680
00:40:34,440 --> 00:40:39,820
Isto é bo. Podemos usar esa secuencia agora para facer o noso pedido.

681
00:40:39,820 --> 00:40:42,450
Esta é unha nova función aquí, este $,

682
00:40:42,450 --> 00:40:44,900
excepto que non estivemos máis vai ser seleccionar elementos,

683
00:40:44,900 --> 00:40:48,910
Nós imos estar chamando unha función diferente que é subministrado a nós por jQuery.

684
00:40:48,910 --> 00:40:54,810
Esta función AJAX é o que realmente vai facer esta solicitude HTTP.

685
00:40:54,810 --> 00:40:57,000
Entón, temos que dicir que algunhas cousas.

686
00:40:57,000 --> 00:41:01,410
A primeira cousa que temos que dicir a esta función é onde quero a solicitude para ir.

687
00:41:01,410 --> 00:41:08,910
En algún lugar no meu proxecto eu teño ese arquivo dentro do directorio HTML chamado quote.php.

688
00:41:08,910 --> 00:41:15,150
Eu podo acceder a este ficheiro, vimos, como esta, se eu for a localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Eu quero o meu JavaScript para facer unha petición para que a páxina.

690
00:41:20,450 --> 00:41:22,920
Que tipo de petición agora?

691
00:41:22,920 --> 00:41:27,210
Vimos antes de que o formulario ten que method = "post" atributo

692
00:41:27,210 --> 00:41:29,270
e iso significa que vai facer unha solicitude POST,

693
00:41:29,270 --> 00:41:32,630
por iso non vai poñer calquera cousa na URL, en vez de unha solicitude GET,

694
00:41:32,630 --> 00:41:36,860
que só sería despedido só identificado a páxina co navegador, por exemplo.

695
00:41:36,860 --> 00:41:41,260
Agora que xa dixen que quero facer unha solicitude HTTP POST

696
00:41:41,260 --> 00:41:44,840
para unha páxina situada no quote.php.

697
00:41:44,840 --> 00:41:51,490
Cando enviar o formulario, lembre que podería acceder aos elementos de entrada dentro do que a forma

698
00:41:51,490 --> 00:41:54,430
con esa variable $ _POST.

699
00:41:54,430 --> 00:41:58,710
Ata agora, na historia que non teña realmente enviado xunto os datos aínda.

700
00:41:58,710 --> 00:42:00,640
Acaba de dicir que estamos facendo unha proposta de AJAX

701
00:42:00,640 --> 00:42:03,200
E aquí está o tipo de solicitude que estamos facendo.

702
00:42:03,200 --> 00:42:07,090
Agora, necesitamos realmente enviar algúns datos para a páxina.

703
00:42:07,090 --> 00:42:10,930
Para iso, podemos utilizar esta propiedade chamada de datos.

704
00:42:10,930 --> 00:42:14,950
O valor da propiedade é en realidade unha matriz asociativa.

705
00:42:14,950 --> 00:42:19,390
A razón para iso é que nos permite enviar máis que 1 anaco de datos.

706
00:42:19,390 --> 00:42:24,750
É por iso que temos esas claves aquí aninhada dentro destas claves outras curvas.

707
00:42:24,750 --> 00:42:29,680
As claves nesas matrices asociativas vai ser a mesma cousa

708
00:42:29,680 --> 00:42:32,630
como os atributos nome nos nosos elementos de formulario.

709
00:42:32,630 --> 00:42:35,740
Isto significa que, se eu enviar xunto cunha clave de símbolo,

710
00:42:35,740 --> 00:42:41,870
Isto significa que a miña páxina PHP pode acceder a estes datos con $ _POST [símbolo]

711
00:42:41,870 --> 00:42:44,640
así como fixemos antes, cando estabamos enviar un formulario.

712
00:42:44,640 --> 00:42:47,090
E agora os datos reais que desexa enviar

713
00:42:47,090 --> 00:42:50,790
vai ser o valor dentro do array asociativo.

714
00:42:50,790 --> 00:42:54,070
>> Nós valor este texto nun símbolo variable chamada,

715
00:42:54,070 --> 00:42:57,380
e por iso estamos enviando xunto agora unha chave de símbolo

716
00:42:57,380 --> 00:43:01,380
e un valor de todo o que o usuario introduciu dentro

717
00:43:01,380 --> 00:43:06,270
Agora nós fixemos esa solicitude HTTP, o noso arquivo PHP foi executado,

718
00:43:06,270 --> 00:43:11,480
e que vai enviar algúns datos de volta agora para o cliente que vén de facer esta solicitude.

719
00:43:11,480 --> 00:43:15,220
Agora necesitamos responder a todo o que o servidor nos dixo.

720
00:43:15,220 --> 00:43:20,180
Para iso, temos esta última propiedade aquí chamado de éxito.

721
00:43:20,180 --> 00:43:24,240
O valor desta chave do éxito é, en realidade, vai ser unha función,

722
00:43:24,240 --> 00:43:26,910
e iso é unha das cousas legais que podes facer con JavaScript.

723
00:43:26,910 --> 00:43:31,720
Non só pode ter ints ou matrices como un valor dentro dunha matriz asociativa,

724
00:43:31,720 --> 00:43:34,170
que tamén poden ter unha función.

725
00:43:34,170 --> 00:43:36,380
Así dicindo éxito, esta é a miña chave.

726
00:43:36,380 --> 00:43:38,830
Un colonos di aquí vén o valor,

727
00:43:38,830 --> 00:43:41,810
e agora o valor deste é realmente unha función.

728
00:43:41,810 --> 00:43:44,460
Polo tanto, non precisa dar esa función un nome por si só.

729
00:43:44,460 --> 00:43:48,820
Podemos só dicir que este vai ser algunha función. El vai levar un argumento.

730
00:43:48,820 --> 00:43:51,190
O argumento para esta función será

731
00:43:51,190 --> 00:43:54,460
calquera que sexa o servidor enviou-nos de volta a partir da solicitude.

732
00:43:54,460 --> 00:43:57,750
Así como cando o noso navegador fai unha solicitude, o servidor envía algo de volta

733
00:43:57,750 --> 00:43:59,060
eo navegador exhibe,

734
00:43:59,060 --> 00:44:03,030
no contexto AJAX que acaba de facer unha petición, o servidor enviou algo,

735
00:44:03,030 --> 00:44:07,110
e agora temos que representaba como unha cadea.

736
00:44:07,110 --> 00:44:11,280
Con esa secuencia quere só para mostrar que na páxina.

737
00:44:11,280 --> 00:44:14,040
Para iso eu vou ter un selector pasado.

738
00:44:14,040 --> 00:44:17,570
Eu quero seleccionar o elemento con prezo de ID.

739
00:44:17,570 --> 00:44:20,710
Este é só un div baleiro que eu creei a páxina,

740
00:44:20,710 --> 00:44:26,640
e quero establecer o contido desa div ser o que o servidor enviou-nos de volta.

741
00:44:26,640 --> 00:44:30,280
Eu realmente modificado quote.php un pouco.

742
00:44:30,280 --> 00:44:33,460
>> En vez de chamar render e facendo algúns páxina

743
00:44:33,460 --> 00:44:38,100
quote.php agora é simplemente vai imprimir o valor do stock como unha cadea.

744
00:44:38,100 --> 00:44:41,880
Entón, se realmente visitar a páxina, que tería só que ver que pequeno cadea

745
00:44:41,880 --> 00:44:45,030
de calquera que sexa o prezo das accións é.

746
00:44:45,030 --> 00:44:50,170
Unha última cousa que necesitamos facer aquí é só garantir que esta función devolve falso.

747
00:44:50,170 --> 00:44:53,560
O que isto di é que, se eu estou dentro dun manipulador de eventos

748
00:44:53,560 --> 00:44:57,300
e que manipulador de eventos retorna false en vez de volver verdade,

749
00:44:57,300 --> 00:45:01,510
iso significa que eu non quero que o evento orixinal ó lume.

750
00:45:01,510 --> 00:45:05,270
Neste caso, non se ten algunha Javascript e presentado un formulario,

751
00:45:05,270 --> 00:45:08,280
noso navegador é que vai dicir: "Eu vou enviar os datos ao longo",

752
00:45:08,280 --> 00:45:10,130
e eles van mandar vostede para unha outra páxina.

753
00:45:10,130 --> 00:45:14,360
Como estamos usando AJAX, agora, non hai necesidade de enviar o usuario a outra páxina.

754
00:45:14,360 --> 00:45:17,920
Nós só estamos indo a amosar os resultados de forma dinámica nesa mesma páxina.

755
00:45:17,920 --> 00:45:21,460
Nós realmente non quere ir a calquera lugar, e quero estar na mesma páxina.

756
00:45:21,460 --> 00:45:27,060
Entón, retornando false, é seguro que a forma non fai iso para nós.

757
00:45:27,060 --> 00:45:31,170
Imos dar un ollo ao que este realmente se parece.

758
00:45:31,170 --> 00:45:34,180
A nosa páxina de cotización parece o mesmo.

759
00:45:34,180 --> 00:45:37,240
Deixe-me puxar arriba o inspector aquí para que poidamos ver o que está a suceder.

760
00:45:37,240 --> 00:45:40,270
Facelo un pouco menos enorme.

761
00:45:40,270 --> 00:45:44,590
Lembre que abrir a pestana de rede, este é o lugar onde podemos ver todas as solicitudes HTTP

762
00:45:44,590 --> 00:45:47,570
que están a suceder na páxina.

763
00:45:47,570 --> 00:45:52,890
>> Para un símbolo deixarme escribir AAPL e prema en Obter cotización.

764
00:45:52,890 --> 00:45:56,720
Agora vimos que unha parte de Apple custa preto de número de dólares

765
00:45:56,720 --> 00:46:00,410
só apareceu na páxina, pero a URL non cambia en nada.

766
00:46:00,410 --> 00:46:04,570
En realidade, aquí está a solicitude HTTP que nós fixemos.

767
00:46:04,570 --> 00:46:09,980
Fixemos unha solicitude POST para quote.php. Isto ten sentido.

768
00:46:09,980 --> 00:46:12,800
Isto é o que o servidor enviou-nos de volta.

769
00:46:12,800 --> 00:46:16,320
Non é máis ese documento xigantesco HTML con imaxes e cousas así,

770
00:46:16,320 --> 00:46:20,920
é só unha liña de texto, e entón nós só aparece a liña de texto.

771
00:46:20,920 --> 00:46:26,290
Se volvemos para as cabeceiras e ver o que realmente enviado dentro desta solicitude HTTP,

772
00:46:26,290 --> 00:46:33,950
podemos ver aquí abaixo que enviamos ao longo dunha clave de símbolo e un valor de AAPL,

773
00:46:33,950 --> 00:46:36,430
que é o que o usuario introduciu dentro

774
00:46:36,430 --> 00:46:39,230
Isto é bo, pero aínda é un pouco aburrido.

775
00:46:39,230 --> 00:46:42,490
Eu aínda teño que facer clic nese botón para obter a cotización de accións.

776
00:46:42,490 --> 00:46:45,880
Somos persoas moi ocupadas e non temos tempo para premer en botóns.

777
00:46:45,880 --> 00:46:49,910
Google entendeu iso un pouco tempo cando aplicaron Google Instant.

778
00:46:49,910 --> 00:46:53,590
Google Instant fai é como está escribindo só comeza a presentar os resultados para ti

779
00:46:53,590 --> 00:46:56,520
así que non se preocupe mesmo premendo Procurar.

780
00:46:56,520 --> 00:46:58,730
En realidade, unha historia divertida relacionada a iso.

781
00:46:58,730 --> 00:47:01,100
Unha vez que Google Instant saíu, as persoas eran como, "Whoa, iso é super incrible."

782
00:47:01,100 --> 00:47:02,540
"Iso é tan legal."

783
00:47:02,540 --> 00:47:05,950
É un estudante de baixo de Stanford que tiña 19 anos na época

784
00:47:05,950 --> 00:47:09,000
fixo esta web chamado YouTube instantánea.

785
00:47:09,000 --> 00:47:13,170
Todos instantánea de YouTube non é efectivamente buscar YouTube instantaneamente.

786
00:47:13,170 --> 00:47:17,020
Polo tanto, en vez de ter que ir a YouTube.com e bateu de busca,

787
00:47:17,020 --> 00:47:21,650
cando comezar a escribir algo no YouTube instantánea como CS50,

788
00:47:21,650 --> 00:47:25,320
podemos ver aquí que está intentando unha conexión lenta de Internet

789
00:47:25,320 --> 00:47:28,500
cubrir eses resultados en directo.

790
00:47:28,500 --> 00:47:35,590
Para iso podemos realmente facer unha modificación moi sinxelo de noso arquivo quote.js.

791
00:47:35,590 --> 00:47:40,900
Agora estamos anexando este evento cando o formulario é enviado.

792
00:47:40,900 --> 00:47:43,760
Nós realmente non queremos facer o usuario mandar ese formulario máis,

793
00:47:43,760 --> 00:47:48,570
entón imos dimitir vez este evento cada vez que o usuario preme unha tecla.

794
00:47:48,570 --> 00:47:53,200
Para iso imos primeiro cambiar o evento para presentar keyup.

795
00:47:53,200 --> 00:47:55,740
Isto significa que, en vez de esperar que a forma de presentar,

796
00:47:55,740 --> 00:47:58,490
cada vez que a tecla é presionada, algo vai ocorrer.

797
00:47:58,490 --> 00:48:02,030
Non fai máis sentido para achegar este evento keyup para todo o formulario.

798
00:48:02,030 --> 00:48:05,080
Nós realmente só se preocupan coa caixa de busca.

799
00:48:05,080 --> 00:48:09,320
>> Para seleccionar que agora podemos cambiar este sexa, no canto de formulario de cotización,

800
00:48:09,320 --> 00:48:14,220
formulario de cotización, e nós imos ter unha entrada (tipo de texto =) ou, poderiamos dicir (nome do símbolo =) -

801
00:48:14,220 --> 00:48:16,420
o que queremos.

802
00:48:16,420 --> 00:48:18,650
Agora hai unha última cousa que temos que facer.

803
00:48:18,650 --> 00:48:21,190
Teña en conta que aquí abaixo, cando dixo que o retorno falsa

804
00:48:21,190 --> 00:48:24,370
Nós dixemos que non queremos que o evento estándar para disparar.

805
00:48:24,370 --> 00:48:26,390
Pero iso só acontece que, se desactivar que agora,

806
00:48:26,390 --> 00:48:29,660
O que se dixita non vai aparecer no seu navegador máis

807
00:48:29,660 --> 00:48:33,000
porque iso sería o comportamento estándar de escribir nunha caixa de texto.

808
00:48:33,000 --> 00:48:38,660
Non queremos máis para substituír ese, entón imos destruír este return false.

809
00:48:38,660 --> 00:48:44,800
Se salvar o que e recargue a páxina, agora cando comezar a escribir AAPL

810
00:48:44,800 --> 00:48:50,160
vai ver que o prezo das accións no fondo aquí está completando automaticamente.

811
00:48:50,160 --> 00:48:53,150
Entón aquí está CS50 Instantânea Finanzas.

812
00:48:53,150 --> 00:48:55,860
En realidade, unha historia divertida sobre o Instant YouTube

813
00:48:55,860 --> 00:48:59,420
é que o alumno só unha especie de escribiu como un proxecto de unha noite,

814
00:48:59,420 --> 00:49:03,800
e ao día seguinte foille ofrecido un emprego polo CEO de YouTube.

815
00:49:03,800 --> 00:49:10,610
Así, tan sinxelo coma iso, CS50 alumnos, os seus proxectos finais que pode obter un emprego en YouTube.

816
00:49:10,610 --> 00:49:14,720
Algo así é unha idea moi legal para un proxecto final, non?

817
00:49:14,720 --> 00:49:18,170
Tivemos algunhas funcionalidades existentes que queriamos integrar.

818
00:49:18,170 --> 00:49:20,330
Nós mellorar a experiencia do usuario un pouco,

819
00:49:20,330 --> 00:49:24,340
e de súpeto, buscando algo en YouTube instantánea pode ser moito máis fácil

820
00:49:24,340 --> 00:49:27,290
buscar en YouTube regular.

821
00:49:27,290 --> 00:49:30,790
Entón, iso é AJAX en poucas palabras.

822
00:49:30,790 --> 00:49:34,860
>> Nos exemplos que José estaba mostrando vimos unha chea de autocompletes,

823
00:49:34,860 --> 00:49:39,250
e aqueles autocompletes son realmente, realmente útil, porque non temos que lembrar -

824
00:49:39,250 --> 00:49:41,770
Por exemplo, se non se lembra do prezo das accións de Apple

825
00:49:41,770 --> 00:49:45,110
e nós só sei que é algo aa, no canto de só dicindo para min,

826
00:49:45,110 --> 00:49:48,740
"Unha parte desa cousa custa tanto diñeiro",

827
00:49:48,740 --> 00:49:52,540
Eu tipo de gustaríame saber cales accións comezar aa.

828
00:49:52,540 --> 00:49:58,340
Podemos facelo realmente ben coa biblioteca Bootstrap que xa está incluído

829
00:49:58,340 --> 00:50:01,380
dentro CS50 Finanzas.

830
00:50:01,380 --> 00:50:09,390
Se ve ata aquí para a marca de JavaScript e rolar para typeahead,

831
00:50:09,390 --> 00:50:13,730
este é só un complemento legal que alguén xa escribiu para nós,

832
00:50:13,730 --> 00:50:16,980
e podemos facilmente usar a súa funcionalidade como este.

833
00:50:16,980 --> 00:50:21,410
Eu escriba un A e aquí está a lista de algúns estados que comezan con A.

834
00:50:21,410 --> 00:50:25,360
Imos dicir que eu creo que iso é moi legal e é hora de incluír este na miña páxina.

835
00:50:25,360 --> 00:50:28,300
Acontece que iso é moi, moi sinxelo.

836
00:50:28,300 --> 00:50:32,810
Imos ir aquí para quote3.js.

837
00:50:34,890 --> 00:50:37,380
Meu arquivo parece un pouco diferente.

838
00:50:37,380 --> 00:50:39,700
Ata aquí todas as miñas cousas AJAX é o mesmo.

839
00:50:39,700 --> 00:50:43,170
Eu quero cargar os datos de stock sen ter que ir a outra páxina.

840
00:50:43,170 --> 00:50:46,220
Pero agora quero usar este plugin.

841
00:50:46,220 --> 00:50:51,020
A documentación Bootstrap ten grandes exemplos de como exactamente podo facer iso.

842
00:50:51,020 --> 00:50:54,350
Quero dicir, "Aquí está a entrada que quero autocomplete",

843
00:50:54,350 --> 00:50:56,640
e eu vou chamar esta función chamada typeahead,

844
00:50:56,640 --> 00:50:59,730
e que vai tratar con todas as cousas typeahead para nós.

845
00:50:59,730 --> 00:51:02,090
El ha arrincar a lista, que vai facer todos os nosos filtrado.

846
00:51:02,090 --> 00:51:06,680
O único que necesita saber é que datos estamos autocompleting.

847
00:51:06,680 --> 00:51:10,480
Entón, podo atopar esa clave só lendo a documentación e ollando para os exemplos.

848
00:51:10,480 --> 00:51:14,150
I dan unha chave de orixe, o valor desta clave

849
00:51:14,150 --> 00:51:17,770
é só unha matriz algunhas das cousas que quero autocomplete.

850
00:51:17,770 --> 00:51:20,180
Esta variable veu deste ficheiro.

851
00:51:20,180 --> 00:51:23,400
Eu abro symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Isto é só unha matriz symbols.js esta moi, moi grande, que contén cordas

853
00:51:27,980 --> 00:51:32,080
de todos os símbolos imaxes do NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Se eu queira voltar HTML, para jharvard, vhosts, globalhost, html, templates,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Dende que é agora chamado quote3.js, deixe-me cambiar o arquivo JavaScript estou incluíndo aquí.

857
00:51:50,910 --> 00:51:55,110
Agora eu teño quote3.js, entón eu vou cargar este ficheiro JavaScript separado,

858
00:51:55,110 --> 00:51:57,910
o que ten que Bootstrap autocomplete.

859
00:51:57,910 --> 00:52:04,430
Agora, cando eu atrás para o navegador, recargue a páxina e comezar a escribir á,

860
00:52:04,430 --> 00:52:06,880
hai meu autocomplete. E foi realmente tan sinxelo coma iso.

861
00:52:06,880 --> 00:52:11,400
Eu tiña unha liña de código que só dixo: "Aquí están as cousas que quero autocomplete",

862
00:52:11,400 --> 00:52:16,590
e de súpeto eu teño esa funcionalidade moi, moi agradable con non moito esforzo en todo.

863
00:52:16,590 --> 00:52:19,810
Como está a desenvolver sitios web e particularmente o lado frontal das cousas,

864
00:52:19,810 --> 00:52:21,840
notarás que este é o caso moito.

865
00:52:21,840 --> 00:52:25,700
Hai moito, moito moito, moi legal de bibliotecas libres alí fóra

866
00:52:25,700 --> 00:52:30,190
que o fan super fácil de facer cousas como esta.

867
00:52:30,190 --> 00:52:37,230
Alguén pode pensar en calquera inconvenientes de simplemente autocompleting nesta lista grande de símbolos?

868
00:52:37,230 --> 00:52:41,580
O que podería ser algo que non é o mellor con esta visión?

869
00:52:42,790 --> 00:52:45,960
Si >> [Alumno] Tempo, se ten unha morea de [inaudível]

870
00:52:45,960 --> 00:52:50,420
Si Agora estamos copiando este ficheiro JavaScript enorme e hai unha morea de símbolos.

871
00:52:50,420 --> 00:52:54,360
E así, se temos unha tonelada de cousas, este tipo de podería aumentar a latencia non só buscar

872
00:52:54,360 --> 00:52:56,600
pero tamén facer a descarga do ficheiro real.

873
00:52:56,600 --> 00:52:58,670
Grande. Algo máis?

874
00:53:01,950 --> 00:53:05,280
Neste momento non hai ningún sentido real de relevancia.

875
00:53:05,280 --> 00:53:08,190
Se eu escribir un A, as empresas que aparecen aquí

876
00:53:08,190 --> 00:53:11,220
poden non ser as empresas máis populares que comezan con A.

877
00:53:11,220 --> 00:53:17,130
>> Antes de comezar a Apple, isto pode levar algúns personaxes moito máis para o que eu estou buscando.

878
00:53:17,130 --> 00:53:20,420
Este autocomplete non ten ese sentido de relevancia.

879
00:53:20,420 --> 00:53:24,400
El só vai dicir: "O que corresponda vou presentar."

880
00:53:24,400 --> 00:53:30,510
En vez diso, gustaríame algunha maneira, integrar algunha relevancia nas miñas investigacións.

881
00:53:30,510 --> 00:53:36,440
Se eu pasar por aquí para Yahoo! Finanzas, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Se eu tentar engadir un símbolo na páxina de Yahoo! Finanzas

883
00:53:42,100 --> 00:53:52,310
e comezar a escribir GOOG, eu teño esa boa lista de cousas.

884
00:53:52,310 --> 00:53:57,100
Obviamente, parece Yahoo! Finanzas está a facer algo máis intelixente aquí.

885
00:53:57,100 --> 00:53:59,790
Teñen algunha importancia e eles tamén teñen información adicional

886
00:53:59,790 --> 00:54:01,430
como o nome do stock.

887
00:54:01,430 --> 00:54:05,850
Iso é algo que eu realmente non podo ir con só unha lista meu stock de símbolos.

888
00:54:05,850 --> 00:54:09,520
Eu quero isto e vou leva-la.

889
00:54:09,520 --> 00:54:11,790
Para iso imos facer algunhas cousas.

890
00:54:11,790 --> 00:54:15,580
Imos primeiro abrir o inspector da páxina

891
00:54:15,580 --> 00:54:18,100
porque vimos que esta páxina non está recargando a todos,

892
00:54:18,100 --> 00:54:21,960
por iso é probablemente usando AJAX dalgunha forma estar cargando os seus datos.

893
00:54:21,960 --> 00:54:23,920
Podemos descubrir cales son os datos que está cargando.

894
00:54:23,920 --> 00:54:28,390
Se eu premer nesta guía de rede, estes van ser todas as peticións que comezan a ser despedido.

895
00:54:28,390 --> 00:54:34,020
Agora, se eu escribir Goo, podemos ver que eu só teño unha nova solicitude HTTP.

896
00:54:34,020 --> 00:54:37,490
Este é probablemente o lugar onde os datos proveñen.

897
00:54:37,490 --> 00:54:41,990
Con certeza, se eu ollar para esta URL, que é un pouco estrañas nomeado,

898
00:54:41,990 --> 00:54:46,930
podemos ver que iso é exactamente onde Yahoo é o envío fóra dos seus datos.

899
00:54:46,930 --> 00:54:53,400
>> Eu creei un arquivo separado chamado suggest.php que é moi semellante en espírito para a función de procura.

900
00:54:53,400 --> 00:54:57,730
É basicamente vai facer unha consulta a URL de Yahoo, volver algúns datos,

901
00:54:57,730 --> 00:54:59,750
e enviá-lo de volta para min.

902
00:54:59,750 --> 00:55:02,570
Agora, en vez de usar esa lista grande, enorme de símbolos,

903
00:55:02,570 --> 00:55:05,280
Podo usar cousas boas de Yahoo relevancia,

904
00:55:05,280 --> 00:55:08,150
e eu non teño que baixar o arquivo JavaScript maciza.

905
00:55:08,150 --> 00:55:12,040
Eu só vou para tirar para abaixo os símbolos de accións realmente relevantes.

906
00:55:12,040 --> 00:55:13,960
Imos saltar para dentro diso.

907
00:55:13,960 --> 00:55:17,360
Entón, html, JS. Estamos agora en quote4.

908
00:55:17,360 --> 00:55:22,120
Agora estamos non usa máis que gran lista de ficheiros JavaScript.

909
00:55:22,120 --> 00:55:24,430
Pero hai un pequeno tipo de problema de deseño aquí.

910
00:55:24,430 --> 00:55:28,200
Nós dixemos que a A en AJAX é asíncrono.

911
00:55:28,200 --> 00:55:31,000
O que isto significa que cando fago unha proposta de AJAX,

912
00:55:31,000 --> 00:55:36,490
tan certo aquí na liña 8, este é o lugar onde miña petición AJAX é realmente despedido.

913
00:55:36,490 --> 00:55:40,370
Imos dicir que agora eu teño un código aquí que vai facer algo

914
00:55:40,370 --> 00:55:43,930
gusto de alertar o usuario ou cambiar algo na páxina.

915
00:55:43,930 --> 00:55:49,830
O que non vai ocorrer é o seu navegador non esperar a esta petición para continuar

916
00:55:49,830 --> 00:55:53,480
antes de descender e bater esta liña.

917
00:55:53,480 --> 00:55:55,900
Esta é a parte asíncrono.

918
00:55:55,900 --> 00:55:58,400
Vai facer esa petición e dicir: "Cando termine,

919
00:55:58,400 --> 00:56:03,080
"Volver e chamar esa función que eu lle dixen para chamar dentro de éxito."

920
00:56:03,080 --> 00:56:07,300
Isto significa que non pode só baixar todas as accións de antemán.

921
00:56:07,300 --> 00:56:10,300
Necesitamos facer a solicitude e agardar por algo para volver.

922
00:56:10,300 --> 00:56:13,330
Isto significa que, antes, poderiamos simplemente dicir Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Aquí está a lista de cousas que quero que autocomplete".

924
00:56:15,580 --> 00:56:18,950
Non podemos máis facelo máis, porque non sabemos

925
00:56:18,950 --> 00:56:21,780
o que queremos, en realidade, autocomplete.

926
00:56:21,780 --> 00:56:25,190
Afortunadamente, Bootstrap pensara niso, porque aqueles faces son intelixentes por alí,

927
00:56:25,190 --> 00:56:30,160
e realmente nos deu unha outra forma de cargar este plugin typeahead.

928
00:56:30,160 --> 00:56:35,630
Antes, o valor da propiedade de orixe era só unha matriz tan grande de cousas para autocomplete.

929
00:56:35,630 --> 00:56:39,580
>> Agora a propiedade fonte é realmente unha función,

930
00:56:39,580 --> 00:56:44,580
eo obxectivo desta función é descubrir o que as cousas para autocomplete sobre o son.

931
00:56:44,580 --> 00:56:48,730
A forma como vai descubrir que é o que vai pedir Yahoo! Finanzas

932
00:56:48,730 --> 00:56:51,750
o que as mellores cousas para autocomplete son.

933
00:56:51,750 --> 00:56:54,500
Para iso vou facer un pedido moi semellante AJAX.

934
00:56:54,500 --> 00:56:59,010
Vou pedir esta páxina suggest.php.

935
00:56:59,010 --> 00:57:01,360
Eu quero enviar xunto os símbolos aínda.

936
00:57:01,360 --> 00:57:05,570
E agora o meu éxito, a documentación Bootstrap me dixo

937
00:57:05,570 --> 00:57:09,130
que, a fin de cubrir esa lista de cousas,

938
00:57:09,130 --> 00:57:14,370
todo o que eu teño que facer é pasar esa matriz agora a función de retorno.

939
00:57:14,370 --> 00:57:15,660
Pero agarde un minuto.

940
00:57:15,660 --> 00:57:20,240
Se este é suposta ser unha matriz e AJAX é me mandar de volta o texto,

941
00:57:20,240 --> 00:57:22,720
Como isto é posible?

942
00:57:22,720 --> 00:57:27,910
Isto introduce unha nova forma de intercambio de datos chamado JSON.

943
00:57:27,910 --> 00:57:33,000
Neste caso, nós non estamos só enviando de volta unha secuencia simple de texto.

944
00:57:33,000 --> 00:57:37,670
Agora estamos lidando con esta lista máis complexo de símbolos de accións.

945
00:57:37,670 --> 00:57:41,730
Estes símbolos de accións tamén pode incluír cousas como o nome da empresa ou os prezos actuais.

946
00:57:41,730 --> 00:57:47,550
Usando só unha corda longa grande que non está formatado en calquera forma previsible

947
00:57:47,550 --> 00:57:51,970
non vai ser a mellor maneira de obter estes datos a partir do servidor Yahoo para min

948
00:57:51,970 --> 00:57:54,540
de forma que eu poida entender facilmente.

949
00:57:54,540 --> 00:58:01,280
JSON é unha tecnoloxía que tira proveito de como crear matrices asociativas en JavaScript.

950
00:58:01,280 --> 00:58:04,510
Isto parece moi cunha matriz JavaScript asociativa,

951
00:58:04,510 --> 00:58:06,600
e, na verdade, é porque é.

952
00:58:06,600 --> 00:58:09,710
JSON significa JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Este é basicamente un formato acordado para a transferencia de datos e cara atrás.

954
00:58:15,020 --> 00:58:18,280
Aquí este obxecto JSON ou esa matriz JSON asociativa

955
00:58:18,280 --> 00:58:21,010
está a enviar-me algúns datos sobre o curso.

956
00:58:21,010 --> 00:58:25,110
>> As claves deste array son cousas como curso que ten un valor de CS50,

957
00:58:25,110 --> 00:58:29,140
e aquí podemos ver que eu poida ter un valor que é unha matriz.

958
00:58:29,140 --> 00:58:32,730
Eu non teño que facer cousas como analizar fóra cordas e buscar por comas

959
00:58:32,730 --> 00:58:35,330
e facer cousas malucas como esta.

960
00:58:35,330 --> 00:58:38,820
Porque este é declarado neste formato JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript e jQuery xa ten funcións para converterse nunha cadea

962
00:58:43,510 --> 00:58:48,140
que se parece este JSON nunha matriz JavaScript real asociativa

963
00:58:48,140 --> 00:58:50,440
que podemos traballar.

964
00:58:50,440 --> 00:58:56,660
Facelo é tan sinxelo que dicir que xa non é este ficheiro suggest.php,

965
00:58:56,660 --> 00:58:59,040
me mandando de novo simplemente unha secuencia de texto,

966
00:58:59,040 --> 00:59:01,950
pero eu sei que vai ser me mandar de volta JSON.

967
00:59:01,950 --> 00:59:06,760
Isto significa que o JSON que pode ser convertida nunha matriz asociativa JavaScript.

968
00:59:06,760 --> 00:59:10,830
E así jQuery, quere que faga iso por min.

969
00:59:10,830 --> 00:59:13,990
Isto significa que este parámetro resposta aquí,

970
00:59:13,990 --> 00:59:16,070
iso xa non é só unha secuencia.

971
00:59:16,070 --> 00:59:19,860
Porque nós dixemos jQuery que aquí vén algúns JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery vai ser intelixente o suficiente para dicir: "Vostede quería JSON?"

973
00:59:22,950 --> 00:59:26,890
"Eu estou indo a converter isto nun array asociativo para ti."

974
00:59:26,890 --> 00:59:32,100
Vamos realmente dar un ollo ao guía Rede xa que temos quote4.js.

975
00:59:32,100 --> 00:59:35,400
Imos cambiar isto e recargue a páxina.

976
00:59:37,150 --> 00:59:41,250
Agora vou escribir un de novo.

977
00:59:41,250 --> 00:59:45,600
Eu fixen solicitado pola parella para suggest.php, pero agora response iso,

978
00:59:45,600 --> 00:59:48,670
en vez de só a corda, que é JSON.

979
00:59:48,670 --> 00:59:52,580
Entón, eu teño unha chave de apertura rizados, dicindo: "Aquí ven un array asociativo."

980
00:59:52,580 --> 00:59:56,830
>> A primeira clave e só dese matriz asociativo é chamado de símbolos,

981
00:59:56,830 --> 01:00:00,240
e, a continuación, aquí é unha matriz de todos os símbolos relevantes

982
01:00:00,240 --> 01:00:04,820
chegando agora de Yahoo! Finanzas non, a partir desa lista xigantesca.

983
01:00:06,110 --> 01:00:10,630
É así que eu pode simplemente encher este plugin autocomplete

984
01:00:10,630 --> 01:00:14,280
con algúns datos que non está vindo dun ficheiro local que xa está predeterminado

985
01:00:14,280 --> 01:00:17,490
pero a partir de outra cousa.

986
01:00:17,490 --> 01:00:21,160
Acontece que podemos realmente sacar proveito dunha tecnoloxía chamada JSONP,

987
01:00:21,160 --> 01:00:27,420
ou JSON con padding, que vai borrar este compoñente suggest.php.

988
01:00:27,420 --> 01:00:34,010
Pero, en vez de facer iso, imos en vez dar un ollo a como podo mellorar iso aínda máis.

989
01:00:34,010 --> 01:00:36,040
Eu realmente gosto de typeahead Bootstrap. É moi bo.

990
01:00:36,040 --> 01:00:39,570
Pero estamos quedando boa Javascript e queremos tipo de facelo nós mesmos,

991
01:00:39,570 --> 01:00:43,870
quizais dar un ollo ao que este plugin podería estar facendo.

992
01:00:43,870 --> 01:00:46,500
Imos deixar de usar esa cousa typeahead,

993
01:00:46,500 --> 01:00:50,550
e imos tratar de facer esa lista de accións suxeridas nós mesmos.

994
01:00:50,550 --> 01:00:53,790
Aquí en quote6.php imos comezar da mesma maneira.

995
01:00:53,790 --> 01:00:58,050
Tipos de cada vez algo a alguén, queremos facer unha proposta de AJAX.

996
01:00:58,050 --> 01:01:01,590
Este é semellante ao noso instantánea Finanzas orixinal CS50.

997
01:01:01,590 --> 01:01:05,020
En vez de facer un pedido para quote.php,

998
01:01:05,020 --> 01:01:08,530
agora estamos facendo unha petición para que o mesmo arquivo como antes, este suggest.php,

999
01:01:08,530 --> 01:01:12,460
que é só ir para extraer datos de Finanzas Yahoo!.

1000
01:01:12,460 --> 01:01:19,480
>> Unha vez máis, nós aínda estamos esperando JSON, pero agora desde o typeahead non está facendo iso para nós,

1001
01:01:19,480 --> 01:01:24,850
necesitamos tamén enviará o valor que está dentro da caixa de texto actual.

1002
01:01:24,850 --> 01:01:28,120
Agora sabemos que pedir Yahoo! Finanzas para,

1003
01:01:28,120 --> 01:01:34,160
e agora aquí está a función que queremos facer unha vez que a solicitude sexa rematada.

1004
01:01:34,160 --> 01:01:36,520
Non temos o plugin para facer a lista para nós,

1005
01:01:36,520 --> 01:01:40,630
entón aquí é onde nós estamos indo realmente para construír unha lista de suxestións.

1006
01:01:40,630 --> 01:01:44,850
Para iso, así como en PHP que concatenadas esas secuencias grandes HTML

1007
01:01:44,850 --> 01:01:48,170
entón impreso deles, podemos facer o mesmo que en JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Primeiro imos comezar esta cadea chamada suxestións,

1009
01:01:51,850 --> 01:01:54,590
e esa secuencia é só vai ter algún código HTML.

1010
01:01:54,590 --> 01:01:58,320
Queremos que sexa unha lista de cousas, entón imos comezar con esa etiqueta lista

1011
01:01:58,320 --> 01:02:03,340
e agora estamos indo a iterar sobre todos os símbolos que foron devoltos de volta para nós.

1012
01:02:03,340 --> 01:02:06,500
Lembre, porque xa dixo dataType: 'JSON', iso non é unha cadea.

1013
01:02:06,500 --> 01:02:09,500
Iso xa é unha matriz para nós. Iso é moi legal.

1014
01:02:09,500 --> 01:02:13,790
Podemos simplemente dicir: "Eu quero que engadir un elemento da lista."

1015
01:02:13,790 --> 01:02:16,000
Imos colocar-lo dentro dun elemento dun lado en que,

1016
01:02:16,000 --> 01:02:19,030
nós imos dar-lle unha clase de suxestións, co que sabemos o que é,

1017
01:02:19,030 --> 01:02:23,880
e agora aquí é o símbolo que nós volvemos de Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Unha vez que creamos un elemento para cada un dos símbolos que chegamos de volta,

1019
01:02:27,230 --> 01:02:30,100
só queremos pechar a lista.

1020
01:02:30,100 --> 01:02:33,040
Entón agora suxestións representa este pequeno fragmento HTML

1021
01:02:33,040 --> 01:02:37,860
que cando feitas en unha páxina que vai ser a lista de cousas que estamos a buscar.

1022
01:02:37,860 --> 01:02:41,070
Agora imos realmente poñer isto na páxina.

1023
01:02:41,070 --> 01:02:46,390
Para iso realmente creou outra div baleira e eu dei-lle un ID de suxestións.

1024
01:02:46,390 --> 01:02:52,520
Así como imos definir o contido da p que amosar o prezo dos datos de stock,

1025
01:02:52,520 --> 01:02:58,600
agora só quero definir o contido desta div ao que esa secuencia é

1026
01:02:58,600 --> 01:03:00,290
que contén estes símbolos.

1027
01:03:00,290 --> 01:03:07,650
Ao usar este método de HTML, este variable suxestións, esta cadea, é unha secuencia de HTML.

1028
01:03:07,650 --> 01:03:13,490
Eu quero que tome o HTML e poñelas dentro da div chamado suxestións.

1029
01:03:13,490 --> 01:03:15,680
Acaba de algo adxunto ó DON agora.

1030
01:03:15,680 --> 01:03:20,360
Nós engadimos algúns elementos novos para o don que agora podemos ver na páxina.

1031
01:03:20,360 --> 01:03:22,540
Imos ver o que iso parece.

1032
01:03:22,540 --> 01:03:29,110
Cargar en quote6 e agora volvemos,

1033
01:03:29,110 --> 01:03:34,480
agora cando comezar a escribir AAPL, non temos máis que Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
pero agora temos esta lista que fixemos a nós mesmos.

1035
01:03:38,470 --> 01:03:43,230
Isto é un pouco máis feo que o typeahead Bootstrap, por exemplo,

1036
01:03:43,230 --> 01:03:45,580
pero iso non nos permiten facer outra cousa.

1037
01:03:45,580 --> 01:03:48,660
Cando estabamos a mirar para este plugin Bootstrap,

1038
01:03:48,660 --> 01:03:52,590
vimos que, cando autocompleted, un dos valores autocomplete foi AAPL.

1039
01:03:52,590 --> 01:03:54,820
Isto pode non ser tan útil.

1040
01:03:54,820 --> 01:03:59,100
Como usuario, eu podería non recoñecer inmediatamente todos os símbolos de accións.

1041
01:03:59,100 --> 01:04:02,370
O que eu son probabelmente máis propensos a recoñecer son nomes reais da empresa.

1042
01:04:02,370 --> 01:04:05,310
Polo tanto, non sería realmente útil se en vez de dicir AAPL

1043
01:04:05,310 --> 01:04:07,970
isto dito algo así como a Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Porque temos rolou iso nós mesmos, podemos realmente facer iso facilmente.

1045
01:04:12,240 --> 01:04:17,630
Imos abrir noso arquivo última cita aquí, entón quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Mesmo. Acaba de crear outro ficheiro PHP que pode voltar a nós máis que os símbolos.

1047
01:04:23,200 --> 01:04:25,550
Tamén pode dar-nos de volta nomes da empresa.

1048
01:04:25,550 --> 01:04:28,150
E por iso estamos facendo a mesma cousa. Estamos a facer unha proposta de AJAX.

1049
01:04:28,150 --> 01:04:32,370
Unha vez que a solicitude foi concluído, imos levar a cabo esta función aquí,

1050
01:04:32,370 --> 01:04:36,520
e esta función vai construírse unha secuencia grande de elementos.

1051
01:04:36,520 --> 01:04:39,520
Pero a diferenza aquí é que o valor destas listas xa non é só o símbolo,

1052
01:04:39,520 --> 01:04:45,370
agora o nome.

1053
01:04:45,370 --> 01:04:47,070
Polo tanto, temos un pequeno problema.

1054
01:04:47,070 --> 01:04:51,590
Cando usamos a nosa investigación, necesitamos de algunha maneira pasar o símbolo.

1055
01:04:51,590 --> 01:04:54,950
Non podemos pasar algo de investigación como Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Necesitamos pasar MSFT.

1057
01:04:57,900 --> 01:05:01,640
Cando estamos escribindo HTML, temos moi de Niza embutidos atributos.

1058
01:05:01,640 --> 01:05:05,440
Un A pode ter asociada a ela un href ou unha clase.

1059
01:05:05,440 --> 01:05:08,230
Pero o que realmente necesitamos agora é que cada un destes enlaces

1060
01:05:08,230 --> 01:05:11,120
ter un símbolo de acción a ela asociados.

1061
01:05:11,120 --> 01:05:14,240
Non hai embutido atributo HTML símbolo de acción,

1062
01:05:14,240 --> 01:05:21,010
pero, por sorte, HTML5 nos permite crear os nosos propios atributos para ser o que quere.

1063
01:05:21,010 --> 01:05:24,620
Ao dicir símbolo de datos, eu introducir un novo atributo

1064
01:05:24,620 --> 01:05:29,350
cuxo nome eu acaba de inventar, e iso é bo porque eu prefaciado con eses datos.

1065
01:05:29,350 --> 01:05:34,270
Estamos indo para almacenar dentro alí o símbolo do stock agora.

1066
01:05:34,270 --> 01:05:39,590
O que isto significa que aínda que nós estamos mostrando o valor do nome da empresa

1067
01:05:39,590 --> 01:05:43,380
dentro do noso autocomplete, aínda estamos lembrando o símbolo

1068
01:05:43,380 --> 01:05:47,110
que está asociada a cada unha das empresas.

1069
01:05:47,110 --> 01:05:50,350
O xeito que estamos facendo que está dentro deste elemento en si.

1070
01:05:50,350 --> 01:05:52,930
Entón iso significa que temos que facer unha mudanza.

1071
01:05:52,930 --> 01:05:57,090
Cando prememos agora, necesitamos realmente sacar proveito do atributo símbolo

1072
01:05:57,090 --> 01:06:00,220
no canto de só o seu valor.

1073
01:06:00,220 --> 01:06:05,010
Se volver, damos un manipulador de eventos para suxestións.

1074
01:06:05,010 --> 01:06:09,280
Sempre que unha destas suxestións é premendo agora, quero facer algo.

1075
01:06:09,280 --> 01:06:13,160
O que quero facer é cambiar o valor desta caixa de entrada.

1076
01:06:13,160 --> 01:06:16,100
Agora quero definir esta función val mesmo.

1077
01:06:16,100 --> 01:06:21,060
>> Entón, sen ningún argumento esa función val retorna para ti que xa está no cadro de texto,

1078
01:06:21,060 --> 01:06:27,070
pero se darlle unha corda, que vai levar esa cadea e poñelas na caixa de texto.

1079
01:06:27,070 --> 01:06:28,980
Estou seleccionando súa caixa de texto do mesmo xeito.

1080
01:06:28,980 --> 01:06:31,230
O seu nome é dentro símbolo formulario de cotización.

1081
01:06:31,230 --> 01:06:37,540
Agora estou enviando o valor do atributo de datos-símbolo.

1082
01:06:37,540 --> 01:06:41,560
Iso aquí é novo, esta $ (this).

1083
01:06:41,560 --> 01:06:46,850
O que isto se refire é o elemento que foi premendo.

1084
01:06:46,850 --> 01:06:50,880
Podemos ver aquí que non estamos anexando un evento de clic

1085
01:06:50,880 --> 01:06:54,690
para cada elemento con unha clase de suxestión individualmente.

1086
01:06:54,690 --> 01:06:57,140
En vez diso, estamos achegando iso un pouco diferente.

1087
01:06:57,140 --> 01:07:01,700
En vez diso estamos dicindo sempre dentro de calquera cousa deste div suxestións,

1088
01:07:01,700 --> 01:07:04,080
Lembre que é só o recipiente para esta lista,

1089
01:07:04,080 --> 01:07:10,150
algo neste div é premendo e ten unha clase de suxestión,

1090
01:07:10,150 --> 01:07:13,000
Eu quero este evento para disparar.

1091
01:07:13,000 --> 01:07:17,490
Basicamente o que isto significa que podemos facer é que podemos reutilizar ese mesmo manipulador de eventos

1092
01:07:17,490 --> 01:07:20,000
para todas as cousas na lista.

1093
01:07:20,000 --> 01:07:22,080
Entón, nós non temos que ter un manipulador de eventos para o primeiro elemento

1094
01:07:22,080 --> 01:07:24,550
e un manipulador de eventos diferente para o segundo elemento.

1095
01:07:24,550 --> 01:07:29,880
Podemos dicir que, en vez, "Eu quero o mesmo manipulador de eventos para aplicar a todo na miña lista."

1096
01:07:29,880 --> 01:07:34,420
Pero necesitamos de algunha maneira, saber cal elemento foi premendo.

1097
01:07:34,420 --> 01:07:38,450
Este "presente" contrasinal representa exactamente isto.

1098
01:07:38,450 --> 01:07:42,360
Este é o obxecto que foi premendo polo usuario.

1099
01:07:42,360 --> 01:07:47,680
Se eu simplemente prema na ligazón 3, este representa o elemento do nexo 3,

1100
01:07:47,680 --> 01:07:51,670
o que significa que eu poida recibir o seu atributo data símbolo,

1101
01:07:51,670 --> 01:07:57,760
que sabemos que debe conter o símbolo que está asociado coa empresa Eu só premendo.

1102
01:07:57,760 --> 01:08:04,550
Se volver a nosa páxina de finanzas,

1103
01:08:04,550 --> 01:08:08,580
podemos ver agora que unha vez que comezar a escribir algo como MSFT,

1104
01:08:08,580 --> 01:08:11,220
que non está recibindo só os símbolos de accións,

1105
01:08:11,220 --> 01:08:13,720
agora estamos recibindo as empresas reais.

1106
01:08:13,720 --> 01:08:20,410
Pero cando premer en unha destas empresas,

1107
01:08:20,410 --> 01:08:25,180
podemos ver que nós estamos realmente non cubrir a caixa de texto co nome da empresa

1108
01:08:25,180 --> 01:08:29,850
pero o que estaba almacenado dentro dos atributos de datos.

1109
01:08:29,850 --> 01:08:32,880
E así se realmente inspeccionar un deses elementos polo botón dereito del

1110
01:08:32,880 --> 01:08:36,200
e premer en inspeccionar elemento, podemos realmente ver o que iso parece.

1111
01:08:36,200 --> 01:08:40,290
>> Teña en conta que isto é algo que creamos dentro dese loop

1112
01:08:40,290 --> 01:08:42,649
cando estabamos construíndo esa secuencia de HTML.

1113
01:08:42,649 --> 01:08:47,870
Podemos ver aquí que estes datos-símbolo ten o valor de MSFT, o que é óptimo.

1114
01:08:47,870 --> 01:08:49,189
Isto é o que nós estabamos esperando.

1115
01:08:49,189 --> 01:08:53,170
Ese é o símbolo e é así que temos o valor que é necesario utilizar

1116
01:08:53,170 --> 01:08:56,140
dentro da caixa de texto.

1117
01:08:56,140 --> 01:08:58,850
Isto é suficiente para o formulario de cotización, porque iso é medio chat.

1118
01:08:58,850 --> 01:09:02,990
Nós só facer algunhas melloras rápidas a nosa páxina de carteira.

1119
01:09:02,990 --> 01:09:08,109
Se xa usou CS50 Finanzas por un tempo e comezar a compra e venda de un lote de accións,

1120
01:09:08,109 --> 01:09:11,300
finalmente esta táboa pode ir moi grande,

1121
01:09:11,300 --> 01:09:13,850
e vai querer un reloxo de acción, por suposto.

1122
01:09:13,850 --> 01:09:20,350
Unha vez que a táboa é moi, moi grande, que podería ser útil para o usuario intenta investigar sobre el.

1123
01:09:20,350 --> 01:09:23,290
Dentro do cadro de busca, se eu comezar a escribir algo así como a Disney

1124
01:09:23,290 --> 01:09:26,359
e mirando para o meu stock de Mickey Mouse, podemos ver que a táboa agora filtrando

1125
01:09:26,359 --> 01:09:28,189
con base no que eu escriba dentro

1126
01:09:28,189 --> 01:09:31,640
Esta función parece super complicado, pero é moi, moi fácil

1127
01:09:31,640 --> 01:09:33,859
con jQuery e JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Este ficheiro portfolio.php inclúe un arquivo JavaScript chamado portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Imos dar un ollo niso.

1130
01:09:41,130 --> 01:09:44,890
Entón, html, JS, carteira.

1131
01:09:44,890 --> 01:09:49,210
Aquí é onde nós estamos facendo que a investigación sobre a mesa.

1132
01:09:49,210 --> 01:09:52,750
A primeira cousa que cómpre facer é engadir un manipulador de eventos para que a caixa de texto

1133
01:09:52,750 --> 01:09:55,760
porque sabemos que queremos que a nosa función de filtrado de lume

1134
01:09:55,760 --> 01:09:59,800
Cada vez que o usuario presiona algo, porque non temos tempo para os botóns de investigación.

1135
01:09:59,800 --> 01:10:03,000
A primeira cousa que cómpre facer é descubrir o que o usuario está a buscar,

1136
01:10:03,000 --> 01:10:04,780
así como fixemos antes.

1137
01:10:04,780 --> 01:10:11,320
Esta palabra clave se refire ao elemento actual do usuario está interactuando con.

1138
01:10:11,320 --> 01:10:14,070
>> Como o usuario está interactuando coa caixa de busca,

1139
01:10:14,070 --> 01:10:17,020
$ This representa a caixa de busca,

1140
01:10:17,020 --> 01:10:21,820
así this.val nos dá o que ten dentro da caixa de busca o usuario está escribindo.

1141
01:10:22,810 --> 01:10:27,320
Entón, agora o que queremos facer é que queremos iterar sobre todas as liñas

1142
01:10:27,320 --> 01:10:29,240
dentro da nosa mesa.

1143
01:10:29,240 --> 01:10:35,630
Para seleccionar todas as liñas na nosa mesa, eu dei esa mesa unha identificación da carteira de mesa,

1144
01:10:35,630 --> 01:10:39,060
e cada liña é representada por un elemento TR,

1145
01:10:39,060 --> 01:10:42,080
de xeito que este selector vai volver para min unha gran matriz

1146
01:10:42,080 --> 01:10:44,370
de todas as liñas na miña mesa.

1147
01:10:44,370 --> 01:10:47,010
Agora quero iterar sobre esta matriz.

1148
01:10:47,010 --> 01:10:52,390
Eu podería un loop, pero jQuery realmente nos ofrece a función legal chamado "cada un".

1149
01:10:52,390 --> 01:10:55,220
O que cada un fai e cada un ten un argumento,

1150
01:10:55,220 --> 01:10:57,090
e ese argumento é unha función.

1151
01:10:57,090 --> 01:11:02,760
O que vai facer é que vai aplicar esta función a cada elemento dentro da lista.

1152
01:11:02,760 --> 01:11:05,550
Esta función ten un argumento que é e,

1153
01:11:05,550 --> 01:11:10,090
e cando esta función é executada, este vai ser substituído coa primeira liña,

1154
01:11:10,090 --> 01:11:12,070
a continuación, a segunda liña e, a continuación, a terceira liña.

1155
01:11:12,070 --> 01:11:15,150
Por este camiño, esta é a mesma cousa que facer un loop

1156
01:11:15,150 --> 01:11:21,360
e despois descubrir o elemento actual con base no índice de dentro do seu loop.

1157
01:11:21,360 --> 01:11:24,750
En cada iteração, para cada un deses elementos na táboa,

1158
01:11:24,750 --> 01:11:30,560
Quero comprobar que o texto do elemento - o texto do móbil dentro da liña -

1159
01:11:30,560 --> 01:11:33,130
coincide co que eu estou buscando.

1160
01:11:33,130 --> 01:11:36,390
Esta cadea longa gran de comandos é como eu podería facelo.

1161
01:11:36,390 --> 01:11:40,900
En primeiro lugar, unha vez máis, este refírese agora - porque é dentro dunha nova función -

1162
01:11:40,900 --> 01:11:45,020
Esta é agora a liña actual na táboa.

1163
01:11:45,020 --> 01:11:47,340
Eu quero ter a liña actual na táboa,

1164
01:11:47,340 --> 01:11:49,950
e quero incorporarse todos os seus fillos.

1165
01:11:49,950 --> 01:11:51,940
Lembre, o don é unha árbore xerárquica,

1166
01:11:51,940 --> 01:11:54,200
o que significa que os elementos teñen un número de nenos.

1167
01:11:54,200 --> 01:12:00,180
>> Este. Función nenos vai volver para min de volta un conxunto de todos os elementos

1168
01:12:00,180 --> 01:12:03,240
que son os nenos de, neste caso, unha liña na táboa.

1169
01:12:03,240 --> 01:12:07,150
Este é simplemente as células dentro da liña.

1170
01:12:07,150 --> 01:12:09,230
Eu só quero que a investigación sobre a primeira célula.

1171
01:12:09,230 --> 01:12:13,090
Esta función. Primeiro di me dar o primeiro elemento do array.

1172
01:12:13,090 --> 01:12:17,070
Entón, a función texto di me exactamente o que está dentro da célula

1173
01:12:17,070 --> 01:12:19,530
dende que eu quero investigar sobre ese texto.

1174
01:12:19,530 --> 01:12:21,040
Finalmente, imos converter en minúscula

1175
01:12:21,040 --> 01:12:23,940
para que poidamos facer consultas de texto se insensible.

1176
01:12:23,940 --> 01:12:29,990
Por fin, quero ver se esa secuencia dentro dunha táboa contén a cadea que está a procurar.

1177
01:12:29,990 --> 01:12:32,980
A función indexOf en JavaScript fai exactamente iso.

1178
01:12:32,980 --> 01:12:37,060
Dinos esta cadea contén outra cadea.

1179
01:12:37,060 --> 01:12:40,150
Se é certo que a célula contén o que eu estou buscando,

1180
01:12:40,150 --> 01:12:42,140
entón eu quero estar seguro de que é mostrado.

1181
01:12:42,140 --> 01:12:45,330
O método show vai dicir: "Mostrar o elemento."

1182
01:12:45,330 --> 01:12:50,350
Se este non é o caso, entón iso significa que eu estou a buscar non está contido

1183
01:12:50,350 --> 01:12:53,550
dentro desa liña, e así que quero é ocultar o usuario.

1184
01:12:53,550 --> 01:12:59,240
Que atinxe ese fermoso efecto de filtrado onde xa non vemos a táboa enteira.

1185
01:12:59,240 --> 01:13:01,480
Se vostede está interesado en como facer este Ticker, así como,

1186
01:13:01,480 --> 01:13:04,180
imos publicar a fonte en liña. Pero é realmente sinxelo.

1187
01:13:04,180 --> 01:13:09,860
JQuery ten métodos incribles para estas animacións e propiedades de manipulación de CSS.

1188
01:13:09,860 --> 01:13:11,020
Entón, iso é todo para min.

1189
01:13:11,020 --> 01:13:15,560
>> O que entón está á fronte? Como podes ver en poucos días, a proposta final de proxectos é debido.

1190
01:13:15,560 --> 01:13:17,730
A proposta final de proxectos ha pedir-lle algunhas preguntas,

1191
01:13:17,730 --> 01:13:19,420
pero entre eles será de tres etapas -

1192
01:13:19,420 --> 01:13:22,840
un marco "bo", un mellor marco e unha mellor un.

1193
01:13:22,840 --> 01:13:25,870
A idea é realmente para axudar vostedes súas expectativas

1194
01:13:25,870 --> 01:13:29,160
para que minimamente vai ser feliz coa saída do seu proxecto final

1195
01:13:29,160 --> 01:13:32,060
e vai ser "bo" tan lonxe como está preocupado.

1196
01:13:32,060 --> 01:13:34,540
Pero, entón, o interese de obter-lle chegar un pouco para algo mellor

1197
01:13:34,540 --> 01:13:37,680
ou mellor algo, nós tamén imos clasificar de empurralo lo cara a ese tamén.

1198
01:13:37,680 --> 01:13:40,660
O CS50 Hack a Thon, mentres, está en poucas semanas.

1199
01:13:40,660 --> 01:13:44,340
Normalmente, facemos isto nunha base base de lotería por mor do interese,

1200
01:13:44,340 --> 01:13:47,680
pero as probabilidades son que imos tomar algunhas centenas de nós no autobús de Harvard Square

1201
01:13:47,680 --> 01:13:51,540
ata Kendall Square, onde a Microsoft ten unha fermosa instalación apropiadamente chamado "nerd" -

1202
01:13:51,540 --> 01:13:53,830
New England Research e Development Center.

1203
01:13:53,830 --> 01:13:56,380
Nós imos chegar alí en torno a oito horas Nós imos ter un pouco de comida.

1204
01:13:56,380 --> 01:13:58,160
Preto de 01:00 teremos comida un pouco máis.

1205
01:13:58,160 --> 01:14:02,150
Preto de cinco horas, se aínda está acordado nós imos de cabeza para ihop ou leva-lo de volta ao campus.

1206
01:14:02,150 --> 01:14:04,380
O obxectivo non é mergullo en proxectos finais

1207
01:14:04,380 --> 01:14:06,190
á beira de compañeiros e empregados.

1208
01:14:06,190 --> 01:14:08,280
Entón algúns días despois é a Feira CS50,

1209
01:14:08,280 --> 01:14:10,990
que é realmente pretende ser unha oportunidade para vostedes para dar a coñecer o seu traballo

1210
01:14:10,990 --> 01:14:12,700
e realizacións para o semestre

1211
01:14:12,700 --> 01:14:15,610
mentres esfregando os ombreiros uns cos outros e obter unha sensación de que todo o mundo fixo.

1212
01:14:15,610 --> 01:14:17,850
Co que dixo, moitas grazas a Tommy ea José,

1213
01:14:17,850 --> 01:14:19,960
e imos ver vostede o luns.

1214
01:14:19,960 --> 01:14:24,070
 [Aplausos]