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

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

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

4
00:00:07,940 --> 00:00:13,340
>> Esto es CS50. Este es el final de la semana 9. Muchas gracias.

5
00:00:13,340 --> 00:00:15,310
Por último. Semana 9. Ya lo tengo.

6
00:00:15,310 --> 00:00:18,590
Hoy continuamos nuestra conversación sobre programación web

7
00:00:18,590 --> 00:00:21,660
con la mirada puesta en el proyecto final no, porque usted tiene que hacer algo basado en la web

8
00:00:21,660 --> 00:00:25,610
para los proyectos finales, sino porque ya sea para proyectos finales o después CS50

9
00:00:25,610 --> 00:00:29,000
este es sin duda la dirección en que va el software moderno.

10
00:00:29,000 --> 00:00:31,770
Y, sin embargo, no es en realidad una cosa fácil.

11
00:00:31,770 --> 00:00:35,040
De hecho, una de las cosas más difíciles de hacer es el aspecto del diseño.

12
00:00:35,040 --> 00:00:38,600
>> Por ejemplo, por diseño nos referimos a recibir efectivamente la interfaz de usuario

13
00:00:38,600 --> 00:00:40,420
o la experiencia de usuario correcta.

14
00:00:40,420 --> 00:00:43,200
Me atrevería a decir - y sabemos de un conjunto de problemas recientes

15
00:00:43,200 --> 00:00:45,960
cuando algunos de ustedes al aire sus quejas sobre alguna pieza de software

16
00:00:45,960 --> 00:00:49,000
o hardware que enfurece, ya sea en el campus o fuera -

17
00:00:49,000 --> 00:00:51,930
hay un montón de sitios por ahí, hay una gran cantidad de hardware por ahí,

18
00:00:51,930 --> 00:00:53,900
ese tipo de mierda.

19
00:00:53,900 --> 00:00:58,730
Pero la realidad es que hacer cosas que son fáciles de usar y sin embargo son de gran alcance

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

21
00:01:00,550 --> 00:01:03,680
Así que por hoy me preguntó José y Tommy a unirse a mí aquí

22
00:01:03,680 --> 00:01:06,680
para que podamos tener una conversación, tanto sobre el diseño

23
00:01:06,680 --> 00:01:09,090
y qué tipos de procesos de pensamiento debe comenzar a pasar por su cabeza

24
00:01:09,090 --> 00:01:12,040
la hora de diseñar sus proyectos finales, sus proyectos futuros.

25
00:01:12,040 --> 00:01:15,040
Y luego, con la ayuda de Tommy vamos a ver algunos de los detalles de implementación.

26
00:01:15,040 --> 00:01:18,440
¿Cómo puedes tener algo de visión en papel o en su mente

27
00:01:18,440 --> 00:01:20,760
que podrá ejecutar mediante programación

28
00:01:20,760 --> 00:01:24,030
mediante el uso de algunas de las tecnologías y las técnicas que hemos empezado hablando,

29
00:01:24,030 --> 00:01:29,080
es decir, JavaScript y algo aún más reciente, es decir, AJAX, JavaScript asíncrono.

30
00:01:29,080 --> 00:01:32,950
Esto le permite crear toda la dinámica más de una interfaz de usuario

31
00:01:32,950 --> 00:01:35,780
por ir a buscar más y más datos progresivamente desde un servidor.

32
00:01:35,780 --> 00:01:38,560
Así que vamos a ver algunos de estos fragmentos tan bien hoy.

33
00:01:38,560 --> 00:01:41,800
Como acotación al margen, si usted está interesado en la concentración en ciencias de la computación

34
00:01:41,800 --> 00:01:45,010
o minoring en informática, sé que este viernes al mediodía

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

36
00:01:48,750 --> 00:01:50,780
donde se puede aprender un poco más acerca de la informática.

37
00:01:50,780 --> 00:01:54,860
En su camino a la puerta hoy serás capaz de recoger una guía no oficial para CS en Harvard.

38
00:01:54,860 --> 00:01:57,290
Lo pondremos en los botes de basura fuera a la altura de la cintura

39
00:01:57,290 --> 00:01:59,750
de modo que si quieres agarrar esto y aprender un poco más acerca de CS,

40
00:01:59,750 --> 00:02:02,480
que estará allí para ti como lo fue en la semana 0.

41
00:02:02,480 --> 00:02:06,500
También, si usted desea unirse a nosotros para el almuerzo CS50 este viernes a las 1:15 pm,

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

43
00:02:09,800 --> 00:02:13,260
Sin más preámbulos, les presento la enseñanza compañero Joseph Ong.

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

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

46
00:02:20,770 --> 00:02:24,780
La primera vez que supe de diseño estaba en una clase llamada aquí CS179.

47
00:02:24,780 --> 00:02:28,040
>> El profesor de la época nos contó la historia de otro profesor

48
00:02:28,040 --> 00:02:31,640
que había ido a un hotel y utilizamos los grifos.

49
00:02:31,640 --> 00:02:35,630
¿Puede alguien decirme por qué los 2 botones de la izquierda y hacer lo correcto?

50
00:02:35,630 --> 00:02:39,080
[Estudiante] Caliente y frío. >> Caliente y frío. Bueno.

51
00:02:39,080 --> 00:02:41,430
Lo que normalmente esperar, ¿no?

52
00:02:41,430 --> 00:02:46,960
Este profesor después de usar el grifo quiere tomar una ducha, y procede a utilizar esto.

53
00:02:46,960 --> 00:02:51,310
Él piensa que el izquierdo y el lado derecho son en caliente y en frío, ¿verdad?

54
00:02:51,310 --> 00:02:55,470
Pero, ¿puede alguien decirme qué es esto realmente?

55
00:02:55,470 --> 00:02:58,060
Las manos?

56
00:02:58,060 --> 00:03:01,740
[Respuesta de los estudiantes inaudible] >> Una sugerencia es?

57
00:03:01,740 --> 00:03:05,860
[Respuesta de los estudiantes inaudible] Temperatura? >>

58
00:03:05,860 --> 00:03:10,460
Así que uno de ellos controla la temperatura y los otros controles? >> [Estudiante] La presión del agua.

59
00:03:10,460 --> 00:03:12,350
La presión del agua. Bueno.

60
00:03:12,350 --> 00:03:15,100
Este profesor entra en esto y, pensando que están controlando caliente y fría,

61
00:03:15,100 --> 00:03:21,470
resulta el más adecuado, lo que él piensa es en caliente, todo el camino hasta

62
00:03:21,470 --> 00:03:23,560
porque quiere tomar una ducha caliente.

63
00:03:23,560 --> 00:03:28,100
Bueno, estos en realidad no coinciden, por lo que obtiene esta experiencia no es muy divertido

64
00:03:28,100 --> 00:03:31,110
de estar en una ducha de agua fría, y todos sabemos lo que se siente.

65
00:03:31,110 --> 00:03:33,620
Este es un ejemplo de un fallo de diseño.

66
00:03:33,620 --> 00:03:37,040
¿Qué quiero decir con esto es su expectativa del grifo

67
00:03:37,040 --> 00:03:39,420
no coincide con lo que salió de la ducha,

68
00:03:39,420 --> 00:03:41,780
que es un poco desafortunado para él.

69
00:03:41,780 --> 00:03:44,990
Así que este es un ejemplo de un defecto de diseño que ocurre en la vida real.

70
00:03:44,990 --> 00:03:48,020
Sin embargo, vemos todo tipo de seres de otros también.

71
00:03:48,020 --> 00:03:50,390
No somos probablemente los fans del sistema de MBTA.

72
00:03:50,390 --> 00:03:55,560
Se trata de un sistema de metro en realidad en Londres, que dice: "Este botón no está en uso."

73
00:03:55,560 --> 00:04:00,220
¿Por qué es aún ahí? ¿Por qué nos importa?

74
00:04:00,220 --> 00:04:02,810
Cuando yo era un niño, siendo el experto en tecnología de la casa,

75
00:04:02,810 --> 00:04:05,050
cada vez que el ordenador se bloquee, mi mamá venía a mí,

76
00:04:05,050 --> 00:04:07,060
mostrándome esta pantalla y preguntándome qué pasó.

77
00:04:07,060 --> 00:04:09,210
>> Ni siquiera yo sé lo que esto significa.

78
00:04:11,890 --> 00:04:14,700
[Risas] ¿Qué?

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

80
00:04:18,720 --> 00:04:23,050
A veces nos sentimos como los desarrolladores de software son sólo curricán nosotros.

81
00:04:23,050 --> 00:04:28,460
Como usuarios estamos como, "¿Qué está pasando? Alguien nos dicen".

82
00:04:28,460 --> 00:04:32,140
Todo esto se reduce a una cuestión de diseño.

83
00:04:32,140 --> 00:04:34,650
Diseño, como podemos ver, no es puramente acerca de la estética,

84
00:04:34,650 --> 00:04:37,230
no se trata de cómo se ven las cosas.

85
00:04:37,230 --> 00:04:41,720
Aquí vemos que este pequeño pop-up por aquí realmente se ve muy bien.

86
00:04:41,720 --> 00:04:45,290
Tiene una sombra en el fondo, tiene radios de frontera pasando.

87
00:04:45,290 --> 00:04:47,550
Es algo bonito.

88
00:04:47,550 --> 00:04:51,480
No está muy bien diseñado, porque no es muy fácil de usar.

89
00:04:51,480 --> 00:04:54,920
Ese pequeño pop-up que aparece en realidad no me da ninguna información

90
00:04:54,920 --> 00:04:58,450
acerca de lo que está pasando, no me dijo nada cuando el usuario

91
00:04:58,450 --> 00:05:01,400
acerca de cómo recuperar de este error.

92
00:05:01,400 --> 00:05:05,190
Queremos pensar acerca de las cosas que el diseño no es.

93
00:05:05,190 --> 00:05:06,670
En primer lugar, no es la estética.

94
00:05:06,670 --> 00:05:10,800
Tampoco es el relleno de su aplicación con un montón de funcionalidades innecesarias.

95
00:05:10,800 --> 00:05:14,890
Si usted es un restaurante tailandés, es probable que no quiere ser un dentista al mismo tiempo.

96
00:05:14,890 --> 00:05:17,720
Y con Facebook Questions, no es que mucha gente lo usa

97
00:05:17,720 --> 00:05:21,130
y no era realmente el núcleo de lo que estaban construyendo.

98
00:05:21,130 --> 00:05:24,200
Y lo que es bueno para pensar no es tanto la cantidad de las cosas

99
00:05:24,200 --> 00:05:26,390
que usted está poniendo a su solicitud, pero la calidad de la

100
00:05:26,390 --> 00:05:28,910
y cómo se está haciendo que la experiencia de usuario mejor

101
00:05:28,910 --> 00:05:32,540
por mejorar la realidad de lo que ya tiene.

102
00:05:32,540 --> 00:05:37,040
>> En pocas palabras, el diseño nos dice lo que debemos construir.

103
00:05:37,040 --> 00:05:41,950
Por ejemplo, si estamos construyendo algo que vamos a buscar las cosas,

104
00:05:41,950 --> 00:05:45,970
como Google, por ejemplo, debemos hacer las cosas de una manera

105
00:05:45,970 --> 00:05:48,950
que requiere que el usuario lleva un montón de clics para llegar a lo que quieren,

106
00:05:48,950 --> 00:05:52,580
o hay que hacerlo de una manera, por ejemplo, con Google Instant o autocomplete

107
00:05:52,580 --> 00:05:54,970
que nos permite llegar a nuestros resultados con mayor rapidez?

108
00:05:54,970 --> 00:05:58,740
Ingeniería implica, al igual que Tommy le mostrará, en realidad construyendo.

109
00:05:58,740 --> 00:06:01,890
Hay muchos tipos de diseño.

110
00:06:01,890 --> 00:06:06,070
Por ejemplo, si usted está construyendo algo para desplegar algo

111
00:06:06,070 --> 00:06:09,770
en un país del tercer mundo donde no hay electricidad o mucho que la tecnología mucho,

112
00:06:09,770 --> 00:06:11,440
usted tiene que diseñar lo que usted está construyendo

113
00:06:11,440 --> 00:06:14,210
de manera que fácilmente se accede a la gente de allí.

114
00:06:14,210 --> 00:06:18,290
Pero, ¿qué tipo de decisiones de diseño que puede haber otros

115
00:06:18,290 --> 00:06:21,850
o podría estar involucrado en algo como esto?

116
00:06:23,690 --> 00:06:25,660
Si. Veo una mano.

117
00:06:25,660 --> 00:06:37,200
[Respuesta de los estudiantes inaudible] Derecho. >> Exactamente. La accesibilidad es una cosa.

118
00:06:37,200 --> 00:06:40,870
Muchas personas no piensan, "¿Qué pasa con mis usuarios?"

119
00:06:40,870 --> 00:06:43,160
como los extremos de cualquiera de espectro.

120
00:06:43,160 --> 00:06:47,770
Tengo usuarios que podrían tener discapacidades que no estoy pensando en

121
00:06:47,770 --> 00:06:50,590
y estoy pensando en el diseño para el usuario general.

122
00:06:50,590 --> 00:06:52,630
El Internet es accesible en todo el mundo hoy en día,

123
00:06:52,630 --> 00:06:54,870
y que debería ser el diseño para esa gente también.

124
00:06:54,870 --> 00:06:58,620
¿Qué clase de otras decisiones de diseño pueden hacer?

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

126
00:07:00,690 --> 00:07:02,680
Costo. Muy bueno.

127
00:07:02,680 --> 00:07:08,060
Otra cosa que podemos basar nuestras decisiones de diseño son el costo.

128
00:07:08,060 --> 00:07:13,130
Si tenemos un negocio, usted quiere construir algo que no tiene precio mucho para producir

129
00:07:13,130 --> 00:07:17,720
pero se puede vender a un precio especialmente alto o nos puede sacar algún provecho.

130
00:07:17,720 --> 00:07:21,540
>> Estos son todos los diferentes tipos de diseño, pero cuando estamos construyendo algo en Internet

131
00:07:21,540 --> 00:07:25,120
o cuando estamos construyendo algo que, probablemente, no cuesta mucho construir ahora,

132
00:07:25,120 --> 00:07:28,630
al igual que las aplicaciones de Internet - usted no tiene que tirar mucho capital en ella

133
00:07:28,630 --> 00:07:30,900
con el fin de hacer algo que realmente funciona -

134
00:07:30,900 --> 00:07:33,490
lo que estamos más preocupados por la experiencia del usuario.

135
00:07:33,490 --> 00:07:36,390
A esto le llamamos diseño centrado en el usuario.

136
00:07:36,390 --> 00:07:41,550
En esencia lo que el diseño centrado en el usuario se involucra a sí mismos poniendo en los zapatos de sus usuarios.

137
00:07:41,550 --> 00:07:44,870
Si alguien firma para arriba para lo que estoy construyendo,

138
00:07:44,870 --> 00:07:48,250
Obviamente han llegado a mi uso particular con un objetivo en mente,

139
00:07:48,250 --> 00:07:50,280
con una tarea que desee realizar.

140
00:07:50,280 --> 00:07:53,650
Y su trabajo no es sólo para ayudarlos a completar esa tarea

141
00:07:53,650 --> 00:07:57,930
sino para ayudarlos a completar esta tarea de una manera que sea eficiente, intuitivo,

142
00:07:57,930 --> 00:08:01,900
y, como dijo alguna persona de allí y accesible.

143
00:08:01,900 --> 00:08:03,750
¿Qué significa eficiencia?

144
00:08:03,750 --> 00:08:08,050
Eficiencia significa la rapidez con qué el usuario a completar la tarea dada mi interfaz.

145
00:08:08,050 --> 00:08:11,650
¿Se necesita un montón de clics para ellos para ir de un lugar a otro?

146
00:08:11,650 --> 00:08:14,630
Es tedioso? ¿Tienen que realizar muchas tareas repetitivas?

147
00:08:14,630 --> 00:08:17,140
Queremos hacer que el proceso sea lo más eficiente posible

148
00:08:17,140 --> 00:08:20,070
por lo que no tiene que hacer ese tipo de cosas.

149
00:08:20,070 --> 00:08:24,230
En cuanto a la intuición, que es, por ejemplo, si un usuario busca mi interfaz,

150
00:08:24,230 --> 00:08:27,240
es más fácil para ellos para llegar de un lugar a otro?

151
00:08:27,240 --> 00:08:30,390
¿Es fácil para ellos para averiguar lo que tienen que hacer clic en mi interfaz

152
00:08:30,390 --> 00:08:33,770
a fin de que para lograr el objetivo o tarea que se quiere lograr?

153
00:08:33,770 --> 00:08:37,520
>> Y finalmente, como dijo una persona de allí, la accesibilidad es muy importante.

154
00:08:37,520 --> 00:08:39,640
[Hablante masculino] Se refiere a la accesibilidad para las cosas como la visión,

155
00:08:39,640 --> 00:08:42,740
¿Cómo se debe en realidad diseñar algo para alguien que es ciego?

156
00:08:42,740 --> 00:08:46,460
Oh. Para las personas que no pueden ver nada, tenemos algo llamado lector de pantalla.

157
00:08:46,460 --> 00:08:49,070
Lo que debe hacer es que usted debe construir su sitio web de una manera

158
00:08:49,070 --> 00:08:52,020
que, por ejemplo, tecnologías específicas, lo que llamamos -

159
00:08:52,020 --> 00:08:53,590
Hay un montón de cosas ahora.

160
00:08:53,590 --> 00:08:55,660
Creo que hay lectores de pantalla llamado JAWS.

161
00:08:55,660 --> 00:08:58,410
Muchas de estas cosas dependen de lo que llamamos normas de la zona

162
00:08:58,410 --> 00:09:02,010
con el fin de leer para el usuario de lo que está presente en la página.

163
00:09:02,010 --> 00:09:05,480
Para aquellas personas que no pueden ver, tiene que asegurarse de que estos lectores de pantalla

164
00:09:05,480 --> 00:09:09,130
en realidad puede recoger el contenido de la página, y realmente puede mostrar a sus usuarios,

165
00:09:09,130 --> 00:09:13,630
si no se puede ver, al menos todavía se puede entender el contenido de la página.

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

167
00:09:16,190 --> 00:09:23,410
Basta de hablar acerca de un buen diseño. Vamos a hablar de un mal diseño.

168
00:09:23,410 --> 00:09:25,220
Estas son cosas que no debes hacer.

169
00:09:25,220 --> 00:09:27,890
¿Alguien puede decirme acerca de sus experiencias con Craigslist

170
00:09:27,890 --> 00:09:32,190
y lo que creen que no es tan bueno de este diseño?

171
00:09:33,690 --> 00:09:36,430
Sí. >> [Estudiante] Creo que hay demasiadas palabras en un área.

172
00:09:36,430 --> 00:09:39,350
Demasiadas palabras, ¿no? Completamente abrumador.

173
00:09:39,350 --> 00:09:42,400
Al llegar a esta página y te da la bienvenida con un montón de cosas aquí

174
00:09:42,400 --> 00:09:43,860
que ni siquiera te importa.

175
00:09:43,860 --> 00:09:47,010
Por ejemplo, usted vive en un estado que no comienza con esta carta.

176
00:09:47,010 --> 00:09:48,690
Digamos que usted vive en Texas o algo así.

177
00:09:48,690 --> 00:09:53,790
>> Usted tiene que desplazarse hacia abajo en la página para llegar al lugar donde se encuentra.

178
00:09:53,790 --> 00:10:00,320
Soy de Boston, así que me miro en Massachusetts. ¿Dónde está Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, está aquí mismo. Oh, es Boston. Bien.

180
00:10:03,270 --> 00:10:09,070
Echemos un vistazo a Boston. [Risas]

181
00:10:09,070 --> 00:10:12,250
Bastante abrumador, ¿verdad?

182
00:10:12,250 --> 00:10:16,400
Awkward cosas por allá. [Risas]

183
00:10:17,320 --> 00:10:19,470
Digamos que yo estoy buscando un lugar para vivir.

184
00:10:19,470 --> 00:10:24,130
¿Cuántas personas se han utilizado Craigslist? Toneladas de usted.

185
00:10:24,130 --> 00:10:30,960
Hay formas muy mal de ver esto, pero vamos a ver esto.

186
00:10:35,130 --> 00:10:38,970
¿Cuál es la diferencia entre img y pic? ¿Alguien puede decirme?

187
00:10:41,350 --> 00:10:42,830
Hay en realidad no hay diferencia.

188
00:10:42,830 --> 00:10:47,710
Ellos significan exactamente lo mismo, pero tienen nombres diferentes para ellos por alguna razón.

189
00:10:48,980 --> 00:10:53,560
Si hago clic en anuncio con foto, no pasa nada en la página.

190
00:10:53,560 --> 00:10:57,490
De hecho, tengo que hacer clic en Volver a buscar para que algo suceda.

191
00:10:57,490 --> 00:11:02,430
¿Cuál podría ser una decisión de diseño mejor que se podía hacer allí?

192
00:11:03,820 --> 00:11:08,030
Si estoy haciendo clic en este filtro, probablemente desea filtrar por esa acción en particular

193
00:11:08,030 --> 00:11:09,970
o esa categoría en particular.

194
00:11:09,970 --> 00:11:14,450
Así que en lugar de tener que presionar Buscar de nuevo, yo podría simplemente hacer automáticamente el filtrado

195
00:11:14,450 --> 00:11:17,060
tipo de estilo de Google donde lo hacen al instante.

196
00:11:17,060 --> 00:11:20,440
[Malan] Sin embargo, no constituye, como hemos visto hasta ahora tienen que ser físicamente presentado

197
00:11:20,440 --> 00:11:23,170
pulsando Enter al menos o haciendo clic en un botón?

198
00:11:23,170 --> 00:11:26,830
Como se ha visto hasta ahora, que realmente tiene que hacer clic en Enviar para hacer esas cosas.

199
00:11:26,830 --> 00:11:30,090
>> Pero a medida que Tommy le mostrará en un segundo, en realidad hay maneras para que usted

200
00:11:30,090 --> 00:11:33,010
de tal manera que al hacer clic en esa cosa que puede enviar automáticamente

201
00:11:33,010 --> 00:11:38,840
lo que llamamos una petición AJAX y obtener datos de vuelta y filtrar los resultados al instante.

202
00:11:38,840 --> 00:11:41,340
Hay un montón de cosas que están mal en esta interfaz.

203
00:11:41,340 --> 00:11:43,530
[Malan] ¿Puedes buscar Cambridge?

204
00:11:43,530 --> 00:11:47,030
Hay algo un poco anómalo aquí donde usted se preocupa por Cambridge

205
00:11:47,030 --> 00:11:54,790
y sin embargo, usted está recibiendo Westford, Spring Hill, West Newton y similares.

206
00:11:54,790 --> 00:11:57,930
Probablemente no es ideal. >> Probablemente no ideal.

207
00:11:57,930 --> 00:12:03,900
¿Cómo podría yo ser capaz de hacer la experiencia de usuario mejor en esta página en particular?

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

209
00:12:07,340 --> 00:12:09,500
Bien. Las instrucciones de qué tipo de sentido?

210
00:12:09,500 --> 00:12:14,630
[Estudiante] Por ejemplo, una cosa para los usuarios de primera vez, que ni siquiera saben lo que es Craigslist

211
00:12:14,630 --> 00:12:17,320
o no sabes lo que tienes que hacer.

212
00:12:17,320 --> 00:12:20,150
Derecha. Así lo explica Craigslist está en esta página es importante.

213
00:12:20,150 --> 00:12:23,490
De hecho, podemos decir a los usuarios lo que esta página es en realidad para.

214
00:12:23,490 --> 00:12:27,090
Si estoy visitando a esto, veo un montón de lugares. Yo ni siquiera sé lo que significan.

215
00:12:27,090 --> 00:12:29,730
Pero más importante aún, sólo mirar a esta interfaz,

216
00:12:29,730 --> 00:12:35,530
Recuerdo que tuve que bajar un montón de cosas para encontrar una comunidad en particular

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

218
00:12:37,560 --> 00:12:39,820
¿Qué es un método más rápido que podía hacer eso? Sí.

219
00:12:39,820 --> 00:12:43,290
[Estudiante] Divide para arriba en este, las regiones del oeste. >> Okay.

220
00:12:43,290 --> 00:12:47,460
Podría dividirlos en categorías más que pueda ayudarme a determinar más rápidamente

221
00:12:47,460 --> 00:12:49,820
cómo llegar a ese lugar en particular.

222
00:12:49,820 --> 00:12:54,510
[Estudiante] Ponga una lista desplegable. >> Derecho. Bien.

223
00:12:54,510 --> 00:12:58,240
Me vendría bien un menú desplegable, porque tenemos un conjunto fijo de las cosas

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

225
00:13:00,100 --> 00:13:02,240
De esa manera no se necesita tanto espacio en la pantalla.

226
00:13:02,240 --> 00:13:05,630
Pero aún mejor que eso, ¿qué podemos hacer?

227
00:13:05,630 --> 00:13:09,220
Sí. >> [Respuesta de los estudiantes inaudible] >> ¿Puedes decir eso otra vez? >> [Estudiante] cuadro de búsqueda.

228
00:13:09,220 --> 00:13:11,260
Sí, un cuadro de búsqueda. Eso es genial.

229
00:13:11,260 --> 00:13:16,430
Lo que en realidad se puede hacer es que si miramos hacia atrás en el buscador de diapositivas.

230
00:13:16,430 --> 00:13:21,520
Autocompletar. Una manera muy sencilla de buscar a través de los resultados que usted sabe que está en un set.

231
00:13:21,520 --> 00:13:25,980
Si me pongo a escribir BO, sólo me mostrará todos los resultados que tienen en el interior de BO de ellos.

232
00:13:25,980 --> 00:13:29,030
De esa manera puedo encontrar muy fácilmente el particular, me quiero ir a la

233
00:13:29,030 --> 00:13:32,390
en lugar de tener que desplazarse a través de esta lista realmente grande.

234
00:13:32,390 --> 00:13:37,450
>> Se trata de todo tipo de realidad fruta madura que alguien que está llevando a cabo Craigslist

235
00:13:37,450 --> 00:13:42,500
en realidad se puede hacer para que la experiencia en el sitio mucho mejor para su usuario en particular.

236
00:13:42,500 --> 00:13:46,370
Bien. Basta de hablar sobre los sitios web malos.

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

238
00:13:50,880 --> 00:13:54,390
Cuando Facebook salió, y en especial las fotos de Facebook,

239
00:13:54,390 --> 00:13:57,870
había un montón de otros servicios en el momento en que podría hacer exactamente las mismas cosas.

240
00:13:57,870 --> 00:14:00,740
Podrían organizar las fotos en álbumes.

241
00:14:00,740 --> 00:14:03,360
Lo que podría hacer es que usted puede organizarlos en grupos también.

242
00:14:03,360 --> 00:14:06,070
Usted podría organizarlas por fecha. Usted puede hacer todas estas cosas en particular.

243
00:14:06,070 --> 00:14:11,710
Pero, ¿alguien sabe lo que hizo estallar en fotos de Facebook el momento en que fue puesto en libertad?

244
00:14:11,710 --> 00:14:15,080
Sí. >> [Los estudiantes] Tags. Tags. >> Exactamente.

245
00:14:15,080 --> 00:14:21,300
Tenemos Milo por aquí, que es nuestra mascota perro con ese pañuelo CS50.

246
00:14:21,300 --> 00:14:24,810
Se puede ver que tenemos esta característica de etiquetado en el centro.

247
00:14:24,810 --> 00:14:28,240
Y lo que hizo fotos de Facebook muy interesante desde el punto de vista de usabilidad

248
00:14:28,240 --> 00:14:34,130
es que en realidad permitió a la gente a través de este involucrar a sus amigos en sus fotos.

249
00:14:34,130 --> 00:14:37,680
Para Facebook, ya que su sitio web es muy social,

250
00:14:37,680 --> 00:14:40,750
se trata de la construcción de este tipo de ambiente social.

251
00:14:40,750 --> 00:14:42,620
Esto mejora la experiencia de fotos mucho más

252
00:14:42,620 --> 00:14:46,390
porque en realidad podría comenzar diciendo: "Estas son las conexiones entre las personas,

253
00:14:46,390 --> 00:14:49,220
y estas son fotos de gente a la que realmente importan. "

254
00:14:49,220 --> 00:14:52,200
Parte de ello es también el narcisismo tipo.

255
00:14:52,200 --> 00:14:54,980
La gente le gusta ser etiquetados en fotos y cosas por el estilo.

256
00:14:54,980 --> 00:14:58,510
Mientras que eso no es necesariamente un rasgo bien humano,

257
00:14:58,510 --> 00:15:01,910
al mismo tiempo que está basado en las decisiones de diseño buenas

258
00:15:01,910 --> 00:15:04,860
porque la gente realmente se preocupan por cosas como esta.

259
00:15:04,860 --> 00:15:07,190
Así que eso es fotos de Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Pero hablemos de Facebook en general.

261
00:15:09,800 --> 00:15:13,400
Estoy seguro de que mucha gente aquí tiene una opinión sobre Facebook,

262
00:15:13,400 --> 00:15:16,430
ambas decisiones de diseño buenas y malas decisiones de diseño.

263
00:15:16,430 --> 00:15:20,270
Así que vamos a ventilar o ser feliz.

264
00:15:23,480 --> 00:15:26,450
Vamos. Sé que todos ustedes usan Facebook.

265
00:15:26,450 --> 00:15:30,970
Alguien tiene que tener algo malo que decir o algo bueno que decir sobre él. Sí.

266
00:15:30,970 --> 00:15:35,060
[Estudiante] En el servicio de noticias que hay un montón de cosas que realmente no importan.

267
00:15:35,060 --> 00:15:37,740
El servicio de noticias no muestra un montón de cosas que tal vez no importa.

268
00:15:37,740 --> 00:15:41,660
Usted tiene amigos en Facebook que no se han cumplido durante 2 o 3 años

269
00:15:41,660 --> 00:15:43,860
y ver sus resultados de noticias apareciendo en su servicio de noticias

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

271
00:15:45,870 --> 00:15:48,700
Facebook ha hecho realmente un esfuerzo para hacer esto mejor,

272
00:15:48,700 --> 00:15:53,150
y que en realidad han tratado de empujar resultados relevantes a la parte superior de la fuente de noticias en los últimos tiempos

273
00:15:53,150 --> 00:15:58,300
lo que en realidad vemos las cosas por los amigos que son relevantes para usted o sus amigos íntimos.

274
00:15:58,300 --> 00:16:01,110
¿Algo más? Sí.

275
00:16:01,110 --> 00:16:06,400
[Respuesta de los estudiantes inaudible] >> ¿Puedes decir eso otra vez?

276
00:16:06,400 --> 00:16:10,140
[Estudiante] Los anuncios son relativamente discreta. >> ¿En qué sentido?

277
00:16:10,140 --> 00:16:16,370
[Respuesta de los estudiantes inaudible] Ellos no tienen luz en la pantalla, como banderas.

278
00:16:16,370 --> 00:16:17,760
Bien. Eso es bueno.

279
00:16:17,760 --> 00:16:25,030
Si te acuerdas de Internet desde los años 90 - >> [Malan] yo estaba allí. >> El estaba allí. [Risas]

280
00:16:25,030 --> 00:16:29,210
Puede que recuerde intermitentes fondos GIF, brillantes cosas,

281
00:16:29,210 --> 00:16:31,570
Tipo GeoCities estilo de las cosas.

282
00:16:31,570 --> 00:16:34,080
Eso no es realmente un ejemplo de un buen diseño

283
00:16:34,080 --> 00:16:36,690
porque realmente está distrayendo de su contenido.

284
00:16:36,690 --> 00:16:39,590
El sitio web de Yale arte solía tener GIFs animados como sus antecedentes

285
00:16:39,590 --> 00:16:41,800
y no se podía leer nada en la página,

286
00:16:41,800 --> 00:16:44,870
pero creo que alguien realmente hablé con ellos y ahora es un poco diferente.

287
00:16:44,870 --> 00:16:48,940
[Malan] Es mucho mejor ahora. >> Es mucho mejor ahora, como puedes ver. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Simplemente genial, justo - Sí. Bien.

289
00:16:56,020 --> 00:17:00,560
>> Parte de ello también está haciendo su página posiblemente muy minimalista y muy comprensible

290
00:17:00,560 --> 00:17:05,690
así que las cosas en el flujo de la página de una manera que es muy lógico y no te metas en el camino de los demás.

291
00:17:05,690 --> 00:17:11,849
¿Qué tipo de cosas son buenas o malas acerca de Facebook acerca de Facebook?

292
00:17:11,849 --> 00:17:15,730
Vamos a tener una conversación diseño aquí.

293
00:17:19,470 --> 00:17:21,339
Oh. ¿Dónde? Si.

294
00:17:21,339 --> 00:17:25,640
[Estudiante] El sistema de nueva línea de tiempo le permite buscar el perfil de la persona acerca de su pasado.

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

296
00:17:28,119 --> 00:17:30,280
Timeline es una gran cosa porque le permite acechar a tus amigos

297
00:17:30,280 --> 00:17:33,300
cuando estaban en la secundaria.

298
00:17:35,160 --> 00:17:38,060
Línea de tiempo es bueno porque te permite filtrar contenido mucho más rápido,

299
00:17:38,060 --> 00:17:41,500
que le permite encontrar las cosas que de otro modo habría que tomar un tiempo muy largo para encontrar

300
00:17:41,500 --> 00:17:45,840
simplemente desplazándose hacia arriba y abajo, arriba, arriba, arriba, arriba, arriba, como ir atrás en el tiempo.

301
00:17:45,840 --> 00:17:48,910
Pero también hay una especie de desventaja de que en términos de experiencia del usuario.

302
00:17:48,910 --> 00:17:51,190
¿Qué podría ser?

303
00:17:51,190 --> 00:17:56,780
Gran palabra que empieza con P-R. >> [Los estudiantes] de privacidad. Privacidad >>, ¿no?

304
00:17:56,780 --> 00:17:59,970
La privacidad es un tema de enorme experiencia del usuario.

305
00:17:59,970 --> 00:18:07,190
Esta es una de las cosas que más odio de Facebook ahora. [Risas]

306
00:18:07,190 --> 00:18:09,000
[Malan] Tal como lo hago ahora.

307
00:18:09,000 --> 00:18:11,380
David no se dio cuenta de que esto realmente sucedió hasta ayer.

308
00:18:11,380 --> 00:18:14,560
Así que ahora que sabe que cada vez que le chatear sé que él me ha estado ignorando.

309
00:18:14,560 --> 00:18:16,880
[Malan] La parte difícil fue que era en realidad lo ignora,

310
00:18:16,880 --> 00:18:21,040
y yo no sabía que él sabía que yo lo estaba ignorando. [Risas]

311
00:18:21,040 --> 00:18:24,030
La privacidad es un gran problema.

312
00:18:24,030 --> 00:18:28,670
Aquí nadie puede decirme lo que podría ser malo sobre privacidad de Facebook

313
00:18:28,670 --> 00:18:32,270
además del hecho de que se hacen las cosas de esta manera?

314
00:18:32,270 --> 00:18:37,240
Lo que es particularmente difícil de hacer con respecto a la privacidad de Facebook?

315
00:18:37,240 --> 00:18:40,340
Este tipo de pregunta es un líder.

316
00:18:41,680 --> 00:18:43,930
Sí. >> [Estudiante] Ocultar las fotos de determinadas personas.

317
00:18:43,930 --> 00:18:46,170
Derecha. Exactamente, para ocultar sus fotos de determinadas personas.

318
00:18:46,170 --> 00:18:51,290
Tienen este pequeño botón pequeño se encuentra en la parte superior derecha que le permite cambiar la privacidad de una foto.

319
00:18:51,290 --> 00:18:56,360
Sus opciones de privacidad son muy variados entre los diferentes tipos de menús.

320
00:18:56,360 --> 00:18:59,510
>> Han mejorado mucho en ello últimamente, pero lo que solía ser el caso

321
00:18:59,510 --> 00:19:04,870
que cada vez que quería evitar que sus amigos de las fotos viendo,

322
00:19:04,870 --> 00:19:08,280
usted tendría que pasar por un complicado proceso de 5 pasos de ser como,

323
00:19:08,280 --> 00:19:11,150
déjame hacer clic en este enlace, ahora déjenme hacer clic de nuevo, déjame clic de nuevo,

324
00:19:11,150 --> 00:19:13,420
Permitir especificar que la gente no puede ver mis fotos.

325
00:19:13,420 --> 00:19:17,250
Eso no es particularmente bueno en parte de Facebook

326
00:19:17,250 --> 00:19:20,530
ya que gran parte de la experiencia del usuario es en realidad les da la libertad

327
00:19:20,530 --> 00:19:22,460
para controlar lo que la gente puede ver.

328
00:19:22,460 --> 00:19:25,550
Llamamos a este control de usuario y la libertad.

329
00:19:25,550 --> 00:19:31,090
Si usted no está dejando que sus usuarios hacer eso de una manera que sea eficiente e intuitivo,

330
00:19:31,090 --> 00:19:34,570
entonces su experiencia de usuario no es realmente tan bueno en absoluto.

331
00:19:34,570 --> 00:19:38,200
 ¿Le gusta a ustedes decir nada acerca de Facebook?

332
00:19:38,700 --> 00:19:41,420
¿Cómo puedo desactivar esta opción?

333
00:19:41,420 --> 00:19:46,290
[Ong] No se puede desactivar esta opción, y eso es un error enorme facilidad de uso por parte de Facebook.

334
00:19:46,290 --> 00:19:49,410
Esta característica - que en realidad parecía a lo de ayer -

335
00:19:49,410 --> 00:19:53,940
que es o que no es posible hacerlo o es enterrado en algún lugar muy, muy profundo

336
00:19:53,940 --> 00:19:58,050
en los recovecos de Facebook porque no puedo encontrar la manera de desactivar esta funcionalidad en absoluto.

337
00:19:58,050 --> 00:20:00,400
[Malan] Pero a veces estas decisiones no son evidentes

338
00:20:00,400 --> 00:20:03,890
porque ustedes nos han dado una gran cantidad de información útil sobre diferentes aplicaciones CS50

339
00:20:03,890 --> 00:20:05,710
y sitios web que utiliza el curso.

340
00:20:05,710 --> 00:20:10,260
No se han puesto en práctica todas estas peticiones y sugerencias.

341
00:20:10,260 --> 00:20:14,550
>> Parte de eso es para conseguir tantas solicitudes que se trata de una función del tiempo,

342
00:20:14,550 --> 00:20:17,070
pero a veces simplemente tomar una decisión consciente como,

343
00:20:17,070 --> 00:20:19,830
"Gracias por la sugerencia, pero no estamos de acuerdo".

344
00:20:19,830 --> 00:20:24,350
Entonces, ¿cómo decide realmente lo que debe hacer si los usuarios cree que debería hacer algo

345
00:20:24,350 --> 00:20:28,110
incluso si no lo hace necesariamente?

346
00:20:28,110 --> 00:20:32,360
Es un delicado equilibrio entre realidad escuchando lo que los usuarios dicen

347
00:20:32,360 --> 00:20:35,840
y realmente tener una especie de línea donde usted dice,

348
00:20:35,840 --> 00:20:37,750
"Nosotros no vamos a hacer lo que estos dicen los usuarios."

349
00:20:37,750 --> 00:20:42,520
Y en particular, creo que había una cita de Henry Ford que lo resume bastante bien.

350
00:20:42,520 --> 00:20:47,130
"Si hubiera preguntado a la gente lo que ellos querían, ellos habrían dicho que querían caballos más rápidos".

351
00:20:47,130 --> 00:20:51,840
¿Alguien puede ordenar de separar lo que realmente significa esa frase?

352
00:20:51,840 --> 00:20:56,060
No es sólo que los usuarios sepan lo que quieren,

353
00:20:56,060 --> 00:20:59,180
pero es más que -

354
00:20:59,180 --> 00:21:02,720
[Estudiante] Ellos no saben lo que es posible.

355
00:21:02,720 --> 00:21:06,140
En parte, porque no saben lo que es posible.

356
00:21:07,880 --> 00:21:11,440
Se burlan de que, aparte de un poco más. ¿Qué quieres decir con eso?

357
00:21:11,440 --> 00:21:21,340
[Respuesta de los estudiantes inaudible]

358
00:21:21,340 --> 00:21:25,770
Eso es bueno. Lo que creo que estamos tratando de decir aquí es que la gente sepa lo que quiere.

359
00:21:25,770 --> 00:21:28,050
Quieren más rápidos caballos.

360
00:21:28,050 --> 00:21:29,840
Lo que realmente quieren es la capacidad de moverse más rápido,

361
00:21:29,840 --> 00:21:32,310
pero no se sabe muy bien el medio por el cual para lograrlo.

362
00:21:32,310 --> 00:21:36,330
Al llegar a sus usuarios y sus usuarios decirte algo

363
00:21:36,330 --> 00:21:39,700
y te dicen: "Queremos que estas características y estas características y estas características",

364
00:21:39,700 --> 00:21:42,650
no quiero pensar necesariamente sobre: ​​"Déjame ir por delante

365
00:21:42,650 --> 00:21:44,720
"Y poner en práctica lo que dice explícitamente:"

366
00:21:44,720 --> 00:21:48,610
pero lo que quiero pensar es: "¿Qué clase de ideas puedo obtener de esto?"

367
00:21:48,610 --> 00:21:50,450
¿Qué es lo que realmente quieres?

368
00:21:50,450 --> 00:21:55,560
>> Y a partir de ahí lo que se puede hacer es diseñar algo que satisfaga las peticiones

369
00:21:55,560 --> 00:22:00,340
pero no necesariamente en la forma en que el usuario espera que esté satisfecho.

370
00:22:00,340 --> 00:22:03,830
Así que por algo así como proyectos finales, en términos reales,

371
00:22:03,830 --> 00:22:07,900
lo que es una heurística útil cuando se trata de hacer algo mejor,

372
00:22:07,900 --> 00:22:10,630
especialmente si el diseñador tiene la arrogancia de él

373
00:22:10,630 --> 00:22:14,360
por lo que usted sabe de lo que es mejor, es posible obtener información de sus usuarios,

374
00:22:14,360 --> 00:22:16,580
pero ¿cómo van realmente sobre conseguir que la retroalimentación?

375
00:22:16,580 --> 00:22:21,610
En los proyectos finales, muy concretamente, lo que produce resultados óptimos en esta lista?

376
00:22:21,610 --> 00:22:25,030
Lo que produce resultados óptimos - y voy a ir sobre esto en un segundo -

377
00:22:25,030 --> 00:22:29,190
Es este proceso de desarrollo y pruebas y luego iterar.

378
00:22:29,190 --> 00:22:32,020
¿Qué quiero decir con las pruebas es por lo general cuando se diseña algo

379
00:22:32,020 --> 00:22:36,970
Crees que es bastante bueno, como, "Yo soy un gran diseñador. Todo el mundo va a encantar."

380
00:22:36,970 --> 00:22:41,600
Y luego lo pones ahí y la gente no le gusta por alguna razón.

381
00:22:41,600 --> 00:22:46,820
Lo que tienes que hacer es que usted tiene que tomar las partes de las cosas que la gente hace como

382
00:22:46,820 --> 00:22:49,180
y la remodelación de las cosas que la gente no le gusta.

383
00:22:49,180 --> 00:22:53,080
Suena como un proceso muy obvio, pero este proceso de iteración constante

384
00:22:53,080 --> 00:22:55,980
encima de lo que ya has construido es un proceso que le ayuda a

385
00:22:55,980 --> 00:22:59,730
no sólo afinar sus habilidades de diseño propio, pero también le ayuda a perfeccionar el diseño

386
00:22:59,730 --> 00:23:03,790
por lo que la gente realmente apreciamos su producto incluso más que antes.

387
00:23:03,790 --> 00:23:07,390
>> Iré más ejemplos concretos de lo que en realidad podría hacer.

388
00:23:07,390 --> 00:23:11,390
Como una especie de último ejemplo de un producto, vamos a ver KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK cuando salió era muy, muy popular.

390
00:23:14,970 --> 00:23:18,760
¿Alguien puede adivinar por qué?

391
00:23:18,760 --> 00:23:20,950
¿Cuáles son los tipos de cosas que te gustan de esta opción si ha utilizado

392
00:23:20,950 --> 00:23:23,990
o ¿cuáles son el tipo de cosas que no te gustan?

393
00:23:23,990 --> 00:23:31,590
Sí. >> [Respuesta de los estudiantes inaudible] >> Okay.

394
00:23:31,590 --> 00:23:34,730
Eso es parte de ella está dejando que el usuario tiene una consulta que es más expansiva

395
00:23:34,730 --> 00:23:38,150
que sea muy restrictivo así como: "Tienes que escoger la fecha de inicio

396
00:23:38,150 --> 00:23:39,810
"Y usted tiene que escoger su fecha de finalización."

397
00:23:39,810 --> 00:23:44,910
De hecho, se le permite ser flexible al respecto y le da todos los vuelos en ese rango.

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

399
00:23:46,730 --> 00:23:50,530
[Estudiante] Incluyen las tasas en el precio.

400
00:23:50,530 --> 00:23:53,330
Hacen incluir las tasas en el precio.

401
00:23:53,330 --> 00:23:56,720
Los impuestos y las cosas realmente van directamente a ese precio en la parte superior izquierda

402
00:23:56,720 --> 00:24:00,710
lo que no está engañado haciéndole creer que en realidad estás pagando por un vuelo de 240 dólares

403
00:24:00,710 --> 00:24:03,280
cuando en realidad es $ 330.

404
00:24:03,280 --> 00:24:06,200
¿Algo más? Sí.

405
00:24:06,200 --> 00:24:10,140
[Respuesta de los estudiantes inaudible]

406
00:24:10,140 --> 00:24:14,610
No estoy seguro de si realmente vamos a hacer eso.

407
00:24:14,610 --> 00:24:18,310
Puedo estar equivocado.

408
00:24:18,310 --> 00:24:23,360
Eso podría ser una cosa interesante si usted quiere poner más peso en particular filtros

409
00:24:23,360 --> 00:24:27,000
de modo que empuje los resultados relacionados con ese filtro a la parte superior.

410
00:24:27,000 --> 00:24:31,920
Pero, ¿puede alguien decirme qué tiene de especial este lado izquierdo?

411
00:24:31,920 --> 00:24:39,540
¿Cómo tradicionalmente buscar un vuelo en un servicio de Internet antes de esto?

412
00:24:41,600 --> 00:24:44,650
>> Sí. >> [Respuesta de los estudiantes inaudible] >> ¿Se puede decir que -

413
00:24:44,650 --> 00:24:47,530
[Estudiante] Cada línea aérea. Sí >>. Cada línea aérea tiene su propio sitio web.

414
00:24:47,530 --> 00:24:50,110
Esto consolida las cosas. ¿Y?

415
00:24:50,110 --> 00:24:52,190
[Estudiante] Usted sabe exactamente a qué hora te vas.

416
00:24:52,190 --> 00:24:54,460
Usted sabe exactamente a qué hora te vas,

417
00:24:54,460 --> 00:24:59,380
pero relacionados con los filtros en particular.

418
00:25:00,710 --> 00:25:03,540
Déjame levantar KAYAK.

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

420
00:25:14,020 --> 00:25:17,230
¿Qué sucede cuando mueve este control?

421
00:25:17,230 --> 00:25:21,010
[Estudiante] Actualizaciones automáticas. >> [Ong] actualizaciones automáticas.

422
00:25:21,010 --> 00:25:23,440
Eso es algo que es muy importante.

423
00:25:23,440 --> 00:25:25,380
Antes de esto, cada vez que quería buscar un vuelo,

424
00:25:25,380 --> 00:25:28,410
había que poner en su lugar de entrada, el lugar de salida, pulse Buscar,

425
00:25:28,410 --> 00:25:31,190
habría que procesar y mostrar sus resultados.

426
00:25:31,190 --> 00:25:34,120
Si usted quiere cambiar su búsqueda, usted tiene que pulsar dos veces,

427
00:25:34,120 --> 00:25:39,770
entrar en una nueva consulta desde cero, y luego hacerlo una y otra vez.

428
00:25:39,770 --> 00:25:43,910
Lo bueno de algo como esto es que utiliza una gran cosa [ininteligible] en el medio.

429
00:25:43,910 --> 00:25:46,230
Cada vez que se hace algo como esto, se dispara una solicitud

430
00:25:46,230 --> 00:25:48,420
y te devuelve todos los resultados inmediatamente.

431
00:25:48,420 --> 00:25:51,680
Este tipo de respuesta inmediata es algo que se hizo muy popular en KAYAK

432
00:25:51,680 --> 00:25:55,910
porque es muy fácil para mí para cambiar sólo mi consulta

433
00:25:55,910 --> 00:25:58,890
y de averiguar lo que es de alrededor de un rango determinado

434
00:25:58,890 --> 00:26:01,950
sin tener que ir adelante y atrás, adelante y atrás, adelante y atrás.

435
00:26:01,950 --> 00:26:05,200
Así que estas son todas las clases de cosas que quieres que pensar cuando usted está diseñando su sitio web.

436
00:26:05,200 --> 00:26:08,930
¿Cómo puedo hacer que sea muy eficiente para mis usuarios a pasar por lo que estamos trabajando en

437
00:26:08,930 --> 00:26:13,010
y para llegar a su meta final lo más rápido posible?

438
00:26:13,010 --> 00:26:16,430
[Malan] Y a punto de José antes sobre los usuarios no necesariamente saben lo que quieren,

439
00:26:16,430 --> 00:26:18,640
sobre la base de lo que ustedes ya saben acerca de HTML

440
00:26:18,640 --> 00:26:22,780
y usted tiene casillas de verificación, botones de radio, menús de selección, campos de entrada y similares,

441
00:26:22,780 --> 00:26:26,140
¿cómo poner en práctica la idea de escoger una hora de inicio de un vuelo?

442
00:26:26,140 --> 00:26:30,030
>> ¿Cuál de estos mecanismos de interfaz de usuario diferentes usaría?

443
00:26:30,030 --> 00:26:34,100
Si usted acaba de saber la cantidad de HTML que se enseñaba antes

444
00:26:34,100 --> 00:26:39,070
y usted sabe que las entradas son botones de opción, casillas de verificación, la caída de saneamientos, y la caja de entrada,

445
00:26:39,070 --> 00:26:43,320
¿cuál sería su opción natural han sido para escoger las fechas?

446
00:26:43,320 --> 00:26:48,670
[Estudiante] Entrada. >> Entrada. O tal vez incluso un menú desplegable con todas las fechas, ¿no?

447
00:26:48,670 --> 00:26:53,170
Así que con los mecanismos de la interfaz de usuario más complejas como esta en el lado izquierdo que se pueden implementar,

448
00:26:53,170 --> 00:26:55,500
usted puede hacer este proceso mucho más intuitiva con un control deslizante

449
00:26:55,500 --> 00:27:01,020
porque el tiempo es continuo, y las personas no suelen pensar en ella en términos de trozos discretos.

450
00:27:01,020 --> 00:27:04,950
Está bien. La última cosa.

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

452
00:27:07,370 --> 00:27:10,820
Todas las cosas que hablamos probablemente pertenecen a una de estas categorías.

453
00:27:10,820 --> 00:27:14,420
Si vas a este enlace, los sitios que se publicará en Internet,

454
00:27:14,420 --> 00:27:18,900
que realmente va a ser capaz de hacerlo, como el diseño de su sitio, tenga en cuenta estas heurísticas

455
00:27:18,900 --> 00:27:21,330
y estas reglas generales.

456
00:27:21,330 --> 00:27:26,610
Para sus proyectos, lo que te sugiero que hagas con el fin de diseñar su aplicación mejor

457
00:27:26,610 --> 00:27:28,850
es hacer prototipos de papel.

458
00:27:28,850 --> 00:27:32,150
Cuando usted está pensando en su aplicación, muy rápidamente dibujar lo que quieras que se vea como

459
00:27:32,150 --> 00:27:36,230
y asegúrese de que todas las cajas están dispuestas de una manera que es muy intuitivo para el usuario utilice

460
00:27:36,230 --> 00:27:39,820
e incluso mostrar los prototipos de papel a tus amigos y empezar a grupos de enfoque.

461
00:27:39,820 --> 00:27:44,230
Acaba de obtener 2 o 3 personas y pedirles que toca justo en estos prototipos de papel,

462
00:27:44,230 --> 00:27:47,650
y enseñarles nuevas pantallas para ver si realmente entender lo que está pasando.

463
00:27:47,650 --> 00:27:50,680
>> Lo que quiero hacer es darles una tarea, motivar esa tarea,

464
00:27:50,680 --> 00:27:53,270
y sólo les dan la aplicación y dejar que lo utilice.

465
00:27:53,270 --> 00:27:56,530
No les dé instrucciones más allá de eso.

466
00:27:56,530 --> 00:28:00,920
¿Quieres dejar que ellos realmente interactúan con su aplicación de una manera que le permite ver

467
00:28:00,920 --> 00:28:03,870
la forma en que lo usaría si no estaban de pie junto a ellos.

468
00:28:03,870 --> 00:28:05,250
Y eso es muy importante.

469
00:28:05,250 --> 00:28:08,780
Eso le dará un montón de ideas que son las personas que reciben en torno a las cosas particulares

470
00:28:08,780 --> 00:28:10,560
de una manera que no les proponen?

471
00:28:10,560 --> 00:28:14,680
¿Están utilizando los mecanismos particulares de interfaz de usuario en la pantalla

472
00:28:14,680 --> 00:28:17,490
de una manera que es una especie de hacky?

473
00:28:17,490 --> 00:28:22,020
Yo no tenía la intención de que lo hagan de esa manera.

474
00:28:22,020 --> 00:28:23,940
Y una vez que hayas terminado con eso, ¿qué quieres que haga?

475
00:28:23,940 --> 00:28:26,010
Sus rocas de diseño, ¿no?

476
00:28:26,010 --> 00:28:29,600
Lo que quiero hacer es que queremos desarrollar y luego hacer el proceso otra vez.

477
00:28:29,600 --> 00:28:32,110
Así que mostrar a sus amigos una vez que has desarrollado, probar,

478
00:28:32,110 --> 00:28:36,630
desarrollar, probar, desarrollar, probar, repetir, una y otra y hacia adelante.

479
00:28:36,630 --> 00:28:39,720
El diseño es muy un proceso iterativo en este sentido.

480
00:28:39,720 --> 00:28:43,280
Usted realmente tiene que construir algo y luego se dan cuenta cosas sobre él

481
00:28:43,280 --> 00:28:46,520
que no se había dado cuenta antes y volver y mejorar a partir de eso.

482
00:28:46,520 --> 00:28:50,890
Ahora, en cuanto a la parte de desarrollo, eso es lo que Tommy se va a mostrar después de las vacaciones

483
00:28:50,890 --> 00:28:53,220
y cómo usted puede ser capaz de implementar algo como autocompletar

484
00:28:53,220 --> 00:28:56,610
de una manera que es bastante simple.

485
00:28:57,440 --> 00:28:59,550
[Malan] Como Tommy establece aquí, la pregunta entonces.

486
00:28:59,550 --> 00:29:03,780
Muchos de los primeros sitios web - y cuando José dijo 1990s sitio web estilo,

487
00:29:03,780 --> 00:29:07,640
era implementaciones donde si querías elegir una hora de inicio y una hora de finalización,

488
00:29:07,640 --> 00:29:10,380
francamente, de vuelta en el día, e incluso en algunos sitios web hoy en día,

489
00:29:10,380 --> 00:29:13,220
la forma de hacer esto es que una hora de escoger un menú desplegable,

490
00:29:13,220 --> 00:29:15,910
usted escoge minutos de un desplegable, tal vez usted elegir AM, PM,

491
00:29:15,910 --> 00:29:17,440
y luego hacer que 3 veces más.

492
00:29:17,440 --> 00:29:19,920
Y así, con 6 clics y tal vez un poco de movimiento en sentido vertical

493
00:29:19,920 --> 00:29:24,000
el usuario realmente puede proporcionar algún tipo de fecha y / o rango de tiempo en este sentido.

494
00:29:24,000 --> 00:29:27,920
>> Así que definitivamente subóptima y, sin embargo hasta el momento no hemos visto ninguna capacidad expresiva

495
00:29:27,920 --> 00:29:30,330
en cualquiera de los idiomas que hemos visto hacer algo más sexy

496
00:29:30,330 --> 00:29:32,620
al igual que el control deslizante de la hora de inicio y hora de finalización.

497
00:29:32,620 --> 00:29:36,290
Pero si piensas en la semana 0, cuando hablamos de Scratch,

498
00:29:36,290 --> 00:29:39,080
allí no había widgets que acaba de hacer ciertas cosas.

499
00:29:39,080 --> 00:29:42,700
Usted realmente sólo tenía estos fundamentos como los bucles y las condiciones y similares.

500
00:29:42,700 --> 00:29:46,910
Así que tipo de sólo pensar muy abstractamente ahora, independientemente de las particularidades de HTML,

501
00:29:46,910 --> 00:29:51,260
lo que realmente está pasando con algo así como la hora de inicio y hora de finalización slider?

502
00:29:51,260 --> 00:29:54,960
Cuando muevo el ratón y hacer clic en ese símbolo zanahoria poco a la izquierda

503
00:29:54,960 --> 00:29:59,220
y empezar a arrastrar, mediante programación, qué es lo que quiero ser capaz de implementar

504
00:29:59,220 --> 00:30:01,000
para que esto suceda?

505
00:30:01,000 --> 00:30:04,920
¿Qué preguntas, ¿qué expresiones booleanas qué quieres ser capaz de hacer?

506
00:30:04,920 --> 00:30:06,930
¿Qué está pasando realmente? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Estudiante] ¿Dónde está la posición del cursor? Bueno >>. ¿Dónde está la posición del cursor?

508
00:30:10,080 --> 00:30:11,970
Esto era algo que teníamos que expresar de nuevo en Scratch,

509
00:30:11,970 --> 00:30:14,690
si se basa en la ubicación o incluso el color o similar.

510
00:30:14,690 --> 00:30:18,410
Usted puede recordar muy brevemente el lunes había todas estas cosas que se llaman eventos

511
00:30:18,410 --> 00:30:22,370
en el mundo de la Web, por lo que hay cosas como onclick y onkeypress

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

513
00:30:25,960 --> 00:30:29,130
Así que darse cuenta de que incluso estas cosas que hemos estado tomando por sentado en la Web

514
00:30:29,130 --> 00:30:32,190
con sitios como Facebook y Gmail, incluso si usted no tiene ninguna idea

515
00:30:32,190 --> 00:30:34,890
cómo es posible que llevaría a cabo porque no hay nada siquiera parecido en conferencia

516
00:30:34,890 --> 00:30:38,570
o Problema 7, se dan cuenta de que con estos fundamentos mismos exactos,

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

518
00:30:41,090 --> 00:30:44,010
con los insumos básicos de HTML que hemos visto hasta ahora

519
00:30:44,010 --> 00:30:47,690
y en un momento con los mecanismos programáticos que Tommy está a punto de introducir

520
00:30:47,690 --> 00:30:51,300
puede empezar a expresarte tal y como hizo en la semana 0

521
00:30:51,300 --> 00:30:53,800
por muy intuitiva de arrastrar y soltar.

522
00:30:53,800 --> 00:30:58,950
>> Así que dicho esto, Tommy MacWilliam y algunas nuevas piezas del rompecabezas para nosotros para Web.

523
00:30:58,950 --> 00:31:03,450
Está bien. Mi nombre es Tommy y yo voy a estar hablando de JavaScript.

524
00:31:03,450 --> 00:31:07,150
Sólo una aclaración: yo soy de la opinión de que JavaScript es el mejor lenguaje de programación

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

526
00:31:09,010 --> 00:31:11,940
Hay un montón de personas que no están de acuerdo conmigo, pero es simplemente increíble.

527
00:31:11,940 --> 00:31:16,330
Una vez que vuelva a C, si tienes que escribir C para otra clase o algunos otros idiomas,

528
00:31:16,330 --> 00:31:19,780
Es realmente frustrante en todos los detalles de bajo nivel que tiene que enredarse pulg

529
00:31:19,780 --> 00:31:23,050
Así que si alguna vez te sientes triste por lo molesto C es escribir,

530
00:31:23,050 --> 00:31:25,130
sólo tiene que ir de nuevo, escribir algo de JavaScript. Es el nirvana.

531
00:31:25,130 --> 00:31:27,980
Usted se sentirá mucho mejor acerca de su mal día.

532
00:31:27,980 --> 00:31:31,900
Gran parte de la magia de JavaScript se debe a su habilidad para manipular las cosas

533
00:31:31,900 --> 00:31:33,730
que ya están en la página.

534
00:31:33,730 --> 00:31:38,520
Cuando escribimos nuestros scripts PHP, que fueron ejecutados en el servidor,

535
00:31:38,520 --> 00:31:42,270
y, finalmente, que la salida de script PHP probablemente algo de HTML.

536
00:31:42,270 --> 00:31:45,860
Eso HTML se envía al cliente, y luego que lo era.

537
00:31:45,860 --> 00:31:50,180
Si PHP quería agregar un botón a una página, por ejemplo, no se puede hacer eso.

538
00:31:50,180 --> 00:31:54,350
Tendría que hacer un conjunto nuevo archivo HTML y enviarlo al navegador.

539
00:31:54,350 --> 00:31:57,840
Con JavaScript sabemos que podemos actualizar las cosas mientras están ya en la página,

540
00:31:57,840 --> 00:32:00,840
y debido a esto podemos proporcionar información mucho más inmediato,

541
00:32:00,840 --> 00:32:06,150
que realmente mejorará la experiencia del usuario en nuestro sitio web.

542
00:32:06,150 --> 00:32:09,330
Sólo un resumen rápido de los selectores de JavaScript.

543
00:32:09,330 --> 00:32:11,590
Sabemos que cuando se descarga una página HTML,

544
00:32:11,590 --> 00:32:13,890
que va a estar representado en el DOM.

545
00:32:13,890 --> 00:32:19,340
>> El DOM recuerdo es precisamente este gran árbol donde los elementos están relacionados en esta jerarquía.

546
00:32:19,340 --> 00:32:21,810
Cuando trabajamos con bases de datos en conjunto de procesadores 7,

547
00:32:21,810 --> 00:32:26,280
una de las primeras cosas que se necesitan saber cómo hacer era consultar la base de datos.

548
00:32:26,280 --> 00:32:29,060
Tenemos esta gran tabla de usuarios, ya veces sólo quiero decir,

549
00:32:29,060 --> 00:32:33,260
"Sólo quiero que algunos de estos usuarios que coincidan con alguna condición."

550
00:32:33,260 --> 00:32:36,020
Del mismo modo, cuando tenemos el DOM necesitamos alguna forma de consulta de la misma.

551
00:32:36,020 --> 00:32:39,490
Necesitamos una manera de decir: "Quiero que todos los botones que se ven así

552
00:32:39,490 --> 00:32:41,860
"O todas las imágenes de la página."

553
00:32:41,860 --> 00:32:44,330
Y estos selectores nos permiten hacer eso.

554
00:32:44,330 --> 00:32:45,690
Así que sólo un resumen rápido.

555
00:32:45,690 --> 00:32:50,770
Este primero aquí, este # presenten, lo que es que va a seleccionar? ¿Alguien se acuerda?

556
00:32:50,770 --> 00:32:54,880
[Respuesta de los estudiantes inaudible] >> Sí, exactamente.

557
00:32:54,880 --> 00:32:59,510
Esto va a seleccionar un elemento en la página que tiene un ID de presentar.

558
00:32:59,510 --> 00:33:03,470
Y para que hash tag dice que este selector se va a trabajar con documentos de identidad.

559
00:33:03,470 --> 00:33:07,630
¿Y el segundo, esto. Centrado, que lo que va a seleccionar?

560
00:33:11,360 --> 00:33:15,180
Si. >> [Estudiante] Clase. >> Exactamente. Esto ahora se va a seleccionar por clase.

561
00:33:15,180 --> 00:33:18,840
La diferencia entre el ID de clase y aquí es generalmente el ID debe ser único

562
00:33:18,840 --> 00:33:20,820
dentro de cualquier espacio que usted está buscando más.

563
00:33:20,820 --> 00:33:23,080
Así que si estás buscando a través de una página web entera,

564
00:33:23,080 --> 00:33:27,740
que realmente sólo debería tener un elemento con ese identificador determinado, por lo que en este caso de presentar.

565
00:33:27,740 --> 00:33:31,330
Con las clases, por otro lado, podemos tener más de 1 elemento en la misma página

566
00:33:31,330 --> 00:33:33,130
con la misma clase.

567
00:33:33,130 --> 00:33:36,580
Esto podría ser útil para decir que quiero seleccionar todo lo que está centrada en la página

568
00:33:36,580 --> 00:33:38,450
en lugar de sólo una cosa.

569
00:33:38,450 --> 00:33:40,310
>> Y finalmente, este último aquí es un poco más complicado,

570
00:33:40,310 --> 00:33:43,890
pero ¿qué es esto va a seleccionar entre el DOM?

571
00:33:46,650 --> 00:33:48,810
[Respuesta de los estudiantes inaudible] >> ¿Qué es eso?

572
00:33:48,810 --> 00:33:53,250
[Estudiante] Cualquier cosa que sea una etiqueta. >> Tenemos 2 partes aquí.

573
00:33:53,250 --> 00:33:58,070
La segunda parte va a decir que quiero seleccionar estas etiquetas con una etiqueta de entrada,

574
00:33:58,070 --> 00:34:00,730
por lo que cualquier elemento que es una etiqueta de entrada.

575
00:34:00,730 --> 00:34:03,080
Pero yo no quiero seleccionar sólo todas las entradas

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

577
00:34:05,170 --> 00:34:08,409
y algo así como un cuadro de texto podría ser una entrada.

578
00:34:08,409 --> 00:34:11,909
Así que con estos corchetes Estoy diciendo que sólo desea seleccionar los elementos

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

580
00:34:14,110 --> 00:34:17,400
En algún lugar de mi etiqueta HTML que tiene un atributo llamado tipo,

581
00:34:17,400 --> 00:34:19,750
y el valor de atributo que tiene que ser texto.

582
00:34:19,750 --> 00:34:21,340
Entonces, ¿qué hay de esta primera parte aquí?

583
00:34:21,340 --> 00:34:25,489
La primera palabra de este selector es la forma entonces tengo un espacio y esta parte de entrada.

584
00:34:25,489 --> 00:34:29,620
¿Qué es lo que hacen, poner el formulario en frente de ella?

585
00:34:33,409 --> 00:34:35,860
Esto va a limitar básicamente nuestra consulta.

586
00:34:35,860 --> 00:34:38,510
Podría ser el caso que tenemos algunas entradas de la página

587
00:34:38,510 --> 00:34:41,080
que no son descendientes de un formulario.

588
00:34:41,080 --> 00:34:46,150
Lo que esto va a hacer es esto decir que sólo quieren que las etiquetas de entrada que tienen en algún lugar por encima de ellos

589
00:34:46,150 --> 00:34:49,030
algún elemento principal de un formulario.

590
00:34:49,030 --> 00:34:52,100
Y así, de esta manera podemos hacer que estas consultas más jerárquicas

591
00:34:52,100 --> 00:34:55,000
por lo que no sólo tiene que seleccionar todo cumple un selector dado.

592
00:34:55,000 --> 00:35:00,760
Podemos especie de límite del alcance de esa consulta a otra cosa.

593
00:35:00,760 --> 00:35:04,000
Así que ahora que sabemos cómo seleccionar elementos en la página,

594
00:35:04,000 --> 00:35:06,780
vamos a hablar un poco acerca de AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX es un acrónimo aún muy de moda que representa JavaScript asíncrono y XML.

596
00:35:12,270 --> 00:35:15,640
Lo que pasa es que XML es sólo una forma de representar los datos.

597
00:35:15,640 --> 00:35:20,920
>> Ese tipo de popularidad perdido recientemente, por lo que la X en AJAX no se utiliza todo el tiempo.

598
00:35:20,920 --> 00:35:26,220
Básicamente, lo que AJAX nos permite hacer es realizar peticiones HTTP

599
00:35:26,220 --> 00:35:28,620
a partir del contexto de JavaScript.

600
00:35:28,620 --> 00:35:32,310
Cuando estamos en nuestro navegador web y estamos navegando por las páginas y haga clic en un enlace,

601
00:35:32,310 --> 00:35:37,790
lo que nuestro navegador se va a hacer es hacer una petición HTTP a cualquier enlace que haga clic.

602
00:35:37,790 --> 00:35:41,670
Pero eso no siempre es ideal, porque si ese es el caso, entonces cuando David estaba diciendo:

603
00:35:41,670 --> 00:35:45,220
siempre tenemos que hacer que los usuarios hacer clic en un botón de envío o haga clic en un enlace

604
00:35:45,220 --> 00:35:50,380
con el fin de hacer que algo suceda eso va a implicar una petición HTTP.

605
00:35:50,380 --> 00:35:54,160
Así que con AJAX podemos hacer estas peticiones en nombre de JavaScript.

606
00:35:54,160 --> 00:35:57,020
Eso significa que cada vez que el usuario interactúa con la página o cualquier cosa que pase,

607
00:35:57,020 --> 00:36:01,780
que realmente puede hacer una solicitud mediante programación a algún archivo PHP por nuestra página web

608
00:36:01,780 --> 00:36:06,280
o cualquier otra cosa y recuperar los datos de ese archivo que escupe.

609
00:36:06,280 --> 00:36:09,860
Echemos un vistazo a un ejemplo de AJAX.

610
00:36:09,860 --> 00:36:16,140
Esta es nuestra página de Finanzas CS50 con el que espero que algunos de nosotros estamos familiarizados.

611
00:36:16,140 --> 00:36:21,790
Si nos fijamos en el código HTML de la página, vemos aquí que he añadido algunas cosas,

612
00:36:21,790 --> 00:36:23,820
uno de los cuales me he dado esta forma una identificación.

613
00:36:23,820 --> 00:36:26,480
He dicho id = "form-cita".

614
00:36:26,480 --> 00:36:31,910
Lo he hecho sólo porque va a hacer esto un poco más fácil la selección del DOM

615
00:36:31,910 --> 00:36:35,090
ya que sólo se puede hacer una consulta muy simple.

616
00:36:35,090 --> 00:36:38,960
Lo que quiero hacer aquí es que quiero arreglar algún problema con CS50 Finanzas.

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

618
00:36:41,550 --> 00:36:45,700
cada vez que desee obtener una cita, tengo que hacer clic en este botón Cita Get,

619
00:36:45,700 --> 00:36:48,960
y que Get botón Citar entonces me lleva a otra página entera.

620
00:36:48,960 --> 00:36:52,400
Y si quiero otra cita, tengo que golpear el botón Back y luego escribirlo,

621
00:36:52,400 --> 00:36:54,480
Tengo una cita, y apreté el botón Atrás.

622
00:36:54,480 --> 00:36:56,840
Esto realmente no es la mejor experiencia de usuario.

623
00:36:56,840 --> 00:37:01,570
¿Quién realmente utilizar el sitio si es tan lento para obtener los precios de las acciones?

624
00:37:01,570 --> 00:37:05,630
Así que lo que quiero hacer con AJAX es eliminar ese paso de ir a otra página

625
00:37:05,630 --> 00:37:08,410
con el fin de ver los resultados.

626
00:37:08,410 --> 00:37:11,240
>> Lo que realmente estamos pidiendo es sólo que el precio realmente pequeño,

627
00:37:11,240 --> 00:37:14,240
y eso es sólo una cantidad muy pequeña de datos.

628
00:37:14,240 --> 00:37:17,400
Así que no hay necesidad de que me vaya a otra página HTML entera,

629
00:37:17,400 --> 00:37:20,670
descargar un lote nuevo de HTML, tal vez descargar algunas imágenes más,

630
00:37:20,670 --> 00:37:24,410
algunos otros archivos CSS sólo para mí responder a esta pregunta muy simple

631
00:37:24,410 --> 00:37:27,810
de cuánto cuesta este stock.

632
00:37:27,810 --> 00:37:31,000
Con AJAX podemos hacer esto mucho más fácil.

633
00:37:31,000 --> 00:37:36,400
Vemos aquí que estoy vinculando en un archivo JavaScript denominado quote.js.

634
00:37:36,400 --> 00:37:40,140
Vamos realmente abrir ese archivo. No hay.

635
00:37:42,610 --> 00:37:45,860
Todos mis archivos JavaScript van a estar ubicados en HTML

636
00:37:45,860 --> 00:37:47,630
para que el navegador web puede acceder a él.

637
00:37:47,630 --> 00:37:50,330
Entonces tenemos un directorio aparte aquí para JavaScript,

638
00:37:50,330 --> 00:37:54,340
y ahora aquí es quote.js.

639
00:37:54,340 --> 00:38:00,930
En la parte superior de este archivo esta aquí dice que quiere esperar a que toda la página se cargue

640
00:38:00,930 --> 00:38:04,830
antes de tratar de hacer cualquier cosa. ¿Por qué es necesario?

641
00:38:04,830 --> 00:38:08,650
Resulta que lo siguiente que voy a hacer es empezar a buscar un elemento

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

643
00:38:10,810 --> 00:38:15,600
Si este JavaScript es cada vez ejecutado antes de este elemento es cargado en la página,

644
00:38:15,600 --> 00:38:17,820
entonces todo lo que trato de hacer es no ir a trabajar

645
00:38:17,820 --> 00:38:20,580
porque yo voy a tratar de elegir algo que no está allí todavía.

646
00:38:20,580 --> 00:38:23,780
Así que esta línea hasta la parte superior dice que quiero que esperes hasta que todo se carga

647
00:38:23,780 --> 00:38:28,030
por lo que está garantizado que todos los elementos que estoy buscando en realidad en la página.

648
00:38:29,730 --> 00:38:34,310
Este signo dólar significa aquí estoy usando la biblioteca llamada jQuery.

649
00:38:34,310 --> 00:38:38,570
Esta biblioteca jQuery nos permite utilizar estos selectores que acabamos de ver.

650
00:38:38,570 --> 00:38:44,010
Al decir $ entonces pasa como argumento este # form-cito,

651
00:38:44,010 --> 00:38:47,910
Ahora estoy seleccionando esa forma que nos lo tomamos un vistazo.

652
00:38:47,910 --> 00:38:52,290
Ahora tengo una representación de esa forma en la memoria de alguna manera.

653
00:38:52,290 --> 00:38:56,760
>> En este objeto de ahora, esta representación de la forma,

654
00:38:56,760 --> 00:38:58,890
Ahora estoy usando una función llamada sucesivamente.

655
00:38:58,890 --> 00:39:02,710
Lo que hace esta función es que va a conectar un controlador de eventos.

656
00:39:02,710 --> 00:39:06,310
El evento que vamos a escuchar es el evento submit.

657
00:39:06,310 --> 00:39:08,890
Así, cuando el usuario hace clic en que botón Enviar o presione la tecla Intro,

658
00:39:08,890 --> 00:39:11,730
este evento se va a disparar.

659
00:39:11,730 --> 00:39:16,390
Al conectar en esto, ahora puedo reemplazar el comportamiento por defecto del formulario.

660
00:39:16,390 --> 00:39:19,770
Sin este JavaScript, el formulario se sometería a cualquier archivo PHP

661
00:39:19,770 --> 00:39:22,110
se utilizó en ese atributo action.

662
00:39:22,110 --> 00:39:25,440
Pero en cambio, yo estoy diciendo ahora, espera, espera, espera, yo no quiero que hagas eso en realidad.

663
00:39:25,440 --> 00:39:31,140
Quiero que esto ocurra antes de ir y tratar de enviar a algún archivo PHP.

664
00:39:31,140 --> 00:39:32,870
Ahora, ¿qué es lo que quiero hacer?

665
00:39:32,870 --> 00:39:39,270
En este punto quiero utilizar AJAX para cargar de alguna manera en lo que el precio de las acciones es.

666
00:39:39,270 --> 00:39:44,170
Lo primero que necesitamos saber es qué acciones del usuario está mirando hacia arriba.

667
00:39:44,170 --> 00:39:46,760
Para ello voy a utilizar otro selector.

668
00:39:46,760 --> 00:39:49,020
Este es el tercer selector vimos antes.

669
00:39:49,020 --> 00:39:54,460
Esto dice que yo quiero empezar este elemento forma con una identificación de la forma de comillas.

670
00:39:54,460 --> 00:39:58,440
A continuación, en algún lugar dentro de forma que no tiene que ser un elemento de entrada

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

672
00:40:01,270 --> 00:40:05,460
Si miramos hacia atrás en nuestro HTML, vimos que teníamos un input [name = símbolo].

673
00:40:05,460 --> 00:40:12,380
Eso quiere decir que esto va a seleccionar la caja de texto que el usuario escribe en.

674
00:40:12,380 --> 00:40:13,870
Eso está bien. Tenemos el cuadro de texto.

675
00:40:13,870 --> 00:40:17,360
Ahora sólo tenemos que saber lo que hay dentro de ella.

676
00:40:17,360 --> 00:40:20,290
Para ello podemos llamar a este método aquí, este val.,

677
00:40:20,290 --> 00:40:23,240
y esto me dice que sabe lo que cuadro de texto que tiene.

678
00:40:23,240 --> 00:40:28,160
Quiero que me digas qué es lo que el usuario escribe en la caja de texto.

679
00:40:28,160 --> 00:40:34,440
Ahora tenemos una cadena llamada símbolo que es igual a lo que el usuario escribió pulg

680
00:40:34,440 --> 00:40:39,820
Eso está bien. Podemos utilizar ahora esa cadena para que nuestra petición.

681
00:40:39,820 --> 00:40:42,450
Se trata de una nueva función aquí, esta $,

682
00:40:42,450 --> 00:40:44,900
excepto que estamos ya no va a ser la selección de elementos,

683
00:40:44,900 --> 00:40:48,910
vamos a estar llamando a una función diferente que se proporciona a nosotros por jQuery.

684
00:40:48,910 --> 00:40:54,810
Esta función AJAX es lo que realmente va a hacer esta petición HTTP.

685
00:40:54,810 --> 00:40:57,000
Así que tenemos que decirle unas cuantas cosas.

686
00:40:57,000 --> 00:41:01,410
Lo primero que tenemos que decir que esta función es donde quiero ir a la petición.

687
00:41:01,410 --> 00:41:08,910
En algún lugar de mi proyecto tengo este archivo dentro del directorio HTML llamado quote.php.

688
00:41:08,910 --> 00:41:15,150
Puedo acceder a este archivo, vimos, al igual que este, si voy a localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Quiero que mi JavaScript para hacer una petición a esa página.

690
00:41:20,450 --> 00:41:22,920
¿Qué tipo de petición ahora?

691
00:41:22,920 --> 00:41:27,210
Vimos antes que la forma que tiene method = "post" atributo,

692
00:41:27,210 --> 00:41:29,270
y eso significa que va a hacer una petición POST,

693
00:41:29,270 --> 00:41:32,630
por lo que no va a poner nada en la URL, en lugar de una petición GET,

694
00:41:32,630 --> 00:41:36,860
que acaba de ser despedido si sólo accede a la página con el navegador web, por ejemplo.

695
00:41:36,860 --> 00:41:41,260
Ahora hemos dicho que quiero hacer una petición HTTP POST

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

697
00:41:44,840 --> 00:41:51,490
Cuando se envía el formulario, recuerde que puede acceder a los elementos de entrada en el interior de esa forma

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

699
00:41:54,430 --> 00:41:58,710
Hasta ahora, en la historia que no se han enviado a lo largo de todos los datos todavía.

700
00:41:58,710 --> 00:42:00,640
Nos acaba de decir que estamos haciendo una petición AJAX

701
00:42:00,640 --> 00:42:03,200
y aquí está el tipo de solicitud que estamos haciendo.

702
00:42:03,200 --> 00:42:07,090
Ahora tenemos que enviar realmente algunos datos a la página.

703
00:42:07,090 --> 00:42:10,930
Para ello podemos utilizar esta propiedad llamada de datos.

704
00:42:10,930 --> 00:42:14,950
El valor de esta propiedad es realmente una matriz asociativa.

705
00:42:14,950 --> 00:42:19,390
La razón de esto es que nos permite enviar más de sólo 1 pieza de datos.

706
00:42:19,390 --> 00:42:24,750
Es por eso que tenemos estas llaves aquí anidado dentro de estas llaves otros.

707
00:42:24,750 --> 00:42:29,680
Las claves en estas matrices asociativas va a ser la misma cosa

708
00:42:29,680 --> 00:42:32,630
como los atributos de nombre en los elementos de nuestro formulario.

709
00:42:32,630 --> 00:42:35,740
Eso significa que si envío a lo largo de una clave de símbolo,

710
00:42:35,740 --> 00:42:41,870
eso significa que mi página PHP puede acceder a estos datos con $ _POST [símbolo]

711
00:42:41,870 --> 00:42:44,640
tal como lo hicimos antes, cuando estábamos enviar un formulario.

712
00:42:44,640 --> 00:42:47,090
Y ahora los datos reales que queremos enviar

713
00:42:47,090 --> 00:42:50,790
va a ser el interior valor de esta matriz asociativa.

714
00:42:50,790 --> 00:42:54,070
>> Nos guardaron este texto en un símbolo variable llamada,

715
00:42:54,070 --> 00:42:57,380
y por lo que estamos enviando a lo largo de hoy una tecla de símbolo

716
00:42:57,380 --> 00:43:01,380
y el valor de lo que el usuario escribió pulg

717
00:43:01,380 --> 00:43:06,270
Ahora que hemos hecho esta petición HTTP, nuestro archivo PHP se ha ejecutado,

718
00:43:06,270 --> 00:43:11,480
y que va a enviar datos de vuelta ahora para el cliente que acaba de hacer esta petición.

719
00:43:11,480 --> 00:43:15,220
Ahora tenemos que responder a lo que el servidor nos dijo.

720
00:43:15,220 --> 00:43:20,180
Para hacer eso tenemos esta última propiedad aquí se llama éxito.

721
00:43:20,180 --> 00:43:24,240
El valor de esta clave del éxito es en realidad va a ser una función,

722
00:43:24,240 --> 00:43:26,910
y esta es una de las cosas realmente interesantes que puedes hacer con el lenguaje Java.

723
00:43:26,910 --> 00:43:31,720
No sólo se puede tener ints o matrices como un valor dentro de una matriz asociativa,

724
00:43:31,720 --> 00:43:34,170
también puede tener una función.

725
00:43:34,170 --> 00:43:36,380
Así diciendo éxito, esta es mi llave.

726
00:43:36,380 --> 00:43:38,830
Un colon dice aquí viene el valor,

727
00:43:38,830 --> 00:43:41,810
y ahora el valor de este es en realidad una función.

728
00:43:41,810 --> 00:43:44,460
Así que no es necesario dar un nombre a esta función en sí.

729
00:43:44,460 --> 00:43:48,820
Sólo podemos decir que esto va a ser alguna función. Va a tomar un argumento.

730
00:43:48,820 --> 00:43:51,190
El argumento para esta función va a ser

731
00:43:51,190 --> 00:43:54,460
cualquiera que sea el servidor nos envió de regreso de la solicitud.

732
00:43:54,460 --> 00:43:57,750
Al igual que cuando nuestro navegador hace una petición, el servidor envía algo a cambio

733
00:43:57,750 --> 00:43:59,060
y el navegador que muestra,

734
00:43:59,060 --> 00:44:03,030
en el marco de AJAX que acaba de hacer una petición, el servidor envía algo a cambio,

735
00:44:03,030 --> 00:44:07,110
y ahora tenemos que representar como una cadena.

736
00:44:07,110 --> 00:44:11,280
Con esa cadena me gustaría mostrar que en la página.

737
00:44:11,280 --> 00:44:14,040
Para ello voy a tener un selector pasado.

738
00:44:14,040 --> 00:44:17,570
Quiero seleccionar el elemento con el precio de identificación.

739
00:44:17,570 --> 00:44:20,710
Esto es sólo un div vacío que he creado en la página,

740
00:44:20,710 --> 00:44:26,640
y quiero establecer el contenido de ese div a ser lo que el servidor nos mandaron de vuelta.

741
00:44:26,640 --> 00:44:30,280
De hecho, he modificado un poco quote.php.

742
00:44:30,280 --> 00:44:33,460
>> En lugar de llamar render y haciendo alguna página,

743
00:44:33,460 --> 00:44:38,100
quote.php ahora simplemente se va a imprimir el valor de la acción como una cadena.

744
00:44:38,100 --> 00:44:41,880
Así que si usted fuera a visitar la página en realidad, usted acaba de ver esa cadena pequeña

745
00:44:41,880 --> 00:44:45,030
cualquiera que sea el precio de las acciones es.

746
00:44:45,030 --> 00:44:50,170
Una última cosa que necesitamos hacer aquí es simplemente asegurarse de que esta función devuelve false.

747
00:44:50,170 --> 00:44:53,560
Lo que esto dice es que si yo estoy dentro de un controlador de eventos

748
00:44:53,560 --> 00:44:57,300
y ese controlador de eventos devuelve false en lugar de devolver cierto,

749
00:44:57,300 --> 00:45:01,510
eso quiere decir que yo no quiero que el evento original al fuego.

750
00:45:01,510 --> 00:45:05,270
En este caso, si no tuviéramos ningún JavaScript y nos envía un formulario,

751
00:45:05,270 --> 00:45:08,280
nuestro navegador web que va a decir: "Yo voy a enviar esos datos a lo largo de"

752
00:45:08,280 --> 00:45:10,130
y ellos te van a mandar a otra página.

753
00:45:10,130 --> 00:45:14,360
Debido a que estamos usando AJAX ahora, no hay necesidad de enviar al usuario a otra página.

754
00:45:14,360 --> 00:45:17,920
Sólo vamos a mostrar los resultados de forma dinámica en esta misma página.

755
00:45:17,920 --> 00:45:21,460
Nosotros realmente no queremos que ir a ninguna parte, y me quiero quedar en la misma página.

756
00:45:21,460 --> 00:45:27,060
Así que volviendo falso, nos aseguramos de que la forma no lo hace por nosotros.

757
00:45:27,060 --> 00:45:31,170
Echemos un vistazo a lo que esta en realidad parece.

758
00:45:31,170 --> 00:45:34,180
Nuestra página de cotizaciones se ve igual.

759
00:45:34,180 --> 00:45:37,240
Déjame sacar el inspector aquí abajo para que podamos ver lo que está pasando.

760
00:45:37,240 --> 00:45:40,270
Que sea un poco menos grande.

761
00:45:40,270 --> 00:45:44,590
Recuerde que si abrimos la pestaña Red, aquí es donde podemos ver todas las peticiones HTTP

762
00:45:44,590 --> 00:45:47,570
que se están produciendo en la página.

763
00:45:47,570 --> 00:45:52,890
>> Para un símbolo déjame escribir AAPL y haga clic en Obtener cotización.

764
00:45:52,890 --> 00:45:56,720
Ahora hemos visto que una parte de Apple cuesta un poco de cantidad de dólares

765
00:45:56,720 --> 00:46:00,410
acaba de aparecer en la página, pero la dirección no ha cambiado en absoluto.

766
00:46:00,410 --> 00:46:04,570
De hecho, esta es la petición HTTP que acaba de hacer.

767
00:46:04,570 --> 00:46:09,980
Hemos hecho una petición POST a quote.php. Eso tiene sentido.

768
00:46:09,980 --> 00:46:12,800
Esto es lo que el servidor nos mandaron de vuelta.

769
00:46:12,800 --> 00:46:16,320
Ya no es este documento gigantesco HTML con imágenes y cosas por el estilo,

770
00:46:16,320 --> 00:46:20,920
es sólo una línea de texto, y entonces sólo se muestra la línea de texto.

771
00:46:20,920 --> 00:46:26,290
Si nos remontamos a los encabezados y ver lo que en realidad enviado dentro de esta petición HTTP,

772
00:46:26,290 --> 00:46:33,950
podemos ver aquí que se envió a lo largo de una tecla de símbolo y un valor de AAPL,

773
00:46:33,950 --> 00:46:36,430
que es lo que el usuario escribió pulg

774
00:46:36,430 --> 00:46:39,230
Esto es bueno, pero aún así es un poco molesto.

775
00:46:39,230 --> 00:46:42,490
Todavía tiene que hacer clic en este botón para obtener la cotización de acciones.

776
00:46:42,490 --> 00:46:45,880
Somos personas muy ocupadas y no tienen tiempo para hacer clic en los botones.

777
00:46:45,880 --> 00:46:49,910
Google se dio cuenta de este pequeño hace un tiempo cuando implementaron Google Instant.

778
00:46:49,910 --> 00:46:53,590
¿Qué es Google Instant hace como que está escribiendo simplemente comienza a mostrar resultados para usted

779
00:46:53,590 --> 00:46:56,520
por lo que no tiene que preocuparse de siquiera hacer clic en Buscar.

780
00:46:56,520 --> 00:46:58,730
En realidad, una divertida historia relacionada con eso.

781
00:46:58,730 --> 00:47:01,100
Una vez que Google Instant salió, la gente estaba como, "Whoa, esto es súper increíble".

782
00:47:01,100 --> 00:47:02,540
"Esto es genial."

783
00:47:02,540 --> 00:47:05,950
Y un estudiante por la Universidad de Stanford que tenía 19 años en el momento

784
00:47:05,950 --> 00:47:09,000
hecho de este lugar llamado YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Todos YouTube Instant hace es buscar en YouTube eficazmente al instante.

786
00:47:13,170 --> 00:47:17,020
Así que en lugar de tener que ir a YouTube.com y pulse Buscar,

787
00:47:17,020 --> 00:47:21,650
cuando me pongo a escribir algo en YouTube Instant, como CS50,

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

789
00:47:25,320 --> 00:47:28,500
poblar estos resultados vivir.

790
00:47:28,500 --> 00:47:35,590
Para que en realidad podemos hacer una modificación muy sencilla a nuestro archivo quote.js.

791
00:47:35,590 --> 00:47:40,900
En este momento estamos adjuntando este evento cuando se envía el formulario.

792
00:47:40,900 --> 00:47:43,760
Nosotros realmente no queremos hacer que el usuario envíe esta forma nunca más,

793
00:47:43,760 --> 00:47:48,570
así que en vez disparar este evento cada vez que el usuario pulsa una tecla.

794
00:47:48,570 --> 00:47:53,200
Para ello primero vamos a cambiar el evento de presentar a keyup.

795
00:47:53,200 --> 00:47:55,740
Eso significa que, en lugar de esperar a que la forma de presentar,

796
00:47:55,740 --> 00:47:58,490
cada vez que se pulsa la tecla, algo va a suceder.

797
00:47:58,490 --> 00:48:02,030
Ya no tiene sentido añadir este evento KeyUp para todo el formulario.

798
00:48:02,030 --> 00:48:05,080
Realmente sólo se preocupan por la caja de búsqueda.

799
00:48:05,080 --> 00:48:09,320
>> Para seleccionar que ahora, podemos cambiar esto a ser, más que la forma de comillas,

800
00:48:09,320 --> 00:48:14,220
forma de comillas y vamos a tener una entrada (escribir texto =) o podríamos decir (nombre del símbolo =) -

801
00:48:14,220 --> 00:48:16,420
lo que queramos.

802
00:48:16,420 --> 00:48:18,650
Ahora hay una última cosa que tenemos que hacer.

803
00:48:18,650 --> 00:48:21,190
Recordar aquí que dijimos return false

804
00:48:21,190 --> 00:48:24,370
hemos dicho que no queremos que eventos predeterminado para disparar.

805
00:48:24,370 --> 00:48:26,390
Pero da la casualidad de que si desactivamos que ahora,

806
00:48:26,390 --> 00:48:29,660
cualquier cosa que escriba no se va a mostrar en el navegador más

807
00:48:29,660 --> 00:48:33,000
porque eso sería el comportamiento predeterminado de escribir en un cuadro de texto.

808
00:48:33,000 --> 00:48:38,660
Ya no quiero cambiar eso, así que vamos a destruir este return false.

809
00:48:38,660 --> 00:48:44,800
Si ahorramos eso y volver a cargar la página, ahora cuando empiezo a escribir AAPL

810
00:48:44,800 --> 00:48:50,160
verás que el precio de las acciones en el fondo aquí está finalizando de forma automática.

811
00:48:50,160 --> 00:48:53,150
Así que aquí está CS50 instantánea Finanzas.

812
00:48:53,150 --> 00:48:55,860
En realidad, una divertida historia acerca de la instantánea de YouTube

813
00:48:55,860 --> 00:48:59,420
es que los estudiantes sólo un poco de lo escribió como un proyecto de 1-noche,

814
00:48:59,420 --> 00:49:03,800
y al día siguiente se le ofreció un puesto de trabajo por el CEO de YouTube.

815
00:49:03,800 --> 00:49:10,610
Entonces, tan simple como eso, CS50 estudiantes, sus proyectos finales pueden conseguirle un trabajo en YouTube.

816
00:49:10,610 --> 00:49:14,720
Algo así como que es una idea genial para un proyecto final, ¿no?

817
00:49:14,720 --> 00:49:18,170
Tuvimos un poco de la funcionalidad existente que queríamos integrar con.

818
00:49:18,170 --> 00:49:20,330
Mejoramos la experiencia del usuario un poco,

819
00:49:20,330 --> 00:49:24,340
y de pronto buscando algo en YouTube Instant podría ser un montón más fácil

820
00:49:24,340 --> 00:49:27,290
de buscar en YouTube regular.

821
00:49:27,290 --> 00:49:30,790
Así que eso es AJAX en pocas palabras.

822
00:49:30,790 --> 00:49:34,860
>> En los ejemplos que se muestran Joseph, vimos un montón de autocompletes,

823
00:49:34,860 --> 00:49:39,250
y los completa automáticamente son muy, muy práctico, ya que no tiene que recordar -

824
00:49:39,250 --> 00:49:41,770
Por ejemplo, si usted no recuerda el precio de las acciones de Apple

825
00:49:41,770 --> 00:49:45,110
y sólo sé que es algo aa, y no sólo que me decía:

826
00:49:45,110 --> 00:49:48,740
"A parte de esto cuesta tanto dinero",

827
00:49:48,740 --> 00:49:52,540
Había algo así como saber qué acciones comienzan con aa.

828
00:49:52,540 --> 00:49:58,340
Podemos hacerlo realmente bien con la biblioteca de Manos a la Obra que ya está incluido

829
00:49:58,340 --> 00:50:01,380
dentro de CS50 Finanzas.

830
00:50:01,380 --> 00:50:09,390
Si usted viene aquí con la etiqueta de JavaScript y desplácese hacia abajo para TYPEAHEAD,

831
00:50:09,390 --> 00:50:13,730
esto es sólo un complemento agradable que alguien ya escribió para nosotros,

832
00:50:13,730 --> 00:50:16,980
y que pueda usar y su funcionalidad como esta.

833
00:50:16,980 --> 00:50:21,410
He escrito en una A y aquí está una lista de algunos estados que comienzan con A.

834
00:50:21,410 --> 00:50:25,360
Digamos que creo que es muy bueno y es el momento para mí para incluir esto en mi página.

835
00:50:25,360 --> 00:50:28,300
Resulta que esto es muy, muy simple.

836
00:50:28,300 --> 00:50:32,810
Vamos a saltar por encima de aquí a quote3.js.

837
00:50:34,890 --> 00:50:37,380
Mi archivo se ve un poco diferente.

838
00:50:37,380 --> 00:50:39,700
Aquí abajo todas mis cosas AJAX es el mismo.

839
00:50:39,700 --> 00:50:43,170
Quiero cargar los datos de saldos sin tener que ir a otra página.

840
00:50:43,170 --> 00:50:46,220
Pero ahora quiero usar este plugin.

841
00:50:46,220 --> 00:50:51,020
La documentación Bootstrap tiene grandes ejemplos de cómo es exactamente lo que puede hacer eso.

842
00:50:51,020 --> 00:50:54,350
Quiero decir: "Aquí está la entrada que quiero autocompletar en"

843
00:50:54,350 --> 00:50:56,640
y yo voy a llamar a esta función se llama typeahead,

844
00:50:56,640 --> 00:50:59,730
y que va a manejar todas las cosas TYPEAHEAD para nosotros.

845
00:50:59,730 --> 00:51:02,090
Se abrirá la lista, hará todos nuestros filtrado.

846
00:51:02,090 --> 00:51:06,680
Lo único que necesita saber es qué datos estamos en autocompletar.

847
00:51:06,680 --> 00:51:10,480
Así que me enteré de esta clave con sólo leer la documentación y mirando a los ejemplos.

848
00:51:10,480 --> 00:51:14,150
Si le doy una clave de origen, el valor de esta clave

849
00:51:14,150 --> 00:51:17,770
es sólo un conjunto de cosas que quiero Autocompletar.

850
00:51:17,770 --> 00:51:20,180
Esta variable vino de este otro archivo.

851
00:51:20,180 --> 00:51:23,400
Abro symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Esto es sólo symbols.js esta matriz muy, muy grande que contiene cadenas

853
00:51:27,980 --> 00:51:32,080
de todos estos símbolos de cotización del Nasdaq.

854
00:51:32,080 --> 00:51:42,190
Si quiero saltar de nuevo al HTML, jharvard así, vhosts, globalhost, html, plantillas,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Puesto que ahora se llama quote3.js, déjame cambiar el archivo JavaScript estoy incluyendo aquí.

857
00:51:50,910 --> 00:51:55,110
Ahora tengo quote3.js, así que me voy a cargar en el archivo JavaScript separado,

858
00:51:55,110 --> 00:51:57,910
el que tiene que Bootstrap autocompletado.

859
00:51:57,910 --> 00:52:04,430
Ahora, cuando yo salto de vuelta al navegador, vuelva a cargar la página, y me pongo a escribir aa,

860
00:52:04,430 --> 00:52:06,880
ahí está mi autocompletado. Y fue realmente tan simple como eso.

861
00:52:06,880 --> 00:52:11,400
Yo tenía una línea de código que acabo de decir, "Estas son las cosas que quiero autocompletar en"

862
00:52:11,400 --> 00:52:16,590
y de repente tengo esta funcionalidad muy, muy agradable, con no mucho esfuerzo en absoluto.

863
00:52:16,590 --> 00:52:19,810
Como estás desarrollando sitios web y especialmente el lado frontal de las cosas,

864
00:52:19,810 --> 00:52:21,840
usted va a encontrar este es el caso mucho.

865
00:52:21,840 --> 00:52:25,700
Hay mucho, mucho, mucho de bibliotecas gratuitas muy interesantes por ahí

866
00:52:25,700 --> 00:52:30,190
que hacen que sea muy fácil de hacer las cosas de esta manera.

867
00:52:30,190 --> 00:52:37,230
¿Alguien puede pensar en ningún inconvenientes de simplemente autocompletar en esta larga lista de símbolos?

868
00:52:37,230 --> 00:52:41,580
¿Qué podría ser algo que no es el mejor con este enfoque?

869
00:52:42,790 --> 00:52:45,960
Si. >> [Estudiante] El tiempo, si usted tiene un montón de [inaudible]

870
00:52:45,960 --> 00:52:50,420
Si. En este momento estamos descargando el archivo JavaScript enorme y hay un montón de símbolos.

871
00:52:50,420 --> 00:52:54,360
Y lo que si tenemos un montón de cosas, este tipo podría de aumentar la latencia de búsqueda no sólo

872
00:52:54,360 --> 00:52:56,600
sino también descargar el archivo real.

873
00:52:56,600 --> 00:52:58,670
Grande. ¿Algo más?

874
00:53:01,950 --> 00:53:05,280
En este momento no hay verdadero sentido de pertinencia.

875
00:53:05,280 --> 00:53:08,190
Si escribo en una A, las compañías que aparecen aquí

876
00:53:08,190 --> 00:53:11,220
no pueden ser las compañías más populares que comienzan con A.

877
00:53:11,220 --> 00:53:17,130
>> Antes de entrar a Apple, que podría tomar algunos personajes más para encontrar lo que estoy buscando.

878
00:53:17,130 --> 00:53:20,420
Esta función de autocompletar no tiene este sentido de pertinencia.

879
00:53:20,420 --> 00:53:24,400
Es sólo va a decir: "Todo lo que coincide con que voy a mostrar".

880
00:53:24,400 --> 00:53:30,510
En lugar de eso, me gustaría integrar de alguna manera alguna relevancia en mis búsquedas.

881
00:53:30,510 --> 00:53:36,440
Si me voy de aquí a Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Si trato de introducir un símbolo en la página Yahoo! Finanzas

883
00:53:42,100 --> 00:53:52,310
y me pongo a escribir goog, tengo esta bonita lista de las cosas.

884
00:53:52,310 --> 00:53:57,100
Claramente, parece Finanzas Yahoo! está haciendo algo más inteligente aquí.

885
00:53:57,100 --> 00:53:59,790
Tienen cierta relevancia y también tienen información adicional

886
00:53:59,790 --> 00:54:01,430
como el nombre de la acción.

887
00:54:01,430 --> 00:54:05,850
Eso es algo que no puedo conseguir con sólo mi lista de valores de los símbolos.

888
00:54:05,850 --> 00:54:09,520
Quiero esto y por eso me lo voy a tomar.

889
00:54:09,520 --> 00:54:11,790
Para ello vamos a hacer un par de cosas.

890
00:54:11,790 --> 00:54:15,580
Primero vamos a abrir el inspector en esta página

891
00:54:15,580 --> 00:54:18,100
porque vimos que esta página no se carga en absoluto,

892
00:54:18,100 --> 00:54:21,960
por lo que es probable que el uso de AJAX de alguna manera a cargar sus datos.

893
00:54:21,960 --> 00:54:23,920
Podemos averiguar qué datos se está cargando.

894
00:54:23,920 --> 00:54:28,390
Si hago clic en esta ficha Red, estos van a ser todas las peticiones que empiezan a ser despedido.

895
00:54:28,390 --> 00:54:34,020
Ahora bien, si escribo en goo, podemos ver que acabo de recibir una petición HTTP nueva.

896
00:54:34,020 --> 00:54:37,490
Esta es, probablemente, donde los datos está viniendo.

897
00:54:37,490 --> 00:54:41,990
Efectivamente, si miro a esta URL, que es un poco extraño nombre,

898
00:54:41,990 --> 00:54:46,930
podemos ver que esto es exactamente donde Yahoo es el envío de sus datos.

899
00:54:46,930 --> 00:54:53,400
>> He creado un archivo separado llamado suggest.php que es muy similar en espíritu a la función de búsqueda.

900
00:54:53,400 --> 00:54:57,730
Es, básicamente, va a hacer una consulta a la URL de Yahoo, volver algunos datos,

901
00:54:57,730 --> 00:54:59,750
y lo envía de nuevo a mí.

902
00:54:59,750 --> 00:55:02,570
Ahora, en lugar de utilizar esta lista grande, enorme de símbolos,

903
00:55:02,570 --> 00:55:05,280
Puedo usar cosas buenas de Yahoo relevancia,

904
00:55:05,280 --> 00:55:08,150
y no tener que descargar el archivo masivo JavaScript.

905
00:55:08,150 --> 00:55:12,040
Sólo voy a derribar los símbolos de cotización realmente relevantes.

906
00:55:12,040 --> 00:55:13,960
¡Entremos en eso.

907
00:55:13,960 --> 00:55:17,360
Así html, js. Ahora estamos en quote4.

908
00:55:17,360 --> 00:55:22,120
Ahora ya no estamos utilizando esa gran lista de archivos JavaScript.

909
00:55:22,120 --> 00:55:24,430
Pero hay un tipo reducido de problema de diseño aquí.

910
00:55:24,430 --> 00:55:28,200
Hemos dicho que la A en AJAX es asíncrona.

911
00:55:28,200 --> 00:55:31,000
Lo que esto significa es que cuando hago una petición AJAX,

912
00:55:31,000 --> 00:55:36,490
tan a la derecha aquí en la línea 8, que es donde mi petición AJAX es en realidad disparó.

913
00:55:36,490 --> 00:55:40,370
Digamos que ahora tengo algo de código por aquí que va a hacer algunas cosas

914
00:55:40,370 --> 00:55:43,930
desea alertar al usuario o algo cambio en la página.

915
00:55:43,930 --> 00:55:49,830
Lo que no va a suceder es que el navegador no va a esperar a que esta solicitud para continuar

916
00:55:49,830 --> 00:55:53,480
antes de bajar y golpear a esta línea.

917
00:55:53,480 --> 00:55:55,900
Esa es la parte asíncrona.

918
00:55:55,900 --> 00:55:58,400
Va a hacer esta petición y decía: "Cada vez que haya terminado,

919
00:55:58,400 --> 00:56:03,080
"Volver y llamar a esa función que te dije que te llame el interior del éxito."

920
00:56:03,080 --> 00:56:07,300
Eso significa que no sólo puede descargar todos los stocks de antemano.

921
00:56:07,300 --> 00:56:10,300
Tenemos que hacer la solicitud y esperar a que algo vuelva.

922
00:56:10,300 --> 00:56:13,330
Eso significa que antes, podríamos simplemente decirle Manos a la Obra,

923
00:56:13,330 --> 00:56:15,580
"Aquí está la lista de cosas que quiere en función de autocompletar".

924
00:56:15,580 --> 00:56:18,950
Ya no podemos hacer eso porque no sabemos

925
00:56:18,950 --> 00:56:21,780
lo que queremos en realidad Autocompletar.

926
00:56:21,780 --> 00:56:25,190
Por suerte, Bootstrap pensado en esto porque son chicos inteligentes más allá,

927
00:56:25,190 --> 00:56:30,160
y que en realidad nos dio otra forma de cargar este plugin TYPEAHEAD.

928
00:56:30,160 --> 00:56:35,630
Antes, el valor de esta propiedad de origen era este gran conjunto de cosas que Autocompletar.

929
00:56:35,630 --> 00:56:39,580
>> Ahora la propiedad de origen es en realidad una función,

930
00:56:39,580 --> 00:56:44,580
y el propósito de esta función es determinar cuáles son las cosas a autocomplete en somos.

931
00:56:44,580 --> 00:56:48,730
La forma en que va a darse cuenta de eso es que va a pedir Yahoo! Finanzas

932
00:56:48,730 --> 00:56:51,750
cuáles son las mejores cosas que se autocomplete.

933
00:56:51,750 --> 00:56:54,500
Para ello voy a hacer una petición AJAX muy similar.

934
00:56:54,500 --> 00:56:59,010
Voy a pedir esta página a suggest.php.

935
00:56:59,010 --> 00:57:01,360
Quiero enviar a lo largo de los símbolos todavía.

936
00:57:01,360 --> 00:57:05,570
Y ahora mi éxito, la documentación Bootstrap me dijo

937
00:57:05,570 --> 00:57:09,130
que, para poblar la lista de las cosas,

938
00:57:09,130 --> 00:57:14,370
todo lo que tiene que hacer es pasar de esta matriz ahora a la función de devolución de llamada.

939
00:57:14,370 --> 00:57:15,660
Pero espere un minuto.

940
00:57:15,660 --> 00:57:20,240
Si esto se supone que es una matriz y AJAX me está enviando de nuevo el texto,

941
00:57:20,240 --> 00:57:22,720
¿cómo es eso posible?

942
00:57:22,720 --> 00:57:27,910
Esto introduce una nueva forma de intercambio de datos llamados JSON.

943
00:57:27,910 --> 00:57:33,000
En este caso no sólo estamos devolviendo una simple cadena de texto.

944
00:57:33,000 --> 00:57:37,670
Ahora nos enfrentamos a esta lista más compleja de símbolos de valor.

945
00:57:37,670 --> 00:57:41,730
Estos símbolos de acción también puede incluir cosas como el nombre de la empresa o de los precios actuales.

946
00:57:41,730 --> 00:57:47,550
Sólo mediante una cadena grande largo que no está formateado de alguna manera predecible

947
00:57:47,550 --> 00:57:51,970
no va a ser la mejor manera de obtener esta información desde el servidor de Yahoo para mí

948
00:57:51,970 --> 00:57:54,540
de una manera que yo pueda comprender fácilmente.

949
00:57:54,540 --> 00:58:01,280
JSON es una tecnología que aprovecha las ventajas de cómo crear matrices asociativas en JavaScript.

950
00:58:01,280 --> 00:58:04,510
Esto se parece mucho a una matriz de JavaScript asociativo,

951
00:58:04,510 --> 00:58:06,600
y, de hecho, es porque lo es.

952
00:58:06,600 --> 00:58:09,710
JSON es sinónimo de JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Esto es básicamente un acuerdo sobre formato para la transferencia de datos en ambos sentidos.

954
00:58:15,020 --> 00:58:18,280
Aquí este objeto o JSON JSON esta matriz asociativa

955
00:58:18,280 --> 00:58:21,010
me está enviando algunos datos acerca de un curso.

956
00:58:21,010 --> 00:58:25,110
>> Las claves de este arreglo son cosas como el curso que tiene un valor de CS50,

957
00:58:25,110 --> 00:58:29,140
y aquí podemos ver que puedo tener un valor que es una matriz.

958
00:58:29,140 --> 00:58:32,730
Yo no tengo que hacer cosas como parse por cadenas y buscar comas

959
00:58:32,730 --> 00:58:35,330
y hacer locuras por el estilo.

960
00:58:35,330 --> 00:58:38,820
Debido a ello se ha consignado en este formato JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript y jQuery ya tienen funciones para convertir una cadena

962
00:58:43,510 --> 00:58:48,140
que tiene este aspecto JSON en una verdadera matriz de JavaScript asociativo

963
00:58:48,140 --> 00:58:50,440
que podemos trabajar.

964
00:58:50,440 --> 00:58:56,660
Hacer eso es tan sencillo como decir que ya no es este archivo, suggest.php,

965
00:58:56,660 --> 00:58:59,040
enviarme de vuelta simplemente una cadena de texto,

966
00:58:59,040 --> 00:59:01,950
pero sé que va a ser me devolviendo JSON.

967
00:59:01,950 --> 00:59:06,760
Eso significa que JSON que se puede convertir en una matriz de JavaScript asociativo.

968
00:59:06,760 --> 00:59:10,830
Y así, jQuery, me gustaría que hicieras eso por mí.

969
00:59:10,830 --> 00:59:13,990
Esto significa que este parámetro de respuesta aquí,

970
00:59:13,990 --> 00:59:16,070
esto ya no es sólo una cadena.

971
00:59:16,070 --> 00:59:19,860
Porque hemos dicho jQuery que aquí viene un poco de JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery va a ser lo suficientemente inteligente como para decir: "Usted quería JSON?"

973
00:59:22,950 --> 00:59:26,890
"Voy a convertir esto en una matriz asociativa para ti."

974
00:59:26,890 --> 00:59:32,100
Vamos realmente echar un vistazo a la ficha Red una vez que tengamos quote4.js.

975
00:59:32,100 --> 00:59:35,400
Vamos a cambiar esto y volver a cargar la página.

976
00:59:37,150 --> 00:59:41,250
Ahora voy a escribir a-a de nuevo.

977
00:59:41,250 --> 00:59:45,600
He hecho un par de peticiones a suggest.php, pero ahora esta respuesta,

978
00:59:45,600 --> 00:59:48,670
y no sólo la cadena, es JSON.

979
00:59:48,670 --> 00:59:52,580
Así que tengo una llave abierta rizado diciendo: "Aquí viene una matriz asociativa."

980
00:59:52,580 --> 00:59:56,830
>> La clave de la primera y única de esta matriz asociativa se llama símbolos,

981
00:59:56,830 --> 01:00:00,240
y entonces aquí es un conjunto de todos los símbolos relevantes

982
01:00:00,240 --> 01:00:04,820
viniendo ahora desde Yahoo! Finanzas no, de esa lista gigantesca.

983
01:00:06,110 --> 01:00:10,630
Así es como yo, simplemente puede rellenar este plugin autocomplete

984
01:00:10,630 --> 01:00:14,280
con algunos datos que no viene de un archivo local que ya está predeterminado

985
01:00:14,280 --> 01:00:17,490
sino de algo más.

986
01:00:17,490 --> 01:00:21,160
Resulta que en realidad podemos tomar ventaja de una tecnología llamada JSONP,

987
01:00:21,160 --> 01:00:27,420
o JSON con relleno, que eliminará este intermediario suggest.php.

988
01:00:27,420 --> 01:00:34,010
Pero en lugar de hacer eso, vamos a echar un vistazo en vez de cómo puedo mejorar esto aún más.

989
01:00:34,010 --> 01:00:36,040
Me gusta mucho TYPEAHEAD Bootstrap. Es realmente agradable.

990
01:00:36,040 --> 01:00:39,570
Pero nos estamos volviendo bueno en JavaScript y queremos hacer esta clase de nosotros mismos,

991
01:00:39,570 --> 01:00:43,870
tal vez echar un vistazo a lo que este plugin podría estar haciendo.

992
01:00:43,870 --> 01:00:46,500
Vamos a no usar esa cosa TYPEAHEAD,

993
01:00:46,500 --> 01:00:50,550
y vamos a tratar de hacer esta lista de acciones sugeridas nosotros mismos.

994
01:00:50,550 --> 01:00:53,790
Aquí en quote6.php vamos a empezar la misma manera.

995
01:00:53,790 --> 01:00:58,050
Cada vez que alguien escribe algo, queremos hacer una petición AJAX.

996
01:00:58,050 --> 01:01:01,590
Esto es similar a nuestro instante original Finanzas CS50.

997
01:01:01,590 --> 01:01:05,020
En lugar de hacer una petición a quote.php,

998
01:01:05,020 --> 01:01:08,530
ahora estamos haciendo una petición a ese archivo como antes, esta suggest.php,

999
01:01:08,530 --> 01:01:12,460
que sólo va a extraer datos de Yahoo! Finanzas.

1000
01:01:12,460 --> 01:01:19,480
>> Una vez más, todavía estamos esperando JSON, pero ahora desde el TYPEAHEAD no está haciendo esto por nosotros,

1001
01:01:19,480 --> 01:01:24,850
también tenemos que enviar por el valor que se encuentra dentro del cuadro de texto actual.

1002
01:01:24,850 --> 01:01:28,120
Ahora sabemos qué pedir Finanzas Yahoo! para,

1003
01:01:28,120 --> 01:01:34,160
y lo que ahora aquí es la función que queremos ejecutar una vez la solicitud finaliza.

1004
01:01:34,160 --> 01:01:36,520
No tienes el plugin para hacer la lista para nosotros,

1005
01:01:36,520 --> 01:01:40,630
así que aquí es donde estamos en realidad va a construir una lista de sugerencias.

1006
01:01:40,630 --> 01:01:44,850
Para ello, al igual que en PHP se concatenan estas cadenas grandes de HTML

1007
01:01:44,850 --> 01:01:48,170
entonces su impresión, no podemos hacer exactamente lo mismo en JavaScript.

1008
01:01:48,170 --> 01:01:51,850
En primer lugar vamos a comenzar esta cadena denominada sugerencias,

1009
01:01:51,850 --> 01:01:54,590
y esta cadena es sólo va a contener algo de HTML.

1010
01:01:54,590 --> 01:01:58,320
Queremos que sea una lista de las cosas, así que vamos a empezar con esta lista de etiquetas,

1011
01:01:58,320 --> 01:02:03,340
y ahora vamos a iterar sobre todos los símbolos que se devolvieron de nuevo a nosotros.

1012
01:02:03,340 --> 01:02:06,500
Recuerde, ya lo hemos dicho tipo de datos: 'json', esto no es una cadena.

1013
01:02:06,500 --> 01:02:09,500
Esto ya es una matriz para nosotros. Eso es realmente genial.

1014
01:02:09,500 --> 01:02:13,790
Podemos simplemente decir: "Quiero que añadir un elemento de lista".

1015
01:02:13,790 --> 01:02:16,000
Lo pondremos dentro de un elemento en un lado de eso,

1016
01:02:16,000 --> 01:02:19,030
vamos a dar una clase de sugerencias para que sepamos lo que es,

1017
01:02:19,030 --> 01:02:23,880
y ahora aquí es el símbolo que volvimos de Yahoo! Finanzas.

1018
01:02:23,880 --> 01:02:27,230
>> Una vez que hemos creado un elemento para cada uno de los símbolos que hemos llegado de nuevo,

1019
01:02:27,230 --> 01:02:30,100
sólo queremos cerrar la lista.

1020
01:02:30,100 --> 01:02:33,040
Así que ahora sugerencias representa este fragmento poco de HTML

1021
01:02:33,040 --> 01:02:37,860
que cuando se ponen en una página que va a ser la lista de las cosas que estamos buscando.

1022
01:02:37,860 --> 01:02:41,070
Ahora vamos a poner eso en realidad en la página.

1023
01:02:41,070 --> 01:02:46,390
Para hacerlo realidad, he creado otro div vacío y me he dado un ID de sugerencias.

1024
01:02:46,390 --> 01:02:52,520
Al igual que establecer el contenido del div que mostrar el precio de los datos de saldos,

1025
01:02:52,520 --> 01:02:58,600
ahora sólo quiero establecer el contenido de este div a lo que esta cadena es

1026
01:02:58,600 --> 01:03:00,290
que contiene estos símbolos.

1027
01:03:00,290 --> 01:03:07,650
Mediante el uso de este método HTML, esta variable sugerencias, esta cadena, es una cadena de HTML.

1028
01:03:07,650 --> 01:03:13,490
Quiero que tomar ese HTML y lo puso dentro del div llamado sugerencias.

1029
01:03:13,490 --> 01:03:15,680
Hemos añadido algo a la DOM ahora.

1030
01:03:15,680 --> 01:03:20,360
Hemos añadido algunos nuevos elementos al DOM que ahora podemos mostrar en la página.

1031
01:03:20,360 --> 01:03:22,540
Vamos a ver cómo se ve.

1032
01:03:22,540 --> 01:03:29,110
Si cargamos en quote6 y ahora volvemos,

1033
01:03:29,110 --> 01:03:34,480
ahora cuando empiezo a escribir AAPL, ya no tenemos que Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
pero ahora tenemos esta lista que nos hizo.

1035
01:03:38,470 --> 01:03:43,230
Esto es un poco más feo que el TYPEAHEAD Bootstrap, por ejemplo,

1036
01:03:43,230 --> 01:03:45,580
pero nos permite hacer otra cosa.

1037
01:03:45,580 --> 01:03:48,660
Cuando estábamos buscando a ese plugin Manos a la Obra,

1038
01:03:48,660 --> 01:03:52,590
vimos que cuando autocompletar, uno de los valores de autocompletado era AAPL.

1039
01:03:52,590 --> 01:03:54,820
Eso podría no ser tan útil.

1040
01:03:54,820 --> 01:03:59,100
Como usuario, no puede reconocer inmediatamente todos los símbolos de valor.

1041
01:03:59,100 --> 01:04:02,370
Lo que yo soy probablemente más propensos a reconocer son los nombres reales de la empresa.

1042
01:04:02,370 --> 01:04:05,310
Entonces, ¿no sería realmente útil si en vez de decir AAPL

1043
01:04:05,310 --> 01:04:07,970
este dijo algo como Apple Inc.

1044
01:04:07,970 --> 01:04:12,240
Debido a que hemos rodado este nosotros mismos, podemos muy fácilmente hacer eso.

1045
01:04:12,240 --> 01:04:17,630
Vamos a abrir nuestro fichero última cita aquí, así que quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Es lo mismo. Acabo de crear otro archivo PHP que devuelva a nosotros más que los símbolos.

1047
01:04:23,200 --> 01:04:25,550
También nos devolverá los nombres de la empresa.

1048
01:04:25,550 --> 01:04:28,150
Y lo que estamos haciendo lo mismo. Estamos haciendo una petición AJAX.

1049
01:04:28,150 --> 01:04:32,370
Una vez que la solicitud ha terminado, vamos a ejecutar esta función aquí,

1050
01:04:32,370 --> 01:04:36,520
y esta función se va a construir una cadena grande de elementos.

1051
01:04:36,520 --> 01:04:39,520
Pero la diferencia aquí es que el valor de estas listas ya no es sólo el símbolo,

1052
01:04:39,520 --> 01:04:45,370
es ahora el nombre.

1053
01:04:45,370 --> 01:04:47,070
Así que tenemos un pequeño problema.

1054
01:04:47,070 --> 01:04:51,590
Cuando usamos nuestra búsqueda, tenemos que pasar de alguna manera el símbolo.

1055
01:04:51,590 --> 01:04:54,950
No podemos dejar pasar algo de búsqueda como Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Hay que pasarlo MSFT.

1057
01:04:57,900 --> 01:05:01,640
Cuando estamos escribiendo HTML, tenemos un montón de buenos atributos incorporados.

1058
01:05:01,640 --> 01:05:05,440
Una A podría haber asociado un href o una clase.

1059
01:05:05,440 --> 01:05:08,230
Pero lo que realmente necesitamos ahora es que cada uno de estos enlaces

1060
01:05:08,230 --> 01:05:11,120
tener un símbolo de acción asociado a él.

1061
01:05:11,120 --> 01:05:14,240
No hay ningún atributo incorporado de HTML para símbolo de cotización,

1062
01:05:14,240 --> 01:05:21,010
pero por suerte, HTML5 nos permite crear nuestros propios atributos para ser lo que queramos.

1063
01:05:21,010 --> 01:05:24,620
Al decir de datos-symbol, he introducido un nuevo atributo

1064
01:05:24,620 --> 01:05:29,350
cuyo nombre acabo de hacer, y esto está bien porque me prologó con estos datos.

1065
01:05:29,350 --> 01:05:34,270
Vamos a guardar dentro de ahí el símbolo del stock.

1066
01:05:34,270 --> 01:05:39,590
Lo que esto significa es que a pesar de que está mostrando el valor del nombre de la empresa

1067
01:05:39,590 --> 01:05:43,380
dentro de nuestro autocomplete, todavía estamos recordando el símbolo

1068
01:05:43,380 --> 01:05:47,110
que está asociado con cada compañía.

1069
01:05:47,110 --> 01:05:50,350
La forma en que está haciendo que se encuentra dentro de este elemento en sí.

1070
01:05:50,350 --> 01:05:52,930
Así que eso significa que tenemos que hacer un cambio más.

1071
01:05:52,930 --> 01:05:57,090
Cuando haga clic en él ahora, tenemos que tomar realmente ventaja del atributo de símbolo

1072
01:05:57,090 --> 01:06:00,220
en lugar de sólo su valor.

1073
01:06:00,220 --> 01:06:05,010
Si retrocedemos, se adjunta un controlador de eventos a sugerencias.

1074
01:06:05,010 --> 01:06:09,280
Cada vez que una de estas sugerencias se hace clic ahora, quiero hacer algo.

1075
01:06:09,280 --> 01:06:13,160
Lo que quiero hacer es cambiar el valor de la caja de entrada.

1076
01:06:13,160 --> 01:06:16,100
Ahora quiero configurar esta función val mismo.

1077
01:06:16,100 --> 01:06:21,060
>> Así que sin ningún argumento de esta función Val devuelve a usted lo que ya está en el cuadro de texto,

1078
01:06:21,060 --> 01:06:27,070
pero si le das una cadena, que va a tomar esa cadena y lo puso en el cuadro de texto.

1079
01:06:27,070 --> 01:06:28,980
Estoy seleccionando la casilla de texto de la misma manera.

1080
01:06:28,980 --> 01:06:31,230
Su nombre es símbolo de la forma dentro de comillas.

1081
01:06:31,230 --> 01:06:37,540
Ahora lo estoy enviando el valor del atributo data-símbolo.

1082
01:06:37,540 --> 01:06:41,560
Esta cosa aquí es nuevo, estos $ (this).

1083
01:06:41,560 --> 01:06:46,850
Lo que esto se refiere es el elemento que se ha hecho clic.

1084
01:06:46,850 --> 01:06:50,880
Podemos ver aquí que no estamos adjuntando un evento de clic

1085
01:06:50,880 --> 01:06:54,690
a cada elemento con una clase de sugerencia individualmente.

1086
01:06:54,690 --> 01:06:57,140
Más bien, nos estamos acercando a esto un poco diferente.

1087
01:06:57,140 --> 01:07:01,700
En cambio, nos está diciendo siempre que dentro de nada de este div sugerencias,

1088
01:07:01,700 --> 01:07:04,080
recuerde que es sólo el recipiente de esa lista,

1089
01:07:04,080 --> 01:07:10,150
si algo dentro de este div se hace clic y se tiene una clase de sugerencia,

1090
01:07:10,150 --> 01:07:13,000
Quiero que este evento para disparar.

1091
01:07:13,000 --> 01:07:17,490
Básicamente lo que esto quiere decir que podemos hacer es que podemos volver a utilizar este mismo controlador de eventos

1092
01:07:17,490 --> 01:07:20,000
para todas las cosas de la lista.

1093
01:07:20,000 --> 01:07:22,080
Así que no tiene que tener un controlador de eventos para el primer elemento

1094
01:07:22,080 --> 01:07:24,550
y un controlador de eventos diferente para el segundo elemento.

1095
01:07:24,550 --> 01:07:29,880
En su lugar, puede decir: "Quiero que el mismo controlador de eventos para aplicar a todo en mi lista".

1096
01:07:29,880 --> 01:07:34,420
Pero tenemos que saber de alguna manera que el elemento se ha hecho clic.

1097
01:07:34,420 --> 01:07:38,450
Esta palabra "this" representa sólo eso.

1098
01:07:38,450 --> 01:07:42,360
Este es el objeto que se ha hecho clic sólo por el usuario.

1099
01:07:42,360 --> 01:07:47,680
Si tan sólo hacer clic en el enlace de tercero, lo que representa un elemento de este enlace de tercero,

1100
01:07:47,680 --> 01:07:51,670
lo que significa que puedo conseguir su atributo, los datos-símbolo,

1101
01:07:51,670 --> 01:07:57,760
que sabemos que tiene que contener el símbolo que está asociada con la compañía que acaba de hacer clic.

1102
01:07:57,760 --> 01:08:04,550
Si saltamos a nuestra página de finanzas,

1103
01:08:04,550 --> 01:08:08,580
podemos ver ahora que una vez que comience a escribir algo como msft,

1104
01:08:08,580 --> 01:08:11,220
ya no estamos recibiendo sólo los símbolos de cotización,

1105
01:08:11,220 --> 01:08:13,720
ahora estamos recibiendo las empresas reales.

1106
01:08:13,720 --> 01:08:20,410
Pero cuando hago clic en una de estas empresas,

1107
01:08:20,410 --> 01:08:25,180
podemos ver que en realidad estamos poblando no el cuadro de texto con el nombre de la empresa

1108
01:08:25,180 --> 01:08:29,850
pero con todo lo que se almacena dentro de los atributos de datos.

1109
01:08:29,850 --> 01:08:32,880
Y así, si realmente inspeccionar uno de estos elementos, haga clic en él

1110
01:08:32,880 --> 01:08:36,200
y haciendo clic en Inspeccionar elemento, podemos ver el aspecto que tiene.

1111
01:08:36,200 --> 01:08:40,290
>> Recuerde que esto es algo que hemos creado dentro de ese bucle for

1112
01:08:40,290 --> 01:08:42,649
cuando estábamos construyendo esa cadena de HTML.

1113
01:08:42,649 --> 01:08:47,870
Podemos ver aquí que estos datos-símbolo tiene el valor de MSFT, lo cual es genial.

1114
01:08:47,870 --> 01:08:49,189
Eso es lo que estábamos esperando.

1115
01:08:49,189 --> 01:08:53,170
Ese es el símbolo y así es como tenemos el valor que necesitamos para usar

1116
01:08:53,170 --> 01:08:56,140
dentro de este cuadro de texto.

1117
01:08:56,140 --> 01:08:58,850
Eso es suficiente para que el formulario de cotización debido a que es un poco aburrido.

1118
01:08:58,850 --> 01:09:02,990
Vamos a hacer algunas mejoras rápidas a nuestra página de cartera.

1119
01:09:02,990 --> 01:09:08,109
Si ha utilizado CS50 Finanzas por un tiempo y empezar a comprar y vender una gran cantidad de acciones,

1120
01:09:08,109 --> 01:09:11,300
finalmente esta tabla va a ser bastante grande,

1121
01:09:11,300 --> 01:09:13,850
y usted va a querer un tablero de cotizaciones, por supuesto.

1122
01:09:13,850 --> 01:09:20,350
Una vez que la mesa es muy, muy grande, podría ser útil para que el usuario trate de buscar en ella.

1123
01:09:20,350 --> 01:09:23,290
Dentro del cuadro de búsqueda si me pongo a escribir algo como Disney

1124
01:09:23,290 --> 01:09:26,359
y en busca de mi stock de Mickey Mouse, podemos ver que la tabla está filtrando

1125
01:09:26,359 --> 01:09:28,189
sobre la base de lo que he escrito pulg

1126
01:09:28,189 --> 01:09:31,640
Esta funcionalidad se ve super complicado, pero es muy, muy fácil

1127
01:09:31,640 --> 01:09:33,859
con jQuery y JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Este archivo portfolio.php incluye un archivo JavaScript denominado portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Vamos a echar un vistazo a eso.

1130
01:09:41,130 --> 01:09:44,890
Así html, js, cartera.

1131
01:09:44,890 --> 01:09:49,210
Aquí es donde estamos haciendo que la búsqueda en la mesa.

1132
01:09:49,210 --> 01:09:52,750
Lo primero que tienes que hacer es conectar un controlador de eventos para ese cuadro de texto

1133
01:09:52,750 --> 01:09:55,760
porque sabemos que queremos que nuestra función de filtrado para disparar

1134
01:09:55,760 --> 01:09:59,800
cada vez que el usuario pulsa algo porque no tienen tiempo para los botones de búsqueda.

1135
01:09:59,800 --> 01:10:03,000
Lo primero que tenemos que hacer es averiguar lo que el usuario está buscando,

1136
01:10:03,000 --> 01:10:04,780
tal como lo hicimos antes.

1137
01:10:04,780 --> 01:10:11,320
Esta palabra clave se refiere al elemento actual del usuario está interactuando.

1138
01:10:11,320 --> 01:10:14,070
>> Debido a que el usuario está interactuando con el cuadro de búsqueda,

1139
01:10:14,070 --> 01:10:17,020
$ This representa el cuadro de búsqueda,

1140
01:10:17,020 --> 01:10:21,820
así this.val nos da lo que hay dentro de la caja de búsqueda que el usuario está escribiendo.

1141
01:10:22,810 --> 01:10:27,320
Así pues, ahora lo que quiero hacer es que queremos iterar sobre todas las filas

1142
01:10:27,320 --> 01:10:29,240
dentro de nuestra mesa.

1143
01:10:29,240 --> 01:10:35,630
Para seleccionar todas las filas de nuestra mesa, me dio esa mesa una identificación de la cartera de mesa,

1144
01:10:35,630 --> 01:10:39,060
y cada fila está representada por un elemento de TR,

1145
01:10:39,060 --> 01:10:42,080
por lo que este selector se va a volver a mí una gran variedad

1146
01:10:42,080 --> 01:10:44,370
de todas las filas de mi mesa.

1147
01:10:44,370 --> 01:10:47,010
Ahora quiero iterar sobre esa matriz.

1148
01:10:47,010 --> 01:10:52,390
Podría un bucle for, pero jQuery realmente nos proporciona la función bonita llamada "cada uno".

1149
01:10:52,390 --> 01:10:55,220
¿Qué hace cada uno es cada uno toma un argumento,

1150
01:10:55,220 --> 01:10:57,090
y ese argumento es una función.

1151
01:10:57,090 --> 01:11:02,760
¿Qué va a hacer es que va a aplicar esa función a cada elemento dentro de esta lista.

1152
01:11:02,760 --> 01:11:05,550
Esta función recibe un argumento que es e,

1153
01:11:05,550 --> 01:11:10,090
y cuando se ejecuta esta función, este correo va a ser reemplazado por la primera fila,

1154
01:11:10,090 --> 01:11:12,070
luego la segunda fila, y después de la tercera fila.

1155
01:11:12,070 --> 01:11:15,150
De esta manera, esto es lo mismo que ejecutar un bucle for

1156
01:11:15,150 --> 01:11:21,360
y luego calcular el elemento actual, basado en el índice dentro de su bucle for.

1157
01:11:21,360 --> 01:11:24,750
En cada iteración, para cada uno de estos elementos en la tabla,

1158
01:11:24,750 --> 01:11:30,560
Quiero comprobar si el texto del elemento - el texto de la celda dentro de la fila -

1159
01:11:30,560 --> 01:11:33,130
coincide con lo que estoy buscando.

1160
01:11:33,130 --> 01:11:36,390
Esta gran cadena larga de los comandos es como yo podría hacer eso.

1161
01:11:36,390 --> 01:11:40,900
En primer lugar, una vez más, esto se refiere ahora a - porque está dentro de una nueva función -

1162
01:11:40,900 --> 01:11:45,020
esto es ahora la fila actual en la tabla.

1163
01:11:45,020 --> 01:11:47,340
Quiero aprovechar la fila actual en la tabla,

1164
01:11:47,340 --> 01:11:49,950
y quiero llegar a todos sus hijos.

1165
01:11:49,950 --> 01:11:51,940
Recuerde, el DOM es un árbol jerárquico,

1166
01:11:51,940 --> 01:11:54,200
lo que significa que los elementos tienen un número de hijos.

1167
01:11:54,200 --> 01:12:00,180
>> Esta función. Hijos va a volver a mí de nuevo un conjunto de todos los elementos

1168
01:12:00,180 --> 01:12:03,240
que son los hijos de, en este caso, una fila de la tabla.

1169
01:12:03,240 --> 01:12:07,150
Esto es sólo simplemente las células dentro de la fila.

1170
01:12:07,150 --> 01:12:09,230
Sólo quiero buscar en la primera celda.

1171
01:12:09,230 --> 01:12:13,090
Esta función. Primero dice dame el primer elemento de la matriz.

1172
01:12:13,090 --> 01:12:17,070
Entonces la función texto dice me exactamente lo que hay dentro de esa célula

1173
01:12:17,070 --> 01:12:19,530
ya que quiero buscar en ese texto.

1174
01:12:19,530 --> 01:12:21,040
Por último, vamos a convertirlo en minúsculas,

1175
01:12:21,040 --> 01:12:23,940
para que podamos hacer las consultas de texto entre mayúsculas y minúsculas.

1176
01:12:23,940 --> 01:12:29,990
Por último, queremos ver si esa cadena dentro de una tabla contiene la cadena que estamos buscando.

1177
01:12:29,990 --> 01:12:32,980
La función indexOf en JavaScript hace precisamente eso.

1178
01:12:32,980 --> 01:12:37,060
Nos dice si esta cadena contiene otra cadena.

1179
01:12:37,060 --> 01:12:40,150
Si bien es cierto que la celda contiene lo que estoy buscando,

1180
01:12:40,150 --> 01:12:42,140
entonces quiero para asegurarse de que está demostrado.

1181
01:12:42,140 --> 01:12:45,330
El método show dirá: "El elemento".

1182
01:12:45,330 --> 01:12:50,350
Si este no es el caso, entonces eso significa que lo que estoy buscando no está contenido

1183
01:12:50,350 --> 01:12:53,550
dentro de esa fila, así que quiere ocultar es del usuario.

1184
01:12:53,550 --> 01:12:59,240
Eso logra que bonito efecto de filtrado donde ya no vemos a toda la tabla.

1185
01:12:59,240 --> 01:13:01,480
Si usted está interesado en cómo hacer que este ticker también,

1186
01:13:01,480 --> 01:13:04,180
vamos a poner la fuente en línea. Pero es muy simple.

1187
01:13:04,180 --> 01:13:09,860
JQuery tiene métodos impresionantes para las animaciones y manipulación de las propiedades CSS.

1188
01:13:09,860 --> 01:13:11,020
Por lo tanto, eso es todo para mí.

1189
01:13:11,020 --> 01:13:15,560
>> Entonces, ¿qué nos espera? Como veremos en unos días, la propuesta final de un proyecto se debe.

1190
01:13:15,560 --> 01:13:17,730
La propuesta final de un proyecto le preguntará una serie de preguntas,

1191
01:13:17,730 --> 01:13:19,420
pero entre ellos habrá tres hitos -

1192
01:13:19,420 --> 01:13:22,840
una "buena" hito, un hito mejor, y una mejor a.

1193
01:13:22,840 --> 01:13:25,870
La idea es realmente para ayudar a ustedes poner tus expectativas

1194
01:13:25,870 --> 01:13:29,160
para que mínimamente usted será feliz con la salida de su proyecto final

1195
01:13:29,160 --> 01:13:32,060
y que será "bueno" en la medida que usted se refiere.

1196
01:13:32,060 --> 01:13:34,540
Pero entonces, en el interés de conseguir que usted alcance un poco a algo mejor

1197
01:13:34,540 --> 01:13:37,680
o algo mejor, también vamos a ordenar de empujarle hacia eso también.

1198
01:13:37,680 --> 01:13:40,660
El CS50 Hack-a-thon, por su parte, se encuentra en unas pocas semanas.

1199
01:13:40,660 --> 01:13:44,340
Por lo general, lo hacemos sobre una base por sorteo por el interés,

1200
01:13:44,340 --> 01:13:47,680
pero las probabilidades son que vamos a tomar unos pocos cientos de nosotros en los autobuses de enlace desde Harvard Square

1201
01:13:47,680 --> 01:13:51,540
hasta Kendall Square, donde Microsoft tiene un precioso establecimiento llamado acertadamente "NERD" -

1202
01:13:51,540 --> 01:13:53,830
la Nueva Inglaterra Centro de Investigación y Desarrollo.

1203
01:13:53,830 --> 01:13:56,380
Vamos a llegar a las 8 pm Vamos a tener un poco de comida.

1204
01:13:56,380 --> 01:13:58,160
Alrededor de 1 a.m. tendremos comida un poco más.

1205
01:13:58,160 --> 01:14:02,150
Alrededor de las 5 am si usted todavía está despierto nos dirigiremos a IHOP o que le lleve de vuelta a la escuela.

1206
01:14:02,150 --> 01:14:04,380
El objetivo que hay que sumergirse en los proyectos finales

1207
01:14:04,380 --> 01:14:06,190
al lado de sus compañeros y el personal.

1208
01:14:06,190 --> 01:14:08,280
Unos días más tarde es la Feria CS50,

1209
01:14:08,280 --> 01:14:10,990
que es en realidad la intención de ser una oportunidad para ustedes para mostrar su trabajo

1210
01:14:10,990 --> 01:14:12,700
y los logros del semestre

1211
01:14:12,700 --> 01:14:15,610
mientras que codearse con los demás y tener una idea de lo que cada uno hizo.

1212
01:14:15,610 --> 01:14:17,850
Con esto dicho, muchas gracias a Tommy ya José,

1213
01:14:17,850 --> 01:14:19,960
y nos vemos el lunes.

1214
01:14:19,960 --> 01:14:24,070
 [Aplauso]