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

Este é CS50. Este é o fin da semana 9. Moitas grazas. Finalmente. Semana 9. Eu teño. Hoxe imos continuar a nosa conversa sobre programación web con un ollo para o proxecto final non, porque ten que facer algo baseado na web para proxectos finais, senón porque tanto para proxectos finais ou despois CS50 Esta é certamente a dirección en que o software moderno está indo. E aínda non é realmente unha cousa fácil. En realidade, unha das cousas máis difíciles de facer é o aspecto do deseño. 

Por exemplo, o proxecto, queremos dicir realmente empezando a interface de usuario ou a experiencia do usuario correcto. Eu ouso dicir - e sabemos que a partir dun conxunto de problemas recentes cando algúns de vostedes foi ao ar súas queixas sobre algún anaco de software ou hardware que enfurece ti, sexa no campus ou fóra - Hai unha morea de sitios por aí, hai unha morea de hardware aí fóra, que tipo de drogas. Pero a realidade é que facer cousas que son fáciles de usar, pero non deixan de ser poderoso É un reto moi difícil. Entón, para hoxe eu pedín José e Tommy a unirse a min aquí para que poidamos ter unha conversa, tanto sobre o proxecto e que tipo de procesos de pensamento que comezar a pasar pola súa cabeza Cando se crea os seus proxectos finais, os seus futuros proxectos. E entón, coa axuda de Tommy veremos algúns dos detalles de implementación. Como pode ter unha visión en papel ou na súa mente que pode executar programaticamente usando algunhas das tecnoloxías e técnicas que acaba de comezar a falar, ou sexa, JavaScript e algo aínda máis recente, ou sexa, AJAX, asynchronous JavaScript. Isto permite que cree os dinámica máis dunha interface de usuario obtendo máis e máis datos, progresivamente a partir dun servidor. Entón, imos ver algúns deses fragmentos ben hoxe. Como un aparte, se vostede está interesado en se concentrar en ciencia da computación ou minoring en ciencia da computación, sabe que este venres ao mediodía Maxwell en Dworkin 221 haberá un evento de pizza onde podes aprender un pouco máis sobre a ciencia da computación. No seu camiño cara a fóra do porto, hoxe vai ser capaz de incorporarse unha guía non-oficial de CS en Harvard. Imos poñelo en latas de lixo fóra á altura da cintura de xeito que, se quere incorporarse iso e aprender un pouco máis sobre CS, que vai estar alí para ti como foi a semana 0. Ademais, se quere unirse a nós para CS50 xantar onte ás 1:15 pm, cabeza para cs50.net/lunch. Sen máis delongas, eu darlle ensino compañeiro José ONG. Oi [Aplausos] Grazas. A primeira vez que eu aprendín sobre o proxecto estaba nunha clase aquí chamado CS179. 

O profesor da vez nos contou a historia sobre outro profesor que fora para un hotel e usou as billas. Alguén me pode dicir o que os dous botóns do lado esquerdo e dereito facer? [Alumno] quente e fría. >> Quente e fría. Bo O que normalmente espera, non? Este profesor despois de usar a billa quere tomar un baño, e pasa a usar isto. El cre que a esquerda e os lados dereito son para quente e frío, non? Pero alguén me pode dicir o que estes realmente facer? Calquera mans? [Resposta do alumno inaudível] >> Unha suxestión é? [Resposta do alumno inaudível] Temperatura? >> Entón un deles controla a temperatura e os outros controis? >> [Alumno] presión da auga. Presión da auga. Bo Este profesor camiña para iso e, pensando que eles están controlando quente e fría, transforma a un dereito que el pensa que é para quente, todo o camiño ata porque el quere tomar un baño quente. Ben, estes realmente non combinan, así que comeza esta experiencia non moi divertido de estar en un baño de auga fría, e todos sabemos o que sente. Este é un exemplo dun fallo de deseño. O que quero dicir con isto é a súa expectativa da billa non atopa o que saíu do baño, que é unha especie de infelices para el. Polo tanto, este é un exemplo de un fallo de deseño que ocorre na vida real. Pero vemos todo tipo de outras tamén. Non somos probablemente os fans do sistema MBTA. Este é un sistema de metro, en realidade, en Londres, que di: "Este botón non está en uso." Por que é mesmo alí? Por que lle importa? Cando eu era neno, sendo a tecnoloxía ilustrado na casa, sempre que o ordenador podería fallar, miña nai veu a min, mostrando-me esta pantalla e me pregunta o que pasou. 

Aínda que eu non sei o que iso significa. [Risas] O que? [Risas] Ás veces nos sentimos como os desenvolvedores de software son só corrico nós. Como usuarios, somos como, "O que está a suceder? Alguén nos dicir." Isto todo se reduce a unha cuestión de deseño. Deseño, como podemos ver, non é puramente sobre a estética, non é sobre como as cousas son. Vemos aquí que este pequeno emerxente por aquí, en realidade, parece moi bo. El ten unha sombra no fondo, ten raios de fronteira en curso. É unha especie de bonito. Non está moi ben deseñado, porque non é moi agradable. Que pouco emerxente que xorde realmente non me dar calquera información sobre o que está a suceder, iso non me di nada de como o usuario sobre como recuperar dese erro. Queremos pensar sobre as cousas que o deseño non é. En primeiro lugar, non é estética. Tampouco é encher o seu programa con toneladas de características innecesarias. Se vostede é un restaurante tailandés, probablemente non quere ser dentista, ao mesmo tempo. E con preguntas do Facebook non, que moitas persoas usaron e non era realmente o cerne do que eles estaban construíndo. E por iso é bo pensar non sobre tanto a cantidade das cousas que está poñendo a súa aplicación, pero a calidade e como está facendo que a experiencia do usuario mellor por realmente mellorar enriba do que xa ten. 

En poucas palabras, o proxecto di-nos o que debemos construír. Por exemplo, se nós estamos construíndo algo que imos buscar as cousas, como Google, por exemplo, que temos que facer as cousas dun xeito que require que o usuario tomar moitos click para chegar ao que eles queren, ou debemos facelo de forma, por exemplo, en Google Instant ou autocomplete que nos permite chegar aos nosos resultados máis rápidos? Enxeñaría implica, como Tommy ha amosar-lle, en realidade construíndo. Hai moitos tipos de deseño. Por exemplo, se está construíndo algo para implantar algo nun país do Terceiro Mundo, onde non hai moita electricidade ou que a tecnoloxía moito, ten que proxectar o que está construíndo dun xeito que permite o acceso doado para as persoas. Pero que tipo de outras decisións de proxecto podería haber ou pode ser envolto en algo así? Si Eu vexo unha man. [Resposta do alumno inaudível] Dereito. >> Exactamente. Accesibilidade é unha cousa. Moita xente non pensa: "O que os meus usuarios?" como os extremos dun ou outro espectro. Teño usuarios que poden ter deficiencia de que eu non estou a pensar sobre e eu só estou pensando en proxecto para o usuario en xeral. Internet é accesible por todos hoxe en día, e eu debería estar designado para esas persoas tamén. Que tipo de outras decisións de proxecto que podería facer? Si >> [Alumno] custe. Custo. Moi bo. Outra cousa que pode basearse nosas decisións de deseño son en custo. Se somos unha empresa, quere construír algo que non ten custo moito máis para producir pero pode vender a un custo particularmente elevado ou pode levar moito beneficio. 

Estes son todos os distintos tipos de deseño, pero cando estamos construíndo algo en internet ou cando estamos construíndo algo que probablemente non custa moito para construír-se, agora, como aplicacións de Internet - non tes que xogar moito capital para el a fin de facer algo que realmente funciona - o que está máis preocupado é a experiencia do usuario. Chamamos este proxecto centrado no usuario. Esencialmente, o que implica proxecto centrado no usuario é poñer-se no lugar dos seus usuarios. Se alguén se rexistrar para o que eu estou construíndo, eles, obviamente, vir a miña aplicación en particular con un obxectivo en mente, con unha tarefa que pretende completar. E o seu traballo non é só para axudalos a completar a tarefa pero para axudalos a completar a tarefa de forma que sexa eficiente, intuitivo, e, como unha persoa dixo alí, accesible. O que significa eficiencia? Eficiencia significa a rapidez que o meu usuario completar a tarefa dada a miña interface. Leva moitos click para eles para ir dun lugar a outro? É tedioso? Será que eles teñen que facer moitas tarefas repetitivas? Queremos facer o proceso o máis eficiente posible para que non ten que facer eses tipos de cousas. En canto a intuición, é dicir, por exemplo, se un usuario mira para o meu interfaz, é máis doado para eles para ir dun lugar a outro? É doado para eles para descubrir o que eles ten que premer no meu interface a fin de que para acadar a meta ou tarefa que eles queren alcanzar? 

E, finalmente, como unha persoa dixo alí, a accesibilidade é moi importante. [Orador masculino] El vén coa accesibilidade para cousas como visión, gusto de como realmente proxecto algo para alguén que é cego? Oh Para as persoas que non poden ver en todo, temos algo chamado lectores de pantalla. O que ten que facer é que ten que construír o seu sitio web de forma que, por exemplo, tecnoloxías específicas que chamamos - Hai moitas cousas agora. Eu creo que hai lectores de pantalla Jaws chamados. Moitas destas cousas confiar no que chamamos regras área , Co fin de ler para o usuario que está presente na páxina. Para aquelas persoas que non poden ver, ten que estar seguro de que estes lectores de pantalla Pode realmente incorporarse o contido da páxina, e pode realmente mostrar aos seus usuarios, Se non pode ver, polo menos aínda pode entender o contido da páxina. Si Okay. Chega a falar dun bo deseño. Imos falar sobre o deseño malo. Estas son cousas que non debe facer. Alguén me pode dicir sobre as súas experiencias con Craigslist eo que eles pensan que non é tan grande sobre este proxecto? Si >> [Alumno] Eu creo que hai moitas palabras nunha zona. Moitas palabras, non? Completamente esmagadora. Vostede chegou a esta páxina e se depara con unha morea de cousas aquí que pode ata non importa para ti. Por exemplo, vostede vive nun estado que non comece con esta letra. Imos dicir que vive en Texas ou algo así. 

Ten que percorrer todo o camiño ata a páxina para chegar ao lugar que está. Eu son de Boston, entón deixe-me ollar en Massachusetts. Onde está Massachusetts? Ah, aquí mesmo. Ah, e Boston. Okay. Imos ollar para Boston. [Risas] Moi impresionante, non? Cousas embaraçosas alí. [Risas] Imos dicir que eu estou buscando un lugar para vivir. Cantas persoas realmente usa Craigslist? Toneladas de ti. Hai formas moi malo de ollar para iso, pero imos ollar para iso. Cal é a diferenza entre img e pic? Alguén me pode dicir? Hai, de feito, non hai diferenza. Eles queren dicir exactamente a mesma cousa, pero eles teñen etiquetas diferentes para eles por algún motivo. Se eu premer en ten imaxe, non pasa nada na páxina. En realidade, eu teño que faga clic en Buscar de novo para que algo aconteza. O que podería ser unha mellor decisión de proxecto que podería ser feito alí? Se eu estou facendo clic sobre ese filtro, eu probablemente quere filtrar esa acción en particular ou categoría que particular. Entón, en vez de ter que premer Busca novo, eu podería só automaticamente facer a filtrado tipo de estilo de Google, onde facelo inmediatamente. [Malan] Pero non se forma, como vimos ata agora, ten que ser fisicamente presentado por bater Introduza polo menos, ou premendo nun botón? Como viu ata agora, realmente ten que premer en Enviar a facer isto. 

Pero, como Tommy vai amosar nun segundo, en realidade existen formas de ti de tal forma que cando fai clic en que a cousa pode enviar automaticamente o que chamamos unha solicitude de AJAX e obter datos de volta e filtrar os resultados instantaneamente. Hai toneladas de cousas que están erradas con esta interface. [Malan] Pode procurar Cambridge? Hai algo lixeiramente anómala aquí onde se preocupa Cambridge e aínda está recibindo Westford, Spring Hill, West Newton e outros. Probablemente non é o ideal. >> Probablemente non ideal. Como eu podería ser capaz de facer a experiencia do usuario mellor sobre esta páxina particular? Si >> [Alumno] Instrucións. Okay. Instrucións en que tipo de sentimento? [Estudante] Por exemplo, unha cousa para usuarios principiantes, que nin sequera saben o que é Craigslist ou non sabe o que é suposta facer. Dereito. Entón, explicando o Craigslist está nesta páxina é importante. Podemos realmente dicir aos usuarios que esta páxina é realmente a. Se eu estou só a visitar este, eu vexo unha morea de lugares. Eu non sei mesmo o que significan. Pero o máis importante, só de ollar para esa interface, lembro que eu tiña que rolar unha tonelada de cousas para atopar unha determinada comunidade que realmente se preocupaba con este. ¿Que é unha maneira máis rápida que eu podería facelo? Si [Alumno] dividídelos en rexións leste, oeste. Ok >>. Eu podería dividídelos en categorías máis que podería me axudar a determinar canto como chegar a ese lugar específico. [Alumno] Pon unha lista desplegable. >> Dereito. Okay. Eu podería usar un menú desplegable, porque temos un conxunto fixo de cousas e podemos amosalos nun menú desplegable. Desta forma, non ocupa moito espazo na pantalla. Pero aínda mellor do que iso, o que podemos facer? Si >> [Resposta do alumno inaudível] >> Pode dicir iso de novo? >> [Alumno] caixa de busca. Si, unha caixa de busca. Isto é óptimo. O que podemos realmente facer é miramos cara atrás na caixa de busca diapositivas,. Autocomplete. Xeito moi doado de buscar os resultados que vostede sabe que está nun conxunto. Se eu comezar a escribir BO, só me amosar todos os resultados que ten dentro BO deles. Desta forma, podo facilmente atopar o camiño particular, quero ir a en vez de ter que percorrer esta lista moi grande. 

Estes son todos os tipos de realidade froito maduro que alguén que está a aplicar Craigslist Pode realmente facer para facer a experiencia na páxina web moito mellor para o seu usuario en particular. Okay. Chega de conversa sobre sitios malas. Imos falar sobre Facebook. Cando o Facebook foi lanzado, e fotos especialmente de Facebook, había moitos outros servizos no momento en que podería facer exactamente as mesmas cousas. Poden organizar as súas fotos en álbums. O que podes facer é que pode organiza-los en grupos tamén. Pode organiza-los por data. Podes facer todas estas cousas particulares. Pero alguén sabe o que fixo fotos de Facebook explotar no momento en que foi lanzado? Si >> [Estudantes] etiquetas. Etiquetas. >> Exactamente. Temos Milo aquí, que é o noso mascota can con bandana que CS50. Podes ver que temos este recurso de reserva no medio. E o que fixo as fotos do Facebook tan interesante desde o punto de vista de usabilidade é que realmente permitiu que as persoas con este para involucrar os seus amigos nas súas fotos. Para Facebook, xa que o seu sitio é particularmente social, é sobre como crear este tipo de atmosfera social. Isto mellorou a experiencia de fotos moito máis porque eles poderían realmente comezar a dicir: "Estas son as conexións entre as persoas, e estas son fotos sobre persoas que realmente lle gusta. " Parte do problema é tamén o narcisismo tipo. A xente quere ser marcado en fotos e cousas así. Mentres tanto non é necesariamente unha boa característica humana, ao mesmo tempo, el está baseado en decisións de bo deseño porque a xente realmente se preocupan con cousas como esta. Entón esta é as fotos de Facebook. 

Pero imos falar de Facebook en xeral. Estou seguro de que moitas persoas aquí teñen opinións sobre o Facebook, ambos boas decisións de deseño e decisións de deseño malo. Entón imos desabafar ou ser feliz. Imos. Sei todo de usar Facebook. Alguén ten que ter algo de malo que dicir ou algo de bo que dicir sobre iso. Si [Alumno] no comentario de noticias, hai unha morea de cousas que eu realmente non me importa. O comentario de noticias non amosar unha morea de cousas que pode non preocupar. Ten amigos en Facebook que non se atoparon por 2 ou 3 anos e ve os seus resultados de noticias aparecendo no seu comentario de noticias e realmente non me importa con iso. Facebook ten realmente feito un esforzo para facelo mellor, e realmente intentaron empurrar resultados relevantes para o cumio do comentario de noticias como de tarde para que realmente ve as cousas por amigos que son relevantes para vostede ou os seus amigos máis próximos. Algo máis? Si [Resposta do alumno inaudível] >> Pode dicir iso de novo? [Alumno] Os anuncios son relativamente discreto. >> En que sentido? [Resposta do alumno inaudível] Eles non teñen luz na pantalla, como banners. Okay. Isto é bo. Se se lembrar de Internet a partir dos anos 90 - >> [Malan] eu estaba alí. >> El estaba alí. [Risas] Pode lembrar de fondos piscando GIFs, brillantes cousas, Geocities tipo estilo de cousas. Isto non é realmente un exemplo dun bo proxecto porque é realmente unha distracción do contido. O sitio de arte Yale adoitaba ter GIFs animados como o seu fondo e non podería ler calquera cousa na páxina, pero eu creo que alguén realmente falar con eles e agora é un pouco diferente. [Malan] É moito mellor agora. >> É moito mellor agora, como se pode ver. >> [Malan] Oh yeah. Só grande, só - É. Okay. 

Parte dela tamén está facendo a súa páxina posiblemente moi minimalista e moi comprensible así cousas sobre o fluxo de páxina de unha maneira que é moi lóxico e non quedan no camiño do outro. Que tipo de outras cousas son boas ou malas sobre o Facebook sobre o Facebook? Imos ter unha conversa proxecto aquí. Oh Onde? Si [Alumno] O sistema novo programa permite buscar o perfil da persoa sobre o seu pasado. Ooh, Timeline. Liña do Tempo é unha gran cousa, porque permite que perseguir os seus amigos cando eles estaban na escola. Timeline é bo porque permite que filtre a través de contidos moito máis rápido, el permite que atopar cousas que doutra forma tería levado moito tempo para atopar só a rolagem para arriba e para abaixo, para arriba, arriba, arriba, arriba, arriba, como volver no tempo. Pero despois hai tamén unha especie de desvantaxe para que en termos de experiencia do usuario. O que pode ser iso? Gran palabra que comeza con P-R. >> [Alumno] de privacidade. Privacidade >>, non? Privacidade é un asunto de enorme experiencia do usuario. Esta é unha das cousas que eu máis odio sobre o Facebook agora. [Risas] [Malan] Como eu agora. David non sabía que iso realmente aconteceu ata onte. Entón agora sabe que cada vez que eu falar el sei que está me ignorando. [Malan] A parte estraña é que eu estaba realmente ignore-lo, e eu non sabía que el sabía que eu estaba ignorando-o. [Risas] A privacidade é un enorme problema. Alguén aquí me pode dicir o que pode ser malo sobre o Facebook privacidade Ademais do feito de que eles fan cousas como esta? O que é particularmente difícil de facer en relación ao Facebook privacidade? Este tipo de é unha cuestión de liderado. Si >> [Alumno] Ocultar as súas fotos de certas persoas. Dereito. Exactamente, para ocultar as súas fotos de certas persoas. Teñen este botón pequeno, pouco na esquina superior dereita que permite cambiar a privacidade dunha foto. As súas opcións de privacidade son moi variados entre distintos tipos de menús. 

Eles quedaron moito mellor sobre iso recentemente, pero que adoitaba ser o caso que sempre que quería evitar que os seus amigos a partir de fotografías de ver, que tería que pasar por un proceso moi complicado de 5-paso de ser como, deixe-me faga clic nesta ligazón agora déixeme prema de novo, deixe-me prema de novo, Deixe-me indicar que as persoas non poden ver as miñas fotos. Isto non é particularmente boa por parte do Facebook porque tanto sobre a experiencia do usuario é realmente dar-lles a liberdade para controlar o que a xente pode ver. Chamamos iso de Control de Usuario e liberdade. Se vostede non está permitindo que os seus usuarios fan isto de forma que sexa eficaz e intuitiva, entón a súa experiencia de usuario que non é realmente grande en todo.  Será que vostedes quere dicir calquera cousa sobre o Facebook? ¿Como desactivar isto? [Ong] Non pode desactivar isto, e iso é un fallo enorme usabilidade por parte de Facebook. Este recurso - En realidade, eu olhei para el onte - é tanto que non pode facer iso ou está enterrado nalgún lugar moi, moi profundo nos recessos do Facebook, porque eu non podo descubrir como desactivar esta funcionalidade en todo. [Malan] Pero ás veces esas decisións non son obvias porque vostedes deron-nos unha gran cantidade de información útil sobre varias aplicacións CS50 e sitios que o curso utiliza. Non aplicou todos eses peticións e suxestións. 

Parte do que é para recibir peticións de moitos que é unha función do tempo, pero ás veces nós só tomar unha decisión consciente, como, "Grazas pola suxestión, pero discordamos." Así como realmente decidir o que ten que facer os seus usuarios creo que debería facer algo mesmo se non necesariamente? É un bo equilibrio entre verdade escoitando o que os usuarios din e realmente ter algún tipo de liña que di, "Nós non imos facer o que eses usuarios din." E, en particular, creo que houbo unha cita de Henry Ford que resume isto moi ben. "Se eu tivese preguntado á xente o que eles querían, eles terían dito que querían cabalos máis rápidos." Alguén pode clasificar de destrinçar o que esa frase realmente significa? Non é só o que os usuarios saben o que queren, pero é máis que - [Alumno] Eles non saben o que é posible. En parte, eles non saben o que é posible. Tease que, ademais de un pouco máis. O que quere dicir con iso? [Resposta do alumno inaudível] Isto é bo. O que eu creo que nós estamos tentando dicir aquí é que as persoas saben o que queren. Eles queren que os cabalos máis rápidos. O que realmente queren é a capacidade de se mover máis rápido, pero eles non saben realmente o medio polo cal a conseguir isto. Cando vén para os seus usuarios e os seus usuarios lle dicir unha cousa e din: "Queremos eses recursos e eses recursos e eses recursos", non quere necesariamente pensar, "Deixe-me ir adiante "E aplicar o que di explicitamente" pero o que quere pensar é: "Que tipo de ideas podo conseguir con iso?" O que realmente queren? 

E a partir de aí o que podes facer é crear algo que satisfaga as solicitudes pero non necesariamente de xeito que o usuario espera que sexa satisfeita. Así, para algo así como proxectos finais, en termos reais, o que é unha heurística útil cando se trata de facer algo mellor, especialmente se o deseñador ten esa arrogancia sobre el polo cal especie de saber o que é mellor, pode aproveitar a entrada dos seus usuarios, pero como realmente ir sobre a obtención de que o producto? En proxectos finais, moi concretamente, o que produce mellores resultados aquí? O que produce os mellores resultados - e vou pasar por riba isto nun segundo - É este proceso de desenvolvemento e, a continuación, probar e, a continuación, a iteração. O que quero dicir coa proba é xeralmente cando proxectar algo Pensas que é moi bo, como, "Eu son como un deseñador excelente. Todo o mundo vai adorar iso." E despois de poñer-lo alí fóra, e as persoas realmente non me gusta diso por algún motivo. O que ten que facer é que ten que tomar as partes de cousas que as persoas fan como e renovar as cousas que a xente non quere. Soa como un proceso moi evidente, pero este proceso de constante interactuar encima do que xa construíu é un proceso que axuda a non só refinar súas habilidades de deseño propio, senón que tamén axuda a refinar o proxecto para que a xente realmente Apreciamos o seu produto aínda máis que antes. 

Vou pasar por riba de máis exemplos concretos do que realmente pode facer. Como unha especie de último exemplo dun produto, imos ollar para Educativas. Educativas cando saíu era moi, moi popular. Alguén pode adiviñar por que? Cales son os tipos de cousas que lle gusta sobre iso se te-lo usado ou cales son os tipos de cousas que non gusta? Si >> [Resposta do alumno inaudível] >> Okay. Isto é parte do que é deixar o usuario ten unha consulta que é máis expansivo dunha forma moi restritiva como, "Ten que escoller a súa data de inicio "E ten que escoller a súa data de finalización". Na verdade, el permite que sexa flexible sobre iso e dá-lle todos os voos nese intervalo. Algo máis? [Alumno] Eles inclúen as taxas no prezo. Non inclúen as taxas no prezo. Os impostos e as cousas realmente van directo para que o prezo na esquina superior esquerda entón non está enganado en pensar que está realmente pagando por un voo $ 240 cando é realmente $ 330. Algo máis? Si [Resposta do alumno inaudível] Eu non estou seguro se realmente deixar facer iso. Eu podo estar errado. Isto pode ser unha cousa interesante, se quere poñer máis peso en especial filtros de xeito que xa empurran os resultados relacionados con este filtro para o cumio. Pero alguén me pode dicir o que hai de tan especial sobre este lado esquerdo? Como tradicionalmente buscar un voo en un servizo de Internet antes diso? 

Si >> [Resposta do alumno inaudível] >> Pode dicir que - [Alumno] Cada compañía aérea. Si >>. Cada compañía aérea ten o seu propio sitio web. Iso consolida as cousas. E? [Alumno] Vostede sabe exactamente o tempo que está saíndo. Vostede sabe exactamente o que tempo está saíndo, pero relacionada cos filtros, en particular. Deixe-me puxar arriba Educativas. Oh Deus, pop-ups. Mala experiencia do usuario. O que acontece cando eu pasar ese control? [Alumno] actualizacións automáticas. >> [] Ong actualizacións automáticas. Iso é algo que é moi importante. Antes diso, sempre que quería buscar un voo, tiña que poñer no seu lugar de entrada, o seu lugar de saída, investigación de prensa, debe procesar isto e mostrar os seus resultados. Se queres cambiar a súa consulta, que tería que premer para atrás dúas veces, entrar nunha nova consulta a partir de cero, e despois facer todo de novo e de novo. O agradable sobre algo así é que usa unha cousa moi [inintelixible] no medio. Sempre que fai algo como isto, el dispara unha proposta e retorna todos os resultados inmediatamente. Este tipo de feedback inmediato é algo que fixo kayak popular porque é moi doado para min só cambiar a miña consulta e descubrir as cousas que están en torno a un determinado intervalo sen ter que ir cara atrás e cara adiante, cara atrás e cara adiante, cara atrás e cara adiante. Entón, eses son todos os tipos de cousas que quere pensar sobre cando está designado o seu sitio. Como podo facer iso moi eficiente para os meus usuarios que pasar por todo o que está a traballar e para chegar ao seu obxectivo final o máis rápido posible? [Malan] E a punto de José anterior sobre os usuarios non necesariamente saber o que eles queren, con base no que vostedes xa sabe HTML e ten caixas, botóns de radio, menús de selección, campos de entrada e similares, como é que aplicar a noción de elixir un horario de inicio para un voo? 

Cal destes mecanismos UI varios usaría? Se só sabe a cantidade de HTML que foi ensino antes e vostede sabe que as entradas son botóns de radio, caixas, menús suspendidos, e caixa de entrada, cal sería a súa elección natural ser para escoller datas? [Alumno] Entrada. Entrada. >> Ou quizais ata un desplegable con todas as datas, non? Así, con mecanismos de interface de usuario máis complexas como esta do lado esquerdo que pode implementar, pode facer este proceso moito máis intuitivo cun control deslizante porque o tempo é continuo, e as persoas xeralmente non pensan en termos de anacos discretos. Todo ben. Última cousa. Dez heurísticas de usabilidade. Todas as cousas que falamos probablemente caer nunha destas categorías. Se vai a este enlace, que os locais serán publicadas en liña, vai realmente ser capaz de, como proxectar seu sitio web, manter esas heurísticas presente e esas regras de ouro. Para os seus proxectos, o que eu suxiro que fagas, a fin de proxectar a súa aplicación mellor é facer prototipos de papel en primeiro lugar. Cando está a pensar sobre a súa aplicación, moi rapidamente esbozar o que quere que se parece e comproba se todas as caixas están dispostas de xeito que é moi intuitiva para o usuario a usar e mesmo mostrar os prototipos de papel para os seus amigos e comezar a grupos de foco. Basta chegar 2 ou 3 persoas e lles pedir para simplemente tocar neses prototipos de papel, e amosar-lles novas pantallas para ver se realmente entender o que está a suceder. 

O que quere facer é darlles unha tarefa, motivar esta tarefa, e só darlles o app e deixalos usalo. Non lles dea instrucións ademais. Quere realmente deixar los interactuar coa súa aplicación de forma que permite que vexa como eles ían usalo se non estivese ao lado deles. E iso é moi importante. Isto vai dar moitas ideas como a xente desplazarse cousas particulares dun xeito que eu non tiña a intención de que? Eles están usando mecanismos de interface de usuario na pantalla de forma que é unha especie de hacky? Eu non tiña a intención de que eles fagan iso desa forma. E unha vez que fixo que, o que quere facer? Rochas do seu proxecto, non? O que quere facer é que quere desenvolver e, a continuación, facer o proceso de novo. Así, mostra aos amigos unha vez que desenvolveu, proba-lo, desenvolver, probar, desenvolver, probar, repetir, sobre e sobre e para adiante. Deseño é un proceso iterativo moito neste sentido. Vostede realmente ten que construír algo e despois entender cousas sobre el que non entendeu antes e volver e mellorar con iso. Agora, en canto a parte de desenvolvemento, isto é o que Tommy vai amosar-lle despois do intervalo e como pode ser capaz de aplicar algo como autocomplete de forma que é moi sinxelo. [Malan] Como Tommy defínese aquí, unha pregunta entón. Moitos dos primeiros sitios - e cando dixo José 1990 web estilo, era implementacións onde se quería para seleccionar unha data de inicio e un tempo final, francamente, de volta ao día, e mesmo nalgúns sitios hoxe, a forma de facelo é incorporarse unha hora de un desplegable, escolle minutos dun desplegable, quizais escoller AM, PM e despois fai iso tres veces máis. E así, con 6 click e pode que algúns de desprazamento o usuario pode realmente proporcionar algún tipo de data e / ou intervalo de tempo neste sentido. 

Entón, en definitiva, de calidade inferior e, polo tanto, aínda agora vimos ningunha capacidades expresivas en calquera das linguas nós miramos para facer algo máis sexy como ese control deslizante de tempo de inicio e fin. Pero se pensas que volta a semana 0 cando falamos sobre Scratch, alí tamén había elementos que só fixo certas cousas. Realmente só estes fundamentos como loops e condicións e similares. Entón tipo de só pensar moito abstractamente agora, independente dos elementos HTML, o que realmente está a suceder con algo como data de inicio e Slider tempo do fin? Cando pasar meu rato e clic en que o símbolo de cenoria pouco á esquerda e comezar a arrastrar, por medio de programación, que é o que quere ser capaz de aplicar para que isto ocorre? Que preguntas, o que expresións booleanas que quere ser capaz de facer? O que está realmente a suceder? Sammy? [Estudante] Onde está a posición do cursor? >> Boa. Onde é a posición do cursor? Iso foi algo que precisaba expresar volta Scratch, se foi con base no lugar ou mesmo a cor ou similar. Pode lembrar sempre así momentaneamente o luns, había todas estas cousas chamadas eventos no mundo web, e por iso hai cousas como onclick e onkeypress e onkeyup e onmouseover e onmouseout. Entón, entender que incluso estas cousas que estamos tomando para concedida na web con sitios como Facebook e Gmail, mesmo se non ten idea como posiblemente aplicar iso porque non hai nada aínda así en charla ou conxunto de problemas 7, entender que, con eses fundamentos exactamente o mesmo, con HTTP e os parámetros e GET e POST, cos insumos básicos de HTML que nós miramos ata agora e nun momento cos mecanismos programáticos que Tommy está a piques de introducir pode comezar a expresarse, tal como fixo a semana 0 por moito intuitivamente arrastrando e soltando. 

Así, co que dixo, Tommy MacWilliam e algunhas pezas do puzzle novas para nós para a web. Todo ben. O meu nome é Tommy e eu vou estar fala de JavaScript. Só unha renuncia: Eu son da opinión de que o JavaScript é a mellor linguaxe de programación en todo o mundo. Hai moitas persoas que discordan de min, pero é simplemente fantástico. Unha vez que volver para a C, se ten que escribir C para outra clase ou doutras linguaxes, É realmente frustrante en todos os detalles de baixo nivel que ten que estar Atol dentro Entón, se está sempre sentindo triste sobre como é chat C é escribir, só volver, escribir algún JavaScript. É o nirvana. Vai sentirse moito mellor sobre o seu día malo. Unha boa parte da maxia de Javascript vén da súa capacidade de manipular as cousas que xa están na páxina. Cando escribimos os nosos scripts PHP, foron executados no servidor, e, finalmente, que o script PHP probablemente mostrará algunhas HTML. HTML que foi enviado ao cliente, e entón foi iso. Se o PHP quería engadir un botón de páxina, por exemplo, non pode realmente facer iso. El tería que prestar un novo ficheiro HTML e toda enviar o seu navegador. Con Javascript sabemos que podemos actualizar as cousas mentres eles xa están na páxina, e por iso podemos proporcionar un feedback máis inmediato, que realmente vai mellorar a experiencia do usuario no noso sitio. Só un rápido resumo de seletores de JavaScript. Nós sabemos que cando a descarga dunha páxina HTML, que vai ser representado no DOM. 

O don lembro é só unha árbore tan grande, onde os elementos están relacionados nesta xerarquía grande. Cando traballamos con bases de datos en pset 7, unha das primeiras cousas que necesitabamos para saber como facer era consultar a base de datos. Temos esta táboa de usuarios grande, e ás veces nós só quero dicir, "Eu só quero algúns deses usuarios que corresponden algunha condición". Do mesmo xeito, cando temos o don necesitamos algunha forma de consulta-lo. Necesitamos algunha forma de dicir: "Eu quero que todos os botóns que se asemellan a este "Ou de todas as imaxes na páxina." E eses seletores nos permiten facelo. Entón, basta unha rápida recapitulação. Este primeiro aquí, este # presentar, que é o que vai escoller? Alguén se lembra? [Resposta do alumno inaudível] >> Si, exactamente. Isto vai seleccionar un elemento na páxina que ten unha identificación de enviar. E para que hash tag di que este selector vai traballar con IDs. Como preto de un segundo, iso. Centrado, o que será que escoller? Si >> [Alumno] Clase. >> Exactamente. Iso agora vai seleccionar por clase. A diferenza entre o ID e clase aquí é xeralmente o ID debe ser único dentro de calquera espazo que está a buscar máis. Entón, se buscar unha páxina web enteira, o que realmente debe ter só un elemento con ID correcto, polo tanto, neste caso de presentar. Con clases, por outra banda, pódese ter máis dun elemento na mesma páxina coa mesma clase. Isto pode ser útil para dicir quero seleccionar todo o que está centrado na páxina en vez de só unha cousa. 

E, finalmente, este último aquí é un pouco máis complicado, pero o que é que isto vai seleccionar a partir da DON? [Resposta do alumno inaudível] >> ¿Que é iso? [Alumno] Todo o que é unha etiqueta. >> Temos dúas partes aquí. A segunda parte vai dicir que quero seleccionar esas etiquetas cunha marca de entrada, polo tanto, calquera elemento que sexa unha marca de entrada. Pero eu non quero só seleccionar todas as entradas porque algo así como un botón de envío podería ser unha entrada é algo así como unha caixa de texto podería ser unha entrada. Así, con estes corchetes Eu estou dicindo que eu só quero seleccionar os elementos que son do tipo texto. En algún lugar na miña tag HTML eu teño un atributo chamado tipo, é o valor de atributo, que ten que ser texto. Así como sobre esta primeira parte aquí? A primeira palabra deste selector é a forma, entón eu teño un espazo e entón esta parte de entrada. O que isto fai, poñendo a forma fronte a ela? Isto vai basicamente limitar a nosa consulta. Podería ser o caso de que temos algunhas entradas na páxina que non son descendentes dun formulario. O que isto vai facer é que vou dicir que eu só quero as marcas de entrada que teñen algún lugar por riba deles algún elemento pai dun formulario. E así, desta forma podemos facer esas consultas máis xerárquicas de xeito que non só ten que seleccionar todo combinando un selector dado. Podemos tipo de limitar o ámbito da consulta que a outra cousa. Polo tanto, agora que sabemos como seleccionar elementos na páxina, imos falar un pouco sobre AJAX. AJAX é un acrónimo aínda moi de moda que significa asynchronous JavaScript e XML. O que pasa é que o XML é só un xeito de representar algúns datos. 

Este tipo de popularidade perdida recentemente, de xeito que o X en AJAX non é usado en todo momento. Basicamente, o que AJAX nos permite facer é facer solicitudes HTTP do contexto de JavaScript. Cando estamos no noso navegador web e estamos navegando polas páxinas e facer clic nun enlace, o que o noso navegador vai facer é facer unha solicitude HTTP para calquera ligazón que premer. Pero iso non sempre é ideal, porque se ese é o caso, entón, como David estaba dicindo: Nós sempre temos que facer os usuarios facer clic nun botón Enviar ou facer clic nun enlace , A fin de facer calquera cousa acontecer, que vai implicar unha solicitude HTTP. Así, con AJAX podemos facer esas solicitudes en nome de JavaScript. Isto significa que cada vez que o usuario interactúa coa páxina ou ocorrer algo, podemos realmente facer un pedido programático para algún ficheiro PHP outra na nosa web ou calquera outra cousa e recuperar os datos que o ficheiro cospe para fóra. Imos dar un ollo a un exemplo de AJAX. Esta é a nosa páxina de Finanzas CS50 co cal espero que algúns de nós está familiarizado. Se olharmos para o código HTML da páxina, vemos aquí que eu engade algunhas cousas, un dos que eu teño dado esta forma unha identificación. Eu xa dixen id = "formulario de cotización". Eu fixen iso só porque vai facelo un pouco máis fácil de seleccionar a partir do DOM dende que eu podo só facer unha consulta moi sinxela. O que quero facer aquí é que quero corrixir algún problema coa CS50 Finanzas. Entón, se imos para finance.cs50.net, cada vez que quero obter unha cotización, eu teño que facer clic nese botón de Cita Get, e que Get botón Cita a continuación, leva-me a outra páxina enteira. E se eu queira outra cita, eu teño que premer o botón Atrás e introduza a Eu recibín unha cita, e eu bati o botón Atrás. Isto realmente non é a mellor experiencia do usuario. Quen podería realmente usar o sitio, se é que lento para os prezos das accións? Entón, o que queremos facer con AJAX é eliminar esa etapa de ir a unha páxina separada , A fin de ver os resultados. 

O que estamos realmente só pedindo é que o prezo realmente pequeno, e iso é só unha cantidade moi pequena de datos. Polo tanto, non hai necesidade de ir a outra páxina enteira HTML, Descarga de un novo lote de HTML, pode baixar algunhas imaxes, algúns outros arquivos CSS só para min para responder a esta pregunta moi simple de canto custa ese stock. Con AJAX podemos facelo moito máis fácil. Vemos aquí que eu estou conectando nun arquivo JavaScript chamado quote.js. Imos realmente abrir o ficheiro. Non hai. Todos os meus arquivos JavaScript van ser localizado en HTML para que o seu navegador poida acceder a ela. Entón temos un directorio separado aquí para JavaScript, e agora aquí é quote.js. No cume deste arquivo iso di aquí que quero esperar por toda a páxina a cargar antes de tentar facer algo. Por que iso é necesario? Acontece que a próxima cousa que eu vou facer aquí é comezar a ollar para un elemento que coincide con algún selector. Se este Javascript é sempre realizada antes de este elemento é cargado na páxina, entón, todo o que eu intento facer é non ir traballar porque eu estou indo a tentar seleccionar algo que non está alí aínda. Entón esta liña enriba di que quero que espera ata que todo estea cargado por iso estamos garantir que todos os elementos que eu estou buscando son realmente na páxina. Este sinal dólar aquí significa que eu estou usando a biblioteca chamada jQuery. Esta biblioteca jQuery permítenos usar estes seletores que só mirou. Ao dicir $ continuación, pasando como un argumento este # formulario de cotización, Agora estou seleccionando esa forma que só deu un ollo. Agora eu teño unha representación desa forma en memoria de algunha maneira. 

Nesta obxecto agora, esta representación da forma, Agora está a usar unha función chamada. O que esta función fai é que vai engadir un manipulador de eventos. O evento que imos escoitar é o evento submit. Así, cando o usuario preme neste botón Enviar ou prema Intro, este evento vai ó lume. Ao chamar a iso, eu agora pode substituír o comportamento por defecto do formulario. Sen esta JavaScript, a forma submeteria a calquera arquivo PHP usan ese atributo action. Pero en vez diso, eu estou dicindo agora, espera, espera, espera, eu non quero que realmente facelo. Eu quero que isto ocorre antes de ir e intentar someter a algún arquivo PHP. Agora o que quero facer? Neste punto, quero usar AJAX para cargar algunha forma no que o prezo das accións é. A primeira cousa que eu teño que saber o que stock usuario está mirando cara arriba. Para iso eu vou usar outro selector. Este é o terceiro selector vimos antes. Este di que quero comezar este elemento forma cun ID de formulario de cotización. Entón, en algún lugar dentro desa forma, ten que haber un elemento de entrada que ten un nome de símbolo. Se miramos para o noso HTML, vimos que tiña unha entrada [name = símbolo]. Isto significa que este está indo a seleccionar a caixa de texto que o usuario está escribindo en. Isto é bo. Temos a caixa de texto. Agora só necesitamos saber o que hai dentro del. Para iso, podemos chamar ese método aquí, este val., e este di que eu sei o que ten caixa de texto. Eu quero que me diga o que é o usuario introduciu na caixa de texto que. Agora temos unha cadea chamada símbolo que é igual a todo o que o usuario introduciu dentro Isto é bo. Podemos usar esa secuencia agora para facer o noso pedido. Esta é unha nova función aquí, este $, excepto que non estivemos máis vai ser seleccionar elementos, Nós imos estar chamando unha función diferente que é subministrado a nós por jQuery. Esta función AJAX é o que realmente vai facer esta solicitude HTTP. Entón, temos que dicir que algunhas cousas. A primeira cousa que temos que dicir a esta función é onde quero a solicitude para ir. En algún lugar no meu proxecto eu teño ese arquivo dentro do directorio HTML chamado quote.php. Eu podo acceder a este ficheiro, vimos, como esta, se eu for a localhost / quote.php. 

Eu quero o meu JavaScript para facer unha petición para que a páxina. Que tipo de petición agora? Vimos antes de que o formulario ten que method = "post" atributo e iso significa que vai facer unha solicitude POST, por iso non vai poñer calquera cousa na URL, en vez de unha solicitude GET, que só sería despedido só identificado a páxina co navegador, por exemplo. Agora que xa dixen que quero facer unha solicitude HTTP POST para unha páxina situada no quote.php. Cando enviar o formulario, lembre que podería acceder aos elementos de entrada dentro do que a forma con esa variable $ _POST. Ata agora, na historia que non teña realmente enviado xunto os datos aínda. Acaba de dicir que estamos facendo unha proposta de AJAX E aquí está o tipo de solicitude que estamos facendo. Agora, necesitamos realmente enviar algúns datos para a páxina. Para iso, podemos utilizar esta propiedade chamada de datos. O valor da propiedade é en realidade unha matriz asociativa. A razón para iso é que nos permite enviar máis que 1 anaco de datos. É por iso que temos esas claves aquí aninhada dentro destas claves outras curvas. As claves nesas matrices asociativas vai ser a mesma cousa como os atributos nome nos nosos elementos de formulario. Isto significa que, se eu enviar xunto cunha clave de símbolo, Isto significa que a miña páxina PHP pode acceder a estes datos con $ _POST [símbolo] así como fixemos antes, cando estabamos enviar un formulario. E agora os datos reais que desexa enviar vai ser o valor dentro do array asociativo. 

Nós valor este texto nun símbolo variable chamada, e por iso estamos enviando xunto agora unha chave de símbolo e un valor de todo o que o usuario introduciu dentro Agora nós fixemos esa solicitude HTTP, o noso arquivo PHP foi executado, e que vai enviar algúns datos de volta agora para o cliente que vén de facer esta solicitude. Agora necesitamos responder a todo o que o servidor nos dixo. Para iso, temos esta última propiedade aquí chamado de éxito. O valor desta chave do éxito é, en realidade, vai ser unha función, e iso é unha das cousas legais que podes facer con JavaScript. Non só pode ter ints ou matrices como un valor dentro dunha matriz asociativa, que tamén poden ter unha función. Así dicindo éxito, esta é a miña chave. Un colonos di aquí vén o valor, e agora o valor deste é realmente unha función. Polo tanto, non precisa dar esa función un nome por si só. Podemos só dicir que este vai ser algunha función. El vai levar un argumento. O argumento para esta función será calquera que sexa o servidor enviou-nos de volta a partir da solicitude. Así como cando o noso navegador fai unha solicitude, o servidor envía algo de volta eo navegador exhibe, no contexto AJAX que acaba de facer unha petición, o servidor enviou algo, e agora temos que representaba como unha cadea. Con esa secuencia quere só para mostrar que na páxina. Para iso eu vou ter un selector pasado. Eu quero seleccionar o elemento con prezo de ID. Este é só un div baleiro que eu creei a páxina, e quero establecer o contido desa div ser o que o servidor enviou-nos de volta. Eu realmente modificado quote.php un pouco. 

En vez de chamar render e facendo algúns páxina quote.php agora é simplemente vai imprimir o valor do stock como unha cadea. Entón, se realmente visitar a páxina, que tería só que ver que pequeno cadea de calquera que sexa o prezo das accións é. Unha última cousa que necesitamos facer aquí é só garantir que esta función devolve falso. O que isto di é que, se eu estou dentro dun manipulador de eventos e que manipulador de eventos retorna false en vez de volver verdade, iso significa que eu non quero que o evento orixinal ó lume. Neste caso, non se ten algunha Javascript e presentado un formulario, noso navegador é que vai dicir: "Eu vou enviar os datos ao longo", e eles van mandar vostede para unha outra páxina. Como estamos usando AJAX, agora, non hai necesidade de enviar o usuario a outra páxina. Nós só estamos indo a amosar os resultados de forma dinámica nesa mesma páxina. Nós realmente non quere ir a calquera lugar, e quero estar na mesma páxina. Entón, retornando false, é seguro que a forma non fai iso para nós. Imos dar un ollo ao que este realmente se parece. A nosa páxina de cotización parece o mesmo. Deixe-me puxar arriba o inspector aquí para que poidamos ver o que está a suceder. Facelo un pouco menos enorme. Lembre que abrir a pestana de rede, este é o lugar onde podemos ver todas as solicitudes HTTP que están a suceder na páxina. 

Para un símbolo deixarme escribir AAPL e prema en Obter cotización. Agora vimos que unha parte de Apple custa preto de número de dólares só apareceu na páxina, pero a URL non cambia en nada. En realidade, aquí está a solicitude HTTP que nós fixemos. Fixemos unha solicitude POST para quote.php. Isto ten sentido. Isto é o que o servidor enviou-nos de volta. Non é máis ese documento xigantesco HTML con imaxes e cousas así, é só unha liña de texto, e entón nós só aparece a liña de texto. Se volvemos para as cabeceiras e ver o que realmente enviado dentro desta solicitude HTTP, podemos ver aquí abaixo que enviamos ao longo dunha clave de símbolo e un valor de AAPL, que é o que o usuario introduciu dentro Isto é bo, pero aínda é un pouco aburrido. Eu aínda teño que facer clic nese botón para obter a cotización de accións. Somos persoas moi ocupadas e non temos tempo para premer en botóns. Google entendeu iso un pouco tempo cando aplicaron Google Instant. Google Instant fai é como está escribindo só comeza a presentar os resultados para ti así que non se preocupe mesmo premendo Procurar. En realidade, unha historia divertida relacionada a iso. Unha vez que Google Instant saíu, as persoas eran como, "Whoa, iso é super incrible." "Iso é tan legal." É un estudante de baixo de Stanford que tiña 19 anos na época fixo esta web chamado YouTube instantánea. Todos instantánea de YouTube non é efectivamente buscar YouTube instantaneamente. Polo tanto, en vez de ter que ir a YouTube.com e bateu de busca, cando comezar a escribir algo no YouTube instantánea como CS50, podemos ver aquí que está intentando unha conexión lenta de Internet cubrir eses resultados en directo. Para iso podemos realmente facer unha modificación moi sinxelo de noso arquivo quote.js. Agora estamos anexando este evento cando o formulario é enviado. Nós realmente non queremos facer o usuario mandar ese formulario máis, entón imos dimitir vez este evento cada vez que o usuario preme unha tecla. Para iso imos primeiro cambiar o evento para presentar keyup. Isto significa que, en vez de esperar que a forma de presentar, cada vez que a tecla é presionada, algo vai ocorrer. Non fai máis sentido para achegar este evento keyup para todo o formulario. Nós realmente só se preocupan coa caixa de busca. 

Para seleccionar que agora podemos cambiar este sexa, no canto de formulario de cotización, formulario de cotización, e nós imos ter unha entrada (tipo de texto =) ou, poderiamos dicir (nome do símbolo =) - o que queremos. Agora hai unha última cousa que temos que facer. Teña en conta que aquí abaixo, cando dixo que o retorno falsa Nós dixemos que non queremos que o evento estándar para disparar. Pero iso só acontece que, se desactivar que agora, O que se dixita non vai aparecer no seu navegador máis porque iso sería o comportamento estándar de escribir nunha caixa de texto. Non queremos máis para substituír ese, entón imos destruír este return false. Se salvar o que e recargue a páxina, agora cando comezar a escribir AAPL vai ver que o prezo das accións no fondo aquí está completando automaticamente. Entón aquí está CS50 Instantânea Finanzas. En realidade, unha historia divertida sobre o Instant YouTube é que o alumno só unha especie de escribiu como un proxecto de unha noite, e ao día seguinte foille ofrecido un emprego polo CEO de YouTube. Así, tan sinxelo coma iso, CS50 alumnos, os seus proxectos finais que pode obter un emprego en YouTube. Algo así é unha idea moi legal para un proxecto final, non? Tivemos algunhas funcionalidades existentes que queriamos integrar. Nós mellorar a experiencia do usuario un pouco, e de súpeto, buscando algo en YouTube instantánea pode ser moito máis fácil buscar en YouTube regular. Entón, iso é AJAX en poucas palabras. 

Nos exemplos que José estaba mostrando vimos unha chea de autocompletes, e aqueles autocompletes son realmente, realmente útil, porque non temos que lembrar - Por exemplo, se non se lembra do prezo das accións de Apple e nós só sei que é algo aa, no canto de só dicindo para min, "Unha parte desa cousa custa tanto diñeiro", Eu tipo de gustaríame saber cales accións comezar aa. Podemos facelo realmente ben coa biblioteca Bootstrap que xa está incluído dentro CS50 Finanzas. Se ve ata aquí para a marca de JavaScript e rolar para typeahead, este é só un complemento legal que alguén xa escribiu para nós, e podemos facilmente usar a súa funcionalidade como este. Eu escriba un A e aquí está a lista de algúns estados que comezan con A. Imos dicir que eu creo que iso é moi legal e é hora de incluír este na miña páxina. Acontece que iso é moi, moi sinxelo. Imos ir aquí para quote3.js. Meu arquivo parece un pouco diferente. Ata aquí todas as miñas cousas AJAX é o mesmo. Eu quero cargar os datos de stock sen ter que ir a outra páxina. Pero agora quero usar este plugin. A documentación Bootstrap ten grandes exemplos de como exactamente podo facer iso. Quero dicir, "Aquí está a entrada que quero autocomplete", e eu vou chamar esta función chamada typeahead, e que vai tratar con todas as cousas typeahead para nós. El ha arrincar a lista, que vai facer todos os nosos filtrado. O único que necesita saber é que datos estamos autocompleting. Entón, podo atopar esa clave só lendo a documentación e ollando para os exemplos. I dan unha chave de orixe, o valor desta clave é só unha matriz algunhas das cousas que quero autocomplete. Esta variable veu deste ficheiro. Eu abro symbols.js. 

Isto é só unha matriz symbols.js esta moi, moi grande, que contén cordas de todos os símbolos imaxes do NASDAQ. Se eu queira voltar HTML, para jharvard, vhosts, globalhost, html, templates, quote_form. Dende que é agora chamado quote3.js, deixe-me cambiar o arquivo JavaScript estou incluíndo aquí. Agora eu teño quote3.js, entón eu vou cargar este ficheiro JavaScript separado, o que ten que Bootstrap autocomplete. Agora, cando eu atrás para o navegador, recargue a páxina e comezar a escribir á, hai meu autocomplete. E foi realmente tan sinxelo coma iso. Eu tiña unha liña de código que só dixo: "Aquí están as cousas que quero autocomplete", e de súpeto eu teño esa funcionalidade moi, moi agradable con non moito esforzo en todo. Como está a desenvolver sitios web e particularmente o lado frontal das cousas, notarás que este é o caso moito. Hai moito, moito moito, moi legal de bibliotecas libres alí fóra que o fan super fácil de facer cousas como esta. Alguén pode pensar en calquera inconvenientes de simplemente autocompleting nesta lista grande de símbolos? O que podería ser algo que non é o mellor con esta visión? Si >> [Alumno] Tempo, se ten unha morea de [inaudível] Si Agora estamos copiando este ficheiro JavaScript enorme e hai unha morea de símbolos. E así, se temos unha tonelada de cousas, este tipo de podería aumentar a latencia non só buscar pero tamén facer a descarga do ficheiro real. Grande. Algo máis? Neste momento non hai ningún sentido real de relevancia. Se eu escribir un A, as empresas que aparecen aquí poden non ser as empresas máis populares que comezan con A. 

Antes de comezar a Apple, isto pode levar algúns personaxes moito máis para o que eu estou buscando. Este autocomplete non ten ese sentido de relevancia. El só vai dicir: "O que corresponda vou presentar." En vez diso, gustaríame algunha maneira, integrar algunha relevancia nas miñas investigacións. Se eu pasar por aquí para Yahoo! Finanzas, finance.yahoo.com, Se eu tentar engadir un símbolo na páxina de Yahoo! Finanzas e comezar a escribir GOOG, eu teño esa boa lista de cousas. Obviamente, parece Yahoo! Finanzas está a facer algo máis intelixente aquí. Teñen algunha importancia e eles tamén teñen información adicional como o nome do stock. Iso é algo que eu realmente non podo ir con só unha lista meu stock de símbolos. Eu quero isto e vou leva-la. Para iso imos facer algunhas cousas. Imos primeiro abrir o inspector da páxina porque vimos que esta páxina non está recargando a todos, por iso é probablemente usando AJAX dalgunha forma estar cargando os seus datos. Podemos descubrir cales son os datos que está cargando. Se eu premer nesta guía de rede, estes van ser todas as peticións que comezan a ser despedido. Agora, se eu escribir Goo, podemos ver que eu só teño unha nova solicitude HTTP. Este é probablemente o lugar onde os datos proveñen. Con certeza, se eu ollar para esta URL, que é un pouco estrañas nomeado, podemos ver que iso é exactamente onde Yahoo é o envío fóra dos seus datos. 

Eu creei un arquivo separado chamado suggest.php que é moi semellante en espírito para a función de procura. É basicamente vai facer unha consulta a URL de Yahoo, volver algúns datos, e enviá-lo de volta para min. Agora, en vez de usar esa lista grande, enorme de símbolos, Podo usar cousas boas de Yahoo relevancia, e eu non teño que baixar o arquivo JavaScript maciza. Eu só vou para tirar para abaixo os símbolos de accións realmente relevantes. Imos saltar para dentro diso. Entón, html, JS. Estamos agora en quote4. Agora estamos non usa máis que gran lista de ficheiros JavaScript. Pero hai un pequeno tipo de problema de deseño aquí. Nós dixemos que a A en AJAX é asíncrono. O que isto significa que cando fago unha proposta de AJAX, tan certo aquí na liña 8, este é o lugar onde miña petición AJAX é realmente despedido. Imos dicir que agora eu teño un código aquí que vai facer algo gusto de alertar o usuario ou cambiar algo na páxina. O que non vai ocorrer é o seu navegador non esperar a esta petición para continuar antes de descender e bater esta liña. Esta é a parte asíncrono. Vai facer esa petición e dicir: "Cando termine, "Volver e chamar esa función que eu lle dixen para chamar dentro de éxito." Isto significa que non pode só baixar todas as accións de antemán. Necesitamos facer a solicitude e agardar por algo para volver. Isto significa que, antes, poderiamos simplemente dicir Bootstrap, "Aquí está a lista de cousas que quero que autocomplete". Non podemos máis facelo máis, porque non sabemos o que queremos, en realidade, autocomplete. Afortunadamente, Bootstrap pensara niso, porque aqueles faces son intelixentes por alí, e realmente nos deu unha outra forma de cargar este plugin typeahead. Antes, o valor da propiedade de orixe era só unha matriz tan grande de cousas para autocomplete. 

Agora a propiedade fonte é realmente unha función, eo obxectivo desta función é descubrir o que as cousas para autocomplete sobre o son. A forma como vai descubrir que é o que vai pedir Yahoo! Finanzas o que as mellores cousas para autocomplete son. Para iso vou facer un pedido moi semellante AJAX. Vou pedir esta páxina suggest.php. Eu quero enviar xunto os símbolos aínda. E agora o meu éxito, a documentación Bootstrap me dixo que, a fin de cubrir esa lista de cousas, todo o que eu teño que facer é pasar esa matriz agora a función de retorno. Pero agarde un minuto. Se este é suposta ser unha matriz e AJAX é me mandar de volta o texto, Como isto é posible? Isto introduce unha nova forma de intercambio de datos chamado JSON. Neste caso, nós non estamos só enviando de volta unha secuencia simple de texto. Agora estamos lidando con esta lista máis complexo de símbolos de accións. Estes símbolos de accións tamén pode incluír cousas como o nome da empresa ou os prezos actuais. Usando só unha corda longa grande que non está formatado en calquera forma previsible non vai ser a mellor maneira de obter estes datos a partir do servidor Yahoo para min de forma que eu poida entender facilmente. JSON é unha tecnoloxía que tira proveito de como crear matrices asociativas en JavaScript. Isto parece moi cunha matriz JavaScript asociativa, e, na verdade, é porque é. JSON significa JavaScript Object Notation. Este é basicamente un formato acordado para a transferencia de datos e cara atrás. Aquí este obxecto JSON ou esa matriz JSON asociativa está a enviar-me algúns datos sobre o curso. 

As claves deste array son cousas como curso que ten un valor de CS50, e aquí podemos ver que eu poida ter un valor que é unha matriz. Eu non teño que facer cousas como analizar fóra cordas e buscar por comas e facer cousas malucas como esta. Porque este é declarado neste formato JSON, JavaScript e jQuery xa ten funcións para converterse nunha cadea que se parece este JSON nunha matriz JavaScript real asociativa que podemos traballar. Facelo é tan sinxelo que dicir que xa non é este ficheiro suggest.php, me mandando de novo simplemente unha secuencia de texto, pero eu sei que vai ser me mandar de volta JSON. Isto significa que o JSON que pode ser convertida nunha matriz asociativa JavaScript. E así jQuery, quere que faga iso por min. Isto significa que este parámetro resposta aquí, iso xa non é só unha secuencia. Porque nós dixemos jQuery que aquí vén algúns JSON, jQuery vai ser intelixente o suficiente para dicir: "Vostede quería JSON?" "Eu estou indo a converter isto nun array asociativo para ti." Vamos realmente dar un ollo ao guía Rede xa que temos quote4.js. Imos cambiar isto e recargue a páxina. Agora vou escribir un de novo. Eu fixen solicitado pola parella para suggest.php, pero agora response iso, en vez de só a corda, que é JSON. Entón, eu teño unha chave de apertura rizados, dicindo: "Aquí ven un array asociativo." 

A primeira clave e só dese matriz asociativo é chamado de símbolos, e, a continuación, aquí é unha matriz de todos os símbolos relevantes chegando agora de Yahoo! Finanzas non, a partir desa lista xigantesca. É así que eu pode simplemente encher este plugin autocomplete con algúns datos que non está vindo dun ficheiro local que xa está predeterminado pero a partir de outra cousa. Acontece que podemos realmente sacar proveito dunha tecnoloxía chamada JSONP, ou JSON con padding, que vai borrar este compoñente suggest.php. Pero, en vez de facer iso, imos en vez dar un ollo a como podo mellorar iso aínda máis. Eu realmente gosto de typeahead Bootstrap. É moi bo. Pero estamos quedando boa Javascript e queremos tipo de facelo nós mesmos, quizais dar un ollo ao que este plugin podería estar facendo. Imos deixar de usar esa cousa typeahead, e imos tratar de facer esa lista de accións suxeridas nós mesmos. Aquí en quote6.php imos comezar da mesma maneira. Tipos de cada vez algo a alguén, queremos facer unha proposta de AJAX. Este é semellante ao noso instantánea Finanzas orixinal CS50. En vez de facer un pedido para quote.php, agora estamos facendo unha petición para que o mesmo arquivo como antes, este suggest.php, que é só ir para extraer datos de Finanzas Yahoo!. 

Unha vez máis, nós aínda estamos esperando JSON, pero agora desde o typeahead non está facendo iso para nós, necesitamos tamén enviará o valor que está dentro da caixa de texto actual. Agora sabemos que pedir Yahoo! Finanzas para, e agora aquí está a función que queremos facer unha vez que a solicitude sexa rematada. Non temos o plugin para facer a lista para nós, entón aquí é onde nós estamos indo realmente para construír unha lista de suxestións. Para iso, así como en PHP que concatenadas esas secuencias grandes HTML entón impreso deles, podemos facer o mesmo que en JavaScript. Primeiro imos comezar esta cadea chamada suxestións, e esa secuencia é só vai ter algún código HTML. Queremos que sexa unha lista de cousas, entón imos comezar con esa etiqueta lista e agora estamos indo a iterar sobre todos os símbolos que foron devoltos de volta para nós. Lembre, porque xa dixo dataType: 'JSON', iso non é unha cadea. Iso xa é unha matriz para nós. Iso é moi legal. Podemos simplemente dicir: "Eu quero que engadir un elemento da lista." Imos colocar-lo dentro dun elemento dun lado en que, nós imos dar-lle unha clase de suxestións, co que sabemos o que é, e agora aquí é o símbolo que nós volvemos de Yahoo! Finance. 

Unha vez que creamos un elemento para cada un dos símbolos que chegamos de volta, só queremos pechar a lista. Entón agora suxestións representa este pequeno fragmento HTML que cando feitas en unha páxina que vai ser a lista de cousas que estamos a buscar. Agora imos realmente poñer isto na páxina. Para iso realmente creou outra div baleira e eu dei-lle un ID de suxestións. Así como imos definir o contido da p que amosar o prezo dos datos de stock, agora só quero definir o contido desta div ao que esa secuencia é que contén estes símbolos. Ao usar este método de HTML, este variable suxestións, esta cadea, é unha secuencia de HTML. Eu quero que tome o HTML e poñelas dentro da div chamado suxestións. Acaba de algo adxunto ó DON agora. Nós engadimos algúns elementos novos para o don que agora podemos ver na páxina. Imos ver o que iso parece. Cargar en quote6 e agora volvemos, agora cando comezar a escribir AAPL, non temos máis que Bootstrap autocomplete, pero agora temos esta lista que fixemos a nós mesmos. Isto é un pouco máis feo que o typeahead Bootstrap, por exemplo, pero iso non nos permiten facer outra cousa. Cando estabamos a mirar para este plugin Bootstrap, vimos que, cando autocompleted, un dos valores autocomplete foi AAPL. Isto pode non ser tan útil. Como usuario, eu podería non recoñecer inmediatamente todos os símbolos de accións. O que eu son probabelmente máis propensos a recoñecer son nomes reais da empresa. Polo tanto, non sería realmente útil se en vez de dicir AAPL isto dito algo así como a Apple Inc Porque temos rolou iso nós mesmos, podemos realmente facer iso facilmente. Imos abrir noso arquivo última cita aquí, entón quote7. 

Mesmo. Acaba de crear outro ficheiro PHP que pode voltar a nós máis que os símbolos. Tamén pode dar-nos de volta nomes da empresa. E por iso estamos facendo a mesma cousa. Estamos a facer unha proposta de AJAX. Unha vez que a solicitude foi concluído, imos levar a cabo esta función aquí, e esta función vai construírse unha secuencia grande de elementos. Pero a diferenza aquí é que o valor destas listas xa non é só o símbolo, agora o nome. Polo tanto, temos un pequeno problema. Cando usamos a nosa investigación, necesitamos de algunha maneira pasar o símbolo. Non podemos pasar algo de investigación como Microsoft Corporation. Necesitamos pasar MSFT. Cando estamos escribindo HTML, temos moi de Niza embutidos atributos. Un A pode ter asociada a ela un href ou unha clase. Pero o que realmente necesitamos agora é que cada un destes enlaces ter un símbolo de acción a ela asociados. Non hai embutido atributo HTML símbolo de acción, pero, por sorte, HTML5 nos permite crear os nosos propios atributos para ser o que quere. Ao dicir símbolo de datos, eu introducir un novo atributo cuxo nome eu acaba de inventar, e iso é bo porque eu prefaciado con eses datos. Estamos indo para almacenar dentro alí o símbolo do stock agora. O que isto significa que aínda que nós estamos mostrando o valor do nome da empresa dentro do noso autocomplete, aínda estamos lembrando o símbolo que está asociada a cada unha das empresas. O xeito que estamos facendo que está dentro deste elemento en si. Entón iso significa que temos que facer unha mudanza. Cando prememos agora, necesitamos realmente sacar proveito do atributo símbolo no canto de só o seu valor. Se volver, damos un manipulador de eventos para suxestións. Sempre que unha destas suxestións é premendo agora, quero facer algo. O que quero facer é cambiar o valor desta caixa de entrada. Agora quero definir esta función val mesmo. 

Entón, sen ningún argumento esa función val retorna para ti que xa está no cadro de texto, pero se darlle unha corda, que vai levar esa cadea e poñelas na caixa de texto. Estou seleccionando súa caixa de texto do mesmo xeito. O seu nome é dentro símbolo formulario de cotización. Agora estou enviando o valor do atributo de datos-símbolo. Iso aquí é novo, esta $ (this). O que isto se refire é o elemento que foi premendo. Podemos ver aquí que non estamos anexando un evento de clic para cada elemento con unha clase de suxestión individualmente. En vez diso, estamos achegando iso un pouco diferente. En vez diso estamos dicindo sempre dentro de calquera cousa deste div suxestións, Lembre que é só o recipiente para esta lista, algo neste div é premendo e ten unha clase de suxestión, Eu quero este evento para disparar. Basicamente o que isto significa que podemos facer é que podemos reutilizar ese mesmo manipulador de eventos para todas as cousas na lista. Entón, nós non temos que ter un manipulador de eventos para o primeiro elemento e un manipulador de eventos diferente para o segundo elemento. Podemos dicir que, en vez, "Eu quero o mesmo manipulador de eventos para aplicar a todo na miña lista." Pero necesitamos de algunha maneira, saber cal elemento foi premendo. Este "presente" contrasinal representa exactamente isto. Este é o obxecto que foi premendo polo usuario. Se eu simplemente prema na ligazón 3, este representa o elemento do nexo 3, o que significa que eu poida recibir o seu atributo data símbolo, que sabemos que debe conter o símbolo que está asociado coa empresa Eu só premendo. Se volver a nosa páxina de finanzas, podemos ver agora que unha vez que comezar a escribir algo como MSFT, que non está recibindo só os símbolos de accións, agora estamos recibindo as empresas reais. Pero cando premer en unha destas empresas, podemos ver que nós estamos realmente non cubrir a caixa de texto co nome da empresa pero o que estaba almacenado dentro dos atributos de datos. E así se realmente inspeccionar un deses elementos polo botón dereito del e premer en inspeccionar elemento, podemos realmente ver o que iso parece. 

Teña en conta que isto é algo que creamos dentro dese loop cando estabamos construíndo esa secuencia de HTML. Podemos ver aquí que estes datos-símbolo ten o valor de MSFT, o que é óptimo. Isto é o que nós estabamos esperando. Ese é o símbolo e é así que temos o valor que é necesario utilizar dentro da caixa de texto. Isto é suficiente para o formulario de cotización, porque iso é medio chat. Nós só facer algunhas melloras rápidas a nosa páxina de carteira. Se xa usou CS50 Finanzas por un tempo e comezar a compra e venda de un lote de accións, finalmente esta táboa pode ir moi grande, e vai querer un reloxo de acción, por suposto. Unha vez que a táboa é moi, moi grande, que podería ser útil para o usuario intenta investigar sobre el. Dentro do cadro de busca, se eu comezar a escribir algo así como a Disney e mirando para o meu stock de Mickey Mouse, podemos ver que a táboa agora filtrando con base no que eu escriba dentro Esta función parece super complicado, pero é moi, moi fácil con jQuery e JavaScript. Este ficheiro portfolio.php inclúe un arquivo JavaScript chamado portfolio.js. Imos dar un ollo niso. Entón, html, JS, carteira. Aquí é onde nós estamos facendo que a investigación sobre a mesa. A primeira cousa que cómpre facer é engadir un manipulador de eventos para que a caixa de texto porque sabemos que queremos que a nosa función de filtrado de lume Cada vez que o usuario presiona algo, porque non temos tempo para os botóns de investigación. A primeira cousa que cómpre facer é descubrir o que o usuario está a buscar, así como fixemos antes. Esta palabra clave se refire ao elemento actual do usuario está interactuando con. 

Como o usuario está interactuando coa caixa de busca, $ This representa a caixa de busca, así this.val nos dá o que ten dentro da caixa de busca o usuario está escribindo. Entón, agora o que queremos facer é que queremos iterar sobre todas as liñas dentro da nosa mesa. Para seleccionar todas as liñas na nosa mesa, eu dei esa mesa unha identificación da carteira de mesa, e cada liña é representada por un elemento TR, de xeito que este selector vai volver para min unha gran matriz de todas as liñas na miña mesa. Agora quero iterar sobre esta matriz. Eu podería un loop, pero jQuery realmente nos ofrece a función legal chamado "cada un". O que cada un fai e cada un ten un argumento, e ese argumento é unha función. O que vai facer é que vai aplicar esta función a cada elemento dentro da lista. Esta función ten un argumento que é e, e cando esta función é executada, este vai ser substituído coa primeira liña, a continuación, a segunda liña e, a continuación, a terceira liña. Por este camiño, esta é a mesma cousa que facer un loop e despois descubrir o elemento actual con base no índice de dentro do seu loop. En cada iteração, para cada un deses elementos na táboa, Quero comprobar que o texto do elemento - o texto do móbil dentro da liña - coincide co que eu estou buscando. Esta cadea longa gran de comandos é como eu podería facelo. En primeiro lugar, unha vez máis, este refírese agora - porque é dentro dunha nova función - Esta é agora a liña actual na táboa. Eu quero ter a liña actual na táboa, e quero incorporarse todos os seus fillos. Lembre, o don é unha árbore xerárquica, o que significa que os elementos teñen un número de nenos. 

Este. Función nenos vai volver para min de volta un conxunto de todos os elementos que son os nenos de, neste caso, unha liña na táboa. Este é simplemente as células dentro da liña. Eu só quero que a investigación sobre a primeira célula. Esta función. Primeiro di me dar o primeiro elemento do array. Entón, a función texto di me exactamente o que está dentro da célula dende que eu quero investigar sobre ese texto. Finalmente, imos converter en minúscula para que poidamos facer consultas de texto se insensible. Por fin, quero ver se esa secuencia dentro dunha táboa contén a cadea que está a procurar. A función indexOf en JavaScript fai exactamente iso. Dinos esta cadea contén outra cadea. Se é certo que a célula contén o que eu estou buscando, entón eu quero estar seguro de que é mostrado. O método show vai dicir: "Mostrar o elemento." Se este non é o caso, entón iso significa que eu estou a buscar non está contido dentro desa liña, e así que quero é ocultar o usuario. Que atinxe ese fermoso efecto de filtrado onde xa non vemos a táboa enteira. Se vostede está interesado en como facer este Ticker, así como, imos publicar a fonte en liña. Pero é realmente sinxelo. JQuery ten métodos incribles para estas animacións e propiedades de manipulación de CSS. Entón, iso é todo para min. 

O que entón está á fronte? Como podes ver en poucos días, a proposta final de proxectos é debido. A proposta final de proxectos ha pedir-lle algunhas preguntas, pero entre eles será de tres etapas - un marco "bo", un mellor marco e unha mellor un. A idea é realmente para axudar vostedes súas expectativas para que minimamente vai ser feliz coa saída do seu proxecto final e vai ser "bo" tan lonxe como está preocupado. Pero, entón, o interese de obter-lle chegar un pouco para algo mellor ou mellor algo, nós tamén imos clasificar de empurralo lo cara a ese tamén. O CS50 Hack a Thon, mentres, está en poucas semanas. Normalmente, facemos isto nunha base base de lotería por mor do interese, pero as probabilidades son que imos tomar algunhas centenas de nós no autobús de Harvard Square ata Kendall Square, onde a Microsoft ten unha fermosa instalación apropiadamente chamado "nerd" - New England Research e Development Center. Nós imos chegar alí en torno a oito horas Nós imos ter un pouco de comida. Preto de 01:00 teremos comida un pouco máis. Preto de cinco horas, se aínda está acordado nós imos de cabeza para ihop ou leva-lo de volta ao campus. O obxectivo non é mergullo en proxectos finais á beira de compañeiros e empregados. Entón algúns días despois é a Feira CS50, que é realmente pretende ser unha oportunidade para vostedes para dar a coñecer o seu traballo e realizacións para o semestre mentres esfregando os ombreiros uns cos outros e obter unha sensación de que todo o mundo fixo. Co que dixo, moitas grazas a Tommy ea José, e imos ver vostede o luns.  [Aplausos]