1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Semana 9, continuação]

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 fim da semana 9. Muito obrigado.

5
00:00:13,340 --> 00:00:15,310
Finalmente. Semana 9. Eu tenho.

6
00:00:15,310 --> 00:00:18,590
Hoje vamos continuar nossa conversa sobre programação web

7
00:00:18,590 --> 00:00:21,660
com um olho para o projeto final não, porque você tem que fazer algo baseado na web

8
00:00:21,660 --> 00:00:25,610
para projetos finais, mas porque tanto para projetos finais ou depois CS50

9
00:00:25,610 --> 00:00:29,000
esta é certamente a direção em que o software moderno está indo.

10
00:00:29,000 --> 00:00:31,770
E ainda não é realmente uma coisa fácil.

11
00:00:31,770 --> 00:00:35,040
Na verdade, uma das coisas mais difíceis de fazer é o aspecto do design.

12
00:00:35,040 --> 00:00:38,600
>> Por exemplo, pelo projeto, queremos dizer realmente começando a interface do usuário

13
00:00:38,600 --> 00:00:40,420
ou a experiência do usuário certo.

14
00:00:40,420 --> 00:00:43,200
Eu ouso dizer - e sabemos que a partir de um conjunto de problemas recentes

15
00:00:43,200 --> 00:00:45,960
quando alguns de vocês foi ao ar suas queixas sobre algum pedaço de software

16
00:00:45,960 --> 00:00:49,000
ou hardware que enfurece você, seja no campus ou fora -

17
00:00:49,000 --> 00:00:51,930
há um monte de sites por aí, há um monte de hardware lá fora,

18
00:00:51,930 --> 00:00:53,900
que tipo de droga.

19
00:00:53,900 --> 00:00:58,730
Mas a realidade é que fazer coisas que são fáceis de usar, mas não deixam de ser poderoso

20
00:00:58,730 --> 00:01:00,550
É um desafio muito difícil.

21
00:01:00,550 --> 00:01:03,680
Então, para hoje eu pedi José e Tommy a se juntar a mim aqui

22
00:01:03,680 --> 00:01:06,680
para que possamos ter uma conversa, tanto sobre o projeto

23
00:01:06,680 --> 00:01:09,090
e que tipos de processos de pensamento deve começar a passar por sua cabeça

24
00:01:09,090 --> 00:01:12,040
Quando você cria seus projetos finais, os seus futuros empreendimentos.

25
00:01:12,040 --> 00:01:15,040
E então, com a ajuda de Tommy veremos alguns dos detalhes de implementação.

26
00:01:15,040 --> 00:01:18,440
Como você pode ter uma visão em papel ou em sua mente

27
00:01:18,440 --> 00:01:20,760
que você pode executar programaticamente

28
00:01:20,760 --> 00:01:24,030
usando algumas das tecnologias e técnicas que acabou de começar a falar,

29
00:01:24,030 --> 00:01:29,080
ou seja, JavaScript e algo ainda mais recente, ou seja, AJAX, Asynchronous JavaScript.

30
00:01:29,080 --> 00:01:32,950
Isso permite que você crie todos os dinâmica mais de uma interface de usuário

31
00:01:32,950 --> 00:01:35,780
obtendo mais e mais dados, progressivamente a partir de um servidor.

32
00:01:35,780 --> 00:01:38,560
Então, vamos ver alguns desses trechos bem hoje.

33
00:01:38,560 --> 00:01:41,800
Como um aparte, se você estiver interessado em se concentrar em ciência da computação

34
00:01:41,800 --> 00:01:45,010
ou minoring em ciência da computação, saiba que esta sexta-feira ao meio-dia

35
00:01:45,010 --> 00:01:48,750
Maxwell em Dworkin 221 haverá um evento de pizza

36
00:01:48,750 --> 00:01:50,780
onde você pode aprender um pouco mais sobre a ciência da computação.

37
00:01:50,780 --> 00:01:54,860
Em seu caminho para fora da porta, hoje você vai ser capaz de pegar um guia não-oficial de CS em Harvard.

38
00:01:54,860 --> 00:01:57,290
Vamos colocá-lo em latas de lixo fora na altura da cintura

39
00:01:57,290 --> 00:01:59,750
de modo que, se você gostaria de pegar isso e aprender um pouco mais sobre CS,

40
00:01:59,750 --> 00:02:02,480
que vai estar lá para você como foi na semana 0.

41
00:02:02,480 --> 00:02:06,500
Além disso, se você gostaria de se juntar a nós para CS50 almoço nesta sexta-feira às 1:15 pm,

42
00:02:06,500 --> 00:02:09,800
cabeça para cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Sem mais delongas, eu dar-lhe ensino companheiro José Ong.

44
00:02:13,260 --> 00:02:19,190
Oi. [Aplausos]

45
00:02:19,190 --> 00:02:20,770
Obrigado.

46
00:02:20,770 --> 00:02:24,780
A primeira vez que eu aprendi sobre o projeto estava em uma classe aqui chamado CS179.

47
00:02:24,780 --> 00:02:28,040
>> O professor da vez nos contou a história sobre outro professor

48
00:02:28,040 --> 00:02:31,640
que tinha ido para um hotel e usou as torneiras.

49
00:02:31,640 --> 00:02:35,630
Alguém pode me dizer o que os dois botões do lado esquerdo e direito fazer?

50
00:02:35,630 --> 00:02:39,080
[Aluno] quente e fria. >> Quente e fria. Bom.

51
00:02:39,080 --> 00:02:41,430
O que você normalmente espera, certo?

52
00:02:41,430 --> 00:02:46,960
Este professor depois de usar a torneira quer tomar um banho, e ele passa a usar isso.

53
00:02:46,960 --> 00:02:51,310
Ele acha que a esquerda e os lados direito são para quente e frio, certo?

54
00:02:51,310 --> 00:02:55,470
Mas alguém pode me dizer o que estes realmente fazer?

55
00:02:55,470 --> 00:02:58,060
Quaisquer mãos?

56
00:02:58,060 --> 00:03:01,740
[Resposta do aluno inaudível] >> Uma sugestão é?

57
00:03:01,740 --> 00:03:05,860
[Resposta do aluno inaudível] Temperatura? >>

58
00:03:05,860 --> 00:03:10,460
Então um deles controla a temperatura e os outros controles? >> [Aluno] pressão da água.

59
00:03:10,460 --> 00:03:12,350
Pressão da água. Bom.

60
00:03:12,350 --> 00:03:15,100
Este professor caminha para isso e, pensando que eles estão controlando quente e fria,

61
00:03:15,100 --> 00:03:21,470
transforma a um direito, que ele acha que é para quente, todo o caminho até

62
00:03:21,470 --> 00:03:23,560
porque ele quer tomar um banho quente.

63
00:03:23,560 --> 00:03:28,100
Bem, estes realmente não combinam, assim que começa esta experiência não muito divertido

64
00:03:28,100 --> 00:03:31,110
de estar em um banho de água fria, e todos nós sabemos o que sente.

65
00:03:31,110 --> 00:03:33,620
Este é um exemplo de uma falha de design.

66
00:03:33,620 --> 00:03:37,040
O que quero dizer com isso é a sua expectativa da torneira

67
00:03:37,040 --> 00:03:39,420
não encontrou o que saiu do chuveiro,

68
00:03:39,420 --> 00:03:41,780
que é uma espécie de infeliz para ele.

69
00:03:41,780 --> 00:03:44,990
Portanto, este é um exemplo de uma falha de design que acontece na vida real.

70
00:03:44,990 --> 00:03:48,020
Mas nós vemos todos os tipos de as outras também.

71
00:03:48,020 --> 00:03:50,390
Nós não somos provavelmente os fãs do sistema MBTA.

72
00:03:50,390 --> 00:03:55,560
Este é um sistema de metrô, na verdade, em Londres, que diz: "Este botão não está em uso."

73
00:03:55,560 --> 00:04:00,220
Por que é mesmo lá? Por que se importa?

74
00:04:00,220 --> 00:04:02,810
Quando eu era criança, sendo a tecnologia esclarecido na casa,

75
00:04:02,810 --> 00:04:05,050
sempre que o computador poderia falhar, minha mãe veio a mim,

76
00:04:05,050 --> 00:04:07,060
mostrando-me esta tela e me perguntando o que aconteceu.

77
00:04:07,060 --> 00:04:09,210
>> Mesmo que eu não sei o que isso significa.

78
00:04:11,890 --> 00:04:14,700
[Risos] O que?

79
00:04:16,950 --> 00:04:18,019
[Risos]

80
00:04:18,720 --> 00:04:23,050
Às vezes nos sentimos como os desenvolvedores de software são apenas corrico nós.

81
00:04:23,050 --> 00:04:28,460
Como usuários, somos como, "O que está acontecendo? Alguém nos dizer."

82
00:04:28,460 --> 00:04:32,140
Isso tudo se resume a uma questão de design.

83
00:04:32,140 --> 00:04:34,650
Design, como podemos ver, não é puramente sobre a estética,

84
00:04:34,650 --> 00:04:37,230
não é sobre como as coisas são.

85
00:04:37,230 --> 00:04:41,720
Vemos aqui que este pequeno pop-up por aqui, na verdade, parece muito bom.

86
00:04:41,720 --> 00:04:45,290
Ele tem uma sombra no fundo, tem raios de fronteira em curso.

87
00:04:45,290 --> 00:04:47,550
É uma espécie de bonito.

88
00:04:47,550 --> 00:04:51,480
Não está muito bem concebido, porque não é muito amigável.

89
00:04:51,480 --> 00:04:54,920
Que pouco pop-up que surge realmente não me dar qualquer informação

90
00:04:54,920 --> 00:04:58,450
sobre o que está acontecendo, isso não me diz nada de como o usuário

91
00:04:58,450 --> 00:05:01,400
sobre como recuperar desse erro.

92
00:05:01,400 --> 00:05:05,190
Queremos pensar sobre as coisas que o design não é.

93
00:05:05,190 --> 00:05:06,670
Primeiro, não é estética.

94
00:05:06,670 --> 00:05:10,800
Também não é encher o seu aplicativo com toneladas de funcionalidades desnecessárias.

95
00:05:10,800 --> 00:05:14,890
Se você é um restaurante tailandês, você provavelmente não quer ser dentista, ao mesmo tempo.

96
00:05:14,890 --> 00:05:17,720
E com Perguntas do Facebook não, que muitas pessoas usaram

97
00:05:17,720 --> 00:05:21,130
e não era realmente o cerne do que eles estavam construindo.

98
00:05:21,130 --> 00:05:24,200
E por isso é bom pensar não sobre tanto a quantidade das coisas

99
00:05:24,200 --> 00:05:26,390
que você está colocando a sua aplicação, mas a qualidade

100
00:05:26,390 --> 00:05:28,910
e como você está fazendo com que a experiência do usuário melhor

101
00:05:28,910 --> 00:05:32,540
por realmente melhorar em cima do que você já tem.

102
00:05:32,540 --> 00:05:37,040
>> Em poucas palavras, o projeto diz-nos o que devemos construir.

103
00:05:37,040 --> 00:05:41,950
Por exemplo, se nós estamos construindo algo que vamos buscar as coisas,

104
00:05:41,950 --> 00:05:45,970
como o Google, por exemplo, que devemos fazer as coisas de uma maneira

105
00:05:45,970 --> 00:05:48,950
que requer que o usuário tomar muitos cliques para chegar ao que eles querem,

106
00:05:48,950 --> 00:05:52,580
ou devemos fazê-lo de uma forma, por exemplo, com o Google Instant ou autocomplete

107
00:05:52,580 --> 00:05:54,970
que nos permite chegar aos nossos resultados mais rápidos?

108
00:05:54,970 --> 00:05:58,740
Engenharia envolve, como Tommy irá mostrar-lhe, na verdade construindo.

109
00:05:58,740 --> 00:06:01,890
Há muitos tipos de design.

110
00:06:01,890 --> 00:06:06,070
Por exemplo, se você está construindo algo para implantar algo

111
00:06:06,070 --> 00:06:09,770
em um país do Terceiro Mundo, onde não há muita eletricidade ou que a tecnologia muito,

112
00:06:09,770 --> 00:06:11,440
você tem que projetar o que está construindo

113
00:06:11,440 --> 00:06:14,210
de uma maneira que permite o acesso fácil para as pessoas.

114
00:06:14,210 --> 00:06:18,290
Mas que tipo de outras decisões de projeto poderia haver

115
00:06:18,290 --> 00:06:21,850
ou pode ser envolvido em algo assim?

116
00:06:23,690 --> 00:06:25,660
Sim. Eu vejo uma mão.

117
00:06:25,660 --> 00:06:37,200
[Resposta do aluno inaudível] Direito. >> Exatamente. Acessibilidade é uma coisa.

118
00:06:37,200 --> 00:06:40,870
Muita gente não pensa: "O que os meus usuários?"

119
00:06:40,870 --> 00:06:43,160
como os extremos de um ou outro espectro.

120
00:06:43,160 --> 00:06:47,770
Tenho usuários que podem ter deficiência de que eu não estou pensando sobre

121
00:06:47,770 --> 00:06:50,590
e eu só estou pensando em projetar para o usuário em geral.

122
00:06:50,590 --> 00:06:52,630
A Internet é acessível por todos hoje em dia,

123
00:06:52,630 --> 00:06:54,870
e eu deveria estar projetando para essas pessoas também.

124
00:06:54,870 --> 00:06:58,620
Que tipo de outras decisões de projeto que você poderia fazer?

125
00:06:58,620 --> 00:07:00,690
Sim. >> [Aluno] Custo.

126
00:07:00,690 --> 00:07:02,680
Custo. Muito bom.

127
00:07:02,680 --> 00:07:08,060
Outra coisa que pode basear nossas decisões de design são em custo.

128
00:07:08,060 --> 00:07:13,130
Se nós somos um negócio, você quer construir algo que não tem custo muito mais para produzir

129
00:07:13,130 --> 00:07:17,720
mas pode vender a um custo particularmente elevado ou pode nos levar algum lucro.

130
00:07:17,720 --> 00:07:21,540
>> Estes são todos os diferentes tipos de design, mas quando estamos construindo algo na Internet

131
00:07:21,540 --> 00:07:25,120
ou quando nós estamos construindo algo que provavelmente não custa muito para construir-se, agora,

132
00:07:25,120 --> 00:07:28,630
como aplicações de Internet - você não tem que jogar muito capital para ele

133
00:07:28,630 --> 00:07:30,900
a fim de fazer algo que realmente funciona -

134
00:07:30,900 --> 00:07:33,490
o que está mais preocupado com é a experiência do usuário.

135
00:07:33,490 --> 00:07:36,390
Nós chamamos este projeto centrado no usuário.

136
00:07:36,390 --> 00:07:41,550
Essencialmente, o que envolve projeto centrado no usuário é colocar-se no lugar de seus usuários.

137
00:07:41,550 --> 00:07:44,870
Se alguém se inscrever para o que eu estou construindo,

138
00:07:44,870 --> 00:07:48,250
eles, obviamente, vir a minha aplicação em particular com um objetivo em mente,

139
00:07:48,250 --> 00:07:50,280
com uma tarefa que pretende concluir.

140
00:07:50,280 --> 00:07:53,650
E o seu trabalho não é apenas para ajudá-los a completar a tarefa

141
00:07:53,650 --> 00:07:57,930
mas para ajudá-los a completar a tarefa de forma que seja eficiente, intuitivo,

142
00:07:57,930 --> 00:08:01,900
e, como uma pessoa disse ali, acessível.

143
00:08:01,900 --> 00:08:03,750
O que significa eficiência?

144
00:08:03,750 --> 00:08:08,050
Eficiência significa a rapidez que meu usuário completar a tarefa dada a minha interface.

145
00:08:08,050 --> 00:08:11,650
Leva muitos cliques para eles para ir de um lugar para o outro?

146
00:08:11,650 --> 00:08:14,630
É tedioso? Será que eles têm para realizar muitas tarefas repetitivas?

147
00:08:14,630 --> 00:08:17,140
Queremos tornar o processo o mais eficiente possível

148
00:08:17,140 --> 00:08:20,070
para que eles não tem que fazer esses tipos de coisas.

149
00:08:20,070 --> 00:08:24,230
Quanto a intuição, ou seja, por exemplo, se um utilizador olha para o meu interface,

150
00:08:24,230 --> 00:08:27,240
é mais fácil para eles para ir de um lugar para outro?

151
00:08:27,240 --> 00:08:30,390
É fácil para eles para descobrir o que eles tem que clicar na minha interface

152
00:08:30,390 --> 00:08:33,770
a fim de que para atingir a meta ou tarefa que eles querem atingir?

153
00:08:33,770 --> 00:08:37,520
>> E, finalmente, como uma pessoa disse lá, a acessibilidade é muito importante.

154
00:08:37,520 --> 00:08:39,640
[Orador masculino] Ele vem com a acessibilidade para coisas como visão,

155
00:08:39,640 --> 00:08:42,740
gosto de como eu realmente projetar algo para alguém que é cego?

156
00:08:42,740 --> 00:08:46,460
Oh. Para as pessoas que não podem ver em tudo, temos algo chamado leitores de tela.

157
00:08:46,460 --> 00:08:49,070
O que você deve fazer é que você deve construir o seu site de uma forma

158
00:08:49,070 --> 00:08:52,020
que, por exemplo, tecnologias específicas que chamamos -

159
00:08:52,020 --> 00:08:53,590
Há muitas coisas agora.

160
00:08:53,590 --> 00:08:55,660
Eu acho que há leitores de ecrã JAWS chamados.

161
00:08:55,660 --> 00:08:58,410
Muitas dessas coisas confiar no que chamamos de regras área

162
00:08:58,410 --> 00:09:02,010
, a fim de ler para o utilizador que está presente na página.

163
00:09:02,010 --> 00:09:05,480
Para aquelas pessoas que não podem ver, você precisa ter certeza de que esses leitores de tela

164
00:09:05,480 --> 00:09:09,130
pode realmente pegar o conteúdo da página e pode realmente mostrar a seus usuários,

165
00:09:09,130 --> 00:09:13,630
se você não pode ver, pelo menos você ainda pode entender o conteúdo da página.

166
00:09:13,630 --> 00:09:16,190
Sim. Okay.

167
00:09:16,190 --> 00:09:23,410
Chega a falar de um bom design. Vamos falar sobre o design ruim.

168
00:09:23,410 --> 00:09:25,220
Estas são coisas que você não deve fazer.

169
00:09:25,220 --> 00:09:27,890
Alguém pode me dizer sobre suas experiências com Craigslist

170
00:09:27,890 --> 00:09:32,190
eo que eles pensam não é tão grande sobre este projeto?

171
00:09:33,690 --> 00:09:36,430
Sim. >> [Aluno] Eu acho que há muitas palavras em uma área.

172
00:09:36,430 --> 00:09:39,350
Muitas palavras, certo? Completamente esmagadora.

173
00:09:39,350 --> 00:09:42,400
Você chegou a esta página e você se depara com um monte de coisas aqui

174
00:09:42,400 --> 00:09:43,860
que pode até não importa para você.

175
00:09:43,860 --> 00:09:47,010
Por exemplo, você vive em um estado que não comece com essa letra.

176
00:09:47,010 --> 00:09:48,690
Vamos dizer que você mora no Texas ou algo assim.

177
00:09:48,690 --> 00:09:53,790
>> Você tem que percorrer todo o caminho até a página para chegar ao local que você está.

178
00:09:53,790 --> 00:10:00,320
Eu sou de Boston, então deixe-me olhar em Massachusetts. Onde está Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Ah, é aqui mesmo. Ah, é Boston. Okay.

180
00:10:03,270 --> 00:10:09,070
Vamos olhar para Boston. [Risos]

181
00:10:09,070 --> 00:10:12,250
Muito impressionante, certo?

182
00:10:12,250 --> 00:10:16,400
Coisas embaraçosas lá. [Risos]

183
00:10:17,320 --> 00:10:19,470
Vamos dizer que eu estou procurando um lugar para viver.

184
00:10:19,470 --> 00:10:24,130
Quantas pessoas realmente usado Craigslist? Toneladas de você.

185
00:10:24,130 --> 00:10:30,960
Há maneiras muito ruim de olhar para isso, mas vamos olhar para isso.

186
00:10:35,130 --> 00:10:38,970
Qual é a diferença entre img e pic? Alguém pode me dizer?

187
00:10:41,350 --> 00:10:42,830
Há, na verdade, não há diferença.

188
00:10:42,830 --> 00:10:47,710
Eles querem dizer exatamente a mesma coisa, mas eles têm rótulos diferentes para eles por algum motivo.

189
00:10:48,980 --> 00:10:53,560
Se eu clicar em tem imagem, não acontece nada na página.

190
00:10:53,560 --> 00:10:57,490
Na verdade, eu tenho que clique em Pesquisar novamente para que algo aconteça.

191
00:10:57,490 --> 00:11:02,430
O que poderia ser uma melhor decisão de projeto que poderia ser feito lá?

192
00:11:03,820 --> 00:11:08,030
Se eu estou clicando sobre esse filtro, eu provavelmente deseja filtrar essa ação em particular

193
00:11:08,030 --> 00:11:09,970
ou categoria que particular.

194
00:11:09,970 --> 00:11:14,450
Então, ao invés de ter que pressionar Pesquisa novamente, eu poderia apenas automaticamente fazer a filtragem

195
00:11:14,450 --> 00:11:17,060
tipo de estilo do Google, onde fazê-lo imediatamente.

196
00:11:17,060 --> 00:11:20,440
[Malan] Mas não se forma, como temos visto, até agora, tem que ser fisicamente apresentado

197
00:11:20,440 --> 00:11:23,170
por bater Digite pelo menos, ou clicando em um botão?

198
00:11:23,170 --> 00:11:26,830
Como você viu até agora, você realmente tem que clicar em Enviar para fazer essas coisas.

199
00:11:26,830 --> 00:11:30,090
>> Mas, como Tommy vai mostrar em um segundo, na verdade existem maneiras de você

200
00:11:30,090 --> 00:11:33,010
de tal forma que quando você clica em que a coisa pode enviar automaticamente

201
00:11:33,010 --> 00:11:38,840
o que chamamos de um pedido de AJAX e obter dados de volta e filtrar os resultados instantaneamente.

202
00:11:38,840 --> 00:11:41,340
Há toneladas de coisas que estão erradas com esta interface.

203
00:11:41,340 --> 00:11:43,530
[Malan] Você pode procurar Cambridge?

204
00:11:43,530 --> 00:11:47,030
Há algo ligeiramente anômala aqui onde você se preocupa com Cambridge

205
00:11:47,030 --> 00:11:54,790
e você ainda está recebendo Westford, Spring Hill, West Newton e outros.

206
00:11:54,790 --> 00:11:57,930
Provavelmente não é o ideal. >> Provavelmente não ideal.

207
00:11:57,930 --> 00:12:03,900
Como eu poderia ser capaz de fazer a experiência do usuário melhor sobre esta página particular?

208
00:12:03,900 --> 00:12:07,340
Sim. >> [Aluno] Instruções.

209
00:12:07,340 --> 00:12:09,500
Okay. Instruções em que tipo de sentimento?

210
00:12:09,500 --> 00:12:14,630
[Estudante] Por exemplo, uma coisa para usuários iniciantes, que nem sequer sabem o que é Craigslist

211
00:12:14,630 --> 00:12:17,320
ou você não sabe o que é suposto fazer.

212
00:12:17,320 --> 00:12:20,150
Direito. Então, explicando o Craigslist está nesta página é importante.

213
00:12:20,150 --> 00:12:23,490
Podemos realmente dizer aos usuários que esta página é realmente para.

214
00:12:23,490 --> 00:12:27,090
Se eu estou apenas visitando este, eu vejo um monte de lugares. Eu não sei mesmo o que eles significam.

215
00:12:27,090 --> 00:12:29,730
Mas o mais importante, só de olhar para essa interface,

216
00:12:29,730 --> 00:12:35,530
lembro que eu tinha que rolar uma tonelada de coisas para encontrar uma determinada comunidade

217
00:12:35,530 --> 00:12:37,560
que realmente se preocupava com este.

218
00:12:37,560 --> 00:12:39,820
O que é uma maneira mais rápida que eu poderia fazer isso? Sim.

219
00:12:39,820 --> 00:12:43,290
[Aluno] dividi-los em regiões leste, oeste. Ok >>.

220
00:12:43,290 --> 00:12:47,460
Eu poderia dividi-los em categorias mais que poderia me ajudar a determinar mais rapidamente

221
00:12:47,460 --> 00:12:49,820
como chegar a esse local específico.

222
00:12:49,820 --> 00:12:54,510
[Aluno] Coloque uma lista drop-down. >> Direito. Okay.

223
00:12:54,510 --> 00:12:58,240
Eu poderia usar um menu drop-down, porque temos um conjunto fixo de coisas

224
00:12:58,240 --> 00:13:00,100
e podemos mostrá-los em um menu drop-down.

225
00:13:00,100 --> 00:13:02,240
Dessa forma, ele não ocupa muito espaço na tela.

226
00:13:02,240 --> 00:13:05,630
Mas ainda melhor do que isso, o que podemos fazer?

227
00:13:05,630 --> 00:13:09,220
Sim. >> [Resposta do aluno inaudível] >> Você pode dizer isso de novo? >> [Aluno] caixa de busca.

228
00:13:09,220 --> 00:13:11,260
Sim, uma caixa de pesquisa. Isso é ótimo.

229
00:13:11,260 --> 00:13:16,430
O que nós podemos realmente fazer é se olharmos para trás na caixa de pesquisa slides,.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Maneira muito fácil de pesquisar os resultados que você sabe que está em um conjunto.

231
00:13:21,520 --> 00:13:25,980
Se eu começar a digitar BO, apenas me mostrar todos os resultados que tem dentro BO deles.

232
00:13:25,980 --> 00:13:29,030
Dessa forma, eu posso facilmente encontrar o caminho particular, eu quero ir para a

233
00:13:29,030 --> 00:13:32,390
em vez de ter de percorrer esta lista muito grande.

234
00:13:32,390 --> 00:13:37,450
>> Estes são todos os tipos de realmente fruto maduro que alguém que está a implementar Craigslist

235
00:13:37,450 --> 00:13:42,500
pode realmente fazer para tornar a experiência no site muito melhor para o seu usuário em particular.

236
00:13:42,500 --> 00:13:46,370
Okay. Chega de conversa sobre sites ruins.

237
00:13:46,370 --> 00:13:49,410
Vamos falar sobre Facebook.

238
00:13:50,880 --> 00:13:54,390
Quando o Facebook foi lançado, e fotos especialmente do Facebook,

239
00:13:54,390 --> 00:13:57,870
havia muitos outros serviços no momento em que poderia fazer exatamente as mesmas coisas.

240
00:13:57,870 --> 00:14:00,740
Eles podem organizar suas fotos em álbuns.

241
00:14:00,740 --> 00:14:03,360
O que você pode fazer é que você pode organizá-los em grupos também.

242
00:14:03,360 --> 00:14:06,070
Você pode organizá-los por data. Você pode fazer todas essas coisas particulares.

243
00:14:06,070 --> 00:14:11,710
Mas alguém sabe o que fez fotos do Facebook explodir no momento em que foi lançado?

244
00:14:11,710 --> 00:14:15,080
Sim. >> [Estudantes] Tags. Etiquetas. >> Exatamente.

245
00:14:15,080 --> 00:14:21,300
Temos Milo aqui, que é o nosso mascote cão com bandana que CS50.

246
00:14:21,300 --> 00:14:24,810
Você pode ver que temos esse recurso de marcação no meio.

247
00:14:24,810 --> 00:14:28,240
E o que fez as fotos do Facebook tão interessante do ponto de vista de usabilidade

248
00:14:28,240 --> 00:14:34,130
é que realmente permitiu que as pessoas através deste para envolver seus amigos em suas fotos.

249
00:14:34,130 --> 00:14:37,680
Para o Facebook, já que o seu site é particularmente social,

250
00:14:37,680 --> 00:14:40,750
é sobre como criar este tipo de atmosfera social.

251
00:14:40,750 --> 00:14:42,620
Isso melhorou a experiência de fotos muito mais

252
00:14:42,620 --> 00:14:46,390
porque eles poderiam realmente começar a dizer: "Estas são as conexões entre as pessoas,

253
00:14:46,390 --> 00:14:49,220
e estas são fotos sobre pessoas que você realmente gosta. "

254
00:14:49,220 --> 00:14:52,200
Parte do problema é também o narcisismo tipo.

255
00:14:52,200 --> 00:14:54,980
As pessoas gostam de ser marcado em fotos e coisas assim.

256
00:14:54,980 --> 00:14:58,510
Enquanto isso não é necessariamente uma boa característica humana,

257
00:14:58,510 --> 00:15:01,910
ao mesmo tempo, ele é baseado em decisões de bom design

258
00:15:01,910 --> 00:15:04,860
porque as pessoas realmente se preocupam com coisas como esta.

259
00:15:04,860 --> 00:15:07,190
Então essa é as fotos do Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Mas vamos falar do Facebook em geral.

261
00:15:09,800 --> 00:15:13,400
Tenho certeza de que muitas pessoas aqui têm opiniões sobre o Facebook,

262
00:15:13,400 --> 00:15:16,430
ambos boas decisões de projeto e decisões de design ruim.

263
00:15:16,430 --> 00:15:20,270
Então vamos desabafar ou ser feliz.

264
00:15:23,480 --> 00:15:26,450
Vamos. Eu sei tudo de você usar o Facebook.

265
00:15:26,450 --> 00:15:30,970
Alguém tem que ter algo de ruim a dizer ou algo de bom a dizer sobre isso. Sim.

266
00:15:30,970 --> 00:15:35,060
[Aluno] no feed de notícias, há um monte de coisas que eu realmente não me importo.

267
00:15:35,060 --> 00:15:37,740
O feed de notícias não mostrar um monte de coisas que você pode não preocupam.

268
00:15:37,740 --> 00:15:41,660
Você tem amigos no Facebook que você não se encontraram por 2 ou 3 anos

269
00:15:41,660 --> 00:15:43,860
e você vê os seus resultados de notícias aparecendo em seu feed de notícias

270
00:15:43,860 --> 00:15:45,870
e você realmente não me importo com isso.

271
00:15:45,870 --> 00:15:48,700
Facebook tem realmente feito um esforço para fazer isso melhor,

272
00:15:48,700 --> 00:15:53,150
e eles realmente tentaram empurrar resultados relevantes para o topo do feed de notícias como de tarde

273
00:15:53,150 --> 00:15:58,300
para que você realmente vê as coisas por amigos que são relevantes para você ou seus amigos mais próximos.

274
00:15:58,300 --> 00:16:01,110
Mais alguma coisa? Sim.

275
00:16:01,110 --> 00:16:06,400
[Resposta do aluno inaudível] >> Você pode dizer isso de novo?

276
00:16:06,400 --> 00:16:10,140
[Aluno] Os anúncios são relativamente discreto. >> Em que sentido?

277
00:16:10,140 --> 00:16:16,370
[Resposta do aluno inaudível] Eles não têm luz na tela, como banners.

278
00:16:16,370 --> 00:16:17,760
Okay. Isso é bom.

279
00:16:17,760 --> 00:16:25,030
Se você se lembrar da Internet a partir dos anos 90 - >> [Malan] eu estava lá. >> Ele estava lá. [Risos]

280
00:16:25,030 --> 00:16:29,210
Você pode se lembrar de fundos piscando GIFs, brilhantes coisas,

281
00:16:29,210 --> 00:16:31,570
GeoCities tipo estilo de coisas.

282
00:16:31,570 --> 00:16:34,080
Isso não é realmente um exemplo de um bom projeto

283
00:16:34,080 --> 00:16:36,690
porque é realmente uma distração do conteúdo.

284
00:16:36,690 --> 00:16:39,590
O site de arte Yale costumava ter GIFs animados como seu fundo

285
00:16:39,590 --> 00:16:41,800
e você não poderia ler qualquer coisa na página,

286
00:16:41,800 --> 00:16:44,870
mas eu acho que alguém realmente conversei com eles e agora é um pouco diferente.

287
00:16:44,870 --> 00:16:48,940
[Malan] É muito melhor agora. >> É muito melhor agora, como você pode ver. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Apenas grande, apenas - É. Okay.

289
00:16:56,020 --> 00:17:00,560
>> Parte dela também está fazendo sua página possivelmente muito minimalista e muito compreensível

290
00:17:00,560 --> 00:17:05,690
assim coisas sobre o fluxo de página de uma maneira que é muito lógico e não ficam no caminho do outro.

291
00:17:05,690 --> 00:17:11,849
Que tipo de outras coisas são boas ou ruins sobre o Facebook sobre o Facebook?

292
00:17:11,849 --> 00:17:15,730
Vamos ter uma conversa projeto aqui.

293
00:17:19,470 --> 00:17:21,339
Oh. Onde? Sim.

294
00:17:21,339 --> 00:17:25,640
[Aluno] O sistema novo cronograma permite pesquisar o perfil da pessoa sobre seu passado.

295
00:17:25,640 --> 00:17:28,119
Ooh, Timeline.

296
00:17:28,119 --> 00:17:30,280
Linha do Tempo é uma grande coisa, porque ele permite que você perseguir seus amigos

297
00:17:30,280 --> 00:17:33,300
quando eles estavam na escola.

298
00:17:35,160 --> 00:17:38,060
Timeline é bom porque permite que você filtre através de conteúdo muito mais rápido,

299
00:17:38,060 --> 00:17:41,500
ele permite que você encontrar coisas que de outra forma teria levado muito tempo para encontrar

300
00:17:41,500 --> 00:17:45,840
apenas a rolagem para cima e para baixo, para cima, cima, cima, cima, cima, como voltar no tempo.

301
00:17:45,840 --> 00:17:48,910
Mas depois há também uma espécie de desvantagem para que em termos de experiência do usuário.

302
00:17:48,910 --> 00:17:51,190
O que pode ser isso?

303
00:17:51,190 --> 00:17:56,780
Grande palavra que começa com P-R. >> [Aluno] de Privacidade. Privacidade >>, certo?

304
00:17:56,780 --> 00:17:59,970
Privacidade é uma questão de enorme experiência do usuário.

305
00:17:59,970 --> 00:18:07,190
Esta é uma das coisas que eu mais odeio sobre o Facebook agora. [Risos]

306
00:18:07,190 --> 00:18:09,000
[Malan] Como eu agora.

307
00:18:09,000 --> 00:18:11,380
David não sabia que isso realmente aconteceu até ontem.

308
00:18:11,380 --> 00:18:14,560
Então agora ele sabe que cada vez que eu conversar ele eu sei que ele está me ignorando.

309
00:18:14,560 --> 00:18:16,880
[Malan] A parte estranha foi que eu estava realmente ignorá-lo,

310
00:18:16,880 --> 00:18:21,040
e eu não sabia que ele sabia que eu estava ignorando-o. [Risos]

311
00:18:21,040 --> 00:18:24,030
A privacidade é um enorme problema.

312
00:18:24,030 --> 00:18:28,670
Alguém aqui pode me dizer o que pode ser ruim sobre o Facebook privacidade

313
00:18:28,670 --> 00:18:32,270
além do fato de que eles fazem coisas como esta?

314
00:18:32,270 --> 00:18:37,240
O que é particularmente difícil de fazer em relação ao Facebook privacidade?

315
00:18:37,240 --> 00:18:40,340
Esse tipo de é uma questão de liderança.

316
00:18:41,680 --> 00:18:43,930
Sim. >> [Aluno] Ocultar suas fotos de certas pessoas.

317
00:18:43,930 --> 00:18:46,170
Direito. Exatamente, para esconder suas fotos de certas pessoas.

318
00:18:46,170 --> 00:18:51,290
Eles têm este botão pequeno, pouco no canto superior direito que permite alternar a privacidade de uma foto.

319
00:18:51,290 --> 00:18:56,360
Suas opções de privacidade são muito variados entre diferentes tipos de menus.

320
00:18:56,360 --> 00:18:59,510
>> Eles ficaram muito melhor sobre isso recentemente, mas que costumava ser o caso

321
00:18:59,510 --> 00:19:04,870
que sempre que você queria evitar que seus amigos a partir de fotografias de ver,

322
00:19:04,870 --> 00:19:08,280
você teria que passar por um processo muito complicado de 5-passo de ser como,

323
00:19:08,280 --> 00:19:11,150
deixe-me clique neste link, agora deixe-me clique novamente, deixe-me clique novamente,

324
00:19:11,150 --> 00:19:13,420
Deixe-me especificar quais as pessoas não podem ver minhas fotos.

325
00:19:13,420 --> 00:19:17,250
Isso não é particularmente boa por parte do Facebook

326
00:19:17,250 --> 00:19:20,530
porque tanto sobre a experiência do usuário é realmente dar-lhes a liberdade

327
00:19:20,530 --> 00:19:22,460
para controlar o que as pessoas podem ver.

328
00:19:22,460 --> 00:19:25,550
Chamamos isso de controle do usuário e liberdade.

329
00:19:25,550 --> 00:19:31,090
Se você não está permitindo que seus usuários fazem isso de uma forma que seja eficiente e intuitiva,

330
00:19:31,090 --> 00:19:34,570
então a sua experiência de usuário que não é realmente grande em tudo.

331
00:19:34,570 --> 00:19:38,200
 Será que vocês gostam de dizer qualquer coisa sobre o Facebook?

332
00:19:38,700 --> 00:19:41,420
Como faço para desligar isso?

333
00:19:41,420 --> 00:19:46,290
[Ong] Você não pode desligar isso, e isso é uma falha enorme usabilidade por parte do Facebook.

334
00:19:46,290 --> 00:19:49,410
Este recurso - Na verdade, eu olhei para ele ontem -

335
00:19:49,410 --> 00:19:53,940
é tanto que você não pode fazer isso ou ele está enterrado em algum lugar muito, muito profundo

336
00:19:53,940 --> 00:19:58,050
nos recessos do Facebook, porque eu não consigo descobrir como desativar essa funcionalidade em tudo.

337
00:19:58,050 --> 00:20:00,400
[Malan] Mas às vezes essas decisões não são óbvias

338
00:20:00,400 --> 00:20:03,890
porque vocês deram-nos uma grande quantidade de informações úteis sobre várias aplicações CS50

339
00:20:03,890 --> 00:20:05,710
e sites que o curso utiliza.

340
00:20:05,710 --> 00:20:10,260
Nós não implementou todos esses pedidos e sugestões.

341
00:20:10,260 --> 00:20:14,550
>> Parte do que é para receber pedidos de tantos que é uma função do tempo,

342
00:20:14,550 --> 00:20:17,070
mas às vezes nós apenas tomar uma decisão consciente, como,

343
00:20:17,070 --> 00:20:19,830
"Obrigado pela sugestão, mas discordamos."

344
00:20:19,830 --> 00:20:24,350
Assim como você realmente decidir o que você deve fazer se os seus usuários acho que você deveria fazer algo

345
00:20:24,350 --> 00:20:28,110
mesmo se você não necessariamente?

346
00:20:28,110 --> 00:20:32,360
É um bom equilíbrio entre realmente ouvindo o que os usuários dizem

347
00:20:32,360 --> 00:20:35,840
e realmente ter algum tipo de linha que você diz,

348
00:20:35,840 --> 00:20:37,750
"Nós não vamos fazer o que esses usuários dizem."

349
00:20:37,750 --> 00:20:42,520
E, em particular, eu acho que houve uma citação de Henry Ford que resume isto muito bem.

350
00:20:42,520 --> 00:20:47,130
"Se eu tivesse perguntado às pessoas o que eles queriam, eles teriam dito que queriam cavalos mais rápidos."

351
00:20:47,130 --> 00:20:51,840
Alguém pode classificar de destrinçar o que essa frase realmente significa?

352
00:20:51,840 --> 00:20:56,060
Não é apenas o que os usuários sabem o que querem,

353
00:20:56,060 --> 00:20:59,180
mas é mais do que -

354
00:20:59,180 --> 00:21:02,720
[Aluno] Eles não sabem o que é possível.

355
00:21:02,720 --> 00:21:06,140
Em parte, eles não sabem o que é possível.

356
00:21:07,880 --> 00:21:11,440
Tease que, além de um pouco mais. O que quer dizer com isso?

357
00:21:11,440 --> 00:21:21,340
[Resposta do aluno inaudível]

358
00:21:21,340 --> 00:21:25,770
Isso é bom. O que eu acho que nós estamos tentando dizer aqui é que as pessoas sabem o que querem.

359
00:21:25,770 --> 00:21:28,050
Eles querem que os cavalos mais rápidos.

360
00:21:28,050 --> 00:21:29,840
O que eles realmente querem é a capacidade de se mover mais rápido,

361
00:21:29,840 --> 00:21:32,310
mas eles não sabem realmente o meio pelo qual a conseguir isso.

362
00:21:32,310 --> 00:21:36,330
Quando você vem para seus usuários e seus usuários lhe dizer uma coisa

363
00:21:36,330 --> 00:21:39,700
e eles dizem: "Nós queremos esses recursos e esses recursos e esses recursos",

364
00:21:39,700 --> 00:21:42,650
você não quer necessariamente pensar, "Deixe-me ir em frente

365
00:21:42,650 --> 00:21:44,720
"E implementar o que diz explicitamente"

366
00:21:44,720 --> 00:21:48,610
mas o que você quer pensar é: "Que tipo de idéias eu posso conseguir com isso?"

367
00:21:48,610 --> 00:21:50,450
O que eles realmente querem?

368
00:21:50,450 --> 00:21:55,560
>> E a partir daí o que você pode fazer é criar algo que satisfaça os pedidos

369
00:21:55,560 --> 00:22:00,340
mas não necessariamente da maneira que o usuário espera que seja satisfeita.

370
00:22:00,340 --> 00:22:03,830
Assim, para algo como projetos finais, em termos reais,

371
00:22:03,830 --> 00:22:07,900
o que é uma heurística útil quando se trata de fazer algo melhor,

372
00:22:07,900 --> 00:22:10,630
especialmente se o designer tem essa arrogância sobre ele

373
00:22:10,630 --> 00:22:14,360
pelo qual você espécie de saber o que é melhor, você pode tirar a entrada de seus usuários,

374
00:22:14,360 --> 00:22:16,580
mas como você realmente ir sobre a obtenção de que o feedback?

375
00:22:16,580 --> 00:22:21,610
Em projectos finais, muito concretamente, o que produz melhores resultados aqui?

376
00:22:21,610 --> 00:22:25,030
O que produz os melhores resultados - e vou passar por cima isso em um segundo -

377
00:22:25,030 --> 00:22:29,190
É este processo de desenvolvimento e, em seguida, testar e, em seguida, a iteração.

378
00:22:29,190 --> 00:22:32,020
O que eu quero dizer com o teste é geralmente quando você projetar algo

379
00:22:32,020 --> 00:22:36,970
Você acha que é bastante bom, como, "Eu sou como um designer ótimo. Todo mundo vai adorar isso."

380
00:22:36,970 --> 00:22:41,600
E depois de colocá-lo lá fora, e as pessoas realmente não gosto disso por algum motivo.

381
00:22:41,600 --> 00:22:46,820
O que você tem a fazer é que você tem que tomar as partes de coisas que as pessoas fazem como

382
00:22:46,820 --> 00:22:49,180
e renovar as coisas que as pessoas não gostam.

383
00:22:49,180 --> 00:22:53,080
Soa como um processo muito óbvio, mas este processo de constantemente interagindo

384
00:22:53,080 --> 00:22:55,980
em cima do que você já construiu é um processo que ajuda a

385
00:22:55,980 --> 00:22:59,730
não apenas refinar suas habilidades de design próprio, mas também ajuda a refinar o projeto

386
00:22:59,730 --> 00:23:03,790
para que as pessoas realmente apreciamos o seu produto ainda mais do que antes.

387
00:23:03,790 --> 00:23:07,390
>> Eu vou passar por cima de mais exemplos concretos do que você pode realmente fazer.

388
00:23:07,390 --> 00:23:11,390
Como uma espécie de último exemplo de um produto, vamos olhar para caiaque.

389
00:23:11,390 --> 00:23:14,970
CAIAQUE quando saiu era muito, muito popular.

390
00:23:14,970 --> 00:23:18,760
Alguém pode adivinhar por quê?

391
00:23:18,760 --> 00:23:20,950
Quais são os tipos de coisas que você gosta sobre isso se você tê-lo usado

392
00:23:20,950 --> 00:23:23,990
ou quais são os tipos de coisas que você não gosta?

393
00:23:23,990 --> 00:23:31,590
Sim. >> [Resposta do aluno inaudível] >> Okay.

394
00:23:31,590 --> 00:23:34,730
Isso é parte do que é deixar o usuário tiver uma consulta que é mais expansivo

395
00:23:34,730 --> 00:23:38,150
de uma forma muito restritiva como, "Você tem que escolher sua data de início

396
00:23:38,150 --> 00:23:39,810
"E você tem que escolher sua data de término."

397
00:23:39,810 --> 00:23:44,910
Na verdade, ele permite que você seja flexível sobre isso e dá-lhe todos os vôos nesse intervalo.

398
00:23:44,910 --> 00:23:46,730
Mais alguma coisa?

399
00:23:46,730 --> 00:23:50,530
[Aluno] Eles incluem as taxas no preço.

400
00:23:50,530 --> 00:23:53,330
Eles não incluem as taxas no preço.

401
00:23:53,330 --> 00:23:56,720
Os impostos e as coisas realmente vão direto para que o preço no canto superior esquerdo

402
00:23:56,720 --> 00:24:00,710
então você não está enganado em pensar que você está realmente pagando por um vôo $ 240

403
00:24:00,710 --> 00:24:03,280
quando é realmente $ 330.

404
00:24:03,280 --> 00:24:06,200
Mais alguma coisa? Sim.

405
00:24:06,200 --> 00:24:10,140
[Resposta do aluno inaudível]

406
00:24:10,140 --> 00:24:14,610
Eu não tenho certeza se eles realmente deixar você fazer isso.

407
00:24:14,610 --> 00:24:18,310
Eu posso estar errado.

408
00:24:18,310 --> 00:24:23,360
Isso pode ser uma coisa interessante, se você quiser colocar mais peso em especial filtros

409
00:24:23,360 --> 00:24:27,000
de modo que eles empurram os resultados relacionados com esse filtro para o topo.

410
00:24:27,000 --> 00:24:31,920
Mas alguém pode me dizer o que há de tão especial sobre este lado esquerdo?

411
00:24:31,920 --> 00:24:39,540
Como você tradicionalmente procurar um vôo em um serviço de Internet antes disso?

412
00:24:41,600 --> 00:24:44,650
>> Sim. >> [Resposta do aluno inaudível] >> Você pode dizer que -

413
00:24:44,650 --> 00:24:47,530
[Aluno] Cada companhia aérea. Sim >>. Cada companhia aérea tem o seu próprio site.

414
00:24:47,530 --> 00:24:50,110
Isso consolida as coisas. E?

415
00:24:50,110 --> 00:24:52,190
[Aluno] Você sabe exatamente o tempo que você está saindo.

416
00:24:52,190 --> 00:24:54,460
Você sabe exatamente o que tempo você está saindo,

417
00:24:54,460 --> 00:24:59,380
mas relacionada com os filtros, em particular.

418
00:25:00,710 --> 00:25:03,540
Deixe-me puxar para cima caiaque.

419
00:25:11,490 --> 00:25:14,020
Oh Deus, pop-ups. Má experiência do usuário.

420
00:25:14,020 --> 00:25:17,230
O que acontece quando eu passar esse controle?

421
00:25:17,230 --> 00:25:21,010
[Aluno] atualizações automáticas. >> [] Ong atualizações automáticas.

422
00:25:21,010 --> 00:25:23,440
Isso é algo que é muito importante.

423
00:25:23,440 --> 00:25:25,380
Antes disso, sempre que você queria procurar um vôo,

424
00:25:25,380 --> 00:25:28,410
você tinha que colocar no seu local de entrada, o seu local de saída, Pesquisa de imprensa,

425
00:25:28,410 --> 00:25:31,190
ele deve processar isso e mostrar seus resultados.

426
00:25:31,190 --> 00:25:34,120
Se você quiser alterar a sua consulta, você teria que pressionar para trás duas vezes,

427
00:25:34,120 --> 00:25:39,770
entrar em uma nova consulta a partir do zero, e depois fazer tudo de novo e de novo.

428
00:25:39,770 --> 00:25:43,910
A coisa agradável sobre algo assim é que ele usa uma coisa muito [ininteligível] no meio.

429
00:25:43,910 --> 00:25:46,230
Sempre que você faz algo como isso, ele dispara um pedido

430
00:25:46,230 --> 00:25:48,420
e ele retorna todos os resultados imediatamente.

431
00:25:48,420 --> 00:25:51,680
Este tipo de feedback imediato é algo que fez KAYAK popular

432
00:25:51,680 --> 00:25:55,910
porque é muito fácil para mim basta mudar a minha consulta

433
00:25:55,910 --> 00:25:58,890
e descobrir as coisas que estão em torno de um determinado intervalo

434
00:25:58,890 --> 00:26:01,950
sem ter que ir para trás e para frente, para trás e para frente, para trás e para frente.

435
00:26:01,950 --> 00:26:05,200
Então, esses são todos os tipos de coisas que você quer pensar sobre quando você está projetando seu site.

436
00:26:05,200 --> 00:26:08,930
Como posso fazer isso muito eficiente para meus usuários que passar por tudo o que está trabalhando

437
00:26:08,930 --> 00:26:13,010
e para chegar ao seu objectivo final o mais depressa possível?

438
00:26:13,010 --> 00:26:16,430
[Malan] E a ponto de José anterior sobre os usuários não necessariamente saber o que eles querem,

439
00:26:16,430 --> 00:26:18,640
com base no que vocês já sabe sobre HTML

440
00:26:18,640 --> 00:26:22,780
e você tem caixas de seleção, botões de rádio, menus de seleção, campos de entrada e similares,

441
00:26:22,780 --> 00:26:26,140
como é que você implementar a noção de escolher um horário de início para um voo?

442
00:26:26,140 --> 00:26:30,030
>> Qual desses mecanismos UI vários você usaria?

443
00:26:30,030 --> 00:26:34,100
Se você só sabe a quantidade de HTML que foi ensinado antes

444
00:26:34,100 --> 00:26:39,070
e você sabe que as entradas são botões de rádio, caixas, menus suspensos, e caixa de entrada,

445
00:26:39,070 --> 00:26:43,320
qual seria a sua escolha natural ter sido para escolher datas?

446
00:26:43,320 --> 00:26:48,670
[Aluno] Entrada. Entrada. >> Ou talvez até um drop-down com todas as datas, certo?

447
00:26:48,670 --> 00:26:53,170
Assim, com mecanismos de interface do usuário mais complexas como esta do lado esquerdo que você pode implementar,

448
00:26:53,170 --> 00:26:55,500
você pode tornar este processo muito mais intuitivo com um controle deslizante

449
00:26:55,500 --> 00:27:01,020
porque o tempo é contínuo, e as pessoas geralmente não pensam em termos de pedaços discretos.

450
00:27:01,020 --> 00:27:04,950
Tudo bem. Última coisa.

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 coisas que falamos provavelmente cair em uma dessas categorias.

453
00:27:10,820 --> 00:27:14,420
Se você vai para este link, que os locais serão publicadas on-line,

454
00:27:14,420 --> 00:27:18,900
você vai realmente ser capaz de, como você projetar seu site, manter essas heurísticas em mente

455
00:27:18,900 --> 00:27:21,330
e essas regras de ouro.

456
00:27:21,330 --> 00:27:26,610
Para seus projetos, o que eu sugiro que você faça, a fim de projetar sua aplicação melhor

457
00:27:26,610 --> 00:27:28,850
é fazer protótipos de papel primeiro.

458
00:27:28,850 --> 00:27:32,150
Quando você está pensando sobre sua aplicação, muito rapidamente esboçar o que você quer que ele se parece

459
00:27:32,150 --> 00:27:36,230
e certifique-se todas as caixas estão dispostas de uma maneira que é muito intuitiva para o usuário a usar

460
00:27:36,230 --> 00:27:39,820
e até mesmo mostrar os protótipos de papel para seus amigos e começar a grupos de foco.

461
00:27:39,820 --> 00:27:44,230
Basta chegar 2 ou 3 pessoas e pedir-lhes para simplesmente tocar nesses protótipos de papel,

462
00:27:44,230 --> 00:27:47,650
e mostrar-lhes novas telas para ver se eles realmente entender o que está acontecendo.

463
00:27:47,650 --> 00:27:50,680
>> O que você quer fazer é dar-lhes uma tarefa, motivar essa tarefa,

464
00:27:50,680 --> 00:27:53,270
e apenas dar-lhes o app e deixá-los usá-lo.

465
00:27:53,270 --> 00:27:56,530
Não lhes dê instruções para além disso.

466
00:27:56,530 --> 00:28:00,920
Você quer realmente deixá-los interagir com a sua aplicação de uma forma que permite que você veja

467
00:28:00,920 --> 00:28:03,870
como eles iriam usá-lo se você não estivesse ao lado deles.

468
00:28:03,870 --> 00:28:05,250
E isso é muito importante.

469
00:28:05,250 --> 00:28:08,780
Isso vai lhe dar muitas idéias como a gente se locomover coisas particulares

470
00:28:08,780 --> 00:28:10,560
de uma maneira que eu não tinha a intenção de que eles?

471
00:28:10,560 --> 00:28:14,680
Eles estão usando mecanismos de interface do usuário na tela

472
00:28:14,680 --> 00:28:17,490
de uma forma que é uma espécie de hacky?

473
00:28:17,490 --> 00:28:22,020
Eu não tinha a intenção de que eles façam isso dessa forma.

474
00:28:22,020 --> 00:28:23,940
E uma vez que você fez com que, o que você quer fazer?

475
00:28:23,940 --> 00:28:26,010
Rochas de seu projeto, certo?

476
00:28:26,010 --> 00:28:29,600
O que você quer fazer é que você quer desenvolver e, em seguida, fazer o processo de novo.

477
00:28:29,600 --> 00:28:32,110
Assim, mostra aos amigos uma vez que você desenvolveu, testá-lo,

478
00:28:32,110 --> 00:28:36,630
desenvolver, testar, desenvolver, testar, repetir, sobre e sobre e para a frente.

479
00:28:36,630 --> 00:28:39,720
Design é um processo iterativo muito neste sentido.

480
00:28:39,720 --> 00:28:43,280
Você realmente tem que construir algo e depois perceber coisas sobre ele

481
00:28:43,280 --> 00:28:46,520
que você não percebeu antes e voltar e melhorar com isso.

482
00:28:46,520 --> 00:28:50,890
Agora, quanto a parte de desenvolvimento, isso é o que Tommy vai mostrar-lhe após o intervalo

483
00:28:50,890 --> 00:28:53,220
e como você pode ser capaz de implementar algo como autocomplete

484
00:28:53,220 --> 00:28:56,610
de uma forma que é bastante simples.

485
00:28:57,440 --> 00:28:59,550
[Malan] Como Tommy define-se aqui, uma pergunta então.

486
00:28:59,550 --> 00:29:03,780
Muitos dos primeiros sites - e quando disse José 1990 site estilo,

487
00:29:03,780 --> 00:29:07,640
era implementações onde se você queria para selecionar uma hora de início e um tempo final,

488
00:29:07,640 --> 00:29:10,380
francamente, de volta ao dia e até mesmo em alguns sites hoje,

489
00:29:10,380 --> 00:29:13,220
a maneira de fazer isso é você pegar uma hora de um drop-down,

490
00:29:13,220 --> 00:29:15,910
você escolhe minutos de um drop-down, talvez você escolher AM, PM

491
00:29:15,910 --> 00:29:17,440
e depois você faz isso três vezes mais.

492
00:29:17,440 --> 00:29:19,920
E assim, com 6 cliques e talvez alguns de rolagem

493
00:29:19,920 --> 00:29:24,000
o usuário pode realmente fornecer algum tipo de data e / ou intervalo de tempo neste sentido.

494
00:29:24,000 --> 00:29:27,920
>> Então, definitivamente, de qualidade inferior e, portanto, ainda agora vimos nenhuma capacidades expressivas

495
00:29:27,920 --> 00:29:30,330
em qualquer das línguas nós olhamos para fazer algo mais sexy

496
00:29:30,330 --> 00:29:32,620
como esse controle deslizante de tempo de início e fim.

497
00:29:32,620 --> 00:29:36,290
Mas se você acha que volta para semana 0 quando falamos sobre Scratch,

498
00:29:36,290 --> 00:29:39,080
lá também não havia elementos que apenas fez certas coisas.

499
00:29:39,080 --> 00:29:42,700
Você realmente só tinha estes fundamentos como loops e condições e similares.

500
00:29:42,700 --> 00:29:46,910
Então tipo de apenas pensar muito abstratamente agora, independente dos elementos de HTML,

501
00:29:46,910 --> 00:29:51,260
o que realmente está acontecendo com algo como hora de início e slider tempo do fim?

502
00:29:51,260 --> 00:29:54,960
Quando eu passar meu mouse e clico em que o símbolo de cenoura pouco à esquerda

503
00:29:54,960 --> 00:29:59,220
e começar a arrastar, por meio de programação, o que é que você quer ser capaz de implementar

504
00:29:59,220 --> 00:30:01,000
para que isso aconteça?

505
00:30:01,000 --> 00:30:04,920
Que perguntas, o que expressões booleanas que você quer ser capaz de fazer?

506
00:30:04,920 --> 00:30:06,930
O que está realmente acontecendo? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Estudante] Onde está a posição do cursor? >> Boa. Onde é a posição do cursor?

508
00:30:10,080 --> 00:30:11,970
Isso foi algo que precisava expressar volta em Scratch,

509
00:30:11,970 --> 00:30:14,690
se foi com base no local ou mesmo a cor ou similar.

510
00:30:14,690 --> 00:30:18,410
Você pode se lembrar sempre assim momentaneamente na segunda-feira, havia todas essas coisas chamadas eventos

511
00:30:18,410 --> 00:30:22,370
no mundo da Web, e por isso há coisas 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ão, percebemos que até mesmo estas coisas que estamos tomando para concedido na Web

514
00:30:29,130 --> 00:30:32,190
com sites como o Facebook eo Gmail, mesmo se você não tem idéia

515
00:30:32,190 --> 00:30:34,890
como você possivelmente implementar isso porque não há nada mesmo assim em palestra

516
00:30:34,890 --> 00:30:38,570
ou Conjunto de Problemas 7, perceber que, com esses fundamentos exatamente o mesmo,

517
00:30:38,570 --> 00:30:41,090
com HTTP e os parâmetros e GET e POST,

518
00:30:41,090 --> 00:30:44,010
com os insumos básicos de HTML que nós olhamos até agora

519
00:30:44,010 --> 00:30:47,690
e em um momento com os mecanismos programáticos que Tommy está prestes a introduzir

520
00:30:47,690 --> 00:30:51,300
você pode começar a expressar-se, tal como fez na semana 0

521
00:30:51,300 --> 00:30:53,800
por muito intuitivamente arrastando e soltando.

522
00:30:53,800 --> 00:30:58,950
>> Assim, com o que disse, Tommy MacWilliam e algumas peças do puzzle novas para nós para a web.

523
00:30:58,950 --> 00:31:03,450
Tudo bem. Meu nome é Tommy e eu vou estar falando sobre JavaScript.

524
00:31:03,450 --> 00:31:07,150
Apenas uma renúncia: Eu sou da opinião de que o JavaScript é a melhor linguagem de programação

525
00:31:07,150 --> 00:31:09,010
em todo o mundo inteiro.

526
00:31:09,010 --> 00:31:11,940
Há muitas pessoas que discordam de mim, mas é simplesmente fantástico.

527
00:31:11,940 --> 00:31:16,330
Uma vez que você voltar para a C, se você tem que escrever C para outra classe ou de outras linguagens,

528
00:31:16,330 --> 00:31:19,780
É realmente frustrante em todos os detalhes de baixo nível que você tem que ficar atolado dentro

529
00:31:19,780 --> 00:31:23,050
Então, se você está sempre sentindo triste sobre como é chato C é escrever,

530
00:31:23,050 --> 00:31:25,130
apenas voltar, escrever algum JavaScript. É o nirvana.

531
00:31:25,130 --> 00:31:27,980
Você vai se sentir muito melhor sobre o seu dia ruim.

532
00:31:27,980 --> 00:31:31,900
Uma boa parte da magia de JavaScript vem de sua capacidade de manipular as coisas

533
00:31:31,900 --> 00:31:33,730
que já estão na página.

534
00:31:33,730 --> 00:31:38,520
Quando escrevemos nossos scripts PHP, foram executados no servidor,

535
00:31:38,520 --> 00:31:42,270
e, finalmente, que o script PHP provavelmente mostrará algumas HTML.

536
00:31:42,270 --> 00:31:45,860
HTML que foi enviado para o cliente, e então foi isso.

537
00:31:45,860 --> 00:31:50,180
Se o PHP queria adicionar um botão de uma página, por exemplo, não pode realmente fazer isso.

538
00:31:50,180 --> 00:31:54,350
Ele teria que prestar um novo arquivo HTML e toda enviar para o navegador.

539
00:31:54,350 --> 00:31:57,840
Com JavaScript sabemos que podemos atualizar as coisas enquanto eles já estão na página,

540
00:31:57,840 --> 00:32:00,840
e por isso podemos fornecer um feedback muito mais imediato,

541
00:32:00,840 --> 00:32:06,150
que realmente vai melhorar a experiência do usuário no nosso site.

542
00:32:06,150 --> 00:32:09,330
Apenas um rápido resumo de seletores de JavaScript.

543
00:32:09,330 --> 00:32:11,590
Nós sabemos que quando o download de uma página 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 DOM lembro é apenas uma árvore tão grande, onde os elementos estão relacionados nesta hierarquia grande.

546
00:32:19,340 --> 00:32:21,810
Quando trabalhamos com bancos de dados em pset 7,

547
00:32:21,810 --> 00:32:26,280
uma das primeiras coisas que precisávamos para saber como fazer era consultar o banco de dados.

548
00:32:26,280 --> 00:32:29,060
Nós temos esta tabela de usuários grande, e às vezes nós só quero dizer,

549
00:32:29,060 --> 00:32:33,260
"Eu só quero alguns desses usuários que correspondem alguma condição."

550
00:32:33,260 --> 00:32:36,020
Da mesma forma, quando temos o DOM precisamos de alguma forma de consulta-lo.

551
00:32:36,020 --> 00:32:39,490
Precisamos de alguma forma de dizer: "Eu quero que todos os botões que se assemelham a este

552
00:32:39,490 --> 00:32:41,860
"Ou de todas as imagens na página."

553
00:32:41,860 --> 00:32:44,330
E esses seletores nos permitem fazer isso.

554
00:32:44,330 --> 00:32:45,690
Então, basta uma rápida recapitulação.

555
00:32:45,690 --> 00:32:50,770
Este primeiro aqui, este # apresentar, o que é que vai escolher? Alguém se lembra?

556
00:32:50,770 --> 00:32:54,880
[Resposta do aluno inaudível] >> Sim, exatamente.

557
00:32:54,880 --> 00:32:59,510
Isso vai selecionar um elemento na página que tem uma identificação de enviar.

558
00:32:59,510 --> 00:33:03,470
E para que hash tag diz que este selector vai trabalhar com IDs.

559
00:33:03,470 --> 00:33:07,630
Como cerca de um segundo, isso. Centrado, o que será que escolher?

560
00:33:11,360 --> 00:33:15,180
Sim. >> [Aluno] Classe. >> Exatamente. Isso agora vai selecionar por classe.

561
00:33:15,180 --> 00:33:18,840
A diferença entre o ID e classe aqui é geralmente o ID deve ser único

562
00:33:18,840 --> 00:33:20,820
dentro de qualquer espaço que você está procurando mais.

563
00:33:20,820 --> 00:33:23,080
Então, se você procura de uma página web inteira,

564
00:33:23,080 --> 00:33:27,740
você realmente deve ter apenas um elemento com o ID certo, portanto, neste caso de apresentar.

565
00:33:27,740 --> 00:33:31,330
Com classes, por outro lado, pode-se ter mais do que um elemento na mesma página

566
00:33:31,330 --> 00:33:33,130
com a mesma classe.

567
00:33:33,130 --> 00:33:36,580
Isto pode ser útil para dizer eu quero selecionar tudo o que está centrado na página

568
00:33:36,580 --> 00:33:38,450
em vez de apenas uma coisa.

569
00:33:38,450 --> 00:33:40,310
>> E, finalmente, este último aqui é um pouco mais complicado,

570
00:33:40,310 --> 00:33:43,890
mas o que é que isto vai selecionar a partir da DOM?

571
00:33:46,650 --> 00:33:48,810
[Resposta do aluno inaudível] >> O que é isso?

572
00:33:48,810 --> 00:33:53,250
[Aluno] Tudo que é uma tag. >> Temos duas partes aqui.

573
00:33:53,250 --> 00:33:58,070
A segunda parte vai dizer que eu quero selecionar essas tags com uma marca de entrada,

574
00:33:58,070 --> 00:34:00,730
portanto, qualquer elemento que seja uma marca de entrada.

575
00:34:00,730 --> 00:34:03,080
Mas eu não quero só selecionar todas as entradas

576
00:34:03,080 --> 00:34:05,170
porque algo como um botão de envio poderia ser uma entrada

577
00:34:05,170 --> 00:34:08,409
e algo como uma caixa de texto poderia ser uma entrada.

578
00:34:08,409 --> 00:34:11,909
Assim, com estes colchetes Eu estou dizendo que eu só quero selecionar os elementos

579
00:34:11,909 --> 00:34:14,110
que são do tipo texto.

580
00:34:14,110 --> 00:34:17,400
Em algum lugar na minha tag HTML eu tenho um atributo chamado tipo,

581
00:34:17,400 --> 00:34:19,750
e o valor de atributo, que tem que ser texto.

582
00:34:19,750 --> 00:34:21,340
Assim como sobre esta primeira parte aqui?

583
00:34:21,340 --> 00:34:25,489
A primeira palavra de este selector é a forma, então eu tenho um espaço e então esta parte de entrada.

584
00:34:25,489 --> 00:34:29,620
O que isso faz, colocando a forma em frente a ela?

585
00:34:33,409 --> 00:34:35,860
Isso vai basicamente limitar a nossa consulta.

586
00:34:35,860 --> 00:34:38,510
Poderia ser o caso de que temos algumas entradas na página

587
00:34:38,510 --> 00:34:41,080
que não são descendentes de um formulário.

588
00:34:41,080 --> 00:34:46,150
O que isto vai fazer é isso vou dizer que eu só quero as marcas de entrada que têm algum lugar acima deles

589
00:34:46,150 --> 00:34:49,030
algum elemento pai de um formulário.

590
00:34:49,030 --> 00:34:52,100
E assim, desta forma nós podemos fazer essas consultas mais hierárquicas

591
00:34:52,100 --> 00:34:55,000
de modo que não apenas tem que selecionar tudo combinando um seletor dado.

592
00:34:55,000 --> 00:35:00,760
Podemos tipo de limitar o âmbito da consulta que para outra coisa.

593
00:35:00,760 --> 00:35:04,000
Portanto, agora que sabemos como selecionar elementos na página,

594
00:35:04,000 --> 00:35:06,780
vamos falar um pouco sobre AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX é um acrônimo ainda muito na moda que significa Asynchronous JavaScript e XML.

596
00:35:12,270 --> 00:35:15,640
O que acontece é que o XML é apenas uma maneira de representar alguns dados.

597
00:35:15,640 --> 00:35:20,920
>> Esse tipo de popularidade perdida recentemente, de modo que o X em AJAX não é usado o tempo todo.

598
00:35:20,920 --> 00:35:26,220
Basicamente, o que AJAX nos permite fazer é fazer solicitações HTTP

599
00:35:26,220 --> 00:35:28,620
do contexto de JavaScript.

600
00:35:28,620 --> 00:35:32,310
Quando estamos no nosso navegador web e estamos navegando em páginas e clicar em um link,

601
00:35:32,310 --> 00:35:37,790
o que o nosso navegador vai fazer é fazer uma solicitação HTTP para qualquer link que clicar.

602
00:35:37,790 --> 00:35:41,670
Mas isso nem sempre é ideal, porque se esse é o caso, então, como Davi estava dizendo:

603
00:35:41,670 --> 00:35:45,220
nós sempre temos que fazer os usuários clicar em um botão Enviar ou clicar em um link

604
00:35:45,220 --> 00:35:50,380
, a fim de fazer qualquer coisa acontecer, que vai envolver uma solicitação HTTP.

605
00:35:50,380 --> 00:35:54,160
Assim, com AJAX podemos fazer essas solicitações em nome de JavaScript.

606
00:35:54,160 --> 00:35:57,020
Isso significa que sempre que o usuário interage com a página ou acontecer alguma coisa,

607
00:35:57,020 --> 00:36:01,780
nós podemos realmente fazer um pedido programático para algum arquivo PHP outra em nosso site

608
00:36:01,780 --> 00:36:06,280
ou qualquer outra coisa e recuperar os dados que esse arquivo cospe para fora.

609
00:36:06,280 --> 00:36:09,860
Vamos dar uma olhada em um exemplo de AJAX.

610
00:36:09,860 --> 00:36:16,140
Esta é a nossa página de Finanças CS50 com o qual espero que alguns de nós estão familiarizados.

611
00:36:16,140 --> 00:36:21,790
Se olharmos para o código HTML da página, vemos aqui que eu adicionei algumas coisas,

612
00:36:21,790 --> 00:36:23,820
um dos que eu tenho dado esta forma uma identificação.

613
00:36:23,820 --> 00:36:26,480
Eu já disse id = "formulário de cotação".

614
00:36:26,480 --> 00:36:31,910
Eu fiz isso só porque ele vai fazer isso um pouco mais fácil de selecionar a partir do DOM

615
00:36:31,910 --> 00:36:35,090
desde que eu posso apenas fazer uma consulta muito simples.

616
00:36:35,090 --> 00:36:38,960
O que eu quero fazer aqui é que eu quero corrigir algum problema com CS50 Finanças.

617
00:36:38,960 --> 00:36:41,550
Então, se vamos para finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
cada vez que eu quero obter uma cotação, eu tenho que clicar nesse botão de Citação Get,

619
00:36:45,700 --> 00:36:48,960
e que Get botão de Citação em seguida, leva-me a outra página inteira.

620
00:36:48,960 --> 00:36:52,400
E se eu quiser outra citação, eu tenho que pressionar o botão Voltar e depois digite-a

621
00:36:52,400 --> 00:36:54,480
Eu recebo uma citação, e eu bati o botão Voltar.

622
00:36:54,480 --> 00:36:56,840
Isso realmente não é a melhor experiência do usuário.

623
00:36:56,840 --> 00:37:01,570
Quem poderia realmente usar o site, se é que lento para obter os preços das ações?

624
00:37:01,570 --> 00:37:05,630
Então, o que nós queremos fazer com AJAX é remover essa etapa de ir a uma página separada

625
00:37:05,630 --> 00:37:08,410
, a fim de ver os resultados.

626
00:37:08,410 --> 00:37:11,240
>> O que estamos realmente só pedindo é que o preço realmente pequeno,

627
00:37:11,240 --> 00:37:14,240
e isso é apenas uma quantidade muito pequena de dados.

628
00:37:14,240 --> 00:37:17,400
Portanto, não há necessidade de eu ir para outra página inteira de HTML,

629
00:37:17,400 --> 00:37:20,670
download de um novo lote de HTML, talvez baixar mais algumas imagens,

630
00:37:20,670 --> 00:37:24,410
alguns outros arquivos CSS só para mim para responder a essa pergunta muito simples

631
00:37:24,410 --> 00:37:27,810
de quanto custa esse estoque.

632
00:37:27,810 --> 00:37:31,000
Com AJAX podemos fazer isso muito mais fácil.

633
00:37:31,000 --> 00:37:36,400
Vemos aqui que eu estou ligando em um arquivo JavaScript chamado quote.js.

634
00:37:36,400 --> 00:37:40,140
Vamos realmente abrir o arquivo. Não há.

635
00:37:42,610 --> 00:37:45,860
Todos meus arquivos JavaScript vão ser localizado em HTML

636
00:37:45,860 --> 00:37:47,630
para que o navegador possa acessá-lo.

637
00:37:47,630 --> 00:37:50,330
Então nós temos um diretório separado aqui para JavaScript,

638
00:37:50,330 --> 00:37:54,340
e agora aqui é quote.js.

639
00:37:54,340 --> 00:38:00,930
No topo deste arquivo isso diz aqui que eu quero esperar por toda a página a ser carregada

640
00:38:00,930 --> 00:38:04,830
antes de tentar fazer qualquer coisa. Por que isso é necessário?

641
00:38:04,830 --> 00:38:08,650
Acontece que a próxima coisa que eu vou fazer aqui é começar a olhar para um elemento

642
00:38:08,650 --> 00:38:10,810
que coincide com algum selector.

643
00:38:10,810 --> 00:38:15,600
Se este JavaScript é sempre executada antes de este elemento é carregado na página,

644
00:38:15,600 --> 00:38:17,820
então, tudo que eu tento fazer é não ir trabalhar

645
00:38:17,820 --> 00:38:20,580
porque eu estou indo para tentar selecionar algo que não está lá ainda.

646
00:38:20,580 --> 00:38:23,780
Então esta linha em cima diz que eu quero que você espere até que tudo esteja carregado

647
00:38:23,780 --> 00:38:28,030
por isso estamos garantido que todos os elementos que eu estou procurando são realmente na página.

648
00:38:29,730 --> 00:38:34,310
Este sinal dólar aqui significa que eu estou usando a biblioteca chamada jQuery.

649
00:38:34,310 --> 00:38:38,570
Esta biblioteca jQuery nos permite usar esses seletores que apenas olhou.

650
00:38:38,570 --> 00:38:44,010
Ao dizer $ seguida, passando como um argumento este # formulário de cotação,

651
00:38:44,010 --> 00:38:47,910
Agora estou selecionando essa forma que nós apenas deu uma olhada.

652
00:38:47,910 --> 00:38:52,290
Agora eu tenho uma representação dessa forma em memória de alguma forma.

653
00:38:52,290 --> 00:38:56,760
>> Nesta objeto agora, esta representação da forma,

654
00:38:56,760 --> 00:38:58,890
Agora estou usando uma função chamado.

655
00:38:58,890 --> 00:39:02,710
O que esta função faz é que vai anexar um manipulador de eventos.

656
00:39:02,710 --> 00:39:06,310
O evento que vamos ouvir é o evento submit.

657
00:39:06,310 --> 00:39:08,890
Assim, quando o usuário clicar nesse botão Enviar ou pressiona Enter,

658
00:39:08,890 --> 00:39:11,730
este evento vai ao fogo.

659
00:39:11,730 --> 00:39:16,390
Ao ligar para isso, eu agora pode substituir o comportamento padrão do formulário.

660
00:39:16,390 --> 00:39:19,770
Sem esta JavaScript, a forma se submeteria a qualquer arquivo PHP

661
00:39:19,770 --> 00:39:22,110
usamos nesse atributo action.

662
00:39:22,110 --> 00:39:25,440
Mas em vez disso, eu estou dizendo agora, espere, espere, espere, eu não quero que você realmente fazer isso.

663
00:39:25,440 --> 00:39:31,140
Eu quero que isso aconteça antes de ir e tentar submeter a algum arquivo PHP.

664
00:39:31,140 --> 00:39:32,870
Agora o que eu quero fazer?

665
00:39:32,870 --> 00:39:39,270
Neste ponto, eu quero usar AJAX para carregar alguma forma no que o preço das ações é.

666
00:39:39,270 --> 00:39:44,170
A primeira coisa que eu preciso saber é o que estoque o usuário está olhando para cima.

667
00:39:44,170 --> 00:39:46,760
Para fazer isso eu vou usar outro seletor.

668
00:39:46,760 --> 00:39:49,020
Este é o terceiro seletor vimos antes.

669
00:39:49,020 --> 00:39:54,460
Este diz que eu quero começar este elemento forma com um ID de formulário de cotação.

670
00:39:54,460 --> 00:39:58,440
Então, em algum lugar dentro dessa forma, tem de haver um elemento de entrada

671
00:39:58,440 --> 00:40:01,270
que tem um nome de símbolo.

672
00:40:01,270 --> 00:40:05,460
Se olharmos para o nosso HTML, vimos que tinha uma entrada [name = símbolo].

673
00:40:05,460 --> 00:40:12,380
Isso significa que este está indo para selecionar a caixa de texto que o usuário está digitando em.

674
00:40:12,380 --> 00:40:13,870
Isso é bom. Temos a caixa de texto.

675
00:40:13,870 --> 00:40:17,360
Agora só precisamos saber o que há dentro dele.

676
00:40:17,360 --> 00:40:20,290
Para isso, podemos chamar esse método aqui, este val.,

677
00:40:20,290 --> 00:40:23,240
e este diz que eu sei o que você tem caixa de texto.

678
00:40:23,240 --> 00:40:28,160
Eu quero que você me diga o que é o usuário digitou na caixa de texto que.

679
00:40:28,160 --> 00:40:34,440
Agora temos uma string chamada símbolo que é igual a tudo o que o usuário digitou dentro

680
00:40:34,440 --> 00:40:39,820
Isso é bom. Podemos usar essa seqüência agora para fazer nosso pedido.

681
00:40:39,820 --> 00:40:42,450
Esta é uma nova função aqui, este $,

682
00:40:42,450 --> 00:40:44,900
exceto que não ficamos mais vai ser selecionar elementos,

683
00:40:44,900 --> 00:40:48,910
nós vamos estar chamando uma função diferente que é fornecido a nós por jQuery.

684
00:40:48,910 --> 00:40:54,810
Esta função AJAX é o que realmente vai fazer esta solicitação HTTP.

685
00:40:54,810 --> 00:40:57,000
Então, temos que dizer que algumas coisas.

686
00:40:57,000 --> 00:41:01,410
A primeira coisa que temos que dizer a esta função é onde eu quero o pedido para ir.

687
00:41:01,410 --> 00:41:08,910
Em algum lugar no meu projeto eu tenho esse arquivo dentro do diretório HTML chamado quote.php.

688
00:41:08,910 --> 00:41:15,150
Eu posso acessar esse arquivo, vimos, tal como este, se eu for para localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Eu quero o meu JavaScript para fazer um pedido para que a página.

690
00:41:20,450 --> 00:41:22,920
Que tipo de pedido agora?

691
00:41:22,920 --> 00:41:27,210
Vimos antes que o formulário tem que method = "post" atributo,

692
00:41:27,210 --> 00:41:29,270
e isso significa que ele vai fazer uma solicitação POST,

693
00:41:29,270 --> 00:41:32,630
por isso não vai colocar qualquer coisa na URL, em vez de um pedido GET,

694
00:41:32,630 --> 00:41:36,860
que só iria ser demitido se apenas acessou a página com o navegador, por exemplo.

695
00:41:36,860 --> 00:41:41,260
Agora que já disse que quero fazer uma solicitação HTTP POST

696
00:41:41,260 --> 00:41:44,840
para uma página localizada no quote.php.

697
00:41:44,840 --> 00:41:51,490
Quando enviar o formulário, lembre-se que poderia acessar os elementos de entrada dentro do que a forma

698
00:41:51,490 --> 00:41:54,430
com essa variável $ _POST.

699
00:41:54,430 --> 00:41:58,710
Até agora, na história que não tenha realmente enviado junto quaisquer dados ainda.

700
00:41:58,710 --> 00:42:00,640
Acabamos de dizer que estamos fazendo um pedido de AJAX

701
00:42:00,640 --> 00:42:03,200
e aqui está o tipo de solicitação que estamos fazendo.

702
00:42:03,200 --> 00:42:07,090
Agora, precisamos realmente enviar alguns dados para a página.

703
00:42:07,090 --> 00:42:10,930
Para isso, podemos usar essa propriedade chamada de dados.

704
00:42:10,930 --> 00:42:14,950
O valor da propriedade é na verdade uma matriz associativa.

705
00:42:14,950 --> 00:42:19,390
A razão para isso é que nos permite enviar mais do que apenas 1 pedaço de dados.

706
00:42:19,390 --> 00:42:24,750
É por isso que temos essas chaves aqui aninhada dentro destas chaves outras curvas.

707
00:42:24,750 --> 00:42:29,680
As chaves nessas matrizes associativas vai ser a mesma coisa

708
00:42:29,680 --> 00:42:32,630
como os atributos nome em nossos elementos de formulário.

709
00:42:32,630 --> 00:42:35,740
Isso significa que, se eu enviar junto uma chave de símbolo,

710
00:42:35,740 --> 00:42:41,870
isso significa que a minha página PHP pode acessar esses dados com $ _POST [símbolo]

711
00:42:41,870 --> 00:42:44,640
assim como fizemos antes, quando estávamos enviar um formulário.

712
00:42:44,640 --> 00:42:47,090
E agora os dados reais que deseja enviar

713
00:42:47,090 --> 00:42:50,790
vai ser o valor dentro do array associativo.

714
00:42:50,790 --> 00:42:54,070
>> Nós valor este texto em um símbolo variável chamada,

715
00:42:54,070 --> 00:42:57,380
e por isso estamos enviando junto agora uma chave de símbolo

716
00:42:57,380 --> 00:43:01,380
e um valor de tudo o que o usuário digitou dentro

717
00:43:01,380 --> 00:43:06,270
Agora nós fizemos essa solicitação HTTP, o nosso arquivo PHP foi executado,

718
00:43:06,270 --> 00:43:11,480
e que vai enviar alguns dados de volta agora para o cliente que acabou de fazer este pedido.

719
00:43:11,480 --> 00:43:15,220
Agora precisamos responder a tudo o que o servidor nos disse.

720
00:43:15,220 --> 00:43:20,180
Para isso, temos esta última propriedade aqui chamado de sucesso.

721
00:43:20,180 --> 00:43:24,240
O valor desta chave do sucesso é, na verdade, vai ser uma função,

722
00:43:24,240 --> 00:43:26,910
e isso é uma das coisas legais que você pode fazer com JavaScript.

723
00:43:26,910 --> 00:43:31,720
Não apenas você pode ter ints ou matrizes como um valor dentro de uma matriz associativa,

724
00:43:31,720 --> 00:43:34,170
que também podem ter uma função.

725
00:43:34,170 --> 00:43:36,380
Assim dizendo sucesso, esta é a minha chave.

726
00:43:36,380 --> 00:43:38,830
Um cólon diz aqui vem o valor,

727
00:43:38,830 --> 00:43:41,810
e agora o valor deste é realmente uma função.

728
00:43:41,810 --> 00:43:44,460
Portanto, não precisa dar essa função um nome por si só.

729
00:43:44,460 --> 00:43:48,820
Podemos apenas dizer que este vai ser alguma função. Ele vai levar um argumento.

730
00:43:48,820 --> 00:43:51,190
O argumento para esta função vai ser

731
00:43:51,190 --> 00:43:54,460
qualquer que seja o servidor enviou-nos de volta a partir da solicitação.

732
00:43:54,460 --> 00:43:57,750
Assim como quando nosso navegador faz uma solicitação, o servidor envia algo de volta

733
00:43:57,750 --> 00:43:59,060
eo navegador exibe,

734
00:43:59,060 --> 00:44:03,030
no contexto de AJAX que acabou de fazer um pedido, o servidor enviou alguma coisa,

735
00:44:03,030 --> 00:44:07,110
e agora temos que representava como uma string.

736
00:44:07,110 --> 00:44:11,280
Com essa seqüência gostaria apenas para mostrar que na página.

737
00:44:11,280 --> 00:44:14,040
Para fazer isso eu vou ter um seletor passado.

738
00:44:14,040 --> 00:44:17,570
Eu quero selecionar o elemento com o preço de ID.

739
00:44:17,570 --> 00:44:20,710
Este é apenas um div vazio que eu criei na página,

740
00:44:20,710 --> 00:44:26,640
e eu quero definir o conteúdo dessa div a ser o que o servidor enviou-nos de volta.

741
00:44:26,640 --> 00:44:30,280
Eu realmente modificado quote.php um pouco.

742
00:44:30,280 --> 00:44:33,460
>> Em vez de chamar render e tornando alguns página,

743
00:44:33,460 --> 00:44:38,100
quote.php agora é simplesmente vai imprimir o valor do estoque como uma string.

744
00:44:38,100 --> 00:44:41,880
Então, se você realmente visitar a página, você teria apenas que ver que pequena cadeia

745
00:44:41,880 --> 00:44:45,030
de qualquer que seja o preço das ações é.

746
00:44:45,030 --> 00:44:50,170
Uma última coisa que precisamos fazer aqui é apenas garantir que esta função retorna falso.

747
00:44:50,170 --> 00:44:53,560
O que isso diz é que, se eu estou dentro de um manipulador de eventos

748
00:44:53,560 --> 00:44:57,300
e que manipulador de eventos retorna false em vez de voltar verdade,

749
00:44:57,300 --> 00:45:01,510
isso significa que eu não quero que o evento original ao fogo.

750
00:45:01,510 --> 00:45:05,270
Neste caso, se não tem alguma JavaScript e apresentado um formulário,

751
00:45:05,270 --> 00:45:08,280
nosso navegador é que vai dizer: "Eu vou enviar os dados ao longo",

752
00:45:08,280 --> 00:45:10,130
e eles vão mandar você para uma outra página.

753
00:45:10,130 --> 00:45:14,360
Como estamos usando AJAX, agora, não há necessidade de enviar o usuário para outra página.

754
00:45:14,360 --> 00:45:17,920
Nós apenas estamos indo para exibir os resultados de forma dinâmica nessa mesma página.

755
00:45:17,920 --> 00:45:21,460
Nós realmente não quer ir a qualquer lugar, e eu quero ficar na mesma página.

756
00:45:21,460 --> 00:45:27,060
Então, retornando false, podemos garantir que a forma não faz isso para nós.

757
00:45:27,060 --> 00:45:31,170
Vamos dar uma olhada no que este realmente se parece.

758
00:45:31,170 --> 00:45:34,180
Nossa página de cotação parece o mesmo.

759
00:45:34,180 --> 00:45:37,240
Deixe-me puxar para cima o inspetor aqui para que possamos ver o que está acontecendo.

760
00:45:37,240 --> 00:45:40,270
Torná-lo um pouco menos enorme.

761
00:45:40,270 --> 00:45:44,590
Lembre-se que abrir a aba de rede, este é o lugar onde nós podemos ver todas as solicitações HTTP

762
00:45:44,590 --> 00:45:47,570
que estão acontecendo na página.

763
00:45:47,570 --> 00:45:52,890
>> Para um símbolo me deixar digitar AAPL e clique em Obter cotação.

764
00:45:52,890 --> 00:45:56,720
Agora vimos que uma parte da Apple custa cerca de número de dólares

765
00:45:56,720 --> 00:46:00,410
só apareceu na página, mas a URL não muda em nada.

766
00:46:00,410 --> 00:46:04,570
Na verdade, aqui está a solicitação HTTP que nós fizemos.

767
00:46:04,570 --> 00:46:09,980
Fizemos uma solicitação POST para quote.php. Isso faz 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
Não é mais esse documento gigantesco HTML com imagens e coisas assim,

770
00:46:16,320 --> 00:46:20,920
é apenas uma linha de texto, e então nós apenas exibida a linha de texto.

771
00:46:20,920 --> 00:46:26,290
Se voltarmos para os cabeçalhos e ver o que realmente enviado dentro desta solicitação HTTP,

772
00:46:26,290 --> 00:46:33,950
podemos ver aqui em baixo que enviamos ao longo de uma chave de símbolo e um valor de AAPL,

773
00:46:33,950 --> 00:46:36,430
que é o que o usuário digitou dentro

774
00:46:36,430 --> 00:46:39,230
Isso é bom, mas ainda é um pouco chato.

775
00:46:39,230 --> 00:46:42,490
Eu ainda tenho que clicar nesse botão para obter a cotação de ações.

776
00:46:42,490 --> 00:46:45,880
Nós somos pessoas muito ocupadas e não temos tempo para clicar em botões.

777
00:46:45,880 --> 00:46:49,910
Google percebeu isso um pouco tempo atrás quando implementaram Google Instant.

778
00:46:49,910 --> 00:46:53,590
O Google Instant faz é como você está digitando apenas começa a apresentar resultados para você

779
00:46:53,590 --> 00:46:56,520
assim você não precisa se preocupar com mesmo clicando em Pesquisar.

780
00:46:56,520 --> 00:46:58,730
Na verdade, uma história divertida relacionada a isso.

781
00:46:58,730 --> 00:47:01,100
Uma vez que o Google Instant saiu, as pessoas eram como, "Whoa, isso é super incrível."

782
00:47:01,100 --> 00:47:02,540
"Isso é tão legal."

783
00:47:02,540 --> 00:47:05,950
E um estudante de baixo de Stanford que tinha 19 anos na época

784
00:47:05,950 --> 00:47:09,000
fez este site chamado YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Todos instantânea do YouTube não é efetivamente pesquisar YouTube instantaneamente.

786
00:47:13,170 --> 00:47:17,020
Portanto, em vez de ter que ir para YouTube.com e bateu de pesquisa,

787
00:47:17,020 --> 00:47:21,650
quando eu começar a digitar algo no YouTube instantânea como CS50,

788
00:47:21,650 --> 00:47:25,320
podemos ver aqui que está a tentar em uma conexão lenta de Internet

789
00:47:25,320 --> 00:47:28,500
preencher esses resultados ao vivo.

790
00:47:28,500 --> 00:47:35,590
Para isso nós podemos realmente fazer uma modificação muito simples de nosso arquivo quote.js.

791
00:47:35,590 --> 00:47:40,900
Agora estamos anexando este evento quando o formulário é enviado.

792
00:47:40,900 --> 00:47:43,760
Nós realmente não queremos fazer o usuário enviar esse formulário mais,

793
00:47:43,760 --> 00:47:48,570
então vamos demitir vez este evento cada vez que o usuário pressiona uma tecla.

794
00:47:48,570 --> 00:47:53,200
Para isso vamos primeiro mudar o evento para apresentar keyup.

795
00:47:53,200 --> 00:47:55,740
Isso significa que, em vez de esperar que a forma de apresentar,

796
00:47:55,740 --> 00:47:58,490
cada vez que a tecla é pressionada, algo vai acontecer.

797
00:47:58,490 --> 00:48:02,030
Ele não faz mais sentido para anexar este evento keyup para todo o formulário.

798
00:48:02,030 --> 00:48:05,080
Nós realmente só se preocupam com a caixa de pesquisa.

799
00:48:05,080 --> 00:48:09,320
>> Para selecionar que, agora, podemos mudar este seja, em vez de formulário de cotação,

800
00:48:09,320 --> 00:48:14,220
formulário de cotação, e nós vamos ter uma entrada (tipo de texto =) ou, poderíamos dizer (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 há uma última coisa que temos que fazer.

803
00:48:18,650 --> 00:48:21,190
Lembre-se aqui em baixo, quando disse que o retorno falsa

804
00:48:21,190 --> 00:48:24,370
nós dissemos que não queremos que o evento padrão para disparar.

805
00:48:24,370 --> 00:48:26,390
Mas isso só acontece que, se desabilitar que agora,

806
00:48:26,390 --> 00:48:29,660
tudo o que digitar não vai aparecer no navegador mais

807
00:48:29,660 --> 00:48:33,000
porque isso seria o comportamento padrão de digitar em uma caixa de texto.

808
00:48:33,000 --> 00:48:38,660
Não queremos mais para substituir esse, então vamos destruir este return false.

809
00:48:38,660 --> 00:48:44,800
Se salvar o que e recarregue a página, agora quando eu começar a digitar AAPL

810
00:48:44,800 --> 00:48:50,160
você vai ver que o preço das ações no fundo aqui está completando automaticamente.

811
00:48:50,160 --> 00:48:53,150
Então aqui está CS50 Instantânea Finanças.

812
00:48:53,150 --> 00:48:55,860
Na verdade, uma história divertida sobre o Instant YouTube

813
00:48:55,860 --> 00:48:59,420
é que o aluno apenas uma espécie de escreveu como um projeto de uma noite,

814
00:48:59,420 --> 00:49:03,800
e no dia seguinte foi-lhe oferecido um emprego pelo CEO do YouTube.

815
00:49:03,800 --> 00:49:10,610
Assim, tão simples como isso, você CS50 alunos, seus projetos finais que você pode obter um emprego no YouTube.

816
00:49:10,610 --> 00:49:14,720
Algo assim é uma idéia muito legal para um projeto final, certo?

817
00:49:14,720 --> 00:49:18,170
Tivemos algumas funcionalidades existentes que queríamos integrar.

818
00:49:18,170 --> 00:49:20,330
Nós melhorar a experiência do usuário um pouco,

819
00:49:20,330 --> 00:49:24,340
e de repente, buscando algo no YouTube instantânea pode ser muito mais fácil

820
00:49:24,340 --> 00:49:27,290
de procurar no YouTube regular.

821
00:49:27,290 --> 00:49:30,790
Então, isso é AJAX em poucas palavras.

822
00:49:30,790 --> 00:49:34,860
>> Nos exemplos que José estava mostrando, vimos um monte de autocompletes,

823
00:49:34,860 --> 00:49:39,250
e aqueles autocompletes são realmente, realmente útil, porque não temos de lembrar -

824
00:49:39,250 --> 00:49:41,770
Por exemplo, se você não se lembra do preço das ações da Apple

825
00:49:41,770 --> 00:49:45,110
e nós só sei que é algo aa, em vez de apenas dizendo para mim,

826
00:49:45,110 --> 00:49:48,740
"Uma parte dessa coisa custa tanto dinheiro",

827
00:49:48,740 --> 00:49:52,540
Eu tipo de gostaria de saber quais ações começar com aa.

828
00:49:52,540 --> 00:49:58,340
Podemos fazer isso realmente bem com a biblioteca Bootstrap que já está incluído

829
00:49:58,340 --> 00:50:01,380
dentro de CS50 Finanças.

830
00:50:01,380 --> 00:50:09,390
Se você vir até aqui para a marca de JavaScript e rolar para typeahead,

831
00:50:09,390 --> 00:50:13,730
este é apenas um plugin legal que alguém já escreveu para nós,

832
00:50:13,730 --> 00:50:16,980
e podemos facilmente usar a sua funcionalidade como este.

833
00:50:16,980 --> 00:50:21,410
Eu digitei um A e aqui está uma lista de alguns estados que começam com A.

834
00:50:21,410 --> 00:50:25,360
Vamos dizer que eu acho que isso é muito legal e é hora de incluir este na minha página.

835
00:50:25,360 --> 00:50:28,300
Acontece que isso é muito, muito simples.

836
00:50:28,300 --> 00:50:32,810
Vamos saltar aqui para quote3.js.

837
00:50:34,890 --> 00:50:37,380
Meu arquivo parece um pouco diferente.

838
00:50:37,380 --> 00:50:39,700
Até aqui todas as minhas coisas AJAX é o mesmo.

839
00:50:39,700 --> 00:50:43,170
Eu quero carregar os dados de estoque sem ter que ir para outra página.

840
00:50:43,170 --> 00:50:46,220
Mas agora eu quero usar este plugin.

841
00:50:46,220 --> 00:50:51,020
A documentação Bootstrap tem grandes exemplos de como exatamente eu posso fazer isso.

842
00:50:51,020 --> 00:50:54,350
Eu quero dizer, "Aqui é a entrada que eu quero autocomplete",

843
00:50:54,350 --> 00:50:56,640
e eu vou chamar esta função chamada typeahead,

844
00:50:56,640 --> 00:50:59,730
e que vai lidar com todas as coisas typeahead para nós.

845
00:50:59,730 --> 00:51:02,090
Ele irá inicializar a lista, que vai fazer todos os nossos filtragem.

846
00:51:02,090 --> 00:51:06,680
A única coisa que ele precisa saber é que dados estamos em autocompleting.

847
00:51:06,680 --> 00:51:10,480
Então, eu encontrei essa chave apenas lendo a documentação e olhando para os exemplos.

848
00:51:10,480 --> 00:51:14,150
Se I dão uma chave de origem, o valor desta chave

849
00:51:14,150 --> 00:51:17,770
é apenas uma matriz algumas das coisas que eu quero autocomplete.

850
00:51:17,770 --> 00:51:20,180
Esta variável veio deste outro arquivo.

851
00:51:20,180 --> 00:51:23,400
Eu abro symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Isto é apenas uma matriz symbols.js esta muito, muito grande, contendo cordas

853
00:51:27,980 --> 00:51:32,080
de todos os símbolos imagens de o NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Se eu quiser voltar para o 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
Desde que é agora chamado quote3.js, deixe-me alterar o arquivo JavaScript estou incluindo aqui.

857
00:51:50,910 --> 00:51:55,110
Agora eu tenho quote3.js, então eu vou carregar esse arquivo JavaScript separado,

858
00:51:55,110 --> 00:51:57,910
o que tem que Bootstrap autocomplete.

859
00:51:57,910 --> 00:52:04,430
Agora, quando eu voltar para o navegador, recarregue a página, e eu começar a digitar aa,

860
00:52:04,430 --> 00:52:06,880
há meu autocomplete. E foi realmente tão simples como isso.

861
00:52:06,880 --> 00:52:11,400
Eu tinha uma linha de código que apenas disse: "Aqui estão as coisas que eu quero autocomplete",

862
00:52:11,400 --> 00:52:16,590
e de repente eu tenho essa funcionalidade muito, muito agradável com não muito esforço em tudo.

863
00:52:16,590 --> 00:52:19,810
Como você está desenvolvendo sites e particularmente o lado frontal das coisas,

864
00:52:19,810 --> 00:52:21,840
você vai perceber que este é o caso muito.

865
00:52:21,840 --> 00:52:25,700
Há muito, muito muito, muito legal de bibliotecas livres lá fora

866
00:52:25,700 --> 00:52:30,190
que o tornam super fácil de fazer coisas como esta.

867
00:52:30,190 --> 00:52:37,230
Alguém pode pensar em quaisquer inconvenientes de simplesmente autocompleting nesta lista grande de símbolos?

868
00:52:37,230 --> 00:52:41,580
O que poderia ser algo que não é o melhor com esta abordagem?

869
00:52:42,790 --> 00:52:45,960
Sim. >> [Aluno] Tempo, se você tem um monte de [inaudível]

870
00:52:45,960 --> 00:52:50,420
Sim. Agora nós estamos copiando este arquivo JavaScript enorme e há um monte de símbolos.

871
00:52:50,420 --> 00:52:54,360
E assim, se temos uma tonelada de coisas, este tipo de poderia aumentar a latência de não só buscar

872
00:52:54,360 --> 00:52:56,600
mas também fazer o download do arquivo real.

873
00:52:56,600 --> 00:52:58,670
Grande. Mais alguma coisa?

874
00:53:01,950 --> 00:53:05,280
Neste momento não há nenhum sentido real de relevância.

875
00:53:05,280 --> 00:53:08,190
Se eu digitar um A, as empresas que aparecem aqui

876
00:53:08,190 --> 00:53:11,220
podem não ser as empresas mais populares que começam com A.

877
00:53:11,220 --> 00:53:17,130
>> Antes de eu começar a Apple, isso pode levar alguns personagens muito mais para o que eu estou procurando.

878
00:53:17,130 --> 00:53:20,420
Este autocomplete não tem esse senso de relevância.

879
00:53:20,420 --> 00:53:24,400
Ele só vai dizer: "Qualquer coisa que corresponda vou apresentar."

880
00:53:24,400 --> 00:53:30,510
Em vez disso, eu gostaria de alguma forma, integrar alguma relevância em minhas pesquisas.

881
00:53:30,510 --> 00:53:36,440
Se eu passar por aqui para Yahoo! Finanças, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Se eu tentar inserir um símbolo na página do Yahoo! Finanças

883
00:53:42,100 --> 00:53:52,310
e eu começar a digitar goog, eu tenho essa boa lista de coisas.

884
00:53:52,310 --> 00:53:57,100
Claramente, parece Yahoo! Finanças está a fazer algo mais inteligente aqui.

885
00:53:57,100 --> 00:53:59,790
Eles têm alguma relevância e eles também têm informações adicionais

886
00:53:59,790 --> 00:54:01,430
como o nome do estoque.

887
00:54:01,430 --> 00:54:05,850
Isso é algo que eu realmente não posso ficar com apenas uma lista meu estoque de símbolos.

888
00:54:05,850 --> 00:54:09,520
Eu quero isso e vou levá-la.

889
00:54:09,520 --> 00:54:11,790
Para isso vamos fazer algumas coisas.

890
00:54:11,790 --> 00:54:15,580
Vamos primeiro abrir o inspetor desta página

891
00:54:15,580 --> 00:54:18,100
porque vimos que esta página não está recarregando a todos,

892
00:54:18,100 --> 00:54:21,960
por isso é provavelmente usando AJAX de alguma forma estar carregando seus dados.

893
00:54:21,960 --> 00:54:23,920
Podemos descobrir quais os dados que está carregando.

894
00:54:23,920 --> 00:54:28,390
Se eu clicar nessa guia de rede, estes vão ser todos os pedidos que começam a ser demitido.

895
00:54:28,390 --> 00:54:34,020
Agora, se eu digitar goo, podemos ver que eu só tenho uma nova solicitação HTTP.

896
00:54:34,020 --> 00:54:37,490
Este é provavelmente o lugar onde os dados são provenientes.

897
00:54:37,490 --> 00:54:41,990
Com certeza, se eu olhar para esta URL, que é um pouco estranhamente nomeado,

898
00:54:41,990 --> 00:54:46,930
podemos ver que isso é exatamente onde o Yahoo é o envio fora de seus dados.

899
00:54:46,930 --> 00:54:53,400
>> Eu criei um arquivo separado chamado suggest.php que é muito semelhante em espírito para a função de pesquisa.

900
00:54:53,400 --> 00:54:57,730
É basicamente vai fazer uma consulta a URL do Yahoo, voltar alguns dados,

901
00:54:57,730 --> 00:54:59,750
e enviá-lo de volta para mim.

902
00:54:59,750 --> 00:55:02,570
Agora, em vez de usar essa lista grande, enorme de símbolos,

903
00:55:02,570 --> 00:55:05,280
Eu posso usar coisas boas do Yahoo relevância,

904
00:55:05,280 --> 00:55:08,150
e eu não tenho que baixar o arquivo JavaScript maciça.

905
00:55:08,150 --> 00:55:12,040
Eu só vou para puxar para baixo os símbolos de ações realmente relevantes.

906
00:55:12,040 --> 00:55:13,960
Vamos pular para dentro disso.

907
00:55:13,960 --> 00:55:17,360
Então, html, js. Estamos agora em quote4.

908
00:55:17,360 --> 00:55:22,120
Agora estamos não usa mais que grande lista de arquivos JavaScript.

909
00:55:22,120 --> 00:55:24,430
Mas há um pequeno tipo de problema de projeto aqui.

910
00:55:24,430 --> 00:55:28,200
Nós dissemos que a A em AJAX é assíncrona.

911
00:55:28,200 --> 00:55:31,000
O que isto significa é que quando eu faço um pedido de AJAX,

912
00:55:31,000 --> 00:55:36,490
tão certo aqui na linha 8, este é o lugar onde meu pedido AJAX é realmente demitido.

913
00:55:36,490 --> 00:55:40,370
Vamos dizer que agora eu tenho um código aqui que vai fazer alguma coisa

914
00:55:40,370 --> 00:55:43,930
gosto de alertar o usuário ou mudar alguma coisa na página.

915
00:55:43,930 --> 00:55:49,830
O que não vai acontecer é o navegador não vai esperar para este pedido para continuar

916
00:55:49,830 --> 00:55:53,480
antes de descer e bater esta linha.

917
00:55:53,480 --> 00:55:55,900
Essa é a parte assíncrona.

918
00:55:55,900 --> 00:55:58,400
Vai fazer esse pedido e dizer: "Sempre que você terminar,

919
00:55:58,400 --> 00:56:03,080
"Voltar e chamar essa função que eu lhe disse para chamar dentro de sucesso."

920
00:56:03,080 --> 00:56:07,300
Isso significa que não pode apenas baixar todas as ações de antemão.

921
00:56:07,300 --> 00:56:10,300
Nós precisamos fazer o pedido e esperar por algo para voltar.

922
00:56:10,300 --> 00:56:13,330
Isso significa que, antes, poderíamos simplesmente dizer Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Aqui está a lista de coisas que eu quero que você autocomplete".

924
00:56:15,580 --> 00:56:18,950
Nós não podemos mais fazer isso mais, porque não sabemos

925
00:56:18,950 --> 00:56:21,780
o que nós queremos, na verdade, autocomplete.

926
00:56:21,780 --> 00:56:25,190
Felizmente, Bootstrap pensado nisso, porque essas são caras inteligentes mais de lá,

927
00:56:25,190 --> 00:56:30,160
e eles realmente nos deu uma outra maneira de carregar este plugin typeahead.

928
00:56:30,160 --> 00:56:35,630
Antes, o valor da propriedade de origem era apenas uma matriz tão grande de coisas para autocomplete.

929
00:56:35,630 --> 00:56:39,580
>> Agora, a propriedade de origem é realmente uma função,

930
00:56:39,580 --> 00:56:44,580
eo objetivo desta função é descobrir o que as coisas para autocomplete sobre o são.

931
00:56:44,580 --> 00:56:48,730
A forma como ele vai descobrir isso é que vai pedir Yahoo! Finanças

932
00:56:48,730 --> 00:56:51,750
o que as melhores coisas para autocomplete são.

933
00:56:51,750 --> 00:56:54,500
Para fazer isso eu vou fazer um pedido muito semelhante AJAX.

934
00:56:54,500 --> 00:56:59,010
Vou solicitar esta página em suggest.php.

935
00:56:59,010 --> 00:57:01,360
Eu quero enviar ao longo dos símbolos ainda.

936
00:57:01,360 --> 00:57:05,570
E agora o meu sucesso, a documentação Bootstrap me disse

937
00:57:05,570 --> 00:57:09,130
que, a fim de preencher essa lista de coisas,

938
00:57:09,130 --> 00:57:14,370
tudo que eu preciso fazer é passar essa matriz agora para a função de retorno.

939
00:57:14,370 --> 00:57:15,660
Mas espere um minuto.

940
00:57:15,660 --> 00:57:20,240
Se este é suposto ser uma matriz e AJAX é me mandar de volta o texto,

941
00:57:20,240 --> 00:57:22,720
Como isso é possível?

942
00:57:22,720 --> 00:57:27,910
Isto introduz uma nova forma de troca de dados chamado JSON.

943
00:57:27,910 --> 00:57:33,000
Neste caso, não estamos apenas enviando de volta uma seqüência simples de texto.

944
00:57:33,000 --> 00:57:37,670
Agora estamos lidando com esta lista mais complexo de símbolos de ações.

945
00:57:37,670 --> 00:57:41,730
Estes símbolos de ações também pode incluir coisas como o nome da empresa ou os preços atuais.

946
00:57:41,730 --> 00:57:47,550
Usando apenas uma corda longa grande que não está formatado em qualquer forma previsível

947
00:57:47,550 --> 00:57:51,970
não vai ser a melhor maneira de obter esses dados a partir do servidor do Yahoo para mim

948
00:57:51,970 --> 00:57:54,540
de forma que eu possa compreender facilmente.

949
00:57:54,540 --> 00:58:01,280
JSON é uma tecnologia que tira proveito de como criar matrizes associativas em JavaScript.

950
00:58:01,280 --> 00:58:04,510
Isso se parece muito com uma matriz JavaScript associativa,

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 um formato acordado para a transferência de dados e para trás.

954
00:58:15,020 --> 00:58:18,280
Aqui este objeto JSON ou essa matriz JSON associativa

955
00:58:18,280 --> 00:58:21,010
está a enviar-me alguns dados sobre o curso.

956
00:58:21,010 --> 00:58:25,110
>> As chaves desse array são coisas como curso que tem um valor de CS50,

957
00:58:25,110 --> 00:58:29,140
e aqui podemos ver que eu possa ter um valor que é uma matriz.

958
00:58:29,140 --> 00:58:32,730
Eu não tenho de fazer coisas como analisar fora cordas e procurar por vírgulas

959
00:58:32,730 --> 00:58:35,330
e fazer coisas malucas assim.

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 já tem funções para converter uma string

962
00:58:43,510 --> 00:58:48,140
que se parece com este JSON em uma matriz JavaScript real associativa

963
00:58:48,140 --> 00:58:50,440
que podemos trabalhar.

964
00:58:50,440 --> 00:58:56,660
Fazer isso é tão simples quanto dizer que já não é este arquivo suggest.php,

965
00:58:56,660 --> 00:58:59,040
me mandando de volta simplesmente uma seqüência de texto,

966
00:58:59,040 --> 00:59:01,950
mas eu sei que ele vai me mandar de volta JSON.

967
00:59:01,950 --> 00:59:06,760
Isto significa que aquele JSON pode ser convertida em uma matriz associativa JavaScript.

968
00:59:06,760 --> 00:59:10,830
E assim jQuery, gostaria que você faça isso por mim.

969
00:59:10,830 --> 00:59:13,990
Isto significa que este parâmetro resposta aqui,

970
00:59:13,990 --> 00:59:16,070
isso já não é apenas uma seqüência.

971
00:59:16,070 --> 00:59:19,860
Porque nós temos dito jQuery que aqui vem alguns JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery vai ser inteligente o suficiente para dizer: "Você queria JSON?"

973
00:59:22,950 --> 00:59:26,890
"Eu estou indo para converter isso em um array associativo para você."

974
00:59:26,890 --> 00:59:32,100
Vamos realmente dar uma olhada no guia Rede, uma vez que temos quote4.js.

975
00:59:32,100 --> 00:59:35,400
Vamos mudar isso e recarregue a página.

976
00:59:37,150 --> 00:59:41,250
Agora vou digitar um-a novamente.

977
00:59:41,250 --> 00:59:45,600
Eu fiz um pedido casal para suggest.php, mas agora essa resposta,

978
00:59:45,600 --> 00:59:48,670
ao invés de apenas a corda, que é JSON.

979
00:59:48,670 --> 00:59:52,580
Então, eu tenho uma chave de abertura encaracolados, dizendo: "Aqui vem um array associativo."

980
00:59:52,580 --> 00:59:56,830
>> A primeira chave e só desse matriz associativo é chamado de símbolos,

981
00:59:56,830 --> 01:00:00,240
e então aqui é uma matriz de todos os símbolos relevantes

982
01:00:00,240 --> 01:00:04,820
chegando agora do Yahoo! Finanças não, a partir dessa lista gigantesca.

983
01:00:06,110 --> 01:00:10,630
É assim que eu pode simplesmente preencher este plugin autocomplete

984
01:00:10,630 --> 01:00:14,280
com alguns dados que não está vindo de um arquivo local que já está predeterminado

985
01:00:14,280 --> 01:00:17,490
mas de outra coisa.

986
01:00:17,490 --> 01:00:21,160
Acontece que nós podemos realmente tirar proveito de uma tecnologia chamada JSONP,

987
01:00:21,160 --> 01:00:27,420
ou JSON com padding, que vai eliminar esse intermediário suggest.php.

988
01:00:27,420 --> 01:00:34,010
Mas, em vez de fazer isso, vamos em vez dar uma olhada em como eu posso melhorar isso ainda mais.

989
01:00:34,010 --> 01:00:36,040
Eu realmente gosto de typeahead Bootstrap. É muito bom.

990
01:00:36,040 --> 01:00:39,570
Mas estamos ficando boa JavaScript e queremos tipo de fazer isso nós mesmos,

991
01:00:39,570 --> 01:00:43,870
talvez dê uma olhada no que este plugin poderia estar fazendo.

992
01:00:43,870 --> 01:00:46,500
Vamos deixar de usar essa coisa typeahead,

993
01:00:46,500 --> 01:00:50,550
e vamos tentar fazer essa lista de ações sugeridas nós mesmos.

994
01:00:50,550 --> 01:00:53,790
Aqui em quote6.php vamos começar da mesma maneira.

995
01:00:53,790 --> 01:00:58,050
Tipos de cada vez alguma coisa a alguém, nós queremos fazer um pedido de AJAX.

996
01:00:58,050 --> 01:01:01,590
Este é semelhante ao nosso instantânea Finanças originais CS50.

997
01:01:01,590 --> 01:01:05,020
Ao invés de fazer um pedido para quote.php,

998
01:01:05,020 --> 01:01:08,530
agora estamos fazendo um pedido para que o mesmo arquivo como antes, este suggest.php,

999
01:01:08,530 --> 01:01:12,460
que está indo só para extrair dados de Finanças Yahoo!.

1000
01:01:12,460 --> 01:01:19,480
>> Mais uma vez, nós ainda estamos esperando JSON, mas agora desde o typeahead não está fazendo isso para nós,

1001
01:01:19,480 --> 01:01:24,850
precisamos também enviará o valor que está dentro da caixa de texto atual.

1002
01:01:24,850 --> 01:01:28,120
Agora sabemos o que pedir Yahoo! Finanças para,

1003
01:01:28,120 --> 01:01:34,160
e agora aqui está a função que queremos executar uma vez que a solicitação for concluída.

1004
01:01:34,160 --> 01:01:36,520
Não temos o plugin para fazer a lista para nós,

1005
01:01:36,520 --> 01:01:40,630
então aqui é onde nós estamos indo realmente para construir uma lista de sugestões.

1006
01:01:40,630 --> 01:01:44,850
Para fazer isso, bem como em PHP que concatenadas essas seqüências grandes de HTML

1007
01:01:44,850 --> 01:01:48,170
então impresso deles, podemos fazer a mesma coisa que em JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Primeiro vamos começar esta string chamada sugestões,

1009
01:01:51,850 --> 01:01:54,590
e essa seqüência é apenas vai conter algum código HTML.

1010
01:01:54,590 --> 01:01:58,320
Nós queremos que seja uma lista de coisas, então vamos começar com essa tag lista,

1011
01:01:58,320 --> 01:02:03,340
e agora estamos indo para iterar sobre todos os símbolos que foram devolvidos de volta para nós.

1012
01:02:03,340 --> 01:02:06,500
Lembre-se, porque já disse dataType: 'json', isso não é uma string.

1013
01:02:06,500 --> 01:02:09,500
Isso já é uma matriz para nós. Isso é muito legal.

1014
01:02:09,500 --> 01:02:13,790
Podemos simplesmente dizer: "Eu quero que você acrescentar um elemento da lista."

1015
01:02:13,790 --> 01:02:16,000
Vamos colocá-lo dentro de um elemento de um lado em que,

1016
01:02:16,000 --> 01:02:19,030
nós vamos dar-lhe uma classe de sugestões de modo que sabemos o que é,

1017
01:02:19,030 --> 01:02:23,880
e agora aqui é o símbolo que nós voltamos do Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Uma vez que criamos um elemento para cada um dos símbolos que chegamos de volta,

1019
01:02:27,230 --> 01:02:30,100
só queremos fechar a lista.

1020
01:02:30,100 --> 01:02:33,040
Então agora sugestões representa este pequeno fragmento HTML

1021
01:02:33,040 --> 01:02:37,860
que quando colocados em uma página que vai ser a lista de coisas que estamos procurando.

1022
01:02:37,860 --> 01:02:41,070
Agora vamos realmente colocar isso na página.

1023
01:02:41,070 --> 01:02:46,390
Para fazer isso eu realmente criou outra div vazia e eu dei-lhe um ID de sugestões.

1024
01:02:46,390 --> 01:02:52,520
Bem como vamos definir o conteúdo da div que mostrar o preço dos dados de estoque,

1025
01:02:52,520 --> 01:02:58,600
agora só quero definir o conteúdo desta div para o que essa seqüência é

1026
01:02:58,600 --> 01:03:00,290
que contém esses símbolos.

1027
01:03:00,290 --> 01:03:07,650
Ao utilizar este método de HTML, esta variável sugestões, esta string, é uma seqüência de HTML.

1028
01:03:07,650 --> 01:03:13,490
Eu quero que você tome que o HTML e colocá-lo dentro da div chamado sugestões.

1029
01:03:13,490 --> 01:03:15,680
Acabamos de algo anexado ao DOM agora.

1030
01:03:15,680 --> 01:03:20,360
Nós adicionamos alguns elementos novos para o DOM que agora podemos exibir na página.

1031
01:03:20,360 --> 01:03:22,540
Vamos ver o que isso parece.

1032
01:03:22,540 --> 01:03:29,110
Se carregar em quote6 e agora voltamos,

1033
01:03:29,110 --> 01:03:34,480
agora quando eu começar a digitar AAPL, não temos mais que Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
mas agora temos esta lista que fizemos a nós mesmos.

1035
01:03:38,470 --> 01:03:43,230
Isto é um pouco mais feio do que o typeahead Bootstrap, por exemplo,

1036
01:03:43,230 --> 01:03:45,580
mas isso não nos permitem fazer uma outra coisa.

1037
01:03:45,580 --> 01:03:48,660
Quando estávamos a olhar para esse plugin Bootstrap,

1038
01:03:48,660 --> 01:03:52,590
vimos que, quando autocompleted, um dos valores autocomplete foi AAPL.

1039
01:03:52,590 --> 01:03:54,820
Isso pode não ser tão útil.

1040
01:03:54,820 --> 01:03:59,100
Como usuário, eu poderia não reconhecer imediatamente todos os símbolos de ações.

1041
01:03:59,100 --> 01:04:02,370
O que eu sou provavelmente mais propensos a reconhecer são nomes reais da empresa.

1042
01:04:02,370 --> 01:04:05,310
Portanto, não seria realmente útil se ao invés de dizer AAPL

1043
01:04:05,310 --> 01:04:07,970
isto dito algo como a Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Porque nós temos rolou isso nós mesmos, nós podemos realmente fazer isso facilmente.

1045
01:04:12,240 --> 01:04:17,630
Vamos abrir nosso arquivo última citação aqui, então quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Mesma coisa. Acabei de criar outro arquivo PHP que irá retornar para nós mais do que apenas os símbolos.

1047
01:04:23,200 --> 01:04:25,550
Ele também irá dar-nos de volta nomes da empresa.

1048
01:04:25,550 --> 01:04:28,150
E por isso estamos fazendo a mesma coisa. Estamos a fazer um pedido de AJAX.

1049
01:04:28,150 --> 01:04:32,370
Uma vez que o pedido foi concluído, vamos executar esta função aqui,

1050
01:04:32,370 --> 01:04:36,520
e esta função vai construir-se uma seqüência grande de elementos.

1051
01:04:36,520 --> 01:04:39,520
Mas a diferença aqui é que o valor destas listas já não é apenas o símbolo,

1052
01:04:39,520 --> 01:04:45,370
é agora o nome.

1053
01:04:45,370 --> 01:04:47,070
Portanto, temos um pequeno problema.

1054
01:04:47,070 --> 01:04:51,590
Quando usamos a nossa pesquisa, precisamos de alguma forma passar o símbolo.

1055
01:04:51,590 --> 01:04:54,950
Não podemos passar algo de pesquisa como a Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Precisamos passar MSFT.

1057
01:04:57,900 --> 01:05:01,640
Quando estamos escrevendo HTML, temos muito de Nice embutidos atributos.

1058
01:05:01,640 --> 01:05:05,440
Um A pode ter associada a ela um href ou uma classe.

1059
01:05:05,440 --> 01:05:08,230
Mas o que realmente precisamos agora é que cada um desses links

1060
01:05:08,230 --> 01:05:11,120
ter um símbolo de ação a ela associados.

1061
01:05:11,120 --> 01:05:14,240
Não há embutido atributo HTML para símbolo de ação,

1062
01:05:14,240 --> 01:05:21,010
mas, felizmente, HTML5 nos permite criar nossos próprios atributos para ser o que quisermos.

1063
01:05:21,010 --> 01:05:24,620
Ao dizer-símbolo de dados, eu introduzi um novo atributo

1064
01:05:24,620 --> 01:05:29,350
cujo nome eu acabei de inventar, e isso é bom porque eu prefaciado com esses dados.

1065
01:05:29,350 --> 01:05:34,270
Estamos indo para armazenar dentro de lá o símbolo do estoque agora.

1066
01:05:34,270 --> 01:05:39,590
O que isso significa é que mesmo que nós estamos mostrando o valor do nome da empresa

1067
01:05:39,590 --> 01:05:43,380
dentro do nosso autocomplete, ainda estamos lembrando o símbolo

1068
01:05:43,380 --> 01:05:47,110
que está associada a cada uma das empresas.

1069
01:05:47,110 --> 01:05:50,350
A maneira que estamos fazendo que está dentro deste elemento em si.

1070
01:05:50,350 --> 01:05:52,930
Então isso significa que temos de fazer mais uma mudança.

1071
01:05:52,930 --> 01:05:57,090
Quando clicamos agora, precisamos realmente tirar proveito do atributo símbolo

1072
01:05:57,090 --> 01:06:00,220
em vez de apenas o seu valor.

1073
01:06:00,220 --> 01:06:05,010
Se voltar, damos um manipulador de eventos para sugestões.

1074
01:06:05,010 --> 01:06:09,280
Sempre que uma destas sugestões é clicado agora, eu quero fazer alguma coisa.

1075
01:06:09,280 --> 01:06:13,160
O que eu quero fazer é mudar o valor dessa caixa de entrada.

1076
01:06:13,160 --> 01:06:16,100
Agora eu quero definir esta função val mesmo.

1077
01:06:16,100 --> 01:06:21,060
>> Então, sem nenhum argumento essa função val retorna para você que já está na caixa de texto,

1078
01:06:21,060 --> 01:06:27,070
mas se você dar-lhe uma corda, ele vai levar essa string e colocá-lo na caixa de texto.

1079
01:06:27,070 --> 01:06:28,980
Estou selecionando sua caixa de texto da mesma forma.

1080
01:06:28,980 --> 01:06:31,230
Seu nome é dentro símbolo de formulário de cotação.

1081
01:06:31,230 --> 01:06:37,540
Agora estou enviando o valor do atributo de dados-símbolo.

1082
01:06:37,540 --> 01:06:41,560
Isso aqui é novo, esta $ (this).

1083
01:06:41,560 --> 01:06:46,850
O que isto se refere é o elemento que foi clicado.

1084
01:06:46,850 --> 01:06:50,880
Podemos ver aqui que não estamos anexando um evento de clique

1085
01:06:50,880 --> 01:06:54,690
para cada elemento com uma classe de sugestão individualmente.

1086
01:06:54,690 --> 01:06:57,140
Em vez disso, estamos nos aproximando isso um pouco diferente.

1087
01:06:57,140 --> 01:07:01,700
Em vez disso estamos dizendo sempre dentro de qualquer coisa deste div sugestões,

1088
01:07:01,700 --> 01:07:04,080
lembre-se que é apenas o recipiente para essa lista,

1089
01:07:04,080 --> 01:07:10,150
se algo dentro desta div é clicado e tem uma classe de sugestão,

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 fazer é que podemos reutilizar esse mesmo manipulador de eventos

1092
01:07:17,490 --> 01:07:20,000
para todas as coisas na lista.

1093
01:07:20,000 --> 01:07:22,080
Então, nós não temos que ter um manipulador de eventos para o primeiro elemento

1094
01:07:22,080 --> 01:07:24,550
e um manipulador de evento diferente para o segundo elemento.

1095
01:07:24,550 --> 01:07:29,880
Podemos dizer que, em vez, "Eu quero o mesmo manipulador de eventos para aplicar a tudo na minha lista."

1096
01:07:29,880 --> 01:07:34,420
Mas precisamos de alguma forma, saber qual elemento foi clicado.

1097
01:07:34,420 --> 01:07:38,450
Este "presente" palavra-chave representa exatamente isso.

1098
01:07:38,450 --> 01:07:42,360
Este é o objeto que foi clicado pelo usuário.

1099
01:07:42,360 --> 01:07:47,680
Se eu simplesmente cliquei no link 3, este representa o elemento do nexo 3,

1100
01:07:47,680 --> 01:07:51,670
o que significa que eu possa obter o seu atributo, data-símbolo,

1101
01:07:51,670 --> 01:07:57,760
que sabemos que tem de conter o símbolo que está associado com a empresa Eu só clicado.

1102
01:07:57,760 --> 01:08:04,550
Se voltar a nossa página de finanças,

1103
01:08:04,550 --> 01:08:08,580
podemos ver agora que uma vez que eu começar a digitar algo como MSFT,

1104
01:08:08,580 --> 01:08:11,220
que não está mais recebendo apenas os símbolos de ações,

1105
01:08:11,220 --> 01:08:13,720
agora estamos recebendo as empresas reais.

1106
01:08:13,720 --> 01:08:20,410
Mas quando eu clicar em uma dessas empresas,

1107
01:08:20,410 --> 01:08:25,180
podemos ver que estamos, na verdade, não preenchendo a caixa de texto com o nome da empresa

1108
01:08:25,180 --> 01:08:29,850
mas com o que estava armazenado dentro dos atributos de dados.

1109
01:08:29,850 --> 01:08:32,880
E assim se eu realmente inspecionar um desses elementos pelo botão direito dele

1110
01:08:32,880 --> 01:08:36,200
e clicar em Inspecionar Elemento, podemos realmente ver o que isso parece.

1111
01:08:36,200 --> 01:08:40,290
>> Lembre-se isso é algo que nós criamos dentro desse loop

1112
01:08:40,290 --> 01:08:42,649
quando estávamos construindo essa seqüência de HTML.

1113
01:08:42,649 --> 01:08:47,870
Podemos ver aqui que estes dados-símbolo tem o valor de MSFT, o que é ótimo.

1114
01:08:47,870 --> 01:08:49,189
Isso é o que nós estávamos esperando.

1115
01:08:49,189 --> 01:08:53,170
Esse é o símbolo e é assim que temos o valor que é necessário utilizar

1116
01:08:53,170 --> 01:08:56,140
dentro da caixa de texto.

1117
01:08:56,140 --> 01:08:58,850
Isso é o suficiente para o formulário de cotação, porque isso é meio chato.

1118
01:08:58,850 --> 01:09:02,990
Vamos apenas fazer algumas melhorias rápidas a nossa página de portfólio.

1119
01:09:02,990 --> 01:09:08,109
Se você já usou CS50 Finanças por um tempo e você começar a compra e venda de um lote de ações,

1120
01:09:08,109 --> 01:09:11,300
eventualmente esta tabela vai ficar muito grande,

1121
01:09:11,300 --> 01:09:13,850
e você vai querer um relógio de ação, é claro.

1122
01:09:13,850 --> 01:09:20,350
Uma vez que a tabela é muito, muito grande, que poderia ser útil para o usuário tentar pesquisar sobre ele.

1123
01:09:20,350 --> 01:09:23,290
Dentro da caixa de pesquisa, se eu começar a digitar algo como a Disney

1124
01:09:23,290 --> 01:09:26,359
e olhando para o meu estoque de Mickey Mouse, podemos ver que a tabela agora está filtrando

1125
01:09:26,359 --> 01:09:28,189
com base no que eu digitei dentro

1126
01:09:28,189 --> 01:09:31,640
Esta funcionalidade parece super complicado, mas é muito, muito fácil

1127
01:09:31,640 --> 01:09:33,859
com jQuery e JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Este arquivo portfolio.php inclui um arquivo JavaScript chamado portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Vamos dar uma olhada nisso.

1130
01:09:41,130 --> 01:09:44,890
Então, html, js, carteira.

1131
01:09:44,890 --> 01:09:49,210
Aqui é onde nós estamos fazendo que a pesquisa sobre a mesa.

1132
01:09:49,210 --> 01:09:52,750
A primeira coisa que precisa fazer é anexar um manipulador de eventos para que a caixa de texto

1133
01:09:52,750 --> 01:09:55,760
porque sabemos que queremos que a nossa função de filtragem de fogo

1134
01:09:55,760 --> 01:09:59,800
cada vez que o usuário pressiona alguma coisa, porque não temos tempo para os botões de pesquisa.

1135
01:09:59,800 --> 01:10:03,000
A primeira coisa que precisamos fazer é descobrir o que o usuário está procurando,

1136
01:10:03,000 --> 01:10:04,780
assim como fizemos antes.

1137
01:10:04,780 --> 01:10:11,320
Esta palavra-chave se refere ao elemento atual do usuário está interagindo com.

1138
01:10:11,320 --> 01:10:14,070
>> Como o usuário está interagindo com a caixa de pesquisa,

1139
01:10:14,070 --> 01:10:17,020
$ This representa a caixa de pesquisa,

1140
01:10:17,020 --> 01:10:21,820
assim this.val nos dá o que tem dentro da caixa de busca o usuário está digitando.

1141
01:10:22,810 --> 01:10:27,320
Então, agora o que nós queremos fazer é que queremos iterar sobre todas as linhas

1142
01:10:27,320 --> 01:10:29,240
dentro de nossa mesa.

1143
01:10:29,240 --> 01:10:35,630
Para selecionar todas as linhas em nossa mesa, eu dei aquela mesa uma identificação da carteira de mesa,

1144
01:10:35,630 --> 01:10:39,060
e cada linha é representada por um elemento TR,

1145
01:10:39,060 --> 01:10:42,080
de modo que este selector vai voltar para mim uma grande matriz

1146
01:10:42,080 --> 01:10:44,370
de todas as linhas em minha mesa.

1147
01:10:44,370 --> 01:10:47,010
Agora eu quero iterar sobre essa matriz.

1148
01:10:47,010 --> 01:10:52,390
Eu poderia lhe um loop, mas jQuery realmente nos fornece a função agradável chamado "cada um."

1149
01:10:52,390 --> 01:10:55,220
O que cada um faz é cada um tem um argumento,

1150
01:10:55,220 --> 01:10:57,090
e esse argumento é uma função.

1151
01:10:57,090 --> 01:11:02,760
O que ele vai fazer é que vai aplicar essa função a cada elemento dentro da lista.

1152
01:11:02,760 --> 01:11:05,550
Esta função tem um argumento que é e,

1153
01:11:05,550 --> 01:11:10,090
e quando esta função é executado, este e vai ser substituído com a primeira linha,

1154
01:11:10,090 --> 01:11:12,070
em seguida, a segunda linha e, em seguida, a terceira linha.

1155
01:11:12,070 --> 01:11:15,150
Por este caminho, esta é a mesma coisa que executar um loop

1156
01:11:15,150 --> 01:11:21,360
e depois descobrir o elemento atual com base no índice de dentro do seu loop.

1157
01:11:21,360 --> 01:11:24,750
Em cada iteração, para cada um desses elementos na tabela,

1158
01:11:24,750 --> 01:11:30,560
Quero verificar se o texto do elemento - o texto do celular dentro da linha -

1159
01:11:30,560 --> 01:11:33,130
coincide com o que eu estou procurando.

1160
01:11:33,130 --> 01:11:36,390
Esta cadeia longa grande de comandos é como eu poderia fazer isso.

1161
01:11:36,390 --> 01:11:40,900
Primeiro, mais uma vez, este refere-se agora - porque é dentro de uma nova função -

1162
01:11:40,900 --> 01:11:45,020
esta é agora a linha atual na tabela.

1163
01:11:45,020 --> 01:11:47,340
Eu quero ter a linha atual na tabela,

1164
01:11:47,340 --> 01:11:49,950
e eu quero pegar todos os seus filhos.

1165
01:11:49,950 --> 01:11:51,940
Lembre-se, o DOM é uma árvore hierárquica,

1166
01:11:51,940 --> 01:11:54,200
o que significa que os elementos têm um número de crianças.

1167
01:11:54,200 --> 01:12:00,180
>> Este. Função crianças vai voltar para mim de volta um conjunto de todos os elementos

1168
01:12:00,180 --> 01:12:03,240
que são as crianças de, neste caso, uma linha na tabela.

1169
01:12:03,240 --> 01:12:07,150
Este é simplesmente as células dentro da linha.

1170
01:12:07,150 --> 01:12:09,230
Eu só quero que a pesquisa sobre a primeira célula.

1171
01:12:09,230 --> 01:12:13,090
Esta função. Primeiro diz me dar o primeiro elemento do array.

1172
01:12:13,090 --> 01:12:17,070
Então, a função texto diz me exatamente o que está dentro da célula

1173
01:12:17,070 --> 01:12:19,530
desde que eu quero pesquisar sobre esse texto.

1174
01:12:19,530 --> 01:12:21,040
Finalmente, vamos converter para minúsculas,

1175
01:12:21,040 --> 01:12:23,940
para que possamos fazer consultas de texto caso insensível.

1176
01:12:23,940 --> 01:12:29,990
Por fim, quero ver se essa seqüência dentro de uma tabela contém a string que está procurando.

1177
01:12:29,990 --> 01:12:32,980
A função indexOf em JavaScript faz exatamente isso.

1178
01:12:32,980 --> 01:12:37,060
Diz-nos se esta string contém outra string.

1179
01:12:37,060 --> 01:12:40,150
Se é verdade que a célula contém o que eu estou procurando,

1180
01:12:40,150 --> 01:12:42,140
então eu quero ter certeza de que é mostrado.

1181
01:12:42,140 --> 01:12:45,330
O método show vai dizer: "Mostre o elemento."

1182
01:12:45,330 --> 01:12:50,350
Se este não é o caso, então isso significa que eu estou procurando não está contido

1183
01:12:50,350 --> 01:12:53,550
dentro dessa linha, e assim que eu quero é esconder do usuário.

1184
01:12:53,550 --> 01:12:59,240
Que atinge esse belo efeito de filtragem onde já não vemos a tabela inteira.

1185
01:12:59,240 --> 01:13:01,480
Se você estiver interessado em como fazer este ticker, bem como,

1186
01:13:01,480 --> 01:13:04,180
vamos postar a fonte on-line. Mas é realmente simples.

1187
01:13:04,180 --> 01:13:09,860
JQuery tem métodos incríveis para estas animações e propriedades de manipulação de CSS.

1188
01:13:09,860 --> 01:13:11,020
Então, isso é tudo para mim.

1189
01:13:11,020 --> 01:13:15,560
>> O que então está à frente? Como você verá em poucos dias, a proposta final de projetos é devido.

1190
01:13:15,560 --> 01:13:17,730
A proposta final de projetos irá pedir-lhe algumas perguntas,

1191
01:13:17,730 --> 01:13:19,420
mas entre eles será de três etapas -

1192
01:13:19,420 --> 01:13:22,840
um marco "bom", um melhor marco e uma melhor um.

1193
01:13:22,840 --> 01:13:25,870
A idéia é realmente para ajudar vocês suas expectativas

1194
01:13:25,870 --> 01:13:29,160
para que minimamente você vai ser feliz com a saída de seu projeto final

1195
01:13:29,160 --> 01:13:32,060
e vai ser "bom" tão longe quanto você está preocupado.

1196
01:13:32,060 --> 01:13:34,540
Mas, então, no interesse de obter-lhe chegar um pouco para algo melhor

1197
01:13:34,540 --> 01:13:37,680
ou melhor alguma coisa, nós também vamos classificar de empurrá-lo em direção a esse também.

1198
01:13:37,680 --> 01:13:40,660
O CS50 Hack-a-thon, entretanto, está em algumas semanas.

1199
01:13:40,660 --> 01:13:44,340
Normalmente, fazemos isso em uma base base de loteria por causa do interesse,

1200
01:13:44,340 --> 01:13:47,680
mas as probabilidades são que vamos tomar algumas centenas de nós no ônibus de Harvard Square

1201
01:13:47,680 --> 01:13:51,540
até Kendall Square, onde a Microsoft tem uma bela instalação apropriadamente chamado de "nerd" -

1202
01:13:51,540 --> 01:13:53,830
o New England Research e Development Center.

1203
01:13:53,830 --> 01:13:56,380
Nós vamos chegar lá em torno de oito horas Nós vamos ter um pouco de comida.

1204
01:13:56,380 --> 01:13:58,160
Cerca de 01:00 teremos comida um pouco mais.

1205
01:13:58,160 --> 01:14:02,150
Cerca de cinco horas, se você ainda estiver acordado nós vamos de cabeça para ihop ou levá-lo de volta ao campus.

1206
01:14:02,150 --> 01:14:04,380
O objetivo não é mergulhar em projetos finais

1207
01:14:04,380 --> 01:14:06,190
ao lado de colegas e funcionários.

1208
01:14:06,190 --> 01:14:08,280
Então alguns dias depois é a Feira CS50,

1209
01:14:08,280 --> 01:14:10,990
que é realmente pretende ser uma oportunidade para vocês para mostrar o seu trabalho

1210
01:14:10,990 --> 01:14:12,700
e realizações para o semestre

1211
01:14:12,700 --> 01:14:15,610
enquanto esfregando os ombros uns com os outros e obter uma sensação de que todo mundo fez.

1212
01:14:15,610 --> 01:14:17,850
Com o que disse, muito obrigado a Tommy ea José,

1213
01:14:17,850 --> 01:14:19,960
e vamos ver você na segunda-feira.

1214
01:14:19,960 --> 01:14:24,070
 [Aplausos]