[Powered by Google Translate] [Setmana 9, continuació] [David J. Malan - Harvard University] [Aquesta és CS50. - CS50.TV] 

Això és CS50. Aquest és el final de la setmana 9. Moltes gràcies. Finalment. Setmana 9. Ja ho tinc. Avui continuem la nostra conversa sobre programació web amb la mirada posada en el projecte final no, perquè vostè ha de fer alguna cosa basat en la web per als projectes finals, sinó perquè ja sigui per projectes finals o després CS50 aquest és sens dubte la direcció en què va el programari modern. I, no obstant això, no és en realitat una cosa fàcil. De fet, una de les coses més difícils de fer és l'aspecte del disseny. 

Per exemple, per disseny ens referim a rebre efectivament la interfície d'usuari o l'experiència d'usuari correcta. M'atreviria a dir - i sabem d'un conjunt de problemes recents quan alguns de vosaltres a l'aire les seves queixes sobre alguna peça de programari o maquinari que s'enfurisma, ja sigui al campus o fora - hi ha un munt de llocs per aquí, hi ha una gran quantitat de maquinari per aquí, aquest tipus de merda. Però la realitat és que fer coses que són fàcils d'usar i no obstant això són de gran abast És un repte molt difícil. Així que per ara em va preguntar Josep i Tommy a unir-se a mi aquí perquè puguem tenir una conversa, tant sobre el disseny i quins tipus de processos de pensament ha de començar a passar pel cap l'hora de dissenyar els seus projectes finals, els seus projectes futurs. I després, amb l'ajuda de Tommy veurem alguns dels detalls d'implementació. Com pots tenir una mica de visió en paper o en la seva ment que podrà executar mitjançant programació mitjançant l'ús d'algunes de les tecnologies i les tècniques que hem començat parlant, és a dir, JavaScript i una cosa encara més recent, és a dir, AJAX, JavaScript asíncron. Això li permet crear tota la dinàmica més d'una interfície d'usuari per anar a buscar més i més dades progressivament des d'un servidor. Així que anem a veure alguns d'aquests fragments tan bé avui. Com acotació al marge, si vostè està interessat en la concentració en ciències de la computació o minoring en informàtica, sé que aquest divendres al migdia en Maxwell Dworkin 221 hi haurà un esdeveniment de pizza on es pot aprendre una mica més sobre la informàtica. En el seu camí a la porta avui seràs capaç de recollir una guia no oficial per CS a Harvard. El posarem en els pots d'escombraries fora a l'altura de la cintura de manera que si vols agafar això i aprendre una mica més sobre CS, que estarà allà per a tu com ho va ser en la setmana 0. També, si vol unir-se a nosaltres per dinar CS50 aquest divendres a les 1:15 pm, dirigir-se a cs50.net/lunch. Sense més preàmbuls, els presento l'ensenyament company Joseph ONG. Hi. [Aplaudiment] Gràcies. La primera vegada que vaig saber de disseny estava en una classe anomenada aquí CS179. 

El professor de l'època ens va explicar la història d'un altre professor que havia anat a un hotel i utilitzem les aixetes. Pot algú dir-me per què els 2 botons de l'esquerra i fer el correcte? [Estudiant] Calenta i fred. >> Calenta i fred. Bé. El que normalment esperar, no? Aquest professor després d'usar l'aixeta vol prendre una dutxa, i procedeix a fer-ho envolta. Ell pensa que l'esquerre i la part dreta són en calent i en fred, oi? Però, ¿pot algú dir-me què és això realment? Les mans? [Resposta dels estudiants inaudible] >> Un suggeriment és? [Resposta dels estudiants inaudible] Temperatura? >> Així que un d'ells controla la temperatura i els altres controls? >> [Estudiant] La pressió de l'aigua. La pressió de l'aigua. Bé. Aquest professor entra en això i, pensant que estan controlant calenta i freda, és el més adequat, el que ell pensa és en calent, tot el camí fins perquè vol prendre una dutxa calenta. Bé, aquests en realitat no coincideixen, de manera que obté aquesta experiència no és molt divertit d'estar en una dutxa d'aigua freda, i tots sabem el que se sent. Aquest és un exemple d'una fallada de disseny. Què vull dir amb això és la seva expectativa de l'aixeta no coincideix amb el que va sortir de la dutxa, que és una mica desafortunat per a ell. Així que aquest és un exemple d'un defecte de disseny que passa en la vida real. No obstant això, veiem tot tipus d'éssers d'altres també. No som probablement els fans del sistema de MBTA. Es tracta d'un sistema de metro a realitat a Londres, que diu: "Aquest botó no està en ús." Per què és encara aquí? Per què ens importa? Quan jo era un nen, i l'expert en tecnologia de la casa, cada vegada que l'ordinador es bloquegi, la meva mare venia a mi, mostrant-me aquesta pantalla i preguntant què va passar. 

Ni tan sols jo sé el que això significa. [Rialles] Què? [Rialles] De vegades ens sentim com els desenvolupadors de programari són només curricà nosaltres. Com usuaris estem com, "Què està passant? Algú ens diuen". Tot això es redueix a una qüestió de disseny. Disseny, com podem veure, no és purament sobre l'estètica, no es tracta de com es veuen les coses. Aquí veiem que aquest petit pop-up per aquí realment es veu molt bé. Té una ombra en el fons, té radis de frontera passant. És una cosa bonica. No està molt ben dissenyat, perquè no és molt fàcil d'utilitzar. Aquest petit pop-up que apareix en realitat no em dóna cap informació sobre el que està passant, no em va dir res quan l'usuari sobre com recuperar d'aquest error. Volem pensar sobre les coses que el disseny no és. En primer lloc, no és l'estètica. Tampoc és el farciment de la seva aplicació amb un munt de funcionalitats innecessàries. Si vostè és un restaurant tailandès, és probable que no vol ser un dentista a la vegada. I amb Facebook Questions, no és que molta gent l'usa i no era realment el nucli del que estaven construint. I el que és bo per pensar no és tant la quantitat de les coses que vostè està posant a la seva sol · licitud, però la qualitat de la i com s'està fent que l'experiència d'usuari millor per millorar la realitat del que ja té. 

En poques paraules, el disseny ens diu el que hem de construir. Per exemple, si estem construint alguna cosa que anem a buscar les coses, com Google, per exemple, hem de fer les coses d'una manera que requereix que l'usuari porta un munt de clics per arribar al que volen, o cal fer-ho d'una manera, per exemple, amb Google Instant o Autocomplete que ens permet arribar als nostres resultats amb més rapidesa? Enginyeria implica, com Tommy li mostrarà, en realitat construint. Hi ha molts tipus de disseny. Per exemple, si vostè està construint alguna cosa per desplegar alguna cosa en un país del tercer món on no hi ha electricitat o molt que la tecnologia molt, vostè ha de dissenyar el que vostè està construint de manera que fàcilment s'accedeix a la gent d'allà. Però, quin tipus de decisions de disseny que pot haver altres o podria estar involucrat en alguna cosa com això? Si. Veig una mà. [Resposta dels estudiants inaudible] Dret. >> Exactament. L'accessibilitat és una cosa. Moltes persones no pensen, "Què passa amb els meus usuaris?" com els extrems de qualsevol d'espectre. Tinc usuaris que podrien tenir discapacitats que no estic pensant en i estic pensant en el disseny per a l'usuari general. L'Internet és accessible a tot el món avui en dia, i que hauria de ser el disseny per a aquesta gent també. Quina classe d'altres decisions de disseny poden fer? Sí >> [Estudiant] Cost. Cost. Molt bo. Una altra cosa que podem basar les nostres decisions de disseny són el cost. Si tenim un negoci, vostè vol construir una cosa que no té preu molt per produir però es pot vendre a un preu especialment alt o ens pot treure algun profit. 

Aquests són tots els diferents tipus de disseny, però quan estem construint alguna cosa a Internet o quan estem construint alguna cosa que, probablement, no costa molt construir ara, igual que les aplicacions d'Internet - vostè no ha de llençar molt capital-hi amb la finalitat de fer alguna cosa que realment funciona - el que estem més preocupats per l'experiència de l'usuari. D'això en diem disseny centrat en l'usuari. En essència el que el disseny centrat en l'usuari s'involucra a si mateixos posant en les sabates dels seus usuaris. Si algú signatura per amunt per al que estic construint, Òbviament han arribat al meu ús particular amb un objectiu en ment, amb una tasca que voleu realitzar. I el seu treball no és només per ajudar-los a completar aquesta tasca sinó per ajudar-los a completar aquesta tasca d'una manera que sigui eficient, intuïtiu, i, com va dir alguna persona d'allà i accessible. Què significa eficiència? Eficiència significa la rapidesa amb què l'usuari a completar la tasca donada la meva interfície. Es necessita un munt de clics per a ells per anar d'un lloc a un altre? És tediós? ¿Han de realitzar moltes tasques repetitives? Volem fer que el procés sigui el més eficient possible pel que no ha de fer aquest tipus de coses. Quant a la intuïció, que és, per exemple, si un usuari busca la meva interfície, és més fàcil per a ells per arribar d'un lloc a un altre? És fàcil per a ells per esbrinar el que han de fer clic en el meu interfície per tal que per aconseguir l'objectiu o tasca que es vol aconseguir? 

I finalment, com va dir una persona d'allà, l'accessibilitat és molt important. [Parlant masculí] Es refereix a l'accessibilitat per a les coses com la visió, Com es deu en realitat dissenyar alguna cosa per a algú que és cec? Oh. Per a les persones que no poden veure res, tenim una cosa anomenada lector de pantalla. El que ha de fer és que vostè ha de construir el seu lloc web d'una manera que, per exemple, tecnologies específiques, el que anomenem - Hi ha un munt de coses ara. Crec que hi ha lectors de pantalla anomenat JAWS. Moltes d'aquestes coses depenen del que anomenem normes de la zona amb la finalitat de llegir per a l'usuari del que està present a la pàgina. Per a aquelles persones que no poden veure, ha de assegurar-se que aquests lectors de pantalla en realitat pot recollir el contingut de la pàgina i pot mostrar als seus usuaris, si no es pot veure, si més no encara es pot entendre el contingut de la pàgina. Si. Bé. Prou de parlar sobre un bon disseny. Anem a parlar d'un mal disseny. Aquestes són coses que no has de fer. Algú pot dir-me sobre les seves experiències amb Craigslist i el que creuen que no és tan bo d'aquest disseny? Sí >> [Estudiant] Crec que hi ha massa paraules en una àrea. Massa paraules, no? Completament aclaparador. En arribar a aquesta pàgina i et dóna la benvinguda amb un munt de coses aquí que ni tan sols t'importa. Per exemple, vostè viu en un estat que no comença amb aquesta carta. Diguem que vostè viu a Texas o alguna cosa així. 

Vostè ha de desplaçar cap avall a la pàgina per arribar al lloc on es troba. Sóc de Boston, així que em miro a Massachusetts. On és Massachusetts? Oh, és aquí mateix. Oh, és Boston. Bé. Fem una ullada a Boston. [Rialles] Bastant aclaparador, oi? Awkward coses per allà. [Rialles] Diguem que jo estic buscant un lloc per viure. Quantes persones s'han utilitzat Craigslist? Tones de vostè. Hi ha formes molt malament de veure això, però anem a veure això. Quina és la diferència entre img i per? Algú pot dir-me? Hi ha en realitat no hi ha diferència. Ells signifiquen exactament el mateix, però tenen noms diferents per a ells per alguna raó. Si faig clic a anunci amb foto, no passa res a la pàgina. De fet, he de fer clic a Torna a buscar perquè alguna cosa succeeixi. Quina podria ser una decisió de disseny millor que es podia fer allà? Si estic fent clic en aquest filtre, probablement vol filtrar per aquesta acció en particular o aquesta categoria en particular. Així que en lloc d'haver de pressionar Cerca de nou, aquí podria simplement fer automàticament el filtratge tipus d'estil de Google on ho fan a l'instant. [Malan] No obstant això, no constitueix, com hem vist fins ara han de ser físicament presentat prement Enter almenys o fent clic en un botó? Com s'ha vist fins ara, que realment ha de fer clic a Enviar per fer aquestes coses. 

Però a mesura que Tommy li mostrarà en un segon, en realitat hi ha maneres perquè vostè de manera que en fer clic a aquesta cosa que pot enviar automàticament el que anomenem una petició AJAX i obtenir dades de tornada i filtrar els resultats a l'instant. Hi ha un munt de coses que estan malament en aquesta interfície. [Malan] pots cercar Cambridge? Hi ha una cosa una mica anòmal aquí on vostè es preocupa per Cambridge i no obstant això, vostè està rebent Westford, Spring Hill, West Newton i similars. Probablement no és ideal. >> Probablement no ideal. Com podria jo ser capaç de fer l'experiència d'usuari millor en aquesta pàgina en particular? Sí >> [Estudiant] Instruccions. Bé. Les instruccions de quin tipus de sentit? [Estudiant] Per exemple, una cosa per als usuaris de primera vegada, que ni tan sols saben el que és Craigslist o no saps el que has de fer. Dreta. Així ho explica Craigslist està en aquesta pàgina és important. De fet, podem dir als usuaris el que aquesta pàgina és en realitat per. Si estic visitant a això, veig un munt de llocs. Jo ni tan sols sé el que signifiquen. Però més important encara, només mirar aquesta interfície, Recordo que vaig haver de baixar un munt de coses per trobar una comunitat en particular que realment es preocupava per això. Què és un mètode més ràpid que podia fer això? Sí [Estudiant] Divideix cap amunt en aquest, les regions de l'oest. >> Okay. Podria dividir-los en categories més que pugui ajudar a determinar més ràpidament com arribar a aquest lloc en particular. [Estudiant] Poseu una llista desplegable. >> Dret. Bé. Em vindria bé un menú desplegable, perquè tenim un conjunt fix de les coses i podríem mostrar en un menú desplegable. D'aquesta manera no es necessita tant espai a la pantalla. Però encara millor que això, què podem fer? Sí >> [Resposta dels estudiants inaudible] >> Pots dir això de nou? >> [Estudiant] quadre de cerca. Sí, un quadre de cerca. Això és genial. El que en realitat es pot fer és que si mirem cap enrere en el cercador de diapositives. Emplenament automàtic. Una manera molt senzilla de buscar a través dels resultats que vostè sap que està en un set. Si em poso a escriure BO, només em mostrarà tots els resultats que tenen a l'interior de BO d'ells. D'aquesta manera puc trobar molt fàcilment el particular, em vull anar a la en lloc d'haver de desplaçar-se a través d'aquesta llista realment gran. 

Es tracta de tot tipus de realitat fruita madura que algú que està duent a terme Craigslist en realitat es pot fer perquè l'experiència en el lloc molt millor per al seu usuari en particular. Bé. Prou de parlar sobre els llocs web dolents. Parlem de Facebook. Quan Facebook va sortir, i en especial les fotos de Facebook, hi havia un munt d'altres serveis en el moment en què podria fer exactament les mateixes coses. Podrien organitzar les fotos en àlbums. El que podria fer és que vostè pot organitzar en grups també. Vostè podria organitzar per data. Vostè pot fer totes aquestes coses en particular. Però, ¿algú sap el que va fer esclatar en fotos de Facebook el moment en que va ser posat en llibertat? Sí >> [Els estudiants] Tags. Tags. >> Exactament. Tenim Milo per aquí, que és la nostra mascota gos amb aquest mocador CS50. Es pot veure que tenim aquesta característica d'etiquetatge al centre. I el que va fer fotos de Facebook molt interessant des del punt de vista d'usabilitat és que en realitat va permetre a la gent a través d'aquest involucrar als seus amics en les seves fotos. Per Facebook, ja que el seu lloc web és molt social, es tracta de la construcció d'aquest tipus d'ambient social. Això millora l'experiència de fotos molt més perquè en realitat podria començar dient: "Aquestes són les connexions entre les persones, i aquestes són fotos de gent a la que realment importen. " Part d'això és també el narcisisme tipus. La gent li agrada ser etiquetats en fotos i coses per l'estil. Mentre que això no és necessàriament un tret ben humà, al mateix temps que està basat en les decisions de disseny bones perquè la gent realment es preocupen per coses com aquesta. Així que això és fotos de Facebook. 

Però parlem de Facebook en general. Estic segur que molta gent aquí té una opinió sobre Facebook, ambdues decisions de disseny bones i males decisions de disseny. Així que anem a ventilar o ser feliç. Anem. Sé que tots vostès fan servir Facebook. Algú ha de tenir alguna cosa dolenta a dir o alguna cosa bona a dir sobre ell. Sí [Estudiant] Al servei de notícies que hi ha un munt de coses que realment no importen. El servei de notícies no mostra un munt de coses que potser no importa. Vostè té amics a Facebook que no s'han complert durant 2 o 3 anys i veure els seus resultats de notícies apareixent en el seu servei de notícies i que en realitat no importa. Facebook ha fet realment un esforç per fer això millor, i que en realitat han intentat empènyer resultats rellevants a la part superior de la font de notícies en els últims temps el que en realitat veiem les coses pels amics que són rellevants per a vostè o els seus amics íntims. Alguna cosa més? Sí [Resposta dels estudiants inaudible] >> Pots dir això de nou? [Estudiant] Els anuncis són relativament discreta. >> En quin sentit? [Resposta dels estudiants inaudible] Ells no tenen llum a la pantalla, com banderes. Bé. Això és bo. Si et recordes d'Internet des dels anys 90 - >> [Malan] jo hi era. >> El hi era. [Rialles] Potser recordi intermitents fons GIF, brillants coses, Tipus GeoCities estil de les coses. Això no és realment un exemple d'un bon disseny perquè realment està distraient del seu contingut. El lloc web de Yale art solia tenir GIFs animats com els seus antecedents i no es podia llegir res a la pàgina, però crec que algú realment vaig parlar amb ells i ara és una mica diferent. [Malan] És molt millor ara. >> És molt millor ara, com pots veure. >> [Malan] Oh yeah. Simplement genial, just - Sí Bé. 

Part d'això també està fent la seva pàgina possiblement molt minimalista i molt comprensible així que les coses en el flux de la pàgina d'una manera que és molt lògic i no et fiquis en el camí dels altres. Quin tipus de coses són bones o dolentes sobre Facebook sobre Facebook? Anem a tenir una conversa disseny aquí. Oh. On? Si. [Estudiant] El sistema de nova línia de temps li permet buscar el perfil de la persona sobre el seu passat. Ooh, línia de temps. Timeline és una gran cosa perquè li permet aguaitar als teus amics quan eren a la secundària. Línia de temps és bo perquè et permet filtrar contingut molt més ràpid, que li permet trobar les coses que d'una altra manera caldria prendre un temps molt llarg per trobar simplement desplaçant cap amunt i avall, amunt, amunt, amunt, amunt, amunt, com anar enrere en el temps. Però també hi ha una mena de desavantatge que en termes d'experiència de l'usuari. Què podria ser? Gran paraula que comença amb P-R. >> [Els estudiants] de privacitat. Privacitat >>, no? La privacitat és un tema d'enorme experiència de l'usuari. Aquesta és una de les coses que més odi de Facebook ara. [Rialles] [Malan] Tal com ho faig ara. David no es va adonar que això realment va succeir fins ahir. Així que ara que sap que cada vegada que li xatejar sé que ell m'ha estat ignorant. [Malan] La part difícil va ser que era en realitat ho ignora, i jo no sabia que ell sabia que jo ho estava ignorant. [Rialles] La privacitat és un gran problema. Aquí ningú pot dir-me el que podria ser dolent sobre privacitat de Facebook a més del fet que es fan les coses d'aquesta manera? El que és particularment difícil de fer pel que fa a la privacitat de Facebook? Aquest tipus de pregunta és un líder. Sí >> [Estudiant] Amaga les fotografies de determinades persones. Dreta. Exactament, per amagar les seves fotos de determinades persones. Tenen aquest petit botó petit es troba a la part superior dreta que li permet canviar la privacitat d'una foto. Les seves opcions de privacitat són molt variats entre els diferents tipus de menús. 

Han millorat molt en això últimament, però el que solia ser el cas que cada vegada que volia evitar que els seus amics de les fotos veient, vostè hauria de passar per un complicat procés de 5 passos de ser com, m'ho dius a mi fer clic en aquest enllaç, ara deixeu-me fer clic de nou, deixa clic de nou, Permetre especificar que la gent no pot veure les meves fotos. Això no és particularment bo en part de Facebook ja que gran part de l'experiència de l'usuari és en realitat els dóna la llibertat per controlar el que la gent pot veure. Cridem a aquest control d'usuari i la llibertat. Si vostè no està deixant que els seus usuaris fer això d'una manera que sigui eficient i intuïtiu, llavors la usabilitat dels fòrums no és realment tan bo en absolut.  Li agrada a vostès dir res sobre Facebook? Com puc desactivar aquesta opció? [Ong] No es pot desactivar aquesta opció, i això és un error enorme facilitat d'ús per part de Facebook. Aquesta característica - que en realitat semblava al d'ahir - que és o que no és possible fer-ho o és enterrat en algun lloc molt, molt profund en els racons de Facebook perquè no puc trobar la manera d'habilitar aquesta funcionalitat en absolut. [Malan] Però de vegades aquestes decisions no són evidents perquè vostès ens han donat una gran quantitat d'informació útil sobre diferents aplicacions CS50 i llocs web que utilitza el curs. No s'han posat en pràctica totes aquestes peticions i suggeriments. 

Part d'això és per aconseguir tantes sol · licituds que es tracta d'una funció del temps, però de vegades simplement prendre una decisió conscient com, "Gràcies pel suggeriment, però no estem d'acord". Llavors, com decideix realment el que ha de fer si els usuaris creu que hauria de fer alguna cosa encara que no ho fa necessàriament? És un delicat equilibri entre realitat escoltant el que els usuaris diuen i realment tenir una mena de línia on vostè diu, "Nosaltres no anem a fer el que aquests diuen els usuaris." I en particular, crec que hi havia una cita de Henry Ford que ho resumeix bastant bé. "Si hagués preguntat a la gent el que ells volien, ells haurien dit que volien cavalls més ràpids". Algú pot ordenar de separar el que realment significa aquesta frase? No és només que els usuaris sàpiguen el que volen, però és més que - [Estudiant] Ells no saben el que és possible. En part, perquè no saben el que és possible. Es burlen de que, a part d'una mica més. Què vols dir amb això? [Resposta dels estudiants inaudible] Això és bo. El que crec que estem tractant de dir aquí és que la gent sàpiga el que vol. Volen més ràpids cavalls. El que realment volen és la capacitat de moure més ràpid, però no se sap molt bé el mitjà pel qual per aconseguir-ho. En arribar als seus usuaris i els seus usuaris dir una cosa i et diuen: "Volem que aquestes característiques i aquestes característiques i aquestes característiques", no vull pensar necessàriament sobre: ​​"Deixa anar per davant "I posar en pràctica el que diu explícitament:" però el que vull pensar és: "Quina classe d'idees puc obtenir d'això?" Què és el que realment vols? 

I a partir d'aquí el que es pot fer és dissenyar una cosa que satisfaci les peticions però no necessàriament en la manera com l'usuari espera que estigui satisfet. Així que per alguna cosa així com projectes finals, en termes reals, el que és una heurística útil quan es tracta de fer alguna cosa millor, especialment si el dissenyador té l'arrogància d'ell pel que vostè sap del que és millor, és possible obtenir informació dels seus usuaris, però com van realment sobre aconseguir que la retroalimentació? En els projectes finals, molt concretament, el que produeix resultats òptims en aquesta llista? El que produeix resultats òptims - i vaig a anar sobre això en un segon - És aquest procés de desenvolupament i proves i després iterar. Què vull dir amb les proves és en general quan es dissenya una cosa Creus que és bastant bo, com, "Jo sóc un gran dissenyador. Tothom va encantar." I després ho poses aquí i la gent no li agrada per alguna raó. El que has de fer és que vostè ha de prendre les parts de les coses que la gent fa com i la remodelació de les coses que la gent no li agrada. Sona com un procés molt obvi, però aquest procés d'iteració constant sobre del que ja has construït és un procés que l'ajuda a no només afinar les seves habilitats de disseny propi, però també l'ajuda a perfeccionar el disseny de manera que la gent realment apreciem el seu producte fins i tot més que abans. 

Aniré més exemples concrets del que en realitat podria fer. Com una espècie d'últim exemple d'un producte, veurem KAYAK. KAYAK quan va sortir era molt, molt popular. Algú pot endevinar per què? Quins són els tipus de coses que t'agraden d'aquesta opció si ha utilitzat o quins són el tipus de coses que no t'agraden? Sí >> [Resposta dels estudiants inaudible] >> Okay. Això és part d'ella està deixant que l'usuari té una consulta que és més expansiva que sigui molt restrictiu així com: "Has de triar la data d'inici "I vostè ha de triar la seva data de finalització." De fet, se li permet ser flexible sobre això i li dóna tots els vols en aquest rang. Alguna cosa més? [Estudiant] Inclouen les taxes en el preu. Fan incloure les taxes en el preu. Els impostos i les coses realment van directament a aquest preu a la part superior esquerra el que no està enganyat fent-li creure que en realitat estàs pagant per un vol de 240 dòlars quan en realitat és $ 330. Alguna cosa més? Sí [Resposta dels estudiants inaudible] No estic segur de si realment farem això. Puc estar equivocat. Això podria ser una cosa interessant si vostè vol posar més pes en particular filtres de manera que empenyi els resultats relacionats amb aquest filtre a la part superior. Però, ¿pot algú dir-me què té d'especial aquest costat esquerre? Com tradicionalment buscar un vol en un servei d'Internet abans d'això? 

Sí >> [Resposta dels estudiants inaudible] >> Es pot dir que - [Estudiant] Cada línia aèria. Sí >>. Cada línia aèria té el seu propi lloc web. Això consolida les coses. I? [Estudiant] Vostè sap exactament a quina hora te'n vas. Vostè sap exactament a quina hora te'n vas, però relacionats amb els filtres en particular. Deixa aixecar KAYAK. Oh Déu, elements emergents. Mala experiència d'usuari. Què passa quan mou aquest control? [Estudiant] Actualitzacions automàtiques. >> [Ong] actualitzacions automàtiques. Això és una cosa que és molt important. Abans d'això, cada vegada que volia buscar un vol, calia posar en el seu lloc d'entrada, el lloc de sortida, premi Cercar, caldria processar i mostrar els seus resultats. Si vol canviar la seva recerca, vostè ha de prémer dues vegades, entrar en una nova consulta des de zero, i després fer-ho una i una altra. El millor d'alguna cosa com això és que utilitza una gran cosa [inintel · ligible] en el medi. Cada vegada que es fa alguna cosa com això, es dispara una sol · licitud i et retorna tots els resultats immediatament. Aquest tipus de resposta immediata és una cosa que es va fer molt popular a KAYAK perquè és molt fàcil per a mi per canviar només la meva consulta i d'esbrinar el que és del voltant d'un rang determinat sense haver d'anar endavant i enrere, endavant i enrere, endavant i enrere. Així que aquestes són totes les classes de coses que vols pensar quan vostè està dissenyant el seu lloc web. Com puc fer que sigui molt eficient per als meus usuaris a passar pel que estem treballant en i per arribar a la seva meta final el més ràpid possible? [Malan] I a punt de José abans sobre els usuaris no necessàriament saben el que volen, sobre la base del que vostès ja saben sobre HTML i vostè té caselles de verificació, botons de ràdio, menús de selecció, camps d'entrada i similars, Com posar en pràctica la idea d'escollir una hora d'inici d'un vol? 

Quin d'aquests mecanismes d'interfície d'usuari diferents faria servir? Si vostè acaba de saber la quantitat d'HTML que s'ensenyava abans i vostè sap que les entrades són botons d'opció, caselles de verificació, la caiguda de sanejaments, i la caixa d'entrada, ¿Quina seria la seva opció natural han estat per escollir les dates? [Estudiant] Entrada. >> Entrada. O potser fins i tot un menú desplegable amb totes les dates, no? Així que amb els mecanismes de la interfície d'usuari més complexes com aquesta en el costat esquerre que es poden implementar, vostè pot fer aquest procés molt més intuïtiva amb un control lliscant perquè el temps és continu, i les persones no solen pensar-hi en termes de trossos discrets. Està bé. L'última cosa. Deu heurístiques d'usabilitat. Totes les coses que parlem probablement pertanyen a una d'aquestes categories. Si vas a aquest enllaç, els llocs que es publicarà a Internet, que realment serà capaç de fer-ho, com el disseny del seu lloc, tingui en compte aquestes heurístiques i aquestes regles generals. Per als seus projectes, el que et suggereixo que facis per tal de dissenyar la seva aplicació millor és fer prototips de paper. Quan vostè està pensant en la seva aplicació, molt ràpidament dibuixar el que vulguis que es vegi com i assegureu-vos que totes les caixes estan disposades d'una manera que és molt intuïtiu per a l'usuari utilitzi i fins i tot mostrar els prototips de paper als teus amics i començar a grups d'enfocament. Acaba d'obtenir 2 o 3 persones i demanar-los que toca just en aquests prototips de paper, i ensenyar noves pantalles per veure si realment entendre el que està passant. 

El que vull fer és donar-los una tasca, motivar aquesta tasca, i només els donen l'aplicació i deixar que l'utilitzi. No els doni instruccions més enllà d'això. Vols deixar que ells realment interactuen amb la seva aplicació d'una manera que li permet veure la manera com ho faria servir si no estaven drets al costat d'ells. I això és molt important. Això li donarà un munt d'idees que són les persones que reben al voltant de les coses particulars d'una manera que no els proposen? Estan utilitzant els mecanismes particulars d'interfície d'usuari en la pantalla d'una manera que és una mena de hacky? Jo no tenia la intenció que ho facin d'aquesta manera. I un cop que hagis acabat amb això, què vols que faci? Els seus roques de disseny, no? El que vull fer és que volem desenvolupar i després fer el procés una altra vegada. Així que mostrar als seus amics una vegada que has desenvolupat, provar, desenvolupar, provar, desenvolupar, provar, repetir, una i altra i cap endavant. El disseny és molt un procés iteratiu en aquest sentit. Segur que ha de construir alguna cosa i després s'adonen coses sobre ell que no s'havia adonat abans i tornar i millorar a partir d'això. Ara, pel que fa a la part de desenvolupament, això és el que Tommy es mostrarà després de les vacances i com vostè pot ser capaç d'implementar alguna cosa com autocompletar d'una manera que és bastant simple. [Malan] Com Tommy estableix aquí, la pregunta aleshores. Molts dels primers llocs web - que José va dir 1990s lloc web estil, era implementacions on si volies triar una hora d'inici i una hora de finalització, francament, de tornada al dia, i fins i tot en alguns llocs web avui en dia, la forma de fer això és que una hora d'escollir un menú desplegable, vostè escull minuts d'un desplegable, potser vostè triar AM, PM, i després fer que 3 vegades més. I així, amb 6 clics i potser una mica de moviment en sentit vertical l'usuari realment pot proporcionar algun tipus de data i / o rang de temps en aquest sentit. 

Així que definitivament subòptima i, no obstant això fins ara no hem vist cap capacitat expressiva en qualsevol dels idiomes que hem vist fer alguna cosa més sexy igual que el control lliscant de l'hora d'inici i hora de finalització. Però si penses en la setmana 0, quan parlem de Scratch, allà no hi havia ginys que acaba de fer certes coses. Segur que només tenia aquests fonaments com els bucles i les condicions i similars. Així que tipus de només pensar molt abstractament ara, independentment de les particularitats d'HTML, el que realment està passant amb una mena de hora d'inici i hora de finalització slider? Quan moc el ratolí i fer clic en aquest símbol pastanaga poc a l'esquerra i començar a arrossegar, mitjançant programació, què és el que vull ser capaç d'implementar perquè això succeeixi? Quines preguntes, què booleana què vols ser capaç de fer? Què està passant realment? Sammy? [Estudiant] On és la posició del cursor? Bé >>. On és la posició del cursor? Això era una cosa que havíem de expressar de nou en Scratch, si es basa en la ubicació o fins i tot el color o similar. Vostè pot recordar molt breument el dilluns havia totes aquestes coses que es diuen esdeveniments en el món de la Web, de manera que hi ha coses com onclick i onkeypress i onkeyup i onMouseOver i onmouseout. Així que adonar-se que fins i tot aquestes coses que hem estat prenent per fet a la web amb llocs com Facebook i Gmail, encara que no té cap idea com és possible que portaria a terme perquè no hi ha res tan sols semblant en conferència o Problema 7, s'adonen que amb aquests fonaments mateixos exactes, amb HTTP i els paràmetres i GET i POST, amb les entrades bàsiques d'HTML que hem vist fins ara i en un moment amb els mecanismes programàtics que Tommy està a punt d'introduir pot començar a expressar-tal com va fer a la setmana 0 per molt intuïtiva d'arrossegar i deixar anar. 

Així que dit això, Tommy MacWilliam i algunes noves peces del trencaclosques per a nosaltres per Web. Està bé. El meu nom és Tommy i jo estaré parlant de JavaScript. Només un aclariment: jo sóc de l'opinió que JavaScript és el millor llenguatge de programació a tot el món sencer. Hi ha un munt de persones que no estan d'acord amb mi, però és simplement increïble. Quan torni a C, si has de escriure C per altra classe o alguns altres idiomes, És realment frustrant en tots els detalls de baix nivell que ha de enredar polz Així que si mai et sents trist pel molest C és escriure, només ha d'anar de nou, escriure alguna cosa de JavaScript. És el nirvana. Vostè es sentirà molt millor sobre la seva mal dia. Gran part de la màgia de JavaScript es deu a la seva habilitat per manipular les coses que ja són a la pàgina. Quan escrivim els nostres scripts PHP, que van ser executats al servidor, i, finalment, que la sortida de script PHP probablement una mica d'HTML. Això HTML s'envia al client, i tan bon punt ho era. Si PHP volia afegir un botó a una pàgina, per exemple, no es pot fer això. Hauria de fer un conjunt nou arxiu HTML i enviar-lo al navegador. Amb JavaScript sabem que podem actualitzar les coses mentre estan ja a la pàgina, ia causa d'això podem proporcionar informació molt més immediat, que realment millorarà l'experiència de l'usuari en el nostre lloc web. Només un resum ràpid dels selectors de JavaScript. Sabem que quan es descarrega una pàgina HTML, que estarà representat en el DOM. 

El DOM record és precisament aquest gran arbre on els elements estan relacionats en aquesta jerarquia. Quan treballem amb bases de dades en conjunt de processadors 7, una de les primeres coses que es necessiten saber com fer era consultar la base de dades. Tenim aquesta gran taula d'usuaris, i de vegades només vull dir, "Només vull que alguns d'aquests usuaris que coincideixin amb alguna condició." De la mateixa manera, quan tenim el DOM necessitem alguna forma de consulta de la mateixa. Necessitem una manera de dir: "Vull que tots els botons que es veuen així "O totes les imatges de la pàgina." I aquests selectors ens permeten fer això. Així que només un resum ràpid. Aquest primer aquí, aquest # presentin, el que és que va a seleccionar? Algú se'n recorda? [Resposta dels estudiants inaudible] >> Sí, exactament. Això va a seleccionar un element a la pàgina que té un ID de presentar. I perquè hash tag diu que aquest selector es treballarà amb documents d'identitat. I el segon, això. Centrat, que el que va a seleccionar? Si. >> [Estudiant] Classe. >> Exactament. Això ara es va a seleccionar per classe. La diferència entre l'ID de classe i aquí és generalment l'ID ha de ser únic dins de qualsevol espai que vostè està buscant més. Així que si estàs buscant a través d'una pàgina web sencera, que realment només hauria de tenir un element amb aquest identificador determinat, de manera que en aquest cas de presentar. Amb les classes, d'altra banda, podem tenir més d'1 element a la mateixa pàgina amb la mateixa classe. Això podria ser útil per dir que vull seleccionar tot el que està centrada en la pàgina en lloc de només una cosa. 

I finalment, aquest últim aquí és una mica més complicat, però què és això va a seleccionar entre el DOM? [Resposta dels estudiants inaudible] >> Què és això? [Estudiant] Qualsevol cosa que sigui una etiqueta. >> Tenim 2 parts aquí. La segona part va dir que vull seleccionar aquestes etiquetes amb una etiqueta d'entrada, pel que qualsevol element que és una etiqueta d'entrada. Però jo no vull seleccionar només totes les entrades perquè una cosa així com un botó d'enviament pot ser una entrada i una mena quadre de text podria ser una entrada. Així que amb aquests claudàtors Estic dient que només voleu seleccionar els elements que són de tipus text. En algun lloc del meu etiqueta HTML que té un atribut anomenat tipus, i el valor d'atribut que ha de ser text. Llavors, què hi ha d'aquesta primera part aquí? La primera paraula d'aquest selector és la forma llavors tinc un espai i aquesta part d'entrada. Què és el que fan, posar el formulari al davant d'ella? Això va a limitar bàsicament la nostra consulta. Podria passar que tenim algunes entrades de la pàgina que no són descendents d'un formulari. El que això farà és això dir que només volen que les etiquetes d'entrada que tenen en algun lloc per sobre d'ells algun element principal d'un formulari. I així, d'aquesta manera podem fer que aquestes consultes més jeràrquiques de manera que no només ha de seleccionar tot compleix un selector donat. Podem espècie de límit de l'abast d'aquesta consulta a una altra cosa. Així que ara que sabem com seleccionar elements a la pàgina, parlarem una mica sobre AJAX. AJAX és un acrònim encara molt de moda que representa JavaScript asíncron i XML. El que passa és que XML és només una forma de representar les dades. 

Aquest tipus de popularitat perdut recentment, de manera que la X en AJAX no s'utilitza tot el temps. Bàsicament, el que AJAX ens permet fer és fer peticions HTTP a partir del context Javascript. Quan estem en el nostre navegador web i estem navegant per les pàgines i feu clic a un enllaç, el que el nostre navegador es farà és fer una petició HTTP a qualsevol enllaç que faci clic. Però això no sempre és ideal, perquè si aquest és el cas, llavors quan David deia: sempre hem de fer que els usuaris fer clic en un botó d'enviament o feu clic a un enllaç amb la finalitat de fer que alguna cosa succeeixi això va a implicar una petició HTTP. Així que amb AJAX podem fer aquestes peticions en nom Javascript. Això vol dir que cada vegada que l'usuari interactua amb la pàgina o qualsevol cosa que passi, que realment pot fer una sol · licitud mitjançant programació a algun arxiu PHP per la nostra pàgina web o qualsevol altra cosa i recuperar les dades d'aquest arxiu que escup. Fem una ullada a un exemple d'AJAX. Aquesta és la nostra pàgina de Finances CS50 amb el que espero que alguns de nosaltres estem familiaritzats. Si ens fixem en el codi HTML de la pàgina, veiem aquí que he afegit algunes coses, un dels quals m'he donat així una identificació. He dit id = "form · licita". Ho he fet només perquè farà això una mica més fàcil la selecció del DOM ja que només es pot fer una consulta molt simple. El que vull fer aquí és que vull arreglar algun problema amb CS50 Finances. Així que si anem a finance.cs50.net, cada vegada que desitgi obtenir una cita, he de fer clic en aquest botó Cita Get, i que Get botó Citar llavors em porta a una altra pàgina sencera. I si vull una altra cita, he de colpejar el botó Back i després escriure, Tinc una cita, i vaig prémer el botó Enrere. Això realment no és la millor experiència d'usuari. Qui realment utilitzar el lloc si és tan lent per obtenir els preus de les accions? Així que el que vull fer amb AJAX és eliminar aquest pas d'anar a una altra pàgina per tal de veure els resultats. 

El que realment estem demanant és només que el preu realment petit, i això és només una quantitat molt petita de dades. Així que no cal que em vagi a una altra pàgina HTML sencera, descarregar un lot nou d'HTML, potser descarregar algunes imatges més, alguns altres arxius CSS només per a mi respondre a aquesta pregunta molt simple de quant costa aquest estoc. Amb AJAX podem fer això molt més fàcil. Veiem aquí que estic vinculant en un arxiu JavaScript anomenat quote.js. Anem realment obrir aquest arxiu. No hi ha. Tots els meus arxius JavaScript estaran ubicats en HTML perquè el navegador web pot accedir-hi. Llavors tenim un directori a part aquí per JavaScript, i ara aquí és quote.js. A la part superior d'aquest arxiu és aquí diu que vol esperar que tota la pàgina es carregui abans de tractar de fer qualsevol cosa. Per què és necessari? Resulta que el següent que faré és començar a buscar un element que coincideix amb alguns selector. Si aquest Javascript és cada vegada executat abans d'aquest element és carregat a la pàgina, llavors tot el que tracte de fer és no anar a treballar perquè jo vaig a tractar de triar alguna cosa que no hi és encara. Així que aquesta línia fins a dalt diu que vull que esperis fins que tot es carrega pel que està garantit que tots els elements que estic buscant en realitat a la pàgina. Aquest signe dòlar significa aquí estic fent servir la biblioteca anomenada jQuery. Aquesta biblioteca jQuery ens permet utilitzar aquests selectors que acabem de veure. En dir $ llavors per a l'argument aquest # form-cito, Ara estic seleccionant aquesta manera que ens ho prenem un cop d'ull. Ara tinc una representació d'aquesta forma en la memòria d'alguna manera. 

En aquest objecte d'ara, aquesta representació de la forma, Ara estic usant una funció anomenada successivament. El que fa aquesta funció és que va a connectar un controlador d'esdeveniments. L'esdeveniment que escoltarem és l'esdeveniment submit. Així, quan l'usuari fa clic en què botó Enviar o premeu la tecla Intro, aquest esdeveniment es va a disparar. En connectar en això, ara puc reemplaçar el comportament per defecte del formulari. Sense aquest JavaScript, el formulari es sotmetria a qualsevol arxiu PHP es va utilitzar en aquest atribut action. Però en canvi, jo estic dient ara, espera, espera, espera, jo no vull que facis això en realitat. Vull que això passi abans d'anar i tractar d'enviar a algun arxiu PHP. Ara, què és el que vull fer? En aquest punt vull utilitzar AJAX per carregar d'alguna manera en el que el preu de les accions és. El primer que necessitem saber és quines accions de l'usuari està mirant cap amunt. Per això vaig a utilitzar un altre selector. Aquest és el tercer selector vam veure abans. Això diu que jo vull començar aquest element forma amb una identificació de la forma de cometes. A continuació, en algun lloc dins de manera que no ha de ser un element d'entrada que té un nom de símbol. Si mirem cap enrere en el nostre HTML, vam veure que teníem un input [name = símbol]. Això vol dir que això va a seleccionar la caixa de text que l'usuari escriu en. Això està bé. Tenim el quadre de text. Ara només hem de saber el que hi ha dins d'ella. Per això podem anomenar aquest mètode aquí, aquest val., i això em diu que sap el que quadre de text que té. Vull que em diguis què és el que l'usuari escriu en la caixa de text. Ara tenim una cadena anomenada símbol que és igual al que l'usuari va escriure polz Això està bé. Podem utilitzar ara aquesta cadena perquè la nostra petició. Es tracta d'una nova funció aquí, aquesta $, excepte que estem ja no serà la selecció d'elements, estarem cridant a una funció diferent que es proporciona a nosaltres per jQuery. Aquesta funció AJAX és el que realment farà aquesta petició HTTP. Així que hem de dir-li unes quantes coses. El primer que hem de dir que aquesta funció és on vull anar a la petició. En algun lloc del meu projecte tinc aquest arxiu al directori HTML anomenat quote.php. Puc accedir a aquesta imatge, vam veure, igual que aquest, si vaig a localhost / quote.php. 

Vull que el meu estigui habilitat per a fer una petició a aquesta pàgina. Quin tipus de petició ara? Vam veure abans que la forma que té method = "post" atribut, i això vol dir que farà una petició POST, pel que no posarà gens a la URL, en lloc d'una petició GET, que acaba de ser acomiadat si només accedeix a la pàgina amb el navegador web, per exemple. Ara hem dit que vull fer una petició HTTP POST a una pàgina ubicada a quote.php. Quan s'envia el formulari, recordi que pot accedir als elements d'entrada a l'interior d'aquesta forma amb la variable $ _POST. Fins ara, en la història que no s'han enviat al llarg de totes les dades encara. Ens acaba de dir que estem fent una petició AJAX i aquí hi ha el tipus de sol · licitud que estem fent. Ara hem d'enviar realment algunes dades a la pàgina. Per això podem utilitzar aquesta propietat trucada de dades. El valor d'aquesta propietat és realment una matriu associativa. La raó d'això és que ens permet enviar més de només 1 peça de dades. És per això que tenim aquestes claus aquí niat dins d'aquestes claus altres. Les claus en aquestes matrius associatives serà la mateixa cosa com els atributs de nom en els elements del nostre formulari. Això vol dir que si envio al llarg d'una clau de símbol, això vol dir que la meva pàgina PHP pot accedir a aquestes dades amb $ _POST [símbol] tal com ho vam fer abans, quan estàvem enviar un formulari. I ara les dades reals que volem enviar serà l'interior valor d'aquesta matriu associativa. 

Ens van guardar aquest text en un símbol variable anomenada, i pel que estem enviant al llarg d'avui una tecla de símbol i el valor del que l'usuari va escriure polz Ara que hem fet aquesta petició HTTP, el nostre arxiu PHP s'ha executat, i que enviarà dades de tornada ara per al client que acaba de fer aquesta petició. Ara hem de respondre al que el servidor ens va dir. Per fer això tenim aquesta última propietat aquí s'anomena èxit. El valor d'aquesta clau de l'èxit és en realitat serà una funció, i aquesta és una de les coses realment interessants que pots fer amb el llenguatge Java. No només es pot tenir INT o matrius com un valor dins d'una matriu associativa, també pot tenir una funció. Així dient èxit, aquesta és la meva clau. Un còlon diu aquí ve el valor, i ara el valor d'aquest és en realitat una funció. Així que no cal donar un nom a aquesta funció en si. Només podem dir que això serà alguna funció. Va a prendre un argument. L'argument per a aquesta funció serà qualsevol que sigui el servidor ens va enviar de tornada de la sol · licitud. Igual que quan el nostre navegador fa una petició, el servidor envia alguna cosa a canvi i el navegador que mostra, en el marc d'AJAX que acaba de fer una petició, el servidor envia alguna cosa a canvi, i ara hem de representar com una cadena. Amb aquesta cadena m'agradaria mostrar que a la pàgina. Per això vaig a tenir un selector passat. Vull seleccionar l'element amb el preu d'identificació. Això és només un div buit que he creat a la pàgina, i vull establir el contingut d'aquest div a ser el que el servidor ens van enviar de tornada. De fet, he modificat una mica quote.php. 

En lloc de cridar render i fent alguna pàgina, quote.php ara simplement es va a imprimir el valor de l'acció com una cadena. Així que si vostè anés a visitar la pàgina en realitat, vostè acaba de veure aquesta cadena petita qualsevol que sigui el preu de les accions és. Una última cosa que necessitem fer aquí és simplement assegurar-se que aquesta funció retorna false. El que això diu és que si jo estic dins d'un controlador d'esdeveniments i aquest controlador d'esdeveniments retorna false en comptes de tornar cert, això vol dir que jo no vull que l'esdeveniment original al foc. En aquest cas, si no tinguéssim cap JavaScript i ens envia un formulari, nostre navegador web que dirà: "Jo vaig a enviar aquestes dades al llarg d'" i ells et van a enviar a una altra pàgina. Com que estem utilitzant AJAX ara, no hi ha necessitat d'enviar a l'usuari a una altra pàgina. Només anem a mostrar els resultats de forma dinàmica en aquesta mateixa pàgina. Nosaltres realment no volem que anar enlloc, i em vull quedar a la mateixa pàgina. Així que tornant fals, ens assegurem que la forma no ho fa per nosaltres. Fem una ullada al que en realitat sembla. La nostra pàgina de cotitzacions es veu igual. Deixeu-me treure l'inspector aquí sota perquè puguem veure el que està passant. Que sigui una mica menys gran. Recordi que si obrim la pestanya Xarxa, aquí és on podem veure totes les peticions HTTP que s'estan produint a la pàgina. 

Per a un símbol m'ho dius a mi escriure AAPL i feu clic a Obtenir cotització. Ara hem vist que una part d'Apple costa una mica de quantitat de dòlars acaba d'aparèixer a la pàgina, però la direcció no ha canviat en absolut. De fet, aquesta és la petició HTTP que acaba de fer. Hem fet una petició POST a quote.php. Això té sentit. Això és el que el servidor ens van enviar de tornada. Ja no és aquest document gegantí HTML amb imatges i coses per l'estil, és només una línia de text, i llavors només es mostra la línia de text. Si ens remuntem als encapçalats i veure el que en realitat enviat dins d'aquesta petició HTTP, podem veure aquí que es va enviar al llarg d'una tecla de símbol i un valor de AAPL, que és el que l'usuari va escriure polz Això és bo, però tot i així és una mica molest. Encara ha de fer clic en aquest botó per obtenir la cotització d'accions. Som persones molt ocupades i no tenen temps per fer clic en els botons. Google es va adonar d'aquest petit fa un temps quan van implementar Google Instant. Què és Google Instant fa com que està escrivint simplement comença a mostrar resultats per a vostè pel que no s'ha de preocupar de tan sols fer clic a Cerca. En realitat, una divertida història relacionada amb això. Quan Google Instant va sortir, la gent estava com, "Whoa, això és súper increïble". "Això és genial." I un estudiant per la Universitat de Stanford que tenia 19 anys en el moment fet d'aquest lloc anomenat YouTube Instant. Tots YouTube Instant fa és buscar a YouTube eficaçment a l'instant. Així que en lloc d'haver d'anar a YouTube.com i premi Cercar, quan em poso a escriure alguna cosa a YouTube Instant, com CS50, podem veure aquí que està intentant en una connexió lenta a Internet poblar aquests resultats viure. Perquè en realitat podem fer una modificació molt senzilla al nostre arxiu quote.js. En aquest moment estem adjuntant aquest esdeveniment quan s'envia el formulari. Nosaltres realment no volem fer que l'usuari enviï aquesta manera mai més, així que en comptes disparar aquest esdeveniment cada vegada que l'usuari prem una tecla. Per això primer hem de canviar l'esdeveniment de presentar keyup. Això vol dir que, en lloc d'esperar que la manera de presentar, cada vegada que es prem la tecla, alguna cosa va a succeir. Ja no té sentit afegir aquest esdeveniment KeyUp per tot el formulari. Realment només es preocupen per la caixa de recerca. 

Per seleccionar que ara, podem canviar això a ser, més que la forma de cometes, forma de cometes i tindrem una entrada (escriure text =) o podríem dir (nom del símbol =) - el que vulguem. Ara hi ha una última cosa que hem de fer. Cal recordar ací que vam dir return false hem dit que no volem que esdeveniments predeterminat per disparar. Però dóna la casualitat que si desactivem que ara, qualsevol cosa que escrigui no es mostrarà en el navegador més perquè això seria el comportament predeterminat d'escriure en un quadre de text. Ja no vull canviar això, així que anem a destruir aquest return false. Si estalviem això i tornar a carregar la pàgina, ara quan començo a escriure AAPL veuràs que el preu de les accions en el fons aquí està finalitzant de forma automàtica. Així que aquí està CS50 instantània Finances. En realitat, una divertida història sobre la instantània de YouTube és que els estudiants només una mica del escriure com un projecte de 1-nit, i al dia següent se li va oferir un lloc de treball pel CEO de YouTube. Llavors, tan simple com això, CS50 estudiants, els seus projectes finals poden aconseguir-li un treball a YouTube. Una cosa així com que és una idea genial per a un projecte final, no? Vam tenir una mica de la funcionalitat existent que volíem integrar amb. Millorem l'experiència de l'usuari una mica, i de sobte buscant alguna cosa a YouTube Instant podria ser un munt més fàcil de buscar a YouTube regular. Així que això és AJAX en poques paraules. 

En els exemples que es mostren Joseph, vam veure un munt de autocompletes, i els completa automàticament són molt, molt pràctic, ja que no ha de recordar - Per exemple, si vostè no recorda el preu de les accions d'Apple i només sé que és una cosa aa, i no només que em deia: "A part d'això costa tants diners", Hi havia una mena de saber quines accions comencen amb aa. Podem fer-ho realment bé amb la biblioteca de Som-hi que ja està inclòs dins CS50 Finances. Si vostè ve aquí amb l'etiqueta de JavaScript i desplaceu-vos cap avall per TYPEAHEAD, això és només un complement agradable que algú ja va escriure per a nosaltres, i que pugui utilitzar i la seva funcionalitat com aquesta. He escrit en una A i aquí està una llista d'alguns estats que comencen amb A. Diguem que crec que és molt bo i és el moment per a mi per incloure això en la meva pàgina. Resulta que això és molt, molt simple. Anem a saltar per sobre d'aquí a quote3.js. El meu arxiu es veu una mica diferent. Aquí sota totes les meves coses AJAX és el mateix. Vull carregar les dades de saldos sense haver d'anar a una altra pàgina. Però ara vull fer servir aquest plugin. La documentació Bootstrap té grans exemples de com és exactament el que pot fer això. Vull dir: "Sóc l'entrada que vull autocompletar a" i jo vaig a cridar a aquesta funció es diu typeahead, i que va a manejar totes les coses TYPEAHEAD per a nosaltres. S'obrirà la llista, farà tots els nostres filtrat. L'única cosa que necessita saber és quines dades estem en compleció automàtica. Així que em vaig assabentar d'aquesta clau amb només llegir la documentació i mirant als exemples. Si li dono una clau d'origen, el valor d'aquesta clau és només un conjunt de coses que vull emplenament automàtic. Aquesta variable vi d'aquest altre arxiu. Obro symbols.js. 

Això és només symbols.js aquesta matriu molt, molt gran que conté cadenes de tots aquests símbols de cotització del Nasdaq. Si vull saltar de nou a l'HTML, jharvard així, vhosts, globalhost, html, plantilles, quote_form. Com que ara es diu quote3.js, deixa canviar l'arxiu JavaScript estic incloent aquí. Ara tinc quote3.js, així que em vaig a carregar a l'arxiu JavaScript separat, el que ha de Bootstrap autocompletat. Ara, quan jo salt de tornada al navegador, torneu a carregar la pàgina, i em poso a escriure aa, aquí està el meu autocompletat. I va ser realment tan simple com això. Jo tenia una línia de codi que acabo de dir, "Aquestes són les coses que vull autocompletar a" i de sobte tinc aquesta funcionalitat molt, molt agradable, amb no gaire esforç en absolut. Com estàs desenvolupant llocs web i especialment el costat frontal de les coses, vostè trobarà aquest és el cas molt. Hi ha molt, molt, molt de biblioteques gratuïtes molt interessants per aquí que fan que sigui molt fàcil de fer les coses d'aquesta manera. Algú pot pensar en cap inconvenients de simplement autocompletar en aquesta llarga llista de símbols? Què podria ser alguna cosa que no és el millor amb aquest enfocament? Si. >> [Estudiant] El temps, si vostè té un munt de [inaudible] Si. En aquest moment estem descarregant l'arxiu JavaScript enorme i hi ha un munt de símbols. I el que si tenim un munt de coses, aquest tipus podria d'augmentar la latència de cerca no només sinó també descarregar l'arxiu real. Gran. Alguna cosa més? En aquest moment no hi ha veritable sentit de pertinença. Si escric en una A, les companyies que apareixen aquí no poden ser les companyies més populars que comencen amb A. 

Abans d'entrar a Apple, que podria prendre alguns personatges més per trobar el que estic buscant. Aquesta funció Emplenament automàtic no té aquest sentit de pertinença. És només dirà: "Tot el que coincideix amb que vaig a mostrar". En lloc d'això, m'agradaria integrar d'alguna manera alguna rellevància en les meves recerques. Si em vaig d'aquí a Yahoo! Finance, finance.yahoo.com, Si tracte d'introduir un símbol en la pàgina Yahoo! Finances i em poso a escriure goog, tinc aquesta bonica llista de les coses. Clarament, sembla Finances Yahoo! està fent alguna cosa més intel · ligent aquí. Tenen certa rellevància i també tenen informació addicional com el nom de l'acció. Això és una cosa que no puc aconseguir amb només la meva llista de valors dels símbols. Vull això i per això m'ho vaig a prendre. Per això farem un parell de coses. Primer obrirem l'inspector en aquesta pàgina perquè vam veure que aquesta pàgina no es carrega en absolut, pel que és probable que l'ús d'AJAX d'alguna manera a carregar les seves dades. Podem esbrinar quines dades s'està carregant. Si faig clic en aquesta fitxa Xarxa, aquests seran totes les peticions que comencen a ser acomiadat. Ara bé, si escric en goo, podem veure que acabo de rebre una petició HTTP nova. Aquesta és, probablement, on les dades està venint. Efectivament, si miro aquesta URL, que és una mica estrany nom, podem veure que això és exactament on Yahoo és l'enviament de les seves dades. 

He creat un arxiu separat anomenat suggest.php que és molt similar a la de la funció de cerca. És, bàsicament, farà una consulta a l'URL de Yahoo, tornar algunes dades, i l'envia de nou a mi. Ara, en lloc d'utilitzar aquesta llista gran, enorme de símbols, Puc utilitzar coses bones de Yahoo rellevància, i no haver de descarregar l'arxiu massiu JavaScript. Només vaig a enderrocar els símbols de cotització realment rellevants. Entrem en això. Així html, js. Ara estem en quote4. Ara ja no estem utilitzant aquesta gran llista de fitxers JavaScript. Però hi ha un tipus reduït de problema de disseny aquí. Hem dit que l'A d'AJAX és asíncrona. El que això significa és que quan faig una petició AJAX, tan a la dreta aquí a la línia 8, que és on la meva petició AJAX és en realitat disparar. Diguem que ara tinc una mica de codi per aquí que farà algunes coses desitja alertar a l'usuari o alguna cosa canvi a la pàgina. El que no passarà és que el navegador no esperarà a que aquesta sol · licitud per continuar abans de baixar i colpejar a aquesta línia. Aquesta és la part asíncrona. Farà aquesta petició i deia: "Cada vegada que hagi acabat, "Tornar i cridar a aquesta funció que et vaig dir que et cridi l'interior de l'èxit." Això significa que no només pot descarregar tots els estocs per endavant. Hem de fer la sol · licitud i esperar que alguna cosa torni. Això vol dir que abans, podríem simplement dir-li Som-hi, "Aquí està la llista de coses que vol en funció d'autocompletar". Ja no podem fer això perquè no sabem el que volem en realitat emplenament automàtic. Per sort, Bootstrap pensat en això perquè són nois intel · ligents més enllà, i que en realitat ens va donar una altra forma de carregar aquest connector TYPEAHEAD. Abans, el valor d'aquesta propietat d'origen era aquest gran conjunt de coses que emplenament automàtic. 

Ara la propietat d'origen és en realitat una funció, i el propòsit d'aquesta funció és determinar quines són les coses a Autocomplete en som. La manera com es donarà compte d'això és que demanarà Yahoo! Finances quines són les millors coses que es Autocomplete. Per això vaig a fer una petició AJAX molt similar. Vaig a demanar aquesta pàgina a suggest.php. Vull enviar al llarg dels símbols encara. I ara el meu èxit, la documentació Bootstrap em va dir que, per poblar la llista de les coses, tot el que ha de fer és passar d'aquesta matriu ara a la funció de devolució de trucada. Espereu un minut. Si això se suposa que és una matriu i AJAX m'està enviant de nou el text, Com és això possible? Això introdueix una nova forma d'intercanvi de dades anomenats JSON. En aquest cas no només estem tornant una simple cadena de text. Ara ens enfrontem a aquesta llista més complexa de símbols de valor. Aquests símbols d'acció també pot incloure coses com el nom de l'empresa o dels preus actuals. Només mitjançant una cadena gran llarg que no està formatat d'alguna manera predictible no serà la millor manera d'obtenir aquesta informació des del servidor de Yahoo per a mi d'una manera que jo pugui comprendre fàcilment. JSON és una tecnologia que aprofita els avantatges de com crear matrius associatives en JavaScript. Això s'assembla molt a una matriu de JavaScript associatiu, i, de fet, és perquè ho és. JSON és sinònim Javascript Object Notation. Això és bàsicament un acord sobre format per a la transferència de dades en ambdós sentits. Aquí aquest objecte o JSON JSON aquesta matriu associativa m'està enviant algunes dades sobre un curs. 

Les claus d'aquest acord són coses com el curs que té un valor de CS50, i aquí podem veure que puc tenir un valor que és una matriu. Jo no he de fer coses com parse per cadenes i buscar comes i fer bogeries per l'estil. A causa d'això s'ha consignat en aquest format JSON, JavaScript i jQuery ja tenen funcions per convertir una cadena que té aquest aspecte JSON en una veritable matriu de JavaScript associatiu que podem treballar. Fer això és tan senzill com dir que ja no és aquest arxiu, suggest.php, enviar de tornada simplement una cadena de text, però sé que serà em retornant JSON. Això vol dir que JSON que es pot convertir en una matriu de JavaScript associatiu. I així, jQuery, m'agradaria que fessis això per mi. Això vol dir que aquest paràmetre de resposta aquí, això ja no és només una cadena. Perquè hem dit jQuery que aquí ve una mica de JSON, jQuery serà prou intel · ligent com per dir: "Vostè volia JSON?" "Vaig a convertir això en una matriu associativa per a tu." Anem realment fer una ullada a la fitxa Xarxa una vegada que tinguem quote4.js. Anem a canviar això i tornar a carregar la pàgina. Ara vaig a escriure a-a de nou. He fet un parell de peticions a suggest.php, però ara aquesta resposta, i no només la cadena, és JSON. Així que tinc una clau oberta arrissat dient: "Aquí ve una matriu associativa." 

La clau de la primera i única d'aquesta matriu associativa es diu símbols, i llavors aquí és un conjunt de tots els símbols rellevants venint ara des Yahoo! Finances no, d'aquesta llista gegantina. Així és com jo, simplement pot omplir aquest plugin Autocomplete amb algunes dades que no ve d'un arxiu local que ja està predeterminat sinó d'alguna cosa més. Resulta que en realitat podem prendre avantatge d'una tecnologia anomenada JSONP, o JSON amb farciment, que eliminarà aquest intermediari suggest.php. Però en lloc de fer això, anem a fer una ullada en comptes de com puc millorar això encara més. M'agrada molt TYPEAHEAD Bootstrap. És realment agradable. Però ens estem tornant bo en JavaScript i volem fer aquesta classe de nosaltres mateixos, potser fer una ullada al que aquest plugin podria estar fent. Anem a no fer servir aquesta cosa TYPEAHEAD, i tractarem de fer aquesta llista d'accions suggerides nosaltres mateixos. Aquí a quote6.php anem a començar la mateixa manera. Cada vegada que algú escriu alguna cosa, volem fer una petició AJAX. Això és similar al nostre instant original Finances CS50. En lloc de fer una petició a quote.php, ara estem fent una petició a aquest arxiu com abans, aquesta suggest.php, que només va a extreure dades de Yahoo! Finances. 

Un cop més, encara estem esperant JSON, però ara des del TYPEAHEAD no està fent això per nosaltres, també hem d'enviar pel valor que es troba dins del quadre de text actual. Ara sabem què demanar Finances Yahoo! per, i el que ara aquí és la funció que volem executar un cop la sol · licitud finalitza. No tens el plugin per fer la llista per a nosaltres, així que aquí és on estem en realitat va a construir una llista de suggeriments. Per això, igual que en PHP es concatenen aquestes cadenes grans d'HTML llavors la seva impressió, no podem fer exactament el mateix en JavaScript. En primer lloc anem a començar aquesta cadena anomenada suggeriments, i aquesta cadena és només va a contenir una mica d'HTML. Volem que sigui una llista de les coses, així que anem a començar amb aquesta llista d'etiquetes, i ara anem a iterar sobre tots els símbols que es van tornar de nou a nosaltres. Recordeu, ja ho hem dit tipus de dades: 'json', això no és una cadena. Això ja és una matriu per a nosaltres. Això és realment genial. Podem simplement dir: "Vull afegir un element de llista". El posarem dins d'un element en un costat d'això, donarem una classe de suggeriments perquè sapiguem el que és, i ara aquí és el símbol que vam tornar de Yahoo! Finances. 

Quan hem creat un element per a cada un dels símbols que hem arribat de nou, només volem tancar la llista. Així que ara suggeriments representa aquest fragment poc d'HTML que quan es posen en una pàgina que serà la llista de les coses que estem buscant. Ara anem a posar això en realitat a la pàgina. Per fer-ho realitat, he creat un altre div buit i m'he donat un ID de suggeriments. Igual que establir el contingut del div de mostrar el preu de les dades de saldos, ara només vull establir el contingut d'aquest div al que aquesta cadena és que conté aquests símbols. Mitjançant l'ús d'aquest mètode HTML, aquesta variable suggeriments, aquesta cadena, és una cadena d'HTML. Vull que prendre aquest HTML i el va posar dins del div anomenat suggeriments. Hem afegit alguna cosa a la DOM ara. Hem afegit alguns nous elements al DOM que ara podem mostrar a la pàgina. Anem a veure com es veu. Si carreguem en quote6 i ara tornem, ara quan començo a escriure AAPL, ja no hem de Bootstrap Autocomplete, però ara tenim aquesta llista que ens va fer. Això és una mica més lleig que el TYPEAHEAD Bootstrap, per exemple, però ens permet fer una altra cosa. Quan estàvem buscant a aquest plugin Som-hi, vam veure que quan Emplenament automàtic, un dels valors de autocompletat era AAPL. Això podria no ser tan útil. Com a usuari, no pot reconèixer immediatament tots els símbols de valor. El que jo sóc probablement més propensos a reconèixer són els noms reals de l'empresa. Llavors, ¿no seria realment útil si en comptes de dir AAPL aquest va dir alguna cosa com Apple Inc Com que hem rodat aquest nosaltres mateixos, podem molt fàcilment fer això. Anem a obrir el nostre fitxer última cita aquí, així que quote7. 

És el mateix. Acabo de crear un altre arxiu PHP que torni a nosaltres més que els símbols. També ens retornarà els noms de l'empresa. I el que estem fent el mateix. Estem fent una petició AJAX. Una vegada que la sol · licitud ha acabat, anem a executar aquesta funció aquí, i aquesta funció es construirà una cadena gran d'elements. Però la diferència aquí és que el valor d'aquestes llistes ja no és només el símbol, és ara el nom. Així que tenim un petit problema. Quan fem servir la nostra recerca, hem de passar d'alguna manera el símbol. No podem deixar passar una mica de recerca com Microsoft Corporation. Cal passar-MSFT. Quan estem escrivint HTML, tenim un munt de bons atributs incorporats. Una A podria haver associat un href o una classe. Però el que realment necessitem ara és que cada un d'aquests enllaços tenir un símbol d'acció associat a ell. No hi ha cap atribut incorporat d'HTML per símbol de cotització, però per sort, HTML5 ens permet crear els nostres propis atributs per ser el que vulguem. En dir de dades-symbol, he introduït un nou atribut el nom acabo de fer, i això està bé perquè em va prologar amb aquestes dades. Anem a guardar dins d'aquí el símbol de l'estoc. El que això significa és que tot i que està mostrant el valor del nom de l'empresa dins del nostre Autocomplete, encara estem recordant el símbol que està associat amb cada companyia. La manera com està fent que es troba dins d'aquest element en si. Així que això significa que hem de fer un canvi més. En fer clic ara, hem de prendre realment avantatge de l'atribut de símbol en lloc de només el seu valor. Si retrocedim, s'adjunta un controlador d'esdeveniments a suggeriments. Cada vegada que una d'aquestes suggeriments es fa clic ara, vull fer alguna cosa. El que vull fer és canviar el valor de la caixa d'entrada. Ara vull configurar aquesta funció val mateix. 

Així que sense cap argument d'aquesta funció Val torna a vostè el que ja està en el quadre de text, però si li dónes una cadena, que prendrà aquesta cadena i el va posar en el quadre de text. Estic seleccionant la casella de text de la mateixa manera. El seu nom és símbol de la forma dins cometes. Ara ho estic enviant el valor de l'atribut data-símbol. Aquesta cosa aquí és nou, aquests $ (this). El que això fa és l'element que s'ha fet clic. Podem veure aquí que no estem adjuntant un esdeveniment de clic a cada element amb una classe de suggeriment individualment. Més aviat, ens estem acostant a això una mica diferent. En canvi, ens està dient sempre que dins de res d'aquest div suggeriments, recordi que és només el recipient d'aquesta llista, si alguna cosa dins d'aquest div es fa clic i es té una classe de suggeriment, Vull que aquest esdeveniment per disparar. Bàsicament el que això vol dir que podem fer és que podem tornar a utilitzar aquest mateix controlador d'esdeveniments per a totes les coses de la llista. Així que no cal tenir un controlador d'esdeveniments per al primer element i un controlador d'esdeveniments diferent per al segon element. En el seu lloc, pot dir: "Vull que el mateix controlador d'esdeveniments per aplicar a tot en la meva llista". Però hem de saber d'alguna manera que l'element s'ha fet clic. Aquesta paraula "this" representa justament això. Aquest és l'objecte que s'ha fet clic només per l'usuari. Si tan sols fer clic a l'enllaç de tercer, el que representa un element d'aquest enllaç de tercer, el que significa que puc aconseguir el seu atribut, les dades-símbol, que sabem que ha de contenir el símbol que està associada amb la companyia que acaba de fer clic. Si saltem a la nostra pàgina de finances, podem veure ara que una vegada que comenci a escriure alguna cosa com MSFT, ja no estem rebent només els símbols de cotització, ara estem rebent les empreses reals. Però quan faig clic en una d'aquestes empreses, podem veure que en realitat estem poblant no el quadre de text amb el nom de l'empresa però amb tot el que s'emmagatzema dins dels atributs de dades. I així, si realment inspeccionar un d'aquests elements, feu clic i fent clic a Inspeccionar element, podem veure l'aspecte que té. 

Recordeu que això és una cosa que hem creat dins d'aquest bucle for quan estàvem construint aquesta cadena d'HTML. Podem veure aquí que aquestes dades-símbol té el valor de MSFT, la qual cosa és genial. Això és el que estàvem esperant. Aquest és el símbol i així és com tenim el valor que necessitem per utilitzar dins d'aquest quadre de text. Això és suficient perquè el formulari de cotització pel fet que és una mica avorrit. Farem algunes millores ràpides a la nostra pàgina de cartera. Si heu utilitzat CS50 Finances per un temps i començar a comprar i vendre una gran quantitat d'accions, finalment aquesta taula serà bastant gran, i vostè va a voler un tauler de cotitzacions, és clar. Una vegada que la taula és molt, molt gran, podria ser útil perquè l'usuari tracti de buscar-hi. Dins del quadre de cerca si em poso a escriure alguna cosa com Disney ia la recerca del meu estoc de Mickey Mouse, podem veure que la taula està filtrant sobre la base del que he escrit polz Aquesta funcionalitat es veu super complicat, però és molt, molt fàcil amb jQuery i JavaScript. Aquest arxiu portfolio.php inclou un arxiu JavaScript anomenat portfolio.js. Anem a fer una ullada a això. Així html, js, cartera. Aquí és on estem fent que la recerca a la taula. El primer que has de fer és connectar un controlador d'esdeveniments per a aquest quadre de text perquè sabem que volem que la nostra funció de filtrat per disparar cada vegada que l'usuari prem alguna cosa perquè no tenen temps per als botons de cerca. El primer que hem de fer és esbrinar el que l'usuari està buscant, tal com ho vam fer abans. Aquesta paraula clau es refereix a l'element actual de l'usuari està interactuant. 

Com que l'usuari està interactuant amb el quadre de cerca, $ This representa el quadre de cerca, així this.val ens dóna el que hi ha dins de la caixa de recerca que l'usuari està escrivint. Així doncs, ara el que vull fer és que volem iterar sobre totes les files dins de la nostra taula. Per seleccionar totes les files de la nostra taula, em va donar aquesta taula una identificació de la cartera de taula, i cada fila està representada per un element de TR, de manera que aquest selector es tornarà a mi una gran varietat de totes les files de la meva taula. Ara vull iterar sobre aquesta matriu. Podria un bucle for, però jQuery realment ens proporciona la funció bonica anomenada "cada un". Què fa cadascú és cadascú pren un argument, i aquest argument és una funció. Què farà és que aplicarà aquesta funció a cada element dins d'aquesta llista. Aquesta funció rep un argument que és i, i quan s'executa aquesta funció, aquest correu serà reemplaçat per la primera fila, després la segona fila, i després de la tercera fila. D'aquesta manera, això és el mateix que executar un bucle for i després calcular aquest element, basat en l'índex dins del seu bucle for. A cada iteració, per a cada un d'aquests elements en la taula, Vull comprovar si el text de l'element - el text de la cel · la dins de la fila - coincideix amb el que estic buscant. Aquesta gran cadena llarga dels comandaments és com jo podria fer això. En primer lloc, un cop més, això es refereix ara a - perquè està dins d'una nova funció - això és ara la fila actual a la taula. Vull aprofitar la fila actual a la taula, i vull arribar a tots els seus fills. Recordeu, el DOM és un arbre jeràrquic, el que significa que els elements tenen un nombre de fills. 

Aquesta funció. Fills tornarà a mi de nou un conjunt de tots els elements que són els fills de, en aquest cas, sèrie a la taula. Això és només simplement les cèl · lules dins de la fila. Només vull buscar a la primera cel · la. Aquesta funció. Primer diu dóna'm el primer element de la matriu. Llavors la funció text diu em exactament el que hi ha dins d'aquesta cèl · lula ja que vull buscar a aquest text. Finalment, anem a convertir-lo en minúscules, perquè puguem fer les consultes de text entre majúscules i minúscules. Finalment, volem veure si aquesta cadena dins d'una taula conté la cadena que estem buscant. La funció indexOf en JavaScript fa precisament això. Ens diu si aquesta cadena conté una altra cadena. Si bé és cert que la cel · la conté el que estic buscant, llavors vull per assegurar-se que està demostrat. El mètode xou dirà: "L'element". Si aquest no és el cas, llavors això vol dir que el que estic buscant no està contingut dins d'aquesta fila, així que vol amagar és l'usuari. Això aconsegueix que bonic efecte de filtratge on ja no veiem a tota la taula. Si vostè està interessat en com fer que aquest ticker també, anem a posar la font en línia. Però és molt simple. JQuery té mètodes impressionants per les animacions i manipulació de les propietats CSS. Per tant, això és tot per a mi. 

Llavors, què ens espera? Com veurem en uns dies, la proposta final d'un projecte s'ha de. La proposta final d'un projecte us demanarà una sèrie de preguntes, però entre ells hi haurà tres fites - una "bona" ​​fita, una fita millor, i una millor a. La idea és realment per ajudar a vostès posar les teves expectatives perquè mínimament vostè serà feliç amb la sortida del seu projecte final i que serà "bo" en la mesura que vostè es refereix. Però llavors, en l'interès d'aconseguir que vostè arribi una mica a mica millor o alguna cosa millor, també anem a ordenar d'empènyer cap a això també. El CS50 Hack-a-thon, per la seva banda, es troba en unes poques setmanes. En general, ho fem sobre una base per sorteig per l'interès, però les probabilitats són que prendrem uns pocs centenars de nosaltres en els autobusos d'enllaç des Harvard Square fins Kendall Square, on Microsoft té un preciós establiment anomenat encertadament "nerd" - la Nova Anglaterra Centre d'Investigació i Desenvolupament. Anem a arribar a les 8 pm Tindrem una mica de menjar. Al voltant d'1 a.m. tindrem menjar una mica més. Al voltant de les 5 am si vostè encara està despert ens dirigirem a IHOP o que el porti de tornada a l'escola. L'objectiu que cal submergir-se en els projectes finals al costat dels seus companys i el personal. Uns dies més tard és la Fira CS50, que és en realitat la intenció de ser una oportunitat per vostès per mostrar el seu treball i els èxits del semestre mentre que fer-se amb els altres i tenir una idea del que cada un va fer. Amb això dit, moltes gràcies a Tommy i Josep, i ens veiem el dilluns.  [Aplaudiment]