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

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

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

4
00:00:07,940 --> 00:00:13,340
>> Això és CS50. Aquest és el final de la setmana 9. Moltes gràcies.

5
00:00:13,340 --> 00:00:15,310
Finalment. Setmana 9. Ja ho tinc.

6
00:00:15,310 --> 00:00:18,590
Avui continuem la nostra conversa sobre programació web

7
00:00:18,590 --> 00:00:21,660
amb la mirada posada en el projecte final no, perquè vostè ha de fer alguna cosa basat en la web

8
00:00:21,660 --> 00:00:25,610
per als projectes finals, sinó perquè ja sigui per projectes finals o després CS50

9
00:00:25,610 --> 00:00:29,000
aquest és sens dubte la direcció en què va el programari modern.

10
00:00:29,000 --> 00:00:31,770
I, no obstant això, no és en realitat una cosa fàcil.

11
00:00:31,770 --> 00:00:35,040
De fet, una de les coses més difícils de fer és l'aspecte del disseny.

12
00:00:35,040 --> 00:00:38,600
>> Per exemple, per disseny ens referim a rebre efectivament la interfície d'usuari

13
00:00:38,600 --> 00:00:40,420
o l'experiència d'usuari correcta.

14
00:00:40,420 --> 00:00:43,200
M'atreviria a dir - i sabem d'un conjunt de problemes recents

15
00:00:43,200 --> 00:00:45,960
quan alguns de vosaltres a l'aire les seves queixes sobre alguna peça de programari

16
00:00:45,960 --> 00:00:49,000
o maquinari que s'enfurisma, ja sigui al campus o fora -

17
00:00:49,000 --> 00:00:51,930
hi ha un munt de llocs per aquí, hi ha una gran quantitat de maquinari per aquí,

18
00:00:51,930 --> 00:00:53,900
aquest tipus de merda.

19
00:00:53,900 --> 00:00:58,730
Però la realitat és que fer coses que són fàcils d'usar i no obstant això són de gran abast

20
00:00:58,730 --> 00:01:00,550
És un repte molt difícil.

21
00:01:00,550 --> 00:01:03,680
Així que per ara em va preguntar Josep i Tommy a unir-se a mi aquí

22
00:01:03,680 --> 00:01:06,680
perquè puguem tenir una conversa, tant sobre el disseny

23
00:01:06,680 --> 00:01:09,090
i quins tipus de processos de pensament ha de començar a passar pel cap

24
00:01:09,090 --> 00:01:12,040
l'hora de dissenyar els seus projectes finals, els seus projectes futurs.

25
00:01:12,040 --> 00:01:15,040
I després, amb l'ajuda de Tommy veurem alguns dels detalls d'implementació.

26
00:01:15,040 --> 00:01:18,440
Com pots tenir una mica de visió en paper o en la seva ment

27
00:01:18,440 --> 00:01:20,760
que podrà executar mitjançant programació

28
00:01:20,760 --> 00:01:24,030
mitjançant l'ús d'algunes de les tecnologies i les tècniques que hem començat parlant,

29
00:01:24,030 --> 00:01:29,080
és a dir, JavaScript i una cosa encara més recent, és a dir, AJAX, JavaScript asíncron.

30
00:01:29,080 --> 00:01:32,950
Això li permet crear tota la dinàmica més d'una interfície d'usuari

31
00:01:32,950 --> 00:01:35,780
per anar a buscar més i més dades progressivament des d'un servidor.

32
00:01:35,780 --> 00:01:38,560
Així que anem a veure alguns d'aquests fragments tan bé avui.

33
00:01:38,560 --> 00:01:41,800
Com acotació al marge, si vostè està interessat en la concentració en ciències de la computació

34
00:01:41,800 --> 00:01:45,010
o minoring en informàtica, sé que aquest divendres al migdia

35
00:01:45,010 --> 00:01:48,750
en Maxwell Dworkin 221 hi haurà un esdeveniment de pizza

36
00:01:48,750 --> 00:01:50,780
on es pot aprendre una mica més sobre la informàtica.

37
00:01:50,780 --> 00:01:54,860
En el seu camí a la porta avui seràs capaç de recollir una guia no oficial per CS a Harvard.

38
00:01:54,860 --> 00:01:57,290
El posarem en els pots d'escombraries fora a l'altura de la cintura

39
00:01:57,290 --> 00:01:59,750
de manera que si vols agafar això i aprendre una mica més sobre CS,

40
00:01:59,750 --> 00:02:02,480
que estarà allà per a tu com ho va ser en la setmana 0.

41
00:02:02,480 --> 00:02:06,500
També, si vol unir-se a nosaltres per dinar CS50 aquest divendres a les 1:15 pm,

42
00:02:06,500 --> 00:02:09,800
dirigir-se a cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Sense més preàmbuls, els presento l'ensenyament company Joseph ONG.

44
00:02:13,260 --> 00:02:19,190
Hi. [Aplaudiment]

45
00:02:19,190 --> 00:02:20,770
Gràcies.

46
00:02:20,770 --> 00:02:24,780
La primera vegada que vaig saber de disseny estava en una classe anomenada aquí CS179.

47
00:02:24,780 --> 00:02:28,040
>> El professor de l'època ens va explicar la història d'un altre professor

48
00:02:28,040 --> 00:02:31,640
que havia anat a un hotel i utilitzem les aixetes.

49
00:02:31,640 --> 00:02:35,630
Pot algú dir-me per què els 2 botons de l'esquerra i fer el correcte?

50
00:02:35,630 --> 00:02:39,080
[Estudiant] Calenta i fred. >> Calenta i fred. Bé.

51
00:02:39,080 --> 00:02:41,430
El que normalment esperar, no?

52
00:02:41,430 --> 00:02:46,960
Aquest professor després d'usar l'aixeta vol prendre una dutxa, i procedeix a fer-ho envolta.

53
00:02:46,960 --> 00:02:51,310
Ell pensa que l'esquerre i la part dreta són en calent i en fred, oi?

54
00:02:51,310 --> 00:02:55,470
Però, ¿pot algú dir-me què és això realment?

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

56
00:02:58,060 --> 00:03:01,740
[Resposta dels estudiants inaudible] >> Un suggeriment és?

57
00:03:01,740 --> 00:03:05,860
[Resposta dels estudiants inaudible] Temperatura? >>

58
00:03:05,860 --> 00:03:10,460
Així que un d'ells controla la temperatura i els altres controls? >> [Estudiant] La pressió de l'aigua.

59
00:03:10,460 --> 00:03:12,350
La pressió de l'aigua. Bé.

60
00:03:12,350 --> 00:03:15,100
Aquest professor entra en això i, pensant que estan controlant calenta i freda,

61
00:03:15,100 --> 00:03:21,470
és el més adequat, el que ell pensa és en calent, tot el camí fins

62
00:03:21,470 --> 00:03:23,560
perquè vol prendre una dutxa calenta.

63
00:03:23,560 --> 00:03:28,100
Bé, aquests en realitat no coincideixen, de manera que obté aquesta experiència no és molt divertit

64
00:03:28,100 --> 00:03:31,110
d'estar en una dutxa d'aigua freda, i tots sabem el que se sent.

65
00:03:31,110 --> 00:03:33,620
Aquest és un exemple d'una fallada de disseny.

66
00:03:33,620 --> 00:03:37,040
Què vull dir amb això és la seva expectativa de l'aixeta

67
00:03:37,040 --> 00:03:39,420
no coincideix amb el que va sortir de la dutxa,

68
00:03:39,420 --> 00:03:41,780
que és una mica desafortunat per a ell.

69
00:03:41,780 --> 00:03:44,990
Així que aquest és un exemple d'un defecte de disseny que passa en la vida real.

70
00:03:44,990 --> 00:03:48,020
No obstant això, veiem tot tipus d'éssers d'altres també.

71
00:03:48,020 --> 00:03:50,390
No som probablement els fans del sistema de MBTA.

72
00:03:50,390 --> 00:03:55,560
Es tracta d'un sistema de metro a realitat a Londres, que diu: "Aquest botó no està en ús."

73
00:03:55,560 --> 00:04:00,220
Per què és encara aquí? Per què ens importa?

74
00:04:00,220 --> 00:04:02,810
Quan jo era un nen, i l'expert en tecnologia de la casa,

75
00:04:02,810 --> 00:04:05,050
cada vegada que l'ordinador es bloquegi, la meva mare venia a mi,

76
00:04:05,050 --> 00:04:07,060
mostrant-me aquesta pantalla i preguntant què va passar.

77
00:04:07,060 --> 00:04:09,210
>> Ni tan sols jo sé el que això significa.

78
00:04:11,890 --> 00:04:14,700
[Rialles] Què?

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

80
00:04:18,720 --> 00:04:23,050
De vegades ens sentim com els desenvolupadors de programari són només curricà nosaltres.

81
00:04:23,050 --> 00:04:28,460
Com usuaris estem com, "Què està passant? Algú ens diuen".

82
00:04:28,460 --> 00:04:32,140
Tot això es redueix a una qüestió de disseny.

83
00:04:32,140 --> 00:04:34,650
Disseny, com podem veure, no és purament sobre l'estètica,

84
00:04:34,650 --> 00:04:37,230
no es tracta de com es veuen les coses.

85
00:04:37,230 --> 00:04:41,720
Aquí veiem que aquest petit pop-up per aquí realment es veu molt bé.

86
00:04:41,720 --> 00:04:45,290
Té una ombra en el fons, té radis de frontera passant.

87
00:04:45,290 --> 00:04:47,550
És una cosa bonica.

88
00:04:47,550 --> 00:04:51,480
No està molt ben dissenyat, perquè no és molt fàcil d'utilitzar.

89
00:04:51,480 --> 00:04:54,920
Aquest petit pop-up que apareix en realitat no em dóna cap informació

90
00:04:54,920 --> 00:04:58,450
sobre el que està passant, no em va dir res quan l'usuari

91
00:04:58,450 --> 00:05:01,400
sobre com recuperar d'aquest error.

92
00:05:01,400 --> 00:05:05,190
Volem pensar sobre les coses que el disseny no és.

93
00:05:05,190 --> 00:05:06,670
En primer lloc, no és l'estètica.

94
00:05:06,670 --> 00:05:10,800
Tampoc és el farciment de la seva aplicació amb un munt de funcionalitats innecessàries.

95
00:05:10,800 --> 00:05:14,890
Si vostè és un restaurant tailandès, és probable que no vol ser un dentista a la vegada.

96
00:05:14,890 --> 00:05:17,720
I amb Facebook Questions, no és que molta gent l'usa

97
00:05:17,720 --> 00:05:21,130
i no era realment el nucli del que estaven construint.

98
00:05:21,130 --> 00:05:24,200
I el que és bo per pensar no és tant la quantitat de les coses

99
00:05:24,200 --> 00:05:26,390
que vostè està posant a la seva sol · licitud, però la qualitat de la

100
00:05:26,390 --> 00:05:28,910
i com s'està fent que l'experiència d'usuari millor

101
00:05:28,910 --> 00:05:32,540
per millorar la realitat del que ja té.

102
00:05:32,540 --> 00:05:37,040
>> En poques paraules, el disseny ens diu el que hem de construir.

103
00:05:37,040 --> 00:05:41,950
Per exemple, si estem construint alguna cosa que anem a buscar les coses,

104
00:05:41,950 --> 00:05:45,970
com Google, per exemple, hem de fer les coses d'una manera

105
00:05:45,970 --> 00:05:48,950
que requereix que l'usuari porta un munt de clics per arribar al que volen,

106
00:05:48,950 --> 00:05:52,580
o cal fer-ho d'una manera, per exemple, amb Google Instant o Autocomplete

107
00:05:52,580 --> 00:05:54,970
que ens permet arribar als nostres resultats amb més rapidesa?

108
00:05:54,970 --> 00:05:58,740
Enginyeria implica, com Tommy li mostrarà, en realitat construint.

109
00:05:58,740 --> 00:06:01,890
Hi ha molts tipus de disseny.

110
00:06:01,890 --> 00:06:06,070
Per exemple, si vostè està construint alguna cosa per desplegar alguna cosa

111
00:06:06,070 --> 00:06:09,770
en un país del tercer món on no hi ha electricitat o molt que la tecnologia molt,

112
00:06:09,770 --> 00:06:11,440
vostè ha de dissenyar el que vostè està construint

113
00:06:11,440 --> 00:06:14,210
de manera que fàcilment s'accedeix a la gent d'allà.

114
00:06:14,210 --> 00:06:18,290
Però, quin tipus de decisions de disseny que pot haver altres

115
00:06:18,290 --> 00:06:21,850
o podria estar involucrat en alguna cosa com això?

116
00:06:23,690 --> 00:06:25,660
Si. Veig una mà.

117
00:06:25,660 --> 00:06:37,200
[Resposta dels estudiants inaudible] Dret. >> Exactament. L'accessibilitat és una cosa.

118
00:06:37,200 --> 00:06:40,870
Moltes persones no pensen, "Què passa amb els meus usuaris?"

119
00:06:40,870 --> 00:06:43,160
com els extrems de qualsevol d'espectre.

120
00:06:43,160 --> 00:06:47,770
Tinc usuaris que podrien tenir discapacitats que no estic pensant en

121
00:06:47,770 --> 00:06:50,590
i estic pensant en el disseny per a l'usuari general.

122
00:06:50,590 --> 00:06:52,630
L'Internet és accessible a tot el món avui en dia,

123
00:06:52,630 --> 00:06:54,870
i que hauria de ser el disseny per a aquesta gent també.

124
00:06:54,870 --> 00:06:58,620
Quina classe d'altres decisions de disseny poden fer?

125
00:06:58,620 --> 00:07:00,690
Sí >> [Estudiant] Cost.

126
00:07:00,690 --> 00:07:02,680
Cost. Molt bo.

127
00:07:02,680 --> 00:07:08,060
Una altra cosa que podem basar les nostres decisions de disseny són el cost.

128
00:07:08,060 --> 00:07:13,130
Si tenim un negoci, vostè vol construir una cosa que no té preu molt per produir

129
00:07:13,130 --> 00:07:17,720
però es pot vendre a un preu especialment alt o ens pot treure algun profit.

130
00:07:17,720 --> 00:07:21,540
>> Aquests són tots els diferents tipus de disseny, però quan estem construint alguna cosa a Internet

131
00:07:21,540 --> 00:07:25,120
o quan estem construint alguna cosa que, probablement, no costa molt construir ara,

132
00:07:25,120 --> 00:07:28,630
igual que les aplicacions d'Internet - vostè no ha de llençar molt capital-hi

133
00:07:28,630 --> 00:07:30,900
amb la finalitat de fer alguna cosa que realment funciona -

134
00:07:30,900 --> 00:07:33,490
el que estem més preocupats per l'experiència de l'usuari.

135
00:07:33,490 --> 00:07:36,390
D'això en diem disseny centrat en l'usuari.

136
00:07:36,390 --> 00:07:41,550
En essència el que el disseny centrat en l'usuari s'involucra a si mateixos posant en les sabates dels seus usuaris.

137
00:07:41,550 --> 00:07:44,870
Si algú signatura per amunt per al que estic construint,

138
00:07:44,870 --> 00:07:48,250
Òbviament han arribat al meu ús particular amb un objectiu en ment,

139
00:07:48,250 --> 00:07:50,280
amb una tasca que voleu realitzar.

140
00:07:50,280 --> 00:07:53,650
I el seu treball no és només per ajudar-los a completar aquesta tasca

141
00:07:53,650 --> 00:07:57,930
sinó per ajudar-los a completar aquesta tasca d'una manera que sigui eficient, intuïtiu,

142
00:07:57,930 --> 00:08:01,900
i, com va dir alguna persona d'allà i accessible.

143
00:08:01,900 --> 00:08:03,750
Què significa eficiència?

144
00:08:03,750 --> 00:08:08,050
Eficiència significa la rapidesa amb què l'usuari a completar la tasca donada la meva interfície.

145
00:08:08,050 --> 00:08:11,650
Es necessita un munt de clics per a ells per anar d'un lloc a un altre?

146
00:08:11,650 --> 00:08:14,630
És tediós? ¿Han de realitzar moltes tasques repetitives?

147
00:08:14,630 --> 00:08:17,140
Volem fer que el procés sigui el més eficient possible

148
00:08:17,140 --> 00:08:20,070
pel que no ha de fer aquest tipus de coses.

149
00:08:20,070 --> 00:08:24,230
Quant a la intuïció, que és, per exemple, si un usuari busca la meva interfície,

150
00:08:24,230 --> 00:08:27,240
és més fàcil per a ells per arribar d'un lloc a un altre?

151
00:08:27,240 --> 00:08:30,390
És fàcil per a ells per esbrinar el que han de fer clic en el meu interfície

152
00:08:30,390 --> 00:08:33,770
per tal que per aconseguir l'objectiu o tasca que es vol aconseguir?

153
00:08:33,770 --> 00:08:37,520
>> I finalment, com va dir una persona d'allà, l'accessibilitat és molt important.

154
00:08:37,520 --> 00:08:39,640
[Parlant masculí] Es refereix a l'accessibilitat per a les coses com la visió,

155
00:08:39,640 --> 00:08:42,740
Com es deu en realitat dissenyar alguna cosa per a algú que és cec?

156
00:08:42,740 --> 00:08:46,460
Oh. Per a les persones que no poden veure res, tenim una cosa anomenada lector de pantalla.

157
00:08:46,460 --> 00:08:49,070
El que ha de fer és que vostè ha de construir el seu lloc web d'una manera

158
00:08:49,070 --> 00:08:52,020
que, per exemple, tecnologies específiques, el que anomenem -

159
00:08:52,020 --> 00:08:53,590
Hi ha un munt de coses ara.

160
00:08:53,590 --> 00:08:55,660
Crec que hi ha lectors de pantalla anomenat JAWS.

161
00:08:55,660 --> 00:08:58,410
Moltes d'aquestes coses depenen del que anomenem normes de la zona

162
00:08:58,410 --> 00:09:02,010
amb la finalitat de llegir per a l'usuari del que està present a la pàgina.

163
00:09:02,010 --> 00:09:05,480
Per a aquelles persones que no poden veure, ha de assegurar-se que aquests lectors de pantalla

164
00:09:05,480 --> 00:09:09,130
en realitat pot recollir el contingut de la pàgina i pot mostrar als seus usuaris,

165
00:09:09,130 --> 00:09:13,630
si no es pot veure, si més no encara es pot entendre el contingut de la pàgina.

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

167
00:09:16,190 --> 00:09:23,410
Prou de parlar sobre un bon disseny. Anem a parlar d'un mal disseny.

168
00:09:23,410 --> 00:09:25,220
Aquestes són coses que no has de fer.

169
00:09:25,220 --> 00:09:27,890
Algú pot dir-me sobre les seves experiències amb Craigslist

170
00:09:27,890 --> 00:09:32,190
i el que creuen que no és tan bo d'aquest disseny?

171
00:09:33,690 --> 00:09:36,430
Sí >> [Estudiant] Crec que hi ha massa paraules en una àrea.

172
00:09:36,430 --> 00:09:39,350
Massa paraules, no? Completament aclaparador.

173
00:09:39,350 --> 00:09:42,400
En arribar a aquesta pàgina i et dóna la benvinguda amb un munt de coses aquí

174
00:09:42,400 --> 00:09:43,860
que ni tan sols t'importa.

175
00:09:43,860 --> 00:09:47,010
Per exemple, vostè viu en un estat que no comença amb aquesta carta.

176
00:09:47,010 --> 00:09:48,690
Diguem que vostè viu a Texas o alguna cosa així.

177
00:09:48,690 --> 00:09:53,790
>> Vostè ha de desplaçar cap avall a la pàgina per arribar al lloc on es troba.

178
00:09:53,790 --> 00:10:00,320
Sóc de Boston, així que em miro a Massachusetts. On és Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, és aquí mateix. Oh, és Boston. Bé.

180
00:10:03,270 --> 00:10:09,070
Fem una ullada a Boston. [Rialles]

181
00:10:09,070 --> 00:10:12,250
Bastant aclaparador, oi?

182
00:10:12,250 --> 00:10:16,400
Awkward coses per allà. [Rialles]

183
00:10:17,320 --> 00:10:19,470
Diguem que jo estic buscant un lloc per viure.

184
00:10:19,470 --> 00:10:24,130
Quantes persones s'han utilitzat Craigslist? Tones de vostè.

185
00:10:24,130 --> 00:10:30,960
Hi ha formes molt malament de veure això, però anem a veure això.

186
00:10:35,130 --> 00:10:38,970
Quina és la diferència entre img i per? Algú pot dir-me?

187
00:10:41,350 --> 00:10:42,830
Hi ha en realitat no hi ha diferència.

188
00:10:42,830 --> 00:10:47,710
Ells signifiquen exactament el mateix, però tenen noms diferents per a ells per alguna raó.

189
00:10:48,980 --> 00:10:53,560
Si faig clic a anunci amb foto, no passa res a la pàgina.

190
00:10:53,560 --> 00:10:57,490
De fet, he de fer clic a Torna a buscar perquè alguna cosa succeeixi.

191
00:10:57,490 --> 00:11:02,430
Quina podria ser una decisió de disseny millor que es podia fer allà?

192
00:11:03,820 --> 00:11:08,030
Si estic fent clic en aquest filtre, probablement vol filtrar per aquesta acció en particular

193
00:11:08,030 --> 00:11:09,970
o aquesta categoria en particular.

194
00:11:09,970 --> 00:11:14,450
Així que en lloc d'haver de pressionar Cerca de nou, aquí podria simplement fer automàticament el filtratge

195
00:11:14,450 --> 00:11:17,060
tipus d'estil de Google on ho fan a l'instant.

196
00:11:17,060 --> 00:11:20,440
[Malan] No obstant això, no constitueix, com hem vist fins ara han de ser físicament presentat

197
00:11:20,440 --> 00:11:23,170
prement Enter almenys o fent clic en un botó?

198
00:11:23,170 --> 00:11:26,830
Com s'ha vist fins ara, que realment ha de fer clic a Enviar per fer aquestes coses.

199
00:11:26,830 --> 00:11:30,090
>> Però a mesura que Tommy li mostrarà en un segon, en realitat hi ha maneres perquè vostè

200
00:11:30,090 --> 00:11:33,010
de manera que en fer clic a aquesta cosa que pot enviar automàticament

201
00:11:33,010 --> 00:11:38,840
el que anomenem una petició AJAX i obtenir dades de tornada i filtrar els resultats a l'instant.

202
00:11:38,840 --> 00:11:41,340
Hi ha un munt de coses que estan malament en aquesta interfície.

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

204
00:11:43,530 --> 00:11:47,030
Hi ha una cosa una mica anòmal aquí on vostè es preocupa per Cambridge

205
00:11:47,030 --> 00:11:54,790
i no obstant això, vostè està rebent Westford, Spring Hill, West Newton i similars.

206
00:11:54,790 --> 00:11:57,930
Probablement no és ideal. >> Probablement no ideal.

207
00:11:57,930 --> 00:12:03,900
Com podria jo ser capaç de fer l'experiència d'usuari millor en aquesta pàgina en particular?

208
00:12:03,900 --> 00:12:07,340
Sí >> [Estudiant] Instruccions.

209
00:12:07,340 --> 00:12:09,500
Bé. Les instruccions de quin tipus de sentit?

210
00:12:09,500 --> 00:12:14,630
[Estudiant] Per exemple, una cosa per als usuaris de primera vegada, que ni tan sols saben el que és Craigslist

211
00:12:14,630 --> 00:12:17,320
o no saps el que has de fer.

212
00:12:17,320 --> 00:12:20,150
Dreta. Així ho explica Craigslist està en aquesta pàgina és important.

213
00:12:20,150 --> 00:12:23,490
De fet, podem dir als usuaris el que aquesta pàgina és en realitat per.

214
00:12:23,490 --> 00:12:27,090
Si estic visitant a això, veig un munt de llocs. Jo ni tan sols sé el que signifiquen.

215
00:12:27,090 --> 00:12:29,730
Però més important encara, només mirar aquesta interfície,

216
00:12:29,730 --> 00:12:35,530
Recordo que vaig haver de baixar un munt de coses per trobar una comunitat en particular

217
00:12:35,530 --> 00:12:37,560
que realment es preocupava per això.

218
00:12:37,560 --> 00:12:39,820
Què és un mètode més ràpid que podia fer això? Sí

219
00:12:39,820 --> 00:12:43,290
[Estudiant] Divideix cap amunt en aquest, les regions de l'oest. >> Okay.

220
00:12:43,290 --> 00:12:47,460
Podria dividir-los en categories més que pugui ajudar a determinar més ràpidament

221
00:12:47,460 --> 00:12:49,820
com arribar a aquest lloc en particular.

222
00:12:49,820 --> 00:12:54,510
[Estudiant] Poseu una llista desplegable. >> Dret. Bé.

223
00:12:54,510 --> 00:12:58,240
Em vindria bé un menú desplegable, perquè tenim un conjunt fix de les coses

224
00:12:58,240 --> 00:13:00,100
i podríem mostrar en un menú desplegable.

225
00:13:00,100 --> 00:13:02,240
D'aquesta manera no es necessita tant espai a la pantalla.

226
00:13:02,240 --> 00:13:05,630
Però encara millor que això, què podem fer?

227
00:13:05,630 --> 00:13:09,220
Sí >> [Resposta dels estudiants inaudible] >> Pots dir això de nou? >> [Estudiant] quadre de cerca.

228
00:13:09,220 --> 00:13:11,260
Sí, un quadre de cerca. Això és genial.

229
00:13:11,260 --> 00:13:16,430
El que en realitat es pot fer és que si mirem cap enrere en el cercador de diapositives.

230
00:13:16,430 --> 00:13:21,520
Emplenament automàtic. Una manera molt senzilla de buscar a través dels resultats que vostè sap que està en un set.

231
00:13:21,520 --> 00:13:25,980
Si em poso a escriure BO, només em mostrarà tots els resultats que tenen a l'interior de BO d'ells.

232
00:13:25,980 --> 00:13:29,030
D'aquesta manera puc trobar molt fàcilment el particular, em vull anar a la

233
00:13:29,030 --> 00:13:32,390
en lloc d'haver de desplaçar-se a través d'aquesta llista realment gran.

234
00:13:32,390 --> 00:13:37,450
>> Es tracta de tot tipus de realitat fruita madura que algú que està duent a terme Craigslist

235
00:13:37,450 --> 00:13:42,500
en realitat es pot fer perquè l'experiència en el lloc molt millor per al seu usuari en particular.

236
00:13:42,500 --> 00:13:46,370
Bé. Prou de parlar sobre els llocs web dolents.

237
00:13:46,370 --> 00:13:49,410
Parlem de Facebook.

238
00:13:50,880 --> 00:13:54,390
Quan Facebook va sortir, i en especial les fotos de Facebook,

239
00:13:54,390 --> 00:13:57,870
hi havia un munt d'altres serveis en el moment en què podria fer exactament les mateixes coses.

240
00:13:57,870 --> 00:14:00,740
Podrien organitzar les fotos en àlbums.

241
00:14:00,740 --> 00:14:03,360
El que podria fer és que vostè pot organitzar en grups també.

242
00:14:03,360 --> 00:14:06,070
Vostè podria organitzar per data. Vostè pot fer totes aquestes coses en particular.

243
00:14:06,070 --> 00:14:11,710
Però, ¿algú sap el que va fer esclatar en fotos de Facebook el moment en que va ser posat en llibertat?

244
00:14:11,710 --> 00:14:15,080
Sí >> [Els estudiants] Tags. Tags. >> Exactament.

245
00:14:15,080 --> 00:14:21,300
Tenim Milo per aquí, que és la nostra mascota gos amb aquest mocador CS50.

246
00:14:21,300 --> 00:14:24,810
Es pot veure que tenim aquesta característica d'etiquetatge al centre.

247
00:14:24,810 --> 00:14:28,240
I el que va fer fotos de Facebook molt interessant des del punt de vista d'usabilitat

248
00:14:28,240 --> 00:14:34,130
és que en realitat va permetre a la gent a través d'aquest involucrar als seus amics en les seves fotos.

249
00:14:34,130 --> 00:14:37,680
Per Facebook, ja que el seu lloc web és molt social,

250
00:14:37,680 --> 00:14:40,750
es tracta de la construcció d'aquest tipus d'ambient social.

251
00:14:40,750 --> 00:14:42,620
Això millora l'experiència de fotos molt més

252
00:14:42,620 --> 00:14:46,390
perquè en realitat podria començar dient: "Aquestes són les connexions entre les persones,

253
00:14:46,390 --> 00:14:49,220
i aquestes són fotos de gent a la que realment importen. "

254
00:14:49,220 --> 00:14:52,200
Part d'això és també el narcisisme tipus.

255
00:14:52,200 --> 00:14:54,980
La gent li agrada ser etiquetats en fotos i coses per l'estil.

256
00:14:54,980 --> 00:14:58,510
Mentre que això no és necessàriament un tret ben humà,

257
00:14:58,510 --> 00:15:01,910
al mateix temps que està basat en les decisions de disseny bones

258
00:15:01,910 --> 00:15:04,860
perquè la gent realment es preocupen per coses com aquesta.

259
00:15:04,860 --> 00:15:07,190
Així que això és fotos de Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Però parlem de Facebook en general.

261
00:15:09,800 --> 00:15:13,400
Estic segur que molta gent aquí té una opinió sobre Facebook,

262
00:15:13,400 --> 00:15:16,430
ambdues decisions de disseny bones i males decisions de disseny.

263
00:15:16,430 --> 00:15:20,270
Així que anem a ventilar o ser feliç.

264
00:15:23,480 --> 00:15:26,450
Anem. Sé que tots vostès fan servir Facebook.

265
00:15:26,450 --> 00:15:30,970
Algú ha de tenir alguna cosa dolenta a dir o alguna cosa bona a dir sobre ell. Sí

266
00:15:30,970 --> 00:15:35,060
[Estudiant] Al servei de notícies que hi ha un munt de coses que realment no importen.

267
00:15:35,060 --> 00:15:37,740
El servei de notícies no mostra un munt de coses que potser no importa.

268
00:15:37,740 --> 00:15:41,660
Vostè té amics a Facebook que no s'han complert durant 2 o 3 anys

269
00:15:41,660 --> 00:15:43,860
i veure els seus resultats de notícies apareixent en el seu servei de notícies

270
00:15:43,860 --> 00:15:45,870
i que en realitat no importa.

271
00:15:45,870 --> 00:15:48,700
Facebook ha fet realment un esforç per fer això millor,

272
00:15:48,700 --> 00:15:53,150
i que en realitat han intentat empènyer resultats rellevants a la part superior de la font de notícies en els últims temps

273
00:15:53,150 --> 00:15:58,300
el que en realitat veiem les coses pels amics que són rellevants per a vostè o els seus amics íntims.

274
00:15:58,300 --> 00:16:01,110
Alguna cosa més? Sí

275
00:16:01,110 --> 00:16:06,400
[Resposta dels estudiants inaudible] >> Pots dir això de nou?

276
00:16:06,400 --> 00:16:10,140
[Estudiant] Els anuncis són relativament discreta. >> En quin sentit?

277
00:16:10,140 --> 00:16:16,370
[Resposta dels estudiants inaudible] Ells no tenen llum a la pantalla, com banderes.

278
00:16:16,370 --> 00:16:17,760
Bé. Això és bo.

279
00:16:17,760 --> 00:16:25,030
Si et recordes d'Internet des dels anys 90 - >> [Malan] jo hi era. >> El hi era. [Rialles]

280
00:16:25,030 --> 00:16:29,210
Potser recordi intermitents fons GIF, brillants coses,

281
00:16:29,210 --> 00:16:31,570
Tipus GeoCities estil de les coses.

282
00:16:31,570 --> 00:16:34,080
Això no és realment un exemple d'un bon disseny

283
00:16:34,080 --> 00:16:36,690
perquè realment està distraient del seu contingut.

284
00:16:36,690 --> 00:16:39,590
El lloc web de Yale art solia tenir GIFs animats com els seus antecedents

285
00:16:39,590 --> 00:16:41,800
i no es podia llegir res a la pàgina,

286
00:16:41,800 --> 00:16:44,870
però crec que algú realment vaig parlar amb ells i ara és una mica diferent.

287
00:16:44,870 --> 00:16:48,940
[Malan] És molt millor ara. >> És molt millor ara, com pots veure. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Simplement genial, just - Sí Bé.

289
00:16:56,020 --> 00:17:00,560
>> Part d'això també està fent la seva pàgina possiblement molt minimalista i molt comprensible

290
00:17:00,560 --> 00:17:05,690
així que les coses en el flux de la pàgina d'una manera que és molt lògic i no et fiquis en el camí dels altres.

291
00:17:05,690 --> 00:17:11,849
Quin tipus de coses són bones o dolentes sobre Facebook sobre Facebook?

292
00:17:11,849 --> 00:17:15,730
Anem a tenir una conversa disseny aquí.

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

294
00:17:21,339 --> 00:17:25,640
[Estudiant] El sistema de nova línia de temps li permet buscar el perfil de la persona sobre el seu passat.

295
00:17:25,640 --> 00:17:28,119
Ooh, línia de temps.

296
00:17:28,119 --> 00:17:30,280
Timeline és una gran cosa perquè li permet aguaitar als teus amics

297
00:17:30,280 --> 00:17:33,300
quan eren a la secundària.

298
00:17:35,160 --> 00:17:38,060
Línia de temps és bo perquè et permet filtrar contingut molt més ràpid,

299
00:17:38,060 --> 00:17:41,500
que li permet trobar les coses que d'una altra manera caldria prendre un temps molt llarg per trobar

300
00:17:41,500 --> 00:17:45,840
simplement desplaçant cap amunt i avall, amunt, amunt, amunt, amunt, amunt, com anar enrere en el temps.

301
00:17:45,840 --> 00:17:48,910
Però també hi ha una mena de desavantatge que en termes d'experiència de l'usuari.

302
00:17:48,910 --> 00:17:51,190
Què podria ser?

303
00:17:51,190 --> 00:17:56,780
Gran paraula que comença amb P-R. >> [Els estudiants] de privacitat. Privacitat >>, no?

304
00:17:56,780 --> 00:17:59,970
La privacitat és un tema d'enorme experiència de l'usuari.

305
00:17:59,970 --> 00:18:07,190
Aquesta és una de les coses que més odi de Facebook ara. [Rialles]

306
00:18:07,190 --> 00:18:09,000
[Malan] Tal com ho faig ara.

307
00:18:09,000 --> 00:18:11,380
David no es va adonar que això realment va succeir fins ahir.

308
00:18:11,380 --> 00:18:14,560
Així que ara que sap que cada vegada que li xatejar sé que ell m'ha estat ignorant.

309
00:18:14,560 --> 00:18:16,880
[Malan] La part difícil va ser que era en realitat ho ignora,

310
00:18:16,880 --> 00:18:21,040
i jo no sabia que ell sabia que jo ho estava ignorant. [Rialles]

311
00:18:21,040 --> 00:18:24,030
La privacitat és un gran problema.

312
00:18:24,030 --> 00:18:28,670
Aquí ningú pot dir-me el que podria ser dolent sobre privacitat de Facebook

313
00:18:28,670 --> 00:18:32,270
a més del fet que es fan les coses d'aquesta manera?

314
00:18:32,270 --> 00:18:37,240
El que és particularment difícil de fer pel que fa a la privacitat de Facebook?

315
00:18:37,240 --> 00:18:40,340
Aquest tipus de pregunta és un líder.

316
00:18:41,680 --> 00:18:43,930
Sí >> [Estudiant] Amaga les fotografies de determinades persones.

317
00:18:43,930 --> 00:18:46,170
Dreta. Exactament, per amagar les seves fotos de determinades persones.

318
00:18:46,170 --> 00:18:51,290
Tenen aquest petit botó petit es troba a la part superior dreta que li permet canviar la privacitat d'una foto.

319
00:18:51,290 --> 00:18:56,360
Les seves opcions de privacitat són molt variats entre els diferents tipus de menús.

320
00:18:56,360 --> 00:18:59,510
>> Han millorat molt en això últimament, però el que solia ser el cas

321
00:18:59,510 --> 00:19:04,870
que cada vegada que volia evitar que els seus amics de les fotos veient,

322
00:19:04,870 --> 00:19:08,280
vostè hauria de passar per un complicat procés de 5 passos de ser com,

323
00:19:08,280 --> 00:19:11,150
m'ho dius a mi fer clic en aquest enllaç, ara deixeu-me fer clic de nou, deixa clic de nou,

324
00:19:11,150 --> 00:19:13,420
Permetre especificar que la gent no pot veure les meves fotos.

325
00:19:13,420 --> 00:19:17,250
Això no és particularment bo en part de Facebook

326
00:19:17,250 --> 00:19:20,530
ja que gran part de l'experiència de l'usuari és en realitat els dóna la llibertat

327
00:19:20,530 --> 00:19:22,460
per controlar el que la gent pot veure.

328
00:19:22,460 --> 00:19:25,550
Cridem a aquest control d'usuari i la llibertat.

329
00:19:25,550 --> 00:19:31,090
Si vostè no està deixant que els seus usuaris fer això d'una manera que sigui eficient i intuïtiu,

330
00:19:31,090 --> 00:19:34,570
llavors la usabilitat dels fòrums no és realment tan bo en absolut.

331
00:19:34,570 --> 00:19:38,200
 Li agrada a vostès dir res sobre Facebook?

332
00:19:38,700 --> 00:19:41,420
Com puc desactivar aquesta opció?

333
00:19:41,420 --> 00:19:46,290
[Ong] No es pot desactivar aquesta opció, i això és un error enorme facilitat d'ús per part de Facebook.

334
00:19:46,290 --> 00:19:49,410
Aquesta característica - que en realitat semblava al d'ahir -

335
00:19:49,410 --> 00:19:53,940
que és o que no és possible fer-ho o és enterrat en algun lloc molt, molt profund

336
00:19:53,940 --> 00:19:58,050
en els racons de Facebook perquè no puc trobar la manera d'habilitar aquesta funcionalitat en absolut.

337
00:19:58,050 --> 00:20:00,400
[Malan] Però de vegades aquestes decisions no són evidents

338
00:20:00,400 --> 00:20:03,890
perquè vostès ens han donat una gran quantitat d'informació útil sobre diferents aplicacions CS50

339
00:20:03,890 --> 00:20:05,710
i llocs web que utilitza el curs.

340
00:20:05,710 --> 00:20:10,260
No s'han posat en pràctica totes aquestes peticions i suggeriments.

341
00:20:10,260 --> 00:20:14,550
>> Part d'això és per aconseguir tantes sol · licituds que es tracta d'una funció del temps,

342
00:20:14,550 --> 00:20:17,070
però de vegades simplement prendre una decisió conscient com,

343
00:20:17,070 --> 00:20:19,830
"Gràcies pel suggeriment, però no estem d'acord".

344
00:20:19,830 --> 00:20:24,350
Llavors, com decideix realment el que ha de fer si els usuaris creu que hauria de fer alguna cosa

345
00:20:24,350 --> 00:20:28,110
encara que no ho fa necessàriament?

346
00:20:28,110 --> 00:20:32,360
És un delicat equilibri entre realitat escoltant el que els usuaris diuen

347
00:20:32,360 --> 00:20:35,840
i realment tenir una mena de línia on vostè diu,

348
00:20:35,840 --> 00:20:37,750
"Nosaltres no anem a fer el que aquests diuen els usuaris."

349
00:20:37,750 --> 00:20:42,520
I en particular, crec que hi havia una cita de Henry Ford que ho resumeix bastant bé.

350
00:20:42,520 --> 00:20:47,130
"Si hagués preguntat a la gent el que ells volien, ells haurien dit que volien cavalls més ràpids".

351
00:20:47,130 --> 00:20:51,840
Algú pot ordenar de separar el que realment significa aquesta frase?

352
00:20:51,840 --> 00:20:56,060
No és només que els usuaris sàpiguen el que volen,

353
00:20:56,060 --> 00:20:59,180
però és més que -

354
00:20:59,180 --> 00:21:02,720
[Estudiant] Ells no saben el que és possible.

355
00:21:02,720 --> 00:21:06,140
En part, perquè no saben el que és possible.

356
00:21:07,880 --> 00:21:11,440
Es burlen de que, a part d'una mica més. Què vols dir amb això?

357
00:21:11,440 --> 00:21:21,340
[Resposta dels estudiants inaudible]

358
00:21:21,340 --> 00:21:25,770
Això és bo. El que crec que estem tractant de dir aquí és que la gent sàpiga el que vol.

359
00:21:25,770 --> 00:21:28,050
Volen més ràpids cavalls.

360
00:21:28,050 --> 00:21:29,840
El que realment volen és la capacitat de moure més ràpid,

361
00:21:29,840 --> 00:21:32,310
però no se sap molt bé el mitjà pel qual per aconseguir-ho.

362
00:21:32,310 --> 00:21:36,330
En arribar als seus usuaris i els seus usuaris dir una cosa

363
00:21:36,330 --> 00:21:39,700
i et diuen: "Volem que aquestes característiques i aquestes característiques i aquestes característiques",

364
00:21:39,700 --> 00:21:42,650
no vull pensar necessàriament sobre: ​​"Deixa anar per davant

365
00:21:42,650 --> 00:21:44,720
"I posar en pràctica el que diu explícitament:"

366
00:21:44,720 --> 00:21:48,610
però el que vull pensar és: "Quina classe d'idees puc obtenir d'això?"

367
00:21:48,610 --> 00:21:50,450
Què és el que realment vols?

368
00:21:50,450 --> 00:21:55,560
>> I a partir d'aquí el que es pot fer és dissenyar una cosa que satisfaci les peticions

369
00:21:55,560 --> 00:22:00,340
però no necessàriament en la manera com l'usuari espera que estigui satisfet.

370
00:22:00,340 --> 00:22:03,830
Així que per alguna cosa així com projectes finals, en termes reals,

371
00:22:03,830 --> 00:22:07,900
el que és una heurística útil quan es tracta de fer alguna cosa millor,

372
00:22:07,900 --> 00:22:10,630
especialment si el dissenyador té l'arrogància d'ell

373
00:22:10,630 --> 00:22:14,360
pel que vostè sap del que és millor, és possible obtenir informació dels seus usuaris,

374
00:22:14,360 --> 00:22:16,580
però com van realment sobre aconseguir que la retroalimentació?

375
00:22:16,580 --> 00:22:21,610
En els projectes finals, molt concretament, el que produeix resultats òptims en aquesta llista?

376
00:22:21,610 --> 00:22:25,030
El que produeix resultats òptims - i vaig a anar sobre això en un segon -

377
00:22:25,030 --> 00:22:29,190
És aquest procés de desenvolupament i proves i després iterar.

378
00:22:29,190 --> 00:22:32,020
Què vull dir amb les proves és en general quan es dissenya una cosa

379
00:22:32,020 --> 00:22:36,970
Creus que és bastant bo, com, "Jo sóc un gran dissenyador. Tothom va encantar."

380
00:22:36,970 --> 00:22:41,600
I després ho poses aquí i la gent no li agrada per alguna raó.

381
00:22:41,600 --> 00:22:46,820
El que has de fer és que vostè ha de prendre les parts de les coses que la gent fa com

382
00:22:46,820 --> 00:22:49,180
i la remodelació de les coses que la gent no li agrada.

383
00:22:49,180 --> 00:22:53,080
Sona com un procés molt obvi, però aquest procés d'iteració constant

384
00:22:53,080 --> 00:22:55,980
sobre del que ja has construït és un procés que l'ajuda a

385
00:22:55,980 --> 00:22:59,730
no només afinar les seves habilitats de disseny propi, però també l'ajuda a perfeccionar el disseny

386
00:22:59,730 --> 00:23:03,790
de manera que la gent realment apreciem el seu producte fins i tot més que abans.

387
00:23:03,790 --> 00:23:07,390
>> Aniré més exemples concrets del que en realitat podria fer.

388
00:23:07,390 --> 00:23:11,390
Com una espècie d'últim exemple d'un producte, veurem KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK quan va sortir era molt, molt popular.

390
00:23:14,970 --> 00:23:18,760
Algú pot endevinar per què?

391
00:23:18,760 --> 00:23:20,950
Quins són els tipus de coses que t'agraden d'aquesta opció si ha utilitzat

392
00:23:20,950 --> 00:23:23,990
o quins són el tipus de coses que no t'agraden?

393
00:23:23,990 --> 00:23:31,590
Sí >> [Resposta dels estudiants inaudible] >> Okay.

394
00:23:31,590 --> 00:23:34,730
Això és part d'ella està deixant que l'usuari té una consulta que és més expansiva

395
00:23:34,730 --> 00:23:38,150
que sigui molt restrictiu així com: "Has de triar la data d'inici

396
00:23:38,150 --> 00:23:39,810
"I vostè ha de triar la seva data de finalització."

397
00:23:39,810 --> 00:23:44,910
De fet, se li permet ser flexible sobre això i li dóna tots els vols en aquest rang.

398
00:23:44,910 --> 00:23:46,730
Alguna cosa més?

399
00:23:46,730 --> 00:23:50,530
[Estudiant] Inclouen les taxes en el preu.

400
00:23:50,530 --> 00:23:53,330
Fan incloure les taxes en el preu.

401
00:23:53,330 --> 00:23:56,720
Els impostos i les coses realment van directament a aquest preu a la part superior esquerra

402
00:23:56,720 --> 00:24:00,710
el que no està enganyat fent-li creure que en realitat estàs pagant per un vol de 240 dòlars

403
00:24:00,710 --> 00:24:03,280
quan en realitat és $ 330.

404
00:24:03,280 --> 00:24:06,200
Alguna cosa més? Sí

405
00:24:06,200 --> 00:24:10,140
[Resposta dels estudiants inaudible]

406
00:24:10,140 --> 00:24:14,610
No estic segur de si realment farem això.

407
00:24:14,610 --> 00:24:18,310
Puc estar equivocat.

408
00:24:18,310 --> 00:24:23,360
Això podria ser una cosa interessant si vostè vol posar més pes en particular filtres

409
00:24:23,360 --> 00:24:27,000
de manera que empenyi els resultats relacionats amb aquest filtre a la part superior.

410
00:24:27,000 --> 00:24:31,920
Però, ¿pot algú dir-me què té d'especial aquest costat esquerre?

411
00:24:31,920 --> 00:24:39,540
Com tradicionalment buscar un vol en un servei d'Internet abans d'això?

412
00:24:41,600 --> 00:24:44,650
>> Sí >> [Resposta dels estudiants inaudible] >> Es pot dir que -

413
00:24:44,650 --> 00:24:47,530
[Estudiant] Cada línia aèria. Sí >>. Cada línia aèria té el seu propi lloc web.

414
00:24:47,530 --> 00:24:50,110
Això consolida les coses. I?

415
00:24:50,110 --> 00:24:52,190
[Estudiant] Vostè sap exactament a quina hora te'n vas.

416
00:24:52,190 --> 00:24:54,460
Vostè sap exactament a quina hora te'n vas,

417
00:24:54,460 --> 00:24:59,380
però relacionats amb els filtres en particular.

418
00:25:00,710 --> 00:25:03,540
Deixa aixecar KAYAK.

419
00:25:11,490 --> 00:25:14,020
Oh Déu, elements emergents. Mala experiència d'usuari.

420
00:25:14,020 --> 00:25:17,230
Què passa quan mou aquest control?

421
00:25:17,230 --> 00:25:21,010
[Estudiant] Actualitzacions automàtiques. >> [Ong] actualitzacions automàtiques.

422
00:25:21,010 --> 00:25:23,440
Això és una cosa que és molt important.

423
00:25:23,440 --> 00:25:25,380
Abans d'això, cada vegada que volia buscar un vol,

424
00:25:25,380 --> 00:25:28,410
calia posar en el seu lloc d'entrada, el lloc de sortida, premi Cercar,

425
00:25:28,410 --> 00:25:31,190
caldria processar i mostrar els seus resultats.

426
00:25:31,190 --> 00:25:34,120
Si vol canviar la seva recerca, vostè ha de prémer dues vegades,

427
00:25:34,120 --> 00:25:39,770
entrar en una nova consulta des de zero, i després fer-ho una i una altra.

428
00:25:39,770 --> 00:25:43,910
El millor d'alguna cosa com això és que utilitza una gran cosa [inintel · ligible] en el medi.

429
00:25:43,910 --> 00:25:46,230
Cada vegada que es fa alguna cosa com això, es dispara una sol · licitud

430
00:25:46,230 --> 00:25:48,420
i et retorna tots els resultats immediatament.

431
00:25:48,420 --> 00:25:51,680
Aquest tipus de resposta immediata és una cosa que es va fer molt popular a KAYAK

432
00:25:51,680 --> 00:25:55,910
perquè és molt fàcil per a mi per canviar només la meva consulta

433
00:25:55,910 --> 00:25:58,890
i d'esbrinar el que és del voltant d'un rang determinat

434
00:25:58,890 --> 00:26:01,950
sense haver d'anar endavant i enrere, endavant i enrere, endavant i enrere.

435
00:26:01,950 --> 00:26:05,200
Així que aquestes són totes les classes de coses que vols pensar quan vostè està dissenyant el seu lloc web.

436
00:26:05,200 --> 00:26:08,930
Com puc fer que sigui molt eficient per als meus usuaris a passar pel que estem treballant en

437
00:26:08,930 --> 00:26:13,010
i per arribar a la seva meta final el més ràpid possible?

438
00:26:13,010 --> 00:26:16,430
[Malan] I a punt de José abans sobre els usuaris no necessàriament saben el que volen,

439
00:26:16,430 --> 00:26:18,640
sobre la base del que vostès ja saben sobre HTML

440
00:26:18,640 --> 00:26:22,780
i vostè té caselles de verificació, botons de ràdio, menús de selecció, camps d'entrada i similars,

441
00:26:22,780 --> 00:26:26,140
Com posar en pràctica la idea d'escollir una hora d'inici d'un vol?

442
00:26:26,140 --> 00:26:30,030
>> Quin d'aquests mecanismes d'interfície d'usuari diferents faria servir?

443
00:26:30,030 --> 00:26:34,100
Si vostè acaba de saber la quantitat d'HTML que s'ensenyava abans

444
00:26:34,100 --> 00:26:39,070
i vostè sap que les entrades són botons d'opció, caselles de verificació, la caiguda de sanejaments, i la caixa d'entrada,

445
00:26:39,070 --> 00:26:43,320
¿Quina seria la seva opció natural han estat per escollir les dates?

446
00:26:43,320 --> 00:26:48,670
[Estudiant] Entrada. >> Entrada. O potser fins i tot un menú desplegable amb totes les dates, no?

447
00:26:48,670 --> 00:26:53,170
Així que amb els mecanismes de la interfície d'usuari més complexes com aquesta en el costat esquerre que es poden implementar,

448
00:26:53,170 --> 00:26:55,500
vostè pot fer aquest procés molt més intuïtiva amb un control lliscant

449
00:26:55,500 --> 00:27:01,020
perquè el temps és continu, i les persones no solen pensar-hi en termes de trossos discrets.

450
00:27:01,020 --> 00:27:04,950
Està bé. L'última cosa.

451
00:27:04,950 --> 00:27:07,370
Deu heurístiques d'usabilitat.

452
00:27:07,370 --> 00:27:10,820
Totes les coses que parlem probablement pertanyen a una d'aquestes categories.

453
00:27:10,820 --> 00:27:14,420
Si vas a aquest enllaç, els llocs que es publicarà a Internet,

454
00:27:14,420 --> 00:27:18,900
que realment serà capaç de fer-ho, com el disseny del seu lloc, tingui en compte aquestes heurístiques

455
00:27:18,900 --> 00:27:21,330
i aquestes regles generals.

456
00:27:21,330 --> 00:27:26,610
Per als seus projectes, el que et suggereixo que facis per tal de dissenyar la seva aplicació millor

457
00:27:26,610 --> 00:27:28,850
és fer prototips de paper.

458
00:27:28,850 --> 00:27:32,150
Quan vostè està pensant en la seva aplicació, molt ràpidament dibuixar el que vulguis que es vegi com

459
00:27:32,150 --> 00:27:36,230
i assegureu-vos que totes les caixes estan disposades d'una manera que és molt intuïtiu per a l'usuari utilitzi

460
00:27:36,230 --> 00:27:39,820
i fins i tot mostrar els prototips de paper als teus amics i començar a grups d'enfocament.

461
00:27:39,820 --> 00:27:44,230
Acaba d'obtenir 2 o 3 persones i demanar-los que toca just en aquests prototips de paper,

462
00:27:44,230 --> 00:27:47,650
i ensenyar noves pantalles per veure si realment entendre el que està passant.

463
00:27:47,650 --> 00:27:50,680
>> El que vull fer és donar-los una tasca, motivar aquesta tasca,

464
00:27:50,680 --> 00:27:53,270
i només els donen l'aplicació i deixar que l'utilitzi.

465
00:27:53,270 --> 00:27:56,530
No els doni instruccions més enllà d'això.

466
00:27:56,530 --> 00:28:00,920
Vols deixar que ells realment interactuen amb la seva aplicació d'una manera que li permet veure

467
00:28:00,920 --> 00:28:03,870
la manera com ho faria servir si no estaven drets al costat d'ells.

468
00:28:03,870 --> 00:28:05,250
I això és molt important.

469
00:28:05,250 --> 00:28:08,780
Això li donarà un munt d'idees que són les persones que reben al voltant de les coses particulars

470
00:28:08,780 --> 00:28:10,560
d'una manera que no els proposen?

471
00:28:10,560 --> 00:28:14,680
Estan utilitzant els mecanismes particulars d'interfície d'usuari en la pantalla

472
00:28:14,680 --> 00:28:17,490
d'una manera que és una mena de hacky?

473
00:28:17,490 --> 00:28:22,020
Jo no tenia la intenció que ho facin d'aquesta manera.

474
00:28:22,020 --> 00:28:23,940
I un cop que hagis acabat amb això, què vols que faci?

475
00:28:23,940 --> 00:28:26,010
Els seus roques de disseny, no?

476
00:28:26,010 --> 00:28:29,600
El que vull fer és que volem desenvolupar i després fer el procés una altra vegada.

477
00:28:29,600 --> 00:28:32,110
Així que mostrar als seus amics una vegada que has desenvolupat, provar,

478
00:28:32,110 --> 00:28:36,630
desenvolupar, provar, desenvolupar, provar, repetir, una i altra i cap endavant.

479
00:28:36,630 --> 00:28:39,720
El disseny és molt un procés iteratiu en aquest sentit.

480
00:28:39,720 --> 00:28:43,280
Segur que ha de construir alguna cosa i després s'adonen coses sobre ell

481
00:28:43,280 --> 00:28:46,520
que no s'havia adonat abans i tornar i millorar a partir d'això.

482
00:28:46,520 --> 00:28:50,890
Ara, pel que fa a la part de desenvolupament, això és el que Tommy es mostrarà després de les vacances

483
00:28:50,890 --> 00:28:53,220
i com vostè pot ser capaç d'implementar alguna cosa com autocompletar

484
00:28:53,220 --> 00:28:56,610
d'una manera que és bastant simple.

485
00:28:57,440 --> 00:28:59,550
[Malan] Com Tommy estableix aquí, la pregunta aleshores.

486
00:28:59,550 --> 00:29:03,780
Molts dels primers llocs web - que José va dir 1990s lloc web estil,

487
00:29:03,780 --> 00:29:07,640
era implementacions on si volies triar una hora d'inici i una hora de finalització,

488
00:29:07,640 --> 00:29:10,380
francament, de tornada al dia, i fins i tot en alguns llocs web avui en dia,

489
00:29:10,380 --> 00:29:13,220
la forma de fer això és que una hora d'escollir un menú desplegable,

490
00:29:13,220 --> 00:29:15,910
vostè escull minuts d'un desplegable, potser vostè triar AM, PM,

491
00:29:15,910 --> 00:29:17,440
i després fer que 3 vegades més.

492
00:29:17,440 --> 00:29:19,920
I així, amb 6 clics i potser una mica de moviment en sentit vertical

493
00:29:19,920 --> 00:29:24,000
l'usuari realment pot proporcionar algun tipus de data i / o rang de temps en aquest sentit.

494
00:29:24,000 --> 00:29:27,920
>> Així que definitivament subòptima i, no obstant això fins ara no hem vist cap capacitat expressiva

495
00:29:27,920 --> 00:29:30,330
en qualsevol dels idiomes que hem vist fer alguna cosa més sexy

496
00:29:30,330 --> 00:29:32,620
igual que el control lliscant de l'hora d'inici i hora de finalització.

497
00:29:32,620 --> 00:29:36,290
Però si penses en la setmana 0, quan parlem de Scratch,

498
00:29:36,290 --> 00:29:39,080
allà no hi havia ginys que acaba de fer certes coses.

499
00:29:39,080 --> 00:29:42,700
Segur que només tenia aquests fonaments com els bucles i les condicions i similars.

500
00:29:42,700 --> 00:29:46,910
Així que tipus de només pensar molt abstractament ara, independentment de les particularitats d'HTML,

501
00:29:46,910 --> 00:29:51,260
el que realment està passant amb una mena de hora d'inici i hora de finalització slider?

502
00:29:51,260 --> 00:29:54,960
Quan moc el ratolí i fer clic en aquest símbol pastanaga poc a l'esquerra

503
00:29:54,960 --> 00:29:59,220
i començar a arrossegar, mitjançant programació, què és el que vull ser capaç d'implementar

504
00:29:59,220 --> 00:30:01,000
perquè això succeeixi?

505
00:30:01,000 --> 00:30:04,920
Quines preguntes, què booleana què vols ser capaç de fer?

506
00:30:04,920 --> 00:30:06,930
Què està passant realment? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Estudiant] On és la posició del cursor? Bé >>. On és la posició del cursor?

508
00:30:10,080 --> 00:30:11,970
Això era una cosa que havíem de expressar de nou en Scratch,

509
00:30:11,970 --> 00:30:14,690
si es basa en la ubicació o fins i tot el color o similar.

510
00:30:14,690 --> 00:30:18,410
Vostè pot recordar molt breument el dilluns havia totes aquestes coses que es diuen esdeveniments

511
00:30:18,410 --> 00:30:22,370
en el món de la Web, de manera que hi ha coses com onclick i onkeypress

512
00:30:22,370 --> 00:30:25,960
i onkeyup i onMouseOver i onmouseout.

513
00:30:25,960 --> 00:30:29,130
Així que adonar-se que fins i tot aquestes coses que hem estat prenent per fet a la web

514
00:30:29,130 --> 00:30:32,190
amb llocs com Facebook i Gmail, encara que no té cap idea

515
00:30:32,190 --> 00:30:34,890
com és possible que portaria a terme perquè no hi ha res tan sols semblant en conferència

516
00:30:34,890 --> 00:30:38,570
o Problema 7, s'adonen que amb aquests fonaments mateixos exactes,

517
00:30:38,570 --> 00:30:41,090
amb HTTP i els paràmetres i GET i POST,

518
00:30:41,090 --> 00:30:44,010
amb les entrades bàsiques d'HTML que hem vist fins ara

519
00:30:44,010 --> 00:30:47,690
i en un moment amb els mecanismes programàtics que Tommy està a punt d'introduir

520
00:30:47,690 --> 00:30:51,300
pot començar a expressar-tal com va fer a la setmana 0

521
00:30:51,300 --> 00:30:53,800
per molt intuïtiva d'arrossegar i deixar anar.

522
00:30:53,800 --> 00:30:58,950
>> Així que dit això, Tommy MacWilliam i algunes noves peces del trencaclosques per a nosaltres per Web.

523
00:30:58,950 --> 00:31:03,450
Està bé. El meu nom és Tommy i jo estaré parlant de JavaScript.

524
00:31:03,450 --> 00:31:07,150
Només un aclariment: jo sóc de l'opinió que JavaScript és el millor llenguatge de programació

525
00:31:07,150 --> 00:31:09,010
a tot el món sencer.

526
00:31:09,010 --> 00:31:11,940
Hi ha un munt de persones que no estan d'acord amb mi, però és simplement increïble.

527
00:31:11,940 --> 00:31:16,330
Quan torni a C, si has de escriure C per altra classe o alguns altres idiomes,

528
00:31:16,330 --> 00:31:19,780
És realment frustrant en tots els detalls de baix nivell que ha de enredar polz

529
00:31:19,780 --> 00:31:23,050
Així que si mai et sents trist pel molest C és escriure,

530
00:31:23,050 --> 00:31:25,130
només ha d'anar de nou, escriure alguna cosa de JavaScript. És el nirvana.

531
00:31:25,130 --> 00:31:27,980
Vostè es sentirà molt millor sobre la seva mal dia.

532
00:31:27,980 --> 00:31:31,900
Gran part de la màgia de JavaScript es deu a la seva habilitat per manipular les coses

533
00:31:31,900 --> 00:31:33,730
que ja són a la pàgina.

534
00:31:33,730 --> 00:31:38,520
Quan escrivim els nostres scripts PHP, que van ser executats al servidor,

535
00:31:38,520 --> 00:31:42,270
i, finalment, que la sortida de script PHP probablement una mica d'HTML.

536
00:31:42,270 --> 00:31:45,860
Això HTML s'envia al client, i tan bon punt ho era.

537
00:31:45,860 --> 00:31:50,180
Si PHP volia afegir un botó a una pàgina, per exemple, no es pot fer això.

538
00:31:50,180 --> 00:31:54,350
Hauria de fer un conjunt nou arxiu HTML i enviar-lo al navegador.

539
00:31:54,350 --> 00:31:57,840
Amb JavaScript sabem que podem actualitzar les coses mentre estan ja a la pàgina,

540
00:31:57,840 --> 00:32:00,840
ia causa d'això podem proporcionar informació molt més immediat,

541
00:32:00,840 --> 00:32:06,150
que realment millorarà l'experiència de l'usuari en el nostre lloc web.

542
00:32:06,150 --> 00:32:09,330
Només un resum ràpid dels selectors de JavaScript.

543
00:32:09,330 --> 00:32:11,590
Sabem que quan es descarrega una pàgina HTML,

544
00:32:11,590 --> 00:32:13,890
que estarà representat en el DOM.

545
00:32:13,890 --> 00:32:19,340
>> El DOM record és precisament aquest gran arbre on els elements estan relacionats en aquesta jerarquia.

546
00:32:19,340 --> 00:32:21,810
Quan treballem amb bases de dades en conjunt de processadors 7,

547
00:32:21,810 --> 00:32:26,280
una de les primeres coses que es necessiten saber com fer era consultar la base de dades.

548
00:32:26,280 --> 00:32:29,060
Tenim aquesta gran taula d'usuaris, i de vegades només vull dir,

549
00:32:29,060 --> 00:32:33,260
"Només vull que alguns d'aquests usuaris que coincideixin amb alguna condició."

550
00:32:33,260 --> 00:32:36,020
De la mateixa manera, quan tenim el DOM necessitem alguna forma de consulta de la mateixa.

551
00:32:36,020 --> 00:32:39,490
Necessitem una manera de dir: "Vull que tots els botons que es veuen així

552
00:32:39,490 --> 00:32:41,860
"O totes les imatges de la pàgina."

553
00:32:41,860 --> 00:32:44,330
I aquests selectors ens permeten fer això.

554
00:32:44,330 --> 00:32:45,690
Així que només un resum ràpid.

555
00:32:45,690 --> 00:32:50,770
Aquest primer aquí, aquest # presentin, el que és que va a seleccionar? Algú se'n recorda?

556
00:32:50,770 --> 00:32:54,880
[Resposta dels estudiants inaudible] >> Sí, exactament.

557
00:32:54,880 --> 00:32:59,510
Això va a seleccionar un element a la pàgina que té un ID de presentar.

558
00:32:59,510 --> 00:33:03,470
I perquè hash tag diu que aquest selector es treballarà amb documents d'identitat.

559
00:33:03,470 --> 00:33:07,630
I el segon, això. Centrat, que el que va a seleccionar?

560
00:33:11,360 --> 00:33:15,180
Si. >> [Estudiant] Classe. >> Exactament. Això ara es va a seleccionar per classe.

561
00:33:15,180 --> 00:33:18,840
La diferència entre l'ID de classe i aquí és generalment l'ID ha de ser únic

562
00:33:18,840 --> 00:33:20,820
dins de qualsevol espai que vostè està buscant més.

563
00:33:20,820 --> 00:33:23,080
Així que si estàs buscant a través d'una pàgina web sencera,

564
00:33:23,080 --> 00:33:27,740
que realment només hauria de tenir un element amb aquest identificador determinat, de manera que en aquest cas de presentar.

565
00:33:27,740 --> 00:33:31,330
Amb les classes, d'altra banda, podem tenir més d'1 element a la mateixa pàgina

566
00:33:31,330 --> 00:33:33,130
amb la mateixa classe.

567
00:33:33,130 --> 00:33:36,580
Això podria ser útil per dir que vull seleccionar tot el que està centrada en la pàgina

568
00:33:36,580 --> 00:33:38,450
en lloc de només una cosa.

569
00:33:38,450 --> 00:33:40,310
>> I finalment, aquest últim aquí és una mica més complicat,

570
00:33:40,310 --> 00:33:43,890
però què és això va a seleccionar entre el DOM?

571
00:33:46,650 --> 00:33:48,810
[Resposta dels estudiants inaudible] >> Què és això?

572
00:33:48,810 --> 00:33:53,250
[Estudiant] Qualsevol cosa que sigui una etiqueta. >> Tenim 2 parts aquí.

573
00:33:53,250 --> 00:33:58,070
La segona part va dir que vull seleccionar aquestes etiquetes amb una etiqueta d'entrada,

574
00:33:58,070 --> 00:34:00,730
pel que qualsevol element que és una etiqueta d'entrada.

575
00:34:00,730 --> 00:34:03,080
Però jo no vull seleccionar només totes les entrades

576
00:34:03,080 --> 00:34:05,170
perquè una cosa així com un botó d'enviament pot ser una entrada

577
00:34:05,170 --> 00:34:08,409
i una mena quadre de text podria ser una entrada.

578
00:34:08,409 --> 00:34:11,909
Així que amb aquests claudàtors Estic dient que només voleu seleccionar els elements

579
00:34:11,909 --> 00:34:14,110
que són de tipus text.

580
00:34:14,110 --> 00:34:17,400
En algun lloc del meu etiqueta HTML que té un atribut anomenat tipus,

581
00:34:17,400 --> 00:34:19,750
i el valor d'atribut que ha de ser text.

582
00:34:19,750 --> 00:34:21,340
Llavors, què hi ha d'aquesta primera part aquí?

583
00:34:21,340 --> 00:34:25,489
La primera paraula d'aquest selector és la forma llavors tinc un espai i aquesta part d'entrada.

584
00:34:25,489 --> 00:34:29,620
Què és el que fan, posar el formulari al davant d'ella?

585
00:34:33,409 --> 00:34:35,860
Això va a limitar bàsicament la nostra consulta.

586
00:34:35,860 --> 00:34:38,510
Podria passar que tenim algunes entrades de la pàgina

587
00:34:38,510 --> 00:34:41,080
que no són descendents d'un formulari.

588
00:34:41,080 --> 00:34:46,150
El que això farà és això dir que només volen que les etiquetes d'entrada que tenen en algun lloc per sobre d'ells

589
00:34:46,150 --> 00:34:49,030
algun element principal d'un formulari.

590
00:34:49,030 --> 00:34:52,100
I així, d'aquesta manera podem fer que aquestes consultes més jeràrquiques

591
00:34:52,100 --> 00:34:55,000
de manera que no només ha de seleccionar tot compleix un selector donat.

592
00:34:55,000 --> 00:35:00,760
Podem espècie de límit de l'abast d'aquesta consulta a una altra cosa.

593
00:35:00,760 --> 00:35:04,000
Així que ara que sabem com seleccionar elements a la pàgina,

594
00:35:04,000 --> 00:35:06,780
parlarem una mica sobre AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX és un acrònim encara molt de moda que representa JavaScript asíncron i XML.

596
00:35:12,270 --> 00:35:15,640
El que passa és que XML és només una forma de representar les dades.

597
00:35:15,640 --> 00:35:20,920
>> Aquest tipus de popularitat perdut recentment, de manera que la X en AJAX no s'utilitza tot el temps.

598
00:35:20,920 --> 00:35:26,220
Bàsicament, el que AJAX ens permet fer és fer peticions HTTP

599
00:35:26,220 --> 00:35:28,620
a partir del context Javascript.

600
00:35:28,620 --> 00:35:32,310
Quan estem en el nostre navegador web i estem navegant per les pàgines i feu clic a un enllaç,

601
00:35:32,310 --> 00:35:37,790
el que el nostre navegador es farà és fer una petició HTTP a qualsevol enllaç que faci clic.

602
00:35:37,790 --> 00:35:41,670
Però això no sempre és ideal, perquè si aquest és el cas, llavors quan David deia:

603
00:35:41,670 --> 00:35:45,220
sempre hem de fer que els usuaris fer clic en un botó d'enviament o feu clic a un enllaç

604
00:35:45,220 --> 00:35:50,380
amb la finalitat de fer que alguna cosa succeeixi això va a implicar una petició HTTP.

605
00:35:50,380 --> 00:35:54,160
Així que amb AJAX podem fer aquestes peticions en nom Javascript.

606
00:35:54,160 --> 00:35:57,020
Això vol dir que cada vegada que l'usuari interactua amb la pàgina o qualsevol cosa que passi,

607
00:35:57,020 --> 00:36:01,780
que realment pot fer una sol · licitud mitjançant programació a algun arxiu PHP per la nostra pàgina web

608
00:36:01,780 --> 00:36:06,280
o qualsevol altra cosa i recuperar les dades d'aquest arxiu que escup.

609
00:36:06,280 --> 00:36:09,860
Fem una ullada a un exemple d'AJAX.

610
00:36:09,860 --> 00:36:16,140
Aquesta és la nostra pàgina de Finances CS50 amb el que espero que alguns de nosaltres estem familiaritzats.

611
00:36:16,140 --> 00:36:21,790
Si ens fixem en el codi HTML de la pàgina, veiem aquí que he afegit algunes coses,

612
00:36:21,790 --> 00:36:23,820
un dels quals m'he donat així una identificació.

613
00:36:23,820 --> 00:36:26,480
He dit id = "form · licita".

614
00:36:26,480 --> 00:36:31,910
Ho he fet només perquè farà això una mica més fàcil la selecció del DOM

615
00:36:31,910 --> 00:36:35,090
ja que només es pot fer una consulta molt simple.

616
00:36:35,090 --> 00:36:38,960
El que vull fer aquí és que vull arreglar algun problema amb CS50 Finances.

617
00:36:38,960 --> 00:36:41,550
Així que si anem a finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
cada vegada que desitgi obtenir una cita, he de fer clic en aquest botó Cita Get,

619
00:36:45,700 --> 00:36:48,960
i que Get botó Citar llavors em porta a una altra pàgina sencera.

620
00:36:48,960 --> 00:36:52,400
I si vull una altra cita, he de colpejar el botó Back i després escriure,

621
00:36:52,400 --> 00:36:54,480
Tinc una cita, i vaig prémer el botó Enrere.

622
00:36:54,480 --> 00:36:56,840
Això realment no és la millor experiència d'usuari.

623
00:36:56,840 --> 00:37:01,570
Qui realment utilitzar el lloc si és tan lent per obtenir els preus de les accions?

624
00:37:01,570 --> 00:37:05,630
Així que el que vull fer amb AJAX és eliminar aquest pas d'anar a una altra pàgina

625
00:37:05,630 --> 00:37:08,410
per tal de veure els resultats.

626
00:37:08,410 --> 00:37:11,240
>> El que realment estem demanant és només que el preu realment petit,

627
00:37:11,240 --> 00:37:14,240
i això és només una quantitat molt petita de dades.

628
00:37:14,240 --> 00:37:17,400
Així que no cal que em vagi a una altra pàgina HTML sencera,

629
00:37:17,400 --> 00:37:20,670
descarregar un lot nou d'HTML, potser descarregar algunes imatges més,

630
00:37:20,670 --> 00:37:24,410
alguns altres arxius CSS només per a mi respondre a aquesta pregunta molt simple

631
00:37:24,410 --> 00:37:27,810
de quant costa aquest estoc.

632
00:37:27,810 --> 00:37:31,000
Amb AJAX podem fer això molt més fàcil.

633
00:37:31,000 --> 00:37:36,400
Veiem aquí que estic vinculant en un arxiu JavaScript anomenat quote.js.

634
00:37:36,400 --> 00:37:40,140
Anem realment obrir aquest arxiu. No hi ha.

635
00:37:42,610 --> 00:37:45,860
Tots els meus arxius JavaScript estaran ubicats en HTML

636
00:37:45,860 --> 00:37:47,630
perquè el navegador web pot accedir-hi.

637
00:37:47,630 --> 00:37:50,330
Llavors tenim un directori a part aquí per JavaScript,

638
00:37:50,330 --> 00:37:54,340
i ara aquí és quote.js.

639
00:37:54,340 --> 00:38:00,930
A la part superior d'aquest arxiu és aquí diu que vol esperar que tota la pàgina es carregui

640
00:38:00,930 --> 00:38:04,830
abans de tractar de fer qualsevol cosa. Per què és necessari?

641
00:38:04,830 --> 00:38:08,650
Resulta que el següent que faré és començar a buscar un element

642
00:38:08,650 --> 00:38:10,810
que coincideix amb alguns selector.

643
00:38:10,810 --> 00:38:15,600
Si aquest Javascript és cada vegada executat abans d'aquest element és carregat a la pàgina,

644
00:38:15,600 --> 00:38:17,820
llavors tot el que tracte de fer és no anar a treballar

645
00:38:17,820 --> 00:38:20,580
perquè jo vaig a tractar de triar alguna cosa que no hi és encara.

646
00:38:20,580 --> 00:38:23,780
Així que aquesta línia fins a dalt diu que vull que esperis fins que tot es carrega

647
00:38:23,780 --> 00:38:28,030
pel que està garantit que tots els elements que estic buscant en realitat a la pàgina.

648
00:38:29,730 --> 00:38:34,310
Aquest signe dòlar significa aquí estic fent servir la biblioteca anomenada jQuery.

649
00:38:34,310 --> 00:38:38,570
Aquesta biblioteca jQuery ens permet utilitzar aquests selectors que acabem de veure.

650
00:38:38,570 --> 00:38:44,010
En dir $ llavors per a l'argument aquest # form-cito,

651
00:38:44,010 --> 00:38:47,910
Ara estic seleccionant aquesta manera que ens ho prenem un cop d'ull.

652
00:38:47,910 --> 00:38:52,290
Ara tinc una representació d'aquesta forma en la memòria d'alguna manera.

653
00:38:52,290 --> 00:38:56,760
>> En aquest objecte d'ara, aquesta representació de la forma,

654
00:38:56,760 --> 00:38:58,890
Ara estic usant una funció anomenada successivament.

655
00:38:58,890 --> 00:39:02,710
El que fa aquesta funció és que va a connectar un controlador d'esdeveniments.

656
00:39:02,710 --> 00:39:06,310
L'esdeveniment que escoltarem és l'esdeveniment submit.

657
00:39:06,310 --> 00:39:08,890
Així, quan l'usuari fa clic en què botó Enviar o premeu la tecla Intro,

658
00:39:08,890 --> 00:39:11,730
aquest esdeveniment es va a disparar.

659
00:39:11,730 --> 00:39:16,390
En connectar en això, ara puc reemplaçar el comportament per defecte del formulari.

660
00:39:16,390 --> 00:39:19,770
Sense aquest JavaScript, el formulari es sotmetria a qualsevol arxiu PHP

661
00:39:19,770 --> 00:39:22,110
es va utilitzar en aquest atribut action.

662
00:39:22,110 --> 00:39:25,440
Però en canvi, jo estic dient ara, espera, espera, espera, jo no vull que facis això en realitat.

663
00:39:25,440 --> 00:39:31,140
Vull que això passi abans d'anar i tractar d'enviar a algun arxiu PHP.

664
00:39:31,140 --> 00:39:32,870
Ara, què és el que vull fer?

665
00:39:32,870 --> 00:39:39,270
En aquest punt vull utilitzar AJAX per carregar d'alguna manera en el que el preu de les accions és.

666
00:39:39,270 --> 00:39:44,170
El primer que necessitem saber és quines accions de l'usuari està mirant cap amunt.

667
00:39:44,170 --> 00:39:46,760
Per això vaig a utilitzar un altre selector.

668
00:39:46,760 --> 00:39:49,020
Aquest és el tercer selector vam veure abans.

669
00:39:49,020 --> 00:39:54,460
Això diu que jo vull començar aquest element forma amb una identificació de la forma de cometes.

670
00:39:54,460 --> 00:39:58,440
A continuació, en algun lloc dins de manera que no ha de ser un element d'entrada

671
00:39:58,440 --> 00:40:01,270
que té un nom de símbol.

672
00:40:01,270 --> 00:40:05,460
Si mirem cap enrere en el nostre HTML, vam veure que teníem un input [name = símbol].

673
00:40:05,460 --> 00:40:12,380
Això vol dir que això va a seleccionar la caixa de text que l'usuari escriu en.

674
00:40:12,380 --> 00:40:13,870
Això està bé. Tenim el quadre de text.

675
00:40:13,870 --> 00:40:17,360
Ara només hem de saber el que hi ha dins d'ella.

676
00:40:17,360 --> 00:40:20,290
Per això podem anomenar aquest mètode aquí, aquest val.,

677
00:40:20,290 --> 00:40:23,240
i això em diu que sap el que quadre de text que té.

678
00:40:23,240 --> 00:40:28,160
Vull que em diguis què és el que l'usuari escriu en la caixa de text.

679
00:40:28,160 --> 00:40:34,440
Ara tenim una cadena anomenada símbol que és igual al que l'usuari va escriure polz

680
00:40:34,440 --> 00:40:39,820
Això està bé. Podem utilitzar ara aquesta cadena perquè la nostra petició.

681
00:40:39,820 --> 00:40:42,450
Es tracta d'una nova funció aquí, aquesta $,

682
00:40:42,450 --> 00:40:44,900
excepte que estem ja no serà la selecció d'elements,

683
00:40:44,900 --> 00:40:48,910
estarem cridant a una funció diferent que es proporciona a nosaltres per jQuery.

684
00:40:48,910 --> 00:40:54,810
Aquesta funció AJAX és el que realment farà aquesta petició HTTP.

685
00:40:54,810 --> 00:40:57,000
Així que hem de dir-li unes quantes coses.

686
00:40:57,000 --> 00:41:01,410
El primer que hem de dir que aquesta funció és on vull anar a la petició.

687
00:41:01,410 --> 00:41:08,910
En algun lloc del meu projecte tinc aquest arxiu al directori HTML anomenat quote.php.

688
00:41:08,910 --> 00:41:15,150
Puc accedir a aquesta imatge, vam veure, igual que aquest, si vaig a localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Vull que el meu estigui habilitat per a fer una petició a aquesta pàgina.

690
00:41:20,450 --> 00:41:22,920
Quin tipus de petició ara?

691
00:41:22,920 --> 00:41:27,210
Vam veure abans que la forma que té method = "post" atribut,

692
00:41:27,210 --> 00:41:29,270
i això vol dir que farà una petició POST,

693
00:41:29,270 --> 00:41:32,630
pel que no posarà gens a la URL, en lloc d'una petició GET,

694
00:41:32,630 --> 00:41:36,860
que acaba de ser acomiadat si només accedeix a la pàgina amb el navegador web, per exemple.

695
00:41:36,860 --> 00:41:41,260
Ara hem dit que vull fer una petició HTTP POST

696
00:41:41,260 --> 00:41:44,840
a una pàgina ubicada a quote.php.

697
00:41:44,840 --> 00:41:51,490
Quan s'envia el formulari, recordi que pot accedir als elements d'entrada a l'interior d'aquesta forma

698
00:41:51,490 --> 00:41:54,430
amb la variable $ _POST.

699
00:41:54,430 --> 00:41:58,710
Fins ara, en la història que no s'han enviat al llarg de totes les dades encara.

700
00:41:58,710 --> 00:42:00,640
Ens acaba de dir que estem fent una petició AJAX

701
00:42:00,640 --> 00:42:03,200
i aquí hi ha el tipus de sol · licitud que estem fent.

702
00:42:03,200 --> 00:42:07,090
Ara hem d'enviar realment algunes dades a la pàgina.

703
00:42:07,090 --> 00:42:10,930
Per això podem utilitzar aquesta propietat trucada de dades.

704
00:42:10,930 --> 00:42:14,950
El valor d'aquesta propietat és realment una matriu associativa.

705
00:42:14,950 --> 00:42:19,390
La raó d'això és que ens permet enviar més de només 1 peça de dades.

706
00:42:19,390 --> 00:42:24,750
És per això que tenim aquestes claus aquí niat dins d'aquestes claus altres.

707
00:42:24,750 --> 00:42:29,680
Les claus en aquestes matrius associatives serà la mateixa cosa

708
00:42:29,680 --> 00:42:32,630
com els atributs de nom en els elements del nostre formulari.

709
00:42:32,630 --> 00:42:35,740
Això vol dir que si envio al llarg d'una clau de símbol,

710
00:42:35,740 --> 00:42:41,870
això vol dir que la meva pàgina PHP pot accedir a aquestes dades amb $ _POST [símbol]

711
00:42:41,870 --> 00:42:44,640
tal com ho vam fer abans, quan estàvem enviar un formulari.

712
00:42:44,640 --> 00:42:47,090
I ara les dades reals que volem enviar

713
00:42:47,090 --> 00:42:50,790
serà l'interior valor d'aquesta matriu associativa.

714
00:42:50,790 --> 00:42:54,070
>> Ens van guardar aquest text en un símbol variable anomenada,

715
00:42:54,070 --> 00:42:57,380
i pel que estem enviant al llarg d'avui una tecla de símbol

716
00:42:57,380 --> 00:43:01,380
i el valor del que l'usuari va escriure polz

717
00:43:01,380 --> 00:43:06,270
Ara que hem fet aquesta petició HTTP, el nostre arxiu PHP s'ha executat,

718
00:43:06,270 --> 00:43:11,480
i que enviarà dades de tornada ara per al client que acaba de fer aquesta petició.

719
00:43:11,480 --> 00:43:15,220
Ara hem de respondre al que el servidor ens va dir.

720
00:43:15,220 --> 00:43:20,180
Per fer això tenim aquesta última propietat aquí s'anomena èxit.

721
00:43:20,180 --> 00:43:24,240
El valor d'aquesta clau de l'èxit és en realitat serà una funció,

722
00:43:24,240 --> 00:43:26,910
i aquesta és una de les coses realment interessants que pots fer amb el llenguatge Java.

723
00:43:26,910 --> 00:43:31,720
No només es pot tenir INT o matrius com un valor dins d'una matriu associativa,

724
00:43:31,720 --> 00:43:34,170
també pot tenir una funció.

725
00:43:34,170 --> 00:43:36,380
Així dient èxit, aquesta és la meva clau.

726
00:43:36,380 --> 00:43:38,830
Un còlon diu aquí ve el valor,

727
00:43:38,830 --> 00:43:41,810
i ara el valor d'aquest és en realitat una funció.

728
00:43:41,810 --> 00:43:44,460
Així que no cal donar un nom a aquesta funció en si.

729
00:43:44,460 --> 00:43:48,820
Només podem dir que això serà alguna funció. Va a prendre un argument.

730
00:43:48,820 --> 00:43:51,190
L'argument per a aquesta funció serà

731
00:43:51,190 --> 00:43:54,460
qualsevol que sigui el servidor ens va enviar de tornada de la sol · licitud.

732
00:43:54,460 --> 00:43:57,750
Igual que quan el nostre navegador fa una petició, el servidor envia alguna cosa a canvi

733
00:43:57,750 --> 00:43:59,060
i el navegador que mostra,

734
00:43:59,060 --> 00:44:03,030
en el marc d'AJAX que acaba de fer una petició, el servidor envia alguna cosa a canvi,

735
00:44:03,030 --> 00:44:07,110
i ara hem de representar com una cadena.

736
00:44:07,110 --> 00:44:11,280
Amb aquesta cadena m'agradaria mostrar que a la pàgina.

737
00:44:11,280 --> 00:44:14,040
Per això vaig a tenir un selector passat.

738
00:44:14,040 --> 00:44:17,570
Vull seleccionar l'element amb el preu d'identificació.

739
00:44:17,570 --> 00:44:20,710
Això és només un div buit que he creat a la pàgina,

740
00:44:20,710 --> 00:44:26,640
i vull establir el contingut d'aquest div a ser el que el servidor ens van enviar de tornada.

741
00:44:26,640 --> 00:44:30,280
De fet, he modificat una mica quote.php.

742
00:44:30,280 --> 00:44:33,460
>> En lloc de cridar render i fent alguna pàgina,

743
00:44:33,460 --> 00:44:38,100
quote.php ara simplement es va a imprimir el valor de l'acció com una cadena.

744
00:44:38,100 --> 00:44:41,880
Així que si vostè anés a visitar la pàgina en realitat, vostè acaba de veure aquesta cadena petita

745
00:44:41,880 --> 00:44:45,030
qualsevol que sigui el preu de les accions és.

746
00:44:45,030 --> 00:44:50,170
Una última cosa que necessitem fer aquí és simplement assegurar-se que aquesta funció retorna false.

747
00:44:50,170 --> 00:44:53,560
El que això diu és que si jo estic dins d'un controlador d'esdeveniments

748
00:44:53,560 --> 00:44:57,300
i aquest controlador d'esdeveniments retorna false en comptes de tornar cert,

749
00:44:57,300 --> 00:45:01,510
això vol dir que jo no vull que l'esdeveniment original al foc.

750
00:45:01,510 --> 00:45:05,270
En aquest cas, si no tinguéssim cap JavaScript i ens envia un formulari,

751
00:45:05,270 --> 00:45:08,280
nostre navegador web que dirà: "Jo vaig a enviar aquestes dades al llarg d'"

752
00:45:08,280 --> 00:45:10,130
i ells et van a enviar a una altra pàgina.

753
00:45:10,130 --> 00:45:14,360
Com que estem utilitzant AJAX ara, no hi ha necessitat d'enviar a l'usuari a una altra pàgina.

754
00:45:14,360 --> 00:45:17,920
Només anem a mostrar els resultats de forma dinàmica en aquesta mateixa pàgina.

755
00:45:17,920 --> 00:45:21,460
Nosaltres realment no volem que anar enlloc, i em vull quedar a la mateixa pàgina.

756
00:45:21,460 --> 00:45:27,060
Així que tornant fals, ens assegurem que la forma no ho fa per nosaltres.

757
00:45:27,060 --> 00:45:31,170
Fem una ullada al que en realitat sembla.

758
00:45:31,170 --> 00:45:34,180
La nostra pàgina de cotitzacions es veu igual.

759
00:45:34,180 --> 00:45:37,240
Deixeu-me treure l'inspector aquí sota perquè puguem veure el que està passant.

760
00:45:37,240 --> 00:45:40,270
Que sigui una mica menys gran.

761
00:45:40,270 --> 00:45:44,590
Recordi que si obrim la pestanya Xarxa, aquí és on podem veure totes les peticions HTTP

762
00:45:44,590 --> 00:45:47,570
que s'estan produint a la pàgina.

763
00:45:47,570 --> 00:45:52,890
>> Per a un símbol m'ho dius a mi escriure AAPL i feu clic a Obtenir cotització.

764
00:45:52,890 --> 00:45:56,720
Ara hem vist que una part d'Apple costa una mica de quantitat de dòlars

765
00:45:56,720 --> 00:46:00,410
acaba d'aparèixer a la pàgina, però la direcció no ha canviat en absolut.

766
00:46:00,410 --> 00:46:04,570
De fet, aquesta és la petició HTTP que acaba de fer.

767
00:46:04,570 --> 00:46:09,980
Hem fet una petició POST a quote.php. Això té sentit.

768
00:46:09,980 --> 00:46:12,800
Això és el que el servidor ens van enviar de tornada.

769
00:46:12,800 --> 00:46:16,320
Ja no és aquest document gegantí HTML amb imatges i coses per l'estil,

770
00:46:16,320 --> 00:46:20,920
és només una línia de text, i llavors només es mostra la línia de text.

771
00:46:20,920 --> 00:46:26,290
Si ens remuntem als encapçalats i veure el que en realitat enviat dins d'aquesta petició HTTP,

772
00:46:26,290 --> 00:46:33,950
podem veure aquí que es va enviar al llarg d'una tecla de símbol i un valor de AAPL,

773
00:46:33,950 --> 00:46:36,430
que és el que l'usuari va escriure polz

774
00:46:36,430 --> 00:46:39,230
Això és bo, però tot i així és una mica molest.

775
00:46:39,230 --> 00:46:42,490
Encara ha de fer clic en aquest botó per obtenir la cotització d'accions.

776
00:46:42,490 --> 00:46:45,880
Som persones molt ocupades i no tenen temps per fer clic en els botons.

777
00:46:45,880 --> 00:46:49,910
Google es va adonar d'aquest petit fa un temps quan van implementar Google Instant.

778
00:46:49,910 --> 00:46:53,590
Què és Google Instant fa com que està escrivint simplement comença a mostrar resultats per a vostè

779
00:46:53,590 --> 00:46:56,520
pel que no s'ha de preocupar de tan sols fer clic a Cerca.

780
00:46:56,520 --> 00:46:58,730
En realitat, una divertida història relacionada amb això.

781
00:46:58,730 --> 00:47:01,100
Quan Google Instant va sortir, la gent estava com, "Whoa, això és súper increïble".

782
00:47:01,100 --> 00:47:02,540
"Això és genial."

783
00:47:02,540 --> 00:47:05,950
I un estudiant per la Universitat de Stanford que tenia 19 anys en el moment

784
00:47:05,950 --> 00:47:09,000
fet d'aquest lloc anomenat YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Tots YouTube Instant fa és buscar a YouTube eficaçment a l'instant.

786
00:47:13,170 --> 00:47:17,020
Així que en lloc d'haver d'anar a YouTube.com i premi Cercar,

787
00:47:17,020 --> 00:47:21,650
quan em poso a escriure alguna cosa a YouTube Instant, com CS50,

788
00:47:21,650 --> 00:47:25,320
podem veure aquí que està intentant en una connexió lenta a Internet

789
00:47:25,320 --> 00:47:28,500
poblar aquests resultats viure.

790
00:47:28,500 --> 00:47:35,590
Perquè en realitat podem fer una modificació molt senzilla al nostre arxiu quote.js.

791
00:47:35,590 --> 00:47:40,900
En aquest moment estem adjuntant aquest esdeveniment quan s'envia el formulari.

792
00:47:40,900 --> 00:47:43,760
Nosaltres realment no volem fer que l'usuari enviï aquesta manera mai més,

793
00:47:43,760 --> 00:47:48,570
així que en comptes disparar aquest esdeveniment cada vegada que l'usuari prem una tecla.

794
00:47:48,570 --> 00:47:53,200
Per això primer hem de canviar l'esdeveniment de presentar keyup.

795
00:47:53,200 --> 00:47:55,740
Això vol dir que, en lloc d'esperar que la manera de presentar,

796
00:47:55,740 --> 00:47:58,490
cada vegada que es prem la tecla, alguna cosa va a succeir.

797
00:47:58,490 --> 00:48:02,030
Ja no té sentit afegir aquest esdeveniment KeyUp per tot el formulari.

798
00:48:02,030 --> 00:48:05,080
Realment només es preocupen per la caixa de recerca.

799
00:48:05,080 --> 00:48:09,320
>> Per seleccionar que ara, podem canviar això a ser, més que la forma de cometes,

800
00:48:09,320 --> 00:48:14,220
forma de cometes i tindrem una entrada (escriure text =) o podríem dir (nom del símbol =) -

801
00:48:14,220 --> 00:48:16,420
el que vulguem.

802
00:48:16,420 --> 00:48:18,650
Ara hi ha una última cosa que hem de fer.

803
00:48:18,650 --> 00:48:21,190
Cal recordar ací que vam dir return false

804
00:48:21,190 --> 00:48:24,370
hem dit que no volem que esdeveniments predeterminat per disparar.

805
00:48:24,370 --> 00:48:26,390
Però dóna la casualitat que si desactivem que ara,

806
00:48:26,390 --> 00:48:29,660
qualsevol cosa que escrigui no es mostrarà en el navegador més

807
00:48:29,660 --> 00:48:33,000
perquè això seria el comportament predeterminat d'escriure en un quadre de text.

808
00:48:33,000 --> 00:48:38,660
Ja no vull canviar això, així que anem a destruir aquest return false.

809
00:48:38,660 --> 00:48:44,800
Si estalviem això i tornar a carregar la pàgina, ara quan començo a escriure AAPL

810
00:48:44,800 --> 00:48:50,160
veuràs que el preu de les accions en el fons aquí està finalitzant de forma automàtica.

811
00:48:50,160 --> 00:48:53,150
Així que aquí està CS50 instantània Finances.

812
00:48:53,150 --> 00:48:55,860
En realitat, una divertida història sobre la instantània de YouTube

813
00:48:55,860 --> 00:48:59,420
és que els estudiants només una mica del escriure com un projecte de 1-nit,

814
00:48:59,420 --> 00:49:03,800
i al dia següent se li va oferir un lloc de treball pel CEO de YouTube.

815
00:49:03,800 --> 00:49:10,610
Llavors, tan simple com això, CS50 estudiants, els seus projectes finals poden aconseguir-li un treball a YouTube.

816
00:49:10,610 --> 00:49:14,720
Una cosa així com que és una idea genial per a un projecte final, no?

817
00:49:14,720 --> 00:49:18,170
Vam tenir una mica de la funcionalitat existent que volíem integrar amb.

818
00:49:18,170 --> 00:49:20,330
Millorem l'experiència de l'usuari una mica,

819
00:49:20,330 --> 00:49:24,340
i de sobte buscant alguna cosa a YouTube Instant podria ser un munt més fàcil

820
00:49:24,340 --> 00:49:27,290
de buscar a YouTube regular.

821
00:49:27,290 --> 00:49:30,790
Així que això és AJAX en poques paraules.

822
00:49:30,790 --> 00:49:34,860
>> En els exemples que es mostren Joseph, vam veure un munt de autocompletes,

823
00:49:34,860 --> 00:49:39,250
i els completa automàticament són molt, molt pràctic, ja que no ha de recordar -

824
00:49:39,250 --> 00:49:41,770
Per exemple, si vostè no recorda el preu de les accions d'Apple

825
00:49:41,770 --> 00:49:45,110
i només sé que és una cosa aa, i no només que em deia:

826
00:49:45,110 --> 00:49:48,740
"A part d'això costa tants diners",

827
00:49:48,740 --> 00:49:52,540
Hi havia una mena de saber quines accions comencen amb aa.

828
00:49:52,540 --> 00:49:58,340
Podem fer-ho realment bé amb la biblioteca de Som-hi que ja està inclòs

829
00:49:58,340 --> 00:50:01,380
dins CS50 Finances.

830
00:50:01,380 --> 00:50:09,390
Si vostè ve aquí amb l'etiqueta de JavaScript i desplaceu-vos cap avall per TYPEAHEAD,

831
00:50:09,390 --> 00:50:13,730
això és només un complement agradable que algú ja va escriure per a nosaltres,

832
00:50:13,730 --> 00:50:16,980
i que pugui utilitzar i la seva funcionalitat com aquesta.

833
00:50:16,980 --> 00:50:21,410
He escrit en una A i aquí està una llista d'alguns estats que comencen amb A.

834
00:50:21,410 --> 00:50:25,360
Diguem que crec que és molt bo i és el moment per a mi per incloure això en la meva pàgina.

835
00:50:25,360 --> 00:50:28,300
Resulta que això és molt, molt simple.

836
00:50:28,300 --> 00:50:32,810
Anem a saltar per sobre d'aquí a quote3.js.

837
00:50:34,890 --> 00:50:37,380
El meu arxiu es veu una mica diferent.

838
00:50:37,380 --> 00:50:39,700
Aquí sota totes les meves coses AJAX és el mateix.

839
00:50:39,700 --> 00:50:43,170
Vull carregar les dades de saldos sense haver d'anar a una altra pàgina.

840
00:50:43,170 --> 00:50:46,220
Però ara vull fer servir aquest plugin.

841
00:50:46,220 --> 00:50:51,020
La documentació Bootstrap té grans exemples de com és exactament el que pot fer això.

842
00:50:51,020 --> 00:50:54,350
Vull dir: "Sóc l'entrada que vull autocompletar a"

843
00:50:54,350 --> 00:50:56,640
i jo vaig a cridar a aquesta funció es diu typeahead,

844
00:50:56,640 --> 00:50:59,730
i que va a manejar totes les coses TYPEAHEAD per a nosaltres.

845
00:50:59,730 --> 00:51:02,090
S'obrirà la llista, farà tots els nostres filtrat.

846
00:51:02,090 --> 00:51:06,680
L'única cosa que necessita saber és quines dades estem en compleció automàtica.

847
00:51:06,680 --> 00:51:10,480
Així que em vaig assabentar d'aquesta clau amb només llegir la documentació i mirant als exemples.

848
00:51:10,480 --> 00:51:14,150
Si li dono una clau d'origen, el valor d'aquesta clau

849
00:51:14,150 --> 00:51:17,770
és només un conjunt de coses que vull emplenament automàtic.

850
00:51:17,770 --> 00:51:20,180
Aquesta variable vi d'aquest altre arxiu.

851
00:51:20,180 --> 00:51:23,400
Obro symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Això és només symbols.js aquesta matriu molt, molt gran que conté cadenes

853
00:51:27,980 --> 00:51:32,080
de tots aquests símbols de cotització del Nasdaq.

854
00:51:32,080 --> 00:51:42,190
Si vull saltar de nou a l'HTML, jharvard així, vhosts, globalhost, html, plantilles,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Com que ara es diu quote3.js, deixa canviar l'arxiu JavaScript estic incloent aquí.

857
00:51:50,910 --> 00:51:55,110
Ara tinc quote3.js, així que em vaig a carregar a l'arxiu JavaScript separat,

858
00:51:55,110 --> 00:51:57,910
el que ha de Bootstrap autocompletat.

859
00:51:57,910 --> 00:52:04,430
Ara, quan jo salt de tornada al navegador, torneu a carregar la pàgina, i em poso a escriure aa,

860
00:52:04,430 --> 00:52:06,880
aquí està el meu autocompletat. I va ser realment tan simple com això.

861
00:52:06,880 --> 00:52:11,400
Jo tenia una línia de codi que acabo de dir, "Aquestes són les coses que vull autocompletar a"

862
00:52:11,400 --> 00:52:16,590
i de sobte tinc aquesta funcionalitat molt, molt agradable, amb no gaire esforç en absolut.

863
00:52:16,590 --> 00:52:19,810
Com estàs desenvolupant llocs web i especialment el costat frontal de les coses,

864
00:52:19,810 --> 00:52:21,840
vostè trobarà aquest és el cas molt.

865
00:52:21,840 --> 00:52:25,700
Hi ha molt, molt, molt de biblioteques gratuïtes molt interessants per aquí

866
00:52:25,700 --> 00:52:30,190
que fan que sigui molt fàcil de fer les coses d'aquesta manera.

867
00:52:30,190 --> 00:52:37,230
Algú pot pensar en cap inconvenients de simplement autocompletar en aquesta llarga llista de símbols?

868
00:52:37,230 --> 00:52:41,580
Què podria ser alguna cosa que no és el millor amb aquest enfocament?

869
00:52:42,790 --> 00:52:45,960
Si. >> [Estudiant] El temps, si vostè té un munt de [inaudible]

870
00:52:45,960 --> 00:52:50,420
Si. En aquest moment estem descarregant l'arxiu JavaScript enorme i hi ha un munt de símbols.

871
00:52:50,420 --> 00:52:54,360
I el que si tenim un munt de coses, aquest tipus podria d'augmentar la latència de cerca no només

872
00:52:54,360 --> 00:52:56,600
sinó també descarregar l'arxiu real.

873
00:52:56,600 --> 00:52:58,670
Gran. Alguna cosa més?

874
00:53:01,950 --> 00:53:05,280
En aquest moment no hi ha veritable sentit de pertinença.

875
00:53:05,280 --> 00:53:08,190
Si escric en una A, les companyies que apareixen aquí

876
00:53:08,190 --> 00:53:11,220
no poden ser les companyies més populars que comencen amb A.

877
00:53:11,220 --> 00:53:17,130
>> Abans d'entrar a Apple, que podria prendre alguns personatges més per trobar el que estic buscant.

878
00:53:17,130 --> 00:53:20,420
Aquesta funció Emplenament automàtic no té aquest sentit de pertinença.

879
00:53:20,420 --> 00:53:24,400
És només dirà: "Tot el que coincideix amb que vaig a mostrar".

880
00:53:24,400 --> 00:53:30,510
En lloc d'això, m'agradaria integrar d'alguna manera alguna rellevància en les meves recerques.

881
00:53:30,510 --> 00:53:36,440
Si em vaig d'aquí a Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Si tracte d'introduir un símbol en la pàgina Yahoo! Finances

883
00:53:42,100 --> 00:53:52,310
i em poso a escriure goog, tinc aquesta bonica llista de les coses.

884
00:53:52,310 --> 00:53:57,100
Clarament, sembla Finances Yahoo! està fent alguna cosa més intel · ligent aquí.

885
00:53:57,100 --> 00:53:59,790
Tenen certa rellevància i també tenen informació addicional

886
00:53:59,790 --> 00:54:01,430
com el nom de l'acció.

887
00:54:01,430 --> 00:54:05,850
Això és una cosa que no puc aconseguir amb només la meva llista de valors dels símbols.

888
00:54:05,850 --> 00:54:09,520
Vull això i per això m'ho vaig a prendre.

889
00:54:09,520 --> 00:54:11,790
Per això farem un parell de coses.

890
00:54:11,790 --> 00:54:15,580
Primer obrirem l'inspector en aquesta pàgina

891
00:54:15,580 --> 00:54:18,100
perquè vam veure que aquesta pàgina no es carrega en absolut,

892
00:54:18,100 --> 00:54:21,960
pel que és probable que l'ús d'AJAX d'alguna manera a carregar les seves dades.

893
00:54:21,960 --> 00:54:23,920
Podem esbrinar quines dades s'està carregant.

894
00:54:23,920 --> 00:54:28,390
Si faig clic en aquesta fitxa Xarxa, aquests seran totes les peticions que comencen a ser acomiadat.

895
00:54:28,390 --> 00:54:34,020
Ara bé, si escric en goo, podem veure que acabo de rebre una petició HTTP nova.

896
00:54:34,020 --> 00:54:37,490
Aquesta és, probablement, on les dades està venint.

897
00:54:37,490 --> 00:54:41,990
Efectivament, si miro aquesta URL, que és una mica estrany nom,

898
00:54:41,990 --> 00:54:46,930
podem veure que això és exactament on Yahoo és l'enviament de les seves dades.

899
00:54:46,930 --> 00:54:53,400
>> He creat un arxiu separat anomenat suggest.php que és molt similar a la de la funció de cerca.

900
00:54:53,400 --> 00:54:57,730
És, bàsicament, farà una consulta a l'URL de Yahoo, tornar algunes dades,

901
00:54:57,730 --> 00:54:59,750
i l'envia de nou a mi.

902
00:54:59,750 --> 00:55:02,570
Ara, en lloc d'utilitzar aquesta llista gran, enorme de símbols,

903
00:55:02,570 --> 00:55:05,280
Puc utilitzar coses bones de Yahoo rellevància,

904
00:55:05,280 --> 00:55:08,150
i no haver de descarregar l'arxiu massiu JavaScript.

905
00:55:08,150 --> 00:55:12,040
Només vaig a enderrocar els símbols de cotització realment rellevants.

906
00:55:12,040 --> 00:55:13,960
Entrem en això.

907
00:55:13,960 --> 00:55:17,360
Així html, js. Ara estem en quote4.

908
00:55:17,360 --> 00:55:22,120
Ara ja no estem utilitzant aquesta gran llista de fitxers JavaScript.

909
00:55:22,120 --> 00:55:24,430
Però hi ha un tipus reduït de problema de disseny aquí.

910
00:55:24,430 --> 00:55:28,200
Hem dit que l'A d'AJAX és asíncrona.

911
00:55:28,200 --> 00:55:31,000
El que això significa és que quan faig una petició AJAX,

912
00:55:31,000 --> 00:55:36,490
tan a la dreta aquí a la línia 8, que és on la meva petició AJAX és en realitat disparar.

913
00:55:36,490 --> 00:55:40,370
Diguem que ara tinc una mica de codi per aquí que farà algunes coses

914
00:55:40,370 --> 00:55:43,930
desitja alertar a l'usuari o alguna cosa canvi a la pàgina.

915
00:55:43,930 --> 00:55:49,830
El que no passarà és que el navegador no esperarà a que aquesta sol · licitud per continuar

916
00:55:49,830 --> 00:55:53,480
abans de baixar i colpejar a aquesta línia.

917
00:55:53,480 --> 00:55:55,900
Aquesta és la part asíncrona.

918
00:55:55,900 --> 00:55:58,400
Farà aquesta petició i deia: "Cada vegada que hagi acabat,

919
00:55:58,400 --> 00:56:03,080
"Tornar i cridar a aquesta funció que et vaig dir que et cridi l'interior de l'èxit."

920
00:56:03,080 --> 00:56:07,300
Això significa que no només pot descarregar tots els estocs per endavant.

921
00:56:07,300 --> 00:56:10,300
Hem de fer la sol · licitud i esperar que alguna cosa torni.

922
00:56:10,300 --> 00:56:13,330
Això vol dir que abans, podríem simplement dir-li Som-hi,

923
00:56:13,330 --> 00:56:15,580
"Aquí està la llista de coses que vol en funció d'autocompletar".

924
00:56:15,580 --> 00:56:18,950
Ja no podem fer això perquè no sabem

925
00:56:18,950 --> 00:56:21,780
el que volem en realitat emplenament automàtic.

926
00:56:21,780 --> 00:56:25,190
Per sort, Bootstrap pensat en això perquè són nois intel · ligents més enllà,

927
00:56:25,190 --> 00:56:30,160
i que en realitat ens va donar una altra forma de carregar aquest connector TYPEAHEAD.

928
00:56:30,160 --> 00:56:35,630
Abans, el valor d'aquesta propietat d'origen era aquest gran conjunt de coses que emplenament automàtic.

929
00:56:35,630 --> 00:56:39,580
>> Ara la propietat d'origen és en realitat una funció,

930
00:56:39,580 --> 00:56:44,580
i el propòsit d'aquesta funció és determinar quines són les coses a Autocomplete en som.

931
00:56:44,580 --> 00:56:48,730
La manera com es donarà compte d'això és que demanarà Yahoo! Finances

932
00:56:48,730 --> 00:56:51,750
quines són les millors coses que es Autocomplete.

933
00:56:51,750 --> 00:56:54,500
Per això vaig a fer una petició AJAX molt similar.

934
00:56:54,500 --> 00:56:59,010
Vaig a demanar aquesta pàgina a suggest.php.

935
00:56:59,010 --> 00:57:01,360
Vull enviar al llarg dels símbols encara.

936
00:57:01,360 --> 00:57:05,570
I ara el meu èxit, la documentació Bootstrap em va dir

937
00:57:05,570 --> 00:57:09,130
que, per poblar la llista de les coses,

938
00:57:09,130 --> 00:57:14,370
tot el que ha de fer és passar d'aquesta matriu ara a la funció de devolució de trucada.

939
00:57:14,370 --> 00:57:15,660
Espereu un minut.

940
00:57:15,660 --> 00:57:20,240
Si això se suposa que és una matriu i AJAX m'està enviant de nou el text,

941
00:57:20,240 --> 00:57:22,720
Com és això possible?

942
00:57:22,720 --> 00:57:27,910
Això introdueix una nova forma d'intercanvi de dades anomenats JSON.

943
00:57:27,910 --> 00:57:33,000
En aquest cas no només estem tornant una simple cadena de text.

944
00:57:33,000 --> 00:57:37,670
Ara ens enfrontem a aquesta llista més complexa de símbols de valor.

945
00:57:37,670 --> 00:57:41,730
Aquests símbols d'acció també pot incloure coses com el nom de l'empresa o dels preus actuals.

946
00:57:41,730 --> 00:57:47,550
Només mitjançant una cadena gran llarg que no està formatat d'alguna manera predictible

947
00:57:47,550 --> 00:57:51,970
no serà la millor manera d'obtenir aquesta informació des del servidor de Yahoo per a mi

948
00:57:51,970 --> 00:57:54,540
d'una manera que jo pugui comprendre fàcilment.

949
00:57:54,540 --> 00:58:01,280
JSON és una tecnologia que aprofita els avantatges de com crear matrius associatives en JavaScript.

950
00:58:01,280 --> 00:58:04,510
Això s'assembla molt a una matriu de JavaScript associatiu,

951
00:58:04,510 --> 00:58:06,600
i, de fet, és perquè ho és.

952
00:58:06,600 --> 00:58:09,710
JSON és sinònim Javascript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Això és bàsicament un acord sobre format per a la transferència de dades en ambdós sentits.

954
00:58:15,020 --> 00:58:18,280
Aquí aquest objecte o JSON JSON aquesta matriu associativa

955
00:58:18,280 --> 00:58:21,010
m'està enviant algunes dades sobre un curs.

956
00:58:21,010 --> 00:58:25,110
>> Les claus d'aquest acord són coses com el curs que té un valor de CS50,

957
00:58:25,110 --> 00:58:29,140
i aquí podem veure que puc tenir un valor que és una matriu.

958
00:58:29,140 --> 00:58:32,730
Jo no he de fer coses com parse per cadenes i buscar comes

959
00:58:32,730 --> 00:58:35,330
i fer bogeries per l'estil.

960
00:58:35,330 --> 00:58:38,820
A causa d'això s'ha consignat en aquest format JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript i jQuery ja tenen funcions per convertir una cadena

962
00:58:43,510 --> 00:58:48,140
que té aquest aspecte JSON en una veritable matriu de JavaScript associatiu

963
00:58:48,140 --> 00:58:50,440
que podem treballar.

964
00:58:50,440 --> 00:58:56,660
Fer això és tan senzill com dir que ja no és aquest arxiu, suggest.php,

965
00:58:56,660 --> 00:58:59,040
enviar de tornada simplement una cadena de text,

966
00:58:59,040 --> 00:59:01,950
però sé que serà em retornant JSON.

967
00:59:01,950 --> 00:59:06,760
Això vol dir que JSON que es pot convertir en una matriu de JavaScript associatiu.

968
00:59:06,760 --> 00:59:10,830
I així, jQuery, m'agradaria que fessis això per mi.

969
00:59:10,830 --> 00:59:13,990
Això vol dir que aquest paràmetre de resposta aquí,

970
00:59:13,990 --> 00:59:16,070
això ja no és només una cadena.

971
00:59:16,070 --> 00:59:19,860
Perquè hem dit jQuery que aquí ve una mica de JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery serà prou intel · ligent com per dir: "Vostè volia JSON?"

973
00:59:22,950 --> 00:59:26,890
"Vaig a convertir això en una matriu associativa per a tu."

974
00:59:26,890 --> 00:59:32,100
Anem realment fer una ullada a la fitxa Xarxa una vegada que tinguem quote4.js.

975
00:59:32,100 --> 00:59:35,400
Anem a canviar això i tornar a carregar la pàgina.

976
00:59:37,150 --> 00:59:41,250
Ara vaig a escriure a-a de nou.

977
00:59:41,250 --> 00:59:45,600
He fet un parell de peticions a suggest.php, però ara aquesta resposta,

978
00:59:45,600 --> 00:59:48,670
i no només la cadena, és JSON.

979
00:59:48,670 --> 00:59:52,580
Així que tinc una clau oberta arrissat dient: "Aquí ve una matriu associativa."

980
00:59:52,580 --> 00:59:56,830
>> La clau de la primera i única d'aquesta matriu associativa es diu símbols,

981
00:59:56,830 --> 01:00:00,240
i llavors aquí és un conjunt de tots els símbols rellevants

982
01:00:00,240 --> 01:00:04,820
venint ara des Yahoo! Finances no, d'aquesta llista gegantina.

983
01:00:06,110 --> 01:00:10,630
Així és com jo, simplement pot omplir aquest plugin Autocomplete

984
01:00:10,630 --> 01:00:14,280
amb algunes dades que no ve d'un arxiu local que ja està predeterminat

985
01:00:14,280 --> 01:00:17,490
sinó d'alguna cosa més.

986
01:00:17,490 --> 01:00:21,160
Resulta que en realitat podem prendre avantatge d'una tecnologia anomenada JSONP,

987
01:00:21,160 --> 01:00:27,420
o JSON amb farciment, que eliminarà aquest intermediari suggest.php.

988
01:00:27,420 --> 01:00:34,010
Però en lloc de fer això, anem a fer una ullada en comptes de com puc millorar això encara més.

989
01:00:34,010 --> 01:00:36,040
M'agrada molt TYPEAHEAD Bootstrap. És realment agradable.

990
01:00:36,040 --> 01:00:39,570
Però ens estem tornant bo en JavaScript i volem fer aquesta classe de nosaltres mateixos,

991
01:00:39,570 --> 01:00:43,870
potser fer una ullada al que aquest plugin podria estar fent.

992
01:00:43,870 --> 01:00:46,500
Anem a no fer servir aquesta cosa TYPEAHEAD,

993
01:00:46,500 --> 01:00:50,550
i tractarem de fer aquesta llista d'accions suggerides nosaltres mateixos.

994
01:00:50,550 --> 01:00:53,790
Aquí a quote6.php anem a començar la mateixa manera.

995
01:00:53,790 --> 01:00:58,050
Cada vegada que algú escriu alguna cosa, volem fer una petició AJAX.

996
01:00:58,050 --> 01:01:01,590
Això és similar al nostre instant original Finances CS50.

997
01:01:01,590 --> 01:01:05,020
En lloc de fer una petició a quote.php,

998
01:01:05,020 --> 01:01:08,530
ara estem fent una petició a aquest arxiu com abans, aquesta suggest.php,

999
01:01:08,530 --> 01:01:12,460
que només va a extreure dades de Yahoo! Finances.

1000
01:01:12,460 --> 01:01:19,480
>> Un cop més, encara estem esperant JSON, però ara des del TYPEAHEAD no està fent això per nosaltres,

1001
01:01:19,480 --> 01:01:24,850
també hem d'enviar pel valor que es troba dins del quadre de text actual.

1002
01:01:24,850 --> 01:01:28,120
Ara sabem què demanar Finances Yahoo! per,

1003
01:01:28,120 --> 01:01:34,160
i el que ara aquí és la funció que volem executar un cop la sol · licitud finalitza.

1004
01:01:34,160 --> 01:01:36,520
No tens el plugin per fer la llista per a nosaltres,

1005
01:01:36,520 --> 01:01:40,630
així que aquí és on estem en realitat va a construir una llista de suggeriments.

1006
01:01:40,630 --> 01:01:44,850
Per això, igual que en PHP es concatenen aquestes cadenes grans d'HTML

1007
01:01:44,850 --> 01:01:48,170
llavors la seva impressió, no podem fer exactament el mateix en JavaScript.

1008
01:01:48,170 --> 01:01:51,850
En primer lloc anem a començar aquesta cadena anomenada suggeriments,

1009
01:01:51,850 --> 01:01:54,590
i aquesta cadena és només va a contenir una mica d'HTML.

1010
01:01:54,590 --> 01:01:58,320
Volem que sigui una llista de les coses, així que anem a començar amb aquesta llista d'etiquetes,

1011
01:01:58,320 --> 01:02:03,340
i ara anem a iterar sobre tots els símbols que es van tornar de nou a nosaltres.

1012
01:02:03,340 --> 01:02:06,500
Recordeu, ja ho hem dit tipus de dades: 'json', això no és una cadena.

1013
01:02:06,500 --> 01:02:09,500
Això ja és una matriu per a nosaltres. Això és realment genial.

1014
01:02:09,500 --> 01:02:13,790
Podem simplement dir: "Vull afegir un element de llista".

1015
01:02:13,790 --> 01:02:16,000
El posarem dins d'un element en un costat d'això,

1016
01:02:16,000 --> 01:02:19,030
donarem una classe de suggeriments perquè sapiguem el que és,

1017
01:02:19,030 --> 01:02:23,880
i ara aquí és el símbol que vam tornar de Yahoo! Finances.

1018
01:02:23,880 --> 01:02:27,230
>> Quan hem creat un element per a cada un dels símbols que hem arribat de nou,

1019
01:02:27,230 --> 01:02:30,100
només volem tancar la llista.

1020
01:02:30,100 --> 01:02:33,040
Així que ara suggeriments representa aquest fragment poc d'HTML

1021
01:02:33,040 --> 01:02:37,860
que quan es posen en una pàgina que serà la llista de les coses que estem buscant.

1022
01:02:37,860 --> 01:02:41,070
Ara anem a posar això en realitat a la pàgina.

1023
01:02:41,070 --> 01:02:46,390
Per fer-ho realitat, he creat un altre div buit i m'he donat un ID de suggeriments.

1024
01:02:46,390 --> 01:02:52,520
Igual que establir el contingut del div de mostrar el preu de les dades de saldos,

1025
01:02:52,520 --> 01:02:58,600
ara només vull establir el contingut d'aquest div al que aquesta cadena és

1026
01:02:58,600 --> 01:03:00,290
que conté aquests símbols.

1027
01:03:00,290 --> 01:03:07,650
Mitjançant l'ús d'aquest mètode HTML, aquesta variable suggeriments, aquesta cadena, és una cadena d'HTML.

1028
01:03:07,650 --> 01:03:13,490
Vull que prendre aquest HTML i el va posar dins del div anomenat suggeriments.

1029
01:03:13,490 --> 01:03:15,680
Hem afegit alguna cosa a la DOM ara.

1030
01:03:15,680 --> 01:03:20,360
Hem afegit alguns nous elements al DOM que ara podem mostrar a la pàgina.

1031
01:03:20,360 --> 01:03:22,540
Anem a veure com es veu.

1032
01:03:22,540 --> 01:03:29,110
Si carreguem en quote6 i ara tornem,

1033
01:03:29,110 --> 01:03:34,480
ara quan començo a escriure AAPL, ja no hem de Bootstrap Autocomplete,

1034
01:03:34,480 --> 01:03:38,470
però ara tenim aquesta llista que ens va fer.

1035
01:03:38,470 --> 01:03:43,230
Això és una mica més lleig que el TYPEAHEAD Bootstrap, per exemple,

1036
01:03:43,230 --> 01:03:45,580
però ens permet fer una altra cosa.

1037
01:03:45,580 --> 01:03:48,660
Quan estàvem buscant a aquest plugin Som-hi,

1038
01:03:48,660 --> 01:03:52,590
vam veure que quan Emplenament automàtic, un dels valors de autocompletat era AAPL.

1039
01:03:52,590 --> 01:03:54,820
Això podria no ser tan útil.

1040
01:03:54,820 --> 01:03:59,100
Com a usuari, no pot reconèixer immediatament tots els símbols de valor.

1041
01:03:59,100 --> 01:04:02,370
El que jo sóc probablement més propensos a reconèixer són els noms reals de l'empresa.

1042
01:04:02,370 --> 01:04:05,310
Llavors, ¿no seria realment útil si en comptes de dir AAPL

1043
01:04:05,310 --> 01:04:07,970
aquest va dir alguna cosa com Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Com que hem rodat aquest nosaltres mateixos, podem molt fàcilment fer això.

1045
01:04:12,240 --> 01:04:17,630
Anem a obrir el nostre fitxer última cita aquí, així que quote7.

1046
01:04:17,630 --> 01:04:23,200
>> És el mateix. Acabo de crear un altre arxiu PHP que torni a nosaltres més que els símbols.

1047
01:04:23,200 --> 01:04:25,550
També ens retornarà els noms de l'empresa.

1048
01:04:25,550 --> 01:04:28,150
I el que estem fent el mateix. Estem fent una petició AJAX.

1049
01:04:28,150 --> 01:04:32,370
Una vegada que la sol · licitud ha acabat, anem a executar aquesta funció aquí,

1050
01:04:32,370 --> 01:04:36,520
i aquesta funció es construirà una cadena gran d'elements.

1051
01:04:36,520 --> 01:04:39,520
Però la diferència aquí és que el valor d'aquestes llistes ja no és només el símbol,

1052
01:04:39,520 --> 01:04:45,370
és ara el nom.

1053
01:04:45,370 --> 01:04:47,070
Així que tenim un petit problema.

1054
01:04:47,070 --> 01:04:51,590
Quan fem servir la nostra recerca, hem de passar d'alguna manera el símbol.

1055
01:04:51,590 --> 01:04:54,950
No podem deixar passar una mica de recerca com Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Cal passar-MSFT.

1057
01:04:57,900 --> 01:05:01,640
Quan estem escrivint HTML, tenim un munt de bons atributs incorporats.

1058
01:05:01,640 --> 01:05:05,440
Una A podria haver associat un href o una classe.

1059
01:05:05,440 --> 01:05:08,230
Però el que realment necessitem ara és que cada un d'aquests enllaços

1060
01:05:08,230 --> 01:05:11,120
tenir un símbol d'acció associat a ell.

1061
01:05:11,120 --> 01:05:14,240
No hi ha cap atribut incorporat d'HTML per símbol de cotització,

1062
01:05:14,240 --> 01:05:21,010
però per sort, HTML5 ens permet crear els nostres propis atributs per ser el que vulguem.

1063
01:05:21,010 --> 01:05:24,620
En dir de dades-symbol, he introduït un nou atribut

1064
01:05:24,620 --> 01:05:29,350
el nom acabo de fer, i això està bé perquè em va prologar amb aquestes dades.

1065
01:05:29,350 --> 01:05:34,270
Anem a guardar dins d'aquí el símbol de l'estoc.

1066
01:05:34,270 --> 01:05:39,590
El que això significa és que tot i que està mostrant el valor del nom de l'empresa

1067
01:05:39,590 --> 01:05:43,380
dins del nostre Autocomplete, encara estem recordant el símbol

1068
01:05:43,380 --> 01:05:47,110
que està associat amb cada companyia.

1069
01:05:47,110 --> 01:05:50,350
La manera com està fent que es troba dins d'aquest element en si.

1070
01:05:50,350 --> 01:05:52,930
Així que això significa que hem de fer un canvi més.

1071
01:05:52,930 --> 01:05:57,090
En fer clic ara, hem de prendre realment avantatge de l'atribut de símbol

1072
01:05:57,090 --> 01:06:00,220
en lloc de només el seu valor.

1073
01:06:00,220 --> 01:06:05,010
Si retrocedim, s'adjunta un controlador d'esdeveniments a suggeriments.

1074
01:06:05,010 --> 01:06:09,280
Cada vegada que una d'aquestes suggeriments es fa clic ara, vull fer alguna cosa.

1075
01:06:09,280 --> 01:06:13,160
El que vull fer és canviar el valor de la caixa d'entrada.

1076
01:06:13,160 --> 01:06:16,100
Ara vull configurar aquesta funció val mateix.

1077
01:06:16,100 --> 01:06:21,060
>> Així que sense cap argument d'aquesta funció Val torna a vostè el que ja està en el quadre de text,

1078
01:06:21,060 --> 01:06:27,070
però si li dónes una cadena, que prendrà aquesta cadena i el va posar en el quadre de text.

1079
01:06:27,070 --> 01:06:28,980
Estic seleccionant la casella de text de la mateixa manera.

1080
01:06:28,980 --> 01:06:31,230
El seu nom és símbol de la forma dins cometes.

1081
01:06:31,230 --> 01:06:37,540
Ara ho estic enviant el valor de l'atribut data-símbol.

1082
01:06:37,540 --> 01:06:41,560
Aquesta cosa aquí és nou, aquests $ (this).

1083
01:06:41,560 --> 01:06:46,850
El que això fa és l'element que s'ha fet clic.

1084
01:06:46,850 --> 01:06:50,880
Podem veure aquí que no estem adjuntant un esdeveniment de clic

1085
01:06:50,880 --> 01:06:54,690
a cada element amb una classe de suggeriment individualment.

1086
01:06:54,690 --> 01:06:57,140
Més aviat, ens estem acostant a això una mica diferent.

1087
01:06:57,140 --> 01:07:01,700
En canvi, ens està dient sempre que dins de res d'aquest div suggeriments,

1088
01:07:01,700 --> 01:07:04,080
recordi que és només el recipient d'aquesta llista,

1089
01:07:04,080 --> 01:07:10,150
si alguna cosa dins d'aquest div es fa clic i es té una classe de suggeriment,

1090
01:07:10,150 --> 01:07:13,000
Vull que aquest esdeveniment per disparar.

1091
01:07:13,000 --> 01:07:17,490
Bàsicament el que això vol dir que podem fer és que podem tornar a utilitzar aquest mateix controlador d'esdeveniments

1092
01:07:17,490 --> 01:07:20,000
per a totes les coses de la llista.

1093
01:07:20,000 --> 01:07:22,080
Així que no cal tenir un controlador d'esdeveniments per al primer element

1094
01:07:22,080 --> 01:07:24,550
i un controlador d'esdeveniments diferent per al segon element.

1095
01:07:24,550 --> 01:07:29,880
En el seu lloc, pot dir: "Vull que el mateix controlador d'esdeveniments per aplicar a tot en la meva llista".

1096
01:07:29,880 --> 01:07:34,420
Però hem de saber d'alguna manera que l'element s'ha fet clic.

1097
01:07:34,420 --> 01:07:38,450
Aquesta paraula "this" representa justament això.

1098
01:07:38,450 --> 01:07:42,360
Aquest és l'objecte que s'ha fet clic només per l'usuari.

1099
01:07:42,360 --> 01:07:47,680
Si tan sols fer clic a l'enllaç de tercer, el que representa un element d'aquest enllaç de tercer,

1100
01:07:47,680 --> 01:07:51,670
el que significa que puc aconseguir el seu atribut, les dades-símbol,

1101
01:07:51,670 --> 01:07:57,760
que sabem que ha de contenir el símbol que està associada amb la companyia que acaba de fer clic.

1102
01:07:57,760 --> 01:08:04,550
Si saltem a la nostra pàgina de finances,

1103
01:08:04,550 --> 01:08:08,580
podem veure ara que una vegada que comenci a escriure alguna cosa com MSFT,

1104
01:08:08,580 --> 01:08:11,220
ja no estem rebent només els símbols de cotització,

1105
01:08:11,220 --> 01:08:13,720
ara estem rebent les empreses reals.

1106
01:08:13,720 --> 01:08:20,410
Però quan faig clic en una d'aquestes empreses,

1107
01:08:20,410 --> 01:08:25,180
podem veure que en realitat estem poblant no el quadre de text amb el nom de l'empresa

1108
01:08:25,180 --> 01:08:29,850
però amb tot el que s'emmagatzema dins dels atributs de dades.

1109
01:08:29,850 --> 01:08:32,880
I així, si realment inspeccionar un d'aquests elements, feu clic

1110
01:08:32,880 --> 01:08:36,200
i fent clic a Inspeccionar element, podem veure l'aspecte que té.

1111
01:08:36,200 --> 01:08:40,290
>> Recordeu que això és una cosa que hem creat dins d'aquest bucle for

1112
01:08:40,290 --> 01:08:42,649
quan estàvem construint aquesta cadena d'HTML.

1113
01:08:42,649 --> 01:08:47,870
Podem veure aquí que aquestes dades-símbol té el valor de MSFT, la qual cosa és genial.

1114
01:08:47,870 --> 01:08:49,189
Això és el que estàvem esperant.

1115
01:08:49,189 --> 01:08:53,170
Aquest és el símbol i així és com tenim el valor que necessitem per utilitzar

1116
01:08:53,170 --> 01:08:56,140
dins d'aquest quadre de text.

1117
01:08:56,140 --> 01:08:58,850
Això és suficient perquè el formulari de cotització pel fet que és una mica avorrit.

1118
01:08:58,850 --> 01:09:02,990
Farem algunes millores ràpides a la nostra pàgina de cartera.

1119
01:09:02,990 --> 01:09:08,109
Si heu utilitzat CS50 Finances per un temps i començar a comprar i vendre una gran quantitat d'accions,

1120
01:09:08,109 --> 01:09:11,300
finalment aquesta taula serà bastant gran,

1121
01:09:11,300 --> 01:09:13,850
i vostè va a voler un tauler de cotitzacions, és clar.

1122
01:09:13,850 --> 01:09:20,350
Una vegada que la taula és molt, molt gran, podria ser útil perquè l'usuari tracti de buscar-hi.

1123
01:09:20,350 --> 01:09:23,290
Dins del quadre de cerca si em poso a escriure alguna cosa com Disney

1124
01:09:23,290 --> 01:09:26,359
ia la recerca del meu estoc de Mickey Mouse, podem veure que la taula està filtrant

1125
01:09:26,359 --> 01:09:28,189
sobre la base del que he escrit polz

1126
01:09:28,189 --> 01:09:31,640
Aquesta funcionalitat es veu super complicat, però és molt, molt fàcil

1127
01:09:31,640 --> 01:09:33,859
amb jQuery i JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Aquest arxiu portfolio.php inclou un arxiu JavaScript anomenat portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Anem a fer una ullada a això.

1130
01:09:41,130 --> 01:09:44,890
Així html, js, cartera.

1131
01:09:44,890 --> 01:09:49,210
Aquí és on estem fent que la recerca a la taula.

1132
01:09:49,210 --> 01:09:52,750
El primer que has de fer és connectar un controlador d'esdeveniments per a aquest quadre de text

1133
01:09:52,750 --> 01:09:55,760
perquè sabem que volem que la nostra funció de filtrat per disparar

1134
01:09:55,760 --> 01:09:59,800
cada vegada que l'usuari prem alguna cosa perquè no tenen temps per als botons de cerca.

1135
01:09:59,800 --> 01:10:03,000
El primer que hem de fer és esbrinar el que l'usuari està buscant,

1136
01:10:03,000 --> 01:10:04,780
tal com ho vam fer abans.

1137
01:10:04,780 --> 01:10:11,320
Aquesta paraula clau es refereix a l'element actual de l'usuari està interactuant.

1138
01:10:11,320 --> 01:10:14,070
>> Com que l'usuari està interactuant amb el quadre de cerca,

1139
01:10:14,070 --> 01:10:17,020
$ This representa el quadre de cerca,

1140
01:10:17,020 --> 01:10:21,820
així this.val ens dóna el que hi ha dins de la caixa de recerca que l'usuari està escrivint.

1141
01:10:22,810 --> 01:10:27,320
Així doncs, ara el que vull fer és que volem iterar sobre totes les files

1142
01:10:27,320 --> 01:10:29,240
dins de la nostra taula.

1143
01:10:29,240 --> 01:10:35,630
Per seleccionar totes les files de la nostra taula, em va donar aquesta taula una identificació de la cartera de taula,

1144
01:10:35,630 --> 01:10:39,060
i cada fila està representada per un element de TR,

1145
01:10:39,060 --> 01:10:42,080
de manera que aquest selector es tornarà a mi una gran varietat

1146
01:10:42,080 --> 01:10:44,370
de totes les files de la meva taula.

1147
01:10:44,370 --> 01:10:47,010
Ara vull iterar sobre aquesta matriu.

1148
01:10:47,010 --> 01:10:52,390
Podria un bucle for, però jQuery realment ens proporciona la funció bonica anomenada "cada un".

1149
01:10:52,390 --> 01:10:55,220
Què fa cadascú és cadascú pren un argument,

1150
01:10:55,220 --> 01:10:57,090
i aquest argument és una funció.

1151
01:10:57,090 --> 01:11:02,760
Què farà és que aplicarà aquesta funció a cada element dins d'aquesta llista.

1152
01:11:02,760 --> 01:11:05,550
Aquesta funció rep un argument que és i,

1153
01:11:05,550 --> 01:11:10,090
i quan s'executa aquesta funció, aquest correu serà reemplaçat per la primera fila,

1154
01:11:10,090 --> 01:11:12,070
després la segona fila, i després de la tercera fila.

1155
01:11:12,070 --> 01:11:15,150
D'aquesta manera, això és el mateix que executar un bucle for

1156
01:11:15,150 --> 01:11:21,360
i després calcular aquest element, basat en l'índex dins del seu bucle for.

1157
01:11:21,360 --> 01:11:24,750
A cada iteració, per a cada un d'aquests elements en la taula,

1158
01:11:24,750 --> 01:11:30,560
Vull comprovar si el text de l'element - el text de la cel · la dins de la fila -

1159
01:11:30,560 --> 01:11:33,130
coincideix amb el que estic buscant.

1160
01:11:33,130 --> 01:11:36,390
Aquesta gran cadena llarga dels comandaments és com jo podria fer això.

1161
01:11:36,390 --> 01:11:40,900
En primer lloc, un cop més, això es refereix ara a - perquè està dins d'una nova funció -

1162
01:11:40,900 --> 01:11:45,020
això és ara la fila actual a la taula.

1163
01:11:45,020 --> 01:11:47,340
Vull aprofitar la fila actual a la taula,

1164
01:11:47,340 --> 01:11:49,950
i vull arribar a tots els seus fills.

1165
01:11:49,950 --> 01:11:51,940
Recordeu, el DOM és un arbre jeràrquic,

1166
01:11:51,940 --> 01:11:54,200
el que significa que els elements tenen un nombre de fills.

1167
01:11:54,200 --> 01:12:00,180
>> Aquesta funció. Fills tornarà a mi de nou un conjunt de tots els elements

1168
01:12:00,180 --> 01:12:03,240
que són els fills de, en aquest cas, sèrie a la taula.

1169
01:12:03,240 --> 01:12:07,150
Això és només simplement les cèl · lules dins de la fila.

1170
01:12:07,150 --> 01:12:09,230
Només vull buscar a la primera cel · la.

1171
01:12:09,230 --> 01:12:13,090
Aquesta funció. Primer diu dóna'm el primer element de la matriu.

1172
01:12:13,090 --> 01:12:17,070
Llavors la funció text diu em exactament el que hi ha dins d'aquesta cèl · lula

1173
01:12:17,070 --> 01:12:19,530
ja que vull buscar a aquest text.

1174
01:12:19,530 --> 01:12:21,040
Finalment, anem a convertir-lo en minúscules,

1175
01:12:21,040 --> 01:12:23,940
perquè puguem fer les consultes de text entre majúscules i minúscules.

1176
01:12:23,940 --> 01:12:29,990
Finalment, volem veure si aquesta cadena dins d'una taula conté la cadena que estem buscant.

1177
01:12:29,990 --> 01:12:32,980
La funció indexOf en JavaScript fa precisament això.

1178
01:12:32,980 --> 01:12:37,060
Ens diu si aquesta cadena conté una altra cadena.

1179
01:12:37,060 --> 01:12:40,150
Si bé és cert que la cel · la conté el que estic buscant,

1180
01:12:40,150 --> 01:12:42,140
llavors vull per assegurar-se que està demostrat.

1181
01:12:42,140 --> 01:12:45,330
El mètode xou dirà: "L'element".

1182
01:12:45,330 --> 01:12:50,350
Si aquest no és el cas, llavors això vol dir que el que estic buscant no està contingut

1183
01:12:50,350 --> 01:12:53,550
dins d'aquesta fila, així que vol amagar és l'usuari.

1184
01:12:53,550 --> 01:12:59,240
Això aconsegueix que bonic efecte de filtratge on ja no veiem a tota la taula.

1185
01:12:59,240 --> 01:13:01,480
Si vostè està interessat en com fer que aquest ticker també,

1186
01:13:01,480 --> 01:13:04,180
anem a posar la font en línia. Però és molt simple.

1187
01:13:04,180 --> 01:13:09,860
JQuery té mètodes impressionants per les animacions i manipulació de les propietats CSS.

1188
01:13:09,860 --> 01:13:11,020
Per tant, això és tot per a mi.

1189
01:13:11,020 --> 01:13:15,560
>> Llavors, què ens espera? Com veurem en uns dies, la proposta final d'un projecte s'ha de.

1190
01:13:15,560 --> 01:13:17,730
La proposta final d'un projecte us demanarà una sèrie de preguntes,

1191
01:13:17,730 --> 01:13:19,420
però entre ells hi haurà tres fites -

1192
01:13:19,420 --> 01:13:22,840
una "bona" ​​fita, una fita millor, i una millor a.

1193
01:13:22,840 --> 01:13:25,870
La idea és realment per ajudar a vostès posar les teves expectatives

1194
01:13:25,870 --> 01:13:29,160
perquè mínimament vostè serà feliç amb la sortida del seu projecte final

1195
01:13:29,160 --> 01:13:32,060
i que serà "bo" en la mesura que vostè es refereix.

1196
01:13:32,060 --> 01:13:34,540
Però llavors, en l'interès d'aconseguir que vostè arribi una mica a mica millor

1197
01:13:34,540 --> 01:13:37,680
o alguna cosa millor, també anem a ordenar d'empènyer cap a això també.

1198
01:13:37,680 --> 01:13:40,660
El CS50 Hack-a-thon, per la seva banda, es troba en unes poques setmanes.

1199
01:13:40,660 --> 01:13:44,340
En general, ho fem sobre una base per sorteig per l'interès,

1200
01:13:44,340 --> 01:13:47,680
però les probabilitats són que prendrem uns pocs centenars de nosaltres en els autobusos d'enllaç des Harvard Square

1201
01:13:47,680 --> 01:13:51,540
fins Kendall Square, on Microsoft té un preciós establiment anomenat encertadament "nerd" -

1202
01:13:51,540 --> 01:13:53,830
la Nova Anglaterra Centre d'Investigació i Desenvolupament.

1203
01:13:53,830 --> 01:13:56,380
Anem a arribar a les 8 pm Tindrem una mica de menjar.

1204
01:13:56,380 --> 01:13:58,160
Al voltant d'1 a.m. tindrem menjar una mica més.

1205
01:13:58,160 --> 01:14:02,150
Al voltant de les 5 am si vostè encara està despert ens dirigirem a IHOP o que el porti de tornada a l'escola.

1206
01:14:02,150 --> 01:14:04,380
L'objectiu que cal submergir-se en els projectes finals

1207
01:14:04,380 --> 01:14:06,190
al costat dels seus companys i el personal.

1208
01:14:06,190 --> 01:14:08,280
Uns dies més tard és la Fira CS50,

1209
01:14:08,280 --> 01:14:10,990
que és en realitat la intenció de ser una oportunitat per vostès per mostrar el seu treball

1210
01:14:10,990 --> 01:14:12,700
i els èxits del semestre

1211
01:14:12,700 --> 01:14:15,610
mentre que fer-se amb els altres i tenir una idea del que cada un va fer.

1212
01:14:15,610 --> 01:14:17,850
Amb això dit, moltes gràcies a Tommy i Josep,

1213
01:14:17,850 --> 01:14:19,960
i ens veiem el dilluns.

1214
01:14:19,960 --> 01:14:24,070
 [Aplaudiment]