[Powered by Google Translate] [Semana 9, continuação] [David J. Malan - Harvard University] [Esta é CS50. - CS50.TV] 

Este é CS50. Este é o fim da semana 9. Muito obrigado. Finalmente. Semana 9. Eu tenho. Hoje vamos continuar nossa conversa sobre programação web com um olho para o projeto final não, porque você tem que fazer algo baseado na web para projetos finais, mas porque tanto para projetos finais ou depois CS50 esta é certamente a direção em que o software moderno está indo. E ainda não é realmente uma coisa fácil. Na verdade, uma das coisas mais difíceis de fazer é o aspecto do design. 

Por exemplo, pelo projeto, queremos dizer realmente começando a interface do usuário ou a experiência do usuário certo. Eu ouso dizer - e sabemos que a partir de um conjunto de problemas recentes quando alguns de vocês foi ao ar suas queixas sobre algum pedaço de software ou hardware que enfurece você, seja no campus ou fora - há um monte de sites por aí, há um monte de hardware lá fora, que tipo de droga. Mas a realidade é que fazer coisas que são fáceis de usar, mas não deixam de ser poderoso É um desafio muito difícil. Então, para hoje eu pedi José e Tommy a se juntar a mim aqui para que possamos ter uma conversa, tanto sobre o projeto e que tipos de processos de pensamento deve começar a passar por sua cabeça Quando você cria seus projetos finais, os seus futuros empreendimentos. E então, com a ajuda de Tommy veremos alguns dos detalhes de implementação. Como você pode ter uma visão em papel ou em sua mente que você pode executar programaticamente usando algumas das tecnologias e técnicas que acabou de começar a falar, ou seja, JavaScript e algo ainda mais recente, ou seja, AJAX, Asynchronous JavaScript. Isso permite que você crie todos os dinâmica mais de uma interface de usuário obtendo mais e mais dados, progressivamente a partir de um servidor. Então, vamos ver alguns desses trechos bem hoje. Como um aparte, se você estiver interessado em se concentrar em ciência da computação ou minoring em ciência da computação, saiba que esta sexta-feira ao meio-dia Maxwell em Dworkin 221 haverá um evento de pizza onde você pode aprender um pouco mais sobre a ciência da computação. Em seu caminho para fora da porta, hoje você vai ser capaz de pegar um guia não-oficial de CS em Harvard. Vamos colocá-lo em latas de lixo fora na altura da cintura de modo que, se você gostaria de pegar isso e aprender um pouco mais sobre CS, que vai estar lá para você como foi na semana 0. Além disso, se você gostaria de se juntar a nós para CS50 almoço nesta sexta-feira às 1:15 pm, cabeça para cs50.net/lunch. Sem mais delongas, eu dar-lhe ensino companheiro José Ong. Oi. [Aplausos] Obrigado. A primeira vez que eu aprendi sobre o projeto estava em uma classe aqui chamado CS179. 

O professor da vez nos contou a história sobre outro professor que tinha ido para um hotel e usou as torneiras. Alguém pode me dizer o que os dois botões do lado esquerdo e direito fazer? [Aluno] quente e fria. >> Quente e fria. Bom. O que você normalmente espera, certo? Este professor depois de usar a torneira quer tomar um banho, e ele passa a usar isso. Ele acha que a esquerda e os lados direito são para quente e frio, certo? Mas alguém pode me dizer o que estes realmente fazer? Quaisquer mãos? [Resposta do aluno inaudível] >> Uma sugestão é? [Resposta do aluno inaudível] Temperatura? >> Então um deles controla a temperatura e os outros controles? >> [Aluno] pressão da água. Pressão da água. Bom. Este professor caminha para isso e, pensando que eles estão controlando quente e fria, transforma a um direito, que ele acha que é para quente, todo o caminho até porque ele quer tomar um banho quente. Bem, estes realmente não combinam, assim que começa esta experiência não muito divertido de estar em um banho de água fria, e todos nós sabemos o que sente. Este é um exemplo de uma falha de design. O que quero dizer com isso é a sua expectativa da torneira não encontrou o que saiu do chuveiro, que é uma espécie de infeliz para ele. Portanto, este é um exemplo de uma falha de design que acontece na vida real. Mas nós vemos todos os tipos de as outras também. Nós não somos provavelmente os fãs do sistema MBTA. Este é um sistema de metrô, na verdade, em Londres, que diz: "Este botão não está em uso." Por que é mesmo lá? Por que se importa? Quando eu era criança, sendo a tecnologia esclarecido na casa, sempre que o computador poderia falhar, minha mãe veio a mim, mostrando-me esta tela e me perguntando o que aconteceu. 

Mesmo que eu não sei o que isso significa. [Risos] O que? [Risos] Às vezes nos sentimos como os desenvolvedores de software são apenas corrico nós. Como usuários, somos como, "O que está acontecendo? Alguém nos dizer." Isso tudo se resume a uma questão de design. Design, como podemos ver, não é puramente sobre a estética, não é sobre como as coisas são. Vemos aqui que este pequeno pop-up por aqui, na verdade, parece muito bom. Ele tem uma sombra no fundo, tem raios de fronteira em curso. É uma espécie de bonito. Não está muito bem concebido, porque não é muito amigável. Que pouco pop-up que surge realmente não me dar qualquer informação sobre o que está acontecendo, isso não me diz nada de como o usuário sobre como recuperar desse erro. Queremos pensar sobre as coisas que o design não é. Primeiro, não é estética. Também não é encher o seu aplicativo com toneladas de funcionalidades desnecessárias. Se você é um restaurante tailandês, você provavelmente não quer ser dentista, ao mesmo tempo. E com Perguntas do Facebook não, que muitas pessoas usaram e não era realmente o cerne do que eles estavam construindo. E por isso é bom pensar não sobre tanto a quantidade das coisas que você está colocando a sua aplicação, mas a qualidade e como você está fazendo com que a experiência do usuário melhor por realmente melhorar em cima do que você já tem. 

Em poucas palavras, o projeto diz-nos o que devemos construir. Por exemplo, se nós estamos construindo algo que vamos buscar as coisas, como o Google, por exemplo, que devemos fazer as coisas de uma maneira que requer que o usuário tomar muitos cliques para chegar ao que eles querem, ou devemos fazê-lo de uma forma, por exemplo, com o Google Instant ou autocomplete que nos permite chegar aos nossos resultados mais rápidos? Engenharia envolve, como Tommy irá mostrar-lhe, na verdade construindo. Há muitos tipos de design. Por exemplo, se você está construindo algo para implantar algo em um país do Terceiro Mundo, onde não há muita eletricidade ou que a tecnologia muito, você tem que projetar o que está construindo de uma maneira que permite o acesso fácil para as pessoas. Mas que tipo de outras decisões de projeto poderia haver ou pode ser envolvido em algo assim? Sim. Eu vejo uma mão. [Resposta do aluno inaudível] Direito. >> Exatamente. Acessibilidade é uma coisa. Muita gente não pensa: "O que os meus usuários?" como os extremos de um ou outro espectro. Tenho usuários que podem ter deficiência de que eu não estou pensando sobre e eu só estou pensando em projetar para o usuário em geral. A Internet é acessível por todos hoje em dia, e eu deveria estar projetando para essas pessoas também. Que tipo de outras decisões de projeto que você poderia fazer? Sim. >> [Aluno] Custo. Custo. Muito bom. Outra coisa que pode basear nossas decisões de design são em custo. Se nós somos um negócio, você quer construir algo que não tem custo muito mais para produzir mas pode vender a um custo particularmente elevado ou pode nos levar algum lucro. 

Estes são todos os diferentes tipos de design, mas quando estamos construindo algo na Internet ou quando nós estamos construindo algo que provavelmente não custa muito para construir-se, agora, como aplicações de Internet - você não tem que jogar muito capital para ele a fim de fazer algo que realmente funciona - o que está mais preocupado com é a experiência do usuário. Nós chamamos este projeto centrado no usuário. Essencialmente, o que envolve projeto centrado no usuário é colocar-se no lugar de seus usuários. Se alguém se inscrever para o que eu estou construindo, eles, obviamente, vir a minha aplicação em particular com um objetivo em mente, com uma tarefa que pretende concluir. E o seu trabalho não é apenas para ajudá-los a completar a tarefa mas para ajudá-los a completar a tarefa de forma que seja eficiente, intuitivo, e, como uma pessoa disse ali, acessível. O que significa eficiência? Eficiência significa a rapidez que meu usuário completar a tarefa dada a minha interface. Leva muitos cliques para eles para ir de um lugar para o outro? É tedioso? Será que eles têm para realizar muitas tarefas repetitivas? Queremos tornar o processo o mais eficiente possível para que eles não tem que fazer esses tipos de coisas. Quanto a intuição, ou seja, por exemplo, se um utilizador olha para o meu interface, é mais fácil para eles para ir de um lugar para outro? É fácil para eles para descobrir o que eles tem que clicar na minha interface a fim de que para atingir a meta ou tarefa que eles querem atingir? 

E, finalmente, como uma pessoa disse lá, a acessibilidade é muito importante. [Orador masculino] Ele vem com a acessibilidade para coisas como visão, gosto de como eu realmente projetar algo para alguém que é cego? Oh. Para as pessoas que não podem ver em tudo, temos algo chamado leitores de tela. O que você deve fazer é que você deve construir o seu site de uma forma que, por exemplo, tecnologias específicas que chamamos - Há muitas coisas agora. Eu acho que há leitores de ecrã JAWS chamados. Muitas dessas coisas confiar no que chamamos de regras área , a fim de ler para o utilizador que está presente na página. Para aquelas pessoas que não podem ver, você precisa ter certeza de que esses leitores de tela pode realmente pegar o conteúdo da página e pode realmente mostrar a seus usuários, se você não pode ver, pelo menos você ainda pode entender o conteúdo da página. Sim. Okay. Chega a falar de um bom design. Vamos falar sobre o design ruim. Estas são coisas que você não deve fazer. Alguém pode me dizer sobre suas experiências com Craigslist eo que eles pensam não é tão grande sobre este projeto? Sim. >> [Aluno] Eu acho que há muitas palavras em uma área. Muitas palavras, certo? Completamente esmagadora. Você chegou a esta página e você se depara com um monte de coisas aqui que pode até não importa para você. Por exemplo, você vive em um estado que não comece com essa letra. Vamos dizer que você mora no Texas ou algo assim. 

Você tem que percorrer todo o caminho até a página para chegar ao local que você está. Eu sou de Boston, então deixe-me olhar em Massachusetts. Onde está Massachusetts? Ah, é aqui mesmo. Ah, é Boston. Okay. Vamos olhar para Boston. [Risos] Muito impressionante, certo? Coisas embaraçosas lá. [Risos] Vamos dizer que eu estou procurando um lugar para viver. Quantas pessoas realmente usado Craigslist? Toneladas de você. Há maneiras muito ruim de olhar para isso, mas vamos olhar para isso. Qual é a diferença entre img e pic? Alguém pode me dizer? Há, na verdade, não há diferença. Eles querem dizer exatamente a mesma coisa, mas eles têm rótulos diferentes para eles por algum motivo. Se eu clicar em tem imagem, não acontece nada na página. Na verdade, eu tenho que clique em Pesquisar novamente para que algo aconteça. O que poderia ser uma melhor decisão de projeto que poderia ser feito lá? Se eu estou clicando sobre esse filtro, eu provavelmente deseja filtrar essa ação em particular ou categoria que particular. Então, ao invés de ter que pressionar Pesquisa novamente, eu poderia apenas automaticamente fazer a filtragem tipo de estilo do Google, onde fazê-lo imediatamente. [Malan] Mas não se forma, como temos visto, até agora, tem que ser fisicamente apresentado por bater Digite pelo menos, ou clicando em um botão? Como você viu até agora, você realmente tem que clicar em Enviar para fazer essas coisas. 

Mas, como Tommy vai mostrar em um segundo, na verdade existem maneiras de você de tal forma que quando você clica em que a coisa pode enviar automaticamente o que chamamos de um pedido de AJAX e obter dados de volta e filtrar os resultados instantaneamente. Há toneladas de coisas que estão erradas com esta interface. [Malan] Você pode procurar Cambridge? Há algo ligeiramente anômala aqui onde você se preocupa com Cambridge e você ainda está recebendo Westford, Spring Hill, West Newton e outros. Provavelmente não é o ideal. >> Provavelmente não ideal. Como eu poderia ser capaz de fazer a experiência do usuário melhor sobre esta página particular? Sim. >> [Aluno] Instruções. Okay. Instruções em que tipo de sentimento? [Estudante] Por exemplo, uma coisa para usuários iniciantes, que nem sequer sabem o que é Craigslist ou você não sabe o que é suposto fazer. Direito. Então, explicando o Craigslist está nesta página é importante. Podemos realmente dizer aos usuários que esta página é realmente para. Se eu estou apenas visitando este, eu vejo um monte de lugares. Eu não sei mesmo o que eles significam. Mas o mais importante, só de olhar para essa interface, lembro que eu tinha que rolar uma tonelada de coisas para encontrar uma determinada comunidade que realmente se preocupava com este. O que é uma maneira mais rápida que eu poderia fazer isso? Sim. [Aluno] dividi-los em regiões leste, oeste. Ok >>. Eu poderia dividi-los em categorias mais que poderia me ajudar a determinar mais rapidamente como chegar a esse local específico. [Aluno] Coloque uma lista drop-down. >> Direito. Okay. Eu poderia usar um menu drop-down, porque temos um conjunto fixo de coisas e podemos mostrá-los em um menu drop-down. Dessa forma, ele não ocupa muito espaço na tela. Mas ainda melhor do que isso, o que podemos fazer? Sim. >> [Resposta do aluno inaudível] >> Você pode dizer isso de novo? >> [Aluno] caixa de busca. Sim, uma caixa de pesquisa. Isso é ótimo. O que nós podemos realmente fazer é se olharmos para trás na caixa de pesquisa slides,. Autocomplete. Maneira muito fácil de pesquisar os resultados que você sabe que está em um conjunto. Se eu começar a digitar BO, apenas me mostrar todos os resultados que tem dentro BO deles. Dessa forma, eu posso facilmente encontrar o caminho particular, eu quero ir para a em vez de ter de percorrer esta lista muito grande. 

Estes são todos os tipos de realmente fruto maduro que alguém que está a implementar Craigslist pode realmente fazer para tornar a experiência no site muito melhor para o seu usuário em particular. Okay. Chega de conversa sobre sites ruins. Vamos falar sobre Facebook. Quando o Facebook foi lançado, e fotos especialmente do Facebook, havia muitos outros serviços no momento em que poderia fazer exatamente as mesmas coisas. Eles podem organizar suas fotos em álbuns. O que você pode fazer é que você pode organizá-los em grupos também. Você pode organizá-los por data. Você pode fazer todas essas coisas particulares. Mas alguém sabe o que fez fotos do Facebook explodir no momento em que foi lançado? Sim. >> [Estudantes] Tags. Etiquetas. >> Exatamente. Temos Milo aqui, que é o nosso mascote cão com bandana que CS50. Você pode ver que temos esse recurso de marcação no meio. E o que fez as fotos do Facebook tão interessante do ponto de vista de usabilidade é que realmente permitiu que as pessoas através deste para envolver seus amigos em suas fotos. Para o Facebook, já que o seu site é particularmente social, é sobre como criar este tipo de atmosfera social. Isso melhorou a experiência de fotos muito mais porque eles poderiam realmente começar a dizer: "Estas são as conexões entre as pessoas, e estas são fotos sobre pessoas que você realmente gosta. " Parte do problema é também o narcisismo tipo. As pessoas gostam de ser marcado em fotos e coisas assim. Enquanto isso não é necessariamente uma boa característica humana, ao mesmo tempo, ele é baseado em decisões de bom design porque as pessoas realmente se preocupam com coisas como esta. Então essa é as fotos do Facebook. 

Mas vamos falar do Facebook em geral. Tenho certeza de que muitas pessoas aqui têm opiniões sobre o Facebook, ambos boas decisões de projeto e decisões de design ruim. Então vamos desabafar ou ser feliz. Vamos. Eu sei tudo de você usar o Facebook. Alguém tem que ter algo de ruim a dizer ou algo de bom a dizer sobre isso. Sim. [Aluno] no feed de notícias, há um monte de coisas que eu realmente não me importo. O feed de notícias não mostrar um monte de coisas que você pode não preocupam. Você tem amigos no Facebook que você não se encontraram por 2 ou 3 anos e você vê os seus resultados de notícias aparecendo em seu feed de notícias e você realmente não me importo com isso. Facebook tem realmente feito um esforço para fazer isso melhor, e eles realmente tentaram empurrar resultados relevantes para o topo do feed de notícias como de tarde para que você realmente vê as coisas por amigos que são relevantes para você ou seus amigos mais próximos. Mais alguma coisa? Sim. [Resposta do aluno inaudível] >> Você pode dizer isso de novo? [Aluno] Os anúncios são relativamente discreto. >> Em que sentido? [Resposta do aluno inaudível] Eles não têm luz na tela, como banners. Okay. Isso é bom. Se você se lembrar da Internet a partir dos anos 90 - >> [Malan] eu estava lá. >> Ele estava lá. [Risos] Você pode se lembrar de fundos piscando GIFs, brilhantes coisas, GeoCities tipo estilo de coisas. Isso não é realmente um exemplo de um bom projeto porque é realmente uma distração do conteúdo. O site de arte Yale costumava ter GIFs animados como seu fundo e você não poderia ler qualquer coisa na página, mas eu acho que alguém realmente conversei com eles e agora é um pouco diferente. [Malan] É muito melhor agora. >> É muito melhor agora, como você pode ver. >> [Malan] Oh yeah. Apenas grande, apenas - É. Okay. 

Parte dela também está fazendo sua página possivelmente muito minimalista e muito compreensível assim coisas sobre o fluxo de página de uma maneira que é muito lógico e não ficam no caminho do outro. Que tipo de outras coisas são boas ou ruins sobre o Facebook sobre o Facebook? Vamos ter uma conversa projeto aqui. Oh. Onde? Sim. [Aluno] O sistema novo cronograma permite pesquisar o perfil da pessoa sobre seu passado. Ooh, Timeline. Linha do Tempo é uma grande coisa, porque ele permite que você perseguir seus amigos quando eles estavam na escola. Timeline é bom porque permite que você filtre através de conteúdo muito mais rápido, ele permite que você encontrar coisas que de outra forma teria levado muito tempo para encontrar apenas a rolagem para cima e para baixo, para cima, cima, cima, cima, cima, como voltar no tempo. Mas depois há também uma espécie de desvantagem para que em termos de experiência do usuário. O que pode ser isso? Grande palavra que começa com P-R. >> [Aluno] de Privacidade. Privacidade >>, certo? Privacidade é uma questão de enorme experiência do usuário. Esta é uma das coisas que eu mais odeio sobre o Facebook agora. [Risos] [Malan] Como eu agora. David não sabia que isso realmente aconteceu até ontem. Então agora ele sabe que cada vez que eu conversar ele eu sei que ele está me ignorando. [Malan] A parte estranha foi que eu estava realmente ignorá-lo, e eu não sabia que ele sabia que eu estava ignorando-o. [Risos] A privacidade é um enorme problema. Alguém aqui pode me dizer o que pode ser ruim sobre o Facebook privacidade além do fato de que eles fazem coisas como esta? O que é particularmente difícil de fazer em relação ao Facebook privacidade? Esse tipo de é uma questão de liderança. Sim. >> [Aluno] Ocultar suas fotos de certas pessoas. Direito. Exatamente, para esconder suas fotos de certas pessoas. Eles têm este botão pequeno, pouco no canto superior direito que permite alternar a privacidade de uma foto. Suas opções de privacidade são muito variados entre diferentes tipos de menus. 

Eles ficaram muito melhor sobre isso recentemente, mas que costumava ser o caso que sempre que você queria evitar que seus amigos a partir de fotografias de ver, você teria que passar por um processo muito complicado de 5-passo de ser como, deixe-me clique neste link, agora deixe-me clique novamente, deixe-me clique novamente, Deixe-me especificar quais as pessoas não podem ver minhas fotos. Isso não é particularmente boa por parte do Facebook porque tanto sobre a experiência do usuário é realmente dar-lhes a liberdade para controlar o que as pessoas podem ver. Chamamos isso de controle do usuário e liberdade. Se você não está permitindo que seus usuários fazem isso de uma forma que seja eficiente e intuitiva, então a sua experiência de usuário que não é realmente grande em tudo.  Será que vocês gostam de dizer qualquer coisa sobre o Facebook? Como faço para desligar isso? [Ong] Você não pode desligar isso, e isso é uma falha enorme usabilidade por parte do Facebook. Este recurso - Na verdade, eu olhei para ele ontem - é tanto que você não pode fazer isso ou ele está enterrado em algum lugar muito, muito profundo nos recessos do Facebook, porque eu não consigo descobrir como desativar essa funcionalidade em tudo. [Malan] Mas às vezes essas decisões não são óbvias porque vocês deram-nos uma grande quantidade de informações úteis sobre várias aplicações CS50 e sites que o curso utiliza. Nós não implementou todos esses pedidos e sugestões. 

Parte do que é para receber pedidos de tantos que é uma função do tempo, mas às vezes nós apenas tomar uma decisão consciente, como, "Obrigado pela sugestão, mas discordamos." Assim como você realmente decidir o que você deve fazer se os seus usuários acho que você deveria fazer algo mesmo se você não necessariamente? É um bom equilíbrio entre realmente ouvindo o que os usuários dizem e realmente ter algum tipo de linha que você diz, "Nós não vamos fazer o que esses usuários dizem." E, em particular, eu acho que houve uma citação de Henry Ford que resume isto muito bem. "Se eu tivesse perguntado às pessoas o que eles queriam, eles teriam dito que queriam cavalos mais rápidos." Alguém pode classificar de destrinçar o que essa frase realmente significa? Não é apenas o que os usuários sabem o que querem, mas é mais do que - [Aluno] Eles não sabem o que é possível. Em parte, eles não sabem o que é possível. Tease que, além de um pouco mais. O que quer dizer com isso? [Resposta do aluno inaudível] Isso é bom. O que eu acho que nós estamos tentando dizer aqui é que as pessoas sabem o que querem. Eles querem que os cavalos mais rápidos. O que eles realmente querem é a capacidade de se mover mais rápido, mas eles não sabem realmente o meio pelo qual a conseguir isso. Quando você vem para seus usuários e seus usuários lhe dizer uma coisa e eles dizem: "Nós queremos esses recursos e esses recursos e esses recursos", você não quer necessariamente pensar, "Deixe-me ir em frente "E implementar o que diz explicitamente" mas o que você quer pensar é: "Que tipo de idéias eu posso conseguir com isso?" O que eles realmente querem? 

E a partir daí o que você pode fazer é criar algo que satisfaça os pedidos mas não necessariamente da maneira que o usuário espera que seja satisfeita. Assim, para algo como projetos finais, em termos reais, o que é uma heurística útil quando se trata de fazer algo melhor, especialmente se o designer tem essa arrogância sobre ele pelo qual você espécie de saber o que é melhor, você pode tirar a entrada de seus usuários, mas como você realmente ir sobre a obtenção de que o feedback? Em projectos finais, muito concretamente, o que produz melhores resultados aqui? O que produz os melhores resultados - e vou passar por cima isso em um segundo - É este processo de desenvolvimento e, em seguida, testar e, em seguida, a iteração. O que eu quero dizer com o teste é geralmente quando você projetar algo Você acha que é bastante bom, como, "Eu sou como um designer ótimo. Todo mundo vai adorar isso." E depois de colocá-lo lá fora, e as pessoas realmente não gosto disso por algum motivo. O que você tem a fazer é que você tem que tomar as partes de coisas que as pessoas fazem como e renovar as coisas que as pessoas não gostam. Soa como um processo muito óbvio, mas este processo de constantemente interagindo em cima do que você já construiu é um processo que ajuda a não apenas refinar suas habilidades de design próprio, mas também ajuda a refinar o projeto para que as pessoas realmente apreciamos o seu produto ainda mais do que antes. 

Eu vou passar por cima de mais exemplos concretos do que você pode realmente fazer. Como uma espécie de último exemplo de um produto, vamos olhar para caiaque. CAIAQUE quando saiu era muito, muito popular. Alguém pode adivinhar por quê? Quais são os tipos de coisas que você gosta sobre isso se você tê-lo usado ou quais são os tipos de coisas que você não gosta? Sim. >> [Resposta do aluno inaudível] >> Okay. Isso é parte do que é deixar o usuário tiver uma consulta que é mais expansivo de uma forma muito restritiva como, "Você tem que escolher sua data de início "E você tem que escolher sua data de término." Na verdade, ele permite que você seja flexível sobre isso e dá-lhe todos os vôos nesse intervalo. Mais alguma coisa? [Aluno] Eles incluem as taxas no preço. Eles não incluem as taxas no preço. Os impostos e as coisas realmente vão direto para que o preço no canto superior esquerdo então você não está enganado em pensar que você está realmente pagando por um vôo $ 240 quando é realmente $ 330. Mais alguma coisa? Sim. [Resposta do aluno inaudível] Eu não tenho certeza se eles realmente deixar você fazer isso. Eu posso estar errado. Isso pode ser uma coisa interessante, se você quiser colocar mais peso em especial filtros de modo que eles empurram os resultados relacionados com esse filtro para o topo. Mas alguém pode me dizer o que há de tão especial sobre este lado esquerdo? Como você tradicionalmente procurar um vôo em um serviço de Internet antes disso? 

Sim. >> [Resposta do aluno inaudível] >> Você pode dizer que - [Aluno] Cada companhia aérea. Sim >>. Cada companhia aérea tem o seu próprio site. Isso consolida as coisas. E? [Aluno] Você sabe exatamente o tempo que você está saindo. Você sabe exatamente o que tempo você está saindo, mas relacionada com os filtros, em particular. Deixe-me puxar para cima caiaque. Oh Deus, pop-ups. Má experiência do usuário. O que acontece quando eu passar esse controle? [Aluno] atualizações automáticas. >> [] Ong atualizações automáticas. Isso é algo que é muito importante. Antes disso, sempre que você queria procurar um vôo, você tinha que colocar no seu local de entrada, o seu local de saída, Pesquisa de imprensa, ele deve processar isso e mostrar seus resultados. Se você quiser alterar a sua consulta, você teria que pressionar para trás duas vezes, entrar em uma nova consulta a partir do zero, e depois fazer tudo de novo e de novo. A coisa agradável sobre algo assim é que ele usa uma coisa muito [ininteligível] no meio. Sempre que você faz algo como isso, ele dispara um pedido e ele retorna todos os resultados imediatamente. Este tipo de feedback imediato é algo que fez KAYAK popular porque é muito fácil para mim basta mudar a minha consulta e descobrir as coisas que estão em torno de um determinado intervalo sem ter que ir para trás e para frente, para trás e para frente, para trás e para frente. Então, esses são todos os tipos de coisas que você quer pensar sobre quando você está projetando seu site. Como posso fazer isso muito eficiente para meus usuários que passar por tudo o que está trabalhando e para chegar ao seu objectivo final o mais depressa possível? [Malan] E a ponto de José anterior sobre os usuários não necessariamente saber o que eles querem, com base no que vocês já sabe sobre HTML e você tem caixas de seleção, botões de rádio, menus de seleção, campos de entrada e similares, como é que você implementar a noção de escolher um horário de início para um voo? 

Qual desses mecanismos UI vários você usaria? Se você só sabe a quantidade de HTML que foi ensinado antes e você sabe que as entradas são botões de rádio, caixas, menus suspensos, e caixa de entrada, qual seria a sua escolha natural ter sido para escolher datas? [Aluno] Entrada. Entrada. >> Ou talvez até um drop-down com todas as datas, certo? Assim, com mecanismos de interface do usuário mais complexas como esta do lado esquerdo que você pode implementar, você pode tornar este processo muito mais intuitivo com um controle deslizante porque o tempo é contínuo, e as pessoas geralmente não pensam em termos de pedaços discretos. Tudo bem. Última coisa. Dez heurísticas de usabilidade. Todas as coisas que falamos provavelmente cair em uma dessas categorias. Se você vai para este link, que os locais serão publicadas on-line, você vai realmente ser capaz de, como você projetar seu site, manter essas heurísticas em mente e essas regras de ouro. Para seus projetos, o que eu sugiro que você faça, a fim de projetar sua aplicação melhor é fazer protótipos de papel primeiro. Quando você está pensando sobre sua aplicação, muito rapidamente esboçar o que você quer que ele se parece e certifique-se todas as caixas estão dispostas de uma maneira que é muito intuitiva para o usuário a usar e até mesmo mostrar os protótipos de papel para seus amigos e começar a grupos de foco. Basta chegar 2 ou 3 pessoas e pedir-lhes para simplesmente tocar nesses protótipos de papel, e mostrar-lhes novas telas para ver se eles realmente entender o que está acontecendo. 

O que você quer fazer é dar-lhes uma tarefa, motivar essa tarefa, e apenas dar-lhes o app e deixá-los usá-lo. Não lhes dê instruções para além disso. Você quer realmente deixá-los interagir com a sua aplicação de uma forma que permite que você veja como eles iriam usá-lo se você não estivesse ao lado deles. E isso é muito importante. Isso vai lhe dar muitas idéias como a gente se locomover coisas particulares de uma maneira que eu não tinha a intenção de que eles? Eles estão usando mecanismos de interface do usuário na tela de uma forma que é uma espécie de hacky? Eu não tinha a intenção de que eles façam isso dessa forma. E uma vez que você fez com que, o que você quer fazer? Rochas de seu projeto, certo? O que você quer fazer é que você quer desenvolver e, em seguida, fazer o processo de novo. Assim, mostra aos amigos uma vez que você desenvolveu, testá-lo, desenvolver, testar, desenvolver, testar, repetir, sobre e sobre e para a frente. Design é um processo iterativo muito neste sentido. Você realmente tem que construir algo e depois perceber coisas sobre ele que você não percebeu antes e voltar e melhorar com isso. Agora, quanto a parte de desenvolvimento, isso é o que Tommy vai mostrar-lhe após o intervalo e como você pode ser capaz de implementar algo como autocomplete de uma forma que é bastante simples. [Malan] Como Tommy define-se aqui, uma pergunta então. Muitos dos primeiros sites - e quando disse José 1990 site estilo, era implementações onde se você queria para selecionar uma hora de início e um tempo final, francamente, de volta ao dia e até mesmo em alguns sites hoje, a maneira de fazer isso é você pegar uma hora de um drop-down, você escolhe minutos de um drop-down, talvez você escolher AM, PM e depois você faz isso três vezes mais. E assim, com 6 cliques e talvez alguns de rolagem o usuário pode realmente fornecer algum tipo de data e / ou intervalo de tempo neste sentido. 

Então, definitivamente, de qualidade inferior e, portanto, ainda agora vimos nenhuma capacidades expressivas em qualquer das línguas nós olhamos para fazer algo mais sexy como esse controle deslizante de tempo de início e fim. Mas se você acha que volta para semana 0 quando falamos sobre Scratch, lá também não havia elementos que apenas fez certas coisas. Você realmente só tinha estes fundamentos como loops e condições e similares. Então tipo de apenas pensar muito abstratamente agora, independente dos elementos de HTML, o que realmente está acontecendo com algo como hora de início e slider tempo do fim? Quando eu passar meu mouse e clico em que o símbolo de cenoura pouco à esquerda e começar a arrastar, por meio de programação, o que é que você quer ser capaz de implementar para que isso aconteça? Que perguntas, o que expressões booleanas que você quer ser capaz de fazer? O que está realmente acontecendo? Sammy? [Estudante] Onde está a posição do cursor? >> Boa. Onde é a posição do cursor? Isso foi algo que precisava expressar volta em Scratch, se foi com base no local ou mesmo a cor ou similar. Você pode se lembrar sempre assim momentaneamente na segunda-feira, havia todas essas coisas chamadas eventos no mundo da Web, e por isso há coisas como onclick e onkeypress e onkeyup e onmouseover e onmouseout. Então, percebemos que até mesmo estas coisas que estamos tomando para concedido na Web com sites como o Facebook eo Gmail, mesmo se você não tem idéia como você possivelmente implementar isso porque não há nada mesmo assim em palestra ou Conjunto de Problemas 7, perceber que, com esses fundamentos exatamente o mesmo, com HTTP e os parâmetros e GET e POST, com os insumos básicos de HTML que nós olhamos até agora e em um momento com os mecanismos programáticos que Tommy está prestes a introduzir você pode começar a expressar-se, tal como fez na semana 0 por muito intuitivamente arrastando e soltando. 

Assim, com o que disse, Tommy MacWilliam e algumas peças do puzzle novas para nós para a web. Tudo bem. Meu nome é Tommy e eu vou estar falando sobre JavaScript. Apenas uma renúncia: Eu sou da opinião de que o JavaScript é a melhor linguagem de programação em todo o mundo inteiro. Há muitas pessoas que discordam de mim, mas é simplesmente fantástico. Uma vez que você voltar para a C, se você tem que escrever C para outra classe ou de outras linguagens, É realmente frustrante em todos os detalhes de baixo nível que você tem que ficar atolado dentro Então, se você está sempre sentindo triste sobre como é chato C é escrever, apenas voltar, escrever algum JavaScript. É o nirvana. Você vai se sentir muito melhor sobre o seu dia ruim. Uma boa parte da magia de JavaScript vem de sua capacidade de manipular as coisas que já estão na página. Quando escrevemos nossos scripts PHP, foram executados no servidor, e, finalmente, que o script PHP provavelmente mostrará algumas HTML. HTML que foi enviado para o cliente, e então foi isso. Se o PHP queria adicionar um botão de uma página, por exemplo, não pode realmente fazer isso. Ele teria que prestar um novo arquivo HTML e toda enviar para o navegador. Com JavaScript sabemos que podemos atualizar as coisas enquanto eles já estão na página, e por isso podemos fornecer um feedback muito mais imediato, que realmente vai melhorar a experiência do usuário no nosso site. Apenas um rápido resumo de seletores de JavaScript. Nós sabemos que quando o download de uma página HTML, que vai ser representado no DOM. 

O DOM lembro é apenas uma árvore tão grande, onde os elementos estão relacionados nesta hierarquia grande. Quando trabalhamos com bancos de dados em pset 7, uma das primeiras coisas que precisávamos para saber como fazer era consultar o banco de dados. Nós temos esta tabela de usuários grande, e às vezes nós só quero dizer, "Eu só quero alguns desses usuários que correspondem alguma condição." Da mesma forma, quando temos o DOM precisamos de alguma forma de consulta-lo. Precisamos de alguma forma de dizer: "Eu quero que todos os botões que se assemelham a este "Ou de todas as imagens na página." E esses seletores nos permitem fazer isso. Então, basta uma rápida recapitulação. Este primeiro aqui, este # apresentar, o que é que vai escolher? Alguém se lembra? [Resposta do aluno inaudível] >> Sim, exatamente. Isso vai selecionar um elemento na página que tem uma identificação de enviar. E para que hash tag diz que este selector vai trabalhar com IDs. Como cerca de um segundo, isso. Centrado, o que será que escolher? Sim. >> [Aluno] Classe. >> Exatamente. Isso agora vai selecionar por classe. A diferença entre o ID e classe aqui é geralmente o ID deve ser único dentro de qualquer espaço que você está procurando mais. Então, se você procura de uma página web inteira, você realmente deve ter apenas um elemento com o ID certo, portanto, neste caso de apresentar. Com classes, por outro lado, pode-se ter mais do que um elemento na mesma página com a mesma classe. Isto pode ser útil para dizer eu quero selecionar tudo o que está centrado na página em vez de apenas uma coisa. 

E, finalmente, este último aqui é um pouco mais complicado, mas o que é que isto vai selecionar a partir da DOM? [Resposta do aluno inaudível] >> O que é isso? [Aluno] Tudo que é uma tag. >> Temos duas partes aqui. A segunda parte vai dizer que eu quero selecionar essas tags com uma marca de entrada, portanto, qualquer elemento que seja uma marca de entrada. Mas eu não quero só selecionar todas as entradas porque algo como um botão de envio poderia ser uma entrada e algo como uma caixa de texto poderia ser uma entrada. Assim, com estes colchetes Eu estou dizendo que eu só quero selecionar os elementos que são do tipo texto. Em algum lugar na minha tag HTML eu tenho um atributo chamado tipo, e o valor de atributo, que tem que ser texto. Assim como sobre esta primeira parte aqui? A primeira palavra de este selector é a forma, então eu tenho um espaço e então esta parte de entrada. O que isso faz, colocando a forma em frente a ela? Isso vai basicamente limitar a nossa consulta. Poderia ser o caso de que temos algumas entradas na página que não são descendentes de um formulário. O que isto vai fazer é isso vou dizer que eu só quero as marcas de entrada que têm algum lugar acima deles algum elemento pai de um formulário. E assim, desta forma nós podemos fazer essas consultas mais hierárquicas de modo que não apenas tem que selecionar tudo combinando um seletor dado. Podemos tipo de limitar o âmbito da consulta que para outra coisa. Portanto, agora que sabemos como selecionar elementos na página, vamos falar um pouco sobre AJAX. AJAX é um acrônimo ainda muito na moda que significa Asynchronous JavaScript e XML. O que acontece é que o XML é apenas uma maneira de representar alguns dados. 

Esse tipo de popularidade perdida recentemente, de modo que o X em AJAX não é usado o tempo todo. Basicamente, o que AJAX nos permite fazer é fazer solicitações HTTP do contexto de JavaScript. Quando estamos no nosso navegador web e estamos navegando em páginas e clicar em um link, o que o nosso navegador vai fazer é fazer uma solicitação HTTP para qualquer link que clicar. Mas isso nem sempre é ideal, porque se esse é o caso, então, como Davi estava dizendo: nós sempre temos que fazer os usuários clicar em um botão Enviar ou clicar em um link , a fim de fazer qualquer coisa acontecer, que vai envolver uma solicitação HTTP. Assim, com AJAX podemos fazer essas solicitações em nome de JavaScript. Isso significa que sempre que o usuário interage com a página ou acontecer alguma coisa, nós podemos realmente fazer um pedido programático para algum arquivo PHP outra em nosso site ou qualquer outra coisa e recuperar os dados que esse arquivo cospe para fora. Vamos dar uma olhada em um exemplo de AJAX. Esta é a nossa página de Finanças CS50 com o qual espero que alguns de nós estão familiarizados. Se olharmos para o código HTML da página, vemos aqui que eu adicionei algumas coisas, um dos que eu tenho dado esta forma uma identificação. Eu já disse id = "formulário de cotação". Eu fiz isso só porque ele vai fazer isso um pouco mais fácil de selecionar a partir do DOM desde que eu posso apenas fazer uma consulta muito simples. O que eu quero fazer aqui é que eu quero corrigir algum problema com CS50 Finanças. Então, se vamos para finance.cs50.net, cada vez que eu quero obter uma cotação, eu tenho que clicar nesse botão de Citação Get, e que Get botão de Citação em seguida, leva-me a outra página inteira. E se eu quiser outra citação, eu tenho que pressionar o botão Voltar e depois digite-a Eu recebo uma citação, e eu bati o botão Voltar. Isso realmente não é a melhor experiência do usuário. Quem poderia realmente usar o site, se é que lento para obter os preços das ações? Então, o que nós queremos fazer com AJAX é remover essa etapa de ir a uma página separada , a fim de ver os resultados. 

O que estamos realmente só pedindo é que o preço realmente pequeno, e isso é apenas uma quantidade muito pequena de dados. Portanto, não há necessidade de eu ir para outra página inteira de HTML, download de um novo lote de HTML, talvez baixar mais algumas imagens, alguns outros arquivos CSS só para mim para responder a essa pergunta muito simples de quanto custa esse estoque. Com AJAX podemos fazer isso muito mais fácil. Vemos aqui que eu estou ligando em um arquivo JavaScript chamado quote.js. Vamos realmente abrir o arquivo. Não há. Todos meus arquivos JavaScript vão ser localizado em HTML para que o navegador possa acessá-lo. Então nós temos um diretório separado aqui para JavaScript, e agora aqui é quote.js. No topo deste arquivo isso diz aqui que eu quero esperar por toda a página a ser carregada antes de tentar fazer qualquer coisa. Por que isso é necessário? Acontece que a próxima coisa que eu vou fazer aqui é começar a olhar para um elemento que coincide com algum selector. Se este JavaScript é sempre executada antes de este elemento é carregado na página, então, tudo que eu tento fazer é não ir trabalhar porque eu estou indo para tentar selecionar algo que não está lá ainda. Então esta linha em cima diz que eu quero que você espere até que tudo esteja carregado por isso estamos garantido que todos os elementos que eu estou procurando são realmente na página. Este sinal dólar aqui significa que eu estou usando a biblioteca chamada jQuery. Esta biblioteca jQuery nos permite usar esses seletores que apenas olhou. Ao dizer $ seguida, passando como um argumento este # formulário de cotação, Agora estou selecionando essa forma que nós apenas deu uma olhada. Agora eu tenho uma representação dessa forma em memória de alguma forma. 

Nesta objeto agora, esta representação da forma, Agora estou usando uma função chamado. O que esta função faz é que vai anexar um manipulador de eventos. O evento que vamos ouvir é o evento submit. Assim, quando o usuário clicar nesse botão Enviar ou pressiona Enter, este evento vai ao fogo. Ao ligar para isso, eu agora pode substituir o comportamento padrão do formulário. Sem esta JavaScript, a forma se submeteria a qualquer arquivo PHP usamos nesse atributo action. Mas em vez disso, eu estou dizendo agora, espere, espere, espere, eu não quero que você realmente fazer isso. Eu quero que isso aconteça antes de ir e tentar submeter a algum arquivo PHP. Agora o que eu quero fazer? Neste ponto, eu quero usar AJAX para carregar alguma forma no que o preço das ações é. A primeira coisa que eu preciso saber é o que estoque o usuário está olhando para cima. Para fazer isso eu vou usar outro seletor. Este é o terceiro seletor vimos antes. Este diz que eu quero começar este elemento forma com um ID de formulário de cotação. Então, em algum lugar dentro dessa forma, tem de haver um elemento de entrada que tem um nome de símbolo. Se olharmos para o nosso HTML, vimos que tinha uma entrada [name = símbolo]. Isso significa que este está indo para selecionar a caixa de texto que o usuário está digitando em. Isso é bom. Temos a caixa de texto. Agora só precisamos saber o que há dentro dele. Para isso, podemos chamar esse método aqui, este val., e este diz que eu sei o que você tem caixa de texto. Eu quero que você me diga o que é o usuário digitou na caixa de texto que. Agora temos uma string chamada símbolo que é igual a tudo o que o usuário digitou dentro Isso é bom. Podemos usar essa seqüência agora para fazer nosso pedido. Esta é uma nova função aqui, este $, exceto que não ficamos mais vai ser selecionar elementos, nós vamos estar chamando uma função diferente que é fornecido a nós por jQuery. Esta função AJAX é o que realmente vai fazer esta solicitação HTTP. Então, temos que dizer que algumas coisas. A primeira coisa que temos que dizer a esta função é onde eu quero o pedido para ir. Em algum lugar no meu projeto eu tenho esse arquivo dentro do diretório HTML chamado quote.php. Eu posso acessar esse arquivo, vimos, tal como este, se eu for para localhost / quote.php. 

Eu quero o meu JavaScript para fazer um pedido para que a página. Que tipo de pedido agora? Vimos antes que o formulário tem que method = "post" atributo, e isso significa que ele vai fazer uma solicitação POST, por isso não vai colocar qualquer coisa na URL, em vez de um pedido GET, que só iria ser demitido se apenas acessou a página com o navegador, por exemplo. Agora que já disse que quero fazer uma solicitação HTTP POST para uma página localizada no quote.php. Quando enviar o formulário, lembre-se que poderia acessar os elementos de entrada dentro do que a forma com essa variável $ _POST. Até agora, na história que não tenha realmente enviado junto quaisquer dados ainda. Acabamos de dizer que estamos fazendo um pedido de AJAX e aqui está o tipo de solicitação que estamos fazendo. Agora, precisamos realmente enviar alguns dados para a página. Para isso, podemos usar essa propriedade chamada de dados. O valor da propriedade é na verdade uma matriz associativa. A razão para isso é que nos permite enviar mais do que apenas 1 pedaço de dados. É por isso que temos essas chaves aqui aninhada dentro destas chaves outras curvas. As chaves nessas matrizes associativas vai ser a mesma coisa como os atributos nome em nossos elementos de formulário. Isso significa que, se eu enviar junto uma chave de símbolo, isso significa que a minha página PHP pode acessar esses dados com $ _POST [símbolo] assim como fizemos antes, quando estávamos enviar um formulário. E agora os dados reais que deseja enviar vai ser o valor dentro do array associativo. 

Nós valor este texto em um símbolo variável chamada, e por isso estamos enviando junto agora uma chave de símbolo e um valor de tudo o que o usuário digitou dentro Agora nós fizemos essa solicitação HTTP, o nosso arquivo PHP foi executado, e que vai enviar alguns dados de volta agora para o cliente que acabou de fazer este pedido. Agora precisamos responder a tudo o que o servidor nos disse. Para isso, temos esta última propriedade aqui chamado de sucesso. O valor desta chave do sucesso é, na verdade, vai ser uma função, e isso é uma das coisas legais que você pode fazer com JavaScript. Não apenas você pode ter ints ou matrizes como um valor dentro de uma matriz associativa, que também podem ter uma função. Assim dizendo sucesso, esta é a minha chave. Um cólon diz aqui vem o valor, e agora o valor deste é realmente uma função. Portanto, não precisa dar essa função um nome por si só. Podemos apenas dizer que este vai ser alguma função. Ele vai levar um argumento. O argumento para esta função vai ser qualquer que seja o servidor enviou-nos de volta a partir da solicitação. Assim como quando nosso navegador faz uma solicitação, o servidor envia algo de volta eo navegador exibe, no contexto de AJAX que acabou de fazer um pedido, o servidor enviou alguma coisa, e agora temos que representava como uma string. Com essa seqüência gostaria apenas para mostrar que na página. Para fazer isso eu vou ter um seletor passado. Eu quero selecionar o elemento com o preço de ID. Este é apenas um div vazio que eu criei na página, e eu quero definir o conteúdo dessa div a ser o que o servidor enviou-nos de volta. Eu realmente modificado quote.php um pouco. 

Em vez de chamar render e tornando alguns página, quote.php agora é simplesmente vai imprimir o valor do estoque como uma string. Então, se você realmente visitar a página, você teria apenas que ver que pequena cadeia de qualquer que seja o preço das ações é. Uma última coisa que precisamos fazer aqui é apenas garantir que esta função retorna falso. O que isso diz é que, se eu estou dentro de um manipulador de eventos e que manipulador de eventos retorna false em vez de voltar verdade, isso significa que eu não quero que o evento original ao fogo. Neste caso, se não tem alguma JavaScript e apresentado um formulário, nosso navegador é que vai dizer: "Eu vou enviar os dados ao longo", e eles vão mandar você para uma outra página. Como estamos usando AJAX, agora, não há necessidade de enviar o usuário para outra página. Nós apenas estamos indo para exibir os resultados de forma dinâmica nessa mesma página. Nós realmente não quer ir a qualquer lugar, e eu quero ficar na mesma página. Então, retornando false, podemos garantir que a forma não faz isso para nós. Vamos dar uma olhada no que este realmente se parece. Nossa página de cotação parece o mesmo. Deixe-me puxar para cima o inspetor aqui para que possamos ver o que está acontecendo. Torná-lo um pouco menos enorme. Lembre-se que abrir a aba de rede, este é o lugar onde nós podemos ver todas as solicitações HTTP que estão acontecendo na página. 

Para um símbolo me deixar digitar AAPL e clique em Obter cotação. Agora vimos que uma parte da Apple custa cerca de número de dólares só apareceu na página, mas a URL não muda em nada. Na verdade, aqui está a solicitação HTTP que nós fizemos. Fizemos uma solicitação POST para quote.php. Isso faz sentido. Isto é o que o servidor enviou-nos de volta. Não é mais esse documento gigantesco HTML com imagens e coisas assim, é apenas uma linha de texto, e então nós apenas exibida a linha de texto. Se voltarmos para os cabeçalhos e ver o que realmente enviado dentro desta solicitação HTTP, podemos ver aqui em baixo que enviamos ao longo de uma chave de símbolo e um valor de AAPL, que é o que o usuário digitou dentro Isso é bom, mas ainda é um pouco chato. Eu ainda tenho que clicar nesse botão para obter a cotação de ações. Nós somos pessoas muito ocupadas e não temos tempo para clicar em botões. Google percebeu isso um pouco tempo atrás quando implementaram Google Instant. O Google Instant faz é como você está digitando apenas começa a apresentar resultados para você assim você não precisa se preocupar com mesmo clicando em Pesquisar. Na verdade, uma história divertida relacionada a isso. Uma vez que o Google Instant saiu, as pessoas eram como, "Whoa, isso é super incrível." "Isso é tão legal." E um estudante de baixo de Stanford que tinha 19 anos na época fez este site chamado YouTube Instant. Todos instantânea do YouTube não é efetivamente pesquisar YouTube instantaneamente. Portanto, em vez de ter que ir para YouTube.com e bateu de pesquisa, quando eu começar a digitar algo no YouTube instantânea como CS50, podemos ver aqui que está a tentar em uma conexão lenta de Internet preencher esses resultados ao vivo. Para isso nós podemos realmente fazer uma modificação muito simples de nosso arquivo quote.js. Agora estamos anexando este evento quando o formulário é enviado. Nós realmente não queremos fazer o usuário enviar esse formulário mais, então vamos demitir vez este evento cada vez que o usuário pressiona uma tecla. Para isso vamos primeiro mudar o evento para apresentar keyup. Isso significa que, em vez de esperar que a forma de apresentar, cada vez que a tecla é pressionada, algo vai acontecer. Ele não faz mais sentido para anexar este evento keyup para todo o formulário. Nós realmente só se preocupam com a caixa de pesquisa. 

Para selecionar que, agora, podemos mudar este seja, em vez de formulário de cotação, formulário de cotação, e nós vamos ter uma entrada (tipo de texto =) ou, poderíamos dizer (nome do símbolo =) - o que queremos. Agora há uma última coisa que temos que fazer. Lembre-se aqui em baixo, quando disse que o retorno falsa nós dissemos que não queremos que o evento padrão para disparar. Mas isso só acontece que, se desabilitar que agora, tudo o que digitar não vai aparecer no navegador mais porque isso seria o comportamento padrão de digitar em uma caixa de texto. Não queremos mais para substituir esse, então vamos destruir este return false. Se salvar o que e recarregue a página, agora quando eu começar a digitar AAPL você vai ver que o preço das ações no fundo aqui está completando automaticamente. Então aqui está CS50 Instantânea Finanças. Na verdade, uma história divertida sobre o Instant YouTube é que o aluno apenas uma espécie de escreveu como um projeto de uma noite, e no dia seguinte foi-lhe oferecido um emprego pelo CEO do YouTube. Assim, tão simples como isso, você CS50 alunos, seus projetos finais que você pode obter um emprego no YouTube. Algo assim é uma idéia muito legal para um projeto final, certo? Tivemos algumas funcionalidades existentes que queríamos integrar. Nós melhorar a experiência do usuário um pouco, e de repente, buscando algo no YouTube instantânea pode ser muito mais fácil de procurar no YouTube regular. Então, isso é AJAX em poucas palavras. 

Nos exemplos que José estava mostrando, vimos um monte de autocompletes, e aqueles autocompletes são realmente, realmente útil, porque não temos de lembrar - Por exemplo, se você não se lembra do preço das ações da Apple e nós só sei que é algo aa, em vez de apenas dizendo para mim, "Uma parte dessa coisa custa tanto dinheiro", Eu tipo de gostaria de saber quais ações começar com aa. Podemos fazer isso realmente bem com a biblioteca Bootstrap que já está incluído dentro de CS50 Finanças. Se você vir até aqui para a marca de JavaScript e rolar para typeahead, este é apenas um plugin legal que alguém já escreveu para nós, e podemos facilmente usar a sua funcionalidade como este. Eu digitei um A e aqui está uma lista de alguns estados que começam com A. Vamos dizer que eu acho que isso é muito legal e é hora de incluir este na minha página. Acontece que isso é muito, muito simples. Vamos saltar aqui para quote3.js. Meu arquivo parece um pouco diferente. Até aqui todas as minhas coisas AJAX é o mesmo. Eu quero carregar os dados de estoque sem ter que ir para outra página. Mas agora eu quero usar este plugin. A documentação Bootstrap tem grandes exemplos de como exatamente eu posso fazer isso. Eu quero dizer, "Aqui é a entrada que eu quero autocomplete", e eu vou chamar esta função chamada typeahead, e que vai lidar com todas as coisas typeahead para nós. Ele irá inicializar a lista, que vai fazer todos os nossos filtragem. A única coisa que ele precisa saber é que dados estamos em autocompleting. Então, eu encontrei essa chave apenas lendo a documentação e olhando para os exemplos. Se I dão uma chave de origem, o valor desta chave é apenas uma matriz algumas das coisas que eu quero autocomplete. Esta variável veio deste outro arquivo. Eu abro symbols.js. 

Isto é apenas uma matriz symbols.js esta muito, muito grande, contendo cordas de todos os símbolos imagens de o NASDAQ. Se eu quiser voltar para o HTML, para jharvard, vhosts, globalhost, html, templates, quote_form. Desde que é agora chamado quote3.js, deixe-me alterar o arquivo JavaScript estou incluindo aqui. Agora eu tenho quote3.js, então eu vou carregar esse arquivo JavaScript separado, o que tem que Bootstrap autocomplete. Agora, quando eu voltar para o navegador, recarregue a página, e eu começar a digitar aa, há meu autocomplete. E foi realmente tão simples como isso. Eu tinha uma linha de código que apenas disse: "Aqui estão as coisas que eu quero autocomplete", e de repente eu tenho essa funcionalidade muito, muito agradável com não muito esforço em tudo. Como você está desenvolvendo sites e particularmente o lado frontal das coisas, você vai perceber que este é o caso muito. Há muito, muito muito, muito legal de bibliotecas livres lá fora que o tornam super fácil de fazer coisas como esta. Alguém pode pensar em quaisquer inconvenientes de simplesmente autocompleting nesta lista grande de símbolos? O que poderia ser algo que não é o melhor com esta abordagem? Sim. >> [Aluno] Tempo, se você tem um monte de [inaudível] Sim. Agora nós estamos copiando este arquivo JavaScript enorme e há um monte de símbolos. E assim, se temos uma tonelada de coisas, este tipo de poderia aumentar a latência de não só buscar mas também fazer o download do arquivo real. Grande. Mais alguma coisa? Neste momento não há nenhum sentido real de relevância. Se eu digitar um A, as empresas que aparecem aqui podem não ser as empresas mais populares que começam com A. 

Antes de eu começar a Apple, isso pode levar alguns personagens muito mais para o que eu estou procurando. Este autocomplete não tem esse senso de relevância. Ele só vai dizer: "Qualquer coisa que corresponda vou apresentar." Em vez disso, eu gostaria de alguma forma, integrar alguma relevância em minhas pesquisas. Se eu passar por aqui para Yahoo! Finanças, finance.yahoo.com, Se eu tentar inserir um símbolo na página do Yahoo! Finanças e eu começar a digitar goog, eu tenho essa boa lista de coisas. Claramente, parece Yahoo! Finanças está a fazer algo mais inteligente aqui. Eles têm alguma relevância e eles também têm informações adicionais como o nome do estoque. Isso é algo que eu realmente não posso ficar com apenas uma lista meu estoque de símbolos. Eu quero isso e vou levá-la. Para isso vamos fazer algumas coisas. Vamos primeiro abrir o inspetor desta página porque vimos que esta página não está recarregando a todos, por isso é provavelmente usando AJAX de alguma forma estar carregando seus dados. Podemos descobrir quais os dados que está carregando. Se eu clicar nessa guia de rede, estes vão ser todos os pedidos que começam a ser demitido. Agora, se eu digitar goo, podemos ver que eu só tenho uma nova solicitação HTTP. Este é provavelmente o lugar onde os dados são provenientes. Com certeza, se eu olhar para esta URL, que é um pouco estranhamente nomeado, podemos ver que isso é exatamente onde o Yahoo é o envio fora de seus dados. 

Eu criei um arquivo separado chamado suggest.php que é muito semelhante em espírito para a função de pesquisa. É basicamente vai fazer uma consulta a URL do Yahoo, voltar alguns dados, e enviá-lo de volta para mim. Agora, em vez de usar essa lista grande, enorme de símbolos, Eu posso usar coisas boas do Yahoo relevância, e eu não tenho que baixar o arquivo JavaScript maciça. Eu só vou para puxar para baixo os símbolos de ações realmente relevantes. Vamos pular para dentro disso. Então, html, js. Estamos agora em quote4. Agora estamos não usa mais que grande lista de arquivos JavaScript. Mas há um pequeno tipo de problema de projeto aqui. Nós dissemos que a A em AJAX é assíncrona. O que isto significa é que quando eu faço um pedido de AJAX, tão certo aqui na linha 8, este é o lugar onde meu pedido AJAX é realmente demitido. Vamos dizer que agora eu tenho um código aqui que vai fazer alguma coisa gosto de alertar o usuário ou mudar alguma coisa na página. O que não vai acontecer é o navegador não vai esperar para este pedido para continuar antes de descer e bater esta linha. Essa é a parte assíncrona. Vai fazer esse pedido e dizer: "Sempre que você terminar, "Voltar e chamar essa função que eu lhe disse para chamar dentro de sucesso." Isso significa que não pode apenas baixar todas as ações de antemão. Nós precisamos fazer o pedido e esperar por algo para voltar. Isso significa que, antes, poderíamos simplesmente dizer Bootstrap, "Aqui está a lista de coisas que eu quero que você autocomplete". Nós não podemos mais fazer isso mais, porque não sabemos o que nós queremos, na verdade, autocomplete. Felizmente, Bootstrap pensado nisso, porque essas são caras inteligentes mais de lá, e eles realmente nos deu uma outra maneira de carregar este plugin typeahead. Antes, o valor da propriedade de origem era apenas uma matriz tão grande de coisas para autocomplete. 

Agora, a propriedade de origem é realmente uma função, eo objetivo desta função é descobrir o que as coisas para autocomplete sobre o são. A forma como ele vai descobrir isso é que vai pedir Yahoo! Finanças o que as melhores coisas para autocomplete são. Para fazer isso eu vou fazer um pedido muito semelhante AJAX. Vou solicitar esta página em suggest.php. Eu quero enviar ao longo dos símbolos ainda. E agora o meu sucesso, a documentação Bootstrap me disse que, a fim de preencher essa lista de coisas, tudo que eu preciso fazer é passar essa matriz agora para a função de retorno. Mas espere um minuto. Se este é suposto ser uma matriz e AJAX é me mandar de volta o texto, Como isso é possível? Isto introduz uma nova forma de troca de dados chamado JSON. Neste caso, não estamos apenas enviando de volta uma seqüência simples de texto. Agora estamos lidando com esta lista mais complexo de símbolos de ações. Estes símbolos de ações também pode incluir coisas como o nome da empresa ou os preços atuais. Usando apenas uma corda longa grande que não está formatado em qualquer forma previsível não vai ser a melhor maneira de obter esses dados a partir do servidor do Yahoo para mim de forma que eu possa compreender facilmente. JSON é uma tecnologia que tira proveito de como criar matrizes associativas em JavaScript. Isso se parece muito com uma matriz JavaScript associativa, e, na verdade, é porque é. JSON significa JavaScript Object Notation. Este é basicamente um formato acordado para a transferência de dados e para trás. Aqui este objeto JSON ou essa matriz JSON associativa está a enviar-me alguns dados sobre o curso. 

As chaves desse array são coisas como curso que tem um valor de CS50, e aqui podemos ver que eu possa ter um valor que é uma matriz. Eu não tenho de fazer coisas como analisar fora cordas e procurar por vírgulas e fazer coisas malucas assim. Porque este é declarado neste formato JSON, JavaScript e jQuery já tem funções para converter uma string que se parece com este JSON em uma matriz JavaScript real associativa que podemos trabalhar. Fazer isso é tão simples quanto dizer que já não é este arquivo suggest.php, me mandando de volta simplesmente uma seqüência de texto, mas eu sei que ele vai me mandar de volta JSON. Isto significa que aquele JSON pode ser convertida em uma matriz associativa JavaScript. E assim jQuery, gostaria que você faça isso por mim. Isto significa que este parâmetro resposta aqui, isso já não é apenas uma seqüência. Porque nós temos dito jQuery que aqui vem alguns JSON, jQuery vai ser inteligente o suficiente para dizer: "Você queria JSON?" "Eu estou indo para converter isso em um array associativo para você." Vamos realmente dar uma olhada no guia Rede, uma vez que temos quote4.js. Vamos mudar isso e recarregue a página. Agora vou digitar um-a novamente. Eu fiz um pedido casal para suggest.php, mas agora essa resposta, ao invés de apenas a corda, que é JSON. Então, eu tenho uma chave de abertura encaracolados, dizendo: "Aqui vem um array associativo." 

A primeira chave e só desse matriz associativo é chamado de símbolos, e então aqui é uma matriz de todos os símbolos relevantes chegando agora do Yahoo! Finanças não, a partir dessa lista gigantesca. É assim que eu pode simplesmente preencher este plugin autocomplete com alguns dados que não está vindo de um arquivo local que já está predeterminado mas de outra coisa. Acontece que nós podemos realmente tirar proveito de uma tecnologia chamada JSONP, ou JSON com padding, que vai eliminar esse intermediário suggest.php. Mas, em vez de fazer isso, vamos em vez dar uma olhada em como eu posso melhorar isso ainda mais. Eu realmente gosto de typeahead Bootstrap. É muito bom. Mas estamos ficando boa JavaScript e queremos tipo de fazer isso nós mesmos, talvez dê uma olhada no que este plugin poderia estar fazendo. Vamos deixar de usar essa coisa typeahead, e vamos tentar fazer essa lista de ações sugeridas nós mesmos. Aqui em quote6.php vamos começar da mesma maneira. Tipos de cada vez alguma coisa a alguém, nós queremos fazer um pedido de AJAX. Este é semelhante ao nosso instantânea Finanças originais CS50. Ao invés de fazer um pedido para quote.php, agora estamos fazendo um pedido para que o mesmo arquivo como antes, este suggest.php, que está indo só para extrair dados de Finanças Yahoo!. 

Mais uma vez, nós ainda estamos esperando JSON, mas agora desde o typeahead não está fazendo isso para nós, precisamos também enviará o valor que está dentro da caixa de texto atual. Agora sabemos o que pedir Yahoo! Finanças para, e agora aqui está a função que queremos executar uma vez que a solicitação for concluída. Não temos o plugin para fazer a lista para nós, então aqui é onde nós estamos indo realmente para construir uma lista de sugestões. Para fazer isso, bem como em PHP que concatenadas essas seqüências grandes de HTML então impresso deles, podemos fazer a mesma coisa que em JavaScript. Primeiro vamos começar esta string chamada sugestões, e essa seqüência é apenas vai conter algum código HTML. Nós queremos que seja uma lista de coisas, então vamos começar com essa tag lista, e agora estamos indo para iterar sobre todos os símbolos que foram devolvidos de volta para nós. Lembre-se, porque já disse dataType: 'json', isso não é uma string. Isso já é uma matriz para nós. Isso é muito legal. Podemos simplesmente dizer: "Eu quero que você acrescentar um elemento da lista." Vamos colocá-lo dentro de um elemento de um lado em que, nós vamos dar-lhe uma classe de sugestões de modo que sabemos o que é, e agora aqui é o símbolo que nós voltamos do Yahoo! Finance. 

Uma vez que criamos um elemento para cada um dos símbolos que chegamos de volta, só queremos fechar a lista. Então agora sugestões representa este pequeno fragmento HTML que quando colocados em uma página que vai ser a lista de coisas que estamos procurando. Agora vamos realmente colocar isso na página. Para fazer isso eu realmente criou outra div vazia e eu dei-lhe um ID de sugestões. Bem como vamos definir o conteúdo da div que mostrar o preço dos dados de estoque, agora só quero definir o conteúdo desta div para o que essa seqüência é que contém esses símbolos. Ao utilizar este método de HTML, esta variável sugestões, esta string, é uma seqüência de HTML. Eu quero que você tome que o HTML e colocá-lo dentro da div chamado sugestões. Acabamos de algo anexado ao DOM agora. Nós adicionamos alguns elementos novos para o DOM que agora podemos exibir na página. Vamos ver o que isso parece. Se carregar em quote6 e agora voltamos, agora quando eu começar a digitar AAPL, não temos mais que Bootstrap autocomplete, mas agora temos esta lista que fizemos a nós mesmos. Isto é um pouco mais feio do que o typeahead Bootstrap, por exemplo, mas isso não nos permitem fazer uma outra coisa. Quando estávamos a olhar para esse plugin Bootstrap, vimos que, quando autocompleted, um dos valores autocomplete foi AAPL. Isso pode não ser tão útil. Como usuário, eu poderia não reconhecer imediatamente todos os símbolos de ações. O que eu sou provavelmente mais propensos a reconhecer são nomes reais da empresa. Portanto, não seria realmente útil se ao invés de dizer AAPL isto dito algo como a Apple Inc. Porque nós temos rolou isso nós mesmos, nós podemos realmente fazer isso facilmente. Vamos abrir nosso arquivo última citação aqui, então quote7. 

Mesma coisa. Acabei de criar outro arquivo PHP que irá retornar para nós mais do que apenas os símbolos. Ele também irá dar-nos de volta nomes da empresa. E por isso estamos fazendo a mesma coisa. Estamos a fazer um pedido de AJAX. Uma vez que o pedido foi concluído, vamos executar esta função aqui, e esta função vai construir-se uma seqüência grande de elementos. Mas a diferença aqui é que o valor destas listas já não é apenas o símbolo, é agora o nome. Portanto, temos um pequeno problema. Quando usamos a nossa pesquisa, precisamos de alguma forma passar o símbolo. Não podemos passar algo de pesquisa como a Microsoft Corporation. Precisamos passar MSFT. Quando estamos escrevendo HTML, temos muito de Nice embutidos atributos. Um A pode ter associada a ela um href ou uma classe. Mas o que realmente precisamos agora é que cada um desses links ter um símbolo de ação a ela associados. Não há embutido atributo HTML para símbolo de ação, mas, felizmente, HTML5 nos permite criar nossos próprios atributos para ser o que quisermos. Ao dizer-símbolo de dados, eu introduzi um novo atributo cujo nome eu acabei de inventar, e isso é bom porque eu prefaciado com esses dados. Estamos indo para armazenar dentro de lá o símbolo do estoque agora. O que isso significa é que mesmo que nós estamos mostrando o valor do nome da empresa dentro do nosso autocomplete, ainda estamos lembrando o símbolo que está associada a cada uma das empresas. A maneira que estamos fazendo que está dentro deste elemento em si. Então isso significa que temos de fazer mais uma mudança. Quando clicamos agora, precisamos realmente tirar proveito do atributo símbolo em vez de apenas o seu valor. Se voltar, damos um manipulador de eventos para sugestões. Sempre que uma destas sugestões é clicado agora, eu quero fazer alguma coisa. O que eu quero fazer é mudar o valor dessa caixa de entrada. Agora eu quero definir esta função val mesmo. 

Então, sem nenhum argumento essa função val retorna para você que já está na caixa de texto, mas se você dar-lhe uma corda, ele vai levar essa string e colocá-lo na caixa de texto. Estou selecionando sua caixa de texto da mesma forma. Seu nome é dentro símbolo de formulário de cotação. Agora estou enviando o valor do atributo de dados-símbolo. Isso aqui é novo, esta $ (this). O que isto se refere é o elemento que foi clicado. Podemos ver aqui que não estamos anexando um evento de clique para cada elemento com uma classe de sugestão individualmente. Em vez disso, estamos nos aproximando isso um pouco diferente. Em vez disso estamos dizendo sempre dentro de qualquer coisa deste div sugestões, lembre-se que é apenas o recipiente para essa lista, se algo dentro desta div é clicado e tem uma classe de sugestão, Eu quero este evento para disparar. Basicamente o que isto significa que podemos fazer é que podemos reutilizar esse mesmo manipulador de eventos para todas as coisas na lista. Então, nós não temos que ter um manipulador de eventos para o primeiro elemento e um manipulador de evento diferente para o segundo elemento. Podemos dizer que, em vez, "Eu quero o mesmo manipulador de eventos para aplicar a tudo na minha lista." Mas precisamos de alguma forma, saber qual elemento foi clicado. Este "presente" palavra-chave representa exatamente isso. Este é o objeto que foi clicado pelo usuário. Se eu simplesmente cliquei no link 3, este representa o elemento do nexo 3, o que significa que eu possa obter o seu atributo, data-símbolo, que sabemos que tem de conter o símbolo que está associado com a empresa Eu só clicado. Se voltar a nossa página de finanças, podemos ver agora que uma vez que eu começar a digitar algo como MSFT, que não está mais recebendo apenas os símbolos de ações, agora estamos recebendo as empresas reais. Mas quando eu clicar em uma dessas empresas, podemos ver que estamos, na verdade, não preenchendo a caixa de texto com o nome da empresa mas com o que estava armazenado dentro dos atributos de dados. E assim se eu realmente inspecionar um desses elementos pelo botão direito dele e clicar em Inspecionar Elemento, podemos realmente ver o que isso parece. 

Lembre-se isso é algo que nós criamos dentro desse loop quando estávamos construindo essa seqüência de HTML. Podemos ver aqui que estes dados-símbolo tem o valor de MSFT, o que é ótimo. Isso é o que nós estávamos esperando. Esse é o símbolo e é assim que temos o valor que é necessário utilizar dentro da caixa de texto. Isso é o suficiente para o formulário de cotação, porque isso é meio chato. Vamos apenas fazer algumas melhorias rápidas a nossa página de portfólio. Se você já usou CS50 Finanças por um tempo e você começar a compra e venda de um lote de ações, eventualmente esta tabela vai ficar muito grande, e você vai querer um relógio de ação, é claro. Uma vez que a tabela é muito, muito grande, que poderia ser útil para o usuário tentar pesquisar sobre ele. Dentro da caixa de pesquisa, se eu começar a digitar algo como a Disney e olhando para o meu estoque de Mickey Mouse, podemos ver que a tabela agora está filtrando com base no que eu digitei dentro Esta funcionalidade parece super complicado, mas é muito, muito fácil com jQuery e JavaScript. Este arquivo portfolio.php inclui um arquivo JavaScript chamado portfolio.js. Vamos dar uma olhada nisso. Então, html, js, carteira. Aqui é onde nós estamos fazendo que a pesquisa sobre a mesa. A primeira coisa que precisa fazer é anexar um manipulador de eventos para que a caixa de texto porque sabemos que queremos que a nossa função de filtragem de fogo cada vez que o usuário pressiona alguma coisa, porque não temos tempo para os botões de pesquisa. A primeira coisa que precisamos fazer é descobrir o que o usuário está procurando, assim como fizemos antes. Esta palavra-chave se refere ao elemento atual do usuário está interagindo com. 

Como o usuário está interagindo com a caixa de pesquisa, $ This representa a caixa de pesquisa, assim this.val nos dá o que tem dentro da caixa de busca o usuário está digitando. Então, agora o que nós queremos fazer é que queremos iterar sobre todas as linhas dentro de nossa mesa. Para selecionar todas as linhas em nossa mesa, eu dei aquela mesa uma identificação da carteira de mesa, e cada linha é representada por um elemento TR, de modo que este selector vai voltar para mim uma grande matriz de todas as linhas em minha mesa. Agora eu quero iterar sobre essa matriz. Eu poderia lhe um loop, mas jQuery realmente nos fornece a função agradável chamado "cada um." O que cada um faz é cada um tem um argumento, e esse argumento é uma função. O que ele vai fazer é que vai aplicar essa função a cada elemento dentro da lista. Esta função tem um argumento que é e, e quando esta função é executado, este e vai ser substituído com a primeira linha, em seguida, a segunda linha e, em seguida, a terceira linha. Por este caminho, esta é a mesma coisa que executar um loop e depois descobrir o elemento atual com base no índice de dentro do seu loop. Em cada iteração, para cada um desses elementos na tabela, Quero verificar se o texto do elemento - o texto do celular dentro da linha - coincide com o que eu estou procurando. Esta cadeia longa grande de comandos é como eu poderia fazer isso. Primeiro, mais uma vez, este refere-se agora - porque é dentro de uma nova função - esta é agora a linha atual na tabela. Eu quero ter a linha atual na tabela, e eu quero pegar todos os seus filhos. Lembre-se, o DOM é uma árvore hierárquica, o que significa que os elementos têm um número de crianças. 

Este. Função crianças vai voltar para mim de volta um conjunto de todos os elementos que são as crianças de, neste caso, uma linha na tabela. Este é simplesmente as células dentro da linha. Eu só quero que a pesquisa sobre a primeira célula. Esta função. Primeiro diz me dar o primeiro elemento do array. Então, a função texto diz me exatamente o que está dentro da célula desde que eu quero pesquisar sobre esse texto. Finalmente, vamos converter para minúsculas, para que possamos fazer consultas de texto caso insensível. Por fim, quero ver se essa seqüência dentro de uma tabela contém a string que está procurando. A função indexOf em JavaScript faz exatamente isso. Diz-nos se esta string contém outra string. Se é verdade que a célula contém o que eu estou procurando, então eu quero ter certeza de que é mostrado. O método show vai dizer: "Mostre o elemento." Se este não é o caso, então isso significa que eu estou procurando não está contido dentro dessa linha, e assim que eu quero é esconder do usuário. Que atinge esse belo efeito de filtragem onde já não vemos a tabela inteira. Se você estiver interessado em como fazer este ticker, bem como, vamos postar a fonte on-line. Mas é realmente simples. JQuery tem métodos incríveis para estas animações e propriedades de manipulação de CSS. Então, isso é tudo para mim. 

O que então está à frente? Como você verá em poucos dias, a proposta final de projetos é devido. A proposta final de projetos irá pedir-lhe algumas perguntas, mas entre eles será de três etapas - um marco "bom", um melhor marco e uma melhor um. A idéia é realmente para ajudar vocês suas expectativas para que minimamente você vai ser feliz com a saída de seu projeto final e vai ser "bom" tão longe quanto você está preocupado. Mas, então, no interesse de obter-lhe chegar um pouco para algo melhor ou melhor alguma coisa, nós também vamos classificar de empurrá-lo em direção a esse também. O CS50 Hack-a-thon, entretanto, está em algumas semanas. Normalmente, fazemos isso em uma base base de loteria por causa do interesse, mas as probabilidades são que vamos tomar algumas centenas de nós no ônibus de Harvard Square até Kendall Square, onde a Microsoft tem uma bela instalação apropriadamente chamado de "nerd" - o New England Research e Development Center. Nós vamos chegar lá em torno de oito horas Nós vamos ter um pouco de comida. Cerca de 01:00 teremos comida um pouco mais. Cerca de cinco horas, se você ainda estiver acordado nós vamos de cabeça para ihop ou levá-lo de volta ao campus. O objetivo não é mergulhar em projetos finais ao lado de colegas e funcionários. Então alguns dias depois é a Feira CS50, que é realmente pretende ser uma oportunidade para vocês para mostrar o seu trabalho e realizações para o semestre enquanto esfregando os ombros uns com os outros e obter uma sensação de que todo mundo fez. Com o que disse, muito obrigado a Tommy ea José, e vamos ver você na segunda-feira.  [Aplausos]