[Powered by Google Translate] [Semana 9, continuación] [David J. Malan - Harvard University] [Esta es CS50. - CS50.TV] 

Esto es CS50. Este es el final de la semana 9. Muchas gracias. Por último. Semana 9. Ya lo tengo. Hoy continuamos nuestra conversación sobre programación web con la mirada puesta en el proyecto final no, porque usted tiene que hacer algo basado en la web para los proyectos finales, sino porque ya sea para proyectos finales o después CS50 este es sin duda la dirección en que va el software moderno. Y, sin embargo, no es en realidad una cosa fácil. De hecho, una de las cosas más difíciles de hacer es el aspecto del diseño. 

Por ejemplo, por diseño nos referimos a recibir efectivamente la interfaz de usuario o la experiencia de usuario correcta. Me atrevería a decir - y sabemos de un conjunto de problemas recientes cuando algunos de ustedes al aire sus quejas sobre alguna pieza de software o hardware que enfurece, ya sea en el campus o fuera - hay un montón de sitios por ahí, hay una gran cantidad de hardware por ahí, ese tipo de mierda. Pero la realidad es que hacer cosas que son fáciles de usar y sin embargo son de gran alcance Es un reto muy difícil. Así que por hoy me preguntó José y Tommy a unirse a mí aquí para que podamos tener una conversación, tanto sobre el diseño y qué tipos de procesos de pensamiento debe comenzar a pasar por su cabeza la hora de diseñar sus proyectos finales, sus proyectos futuros. Y luego, con la ayuda de Tommy vamos a ver algunos de los detalles de implementación. ¿Cómo puedes tener algo de visión en papel o en su mente que podrá ejecutar mediante programación mediante el uso de algunas de las tecnologías y las técnicas que hemos empezado hablando, es decir, JavaScript y algo aún más reciente, es decir, AJAX, JavaScript asíncrono. Esto le permite crear toda la dinámica más de una interfaz de usuario por ir a buscar más y más datos progresivamente desde un servidor. Así que vamos a ver algunos de estos fragmentos tan bien hoy. Como acotación al margen, si usted está interesado en la concentración en ciencias de la computación o minoring en informática, sé que este viernes al mediodía en Maxwell Dworkin 221 habrá un evento de pizza donde se puede aprender un poco más acerca de la informática. En su camino a la puerta hoy serás capaz de recoger una guía no oficial para CS en Harvard. Lo pondremos en los botes de basura fuera a la altura de la cintura de modo que si quieres agarrar esto y aprender un poco más acerca de CS, que estará allí para ti como lo fue en la semana 0. También, si usted desea unirse a nosotros para el almuerzo CS50 este viernes a las 1:15 pm, dirigirse a cs50.net/lunch. Sin más preámbulos, les presento la enseñanza compañero Joseph Ong. Hi. [Aplauso] Gracias. La primera vez que supe de diseño estaba en una clase llamada aquí CS179. 

El profesor de la época nos contó la historia de otro profesor que había ido a un hotel y utilizamos los grifos. ¿Puede alguien decirme por qué los 2 botones de la izquierda y hacer lo correcto? [Estudiante] Caliente y frío. >> Caliente y frío. Bueno. Lo que normalmente esperar, ¿no? Este profesor después de usar el grifo quiere tomar una ducha, y procede a utilizar esto. Él piensa que el izquierdo y el lado derecho son en caliente y en frío, ¿verdad? Pero, ¿puede alguien decirme qué es esto realmente? Las manos? [Respuesta de los estudiantes inaudible] >> Una sugerencia es? [Respuesta de los estudiantes inaudible] Temperatura? >> Así que uno de ellos controla la temperatura y los otros controles? >> [Estudiante] La presión del agua. La presión del agua. Bueno. Este profesor entra en esto y, pensando que están controlando caliente y fría, resulta el más adecuado, lo que él piensa es en caliente, todo el camino hasta porque quiere tomar una ducha caliente. Bueno, estos en realidad no coinciden, por lo que obtiene esta experiencia no es muy divertido de estar en una ducha de agua fría, y todos sabemos lo que se siente. Este es un ejemplo de un fallo de diseño. ¿Qué quiero decir con esto es su expectativa del grifo no coincide con lo que salió de la ducha, que es un poco desafortunado para él. Así que este es un ejemplo de un defecto de diseño que ocurre en la vida real. Sin embargo, vemos todo tipo de seres de otros también. No somos probablemente los fans del sistema de MBTA. Se trata de un sistema de metro en realidad en Londres, que dice: "Este botón no está en uso." ¿Por qué es aún ahí? ¿Por qué nos importa? Cuando yo era un niño, siendo el experto en tecnología de la casa, cada vez que el ordenador se bloquee, mi mamá venía a mí, mostrándome esta pantalla y preguntándome qué pasó. 

Ni siquiera yo sé lo que esto significa. [Risas] ¿Qué? [Risas] A veces nos sentimos como los desarrolladores de software son sólo curricán nosotros. Como usuarios estamos como, "¿Qué está pasando? Alguien nos dicen". Todo esto se reduce a una cuestión de diseño. Diseño, como podemos ver, no es puramente acerca de la estética, no se trata de cómo se ven las cosas. Aquí vemos que este pequeño pop-up por aquí realmente se ve muy bien. Tiene una sombra en el fondo, tiene radios de frontera pasando. Es algo bonito. No está muy bien diseñado, porque no es muy fácil de usar. Ese pequeño pop-up que aparece en realidad no me da ninguna información acerca de lo que está pasando, no me dijo nada cuando el usuario acerca de cómo recuperar de este error. Queremos pensar acerca de las cosas que el diseño no es. En primer lugar, no es la estética. Tampoco es el relleno de su aplicación con un montón de funcionalidades innecesarias. Si usted es un restaurante tailandés, es probable que no quiere ser un dentista al mismo tiempo. Y con Facebook Questions, no es que mucha gente lo usa y no era realmente el núcleo de lo que estaban construyendo. Y lo que es bueno para pensar no es tanto la cantidad de las cosas que usted está poniendo a su solicitud, pero la calidad de la y cómo se está haciendo que la experiencia de usuario mejor por mejorar la realidad de lo que ya tiene. 

En pocas palabras, el diseño nos dice lo que debemos construir. Por ejemplo, si estamos construyendo algo que vamos a buscar las cosas, como Google, por ejemplo, debemos hacer las cosas de una manera que requiere que el usuario lleva un montón de clics para llegar a lo que quieren, o hay que hacerlo de una manera, por ejemplo, con Google Instant o autocomplete que nos permite llegar a nuestros resultados con mayor rapidez? Ingeniería implica, al igual que Tommy le mostrará, en realidad construyendo. Hay muchos tipos de diseño. Por ejemplo, si usted está construyendo algo para desplegar algo en un país del tercer mundo donde no hay electricidad o mucho que la tecnología mucho, usted tiene que diseñar lo que usted está construyendo de manera que fácilmente se accede a la gente de allí. Pero, ¿qué tipo de decisiones de diseño que puede haber otros o podría estar involucrado en algo como esto? Si. Veo una mano. [Respuesta de los estudiantes inaudible] Derecho. >> Exactamente. La accesibilidad es una cosa. Muchas personas no piensan, "¿Qué pasa con mis usuarios?" como los extremos de cualquiera de espectro. Tengo usuarios que podrían tener discapacidades que no estoy pensando en y estoy pensando en el diseño para el usuario general. El Internet es accesible en todo el mundo hoy en día, y que debería ser el diseño para esa gente también. ¿Qué clase de otras decisiones de diseño pueden hacer? Sí. >> [Estudiante] Costo. Costo. Muy bueno. Otra cosa que podemos basar nuestras decisiones de diseño son el costo. Si tenemos un negocio, usted quiere construir algo que no tiene precio mucho para producir pero se puede vender a un precio especialmente alto o nos puede sacar algún provecho. 

Estos son todos los diferentes tipos de diseño, pero cuando estamos construyendo algo en Internet o cuando estamos construyendo algo que, probablemente, no cuesta mucho construir ahora, al igual que las aplicaciones de Internet - usted no tiene que tirar mucho capital en ella con el fin de hacer algo que realmente funciona - lo que estamos más preocupados por la experiencia del usuario. A esto le llamamos diseño centrado en el usuario. En esencia lo que el diseño centrado en el usuario se involucra a sí mismos poniendo en los zapatos de sus usuarios. Si alguien firma para arriba para lo que estoy construyendo, Obviamente han llegado a mi uso particular con un objetivo en mente, con una tarea que desee realizar. Y su trabajo no es sólo para ayudarlos a completar esa tarea sino para ayudarlos a completar esta tarea de una manera que sea eficiente, intuitivo, y, como dijo alguna persona de allí y accesible. ¿Qué significa eficiencia? Eficiencia significa la rapidez con qué el usuario a completar la tarea dada mi interfaz. ¿Se necesita un montón de clics para ellos para ir de un lugar a otro? Es tedioso? ¿Tienen que realizar muchas tareas repetitivas? Queremos hacer que el proceso sea lo más eficiente posible por lo que no tiene que hacer ese tipo de cosas. En cuanto a la intuición, que es, por ejemplo, si un usuario busca mi interfaz, es más fácil para ellos para llegar de un lugar a otro? ¿Es fácil para ellos para averiguar lo que tienen que hacer clic en mi interfaz a fin de que para lograr el objetivo o tarea que se quiere lograr? 

Y finalmente, como dijo una persona de allí, la accesibilidad es muy importante. [Hablante masculino] Se refiere a la accesibilidad para las cosas como la visión, ¿Cómo se debe en realidad diseñar algo para alguien que es ciego? Oh. Para las personas que no pueden ver nada, tenemos algo llamado lector de pantalla. Lo que debe hacer es que usted debe construir su sitio web de una manera que, por ejemplo, tecnologías específicas, lo que llamamos - Hay un montón de cosas ahora. Creo que hay lectores de pantalla llamado JAWS. Muchas de estas cosas dependen de lo que llamamos normas de la zona con el fin de leer para el usuario de lo que está presente en la página. Para aquellas personas que no pueden ver, tiene que asegurarse de que estos lectores de pantalla en realidad puede recoger el contenido de la página, y realmente puede mostrar a sus usuarios, si no se puede ver, al menos todavía se puede entender el contenido de la página. Si. Bien. Basta de hablar acerca de un buen diseño. Vamos a hablar de un mal diseño. Estas son cosas que no debes hacer. ¿Alguien puede decirme acerca de sus experiencias con Craigslist y lo que creen que no es tan bueno de este diseño? Sí. >> [Estudiante] Creo que hay demasiadas palabras en un área. Demasiadas palabras, ¿no? Completamente abrumador. Al llegar a esta página y te da la bienvenida con un montón de cosas aquí que ni siquiera te importa. Por ejemplo, usted vive en un estado que no comienza con esta carta. Digamos que usted vive en Texas o algo así. 

Usted tiene que desplazarse hacia abajo en la página para llegar al lugar donde se encuentra. Soy de Boston, así que me miro en Massachusetts. ¿Dónde está Massachusetts? Oh, está aquí mismo. Oh, es Boston. Bien. Echemos un vistazo a Boston. [Risas] Bastante abrumador, ¿verdad? Awkward cosas por allá. [Risas] Digamos que yo estoy buscando un lugar para vivir. ¿Cuántas personas se han utilizado Craigslist? Toneladas de usted. Hay formas muy mal de ver esto, pero vamos a ver esto. ¿Cuál es la diferencia entre img y pic? ¿Alguien puede decirme? Hay en realidad no hay diferencia. Ellos significan exactamente lo mismo, pero tienen nombres diferentes para ellos por alguna razón. Si hago clic en anuncio con foto, no pasa nada en la página. De hecho, tengo que hacer clic en Volver a buscar para que algo suceda. ¿Cuál podría ser una decisión de diseño mejor que se podía hacer allí? Si estoy haciendo clic en este filtro, probablemente desea filtrar por esa acción en particular o esa categoría en particular. Así que en lugar de tener que presionar Buscar de nuevo, yo podría simplemente hacer automáticamente el filtrado tipo de estilo de Google donde lo hacen al instante. [Malan] Sin embargo, no constituye, como hemos visto hasta ahora tienen que ser físicamente presentado pulsando Enter al menos o haciendo clic en un botón? Como se ha visto hasta ahora, que realmente tiene que hacer clic en Enviar para hacer esas cosas. 

Pero a medida que Tommy le mostrará en un segundo, en realidad hay maneras para que usted de tal manera que al hacer clic en esa cosa que puede enviar automáticamente lo que llamamos una petición AJAX y obtener datos de vuelta y filtrar los resultados al instante. Hay un montón de cosas que están mal en esta interfaz. [Malan] ¿Puedes buscar Cambridge? Hay algo un poco anómalo aquí donde usted se preocupa por Cambridge y sin embargo, usted está recibiendo Westford, Spring Hill, West Newton y similares. Probablemente no es ideal. >> Probablemente no ideal. ¿Cómo podría yo ser capaz de hacer la experiencia de usuario mejor en esta página en particular? Sí. >> [Estudiante] Instrucciones. Bien. Las instrucciones de qué tipo de sentido? [Estudiante] Por ejemplo, una cosa para los usuarios de primera vez, que ni siquiera saben lo que es Craigslist o no sabes lo que tienes que hacer. Derecha. Así lo explica Craigslist está en esta página es importante. De hecho, podemos decir a los usuarios lo que esta página es en realidad para. Si estoy visitando a esto, veo un montón de lugares. Yo ni siquiera sé lo que significan. Pero más importante aún, sólo mirar a esta interfaz, Recuerdo que tuve que bajar un montón de cosas para encontrar una comunidad en particular que realmente se preocupaba por ello. ¿Qué es un método más rápido que podía hacer eso? Sí. [Estudiante] Divide para arriba en este, las regiones del oeste. >> Okay. Podría dividirlos en categorías más que pueda ayudarme a determinar más rápidamente cómo llegar a ese lugar en particular. [Estudiante] Ponga una lista desplegable. >> Derecho. Bien. Me vendría bien un menú desplegable, porque tenemos un conjunto fijo de las cosas y podríamos mostrar en un menú desplegable. De esa manera no se necesita tanto espacio en la pantalla. Pero aún mejor que eso, ¿qué podemos hacer? Sí. >> [Respuesta de los estudiantes inaudible] >> ¿Puedes decir eso otra vez? >> [Estudiante] cuadro de búsqueda. Sí, un cuadro de búsqueda. Eso es genial. Lo que en realidad se puede hacer es que si miramos hacia atrás en el buscador de diapositivas. Autocompletar. Una manera muy sencilla de buscar a través de los resultados que usted sabe que está en un set. Si me pongo a escribir BO, sólo me mostrará todos los resultados que tienen en el interior de BO de ellos. De esa manera puedo encontrar muy fácilmente el particular, me quiero ir a la en lugar de tener que desplazarse a través de esta lista realmente grande. 

Se trata de todo tipo de realidad fruta madura que alguien que está llevando a cabo Craigslist en realidad se puede hacer para que la experiencia en el sitio mucho mejor para su usuario en particular. Bien. Basta de hablar sobre los sitios web malos. Hablemos de Facebook. Cuando Facebook salió, y en especial las fotos de Facebook, había un montón de otros servicios en el momento en que podría hacer exactamente las mismas cosas. Podrían organizar las fotos en álbumes. Lo que podría hacer es que usted puede organizarlos en grupos también. Usted podría organizarlas por fecha. Usted puede hacer todas estas cosas en particular. Pero, ¿alguien sabe lo que hizo estallar en fotos de Facebook el momento en que fue puesto en libertad? Sí. >> [Los estudiantes] Tags. Tags. >> Exactamente. Tenemos Milo por aquí, que es nuestra mascota perro con ese pañuelo CS50. Se puede ver que tenemos esta característica de etiquetado en el centro. Y lo que hizo fotos de Facebook muy interesante desde el punto de vista de usabilidad es que en realidad permitió a la gente a través de este involucrar a sus amigos en sus fotos. Para Facebook, ya que su sitio web es muy social, se trata de la construcción de este tipo de ambiente social. Esto mejora la experiencia de fotos mucho más porque en realidad podría comenzar diciendo: "Estas son las conexiones entre las personas, y estas son fotos de gente a la que realmente importan. " Parte de ello es también el narcisismo tipo. La gente le gusta ser etiquetados en fotos y cosas por el estilo. Mientras que eso no es necesariamente un rasgo bien humano, al mismo tiempo que está basado en las decisiones de diseño buenas porque la gente realmente se preocupan por cosas como esta. Así que eso es fotos de Facebook. 

Pero hablemos de Facebook en general. Estoy seguro de que mucha gente aquí tiene una opinión sobre Facebook, ambas decisiones de diseño buenas y malas decisiones de diseño. Así que vamos a ventilar o ser feliz. Vamos. Sé que todos ustedes usan Facebook. Alguien tiene que tener algo malo que decir o algo bueno que decir sobre él. Sí. [Estudiante] En el servicio de noticias que hay un montón de cosas que realmente no importan. El servicio de noticias no muestra un montón de cosas que tal vez no importa. Usted tiene amigos en Facebook que no se han cumplido durante 2 o 3 años y ver sus resultados de noticias apareciendo en su servicio de noticias y que en realidad no importa. Facebook ha hecho realmente un esfuerzo para hacer esto mejor, y que en realidad han tratado de empujar resultados relevantes a la parte superior de la fuente de noticias en los últimos tiempos lo que en realidad vemos las cosas por los amigos que son relevantes para usted o sus amigos íntimos. ¿Algo más? Sí. [Respuesta de los estudiantes inaudible] >> ¿Puedes decir eso otra vez? [Estudiante] Los anuncios son relativamente discreta. >> ¿En qué sentido? [Respuesta de los estudiantes inaudible] Ellos no tienen luz en la pantalla, como banderas. Bien. Eso es bueno. Si te acuerdas de Internet desde los años 90 - >> [Malan] yo estaba allí. >> El estaba allí. [Risas] Puede que recuerde intermitentes fondos GIF, brillantes cosas, Tipo GeoCities estilo de las cosas. Eso no es realmente un ejemplo de un buen diseño porque realmente está distrayendo de su contenido. El sitio web de Yale arte solía tener GIFs animados como sus antecedentes y no se podía leer nada en la página, pero creo que alguien realmente hablé con ellos y ahora es un poco diferente. [Malan] Es mucho mejor ahora. >> Es mucho mejor ahora, como puedes ver. >> [Malan] Oh yeah. Simplemente genial, justo - Sí. Bien. 

Parte de ello también está haciendo su página posiblemente muy minimalista y muy comprensible 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. ¿Qué tipo de cosas son buenas o malas acerca de Facebook acerca de Facebook? Vamos a tener una conversación diseño aquí. Oh. ¿Dónde? Si. [Estudiante] El sistema de nueva línea de tiempo le permite buscar el perfil de la persona acerca de su pasado. Ooh, línea de tiempo. Timeline es una gran cosa porque le permite acechar a tus amigos cuando estaban en la secundaria. Línea de tiempo es bueno porque te permite filtrar contenido mucho más rápido, que le permite encontrar las cosas que de otro modo habría que tomar un tiempo muy largo para encontrar simplemente desplazándose hacia arriba y abajo, arriba, arriba, arriba, arriba, arriba, como ir atrás en el tiempo. Pero también hay una especie de desventaja de que en términos de experiencia del usuario. ¿Qué podría ser? Gran palabra que empieza con P-R. >> [Los estudiantes] de privacidad. Privacidad >>, ¿no? La privacidad es un tema de enorme experiencia del usuario. Esta es una de las cosas que más odio de Facebook ahora. [Risas] [Malan] Tal como lo hago ahora. David no se dio cuenta de que esto realmente sucedió hasta ayer. Así que ahora que sabe que cada vez que le chatear sé que él me ha estado ignorando. [Malan] La parte difícil fue que era en realidad lo ignora, y yo no sabía que él sabía que yo lo estaba ignorando. [Risas] La privacidad es un gran problema. Aquí nadie puede decirme lo que podría ser malo sobre privacidad de Facebook además del hecho de que se hacen las cosas de esta manera? Lo que es particularmente difícil de hacer con respecto a la privacidad de Facebook? Este tipo de pregunta es un líder. Sí. >> [Estudiante] Ocultar las fotos de determinadas personas. Derecha. Exactamente, para ocultar sus fotos de determinadas personas. Tienen este pequeño botón pequeño se encuentra en la parte superior derecha que le permite cambiar la privacidad de una foto. Sus opciones de privacidad son muy variados entre los diferentes tipos de menús. 

Han mejorado mucho en ello últimamente, pero lo que solía ser el caso que cada vez que quería evitar que sus amigos de las fotos viendo, usted tendría que pasar por un complicado proceso de 5 pasos de ser como, déjame hacer clic en este enlace, ahora déjenme hacer clic de nuevo, déjame clic de nuevo, Permitir especificar que la gente no puede ver mis fotos. Eso no es particularmente bueno en parte de Facebook ya que gran parte de la experiencia del usuario es en realidad les da la libertad para controlar lo que la gente puede ver. Llamamos a este control de usuario y la libertad. Si usted no está dejando que sus usuarios hacer eso de una manera que sea eficiente e intuitivo, entonces su experiencia de usuario no es realmente tan bueno en absoluto.  ¿Le gusta a ustedes decir nada acerca de Facebook? ¿Cómo puedo desactivar esta opción? [Ong] No se puede desactivar esta opción, y eso es un error enorme facilidad de uso por parte de Facebook. Esta característica - que en realidad parecía a lo de ayer - que es o que no es posible hacerlo o es enterrado en algún lugar muy, muy profundo en los recovecos de Facebook porque no puedo encontrar la manera de desactivar esta funcionalidad en absoluto. [Malan] Pero a veces estas decisiones no son evidentes porque ustedes nos han dado una gran cantidad de información útil sobre diferentes aplicaciones CS50 y sitios web que utiliza el curso. No se han puesto en práctica todas estas peticiones y sugerencias. 

Parte de eso es para conseguir tantas solicitudes que se trata de una función del tiempo, pero a veces simplemente tomar una decisión consciente como, "Gracias por la sugerencia, pero no estamos de acuerdo". Entonces, ¿cómo decide realmente lo que debe hacer si los usuarios cree que debería hacer algo incluso si no lo hace necesariamente? Es un delicado equilibrio entre realidad escuchando lo que los usuarios dicen y realmente tener una especie de línea donde usted dice, "Nosotros no vamos a hacer lo que estos dicen los usuarios." Y en particular, creo que había una cita de Henry Ford que lo resume bastante bien. "Si hubiera preguntado a la gente lo que ellos querían, ellos habrían dicho que querían caballos más rápidos". ¿Alguien puede ordenar de separar lo que realmente significa esa frase? No es sólo que los usuarios sepan lo que quieren, pero es más que - [Estudiante] Ellos no saben lo que es posible. En parte, porque no saben lo que es posible. Se burlan de que, aparte de un poco más. ¿Qué quieres decir con eso? [Respuesta de los estudiantes inaudible] Eso es bueno. Lo que creo que estamos tratando de decir aquí es que la gente sepa lo que quiere. Quieren más rápidos caballos. Lo que realmente quieren es la capacidad de moverse más rápido, pero no se sabe muy bien el medio por el cual para lograrlo. Al llegar a sus usuarios y sus usuarios decirte algo y te dicen: "Queremos que estas características y estas características y estas características", no quiero pensar necesariamente sobre: ​​"Déjame ir por delante "Y poner en práctica lo que dice explícitamente:" pero lo que quiero pensar es: "¿Qué clase de ideas puedo obtener de esto?" ¿Qué es lo que realmente quieres? 

Y a partir de ahí lo que se puede hacer es diseñar algo que satisfaga las peticiones pero no necesariamente en la forma en que el usuario espera que esté satisfecho. Así que por algo así como proyectos finales, en términos reales, lo que es una heurística útil cuando se trata de hacer algo mejor, especialmente si el diseñador tiene la arrogancia de él por lo que usted sabe de lo que es mejor, es posible obtener información de sus usuarios, pero ¿cómo van realmente sobre conseguir que la retroalimentación? En los proyectos finales, muy concretamente, lo que produce resultados óptimos en esta lista? Lo que produce resultados óptimos - y voy a ir sobre esto en un segundo - Es este proceso de desarrollo y pruebas y luego iterar. ¿Qué quiero decir con las pruebas es por lo general cuando se diseña algo Crees que es bastante bueno, como, "Yo soy un gran diseñador. Todo el mundo va a encantar." Y luego lo pones ahí y la gente no le gusta por alguna razón. Lo que tienes que hacer es que usted tiene que tomar las partes de las cosas que la gente hace como y la remodelación de las cosas que la gente no le gusta. Suena como un proceso muy obvio, pero este proceso de iteración constante encima de lo que ya has construido es un proceso que le ayuda a no sólo afinar sus habilidades de diseño propio, pero también le ayuda a perfeccionar el diseño por lo que la gente realmente apreciamos su producto incluso más que antes. 

Iré más ejemplos concretos de lo que en realidad podría hacer. Como una especie de último ejemplo de un producto, vamos a ver KAYAK. KAYAK cuando salió era muy, muy popular. ¿Alguien puede adivinar por qué? ¿Cuáles son los tipos de cosas que te gustan de esta opción si ha utilizado o ¿cuáles son el tipo de cosas que no te gustan? Sí. >> [Respuesta de los estudiantes inaudible] >> Okay. Eso es parte de ella está dejando que el usuario tiene una consulta que es más expansiva que sea muy restrictivo así como: "Tienes que escoger la fecha de inicio "Y usted tiene que escoger su fecha de finalización." De hecho, se le permite ser flexible al respecto y le da todos los vuelos en ese rango. ¿Algo más? [Estudiante] Incluyen las tasas en el precio. Hacen incluir las tasas en el precio. Los impuestos y las cosas realmente van directamente a ese precio en la parte superior izquierda lo que no está engañado haciéndole creer que en realidad estás pagando por un vuelo de 240 dólares cuando en realidad es $ 330. ¿Algo más? Sí. [Respuesta de los estudiantes inaudible] No estoy seguro de si realmente vamos a hacer eso. Puedo estar equivocado. Eso podría ser una cosa interesante si usted quiere poner más peso en particular filtros de modo que empuje los resultados relacionados con ese filtro a la parte superior. Pero, ¿puede alguien decirme qué tiene de especial este lado izquierdo? ¿Cómo tradicionalmente buscar un vuelo en un servicio de Internet antes de esto? 

Sí. >> [Respuesta de los estudiantes inaudible] >> ¿Se puede decir que - [Estudiante] Cada línea aérea. Sí >>. Cada línea aérea tiene su propio sitio web. Esto consolida las cosas. ¿Y? [Estudiante] Usted sabe exactamente a qué hora te vas. Usted sabe exactamente a qué hora te vas, pero relacionados con los filtros en particular. Déjame levantar KAYAK. Oh Dios, pop-ups. Mala experiencia de usuario. ¿Qué sucede cuando mueve este control? [Estudiante] Actualizaciones automáticas. >> [Ong] actualizaciones automáticas. Eso es algo que es muy importante. Antes de esto, cada vez que quería buscar un vuelo, había que poner en su lugar de entrada, el lugar de salida, pulse Buscar, habría que procesar y mostrar sus resultados. Si usted quiere cambiar su búsqueda, usted tiene que pulsar dos veces, entrar en una nueva consulta desde cero, y luego hacerlo una y otra vez. Lo bueno de algo como esto es que utiliza una gran cosa [ininteligible] en el medio. Cada vez que se hace algo como esto, se dispara una solicitud y te devuelve todos los resultados inmediatamente. Este tipo de respuesta inmediata es algo que se hizo muy popular en KAYAK porque es muy fácil para mí para cambiar sólo mi consulta y de averiguar lo que es de alrededor de un rango determinado sin tener que ir adelante y atrás, adelante y atrás, adelante y atrás. Así que estas son todas las clases de cosas que quieres que pensar cuando usted está diseñando su sitio web. ¿Cómo puedo hacer que sea muy eficiente para mis usuarios a pasar por lo que estamos trabajando en y para llegar a su meta final lo más rápido posible? [Malan] Y a punto de José antes sobre los usuarios no necesariamente saben lo que quieren, sobre la base de lo que ustedes ya saben acerca de HTML y usted tiene casillas de verificación, botones de radio, menús de selección, campos de entrada y similares, ¿cómo poner en práctica la idea de escoger una hora de inicio de un vuelo? 

¿Cuál de estos mecanismos de interfaz de usuario diferentes usaría? Si usted acaba de saber la cantidad de HTML que se enseñaba antes 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, ¿cuál sería su opción natural han sido para escoger las fechas? [Estudiante] Entrada. >> Entrada. O tal vez incluso un menú desplegable con todas las fechas, ¿no? Así que con los mecanismos de la interfaz de usuario más complejas como esta en el lado izquierdo que se pueden implementar, usted puede hacer este proceso mucho más intuitiva con un control deslizante porque el tiempo es continuo, y las personas no suelen pensar en ella en términos de trozos discretos. Está bien. La última cosa. Diez heurísticas de usabilidad. Todas las cosas que hablamos probablemente pertenecen a una de estas categorías. Si vas a este enlace, los sitios que se publicará en Internet, que realmente va a ser capaz de hacerlo, como el diseño de su sitio, tenga en cuenta estas heurísticas y estas reglas generales. Para sus proyectos, lo que te sugiero que hagas con el fin de diseñar su aplicación mejor es hacer prototipos de papel. Cuando usted está pensando en su aplicación, muy rápidamente dibujar lo que quieras que se vea como y asegúrese de que todas las cajas están dispuestas de una manera que es muy intuitivo para el usuario utilice e incluso mostrar los prototipos de papel a tus amigos y empezar a grupos de enfoque. Acaba de obtener 2 o 3 personas y pedirles que toca justo en estos prototipos de papel, y enseñarles nuevas pantallas para ver si realmente entender lo que está pasando. 

Lo que quiero hacer es darles una tarea, motivar esa tarea, y sólo les dan la aplicación y dejar que lo utilice. No les dé instrucciones más allá de eso. ¿Quieres dejar que ellos realmente interactúan con su aplicación de una manera que le permite ver la forma en que lo usaría si no estaban de pie junto a ellos. Y eso es muy importante. Eso le dará un montón de ideas que son las personas que reciben en torno a las cosas particulares de una manera que no les proponen? ¿Están utilizando los mecanismos particulares de interfaz de usuario en la pantalla de una manera que es una especie de hacky? Yo no tenía la intención de que lo hagan de esa manera. Y una vez que hayas terminado con eso, ¿qué quieres que haga? Sus rocas de diseño, ¿no? Lo que quiero hacer es que queremos desarrollar y luego hacer el proceso otra vez. Así que mostrar a sus amigos una vez que has desarrollado, probar, desarrollar, probar, desarrollar, probar, repetir, una y otra y hacia adelante. El diseño es muy un proceso iterativo en este sentido. Usted realmente tiene que construir algo y luego se dan cuenta cosas sobre él que no se había dado cuenta antes y volver y mejorar a partir de eso. Ahora, en cuanto a la parte de desarrollo, eso es lo que Tommy se va a mostrar después de las vacaciones y cómo usted puede ser capaz de implementar algo como autocompletar de una manera que es bastante simple. [Malan] Como Tommy establece aquí, la pregunta entonces. Muchos de los primeros sitios web - y cuando José dijo 1990s sitio web estilo, era implementaciones donde si querías elegir una hora de inicio y una hora de finalización, francamente, de vuelta en el día, e incluso en algunos sitios web hoy en día, la forma de hacer esto es que una hora de escoger un menú desplegable, usted escoge minutos de un desplegable, tal vez usted elegir AM, PM, y luego hacer que 3 veces más. Y así, con 6 clics y tal vez un poco de movimiento en sentido vertical el usuario realmente puede proporcionar algún tipo de fecha y / o rango de tiempo en este sentido. 

Así que definitivamente subóptima y, sin embargo hasta el momento no hemos visto ninguna capacidad expresiva en cualquiera de los idiomas que hemos visto hacer algo más sexy al igual que el control deslizante de la hora de inicio y hora de finalización. Pero si piensas en la semana 0, cuando hablamos de Scratch, allí no había widgets que acaba de hacer ciertas cosas. Usted realmente sólo tenía estos fundamentos como los bucles y las condiciones y similares. Así que tipo de sólo pensar muy abstractamente ahora, independientemente de las particularidades de HTML, lo que realmente está pasando con algo así como la hora de inicio y hora de finalización slider? Cuando muevo el ratón y hacer clic en ese símbolo zanahoria poco a la izquierda y empezar a arrastrar, mediante programación, qué es lo que quiero ser capaz de implementar para que esto suceda? ¿Qué preguntas, ¿qué expresiones booleanas qué quieres ser capaz de hacer? ¿Qué está pasando realmente? Sammy? [Estudiante] ¿Dónde está la posición del cursor? Bueno >>. ¿Dónde está la posición del cursor? Esto era algo que teníamos que expresar de nuevo en Scratch, si se basa en la ubicación o incluso el color o similar. Usted puede recordar muy brevemente el lunes había todas estas cosas que se llaman eventos en el mundo de la Web, por lo que hay cosas como onclick y onkeypress y onkeyup y onmouseover y onmouseout. Así que darse cuenta de que incluso estas cosas que hemos estado tomando por sentado en la Web con sitios como Facebook y Gmail, incluso si usted no tiene ninguna idea cómo es posible que llevaría a cabo porque no hay nada siquiera parecido en conferencia o Problema 7, se dan cuenta de que con estos fundamentos mismos exactos, con HTTP y los parámetros y GET y POST, con los insumos básicos de HTML que hemos visto hasta ahora y en un momento con los mecanismos programáticos que Tommy está a punto de introducir puede empezar a expresarte tal y como hizo en la semana 0 por muy intuitiva de arrastrar y soltar. 

Así que dicho esto, Tommy MacWilliam y algunas nuevas piezas del rompecabezas para nosotros para Web. Está bien. Mi nombre es Tommy y yo voy a estar hablando de JavaScript. Sólo una aclaración: yo soy de la opinión de que JavaScript es el mejor lenguaje de programación en todo el mundo entero. Hay un montón de personas que no están de acuerdo conmigo, pero es simplemente increíble. Una vez que vuelva a C, si tienes que escribir C para otra clase o algunos otros idiomas, Es realmente frustrante en todos los detalles de bajo nivel que tiene que enredarse pulg Así que si alguna vez te sientes triste por lo molesto C es escribir, sólo tiene que ir de nuevo, escribir algo de JavaScript. Es el nirvana. Usted se sentirá mucho mejor acerca de su mal día. Gran parte de la magia de JavaScript se debe a su habilidad para manipular las cosas que ya están en la página. Cuando escribimos nuestros scripts PHP, que fueron ejecutados en el servidor, y, finalmente, que la salida de script PHP probablemente algo de HTML. Eso HTML se envía al cliente, y luego que lo era. Si PHP quería agregar un botón a una página, por ejemplo, no se puede hacer eso. Tendría que hacer un conjunto nuevo archivo HTML y enviarlo al navegador. Con JavaScript sabemos que podemos actualizar las cosas mientras están ya en la página, y debido a esto podemos proporcionar información mucho más inmediato, que realmente mejorará la experiencia del usuario en nuestro sitio web. Sólo un resumen rápido de los selectores de JavaScript. Sabemos que cuando se descarga una página HTML, que va a estar representado en el DOM. 

El DOM recuerdo es precisamente este gran árbol donde los elementos están relacionados en esta jerarquía. Cuando trabajamos con bases de datos en conjunto de procesadores 7, una de las primeras cosas que se necesitan saber cómo hacer era consultar la base de datos. Tenemos esta gran tabla de usuarios, ya veces sólo quiero decir, "Sólo quiero que algunos de estos usuarios que coincidan con alguna condición." Del mismo modo, cuando tenemos el DOM necesitamos alguna forma de consulta de la misma. Necesitamos una manera de decir: "Quiero que todos los botones que se ven así "O todas las imágenes de la página." Y estos selectores nos permiten hacer eso. Así que sólo un resumen rápido. Este primero aquí, este # presenten, lo que es que va a seleccionar? ¿Alguien se acuerda? [Respuesta de los estudiantes inaudible] >> Sí, exactamente. Esto va a seleccionar un elemento en la página que tiene un ID de presentar. Y para que hash tag dice que este selector se va a trabajar con documentos de identidad. ¿Y el segundo, esto. Centrado, que lo que va a seleccionar? Si. >> [Estudiante] Clase. >> Exactamente. Esto ahora se va a seleccionar por clase. La diferencia entre el ID de clase y aquí es generalmente el ID debe ser único dentro de cualquier espacio que usted está buscando más. Así que si estás buscando a través de una página web entera, que realmente sólo debería tener un elemento con ese identificador determinado, por lo que en este caso de presentar. Con las clases, por otro lado, podemos tener más de 1 elemento en la misma página con la misma clase. Esto podría ser útil para decir que quiero seleccionar todo lo que está centrada en la página en lugar de sólo una cosa. 

Y finalmente, este último aquí es un poco más complicado, pero ¿qué es esto va a seleccionar entre el DOM? [Respuesta de los estudiantes inaudible] >> ¿Qué es eso? [Estudiante] Cualquier cosa que sea una etiqueta. >> Tenemos 2 partes aquí. La segunda parte va a decir que quiero seleccionar estas etiquetas con una etiqueta de entrada, por lo que cualquier elemento que es una etiqueta de entrada. Pero yo no quiero seleccionar sólo todas las entradas porque algo así como un botón de envío puede ser un insumo y algo así como un cuadro de texto podría ser una entrada. Así que con estos corchetes Estoy diciendo que sólo desea seleccionar los elementos que son de tipo texto. En algún lugar de mi etiqueta HTML que tiene un atributo llamado tipo, y el valor de atributo que tiene que ser texto. Entonces, ¿qué hay de esta primera parte aquí? La primera palabra de este selector es la forma entonces tengo un espacio y esta parte de entrada. ¿Qué es lo que hacen, poner el formulario en frente de ella? Esto va a limitar básicamente nuestra consulta. Podría ser el caso que tenemos algunas entradas de la página que no son descendientes de un formulario. 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 algún elemento principal de un formulario. Y así, de esta manera podemos hacer que estas consultas más jerárquicas por lo que no sólo tiene que seleccionar todo cumple un selector dado. Podemos especie de límite del alcance de esa consulta a otra cosa. Así que ahora que sabemos cómo seleccionar elementos en la página, vamos a hablar un poco acerca de AJAX. AJAX es un acrónimo aún muy de moda que representa JavaScript asíncrono y XML. Lo que pasa es que XML es sólo una forma de representar los datos. 

Ese tipo de popularidad perdido recientemente, por lo que la X en AJAX no se utiliza todo el tiempo. Básicamente, lo que AJAX nos permite hacer es realizar peticiones HTTP a partir del contexto de JavaScript. Cuando estamos en nuestro navegador web y estamos navegando por las páginas y haga clic en un enlace, lo que nuestro navegador se va a hacer es hacer una petición HTTP a cualquier enlace que haga clic. Pero eso no siempre es ideal, porque si ese es el caso, entonces cuando David estaba diciendo: siempre tenemos que hacer que los usuarios hacer clic en un botón de envío o haga clic en un enlace con el fin de hacer que algo suceda eso va a implicar una petición HTTP. Así que con AJAX podemos hacer estas peticiones en nombre de JavaScript. Eso significa que cada vez que el usuario interactúa con la página o cualquier cosa que pase, que realmente puede hacer una solicitud mediante programación a algún archivo PHP por nuestra página web o cualquier otra cosa y recuperar los datos de ese archivo que escupe. Echemos un vistazo a un ejemplo de AJAX. Esta es nuestra página de Finanzas CS50 con el que espero que algunos de nosotros estamos familiarizados. Si nos fijamos en el código HTML de la página, vemos aquí que he añadido algunas cosas, uno de los cuales me he dado esta forma una identificación. He dicho id = "form-cita". Lo he hecho sólo porque va a hacer esto un poco más fácil la selección del DOM ya que sólo se puede hacer una consulta muy simple. Lo que quiero hacer aquí es que quiero arreglar algún problema con CS50 Finanzas. Así que si vamos a finance.cs50.net, cada vez que desee obtener una cita, tengo que hacer clic en este botón Cita Get, y que Get botón Citar entonces me lleva a otra página entera. Y si quiero otra cita, tengo que golpear el botón Back y luego escribirlo, Tengo una cita, y apreté el botón Atrás. Esto realmente no es la mejor experiencia de usuario. ¿Quién realmente utilizar el sitio si es tan lento para obtener los precios de las acciones? Así que lo que quiero hacer con AJAX es eliminar ese paso de ir a otra página con el fin de ver los resultados. 

Lo que realmente estamos pidiendo es sólo que el precio realmente pequeño, y eso es sólo una cantidad muy pequeña de datos. Así que no hay necesidad de que me vaya a otra página HTML entera, descargar un lote nuevo de HTML, tal vez descargar algunas imágenes más, algunos otros archivos CSS sólo para mí responder a esta pregunta muy simple de cuánto cuesta este stock. Con AJAX podemos hacer esto mucho más fácil. Vemos aquí que estoy vinculando en un archivo JavaScript denominado quote.js. Vamos realmente abrir ese archivo. No hay. Todos mis archivos JavaScript van a estar ubicados en HTML para que el navegador web puede acceder a él. Entonces tenemos un directorio aparte aquí para JavaScript, y ahora aquí es quote.js. En la parte superior de este archivo esta aquí dice que quiere esperar a que toda la página se cargue antes de tratar de hacer cualquier cosa. ¿Por qué es necesario? Resulta que lo siguiente que voy a hacer es empezar a buscar un elemento que coincide con algunos selector. Si este JavaScript es cada vez ejecutado antes de este elemento es cargado en la página, entonces todo lo que trato de hacer es no ir a trabajar porque yo voy a tratar de elegir algo que no está allí todavía. Así que esta línea hasta la parte superior dice que quiero que esperes hasta que todo se carga por lo que está garantizado que todos los elementos que estoy buscando en realidad en la página. Este signo dólar significa aquí estoy usando la biblioteca llamada jQuery. Esta biblioteca jQuery nos permite utilizar estos selectores que acabamos de ver. Al decir $ entonces pasa como argumento este # form-cito, Ahora estoy seleccionando esa forma que nos lo tomamos un vistazo. Ahora tengo una representación de esa forma en la memoria de alguna manera. 

En este objeto de ahora, esta representación de la forma, Ahora estoy usando una función llamada sucesivamente. Lo que hace esta función es que va a conectar un controlador de eventos. El evento que vamos a escuchar es el evento submit. Así, cuando el usuario hace clic en que botón Enviar o presione la tecla Intro, este evento se va a disparar. Al conectar en esto, ahora puedo reemplazar el comportamiento por defecto del formulario. Sin este JavaScript, el formulario se sometería a cualquier archivo PHP se utilizó en ese atributo action. Pero en cambio, yo estoy diciendo ahora, espera, espera, espera, yo no quiero que hagas eso en realidad. Quiero que esto ocurra antes de ir y tratar de enviar a algún archivo PHP. Ahora, ¿qué es lo que quiero hacer? En este punto quiero utilizar AJAX para cargar de alguna manera en lo que el precio de las acciones es. Lo primero que necesitamos saber es qué acciones del usuario está mirando hacia arriba. Para ello voy a utilizar otro selector. Este es el tercer selector vimos antes. Esto dice que yo quiero empezar este elemento forma con una identificación de la forma de comillas. A continuación, en algún lugar dentro de forma que no tiene que ser un elemento de entrada que tiene un nombre de símbolo. Si miramos hacia atrás en nuestro HTML, vimos que teníamos un input [name = símbolo]. Eso quiere decir que esto va a seleccionar la caja de texto que el usuario escribe en. Eso está bien. Tenemos el cuadro de texto. Ahora sólo tenemos que saber lo que hay dentro de ella. Para ello podemos llamar a este método aquí, este val., y esto me dice que sabe lo que cuadro de texto que tiene. Quiero que me digas qué es lo que el usuario escribe en la caja de texto. Ahora tenemos una cadena llamada símbolo que es igual a lo que el usuario escribió pulg Eso está bien. Podemos utilizar ahora esa cadena para que nuestra petición. Se trata de una nueva función aquí, esta $, excepto que estamos ya no va a ser la selección de elementos, vamos a estar llamando a una función diferente que se proporciona a nosotros por jQuery. Esta función AJAX es lo que realmente va a hacer esta petición HTTP. Así que tenemos que decirle unas cuantas cosas. Lo primero que tenemos que decir que esta función es donde quiero ir a la petición. En algún lugar de mi proyecto tengo este archivo dentro del directorio HTML llamado quote.php. Puedo acceder a este archivo, vimos, al igual que este, si voy a localhost / quote.php. 

Quiero que mi JavaScript para hacer una petición a esa página. ¿Qué tipo de petición ahora? Vimos antes que la forma que tiene method = "post" atributo, y eso significa que va a hacer una petición POST, por lo que no va a poner nada en la URL, en lugar de una petición GET, que acaba de ser despedido si sólo accede a la página con el navegador web, por ejemplo. Ahora hemos dicho que quiero hacer una petición HTTP POST a una página ubicada en quote.php. Cuando se envía el formulario, recuerde que puede acceder a los elementos de entrada en el interior de esa forma con la variable $ _POST. Hasta ahora, en la historia que no se han enviado a lo largo de todos los datos todavía. Nos acaba de decir que estamos haciendo una petición AJAX y aquí está el tipo de solicitud que estamos haciendo. Ahora tenemos que enviar realmente algunos datos a la página. Para ello podemos utilizar esta propiedad llamada de datos. El valor de esta propiedad es realmente una matriz asociativa. La razón de esto es que nos permite enviar más de sólo 1 pieza de datos. Es por eso que tenemos estas llaves aquí anidado dentro de estas llaves otros. Las claves en estas matrices asociativas va a ser la misma cosa como los atributos de nombre en los elementos de nuestro formulario. Eso significa que si envío a lo largo de una clave de símbolo, eso significa que mi página PHP puede acceder a estos datos con $ _POST [símbolo] tal como lo hicimos antes, cuando estábamos enviar un formulario. Y ahora los datos reales que queremos enviar va a ser el interior valor de esta matriz asociativa. 

Nos guardaron este texto en un símbolo variable llamada, y por lo que estamos enviando a lo largo de hoy una tecla de símbolo y el valor de lo que el usuario escribió pulg Ahora que hemos hecho esta petición HTTP, nuestro archivo PHP se ha ejecutado, y que va a enviar datos de vuelta ahora para el cliente que acaba de hacer esta petición. Ahora tenemos que responder a lo que el servidor nos dijo. Para hacer eso tenemos esta última propiedad aquí se llama éxito. El valor de esta clave del éxito es en realidad va a ser una función, y esta es una de las cosas realmente interesantes que puedes hacer con el lenguaje Java. No sólo se puede tener ints o matrices como un valor dentro de una matriz asociativa, también puede tener una función. Así diciendo éxito, esta es mi llave. Un colon dice aquí viene el valor, y ahora el valor de este es en realidad una función. Así que no es necesario dar un nombre a esta función en sí. Sólo podemos decir que esto va a ser alguna función. Va a tomar un argumento. El argumento para esta función va a ser cualquiera que sea el servidor nos envió de regreso de la solicitud. Al igual que cuando nuestro navegador hace una petición, el servidor envía algo a cambio y el navegador que muestra, en el marco de AJAX que acaba de hacer una petición, el servidor envía algo a cambio, y ahora tenemos que representar como una cadena. Con esa cadena me gustaría mostrar que en la página. Para ello voy a tener un selector pasado. Quiero seleccionar el elemento con el precio de identificación. Esto es sólo un div vacío que he creado en la página, y quiero establecer el contenido de ese div a ser lo que el servidor nos mandaron de vuelta. De hecho, he modificado un poco quote.php. 

En lugar de llamar render y haciendo alguna página, quote.php ahora simplemente se va a imprimir el valor de la acción como una cadena. Así que si usted fuera a visitar la página en realidad, usted acaba de ver esa cadena pequeña cualquiera que sea el precio de las acciones es. Una última cosa que necesitamos hacer aquí es simplemente asegurarse de que esta función devuelve false. Lo que esto dice es que si yo estoy dentro de un controlador de eventos y ese controlador de eventos devuelve false en lugar de devolver cierto, eso quiere decir que yo no quiero que el evento original al fuego. En este caso, si no tuviéramos ningún JavaScript y nos envía un formulario, nuestro navegador web que va a decir: "Yo voy a enviar esos datos a lo largo de" y ellos te van a mandar a otra página. Debido a que estamos usando AJAX ahora, no hay necesidad de enviar al usuario a otra página. Sólo vamos a mostrar los resultados de forma dinámica en esta misma página. Nosotros realmente no queremos que ir a ninguna parte, y me quiero quedar en la misma página. Así que volviendo falso, nos aseguramos de que la forma no lo hace por nosotros. Echemos un vistazo a lo que esta en realidad parece. Nuestra página de cotizaciones se ve igual. Déjame sacar el inspector aquí abajo para que podamos ver lo que está pasando. Que sea un poco menos grande. Recuerde que si abrimos la pestaña Red, aquí es donde podemos ver todas las peticiones HTTP que se están produciendo en la página. 

Para un símbolo déjame escribir AAPL y haga clic en Obtener cotización. Ahora hemos visto que una parte de Apple cuesta un poco de cantidad de dólares acaba de aparecer en la página, pero la dirección no ha cambiado en absoluto. De hecho, esta es la petición HTTP que acaba de hacer. Hemos hecho una petición POST a quote.php. Eso tiene sentido. Esto es lo que el servidor nos mandaron de vuelta. Ya no es este documento gigantesco HTML con imágenes y cosas por el estilo, es sólo una línea de texto, y entonces sólo se muestra la línea de texto. Si nos remontamos a los encabezados y ver lo que en realidad enviado dentro de esta petición HTTP, podemos ver aquí que se envió a lo largo de una tecla de símbolo y un valor de AAPL, que es lo que el usuario escribió pulg Esto es bueno, pero aún así es un poco molesto. Todavía tiene que hacer clic en este botón para obtener la cotización de acciones. Somos personas muy ocupadas y no tienen tiempo para hacer clic en los botones. Google se dio cuenta de este pequeño hace un tiempo cuando implementaron Google Instant. ¿Qué es Google Instant hace como que está escribiendo simplemente comienza a mostrar resultados para usted por lo que no tiene que preocuparse de siquiera hacer clic en Buscar. En realidad, una divertida historia relacionada con eso. Una vez que Google Instant salió, la gente estaba como, "Whoa, esto es súper increíble". "Esto es genial." Y un estudiante por la Universidad de Stanford que tenía 19 años en el momento hecho de este lugar llamado YouTube Instant. Todos YouTube Instant hace es buscar en YouTube eficazmente al instante. Así que en lugar de tener que ir a YouTube.com y pulse Buscar, cuando me pongo a escribir algo en YouTube Instant, como CS50, podemos ver aquí que está intentando en una conexión lenta a Internet poblar estos resultados vivir. Para que en realidad podemos hacer una modificación muy sencilla a nuestro archivo quote.js. En este momento estamos adjuntando este evento cuando se envía el formulario. Nosotros realmente no queremos hacer que el usuario envíe esta forma nunca más, así que en vez disparar este evento cada vez que el usuario pulsa una tecla. Para ello primero vamos a cambiar el evento de presentar a keyup. Eso significa que, en lugar de esperar a que la forma de presentar, cada vez que se pulsa la tecla, algo va a suceder. Ya no tiene sentido añadir este evento KeyUp para todo el formulario. Realmente sólo se preocupan por la caja de búsqueda. 

Para seleccionar que ahora, podemos cambiar esto a ser, más que la forma de comillas, forma de comillas y vamos a tener una entrada (escribir texto =) o podríamos decir (nombre del símbolo =) - lo que queramos. Ahora hay una última cosa que tenemos que hacer. Recordar aquí que dijimos return false hemos dicho que no queremos que eventos predeterminado para disparar. Pero da la casualidad de que si desactivamos que ahora, cualquier cosa que escriba no se va a mostrar en el navegador más porque eso sería el comportamiento predeterminado de escribir en un cuadro de texto. Ya no quiero cambiar eso, así que vamos a destruir este return false. Si ahorramos eso y volver a cargar la página, ahora cuando empiezo a escribir AAPL verás que el precio de las acciones en el fondo aquí está finalizando de forma automática. Así que aquí está CS50 instantánea Finanzas. En realidad, una divertida historia acerca de la instantánea de YouTube es que los estudiantes sólo un poco de lo escribió como un proyecto de 1-noche, y al día siguiente se le ofreció un puesto de trabajo por el CEO de YouTube. Entonces, tan simple como eso, CS50 estudiantes, sus proyectos finales pueden conseguirle un trabajo en YouTube. Algo así como que es una idea genial para un proyecto final, ¿no? Tuvimos un poco de la funcionalidad existente que queríamos integrar con. Mejoramos la experiencia del usuario un poco, y de pronto buscando algo en YouTube Instant podría ser un montón más fácil de buscar en YouTube regular. Así que eso es AJAX en pocas palabras. 

En los ejemplos que se muestran Joseph, vimos un montón de autocompletes, y los completa automáticamente son muy, muy práctico, ya que no tiene que recordar - Por ejemplo, si usted no recuerda el precio de las acciones de Apple y sólo sé que es algo aa, y no sólo que me decía: "A parte de esto cuesta tanto dinero", Había algo así como saber qué acciones comienzan con aa. Podemos hacerlo realmente bien con la biblioteca de Manos a la Obra que ya está incluido dentro de CS50 Finanzas. Si usted viene aquí con la etiqueta de JavaScript y desplácese hacia abajo para TYPEAHEAD, esto es sólo un complemento agradable que alguien ya escribió para nosotros, y que pueda usar y su funcionalidad como esta. He escrito en una A y aquí está una lista de algunos estados que comienzan con A. Digamos que creo que es muy bueno y es el momento para mí para incluir esto en mi página. Resulta que esto es muy, muy simple. Vamos a saltar por encima de aquí a quote3.js. Mi archivo se ve un poco diferente. Aquí abajo todas mis cosas AJAX es el mismo. Quiero cargar los datos de saldos sin tener que ir a otra página. Pero ahora quiero usar este plugin. La documentación Bootstrap tiene grandes ejemplos de cómo es exactamente lo que puede hacer eso. Quiero decir: "Aquí está la entrada que quiero autocompletar en" y yo voy a llamar a esta función se llama typeahead, y que va a manejar todas las cosas TYPEAHEAD para nosotros. Se abrirá la lista, hará todos nuestros filtrado. Lo único que necesita saber es qué datos estamos en autocompletar. Así que me enteré de esta clave con sólo leer la documentación y mirando a los ejemplos. Si le doy una clave de origen, el valor de esta clave es sólo un conjunto de cosas que quiero Autocompletar. Esta variable vino de este otro archivo. Abro symbols.js. 

Esto es sólo symbols.js esta matriz muy, muy grande que contiene cadenas de todos estos símbolos de cotización del Nasdaq. Si quiero saltar de nuevo al HTML, jharvard así, vhosts, globalhost, html, plantillas, quote_form. Puesto que ahora se llama quote3.js, déjame cambiar el archivo JavaScript estoy incluyendo aquí. Ahora tengo quote3.js, así que me voy a cargar en el archivo JavaScript separado, el que tiene que Bootstrap autocompletado. Ahora, cuando yo salto de vuelta al navegador, vuelva a cargar la página, y me pongo a escribir aa, ahí está mi autocompletado. Y fue realmente tan simple como eso. Yo tenía una línea de código que acabo de decir, "Estas son las cosas que quiero autocompletar en" y de repente tengo esta funcionalidad muy, muy agradable, con no mucho esfuerzo en absoluto. Como estás desarrollando sitios web y especialmente el lado frontal de las cosas, usted va a encontrar este es el caso mucho. Hay mucho, mucho, mucho de bibliotecas gratuitas muy interesantes por ahí que hacen que sea muy fácil de hacer las cosas de esta manera. ¿Alguien puede pensar en ningún inconvenientes de simplemente autocompletar en esta larga lista de símbolos? ¿Qué podría ser algo que no es el mejor con este enfoque? Si. >> [Estudiante] El tiempo, si usted tiene un montón de [inaudible] Si. En este momento estamos descargando el archivo JavaScript enorme y hay un montón de símbolos. Y lo que si tenemos un montón de cosas, este tipo podría de aumentar la latencia de búsqueda no sólo sino también descargar el archivo real. Grande. ¿Algo más? En este momento no hay verdadero sentido de pertinencia. Si escribo en una A, las compañías que aparecen aquí no pueden ser las compañías más populares que comienzan con A. 

Antes de entrar a Apple, que podría tomar algunos personajes más para encontrar lo que estoy buscando. Esta función de autocompletar no tiene este sentido de pertinencia. Es sólo va a decir: "Todo lo que coincide con que voy a mostrar". En lugar de eso, me gustaría integrar de alguna manera alguna relevancia en mis búsquedas. Si me voy de aquí a Yahoo! Finance, finance.yahoo.com, Si trato de introducir un símbolo en la página Yahoo! Finanzas y me pongo a escribir goog, tengo esta bonita lista de las cosas. Claramente, parece Finanzas Yahoo! está haciendo algo más inteligente aquí. Tienen cierta relevancia y también tienen información adicional como el nombre de la acción. Eso es algo que no puedo conseguir con sólo mi lista de valores de los símbolos. Quiero esto y por eso me lo voy a tomar. Para ello vamos a hacer un par de cosas. Primero vamos a abrir el inspector en esta página porque vimos que esta página no se carga en absoluto, por lo que es probable que el uso de AJAX de alguna manera a cargar sus datos. Podemos averiguar qué datos se está cargando. Si hago clic en esta ficha Red, estos van a ser todas las peticiones que empiezan a ser despedido. Ahora bien, si escribo en goo, podemos ver que acabo de recibir una petición HTTP nueva. Esta es, probablemente, donde los datos está viniendo. Efectivamente, si miro a esta URL, que es un poco extraño nombre, podemos ver que esto es exactamente donde Yahoo es el envío de sus datos. 

He creado un archivo separado llamado suggest.php que es muy similar en espíritu a la función de búsqueda. Es, básicamente, va a hacer una consulta a la URL de Yahoo, volver algunos datos, y lo envía de nuevo a mí. Ahora, en lugar de utilizar esta lista grande, enorme de símbolos, Puedo usar cosas buenas de Yahoo relevancia, y no tener que descargar el archivo masivo JavaScript. Sólo voy a derribar los símbolos de cotización realmente relevantes. ¡Entremos en eso. Así html, js. Ahora estamos en quote4. Ahora ya no estamos utilizando esa gran lista de archivos JavaScript. Pero hay un tipo reducido de problema de diseño aquí. Hemos dicho que la A en AJAX es asíncrona. Lo que esto significa es que cuando hago una petición AJAX, tan a la derecha aquí en la línea 8, que es donde mi petición AJAX es en realidad disparó. Digamos que ahora tengo algo de código por aquí que va a hacer algunas cosas desea alertar al usuario o algo cambio en la página. Lo que no va a suceder es que el navegador no va a esperar a que esta solicitud para continuar antes de bajar y golpear a esta línea. Esa es la parte asíncrona. Va a hacer esta petición y decía: "Cada vez que haya terminado, "Volver y llamar a esa función que te dije que te llame el interior del éxito." Eso significa que no sólo puede descargar todos los stocks de antemano. Tenemos que hacer la solicitud y esperar a que algo vuelva. Eso significa que antes, podríamos simplemente decirle Manos a la Obra, "Aquí está la lista de cosas que quiere en función de autocompletar". Ya no podemos hacer eso porque no sabemos lo que queremos en realidad Autocompletar. Por suerte, Bootstrap pensado en esto porque son chicos inteligentes más allá, y que en realidad nos dio otra forma de cargar este plugin TYPEAHEAD. Antes, el valor de esta propiedad de origen era este gran conjunto de cosas que Autocompletar. 

Ahora la propiedad de origen es en realidad una función, y el propósito de esta función es determinar cuáles son las cosas a autocomplete en somos. La forma en que va a darse cuenta de eso es que va a pedir Yahoo! Finanzas cuáles son las mejores cosas que se autocomplete. Para ello voy a hacer una petición AJAX muy similar. Voy a pedir esta página a suggest.php. Quiero enviar a lo largo de los símbolos todavía. Y ahora mi éxito, la documentación Bootstrap me dijo que, para poblar la lista de las cosas, todo lo que tiene que hacer es pasar de esta matriz ahora a la función de devolución de llamada. Pero espere un minuto. Si esto se supone que es una matriz y AJAX me está enviando de nuevo el texto, ¿cómo es eso posible? Esto introduce una nueva forma de intercambio de datos llamados JSON. En este caso no sólo estamos devolviendo una simple cadena de texto. Ahora nos enfrentamos a esta lista más compleja de símbolos de valor. Estos símbolos de acción también puede incluir cosas como el nombre de la empresa o de los precios actuales. Sólo mediante una cadena grande largo que no está formateado de alguna manera predecible no va a ser la mejor manera de obtener esta información desde el servidor de Yahoo para mí de una manera que yo pueda comprender fácilmente. JSON es una tecnología que aprovecha las ventajas de cómo crear matrices asociativas en JavaScript. Esto se parece mucho a una matriz de JavaScript asociativo, y, de hecho, es porque lo es. JSON es sinónimo de JavaScript Object Notation. Esto es básicamente un acuerdo sobre formato para la transferencia de datos en ambos sentidos. Aquí este objeto o JSON JSON esta matriz asociativa me está enviando algunos datos acerca de un curso. 

Las claves de este arreglo son cosas como el curso que tiene un valor de CS50, y aquí podemos ver que puedo tener un valor que es una matriz. Yo no tengo que hacer cosas como parse por cadenas y buscar comas y hacer locuras por el estilo. Debido a ello se ha consignado en este formato JSON, JavaScript y jQuery ya tienen funciones para convertir una cadena que tiene este aspecto JSON en una verdadera matriz de JavaScript asociativo que podemos trabajar. Hacer eso es tan sencillo como decir que ya no es este archivo, suggest.php, enviarme de vuelta simplemente una cadena de texto, pero sé que va a ser me devolviendo JSON. Eso significa que JSON que se puede convertir en una matriz de JavaScript asociativo. Y así, jQuery, me gustaría que hicieras eso por mí. Esto significa que este parámetro de respuesta aquí, esto ya no es sólo una cadena. Porque hemos dicho jQuery que aquí viene un poco de JSON, jQuery va a ser lo suficientemente inteligente como para decir: "Usted quería JSON?" "Voy a convertir esto en una matriz asociativa para ti." Vamos realmente echar un vistazo a la ficha Red una vez que tengamos quote4.js. Vamos a cambiar esto y volver a cargar la página. Ahora voy a escribir a-a de nuevo. He hecho un par de peticiones a suggest.php, pero ahora esta respuesta, y no sólo la cadena, es JSON. Así que tengo una llave abierta rizado diciendo: "Aquí viene una matriz asociativa." 

La clave de la primera y única de esta matriz asociativa se llama símbolos, y entonces aquí es un conjunto de todos los símbolos relevantes viniendo ahora desde Yahoo! Finanzas no, de esa lista gigantesca. Así es como yo, simplemente puede rellenar este plugin autocomplete con algunos datos que no viene de un archivo local que ya está predeterminado sino de algo más. Resulta que en realidad podemos tomar ventaja de una tecnología llamada JSONP, o JSON con relleno, que eliminará este intermediario suggest.php. Pero en lugar de hacer eso, vamos a echar un vistazo en vez de cómo puedo mejorar esto aún más. Me gusta mucho TYPEAHEAD Bootstrap. Es realmente agradable. Pero nos estamos volviendo bueno en JavaScript y queremos hacer esta clase de nosotros mismos, tal vez echar un vistazo a lo que este plugin podría estar haciendo. Vamos a no usar esa cosa TYPEAHEAD, y vamos a tratar de hacer esta lista de acciones sugeridas nosotros mismos. Aquí en quote6.php vamos a empezar la misma manera. Cada vez que alguien escribe algo, queremos hacer una petición AJAX. Esto es similar a nuestro instante original Finanzas CS50. En lugar de hacer una petición a quote.php, ahora estamos haciendo una petición a ese archivo como antes, esta suggest.php, que sólo va a extraer datos de Yahoo! Finanzas. 

Una vez más, todavía estamos esperando JSON, pero ahora desde el TYPEAHEAD no está haciendo esto por nosotros, también tenemos que enviar por el valor que se encuentra dentro del cuadro de texto actual. Ahora sabemos qué pedir Finanzas Yahoo! para, y lo que ahora aquí es la función que queremos ejecutar una vez la solicitud finaliza. No tienes el plugin para hacer la lista para nosotros, así que aquí es donde estamos en realidad va a construir una lista de sugerencias. Para ello, al igual que en PHP se concatenan estas cadenas grandes de HTML entonces su impresión, no podemos hacer exactamente lo mismo en JavaScript. En primer lugar vamos a comenzar esta cadena denominada sugerencias, y esta cadena es sólo va a contener algo de HTML. Queremos que sea una lista de las cosas, así que vamos a empezar con esta lista de etiquetas, y ahora vamos a iterar sobre todos los símbolos que se devolvieron de nuevo a nosotros. Recuerde, ya lo hemos dicho tipo de datos: 'json', esto no es una cadena. Esto ya es una matriz para nosotros. Eso es realmente genial. Podemos simplemente decir: "Quiero que añadir un elemento de lista". Lo pondremos dentro de un elemento en un lado de eso, vamos a dar una clase de sugerencias para que sepamos lo que es, y ahora aquí es el símbolo que volvimos de Yahoo! Finanzas. 

Una vez que hemos creado un elemento para cada uno de los símbolos que hemos llegado de nuevo, sólo queremos cerrar la lista. Así que ahora sugerencias representa este fragmento poco de HTML que cuando se ponen en una página que va a ser la lista de las cosas que estamos buscando. Ahora vamos a poner eso en realidad en la página. Para hacerlo realidad, he creado otro div vacío y me he dado un ID de sugerencias. Al igual que establecer el contenido del div que mostrar el precio de los datos de saldos, ahora sólo quiero establecer el contenido de este div a lo que esta cadena es que contiene estos símbolos. Mediante el uso de este método HTML, esta variable sugerencias, esta cadena, es una cadena de HTML. Quiero que tomar ese HTML y lo puso dentro del div llamado sugerencias. Hemos añadido algo a la DOM ahora. Hemos añadido algunos nuevos elementos al DOM que ahora podemos mostrar en la página. Vamos a ver cómo se ve. Si cargamos en quote6 y ahora volvemos, ahora cuando empiezo a escribir AAPL, ya no tenemos que Bootstrap autocomplete, pero ahora tenemos esta lista que nos hizo. Esto es un poco más feo que el TYPEAHEAD Bootstrap, por ejemplo, pero nos permite hacer otra cosa. Cuando estábamos buscando a ese plugin Manos a la Obra, vimos que cuando autocompletar, uno de los valores de autocompletado era AAPL. Eso podría no ser tan útil. Como usuario, no puede reconocer inmediatamente todos los símbolos de valor. Lo que yo soy probablemente más propensos a reconocer son los nombres reales de la empresa. Entonces, ¿no sería realmente útil si en vez de decir AAPL este dijo algo como Apple Inc. Debido a que hemos rodado este nosotros mismos, podemos muy fácilmente hacer eso. Vamos a abrir nuestro fichero última cita aquí, así que quote7. 

Es lo mismo. Acabo de crear otro archivo PHP que devuelva a nosotros más que los símbolos. También nos devolverá los nombres de la empresa. Y lo que estamos haciendo lo mismo. Estamos haciendo una petición AJAX. Una vez que la solicitud ha terminado, vamos a ejecutar esta función aquí, y esta función se va a construir una cadena grande de elementos. Pero la diferencia aquí es que el valor de estas listas ya no es sólo el símbolo, es ahora el nombre. Así que tenemos un pequeño problema. Cuando usamos nuestra búsqueda, tenemos que pasar de alguna manera el símbolo. No podemos dejar pasar algo de búsqueda como Microsoft Corporation. Hay que pasarlo MSFT. Cuando estamos escribiendo HTML, tenemos un montón de buenos atributos incorporados. Una A podría haber asociado un href o una clase. Pero lo que realmente necesitamos ahora es que cada uno de estos enlaces tener un símbolo de acción asociado a él. No hay ningún atributo incorporado de HTML para símbolo de cotización, pero por suerte, HTML5 nos permite crear nuestros propios atributos para ser lo que queramos. Al decir de datos-symbol, he introducido un nuevo atributo cuyo nombre acabo de hacer, y esto está bien porque me prologó con estos datos. Vamos a guardar dentro de ahí el símbolo del stock. Lo que esto significa es que a pesar de que está mostrando el valor del nombre de la empresa dentro de nuestro autocomplete, todavía estamos recordando el símbolo que está asociado con cada compañía. La forma en que está haciendo que se encuentra dentro de este elemento en sí. Así que eso significa que tenemos que hacer un cambio más. Cuando haga clic en él ahora, tenemos que tomar realmente ventaja del atributo de símbolo en lugar de sólo su valor. Si retrocedemos, se adjunta un controlador de eventos a sugerencias. Cada vez que una de estas sugerencias se hace clic ahora, quiero hacer algo. Lo que quiero hacer es cambiar el valor de la caja de entrada. Ahora quiero configurar esta función val mismo. 

Así que sin ningún argumento de esta función Val devuelve a usted lo que ya está en el cuadro de texto, pero si le das una cadena, que va a tomar esa cadena y lo puso en el cuadro de texto. Estoy seleccionando la casilla de texto de la misma manera. Su nombre es símbolo de la forma dentro de comillas. Ahora lo estoy enviando el valor del atributo data-símbolo. Esta cosa aquí es nuevo, estos $ (this). Lo que esto se refiere es el elemento que se ha hecho clic. Podemos ver aquí que no estamos adjuntando un evento de clic a cada elemento con una clase de sugerencia individualmente. Más bien, nos estamos acercando a esto un poco diferente. En cambio, nos está diciendo siempre que dentro de nada de este div sugerencias, recuerde que es sólo el recipiente de esa lista, si algo dentro de este div se hace clic y se tiene una clase de sugerencia, Quiero que este evento para disparar. Básicamente lo que esto quiere decir que podemos hacer es que podemos volver a utilizar este mismo controlador de eventos para todas las cosas de la lista. Así que no tiene que tener un controlador de eventos para el primer elemento y un controlador de eventos diferente para el segundo elemento. En su lugar, puede decir: "Quiero que el mismo controlador de eventos para aplicar a todo en mi lista". Pero tenemos que saber de alguna manera que el elemento se ha hecho clic. Esta palabra "this" representa sólo eso. Este es el objeto que se ha hecho clic sólo por el usuario. Si tan sólo hacer clic en el enlace de tercero, lo que representa un elemento de este enlace de tercero, lo que significa que puedo conseguir su atributo, los datos-símbolo, que sabemos que tiene que contener el símbolo que está asociada con la compañía que acaba de hacer clic. Si saltamos a nuestra página de finanzas, podemos ver ahora que una vez que comience a escribir algo como msft, ya no estamos recibiendo sólo los símbolos de cotización, ahora estamos recibiendo las empresas reales. Pero cuando hago clic en una de estas empresas, podemos ver que en realidad estamos poblando no el cuadro de texto con el nombre de la empresa pero con todo lo que se almacena dentro de los atributos de datos. Y así, si realmente inspeccionar uno de estos elementos, haga clic en él y haciendo clic en Inspeccionar elemento, podemos ver el aspecto que tiene. 

Recuerde que esto es algo que hemos creado dentro de ese bucle for cuando estábamos construyendo esa cadena de HTML. Podemos ver aquí que estos datos-símbolo tiene el valor de MSFT, lo cual es genial. Eso es lo que estábamos esperando. Ese es el símbolo y así es como tenemos el valor que necesitamos para usar dentro de este cuadro de texto. Eso es suficiente para que el formulario de cotización debido a que es un poco aburrido. Vamos a hacer algunas mejoras rápidas a nuestra página de cartera. Si ha utilizado CS50 Finanzas por un tiempo y empezar a comprar y vender una gran cantidad de acciones, finalmente esta tabla va a ser bastante grande, y usted va a querer un tablero de cotizaciones, por supuesto. Una vez que la mesa es muy, muy grande, podría ser útil para que el usuario trate de buscar en ella. Dentro del cuadro de búsqueda si me pongo a escribir algo como Disney y en busca de mi stock de Mickey Mouse, podemos ver que la tabla está filtrando sobre la base de lo que he escrito pulg Esta funcionalidad se ve super complicado, pero es muy, muy fácil con jQuery y JavaScript. Este archivo portfolio.php incluye un archivo JavaScript denominado portfolio.js. Vamos a echar un vistazo a eso. Así html, js, cartera. Aquí es donde estamos haciendo que la búsqueda en la mesa. Lo primero que tienes que hacer es conectar un controlador de eventos para ese cuadro de texto porque sabemos que queremos que nuestra función de filtrado para disparar cada vez que el usuario pulsa algo porque no tienen tiempo para los botones de búsqueda. Lo primero que tenemos que hacer es averiguar lo que el usuario está buscando, tal como lo hicimos antes. Esta palabra clave se refiere al elemento actual del usuario está interactuando. 

Debido a que el usuario está interactuando con el cuadro de búsqueda, $ This representa el cuadro de búsqueda, así this.val nos da lo que hay dentro de la caja de búsqueda que el usuario está escribiendo. Así pues, ahora lo que quiero hacer es que queremos iterar sobre todas las filas dentro de nuestra mesa. Para seleccionar todas las filas de nuestra mesa, me dio esa mesa una identificación de la cartera de mesa, y cada fila está representada por un elemento de TR, por lo que este selector se va a volver a mí una gran variedad de todas las filas de mi mesa. Ahora quiero iterar sobre esa matriz. Podría un bucle for, pero jQuery realmente nos proporciona la función bonita llamada "cada uno". ¿Qué hace cada uno es cada uno toma un argumento, y ese argumento es una función. ¿Qué va a hacer es que va a aplicar esa función a cada elemento dentro de esta lista. Esta función recibe un argumento que es e, y cuando se ejecuta esta función, este correo va a ser reemplazado por la primera fila, luego la segunda fila, y después de la tercera fila. De esta manera, esto es lo mismo que ejecutar un bucle for y luego calcular el elemento actual, basado en el índice dentro de su bucle for. En cada iteración, para cada uno de estos elementos en la tabla, Quiero comprobar si el texto del elemento - el texto de la celda dentro de la fila - coincide con lo que estoy buscando. Esta gran cadena larga de los comandos es como yo podría hacer eso. En primer lugar, una vez más, esto se refiere ahora a - porque está dentro de una nueva función - esto es ahora la fila actual en la tabla. Quiero aprovechar la fila actual en la tabla, y quiero llegar a todos sus hijos. Recuerde, el DOM es un árbol jerárquico, lo que significa que los elementos tienen un número de hijos. 

Esta función. Hijos va a volver a mí de nuevo un conjunto de todos los elementos que son los hijos de, en este caso, una fila de la tabla. Esto es sólo simplemente las células dentro de la fila. Sólo quiero buscar en la primera celda. Esta función. Primero dice dame el primer elemento de la matriz. Entonces la función texto dice me exactamente lo que hay dentro de esa célula ya que quiero buscar en ese texto. Por último, vamos a convertirlo en minúsculas, para que podamos hacer las consultas de texto entre mayúsculas y minúsculas. Por último, queremos ver si esa cadena dentro de una tabla contiene la cadena que estamos buscando. La función indexOf en JavaScript hace precisamente eso. Nos dice si esta cadena contiene otra cadena. Si bien es cierto que la celda contiene lo que estoy buscando, entonces quiero para asegurarse de que está demostrado. El método show dirá: "El elemento". Si este no es el caso, entonces eso significa que lo que estoy buscando no está contenido dentro de esa fila, así que quiere ocultar es del usuario. Eso logra que bonito efecto de filtrado donde ya no vemos a toda la tabla. Si usted está interesado en cómo hacer que este ticker también, vamos a poner la fuente en línea. Pero es muy simple. JQuery tiene métodos impresionantes para las animaciones y manipulación de las propiedades CSS. Por lo tanto, eso es todo para mí. 

Entonces, ¿qué nos espera? Como veremos en unos días, la propuesta final de un proyecto se debe. La propuesta final de un proyecto le preguntará una serie de preguntas, pero entre ellos habrá tres hitos - una "buena" hito, un hito mejor, y una mejor a. La idea es realmente para ayudar a ustedes poner tus expectativas para que mínimamente usted será feliz con la salida de su proyecto final y que será "bueno" en la medida que usted se refiere. Pero entonces, en el interés de conseguir que usted alcance un poco a algo mejor o algo mejor, también vamos a ordenar de empujarle hacia eso también. El CS50 Hack-a-thon, por su parte, se encuentra en unas pocas semanas. Por lo general, lo hacemos sobre una base por sorteo por el interés, pero las probabilidades son que vamos a tomar unos pocos cientos de nosotros en los autobuses de enlace desde Harvard Square hasta Kendall Square, donde Microsoft tiene un precioso establecimiento llamado acertadamente "NERD" - la Nueva Inglaterra Centro de Investigación y Desarrollo. Vamos a llegar a las 8 pm Vamos a tener un poco de comida. Alrededor de 1 a.m. tendremos comida un poco más. Alrededor de las 5 am si usted todavía está despierto nos dirigiremos a IHOP o que le lleve de vuelta a la escuela. El objetivo que hay que sumergirse en los proyectos finales al lado de sus compañeros y el personal. Unos días más tarde es la Feria CS50, que es en realidad la intención de ser una oportunidad para ustedes para mostrar su trabajo y los logros del semestre mientras que codearse con los demás y tener una idea de lo que cada uno hizo. Con esto dicho, muchas gracias a Tommy ya José, y nos vemos el lunes.  [Aplauso]